{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-animated",
  "title": "Breadcrumb Animated",
  "description": "Staggered breadcrumb reveal animation with overflow truncation",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/breadcrumb-animated.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface BreadcrumbItem {\n  label: string\n  href?: string\n  icon?: React.ReactNode\n}\n\nexport interface BreadcrumbAnimatedProps extends React.HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[]\n  separator?: React.ReactNode\n  maxVisible?: number\n}\n\nconst ChevronRight = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.5}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"h-3.5 w-3.5 text-muted-foreground/50\"\n  >\n    <polyline points=\"9 18 15 12 9 6\" />\n  </svg>\n)\n\nexport function BreadcrumbAnimated({\n  items,\n  separator = <ChevronRight />,\n  maxVisible,\n  className,\n  ...props\n}: BreadcrumbAnimatedProps) {\n  const visible = maxVisible ? items.slice(-maxVisible) : items\n  const hidden = maxVisible && items.length > maxVisible\n\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn(\"flex items-center\", className)} {...props}>\n      <ol className=\"flex flex-wrap items-center gap-1\">\n        {hidden && (\n          <>\n            <li className=\"flex items-center gap-1\">\n              <span className=\"cursor-default rounded px-1 text-sm font-medium text-muted-foreground select-none\">\n                &hellip;\n              </span>\n            </li>\n            <li className=\"flex items-center\">{separator}</li>\n          </>\n        )}\n        {visible.map((item, i) => {\n          const isLast = i === visible.length - 1\n          return (\n            <React.Fragment key={i}>\n              <motion.li\n                initial={{ opacity: 0, x: -8 }}\n                animate={{ opacity: 1, x: 0 }}\n                transition={{ duration: 0.2, delay: i * 0.05 }}\n                className=\"flex items-center\"\n              >\n                {item.href && !isLast ? (\n                  <a\n                    href={item.href}\n                    className=\"flex items-center gap-1 rounded px-1 py-0.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                  >\n                    {item.icon && <span className=\"opacity-70\">{item.icon}</span>}\n                    {item.label}\n                  </a>\n                ) : (\n                  <span\n                    aria-current={isLast ? \"page\" : undefined}\n                    className={cn(\n                      \"flex items-center gap-1 px-1 py-0.5 text-sm font-medium\",\n                      isLast ? \"text-foreground\" : \"text-muted-foreground\",\n                    )}\n                  >\n                    {item.icon && <span className=\"opacity-70\">{item.icon}</span>}\n                    {item.label}\n                  </span>\n                )}\n              </motion.li>\n              {!isLast && (\n                <motion.li\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ duration: 0.2, delay: i * 0.05 + 0.1 }}\n                  className=\"flex items-center\"\n                  aria-hidden=\"true\"\n                >\n                  {separator}\n                </motion.li>\n              )}\n            </React.Fragment>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/breadcrumb-animated.tsx"
    }
  ],
  "type": "registry:ui"
}