{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "breadcrumb-glass", "title": "Glass breadcrumb", "description": "Styled breadcrumb: the Glass set. 5 decorative breadcrumb variations (FrostBreadcrumb, TintBreadcrumb, SmokeBreadcrumb, CrystalBreadcrumb, DepthBreadcrumb) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.", "dependencies": [ "lucide-react@^1.23.0" ], "registryDependencies": [ "@ai2/tokens", "@ai2/glass" ], "files": [ { "path": "registry/ai2/styled/breadcrumb-glass.tsx", "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glassDepth } from \"@/registry/ai2/ui/glass\"\n\n/* Glass breadcrumb family: 5 frosted-glass containers. The trail and the\n separator are always the same; what changes is the surface carrying the trail\n (soft frost, info tint, dark smoke, sharp crystal, layered depth). The glass is\n NO LONGER hand-written: every variant derives from the glassDepth scale inside\n @ai2/glass, so the ai2 signature (top inset highlight + soft ambient shadow)\n speaks the same language in every variant.\n\n Choosing the depth (a bar-shaped control): a breadcrumb is wide but SHORT\n (h-8..h-12) and sits in the page flow. Behind a 36px bar a heavy blur gains\n almost nothing, so the scale starts LOW; only the variants that genuinely\n \"float\" move up. See the note above each variant.\n\n Color comes ONLY from tokens (via alpha color-mix), size covers the text scale\n + gap + padding. The last item is the current page (aria-current), not a link.\n Deterministic, no motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Crumb = { label: React.ReactNode; href?: string }\n\ntype Props = {\n className?: string\n size?: StyledSize\n items?: Crumb[]\n}\n\nconst trail: Record = {\n sm: \"gap-1.5 text-xs\",\n md: \"gap-2 text-sm\",\n lg: \"gap-2.5 text-sm\",\n xl: \"gap-3 text-base\",\n}\n\nconst shell: Record = {\n sm: \"h-8 rounded-lg px-2.5\",\n md: \"h-9 rounded-lg px-3\",\n lg: \"h-10 rounded-xl px-3.5\",\n xl: \"h-12 rounded-xl px-4\",\n}\n\nconst defaultItems: Crumb[] = [\n { label: \"Home\", href: \"#\" },\n { label: \"Components\", href: \"#\" },\n { label: \"Button\" },\n]\n\nconst link =\n \"inline-flex items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none\"\n\nconst current =\n \"inline-flex items-center gap-1.5 font-medium text-foreground [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none\"\n\nconst sep =\n \"flex items-center text-muted-foreground/60 [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-sm [&>i]:leading-none\"\n\n/* Shared shell: glassClassName carries each variant's glass technique. */\nfunction GlassTrail({\n className,\n size = \"md\",\n items,\n glassClassName,\n}: Props & { items: Crumb[]; glassClassName: string }) {\n return (\n \n
    \n {items.map((item, i) => {\n const last = i === items.length - 1\n return (\n
  1. \n {last || !item.href ? (\n \n {item.label}\n \n ) : (\n \n {item.label}\n \n )}\n {!last && (\n \n \n \n )}\n
    2. \n )\n })}\n
\n \n )\n}\n\n/* Frost: light frost. DEPTH sm (4px): the plainest variant, where softening the content behind the crumb slightly is enough; more would be wasted on a short bar. */\nexport function FrostBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n return (\n \n )\n}\n\n/* Tint: info-toned glass. DEPTH md (8px, the canonical default): the character is carried by the TONE, not the blur, so it stays on the scale's default step. Note: the tint has to override both the bg-* and the supports-[backdrop-filter]:bg-* step; writing only one leaves the other standing and the tone becomes invisible. */\nexport function TintBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n return (\n \n )\n}\n\n/* Smoke: dark smoke. DEPTH md (8px): DELIBERATELY the same step as Tint, because both are glass sitting at the same distance in the page flow; the difference is tone (foreground smoke versus info), not floating height. */\nexport function SmokeBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n return (\n \n )\n}\n\n/* Crystal: sharp glass. DEPTH lg (16px): its only character is being a clear\n PANEL, which means the diffusion itself; here the blur is the subject, not\n decoration.\n Note: the old `shadow-[inset_0_1px_0_0_...]` was removed - glassDepth already\n carries a [box-shadow:...] and a second shadow would silently drop the\n signature; the bright top edge is now drawn with border-t. A gradient removes\n the bg-* step but does NOT remove the supports-* step, so it is explicitly\n pulled back to bg-transparent. */\nexport function CrystalBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n return (\n \n )\n}\n\n/* Depth: layered depth. DEPTH xl (24px): the ONLY variant that earns the top of the scale, because this bar really does read as an overlay lifted off the page - the further from the surface, the more what is behind scatters. Note: the old `shadow-lg` was removed (it overrides the signature); the extra body separation now comes from a ring - a ring does not join the box-shadow group, so the signature survives. */\nexport function DepthBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/breadcrumb-glass.tsx" } ], "categories": [ "styled", "breadcrumb" ], "type": "registry:component" }