4c: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"] 4d: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"] 4e: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"] 4f: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"] 50:T3d02,"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, type IconButtonProps, } from "@/components/ui/icon"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; import { Button } from "@/components/ui/button"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; export type CarouselPresentation = "shelf" | "story" | "index"; type CarouselState = { viewportRef: React.RefObject; count: number; current: number; canPrevious: boolean; canNext: boolean; update: () => void; scroll: (direction: number) => void; scrollTo: (index: number) => void; refresh: () => void; interrupt: () => void; settle: () => void; presentation?: CarouselPresentation; direction?: "ltr" | "rtl"; }; function slidesIn(viewport: HTMLDivElement): HTMLElement[] { const row = Array.from( viewport.querySelectorAll("[data-carousel-items]"), ).find((node) => node.closest('[data-slot="carousel-content"]') === viewport); return Array.from((row ?? viewport).children).filter( (node): node is HTMLElement => node instanceof HTMLElement, ); } function slidePosition(viewport: HTMLDivElement, slide: HTMLElement) { const view = viewport.getBoundingClientRect(), rect = slide.getBoundingClientRect(), css = getComputedStyle(viewport); const rtl = css.direction === "rtl", room = Math.max(0, viewport.scrollWidth - viewport.clientWidth); const padding = parseFloat(rtl ? css.scrollPaddingRight : css.scrollPaddingLeft) || 0; const left = viewport.scrollLeft + (rtl ? rect.right - view.right + viewport.clientLeft + padding : rect.left - view.left - viewport.clientLeft - padding); return rtl ? Math.max(-room, Math.min(0, left)) : Math.max(0, Math.min(room, left)); } const CarouselContext = React.createContext(null); export function useCarousel() { const state = React.useContext(CarouselContext); if (!state) throw new Error("Carousel parts must be inside Carousel"); return state; } export const carouselVariants = cva("v-carousel relative min-w-0"); export type CarouselProps = React.ComponentProps<"div"> & { onIndexChange?: (index: number) => void; presentation?: CarouselPresentation; }; export function Carousel({ className, children, onIndexChange, presentation, ...props }: CarouselProps) { const { quiet } = useChoreography(); const viewportRef = React.useRef(null); const currentRef = React.useRef(0), lastPosition = React.useRef(NaN); const intent = React.useRef<{ index: number; position: number } | null>(null); const indexCallback = React.useRef(onIndexChange); React.useEffect(() => { indexCallback.current = onIndexChange; }, [onIndexChange]); const [state, setState] = React.useState({ count: 0, current: 0, canPrevious: false, canNext: false, }); const update = React.useCallback(() => { const el = viewportRef.current; if (!el) return; const children = slidesIn(el), room = Math.max(0, el.scrollWidth - el.clientWidth); let current = currentRef.current; if (intent.current) { current = intent.current.index; if (Math.abs(el.scrollLeft - intent.current.position) < 2) intent.current = null; } else if ( room > 1 && (!Number.isFinite(lastPosition.current) || Math.abs(lastPosition.current - el.scrollLeft) > 0.5) ) { let distance = Infinity; children.forEach((child, index) => { const next = Math.abs(slidePosition(el, child) - el.scrollLeft); if (next <= distance) { distance = next; current = index; } }); } current = Math.max(0, Math.min(children.length - 1, current)); currentRef.current = current; lastPosition.current = el.scrollLeft; setState((old) => { const next = { count: children.length, current, canPrevious: room > 1 && current > 0, canNext: room > 1 && current < children.length - 1, }; return Object.keys(next).every( (key) => next[key as keyof typeof next] === old[key as keyof typeof next], ) ? old : next; }); }, []); const activeIndex = state.current; React.useEffect(() => { indexCallback.current?.(activeIndex); }, [activeIndex]); const seek = React.useCallback( (index: number, behavior: ScrollBehavior) => { if (!Number.isFinite(index)) return; const el = viewportRef.current; if (!el) return; const children = slidesIn(el), next = Math.max(0, Math.min(children.length - 1, Math.floor(index))), child = children[next]; if (!child) { update(); return; } const position = slidePosition(el, child); intent.current = { index: next, position }; currentRef.current = next; el.scrollTo({ left: position, behavior }); update(); }, [update], ); const scrollTo = (index: number) => seek(index, quiet ? "instant" : "smooth"); const scroll = (direction: number) => { if (Number.isFinite(direction)) scrollTo(currentRef.current + Math.sign(direction)); }; const refresh = React.useCallback(() => { const el = viewportRef.current; if (!el) return; const width = `${el.clientWidth}px`; if (el.style.getPropertyValue("--carousel-viewport-width") !== width) el.style.setProperty("--carousel-viewport-width", width); seek(currentRef.current, "instant"); }, [seek]); const interrupt = () => { intent.current = null; }; const settle = () => { if (intent.current) { intent.current = null; lastPosition.current = NaN; update(); } }; return (

