@vtex/faststore 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"variant-selector.js","names":["BaseRadio"],"sources":["../../../src/matter/variant-selector/variant-selector.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  createContext,\n  type FunctionComponent,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { RadioGroup } from '../../particles/radio/radio.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { VariantSelectorDataFragment } from '../../sdk/generated/graphql.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\n\n// `useLayoutEffect` on the client, `useEffect` on the server: keeps the pre-paint (no-flash) measurement\n// and overflow registration on the client while silencing React 19's \"useLayoutEffect does nothing on the\n// server\" SSR warning. Mirrors the useEffect-for-SSR convention in `sdk/data/page-reactive-data-root.tsx`.\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — typed via @graphql-codegen client-preset\n// ---------------------------------------------------------------------------\n\nconst fragment = graphql(`\n  fragment VariantSelectorData on Query {\n    productBySlug(slug: $slug) {\n      __typename\n      id\n      options {\n        name\n        values\n      }\n      variants(first: 50) {\n        edges {\n          node {\n            __typename\n            id\n            name\n            sku\n            availableForSale\n            selectedOptions {\n              name\n              value\n            }\n            images(first: 1) {\n              edges {\n                node {\n                  url\n                  altText\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ProductSlice = NonNullable<VariantSelectorDataFragment['productBySlug']>;\n\n/** The swatch kinds a swatch list can render. Each maps to a dedicated swatch-content component and to a\n *  `data-fs-variant-selector-group-mode` value; `inferDisplayMode` resolves one for the auto swatch list\n *  (`VariantSelectorSwatches`), and the explicit lists (`VariantSelectorColorSwatches`, …) fix one directly. */\ntype ResolvedDisplayMode = 'label' | 'image' | 'color' | 'radio';\n\n/** Per-value swatch media. `imageUrl`/`alt` are derived from the matching variant's primary image\n *  (`Variant.images`) so the `image`/`auto` display modes work from live data. `hexColor` has no\n *  Core Graph source (`ProductOption.values: [String!]!`) and is populated only when a host injects\n *  it through context — see specs/sku-selector.md gap row 2. */\nexport type VariantSelectorSwatch = {\n  hexColor?: string;\n  imageUrl?: string;\n  alt?: string;\n};\n\nexport type VariantSelectorOptionData = {\n  value: string;\n  available: boolean;\n  variantId: string | null;\n  swatch?: VariantSelectorSwatch;\n};\n\nexport type VariantSelectorAxis = {\n  name: string;\n  activeValue: string | null;\n  options: VariantSelectorOptionData[];\n};\n\nexport type VariantSelectorContextValue = {\n  axes: VariantSelectorAxis[];\n  selectedVariantId: string | null;\n  select: (axisName: string, value: string) => void;\n} | null;\n\n/** Provided by `VariantSelectorOptionGroup` to its composed parts (title, swatch list, overflow, and the\n *  options the list renders). The group owns the axis binding and the collapse/expand state; the parts read\n *  what they need from here, so the author can place them freely — e.g. the title in an accordion header\n *  and the swatch list in its panel. */\ntype VariantSelectorGroupContextValue = {\n  axis: VariantSelectorAxis;\n  /** Stable id shared by the title (`id`) and the swatch list (`aria-labelledby`) to label the radiogroup. */\n  titleId: string;\n  /** Whether a `VariantSelectorGroupTitle` is composed in this group. The swatch list points its\n   *  `aria-labelledby` at the title only when one exists; otherwise it relies on the `aria-label`\n   *  axis-name floor, so the radiogroup is never labelled by a dangling idref. */\n  hasTitle: boolean;\n  /** Registers a mounted `VariantSelectorGroupTitle`, returning an unregister for cleanup. Ref-counted so\n   *  the title can be placed freely (e.g. an accordion header) and still flip `hasTitle`. */\n  registerTitle: () => () => void;\n  /** Registers a mounted `VariantSelectorOverflow`, returning an unregister for cleanup. Ref-counted like\n   *  `registerTitle`, so the trigger can be placed freely and still flip `hasOverflow`. Space-based collapse\n   *  runs only while a trigger is composed, so hidden swatches always have a reveal affordance. */\n  registerOverflow: () => () => void;\n  /** Whether a `VariantSelectorOverflow` is composed in this group — gates the measured collapse. */\n  hasOverflow: boolean;\n  /** Ref callback the swatch list hands its container element to, so the group can measure the row width. */\n  registerListElement: (el: HTMLElement | null) => void;\n  visibleOptions: VariantSelectorOptionData[];\n  hiddenCount: number;\n  overflowing: boolean;\n  expand: () => void;\n  /** Activates `value` on this group's axis. */\n  select: (value: string) => void;\n  ImageComponent: FunctionComponent<{ src: string; alt: string }>;\n};\n\nexport type VariantSelectorRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: ProductSlice | null;\n  /** Pre-selects the variant the page is showing (the viewed SKU) before the shopper interacts.\n   *  `productBySlug` resolves to the product group, so the page supplies the viewed variant id here\n   *  — mirroring `ProductGalleryRoot.selectedVariantId`. The published `selectedVariantVar` wins\n   *  once a swatch is activated; this prop is only the initial fallback. */\n  selectedVariantId?: string;\n};\n\nexport type VariantSelectorOptionGroupProps = ComponentPropsWithRef<'div'> & {\n  /** Catalog `ProductOption.name` this group binds (e.g. `\"Color\"`). Matched case/accent/whitespace-\n   *  insensitively but otherwise exactly — the runtime does no plural or translation guessing. Use this\n   *  only when the exact catalog name is known; otherwise bind by `optionIndex`. When both are given, a\n   *  successful name match wins and `optionIndex` is the fallback. */\n  optionName?: string;\n  /** Zero-based axis position, in the order the product defines its options. The preferred binding for\n   *  generated schemas: the author places one group per axis in visual top-to-bottom order, which lines\n   *  up with the product's option order — reliable even when the on-image label differs from the catalog\n   *  name. Used when `optionName` is absent or does not match any axis. */\n  optionIndex?: number;\n  /** Reserve space for the `VariantSelectorOverflow` trigger in the fit calculation. Off by default: the\n   *  trigger is a sibling of the swatch list (its own space), so the swatches use the full row width. Turn\n   *  it on only when the trigger is styled inline at the end of the swatch row (content-sized) so it stays\n   *  on the line — its measured width is then subtracted from the space available to the swatches. */\n  reserveTriggerSpace?: boolean;\n  /** Image renderer used by image/color swatches; defaults to a plain `<img>`. Hosts inject e.g. next/image. */\n  ImageComponent?: FunctionComponent<{ src: string; alt: string }>;\n};\n\n/** Title for a `VariantSelectorOptionGroup`: renders the axis name (or your `label`). Reads the axis from\n *  group context, so it can be placed anywhere inside the group (e.g. an accordion header). Compose a\n *  `VariantSelectorGroupValue` beside it to echo the live selection — the separator, weight, and spacing\n *  between the two are brand styling on the `data-fs-*` hooks, not baked into this component. */\nexport type VariantSelectorGroupTitleProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {\n  /** Overrides the displayed axis name. Defaults to the catalog axis name (e.g. `\"Color\"`). Use it to match\n   *  a design's prompt copy such as `\"Selecione a cor\"`; it never changes which axis the group binds. Any\n   *  separator (e.g. a trailing colon) is styling — add it to the title's `data-fs-*` hook, not the text. */\n  label?: string;\n};\n\n/** The live selected value of a `VariantSelectorOptionGroup`, as a standalone placeable part (e.g. beside\n *  the title inside a container). Decorative/`aria-hidden`: the selection is already announced per option,\n *  so echoing it here would make the group's accessible name churn on every change. */\nexport type VariantSelectorGroupValueProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\n/** The swatch list for a `VariantSelectorOptionGroup`: a radiogroup of the axis' option swatches,\n *  auto-rendered from the product data. The component chooses the swatch look — `VariantSelectorSwatches`\n *  infers it, the explicit variants fix it — so the kind is selected by composition, not a prop. */\nexport type VariantSelectorSwatchesProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'>;\n\n/** The \"+N more\" trigger for a `VariantSelectorOptionGroup`: composing it opts the group into measured,\n *  space-based collapse, and it renders only while the row actually overflows, expanding it in place.\n *  Reads the hidden count and expand action from group context. */\nexport type VariantSelectorOverflowProps = Omit<ComponentPropsWithRef<'button'>, 'children'>;\n\nexport type VariantSelectorOptionProps = {\n  value: string;\n  className?: string;\n  ImageComponent?: FunctionComponent<{ src: string; alt: string }>;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst VARIANT_SELECTOR_CONTEXT_UNSET = Symbol('VariantSelectorContextUnset');\n\nconst VariantSelectorContextInternal = createContext<\n  VariantSelectorContextValue | typeof VARIANT_SELECTOR_CONTEXT_UNSET\n>(VARIANT_SELECTOR_CONTEXT_UNSET);\n\n/** Exposed for advanced composition and tests that mount group/option in isolation. */\nexport const VariantSelectorContext = VariantSelectorContextInternal as React.Context<VariantSelectorContextValue>;\n\nexport const VariantSelectorGroupContext = createContext<VariantSelectorGroupContextValue | null>(null);\n\n/** Carries the swatch-content component the active swatch list chose, read by `VariantSelectorOption`.\n *  Null when an option renders outside a swatch list, in which case the option degrades to a text label. */\nconst VariantSelectorSwatchContext = createContext<FunctionComponent<SwatchContentProps> | null>(null);\n\nfunction useVariantSelector(): VariantSelectorContextValue {\n  const ctx = useContext(VariantSelectorContextInternal);\n  if (ctx === VARIANT_SELECTOR_CONTEXT_UNSET) {\n    throw new Error('VariantSelector components must be used inside VariantSelectorRoot.');\n  }\n  return ctx;\n}\n\nfunction useVariantSelectorGroup(): VariantSelectorGroupContextValue {\n  const ctx = useContext(VariantSelectorGroupContext);\n  if (ctx === null) {\n    throw new Error(\n      'VariantSelector group parts (Title, swatch lists, Overflow, Option) must be used inside VariantSelectorOptionGroup.',\n    );\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Derivation\n// ---------------------------------------------------------------------------\n\ntype DerivedVariant = {\n  id: string;\n  name: string;\n  sku: string;\n  availableForSale: boolean;\n  options: Record<string, string>;\n  image: { url: string; alt: string | null } | null;\n};\n\nfunction deriveVariants(data: ProductSlice): DerivedVariant[] {\n  return data.variants.edges.map(({ node }) => {\n    const options: Record<string, string> = {};\n    for (const selected of node.selectedOptions) {\n      options[selected.name] = selected.value;\n    }\n    const primaryImage = node.images.edges[0]?.node ?? null;\n    return {\n      id: node.id,\n      name: node.name,\n      sku: node.sku,\n      availableForSale: node.availableForSale,\n      options,\n      image: primaryImage ? { url: primaryImage.url, alt: primaryImage.altText } : null,\n    };\n  });\n}\n\n/**\n * Resolve the variant activated by setting `axisName` to `value` while keeping the current\n * selection on the other axes. Mirrors the legacy `getSkuSlug` dominant-axis fallback: an exact\n * match across every current selection wins; otherwise the first variant carrying `value` on the\n * activated axis is used. String equality keeps `Size-7` distinct from `Size-7.5`.\n */\nfunction resolveVariant(\n  variants: DerivedVariant[],\n  currentSelection: Record<string, string>,\n  axisName: string,\n  value: string,\n): DerivedVariant | null {\n  const target = { ...currentSelection, [axisName]: value };\n  const exact = variants.find((variant) =>\n    Object.entries(target).every(([name, selected]) => variant.options[name] === selected),\n  );\n  if (exact) return exact;\n  return variants.find((variant) => variant.options[axisName] === value) ?? null;\n}\n\nfunction deriveAxes(\n  data: ProductSlice,\n  variants: DerivedVariant[],\n  currentSelection: Record<string, string>,\n): VariantSelectorAxis[] {\n  return data.options.map((option) => ({\n    name: option.name,\n    activeValue: currentSelection[option.name] ?? null,\n    options: option.values.map((value) => {\n      const resolved = resolveVariant(variants, currentSelection, option.name, value);\n      const swatch: VariantSelectorSwatch | undefined = resolved?.image\n        ? { imageUrl: resolved.image.url, alt: resolved.image.alt ?? undefined }\n        : undefined;\n      return {\n        value,\n        available: resolved?.availableForSale ?? false,\n        variantId: resolved?.id ?? null,\n        swatch,\n      };\n    }),\n  }));\n}\n\n/**\n * Swatch inference for the auto swatch list `VariantSelectorSwatches` (legacy `useDefineVariant`): `color`\n * when every option carries a `hexColor`; `image` when a single option has an image, or when image sources\n * differ across options; `label` otherwise. Never returns `radio` — that look is explicit only.\n */\nexport function inferDisplayMode(options: VariantSelectorOptionData[]): ResolvedDisplayMode {\n  if (options.length > 0 && options.every((option) => Boolean(option.swatch?.hexColor))) {\n    return 'color';\n  }\n\n  const imageUrls = options.map((option) => option.swatch?.imageUrl).filter((url): url is string => Boolean(url));\n  if (imageUrls.length === 1) return 'image';\n\n  const firstImageUrl = imageUrls[0];\n  const sourcesDiffer = imageUrls.some((url) => url !== firstImageUrl);\n  if (firstImageUrl !== undefined && sourcesDiffer) return 'image';\n\n  return 'label';\n}\n\nfunction DefaultVariantImage({ src, alt }: Readonly<{ src: string; alt: string }>) {\n  // biome-ignore lint/performance/noImgElement: default swatch fallback; production hosts inject ImageComponent (e.g. next/image).\n  return <img src={src} alt={alt} data-fs-variant-selector-option-image=\"\" />;\n}\n\n/**\n * Props shared by every swatch-content component. Each component renders the decorative (aria-hidden)\n * body of one option — the accessible name lives in the sibling sr-only span owned by the option shell,\n * so everything here is purely visual. Shape (square/circle/pill) and the selected-state highlight are\n * owned by styling, never by this code.\n */\ntype SwatchContentProps = Readonly<{\n  swatch: VariantSelectorSwatch | undefined;\n  value: string;\n  Image: FunctionComponent<{ src: string; alt: string }>;\n}>;\n\n/** Plain text body: the value label, hooked as `data-fs-variant-selector-option-label` so an option's\n *  value text is styleable through the same selector everywhere (matching the radio swatch's label). */\nfunction LabelSwatchContent({ value }: SwatchContentProps) {\n  return (\n    <span data-fs-variant-selector-option-label=\"\" aria-hidden=\"true\">\n      {value}\n    </span>\n  );\n}\n\n/** Image body: the variant thumbnail, degrading to the value label when no image source is present. */\nfunction ImageSwatchContent({ swatch, value, Image }: SwatchContentProps) {\n  if (swatch?.imageUrl) {\n    return (\n      <span aria-hidden=\"true\">\n        <Image src={swatch.imageUrl} alt={swatch.alt ?? value} />\n      </span>\n    );\n  }\n  return <LabelSwatchContent swatch={swatch} value={value} Image={Image} />;\n}\n\n/**\n * Color body: a color chip, degrading gracefully when the value lacks a hex source. `hexColor` has no\n * Core Graph origin (see `VariantSelectorSwatch`), so a `color` group authored from a design may resolve\n * to values with no color: paint the chip when a hex is present, else fall back to the variant image,\n * else the value label — never an empty chip.\n */\nfunction ColorSwatchContent({ swatch, value, Image }: SwatchContentProps) {\n  if (swatch?.hexColor) {\n    return (\n      <span aria-hidden=\"true\">\n        <div\n          data-fs-variant-selector-option-color=\"\"\n          title={value}\n          style={{ '--fs-variant-selector-option-color-bkg-color': swatch.hexColor } as CSSProperties}\n        />\n      </span>\n    );\n  }\n  return <ImageSwatchContent swatch={swatch} value={value} Image={Image} />;\n}\n\n/**\n * Radio body: a classic radio row — a control circle holding Base UI's indicator (the dot, shown when\n * checked) next to the value label. Both are direct children of the option root (no wrapper span) so the\n * group's `flex` on `data-fs-variant-selector-option` lays the control and label out as a row; each is\n * `aria-hidden` because the sibling sr-only span already owns the accessible name. Style `-control` as\n * the ring and `-indicator` as the dot.\n */\nfunction RadioSwatchContent({ value }: SwatchContentProps) {\n  return (\n    <>\n      <span data-fs-variant-selector-option-control=\"\" aria-hidden=\"true\">\n        <BaseRadio.Indicator data-fs-variant-selector-option-indicator=\"\" />\n      </span>\n      <span data-fs-variant-selector-option-label=\"\" aria-hidden=\"true\">\n        {value}\n      </span>\n    </>\n  );\n}\n\n/**\n * A swatch kind: the `data-fs-variant-selector-group-mode` value it advertises for styling, paired with\n * the component that renders it. Each explicit swatch list (`VariantSelectorColorSwatches`, …) references\n * one of these constants directly, so the swatch is chosen by composition rather than by mapping a\n * `displayMode` string at render time.\n */\ntype SwatchKind = {\n  mode: ResolvedDisplayMode;\n  SwatchContent: FunctionComponent<SwatchContentProps>;\n};\n\nconst LABEL_SWATCH: SwatchKind = { mode: 'label', SwatchContent: LabelSwatchContent };\nconst IMAGE_SWATCH: SwatchKind = { mode: 'image', SwatchContent: ImageSwatchContent };\nconst COLOR_SWATCH: SwatchKind = { mode: 'color', SwatchContent: ColorSwatchContent };\nconst RADIO_SWATCH: SwatchKind = { mode: 'radio', SwatchContent: RadioSwatchContent };\n\n/**\n * The swatch kinds the auto swatch list `VariantSelectorSwatches` can land on. `auto` is a runtime\n * decision — it cannot be a static component reference — so the inferred mode is mapped back to its kind\n * here. The explicit swatch lists bypass this entirely. `inferDisplayMode` never returns `radio`, but the\n * `Record` stays exhaustive over `ResolvedDisplayMode` so the lookup is total.\n */\nconst SWATCH_BY_INFERRED_MODE: Record<ResolvedDisplayMode, SwatchKind> = {\n  label: LABEL_SWATCH,\n  image: IMAGE_SWATCH,\n  color: COLOR_SWATCH,\n  radio: RADIO_SWATCH,\n};\n\n// ---------------------------------------------------------------------------\n// Axis resolution\n// ---------------------------------------------------------------------------\n\n/**\n * Normalizes an axis name for matching: strips accents and case and collapses whitespace. This is a\n * deterministic normalization, not a linguistic guess — it only bridges trivial casing/accent/spacing\n * differences between an authored `optionName` and the catalog `ProductOption.name` (e.g. \"cólor\" vs\n * \"Color\"). Anything beyond that — translations, paraphrases, singular/plural — is resolved at\n * authoring time via `optionIndex`, which the schema author reads from the axis' visual order. The\n * runtime deliberately does no morphology. See variant-selector.md.\n */\nfunction normalizeAxisName(name: string): string {\n  return name\n    .normalize('NFD')\n    .replaceAll(/[\\u0300-\\u036f]/g, '')\n    .toLowerCase()\n    .trim()\n    .replaceAll(/\\s+/g, ' ');\n}\n\n/**\n * Finds the axis an `optionName` refers to via a normalized (case/accent/whitespace-insensitive)\n * match, and only when it is unambiguous (exactly one axis), so a match can never silently bind to\n * the wrong axis. Non-trivial label differences are handled by `optionIndex`, never guessed here.\n */\nfunction findAxisByName(axes: VariantSelectorAxis[], optionName: string): VariantSelectorAxis | null {\n  const exact = axes.find((axis) => axis.name === optionName);\n  if (exact) return exact;\n  const target = normalizeAxisName(optionName);\n  const matches = axes.filter((axis) => normalizeAxisName(axis.name) === target);\n  return matches.length === 1 ? (matches[0] ?? null) : null;\n}\n\n/**\n * Resolves the axis a group binds to. `optionName` (tolerant) takes precedence; `optionIndex`\n * (zero-based position) is the fallback so a generated schema can bind by visual order when the\n * localized label does not match the catalog name. Returns `null` when neither resolves.\n */\nfunction resolveAxis(\n  axes: VariantSelectorAxis[],\n  optionName: string | undefined,\n  optionIndex: number | undefined,\n): VariantSelectorAxis | null {\n  if (optionName !== undefined) {\n    const byName = findAxisByName(axes, optionName);\n    if (byName) return byName;\n  }\n  if (optionIndex !== undefined && Number.isInteger(optionIndex) && optionIndex >= 0 && optionIndex < axes.length) {\n    return axes[optionIndex] ?? null;\n  }\n  return null;\n}\n\n/**\n * Resolves the swatch kind a swatch list renders: an explicit kind passes through; `'auto'` infers from\n * the axis' options (and falls back to `label` for an unresolved axis).\n */\nfunction resolveSwatchKind(swatch: SwatchKind | 'auto', axis: VariantSelectorAxis | null): SwatchKind {\n  if (swatch !== 'auto') return swatch;\n  return axis ? SWATCH_BY_INFERRED_MODE[inferDisplayMode(axis.options)] : LABEL_SWATCH;\n}\n\n/**\n * Computes the swatches to render under an effective `cap` (the count that fits the measured row, resolved\n * upstream). Collapses to the first `cap` options while always keeping the active swatch visible. `cap` is\n * by construction the most that fit one line, so when the active swatch sits past it we **swap** it for the\n * last head swatch (`cap - 1` head + active = `cap`) instead of appending (`cap + 1`, which would wrap or\n * overflow). Dropping the *last* head swatch keeps the leading options stable across selections and never\n * hides the primary (first) option. A `null` cap (measurement unavailable, no trigger, or expanded) shows\n * every swatch.\n */\nfunction getVisibleOptions(\n  axis: VariantSelectorAxis,\n  cap: number | null,\n  expanded: boolean,\n): { visibleOptions: VariantSelectorOptionData[]; hiddenCount: number; overflowing: boolean } {\n  if (cap === null || cap <= 0 || expanded || axis.options.length <= cap) {\n    return { visibleOptions: axis.options, hiddenCount: 0, overflowing: false };\n  }\n  const head = axis.options.slice(0, cap);\n  const activeHidden =\n    axis.activeValue !== null &&\n    !head.some((option) => option.value === axis.activeValue) &&\n    axis.options.some((option) => option.value === axis.activeValue);\n  const activeOption = activeHidden ? axis.options.find((option) => option.value === axis.activeValue) : undefined;\n  // Swap the active swatch in for the last head swatch (keeping the count at `cap`) rather than appending it.\n  const visibleOptions = activeOption ? [...head.slice(0, cap - 1), activeOption] : head;\n  const hiddenCount = axis.options.length - visibleOptions.length;\n  return { visibleOptions, hiddenCount, overflowing: hiddenCount > 0 };\n}\n\n// ---------------------------------------------------------------------------\n// Space measurement (the swatch overflow driver)\n// ---------------------------------------------------------------------------\n\n/**\n * Pure fit math: given each option's outer width, the row `gap`, the list's available inner width, and an\n * optional `triggerWidth` to reserve for the \"+N more\" control, return how many options fit on one line.\n * By default the trigger is a sibling of the swatch list (its own space), so `triggerWidth` is 0 and the\n * swatches get the full width; pass the trigger's width when it sits inline at the end of the swatch row so\n * it stays on the line. When every option fits it returns the full count; otherwise the prefix that fits,\n * floored at 1 so an oversized single swatch never yields zero. Isolated from the DOM so the algorithm is\n * unit-testable with plain numbers.\n */\nexport function computeVisibleCount(optionWidths: number[], gap: number, available: number, triggerWidth = 0): number {\n  const total = optionWidths.length;\n  if (total === 0) return 0;\n\n  // Single accumulating pass (O(n)): total row width is the sum of widths plus one gap between each pair.\n  let full = 0;\n  for (const w of optionWidths) full += w;\n  full += gap * (total - 1);\n  if (full <= available) return total;\n\n  // Reserve the trigger (and the gap before it) only when it shares the swatch row.\n  const budget = triggerWidth > 0 ? available - triggerWidth - gap : available;\n  let used = 0;\n  let count = 0;\n  for (const w of optionWidths) {\n    const next = w + (count > 0 ? gap : 0);\n    if (used + next > budget) break;\n    used += next;\n    count++;\n  }\n  return Math.max(1, count);\n}\n\n/** Reads the swatch list's content-box inner width (the space the swatches actually lay out in) and the\n *  resolved horizontal row gap, from a single `getComputedStyle`. `clientWidth` includes horizontal padding,\n *  so a list styled with `px-*` would otherwise overestimate the space and fit one extra swatch. `columnGap`\n *  already resolves to a px value when `gap` is set (else `\"normal\"` → 0). */\nfunction readRowMetrics(el: HTMLElement): { available: number; gap: number } {\n  const style = getComputedStyle(el);\n  const px = (value: string) => {\n    const parsed = Number.parseFloat(value);\n    return Number.isFinite(parsed) ? parsed : 0;\n  };\n  const available = el.clientWidth - px(style.paddingLeft) - px(style.paddingRight);\n  return { available, gap: px(style.columnGap) };\n}\n\n/**\n * Measures how many swatches fit the list's width and returns that count, or `null` when measurement is\n * unavailable (collapse disabled, no trigger composed, no element, zero width, or no `ResizeObserver` — SSR\n * and jsdom) so the caller shows every swatch. Recomputes on `ResizeObserver` resize.\n *\n * The option-width cache is refreshed only while the full set is on screen (count `null` → all shown); once\n * collapsed we can no longer see every swatch, so a later resize recomputes from the cached widths.\n *\n * When `reserveTriggerSpace` is set (the author placed the \"+N more\" trigger inline at the end of the swatch\n * row), the sibling trigger's width is reserved from the fit. The trigger only mounts after the first\n * collapse, so a second pass (keyed on `count`) folds its width in; the trigger width is accumulated\n * monotonically so a shrinking \"+N more\" label can never flip-flop the fitting count.\n */\nfunction useMeasuredVisibleCount({\n  listEl,\n  optionCount,\n  hasOverflow,\n  enabled,\n  reserveTriggerSpace,\n}: {\n  listEl: HTMLElement | null;\n  optionCount: number;\n  hasOverflow: boolean;\n  enabled: boolean;\n  reserveTriggerSpace: boolean;\n}): number | null {\n  const [count, setCount] = useState<number | null>(null);\n  const widthsRef = useRef<number[]>([]);\n  const triggerWidthRef = useRef(0);\n  const measureRef = useRef<() => void>(() => {});\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled || !hasOverflow || !listEl || typeof ResizeObserver === 'undefined') {\n      widthsRef.current = [];\n      triggerWidthRef.current = 0;\n      // Disable the count-keyed re-measure below, so an expanded group is never re-collapsed.\n      measureRef.current = () => {};\n      setCount(null);\n      return;\n    }\n    // Re-measure fresh for this configuration (this effect re-runs when `optionCount` changes, so a\n    // client-side navigation that reuses this group with a different option set can never keep serving\n    // a stale width cache). The cache only persists across resizes (the ResizeObserver, which does not\n    // re-run this effect). The trigger width is likewise kept monotonic only across resizes below.\n    widthsRef.current = [];\n    triggerWidthRef.current = 0;\n\n    const measure = () => {\n      const { available, gap } = readRowMetrics(listEl);\n      if (available <= 0) {\n        setCount(null);\n        return;\n      }\n      const optionEls = Array.from(listEl.querySelectorAll<HTMLElement>('[data-fs-variant-selector-option]'));\n      // Refresh the width cache only when every option is on screen; a collapsed row cannot see them all.\n      if (optionCount > 0 && optionEls.length === optionCount) {\n        widthsRef.current = optionEls.map((el) => el.offsetWidth);\n      }\n      if (reserveTriggerSpace) {\n        const triggerEl = listEl.parentElement?.querySelector<HTMLElement>(\n          '[data-fs-variant-selector-overflow-trigger]',\n        );\n        triggerWidthRef.current = Math.max(triggerWidthRef.current, triggerEl?.offsetWidth ?? 0);\n      }\n\n      const widths = widthsRef.current;\n      if (widths.length === 0) {\n        setCount(null);\n        return;\n      }\n      const next = computeVisibleCount(widths, gap, available, triggerWidthRef.current);\n      setCount((prev) => (prev === next ? prev : next));\n    };\n\n    measureRef.current = measure;\n    measure();\n\n    const observer = new ResizeObserver(() => measure());\n    observer.observe(listEl);\n    return () => observer.disconnect();\n  }, [listEl, optionCount, hasOverflow, enabled, reserveTriggerSpace]);\n\n  // Re-measure on any count change, so convergence never depends on the ResizeObserver firing. After the\n  // cache is reset (e.g. the option set changed) the group first shows every swatch; this pass then measures\n  // the full set and collapses — the state-equality bail-out in `measure` stops it once it settles (two\n  // passes). It is also where the inline trigger's width (which mounts only after the first collapse) enters\n  // the fit in `reserveTriggerSpace` mode, accumulated monotonically so it can't flip-flop. `measureRef` is a\n  // no-op while measurement is disabled (expanded / no geometry), so an expanded group is never re-collapsed.\n  useIsomorphicLayoutEffect(() => {\n    measureRef.current();\n  }, [count]);\n\n  return count;\n}\n\n// Dedup dev warnings so a re-rendering group does not flood the console; keyed by the binding plus\n// the available axes so a later data change still surfaces a fresh warning.\nconst warnedUnresolvedAxes = new Set<string>();\n\nfunction warnUnresolvedAxis(\n  optionName: string | undefined,\n  optionIndex: number | undefined,\n  axes: VariantSelectorAxis[],\n): void {\n  // Surface authoring/data mismatches during development and tests (the screenshot→store pipeline\n  // runs `next dev`); stay silent in production where the catalog is the source of truth.\n  if (process.env.NODE_ENV === 'production') return;\n  const available = axes.map((axis) => axis.name);\n  const key = `${optionName ?? ''}\\u0000${optionIndex ?? ''}\\u0000${available.join('\\u0001')}`;\n  if (warnedUnresolvedAxes.has(key)) return;\n  warnedUnresolvedAxes.add(key);\n  const list = available.length > 0 ? available.map((name, index) => `${index}:\"${name}\"`).join(', ') : '(none)';\n  console.warn(\n    `[VariantSelector] Could not resolve an option axis for ${\n      optionName === undefined ? `optionIndex ${optionIndex}` : `optionName \"${optionName}\"`\n    }. Available axes (index:name): ${list}. ` +\n      'optionName must reference a catalog ProductOption.name (matched ignoring case and accents only); ' +\n      'otherwise set optionIndex to the axis position (0-based, in the product option order).',\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const VariantSelectorRootDefinition = defineComponent<VariantSelectorRootProps>({\n  name: 'VariantSelectorRoot',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Variant Selector', category: 'commerce' },\n  schema: {\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  providesContext: 'variant-selector',\n  guideline:\n    '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.',\n});\n\nexport const VariantSelectorOptionGroupDefinition = defineComponent<VariantSelectorOptionGroupProps>({\n  name: 'VariantSelectorOptionGroup',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOptionGroup,\n  editor: { label: 'Variant Option Group', category: 'commerce' },\n  schema: {\n    optionName: { type: 'string', label: 'Option axis name (catalog ProductOption.name)' },\n    optionIndex: { type: 'number', label: 'Option axis index (0-based; fallback for optionName)' },\n    reserveTriggerSpace: { type: 'boolean', default: false, label: 'Reserve space for the \"+N more\" trigger' },\n  },\n  requiresContext: 'variant-selector',\n  providesContext: 'variant-selector-group',\n  guideline:\n    '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.',\n});\n\nexport const VariantSelectorGroupTitleDefinition = defineComponent<VariantSelectorGroupTitleProps>({\n  name: 'VariantSelectorGroupTitle',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorGroupTitle,\n  editor: { label: 'Variant Group Title', category: 'commerce' },\n  schema: {\n    label: { type: 'string', label: 'Axis name override (defaults to the catalog axis name)' },\n  },\n  requiresContext: 'variant-selector-group',\n  guideline:\n    '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.',\n});\n\nexport const VariantSelectorGroupValueDefinition = defineComponent<VariantSelectorGroupValueProps>({\n  name: 'VariantSelectorGroupValue',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorGroupValue,\n  editor: { label: 'Variant Group Value', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    '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.',\n});\n\nexport const VariantSelectorSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorSwatches,\n  editor: { label: 'Variant Swatches (auto)', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    '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.',\n});\n\nexport const VariantSelectorLabelSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorLabelSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorLabelSwatches,\n  editor: { label: 'Variant Label Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    '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.',\n});\n\nexport const VariantSelectorImageSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorImageSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorImageSwatches,\n  editor: { label: 'Variant Image Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    \"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.\",\n});\n\nexport const VariantSelectorColorSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorColorSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorColorSwatches,\n  editor: { label: 'Variant Color Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    \"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.\",\n});\n\nexport const VariantSelectorRadioSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorRadioSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorRadioSwatches,\n  editor: { label: 'Variant Radio Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    '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.',\n});\n\nexport const VariantSelectorOverflowDefinition = defineComponent<VariantSelectorOverflowProps>({\n  name: 'VariantSelectorOverflow',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOverflow,\n  editor: { label: 'Variant Overflow Trigger', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    '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.',\n});\n\nexport const VariantSelectorOptionDefinition = defineComponent<VariantSelectorOptionProps>({\n  name: 'VariantSelectorOption',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOption,\n  editor: { label: 'Variant Option', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    '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.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function VariantSelectorRoot({\n  $data: $dataProp,\n  selectedVariantId,\n  className,\n  children,\n  ...props\n}: VariantSelectorRootProps) {\n  const $data = useDataOverride($dataProp);\n  const publishedSelection = useReactiveVar(selectedVariantVar);\n  // Only honour a published selection that belongs to this product — a selection made on another\n  // PDP must not leak through this module-global var after client-side navigation.\n  const publishedVariantId = publishedVariantIdFor(publishedSelection, $data?.id ?? null);\n  // Precedence: the shopper's published in-page selection wins; otherwise the page-supplied viewed\n  // SKU (`selectedVariantId` prop) seeds the initial selection; falling back to the first variant.\n  const activeVariantId = publishedVariantId ?? selectedVariantId ?? null;\n\n  let contextValue: VariantSelectorContextValue = null;\n  if ($data) {\n    const productId = $data.id;\n    const variants = deriveVariants($data);\n    const selectedVariant = variants.find((variant) => variant.id === activeVariantId) ?? variants[0] ?? null;\n    const currentSelection = selectedVariant?.options ?? {};\n    const axes = deriveAxes($data, variants, currentSelection);\n\n    contextValue = {\n      axes,\n      selectedVariantId: selectedVariant?.id ?? null,\n      select: (axisName, value) => {\n        const resolved = resolveVariant(variants, currentSelection, axisName, value);\n        if (resolved) selectedVariantVar({ productId, variantId: resolved.id });\n      },\n    };\n  }\n\n  return (\n    <VariantSelectorContextInternal value={contextValue}>\n      <div {...props} className={className} data-fs-variant-selector=\"\">\n        {children}\n      </div>\n    </VariantSelectorContextInternal>\n  );\n}\n\n/** Axis container: binds the axis and owns the collapse/expand state, then renders whatever the author\n *  composes inside it (title, a swatch list, an overflow trigger). The parts read the axis and overflow\n *  state from the group context it provides, so they can be placed freely. */\nexport function VariantSelectorOptionGroup({\n  optionName,\n  optionIndex,\n  reserveTriggerSpace = false,\n  ImageComponent = DefaultVariantImage,\n  className,\n  children,\n  ...props\n}: VariantSelectorOptionGroupProps) {\n  const [expanded, setExpanded] = useState(false);\n  const [titleCount, setTitleCount] = useState(0);\n  const [overflowCount, setOverflowCount] = useState(0);\n  const [listEl, setListEl] = useState<HTMLElement | null>(null);\n  // Stable, collision-free id for the title→radiogroup `aria-labelledby` wiring. Deriving it from the\n  // axis name would break for multi-word catalog names (a space in an id/idref is parsed as multiple\n  // tokens, dropping the accessible name) and could collide across groups bound to the same axis.\n  const titleId = useId();\n  const ctx = useVariantSelector();\n  const axis = ctx ? resolveAxis(ctx.axes, optionName, optionIndex) : null;\n\n  // Ref-counted so a freely-placed title (even one nested in an accordion header, outside this DOM\n  // subtree) still flips `hasTitle` — which gates the swatch list's `aria-labelledby` so it never\n  // points at a title id that no element carries.\n  const registerTitle = useCallback(() => {\n    setTitleCount((count) => count + 1);\n    return () => setTitleCount((count) => count - 1);\n  }, []);\n  const hasTitle = titleCount > 0;\n\n  // Ref-counted like the title, so composing a VariantSelectorOverflow (wherever it is placed) opts the\n  // group into space-based collapse. No trigger ⇒ never collapse, so hidden swatches always have a reveal.\n  const registerOverflow = useCallback(() => {\n    setOverflowCount((count) => count + 1);\n    return () => setOverflowCount((count) => count - 1);\n  }, []);\n  const hasOverflow = overflowCount > 0;\n\n  // Stable ref callback the swatch list attaches to its container, so the group can measure the row.\n  const registerListElement = useCallback((el: HTMLElement | null) => setListEl(el), []);\n\n  // Measured count of swatches that fit the row (null when unavailable → show all). Disabled once the\n  // shopper expands, so an explicit expand stays sticky against later resizes.\n  const measuredVisibleCount = useMeasuredVisibleCount({\n    listEl,\n    optionCount: axis?.options.length ?? 0,\n    hasOverflow,\n    enabled: hasOverflow && !expanded,\n    reserveTriggerSpace,\n  });\n  const effectiveCap = expanded || !hasOverflow ? null : measuredVisibleCount;\n\n  const groupContextValue = useMemo<VariantSelectorGroupContextValue | null>(() => {\n    if (!ctx || !axis) return null;\n    const { visibleOptions, hiddenCount, overflowing } = getVisibleOptions(axis, effectiveCap, expanded);\n    return {\n      axis,\n      titleId,\n      hasTitle,\n      registerTitle,\n      registerOverflow,\n      hasOverflow,\n      registerListElement,\n      visibleOptions,\n      hiddenCount,\n      overflowing,\n      expand: () => setExpanded(true),\n      select: (value: string) => ctx.select(axis.name, value),\n      ImageComponent,\n    };\n  }, [\n    ctx,\n    axis,\n    effectiveCap,\n    expanded,\n    titleId,\n    hasTitle,\n    registerTitle,\n    registerOverflow,\n    hasOverflow,\n    registerListElement,\n    ImageComponent,\n  ]);\n\n  if (!groupContextValue) {\n    if (ctx) warnUnresolvedAxis(optionName, optionIndex, ctx.axes);\n    return null;\n  }\n\n  return (\n    <VariantSelectorGroupContext.Provider value={groupContextValue}>\n      <div\n        {...props}\n        className={className}\n        data-fs-variant-selector-group=\"\"\n        data-fs-variant-selector-group-overflow={groupContextValue.overflowing ? 'true' : 'false'}\n      >\n        {children}\n      </div>\n    </VariantSelectorGroupContext.Provider>\n  );\n}\n\n/** The axis name (the catalog axis name or `label`). Reads the axis from group context, so it reflects\n *  the bound axis wherever it is placed (including an accordion header). It is a `<span>`, not a `<label>`:\n *  it names the radiogroup via `aria-labelledby`, not a single control. Compose a `VariantSelectorGroupValue`\n *  beside it to echo the selection; the separator and value weight are styling on the `data-fs-*` hooks. */\nexport function VariantSelectorGroupTitle({ label, className, ...props }: VariantSelectorGroupTitleProps) {\n  const { axis, titleId, registerTitle } = useVariantSelectorGroup();\n  // Announce this title's presence so the swatch list wires `aria-labelledby` to it; unregister on unmount.\n  useEffect(() => registerTitle(), [registerTitle]);\n  return (\n    <span {...props} id={titleId} className={className} data-fs-variant-selector-group-title=\"\">\n      {label ?? axis.name}\n    </span>\n  );\n}\n\n/** The live selected value of the group's axis, as a standalone placeable part. Decorative (`aria-hidden`):\n *  the selection is announced per option, so it never participates in the group's accessible name. */\nexport function VariantSelectorGroupValue({ className, ...props }: VariantSelectorGroupValueProps) {\n  const { axis } = useVariantSelectorGroup();\n  return (\n    <span {...props} aria-hidden=\"true\" className={className} data-fs-variant-selector-group-value=\"\">\n      {axis.activeValue ?? ''}\n    </span>\n  );\n}\n\n/** Internal: the swatch list shared by every kind, parametrized by the swatch it renders. The public\n *  lists fix `swatch` — `VariantSelectorSwatches` to `'auto'` and the explicit ones to a concrete kind.\n *  Provides the resolved swatch component to its options via context. Not registered in the catalog. */\nfunction VariantSelectorSwatchesBase({\n  swatch,\n  className,\n  ref: consumerRef,\n  ...props\n}: VariantSelectorSwatchesProps & { swatch: SwatchKind | 'auto' }) {\n  const group = useVariantSelectorGroup();\n  const { registerListElement } = group;\n  const resolvedSwatch = resolveSwatchKind(swatch, group.axis);\n  // Register the list element for measurement and still honour a ref the consumer passed (compose, not\n  // discard) — otherwise `ref={registerListElement}` after `{...props}` would silently drop the consumer's.\n  const setListRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      registerListElement(el);\n      if (typeof consumerRef === 'function') consumerRef(el);\n      else if (consumerRef) (consumerRef as { current: HTMLDivElement | null }).current = el;\n    },\n    [registerListElement, consumerRef],\n  );\n  return (\n    <VariantSelectorSwatchContext.Provider value={resolvedSwatch.SwatchContent}>\n      <RadioGroup\n        {...props}\n        ref={setListRef}\n        className={className}\n        aria-labelledby={group.hasTitle ? group.titleId : undefined}\n        aria-label={group.axis.name}\n        value={group.axis.activeValue ?? ''}\n        onValueChange={group.select}\n        data-fs-variant-selector-group-list=\"\"\n        data-fs-variant-selector-group-mode={resolvedSwatch.mode}\n      >\n        {group.visibleOptions.map((option) => (\n          <VariantSelectorOption key={option.value} value={option.value} />\n        ))}\n      </RadioGroup>\n    </VariantSelectorSwatchContext.Provider>\n  );\n}\n\n/** Auto-inferring swatch list: derives the look from the option data (color/image/label, never radio).\n *  Use an explicit sibling list to fix the look instead of inferring it. */\nexport function VariantSelectorSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch=\"auto\" {...props} />;\n}\n\n/** Swatch list with text-label swatches. */\nexport function VariantSelectorLabelSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={LABEL_SWATCH} {...props} />;\n}\n\n/** Swatch list with image (thumbnail) swatches. */\nexport function VariantSelectorImageSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={IMAGE_SWATCH} {...props} />;\n}\n\n/** Swatch list with color-chip swatches (degrades per value to image, then label). */\nexport function VariantSelectorColorSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={COLOR_SWATCH} {...props} />;\n}\n\n/** Swatch list rendered as a radio-dot list (control circle + dot + label). */\nexport function VariantSelectorRadioSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={RADIO_SWATCH} {...props} />;\n}\n\n/** The \"+N more\" trigger: composing it opts the group into space-based collapse (via `registerOverflow`),\n *  and it renders only while the row overflows, expanding it in place when clicked. Registers in a\n *  layout effect so the group can measure and collapse before the browser paints (no full-row flash). */\nexport function VariantSelectorOverflow({ className, ...props }: VariantSelectorOverflowProps) {\n  const group = useVariantSelectorGroup();\n  const { registerOverflow } = group;\n  useIsomorphicLayoutEffect(() => registerOverflow(), [registerOverflow]);\n  if (!group.overflowing) return null;\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      onClick={group.expand}\n      className={className}\n      data-fs-variant-selector-overflow-trigger=\"\"\n      data-fs-variant-selector-overflow-count={group.hiddenCount}\n    >\n      +{group.hiddenCount} more\n    </button>\n  );\n}\n\nexport function VariantSelectorOption({ value, ImageComponent, className }: Readonly<VariantSelectorOptionProps>) {\n  const group = useVariantSelectorGroup();\n  // The swatch list provides the resolved swatch component; degrade to a text label when an option is\n  // somehow rendered outside a list (it always has a label-shaped fallback rather than an empty body).\n  const SwatchContent = useContext(VariantSelectorSwatchContext) ?? LabelSwatchContent;\n  const option = group.axis.options.find((candidate) => candidate.value === value) ?? null;\n  if (!option) return null;\n\n  const checked = group.axis.activeValue === value;\n  const disabled = !option.available;\n  const Image = ImageComponent ?? group.ImageComponent;\n\n  return (\n    <BaseRadio.Root\n      value={value}\n      disabled={disabled}\n      title={value}\n      className={className}\n      data-fs-variant-selector-option=\"\"\n      data-fs-variant-selector-option-checked={checked ? 'true' : 'false'}\n      data-fs-variant-selector-option-disabled={disabled ? 'true' : 'false'}\n    >\n      {/* Axis-qualified accessible name (e.g. \"Color: Red\"); the visual content below is hidden from\n          assistive tech so the radio is announced once, not duplicated by the label/image. */}\n      <span data-fs-sr-only=\"\" className=\"sr-only\">\n        {group.axis.name}: {value}\n      </span>\n      <SwatchContent swatch={option.swatch} value={value} Image={Image} />\n    </BaseRadio.Root>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const VariantSelector = {\n  Root: VariantSelectorRoot,\n  OptionGroup: VariantSelectorOptionGroup,\n  Title: VariantSelectorGroupTitle,\n  Value: VariantSelectorGroupValue,\n  Swatches: VariantSelectorSwatches,\n  LabelSwatches: VariantSelectorLabelSwatches,\n  ImageSwatches: VariantSelectorImageSwatches,\n  ColorSwatches: VariantSelectorColorSwatches,\n  RadioSwatches: VariantSelectorRadioSwatches,\n  Overflow: VariantSelectorOverflow,\n  Option: VariantSelectorOption,\n};\n"],"mappings":"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"}

