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:T20a7,"use client"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; 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 } from "@/components/ui/icon"; import { Button } from "@/components/ui/button"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; const SidebarContext = React.createContext<{ open: boolean; setOpen: (open: boolean) => void; } | null>(null); export function useSidebar() { const context = React.useContext(SidebarContext); if (!context) throw new Error("Sidebar parts must be inside Sidebar or SidebarProvider"); return context; } export type SidebarProviderProps = { children: React.ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; }; export function SidebarProvider({ children, open, defaultOpen = true, onOpenChange, }: SidebarProviderProps) { const [local, setLocal] = React.useState(defaultOpen); return ( { if (open === undefined) setLocal(next); onOpenChange?.(next); }, }} > {children} ); } export const sidebarVariants = cva( "v-sidebar relative self-stretch flex shrink-0 flex-col gap-[var(--s-2)] w-[var(--sidebar-w)] min-h-0 max-h-none bg-[var(--v-structure)] text-[color:var(--on-structure)] rounded-[var(--r-panel)] pt-[var(--s-6)] px-[var(--s-4)] pb-[var(--s-5)]", ); export type SidebarProps = React.ComponentProps<"aside"> & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Container layout fills its parent; viewport layout follows the authored standalone rail. */ layout?: "container" | "viewport"; appearance?: "folio" | "index" | "drawer"; }; export function Sidebar({ open, defaultOpen = true, onOpenChange, layout = "container", appearance, ...props }: SidebarProps) { const parent = React.useContext(SidebarContext); return parent && open === undefined && onOpenChange === undefined ? ( ) : ( ); } function SidebarRail({ ref: externalMorphRef, className, ...props }: React.ComponentProps<"aside">) { const sidebar = useSidebar(); const ownedMorphRef = useMorph("surfaces", externalMorphRef); return (

); } export type SidebarHeaderProps = React.ComponentProps<"div">; export function SidebarHeader({ className, ...props }: SidebarHeaderProps) { return (

); } export type SidebarTriggerProps = React.ComponentProps<"button">; export function SidebarTrigger({ ref: externalMorphRef, className, children, onClick, ...props }: SidebarTriggerProps) { const sidebar = useSidebar(); return ( ); } export type SidebarContentProps = React.ComponentProps<"nav">; export function SidebarContent({ ref, className, ...props }: SidebarContentProps) { const flowRef = useFlowGroup(ref); return (

); } export type SidebarGroupLabelProps = React.ComponentProps<"div">; export function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps) { return (

); } export type SidebarMenuButtonProps = React.ComponentProps<"a"> & { asChild?: boolean; isActive?: boolean; label?: string; }; export function SidebarMenuButton({ ref: externalMorphRef, className, asChild, isActive, label, ...props }: SidebarMenuButtonProps) { const Comp = asChild ? Slot : "a"; const accessibleLabel = label ?? getSidebarText(props.children); const ownedMorphRef = useMorph("nav", externalMorphRef); return ( ); } export type SidebarMenuLabelProps = React.ComponentProps<"span">; export function SidebarMenuLabel({ className, ...props }: SidebarMenuLabelProps) { return ( ); } export type SidebarFooterProps = React.ComponentProps<"div">; export function SidebarFooter({ className, ...props }: SidebarFooterProps) { return (

); } export type SidebarMenuBadgeProps = React.ComponentProps<"span">; export function SidebarMenuBadge({ ref: externalMorphRef, className, ...props }: SidebarMenuBadgeProps) { const ownedMorphRef = useMorph("pills", externalMorphRef); return ( ); } function getSidebarText(children: React.ReactNode): string { return React.Children.toArray(children) .map((child) => typeof child === "string" || typeof child === "number" ? String(child) : React.isValidElement<{ children?: React.ReactNode }>(child) ? getSidebarText(child.props.children) : "", ) .filter(Boolean) .join(" "); } 51:T28b6,@layer cojeev-states { [data-slot="sidebar"] { transition: width var(--t-element) var(--enter); } [data-slot="sidebar-trigger"] .v-icon { width: 18px; height: 18px; stroke-width: 2.5; } [data-slot="sidebar-menu-button"] { cursor: pointer; transition: background var(--t-micro), color var(--t-micro); } [data-slot="sidebar-menu-button"]:hover { background: rgba(251, 244, 230, 0.07); } [data-slot="sidebar-menu-button"] .v-icon { width: 20px; height: 20px; transition: transform var(--t-element) var(--enter); } [data-slot="sidebar-menu-button"]:hover .v-icon { transform: translateY(-1px) rotate(-6deg); } [data-slot="sidebar-menu-button"]:active .v-icon { transform: scale(0.92); } [data-slot="sidebar-menu-button"][aria-current="page"], [data-slot="sidebar-menu-button"][aria-current="page"] .v-icon { color: var(--v-pink); } [data-slot="sidebar-menu-button"][aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sidebar-primary); animation: v-sidebar-breathe var(--breath) ease-in-out infinite; } [data-slot="sidebar"].-mini :is(.v-nav__label, .v-nav__group, .v-brand span:not(.v-collapse)) { display: none; } [data-slot="sidebar"].-mini .v-brand { justify-content: center; font-size: 0; min-height: 44px; gap: 0; } [data-slot="sidebar"].-mini .v-brand > *:not(.v-collapse) { display: none; } [data-slot="sidebar"].-mini .v-collapse { margin: 0; width: 44px; height: 44px; font-size: 13px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--v-pink) 28%, transparent); } [data-slot="sidebar"].-mini .v-collapse .v-icon { width: 15px; height: 15px; transform: none; } [data-slot="sidebar"].-mini .v-nav__item { justify-content: center; padding: 0; } [data-slot="sidebar"].-mini .v-nav__item::after { display: none; } [data-slot="sidebar"].-mini .v-nav__count { position: absolute; top: 4px; right: 6px; min-width: 16px; height: 16px; font-size: 9px; } :root[data-mode="dark"] [data-slot="sidebar"], :root[data-mode="dark"] [data-slot="sidebar"] :is( .v-nav, .v-nav__item, .v-nav__label, .v-icon, .v-sidebar__foot, .v-brand ) { color: var(--structure-text); } /* The collapse icon sits on pink, independently of the rail surface. */ :root[data-mode="dark"] [data-slot="sidebar"] [data-slot="sidebar-trigger"] .v-icon { color: var(--v-on-accent); } :root[data-mode="dark"] [data-slot="sidebar"] .v-nav__item[aria-current="page"], :root[data-mode="dark"] [data-slot="sidebar"] .v-nav__item[aria-current="page"] :is(.v-nav__label, .v-icon) { color: var(--v-pink); } :root[data-mode="dark"] [data-slot="sidebar"] .v-nav__item:hover:not([aria-current="page"]), :root[data-mode="dark"] [data-slot="sidebar"] .v-nav__item:hover:not([aria-current="page"]) :is(.v-nav__label, .v-icon) { color: var(--on-structure); } @keyframes v-sidebar-breathe { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { [data-slot="sidebar-menu-button"][aria-current="page"]::after { animation: none; } } /* Standalone authored rail; embedded rails keep the container sizing contract. */ [data-slot="sidebar"][data-layout="viewport"] { position: sticky; top: var(--shell-inset); min-height: calc(100vh - var(--shell-inset) * 2); max-height: calc(100vh - var(--shell-inset) * 2); } [data-slot="sidebar-content"] { --glide-fg: var(--v-pink); } [data-slot="sidebar-content"].v-glide > .v-glide__pill { background: rgba(251, 244, 230, 0.1); } [data-slot="sidebar"][data-layout="viewport"]:not(.-mini) { width: auto; } /* New compositions are opt-in; the documentation shell owns its own design. */ .v-sidebar[data-slot="sidebar"][data-appearance] { --mfill: var(--v-paper); --mstroke: var(--v-edge); --sidebar-foreground: var(--v-text); --sidebar-muted: var(--v-text-3); background: var(--v-paper); color: var(--v-text); border-radius: 24px; width: 240px; max-width: 100%; min-height: 380px; padding: 20px 12px 14px; gap: 16px; isolation: isolate; } .v-sidebar[data-slot][data-appearance]:has(> svg.v-morph) { background: transparent; } .v-sidebar[data-slot][data-appearance]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse at 12% 0%, var(--v-blue-soft), transparent 70% ); pointer-events: none; z-index: 0; } .v-sidebar[data-slot][data-appearance] > :not(svg) { position: relative; z-index: 1; } .v-sidebar[data-slot][data-appearance] .v-brand { height: auto; min-height: 44px; margin: 0; justify-content: flex-start; font-size: 17px; gap: 10px; padding-inline: 4px; color: var(--v-text); } .v-sidebar[data-slot][data-appearance] :is( .v-nav, .v-nav__item, .v-nav__label, .v-icon, .v-sidebar__foot, .v-brand ) { color: var(--v-text); } .v-sidebar[data-slot][data-appearance] .v-collapse { width: 44px; min-width: 44px; height: 44px; min-height: 44px; box-shadow: none; padding: 0; overflow: visible; } .v-sidebar[data-slot][data-appearance] .v-collapse .v-icon { color: var(--v-text); } .v-sidebar[data-slot][data-appearance] .v-nav__group { padding: 12px 10px 8px; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--v-text-3); } .v-sidebar[data-slot][data-appearance] .v-nav__item { min-height: 44px; height: auto; width: 100%; gap: 10px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; font: 400 13px/1.4 var(--font-text); } .v-sidebar[data-slot][data-appearance] .v-nav__item:hover { background: var(--v-beige); } .v-sidebar[data-slot][data-appearance] .v-nav__item[aria-current] { background: var(--v-blue-soft); box-shadow: inset 2px 0 var(--v-blue); font-weight: 600; } .v-sidebar[data-slot][data-appearance] .v-nav__item[aria-current] :is(.v-nav__label, .v-icon) { color: var(--v-text); } .v-sidebar[data-slot][data-appearance] .v-nav__item::after { display: none; animation: none; } .v-sidebar[data-slot][data-appearance] .v-nav__item .v-icon { width: 18px; height: 18px; transform: none; flex: none; } .v-sidebar[data-slot][data-appearance] .v-nav__label { white-space: normal; overflow-wrap: anywhere; } .v-sidebar[data-slot][data-appearance] .v-nav__count { background: transparent; color: var(--v-text-3); font-weight: 400; margin-inline-start: auto; } .v-sidebar[data-slot][data-appearance] .v-sidebar__foot { border-top: 1px solid var(--v-edge); padding: 14px 8px 0; font-size: 11px; line-height: 1.5; gap: 10px; } .v-sidebar[data-slot][data-appearance] .v-sidebar__foot p { margin: 0; } .v-sidebar[data-slot][data-appearance="index"] { width: 164px; min-height: 360px; border-radius: 14px; padding-inline: 10px; --mstroke: transparent; } .v-sidebar[data-slot][data-appearance="index"]::before { background: linear-gradient(var(--v-yellow-soft), transparent 55%); } .v-sidebar[data-slot][data-appearance="index"] .v-brand { flex-wrap: wrap; gap: 6px; } .v-sidebar[data-slot][data-appearance="index"] .v-sidebar-example__seal { display: none; } .v-sidebar[data-slot][data-appearance="index"] .v-nav__count { display: none; } .v-sidebar[data-slot][data-appearance="index"] .v-nav__item { padding-inline: 8px; font-size: 12px; } .v-sidebar[data-slot][data-appearance="drawer"] { width: 100%; min-height: 0; padding: 12px 0; --mstroke: transparent; } .v-sidebar[data-slot][data-appearance].-mini { width: 134px; padding-inline: 8px; } .v-sidebar[data-slot][data-appearance].-mini .v-nav__label { display: block; font-size: 11px; } .v-sidebar[data-slot][data-appearance].-mini .v-nav__item { justify-content: flex-start; gap: 8px; padding: 10px 6px; } .v-sidebar[data-slot][data-appearance].-mini .v-nav__count { display: none; } .v-sidebar[data-slot][data-appearance].-mini .v-brand { justify-content: center; } .v-sidebar[data-slot][data-appearance].-mini .v-brand > :not(.v-collapse) { display: none; } .v-sidebar[data-slot][data-appearance].-mini .v-sidebar__foot p { display: none; } .v-sidebar[data-slot][data-appearance].-mini .v-sidebar__foot .v-btn { font-size: 10px; padding-inline: 8px; } .v-sidebar-example { display: grid; gap: 24px; width: 100%; padding-inline: 18px; color: var(--v-text); } .v-sidebar-example > header { display: grid; gap: 12px; } .v-sidebar-example > header > span { font-size: 10px; letter-spacing: 0.08em; color: var(--v-text-3); } .v-sidebar-example h3 { margin: 0; font: 500 28px/1.25 var(--font-display); } .v-sidebar-example p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--v-text-2); } .v-sidebar-example__stage { display: flex; align-items: start; gap: 28px; } .v-sidebar-example__stage > article { flex: 1; min-width: 0; display: grid; gap: 18px; padding-top: 24px; } .v-sidebar-example__stage h4 { margin: 0; font: 500 25px/1.2 var(--font-display); } .v-sidebar-example__seal { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--v-blue); color: var(--v-on-accent); flex: none; } .v-sidebar-example__scroll[data-slot="scroll-area"] { --h: 250px; width: 100%; min-width: 0; border-radius: 0; background: transparent; } .v-sidebar-example__scroll.v-scroll.-plain[data-slot="scroll-area"] > [data-slot="scroll-area-viewport"] { padding: 0 12px 0 0; } .v-sidebar-example__canvas { padding: 24px; border: 1px solid var(--v-edge); border-radius: 20px; background: var(--v-paper); display: grid; gap: 20px; } .v-sidebar-example__canvas > span { font-size: 10px; color: var(--v-text-3); } .v-sidebar-example__draft { display: grid; gap: 8px; font-size: 12px; } .v-sidebar-example__stage .v-btn { min-height: 44px; } @media (max-width: 600px) { .v-sidebar-example__stage { flex-direction: column; gap: 24px; } .v-sidebar-example__stage > .v-sidebar[data-appearance]:not(.-mini) { width: 100%; } .v-sidebar-example__stage > article { width: 100%; padding-top: 0; } } @media (prefers-reduced-motion: reduce) { [data-slot="sidebar"] { transition: none; } } } 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"]}]]}],["$","$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/sidebar.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/sidebar.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/sidebar.css","content":"$51","type":"registry:file","target":"styles/cojeev/sidebar.css"}],"className":"h-[70svh] min-h-80"}]]}]