61: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"] 62: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"] 63:T6271,"use client" import * as React from "react" import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" /* * The variant picker on a product page: colour swatches, a size grid, and a * line that says what is left. * * * * or composed * * } /> * * * * Stock is worked out per option from the variants you pass: with Tan * picked, a size Tan has none of reads as sold out, and a size with two * pairs left says so. A sold-out option is struck through with a diagonal * rule and read out as sold out, but it can still be chosen — a shopper who * wants that size can ask to be told when it's back — and the status line * says why it can't be bought. The selection mark slides between options * with Motion; under reduced motion it fades. Parts share the selection and * the variant it points at through context; `useVariantSwatches()` reads it. */ export interface VariantValue { value: string /** Shown text, when it differs from `value`. */ label?: string /** A CSS background — `"#a8764a"`, or `"url(/linen.jpg) center / cover"`. */ swatch?: string } export interface VariantOption { /** "Colour", "Size" — also the key in the selection and in each variant. */ name: string values: (string | VariantValue)[] /** Defaults to "swatch" when any value has a swatch, "grid" otherwise. */ display?: "swatch" | "grid" } export interface Variant { id: string /** One value per option: `{ Colour: "Tan", Size: "41" }`. */ options: Record /** Units on hand. 0 is sold out; leave it out when you don't track stock. */ stock?: number } /** The shopper's picks, by option name. Options not yet chosen are absent. */ export type VariantSelection = Record export type VariantAvailability = | { kind: "available" } | { kind: "low"; stock: number } | { kind: "sold-out" } /** No variant has this combination at all. */ | { kind: "unavailable" } export interface VariantSwatchesMessages { /** Read out after a sold-out option's name. */ soldOutLabel: string /** Read out after the name of a combination that isn't made. */ unavailableLabel: string /** Under a size in the grid, when few are left: "2 left". */ stockLeft: (stock: number) => string /** The status line, for the chosen variant. */ lowStock: (stock: number) => string /** "41 is sold out in Tan." `others` are the other picks, as labels. */ soldOut: (value: string, others: string[]) => string unavailable: (value: string, others: string[]) => string } const MESSAGES: VariantSwatchesMessages = { soldOutLabel: "sold out", unavailableLabel: "not available", stockLeft: (stock) => `${stock} left`, lowStock: (stock) => `Only ${stock} left.`, soldOut: (value, others) => `${value} is sold out${others.length ? ` in ${others.join(", ")}` : ""}.`, unavailable: (value, others) => `${value} isn't made${others.length ? ` in ${others.join(", ")}` : ""}.`, } /** 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 AVAILABLE: VariantAvailability = { kind: "available" } /** A value with its label filled in, as the parts see it. */ export interface ResolvedVariantValue { value: string label: string swatch?: string } /** An option with its display settled, as the parts see it. */ export interface ResolvedVariantOption { name: string display: "swatch" | "grid" values: ResolvedVariantValue[] } function normalize(options: VariantOption[]): ResolvedVariantOption[] { return options.map((option) => { const values = option.values.map((v) => typeof v === "string" ? { value: v, label: v } : { ...v, label: v.label ?? v.value } ) return { name: option.name, display: option.display ?? (values.some((v) => v.swatch) ? "swatch" : "grid"), values, } }) } 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 VariantSwatchesContextValue { options: ResolvedVariantOption[] /** The selection, with any one-value option ("One size") filled in. */ value: VariantSelection /** Picks a value — a sold-out one too: `purchasable` and the status say so. */ select: (name: string, value: string) => void /** Stock for one option's value, given the shopper's other picks. */ availability: (name: string, value: string) => VariantAvailability /** The variant every option points at, once each has a pick. */ variant: Variant | undefined /** False until every option is picked, while stock loads, and while sold out. */ purchasable: boolean /** What the status line says right now, or null. */ status: string | null messages: VariantSwatchesMessages loading: boolean } const VariantSwatchesContext = React.createContext(null) export function useVariantSwatches() { const context = React.useContext(VariantSwatchesContext) if (!context) { throw new Error("useVariantSwatches must be used within .") } return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface VariantSwatchesProps extends Omit, "defaultValue" | "onChange"> { options: VariantOption[] /** Leave out to offer every combination, with no stock shown. */ variants?: Variant[] value?: VariantSelection defaultValue?: VariantSelection onValueChange?: (value: VariantSelection) => void /** The variant the picks now point at — undefined until each option has one. */ onVariantChange?: (variant: Variant | undefined) => void /** At or below this many, stock is shown: "Only 2 left." Defaults to 3. */ lowStockThreshold?: number /** Rendered beside the first size grid's label — a ``, say. */ sizeGuide?: React.ReactNode messages?: Partial /** Stock still on its way: placeholders in the shape of the options. */ loading?: boolean } export function VariantSwatches({ options: optionsProp, variants, value: valueProp, defaultValue = {}, onValueChange, onVariantChange, lowStockThreshold = 3, sizeGuide, messages: messagesProp, loading = false, className, children, ...props }: VariantSwatchesProps) { const [picked, setPicked] = useControllableState(valueProp, defaultValue, onValueChange) const options = React.useMemo(() => normalize(optionsProp), [optionsProp]) const messages = React.useMemo(() => ({ ...MESSAGES, ...messagesProp }), [messagesProp]) const value = React.useMemo(() => { const filled: VariantSelection = {} for (const option of options) { if (option.values.length === 1) filled[option.name] = option.values[0].value } return { ...filled, ...picked } }, [options, picked]) const availability = React.useCallback( (name: string, candidate: string): VariantAvailability => { if (!variants) return AVAILABLE let exists = false let untracked = false let stock = 0 for (const variant of variants) { if (variant.options[name] !== candidate) continue const fits = options.every( (o) => o.name === name || value[o.name] === undefined || variant.options[o.name] === value[o.name] ) if (!fits) continue exists = true if (variant.stock === undefined) untracked = true else stock += Math.max(0, variant.stock) } if (!exists) return { kind: "unavailable" } if (untracked) return AVAILABLE if (stock === 0) return { kind: "sold-out" } if (stock <= lowStockThreshold) return { kind: "low", stock } return AVAILABLE }, [variants, options, value, lowStockThreshold] ) const find = React.useCallback( (selection: VariantSelection) => options.every((o) => selection[o.name] !== undefined) ? variants?.find((v) => options.every((o) => v.options[o.name] === selection[o.name])) : undefined, [options, variants] ) const variant = find(value) const complete = options.every((o) => value[o.name] !== undefined) const purchasable = !loading && complete && (!variants || (variant !== undefined && variant.stock !== 0)) const select = React.useCallback( (name: string, next: string) => { if (value[name] === next) return setPicked({ ...picked, [name]: next }) onVariantChange?.(find({ ...value, [name]: next })) }, [value, picked, setPicked, onVariantChange, find] ) const status = React.useMemo(() => { const labelOf = (name: string, v: string) => options.find((o) => o.name === name)?.values.find((x) => x.value === v)?.label ?? v const othersThan = (name: string) => options .filter((o) => o.name !== name && value[o.name] !== undefined && o.values.length > 1) .map((o) => labelOf(o.name, value[o.name])) if (!variants) return null if (!complete) { // Part-way through: a pick that can't be had whatever comes next. for (const option of options) { const picked = value[option.name] if (picked === undefined || option.values.length < 2) continue const state = availability(option.name, picked) const label = labelOf(option.name, picked) if (state.kind === "sold-out") return messages.soldOut(label, othersThan(option.name)) if (state.kind === "unavailable") return messages.unavailable(label, othersThan(option.name)) } return null } // Explained by the last option — the size, usually — "in" the others. const last = [...options].reverse().find((o) => o.values.length > 1) ?? options[options.length - 1] const label = labelOf(last.name, value[last.name]) if (!variant) return messages.unavailable(label, othersThan(last.name)) if (variant.stock === 0) return messages.soldOut(label, othersThan(last.name)) if (variant.stock !== undefined && variant.stock <= lowStockThreshold) { return messages.lowStock(variant.stock) } return null }, [availability, complete, variants, variant, options, value, messages, lowStockThreshold]) const context = React.useMemo( () => ({ options, value, select, availability, variant, purchasable, status, messages, loading, }), [options, value, select, availability, variant, purchasable, status, messages, loading] ) // A product with nothing to choose: there is no picker to show. if (!children && !options.some((o) => o.values.length > 0)) return null const firstGrid = options.find((o) => o.display === "grid" && o.values.length > 1) return (

