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:T7176,"use client"; /** * Adapted from https://www.ui-layouts.com/components/motion-drawer * MIT License — Copyright (c) 2024 UI LAYOUT * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ import * as React from "react"; import { stackOutline } from "@/lib/cojeev/stack-outline"; import * as Dialog from "@radix-ui/react-dialog"; import { useDirection } from "@radix-ui/react-direction"; import { AnimatePresence, motion, useAnimationControls, useDragControls, useIsPresent, type Transition, } from "motion/react"; import { Button } from "@/components/ui/button"; import { Icon } from "@/components/ui/icon"; import { ScrollArea, ElementScrollBar } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; export type MotionDrawerVariant = "default" | "floating" | "stack" | "bottom"; export type MotionDrawerPanel = { value: string; label: string; icon?: React.ReactNode; children: React.ReactNode; disabled?: boolean; }; export type MotionDrawerProps = Omit< React.ComponentProps<"div">, "title" | "defaultValue" > & { title: string; description?: string; triggerLabel?: string; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Logical edge, resolved against dir. Bottom trays always dismiss downward. */ side?: "start" | "end"; /** Edge navigation, content-sized panel, layered workspace or bottom action tray. */ variant?: MotionDrawerVariant; /** Panel width in pixels, bounded to the viewport. Defaults: 300 / 360 / 540 / 640. */ width?: number; enableDrag?: boolean; /** Fraction of the panel to drag toward its edge before dismissing (0.1–0.9). */ dragThreshold?: number; /** The trigger joins the close control, pushes toward the edge, or fades in place. */ buttonOpeningVariants?: "merge" | "push" | "stay"; /** Spring tuning; ignored when motion is disabled. */ animationConfig?: { stiffness?: number; damping?: number; mass?: number }; /** Mounted, selectable card surfaces for the stack variant. */ panels?: MotionDrawerPanel[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Seconds between stack-card entrances (0–0.25). */ stackStagger?: number; /** Reusable custom launcher. Its own disabled state is respected. */ trigger?: React.ReactElement; closeLabel?: string; onCloseAutoFocus?: React.ComponentProps< typeof Dialog.Content >["onCloseAutoFocus"]; }; const widths: Record = { default: 300, floating: 360, stack: 540, bottom: 640, }; const bounded = ( value: number | undefined, fallback: number, min: number, max: number, ) => value !== undefined && Number.isFinite(value) ? Math.max(min, Math.min(max, value)) : fallback; const interactive = "button, a, input, select, textarea, [contenteditable], [role=button], [role=slider], [data-no-drawer-drag]"; function useStaggeredReveal(count: number, enabled: boolean, stagger: number) { const [revealed, setRevealed] = React.useState(0); React.useEffect(() => { if (!enabled) return; const timers = [ window.setTimeout(() => setRevealed(0), 0), ...Array.from({ length: count }, (_, index) => window.setTimeout( () => setRevealed((current) => Math.max(current, index + 1)), index * stagger * 1000, ), ), ]; return () => timers.forEach(window.clearTimeout); }, [count, enabled, stagger]); return enabled ? revealed : count; } function StackPanels({ panels, value, defaultValue, onValueChange, enabled, transition, stagger, direction, physical, closeLabel, }: { panels: MotionDrawerPanel[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; enabled: boolean; transition: Transition; stagger: number; direction: "ltr" | "rtl"; physical: "left" | "right"; closeLabel: string; }) { const enabledPanels = panels.filter((item) => !item.disabled); const fallback = enabledPanels[0]?.value; const exists = (candidate: string | undefined) => panels.some((item) => item.value === candidate); const enabledChoice = (candidate: string | undefined) => panels.some((item) => item.value === candidate && !item.disabled); const [localValue, setLocalValue] = React.useState(() => enabledChoice(defaultValue) ? defaultValue : fallback, ); const activeValue = exists(value) ? value : exists(localValue) ? localValue : fallback; const activePanel = panels.find((item) => item.value === activeValue); const focusValue = activePanel?.disabled ? fallback : activeValue; const groupId = React.useId(); const tabRefs = React.useRef>([]); const deckRef = React.useRef(null); const [deckSize, setDeckSize] = React.useState({ width: 0, height: 0, tabHeight: 48, }); const revealed = useStaggeredReveal(panels.length, enabled, stagger); const activeIndex = Math.max( 0, panels.findIndex((item) => item.value === activeValue), ); const edge = physical === "left" ? -1 : 1; React.useLayoutEffect(() => { const deck = deckRef.current; if (!deck) return; const measure = () => { const { width, height } = deck.getBoundingClientRect(); const tabHeight = matchMedia("(max-width: 480px)").matches ? 64 : 48; setDeckSize((current) => current.width === width && current.height === height && current.tabHeight === tabHeight ? current : { width, height, tabHeight }, ); }; measure(); const observer = new ResizeObserver(measure); observer.observe(deck); return () => observer.disconnect(); }, []); const select = (next: MotionDrawerPanel) => { if (next.disabled || next.value === activeValue) return; if (value === undefined) setLocalValue(next.value); onValueChange?.(next.value); }; const focusAndSelect = (index: number) => { const next = panels[index]; if (!next || next.disabled) return; tabRefs.current[index]?.focus(); select(next); }; const move = (from: number, step: number) => { if (!enabledPanels.length) return; for (let distance = 1; distance <= panels.length; distance += 1) { const index = (from + step * distance + panels.length) % panels.length; if (!panels[index]?.disabled) return focusAndSelect(index); } }; return (

{panels.map((item, index) => { const active = item.value === activeValue; const tabId = `${groupId}-tab-${index}`; const paneId = `${groupId}-pane-${index}`; const depth = active ? 0 : (index - activeIndex + panels.length) % panels.length || panels.length; // Keep every handle readable: a full-height rotated card can move its // header much farther than its small angle suggests on narrow screens. const peekBudget = Math.min( 24, (deckSize.width / panels.length) * 0.06, ); const x = active ? 0 : Math.min(20, depth * 7, peekBudget * 0.4); const y = active ? 0 : Math.min(6, depth * 2); const scale = active ? 1 : Math.max(0.992, 1 - depth * 0.002); const desiredRotation = Math.min(2.4, depth * 0.8); const horizontalRoom = Math.max(0, peekBudget - x); const verticalRoom = Math.max(0, 30 - y); const horizontalRotation = deckSize.height ? (Math.asin( Math.min(1, horizontalRoom / (scale * deckSize.height)), ) * 180) / Math.PI : 0; const verticalRotation = deckSize.width ? (Math.asin( Math.min(1, verticalRoom / ((scale * deckSize.width) / 2)), ) * 180) / Math.PI : 0; const rotation = Math.min( desiredRotation, horizontalRotation, verticalRotation, ); const entered = { x: -edge * x, y, rotate: -edge * rotation, scale, opacity: 1, }; const concealed = { ...entered, x: edge * (48 + index * 10), opacity: 0, }; return ( index ? entered : concealed} exit={enabled ? { opacity: 0 } : undefined} transition={enabled ? transition : { duration: 0 }} >

{active && (

{item.icon && ( )} {item.label}

)}

); })}

); } /** Keep native pan/focus geometry, with one scoped scrollbar beside the body. */ function DrawerBody({ children }: { children: React.ReactNode }) { const [element, setElement] = React.useState(null); const content = React.useRef(null); const [contentSize, setContentSize] = React.useState(""); React.useEffect(() => { const node = content.current; if (!node) return; const observer = new ResizeObserver(() => setContentSize(`${node.scrollWidth}:${node.scrollHeight}`), ); observer.observe(node); return () => observer.disconnect(); }, []); return (

{children}

); } function DrawerPanel({ title, description, children, variant, physical, direction, width, enableDrag, threshold, enabled, transition, dismiss, stackPanels, stackStagger, closeLabel, onCloseAutoFocus, }: { title: string; description?: string; children: React.ReactNode; variant: MotionDrawerVariant; physical: "left" | "right"; direction: "ltr" | "rtl"; width: number; enableDrag: boolean; threshold: number; enabled: boolean; transition: Transition; dismiss: () => void; stackPanels?: React.ReactNode; closeLabel: string; stackStagger: number; onCloseAutoFocus?: React.ComponentProps< typeof Dialog.Content >["onCloseAutoFocus"]; }) { const panel = React.useRef(null); const controls = useAnimationControls(); const drag = useDragControls(); const present = useIsPresent(); const bottom = variant === "bottom"; const hasStackPanels = stackPanels !== undefined; const revealedSheets = useStaggeredReveal(2, enabled, stackStagger); const [extent, setExtent] = React.useState(width); const entered = { x: 0, y: 0, scale: 1, opacity: 1, rotate: 0 }; const hidden = bottom ? { ...entered, y: "calc(100% + 24px)" } : { ...entered, x: variant === "default" ? physical === "left" ? "-100%" : "100%" : physical === "left" ? "calc(-100% - 48px)" : "calc(100% + 48px)", ...(variant === "floating" ? { scale: 0.96, opacity: 0 } : {}), ...(variant === "stack" ? { rotate: physical === "left" ? -2 : 2 } : {}), }; React.useEffect(() => { const element = panel.current; if (!element) return; const measure = () => setExtent(bottom ? element.clientHeight : element.clientWidth); const observer = new ResizeObserver(measure); measure(); observer.observe(element); return () => observer.disconnect(); }, [bottom]); React.useEffect(() => { if (!present) return; if (!enabled) controls.set({ x: 0, y: 0, scale: 1, opacity: 1, rotate: 0 }); else void controls.start({ x: 0, y: 0, scale: 1, opacity: 1, rotate: 0 }); }, [controls, enabled, present]); React.useEffect(() => () => controls.stop(), [controls]); return ( { event.preventDefault(); requestAnimationFrame(() => panel.current?.focus({ preventScroll: true }), ); }} onCloseAutoFocus={onCloseAutoFocus} > { if ( !enableDrag || event.button !== 0 || !(event.target instanceof Element) || event.target.closest(interactive) ) return; // A vertical tray only drags from its header so its content can scroll. if (bottom && !event.target.closest(".v-motion-drawer__top")) return; drag.start(event); }} onDragEnd={(_, info) => { const travel = bottom ? info.offset.y : physical === "left" ? -info.offset.x : info.offset.x; if (travel > extent * threshold) dismiss(); // Also settle if a controlled caller declines the close request. void controls.start({ x: 0, y: 0, transition }); }} onPointerCancel={() => { void controls.start({ x: 0, y: 0, transition }); }} > {variant === "stack" && !hasStackPanels && [0, 1].map((index) => ( index ? { x: 0, opacity: 1 } : { x: physical === "left" ? -32 - index * 12 : 32 + index * 12, opacity: 0, } } transition={enabled ? transition : { duration: 0 }} /> ))}

{hasStackPanels ? ( <> {title} {description ?? "Choose a card and use its controls."} ) : (

{bottom && (

)} {hasStackPanels ? (

{stackPanels}

) : ( {children} )}

); } /** Reference geometry and drag interaction, with Radix focus, scroll and dismissal semantics. */ export function MotionDrawer({ title, description, triggerLabel = "Open navigation", open, defaultOpen = false, onOpenChange, side = "start", variant = "default", width, enableDrag = true, dragThreshold = 0.3, buttonOpeningVariants = "merge", animationConfig, panels, value, defaultValue, onValueChange, stackStagger = 0.09, trigger: customTrigger, closeLabel = "Close navigation", onCloseAutoFocus, children, className, ref, ...props }: MotionDrawerProps) { const [localOpen, setLocalOpen] = React.useState(defaultOpen); const [toggleOffset, setToggleOffset] = React.useState({ x: 0, y: 0 }); const host = React.useRef(null); const trigger = React.useRef(null); const launcher = React.useRef(null); const { enabled } = useMotionVisibility(host); const direction = useDirection( props.dir === "rtl" || props.dir === "ltr" ? props.dir : undefined, ); const physical = (side === "start") !== (direction === "rtl") ? "left" : "right"; const isOpen = open ?? localOpen; const panelWidth = bounded(width, widths[variant], 200, 960); const threshold = bounded(dragThreshold, 0.3, 0.1, 0.9); const stagger = bounded(stackStagger, 0.09, 0, 0.25); const transition: Transition = enabled ? { type: "spring", stiffness: bounded(animationConfig?.stiffness, 180, 40, 600), damping: bounded(animationConfig?.damping, 26, 15, 60), mass: bounded(animationConfig?.mass, 1, 0.5, 2), } : { duration: 0 }; React.useLayoutEffect(() => { if (isOpen && launcher.current) { const rect = launcher.current.getBoundingClientRect(); const transform = new DOMMatrixReadOnly( getComputedStyle(launcher.current).transform, ); const inset = variant === "default" ? 0 : variant === "stack" ? 24 : 16; const actualWidth = Math.min( panelWidth, window.innerWidth - Math.max(32, inset * 2), ); const left = physical === "left" ? inset : window.innerWidth - inset - actualWidth; // Inline launchers need measured travel to meet the reference's close control. const x = buttonOpeningVariants === "merge" ? left + actualWidth - 52 - (rect.x + rect.width / 2 - transform.m41) : buttonOpeningVariants === "push" ? (physical === "left" ? -1 : 1) * 40 : 0; setToggleOffset({ x: variant === "bottom" ? 0 : x, y: buttonOpeningVariants === "merge" && variant !== "bottom" ? inset + 30 - (rect.y + rect.height / 2 - transform.m42) : 0, }); } }, [isOpen, panelWidth, physical, variant, buttonOpeningVariants]); const change = (next: boolean) => { if (open === undefined) setLocalOpen(next); onOpenChange?.(next); }; const hostRef = React.useCallback( (node: HTMLDivElement | null) => { host.current = node; return assignMotionRef(ref, node); }, [ref], ); return (

{customTrigger ?? ( )} {isOpen && ( change(false)} closeLabel={closeLabel} onCloseAutoFocus={onCloseAutoFocus} stackStagger={stagger} stackPanels={ variant === "stack" && panels?.length ? ( ) : undefined } > {children} )}

); } 52:T2e38,@layer cojeev-states { .v-motion-drawer__launcher { display: inline-flex; max-width: 100%; vertical-align: middle; } .v-motion-drawer__trigger { gap: 10px; max-width: 100%; } .v-motion-drawer__overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 0.3); z-index: calc(var(--z-sheet, 80) - 1); } .v-motion-drawer__panel { position: fixed; top: 0; bottom: 0; width: min(var(--drawer-width, 300px), calc(100vw - 32px)); max-width: 100%; z-index: var(--z-sheet, 80); color: var(--v-text); font-family: var(--font-text); outline: none; touch-action: pan-y; isolation: isolate; } .v-motion-drawer__panel[data-side="left"] { left: 0; } .v-motion-drawer__panel[data-side="right"] { right: 0; } .v-motion-drawer__surface { position: relative; display: flex; flex-direction: column; height: 100%; max-height: inherit; min-height: 0; background: var(--v-canvas); border-radius: inherit; box-shadow: 8px 1px 21px rgb(17 17 26 / 0.1); } .v-motion-drawer__top { position: relative; flex: none; padding: 60px 30px 14px; } .v-motion-drawer__title { margin: 0; font: 600 20px/1.3 var(--font-display); letter-spacing: -0.02em; } .v-motion-drawer__close { position: absolute; top: 8px; right: 30px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--v-text); cursor: pointer; transition: background 0.18s, transform 0.18s; } .v-motion-drawer__close:hover { background: var(--v-beige); transform: none; } .v-motion-drawer__close:active { transform: none; } .v-motion-drawer__close .v-icon { transition: transform var(--t-element) var(--enter); } .v-motion-drawer__close:hover .v-icon { transform: rotate(90deg); } .v-motion-drawer__close.v-btn { padding: 0; min-width: 44px; min-height: 44px; transform: none; } .v-motion-drawer__close.v-btn:has(> svg.v-morph) { background: transparent; } .v-motion-drawer__close:focus-visible { outline: 2px solid var(--v-brand); outline-offset: 2px; } .v-motion-drawer__description { margin: 10px 0 0; font: 14px/1.5 var(--font-text); color: var(--v-text-2); } .v-motion-drawer__body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 30px 30px; scrollbar-width: thin; scrollbar-color: var(--v-text-3) transparent; } .v-motion-drawer__body::-webkit-scrollbar { width: 5px; height: 5px; } .v-motion-drawer__body::-webkit-scrollbar-thumb { background: var(--v-text-3); border-radius: 8px; } .v-motion-drawer__body-region { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; min-width: 0; flex: 1; } .v-motion-drawer__body-region > .v-motion-drawer__body { min-width: 0; overflow-wrap: anywhere; } .v-motion-drawer__body-region > [data-slot="element-scrollbar"] { top: 4px; bottom: 20px; inset-inline-end: 4px; } .v-motion-drawer__body nav a { display: block; padding: 7px 8px; border-radius: 6px; text-decoration: none; color: var(--v-text); transition: background 0.16s; } .v-motion-drawer__body nav a:hover { background: var(--v-beige); } .v-motion-drawer__body nav a:focus-visible { outline: 2px solid var(--v-brand); outline-offset: 2px; } .v-motion-drawer__panel[data-variant="floating"] { top: 16px; bottom: auto; max-height: calc(100dvh - 32px); border-radius: 24px; } .v-motion-drawer__panel[data-variant="floating"][data-side="left"] { left: 16px; } .v-motion-drawer__panel[data-variant="floating"][data-side="right"] { right: 16px; } .v-motion-drawer__panel[data-variant="floating"] .v-motion-drawer__surface { height: auto; border: 1px solid var(--v-border); box-shadow: var(--shadow-float); } .v-motion-drawer__panel[data-variant="stack"] { top: 24px; bottom: 24px; width: min(var(--drawer-width), calc(100vw - 48px)); border-radius: 24px; } .v-motion-drawer__panel[data-variant="stack"][data-side="left"] { left: 24px; } .v-motion-drawer__panel[data-variant="stack"][data-side="right"] { right: 24px; } .v-motion-drawer__stack-sheet { position: absolute; inset: 12px -9px 12px 9px; background: var(--v-blue); border: 1px solid var(--v-border); border-radius: inherit; z-index: -1; rotate: 1.5deg; } .v-motion-drawer__stack-sheet[data-sheet="2"] { inset: 24px -17px 24px 17px; rotate: 3deg; background: var(--v-beige); z-index: -2; } .v-motion-drawer__panel[data-side="right"] .v-motion-drawer__stack-sheet { inset: 12px 9px 12px -9px; rotate: -1.5deg; } .v-motion-drawer__panel[data-side="right"] .v-motion-drawer__stack-sheet[data-sheet="2"] { inset: 24px 17px 24px -17px; rotate: -3deg; } .v-motion-drawer__panel[data-variant="stack"] .v-motion-drawer__surface { border: 1px solid var(--v-border); box-shadow: var(--shadow-float); } .v-motion-drawer__panel[data-stack-panels="true"] { overflow: visible; } .v-motion-drawer__panel[data-stack-panels="true"] .v-motion-drawer__surface { background: transparent; border: 0; box-shadow: none; } .v-motion-drawer__panel[data-stack-panels="true"] .v-motion-drawer__body { display: flex; flex: 1; min-height: 0; overflow: hidden; padding: 0; } .v-motion-drawer__stack { display: flex; flex: 1; min-width: 0; min-height: 0; } .v-motion-drawer__stack-deck { position: relative; flex: 1; min-width: 0; min-height: 0; margin-bottom: 32px; } .v-motion-drawer__panel[data-side="left"] .v-motion-drawer__stack-deck { margin-right: 44px; } .v-motion-drawer__panel[data-side="right"] .v-motion-drawer__stack-deck { margin-left: 44px; } .v-motion-drawer__stack-card { --stack-card-paint: var(--v-blue); --stack-card-ink: var(--ink-fixed); --stack-handle-height: 48px; position: absolute; inset: var(--stack-handle-height) 0 0; min-width: 0; min-height: 0; transform-origin: center bottom; pointer-events: none; isolation: isolate; } .v-motion-drawer__stack-card:nth-child(even) { --stack-card-paint: var(--v-beige); --stack-card-ink: var(--v-text); } .v-motion-drawer__stack-card[data-active="true"] { --stack-card-paint: var(--v-canvas); --stack-card-ink: var(--v-text); z-index: 5; } .v-motion-drawer__stack-card-surface { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 0; border-radius: 20px; background: transparent; color: var(--stack-card-ink); pointer-events: none; } .v-motion-drawer__stack-outline { position: absolute; left: 0; top: calc(-1 * var(--stack-handle-height)); width: 100%; height: calc(100% + var(--stack-handle-height)); max-height: none; overflow: visible; z-index: -1; pointer-events: none; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.12)); } .v-motion-drawer__stack-outline path { fill: var(--stack-card-paint); stroke: var(--v-border); stroke-width: 1; stroke-linejoin: round; } .v-motion-drawer__stack-card:first-child .v-motion-drawer__stack-card-surface { border-start-start-radius: 0; } .v-motion-drawer__stack-card:last-child .v-motion-drawer__stack-card-surface { border-start-end-radius: 0; } .v-motion-drawer__stack-card[data-active="true"] .v-motion-drawer__stack-card-surface { color: var(--v-text); pointer-events: auto; } .v-motion-drawer__stack-tab { position: absolute; inset-block-start: calc(-1 * var(--stack-handle-height)); inset-inline-start: calc( var(--stack-tab-index) * 100% / var(--stack-tab-count) ); z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; inline-size: calc(100% / var(--stack-tab-count)); min-inline-size: 0; block-size: var(--stack-handle-height); padding: 7px 8px; border: 0; border-radius: 12px 12px 0 0; background: transparent; color: var(--stack-card-ink); font: 600 12px/1.25 var(--font-text); text-align: center; cursor: pointer; pointer-events: auto; } .v-motion-drawer__stack-tab > span:last-child { min-width: 0; overflow-wrap: anywhere; } .v-motion-drawer__stack-tab[aria-selected="true"] { color: var(--v-text); } .v-motion-drawer__stack-tab:not(:disabled):hover > span { text-decoration: underline; text-underline-offset: 4px; } .v-motion-drawer__stack-tab:disabled { color: color-mix(in oklab, var(--stack-card-ink) 50%, transparent); cursor: not-allowed; } .v-motion-drawer__stack-tab:focus-visible { z-index: 3; outline: none; } .v-motion-drawer__stack-tab:focus-visible::after { content: ""; position: absolute; inset: 6px; border: 2px solid var(--v-brand); border-radius: 8px; pointer-events: none; } .v-motion-drawer__stack-icon { display: inline-grid; flex: none; place-items: center; } .v-motion-drawer__stack-card-header { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 12px; } .v-motion-drawer__stack-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font: 500 20px/1.2 var(--font-display); letter-spacing: -0.01em; } .v-motion-drawer__stack-card-header .v-motion-drawer__close { position: static; flex: none; margin: -8px -8px 0 0; } .v-motion-drawer__panel .v-motion-drawer__stack-pane-scroll[data-slot="scroll-area"] { --h: 100%; flex: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; border-radius: 0; background: transparent; color: inherit; } .v-motion-drawer__panel .v-motion-drawer__stack-pane-scroll[data-slot="scroll-area"] > [data-slot="scroll-area-viewport"] { height: 100%; max-height: 100%; padding: 8px 24px 18px 20px; } .v-motion-drawer__stack-pane-scroll[hidden] { display: none; } .v-motion-drawer__panel[data-variant="bottom"] { top: auto; bottom: 16px; left: 16px; right: 16px; margin-inline: auto; max-height: calc(85dvh - 16px); border-radius: 28px; touch-action: auto; } .v-motion-drawer__panel[data-variant="bottom"] .v-motion-drawer__surface { height: auto; border: 1px solid var(--v-border); box-shadow: var(--shadow-float); } .v-motion-drawer__panel[data-variant="bottom"] .v-motion-drawer__top { padding-top: 40px; touch-action: pan-x; } .v-motion-drawer__grip { position: absolute; top: 12px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 4px; background: var(--v-border); } .v-motion-drawer__panel[data-motion="off"] .v-motion-drawer__close { transition: none; transform: none; } .v-motion-drawer__panel[data-motion="off"] .v-motion-drawer__close .v-icon { transition: none; transform: none; } @media (max-width: 480px) { .v-motion-drawer__panel:not([data-variant="default"]) .v-motion-drawer__top { padding-inline: 20px; } .v-motion-drawer__panel:not([data-variant="default"]) .v-motion-drawer__body { padding-inline: 20px; } .v-motion-drawer__panel:not([data-variant="default"]) .v-motion-drawer__close { right: 16px; } .v-motion-drawer__stack-sheet[data-sheet="2"] { display: none; } .v-motion-drawer__panel[data-stack-panels="true"] .v-motion-drawer__body { padding: 0; } .v-motion-drawer__stack-card { --stack-handle-height: 64px; } .v-motion-drawer__stack-tab { padding: 8px 4px; } .v-motion-drawer__stack-card-header { padding-inline: 16px; } .v-motion-drawer__stack-pane-scroll[data-slot="scroll-area"] > [data-slot="scroll-area-viewport"] { padding-inline: 16px 24px; } } @media (prefers-reduced-motion: reduce) { .v-motion-drawer__close, .v-motion-drawer__body nav a, .v-motion-drawer__stack-tab, .v-motion-drawer__stack-card-surface { transition: none; } .v-motion-drawer__close:hover, .v-motion-drawer__close:active { transform: none; } } } 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-dialog",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-dialog","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-dialog"}]]}]}],["$","li","@radix-ui/react-direction",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-direction","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-direction"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/scroll-area.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/motion-drawer.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/motion-drawer.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/motion-drawer.css","content":"$52","type":"registry:file","target":"styles/cojeev/motion-drawer.css"}],"className":"h-[70svh] min-h-80"}]]}]

{item.icon && ( {item.icon} )} {item.label}

{item.icon && ( )} {item.label}