{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "eased-commerce-core",
"title": "Commerce core primitive",
"description": "Shared pieces for Eased e-commerce blocks: drawn product art, colour swatches, the price line, a rolling quantity stepper, the bag button and money and stock formats.",
"dependencies": [
"motion"
],
"registryDependencies": [
"https://eased.dev/r/eased-tokens.json",
"https://eased.dev/r/eased-motion.json",
"https://eased.dev/r/eased-number-roll.json"
],
"files": [
{
"path": "src/registry/eased/_primitives/commerce-core/commerce-core.tsx",
"content": "\"use client\";\n\n/**\n * commerce-core: the pieces every Eased e-commerce block shares, so a product card, a cart and\n * a wishlist read as one store: drawn product art, colour swatches, the price line, the\n * quantity stepper and the money and stock formats. Import from here.\n */\nimport { AnimatePresence, motion, useAnimate } from \"motion/react\";\nimport { useEffect, useId, useRef, type ComponentProps, type CSSProperties } from \"react\";\nimport { trueMinus } from \"../../lib/format\";\nimport { ease, reducedFade, swap, swapIn, swapOut, swapShown, useSafeReducedMotion } from \"../../lib/motion\";\nimport { pressIcon } from \"../../lib/press\";\nimport { NumberRoll } from \"../number-roll/number-roll\";\n\n/* ---------- Types ------------------------------------------------------------------------ */\n\n/** One buyable combination, as every commerce block takes it. */\nexport type ProductVariant = {\n id: string;\n /** Colourway name, e.g. \"Moss\". */\n color: string;\n /** The colourway's swatch colour (product data, like a photo). */\n swatch: string;\n /** \"M\", or \"One size\". */\n size: string;\n stock: number;\n price: number;\n compareAt?: number;\n};\n\n/* ---------- Formats ---------------------------------------------------------------------- */\n\nexport const COMMERCE_LOCALE = \"en-US\";\n\nexport type MoneyOptions = { currency?: string; locale?: Intl.LocalesArgument; /** Default: none for whole amounts, 2 otherwise. */ decimals?: number };\n\n/** Intl options for a price, ready for NumberRoll's `format`: `$248`, `$89.50`. */\nexport const moneyFormat = (value: number, { currency = \"USD\", decimals }: MoneyOptions = {}): Intl.NumberFormatOptions => {\n const d = decimals ?? (Number.isInteger(value) ? 0 : 2);\n return { style: \"currency\", currency, minimumFractionDigits: d, maximumFractionDigits: d };\n};\n\n/** `$248`, `$1,284.50`, `−$51.30` (true minus). */\nexport const formatMoney = (value: number, { locale = COMMERCE_LOCALE, ...o }: MoneyOptions = {}) =>\n trueMinus(new Intl.NumberFormat(locale, moneyFormat(value, o)).format(value));\n\n/** `−20%` for a markdown, or undefined when there is none. */\nexport const discountLabel = (price: number, compareAt?: number, locale: Intl.LocalesArgument = COMMERCE_LOCALE) =>\n compareAt && compareAt > price\n ? trueMinus(new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 0, signDisplay: \"always\" }).format(-(1 - price / compareAt)))\n : undefined;\n\nexport type StockState = \"in\" | \"low\" | \"out\";\n/** `out` at 0, `low` at or under `lowAt` (default 3), else `in`. */\nexport const stockState = (stock: number, lowAt = 3): StockState => (stock <= 0 ? \"out\" : stock <= lowAt ? \"low\" : \"in\");\n\n/* ---------- Price ------------------------------------------------------------------------ */\n\nexport type PriceProps = MoneyOptions & {\n value: number;\n /** The original price; shown struck through when higher than `value`. */\n compareAt?: number;\n /** Roll the digits when the value changes. Default true. */\n roll?: boolean;\n className?: string;\n};\n\n/** The selling price (rolls when it changes), then the struck original, muted. */\nexport function Price({ value, compareAt, roll = true, currency = \"USD\", locale = COMMERCE_LOCALE, decimals, className = \"\" }: PriceProps) {\n const sale = compareAt !== undefined && compareAt > value;\n const fmt = moneyFormat(value, { currency, decimals });\n const spoken = `${formatMoney(value, { currency, locale, decimals })}${sale ? `, was ${formatMoney(compareAt, { currency, locale, decimals })}` : \"\"}`;\n return (\n \n {spoken}\n \n {roll ? : formatMoney(value, { currency, locale, decimals })}\n \n \n {sale && (\n \n {formatMoney(compareAt, { currency, locale, decimals })}\n \n )}\n \n \n );\n}\n\n/* ---------- Swatch ----------------------------------------------------------------------- */\n\n/** A colourway dot. The colour is product data (like a photo), so it is the one raw value allowed in. */\nexport function Swatch({ color, size = 16, className = \"\" }: { color: string; size?: number; className?: string }) {\n return (\n \n );\n}\n\n/* ---------- Product art ------------------------------------------------------------------ */\n\nexport type ProductArtKind = \"jacket\" | \"shell\" | \"crew\" | \"short\" | \"pack\" | \"beanie\";\n\nexport type ProductArtProps = {\n kind: ProductArtKind;\n /** The colourway's hex: the garment's fill; the backdrop is a 12% tint of it on the sunken surface. */\n color: string;\n /** Accessible name, e.g. \"Ridgeline Down Jacket in Moss\". Leave it out when a caption already names it. */\n label?: string;\n /** Classes for the frame. Give it a size or an aspect ratio; the art keeps 4:5 and centres. */\n className?: string;\n};\n\nconst BODY = \"M50 25h20c4 4 10 6 16 8 8 3 12 10 14 22l4 52q0 4-4 4h-8q-3 0-3-3l-3-42v52q0 4-4 4H38q-4 0-4-4V66l-3 42q0 3-3 3h-8q-4 0-4-4l4-52c2-12 6-19 14-22 6-2 12-4 16-8Z\";\n\n/**\n * A drawn product shot: a garment silhouette in the colourway over a soft tint of it, lit from\n * the top left, with a contact shadow. Stands in for photography in demos and empty states;\n * swap it for an `![]()
` with `image-ring` in production.\n */\nexport function ProductArt({ kind, color, label, className = \"\" }: ProductArtProps) {\n const id = useId().replace(/:/g, \"\");\n const shade = `url(#${id}s)`;\n const line = \"stroke-black/20\";\n const lift = \"stroke-white/15\";\n return (\n \n \n \n );\n}\n\n/* ---------- Quantity stepper ------------------------------------------------------------- */\n\nexport type QtyStepperProps = {\n value: number;\n onValueChange: (value: number) => void;\n min?: number;\n max?: number;\n /** At `min`, the minus becomes a bin and calls this instead. */\n onRemove?: () => void;\n /** What is being counted, for the buttons' names: \"Ridgeline Down Jacket\". */\n label: string;\n locale?: Intl.LocalesArgument;\n className?: string;\n};\n\n/**\n * − 2 +, 32px, digits rolling in the direction of the step. With `onRemove`, the minus morphs\n * into a bin at the minimum, so the last press removes the line instead of dead-ending.\n */\nexport function QtyStepper({ value, onValueChange, min = 1, max = 99, onRemove, label, locale = COMMERCE_LOCALE, className = \"\" }: QtyStepperProps) {\n const reduced = useSafeReducedMotion();\n const bin = onRemove !== undefined && value <= min;\n const btn = `relative inline-flex h-full w-8 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] text-text-secondary hover-fine:not-disabled:bg-surface-hover hover-fine:not-disabled:text-text disabled:cursor-not-allowed disabled:text-text-disabled ${pressIcon}`;\n return (\n \n
(bin ? onRemove?.() : onValueChange(Math.max(min, value - 1)))}\n className={`${btn} radius-nested`}\n >\n \n \n \n {bin ? : }\n \n \n \n \n \n = max}\n onClick={() => onValueChange(Math.min(max, value + 1))}\n className={`${btn} radius-nested`}\n >\n \n \n