60: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T53f5,"use client" import * as React from "react" import { ShoppingBag, X } from "lucide-react" import { AnimatePresence, MotionConfig, animate, motion, useReducedMotion, type AnimationPlaybackControls } from "motion/react" import { Button } from "@/components/ui/button" import { Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, } from "@/components/ui/sheet" import { CartLineItem, type CartLine } from "@/components/ecomcn/cart-line-item" import { cn } from "@/lib/utils" /* * The mini cart: a bag button that opens a sheet of the bag's lines, with * the subtotal and checkout held at the bottom. * * * * or composed * * * * * * * * * On your shadcn Sheet: it traps focus and hands it back to the bag button * on close. Its slide keyframes are off — the sheet grows out of the bag * button as a circle and folds back into it (Motion; a fade under reduced * motion), staying open until it has. Header, body and footer are ruled * bands, and the body is the only part that scrolls. Lines are keyed by id, * so a cart update never remounts one mid-undo; the subtotal follows what * the shopper sees — a quantity just pressed, a line waiting to be removed — * before your cart catches up. */ /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const /** Scrolls, without drawing a scrollbar. Edge fades say there is more. */ const NO_SCROLLBAR = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden" const subscribeNothing = () => () => {} /** Your locale, or the visitor's once hydrated — so server and client HTML agree. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } function useControllableState( value: T | undefined, defaultValue: T, onChange?: (next: T) => void ) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const controlled = value !== undefined const set = React.useCallback( (next: T) => { if (!controlled) setUncontrolled(next) onChange?.(next) }, [controlled, onChange] ) return [controlled ? value : uncontrolled, set] as const } /* ─── context ──────────────────────────────────────────────────────────── */ export interface CartSheetContextValue { lines: CartLine[] /** Items in the bag, as the shopper sees them. */ count: number /** The subtotal, as the shopper sees it. */ subtotal: number formatMoney: (amount: number) => string currency: string locale?: string open: boolean setOpen: (open: boolean) => void freeShippingThreshold?: number title: React.ReactNode note: React.ReactNode checkoutLabel: React.ReactNode onCheckout?: () => void viewBagHref?: string empty: React.ReactNode loading: boolean } /** Internal: line handlers, previews and the morph's bookkeeping. */ interface Internals { onQuantityChange?: (id: string, quantity: number) => void | Promise onRemove?: (id: string) => void | Promise onSaveForLater?: (id: string) => void | Promise preview: (id: string, quantity: number) => void originRef: React.RefObject closing: boolean finishClose: () => void } const CartSheetContext = React.createContext(null) const InternalsContext = React.createContext(null) export function useCartSheet() { const context = React.useContext(CartSheetContext) if (!context) { throw new Error("useCartSheet must be used within .") } return context } function useInternals() { const context = React.useContext(InternalsContext) if (!context) throw new Error("Cart sheet parts must be used within .") return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface CartSheetProps { lines: CartLine[] currency?: string locale?: string open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void /** Debounced in each line: one call once the shopper settles. Reject to put it back. */ onQuantityChange?: (id: string, quantity: number) => void | Promise /** After the line's undo window. Reject to put it back. */ onRemove?: (id: string) => void | Promise /** Shows "Save for later" on each line; runs after the undo window. */ onSaveForLater?: (id: string) => void | Promise /** Shows how far the bag is from free delivery. */ freeShippingThreshold?: number title?: React.ReactNode /** Under the subtotal. */ note?: React.ReactNode checkoutLabel?: React.ReactNode onCheckout?: () => void /** Adds a "View bag" link under checkout. */ viewBagHref?: string /** What an empty bag says — a "Continue shopping" link, say. */ empty?: React.ReactNode loading?: boolean /** Trigger and content parts. Omit for the default layout. */ children?: React.ReactNode } export function CartSheet({ lines, currency = "USD", locale: localeProp, open: openProp, defaultOpen = false, onOpenChange, onQuantityChange, onRemove, onSaveForLater, freeShippingThreshold, title = "Your bag", note = "Shipping and taxes are worked out at checkout.", checkoutLabel = "Checkout", onCheckout, viewBagHref, empty, loading = false, children, }: CartSheetProps) { const locale = useFormatLocale(localeProp) const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange) // The primitive stays open until the fold has played; `open` is what the // shopper asked for. const [mounted, setMounted] = React.useState(open) if (open && !mounted) setMounted(true) const closing = mounted && !open const originRef = React.useRef(null) const finishClose = React.useCallback(() => setMounted(false), []) // What each line shows, ahead of your cart: a new quantity, or 0 while // its removal waits out the undo window. const [previews, setPreviews] = React.useState>({}) const preview = React.useCallback((id: string, quantity: number) => { setPreviews((current) => (current[id] === quantity ? current : { ...current, [id]: quantity })) }, []) const formatMoney = React.useMemo(() => { const cents = new Intl.NumberFormat(locale, { style: "currency", currency }) return (amount: number) => cents.format(amount) }, [locale, currency]) const shown = (line: CartLine) => previews[line.id] ?? line.quantity const count = lines.reduce((n, line) => n + shown(line), 0) const subtotal = lines.reduce((sum, line) => sum + line.unitPrice * shown(line), 0) const context = React.useMemo( () => ({ lines, count, subtotal, formatMoney, currency, locale, open, setOpen, freeShippingThreshold, title, note, checkoutLabel, onCheckout, viewBagHref, empty: empty ??