package/dist/message-locales.json

@@ -0,0 +1,7 @@
+{
+  "locales": [
+    "en-US",
+    "es-ES",
+    "pt-BR"
+  ]
+}

package/dist/particles/access-code-field/access-code-field.d.ts

@@ -0,0 +1,33 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, FocusEvent } from "react";
+//#region src/particles/access-code-field/access-code-field.d.ts
+export type AccessCodeFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'value' | 'onChange' | 'onBlur'> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  invalid?: boolean;
+  errorMessage?: string;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  autoComplete?: string;
+  inputMode?: ComponentPropsWithRef<'input'>['inputMode'];
+  maxLength?: number;
+};
+export declare const AccessCodeFieldDefinition: ComponentDefinition<AccessCodeFieldProps>;
+/**
+ * Presentational one-time-code input (particle). Composes the `Field` particle (`Field.Root` +
+ * `Field.Label` + `Field.Control` + `Field.Error`), mirroring `EmailField`'s shape. Unlike
+ * `EmailField`, it performs **no** client-side format validation — a code's validity is entirely
+ * server-decided, so `invalid`/`errorMessage` are host-driven only. Sets `autoComplete="one-time-code"`
+ * by default so browser/OS-level SMS/email-code autofill still works despite the single-line shape,
+ * and hardens the input for code entry: `inputMode="numeric"` (overridable for alphanumeric codes),
+ * an optional `maxLength` cap, and spellcheck/autocapitalize/autocorrect disabled.
+ */
+export declare function AccessCodeField({ value, defaultValue, onValueChange, onBlur, invalid, errorMessage, label, placeholder, disabled, required, name, autoComplete, inputMode, maxLength, className, ...props }: AccessCodeFieldProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=access-code-field.d.ts.map

package/dist/particles/access-code-field/access-code-field.js

@@ -0,0 +1,95 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { Field } from "../field/field.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/access-code-field/access-code-field.tsx
+const AccessCodeFieldDefinition = defineComponent({
+	name: "AccessCodeField",
+	importPath: "@vtex/faststore/components",
+	component: AccessCodeField,
+	editor: {
+		label: "Access Code Field",
+		category: "content"
+	},
+	schema: {
+		label: {
+			type: "string",
+			label: "Label"
+		},
+		placeholder: {
+			type: "string",
+			label: "Placeholder"
+		},
+		errorMessage: {
+			type: "string",
+			label: "Error message"
+		},
+		required: {
+			type: "boolean",
+			default: true,
+			label: "Required"
+		},
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		}
+	},
+	guideline: "Presentational one-time-code input with no client-side format check — invalid/errorMessage are host-driven. For the checkout access-code sign-in flow, use it inside AccessCodeSignIn.Validate. See access-code-field.md."
+});
+/**
+* Presentational one-time-code input (particle). Composes the `Field` particle (`Field.Root` +
+* `Field.Label` + `Field.Control` + `Field.Error`), mirroring `EmailField`'s shape. Unlike
+* `EmailField`, it performs **no** client-side format validation — a code's validity is entirely
+* server-decided, so `invalid`/`errorMessage` are host-driven only. Sets `autoComplete="one-time-code"`
+* by default so browser/OS-level SMS/email-code autofill still works despite the single-line shape,
+* and hardens the input for code entry: `inputMode="numeric"` (overridable for alphanumeric codes),
+* an optional `maxLength` cap, and spellcheck/autocapitalize/autocorrect disabled.
+*/
+function AccessCodeField({ value, defaultValue = "", onValueChange, onBlur, invalid = false, errorMessage, label, placeholder, disabled = false, required = true, name = "accessCode", autoComplete = "one-time-code", inputMode = "numeric", maxLength, className, ...props }) {
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const currentValue = isControlled ? value : internalValue;
+	function handleChange(event) {
+		const next = event.target.value;
+		if (!isControlled) setInternalValue(next);
+		onValueChange?.(next);
+	}
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...props,
+		className,
+		name,
+		invalid,
+		disabled,
+		"data-fs-access-code-field": "",
+		children: [
+			label ? /* @__PURE__ */ jsx(Field.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Field.Control, {
+				type: "text",
+				name,
+				autoComplete,
+				inputMode,
+				maxLength,
+				spellCheck: false,
+				autoCapitalize: "none",
+				autoCorrect: "off",
+				required,
+				placeholder,
+				disabled,
+				onChange: handleChange,
+				onBlur,
+				...isControlled ? { value: currentValue } : { defaultValue }
+			}),
+			invalid && errorMessage ? /* @__PURE__ */ jsx(Field.Error, {
+				match: true,
+				children: errorMessage
+			}) : null
+		]
+	});
+}
+//#endregion
+export { AccessCodeField, AccessCodeFieldDefinition };
+
+//# sourceMappingURL=access-code-field.js.map