{children}

); } export type CarouselContentProps = React.ComponentProps<"div"> & { /** Keep the native viewport, with the shared organic horizontal scrollbar. */ scrollbar?: boolean; }; export function CarouselContent({ ref, className, onScroll, onKeyDown, onPointerDown, onWheel, children, scrollbar = false, ...props }: CarouselContentProps) { const carousel = useCarousel(); const { viewportRef, update, refresh, presentation } = carousel; const [inheritedDirection, setInheritedDirection] = React.useState< "ltr" | "rtl" >("ltr"); const direction = props.dir === "rtl" || props.dir === "ltr" ? props.dir : (carousel.direction ?? inheritedDirection); React.useLayoutEffect(() => { if ( !scrollbar || carousel.direction || props.dir === "rtl" || props.dir === "ltr" ) return; const root = viewportRef.current?.closest( '[data-slot="carousel"]', ); if (!root) return; const read = () => setInheritedDirection( getComputedStyle(root).direction === "rtl" ? "rtl" : "ltr", ); read(); const observer = new MutationObserver(read); for (let node: HTMLElement | null = root; node; node = node.parentElement) observer.observe(node, { attributes: true, attributeFilter: ["dir"] }); return () => observer.disconnect(); }, [viewportRef, scrollbar, carousel.direction, props.dir]); const settleTimer = React.useRef | null>(null); const bindRef = React.useCallback( (node: HTMLDivElement | null) => { viewportRef.current = node; const release = assignMotionRef(ref, node); return () => { viewportRef.current = null; release(); }; }, [viewportRef, ref], ); React.useLayoutEffect(() => { const el = viewportRef.current; if (!el) return; const ro = new ResizeObserver(refresh); const observe = () => { ro.disconnect(); ro.observe(el); slidesIn(el).forEach((child) => ro.observe(child)); refresh(); }; const row = Array.from( el.querySelectorAll("[data-carousel-items]"), ).find((node) => node.closest('[data-slot="carousel-content"]') === el) ?? el; const mo = new MutationObserver(observe); mo.observe(row, { childList: true }); observe(); return () => { ro.disconnect(); mo.disconnect(); if (settleTimer.current) clearTimeout(settleTimer.current); }; }, [viewportRef, refresh, scrollbar, presentation, direction]); const attributes: React.ComponentProps<"div"> = { ...props, ref: bindRef, ...{ "data-slot": "carousel-content", "data-part": "viewport" }, tabIndex: props.tabIndex ?? 0, className: cn( scrollbar ? "v-carousel__viewport" : "v-carousel__track flex min-w-0 gap-[var(--s-4)] overflow-x-auto overflow-y-hidden [scroll-snap-type:x_mandatory] pt-[2px] px-[2px] pb-[6px] mt-[-2px] mx-[-2px] [scrollbar-width:none] [scroll-padding-inline:2px]", className, ), onScroll: (event) => { update(); onScroll?.(event); if (settleTimer.current) clearTimeout(settleTimer.current); settleTimer.current = setTimeout(carousel.settle, 140); }, onPointerDown: (event) => { carousel.interrupt(); onPointerDown?.(event); }, onWheel: (event) => { carousel.interrupt(); onWheel?.(event); }, onKeyDown: (event) => { onKeyDown?.(event); if ( event.defaultPrevented || event.target !== event.currentTarget || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key) ) return; event.preventDefault(); if (event.key === "Home") carousel.scrollTo(0); else if (event.key === "End") carousel.scrollTo(carousel.count - 1); else carousel.scroll( (event.key === "ArrowLeft" ? -1 : 1) * (getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1), ); }, }; return scrollbar ? ( ( <> {viewport} )} >

