@vtex/faststore 0.0.1

package/dist/matter/shipping-simulator/shipping-simulator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shipping-simulator.js","names":[],"sources":["../../../src/matter/shipping-simulator/shipping-simulator.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { FormattedMessage, type MessageId, useIntl } from '../../sdk/i18n/client.js';\nimport type { CartShippingSimulateInput } from '../../sdk/shipping/cart-operations.js';\nimport type { ShippingSimulateInput } from '../../sdk/shipping/operations.js';\nimport { useCartShippingSimulation } from '../../sdk/shipping/use-cart-shipping-simulation.js';\nimport { useShippingSimulation } from '../../sdk/shipping/use-shipping-simulation.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment ShippingSimulatorData on Query {\n    productBySlug(slug: $slug) {\n      variants(first: 1) {\n        edges {\n          node {\n            id\n            sellers {\n              id\n              isDefault\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype RawShippingSimulatorData = {\n  variants: {\n    edges: Array<{\n      node: {\n        id: string;\n        sellers: Array<{\n          id: string;\n          isDefault: boolean;\n        }>;\n      };\n    }>;\n  };\n};\n\n// ---------------------------------------------------------------------------\n// Domain types (mirror the shippingSimulation GraphQL contract)\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = { amount: number; currencyCode: string };\n\ntype DeliveryChannel = 'DELIVERY' | 'PICKUP' | 'UNKNOWN';\n\ntype ShippingEstimateUnit = 'BUSINESS_DAYS' | 'DAYS' | 'HOURS' | 'MINUTES';\n\ntype ShippingEstimate = { value: number; unit: ShippingEstimateUnit };\n\n// Exported alongside `ShippingSimulatorContextValue` so `DeliveryOptionsRoot`\n// (matter/delivery-options) can type against the exact shape the reused leaves expect, with no\n// structural duplication (specs/delivery-options-step.md Decision 2).\nexport type ShippingOption = {\n  id: string;\n  name: string;\n  channel: DeliveryChannel;\n  shippingEstimate: ShippingEstimate;\n  price: MoneyValue;\n  listPrice: MoneyValue;\n};\n\ntype ShippingSimulateErrorCode = 'INVALID_POSTAL_CODE' | 'UNKNOWN';\n\n// Exported with `ShippingSimulationPayload` so the `./client` entry can name the simulate callback's\n// whole contract — the SDK hooks return it and a store writing its own `onSimulate` has to name it.\nexport type ShippingSimulateError = {\n  code: ShippingSimulateErrorCode;\n  message: string;\n};\n\nexport type ShippingSimulationPayload = {\n  shippingOptions: ShippingOption[] | null;\n  userErrors: ShippingSimulateError[];\n};\n\ntype Status = 'idle' | 'loading' | 'success' | 'error';\n\nexport type ShippingSimulatorContextValue = {\n  postalCode: string;\n  setPostalCode: (value: string) => void;\n  status: Status;\n  shippingOptions: ShippingOption[] | null;\n  userErrors: ShippingSimulateError[];\n  submit: () => void;\n};\n\nconst SHIPPING_SIMULATOR_CONTEXT_UNSET = Symbol('ShippingSimulatorContextUnset');\n\nexport type ShippingSimulatorRootProps = ComponentPropsWithRef<'div'> & {\n  country?: string;\n  quantity?: number;\n  variantId?: string;\n  seller?: string;\n  $data?: RawShippingSimulatorData | null;\n  shippingOptions?: ShippingOption[];\n  userErrors?: ShippingSimulateError[];\n  onSimulate?: (input: ShippingSimulateInput) => Promise<ShippingSimulationPayload>;\n  onResult?: (result: ShippingSimulationPayload) => void;\n};\n\nexport type CartShippingSimulatorRootProps = ComponentPropsWithRef<'div'> & {\n  country?: string;\n  shippingOptions?: ShippingOption[];\n  userErrors?: ShippingSimulateError[];\n  onSimulate?: (input: CartShippingSimulateInput) => Promise<ShippingSimulationPayload>;\n  onResult?: (result: ShippingSimulationPayload) => void;\n};\n\nexport type ShippingSimulatorFormProps = ComponentPropsWithRef<'form'>;\n\nexport type ShippingSimulatorInputProps = Omit<ComponentPropsWithRef<'input'>, 'value' | 'onChange'> & {\n  format?: boolean;\n};\n\nexport type ShippingSimulatorSubmitProps = ComponentPropsWithRef<'button'>;\n\nexport type ShippingSimulatorLoadingProps = ComponentPropsWithRef<'output'>;\n\nexport type ShippingSimulatorErrorProps = ComponentPropsWithRef<'div'>;\n\nexport type ShippingSimulatorOptionsProps = ComponentPropsWithRef<'ul'> & {\n  sortBy?: 'price' | 'estimate';\n  maxOptions?: number;\n};\n\nexport type ShippingSimulatorOptionProps = ComponentPropsWithRef<'li'>;\n\nexport type ShippingSimulatorOptionNameProps = ComponentPropsWithRef<'span'>;\n\nexport type ShippingSimulatorOptionEstimateProps = ComponentPropsWithRef<'span'>;\n\nexport type ShippingSimulatorOptionPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type ShippingSimulatorOptionFreeBadgeProps = ComponentPropsWithRef<'span'>;\n\nexport type ShippingSimulatorEmptyProps = ComponentPropsWithRef<'output'>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\n// Exported so `DeliveryOptionsRoot` can become a third provider by importing these same Context\n// objects directly (context matching is by identity, not shape). The two hooks below stay\n// module-private — providers need the objects, not the consumer API (Decision 2).\nexport const ShippingSimulatorContext = createContext<\n  ShippingSimulatorContextValue | typeof SHIPPING_SIMULATOR_CONTEXT_UNSET\n>(SHIPPING_SIMULATOR_CONTEXT_UNSET);\n\nexport const OptionItemContext = createContext<ShippingOption | null>(null);\n\nfunction useShippingSimulator(): ShippingSimulatorContextValue {\n  const ctx = useContext(ShippingSimulatorContext);\n  if (ctx === SHIPPING_SIMULATOR_CONTEXT_UNSET) {\n    throw new Error('ShippingSimulator components must be used inside ShippingSimulatorRoot.');\n  }\n  return ctx;\n}\n\nfunction useOptionItem(): ShippingOption {\n  const ctx = useContext(OptionItemContext);\n  if (!ctx) {\n    throw new Error('ShippingSimulatorOption components must be used inside ShippingSimulatorOptions.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatPrice(value: number, locale: string, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\n// Each unit's whole sentence, and the variable that sentence names.\n//\n// Whole sentence, not a unit fragment interpolated into a wrapper: interpolating a translated\n// fragment into a translated wrapper freezes \"preposition + noun\" order into every language, and\n// hands the translator `em {estimate}` with no way to agree preposition, article or case with a noun\n// they cannot see. The variable is named after what it counts (`{days}`, `{hours}`) rather than a\n// generic `{count}`, for the same reason.\n//\n// A `Record` and not a `switch` with a default: a fifth unit arriving in the GraphQL schema is a\n// type error here, not a silent fallback to the wrong sentence.\n//\n// `variable` is the union of the names those sentences read, never `string`: widened, a typo passes\n// typecheck, lint and every test, and the shopper gets the raw ICU pattern because `onIntlError` is\n// silent in production. The parity assertion in the test file closes the other half of the gap — that\n// the name written here is the one the catalog's message actually names.\nexport const ESTIMATE_MESSAGE: Record<ShippingEstimateUnit, { id: MessageId; variable: 'days' | 'hours' | 'minutes' }> =\n  {\n    BUSINESS_DAYS: { id: 'fs/shipping.estimate.in-business-days', variable: 'days' },\n    DAYS: { id: 'fs/shipping.estimate.in-days', variable: 'days' },\n    HOURS: { id: 'fs/shipping.estimate.in-hours', variable: 'hours' },\n    MINUTES: { id: 'fs/shipping.estimate.in-minutes', variable: 'minutes' },\n  };\n\n// Business days weigh the same as calendar days: exact wall-clock conversion is unknowable and\n// the ranking only needs a consistent order.\nconst ESTIMATE_UNIT_MINUTES: Record<ShippingEstimateUnit, number> = {\n  MINUTES: 1,\n  HOURS: 60,\n  DAYS: 1440,\n  BUSINESS_DAYS: 1440,\n};\n\nfunction sortShippingOptions(options: readonly ShippingOption[], sortBy: 'price' | 'estimate'): ShippingOption[] {\n  const rank =\n    sortBy === 'price'\n      ? (option: ShippingOption) => Number(option.price.amount)\n      : (option: ShippingOption) => option.shippingEstimate.value * ESTIMATE_UNIT_MINUTES[option.shippingEstimate.unit];\n  return [...options].sort((a, b) => rank(a) - rank(b));\n}\n\nfunction normalizePostalCode(value: string): string {\n  return value.replace(/\\D/g, '').slice(0, 8);\n}\n\nfunction formatPostalCode(value: string): string {\n  const digits = normalizePostalCode(value);\n  return digits.length > 5 ? `${digits.slice(0, 5)}-${digits.slice(5)}` : digits;\n}\n\nfunction extractProductFromData(data: RawShippingSimulatorData | null | undefined): {\n  variantId: string | null;\n  seller: string | null;\n} {\n  if (!data) return { variantId: null, seller: null };\n  const edge = data.variants?.edges?.[0];\n  if (!edge) return { variantId: null, seller: null };\n  const { id, sellers } = edge.node;\n  const defaultSeller = sellers?.find((s) => s.isDefault) ?? sellers?.[0];\n  return { variantId: id ?? null, seller: defaultSeller?.id ?? null };\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ShippingSimulatorRootDefinition = defineComponent<ShippingSimulatorRootProps>({\n  name: 'ShippingSimulatorRoot',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Shipping Simulator', category: 'commerce' },\n  schema: {\n    country: { type: 'string', default: 'BRA', label: 'Country (ISO-3)' },\n    quantity: { type: 'number', default: 1, label: 'Quantity' },\n  },\n  providesContext: 'shipping-simulator',\n  guideline:\n    'Root container for the PDP shipping simulator: a shopper types a postal code and sees a shipping preview for ONE product on a product detail page. Backed by shippingSimulation and a product fragment (productBySlug(slug: $slug)), so it must live on a page with a $slug variable. Use CartShippingSimulatorRoot instead for a whole-cart calculator in the cart/mini-cart. All other ShippingSimulator components must be descendants of this one.',\n});\n\nexport const CartShippingSimulatorRootDefinition = defineComponent<CartShippingSimulatorRootProps>({\n  name: 'CartShippingSimulatorRoot',\n  importPath: '@vtex/faststore/components',\n  component: CartShippingSimulatorRoot,\n  editor: { label: 'Cart Shipping Simulator', category: 'commerce' },\n  schema: {\n    country: { type: 'string', default: 'BRA', label: 'Country (ISO-3)' },\n  },\n  providesContext: 'shipping-simulator',\n  guideline:\n    'Root container for the cart/mini-cart shipping calculator: the shopper types a postal code and sees the shipping options for the WHOLE cart. Backed by cartShippingSimulation (cart sourced server-side via x-order-form-id); needs no CartRoot ancestor and no product fragment. Use ShippingSimulatorRoot instead for a single-product shipping preview on a PDP. All other CartShippingSimulator components must be descendants of this one.',\n});\n\nexport const ShippingSimulatorFormDefinition = defineComponent<ShippingSimulatorFormProps>({\n  name: 'ShippingSimulatorForm',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorForm,\n  editor: { label: 'Shipping Simulator Form', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator',\n  guideline:\n    'Form wrapper that holds ShippingSimulatorInput and ShippingSimulatorSubmit; must be a descendant of ShippingSimulatorRoot.',\n});\n\nexport const ShippingSimulatorInputDefinition = defineComponent<ShippingSimulatorInputProps>({\n  name: 'ShippingSimulatorInput',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorInput,\n  editor: { label: 'Shipping Simulator Input', category: 'action' },\n  schema: {\n    format: { type: 'boolean', default: false, label: 'Auto-format CEP (00000-000)' },\n  },\n  requiresContext: 'shipping-simulator',\n  guideline:\n    'Postal-code text input; enable `format` to auto-hyphenate the CEP as the user types (e.g. 01310-100). The placeholder comes from the message catalog. Must be a descendant of ShippingSimulatorForm.',\n});\n\nexport const ShippingSimulatorSubmitDefinition = defineComponent<ShippingSimulatorSubmitProps>({\n  name: 'ShippingSimulatorSubmit',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorSubmit,\n  editor: { label: 'Shipping Simulator Submit', category: 'action' },\n  schema: {},\n  requiresContext: 'shipping-simulator',\n  guideline: 'Submit button for the postal-code form; must be a descendant of ShippingSimulatorForm.',\n});\n\nexport const ShippingSimulatorLoadingDefinition = defineComponent<ShippingSimulatorLoadingProps>({\n  name: 'ShippingSimulatorLoading',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorLoading,\n  editor: { label: 'Shipping Simulator Loading', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator',\n  guideline:\n    'Loading indicator shown while a simulation is in progress; must be a descendant of ShippingSimulatorRoot.',\n});\n\nexport const ShippingSimulatorErrorDefinition = defineComponent<ShippingSimulatorErrorProps>({\n  name: 'ShippingSimulatorError',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorError,\n  editor: { label: 'Shipping Simulator Error', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator',\n  guideline:\n    'Error banner shown when the simulation returns validation errors; must be a descendant of ShippingSimulatorRoot.',\n});\n\nexport const ShippingSimulatorOptionsDefinition = defineComponent<ShippingSimulatorOptionsProps>({\n  name: 'ShippingSimulatorOptions',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorOptions,\n  editor: { label: 'Shipping Simulator Options', category: 'commerce' },\n  schema: {\n    sortBy: { type: ['price', 'estimate'] as const, label: 'Sort by' },\n    maxOptions: { type: 'number', label: 'Max options' },\n  },\n  requiresContext: 'shipping-simulator',\n  providesContext: 'shipping-simulator-option',\n  guideline:\n    'List that renders one ShippingSimulatorOption per available shipping option; must be a descendant of a shipping-simulator Root (PDP or cart). Renders every option in API order by default; set sortBy (\"price\" = cheapest first, \"estimate\" = fastest first) and maxOptions to cap the list — sortBy=\"price\" with maxOptions=1 shows only the cheapest option. See shipping-simulator.md.',\n});\n\nexport const ShippingSimulatorOptionDefinition = defineComponent<ShippingSimulatorOptionProps>({\n  name: 'ShippingSimulatorOption',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorOption,\n  editor: { label: 'Shipping Simulator Option', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator-option',\n  guideline:\n    'Container for a single shipping option row; holds ShippingSimulatorOptionName, ShippingSimulatorOptionEstimate, and ShippingSimulatorOptionPrice. Must be a descendant of ShippingSimulatorOptions.',\n});\n\nexport const ShippingSimulatorOptionNameDefinition = defineComponent<ShippingSimulatorOptionNameProps>({\n  name: 'ShippingSimulatorOptionName',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorOptionName,\n  editor: { label: 'Option Name', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator-option',\n  guideline:\n    'Displays the shipping option name (e.g. \"Entrega Normal\"); must be a descendant of ShippingSimulatorOption.',\n});\n\nexport const ShippingSimulatorOptionEstimateDefinition = defineComponent<ShippingSimulatorOptionEstimateProps>({\n  name: 'ShippingSimulatorOptionEstimate',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorOptionEstimate,\n  editor: { label: 'Option Estimate', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator-option',\n  guideline:\n    'Displays the delivery estimate in the active locale, one whole sentence per unit from the message catalog; a zero-value estimate (any unit) reads as an arrival-today message instead, since \"chega em 0 dias úteis\" reads wrong. Must be a descendant of ShippingSimulatorOption.',\n});\n\nexport const ShippingSimulatorOptionPriceDefinition = defineComponent<ShippingSimulatorOptionPriceProps>({\n  name: 'ShippingSimulatorOptionPrice',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorOptionPrice,\n  editor: { label: 'Option Price', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator-option',\n  guideline:\n    'Displays the shipping price, showing the free-shipping label from the message catalog when the amount is zero; must be a descendant of ShippingSimulatorOption.',\n});\n\nexport const ShippingSimulatorOptionFreeBadgeDefinition = defineComponent<ShippingSimulatorOptionFreeBadgeProps>({\n  name: 'ShippingSimulatorOptionFreeBadge',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorOptionFreeBadge,\n  editor: { label: 'Option Free Badge', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator-option',\n  guideline:\n    'Badge shown only when the current option price is zero (free shipping); renders nothing otherwise. Must be a descendant of ShippingSimulatorOption. Orthogonal to the free-price replacement text owned by ShippingSimulatorOptionPrice.',\n});\n\nexport const ShippingSimulatorEmptyDefinition = defineComponent<ShippingSimulatorEmptyProps>({\n  name: 'ShippingSimulatorEmpty',\n  importPath: '@vtex/faststore/components',\n  component: ShippingSimulatorEmpty,\n  editor: { label: 'Shipping Simulator Empty', category: 'commerce' },\n  schema: {},\n  requiresContext: 'shipping-simulator',\n  guideline:\n    'Message shown when a simulation ran and returned no shipping options (e.g. no carrier common to the whole cart). Renders nothing before the first submit and nothing when options or an error are present. The copy comes from the message catalog; pass children to override. Must be a descendant of a shipping-simulator Root.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ShippingSimulatorRoot({\n  country = 'BRA',\n  quantity = 1,\n  variantId: variantIdProp,\n  seller: sellerProp,\n  $data: $dataProp,\n  shippingOptions: shippingOptionsProp,\n  userErrors: userErrorsProp,\n  onSimulate: onSimulateProp,\n  onResult,\n  className,\n  children,\n  ...props\n}: ShippingSimulatorRootProps) {\n  const defaultSimulate = useShippingSimulation();\n  const onSimulate = onSimulateProp ?? defaultSimulate;\n  const intl = useIntl();\n\n  const $data = useDataOverride($dataProp);\n  const extracted = extractProductFromData($data);\n  const variantId = variantIdProp ?? extracted.variantId;\n  const seller = sellerProp ?? extracted.seller;\n\n  const [postalCode, setPostalCode] = useState('');\n  const [status, setStatus] = useState<Status>(() => {\n    if (userErrorsProp?.length) return 'error';\n    if (shippingOptionsProp) return 'success';\n    return 'idle';\n  });\n  const [shippingOptions, setShippingOptions] = useState<ShippingOption[] | null>(shippingOptionsProp ?? null);\n  const [userErrors, setUserErrors] = useState<ShippingSimulateError[]>(userErrorsProp ?? []);\n\n  const submissionToken = useRef(0);\n\n  const submit = useCallback(() => {\n    if (!onSimulate || !variantId || !seller) return;\n\n    const normalizedCep = normalizePostalCode(postalCode);\n    if (normalizedCep.length !== 8) return;\n\n    const token = ++submissionToken.current;\n    setStatus('loading');\n    setShippingOptions(null);\n    setUserErrors([]);\n\n    onSimulate({ postalCode: normalizedCep, country, variantId, quantity, seller })\n      .then((result) => {\n        if (submissionToken.current !== token) return;\n        setShippingOptions(result.shippingOptions);\n        setUserErrors(result.userErrors);\n        setStatus(result.userErrors.length > 0 ? 'error' : 'success');\n        onResult?.(result);\n      })\n      .catch(() => {\n        if (submissionToken.current !== token) return;\n        // In a handler, not a render: the message goes into state, where only a string fits.\n        const fallback: ShippingSimulateError = {\n          code: 'UNKNOWN',\n          message: intl.formatMessage({ id: 'fs/shipping.calculation-failed' }),\n        };\n        setShippingOptions(null);\n        setUserErrors([fallback]);\n        setStatus('error');\n        onResult?.({ shippingOptions: null, userErrors: [fallback] });\n      });\n  }, [country, intl, onResult, onSimulate, postalCode, quantity, seller, variantId]);\n\n  const contextValue = useMemo<ShippingSimulatorContextValue>(\n    () => ({\n      postalCode,\n      setPostalCode,\n      status,\n      shippingOptions,\n      userErrors,\n      submit,\n    }),\n    [postalCode, status, shippingOptions, userErrors, submit],\n  );\n\n  return (\n    <ShippingSimulatorContext value={contextValue}>\n      <div {...props} className={className} data-fs-shipping-simulator=\"\">\n        {children}\n      </div>\n    </ShippingSimulatorContext>\n  );\n}\n\nexport function CartShippingSimulatorRoot({\n  country = 'BRA',\n  shippingOptions: shippingOptionsProp,\n  userErrors: userErrorsProp,\n  onSimulate: onSimulateProp,\n  onResult,\n  className,\n  children,\n  ...props\n}: CartShippingSimulatorRootProps) {\n  const defaultSimulate = useCartShippingSimulation();\n  const onSimulate = onSimulateProp ?? defaultSimulate;\n  const intl = useIntl();\n\n  const [postalCode, setPostalCode] = useState('');\n  const [status, setStatus] = useState<Status>(() => {\n    if (userErrorsProp?.length) return 'error';\n    if (shippingOptionsProp) return 'success';\n    return 'idle';\n  });\n  const [shippingOptions, setShippingOptions] = useState<ShippingOption[] | null>(shippingOptionsProp ?? null);\n  const [userErrors, setUserErrors] = useState<ShippingSimulateError[]>(userErrorsProp ?? []);\n\n  const submissionToken = useRef(0);\n\n  const submit = useCallback(() => {\n    const normalizedCep = normalizePostalCode(postalCode);\n    if (normalizedCep.length !== 8) return;\n\n    const token = ++submissionToken.current;\n    setStatus('loading');\n    setShippingOptions(null);\n    setUserErrors([]);\n\n    onSimulate({ postalCode: normalizedCep, country })\n      .then((result) => {\n        if (submissionToken.current !== token) return;\n        setShippingOptions(result.shippingOptions);\n        setUserErrors(result.userErrors);\n        setStatus(result.userErrors.length > 0 ? 'error' : 'success');\n        onResult?.(result);\n      })\n      .catch(() => {\n        if (submissionToken.current !== token) return;\n        // In a handler, not a render: the message goes into state, where only a string fits.\n        const fallback: ShippingSimulateError = {\n          code: 'UNKNOWN',\n          message: intl.formatMessage({ id: 'fs/shipping.calculation-failed' }),\n        };\n        setShippingOptions(null);\n        setUserErrors([fallback]);\n        setStatus('error');\n        onResult?.({ shippingOptions: null, userErrors: [fallback] });\n      });\n  }, [country, intl, onResult, onSimulate, postalCode]);\n\n  const contextValue = useMemo<ShippingSimulatorContextValue>(\n    () => ({\n      postalCode,\n      setPostalCode,\n      status,\n      shippingOptions,\n      userErrors,\n      submit,\n    }),\n    [postalCode, status, shippingOptions, userErrors, submit],\n  );\n\n  return (\n    <ShippingSimulatorContext value={contextValue}>\n      <div {...props} className={className} data-fs-shipping-simulator=\"\">\n        {children}\n      </div>\n    </ShippingSimulatorContext>\n  );\n}\n\nexport function ShippingSimulatorForm({ className, children, ...props }: ShippingSimulatorFormProps) {\n  const { submit } = useShippingSimulator();\n\n  return (\n    <form\n      {...props}\n      className={className}\n      data-fs-shipping-simulator-form=\"\"\n      onSubmit={(event) => {\n        event.preventDefault();\n        submit();\n      }}\n    >\n      {children}\n    </form>\n  );\n}\n\nexport function ShippingSimulatorInput({\n  className,\n  placeholder,\n  'aria-label': ariaLabel,\n  format = false,\n  ...props\n}: ShippingSimulatorInputProps) {\n  const { postalCode, setPostalCode } = useShippingSimulator();\n  const intl = useIntl();\n  const displayValue = format ? formatPostalCode(postalCode) : postalCode;\n\n  return (\n    <input\n      {...props}\n      aria-label={ariaLabel ?? intl.formatMessage({ id: 'fs/shipping.postal-code.aria-label' })}\n      className={className}\n      data-fs-shipping-simulator-input=\"\"\n      type=\"text\"\n      value={displayValue}\n      onChange={(event) => setPostalCode(normalizePostalCode(event.target.value))}\n      placeholder={placeholder ?? intl.formatMessage({ id: 'fs/shipping.postal-code.placeholder' })}\n      pattern=\"\\d{5}-?\\d{3}\"\n      maxLength={9}\n      inputMode=\"numeric\"\n      required\n    />\n  );\n}\n\nexport function ShippingSimulatorSubmit({ className, children, disabled, ...props }: ShippingSimulatorSubmitProps) {\n  const { status } = useShippingSimulator();\n  const isLoading = status === 'loading';\n\n  return (\n    <button\n      {...props}\n      type=\"submit\"\n      className={className}\n      data-fs-shipping-simulator-submit=\"\"\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function ShippingSimulatorLoading({ className, children, ...props }: ShippingSimulatorLoadingProps) {\n  const { status } = useShippingSimulator();\n  if (status !== 'loading') return null;\n\n  return (\n    <output {...props} aria-live=\"polite\" className={className} data-fs-shipping-simulator-loading=\"\">\n      {children ?? <FormattedMessage id=\"fs/shipping.calculating\" />}\n    </output>\n  );\n}\n\nexport function ShippingSimulatorError({ className, children, ...props }: ShippingSimulatorErrorProps) {\n  const { userErrors } = useShippingSimulator();\n  const [firstError] = userErrors;\n  if (!firstError) return null;\n\n  return (\n    <div {...props} role=\"alert\" className={className} data-fs-shipping-simulator-error=\"\">\n      {children ?? firstError.message}\n    </div>\n  );\n}\n\nexport function ShippingSimulatorOptions({\n  sortBy,\n  maxOptions,\n  className,\n  children,\n  ...props\n}: ShippingSimulatorOptionsProps) {\n  const { shippingOptions } = useShippingSimulator();\n\n  const visibleOptions = useMemo(() => {\n    if (!shippingOptions) return null;\n    const sorted = sortBy ? sortShippingOptions(shippingOptions, sortBy) : shippingOptions;\n    return maxOptions && maxOptions > 0 ? sorted.slice(0, maxOptions) : sorted;\n  }, [shippingOptions, sortBy, maxOptions]);\n\n  if (!visibleOptions || visibleOptions.length === 0) return null;\n\n  return (\n    <ul {...props} className={className} data-fs-shipping-simulator-options=\"\">\n      {visibleOptions.map((option) => (\n        <OptionItemContext key={option.id} value={option}>\n          {children}\n        </OptionItemContext>\n      ))}\n    </ul>\n  );\n}\n\nexport function ShippingSimulatorOption({ className, children, ...props }: ShippingSimulatorOptionProps) {\n  const option = useOptionItem();\n\n  return (\n    <li\n      {...props}\n      className={className}\n      data-fs-shipping-simulator-option=\"\"\n      data-fs-shipping-simulator-option-channel={option.channel}\n    >\n      {children}\n    </li>\n  );\n}\n\nexport function ShippingSimulatorOptionName({ className, children, ...props }: ShippingSimulatorOptionNameProps) {\n  const option = useOptionItem();\n\n  return (\n    <span {...props} className={className} data-fs-shipping-simulator-option-name=\"\">\n      {children ?? option.name}\n    </span>\n  );\n}\n\nexport function ShippingSimulatorOptionEstimate({\n  className,\n  children,\n  ...props\n}: ShippingSimulatorOptionEstimateProps) {\n  const option = useOptionItem();\n  const intl = useIntl();\n  const { value, unit } = option.shippingEstimate;\n  const { id, variable } = ESTIMATE_MESSAGE[unit];\n  const text =\n    value === 0\n      ? intl.formatMessage({ id: 'fs/shipping.estimate.today' })\n      : intl.formatMessage({ id }, { [variable]: value });\n\n  return (\n    <span {...props} className={className} data-fs-shipping-simulator-option-estimate=\"\">\n      {children ?? text}\n    </span>\n  );\n}\n\nexport function ShippingSimulatorOptionPrice({ className, children, ...props }: ShippingSimulatorOptionPriceProps) {\n  const option = useOptionItem();\n  const intl = useIntl();\n  const { locale, currency } = useStorefrontContext();\n  const text =\n    option.price.amount === 0\n      ? intl.formatMessage({ id: 'fs/shipping.free-price' })\n      : formatPrice(option.price.amount, locale, currency);\n\n  return (\n    <span {...props} className={className} data-fs-shipping-simulator-option-price=\"\">\n      {children ?? text}\n    </span>\n  );\n}\n\nexport function ShippingSimulatorOptionFreeBadge({\n  className,\n  children,\n  ...props\n}: ShippingSimulatorOptionFreeBadgeProps) {\n  const option = useOptionItem();\n  if (option.price.amount !== 0) return null;\n\n  return (\n    <span {...props} className={className} data-fs-shipping-simulator-option-free-badge=\"\">\n      {children ?? <FormattedMessage id=\"fs/shipping.free-badge\" />}\n    </span>\n  );\n}\n\nexport function ShippingSimulatorEmpty({ className, children, ...props }: ShippingSimulatorEmptyProps) {\n  const { shippingOptions, userErrors } = useShippingSimulator();\n  // Idle (null) → nothing; error → nothing (Error owns it); options present → nothing.\n  const simulatedEmpty = Array.isArray(shippingOptions) && shippingOptions.length === 0 && userErrors.length === 0;\n  if (!simulatedEmpty) return null;\n\n  return (\n    <output {...props} aria-live=\"polite\" className={className} data-fs-shipping-simulator-empty=\"\">\n      {children ?? <FormattedMessage id=\"fs/shipping.no-options\" />}\n    </output>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ShippingSimulator = {\n  Root: ShippingSimulatorRoot,\n  Form: ShippingSimulatorForm,\n  Input: ShippingSimulatorInput,\n  Submit: ShippingSimulatorSubmit,\n  Loading: ShippingSimulatorLoading,\n  Error: ShippingSimulatorError,\n  Options: ShippingSimulatorOptions,\n  Option: ShippingSimulatorOption,\n  OptionName: ShippingSimulatorOptionName,\n  OptionEstimate: ShippingSimulatorOptionEstimate,\n  OptionPrice: ShippingSimulatorOptionPrice,\n  OptionFreeBadge: ShippingSimulatorOptionFreeBadge,\n  Empty: ShippingSimulatorEmpty,\n};\n\nexport const CartShippingSimulator = {\n  Root: CartShippingSimulatorRoot,\n  Form: ShippingSimulatorForm,\n  Input: ShippingSimulatorInput,\n  Submit: ShippingSimulatorSubmit,\n  Loading: ShippingSimulatorLoading,\n  Error: ShippingSimulatorError,\n  Options: ShippingSimulatorOptions,\n  Option: ShippingSimulatorOption,\n  OptionName: ShippingSimulatorOptionName,\n  OptionEstimate: ShippingSimulatorOptionEstimate,\n  OptionPrice: ShippingSimulatorOptionPrice,\n  OptionFreeBadge: ShippingSimulatorOptionFreeBadge,\n  Empty: ShippingSimulatorEmpty,\n};\n"],"mappings":"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"}

