2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T2934,"use client"; import { motion, useReducedMotion } from "motion/react"; import { useId } from "react"; import type { ReactNode } from "react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { colorValue } from "../../ui/swatch/colors"; import { OptionPills, type OptionPillOption } from "../_shared/ui/option-pills"; import { EASE_OUT } from "../_shared/motion"; import { PortalScope } from "../_shared/portal-scope"; import { useResolvedSelection, type VariantSelection } from "../_shared/use-variant-selection"; export type PdpVariantPickerProps = { product: Product; selection?: VariantSelection; /** swatches: color dots + pills + segmented garment. dropdowns: Kobra select per option. pills-only: every option as pills. */ variant?: "swatches" | "dropdowns" | "pills-only"; /** Static size list when the product has no Size option (default S to 2XL). */ sizes?: readonly string[]; /** Sizes to show struck + disabled with a "Sold out" tooltip. Only pass what the store reports. */ soldOutSizes?: readonly string[]; /** Rendered beside the Size label: the size-guide trigger. */ sizeGuide?: ReactNode; className?: string; }; const ORDER = ["Garment", "Color", "Size"]; const rank = (name: string) => { const i = ORDER.indexOf(name); return i === -1 ? 1.5 : i; }; function Label({ name, value, aside, id }: { name: string; value?: string; aside?: ReactNode; id?: string }) { return (

