{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion","lucide-react"],"description":"Animated breadcrumb navigation with stagger-in animation","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRight } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { SPRING_DEFAULT } from \"@/components/smoothui/lib/animation\";\n\n/** A single breadcrumb item definition. */\nexport type BreadcrumbItemProps = {\n  /** Display label for the breadcrumb item. */\n  label: ReactNode;\n  /** URL the breadcrumb links to. Omit for the current (last) page. */\n  href?: string;\n};\n\nexport type BreadcrumbProps = {\n  /** Ordered list of breadcrumb items. The last item is treated as the current page. */\n  items: BreadcrumbItemProps[];\n  /** Custom separator element. Defaults to a chevron icon. */\n  separator?: ReactNode;\n  /** Additional CSS classes for the nav element. */\n  className?: string;\n};\n\nconst staggerDelay = 0.04;\n\nexport default function Breadcrumb({\n  items,\n  separator,\n  className,\n}: BreadcrumbProps) {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn(\"inline-flex\", className)}>\n      <ol className=\"flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n\n          return (\n            <motion.li\n              animate={{ opacity: 1, transform: \"translateX(0px)\" }}\n              className=\"inline-flex items-center gap-1.5\"\n              initial={\n                shouldReduceMotion\n                  ? { opacity: 1 }\n                  : { opacity: 0, transform: \"translateX(-4px)\" }\n              }\n              key={\n                typeof item.label === \"string\"\n                  ? item.label\n                  : `breadcrumb-${String(index)}`\n              }\n              transition={\n                shouldReduceMotion\n                  ? { duration: 0 }\n                  : {\n                      ...SPRING_DEFAULT,\n                      delay: index * staggerDelay,\n                    }\n              }\n            >\n              {index > 0 && (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"mr-1.5 [&>svg]:size-3.5\"\n                  role=\"presentation\"\n                >\n                  {separator ?? <ChevronRight className=\"size-3.5\" />}\n                </span>\n              )}\n              {isLast ? (\n                <span\n                  aria-current=\"page\"\n                  className=\"font-normal text-foreground\"\n                >\n                  {item.label}\n                </span>\n              ) : (\n                <a\n                  className=\"transition-colors hover:text-foreground\"\n                  href={item.href ?? \"#\"}\n                >\n                  {item.label}\n                </a>\n              )}\n            </motion.li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/breadcrumb/index.tsx","type":"registry:ui"}],"name":"breadcrumb","registryDependencies":["https://smoothui.dev/r/lib.json"],"title":"Breadcrumb","type":"registry:ui"}