package/dist/matter/sign-in-form/sign-in-form.d.ts

@@ -0,0 +1,79 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { SessionUserError } from "../../sdk/session/auth-operations.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+//#region src/matter/sign-in-form/sign-in-form.d.ts
+/** ClientProfile slice forwarded by the reactive runtime — only `email` is consumed for pre-fill. */
+export type SignInFormSlice = Readonly<{
+  email?: string | null;
+}>;
+export type SignInFormMessages = Readonly<{
+  invalidCredentialsMessage: string;
+  blockedMessage: string;
+  networkErrorMessage: string;
+  genericErrorMessage: string;
+}>;
+export type SignInFormProps = Readonly<{
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  showPasswordLabel?: string;
+  hidePasswordLabel?: string;
+  submitLabel?: string;
+  /** Inline error for an invalid email format (mirrors EmailIdentificationControl). */
+  invalidEmailMessage?: string;
+  /** Inline error when the password field is submitted empty (this form owns the presence check). */
+  passwordRequiredMessage?: string;
+  invalidCredentialsMessage?: string;
+  blockedMessage?: string;
+  networkErrorMessage?: string;
+  genericErrorMessage?: string;
+  /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */
+  $data?: SignInFormSlice | null;
+  /** Compiler-injected action surface; carries `session.loginWithPassword`. */
+  $actions?: ComponentActions;
+  className?: string;
+}>;
+/**
+ * Maps the first resolved SessionUserError to caller-configurable copy. INVALID_ACCESS_CODE,
+ * ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable from
+ * loginWithPassword but share the untyped `code: string` field, so they fall through to the
+ * generic message defensively, alongside any future/unknown code.
+ */
+export declare function mapSessionErrorMessage(error: SessionUserError | undefined, messages: SignInFormMessages): string | null;
+export declare const SignInFormDefinition: ComponentDefinition<Readonly<{
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  showPasswordLabel?: string;
+  hidePasswordLabel?: string;
+  submitLabel?: string;
+  /** Inline error for an invalid email format (mirrors EmailIdentificationControl). */
+  invalidEmailMessage?: string;
+  /** Inline error when the password field is submitted empty (this form owns the presence check). */
+  passwordRequiredMessage?: string;
+  invalidCredentialsMessage?: string;
+  blockedMessage?: string;
+  networkErrorMessage?: string;
+  genericErrorMessage?: string;
+  /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */
+  $data?: SignInFormSlice | null;
+  /** Compiler-injected action surface; carries `session.loginWithPassword`. */
+  $actions?: ComponentActions;
+  className?: string;
+}>>;
+/**
+ * Matter that composes `EmailField` + `PasswordField` under one submit and dispatches
+ * `$actions.session.loginWithPassword`. Reads the email pre-fill from `clientProfile.email`
+ * (colocated reactive fragment) and the identity tri-state from `useSession()` (which also
+ * enforces the `SessionRoot` ancestor), self-gating to `null` once the shopper is `loggedIn`.
+ * Client-side validation (email format, password presence) blocks the dispatch before any network
+ * round trip; the awaited dispatch's `userErrors` map to one form-level inline message, distinct
+ * from any ancestor `UNAUTHORIZED` gate. While the write is in flight the form is disabled and
+ * `data-fs-sign-in-form-pending` is present so a checkout-CTA guard can block.
+ */
+export declare function SignInForm({ emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, showPasswordLabel, hidePasswordLabel, submitLabel, invalidEmailMessage, passwordRequiredMessage, invalidCredentialsMessage, blockedMessage, networkErrorMessage, genericErrorMessage, $data: $dataProp, $actions, className }: SignInFormProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=sign-in-form.d.ts.map

package/dist/matter/sign-in-form/sign-in-form.js

@@ -0,0 +1,226 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { EmailField, isValidEmail } from "../../particles/email-field/email-field.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { useSession } from "../session/session.js";
+import { Button } from "../../particles/button/button.js";
+import { PasswordField } from "../../particles/password-field/password-field.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/sign-in-form/sign-in-form.tsx
+const fragment = `
+  fragment SignInFormData on Query {
+    clientProfile {
+      __typename
+      id
+      email
+    }
+  }
+`;
+/**
+* Maps the first resolved SessionUserError to caller-configurable copy. INVALID_ACCESS_CODE,
+* ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable from
+* loginWithPassword but share the untyped `code: string` field, so they fall through to the
+* generic message defensively, alongside any future/unknown code.
+*/
+function mapSessionErrorMessage(error, messages) {
+	if (!error) return null;
+	switch (error.code) {
+		case "INVALID_CREDENTIALS": return messages.invalidCredentialsMessage;
+		case "BLOCKED": return messages.blockedMessage;
+		case "NETWORK_ERROR": return messages.networkErrorMessage;
+		default: return messages.genericErrorMessage;
+	}
+}
+const SignInFormDefinition = defineComponent({
+	name: "SignInForm",
+	importPath: "@vtex/faststore/components",
+	component: SignInForm,
+	fragment,
+	fetchStrategy: "reactive",
+	actions: { session: ["loginWithPassword"] },
+	requiresContext: "session",
+	editor: {
+		label: "Sign In Form",
+		category: "identity"
+	},
+	schema: {
+		emailLabel: {
+			type: "string",
+			default: "Email",
+			label: "Email label"
+		},
+		emailPlaceholder: {
+			type: "string",
+			default: "you@example.com",
+			label: "Email placeholder"
+		},
+		passwordLabel: {
+			type: "string",
+			default: "Password",
+			label: "Password label"
+		},
+		passwordPlaceholder: {
+			type: "string",
+			default: "",
+			label: "Password placeholder"
+		},
+		showPasswordLabel: {
+			type: "string",
+			default: "Show password",
+			label: "Show password label"
+		},
+		hidePasswordLabel: {
+			type: "string",
+			default: "Hide password",
+			label: "Hide password label"
+		},
+		submitLabel: {
+			type: "string",
+			default: "Sign In",
+			label: "Submit label"
+		},
+		invalidEmailMessage: {
+			type: "string",
+			default: "Enter a valid email address.",
+			label: "Invalid email message"
+		},
+		passwordRequiredMessage: {
+			type: "string",
+			default: "Enter your password.",
+			label: "Password required message"
+		},
+		invalidCredentialsMessage: {
+			type: "string",
+			default: "Incorrect email or password. Please try again.",
+			label: "Invalid credentials message"
+		},
+		blockedMessage: {
+			type: "string",
+			default: "This account has been blocked. Please contact support.",
+			label: "Blocked account message"
+		},
+		networkErrorMessage: {
+			type: "string",
+			default: "Unable to complete the request. Please try again.",
+			label: "Network error message"
+		},
+		genericErrorMessage: {
+			type: "string",
+			default: "Unable to sign in. Please try again.",
+			label: "Generic error message"
+		}
+	},
+	guideline: "Combined email+password sign-in form dispatching $actions.session.loginWithPassword; pre-fills the email from clientProfile.email, self-hides once the session is loggedIn, and exposes data-fs-sign-in-form-pending while the submit is in flight. Must be inside SessionRoot. See sign-in-form.md."
+});
+/**
+* Matter that composes `EmailField` + `PasswordField` under one submit and dispatches
+* `$actions.session.loginWithPassword`. Reads the email pre-fill from `clientProfile.email`
+* (colocated reactive fragment) and the identity tri-state from `useSession()` (which also
+* enforces the `SessionRoot` ancestor), self-gating to `null` once the shopper is `loggedIn`.
+* Client-side validation (email format, password presence) blocks the dispatch before any network
+* round trip; the awaited dispatch's `userErrors` map to one form-level inline message, distinct
+* from any ancestor `UNAUTHORIZED` gate. While the write is in flight the form is disabled and
+* `data-fs-sign-in-form-pending` is present so a checkout-CTA guard can block.
+*/
+function SignInForm({ emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, showPasswordLabel, hidePasswordLabel, submitLabel = "Sign In", invalidEmailMessage = "Enter a valid email address.", passwordRequiredMessage = "Enter your password.", invalidCredentialsMessage = "Incorrect email or password. Please try again.", blockedMessage = "This account has been blocked. Please contact support.", networkErrorMessage = "Unable to complete the request. Please try again.", genericErrorMessage = "Unable to sign in. Please try again.", $data: $dataProp, $actions, className }) {
+	const $data = useDataOverride($dataProp);
+	const { state } = useSession();
+	const savedEmail = $data?.email ?? "";
+	const [email, setEmail] = useState(savedEmail);
+	const [password, setPassword] = useState("");
+	const [pending, setPending] = useState(false);
+	const [emailError, setEmailError] = useState(null);
+	const [passwordError, setPasswordError] = useState(null);
+	const [formError, setFormError] = useState(null);
+	useEffect(() => {
+		setEmail(savedEmail);
+	}, [savedEmail]);
+	if (state === "loggedIn") return null;
+	function handleEmailChange(next) {
+		setEmail(next);
+		if (emailError) setEmailError(null);
+	}
+	function handlePasswordChange(next) {
+		setPassword(next);
+		if (passwordError) setPasswordError(null);
+	}
+	async function handleSubmit(event) {
+		event.preventDefault();
+		const trimmedEmail = email.trim();
+		if (!isValidEmail(trimmedEmail)) {
+			setEmailError(invalidEmailMessage);
+			return;
+		}
+		if (password.length === 0) {
+			setPasswordError(passwordRequiredMessage);
+			return;
+		}
+		setEmailError(null);
+		setPasswordError(null);
+		setFormError(null);
+		setPending(true);
+		try {
+			const errors = await $actions?.session?.loginWithPassword?.({
+				email: trimmedEmail,
+				password
+			}) ?? [];
+			if (errors.length > 0) {
+				setFormError(mapSessionErrorMessage(errors[0], {
+					invalidCredentialsMessage,
+					blockedMessage,
+					networkErrorMessage,
+					genericErrorMessage
+				}));
+				setPassword("");
+			}
+		} finally {
+			setPending(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		className,
+		"data-fs-sign-in-form": "",
+		...pending ? { "data-fs-sign-in-form-pending": "" } : {},
+		onSubmit: handleSubmit,
+		children: [
+			/* @__PURE__ */ jsx(EmailField, {
+				label: emailLabel,
+				placeholder: emailPlaceholder,
+				value: email,
+				disabled: pending,
+				invalid: emailError != null,
+				errorMessage: emailError ?? void 0,
+				onValueChange: handleEmailChange,
+				required: true
+			}),
+			/* @__PURE__ */ jsx(PasswordField, {
+				label: passwordLabel,
+				placeholder: passwordPlaceholder,
+				value: password,
+				disabled: pending,
+				invalid: passwordError != null,
+				errorMessage: passwordError ?? void 0,
+				showPasswordLabel,
+				hidePasswordLabel,
+				onValueChange: handlePasswordChange
+			}),
+			formError ? /* @__PURE__ */ jsx("div", {
+				"data-fs-sign-in-form-error": "",
+				role: "alert",
+				children: formError
+			}) : null,
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				disabled: pending,
+				"data-fs-sign-in-form-submit": "",
+				children: submitLabel
+			})
+		]
+	});
+}
+//#endregion
+export { SignInForm, SignInFormDefinition, mapSessionErrorMessage };
+
+//# sourceMappingURL=sign-in-form.js.map