package/dist/particles/access-code-field/access-code-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"access-code-field.js","names":[],"sources":["../../../src/particles/access-code-field/access-code-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, ComponentPropsWithRef, FocusEvent } from 'react';\nimport { useState } from 'react';\nimport { Field } from '../field/field.js';\n\nexport type AccessCodeFieldProps = Omit<\n  ComponentPropsWithRef<'div'>,\n  'defaultValue' | 'value' | 'onChange' | 'onBlur'\n> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  invalid?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  autoComplete?: string;\n  inputMode?: ComponentPropsWithRef<'input'>['inputMode'];\n  maxLength?: number;\n};\n\nexport const AccessCodeFieldDefinition = defineComponent<AccessCodeFieldProps>({\n  name: 'AccessCodeField',\n  importPath: '@vtex/faststore/components',\n  component: AccessCodeField,\n  editor: { label: 'Access Code Field', category: 'content' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    errorMessage: { type: 'string', label: 'Error message' },\n    required: { type: 'boolean', default: true, label: 'Required' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Presentational one-time-code input with no client-side format check — invalid/errorMessage are host-driven. For the checkout access-code sign-in flow, use it inside AccessCodeSignIn.Validate. See access-code-field.md.',\n});\n\n/**\n * Presentational one-time-code input (particle). Composes the `Field` particle (`Field.Root` +\n * `Field.Label` + `Field.Control` + `Field.Error`), mirroring `EmailField`'s shape. Unlike\n * `EmailField`, it performs **no** client-side format validation — a code's validity is entirely\n * server-decided, so `invalid`/`errorMessage` are host-driven only. Sets `autoComplete=\"one-time-code\"`\n * by default so browser/OS-level SMS/email-code autofill still works despite the single-line shape,\n * and hardens the input for code entry: `inputMode=\"numeric\"` (overridable for alphanumeric codes),\n * an optional `maxLength` cap, and spellcheck/autocapitalize/autocorrect disabled.\n */\nexport function AccessCodeField({\n  value,\n  defaultValue = '',\n  onValueChange,\n  onBlur,\n  invalid = false,\n  errorMessage,\n  label,\n  placeholder,\n  disabled = false,\n  required = true,\n  name = 'accessCode',\n  autoComplete = 'one-time-code',\n  inputMode = 'numeric',\n  maxLength,\n  className,\n  ...props\n}: AccessCodeFieldProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const currentValue = isControlled ? value : internalValue;\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const next = event.target.value;\n    if (!isControlled) setInternalValue(next);\n    onValueChange?.(next);\n  }\n\n  return (\n    <Field.Root\n      {...props}\n      className={className}\n      name={name}\n      invalid={invalid}\n      disabled={disabled}\n      data-fs-access-code-field=\"\"\n    >\n      {label ? <Field.Label>{label}</Field.Label> : null}\n      <Field.Control\n        type=\"text\"\n        name={name}\n        autoComplete={autoComplete}\n        inputMode={inputMode}\n        maxLength={maxLength}\n        spellCheck={false}\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        required={required}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={handleChange}\n        onBlur={onBlur}\n        {...(isControlled ? { value: currentValue } : { defaultValue })}\n      />\n      {invalid && errorMessage ? <Field.Error match>{errorMessage}</Field.Error> : null}\n    </Field.Root>\n  );\n}\n"],"mappings":";;;;;;;AA0BA,MAAa,4BAA4B,gBAAsC;CAC7E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAqB,UAAU;CAAU;CAC1D,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,cAAc;GAAE,MAAM;GAAU,OAAO;EAAgB;EACvD,UAAU;GAAE,MAAM;GAAW,SAAS;GAAM,OAAO;EAAW;EAC9D,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;CACjE;CACA,WACE;AACJ,CAAC;;;;;;;;;;AAWD,SAAgB,gBAAgB,EAC9B,OACA,eAAe,IACf,eACA,QACA,UAAU,OACV,cACA,OACA,aACA,WAAW,OACX,WAAW,MACX,OAAO,cACP,eAAe,iBACf,YAAY,WACZ,WACA,WACA,GAAG,SACoB;CACvB,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAC/D,MAAM,eAAe,eAAe,QAAQ;CAE5C,SAAS,aAAa,OAAsC;EAC1D,MAAM,OAAO,MAAM,OAAO;EAC1B,IAAI,CAAC,cAAc,iBAAiB,IAAI;EACxC,gBAAgB,IAAI;CACtB;CAEA,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACO;EACL;EACG;EACC;EACV,6BAA0B;EAN5B,UAAA;GAQG,QAAQ,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA,IAAI;GAC9C,oBAAC,MAAM,SAAP;IACE,MAAK;IACC;IACQ;IACH;IACA;IACX,YAAY;IACZ,gBAAe;IACf,aAAY;IACF;IACG;IACH;IACV,UAAU;IACF;IACR,GAAK,eAAe,EAAE,OAAO,aAAa,IAAI,EAAE,aAAa;GAC9D,CAAA;GACA,WAAW,eAAe,oBAAC,MAAM,OAAP;IAAa,OAAA;IAAO,UAAA;GAA0B,CAAA,IAAI;EACnE;;AAEhB"}

