{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cart", "type": "registry:ui", "title": "Cart", "description": "The cart as a sheet from the right (a bottom sheet on a phone): lines with a quantity and Remove undone from a toast, and a summary with a free-shipping meter, a rolling subtotal and Check out. Plus the header's cart button, Add to cart with its Added state, and useCartState, a cart in memory.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/chart.json", "https://littmd.vercel.app/r/dialog.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/media.json", "https://littmd.vercel.app/r/number-field.json", "https://littmd.vercel.app/r/price.json", "https://littmd.vercel.app/r/product-card.json", "https://littmd.vercel.app/r/rolling-number.json", "https://littmd.vercel.app/r/states.json", "https://littmd.vercel.app/r/toast.json" ], "files": [ { "path": "registry/litt/ui/cart.tsx", "type": "registry:ui", "content": "\"use client\";\n// @litt/cart 2026.11.06. What changed: https://littmd.vercel.app/changelog.md\n\n/**\n * Cart: the lines someone is about to buy, in a sheet, and the controls around it (components.md, \"Cart\").\n *\n * - The cart is plain data (CartItem) behind one small interface (CartState: items, count, subtotal, add, update,\n * remove, restore), so the parts do not care where it lives. useCartState keeps one in memory, for a demo or a store\n * without a backend; the `shopify` item's useShopifyCart keeps one in Shopify, with the same shape.\n * - Cart: the Dialog at side=\"right\", so it is a bottom sheet on compact screens that sits above the keyboard and\n * drags down to close. The lines scroll in the body; the summary is the footer, so it never scrolls away.\n * - CartLine: a 64px picture at 1/1 and the control radius, the title at the body size and the title weight in --litt-fg,\n * the picked options under it at the small size in --litt-fg-subtle, and the line's price at the end (\"€90 each\" under it\n * when there are several). Under them, a Number field at sm for the quantity, its label hidden (\"Quantity of Open\n * water\" for screen readers), and Remove as an sm ghost button named \"Remove Open water\". Lines are a ul split by\n * --litt-line hairlines, 16px above and below.\n * - Flat: no hairline between lines, the space parts them. The sheet is the Dialog's (--litt-surface-1, the float shadow).\n * - Remove: a line goes at once, with Undo in a toast (\"Removed Open water\"). No confirm: it can be undone. Focus moves\n * to the next line's Remove, or the previous one, or the empty state's action, never to the page behind. The toast\n * needs a Toaster mounted once near the root.\n * - CartSummary: an optional free-shipping Meter in --litt-fg, never a hue (\"€12 to free shipping\", then \"Free shipping\"),\n * the subtotal as a labelled figure at the end of its row, its figure a Rolling number, \"Taxes and shipping at\n * checkout.\" at the small size in --litt-fg-subtle, and Check out: a primary md button the width of the sheet, the open\n * cart's one accent fill (R6). It goes to checkoutUrl (Shopify's hosted checkout), or runs onCheckout.\n * - Empty: the Empty state, \"Your cart is empty\", and one secondary action back to the products. No Check out.\n * - CartButton: the header's way in, a ghost button with the bag icon and the count in tabular figures, named \"Cart, 3 items\".\n * The count is a Rolling number, so an add is seen where the cart lives.\n * - AddToCart: the product's primary action. While the add is in flight it shows the Button's spinner; then it says\n * \"Added\" with a check for 2s, colors and the label only (the box never changes size, both labels share one cell).\n * Sold out, it is a disabled \"Sold out\". The page fires its own toast (\"Added Open water\", with View cart); the cart\n * never opens by itself unless the page opens it.\n * - Motion: the sheet's own, and the Rolling numbers. Lines leave at once, quantities change at once. Nothing flies to\n * the cart: motion confirms, it never performs.\n */\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Button, type ButtonSize } from \"./button\";\nimport { Meter } from \"./chart\";\nimport { Dialog, DialogContent } from \"./dialog\";\nimport { BagIcon, CheckIcon } from \"./icons\";\nimport { Media } from \"./media\";\nimport { NumberField } from \"./number-field\";\nimport { formatMoney, multiplyMoney, sumMoney, Price, type Money } from \"./price\";\nimport type { ProductImage } from \"./product-card\";\nimport { RollingNumber } from \"./rolling-number\";\nimport { Empty } from \"./states\";\nimport { toast } from \"./toast\";\n\n/** One line of a cart: a variant and how many. */\nexport type CartItem = {\n /** The line's own id. The local cart makes one; Shopify gives its cart line's id. */\n id: string;\n /** The variant the line buys. Adding the same variant again adds to its line. */\n variantId: string;\n /** The product's name. */\n title: string;\n /** The picks in words: \"A2 · Natural oak\". */\n variantTitle?: string;\n quantity: number;\n /** The price of one. */\n price: Money;\n /** What one cost before a sale. */\n compareAt?: Money | null;\n image?: ProductImage;\n /** The most anyone may buy, such as the stock left. */\n maxQuantity?: number;\n};\n\n/** What the cart parts need from a cart, wherever it lives. useCartState and useShopifyCart both return it. */\nexport type CartState = {\n items: CartItem[];\n /** How many things, adding up the quantities. */\n count: number;\n subtotal: Money;\n /** The store's checkout page, when it has one (Shopify's cart.checkoutUrl). */\n checkoutUrl?: string;\n /** True while a change is on its way to the store. */\n pending?: boolean;\n /** Adds a variant, or adds to its line if it is already in the cart. */\n add: (item: Omit & { quantity?: number }) => void | Promise;\n /** Sets a line's quantity. */\n update: (id: string, quantity: number) => void | Promise;\n /** Takes a line out. */\n remove: (id: string) => void | Promise;\n /** Puts a removed line back where it was, for Undo. */\n restore: (item: CartItem, index: number) => void | Promise;\n};\n\n/* ----------------------------------------------------------------- a cart in memory */\n\n/** A cart kept in memory: for a demo, a prototype or a store without a backend. Same shape as useShopifyCart. */\nexport function useCartState(initial: CartItem[] = [], currencyCode = initial[0]?.price.currencyCode ?? \"EUR\"): CartState {\n const [items, setItems] = useState(initial);\n const next = useRef(0);\n return {\n items,\n count: items.reduce((sum, i) => sum + i.quantity, 0),\n subtotal: sumMoney(items.map((i) => multiplyMoney(i.price, i.quantity)), currencyCode),\n add: ({ quantity = 1, ...item }) =>\n setItems((list) => {\n const found = list.find((i) => i.variantId === item.variantId);\n if (found) return list.map((i) => (i === found ? { ...i, quantity: Math.min(i.quantity + quantity, i.maxQuantity ?? Infinity) } : i));\n next.current += 1;\n return [...list, { ...item, id: `line-${item.variantId}-${next.current}`, quantity }];\n }),\n update: (id, quantity) => setItems((list) => list.map((i) => (i.id === id ? { ...i, quantity } : i))),\n remove: (id) => setItems((list) => list.filter((i) => i.id !== id)),\n restore: (item, index) =>\n setItems((list) => (list.some((i) => i.id === item.id) ? list : [...list.slice(0, index), item, ...list.slice(index)])),\n };\n}\n\n/* ----------------------------------------------------------------- a line */\n\nexport type CartLineProps = {\n item: CartItem;\n /** Called with the new quantity, by a stepper, a key or a typed number. */\n onQuantityChange: (quantity: number) => void;\n /** Called when Remove is pressed. */\n onRemove: () => void;\n /** The locale for the prices. Leave it out for the page's. */\n locale?: string;\n className?: string;\n};\n\n/** One line of a cart: picture, name, picks, quantity, Remove and the line's price. Render it in a ul. */\nexport function CartLine({ item, onQuantityChange, onRemove, locale, className = \"\" }: CartLineProps) {\n const several = item.quantity > 1;\n return (\n
  • \n span[aria-hidden=true].pointer-events-none]:shadow-none\" />\n
    \n
    \n
    \n

    {item.title}

    \n {item.variantTitle &&

    {item.variantTitle}

    }\n
    \n
    \n \n {several && {formatMoney(item.price, locale)} each}\n
    \n
    \n
    \n q !== null && onQuantityChange(q)}\n className=\"w-28\"\n />\n \n
    \n
    \n
    • \n );\n}\n\n/* ----------------------------------------------------------------- the summary */\n\n/** Currency options for a figure that may or may not have cents, as formatMoney writes them. */\nconst moneyFormat = (money: Money): Intl.NumberFormatOptions => {\n const whole = Number.isInteger(typeof money.amount === \"number\" ? money.amount : Number.parseFloat(money.amount));\n return { style: \"currency\", currency: money.currencyCode, minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: whole ? 0 : 2 };\n};\nconst amount = (m: Money) => (typeof m.amount === \"number\" ? m.amount : Number.parseFloat(m.amount));\n\nexport type CartSummaryProps = {\n subtotal: Money;\n /** The subtotal that ships free. Shows a Meter of how far there is to go. */\n freeShippingAt?: Money;\n /** The words under the subtotal. */\n note?: ReactNode;\n /** Where Check out goes: the store's checkout page. */\n checkoutUrl?: string;\n /** Runs on Check out instead of following checkoutUrl. */\n onCheckout?: () => void;\n /** The button's words. */\n checkoutLabel?: string;\n /** Disables Check out, such as for an empty cart or while a change is on its way. */\n disabled?: boolean;\n /** Shows the Button's spinner on Check out. */\n loading?: boolean;\n locale?: string;\n className?: string;\n};\n\n/** The cart's foot: how far to free shipping, the subtotal, what is still to come, and Check out. */\nexport function CartSummary({\n subtotal,\n freeShippingAt,\n note = \"Taxes and shipping at checkout.\",\n checkoutUrl,\n onCheckout,\n checkoutLabel = \"Check out\",\n disabled = false,\n loading = false,\n locale,\n className = \"\",\n}: CartSummaryProps) {\n const left = freeShippingAt ? Math.max(0, amount(freeShippingAt) - amount(subtotal)) : 0;\n return (\n
    \n {freeShippingAt && (\n 0 ? `${formatMoney({ amount: left, currencyCode: subtotal.currencyCode }, locale)} to free shipping` : \"Free shipping\"}\n value={Math.min(amount(subtotal), amount(freeShippingAt))}\n max={amount(freeShippingAt)}\n valueText={left > 0 ? `${formatMoney(subtotal, locale)} of ${formatMoney(freeShippingAt, locale)}` : \"Included\"}\n />\n )}\n
    \n
    \n
    Subtotal
    \n
    \n \n
    \n
    \n {note &&

    {note}

    }\n
    \n {\n if (onCheckout) onCheckout();\n else if (checkoutUrl) window.location.assign(checkoutUrl);\n }}\n >\n {checkoutLabel}\n \n
    \n );\n}\n\n/* ----------------------------------------------------------------- the sheet */\n\nexport type CartProps = {\n /** Whether the sheet is open. Pair it with onOpenChange. */\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /** The cart: useCartState() or useShopifyCart(). */\n cart: CartState;\n /** The subtotal that ships free, for the summary's Meter. */\n freeShippingAt?: Money;\n /** Runs on Check out instead of following the cart's checkoutUrl. */\n onCheckout?: () => void;\n /** The empty cart's action. The default is \"Keep browsing\", which closes the sheet. */\n emptyAction?: ReactNode;\n /** The sheet's title. */\n title?: string;\n /** The locale for the prices. Leave it out for the page's. */\n locale?: string;\n};\n\n/** The cart as a sheet from the right (a bottom sheet on a phone): the lines, and the summary pinned at its foot. */\nexport function Cart({ open, onOpenChange, cart, freeShippingAt, onCheckout, emptyAction, title = \"Cart\", locale }: CartProps) {\n const body = useRef(null);\n /* After a removal, where focus goes: the line now at that index, else the one before, else the empty state's action. */\n const [focusAt, setFocusAt] = useState(null);\n useEffect(() => {\n if (focusAt === null) return;\n const root = body.current;\n const removes = root?.querySelectorAll(\"[data-cart-remove]\");\n const target = removes?.length ? removes[Math.min(focusAt, removes.length - 1)] : root?.querySelector(\"button\");\n target?.focus();\n setFocusAt(null);\n }, [focusAt, cart.items.length]);\n\n const empty = cart.items.length === 0;\n const remove = (item: CartItem, index: number) => {\n void cart.remove(item.id);\n setFocusAt(index);\n toast({ title: `Removed ${item.title}`, action: { label: \"Undo\", onClick: () => void cart.restore(item, index) } });\n };\n\n return (\n \n \n )\n }\n >\n
    \n {empty ? (\n onOpenChange(false)}>Keep browsing}>\n Anything you add shows here.\n \n ) : (\n
      \n {cart.items.map((item, i) => (\n void cart.update(item.id, q)}\n onRemove={() => remove(item, i)}\n />\n ))}\n
    \n )}\n
    \n \n     \n );\n}\n\n/* ----------------------------------------------------------------- the ways in */\n\nexport type CartButtonProps = {\n /** How many things are in the cart. */\n count: number;\n /** Opens the cart. */\n onClick: () => void;\n /** sm in a header (the default), md beside md controls. */\n size?: Exclude;\n className?: string;\n};\n\n/** The header's way into the cart: the bag and the count, which rolls when it changes. */\nexport function CartButton({ count, onClick, size = \"sm\", className = \"\" }: CartButtonProps) {\n return (\n }\n aria-label={`Cart, ${count} ${count === 1 ? \"item\" : \"items\"}`}\n aria-haspopup=\"dialog\"\n onClick={onClick}\n className={\"pointer-coarse:h-litt-control-md \" + className}\n >\n \n \n );\n}\n\nexport type AddToCartProps = {\n /** Adds the picked variant. It may return a promise: the button shows a spinner until it settles. */\n onAdd: () => void | Promise;\n /** The picked variant is out of stock: the button is a disabled \"Sold out\". */\n soldOut?: boolean;\n /** Nothing is picked yet, or the pick has no variant. */\n disabled?: boolean;\n /** The words. */\n label?: string;\n /** md on a product page (the default), lg only for a hero. */\n size?: ButtonSize;\n /** Fills the width of its column. */\n block?: boolean;\n className?: string;\n};\n\n/** A product's primary action: Add to cart, a spinner while it adds, then \"Added\" with a check for 2s. */\nexport function AddToCart({ onAdd, soldOut = false, disabled = false, label = \"Add to cart\", size = \"md\", block = true, className = \"\" }: AddToCartProps) {\n const [state, setState] = useState<\"idle\" | \"adding\" | \"added\">(\"idle\");\n const timer = useRef(undefined);\n useEffect(() => () => window.clearTimeout(timer.current), []);\n const added = state === \"added\";\n const press = async () => {\n setState(\"adding\");\n try {\n await onAdd();\n setState(\"added\");\n window.clearTimeout(timer.current);\n timer.current = window.setTimeout(() => setState(\"idle\"), 2000);\n } catch {\n setState(\"idle\");\n }\n };\n if (soldOut) {\n return (\n \n );\n }\n return (\n \n );\n}\n", "target": "components/litt/cart.tsx" } ], "docs": "Import Cart, CartButton, AddToCart and useCartState from components/litt/cart. Mount the Toaster once near your root for Remove's Undo. useShopifyCart from the shopify item returns the same CartState, so the parts work with either.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" } }