{children ?? ( <>

{options.map((option) => ( ))}

)}

) } /* ─── parts ────────────────────────────────────────────────────────────── */ export interface VariantSwatchesOptionProps extends Omit, "children"> { /** Which option: matches a `name` in `options`. */ name: string /** Beside the label, on the right — a size guide link. */ action?: React.ReactNode /** Grid columns. Defaults to one row up to six sizes, then even rows. */ columns?: number } /** * One option: its label, the value picked (or the one under the pointer or * focus), and the swatches or grid. A radio group — Tab enters on the pick, * the arrow keys move, Space or Enter chooses. Moving never chooses, so * arrowing past a colour doesn't swap the product photo on the way. */ export function VariantSwatchesOption({ name, action, columns, className, ...props }: VariantSwatchesOptionProps) { const { options, value, loading } = useVariantSwatches() const option = options.find((o) => o.name === name) const id = React.useId() const [preview, setPreview] = React.useState(null) if (!option || option.values.length === 0) return null const selected = value[name] const shown = option.values.find((v) => v.value === (preview ?? selected))?.label return (

{option.name} {shown && !loading ? ( 1 || undefined} data-slot="variant-swatches-value" className="ml-2 font-normal tracking-normal text-muted-foreground normal-case" > {shown} ) : null}

{action}

{loading ? ( ) : option.values.length === 1 ? null : ( )}

) } /** One row up to six; past that, the column count that leaves the fewest gaps. */ function columnsFor(count: number) { if (count <= 6) return count let best = 6 for (const c of [6, 5, 4]) { if ((c - (count % c)) % c < (best - (count % best)) % best) best = c } return best } function RadioGroup({ option, labelledBy, scope, columns, onPreview, }: { option: ResolvedVariantOption labelledBy: string scope: string columns?: number onPreview: (value: string | null) => void }) { const { value, select } = useVariantSwatches() const refs = React.useRef<(HTMLButtonElement | null)[]>([]) const selectedIndex = option.values.findIndex((v) => v.value === value[option.name]) const grid = option.display === "grid" const onKeyDown = (event: React.KeyboardEvent, index: number) => { const last = option.values.length - 1 const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? index === last ? 0 : index + 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? index === 0 ? last : index - 1 : event.key === "Home" ? 0 : event.key === "End" ? last : null if (next === null) return event.preventDefault() refs.current[next]?.focus() } return (

onPreview(null)} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) onPreview(null) }} className={cn( grid ? // One ruled block: the cells draw the right and bottom rules. "grid border-t border-l" : // The hit area is wider than the chip; the chips line up with the label. "-ml-1.5 flex flex-wrap" )} style={ grid ? { gridTemplateColumns: `repeat(${columns ?? columnsFor(option.values.length)}, minmax(0, 1fr))` } : undefined } > {option.values.map((v, i) => ( { refs.current[i] = node }} option={option} item={v} scope={scope} checked={i === selectedIndex} // Roving focus: Tab lands on the pick, or on the first option. tabIndex={i === (selectedIndex === -1 ? 0 : selectedIndex) ? 0 : -1} onKeyDown={(event) => onKeyDown(event, i)} onClick={() => select(option.name, v.value)} onPreview={onPreview} /> ))}

) } function OptionButton({ buttonRef, option, item, scope, checked, tabIndex, onKeyDown, onClick, onPreview, }: { // Not `ref`: on React 18 a function component never receives one. buttonRef: React.RefCallback option: ResolvedVariantOption item: ResolvedVariantValue scope: string checked: boolean tabIndex: number onKeyDown: (event: React.KeyboardEvent) => void onClick: () => void onPreview: (value: string | null) => void }) { const { availability, messages } = useVariantSwatches() const state = availability(option.name, item.value) const out = state.kind === "sold-out" || state.kind === "unavailable" const grid = option.display === "grid" return ( ) } /** * The pick's mark: ink behind a size, a ruled square around a swatch. One per * option, so Motion slides it from the old pick to the new; under reduced * motion it fades in where it lands. */ function SelectedMark({ layoutId, grid }: { layoutId: string; grid: boolean }) { const reduce = useReducedMotion() return ( ) } /** * The diagonal rule that says "not this one" without relying on colour. On * a swatch it has a halo in the page colour, so it reads on black as well * as on chalk. */ function Strike({ className, halo = false }: { className?: string; halo?: boolean }) { return ( ) } /** Placeholders in the option's own shape, so nothing jumps when stock lands. */ function OptionSkeleton({ option, columns }: { option: ResolvedVariantOption; columns?: number }) { const count = Math.max(option.values.length, 1) if (option.display === "swatch") { return (
{Array.from({ length: count }, (_, i) => ( ))}
) } return (
{Array.from({ length: count }, (_, i) => ( ))}
) } /** * The line under the picker: "Only 2 left.", or why the picks can't be * bought — "41 is sold out in Black." A polite live region, always in the page so every change is * read out; the line grows open and shut with Motion. */ export function VariantSwatchesStatus({ className, ...props }: Omit, "children">) { const { status, loading } = useVariantSwatches() const reduce = useReducedMotion() const message = loading ? null : status return (
{message ? (
{message}
) : null}
) } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/variant-swatches/variant-swatches.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/variant-swatches.tsx"}],"className":"h-[70svh] min-h-80"}]]}]