package/dist/particles/accordion/accordion.d.ts

@@ -0,0 +1,45 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/particles/accordion/accordion.d.ts
+export type AccordionOrientation = 'horizontal' | 'vertical';
+export type AccordionRootProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {
+  openMultiple?: boolean;
+  disabled?: boolean;
+  orientation?: AccordionOrientation;
+  /** Controlled list of open item values (single-element when `openMultiple` is false). */
+  value?: string[];
+  /** Uncontrolled initial list of open item values. */
+  defaultValue?: string[];
+  /** Fires with the new list of open item values whenever an item expands or collapses. */
+  onValueChange?: (value: string[]) => void;
+};
+export type AccordionItemProps = ComponentPropsWithRef<'div'> & {
+  value: string;
+  disabled?: boolean;
+};
+export type AccordionHeaderProps = ComponentPropsWithRef<'h3'>;
+export type AccordionTriggerProps = ComponentPropsWithRef<'button'>;
+export type AccordionPanelProps = ComponentPropsWithRef<'div'> & {
+  hiddenUntilFound?: boolean;
+  keepMounted?: boolean;
+};
+export declare const AccordionRootDefinition: ComponentDefinition<AccordionRootProps>;
+export declare const AccordionItemDefinition: ComponentDefinition<AccordionItemProps>;
+export declare const AccordionHeaderDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const AccordionTriggerDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+export declare const AccordionPanelDefinition: ComponentDefinition<AccordionPanelProps>;
+export declare function AccordionRoot({ openMultiple, disabled, orientation, className, children, ...props }: AccordionRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ value, disabled, className, children, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionHeader({ className, children, ...props }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionPanel({ hiddenUntilFound, keepMounted, className, children, ...props }: AccordionPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: {
+  Root: typeof AccordionRoot;
+  Item: typeof AccordionItem;
+  Header: typeof AccordionHeader;
+  Trigger: typeof AccordionTrigger;
+  Panel: typeof AccordionPanel;
+};
+//#endregion
+//# sourceMappingURL=accordion.d.ts.map

package/dist/particles/accordion/accordion.js

@@ -0,0 +1,156 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
+//#region src/particles/accordion/accordion.tsx
+const AccordionRootDefinition = defineComponent({
+	name: "AccordionRoot",
+	importPath: "@vtex/faststore/components",
+	component: AccordionRoot,
+	editor: {
+		label: "Accordion Root",
+		category: "layout"
+	},
+	schema: {
+		openMultiple: {
+			type: "boolean",
+			default: true,
+			label: "Open Multiple"
+		},
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		},
+		orientation: {
+			type: ["horizontal", "vertical"],
+			default: "vertical",
+			label: "Orientation"
+		}
+	},
+	guideline: "Root of the accordion. Manages open/close state for collapsible panels. Compose as: AccordionRoot > [AccordionItem > AccordionHeader > AccordionTrigger + AccordionPanel]. Set openMultiple=false for FAQ-style single-open behavior; orientation controls arrow-key navigation axis."
+});
+const AccordionItemDefinition = defineComponent({
+	name: "AccordionItem",
+	importPath: "@vtex/faststore/components",
+	component: AccordionItem,
+	editor: {
+		label: "Accordion Item",
+		category: "layout"
+	},
+	schema: {
+		value: {
+			type: "string",
+			label: "Value"
+		},
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		}
+	},
+	guideline: "One collapsible section inside Accordion.Root. Requires a unique value prop that matches the Root's controlled value. Disable individually without affecting sibling items."
+});
+const AccordionHeaderDefinition = defineComponent({
+	name: "AccordionHeader",
+	importPath: "@vtex/faststore/components",
+	component: AccordionHeader,
+	editor: {
+		label: "Accordion Header",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Heading element inside Accordion.Item. Always contains Accordion.Trigger. Renders as <h3> by default for correct document outline and accessibility."
+});
+const AccordionTriggerDefinition = defineComponent({
+	name: "AccordionTrigger",
+	importPath: "@vtex/faststore/components",
+	component: AccordionTrigger,
+	editor: {
+		label: "Accordion Trigger",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Toggle button inside Accordion.Header. Receives ARIA expanded/controls attributes automatically. Style the open state via the data-open CSS attribute set by Base-UI."
+});
+const AccordionPanelDefinition = defineComponent({
+	name: "AccordionPanel",
+	importPath: "@vtex/faststore/components",
+	component: AccordionPanel,
+	editor: {
+		label: "Accordion Panel",
+		category: "layout"
+	},
+	schema: {
+		hiddenUntilFound: {
+			type: "boolean",
+			default: false,
+			label: "Hidden Until Found"
+		},
+		keepMounted: {
+			type: "boolean",
+			default: false,
+			label: "Keep Mounted"
+		}
+	},
+	guideline: "Collapsible content area placed after Accordion.Header inside Accordion.Item. Set hiddenUntilFound=true to make content discoverable by browser find-in-page and search engines without being visible."
+});
+function AccordionRoot({ openMultiple = true, disabled = false, orientation = "vertical", className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		...props,
+		multiple: openMultiple,
+		disabled,
+		orientation,
+		className,
+		"data-fs-accordion-root": "",
+		children
+	});
+}
+function AccordionItem({ value, disabled = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		...props,
+		value,
+		disabled,
+		className,
+		"data-fs-accordion-item": "",
+		children
+	});
+}
+function AccordionHeader({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		...props,
+		className,
+		"data-fs-accordion-header": "",
+		children
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Trigger, {
+		...props,
+		className,
+		"data-fs-accordion-trigger": "",
+		children
+	});
+}
+function AccordionPanel({ hiddenUntilFound = false, keepMounted = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		...props,
+		hiddenUntilFound,
+		keepMounted,
+		className,
+		"data-fs-accordion-panel": "",
+		children
+	});
+}
+const Accordion$1 = {
+	Root: AccordionRoot,
+	Item: AccordionItem,
+	Header: AccordionHeader,
+	Trigger: AccordionTrigger,
+	Panel: AccordionPanel
+};
+//#endregion
+export { Accordion$1 as Accordion, AccordionHeader, AccordionHeaderDefinition, AccordionItem, AccordionItemDefinition, AccordionPanel, AccordionPanelDefinition, AccordionRoot, AccordionRootDefinition, AccordionTrigger, AccordionTriggerDefinition };
+
+//# sourceMappingURL=accordion.js.map

