{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-animated-list",
  "title": "Animated List Demo",
  "description": "Auto-cycling notification feed with spring entry animations.",
  "registryDependencies": [
    "@unlumen-ui/animated-list"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/animated-list/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  AnimatedList,\n  type AnimationType,\n} from \"@/components/unlumen-ui/animated-list\";\n\ntype Notification = {\n  id: number;\n  icon: string;\n  title: string;\n  description: string;\n  time: string;\n};\n\nconst NOTIFICATIONS: Notification[] = [\n  {\n    id: 1,\n    icon: \"💳\",\n    title: \"Payment received\",\n    description: \"acme@corp.com · $2,400.00\",\n    time: \"just now\",\n  },\n  {\n    id: 2,\n    icon: \"🚀\",\n    title: \"Deployment succeeded\",\n    description: \"main · production · 12s\",\n    time: \"1m ago\",\n  },\n  {\n    id: 3,\n    icon: \"🔔\",\n    title: \"New subscriber\",\n    description: \"leo@unlumen.dev joined Pro\",\n    time: \"2m ago\",\n  },\n  {\n    id: 4,\n    icon: \"🛡️\",\n    title: \"Security alert\",\n    description: \"New login from Paris, FR\",\n    time: \"5m ago\",\n  },\n  {\n    id: 5,\n    icon: \"📦\",\n    title: \"Order shipped\",\n    description: \"Order #8821 is on its way\",\n    time: \"8m ago\",\n  },\n  {\n    id: 6,\n    icon: \"⭐\",\n    title: \"New review\",\n    description: '5 stars · \"Absolutely love it\"',\n    time: \"10m ago\",\n  },\n];\n\nfunction NotificationItem({ item }: { item: Notification }) {\n  return (\n    <div className=\"flex items-start gap-3 rounded-xl border border-foreground/10 bg-background/60 px-4 py-3 backdrop-blur-sm\">\n      <span className=\"text-xl leading-none mt-0.5\">{item.icon}</span>\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium leading-none truncate\">\n          {item.title}\n        </p>\n        <p className=\"text-xs text-muted-foreground mt-1 truncate\">\n          {item.description}\n        </p>\n      </div>\n      <span className=\"text-xs text-muted-foreground shrink-0 mt-0.5\">\n        {item.time}\n      </span>\n    </div>\n  );\n}\n\ninterface AnimatedListDemoProps {\n  maxVisible?: number;\n  gap?: number;\n  animation?: AnimationType;\n}\n\nexport const AnimatedListDemo = ({\n  maxVisible = 8,\n  gap = 12,\n  animation = \"scale\",\n}: AnimatedListDemoProps) => {\n  const [items, setItems] = React.useState<Notification[]>(\n    NOTIFICATIONS.slice(0, 3),\n  );\n  const counterRef = React.useRef(100);\n\n  React.useEffect(() => {\n    const pool = [...NOTIFICATIONS];\n    let poolIndex = 0;\n\n    const interval = setInterval(() => {\n      const source = pool[poolIndex % pool.length];\n      poolIndex++;\n      const newItem: Notification = {\n        ...source,\n        id: counterRef.current++,\n        time: \"just now\",\n      };\n      setItems((prev) => [newItem, ...prev].slice(0, maxVisible));\n    }, 2000);\n\n    return () => clearInterval(interval);\n  }, [maxVisible]);\n\n  return (\n    <div className=\"w-full max-w-sm mx-auto p-4\">\n      <AnimatedList\n        items={items}\n        renderItem={(item) => <NotificationItem item={item} />}\n        maxVisible={maxVisible}\n        gap={gap}\n        animation={animation}\n      />\n    </div>\n  );\n};\n\nexport default AnimatedListDemo;\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "AnimatedListDemo": {}
    }
  },
  "type": "registry:example"
}