51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1cd9,'use client'; import { Slot } from '@radix-ui/react-slot'; import { cva } from 'class-variance-authority'; import { ChevronRight, Ellipsis } from 'lucide-react'; import * as React from 'react'; import { focusRing } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { useLabels, usePreset } from '@/components/ui/labels-context'; // Figma Breadcrumbs (1122:153) + _Breadcrumb button base (43:3221). // Type Text | Text with line | Button primary | Button gray | Button gray with border | Path, Divider Chevron | Slash. type BreadcrumbType = 'text' | 'text-with-line' | 'button-primary' | 'button-gray' | 'button-gray-border' | 'path'; type BreadcrumbDivider = 'chevron' | 'slash'; interface BreadcrumbContextValue { type: BreadcrumbType; divider: BreadcrumbDivider; } const BreadcrumbContext = React.createContext({ type: 'text', divider: 'chevron' }); const listVariants = cva('flex flex-wrap items-center', { variants: { type: { text: 'gap-3', 'text-with-line': 'gap-3 border-y border-solid border-border-default py-2 pl-2', 'button-primary': 'gap-2', 'button-gray': 'gap-2', 'button-gray-border': 'gap-2 rounded-control bg-muted p-1', path: 'gap-gap-control', }, }, defaultVariants: { type: 'text' }, }); const itemVariants = cva( [ 'inline-flex h-control-sm items-center justify-center whitespace-nowrap rounded-item typography-text-small transition-colors', 'aria-[current=page]:text-text-default', 'aria-disabled:pointer-events-none aria-disabled:text-text-disabled', ...focusRing, ], { variants: { type: { text: 'rounded-none text-text-subtle hover:text-text-default', 'text-with-line': 'rounded-none text-text-subtle hover:text-text-default', 'button-primary': 'px-2 py-1 text-text-subtle hover:bg-background-brand-subtle aria-[current=page]:bg-background-brand-subtle', // Gray segments sit on the muted fill, which needs the on-muted role to hold 4.5:1. 'button-gray': 'px-2 py-1 text-text-subtle-on-muted hover:bg-muted aria-[current=page]:bg-muted', 'button-gray-border': 'px-2 py-1 text-text-subtle-on-muted hover:bg-background aria-[current=page]:bg-background aria-[current=page]:shadow-elevation-surface', path: 'rounded-none text-text-subtle hover:text-text-default', }, }, defaultVariants: { type: 'text' }, }, ); export interface BreadcrumbsProps extends React.ComponentPropsWithoutRef<'nav'> { type?: BreadcrumbType; divider?: BreadcrumbDivider; } const Breadcrumbs = React.forwardRef( ({ className, type = 'text', divider = 'chevron', children, 'aria-label': ariaLabelProp, ...props }, ref) => { const l = useLabels(); const ariaLabel = ariaLabelProp ?? l.breadcrumb; return ( ); }, ); Breadcrumbs.displayName = 'Breadcrumbs'; const BreadcrumbSeparator = ({ className }: { className?: string }) => { const { divider, type } = React.useContext(BreadcrumbContext); const zero = usePreset() === 'zero'; const pathSize = zero ? 'h-icon-xs w-icon-xs' : 'h-icon-2xs w-icon-2xs'; const size = type === 'path' ? pathSize : divider === 'slash' ? 'h-icon-md w-icon-md' : 'h-icon-sm w-icon-sm'; return ( ); }; // One path segment plus the divider that follows it (hidden on the last item). const BreadcrumbItem = React.forwardRef>( ({ className, children, ...props }, ref) => { const { type } = React.useContext(BreadcrumbContext); return (

{children}

); }, ); BreadcrumbItem.displayName = 'BreadcrumbItem'; export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> { asChild?: boolean; // Marks the current page: not a link, `aria-current="page"`. current?: boolean; // Unreachable level: dimmed and not focusable. disabled?: boolean; // Leading icon such as a home glyph. icon?: React.ReactNode; } const BreadcrumbLink = React.forwardRef( ({ className, asChild = false, current = false, disabled = false, icon, children, ...props }, ref) => { const { type } = React.useContext(BreadcrumbContext); const classes = cn(itemVariants({ type }), icon && !children && 'px-1', className); const content = ( <> {icon && ( )} {children} ); if (current || disabled) { // Current page and disabled levels are plain text, not links. return ( } aria-current={current ? 'page' : undefined} aria-disabled={disabled || undefined} className={classes} > {content} ); } const Comp = asChild ? Slot : 'a'; return ( {asChild && React.isValidElement(children) ? React.cloneElement(children as React.ReactElement<{ children?: React.ReactNode }>, undefined, ( <> {icon && ( )} {(children as React.ReactElement<{ children?: React.ReactNode }>).props.children} )) : content} ); }, ); BreadcrumbLink.displayName = 'BreadcrumbLink'; // Collapsed middle levels ("..."). const BreadcrumbEllipsis = ({ className, label: labelProp }: { className?: string; label?: string }) => { const l = useLabels(); const label = labelProp ?? l.moreLevels; const { type } = React.useContext(BreadcrumbContext); return ( ); }; export { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, Breadcrumbs, type BreadcrumbDivider, type BreadcrumbType }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot@^1.5.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot@^1.5.0"}]]}]}],["$","li","class-variance-authority@^0.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.0"}]]}]}],["$","li","lucide-react@^0.379.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^0.379.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/breadcrumb.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]