{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "Navigation breadcrumb primitives for Tile UI.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/breadcrumb/breadcrumb.tsx",
      "type": "registry:ui",
      "target": "components/ui/breadcrumb/breadcrumb.tsx",
      "content": "import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { breadcrumbStyleKeys } from '../lib/core';\nimport type { BreadcrumbLinkBaseProps } from '../lib/core';\nimport styles from './breadcrumb.module.scss';\n\nfunction ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}>\n\t\t\t<path d=\"m9 18 6-6-6-6\" />\n\t\t</svg>\n\t);\n}\n\nfunction MoreHorizontalIcon(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"1\" />\n\t\t\t<circle cx=\"19\" cy=\"12\" r=\"1\" />\n\t\t\t<circle cx=\"5\" cy=\"12\" r=\"1\" />\n\t\t</svg>\n\t);\n}\n\nexport interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<nav ref={ref} aria-label=\"breadcrumb\" className={`${styles[breadcrumbStyleKeys.root]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</nav>\n\t);\n});\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {}\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<ol ref={ref} className={`${styles[breadcrumbStyleKeys.list]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</ol>\n\t);\n});\nBreadcrumbList.displayName = 'BreadcrumbList';\n\nexport interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {}\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<li ref={ref} className={`${styles[breadcrumbStyleKeys.item]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</li>\n\t);\n});\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, BreadcrumbLinkBaseProps {}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(({ className = '', asChild = false, children, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : 'a';\n\n\treturn (\n\t\t<Comp ref={ref} className={`${styles[breadcrumbStyleKeys.link]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n});\nBreadcrumbLink.displayName = 'BreadcrumbLink';\n\nexport interface BreadcrumbPageProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<span ref={ref} role=\"link\" aria-disabled=\"true\" aria-current=\"page\" className={`${styles[breadcrumbStyleKeys.page]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</span>\n\t);\n});\nBreadcrumbPage.displayName = 'BreadcrumbPage';\n\nexport interface BreadcrumbSeparatorProps extends React.HTMLAttributes<HTMLLIElement> {}\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<li ref={ref} role=\"presentation\" aria-hidden=\"true\" className={`${styles[breadcrumbStyleKeys.separator]} ${className}`} {...props}>\n\t\t\t{children ?? <ChevronRightIcon />}\n\t\t</li>\n\t);\n});\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator';\n\nexport interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(({ className = '', ...props }, ref) => {\n\treturn (\n\t\t<span ref={ref} role=\"presentation\" aria-hidden=\"true\" className={`${styles[breadcrumbStyleKeys.ellipsis]} ${className}`} {...props}>\n\t\t\t<MoreHorizontalIcon className={styles[breadcrumbStyleKeys.ellipsisIcon]} />\n\t\t\t<span className={styles[breadcrumbStyleKeys.srOnly]}>More</span>\n\t\t</span>\n\t);\n});\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n\nexport { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };\nexport default Breadcrumb;\n"
    },
    {
      "path": "packages/styles/scss/components/breadcrumb.module.scss",
      "type": "registry:file",
      "target": "components/ui/breadcrumb/breadcrumb.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.root {\n\t// 导航容器无额外样式\n}\n\n.list {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--tile-breadcrumb-gap, $spacing-1_5);\n\tfont-size: var(--tile-breadcrumb-font-size, $text-sm);\n\tcolor: var(--tile-breadcrumb-foreground, $muted-foreground);\n\tword-break: break-word;\n\n\t@media (min-width: 640px) {\n\t\tgap: var(--tile-breadcrumb-gap, $spacing-2_5);\n\t}\n}\n\n.item {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: $spacing-1_5;\n}\n\n.link {\n\ttransition: color $transition-fast;\n\n\t&:hover {\n\t\tcolor: var(--tile-breadcrumb-active-foreground, $foreground);\n\t}\n}\n\n.page {\n\tfont-weight: var(--tile-breadcrumb-page-font-weight, $font-normal);\n\tcolor: var(--tile-breadcrumb-active-foreground, $foreground);\n}\n\n.separator {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tcolor: var(--tile-breadcrumb-separator, inherit);\n\n\t> svg {\n\t\twidth: var(--tile-breadcrumb-separator-size, 0.875rem);\n\t\theight: var(--tile-breadcrumb-separator-size, 0.875rem);\n\t}\n}\n\n.ellipsis {\n\tdisplay: flex;\n\twidth: 2.25rem;\n\theight: 2.25rem;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.ellipsisIcon {\n\twidth: 1rem;\n\theight: 1rem;\n}\n\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder: 0;\n}\n"
    },
    {
      "path": "packages/react/src/components/breadcrumb/index.ts",
      "type": "registry:ui",
      "target": "components/ui/breadcrumb/index.ts",
      "content": "export {\n\tBreadcrumb,\n\tBreadcrumbList,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n\tBreadcrumbEllipsis,\n\ttype BreadcrumbProps,\n\ttype BreadcrumbListProps,\n\ttype BreadcrumbItemProps,\n\ttype BreadcrumbLinkProps,\n\ttype BreadcrumbPageProps,\n\ttype BreadcrumbSeparatorProps,\n\ttype BreadcrumbEllipsisProps,\n} from './breadcrumb';\n"
    }
  ]
}