{
  "name": "breadcrumb",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "breadcrumb.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport { Fragment, type HTMLAttributes, type ReactNode } from \"react\";\r\n\r\nconst navClass = css({ fontFamily: theme.fontFamily.sans, fontSize: theme.fontSize.sm });\r\n\r\nconst listClass = css({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  flexWrap: \"wrap\",\r\n  gap: theme.space[1.5],\r\n  margin: 0,\r\n  padding: 0,\r\n  listStyle: \"none\",\r\n});\r\n\r\nconst linkClass = css({\r\n  color: theme.color.mutedForeground,\r\n  textDecoration: \"none\",\r\n  borderRadius: theme.radius.sm,\r\n  transitionProperty: \"color\",\r\n  transitionDuration: theme.duration.fast,\r\n  \"&:hover\": { color: theme.color.foreground },\r\n  \"&:focus-visible\": { outline: `2px solid ${theme.color.ring}`, outlineOffset: \"2px\" },\r\n});\r\n\r\nconst currentClass = css({\r\n  color: theme.color.foreground,\r\n  fontWeight: theme.fontWeight.medium,\r\n});\r\n\r\nconst separatorClass = css({\r\n  color: theme.color.mutedForeground,\r\n  display: \"inline-flex\",\r\n  userSelect: \"none\",\r\n});\r\n\r\nconst ellipsisClass = css({ color: theme.color.mutedForeground, padding: `0 ${theme.space[0.5]}` });\r\n\r\nexport interface BreadcrumbItem {\r\n  label: ReactNode;\r\n  href?: string;\r\n  onClick?: () => void;\r\n}\r\n\r\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\r\n  items: BreadcrumbItem[];\r\n  separator?: ReactNode;\r\n  /** Collapse the middle to an ellipsis once the trail exceeds this many items. */\r\n  maxItems?: number;\r\n  label?: string;\r\n}\r\n\r\n/**\r\n * A breadcrumb trail. The final item is marked `aria-current=\"page\"` and is not\r\n * a link; long trails collapse in the middle, always keeping the first and last\r\n * two items so the user can still see where they are and where they came from.\r\n */\r\nexport function Breadcrumb({\r\n  items,\r\n  separator = \"/\",\r\n  maxItems = 0,\r\n  label = \"Breadcrumb\",\r\n  className,\r\n  ...props\r\n}: BreadcrumbProps) {\r\n  const collapse = maxItems > 0 && items.length > maxItems;\r\n  const shown: Array<BreadcrumbItem | \"ellipsis\"> = collapse\r\n    ? [items[0] as BreadcrumbItem, \"ellipsis\", ...items.slice(-2)]\r\n    : items;\r\n\r\n  return (\r\n    <nav aria-label={label} className={className ? `${navClass} ${className}` : navClass} {...props}>\r\n      <ol className={listClass}>\r\n        {shown.map((item, index) => {\r\n          const isLast = index === shown.length - 1;\r\n          return (\r\n            <Fragment key={index}>\r\n              <li>\r\n                {item === \"ellipsis\" ? (\r\n                  <span className={ellipsisClass} aria-hidden=\"true\">\r\n                    …\r\n                  </span>\r\n                ) : isLast ? (\r\n                  <span className={currentClass} aria-current=\"page\">\r\n                    {item.label}\r\n                  </span>\r\n                ) : item.href || item.onClick ? (\r\n                  <a className={linkClass} href={item.href} onClick={item.onClick}>\r\n                    {item.label}\r\n                  </a>\r\n                ) : (\r\n                  <span className={linkClass}>{item.label}</span>\r\n                )}\r\n              </li>\r\n              {!isLast ? (\r\n                <li className={separatorClass} aria-hidden=\"true\">\r\n                  {separator}\r\n                </li>\r\n              ) : null}\r\n            </Fragment>\r\n          );\r\n        })}\r\n      </ol>\r\n    </nav>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}