@vtex/faststore 0.0.1

package/dist/particles/phone-field/phone-field.js

@@ -0,0 +1,250 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { Field } from "../field/field.js";
+import { Input } from "../input/input.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/phone-field/phone-field.tsx
+/**
+* Returns true when `value` starts with the E.164 or bare country-code prefix
+* for the given country.
+*
+* US country code: 1   → "+1…" or "1…"
+* BR country code: 55  → "+55…" or "55…"
+*/
+function isValidCountryCode(value, country) {
+	switch (country) {
+		case "US": return value.startsWith("+1") || value.startsWith("1");
+		case "BR": return value.startsWith("+55") || value.startsWith("55");
+		default: return false;
+	}
+}
+/**
+* Strips phone mask formatting from `value`.
+*
+* When the raw string carries a valid country-code prefix (e.g. "+55…"), the
+* returned value preserves the leading "+" so callers can detect E.164 intent.
+* Otherwise only digits are returned.
+*
+* `removePhoneMask(applyPhoneMask(raw, country), country) === raw` for all
+* valid raw values that do NOT carry a country-code prefix.
+*/
+function removePhoneMask(value, country) {
+	const onlyDigits = value.replace(/\D/g, "");
+	if (value.startsWith("+") && isValidCountryCode(value, country)) return `+${onlyDigits}`;
+	return onlyDigits;
+}
+/**
+* Formats `value` into the mask pattern for `country`, applying as many mask
+* characters as the digit count allows (progressive masking while typing).
+*
+* US:  (123) 456-7890   or   +1 (123) 456-7890
+* BR:  (11) 99999-9999  or   +55 (11) 99999-9999
+*
+* Non-US/BR countries fall back to the US mask.
+*/
+function applyPhoneMask(value, country) {
+	switch (country) {
+		case "US": return applyUSPhoneMask(value);
+		case "BR": return applyBRPhoneMask(value);
+		default: return applyUSPhoneMask(value);
+	}
+}
+function applyUSPhoneMask(value) {
+	const onlyDigits = value.replace(/\D/g, "");
+	if (value.startsWith("+1") && onlyDigits.length >= 11) return `+1 ${formatUSNumber(value.replace("+1", "").replace(/\D/g, ""))}`;
+	if (onlyDigits.startsWith("1") && onlyDigits.length === 11) return `+1 ${formatUSNumber(onlyDigits.substring(1))}`;
+	return formatUSNumber(onlyDigits);
+}
+function formatUSNumber(digits) {
+	const local = digits.slice(0, 10);
+	if (local.length === 0) return "";
+	if (local.length <= 3) return `(${local}`;
+	if (local.length <= 6) return `(${local.slice(0, 3)}) ${local.slice(3)}`;
+	return `(${local.slice(0, 3)}) ${local.slice(3, 6)}-${local.slice(6)}`;
+}
+function applyBRPhoneMask(value) {
+	const onlyDigits = value.replace(/\D/g, "");
+	if (value.startsWith("+55") && onlyDigits.length >= 12) return `+55 ${formatBRNumber(value.replace("+55", "").replace(/\D/g, ""))}`;
+	if (onlyDigits.startsWith("55") && (onlyDigits.length === 12 || onlyDigits.length === 13)) return `+55 ${formatBRNumber(onlyDigits.substring(2))}`;
+	return formatBRNumber(onlyDigits);
+}
+function formatBRNumber(digits) {
+	const local = digits.slice(0, 11);
+	if (local.length === 0) return "";
+	if (local.length <= 2) return `(${local}`;
+	if (local.length <= 6) return `(${local.slice(0, 2)}) ${local.slice(2)}`;
+	if (local.length <= 10) return `(${local.slice(0, 2)}) ${local.slice(2, 6)}-${local.slice(6)}`;
+	return `(${local.slice(0, 2)}) ${local.slice(2, 7)}-${local.slice(7)}`;
+}
+/**
+* BR local part: 10 digits is a landline; 11 digits is a mobile, which must carry the mandatory
+* ninth digit "9" right after the two-digit DDD (the `phone` library rule the spec's Gap-05
+* reimplements — "11899998888" is mobile-shaped but not a real BR number).
+*/
+function isValidBRLocal(digits) {
+	if (digits.length === 10) return true;
+	return digits.length === 11 && digits[2] === "9";
+}
+/**
+* Validates a raw (unmasked) phone number string for the given country.
+*
+* NOTE: The spec (KD-3) calls for using the `phone` npm library for validation.
+* The library is listed in Gap-05 as a new dependency to add when available.
+* Until that dependency is installed, this implements an equivalent
+* digit-count validation that covers all spec key-scenarios for US and BR.
+* Country-code and non-country-code inputs are both handled.
+*
+* US valid forms:
+*   - 10 digits (local, e.g. "1234567890")
+*   - 11 raw digits with country code "1" (e.g. "11234567890")
+*   - E.164 "+1" + 10 digits (e.g. "+11234567890")
+*
+* BR valid forms:
+*   - 10 digits (landline, e.g. "1133334444")
+*   - 11 digits (mobile, e.g. "11999998888"; the ninth digit after the DDD must be "9")
+*   - E.164 "+55" + 10 or 11 digits (e.g. "+5511999998888")
+*/
+function validatePhoneNumber(input, country) {
+	if (!input || !input.trim()) return false;
+	const digits = input.replace(/\D/g, "");
+	if (isValidCountryCode(input, country)) {
+		if (country === "US") {
+			if (digits.length === 11) return true;
+		} else if (digits.length === 12 || digits.length === 13) return isValidBRLocal(digits.slice(2));
+	}
+	if (country === "US") return digits.length === 10;
+	return isValidBRLocal(digits);
+}
+/**
+* Normalizes a valid raw phone value to E.164 for persistence (legacy checkout parity): the
+* particle emits local digits ("2015551234") or a "+"-prefixed string; the profile stores
+* "+12015551234". Only call this on values `validatePhoneNumber` has already accepted — shared by
+* every binding that persists a phone value (`ClientProfilePhoneControl`, `ClientProfileForm`) so
+* there is exactly one normalization implementation.
+*/
+function toE164(raw, country) {
+	const unmasked = removePhoneMask(raw, country);
+	if (unmasked.startsWith("+")) return unmasked;
+	const code = country === "BR" ? "55" : "1";
+	const localMax = country === "BR" ? 11 : 10;
+	return unmasked.startsWith(code) && unmasked.length > localMax ? `+${unmasked}` : `+${code}${unmasked}`;
+}
+const PhoneFieldDefinition = defineComponent({
+	name: "PhoneField",
+	importPath: "@vtex/faststore/components",
+	component: PhoneField,
+	editor: {
+		label: "Phone Field",
+		category: "action"
+	},
+	schema: {
+		country: {
+			type: "string",
+			default: "US",
+			label: "Country (US or BR)"
+		},
+		label: {
+			type: "string",
+			default: "Phone",
+			label: "Label"
+		},
+		requirement: {
+			type: "string",
+			default: "mandatory",
+			label: "Requirement"
+		},
+		errorInvalid: {
+			type: "string",
+			default: "Invalid phone number",
+			label: "Invalid error message"
+		},
+		errorRequired: {
+			type: "string",
+			default: "Phone number is required",
+			label: "Required error message"
+		}
+	},
+	guideline: "Locale-aware, business-agnostic phone number input composed from the field + input particles. Applies country masking, validates on blur, and exposes its value via onValueChange. Bind it to a data source (e.g. ClientProfilePhoneControl for checkout) to persist the value."
+});
+/**
+* Presentational, business-agnostic phone field. Composes the `field` and `input` particles: the
+* `Field.Root` owns the invalid/disabled state and the `Field.Error match` slot, while the `Input`
+* particle renders the masked `<tel>` control. The particle stays reusable (checkout binding today,
+* MyAccount / extensions later); a binding owns the data source and persistence.
+*
+* US/BR masking, blur validation, and the `data-fs-phone-field*` attributes (plus the country variant
+* attribute) are kept; error strings remain props (a documented i18n divergence — the country tables
+* are internal, the copy is owner-supplied).
+*/
+function PhoneField({ value, defaultValue = "", onValueChange, country = "US", label = "Phone", isDisabled = false, placeholder, invalid, error, errorInvalid = "Invalid phone number", errorRequired = "Phone number is required", requirement = "mandatory", onBlur, className }) {
+	const isControlled = value !== void 0;
+	const [internalRaw, setInternalRaw] = useState(defaultValue);
+	const [localInvalid, setLocalInvalid] = useState(false);
+	const [localError, setLocalError] = useState("");
+	const prevCountryRef = useRef(country);
+	if (prevCountryRef.current !== country) {
+		prevCountryRef.current = country;
+		setLocalInvalid(false);
+		setLocalError("");
+	}
+	const rawValue = isControlled ? value : internalRaw;
+	const maskedValue = applyPhoneMask(rawValue, country);
+	const effectiveInvalid = invalid !== void 0 ? invalid : localInvalid;
+	const effectiveError = error !== void 0 ? error : effectiveInvalid ? localError : "";
+	function handleChange(event) {
+		if (isDisabled) return;
+		const raw = removePhoneMask(event.target.value, country);
+		if (!isControlled) setInternalRaw(raw);
+		onValueChange?.(raw);
+	}
+	function handleBlur(_event) {
+		if (isDisabled) return;
+		let isFieldInvalid = false;
+		let fieldError = "";
+		if (requirement === "mandatory" && !rawValue.trim()) {
+			isFieldInvalid = true;
+			fieldError = errorRequired;
+		} else if (rawValue.trim()) {
+			const valid = validatePhoneNumber(rawValue, country);
+			isFieldInvalid = !valid;
+			fieldError = valid ? "" : errorInvalid;
+		}
+		setLocalInvalid(isFieldInvalid);
+		setLocalError(fieldError);
+		onBlur?.();
+	}
+	if (requirement === "hidden") return null;
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		"data-fs-phone-field-root": "",
+		"data-fs-phone-field-root-country": country,
+		className,
+		invalid: effectiveInvalid,
+		disabled: isDisabled,
+		children: [
+			/* @__PURE__ */ jsx(Field.Label, {
+				"data-fs-phone-field-label": "",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				"data-fs-phone-field-input": "",
+				type: "tel",
+				inputMode: "numeric",
+				value: maskedValue,
+				onChange: handleChange,
+				onBlur: handleBlur,
+				placeholder
+			}),
+			effectiveError ? /* @__PURE__ */ jsx(Field.Error, {
+				match: true,
+				"data-fs-phone-field-error": "",
+				children: effectiveError
+			}) : null
+		]
+	});
+}
+//#endregion
+export { PhoneField, PhoneFieldDefinition, applyPhoneMask, removePhoneMask, toE164, validatePhoneNumber };
+
+//# sourceMappingURL=phone-field.js.map

