{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-orbiting-skills",
  "title": "Orbiting Skills Demo",
  "description": "Demo showing skill badges orbiting a center avatar, with cursor-following on desktop and always-on mobile mode.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@unlumen-ui/orbiting-skills"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/orbiting-skills/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n  Braces,\n  Database,\n  Figma,\n  Github,\n  Globe,\n  Layers,\n  Palette,\n  Wind,\n} from \"lucide-react\";\n\nimport {\n  OrbitingSkills,\n  type OrbitSkillItem,\n  type OrbitingSkillsProps,\n} from \"@/components/unlumen-ui/primitives/orbiting-skills\";\n\nconst ICON_SKILLS: OrbitSkillItem[] = [\n  { label: \"React\", icon: <Globe className=\"size-4\" /> },\n  { label: \"TypeScript\", icon: <Braces className=\"size-4\" /> },\n  { label: \"Tailwind\", icon: <Wind className=\"size-4\" /> },\n  { label: \"Figma\", icon: <Figma className=\"size-4\" /> },\n  { label: \"GitHub\", icon: <Github className=\"size-4\" /> },\n  { label: \"Database\", icon: <Database className=\"size-4\" /> },\n];\n\nconst TEXT_SKILLS: OrbitSkillItem[] = [\n  { label: \"Design\" },\n  { label: \"Motion\" },\n  { label: \"UX\" },\n  { label: \"CSS\" },\n  { label: \"a11y\" },\n  { label: \"Perf\" },\n];\n\ntype OrbitingSkillsDemoProps = Pick<\n  OrbitingSkillsProps,\n  \"radius\" | \"duration\" | \"showPath\" | \"followCursor\"\n>;\n\nfunction Avatar({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"flex size-20 items-center justify-center rounded-full border border-border bg-background shadow-md\">\n      {children}\n    </div>\n  );\n}\n\nexport const OrbitingSkillsDemo = ({\n  radius = 96,\n  duration = 18,\n  showPath = true,\n  followCursor = true,\n}: OrbitingSkillsDemoProps) => {\n  return (\n    <div className=\"flex min-h-[400px] flex-wrap items-center justify-center gap-24 p-16\">\n      {/* ── With Lucide icons ── */}\n      <div className=\"flex flex-col items-center gap-4\">\n        <OrbitingSkills\n          items={ICON_SKILLS}\n          radius={radius}\n          duration={duration}\n          showPath={showPath}\n          followCursor={followCursor}\n        >\n          <Avatar>\n            <Layers className=\"size-8 text-foreground/70\" />\n          </Avatar>\n        </OrbitingSkills>\n        <p className=\"text-xs text-muted-foreground\">With icons</p>\n      </div>\n\n      {/* ── Text only ── */}\n      <div className=\"flex flex-col items-center gap-4\">\n        <OrbitingSkills\n          items={TEXT_SKILLS}\n          radius={radius}\n          duration={duration}\n          showPath={showPath}\n          followCursor={followCursor}\n        >\n          <Avatar>\n            <Palette className=\"size-8 text-foreground/70\" />\n          </Avatar>\n        </OrbitingSkills>\n        <p className=\"text-xs text-muted-foreground\">Text only</p>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "OrbitingSkillsDemo": {
        "radius": {
          "value": 100,
          "min": 60,
          "max": 160,
          "step": 4
        },
        "duration": {
          "value": 18,
          "min": 5,
          "max": 40,
          "step": 1
        },
        "showPath": {
          "value": true
        },
        "followCursor": {
          "value": true
        }
      }
    }
  },
  "type": "registry:example"
}