{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cart-drawer", "type": "registry:ui", "title": "Cart Drawer", "description": "Slide-over cart whose lines collapse away and whose totals roll as you edit.", "categories": [ "commerce" ], "dependencies": [ "@base-ui/react", "@number-flow/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/quantity-stepper.json" ], "files": [ { "path": "components/ui/cart-drawer.tsx", "content": "\"use client\";\nimport { Drawer } from \"@base-ui/react/drawer\";\nimport NumberFlow from \"@number-flow/react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { createContext, useContext, useEffect, useRef, useState } from \"react\";\nimport { QuantityStepper } from \"@/components/ui/quantity-stepper\";\nimport { cn } from \"@/lib/cn\";\nimport { ArrowRight, Cart, Check, Image as ImageIcon, Loader, X } from \"@/lib/icons\";\nimport { ease } from \"@/lib/motion\";\n\ntype Money = { currency: string; locale: string };\nconst MoneyContext = createContext({ currency: \"USD\", locale: \"en-US\" });\n\n/** Formats an amount in the drawer's currency. Whole amounts drop the \".00\". */\nexport function useMoney() {\n const { currency, locale } = useContext(MoneyContext);\n return (amount: number) =>\n new Intl.NumberFormat(locale, { style: \"currency\", currency, minimumFractionDigits: Number.isInteger(amount) ? 0 : 2 }).format(amount);\n}\n\nfunction moneyFormat(amount: number, currency: string) {\n return { style: \"currency\", currency, minimumFractionDigits: Number.isInteger(amount) ? 0 : 2, maximumFractionDigits: 2 } as const;\n}\n\nexport type CartDrawerProps = Omit & {\n /** ISO currency code for every amount inside. */\n currency?: string;\n /** Locale for number formatting. Set it explicitly so server and client agree. */\n locale?: string;\n};\n\n/** The cart as a slide-over from the right edge. Swipe right to dismiss on touch. */\nexport function CartDrawer({ currency = \"USD\", locale = \"en-US\", ...rest }: CartDrawerProps) {\n return (\n \n \n \n );\n}\n\nexport type CartDrawerTriggerProps = Drawer.Trigger.Props;\nexport function CartDrawerTrigger(props: CartDrawerTriggerProps) {\n return ;\n}\n\nexport type CartDrawerCloseProps = Omit & { className?: string };\n/** A secondary button that closes the drawer, e.g. \"Continue shopping\". */\nexport function CartDrawerClose({ className, ...rest }: CartDrawerCloseProps) {\n return (\n \n );\n}\n\nexport type CartDrawerContentProps = Omit & {\n className?: string;\n style?: React.CSSProperties;\n /** Render into this element instead of document.body. Backdrop and panel become absolute to it. */\n container?: Drawer.Portal.Props[\"container\"];\n title?: React.ReactNode;\n /** Units in the cart, shown and rolled beside the title. */\n count?: number;\n};\n\nexport function CartDrawerContent({ container, title = \"Cart\", count, className, style, children, ...rest }: CartDrawerContentProps) {\n const contained = container != null;\n return (\n \n \n \n \n
\n {title}\n {count != null && count > 0 && (\n \n \n {count === 1 ? \" item\" : \" items\"}\n \n )}\n \n \n \n
\n {children}\n \n \n \n );\n}\n\nexport type CartLinesProps = React.ComponentProps<\"ul\">;\n\n/** The scrolling list of lines. Hairlines appear at the edges only when there is more to scroll. */\nexport function CartLines({ className, children, ...rest }: CartLinesProps) {\n const ref = useRef(null);\n const [edges, setEdges] = useState({ top: false, bottom: false });\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const read = () => {\n const top = el.scrollTop > 1;\n const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1;\n setEdges((e) => (e.top === top && e.bottom === bottom ? e : { top, bottom }));\n };\n // Lines grow and collapse without scrolling, so watch their sizes too.\n const ro = new ResizeObserver(read);\n const watch = () => {\n ro.disconnect();\n ro.observe(el);\n for (const c of el.children) ro.observe(c);\n read();\n };\n const mo = new MutationObserver(watch);\n mo.observe(el, { childList: true });\n watch();\n el.addEventListener(\"scroll\", read, { passive: true });\n return () => {\n el.removeEventListener(\"scroll\", read);\n mo.disconnect();\n ro.disconnect();\n };\n }, []);\n\n return (\n
\n \n \n {children}\n \n \n
\n );\n}\n\nexport type CartLineProps = Omit, \"onChange\"> & {\n name: string;\n /** Size, colour and other options, as one short line. */\n variant?: string;\n /** Unit price. The line shows the total and, above 1, the unit price. */\n price: number;\n quantity: number;\n onQuantityChange: (quantity: number) => void;\n onRemove: () => void;\n /** An image URL, or any node (a thumbnail component). */\n image?: string | React.ReactNode;\n /** Units available. */\n max?: number;\n /** Price before a sale, struck through beside the total. */\n compareAt?: number;\n};\n\nexport function CartLine({ name, variant, price, quantity, onQuantityChange, onRemove, image, max, compareAt, className, ...rest }: CartLineProps) {\n const { currency, locale } = useContext(MoneyContext);\n const money = useMoney();\n const reduce = useReducedMotion();\n const [moving, setMoving] = useState(false);\n const total = price * quantity;\n\n return (\n setMoving(true)}\n onAnimationComplete={() => setMoving(false)}\n className={cn(\"relative\", moving && \"overflow-hidden\", className)}\n {...(rest as React.ComponentProps)}\n >\n
\n \n
\n
\n
\n