package/dist/particles/phone-field/phone-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-field.js","names":[],"sources":["../../../src/particles/phone-field/phone-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, FocusEvent } from 'react';\nimport { useRef, useState } from 'react';\nimport { Field } from '../field/field.js';\nimport { Input } from '../input/input.js';\n\n// ---------------------------------------------------------------------------\n// Country masks\n// ---------------------------------------------------------------------------\n\n/**\n * Country codes supported by PhoneField.\n * Only US and BR are implemented; every other ISO-2 code falls back to the US\n * format (Gap-06 in the PhoneField spec).\n */\nexport type PhoneCountry = 'US' | 'BR';\n\n/**\n * Returns true when `value` starts with the E.164 or bare country-code prefix\n * for the given country.\n *\n * US country code: 1   → \"+1…\" or \"1…\"\n * BR country code: 55  → \"+55…\" or \"55…\"\n */\nfunction isValidCountryCode(value: string, country: PhoneCountry): boolean {\n  switch (country) {\n    case 'US':\n      return value.startsWith('+1') || value.startsWith('1');\n    case 'BR':\n      return value.startsWith('+55') || value.startsWith('55');\n    default:\n      return false;\n  }\n}\n\n/**\n * Strips phone mask formatting from `value`.\n *\n * When the raw string carries a valid country-code prefix (e.g. \"+55…\"), the\n * returned value preserves the leading \"+\" so callers can detect E.164 intent.\n * Otherwise only digits are returned.\n *\n * `removePhoneMask(applyPhoneMask(raw, country), country) === raw` for all\n * valid raw values that do NOT carry a country-code prefix.\n */\nexport function removePhoneMask(value: string, country: PhoneCountry): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // Only treat as E.164 when the raw string explicitly carries a \"+\" prefix.\n  // A bare digit string that starts with the country-code digits (e.g. \"1234567890\"\n  // starting with \"1\") is a local number, not a country-code-prefixed one.\n  if (value.startsWith('+') && isValidCountryCode(value, country)) {\n    return `+${onlyDigits}`;\n  }\n\n  return onlyDigits;\n}\n\n/**\n * Formats `value` into the mask pattern for `country`, applying as many mask\n * characters as the digit count allows (progressive masking while typing).\n *\n * US:  (123) 456-7890   or   +1 (123) 456-7890\n * BR:  (11) 99999-9999  or   +55 (11) 99999-9999\n *\n * Non-US/BR countries fall back to the US mask.\n */\nexport function applyPhoneMask(value: string, country: PhoneCountry): string {\n  switch (country) {\n    case 'US':\n      return applyUSPhoneMask(value);\n    case 'BR':\n      return applyBRPhoneMask(value);\n    default:\n      return applyUSPhoneMask(value);\n  }\n}\n\nfunction applyUSPhoneMask(value: string): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // E.164 with explicit \"+\" prefix and full country code\n  if (value.startsWith('+1') && onlyDigits.length >= 11) {\n    const local = value.replace('+1', '').replace(/\\D/g, '');\n    return `+1 ${formatUSNumber(local)}`;\n  }\n\n  // Bare country-code prefix (e.g. \"11234567890\")\n  if (onlyDigits.startsWith('1') && onlyDigits.length === 11) {\n    return `+1 ${formatUSNumber(onlyDigits.substring(1))}`;\n  }\n\n  return formatUSNumber(onlyDigits);\n}\n\nfunction formatUSNumber(digits: string): string {\n  // US local numbers cap at 10 digits — drop the overflow instead of growing the mask unbounded.\n  const local = digits.slice(0, 10);\n  if (local.length === 0) return '';\n  if (local.length <= 3) return `(${local}`;\n  if (local.length <= 6) return `(${local.slice(0, 3)}) ${local.slice(3)}`;\n  return `(${local.slice(0, 3)}) ${local.slice(3, 6)}-${local.slice(6)}`;\n}\n\nfunction applyBRPhoneMask(value: string): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // E.164 with explicit \"+55\" prefix. 12 digits is a landline (+55 + 10 local),\n  // 13 is a mobile (+55 + 11 local); both strip the \"55\" country code.\n  if (value.startsWith('+55') && onlyDigits.length >= 12) {\n    const local = value.replace('+55', '').replace(/\\D/g, '');\n    return `+55 ${formatBRNumber(local)}`;\n  }\n\n  // Bare country-code prefix (e.g. \"5511999998888\" mobile, \"551133334444\" landline)\n  if (onlyDigits.startsWith('55') && (onlyDigits.length === 12 || onlyDigits.length === 13)) {\n    return `+55 ${formatBRNumber(onlyDigits.substring(2))}`;\n  }\n\n  return formatBRNumber(onlyDigits);\n}\n\nfunction formatBRNumber(digits: string): string {\n  // BR local numbers cap at 11 digits (mobile) — drop the overflow instead of growing the mask unbounded.\n  const local = digits.slice(0, 11);\n  if (local.length === 0) return '';\n  if (local.length <= 2) return `(${local}`;\n  if (local.length <= 6) return `(${local.slice(0, 2)}) ${local.slice(2)}`;\n  // 7-10 digits: landline format  (XX) XXXX-XXXX\n  if (local.length <= 10) return `(${local.slice(0, 2)}) ${local.slice(2, 6)}-${local.slice(6)}`;\n  // 11 digits: mobile format  (XX) XXXXX-XXXX\n  return `(${local.slice(0, 2)}) ${local.slice(2, 7)}-${local.slice(7)}`;\n}\n\n// ---------------------------------------------------------------------------\n// Validation\n// ---------------------------------------------------------------------------\n\n/**\n * BR local part: 10 digits is a landline; 11 digits is a mobile, which must carry the mandatory\n * ninth digit \"9\" right after the two-digit DDD (the `phone` library rule the spec's Gap-05\n * reimplements — \"11899998888\" is mobile-shaped but not a real BR number).\n */\nfunction isValidBRLocal(digits: string): boolean {\n  if (digits.length === 10) return true;\n  return digits.length === 11 && digits[2] === '9';\n}\n\n/**\n * Validates a raw (unmasked) phone number string for the given country.\n *\n * NOTE: The spec (KD-3) calls for using the `phone` npm library for validation.\n * The library is listed in Gap-05 as a new dependency to add when available.\n * Until that dependency is installed, this implements an equivalent\n * digit-count validation that covers all spec key-scenarios for US and BR.\n * Country-code and non-country-code inputs are both handled.\n *\n * US valid forms:\n *   - 10 digits (local, e.g. \"1234567890\")\n *   - 11 raw digits with country code \"1\" (e.g. \"11234567890\")\n *   - E.164 \"+1\" + 10 digits (e.g. \"+11234567890\")\n *\n * BR valid forms:\n *   - 10 digits (landline, e.g. \"1133334444\")\n *   - 11 digits (mobile, e.g. \"11999998888\"; the ninth digit after the DDD must be \"9\")\n *   - E.164 \"+55\" + 10 or 11 digits (e.g. \"+5511999998888\")\n */\nexport function validatePhoneNumber(input: string, country: PhoneCountry): boolean {\n  if (!input || !input.trim()) return false;\n\n  const digits = input.replace(/\\D/g, '');\n\n  if (isValidCountryCode(input, country)) {\n    // Country-code branch: validate digit count including the country code digits.\n    if (country === 'US') {\n      // \"+1\" or \"1\" prefix + exactly 10 local digits = 11 raw digits\n      if (digits.length === 11) return true;\n      // Fall through: could be a 10-digit local number that starts with \"1\"\n    } else {\n      // BR: \"+55\" or \"55\" prefix + 10 or 11 local digits = 12 or 13 raw digits\n      if (digits.length === 12 || digits.length === 13) return isValidBRLocal(digits.slice(2));\n      // Fall through: could be local digits that happen to start with \"55\"\n    }\n  }\n\n  // Local (no country code) validation\n  if (country === 'US') {\n    return digits.length === 10;\n  }\n\n  return isValidBRLocal(digits);\n}\n\n/**\n * Normalizes a valid raw phone value to E.164 for persistence (legacy checkout parity): the\n * particle emits local digits (\"2015551234\") or a \"+\"-prefixed string; the profile stores\n * \"+12015551234\". Only call this on values `validatePhoneNumber` has already accepted — shared by\n * every binding that persists a phone value (`ClientProfilePhoneControl`, `ClientProfileForm`) so\n * there is exactly one normalization implementation.\n */\nexport function toE164(raw: string, country: PhoneCountry): string {\n  const unmasked = removePhoneMask(raw, country);\n  if (unmasked.startsWith('+')) return unmasked;\n  const code = country === 'BR' ? '55' : '1';\n  const localMax = country === 'BR' ? 11 : 10;\n  // A bare country-code prefix (\"12015551234\", \"5511999998888\") only needs the \"+\".\n  return unmasked.startsWith(code) && unmasked.length > localMax ? `+${unmasked}` : `+${code}${unmasked}`;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype PhoneFieldRequirement = 'mandatory' | 'optional' | 'hidden';\n\nexport type PhoneFieldProps = {\n  /** Controlled raw (unmasked) phone value. */\n  value?: string;\n  /** Uncontrolled initial raw value. */\n  defaultValue?: string;\n  /** Called with the raw (unmasked) value on every change. */\n  onValueChange?: (value: string) => void;\n  /** Selects the phone mask and validation rule. */\n  country?: PhoneCountry;\n  /** Visible field label. */\n  label?: string;\n  /** Disables the field when true. */\n  isDisabled?: boolean;\n  /** Input placeholder text. */\n  placeholder?: string;\n  /**\n   * Externally-controlled invalid state. When provided, overrides the\n   * particle's internal blur-triggered validation result.\n   */\n  invalid?: boolean;\n  /**\n   * Externally-supplied error message. When provided, overrides the\n   * particle's internal error string.\n   */\n  error?: string;\n  /** Error string shown when the input format is invalid. */\n  errorInvalid?: string;\n  /** Error string shown when the mandatory field is left empty. */\n  errorRequired?: string;\n  /**\n   * Controls field visibility and required validation.\n   *\n   * - `'mandatory'` (default): empty input blocks submission.\n   * - `'optional'`: empty input is allowed; format is still checked when a\n   *    value is present.\n   * - `'hidden'`: renders null — no DOM node is emitted.\n   */\n  requirement?: PhoneFieldRequirement;\n  /** Called after the field loses focus (post-validation). */\n  onBlur?: () => void;\n  /** Additional class applied to the root element. */\n  className?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PhoneFieldDefinition = defineComponent<PhoneFieldProps>({\n  name: 'PhoneField',\n  importPath: '@vtex/faststore/components',\n  component: PhoneField,\n  editor: { label: 'Phone Field', category: 'action' },\n  schema: {\n    country: { type: 'string', default: 'US', label: 'Country (US or BR)' },\n    label: { type: 'string', default: 'Phone', label: 'Label' },\n    requirement: { type: 'string', default: 'mandatory', label: 'Requirement' },\n    errorInvalid: { type: 'string', default: 'Invalid phone number', label: 'Invalid error message' },\n    errorRequired: { type: 'string', default: 'Phone number is required', label: 'Required error message' },\n  },\n  guideline:\n    'Locale-aware, business-agnostic phone number input composed from the field + input particles. Applies country masking, validates on blur, and exposes its value via onValueChange. Bind it to a data source (e.g. ClientProfilePhoneControl for checkout) to persist the value.',\n});\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Presentational, business-agnostic phone field. Composes the `field` and `input` particles: the\n * `Field.Root` owns the invalid/disabled state and the `Field.Error match` slot, while the `Input`\n * particle renders the masked `<tel>` control. The particle stays reusable (checkout binding today,\n * MyAccount / extensions later); a binding owns the data source and persistence.\n *\n * US/BR masking, blur validation, and the `data-fs-phone-field*` attributes (plus the country variant\n * attribute) are kept; error strings remain props (a documented i18n divergence — the country tables\n * are internal, the copy is owner-supplied).\n */\nexport function PhoneField({\n  value,\n  defaultValue = '',\n  onValueChange,\n  country = 'US',\n  label = 'Phone',\n  isDisabled = false,\n  placeholder,\n  invalid,\n  error,\n  errorInvalid = 'Invalid phone number',\n  errorRequired = 'Phone number is required',\n  requirement = 'mandatory',\n  onBlur,\n  className,\n}: PhoneFieldProps) {\n  const isControlled = value !== undefined;\n\n  const [internalRaw, setInternalRaw] = useState(defaultValue);\n  const [localInvalid, setLocalInvalid] = useState(false);\n  const [localError, setLocalError] = useState('');\n\n  // Clear local validation state when country changes so the next blur\n  // re-validates against the new country's rules. Done during render\n  // (before paint) to avoid the useEffect trigger-dependency lint warning.\n  const prevCountryRef = useRef(country);\n  if (prevCountryRef.current !== country) {\n    // react-doctor-disable-next-line no-ref-current-in-render -- paired with the setState calls right below, both replay together\n    prevCountryRef.current = country;\n    setLocalInvalid(false);\n    setLocalError('');\n  }\n\n  const rawValue = isControlled ? (value as string) : internalRaw;\n  const maskedValue = applyPhoneMask(rawValue, country);\n\n  // External props take precedence over internal validation state.\n  // When `invalid` is externally controlled, the error display is also fully\n  // controlled: use the explicit `error` prop, or fall back to empty string so\n  // no stale local error leaks through when the parent says the field is valid.\n  const effectiveInvalid = invalid !== undefined ? invalid : localInvalid;\n  const effectiveError = error !== undefined ? error : effectiveInvalid ? localError : '';\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (isDisabled) return;\n    const raw = removePhoneMask(event.target.value, country);\n    if (!isControlled) {\n      setInternalRaw(raw);\n    }\n    onValueChange?.(raw);\n  }\n\n  function handleBlur(_event: FocusEvent<HTMLInputElement>) {\n    if (isDisabled) return;\n\n    let isFieldInvalid = false;\n    let fieldError = '';\n\n    if (requirement === 'mandatory' && !rawValue.trim()) {\n      isFieldInvalid = true;\n      fieldError = errorRequired;\n    } else if (rawValue.trim()) {\n      const valid = validatePhoneNumber(rawValue, country);\n      isFieldInvalid = !valid;\n      fieldError = valid ? '' : errorInvalid;\n    }\n    // optional + empty → no error, keep isFieldInvalid = false / fieldError = ''\n\n    setLocalInvalid(isFieldInvalid);\n    setLocalError(fieldError);\n    onBlur?.();\n  }\n\n  if (requirement === 'hidden') return null;\n\n  return (\n    <Field.Root\n      data-fs-phone-field-root=\"\"\n      data-fs-phone-field-root-country={country}\n      className={className}\n      invalid={effectiveInvalid}\n      disabled={isDisabled}\n    >\n      <Field.Label data-fs-phone-field-label=\"\">{label}</Field.Label>\n      {/* The `input` particle wraps Base UI `Input`, which wires into `Field.Root` out of the box\n          (no `Field.Control` wrapper needed); see the Base UI Field docs. */}\n      <Input\n        data-fs-phone-field-input=\"\"\n        type=\"tel\"\n        inputMode=\"numeric\"\n        value={maskedValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        placeholder={placeholder}\n      />\n      {effectiveError ? (\n        <Field.Error match data-fs-phone-field-error=\"\">\n          {effectiveError}\n        </Field.Error>\n      ) : null}\n    </Field.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/particles/popover/popover.d.ts

