63: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"] 64: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"] 65:T560c,"use client" import * as React from "react" import { Minus, Plus } from "lucide-react" import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" /* * One line in a bag: thumbnail, name and variant, a quantity stepper, the * line total, and save-for-later / remove. * * cart.update(line.id, q)} onRemove={() => cart.remove(line.id)} /> * * or composed * * * * * * Removing never asks "are you sure?": the row folds into a "Removed — * Undo" bar and your `onRemove` runs only once the undo window has passed * (or the line leaves the page). Quantity changes show at once and reach * your `onQuantityChange` once, after the shopper stops pressing — not once * per press. Either handler can reject: the line puts itself back and says * so. The row folds and unfolds to its measured height with Motion. */ export interface CartLine { id: string name: string href?: string brand?: string /** "Tan · EU 41". */ variant?: string /** Already rendered, so the block never assumes next/image. */ image?: React.ReactNode unitPrice: number /** Was-price per unit; struck through when higher than `unitPrice`. */ compareAt?: number quantity: number /** Stock left, or a per-order cap. */ maxQuantity?: number } /** 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 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") } /** Follows its content's height, so a row folds rather than jumps. */ function useMeasuredHeight() { const ref = React.useRef(null) const [height, setHeight] = React.useState("auto") React.useLayoutEffect(() => { const node = ref.current if (!node) return const observer = new ResizeObserver(([entry]) => setHeight(entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight) ) observer.observe(node) return () => observer.disconnect() }, []) return [ref, height] as const } /* ─── context ──────────────────────────────────────────────────────────── */ type Leaving = "removed" | "saved" export interface CartLineItemContextValue { line: CartLine /** The quantity on show: what the shopper last chose, before your handler has it. */ quantity: number setQuantity: (quantity: number) => void /** One more or one fewer, from the quantity last asked for — fast presses all count. */ step: (delta: number) => void /** The cap on the stepper: `maxQuantity`, or 99. */ maxQuantity: number /** Unit price × the quantity on show. */ total: number formatMoney: (amount: number) => string /** Folds the row into its undo bar; `onRemove` runs once the window has passed. */ remove: () => void /** Undefined when the line was given no `onSaveForLater`. */ saveForLater?: () => void /** Set while the row is folded, waiting out the undo window. */ leaving: Leaving | null undo: () => void /** What the line last failed to do, or null. */ error: string | null density: "comfortable" | "compact" loading: boolean } const CartLineItemContext = React.createContext(null) export function useCartLineItem() { const context = React.useContext(CartLineItemContext) if (!context) { throw new Error("useCartLineItem must be used within .") } return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface CartLineItemProps extends Omit, "children"> { line: CartLine currency?: string locale?: string /** Called once the shopper settles on a quantity. Reject to put it back. */ onQuantityChange?: (quantity: number) => void | Promise /** How long to wait after the last press. Defaults to 500ms. */ debounceMs?: number /** Called when the undo window passes. Reject to put the line back. */ onRemove?: () => void | Promise /** Shows "Save for later"; runs, like remove, after the undo window. */ onSaveForLater?: () => void | Promise /** How long "Undo" stays. Defaults to 5 seconds. */ undoMs?: number /** * The quantity on show whenever it changes — 0 while the line waits to be * removed — so a subtotal elsewhere can follow before your cart does. */ onPreviewQuantityChange?: (quantity: number) => void /** `compact` for a mini cart: a smaller image, tighter type. */ density?: "comfortable" | "compact" loading?: boolean children?: React.ReactNode } export function CartLineItem({ line, currency = "USD", locale: localeProp, onQuantityChange, debounceMs = 500, onRemove, onSaveForLater, undoMs = 5000, onPreviewQuantityChange, density = "comfortable", loading = false, className, children, ...props }: CartLineItemProps) { const locale = useFormatLocale(localeProp) const reduce = useReducedMotion() const [inner, height] = useMeasuredHeight() const maxQuantity = Math.max(1, line.maxQuantity ?? 99) // The quantity on show. It follows the prop until the shopper presses, // then leads it until the cart has caught up. const [draft, setDraft] = React.useState(null) const [seen, setSeen] = React.useState(line.quantity) if (seen !== line.quantity) { // Your cart has caught up with the stepper: let the prop lead again. setSeen(line.quantity) if (draft === line.quantity) setDraft(null) } const quantity = draft ?? line.quantity const draftRef = React.useRef(null) React.useEffect(() => { draftRef.current = draft }, [draft]) const [error, setError] = React.useState(null) const [leaving, setLeaving] = React.useState(null) // Handlers in refs: the timers fire with the latest ones, and the flush on // unmount does not need them as effect dependencies. const handlers = React.useRef({ onQuantityChange, onRemove, onSaveForLater }) React.useEffect(() => { handlers.current = { onQuantityChange, onRemove, onSaveForLater } }) const quantityTimer = React.useRef(undefined) const leaveTimer = React.useRef(undefined) const pending = React.useRef<{ quantity: number | null; leaving: Leaving | null }>({ quantity: null, leaving: null }) const row = React.useRef(null) const commitQuantity = React.useCallback((next: number) => { pending.current.quantity = null Promise.resolve() .then(() => handlers.current.onQuantityChange?.(next)) // On success the stepper keeps showing the new quantity until your // line catches up; on failure it returns to what the cart holds. .catch(() => { setDraft(null) setError("Couldn't change the quantity. Try again.") }) }, []) const commitLeave = React.useCallback((kind: Leaving) => { pending.current.leaving = null const run = kind === "saved" ? handlers.current.onSaveForLater : handlers.current.onRemove Promise.resolve() .then(() => run?.()) .catch(() => { setLeaving(null) setError(kind === "saved" ? "Couldn't save it for later. Try again." : "Couldn't remove it. Try again.") }) }, []) const setQuantity = React.useCallback( (next: number) => { const clamped = Math.min(Math.max(1, Math.round(next) || 1), maxQuantity) setError(null) setDraft(clamped) window.clearTimeout(quantityTimer.current) pending.current.quantity = clamped quantityTimer.current = window.setTimeout(() => commitQuantity(clamped), debounceMs) }, [maxQuantity, debounceMs, commitQuantity] ) // From the quantity last asked for, not the last render: presses quicker // than a render would otherwise read the same number and count as one. const lineQuantity = line.quantity const step = React.useCallback( (delta: number) => setQuantity((pending.current.quantity ?? draftRef.current ?? lineQuantity) + delta), [setQuantity, lineQuantity] ) const leave = React.useCallback( (kind: Leaving) => { setError(null) setLeaving(kind) pending.current.leaving = kind window.clearTimeout(leaveTimer.current) leaveTimer.current = window.setTimeout(() => commitLeave(kind), undoMs) }, [undoMs, commitLeave] ) const undo = React.useCallback(() => { window.clearTimeout(leaveTimer.current) pending.current.leaving = null setLeaving(null) }, []) // Leaving the page — a closed mini cart, a route change — flushes what is // waiting: the quantity the shopper chose, the removal they did not undo. React.useEffect( () => () => { window.clearTimeout(quantityTimer.current) window.clearTimeout(leaveTimer.current) const { quantity: q, leaving: l } = pending.current if (l) { const run = l === "saved" ? handlers.current.onSaveForLater : handlers.current.onRemove void Promise.resolve().then(() => run?.()).catch(() => {}) } else if (q !== null) { void Promise.resolve().then(() => handlers.current.onQuantityChange?.(q)).catch(() => {}) } }, [] ) // Focus follows the fold: to Undo when the row goes, back to Remove when // it returns. Found by query — a ref on your Button primitive would not // reach the DOM on React 18. const [focusAfter, setFocusAfter] = React.useState<"undo" | "remove" | null>(null) React.useEffect(() => { if (!focusAfter) return row.current?.querySelector(`[data-action="${focusAfter}"]`)?.focus() }, [focusAfter, leaving]) const preview = leaving ? 0 : quantity React.useEffect(() => { onPreviewQuantityChange?.(preview) }, [preview, onPreviewQuantityChange]) const formatMoney = React.useMemo(() => { const whole = new Intl.NumberFormat(locale, { style: "currency", currency, maximumFractionDigits: 0 }) const cents = new Intl.NumberFormat(locale, { style: "currency", currency }) return (amount: number) => (Number.isInteger(amount) ? whole : cents).format(amount) }, [locale, currency]) const context = React.useMemo( () => ({ line, quantity, setQuantity, step, maxQuantity, total: line.unitPrice * quantity, formatMoney, remove: () => { setFocusAfter("undo") leave("removed") }, saveForLater: onSaveForLater ? () => { setFocusAfter("undo") leave("saved") } : undefined, leaving, undo: () => { setFocusAfter("remove") undo() }, error, density, loading, }), [line, quantity, setQuantity, step, maxQuantity, formatMoney, leave, onSaveForLater, leaving, undo, error, density, loading] ) return (

{leaving ? ( ) : ( {children ?? ( <>

)} {error ? (

{error}

) : null} )}

{/* Always in the page, so the change is read out. */} {leaving ? `${leaving === "saved" ? "Saved for later" : "Removed"}: ${line.name}. Undo is available for a few seconds.` : ""}

) } /* ─── parts ────────────────────────────────────────────────────────────── */ /** The thumbnail, linked to the product when the line has an `href`. */ export function CartLineItemMedia({ className }: { className?: string }) { const { line, loading } = useCartLineItem() const frame = cn("relative block aspect-[4/5] w-full overflow-hidden bg-secondary", className) if (loading) return return line.href ? ( // The name carries the link for assistive tech; this one is a pointer shortcut. {line.image} ) : ( {line.image} ) } /** Brand, name and variant. */ export function CartLineItemInfo({ className }: { className?: string }) { const { line, density, loading } = useCartLineItem() if (loading) { return ( ) } return (

{line.brand ? (

{line.brand}

) : null}

{line.href ? ( {line.name} ) : ( line.name )}

{line.variant ?

{line.variant}

: null}

) } /** * The line total, right-aligned in tabular figures so a column of lines * reads as a ledger — with the unit price under it when there is more than * one, and the was-price struck through. */ export function CartLineItemTotal({ className }: { className?: string }) { const { line, quantity, total, formatMoney, loading } = useCartLineItem() const reduce = useReducedMotion() if (loading) return const was = line.compareAt && line.compareAt > line.unitPrice ? line.compareAt * quantity : undefined return (

{formatMoney(total)} {was ? (

Was {formatMoney(was)}

) : null} {quantity > 1 ? (

{formatMoney(line.unitPrice)} each

) : null}

) } /** − [ 2 ] + as one ruled block; typing works too, settling on blur or Enter. */ export function CartLineItemQuantity({ className }: { className?: string }) { const { line, quantity, setQuantity, step, maxQuantity, loading } = useCartLineItem() const [typed, setTyped] = React.useState(null) const commit = () => { if (typed !== null) setQuantity(Number.parseInt(typed, 10)) setTyped(null) } return (

setTyped(event.target.value.replace(/\D/g, "").slice(0, 2))} onBlur={commit} onKeyDown={(event) => { if (event.key === "Enter") commit() }} className="h-full w-9 rounded-none border-0 px-0 text-center text-sm tabular-nums shadow-none focus-visible:ring-2 focus-visible:ring-inset" />

) } /** The stepper, then save-for-later and remove as quiet text buttons. */ export function CartLineItemActions({ className }: { className?: string }) { const { line, quantity, maxQuantity, remove, saveForLater, loading } = useCartLineItem() const quiet = "h-auto rounded-none p-0 text-[13px] font-normal text-muted-foreground underline decoration-border underline-offset-4 hover:bg-transparent hover:text-foreground hover:decoration-foreground" return (

{saveForLater ? ( ) : null} {quantity >= maxQuantity && line.maxQuantity !== undefined ? (

{line.maxQuantity === 1 ? "Only one left." : `Only ${line.maxQuantity} left.`}

) : null}

) } /** * The folded row: what happened, and the way back. Focus moves to Undo, so * a keyboard is one key from reversing it; the row's live region reads it out. */ function CartLineItemUndo() { const { line, leaving, undo, density } = useCartLineItem() return (

{leaving === "saved" ? "Saved for later: " : "Removed: "} {line.name}

) } 62:["$","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"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["button","input"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"src/registry/ecomcn/cart-line-item/cart-line-item.tsx","content":"$65","type":"registry:component","target":"components/ecomcn/cart-line-item.tsx"}],"className":"h-[70svh] min-h-80"}]]}]