{children}

) : (

{children}

); } export type CarouselItemProps = React.ComponentProps<"div"> & { asChild?: boolean; }; export function CarouselItem({ className, asChild, ...props }: CarouselItemProps) { const Comp = asChild ? Slot : "div"; return ( ); } export type CarouselNavigationProps = React.ComponentProps<"div">; export function CarouselNavigation({ className, ...props }: CarouselNavigationProps) { return (

); } export type CarouselPreviousProps = IconButtonProps; export function CarouselPrevious({ children, onClick, disabled, ...props }: CarouselPreviousProps) { const carousel = useCarousel(); return ( { onClick?.(event); if (!event.defaultPrevented) carousel.scroll(-1); }} {...props} > {children ?? } ); } export type CarouselNextProps = IconButtonProps; export function CarouselNext({ children, onClick, disabled, ...props }: CarouselNextProps) { const carousel = useCarousel(); return ( { onClick?.(event); if (!event.defaultPrevented) carousel.scroll(1); }} {...props} > {children ?? } ); } export type CarouselDotsProps = React.ComponentProps<"div">; export function CarouselDots({ ref, className, children, ...props }: CarouselDotsProps) { const carousel = useCarousel(); const flowRef = useFlowGroup(ref); return (

{children ?? Array.from({ length: carousel.count }, (_, index) => ( ))}

); } export type CarouselDotProps = React.ComponentProps<"button"> & { index: number; }; export function CarouselDot({ index, onClick, className, children, disabled, ...props }: CarouselDotProps) { const carousel = useCarousel(); return ( ); } export type CarouselDeckProps = React.ComponentProps<"div">; export function CarouselDeck({ className, ...props }: CarouselDeckProps) { return (

); } 51:T24db,@layer cojeev-states { [data-slot="carousel-content"]::-webkit-scrollbar { display: none; } [data-slot="carousel-content"] > * { flex: 0 0 auto; scroll-snap-align: start; } [data-slot="carousel-content"] > .v-card { min-height: 150px; } [data-slot="carousel-navigation"] .v-ibtn[data-slot] { cursor: pointer; background: var(--v-canvas); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-text); transition: background var(--t-micro), opacity var(--t-micro); } [data-slot="carousel-navigation"] .v-ibtn[data-slot]:hover:not(:disabled) { background: var(--v-pink); box-shadow: none; color: var(--v-on-accent); } [data-slot="carousel-navigation"] .v-ibtn[data-slot]:active:not(:disabled) { transform: none; } [data-slot="carousel-navigation"] .v-ibtn[data-slot]:disabled { opacity: 0.4; cursor: not-allowed; } [data-slot="carousel-navigation"] > .v-ibtn + .v-ibtn { margin-left: 6px; } [data-slot="carousel-dot"] { min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 0; background: transparent; } [data-slot="carousel-dot"]:hover { background: color-mix(in oklab, var(--v-blue) 12%, transparent); } [data-slot="carousel-dot"][aria-current="true"] { width: 44px; } [data-slot="carousel-dots"]:not(.v-glide) [data-slot="carousel-dot"][aria-current="true"] { background: transparent; } [data-slot="carousel-dot"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="carousel-deck"] > .v-card { position: absolute; inset: 22px 26px 0 0; transform-origin: bottom right; transition: transform var(--t-max) var(--enter); } [data-slot="carousel-deck"] > .v-card:first-child { position: relative; inset: auto; min-height: 150px; } [data-slot="carousel-deck"] > .v-card:nth-child(2) { transform: translate(10px, -9px) rotate(1.5deg) scale(0.985); z-index: -1; } [data-slot="carousel-deck"] > .v-card:nth-child(3) { transform: translate(20px, -18px) rotate(3.5deg) scale(0.97); z-index: -2; } [data-slot="carousel-deck"]:hover > .v-card:nth-child(2) { transform: translate(12px, -11px) rotate(0) scale(0.985); } [data-slot="carousel-deck"]:hover > .v-card:nth-child(3) { transform: translate(24px, -22px) rotate(0) scale(0.97); } [data-slot="carousel-navigation"] .v-ibtn[data-slot]:disabled { background: var(--v-canvas); color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-edge); opacity: 0.4; } .v-carousel__dot-mark { display: block; width: 8px; height: 8px; border-radius: 8px; background: var(--v-border); transition: width var(--t-element), background var(--t-element); pointer-events: none; } [data-slot="carousel-dot"][aria-current="true"] .v-carousel__dot-mark { width: 22px; background: var(--v-pink); } [data-slot="carousel-navigation"] .v-ibtn[data-slot] { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } [data-slot="carousel"][data-motion="off"] .v-carousel__dot-mark { transition: none; } .v-carousel-scroll[data-slot="scroll-area"] { max-height: none; border-radius: 0; } .v-carousel__viewport { width: 100%; max-height: none; height: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; padding: 8px 8px 20px; outline-offset: -3px; } .v-carousel__viewport > div { width: 100%; table-layout: fixed; } .v-carousel__items { display: flex; gap: 16px; min-width: 100%; width: calc(var(--carousel-viewport-width, 100%) - 16px); } .v-carousel__items > * { flex: 0 0 auto; scroll-snap-align: start; min-width: 0; } .v-carousel__viewport:focus-visible { outline: 2px solid var(--ring); } .v-carousel__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; } @media (prefers-reduced-motion: reduce) { .v-carousel__dot-mark { transition: none; } } .v-carousel-example { width: 100%; max-width: 840px; min-width: 0; margin-inline: auto; color: var(--v-text); } .v-carousel-example__intro { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 20px; padding-inline: 8px; } .v-carousel-example__intro p { margin: 0 0 8px; color: var(--v-text-2); font-size: 12px; } .v-carousel-example__intro h3 { font: 500 clamp(24px, 3vw, 30px) / 1.25 var(--font-display); margin: 0; } .v-carousel-example__intro > span { display: grid; font: 400 30px/1.2 var(--font-display); font-variant-numeric: tabular-nums; } .v-carousel-example__intro small { font: 400 12px/1.5 var(--font-mono); color: var(--v-text-2); } .v-carousel-example [data-carousel-item] { width: calc(var(--carousel-viewport-width, 600px) - 16px); } .v-carousel-example[data-presentation="shelf"] [data-carousel-item] { width: min(calc(var(--carousel-viewport-width, 600px) - 48px), 420px); } .v-carousel-note { --note-accent: var(--v-pink); min-width: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border: 1px solid var(--v-border); border-radius: 18px 18px 28px 18px; overflow: hidden; background: var(--v-canvas); } .v-carousel-note[data-tone="blue"] { --note-accent: var(--v-blue); } .v-carousel-note[data-tone="yellow"] { --note-accent: var(--v-yellow); } .v-carousel-note[data-tone="olive"] { --note-accent: var(--v-olive); } .v-carousel-note__art { display: grid; place-items: center; position: relative; min-width: 0; min-height: 260px; padding: 40px 24px 24px; background: color-mix(in oklab, var(--note-accent) 13%, var(--v-canvas)); overflow: hidden; } .v-carousel-note__art > svg { position: relative; width: 100%; max-width: 230px; height: auto; z-index: 1; } .v-carousel-note__edition { position: absolute; top: 16px; inset-inline-start: 20px; font-size: 10px; letter-spacing: 0.06em; color: var(--v-text-2); } .v-carousel-note__orbit { position: absolute; width: 90%; aspect-ratio: 1; border: 1px solid color-mix(in oklab, var(--note-accent) 50%, var(--v-border)); border-radius: 50%; transform: translate(-25%, 25%); pointer-events: none; } .v-carousel-note__body { display: grid; gap: 24px; align-content: space-between; justify-items: start; padding: 28px; min-width: 0; } .v-carousel-note__body h3 { font: 500 clamp(22px, 2.8vw, 28px) / 1.25 var(--font-display); margin: 0 0 14px; } .v-carousel-note__body p { font-size: 14px; line-height: 1.6; color: var(--v-text-2); margin: 0; } .v-carousel-note__body .v-carousel-note__kicker { font-size: 11px; margin-bottom: 10px; } .v-carousel-note__body .v-carousel-note__prompt { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--v-border); font-size: 13px; } .v-carousel-note__body .v-btn { min-height: 44px; max-width: 100%; } [data-presentation="shelf"] .v-carousel-note { grid-template-columns: minmax(0, 1fr); } [data-presentation="shelf"] .v-carousel-note__art { min-height: 200px; height: 200px; } [data-presentation="shelf"] .v-carousel-note__art > svg { max-width: 170px; } [data-presentation="shelf"] .v-carousel-note__body { padding: 24px; } [data-presentation="shelf"] .v-carousel-note__prompt { display: none; } .v-carousel-example .v-carousel__nav { padding-inline: 8px; } .v-carousel-example__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: 1px dashed var(--v-border); padding: 16px 8px 0; margin-top: 18px; } .v-carousel-example__footer p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--v-text-2); } .v-carousel-example[data-presentation="index"] .v-carousel__nav { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; } .v-carousel-example[data-presentation="index"] .v-carousel__dots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 8px; } .v-carousel-example[data-presentation="index"] [data-slot="carousel-previous"] { grid-column: 2; } .v-carousel-example__thumbnail[data-slot="carousel-dot"] { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 10px; width: 100%; height: auto; min-height: 68px; text-align: start; white-space: normal; border-radius: 12px; border: 1px solid var(--v-border); color: var(--v-text-2); } .v-carousel-example__thumbnail[data-slot="carousel-dot"][aria-current="true"] { width: 100%; border-color: var(--v-pink); background: color-mix(in oklab, var(--v-pink) 12%, var(--v-canvas)); color: var(--v-text); } .v-carousel-example__thumbnail svg { width: 32px; height: 32px; pointer-events: none; } .v-carousel-example__thumbnail span { font-size: 12px; line-height: 1.4; } @media (max-width: 640px) { .v-carousel-note { grid-template-columns: minmax(0, 1fr); } .v-carousel-note__art { min-height: 180px; height: 180px; } .v-carousel-note__art > svg { max-width: 150px; } .v-carousel-note__body { padding: 20px; gap: 20px; } [data-presentation="shelf"] .v-carousel-note__body { padding: 20px; } .v-carousel-example[data-presentation="index"] .v-carousel__dots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v-carousel-example__thumbnail[data-slot="carousel-dot"] { padding: 8px; grid-template-columns: 26px minmax(0, 1fr); } .v-carousel-example__thumbnail svg { width: 26px; height: 26px; } } } 4b:["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/scroll-area.json"]}]]}],["$","$L4d",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":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/carousel.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/carousel.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/carousel.css","content":"$51","type":"registry:file","target":"styles/cojeev/carousel.css"}],"className":"h-[70svh] min-h-80"}]]}]