@@ -0,0 +1,68 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/particles/popover/popover.d.ts
+export type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+export type PopoverAlign = 'start' | 'center' | 'end';
+export type PopoverRootProps = {
+  defaultOpen?: boolean;
+  modal?: boolean;
+  children?: ReactNode;
+};
+export type PopoverTriggerProps = ComponentPropsWithRef<'button'> & {
+  openOnHover?: boolean;
+  delay?: number;
+  closeDelay?: number;
+};
+export type PopoverPortalProps = {
+  children?: ReactNode;
+};
+export type PopoverBackdropProps = ComponentPropsWithRef<'div'>;
+export type PopoverPositionerProps = ComponentPropsWithRef<'div'> & {
+  side?: PopoverSide;
+  align?: PopoverAlign;
+  sideOffset?: number;
+};
+export type PopoverPopupProps = ComponentPropsWithRef<'div'>;
+export type PopoverArrowProps = ComponentPropsWithRef<'div'>;
+export type PopoverViewportProps = ComponentPropsWithRef<'div'>;
+export type PopoverTitleProps = ComponentPropsWithRef<'h2'>;
+export type PopoverDescriptionProps = ComponentPropsWithRef<'p'>;
+export type PopoverCloseProps = ComponentPropsWithRef<'button'>;
+export declare const PopoverRootDefinition: ComponentDefinition<PopoverRootProps>;
+export declare const PopoverTriggerDefinition: ComponentDefinition<PopoverTriggerProps>;
+export declare const PopoverPortalDefinition: ComponentDefinition<PopoverPortalProps>;
+export declare const PopoverBackdropDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const PopoverPositionerDefinition: ComponentDefinition<PopoverPositionerProps>;
+export declare const PopoverPopupDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const PopoverArrowDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const PopoverViewportDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const PopoverTitleDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const PopoverDescriptionDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+export declare const PopoverCloseDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+export declare function PopoverRoot({ defaultOpen, modal, children }: PopoverRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverTrigger({ openOnHover, delay, closeDelay, className, children, ...props }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverPortal({ children }: PopoverPortalProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverBackdrop({ className, children, ...props }: PopoverBackdropProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverPositioner({ side, align, sideOffset, className, children, ...props }: PopoverPositionerProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverPopup({ className, children, ...props }: PopoverPopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverArrow({ className, children, ...props }: PopoverArrowProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverViewport({ className, children, ...props }: PopoverViewportProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverTitle({ className, children, ...props }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverDescription({ className, children, ...props }: PopoverDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverClose({ className, children, ...props }: PopoverCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const Popover: {
+  Root: typeof PopoverRoot;
+  Trigger: typeof PopoverTrigger;
+  Portal: typeof PopoverPortal;
+  Backdrop: typeof PopoverBackdrop;
+  Positioner: typeof PopoverPositioner;
+  Popup: typeof PopoverPopup;
+  Arrow: typeof PopoverArrow;
+  Viewport: typeof PopoverViewport;
+  Title: typeof PopoverTitle;
+  Description: typeof PopoverDescription;
+  Close: typeof PopoverClose;
+};
+//#endregion
+//# sourceMappingURL=popover.d.ts.map

package/dist/particles/popover/popover.js

@@ -0,0 +1,284 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/particles/popover/popover.tsx
+const PopoverRootDefinition = defineComponent({
+	name: "PopoverRoot",
+	importPath: "@vtex/faststore/components",
+	component: PopoverRoot,
+	editor: {
+		label: "Popover Root",
+		category: "layout"
+	},
+	schema: {
+		defaultOpen: {
+			type: "boolean",
+			default: false,
+			label: "Default Open"
+		},
+		modal: {
+			type: "boolean",
+			default: false,
+			label: "Modal"
+		}
+	},
+	guideline: "Root of an anchored overlay for rich content (forms, product previews). Manages open state and focus trapping. Compose as: PopoverRoot > (PopoverTrigger + PopoverPortal > (PopoverBackdrop + PopoverPositioner > PopoverPopup > (PopoverArrow + PopoverTitle + PopoverDescription + content + PopoverClose))). Set modal=true when content requires focus trap."
+});
+const PopoverTriggerDefinition = defineComponent({
+	name: "PopoverTrigger",
+	importPath: "@vtex/faststore/components",
+	component: PopoverTrigger,
+	editor: {
+		label: "Popover Trigger",
+		category: "action"
+	},
+	schema: {
+		openOnHover: {
+			type: "boolean",
+			default: false,
+			label: "Open On Hover"
+		},
+		delay: {
+			type: "number",
+			default: 300,
+			label: "Delay"
+		},
+		closeDelay: {
+			type: "number",
+			default: 0,
+			label: "Close Delay"
+		}
+	},
+	guideline: "Set openOnHover=true for instant preview panels on product cards or image thumbnails."
+});
+const PopoverPortalDefinition = defineComponent({
+	name: "PopoverPortal",
+	importPath: "@vtex/faststore/components",
+	component: PopoverPortal,
+	editor: {
+		label: "Popover Portal",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Teleports popover content to <body> to avoid overflow/z-index issues."
+});
+const PopoverBackdropDefinition = defineComponent({
+	name: "PopoverBackdrop",
+	importPath: "@vtex/faststore/components",
+	component: PopoverBackdrop,
+	editor: {
+		label: "Popover Backdrop",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Semi-transparent overlay rendered behind the popup when modal=true."
+});
+const PopoverPositionerDefinition = defineComponent({
+	name: "PopoverPositioner",
+	importPath: "@vtex/faststore/components",
+	component: PopoverPositioner,
+	editor: {
+		label: "Popover Positioner",
+		category: "layout"
+	},
+	schema: {
+		side: {
+			type: [
+				"top",
+				"bottom",
+				"left",
+				"right"
+			],
+			default: "bottom",
+			label: "Side"
+		},
+		align: {
+			type: [
+				"start",
+				"center",
+				"end"
+			],
+			default: "center",
+			label: "Align"
+		},
+		sideOffset: {
+			type: "number",
+			default: 0,
+			label: "Side Offset"
+		}
+	},
+	guideline: "Controls popup placement relative to the trigger."
+});
+const PopoverPopupDefinition = defineComponent({
+	name: "PopoverPopup",
+	importPath: "@vtex/faststore/components",
+	component: PopoverPopup,
+	editor: {
+		label: "Popover Popup",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Main popover content container. Always include Popover.Title for screen reader accessibility."
+});
+const PopoverArrowDefinition = defineComponent({
+	name: "PopoverArrow",
+	importPath: "@vtex/faststore/components",
+	component: PopoverArrow,
+	editor: {
+		label: "Popover Arrow",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Pointing arrow attached to the popup. Optional — omit when not using an arrow indicator."
+});
+const PopoverViewportDefinition = defineComponent({
+	name: "PopoverViewport",
+	importPath: "@vtex/faststore/components",
+	component: PopoverViewport,
+	editor: {
+		label: "Popover Viewport",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Viewport wrapper inside Popover.Popup for constraining content display area."
+});
+const PopoverTitleDefinition = defineComponent({
+	name: "PopoverTitle",
+	importPath: "@vtex/faststore/components",
+	component: PopoverTitle,
+	editor: {
+		label: "Popover Title",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Accessible heading inside Popover.Popup. Sets the accessible name of the popover dialog."
+});
+const PopoverDescriptionDefinition = defineComponent({
+	name: "PopoverDescription",
+	importPath: "@vtex/faststore/components",
+	component: PopoverDescription,
+	editor: {
+		label: "Popover Description",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Accessible description of the popover content. Announced by screen readers."
+});
+const PopoverCloseDefinition = defineComponent({
+	name: "PopoverClose",
+	importPath: "@vtex/faststore/components",
+	component: PopoverClose,
+	editor: {
+		label: "Popover Close",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Button that closes the popover. Place inside Popover.Popup."
+});
+function PopoverRoot({ defaultOpen = false, modal = false, children }) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		defaultOpen,
+		modal,
+		children
+	});
+}
+function PopoverTrigger({ openOnHover = false, delay = 300, closeDelay, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		...props,
+		openOnHover,
+		delay,
+		closeDelay,
+		className,
+		"data-fs-popover-trigger": "",
+		children
+	});
+}
+function PopoverPortal({ children }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children });
+}
+function PopoverBackdrop({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Backdrop, {
+		...props,
+		className,
+		"data-fs-popover-backdrop": "",
+		children
+	});
+}
+function PopoverPositioner({ side = "bottom", align = "center", sideOffset = 0, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Positioner, {
+		...props,
+		side,
+		align,
+		sideOffset,
+		className,
+		"data-fs-popover-positioner": "",
+		children
+	});
+}
+function PopoverPopup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Popup, {
+		...props,
+		className,
+		"data-fs-popover-popup": "",
+		children
+	});
+}
+function PopoverArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Arrow, {
+		...props,
+		className,
+		"data-fs-popover-arrow": "",
+		children
+	});
+}
+function PopoverViewport({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Viewport, {
+		...props,
+		className,
+		"data-fs-popover-viewport": "",
+		children
+	});
+}
+function PopoverTitle({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		...props,
+		className,
+		"data-fs-popover-title": "",
+		children
+	});
+}
+function PopoverDescription({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		...props,
+		className,
+		"data-fs-popover-description": "",
+		children
+	});
+}
+function PopoverClose({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		...props,
+		className,
+		"data-fs-popover-close": "",
+		children
+	});
+}
+const Popover$1 = {
+	Root: PopoverRoot,
+	Trigger: PopoverTrigger,
+	Portal: PopoverPortal,
+	Backdrop: PopoverBackdrop,
+	Positioner: PopoverPositioner,
+	Popup: PopoverPopup,
+	Arrow: PopoverArrow,
+	Viewport: PopoverViewport,
+	Title: PopoverTitle,
+	Description: PopoverDescription,
+	Close: PopoverClose
+};
+//#endregion
+export { Popover$1 as Popover, PopoverArrow, PopoverArrowDefinition, PopoverBackdrop, PopoverBackdropDefinition, PopoverClose, PopoverCloseDefinition, PopoverDescription, PopoverDescriptionDefinition, PopoverPopup, PopoverPopupDefinition, PopoverPortal, PopoverPortalDefinition, PopoverPositioner, PopoverPositionerDefinition, PopoverRoot, PopoverRootDefinition, PopoverTitle, PopoverTitleDefinition, PopoverTrigger, PopoverTriggerDefinition, PopoverViewport, PopoverViewportDefinition };
+
+//# sourceMappingURL=popover.js.map