{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "description": "Navigation trail showing the current page's hierarchy.",
  "dependencies": ["lucide-react"],
  "registryDependencies": [
    "https://indiacn.in/r/theme.json",
    "https://indiacn.in/r/typography.json"
  ],
  "files": [
    {
      "path": "components/ui/breadcrumb.tsx",
      "content": "import { MoreHorizontal } from 'lucide-react';\nimport { ComponentProps } from 'react';\n\nimport { Body2, Label2 } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\n/* UX4G breadcrumb: divider \"/\", divider-color neutral-500, active-color neutral, link-color neutral-500 */\n\n/** Root navigation container for breadcrumb trails. */\nfunction Breadcrumb({ ...props }: ComponentProps<'nav'>) {\n  return <nav aria-label='breadcrumb' {...props} />;\n}\n\n/** Ordered list container for breadcrumb items. */\nfunction BreadcrumbList({ className, ...props }: ComponentProps<'ol'>) {\n  return (\n    <ol\n      className={cn(\n        'mb-4 flex list-none flex-wrap items-center gap-2 p-0 wrap-break-word',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Individual breadcrumb item wrapper. */\nfunction BreadcrumbItem({ className, ...props }: ComponentProps<'li'>) {\n  return <li className={cn('inline-flex items-center gap-2', className)} {...props} />;\n}\n\n/** Link element for navigable breadcrumb items. */\nfunction BreadcrumbLink({ className, children, ...props }: ComponentProps<'a'>) {\n  return (\n    <a\n      className={cn(\n        'hover:text-neutral text-neutral-500 no-underline transition-colors',\n        className,\n      )}\n      {...props}\n    >\n      <Body2>{children}</Body2>\n    </a>\n  );\n}\n\n/** Non-interactive element for the current page in breadcrumb. */\nfunction BreadcrumbPage({ className, children, ...props }: ComponentProps<'p'>) {\n  return (\n    <Body2 aria-current='page' className={cn('text-neutral font-medium', className)} {...props}>\n      {children}\n    </Body2>\n  );\n}\n\n/** Visual separator between breadcrumb items. */\nfunction BreadcrumbSeparator({ children, className, ...props }: ComponentProps<'li'>) {\n  return (\n    <li\n      role='presentation'\n      aria-hidden='true'\n      className={cn('text-neutral-500 [&>svg]:size-3.5', className)}\n      {...props}\n    >\n      {children ?? <Body2>/</Body2>}\n    </li>\n  );\n}\n\n/** Ellipsis indicator for collapsed breadcrumb items. */\nfunction BreadcrumbEllipsis({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      role='presentation'\n      aria-hidden='true'\n      className={cn('flex size-9 items-center justify-center text-neutral-500', className)}\n      {...props}\n    >\n      <MoreHorizontal className='size-4' />\n      <Label2 className='sr-only'>More</Label2>\n    </div>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}