package/dist/matter/sign-in-form/sign-in-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in-form.js","names":[],"sources":["../../../src/matter/sign-in-form/sign-in-form.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { FormEvent } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport { EmailField, isValidEmail } from '../../particles/email-field/email-field.js';\nimport { PasswordField } from '../../particles/password-field/password-field.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport type { SessionUserError } from '../../sdk/session/auth-operations.js';\nimport { useSession } from '../session/session.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment (colocated, ADR-0011) — reads only clientProfile.email, the minimal slice this\n// matter owns for the pre-fill. Authored as a raw string (not the codegen graphql() factory),\n// mirroring EmailIdentificationControl; the compiler derives the entity fragment on `clientProfile`\n// and subscribes reactively.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment SignInFormData on Query {\n    clientProfile {\n      __typename\n      id\n      email\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** ClientProfile slice forwarded by the reactive runtime — only `email` is consumed for pre-fill. */\nexport type SignInFormSlice = Readonly<{ email?: string | null }>;\n\nexport type SignInFormMessages = Readonly<{\n  invalidCredentialsMessage: string;\n  blockedMessage: string;\n  networkErrorMessage: string;\n  genericErrorMessage: string;\n}>;\n\nexport type SignInFormProps = Readonly<{\n  emailLabel?: string;\n  emailPlaceholder?: string;\n  passwordLabel?: string;\n  passwordPlaceholder?: string;\n  showPasswordLabel?: string;\n  hidePasswordLabel?: string;\n  submitLabel?: string;\n  /** Inline error for an invalid email format (mirrors EmailIdentificationControl). */\n  invalidEmailMessage?: string;\n  /** Inline error when the password field is submitted empty (this form owns the presence check). */\n  passwordRequiredMessage?: string;\n  invalidCredentialsMessage?: string;\n  blockedMessage?: string;\n  networkErrorMessage?: string;\n  genericErrorMessage?: string;\n  /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */\n  $data?: SignInFormSlice | null;\n  /** Compiler-injected action surface; carries `session.loginWithPassword`. */\n  $actions?: ComponentActions;\n  className?: string;\n}>;\n\n// ---------------------------------------------------------------------------\n// Error mapping — pure, unit-tested.\n// ---------------------------------------------------------------------------\n\n/**\n * Maps the first resolved SessionUserError to caller-configurable copy. INVALID_ACCESS_CODE,\n * ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable from\n * loginWithPassword but share the untyped `code: string` field, so they fall through to the\n * generic message defensively, alongside any future/unknown code.\n */\nexport function mapSessionErrorMessage(\n  error: SessionUserError | undefined,\n  messages: SignInFormMessages,\n): string | null {\n  if (!error) return null;\n  switch (error.code) {\n    case 'INVALID_CREDENTIALS':\n      return messages.invalidCredentialsMessage;\n    case 'BLOCKED':\n      return messages.blockedMessage;\n    case 'NETWORK_ERROR':\n      return messages.networkErrorMessage;\n    default:\n      return messages.genericErrorMessage;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const SignInFormDefinition = defineComponent<SignInFormProps>({\n  name: 'SignInForm',\n  importPath: '@vtex/faststore/components',\n  component: SignInForm,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { session: ['loginWithPassword'] },\n  requiresContext: 'session',\n  editor: { label: 'Sign In Form', category: 'identity' },\n  schema: {\n    emailLabel: { type: 'string', default: 'Email', label: 'Email label' },\n    emailPlaceholder: { type: 'string', default: 'you@example.com', label: 'Email placeholder' },\n    passwordLabel: { type: 'string', default: 'Password', label: 'Password label' },\n    passwordPlaceholder: { type: 'string', default: '', label: 'Password placeholder' },\n    showPasswordLabel: { type: 'string', default: 'Show password', label: 'Show password label' },\n    hidePasswordLabel: { type: 'string', default: 'Hide password', label: 'Hide password label' },\n    submitLabel: { type: 'string', default: 'Sign In', label: 'Submit label' },\n    invalidEmailMessage: { type: 'string', default: 'Enter a valid email address.', label: 'Invalid email message' },\n    passwordRequiredMessage: {\n      type: 'string',\n      default: 'Enter your password.',\n      label: 'Password required message',\n    },\n    invalidCredentialsMessage: {\n      type: 'string',\n      default: 'Incorrect email or password. Please try again.',\n      label: 'Invalid credentials message',\n    },\n    blockedMessage: {\n      type: 'string',\n      default: 'This account has been blocked. Please contact support.',\n      label: 'Blocked account message',\n    },\n    networkErrorMessage: {\n      type: 'string',\n      default: 'Unable to complete the request. Please try again.',\n      label: 'Network error message',\n    },\n    genericErrorMessage: {\n      type: 'string',\n      default: 'Unable to sign in. Please try again.',\n      label: 'Generic error message',\n    },\n  },\n  guideline:\n    'Combined email+password sign-in form dispatching $actions.session.loginWithPassword; pre-fills the email from clientProfile.email, self-hides once the session is loggedIn, and exposes data-fs-sign-in-form-pending while the submit is in flight. Must be inside SessionRoot. See sign-in-form.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Matter that composes `EmailField` + `PasswordField` under one submit and dispatches\n * `$actions.session.loginWithPassword`. Reads the email pre-fill from `clientProfile.email`\n * (colocated reactive fragment) and the identity tri-state from `useSession()` (which also\n * enforces the `SessionRoot` ancestor), self-gating to `null` once the shopper is `loggedIn`.\n * Client-side validation (email format, password presence) blocks the dispatch before any network\n * round trip; the awaited dispatch's `userErrors` map to one form-level inline message, distinct\n * from any ancestor `UNAUTHORIZED` gate. While the write is in flight the form is disabled and\n * `data-fs-sign-in-form-pending` is present so a checkout-CTA guard can block.\n */\nexport function SignInForm({\n  emailLabel,\n  emailPlaceholder,\n  passwordLabel,\n  passwordPlaceholder,\n  showPasswordLabel,\n  hidePasswordLabel,\n  submitLabel = 'Sign In',\n  invalidEmailMessage = 'Enter a valid email address.',\n  passwordRequiredMessage = 'Enter your password.',\n  invalidCredentialsMessage = 'Incorrect email or password. Please try again.',\n  blockedMessage = 'This account has been blocked. Please contact support.',\n  networkErrorMessage = 'Unable to complete the request. Please try again.',\n  genericErrorMessage = 'Unable to sign in. Please try again.',\n  $data: $dataProp,\n  $actions,\n  className,\n}: SignInFormProps) {\n  const $data = useDataOverride($dataProp);\n  // Reads the tri-state for self-gating and, as a side effect, throws when rendered outside\n  // <SessionRoot> — called unconditionally, before any early return.\n  const { state } = useSession();\n\n  const savedEmail = $data?.email ?? '';\n  const [email, setEmail] = useState(savedEmail);\n  const [password, setPassword] = useState('');\n  const [pending, setPending] = useState(false);\n  const [emailError, setEmailError] = useState<string | null>(null);\n  const [passwordError, setPasswordError] = useState<string | null>(null);\n  const [formError, setFormError] = useState<string | null>(null);\n\n  // Sync the pre-fill when the saved profile email resolves or changes, mirroring\n  // EmailIdentificationControl's pre-fill sync.\n  useEffect(() => {\n    setEmail(savedEmail);\n  }, [savedEmail]);\n\n  // An already-authenticated shopper is never offered a sign-in form.\n  if (state === 'loggedIn') return null;\n\n  function handleEmailChange(next: string) {\n    setEmail(next);\n    if (emailError) setEmailError(null);\n  }\n\n  function handlePasswordChange(next: string) {\n    setPassword(next);\n    if (passwordError) setPasswordError(null);\n  }\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n\n    const trimmedEmail = email.trim();\n    if (!isValidEmail(trimmedEmail)) {\n      setEmailError(invalidEmailMessage);\n      return;\n    }\n\n    if (password.length === 0) {\n      setPasswordError(passwordRequiredMessage);\n      return;\n    }\n\n    // Client-side checks passed — clear any prior field-level/form-level errors before dispatching.\n    setEmailError(null);\n    setPasswordError(null);\n    setFormError(null);\n    setPending(true);\n\n    try {\n      // Awaited (async/pessimistic): the cache flip is read on the next render via useSession(),\n      // never assumed here.\n      const errors = (await $actions?.session?.loginWithPassword?.({ email: trimmedEmail, password })) ?? [];\n\n      if (errors.length > 0) {\n        setFormError(\n          mapSessionErrorMessage(errors[0], {\n            invalidCredentialsMessage,\n            blockedMessage,\n            networkErrorMessage,\n            genericErrorMessage,\n          }),\n        );\n        // Credential hygiene: drop the rejected password, keep the email.\n        setPassword('');\n      }\n    } finally {\n      setPending(false);\n    }\n  }\n\n  return (\n    <form\n      className={className}\n      data-fs-sign-in-form=\"\"\n      {...(pending ? { 'data-fs-sign-in-form-pending': '' } : {})}\n      onSubmit={handleSubmit}\n    >\n      <EmailField\n        label={emailLabel}\n        placeholder={emailPlaceholder}\n        value={email}\n        disabled={pending}\n        invalid={emailError != null}\n        errorMessage={emailError ?? undefined}\n        onValueChange={handleEmailChange}\n        required\n      />\n      <PasswordField\n        label={passwordLabel}\n        placeholder={passwordPlaceholder}\n        value={password}\n        disabled={pending}\n        invalid={passwordError != null}\n        errorMessage={passwordError ?? undefined}\n        showPasswordLabel={showPasswordLabel}\n        hidePasswordLabel={hidePasswordLabel}\n        onValueChange={handlePasswordChange}\n      />\n      {formError ? (\n        <div data-fs-sign-in-form-error=\"\" role=\"alert\">\n          {formError}\n        </div>\n      ) : null}\n      <Button type=\"submit\" disabled={pending} data-fs-sign-in-form-submit=\"\">\n        {submitLabel}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/variant-selector/variant-selector.d.ts

