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:Taff,"use client"; import * as React from "react"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; import { useDisclosureHeight } from "@/lib/cojeev-motion/use-disclosure-height"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Icon } from "@/components/ui/icon"; import * as Primitive from "@radix-ui/react-collapsible"; export const collapsibleVariants = cva("v-collapsible"); export type CollapsibleAppearance = "inline" | "checklist" | "inspector"; export type CollapsibleProps = React.ComponentProps & { appearance?: CollapsibleAppearance; }; export function Collapsible({ className, appearance, ...props }: CollapsibleProps) { const { quiet } = useChoreography(); return ( ); } export type CollapsibleTriggerProps = React.ComponentProps< typeof Primitive.Trigger > & { indicator?: React.ReactNode }; export function CollapsibleTrigger({ className, children, indicator, ...props }: CollapsibleTriggerProps) { return ( {props.asChild ? ( children ) : ( <> {children} {indicator ?? } )} ); } export type CollapsibleContentProps = React.ComponentProps< typeof Primitive.Content >; export function CollapsibleContent({ className, ref, children, ...props }: CollapsibleContentProps) { const contentRef = React.useRef(null); React.useImperativeHandle(ref, () => contentRef.current!); useDisclosureHeight(contentRef, props.style?.animationName); return (

{children}

); } export type CollapsibleIndicatorProps = React.ComponentProps<"svg">; export function CollapsibleIndicator({ className, ...props }: CollapsibleIndicatorProps) { return ( ); } 52:T13a0,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-collapsible:where([data-slot="collapsible"], [data-slot^="collapsible-"]) [data-slot="collapsible-trigger"] { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: var(--fs-control); color: var(--muted-foreground); min-height: 44px; height: auto; } .v-collapsible:where([data-slot="collapsible"], [data-slot^="collapsible-"]) [data-slot="collapsible-trigger"]::-webkit-details-marker { display: none; } .v-collapsible:where( [data-slot="collapsible"], [data-slot^="collapsible-"] )[data-state="open"] [data-slot="collapsible-trigger"] .v-chev { transform: rotate(180deg); } .v-collapsible__body:where( [data-slot="collapsible"], [data-slot^="collapsible-"] ) { margin: 0; padding: 0; overflow: hidden; font-size: 13px; } .v-collapsible__body > [data-disclosure-inner] { padding: var(--s-3) var(--s-4); background: var(--card); border-radius: var(--r-md); } @media (prefers-reduced-motion: reduce) { [data-slot="collapsible"], [data-slot^="collapsible-"], [data-slot="collapsible"]::before, [data-slot="collapsible"]::after, [data-slot^="collapsible-"]::before, [data-slot^="collapsible-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot="collapsible-content"][data-state="open"] { animation: none; } [data-slot="collapsible-content"][data-state="closed"] { pointer-events: none; } [data-slot="collapsible-trigger"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .v-collapsible [data-slot="collapsible-content"][data-state="closed"]:not([hidden]) { display: block; animation: v-collapsible-retain var(--disclosure-exit-duration, 220ms) linear; } @keyframes v-collapsible-retain { from { visibility: visible; } to { visibility: visible; } } .v-collapsible [data-slot="collapsible-indicator"] { width: 20px; height: 20px; flex: none; transition: transform var(--t-element) var(--enter); } .v-collapsible[data-appearance] { width: 100%; max-width: 640px; min-width: 0; color: var(--v-text); } .v-collapsible[data-appearance] [data-slot="collapsible-trigger"] { width: 100%; justify-content: space-between; gap: 20px; min-height: 52px; padding: 12px 0; color: inherit; text-align: start; font-weight: 500; border-radius: 0; } .v-collapsible[data-appearance] [data-disclosure-inner] { background: transparent; padding: 4px 0 20px; border-radius: 0; } .v-collapsible[data-appearance] [data-disclosure-inner] p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--v-text-2); max-width: 60ch; } .v-collapsible[data-appearance="inline"] { border-block: 1px solid var(--v-border); } .v-collapsible__summary { display: grid; gap: 5px; } .v-collapsible__summary small { color: var(--v-text-2); font-size: 13px; font-weight: 400; line-height: 1.4; } .v-collapsible[data-appearance="checklist"] { border-radius: 20px; border: 1px solid var(--v-border); background: var(--card); padding: 10px 22px; } .v-collapsible__checklist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; } .v-collapsible__checklist li { display: flex; gap: 14px; align-items: center; min-height: 52px; font-size: 14px; line-height: 1.5; } .v-collapsible__checklist li > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50% 50% 42% 58%; background: var(--v-olive); color: var(--v-on-accent); font-size: 11px; } .v-collapsible[data-appearance="inspector"] { border-radius: 20px; border: 1px solid var(--v-border); overflow: hidden; background: var(--card); } .v-collapsible[data-appearance="inspector"] [data-slot="collapsible-trigger"] { padding: 20px; background: color-mix(in srgb, var(--v-blue) 13%, var(--card)); } .v-collapsible[data-appearance="inspector"] [data-disclosure-inner] { padding: 0 20px 12px; } .v-collapsible__inspector { margin: 0 0 12px; } .v-collapsible__inspector > div { display: grid; grid-template-columns: minmax(85px, 0.8fr) minmax(0, 1.2fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--v-border); font-size: 13px; line-height: 1.5; } .v-collapsible__inspector dt { color: var(--v-text-2); } .v-collapsible__inspector dd { margin: 0; overflow-wrap: anywhere; } .v-collapsible__link { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--v-text); font-size: 13px; text-underline-offset: 4px; } .v-collapsible[data-motion-quiet="true"] [data-slot="collapsible-indicator"] { transition: none; } @media (prefers-reduced-motion: reduce) { .v-collapsible [data-slot="collapsible-content"][data-state="closed"] { animation-duration: 0s; } } } 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","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"}]]}]}],["$","li","@radix-ui/react-collapsible",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-collapsible","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-collapsible"}]]}]}]]}],["$","$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/collapsible.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/collapsible.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/collapsible.css","content":"$52","type":"registry:file","target":"styles/cojeev/collapsible.css"}],"className":"h-[70svh] min-h-80"}]]}]