package/dist/particles/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":["BaseAccordion","Accordion"],"sources":["../../../src/particles/accordion/accordion.tsx"],"sourcesContent":["'use client';\nimport { Accordion as BaseAccordion } from '@base-ui/react/accordion';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\n\nexport type AccordionOrientation = 'horizontal' | 'vertical';\n\nexport type AccordionRootProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {\n  openMultiple?: boolean;\n  disabled?: boolean;\n  orientation?: AccordionOrientation;\n  /** Controlled list of open item values (single-element when `openMultiple` is false). */\n  value?: string[];\n  /** Uncontrolled initial list of open item values. */\n  defaultValue?: string[];\n  /** Fires with the new list of open item values whenever an item expands or collapses. */\n  onValueChange?: (value: string[]) => void;\n};\n\nexport type AccordionItemProps = ComponentPropsWithRef<'div'> & {\n  value: string;\n  disabled?: boolean;\n};\n\nexport type AccordionHeaderProps = ComponentPropsWithRef<'h3'>;\n\nexport type AccordionTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type AccordionPanelProps = ComponentPropsWithRef<'div'> & {\n  hiddenUntilFound?: boolean;\n  keepMounted?: boolean;\n};\n\nexport const AccordionRootDefinition = defineComponent<AccordionRootProps>({\n  name: 'AccordionRoot',\n  importPath: '@vtex/faststore/components',\n  component: AccordionRoot,\n  editor: { label: 'Accordion Root', category: 'layout' },\n  schema: {\n    openMultiple: { type: 'boolean', default: true, label: 'Open Multiple' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n    orientation: { type: ['horizontal', 'vertical'] as const, default: 'vertical', label: 'Orientation' },\n  },\n  guideline:\n    'Root of the accordion. Manages open/close state for collapsible panels. Compose as: AccordionRoot > [AccordionItem > AccordionHeader > AccordionTrigger + AccordionPanel]. Set openMultiple=false for FAQ-style single-open behavior; orientation controls arrow-key navigation axis.',\n});\n\nexport const AccordionItemDefinition = defineComponent<AccordionItemProps>({\n  name: 'AccordionItem',\n  importPath: '@vtex/faststore/components',\n  component: AccordionItem,\n  editor: { label: 'Accordion Item', category: 'layout' },\n  schema: {\n    value: { type: 'string', label: 'Value' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    \"One collapsible section inside Accordion.Root. Requires a unique value prop that matches the Root's controlled value. Disable individually without affecting sibling items.\",\n});\n\nexport const AccordionHeaderDefinition = defineComponent<AccordionHeaderProps>({\n  name: 'AccordionHeader',\n  importPath: '@vtex/faststore/components',\n  component: AccordionHeader,\n  editor: { label: 'Accordion Header', category: 'layout' },\n  schema: {},\n  guideline:\n    'Heading element inside Accordion.Item. Always contains Accordion.Trigger. Renders as <h3> by default for correct document outline and accessibility.',\n});\n\nexport const AccordionTriggerDefinition = defineComponent<AccordionTriggerProps>({\n  name: 'AccordionTrigger',\n  importPath: '@vtex/faststore/components',\n  component: AccordionTrigger,\n  editor: { label: 'Accordion Trigger', category: 'action' },\n  schema: {},\n  guideline:\n    'Toggle button inside Accordion.Header. Receives ARIA expanded/controls attributes automatically. Style the open state via the data-open CSS attribute set by Base-UI.',\n});\n\nexport const AccordionPanelDefinition = defineComponent<AccordionPanelProps>({\n  name: 'AccordionPanel',\n  importPath: '@vtex/faststore/components',\n  component: AccordionPanel,\n  editor: { label: 'Accordion Panel', category: 'layout' },\n  schema: {\n    hiddenUntilFound: { type: 'boolean', default: false, label: 'Hidden Until Found' },\n    keepMounted: { type: 'boolean', default: false, label: 'Keep Mounted' },\n  },\n  guideline:\n    'Collapsible content area placed after Accordion.Header inside Accordion.Item. Set hiddenUntilFound=true to make content discoverable by browser find-in-page and search engines without being visible.',\n});\n\nexport function AccordionRoot({\n  openMultiple = true,\n  disabled = false,\n  orientation = 'vertical',\n  className,\n  children,\n  ...props\n}: AccordionRootProps) {\n  return (\n    <BaseAccordion.Root\n      {...props}\n      multiple={openMultiple}\n      disabled={disabled}\n      orientation={orientation}\n      className={className}\n      data-fs-accordion-root=\"\"\n    >\n      {children}\n    </BaseAccordion.Root>\n  );\n}\n\nexport function AccordionItem({ value, disabled = false, className, children, ...props }: AccordionItemProps) {\n  return (\n    <BaseAccordion.Item {...props} value={value} disabled={disabled} className={className} data-fs-accordion-item=\"\">\n      {children}\n    </BaseAccordion.Item>\n  );\n}\n\nexport function AccordionHeader({ className, children, ...props }: AccordionHeaderProps) {\n  return (\n    <BaseAccordion.Header {...props} className={className} data-fs-accordion-header=\"\">\n      {children}\n    </BaseAccordion.Header>\n  );\n}\n\nexport function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n  return (\n    <BaseAccordion.Trigger {...props} className={className} data-fs-accordion-trigger=\"\">\n      {children}\n    </BaseAccordion.Trigger>\n  );\n}\n\nexport function AccordionPanel({\n  hiddenUntilFound = false,\n  keepMounted = false,\n  className,\n  children,\n  ...props\n}: AccordionPanelProps) {\n  return (\n    <BaseAccordion.Panel\n      {...props}\n      hiddenUntilFound={hiddenUntilFound}\n      keepMounted={keepMounted}\n      className={className}\n      data-fs-accordion-panel=\"\"\n    >\n      {children}\n    </BaseAccordion.Panel>\n  );\n}\n\nexport const Accordion = {\n  Root: AccordionRoot,\n  Item: AccordionItem,\n  Header: AccordionHeader,\n  Trigger: AccordionTrigger,\n  Panel: AccordionPanel,\n};\n"],"mappings":";;;;;;AAiCA,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ;EACN,cAAc;GAAE,MAAM;GAAW,SAAS;GAAM,OAAO;EAAgB;EACvE,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;EAC/D,aAAa;GAAE,MAAM,CAAC,cAAc,UAAU;GAAY,SAAS;GAAY,OAAO;EAAc;CACtG;CACA,WACE;AACJ,CAAC;AAED,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;CACjE;CACA,WACE;AACJ,CAAC;AAED,MAAa,4BAA4B,gBAAsC;CAC7E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAS;CACxD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,6BAA6B,gBAAuC;CAC/E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAqB,UAAU;CAAS;CACzD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,2BAA2B,gBAAqC;CAC3E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAmB,UAAU;CAAS;CACvD,QAAQ;EACN,kBAAkB;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAqB;EACjF,aAAa;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAe;CACxE;CACA,WACE;AACJ,CAAC;AAED,SAAgB,cAAc,EAC5B,eAAe,MACf,WAAW,OACX,cAAc,YACd,WACA,UACA,GAAG,SACkB;CACrB,OACE,oBAACA,UAAc,MAAf;EACE,GAAI;EACJ,UAAU;EACA;EACG;EACF;EACX,0BAAuB;EAEtB;CACiB,CAAA;AAExB;AAEA,SAAgB,cAAc,EAAE,OAAO,WAAW,OAAO,WAAW,UAAU,GAAG,SAA6B;CAC5G,OACE,oBAACA,UAAc,MAAf;EAAoB,GAAI;EAAc;EAAiB;EAAqB;EAAW,0BAAuB;EAC3G;CACiB,CAAA;AAExB;AAEA,SAAgB,gBAAgB,EAAE,WAAW,UAAU,GAAG,SAA+B;CACvF,OACE,oBAACA,UAAc,QAAf;EAAsB,GAAI;EAAkB;EAAW,4BAAyB;EAC7E;CACmB,CAAA;AAE1B;AAEA,SAAgB,iBAAiB,EAAE,WAAW,UAAU,GAAG,SAAgC;CACzF,OACE,oBAACA,UAAc,SAAf;EAAuB,GAAI;EAAkB;EAAW,6BAA0B;EAC/E;CACoB,CAAA;AAE3B;AAEA,SAAgB,eAAe,EAC7B,mBAAmB,OACnB,cAAc,OACd,WACA,UACA,GAAG,SACmB;CACtB,OACE,oBAACA,UAAc,OAAf;EACE,GAAI;EACc;EACL;EACF;EACX,2BAAwB;EAEvB;CACkB,CAAA;AAEzB;AAEA,MAAaC,cAAY;CACvB,MAAM;CACN,MAAM;CACN,QAAQ;CACR,SAAS;CACT,OAAO;AACT"}

package/dist/particles/address-summary/address-summary.d.ts

@@ -0,0 +1,50 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ReactNode } from "react";
+//#region src/particles/address-summary/address-summary.d.ts
+/**
+ * AddressSummary particle (no business coupling — ADR-0001): a presentational display for a
+ * postal address, driven entirely by AddressSummaryRoot's context rather than props. Any matter
+ * component that owns address data (e.g. ShippingAddressSelectedSummary, ShippingAddressSavedOption)
+ * provides it via AddressSummaryRoot; AddressSummary reads and renders it. A future alternative
+ * presentation (e.g. a "LeanAddressSummary") would read the same context and could be composed in
+ * its place — swapping the presentation is a composition change, not a new data-binding.
+ */
+export type AddressSummaryFields = Readonly<{
+  recipientName?: string | null;
+  street?: string | null;
+  number?: string | null;
+  complement?: string | null;
+  neighborhood?: string | null;
+  city?: string | null;
+  state?: string | null;
+  postalCode?: string | null;
+}>;
+export type AddressSummaryRootProps = {
+  /** The address fields provided to descendant presentational components via context. */
+  address: AddressSummaryFields;
+  children?: ReactNode;
+};
+export type AddressSummaryProps = {
+  className?: string;
+  /** The lines to render, in order. Defaults to recipient, street, locality when omitted. */
+  children?: ReactNode;
+};
+export type AddressSummaryLineProps = {
+  className?: string;
+};
+export declare const AddressSummaryRootDefinition: ComponentDefinition<AddressSummaryRootProps>;
+export declare const AddressSummaryDefinition: ComponentDefinition<AddressSummaryProps>;
+export declare const AddressSummaryRecipientDefinition: ComponentDefinition<AddressSummaryLineProps>;
+export declare const AddressSummaryStreetDefinition: ComponentDefinition<AddressSummaryLineProps>;
+export declare const AddressSummaryLocalityDefinition: ComponentDefinition<AddressSummaryLineProps>;
+export declare function AddressSummaryRoot({ address, children }: AddressSummaryRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function AddressSummary({ className, children }: AddressSummaryProps): import("react/jsx-runtime").JSX.Element;
+/** Who the delivery is addressed to. Renders nothing when the address carries no recipient. */
+export declare function AddressSummaryRecipient({ className }: AddressSummaryLineProps): import("react/jsx-runtime").JSX.Element | null;
+/** Street, number and complement on one line. Renders nothing when all three are absent. */
+export declare function AddressSummaryStreet({ className }: AddressSummaryLineProps): import("react/jsx-runtime").JSX.Element | null;
+/** Neighborhood, city, state and postal code on one line. Renders nothing when all are absent. */
+export declare function AddressSummaryLocality({ className }: AddressSummaryLineProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=address-summary.d.ts.map