{name}

\n {variant &&

{variant}

}\n
\n
\n {/* Fixed height: the rolling digits carry their own mask padding, which must not move the row. */}\n \n \n \n {/* Always one line tall, so the stepper row never moves when \"each\" appears. */}\n \n {compareAt != null && compareAt > price ? (\n {money(compareAt * quantity)}\n ) : quantity > 1 ? (\n `${money(price)} each`\n ) : null}\n \n
\n
\n
\n \n \n Remove\n \n
\n
\n
\n \n );\n}\n\nfunction Thumb({ image, name }: { image: CartLineProps[\"image\"]; name: string }) {\n const [failed, setFailed] = useState(false);\n const frame = \"relative grid size-16 shrink-0 place-items-center overflow-hidden rounded-lg border border-line bg-hover text-fg-4\";\n if (typeof image === \"string\" && !failed)\n return (\n \n {/* eslint-disable-next-line @next/next/no-img-element -- a copied component can't assume next/image */}\n {name} setFailed(true)} className=\"size-full object-cover\" />\n \n );\n return (\n \n {typeof image === \"string\" || image == null ? : image}\n \n );\n}\n\nexport type CartShippingProgressProps = React.ComponentProps<\"div\"> & {\n subtotal: number;\n /** Subtotal at which shipping becomes free. */\n threshold: number;\n};\n\n/** \"€23 away from free shipping\", with a bar that fills as the cart grows. */\nexport function CartShippingProgress({ subtotal, threshold, className, ...rest }: CartShippingProgressProps) {\n const { currency, locale } = useContext(MoneyContext);\n const reduce = useReducedMotion();\n const left = Math.max(0, threshold - subtotal);\n const done = left === 0;\n const progress = Math.min(1, subtotal / threshold);\n\n return (\n
\n

\n \n {done ? (\n \n \n Free shipping unlocked\n \n ) : (\n \n \n  away from free shipping\n \n )}\n \n

\n \n \n
\n \n );\n}\n\nexport type CartSummaryProps = Omit, \"children\"> & {\n subtotal: number;\n /** One quiet line under the subtotal. */\n note?: React.ReactNode;\n /** Runs on Check out. Return a promise to show the busy state on the button. */\n onCheckout?: () => void | Promise;\n checkoutLabel?: string;\n /** Anything above the totals, like CartShippingProgress. */\n children?: React.ReactNode;\n};\n\nexport function CartSummary({ subtotal, note = \"Shipping and taxes are calculated at checkout.\", onCheckout, checkoutLabel = \"Check out\", className, children, ...rest }: CartSummaryProps) {\n const { currency, locale } = useContext(MoneyContext);\n const [busy, setBusy] = useState(false);\n const pending = useRef(false);\n const timer = useRef(undefined);\n useEffect(() => () => window.clearTimeout(timer.current), []);\n\n return (\n
\n {children}\n
\n Subtotal\n \n
\n {note &&

{note}

}\n {\n // One checkout at a time, even before the spinner shows.\n if (pending.current) return;\n const result = onCheckout?.();\n if (!(result instanceof Promise)) return;\n pending.current = true;\n const shownAt = { t: 0 };\n timer.current = window.setTimeout(() => {\n shownAt.t = performance.now();\n setBusy(true);\n }, 150);\n try {\n await result;\n } finally {\n window.clearTimeout(timer.current);\n const hold = shownAt.t ? Math.max(0, 300 - (performance.now() - shownAt.t)) : 0;\n timer.current = window.setTimeout(() => {\n pending.current = false;\n setBusy(false);\n }, hold);\n }\n }}\n className={cn(\n \"group/checkout relative inline-flex h-9 w-full select-none items-center justify-center rounded-lg bg-fg text-[13px] font-medium text-frame outline-none\",\n \"transition-[background-color,scale] duration-150 hover:bg-fg/90 active:scale-[0.98] active:duration-75 aria-busy:cursor-progress aria-busy:active:scale-100\",\n \"focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3\",\n )}\n >\n \n {checkoutLabel}\n \n \n {busy && (\n \n \n Starting checkout\n \n )}\n \n
\n );\n}\n\nexport type CartEmptyProps = React.ComponentProps<\"div\"> & {\n title?: React.ReactNode;\n description?: React.ReactNode;\n /** One action, usually a CartDrawerClose that says \"Continue shopping\". */\n action?: React.ReactNode;\n};\n\nexport function CartEmpty({ title = \"Your cart is empty\", description, action, className, ...rest }: CartEmptyProps) {\n const reduce = useReducedMotion();\n return (\n )}\n >\n \n \n \n
\n

{title}

\n {description &&

{description}

}\n
\n {action &&
{action}
}\n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/cart-drawer" }