{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-indexed",
  "type": "registry:ui",
  "title": "Indexed Accordion",
  "description": "A numbered accordion with zero-padded indices, a boxed plus icon that rotates on hover and transforms on expand.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/accordion-indexed.tsx",
      "content": "\"use client\";\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AccordionIndexedItem {\n  id: string;\n  title: string;\n  content: string;\n}\n\nexport interface AccordionIndexedProps {\n  items?: AccordionIndexedItem[];\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  collapsible?: boolean;\n  className?: string;\n}\n\nconst defaultItems: AccordionIndexedItem[] = [\n  {\n    id: \"strategy\",\n    title: \"Strategy\",\n    content:\n      \"Every product starts with a question worth answering. We map user needs, business goals, and technical constraints into a focused direction before a single pixel is placed.\",\n  },\n  {\n    id: \"design\",\n    title: \"Design\",\n    content:\n      \"Interface decisions shaped by real usage patterns. Typography, spacing, and color are tuned until the experience feels inevitable rather than designed.\",\n  },\n  {\n    id: \"engineering\",\n    title: \"Engineering\",\n    content:\n      \"Components built for composition, not configuration. Server-first rendering, edge delivery, and zero-layout-shift interactions ship as defaults.\",\n  },\n  {\n    id: \"motion\",\n    title: \"Motion\",\n    content:\n      \"Animation as communication. Spring physics for direct manipulation, opacity curves for state transitions, and layout animations that preserve spatial context.\",\n  },\n  {\n    id: \"systems\",\n    title: \"Systems\",\n    content:\n      \"Tokens, primitives, and patterns that scale across surfaces. A single source of truth that keeps twenty screens consistent without slowing down any of them.\",\n  },\n  {\n    id: \"delivery\",\n    title: \"Delivery\",\n    content:\n      \"Incremental rollouts behind feature flags, performance budgets enforced in CI, and lighthouse scores that never regress. Production is the only environment that matters.\",\n  },\n];\n\nexport default function AccordionIndexed({\n  items = defaultItems,\n  defaultValue = \"engineering\",\n  value,\n  onValueChange,\n  collapsible = true,\n  className,\n}: AccordionIndexedProps) {\n  return (\n    <div className={cn(\"mx-auto w-full max-w-lg\", className)}>\n      <Accordion\n        type=\"single\"\n        defaultValue={value ? undefined : defaultValue}\n        value={value}\n        onValueChange={onValueChange}\n        collapsible={collapsible}\n      >\n        {items.map((item, index) => (\n          <AccordionItem\n            value={item.id}\n            key={item.id}\n            className=\"group/item border-border/20 last:border-b\"\n          >\n            <AccordionTrigger className=\"cursor-pointer py-4 hover:no-underline [&>svg]:hidden\">\n              <div className=\"flex items-baseline gap-4\">\n                <span className=\"shrink-0 font-mono text-lg tabular-nums text-foreground/15 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-data-[state=open]/item:text-foreground/50 group-data-[state=open]/item:translate-y-0\">\n                  {String(index + 1).padStart(2, \"0\")}\n                </span>\n                <span className=\"text-lg font-light tracking-[-0.015em] text-foreground/35 transition-all duration-300 ease-out group-hover/item:text-foreground/55 group-data-[state=open]/item:text-foreground/85\">\n                  {item.title}\n                </span>\n              </div>\n            </AccordionTrigger>\n            <AccordionContent>\n              <p className=\"pb-3 pl-[2.35rem] text-[13px] leading-[1.7] text-foreground/40\">\n                {item.content}\n              </p>\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/accordion-indexed.tsx"
    }
  ]
}