{name} {value ? : {value} : null} {aside}

); } /** Round color dots on toggle-group. Hover or focus shows the colorway's own image in a tooltip. Arrow keys move within the group. */ function Swatches({ product, sel, name, }: { product: Product; sel: VariantSelection; name: string; }) { const values = product.options.find((o) => o.name === name)?.values ?? []; return ( next[0] && sel.select(name, next[0])} spacing={2} className="flex-wrap" > {values.map((value) => { const image = sel.imageForOption(name, value); const sold = !sel.isOptionAvailable(name, value); return ( } /> {image ? ( // eslint-disable-next-line @next/next/no-img-element

) : null} {sold ? `${value}, sold out` : value} ); })} ); } function Dropdown({ name, values, sel, invalid }: { name: string; values: OptionPillOption[]; sel: { value: string | undefined; onChange: (v: string) => void }; invalid?: boolean }) { return ( ); } /** Color swatches, size pills, garment segmented control. Emits through the shared variant selection. */ export function PdpVariantPicker({ product, selection, variant = "swatches", sizes, soldOutSizes = [], sizeGuide, className, }: PdpVariantPickerProps) { const sel = useResolvedSelection(product, selection, { sizes }); const reduce = useReducedMotion(); const uid = useId(); // Each Color maps 1:1 to a Garment (noteam: every garment has one colorway): hide Color, print it in the garment label. const colorByGarment = new Map>(); const garmentByColor = new Map>(); for (const v of product.variants) { const g = v.options.Garment; const c = v.options.Color; if (!g || !c) continue; colorByGarment.set(g, (colorByGarment.get(g) ?? new Set()).add(c)); garmentByColor.set(c, (garmentByColor.get(c) ?? new Set()).add(g)); } const colorMirrorsGarment = colorByGarment.size > 1 && colorByGarment.size === garmentByColor.size && [...colorByGarment.values()].every((s) => s.size === 1) && [...garmentByColor.values()].every((s) => s.size === 1); const names = [...product.options] .map((o) => o.name) .filter((n) => !(colorMirrorsGarment && n === "Color")) .sort((a, b) => rank(a) - rank(b)); const optionList = (name: string): OptionPillOption[] => (product.options.find((o) => o.name === name)?.values ?? []).map((value) => ({ value, label: colorMirrorsGarment && name === "Garment" ? `${value} · ${[...(colorByGarment.get(value) ?? [])][0]}` : undefined, disabled: !sel.isOptionAvailable(name, value), })); const sizeOptions: OptionPillOption[] = sel.sizes.map((value) => ({ value, disabled: soldOutSizes.includes(value), })); const sizeLabelId = `size-label-${uid}`; return (

{names.map((name) => { const isColor = name === "Color"; const isGarment = name === "Garment"; const isSize = name === "Size"; const options = optionList(name); if (options.length === 1) { // One value: nothing to choose, so a static "Label: value" line instead of a lone selected control. return (

{isColor && sel.imageNote ?

photo shows {sel.imageNote.toLowerCase()}

: null}

); } return (

{variant === "dropdowns" ? ( sel.select(name, v) }} /> ) : isColor && variant === "swatches" ? ( ) : ( String(o.label ?? o.value)).join("").length <= 26 ? "segmented" : "pill"} options={options} value={sel.selected[name]} onValueChange={(v) => sel.select(name, v)} /> )} {isColor && sel.imageNote ?

photo shows {sel.imageNote.toLowerCase()}

: null}

); })} {sel.needsSize ? (

{variant === "dropdowns" ? ( ) : ( )} {sel.sizeError ? (

Choose a size to add this to your cart.

) : null}

); } export default PdpVariantPicker; 32:T1d21,"use client"; /* * Variant selection for PDP blocks. * * const selection = useVariantSelection(product, { sizes?, initial?, initialSize? }); * * Returns a VariantSelection (see the type below): selected options, the resolved * `variant` (via `variantFor`), `price` / `compareAt`, gallery `images` (via * `imagesFor`, the variant image first), availability, and a static size list. * * Size is NOT a product option in brand-factory data (no per-size data exists), so it is * tracked beside the options: `size`, `setSize`, `needsSize`. When a product DOES have a * "Size" option (Shopify/Printify), it behaves like any other option and `needsSize` is false. * * Share one selection between blocks either by passing `selection` down as a prop, or by * wrapping them in ; every PDP block resolves * its selection with `useResolvedSelection(product, selectionProp)`. */ import { createContext, createElement, useCallback, useContext, useMemo, useState, type ReactNode, } from "react"; import { findCheapestVariant, variantFor } from "../../../lib/commerce/select"; import { DEFAULT_SIZES, sizesFor } from "./sizes"; import { imagesForVariant, initialVariant } from "./variant-images"; import type { Money, Product, ProductImage, Variant } from "../../../lib/commerce/types"; export { DEFAULT_SIZES }; export type VariantSelection = { product: Product; /** Selected product options, e.g. { Garment: "hoodie", Color: "Black" }. */ selected: Record; /** Select one option. If the combination does not exist, the other options snap to the closest variant. */ select: (name: string, value: string) => void; /** The resolved variant (undefined only if the product has no variants). */ variant: Variant | undefined; price: Money; compareAt: Money | undefined; /** Gallery images for the selection: the variant image first, then the product's. */ images: ProductImage[]; /** Set when the photo shown belongs to a different Color than the one selected ("photo shows "). */ imageNote: string | undefined; /** images[0]. */ image: ProductImage | undefined; /** The selected variant can be bought (not sold out). */ available: boolean; /** Available AND has a store URL ("coming soon" when false but available). */ buyable: boolean; /** Selected variant's mrch.shop / checkout URL, or null ("coming soon"). */ storeUrl: string | null; /** Static size list (empty when the product has its own "Size" option). */ sizes: readonly string[]; size: string | undefined; setSize: (size: string) => void; /** True when a size must be chosen before adding to the cart. */ needsSize: boolean; /** Set when an add was attempted without a size; clears when a size is chosen. */ sizeError: boolean; flagSizeError: () => void; /** Whether any available variant carries this option value (a sold-out value is disabled). */ isOptionAvailable: (name: string, value: string) => boolean; /** The image a variant with this option value shows (for swatch hover previews). */ imageForOption: (name: string, value: string) => ProductImage | undefined; }; export type UseVariantSelectionOptions = { initial?: Record; sizes?: readonly string[]; initialSize?: string; }; export function hasSizeOption(product: Product): boolean { return product.options.some((o) => o.name === "Size"); } function closest(product: Product, name: string, value: string, selected: Record) { const pool = product.variants.filter((v) => v.options[name] === value); if (pool.length === 0) return undefined; const score = (v: Variant) => Object.entries(selected).filter(([k, val]) => k !== name && v.options[k] === val).length + (v.available ? 0.5 : 0); return pool.reduce((a, b) => (score(b) > score(a) ? b : a)); } export function useVariantSelection( product: Product, opts: UseVariantSelectionOptions = {}, ): VariantSelection { const [selected, setSelected] = useState>(() => ({ ...(initialVariant(product)?.options ?? {}), ...opts.initial, })); const [size, setSizeState] = useState(opts.initialSize); const [sizeError, setSizeError] = useState(false); // Garment-aware: a product Size option wins; else the explicit `sizes` option; else sizesFor(garment) (null = one size). const rule = opts.sizes ?? sizesFor(selected.Garment); const needsSize = !hasSizeOption(product) && rule !== null; const sizes = needsSize && rule ? rule : []; const variant = useMemo(() => variantFor(product, selected), [product, selected]); const shown = useMemo(() => imagesForVariant(product, variant), [product, variant]); const images = shown.images; const select = useCallback( (name: string, value: string) => { setSelected((prev) => { const next = { ...prev, [name]: value }; if (variantFor(product, next)) return next; const near = closest(product, name, value, prev); return near ? { ...near.options } : prev; }); }, [product], ); const setSize = useCallback((value: string) => { setSizeState(value); setSizeError(false); }, []); const flagSizeError = useCallback(() => setSizeError(true), []); const isOptionAvailable = useCallback( (name: string, value: string) => product.variants.some((v) => v.options[name] === value && v.available), [product], ); const imageForOption = useCallback( (name: string, value: string) => (closest(product, name, value, selected) ?? undefined)?.image, [product, selected], ); const fallback = findCheapestVariant(product); // A product with no variants is "unavailable": no throw, price falls back to the catalog range. const available = Boolean(variant?.available); return { product, selected, select, variant, price: (variant ?? fallback)?.price ?? product.priceRange.min, compareAt: variant?.compareAt, images, imageNote: shown.mismatch ? shown.shownColor : undefined, image: images[0], available, buyable: available && Boolean(variant?.storeUrl), storeUrl: variant?.storeUrl ?? null, sizes, size, setSize, needsSize, sizeError, flagSizeError, isOptionAvailable, imageForOption, }; } const SelectionContext = createContext(null); /** Shares one selection with every PDP block below it. */ export function VariantSelectionProvider({ product, children, ...opts }: UseVariantSelectionOptions & { product: Product; children: ReactNode }) { const selection = useVariantSelection(product, opts); return createElement(SelectionContext.Provider, { value: selection }, children); } /** The selection from a surrounding VariantSelectionProvider, or null (for optional wiring). */ export function useSharedSelection(): VariantSelection | null { return useContext(SelectionContext); } /** The explicit prop, else the provider's selection for the same product, else a private one. */ export function useResolvedSelection( product: Product, selection?: VariantSelection, opts?: UseVariantSelectionOptions, ): VariantSelection { const shared = useContext(SelectionContext); const own = useVariantSelection(product, opts); if (selection) return selection; if (shared && shared.product.handle === product.handle) return shared; return own; } 33:Tdc2,"use client"; import { cva } from "class-variance-authority"; import type { ReactNode } from "react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import { PortalScope } from "../portal-scope"; export type OptionPillOption = { value: string; /** Visible label; defaults to `value`. */ label?: ReactNode; /** Unavailable: struck through and disabled. */ disabled?: boolean; /** Tooltip for a disabled option. Default "Sold out". */ reason?: string; }; const item = cva( "micro h-10 min-w-11 border border-rule bg-transparent px-3 text-ink hover:bg-surface aria-pressed:border-ink aria-pressed:bg-ink aria-pressed:text-canvas aria-pressed:hover:bg-ink data-[state=on]:bg-ink data-[state=on]:text-canvas disabled:line-through disabled:opacity-40 transition-[background-color,color,border-color,transform] duration-150 ease-out motion-reduce:transition-none active:scale-[0.97] motion-reduce:active:scale-100", { variants: { variant: { pill: "", /** Segmented: one conjoined bar, used for garment choice. */ segmented: "h-auto min-h-10 flex-1 whitespace-normal rounded-none px-2 py-1 text-center leading-[1.15] first:rounded-s-lg last:rounded-e-lg not-first:-ms-px", }, }, defaultVariants: { variant: "pill" }, }, ); export type OptionPillsProps = { options: OptionPillOption[]; value: string | undefined; onValueChange: (value: string) => void; /** Accessible name of the group ("Size", "Garment"). */ label: string; variant?: "pill" | "segmented"; /** Marks the group invalid (Kobra: aria-invalid + a message by the caller). */ invalid?: boolean; className?: string; }; /** Size or garment pills on Kobra toggle-group. Unavailable options are struck, disabled, and explain themselves. */ export function OptionPills({ options, value, onValueChange, label, variant = "pill", invalid, className, }: OptionPillsProps) { const segmented = variant === "segmented"; return ( next[0] && onValueChange(next[0])} spacing={segmented ? 0 : 2} className={cn( segmented ? "w-full" : "flex-wrap", invalid && "rounded-lg ring-3 ring-destructive/20", className, )} > {options.map((o) => { const button = ( {o.label ?? o.value} ); if (!o.disabled) return button; return ( }> {button} {o.reason ?? "Sold out"} ); })} ); } 34:T575,import { pdpDemoData, withSizeOption } from "../../../lib/commerce/fixtures/pdp"; import { PdpSizeGuide } from "../pdp-size-guide/pdp-size-guide"; import { PdpVariantPicker } from "./pdp-variant-picker"; export async function PdpVariantPickerDemo({ brand }: { brand?: string }) { const { product } = await pdpDemoData(brand); const sized = withSizeOption(product); return (

swatches (hover a color for its image) } />