@@ -0,0 +1,183 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { VariantSelectorDataFragment } from "../../sdk/generated/graphql.js";
+import { ComponentPropsWithRef, FunctionComponent } from "react";
+//#region src/matter/variant-selector/variant-selector.d.ts
+type ProductSlice = NonNullable<VariantSelectorDataFragment['productBySlug']>;
+/** Per-value swatch media. `imageUrl`/`alt` are derived from the matching variant's primary image
+ *  (`Variant.images`) so the `image`/`auto` display modes work from live data. `hexColor` has no
+ *  Core Graph source (`ProductOption.values: [String!]!`) and is populated only when a host injects
+ *  it through context — see specs/sku-selector.md gap row 2. */
+export type VariantSelectorSwatch = {
+  hexColor?: string;
+  imageUrl?: string;
+  alt?: string;
+};
+export type VariantSelectorOptionData = {
+  value: string;
+  available: boolean;
+  variantId: string | null;
+  swatch?: VariantSelectorSwatch;
+};
+export type VariantSelectorAxis = {
+  name: string;
+  activeValue: string | null;
+  options: VariantSelectorOptionData[];
+};
+export type VariantSelectorContextValue = {
+  axes: VariantSelectorAxis[];
+  selectedVariantId: string | null;
+  select: (axisName: string, value: string) => void;
+} | null;
+/** Provided by `VariantSelectorOptionGroup` to its composed parts (title, swatch list, overflow, and the
+ *  options the list renders). The group owns the axis binding and the collapse/expand state; the parts read
+ *  what they need from here, so the author can place them freely — e.g. the title in an accordion header
+ *  and the swatch list in its panel. */
+type VariantSelectorGroupContextValue = {
+  axis: VariantSelectorAxis;
+  /** Stable id shared by the title (`id`) and the swatch list (`aria-labelledby`) to label the radiogroup. */
+  titleId: string;
+  /** Whether a `VariantSelectorGroupTitle` is composed in this group. The swatch list points its
+   *  `aria-labelledby` at the title only when one exists; otherwise it relies on the `aria-label`
+   *  axis-name floor, so the radiogroup is never labelled by a dangling idref. */
+  hasTitle: boolean;
+  /** Registers a mounted `VariantSelectorGroupTitle`, returning an unregister for cleanup. Ref-counted so
+   *  the title can be placed freely (e.g. an accordion header) and still flip `hasTitle`. */
+  registerTitle: () => () => void;
+  /** Registers a mounted `VariantSelectorOverflow`, returning an unregister for cleanup. Ref-counted like
+   *  `registerTitle`, so the trigger can be placed freely and still flip `hasOverflow`. Space-based collapse
+   *  runs only while a trigger is composed, so hidden swatches always have a reveal affordance. */
+  registerOverflow: () => () => void;
+  /** Whether a `VariantSelectorOverflow` is composed in this group — gates the measured collapse. */
+  hasOverflow: boolean;
+  /** Ref callback the swatch list hands its container element to, so the group can measure the row width. */
+  registerListElement: (el: HTMLElement | null) => void;
+  visibleOptions: VariantSelectorOptionData[];
+  hiddenCount: number;
+  overflowing: boolean;
+  expand: () => void;
+  /** Activates `value` on this group's axis. */
+  select: (value: string) => void;
+  ImageComponent: FunctionComponent<{
+    src: string;
+    alt: string;
+  }>;
+};
+export type VariantSelectorRootProps = ComponentPropsWithRef<'div'> & {
+  $data?: ProductSlice | null;
+  /** Pre-selects the variant the page is showing (the viewed SKU) before the shopper interacts.
+   *  `productBySlug` resolves to the product group, so the page supplies the viewed variant id here
+   *  — mirroring `ProductGalleryRoot.selectedVariantId`. The published `selectedVariantVar` wins
+   *  once a swatch is activated; this prop is only the initial fallback. */
+  selectedVariantId?: string;
+};
+export type VariantSelectorOptionGroupProps = ComponentPropsWithRef<'div'> & {
+  /** Catalog `ProductOption.name` this group binds (e.g. `"Color"`). Matched case/accent/whitespace-
+   *  insensitively but otherwise exactly — the runtime does no plural or translation guessing. Use this
+   *  only when the exact catalog name is known; otherwise bind by `optionIndex`. When both are given, a
+   *  successful name match wins and `optionIndex` is the fallback. */
+  optionName?: string;
+  /** Zero-based axis position, in the order the product defines its options. The preferred binding for
+   *  generated schemas: the author places one group per axis in visual top-to-bottom order, which lines
+   *  up with the product's option order — reliable even when the on-image label differs from the catalog
+   *  name. Used when `optionName` is absent or does not match any axis. */
+  optionIndex?: number;
+  /** Reserve space for the `VariantSelectorOverflow` trigger in the fit calculation. Off by default: the
+   *  trigger is a sibling of the swatch list (its own space), so the swatches use the full row width. Turn
+   *  it on only when the trigger is styled inline at the end of the swatch row (content-sized) so it stays
+   *  on the line — its measured width is then subtracted from the space available to the swatches. */
+  reserveTriggerSpace?: boolean;
+  /** Image renderer used by image/color swatches; defaults to a plain `<img>`. Hosts inject e.g. next/image. */
+  ImageComponent?: FunctionComponent<{
+    src: string;
+    alt: string;
+  }>;
+};
+/** Title for a `VariantSelectorOptionGroup`: renders the axis name (or your `label`). Reads the axis from
+ *  group context, so it can be placed anywhere inside the group (e.g. an accordion header). Compose a
+ *  `VariantSelectorGroupValue` beside it to echo the live selection — the separator, weight, and spacing
+ *  between the two are brand styling on the `data-fs-*` hooks, not baked into this component. */
+export type VariantSelectorGroupTitleProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+  /** Overrides the displayed axis name. Defaults to the catalog axis name (e.g. `"Color"`). Use it to match
+   *  a design's prompt copy such as `"Selecione a cor"`; it never changes which axis the group binds. Any
+   *  separator (e.g. a trailing colon) is styling — add it to the title's `data-fs-*` hook, not the text. */
+  label?: string;
+};
+/** The live selected value of a `VariantSelectorOptionGroup`, as a standalone placeable part (e.g. beside
+ *  the title inside a container). Decorative/`aria-hidden`: the selection is already announced per option,
+ *  so echoing it here would make the group's accessible name churn on every change. */
+export type VariantSelectorGroupValueProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;
+/** The swatch list for a `VariantSelectorOptionGroup`: a radiogroup of the axis' option swatches,
+ *  auto-rendered from the product data. The component chooses the swatch look — `VariantSelectorSwatches`
+ *  infers it, the explicit variants fix it — so the kind is selected by composition, not a prop. */
+export type VariantSelectorSwatchesProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'>;
+/** The "+N more" trigger for a `VariantSelectorOptionGroup`: composing it opts the group into measured,
+ *  space-based collapse, and it renders only while the row actually overflows, expanding it in place.
+ *  Reads the hidden count and expand action from group context. */
+export type VariantSelectorOverflowProps = Omit<ComponentPropsWithRef<'button'>, 'children'>;
+export type VariantSelectorOptionProps = {
+  value: string;
+  className?: string;
+  ImageComponent?: FunctionComponent<{
+    src: string;
+    alt: string;
+  }>;
+};
+/** Exposed for advanced composition and tests that mount group/option in isolation. */
+export declare const VariantSelectorContext: React.Context<VariantSelectorContextValue>;
+export declare const VariantSelectorGroupContext: import("react").Context<VariantSelectorGroupContextValue | null>;
+export declare const VariantSelectorRootDefinition: ComponentDefinition<VariantSelectorRootProps>;
+export declare const VariantSelectorOptionGroupDefinition: ComponentDefinition<VariantSelectorOptionGroupProps>;
+export declare const VariantSelectorGroupTitleDefinition: ComponentDefinition<VariantSelectorGroupTitleProps>;
+export declare const VariantSelectorGroupValueDefinition: ComponentDefinition<VariantSelectorGroupValueProps>;
+export declare const VariantSelectorSwatchesDefinition: ComponentDefinition<VariantSelectorSwatchesProps>;
+export declare const VariantSelectorLabelSwatchesDefinition: ComponentDefinition<VariantSelectorSwatchesProps>;
+export declare const VariantSelectorImageSwatchesDefinition: ComponentDefinition<VariantSelectorSwatchesProps>;
+export declare const VariantSelectorColorSwatchesDefinition: ComponentDefinition<VariantSelectorSwatchesProps>;
+export declare const VariantSelectorRadioSwatchesDefinition: ComponentDefinition<VariantSelectorSwatchesProps>;
+export declare const VariantSelectorOverflowDefinition: ComponentDefinition<VariantSelectorOverflowProps>;
+export declare const VariantSelectorOptionDefinition: ComponentDefinition<VariantSelectorOptionProps>;
+export declare function VariantSelectorRoot({ $data: $dataProp, selectedVariantId, className, children, ...props }: VariantSelectorRootProps): import("react/jsx-runtime").JSX.Element;
+/** 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. */
+export declare function VariantSelectorOptionGroup({ optionName, optionIndex, reserveTriggerSpace, ImageComponent, className, children, ...props }: VariantSelectorOptionGroupProps): import("react/jsx-runtime").JSX.Element | null;
+/** 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. */
+export declare function VariantSelectorGroupTitle({ label, className, ...props }: VariantSelectorGroupTitleProps): import("react/jsx-runtime").JSX.Element;
+/** 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. */
+export declare function VariantSelectorGroupValue({ className, ...props }: VariantSelectorGroupValueProps): import("react/jsx-runtime").JSX.Element;
+/** 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. */
+export declare function VariantSelectorSwatches(props: VariantSelectorSwatchesProps): import("react/jsx-runtime").JSX.Element;
+/** Swatch list with text-label swatches. */
+export declare function VariantSelectorLabelSwatches(props: VariantSelectorSwatchesProps): import("react/jsx-runtime").JSX.Element;
+/** Swatch list with image (thumbnail) swatches. */
+export declare function VariantSelectorImageSwatches(props: VariantSelectorSwatchesProps): import("react/jsx-runtime").JSX.Element;
+/** Swatch list with color-chip swatches (degrades per value to image, then label). */
+export declare function VariantSelectorColorSwatches(props: VariantSelectorSwatchesProps): import("react/jsx-runtime").JSX.Element;
+/** Swatch list rendered as a radio-dot list (control circle + dot + label). */
+export declare function VariantSelectorRadioSwatches(props: VariantSelectorSwatchesProps): import("react/jsx-runtime").JSX.Element;
+/** 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). */
+export declare function VariantSelectorOverflow({ className, ...props }: VariantSelectorOverflowProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function VariantSelectorOption({ value, ImageComponent, className }: Readonly<VariantSelectorOptionProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare const VariantSelector: {
+  Root: typeof VariantSelectorRoot;
+  OptionGroup: typeof VariantSelectorOptionGroup;
+  Title: typeof VariantSelectorGroupTitle;
+  Value: typeof VariantSelectorGroupValue;
+  Swatches: typeof VariantSelectorSwatches;
+  LabelSwatches: typeof VariantSelectorLabelSwatches;
+  ImageSwatches: typeof VariantSelectorImageSwatches;
+  ColorSwatches: typeof VariantSelectorColorSwatches;
+  RadioSwatches: typeof VariantSelectorRadioSwatches;
+  Overflow: typeof VariantSelectorOverflow;
+  Option: typeof VariantSelectorOption;
+};
+//#endregion
+//# sourceMappingURL=variant-selector.d.ts.map