{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-list",
  "title": "Animated List",
  "description": "List whose items animate in sequentially with a staggered entrance.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/animated-list/animated-list.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link AnimatedList}. */\nexport type AnimatedListProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Stagger between item entrances in milliseconds. Defaults to `100`. */\n  delay?: number;\n};\n\n/**\n * Wrapper that fades and slides its children in with a staggered delay.\n *\n * Respects `prefers-reduced-motion`: items appear without motion.\n *\n * @example\n * ```tsx\n * <AnimatedList>\n *   <span>First</span>\n *   <span>Second</span>\n * </AnimatedList>\n * ```\n */\nexport const AnimatedList = ({\n  children,\n  className,\n  delay = 100,\n  ref,\n  ...props\n}: AnimatedListProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const items = React.Children.toArray(children);\n\n  return (\n    <div className={cn(\"flex flex-col gap-2\", className)} ref={ref} {...props}>\n      {items.map((child, index) => (\n        <span\n          className=\"block animate-in fade-in-0 slide-in-from-bottom-2 motion-reduce:animate-none\"\n          key={index}\n          style={{\n            animationDelay: `${index * delay}ms`,\n            animationFillMode: \"both\",\n          }}\n        >\n          {child}\n        </span>\n      ))}\n    </div>\n  );\n};\nAnimatedList.displayName = \"AnimatedList\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}