4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:Tf40,"use client"; import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Icon, IconButton } from "@/components/ui/icon"; export const breadcrumbVariants = cva( "v-crumbs flex flex-wrap items-center gap-[10px] text-[14.5px] text-[color:var(--v-text-2)]", ); export type BreadcrumbPresentation = "trail" | "pocket" | "directory"; export type BreadcrumbProps = React.ComponentProps<"nav"> & { presentation?: BreadcrumbPresentation; }; export function Breadcrumb({ className, presentation, ...props }: BreadcrumbProps) { return (

); } export type BreadcrumbListProps = React.ComponentProps<"ol">; export function BreadcrumbList({ className, ...props }: BreadcrumbListProps) { return (

); } export type BreadcrumbLinkProps = React.ComponentProps<"a"> & { asChild?: boolean; }; export function BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps) { const Comp = asChild ? Slot : "a"; return ( ); } export type BreadcrumbPageProps = React.ComponentProps<"span">; export function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) { return ( ); } export type BreadcrumbSeparatorProps = React.ComponentProps<"li"> & { asChild?: boolean; }; export function BreadcrumbSeparator({ children, className, asChild, ...props }: BreadcrumbSeparatorProps) { const Comp = asChild ? Slot : "li"; return ( ); } export type BreadcrumbEllipsisProps = React.ComponentProps<"span">; export function BreadcrumbEllipsis(props: BreadcrumbEllipsisProps) { return ( ); } export type BreadcrumbBackProps = React.ComponentProps<"button">; export function BreadcrumbBack({ ref, className, children, ...props }: BreadcrumbBackProps) { return ( {children ?? } ); } 52:T1645,@layer cojeev-states { [data-slot="breadcrumb-link"] { transition: color var(--t-micro); } [data-slot="breadcrumb-link"]:hover { color: var(--v-text); background: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--v-pink-deep); text-decoration-thickness: 2px; } [data-slot="breadcrumb-back"] { transition: background var(--t-micro), box-shadow var(--t-micro); } [data-slot="breadcrumb-back"]:hover { background: var(--v-pink); box-shadow: none; color: var(--v-on-accent); transform: none; } [data-slot="breadcrumb-back"] .v-icon { width: 18px; height: 18px; stroke-width: 2; } [data-slot="breadcrumb-separator"] .v-icon, [data-slot="breadcrumb"] > .v-icon { width: 14px; height: 14px; color: var(--v-text-2); stroke-width: 2; margin: 0; opacity: 0.8; } [dir="rtl"] [data-slot="breadcrumb"] .v-icon { transform: scaleX(-1); } :root[data-mode="dark"] [data-slot="breadcrumb-back"] { background: var(--v-beige-2); box-shadow: inset 0 0 0 1px var(--v-border); } [data-slot="breadcrumb"], [data-slot="breadcrumb-item"] { min-width: 0; max-width: 100%; } [data-slot="breadcrumb-link"], [data-slot="breadcrumb-page"] { overflow-wrap: anywhere; } [data-slot="breadcrumb-separator"] { flex-shrink: 0; } /* Native ancestors stay put; composition belongs to the navigation owner. */ [data-slot="breadcrumb"][data-presentation] { gap: 8px; font-size: 14px; } [data-slot="breadcrumb"][data-presentation] [data-slot="breadcrumb-link"] { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; } [data-slot="breadcrumb"][data-presentation] [data-slot="breadcrumb-page"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; line-height: 1.4; border-radius: 8px 8px 16px 8px; background: color-mix(in oklab, var(--v-yellow) 28%, var(--v-canvas)); color: var(--v-text); box-shadow: inset 0 -2px var(--v-yellow); } [data-slot="breadcrumb"][data-presentation] [data-slot="breadcrumb-page"] .v-icon { flex-shrink: 0; } [data-slot="breadcrumb"][data-presentation="pocket"] { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; border: 1px solid var(--v-border); border-radius: 18px; padding: 8px 10px; background: var(--v-canvas); } [data-slot="breadcrumb"][data-presentation="pocket"] [data-slot="breadcrumb-list"] { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; } [data-slot="breadcrumb"][data-presentation="pocket"] [data-slot="breadcrumb-item"]:last-child { flex-basis: 100%; } [data-slot="breadcrumb"][data-presentation="pocket"] [data-slot="breadcrumb-item"]:last-child > [data-slot="breadcrumb-separator"] { display: none; } [data-slot="breadcrumb"][data-presentation="pocket"] [data-slot="breadcrumb-page"] { background: transparent; box-shadow: none; padding-inline: 6px; } .v-breadcrumb-overflow { min-width: 44px; min-height: 44px; padding-inline: 10px; font-size: 22px; } [data-slot="breadcrumb"][data-presentation="directory"] { display: block; padding: 20px; border-radius: 16px; background: color-mix(in oklab, var(--v-blue) 8%, var(--v-canvas)); border: 1px solid var(--v-border); } [data-slot="breadcrumb"][data-presentation="directory"] [data-slot="breadcrumb-list"] { display: grid; gap: 0; border-inline-start: 1px solid var(--v-border); } [data-slot="breadcrumb"][data-presentation="directory"] [data-slot="breadcrumb-separator"] { display: none; } [data-slot="breadcrumb"][data-presentation="directory"] [data-slot="breadcrumb-item"] { position: relative; padding-inline-start: calc(18px + var(--crumb-depth, 0) * 14px); min-height: 52px; } [data-slot="breadcrumb"][data-presentation="directory"] [data-slot="breadcrumb-item"]::before { content: ""; position: absolute; pointer-events: none; inset-inline-start: 0; width: calc(12px + var(--crumb-depth, 0) * 14px); height: 1px; top: 26px; background: var(--v-border); } .v-breadcrumb-example { display: grid; gap: 24px; width: 100%; max-width: 760px; min-width: 0; margin-inline: auto; padding: 8px; box-sizing: border-box; } .v-breadcrumb-example__eyebrow { display: flex; gap: 8px; align-items: center; color: var(--v-text-2); font-size: 12px; } .v-breadcrumb-example__document { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding-block: 24px; border-block: 1px dashed var(--v-border); } .v-breadcrumb-example__document p { margin: 0; color: var(--v-text-2); font-size: 13px; line-height: 1.6; } .v-breadcrumb-example__document h3 { font: 500 clamp(24px, 3vw, 32px) / 1.25 var(--font-display); margin: 6px 0 12px; overflow-wrap: anywhere; } .v-breadcrumb-example__folio { font: 400 36px/1.2 var(--font-display); color: var(--v-text); display: grid; align-content: center; gap: 2px; } .v-breadcrumb-example__folio > span { font: 400 12px/1.5 var(--font-mono); color: var(--v-text-2); } .v-breadcrumb-example__footer { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .v-breadcrumb-example__footer p { flex: 1 1 180px; color: var(--v-text-2); margin: 0; font-size: 12px; line-height: 1.6; } .v-breadcrumb-example h3:focus { outline: none; } .v-breadcrumb-example h3:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; } @media (max-width: 480px) { [data-slot="breadcrumb"][data-presentation="pocket"] { gap: 4px; padding: 8px; } [data-slot="breadcrumb"][data-presentation="directory"] { padding: 12px; } } } 4c:["$","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",{"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"}]]}]}],["$","li","class-variance-authority",{"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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/icon.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/breadcrumb.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/breadcrumb.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/breadcrumb.css","content":"$52","type":"registry:file","target":"styles/cojeev/breadcrumb.css"}],"className":"h-[70svh] min-h-80"}]]}]