@vtex/faststore 0.0.1

package/dist/matter/variant-selector/variant-selector.js

@@ -0,0 +1,840 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { graphql } from "../../sdk/generated/gql.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { publishedVariantIdFor, selectedVariantVar } from "../../sdk/state/variant-selector.js";
+import { RadioGroup } from "../../particles/radio/radio.js";
+import { useReactiveVar } from "@apollo/client/react";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+//#region src/matter/variant-selector/variant-selector.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const fragment = graphql(`
+  fragment VariantSelectorData on Query {
+    productBySlug(slug: $slug) {
+      __typename
+      id
+      options {
+        name
+        values
+      }
+      variants(first: 50) {
+        edges {
+          node {
+            __typename
+            id
+            name
+            sku
+            availableForSale
+            selectedOptions {
+              name
+              value
+            }
+            images(first: 1) {
+              edges {
+                node {
+                  url
+                  altText
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`);
+const VARIANT_SELECTOR_CONTEXT_UNSET = Symbol("VariantSelectorContextUnset");
+const VariantSelectorContextInternal = createContext(VARIANT_SELECTOR_CONTEXT_UNSET);
+/** Exposed for advanced composition and tests that mount group/option in isolation. */
+const VariantSelectorContext = VariantSelectorContextInternal;
+const VariantSelectorGroupContext = createContext(null);
+/** Carries the swatch-content component the active swatch list chose, read by `VariantSelectorOption`.
+*  Null when an option renders outside a swatch list, in which case the option degrades to a text label. */
+const VariantSelectorSwatchContext = createContext(null);
+function useVariantSelector() {
+	const ctx = useContext(VariantSelectorContextInternal);
+	if (ctx === VARIANT_SELECTOR_CONTEXT_UNSET) throw new Error("VariantSelector components must be used inside VariantSelectorRoot.");
+	return ctx;
+}
+function useVariantSelectorGroup() {
+	const ctx = useContext(VariantSelectorGroupContext);
+	if (ctx === null) throw new Error("VariantSelector group parts (Title, swatch lists, Overflow, Option) must be used inside VariantSelectorOptionGroup.");
+	return ctx;
+}
+function deriveVariants(data) {
+	return data.variants.edges.map(({ node }) => {
+		const options = {};
+		for (const selected of node.selectedOptions) options[selected.name] = selected.value;
+		const primaryImage = node.images.edges[0]?.node ?? null;
+		return {
+			id: node.id,
+			name: node.name,
+			sku: node.sku,
+			availableForSale: node.availableForSale,
+			options,
+			image: primaryImage ? {
+				url: primaryImage.url,
+				alt: primaryImage.altText
+			} : null
+		};
+	});
+}
+/**
+* Resolve the variant activated by setting `axisName` to `value` while keeping the current
+* selection on the other axes. Mirrors the legacy `getSkuSlug` dominant-axis fallback: an exact
+* match across every current selection wins; otherwise the first variant carrying `value` on the
+* activated axis is used. String equality keeps `Size-7` distinct from `Size-7.5`.
+*/
+function resolveVariant(variants, currentSelection, axisName, value) {
+	const target = {
+		...currentSelection,
+		[axisName]: value
+	};
+	const exact = variants.find((variant) => Object.entries(target).every(([name, selected]) => variant.options[name] === selected));
+	if (exact) return exact;
+	return variants.find((variant) => variant.options[axisName] === value) ?? null;
+}
+function deriveAxes(data, variants, currentSelection) {
+	return data.options.map((option) => ({
+		name: option.name,
+		activeValue: currentSelection[option.name] ?? null,
+		options: option.values.map((value) => {
+			const resolved = resolveVariant(variants, currentSelection, option.name, value);
+			const swatch = resolved?.image ? {
+				imageUrl: resolved.image.url,
+				alt: resolved.image.alt ?? void 0
+			} : void 0;
+			return {
+				value,
+				available: resolved?.availableForSale ?? false,
+				variantId: resolved?.id ?? null,
+				swatch
+			};
+		})
+	}));
+}
+/**
+* Swatch inference for the auto swatch list `VariantSelectorSwatches` (legacy `useDefineVariant`): `color`
+* when every option carries a `hexColor`; `image` when a single option has an image, or when image sources
+* differ across options; `label` otherwise. Never returns `radio` — that look is explicit only.
+*/
+function inferDisplayMode(options) {
+	if (options.length > 0 && options.every((option) => Boolean(option.swatch?.hexColor))) return "color";
+	const imageUrls = options.map((option) => option.swatch?.imageUrl).filter((url) => Boolean(url));
+	if (imageUrls.length === 1) return "image";
+	const firstImageUrl = imageUrls[0];
+	const sourcesDiffer = imageUrls.some((url) => url !== firstImageUrl);
+	if (firstImageUrl !== void 0 && sourcesDiffer) return "image";
+	return "label";
+}
+function DefaultVariantImage({ src, alt }) {
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		"data-fs-variant-selector-option-image": ""
+	});
+}
+/** Plain text body: the value label, hooked as `data-fs-variant-selector-option-label` so an option's
+*  value text is styleable through the same selector everywhere (matching the radio swatch's label). */
+function LabelSwatchContent({ value }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-fs-variant-selector-option-label": "",
+		"aria-hidden": "true",
+		children: value
+	});
+}
+/** Image body: the variant thumbnail, degrading to the value label when no image source is present. */
+function ImageSwatchContent({ swatch, value, Image }) {
+	if (swatch?.imageUrl) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(Image, {
+			src: swatch.imageUrl,
+			alt: swatch.alt ?? value
+		})
+	});
+	return /* @__PURE__ */ jsx(LabelSwatchContent, {
+		swatch,
+		value,
+		Image
+	});
+}
+/**
+* Color body: a color chip, degrading gracefully when the value lacks a hex source. `hexColor` has no
+* Core Graph origin (see `VariantSelectorSwatch`), so a `color` group authored from a design may resolve
+* to values with no color: paint the chip when a hex is present, else fall back to the variant image,
+* else the value label — never an empty chip.
+*/
+function ColorSwatchContent({ swatch, value, Image }) {
+	if (swatch?.hexColor) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-fs-variant-selector-option-color": "",
+			title: value,
+			style: { "--fs-variant-selector-option-color-bkg-color": swatch.hexColor }
+		})
+	});
+	return /* @__PURE__ */ jsx(ImageSwatchContent, {
+		swatch,
+		value,
+		Image
+	});
+}
+/**
+* Radio body: a classic radio row — a control circle holding Base UI's indicator (the dot, shown when
+* checked) next to the value label. Both are direct children of the option root (no wrapper span) so the
+* group's `flex` on `data-fs-variant-selector-option` lays the control and label out as a row; each is
+* `aria-hidden` because the sibling sr-only span already owns the accessible name. Style `-control` as
+* the ring and `-indicator` as the dot.
+*/
+function RadioSwatchContent({ value }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"data-fs-variant-selector-option-control": "",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(Radio.Indicator, { "data-fs-variant-selector-option-indicator": "" })
+	}), /* @__PURE__ */ jsx("span", {
+		"data-fs-variant-selector-option-label": "",
+		"aria-hidden": "true",
+		children: value
+	})] });
+}
+const LABEL_SWATCH = {
+	mode: "label",
+	SwatchContent: LabelSwatchContent
+};
+const IMAGE_SWATCH = {
+	mode: "image",
+	SwatchContent: ImageSwatchContent
+};
+const COLOR_SWATCH = {
+	mode: "color",
+	SwatchContent: ColorSwatchContent
+};
+const RADIO_SWATCH = {
+	mode: "radio",
+	SwatchContent: RadioSwatchContent
+};
+/**
+* The swatch kinds the auto swatch list `VariantSelectorSwatches` can land on. `auto` is a runtime
+* decision — it cannot be a static component reference — so the inferred mode is mapped back to its kind
+* here. The explicit swatch lists bypass this entirely. `inferDisplayMode` never returns `radio`, but the
+* `Record` stays exhaustive over `ResolvedDisplayMode` so the lookup is total.
+*/
+const SWATCH_BY_INFERRED_MODE = {
+	label: LABEL_SWATCH,
+	image: IMAGE_SWATCH,
+	color: COLOR_SWATCH,
+	radio: RADIO_SWATCH
+};
+/**
+* Normalizes an axis name for matching: strips accents and case and collapses whitespace. This is a
+* deterministic normalization, not a linguistic guess — it only bridges trivial casing/accent/spacing
+* differences between an authored `optionName` and the catalog `ProductOption.name` (e.g. "cólor" vs
+* "Color"). Anything beyond that — translations, paraphrases, singular/plural — is resolved at
+* authoring time via `optionIndex`, which the schema author reads from the axis' visual order. The
+* runtime deliberately does no morphology. See variant-selector.md.
+*/
+function normalizeAxisName(name) {
+	return name.normalize("NFD").replaceAll(/[\u0300-\u036f]/g, "").toLowerCase().trim().replaceAll(/\s+/g, " ");
+}
+/**
+* Finds the axis an `optionName` refers to via a normalized (case/accent/whitespace-insensitive)
+* match, and only when it is unambiguous (exactly one axis), so a match can never silently bind to
+* the wrong axis. Non-trivial label differences are handled by `optionIndex`, never guessed here.
+*/
+function findAxisByName(axes, optionName) {
+	const exact = axes.find((axis) => axis.name === optionName);
+	if (exact) return exact;
+	const target = normalizeAxisName(optionName);
+	const matches = axes.filter((axis) => normalizeAxisName(axis.name) === target);
+	return matches.length === 1 ? matches[0] ?? null : null;
+}
+/**
+* Resolves the axis a group binds to. `optionName` (tolerant) takes precedence; `optionIndex`
+* (zero-based position) is the fallback so a generated schema can bind by visual order when the
+* localized label does not match the catalog name. Returns `null` when neither resolves.
+*/
+function resolveAxis(axes, optionName, optionIndex) {
+	if (optionName !== void 0) {
+		const byName = findAxisByName(axes, optionName);
+		if (byName) return byName;
+	}
+	if (optionIndex !== void 0 && Number.isInteger(optionIndex) && optionIndex >= 0 && optionIndex < axes.length) return axes[optionIndex] ?? null;
+	return null;
+}
+/**
+* Resolves the swatch kind a swatch list renders: an explicit kind passes through; `'auto'` infers from
+* the axis' options (and falls back to `label` for an unresolved axis).
+*/
+function resolveSwatchKind(swatch, axis) {
+	if (swatch !== "auto") return swatch;
+	return axis ? SWATCH_BY_INFERRED_MODE[inferDisplayMode(axis.options)] : LABEL_SWATCH;
+}
+/**
+* Computes the swatches to render under an effective `cap` (the count that fits the measured row, resolved
+* upstream). Collapses to the first `cap` options while always keeping the active swatch visible. `cap` is
+* by construction the most that fit one line, so when the active swatch sits past it we **swap** it for the
+* last head swatch (`cap - 1` head + active = `cap`) instead of appending (`cap + 1`, which would wrap or
+* overflow). Dropping the *last* head swatch keeps the leading options stable across selections and never
+* hides the primary (first) option. A `null` cap (measurement unavailable, no trigger, or expanded) shows
+* every swatch.
+*/
+function getVisibleOptions(axis, cap, expanded) {
+	if (cap === null || cap <= 0 || expanded || axis.options.length <= cap) return {
+		visibleOptions: axis.options,
+		hiddenCount: 0,
+		overflowing: false
+	};
+	const head = axis.options.slice(0, cap);
+	const activeOption = axis.activeValue !== null && !head.some((option) => option.value === axis.activeValue) && axis.options.some((option) => option.value === axis.activeValue) ? axis.options.find((option) => option.value === axis.activeValue) : void 0;
+	const visibleOptions = activeOption ? [...head.slice(0, cap - 1), activeOption] : head;
+	const hiddenCount = axis.options.length - visibleOptions.length;
+	return {
+		visibleOptions,
+		hiddenCount,
+		overflowing: hiddenCount > 0
+	};
+}
+/**
+* Pure fit math: given each option's outer width, the row `gap`, the list's available inner width, and an
+* optional `triggerWidth` to reserve for the "+N more" control, return how many options fit on one line.
+* By default the trigger is a sibling of the swatch list (its own space), so `triggerWidth` is 0 and the
+* swatches get the full width; pass the trigger's width when it sits inline at the end of the swatch row so
+* it stays on the line. When every option fits it returns the full count; otherwise the prefix that fits,
+* floored at 1 so an oversized single swatch never yields zero. Isolated from the DOM so the algorithm is
+* unit-testable with plain numbers.
+*/
+function computeVisibleCount(optionWidths, gap, available, triggerWidth = 0) {
+	const total = optionWidths.length;
+	if (total === 0) return 0;
+	let full = 0;
+	for (const w of optionWidths) full += w;
+	full += gap * (total - 1);
+	if (full <= available) return total;
+	const budget = triggerWidth > 0 ? available - triggerWidth - gap : available;
+	let used = 0;
+	let count = 0;
+	for (const w of optionWidths) {
+		const next = w + (count > 0 ? gap : 0);
+		if (used + next > budget) break;
+		used += next;
+		count++;
+	}
+	return Math.max(1, count);
+}
+/** Reads the swatch list's content-box inner width (the space the swatches actually lay out in) and the
+*  resolved horizontal row gap, from a single `getComputedStyle`. `clientWidth` includes horizontal padding,
+*  so a list styled with `px-*` would otherwise overestimate the space and fit one extra swatch. `columnGap`
+*  already resolves to a px value when `gap` is set (else `"normal"` → 0). */
+function readRowMetrics(el) {
+	const style = getComputedStyle(el);
+	const px = (value) => {
+		const parsed = Number.parseFloat(value);
+		return Number.isFinite(parsed) ? parsed : 0;
+	};
+	return {
+		available: el.clientWidth - px(style.paddingLeft) - px(style.paddingRight),
+		gap: px(style.columnGap)
+	};
+}
+/**
+* Measures how many swatches fit the list's width and returns that count, or `null` when measurement is
+* unavailable (collapse disabled, no trigger composed, no element, zero width, or no `ResizeObserver` — SSR
+* and jsdom) so the caller shows every swatch. Recomputes on `ResizeObserver` resize.
+*
+* The option-width cache is refreshed only while the full set is on screen (count `null` → all shown); once
+* collapsed we can no longer see every swatch, so a later resize recomputes from the cached widths.
+*
+* When `reserveTriggerSpace` is set (the author placed the "+N more" trigger inline at the end of the swatch
+* row), the sibling trigger's width is reserved from the fit. The trigger only mounts after the first
+* collapse, so a second pass (keyed on `count`) folds its width in; the trigger width is accumulated
+* monotonically so a shrinking "+N more" label can never flip-flop the fitting count.
+*/
+function useMeasuredVisibleCount({ listEl, optionCount, hasOverflow, enabled, reserveTriggerSpace }) {
+	const [count, setCount] = useState(null);
+	const widthsRef = useRef([]);
+	const triggerWidthRef = useRef(0);
+	const measureRef = useRef(() => {});
+	useIsomorphicLayoutEffect(() => {
+		if (!enabled || !hasOverflow || !listEl || typeof ResizeObserver === "undefined") {
+			widthsRef.current = [];
+			triggerWidthRef.current = 0;
+			measureRef.current = () => {};
+			setCount(null);
+			return;
+		}
+		widthsRef.current = [];
+		triggerWidthRef.current = 0;
+		const measure = () => {
+			const { available, gap } = readRowMetrics(listEl);
+			if (available <= 0) {
+				setCount(null);
+				return;
+			}
+			const optionEls = Array.from(listEl.querySelectorAll("[data-fs-variant-selector-option]"));
+			if (optionCount > 0 && optionEls.length === optionCount) widthsRef.current = optionEls.map((el) => el.offsetWidth);
+			if (reserveTriggerSpace) {
+				const triggerEl = listEl.parentElement?.querySelector("[data-fs-variant-selector-overflow-trigger]");
+				triggerWidthRef.current = Math.max(triggerWidthRef.current, triggerEl?.offsetWidth ?? 0);
+			}
+			const widths = widthsRef.current;
+			if (widths.length === 0) {
+				setCount(null);
+				return;
+			}
+			const next = computeVisibleCount(widths, gap, available, triggerWidthRef.current);
+			setCount((prev) => prev === next ? prev : next);
+		};
+		measureRef.current = measure;
+		measure();
+		const observer = new ResizeObserver(() => measure());
+		observer.observe(listEl);
+		return () => observer.disconnect();
+	}, [
+		listEl,
+		optionCount,
+		hasOverflow,
+		enabled,
+		reserveTriggerSpace
+	]);
+	useIsomorphicLayoutEffect(() => {
+		measureRef.current();
+	}, [count]);
+	return count;
+}
+const warnedUnresolvedAxes = /* @__PURE__ */ new Set();
+function warnUnresolvedAxis(optionName, optionIndex, axes) {
+	if (process.env.NODE_ENV === "production") return;
+	const available = axes.map((axis) => axis.name);
+	const key = `${optionName ?? ""}\u0000${optionIndex ?? ""}\u0000${available.join("
")}`;
+	if (warnedUnresolvedAxes.has(key)) return;
+	warnedUnresolvedAxes.add(key);
+	const list = available.length > 0 ? available.map((name, index) => `${index}:"${name}"`).join(", ") : "(none)";
+	console.warn(`[VariantSelector] Could not resolve an option axis for ${optionName === void 0 ? `optionIndex ${optionIndex}` : `optionName "${optionName}"`}. Available axes (index:name): ${list}. optionName must reference a catalog ProductOption.name (matched ignoring case and accents only); otherwise set optionIndex to the axis position (0-based, in the product option order).`);
+}
+const VariantSelectorRootDefinition = defineComponent({
+	name: "VariantSelectorRoot",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorRoot,
+	fragment,
+	fetchStrategy: "reactive",
+	editor: {
+		label: "Variant Selector",
+		category: "commerce"
+	},
+	schema: { selectedVariantId: {
+		type: "string",
+		label: "Selected Variant ID"
+	} },
+	providesContext: "variant-selector",
+	guideline: "Root container for PDP variant swatches — derives option axes and availability from the product variants and publishes the selected variant for sibling components. Wraps one VariantSelectorOptionGroup per axis. The selectedVariantId prop pre-selects the viewed SKU before the shopper interacts; the live selection wins once a swatch is activated."
+});
+const VariantSelectorOptionGroupDefinition = defineComponent({
+	name: "VariantSelectorOptionGroup",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorOptionGroup,
+	editor: {
+		label: "Variant Option Group",
+		category: "commerce"
+	},
+	schema: {
+		optionName: {
+			type: "string",
+			label: "Option axis name (catalog ProductOption.name)"
+		},
+		optionIndex: {
+			type: "number",
+			label: "Option axis index (0-based; fallback for optionName)"
+		},
+		reserveTriggerSpace: {
+			type: "boolean",
+			default: false,
+			label: "Reserve space for the \"+N more\" trigger"
+		}
+	},
+	requiresContext: "variant-selector",
+	providesContext: "variant-selector-group",
+	guideline: "One option axis (e.g. Color) inside a VariantSelectorRoot. A container only — it binds the axis and owns the collapse/expand state, then renders whatever you compose inside it. Fill it, in any order, with: a VariantSelectorGroupTitle (the axis name) and optionally a VariantSelectorGroupValue beside it to echo the selection, exactly one swatch list (VariantSelectorSwatches to auto-infer the look, or VariantSelectorColorSwatches / VariantSelectorImageSwatches / VariantSelectorLabelSwatches / VariantSelectorRadioSwatches to fix it), and optionally a VariantSelectorOverflow (\"+N more\") to collapse a row that does not fit its width. Because the parts read the group via context, you can place them freely — e.g. the title in an accordion header and the swatch list in its panel. Bind the axis with optionIndex (0-based, in the product's option order — the reliable choice when authoring from an image, since groups are placed in visual order) or, when the exact catalog option name is known, optionName (matched case/accent-insensitively, no plural/translation guessing). Compose a VariantSelectorOverflow to opt into automatic space-based collapse: the group measures the swatch row and keeps only the swatches that fit on one line, revealing the rest via the trigger — no cap prop. The trigger sits in its own space by default; set reserveTriggerSpace when it is styled inline at the end of the swatch row, so its width is reserved and it stays on the line."
+});
+const VariantSelectorGroupTitleDefinition = defineComponent({
+	name: "VariantSelectorGroupTitle",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorGroupTitle,
+	editor: {
+		label: "Variant Group Title",
+		category: "commerce"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Axis name override (defaults to the catalog axis name)"
+	} },
+	requiresContext: "variant-selector-group",
+	guideline: "The axis name inside a VariantSelectorOptionGroup (e.g. \"Color\"). Reads the axis from context, so it stays correct even when placed apart from the swatches (e.g. in an accordion header). Set label to match a design prompt (\"Selecione a cor\") without changing the axis binding. It renders the name only — to echo the selected value place a VariantSelectorGroupValue beside it (e.g. both inside a Container); the separator (a colon), the value weight, and the spacing are brand styling on the data-fs hooks, not props."
+});
+const VariantSelectorGroupValueDefinition = defineComponent({
+	name: "VariantSelectorGroupValue",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorGroupValue,
+	editor: {
+		label: "Variant Group Value",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "variant-selector-group",
+	guideline: "The live selected value of a VariantSelectorOptionGroup (e.g. \"Red\"), as its own placeable part. Compose it beside a VariantSelectorGroupTitle — typically both inside a Container — to render \"Color: Red\", where the colon and the value weight are styling on the data-fs hooks. Omit it entirely when the design shows only the axis name (e.g. above a radio list, whose selected dot already conveys the choice). It is decorative (aria-hidden): the selection is announced per option, so the group is named by the axis alone."
+});
+const VariantSelectorSwatchesDefinition = defineComponent({
+	name: "VariantSelectorSwatches",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorSwatches,
+	editor: {
+		label: "Variant Swatches (auto)",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "variant-selector-group",
+	guideline: "The swatch list inside a VariantSelectorOptionGroup, auto-inferring the look from the option data: color when every value has a hex color, image when values resolve to differing variant images, else label (it never infers radio). Renders one swatch per option automatically — do not author VariantSelectorOption children. To fix the look instead of inferring it, use a sibling list: VariantSelectorColorSwatches / VariantSelectorImageSwatches / VariantSelectorLabelSwatches / VariantSelectorRadioSwatches. Swatch shape (square vs circle) is styling. Use exactly one swatch list per group."
+});
+const VariantSelectorLabelSwatchesDefinition = defineComponent({
+	name: "VariantSelectorLabelSwatches",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorLabelSwatches,
+	editor: {
+		label: "Variant Label Swatches",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "variant-selector-group",
+	guideline: "Swatch list rendered as text-label swatches (size pills, materials, voltages, any axis that should read as text). Use inside a VariantSelectorOptionGroup when the look must always be text regardless of the data (auto can resolve a size axis to image when its values map to differing variant photos). Renders its options automatically. Use exactly one swatch list per group."
+});
+const VariantSelectorImageSwatchesDefinition = defineComponent({
+	name: "VariantSelectorImageSwatches",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorImageSwatches,
+	editor: {
+		label: "Variant Image Swatches",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "variant-selector-group",
+	guideline: "Swatch list rendered as image (thumbnail) swatches; each shows the variant's primary image, degrading to the value label when no image is available. Use inside a VariantSelectorOptionGroup; prefer binding that group by optionName so the photo pairs with its intended axis — a positionally-bound group with an image list can hijack a text axis (e.g. sizes shown as clothing photos) when the live product exposes fewer or reordered axes than the design. Renders its options automatically. Use exactly one swatch list per group."
+});
+const VariantSelectorColorSwatchesDefinition = defineComponent({
+	name: "VariantSelectorColorSwatches",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorColorSwatches,
+	editor: {
+		label: "Variant Color Swatches",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "variant-selector-group",
+	guideline: "Swatch list rendered as color-chip swatches. Use inside a VariantSelectorOptionGroup when the design shows solid color chips. A value with no hex color (hexColor has no catalog source and is injection-only) degrades per value to its variant image, then to the value label, so a chip is never empty — choosing this from a design's colored swatches is always safe. Shape (circle vs square) is styling. Renders its options automatically. Use exactly one swatch list per group."
+});
+const VariantSelectorRadioSwatchesDefinition = defineComponent({
+	name: "VariantSelectorRadioSwatches",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorRadioSwatches,
+	editor: {
+		label: "Variant Radio Swatches",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "variant-selector-group",
+	guideline: "Swatch list rendered as a radio-dot list — a control circle showing a dot when selected, beside the value label (common for voltage/material lists). Use inside a VariantSelectorOptionGroup; auto never picks this look, so reference it directly when the design shows a radio list. A square control or a checkmark is styling. Typically pair with a VariantSelectorGroupTitle (the axis name) and omit the VariantSelectorGroupValue, since the selected dot already conveys the choice. Renders its options automatically. Use exactly one swatch list per group."
+});
+const VariantSelectorOverflowDefinition = defineComponent({
+	name: "VariantSelectorOverflow",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorOverflow,
+	editor: {
+		label: "Variant Overflow Trigger",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "variant-selector-group",
+	guideline: "The \"+N more\" trigger inside a VariantSelectorOptionGroup. Composing it opts the group into automatic space-based collapse: the group measures the swatch row and, when the swatches do not fit on one line, collapses the extras behind this trigger, which expands them in place when clicked. It renders only while the row actually overflows. Author it after the swatch list; omit it when the row should never collapse."
+});
+const VariantSelectorOptionDefinition = defineComponent({
+	name: "VariantSelectorOption",
+	importPath: "@vtex/faststore/components",
+	component: VariantSelectorOption,
+	editor: {
+		label: "Variant Option",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "variant-selector-group",
+	guideline: "One swatch within a swatch list; reflects checked/disabled states and activates the matching variant on selection. Rendered automatically by the swatch list from the product data — do not author it directly."
+});
+function VariantSelectorRoot({ $data: $dataProp, selectedVariantId, className, children, ...props }) {
+	const $data = useDataOverride($dataProp);
+	const publishedSelection = useReactiveVar(selectedVariantVar);
+	const activeVariantId = publishedVariantIdFor(publishedSelection, $data?.id ?? null) ?? selectedVariantId ?? null;
+	let contextValue = null;
+	if ($data) {
+		const productId = $data.id;
+		const variants = deriveVariants($data);
+		const selectedVariant = variants.find((variant) => variant.id === activeVariantId) ?? variants[0] ?? null;
+		const currentSelection = selectedVariant?.options ?? {};
+		contextValue = {
+			axes: deriveAxes($data, variants, currentSelection),
+			selectedVariantId: selectedVariant?.id ?? null,
+			select: (axisName, value) => {
+				const resolved = resolveVariant(variants, currentSelection, axisName, value);
+				if (resolved) selectedVariantVar({
+					productId,
+					variantId: resolved.id
+				});
+			}
+		};
+	}
+	return /* @__PURE__ */ jsx(VariantSelectorContextInternal, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className,
+			"data-fs-variant-selector": "",
+			children
+		})
+	});
+}
+/** Axis container: binds the axis and owns the collapse/expand state, then renders whatever the author
+*  composes inside it (title, a swatch list, an overflow trigger). The parts read the axis and overflow
+*  state from the group context it provides, so they can be placed freely. */
+function VariantSelectorOptionGroup({ optionName, optionIndex, reserveTriggerSpace = false, ImageComponent = DefaultVariantImage, className, children, ...props }) {
+	const [expanded, setExpanded] = useState(false);
+	const [titleCount, setTitleCount] = useState(0);
+	const [overflowCount, setOverflowCount] = useState(0);
+	const [listEl, setListEl] = useState(null);
+	const titleId = useId();
+	const ctx = useVariantSelector();
+	const axis = ctx ? resolveAxis(ctx.axes, optionName, optionIndex) : null;
+	const registerTitle = useCallback(() => {
+		setTitleCount((count) => count + 1);
+		return () => setTitleCount((count) => count - 1);
+	}, []);
+	const hasTitle = titleCount > 0;
+	const registerOverflow = useCallback(() => {
+		setOverflowCount((count) => count + 1);
+		return () => setOverflowCount((count) => count - 1);
+	}, []);
+	const hasOverflow = overflowCount > 0;
+	const registerListElement = useCallback((el) => setListEl(el), []);
+	const measuredVisibleCount = useMeasuredVisibleCount({
+		listEl,
+		optionCount: axis?.options.length ?? 0,
+		hasOverflow,
+		enabled: hasOverflow && !expanded,
+		reserveTriggerSpace
+	});
+	const effectiveCap = expanded || !hasOverflow ? null : measuredVisibleCount;
+	const groupContextValue = useMemo(() => {
+		if (!ctx || !axis) return null;
+		const { visibleOptions, hiddenCount, overflowing } = getVisibleOptions(axis, effectiveCap, expanded);
+		return {
+			axis,
+			titleId,
+			hasTitle,
+			registerTitle,
+			registerOverflow,
+			hasOverflow,
+			registerListElement,
+			visibleOptions,
+			hiddenCount,
+			overflowing,
+			expand: () => setExpanded(true),
+			select: (value) => ctx.select(axis.name, value),
+			ImageComponent
+		};
+	}, [
+		ctx,
+		axis,
+		effectiveCap,
+		expanded,
+		titleId,
+		hasTitle,
+		registerTitle,
+		registerOverflow,
+		hasOverflow,
+		registerListElement,
+		ImageComponent
+	]);
+	if (!groupContextValue) {
+		if (ctx) warnUnresolvedAxis(optionName, optionIndex, ctx.axes);
+		return null;
+	}
+	return /* @__PURE__ */ jsx(VariantSelectorGroupContext.Provider, {
+		value: groupContextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className,
+			"data-fs-variant-selector-group": "",
+			"data-fs-variant-selector-group-overflow": groupContextValue.overflowing ? "true" : "false",
+			children
+		})
+	});
+}
+/** The axis name (the catalog axis name or `label`). Reads the axis from group context, so it reflects
+*  the bound axis wherever it is placed (including an accordion header). It is a `<span>`, not a `<label>`:
+*  it names the radiogroup via `aria-labelledby`, not a single control. Compose a `VariantSelectorGroupValue`
+*  beside it to echo the selection; the separator and value weight are styling on the `data-fs-*` hooks. */
+function VariantSelectorGroupTitle({ label, className, ...props }) {
+	const { axis, titleId, registerTitle } = useVariantSelectorGroup();
+	useEffect(() => registerTitle(), [registerTitle]);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		id: titleId,
+		className,
+		"data-fs-variant-selector-group-title": "",
+		children: label ?? axis.name
+	});
+}
+/** The live selected value of the group's axis, as a standalone placeable part. Decorative (`aria-hidden`):
+*  the selection is announced per option, so it never participates in the group's accessible name. */
+function VariantSelectorGroupValue({ className, ...props }) {
+	const { axis } = useVariantSelectorGroup();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className,
+		"data-fs-variant-selector-group-value": "",
+		children: axis.activeValue ?? ""
+	});
+}
+/** Internal: the swatch list shared by every kind, parametrized by the swatch it renders. The public
+*  lists fix `swatch` — `VariantSelectorSwatches` to `'auto'` and the explicit ones to a concrete kind.
+*  Provides the resolved swatch component to its options via context. Not registered in the catalog. */
+function VariantSelectorSwatchesBase({ swatch, className, ref: consumerRef, ...props }) {
+	const group = useVariantSelectorGroup();
+	const { registerListElement } = group;
+	const resolvedSwatch = resolveSwatchKind(swatch, group.axis);
+	const setListRef = useCallback((el) => {
+		registerListElement(el);
+		if (typeof consumerRef === "function") consumerRef(el);
+		else if (consumerRef) consumerRef.current = el;
+	}, [registerListElement, consumerRef]);
+	return /* @__PURE__ */ jsx(VariantSelectorSwatchContext.Provider, {
+		value: resolvedSwatch.SwatchContent,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			...props,
+			ref: setListRef,
+			className,
+			"aria-labelledby": group.hasTitle ? group.titleId : void 0,
+			"aria-label": group.axis.name,
+			value: group.axis.activeValue ?? "",
+			onValueChange: group.select,
+			"data-fs-variant-selector-group-list": "",
+			"data-fs-variant-selector-group-mode": resolvedSwatch.mode,
+			children: group.visibleOptions.map((option) => /* @__PURE__ */ jsx(VariantSelectorOption, { value: option.value }, option.value))
+		})
+	});
+}
+/** Auto-inferring swatch list: derives the look from the option data (color/image/label, never radio).
+*  Use an explicit sibling list to fix the look instead of inferring it. */
+function VariantSelectorSwatches(props) {
+	return /* @__PURE__ */ jsx(VariantSelectorSwatchesBase, {
+		swatch: "auto",
+		...props
+	});
+}
+/** Swatch list with text-label swatches. */
+function VariantSelectorLabelSwatches(props) {
+	return /* @__PURE__ */ jsx(VariantSelectorSwatchesBase, {
+		swatch: LABEL_SWATCH,
+		...props
+	});
+}
+/** Swatch list with image (thumbnail) swatches. */
+function VariantSelectorImageSwatches(props) {
+	return /* @__PURE__ */ jsx(VariantSelectorSwatchesBase, {
+		swatch: IMAGE_SWATCH,
+		...props
+	});
+}
+/** Swatch list with color-chip swatches (degrades per value to image, then label). */
+function VariantSelectorColorSwatches(props) {
+	return /* @__PURE__ */ jsx(VariantSelectorSwatchesBase, {
+		swatch: COLOR_SWATCH,
+		...props
+	});
+}
+/** Swatch list rendered as a radio-dot list (control circle + dot + label). */
+function VariantSelectorRadioSwatches(props) {
+	return /* @__PURE__ */ jsx(VariantSelectorSwatchesBase, {
+		swatch: RADIO_SWATCH,
+		...props
+	});
+}
+/** The "+N more" trigger: composing it opts the group into space-based collapse (via `registerOverflow`),
+*  and it renders only while the row overflows, expanding it in place when clicked. Registers in a
+*  layout effect so the group can measure and collapse before the browser paints (no full-row flash). */
+function VariantSelectorOverflow({ className, ...props }) {
+	const group = useVariantSelectorGroup();
+	const { registerOverflow } = group;
+	useIsomorphicLayoutEffect(() => registerOverflow(), [registerOverflow]);
+	if (!group.overflowing) return null;
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		type: "button",
+		onClick: group.expand,
+		className,
+		"data-fs-variant-selector-overflow-trigger": "",
+		"data-fs-variant-selector-overflow-count": group.hiddenCount,
+		children: [
+			"+",
+			group.hiddenCount,
+			" more"
+		]
+	});
+}
+function VariantSelectorOption({ value, ImageComponent, className }) {
+	const group = useVariantSelectorGroup();
+	const SwatchContent = useContext(VariantSelectorSwatchContext) ?? LabelSwatchContent;
+	const option = group.axis.options.find((candidate) => candidate.value === value) ?? null;
+	if (!option) return null;
+	const checked = group.axis.activeValue === value;
+	const disabled = !option.available;
+	const Image = ImageComponent ?? group.ImageComponent;
+	return /* @__PURE__ */ jsxs(Radio.Root, {
+		value,
+		disabled,
+		title: value,
+		className,
+		"data-fs-variant-selector-option": "",
+		"data-fs-variant-selector-option-checked": checked ? "true" : "false",
+		"data-fs-variant-selector-option-disabled": disabled ? "true" : "false",
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-fs-sr-only": "",
+			className: "sr-only",
+			children: [
+				group.axis.name,
+				": ",
+				value
+			]
+		}), /* @__PURE__ */ jsx(SwatchContent, {
+			swatch: option.swatch,
+			value,
+			Image
+		})]
+	});
+}
+const VariantSelector = {
+	Root: VariantSelectorRoot,
+	OptionGroup: VariantSelectorOptionGroup,
+	Title: VariantSelectorGroupTitle,
+	Value: VariantSelectorGroupValue,
+	Swatches: VariantSelectorSwatches,
+	LabelSwatches: VariantSelectorLabelSwatches,
+	ImageSwatches: VariantSelectorImageSwatches,
+	ColorSwatches: VariantSelectorColorSwatches,
+	RadioSwatches: VariantSelectorRadioSwatches,
+	Overflow: VariantSelectorOverflow,
+	Option: VariantSelectorOption
+};
+//#endregion
+export { VariantSelector, VariantSelectorColorSwatches, VariantSelectorColorSwatchesDefinition, VariantSelectorContext, VariantSelectorGroupContext, VariantSelectorGroupTitle, VariantSelectorGroupTitleDefinition, VariantSelectorGroupValue, VariantSelectorGroupValueDefinition, VariantSelectorImageSwatches, VariantSelectorImageSwatchesDefinition, VariantSelectorLabelSwatches, VariantSelectorLabelSwatchesDefinition, VariantSelectorOption, VariantSelectorOptionDefinition, VariantSelectorOptionGroup, VariantSelectorOptionGroupDefinition, VariantSelectorOverflow, VariantSelectorOverflowDefinition, VariantSelectorRadioSwatches, VariantSelectorRadioSwatchesDefinition, VariantSelectorRoot, VariantSelectorRootDefinition, VariantSelectorSwatches, VariantSelectorSwatchesDefinition, computeVisibleCount, inferDisplayMode };
+
+//# sourceMappingURL=variant-selector.js.map