{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cart-drawer", "type": "registry:component", "title": "Cart Drawer", "description": "A slide-over bag with quantity steppers, line totals and subtotal that roll digit by digit, a free-shipping bar that fills as you add, and a friendly empty state.", "categories": [ "component", "Commerce" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "utils", "https://coss.com/ui/r/button.json" ], "files": [ { "path": "registry/devl/cart-drawer.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { MinusIcon, PlusIcon, ShoppingBagIcon, Trash2Icon, TruckIcon, XIcon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CartLine {\n id: string;\n name: string;\n variant?: string;\n price: number;\n qty: number;\n art?: ReactNode;\n max?: number;\n}\n\nexport interface CartDrawerProps {\n items?: CartLine[];\n defaultItems?: CartLine[];\n onItemsChange?: (items: CartLine[]) => void;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n freeShippingAt?: number;\n currency?: string;\n locale?: string;\n onCheckout?: (items: CartLine[], subtotal: number) => void;\n children?: (cartButton: ReactNode) => ReactNode;\n className?: string;\n}\n\nexport function CartDrawer({\n items: itemsProp,\n defaultItems = [],\n onItemsChange,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n freeShippingAt,\n currency = \"USD\",\n locale = \"en-US\",\n onCheckout,\n children,\n className,\n}: CartDrawerProps) {\n const reduce = useReducedMotion();\n const [innerItems, setInnerItems] = useState(defaultItems);\n const [innerOpen, setInnerOpen] = useState(defaultOpen);\n const items = itemsProp ?? innerItems;\n const open = openProp ?? innerOpen;\n const triggerRef = useRef(null);\n const panelRef = useRef(null);\n const opened = useRef(false);\n\n const setItems = (next: CartLine[]) => {\n if (itemsProp === undefined) setInnerItems(next);\n onItemsChange?.(next);\n };\n const setOpen = (next: boolean) => {\n if (openProp === undefined) setInnerOpen(next);\n onOpenChange?.(next);\n opened.current = next;\n if (!next) requestAnimationFrame(() => triggerRef.current?.focus());\n };\n useEffect(() => {\n if (open && opened.current) panelRef.current?.focus();\n }, [open]);\n\n const fmt = (n: number) => new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(n);\n const count = items.reduce((n, l) => n + l.qty, 0);\n const subtotal = items.reduce((n, l) => n + l.qty * l.price, 0);\n const remaining = freeShippingAt ? Math.max(0, freeShippingAt - subtotal) : 0;\n const unlocked = !!freeShippingAt && remaining === 0;\n\n const setQty = (id: string, qty: number) => setItems(qty <= 0 ? items.filter((l) => l.id !== id) : items.map((l) => (l.id === id ? { ...l, qty } : l)));\n\n const onKey = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && open) {\n event.stopPropagation();\n setOpen(false);\n return;\n }\n const panel = panelRef.current;\n if (event.key !== \"Tab\" || !open || !panel) return;\n const items = [...panel.querySelectorAll(\"button:not(:disabled)\")];\n const first = items[0];\n const last = items[items.length - 1];\n const at = document.activeElement;\n if (event.shiftKey && (at === first || at === panel)) {\n event.preventDefault();\n last?.focus();\n } else if (!event.shiftKey && at === last) {\n event.preventDefault();\n first?.focus();\n }\n };\n\n const ease = [0.32, 0.72, 0, 1] as const;\n\n const cartButton = (\n setOpen(!open)}\n ref={triggerRef}\n type=\"button\"\n >\n \n \n {count > 0 && (\n \n {count}\n \n )}\n \n \n );\n\n return (\n
\n
\n {children?.(cartButton) ??
{cartButton}
}\n
\n\n \n {open && (\n <>\n setOpen(false)}\n transition={{ duration: 0.2 }}\n />\n \n
\n

\n Your bag ({count})\n

\n \n
\n\n {freeShippingAt && items.length > 0 && (\n
\n
\n \n \n \n {unlocked ? (\n \"Free shipping unlocked\"\n ) : (\n \n {fmt(remaining)} away from free shipping\n \n )}\n \n \n
\n
\n \n
\n
\n )}\n\n
\n {items.length === 0 ? (\n \n \n \n \n

Your bag is empty

\n

Things you add show up here, ready when you are.

\n \n \n ) : (\n
    \n \n {items.map((line) => (\n \n
    \n {line.art}\n
    \n
    \n
    \n

    {line.name}

    \n {line.variant &&

    {line.variant}

    }\n
    \n \n
    \n
    \n setQty(line.id, q)}\n value={line.qty}\n />\n setQty(line.id, 0)}\n type=\"button\"\n >\n \n \n
    \n
    \n
    \n \n ))}\n     \n
\n )}\n
\n\n {items.length > 0 && (\n
\n
\n Subtotal\n \n
\n
\n Shipping\n {unlocked ? \"Free\" : \"Calculated at checkout\"}\n
\n \n
\n )}\n \n \n )}\n \n
\n );\n}\n\nfunction Stepper({ value, onChange, max, label }: { value: number; onChange: (v: number) => void; max: number; label: string }) {\n return (\n
\n onChange(value - 1)}\n type=\"button\"\n >\n \n \n \n = max}\n onClick={() => onChange(value + 1)}\n type=\"button\"\n >\n \n \n
\n );\n}\n\nfunction RollingNumber({ text, className }: { text: string; className?: string }) {\n const reduce = useReducedMotion();\n const chars = text.split(\"\");\n return (\n \n {chars.map((c, i) => {\n const key = chars.length - i;\n if (!/\\d/.test(c)) {\n return (\n \n {c}\n \n );\n }\n return (\n \n \n {Array.from({ length: 10 }, (_, d) => (\n \n {d}\n \n ))}\n \n \n );\n })}\n \n );\n}\n" } ] }