dropdowns

pills-only

fixture: product with a real Size option, 2XL sold out

); } export default PdpVariantPickerDemo; 35:T5eb,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpVariantPickerMeta: BlockMeta = { slug: "pdp-variant-picker", title: "Variant picker", description: "Color swatches with image tooltips, size pills with sold-out states, garment segmented control. Swatches, dropdowns, or pills-only. Emits through the shared variant selection.", group: "pdp", kobraDeps: ["toggle-group", "toggle", "tooltip", "select"], files: [ "blocks/pdp/pdp-variant-picker/pdp-variant-picker.tsx", "blocks/pdp/_shared/use-variant-selection.ts", "blocks/pdp/_shared/ui/option-pills.tsx", "blocks/ui/swatch/colors.ts", "blocks/pdp/_shared/motion.ts", ], props: [ { name: "product", type: "Product", description: "Options come from product.options." }, { name: "selection", type: "VariantSelection", description: "Shared selection (optional; also resolved from VariantSelectionProvider)." }, { name: "variant", type: "'swatches' | 'dropdowns' | 'pills-only'", default: "'swatches'", description: "How options render." }, { name: "sizes", type: "string[]", default: "S, M, L, XL, 2XL", description: "Static sizes when the product has no Size option." }, { name: "soldOutSizes", type: "string[]", description: "Struck, disabled, tooltip 'Sold out'. Only what the store reports." }, { name: "sizeGuide", type: "ReactNode", description: "Trigger slot beside the Size label (pdp-size-guide)." }, ], tags: ["pdp", "variant", "swatch", "size"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#pdp","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"PDP"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Variant picker"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Variant picker"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Color swatches with image tooltips, size pills with sold-out states, garment segmented control. Swatches, dropdowns, or pills-only. Emits through the shared variant selection."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"pdp-variant-picker","group":"pdp","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/pdp/pdp-variant-picker/pdp-variant-picker.tsx","code":"$31"},{"path":"blocks/pdp/_shared/use-variant-selection.ts","code":"$32"},{"path":"blocks/pdp/_shared/ui/option-pills.tsx","code":"$33"},{"path":"blocks/ui/swatch/colors.ts","code":"// Garment color name -> CSS color for swatch dots. Unknown names fall back to a\n// neutral so a new Printify color never renders as an invisible dot.\nconst COLORS: Record = {\n black: \"#101010\",\n white: \"#ffffff\",\n navy: \"#1b2a49\",\n \"forest green\": \"#1f3d2b\",\n green: \"#2f6b3f\",\n red: \"#b3262d\",\n maroon: \"#5e1b26\",\n royal: \"#2a4aa8\",\n blue: \"#2f5fb3\",\n \"light blue\": \"#a9c1e8\",\n grey: \"#8a8a8a\",\n gray: \"#8a8a8a\",\n \"sport grey\": \"#9a9a9a\",\n charcoal: \"#3a3a3a\",\n \"dark heather\": \"#3b3d42\",\n heather: \"#b5b5b5\",\n sand: \"#d8cdb4\",\n natural: \"#e8dfcb\",\n cream: \"#f1ead8\",\n tan: \"#c2a67c\",\n brown: \"#5b3d2a\",\n pink: \"#e8a5b8\",\n purple: \"#5b3a8c\",\n yellow: \"#e8c935\",\n gold: \"#c79a2b\",\n orange: \"#d9692b\",\n \"stone blue\": \"#7d93a6\",\n pepper: \"#4a4a48\",\n \"washed black\": \"#2b2b2b\",\n};\n\nexport function colorValue(name: string): string {\n return COLORS[name.trim().toLowerCase()] ?? \"#c8c6c0\";\n}\n"},{"path":"blocks/pdp/_shared/motion.ts","code":"/*\n * House motion for the PDP blocks (Kobra design-eng numbers).\n * Full literal class strings so Tailwind can see them.\n * enter: 150-250ms on EASE_OUT exit: shorter, on EASE_EXIT\n * Use together with `motion-reduce:transition-none` / `motion-reduce:animate-none`.\n */\nexport const EASE_OUT = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\nexport const EASE_EXIT = \"ease-[cubic-bezier(0.4,0,0.6,1)]\";\n\n/** Shared focus ring (Kobra: one ring, keyboard only). */\nexport const FOCUS_RING = \"outline-none focus-visible:ring-3 focus-visible:ring-ring/50\";\n"},{"path":"blocks/pdp/pdp-variant-picker/demo.tsx","code":"$34"},{"path":"blocks/pdp/pdp-variant-picker/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]