Nothing in it yet.

, loading, }), [lines, count, subtotal, formatMoney, currency, locale, open, setOpen, freeShippingThreshold, title, note, checkoutLabel, onCheckout, viewBagHref, empty, loading] ) const internals = React.useMemo( () => ({ onQuantityChange, onRemove, onSaveForLater, preview, originRef, closing, finishClose }), [onQuantityChange, onRemove, onSaveForLater, preview, closing, finishClose] ) return ( { // Escape twice, or the overlay mid-fold: already closing. if (next !== open) setOpen(next) }} > {children ?? ( <> )} ) } /* ─── parts ────────────────────────────────────────────────────────────── */ /** * The bag button: an icon and the count, which turns over when it changes. * Style it with `className`; it is your Sheet's trigger, so focus comes * back to it when the sheet closes. */ export function CartSheetTrigger({ className, children }: { className?: string; children?: React.ReactNode }) { const { count } = useCartSheet() const { originRef } = useInternals() const reduce = useReducedMotion() return ( {/* The morph's origin. A span, not a ref on the trigger: refs reach each base's primitive differently. */} { originRef.current = node }} className="inline-flex items-center gap-2" > {children ?? ( <> {count} )} ) } /** Whether a scroller has more above or below. */ function useOverflow() { const ref = React.useRef(null) const [edges, setEdges] = React.useState({ start: false, end: false }) React.useEffect(() => { const node = ref.current if (!node) return const update = () => { const next = { start: node.scrollTop > 1, end: node.scrollTop + node.clientHeight < node.scrollHeight - 1, } setEdges((current) => (current.start === next.start && current.end === next.end ? current : next)) } update() const observer = new ResizeObserver(update) observer.observe(node) if (node.firstElementChild) observer.observe(node.firstElementChild) node.addEventListener("scroll", update, { passive: true }) return () => { observer.disconnect() node.removeEventListener("scroll", update) } }, []) return [ref, edges] as const } /** * The sheet: a header band with the title and count, the lines — the only * scroller — and the footer band with the subtotal and checkout. */ export function CartSheetContent({ className, children }: { className?: string; children?: React.ReactNode }) { const { title, count } = useCartSheet() return (

{title} {count} The items in your bag, with the subtotal and checkout. Close

{children ?? ( <> )}

) } /** The lines: the only part of the sheet that scrolls, with soft edges instead of a scrollbar. */ export function CartSheetLines({ className }: { className?: string }) { const { lines, currency, locale, empty, loading } = useCartSheet() const { onQuantityChange, onRemove, onSaveForLater, preview } = useInternals() const [scroller, edges] = useOverflow() return (

{loading ? (

))}

) : lines.length ? (

onQuantityChange(line.id, q) : undefined} onRemove={onRemove ? () => onRemove(line.id) : undefined} onSaveForLater={onSaveForLater ? () => onSaveForLater(line.id) : undefined} onPreviewQuantityChange={(q) => preview(line.id, q)} /> ))}

) : (

Your bag is empty.

{empty}

)}

) } function EdgeFade({ side, visible }: { side: "top" | "bottom"; visible: boolean }) { return (

) } /** * The footer band: how far from free delivery, the subtotal, a note, and * checkout. It never scrolls away. */ export function CartSheetFooter({ className }: { className?: string }) { const { lines, subtotal, formatMoney, freeShippingThreshold, note, checkoutLabel, onCheckout, viewBagHref, setOpen, loading } = useCartSheet() const reduce = useReducedMotion() if (!lines.length && !loading) return null const left = freeShippingThreshold !== undefined ? Math.max(0, freeShippingThreshold - subtotal) : undefined const share = freeShippingThreshold ? Math.min(1, subtotal / freeShippingThreshold) : 0 return (

{left !== undefined ? (

{left > 0 ? ( <> {formatMoney(left)} from free delivery ) : ( "Free delivery on this order" )}

) : null}

Subtotal {loading ? "—" : formatMoney(subtotal)}

{note ?

{note}

: null} {viewBagHref ? ( setOpen(false)} className="mt-3 block text-center text-sm text-muted-foreground underline decoration-border underline-offset-4 hover:text-foreground" > View bag ) : null}

) } /** * The visible surface, and the morph: a circle growing from the bag button * to cover the panel, the contents fading in once it has; closing runs it * back into the button. A layout effect inside the portal, so the first * frame is already clipped. */ function SheetPanel({ children }: { children: React.ReactNode }) { const { originRef, closing, finishClose } = useInternals() const reduce = useReducedMotion() const surface = React.useRef(null) const contents = React.useRef(null) React.useLayoutEffect(() => { const panel = surface.current const inner = contents.current if (!panel || !inner) return const overlay = panel .closest('[data-slot="sheet-content"]') ?.parentElement?.querySelector(':scope > [data-slot="sheet-overlay"]') const running: AnimationPlaybackControls[] = [] let cancelled = false // The bag button's centre, in the panel's own coordinates — it may lie // outside the panel, which a circle's centre is allowed to. const circle = () => { const box = panel.getBoundingClientRect() const r = originRef.current?.getBoundingClientRect() const x = r ? r.left + r.width / 2 - box.left : box.width const y = r ? r.top + r.height / 2 - box.top : 0 const far = Math.ceil(Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y))) return { at: `${x}px ${y}px`, far } } if (!closing) { if (reduce) { panel.style.opacity = "0" running.push(animate(panel, { opacity: [0, 1] }, { duration: 0.15 })) } else { const { at, far } = circle() panel.style.clipPath = `circle(0px at ${at})` inner.style.opacity = "0" running.push( animate(panel, { clipPath: [`circle(0px at ${at})`, `circle(${far}px at ${at})`] }, MORPH), animate(inner, { opacity: 1 }, { duration: 0.25, delay: 0.15, ease: "easeOut" }) ) } return () => { cancelled = true running.forEach((a) => a.stop()) } } if (reduce) { running.push(animate(panel, { opacity: 0 }, { duration: 0.15 })) } else { const { at } = circle() running.push( animate(inner, { opacity: 0 }, { duration: 0.12, ease: "easeIn" }), animate(panel, { clipPath: `circle(0px at ${at})` }, { ...MORPH, duration: 0.38, delay: 0.06 }) ) } if (overlay) running.push(animate(overlay, { opacity: 0 }, { duration: 0.3, delay: 0.1 })) const fallback = window.setTimeout(() => !cancelled && finishClose(), 800) Promise.all(running.map((a) => a.finished)).then(() => { window.clearTimeout(fallback) if (!cancelled) finishClose() }) return () => { cancelled = true window.clearTimeout(fallback) running.forEach((a) => a.stop()) } // Runs on open and on close; `reduce` is read, not watched. // eslint-disable-next-line react-hooks/exhaustive-deps }, [closing]) return (

{children}

) } 5f:["$","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","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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["sheet","button","@ecomcn/cart-line-item"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"src/registry/ecomcn/cart-sheet/cart-sheet.tsx","content":"$62","type":"registry:component","target":"components/ecomcn/cart-sheet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]