@vtex/faststore 0.0.1

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

@@ -0,0 +1,109 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { Field } from "../field/field.js";
+import { Icon } from "../icon/icon.js";
+import { Input } from "../input/input.js";
+import { Toggle } from "../toggle/toggle.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/password-field/password-field.tsx
+const PasswordFieldDefinition = defineComponent({
+	name: "PasswordField",
+	importPath: "@vtex/faststore/components",
+	component: PasswordField,
+	editor: {
+		label: "Password Field",
+		category: "action"
+	},
+	schema: {
+		label: {
+			type: "string",
+			label: "Label"
+		},
+		placeholder: {
+			type: "string",
+			label: "Placeholder"
+		},
+		requirement: {
+			type: ["mandatory", "optional"],
+			default: "mandatory",
+			label: "Requirement"
+		},
+		autoComplete: {
+			type: ["current-password", "new-password"],
+			default: "current-password",
+			label: "Autocomplete"
+		},
+		showPasswordLabel: {
+			type: "string",
+			default: "Show password",
+			label: "Show password label"
+		},
+		hidePasswordLabel: {
+			type: "string",
+			default: "Hide password",
+			label: "Hide password label"
+		},
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		}
+	},
+	guideline: "Presentational password input with a show/hide reveal toggle. Set autoComplete=\"new-password\" for recovery/set-password screens (default is \"current-password\" for sign-in). No validation beyond presence — invalid/errorMessage are caller-driven. No data layer: does not call login, does not read session."
+});
+/**
+* Composes Field + Input + Toggle + Icon into a password input with a show/hide reveal
+* toggle. Presence-only validation is caller-driven via `invalid`/`errorMessage` — this
+* particle computes no validity of its own. `revealed` is local, uncontrolled UI state.
+*/
+function PasswordField({ value, defaultValue, onValueChange, invalid = false, errorMessage, label, placeholder, requirement = "mandatory", autoComplete = "current-password", showPasswordLabel = "Show password", hidePasswordLabel = "Hide password", disabled = false, name, id, className }) {
+	const [revealed, setRevealed] = useState(false);
+	function handleChange(event) {
+		onValueChange?.(event.target.value);
+	}
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		invalid,
+		disabled,
+		name,
+		className,
+		"data-fs-password-field": "",
+		children: [
+			label ? /* @__PURE__ */ jsx(Field.Label, { children: label }) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"data-fs-password-field-group": "",
+				children: [/* @__PURE__ */ jsx(Input, {
+					id,
+					type: revealed ? "text" : "password",
+					autoComplete,
+					"aria-required": requirement === "mandatory" ? "true" : void 0,
+					spellCheck: false,
+					autoCapitalize: "off",
+					autoCorrect: "off",
+					placeholder,
+					disabled,
+					value,
+					defaultValue: value === void 0 ? defaultValue : void 0,
+					onChange: handleChange
+				}), /* @__PURE__ */ jsx(Toggle, {
+					type: "button",
+					pressed: revealed,
+					onPressedChange: setRevealed,
+					disabled,
+					"aria-label": revealed ? hidePasswordLabel : showPasswordLabel,
+					"data-fs-password-field-toggle": "",
+					children: /* @__PURE__ */ jsx(Icon, { name: revealed ? "eye-off" : "eye" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(Field.Error, {
+				match: invalid ? true : "customError",
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+export { PasswordField, PasswordFieldDefinition };
+
+//# sourceMappingURL=password-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.js","names":[],"sources":["../../../src/particles/password-field/password-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ChangeEvent, useState } from 'react';\nimport { Field } from '../field/field.js';\nimport { Icon } from '../icon/icon.js';\nimport { Input } from '../input/input.js';\nimport { Toggle } from '../toggle/toggle.js';\n\nexport type PasswordFieldRequirement = 'mandatory' | 'optional';\n\nexport type PasswordFieldAutoComplete = 'current-password' | 'new-password';\n\nexport type PasswordFieldProps = {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  invalid?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  requirement?: PasswordFieldRequirement;\n  autoComplete?: PasswordFieldAutoComplete;\n  showPasswordLabel?: string;\n  hidePasswordLabel?: string;\n  disabled?: boolean;\n  name?: string;\n  id?: string;\n  className?: string;\n};\n\nexport const PasswordFieldDefinition = defineComponent<PasswordFieldProps>({\n  name: 'PasswordField',\n  importPath: '@vtex/faststore/components',\n  component: PasswordField,\n  editor: { label: 'Password Field', category: 'action' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    requirement: { type: ['mandatory', 'optional'] as const, default: 'mandatory', label: 'Requirement' },\n    autoComplete: {\n      type: ['current-password', 'new-password'] as const,\n      default: 'current-password',\n      label: 'Autocomplete',\n    },\n    showPasswordLabel: { type: 'string', default: 'Show password', label: 'Show password label' },\n    hidePasswordLabel: { type: 'string', default: 'Hide password', label: 'Hide password label' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Presentational password input with a show/hide reveal toggle. Set autoComplete=\"new-password\" for recovery/set-password screens (default is \"current-password\" for sign-in). No validation beyond presence — invalid/errorMessage are caller-driven. No data layer: does not call login, does not read session.',\n});\n\n/**\n * Composes Field + Input + Toggle + Icon into a password input with a show/hide reveal\n * toggle. Presence-only validation is caller-driven via `invalid`/`errorMessage` — this\n * particle computes no validity of its own. `revealed` is local, uncontrolled UI state.\n */\nexport function PasswordField({\n  value,\n  defaultValue,\n  onValueChange,\n  invalid = false,\n  errorMessage,\n  label,\n  placeholder,\n  requirement = 'mandatory',\n  autoComplete = 'current-password',\n  showPasswordLabel = 'Show password',\n  hidePasswordLabel = 'Hide password',\n  disabled = false,\n  name,\n  id,\n  className,\n}: PasswordFieldProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    onValueChange?.(event.target.value);\n  }\n\n  return (\n    <Field.Root invalid={invalid} disabled={disabled} name={name} className={className} data-fs-password-field=\"\">\n      {label ? <Field.Label>{label}</Field.Label> : null}\n      <div data-fs-password-field-group=\"\">\n        <Input\n          id={id}\n          type={revealed ? 'text' : 'password'}\n          autoComplete={autoComplete}\n          // `aria-required`, not native `required`: `Input` is a Base UI `Field.Control`, and native\n          // constraint tracking would flip `aria-invalid` on its own — validity here is caller-driven.\n          aria-required={requirement === 'mandatory' ? 'true' : undefined}\n          spellCheck={false}\n          autoCapitalize=\"off\"\n          autoCorrect=\"off\"\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          defaultValue={value === undefined ? defaultValue : undefined}\n          onChange={handleChange}\n        />\n        <Toggle\n          type=\"button\"\n          pressed={revealed}\n          onPressedChange={setRevealed}\n          disabled={disabled}\n          aria-label={revealed ? hidePasswordLabel : showPasswordLabel}\n          data-fs-password-field-toggle=\"\"\n        >\n          <Icon name={revealed ? 'eye-off' : 'eye'} />\n        </Toggle>\n      </div>\n      <Field.Error match={invalid ? true : 'customError'}>{errorMessage}</Field.Error>\n    </Field.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;AA8BA,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,aAAa;GAAE,MAAM,CAAC,aAAa,UAAU;GAAY,SAAS;GAAa,OAAO;EAAc;EACpG,cAAc;GACZ,MAAM,CAAC,oBAAoB,cAAc;GACzC,SAAS;GACT,OAAO;EACT;EACA,mBAAmB;GAAE,MAAM;GAAU,SAAS;GAAiB,OAAO;EAAsB;EAC5F,mBAAmB;GAAE,MAAM;GAAU,SAAS;GAAiB,OAAO;EAAsB;EAC5F,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;CACjE;CACA,WACE;AACJ,CAAC;;;;;;AAOD,SAAgB,cAAc,EAC5B,OACA,cACA,eACA,UAAU,OACV,cACA,OACA,aACA,cAAc,aACd,eAAe,oBACf,oBAAoB,iBACpB,oBAAoB,iBACpB,WAAW,OACX,MACA,IACA,aACqB;CACrB,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,SAAS,aAAa,OAAsC;EAC1D,gBAAgB,MAAM,OAAO,KAAK;CACpC;CAEA,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAmB;EAAgB;EAAiB;EAAW,0BAAuB;EAA3G,UAAA;GACG,QAAQ,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA,IAAI;GAC9C,qBAAC,OAAD;IAAK,gCAA6B;IAAlC,UAAA,CACE,oBAAC,OAAD;KACM;KACJ,MAAM,WAAW,SAAS;KACZ;KAGd,iBAAe,gBAAgB,cAAc,SAAS,KAAA;KACtD,YAAY;KACZ,gBAAe;KACf,aAAY;KACC;KACH;KACH;KACP,cAAc,UAAU,KAAA,IAAY,eAAe,KAAA;KACnD,UAAU;IACX,CAAA,GACD,oBAAC,QAAD;KACE,MAAK;KACL,SAAS;KACT,iBAAiB;KACP;KACV,cAAY,WAAW,oBAAoB;KAC3C,iCAA8B;KAE9B,UAAA,oBAAC,MAAD,EAAM,MAAM,WAAW,YAAY,MAAQ,CAAA;IACrC,CAAA,CACL;;GACL,oBAAC,MAAM,OAAP;IAAa,OAAO,UAAU,OAAO;IAAgB,UAAA;GAA0B,CAAA;EACrE;;AAEhB"}

package/dist/particles/payment-methods/payment-methods.d.ts

@@ -0,0 +1,72 @@
+import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/particles/payment-methods/payment-methods.d.ts
+export declare const PaymentMethodsContent: {
+  readonly id: "payment-methods";
+  readonly title: "Payment Methods";
+  readonly description: "Accepted payment methods shown as a strip of icons.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly heading: {
+        readonly type: "string";
+        readonly title: "Heading";
+      };
+      readonly methods: {
+        readonly type: "array";
+        readonly title: "Payment methods";
+        readonly minItems: 1;
+        readonly items: {
+          readonly type: "object";
+          readonly additionalProperties: false;
+          readonly required: readonly ["label"];
+          readonly properties: {
+            readonly method: {
+              readonly type: "string";
+              readonly enum: readonly ["visa", "amex", "apple-pay", "elo-card", "diners", "google-pay", "mastercard", "paypal", "pix", "stripe"];
+              readonly title: "Method";
+            };
+            readonly label: {
+              readonly type: "string";
+              readonly minLength: 1;
+              readonly title: "Label";
+            };
+            readonly iconUrl: {
+              readonly type: "string";
+              readonly format: "uri";
+              readonly title: "Custom icon";
+              readonly widget: {
+                readonly 'ui:widget': "media-gallery";
+              };
+            };
+          };
+        };
+      };
+    };
+  };
+};
+/**
+ * The payment glyphs the base icon dialect carries, and so the only names `method` admits. Exported
+ * because a store's `global.json` has to list them under `icons.include` for a CMS-chosen name to
+ * resolve at runtime — one import there instead of ten retyped strings. Reading it off the model
+ * rather than declaring it beside one makes the two impossible to drift apart.
+ */
+export declare const PAYMENT_METHOD_NAMES: readonly ["visa", "amex", "apple-pay", "elo-card", "diners", "google-pay", "mastercard", "paypal", "pix", "stripe"];
+type PaymentMethodsContentValue = ContentValue<typeof PaymentMethodsContent>;
+/** One row of the strip. Derived from the model so the prop and content channels cannot drift. */
+export type PaymentMethodItem = NonNullable<PaymentMethodsContentValue['methods']>[number];
+export type PaymentMethodsProps = ComponentPropsWithRef<'div'> & {
+  /** Authored fallback for the section heading, used when no CMS entry supplies one. */
+  heading?: string;
+  /** Authored fallback for the accepted set, used when no CMS entry supplies one. */
+  methods?: readonly PaymentMethodItem[];
+  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */
+  $content?: PaymentMethodsContentValue;
+};
+export declare const PaymentMethodsDefinition: ComponentDefinition<PaymentMethodsProps>;
+export declare function PaymentMethods({ heading, methods, $content, className, ...props }: PaymentMethodsProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=payment-methods.d.ts.map

package/dist/particles/payment-methods/payment-methods.js

@@ -0,0 +1,151 @@
+import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
+import "../../core/dist/index.js";
+import { Icon } from "../icon/icon.js";
+import { Image } from "../image/image.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/payment-methods/payment-methods.tsx
+const PaymentMethodsContent = defineContentType({
+	id: "payment-methods",
+	title: "Payment Methods",
+	description: "Accepted payment methods shown as a strip of icons.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			heading: {
+				type: "string",
+				title: "Heading"
+			},
+			methods: {
+				type: "array",
+				title: "Payment methods",
+				minItems: 1,
+				items: {
+					type: "object",
+					additionalProperties: false,
+					required: ["label"],
+					properties: {
+						method: {
+							type: "string",
+							enum: [
+								"visa",
+								"amex",
+								"apple-pay",
+								"elo-card",
+								"diners",
+								"google-pay",
+								"mastercard",
+								"paypal",
+								"pix",
+								"stripe"
+							],
+							title: "Method"
+						},
+						label: {
+							type: "string",
+							minLength: 1,
+							title: "Label"
+						},
+						iconUrl: {
+							type: "string",
+							format: "uri",
+							title: "Custom icon",
+							widget: { "ui:widget": "media-gallery" }
+						}
+					}
+				}
+			}
+		}
+	}
+});
+/**
+* The payment glyphs the base icon dialect carries, and so the only names `method` admits. Exported
+* because a store's `global.json` has to list them under `icons.include` for a CMS-chosen name to
+* resolve at runtime — one import there instead of ten retyped strings. Reading it off the model
+* rather than declaring it beside one makes the two impossible to drift apart.
+*/
+const PAYMENT_METHOD_NAMES = PaymentMethodsContent.schema.properties.methods.items.properties.method.enum;
+const PaymentMethodsDefinition = defineComponent({
+	name: "PaymentMethods",
+	importPath: "@vtex/faststore/components",
+	component: PaymentMethods,
+	content: PaymentMethodsContent,
+	editor: {
+		label: "Payment Methods",
+		category: "content"
+	},
+	schema: {
+		heading: {
+			type: "string",
+			label: "Heading"
+		},
+		methods: {
+			type: "array",
+			label: "Payment methods"
+		}
+	},
+	guideline: "The store's accepted payment methods as a strip of flags, both the heading and the list CMS-editable. Not PricingPaymentMethodsList, which renders a product's installment plans from commerce data. Every predefined method name must be listed in the store's icons.include. See payment-methods.md."
+});
+/**
+* Drops every item that cannot render both a glyph and an accessible name. Neither read-time gate
+* enforces `minLength`, so a blank label reaches the component, and `method` is optional so that
+* Boleto can arrive through `iconUrl` — which leaves an item carrying neither, also legal and also
+* unrenderable. An icon with no name is the one thing F5 must not ship.
+*/
+function resolveMethods(methods) {
+	const resolved = [];
+	for (const item of methods) {
+		if (!item.label.trim()) continue;
+		if (item.iconUrl?.trim()) resolved.push({
+			label: item.label,
+			method: item.method,
+			src: item.iconUrl
+		});
+		else if (item.method) resolved.push({
+			label: item.label,
+			method: item.method
+		});
+	}
+	return resolved;
+}
+function PaymentMethods({ heading, methods, $content, className, ...props }) {
+	const sectionHeading = $content?.heading ?? heading;
+	const resolved = resolveMethods($content?.methods ?? methods ?? []);
+	if (resolved.length === 0) return null;
+	const named = Boolean(sectionHeading?.trim());
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-payment-methods": "",
+		children: [named ? /* @__PURE__ */ jsx("h3", {
+			"data-fs-text": "",
+			"data-fs-payment-methods-heading": "",
+			children: sectionHeading
+		}) : null, /* @__PURE__ */ jsx("ul", {
+			role: "list",
+			"data-fs-payment-methods-list": "",
+			"aria-label": named ? sectionHeading : void 0,
+			children: resolved.map((item, index) => /* @__PURE__ */ jsx("li", {
+				"data-fs-payment-method": "",
+				"data-fs-payment-method-name": item.method,
+				children: item.src === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+					name: item.method,
+					"data-fs-payment-method-icon": ""
+				}), /* @__PURE__ */ jsx("span", {
+					"data-fs-sr-only": "",
+					className: "sr-only",
+					children: item.label
+				})] }) : /* @__PURE__ */ jsx(Image, {
+					src: item.src,
+					alt: item.label,
+					"data-fs-payment-method-icon": ""
+				})
+			}, index))
+		})]
+	});
+}
+//#endregion
+export { PAYMENT_METHOD_NAMES, PaymentMethods, PaymentMethodsContent, PaymentMethodsDefinition };
+
+//# sourceMappingURL=payment-methods.js.map

package/dist/particles/payment-methods/payment-methods.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-methods.js","names":[],"sources":["../../../src/particles/payment-methods/payment-methods.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { Icon } from '../icon/icon.js';\nimport { Image } from '../image/image.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const PaymentMethodsContent = defineContentType({\n  id: 'payment-methods',\n  title: 'Payment Methods',\n  description: 'Accepted payment methods shown as a strip of icons.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // Neither property is required. A missing element key already omits the component before any\n    // required check runs, so requiring them would buy nothing and cost the prop fallback: an entry\n    // authoring one field alone would be shape-invalid and take the whole element down with it.\n    properties: {\n      heading: { type: 'string', title: 'Heading' },\n      methods: {\n        type: 'array',\n        title: 'Payment methods',\n        // Author-time guidance only: no read-time gate enforces item bounds, so its one consumer is\n        // the Content Platform Admin's form. An empty list still reaches the component, which\n        // self-hides on it. No ceiling — a merchant lists every method they accept.\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label'],\n          properties: {\n            // Inline rather than a named constant: the catalog scanner reads this file statically\n            // and rejects an identifier it cannot evaluate. `PAYMENT_METHOD_NAMES` derives from here.\n            method: {\n              type: 'string',\n              enum: [\n                'visa',\n                'amex',\n                'apple-pay',\n                'elo-card',\n                'diners',\n                'google-pay',\n                'mastercard',\n                'paypal',\n                'pix',\n                'stripe',\n              ],\n              title: 'Method',\n            },\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            iconUrl: {\n              type: 'string',\n              format: 'uri',\n              title: 'Custom icon',\n              widget: { 'ui:widget': 'media-gallery' },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\n/**\n * The payment glyphs the base icon dialect carries, and so the only names `method` admits. Exported\n * because a store's `global.json` has to list them under `icons.include` for a CMS-chosen name to\n * resolve at runtime — one import there instead of ten retyped strings. Reading it off the model\n * rather than declaring it beside one makes the two impossible to drift apart.\n */\nexport const PAYMENT_METHOD_NAMES = PaymentMethodsContent.schema.properties.methods.items.properties.method.enum;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype PaymentMethodsContentValue = ContentValue<typeof PaymentMethodsContent>;\n\n/** One row of the strip. Derived from the model so the prop and content channels cannot drift. */\nexport type PaymentMethodItem = NonNullable<PaymentMethodsContentValue['methods']>[number];\n\ntype PaymentMethodName = NonNullable<PaymentMethodItem['method']>;\n\nexport type PaymentMethodsProps = ComponentPropsWithRef<'div'> & {\n  /** Authored fallback for the section heading, used when no CMS entry supplies one. */\n  heading?: string;\n  /** Authored fallback for the accepted set, used when no CMS entry supplies one. */\n  methods?: readonly PaymentMethodItem[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: PaymentMethodsContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PaymentMethodsDefinition = defineComponent({\n  name: 'PaymentMethods',\n  importPath: '@vtex/faststore/components',\n  component: PaymentMethods,\n  content: PaymentMethodsContent,\n  editor: { label: 'Payment Methods', category: 'content' },\n  schema: {\n    heading: { type: 'string', label: 'Heading' },\n    methods: { type: 'array', label: 'Payment methods' },\n  },\n  guideline:\n    \"The store's accepted payment methods as a strip of flags, both the heading and the list CMS-editable. Not PricingPaymentMethodsList, which renders a product's installment plans from commerce data. Every predefined method name must be listed in the store's icons.include. See payment-methods.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * A method that can render: a non-blank label plus exactly one glyph source. The two members are\n * what the union encodes — an upload names itself through `alt`, while a sprite glyph is decorative\n * and needs the label alongside it.\n */\ntype ResolvedMethod =\n  | { label: string; method: PaymentMethodName; src?: undefined }\n  | { label: string; method?: PaymentMethodName; src: string };\n\n/**\n * Drops every item that cannot render both a glyph and an accessible name. Neither read-time gate\n * enforces `minLength`, so a blank label reaches the component, and `method` is optional so that\n * Boleto can arrive through `iconUrl` — which leaves an item carrying neither, also legal and also\n * unrenderable. An icon with no name is the one thing F5 must not ship.\n */\nfunction resolveMethods(methods: readonly PaymentMethodItem[]): ResolvedMethod[] {\n  const resolved: ResolvedMethod[] = [];\n\n  for (const item of methods) {\n    if (!item.label.trim()) continue;\n\n    if (item.iconUrl?.trim()) {\n      resolved.push({ label: item.label, method: item.method, src: item.iconUrl });\n    } else if (item.method) {\n      resolved.push({ label: item.label, method: item.method });\n    }\n  }\n\n  return resolved;\n}\n\nexport function PaymentMethods({ heading, methods, $content, className, ...props }: PaymentMethodsProps) {\n  const sectionHeading = $content?.heading ?? heading;\n  const resolved = resolveMethods($content?.methods ?? methods ?? []);\n\n  if (resolved.length === 0) return null;\n\n  // A blank heading is unconfigured, not an empty value: no element and no group name, rather than\n  // an empty one. Trim to decide, never to render.\n  const named = Boolean(sectionHeading?.trim());\n\n  return (\n    <div {...props} className={className} data-fs-payment-methods=\"\">\n      {named ? (\n        <h3 data-fs-text=\"\" data-fs-payment-methods-heading=\"\">\n          {sectionHeading}\n        </h3>\n      ) : null}\n      {/* biome-ignore lint/a11y/noRedundantRoles: WebKit drops the implicit list role from a ul whose\n          computed `list-style` is `none` — exactly what this component's swatch sets — so the explicit\n          role is what holds the semantics the named list was chosen for. */}\n      <ul role=\"list\" data-fs-payment-methods-list=\"\" aria-label={named ? sectionHeading : undefined}>\n        {resolved.map((item, index) => (\n          <li key={index} data-fs-payment-method=\"\" data-fs-payment-method-name={item.method}>\n            {item.src === undefined ? (\n              <>\n                <Icon name={item.method} data-fs-payment-method-icon=\"\" />\n                <span data-fs-sr-only=\"\" className=\"sr-only\">\n                  {item.label}\n                </span>\n              </>\n            ) : (\n              <Image src={item.src} alt={item.label} data-fs-payment-method-icon=\"\" />\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AASA,MAAa,wBAAwB,kBAAkB;CACrD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EAItB,YAAY;GACV,SAAS;IAAE,MAAM;IAAU,OAAO;GAAU;GAC5C,SAAS;IACP,MAAM;IACN,OAAO;IAIP,UAAU;IACV,OAAO;KACL,MAAM;KACN,sBAAsB;KACtB,UAAU,CAAC,OAAO;KAClB,YAAY;MAGV,QAAQ;OACN,MAAM;OACN,MAAM;QACJ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;OACF;OACA,OAAO;MACT;MACA,OAAO;OAAE,MAAM;OAAU,WAAW;OAAG,OAAO;MAAQ;MACtD,SAAS;OACP,MAAM;OACN,QAAQ;OACR,OAAO;OACP,QAAQ,EAAE,aAAa,gBAAgB;MACzC;KACF;IACF;GACF;EACF;CACF;AACF,CAAC;;;;;;;AAQD,MAAa,uBAAuB,sBAAsB,OAAO,WAAW,QAAQ,MAAM,WAAW,OAAO;AA0B5G,MAAa,2BAA2B,gBAAgB;CACtD,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAmB,UAAU;CAAU;CACxD,QAAQ;EACN,SAAS;GAAE,MAAM;GAAU,OAAO;EAAU;EAC5C,SAAS;GAAE,MAAM;GAAS,OAAO;EAAkB;CACrD;CACA,WACE;AACJ,CAAC;;;;;;;AAqBD,SAAS,eAAe,SAAyD;CAC/E,MAAM,WAA6B,CAAC;CAEpC,KAAK,MAAM,QAAQ,SAAS;EAC1B,IAAI,CAAC,KAAK,MAAM,KAAK,GAAG;EAExB,IAAI,KAAK,SAAS,KAAK,GACrB,SAAS,KAAK;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;GAAQ,KAAK,KAAK;EAAQ,CAAC;OACtE,IAAI,KAAK,QACd,SAAS,KAAK;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;EAAO,CAAC;CAE5D;CAEA,OAAO;AACT;AAEA,SAAgB,eAAe,EAAE,SAAS,SAAS,UAAU,WAAW,GAAG,SAA8B;CACvG,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,WAAW,eAAe,UAAU,WAAW,WAAW,CAAC,CAAC;CAElE,IAAI,SAAS,WAAW,GAAG,OAAO;CAIlC,MAAM,QAAQ,QAAQ,gBAAgB,KAAK,CAAC;CAE5C,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,2BAAwB;EAA9D,UAAA,CACG,QACC,oBAAC,MAAD;GAAI,gBAAa;GAAG,mCAAgC;GACjD,UAAA;EACC,CAAA,IACF,MAIJ,oBAAC,MAAD;GAAI,MAAK;GAAO,gCAA6B;GAAG,cAAY,QAAQ,iBAAiB,KAAA;GAClF,UAAA,SAAS,KAAK,MAAM,UACnB,oBAAC,MAAD;IAAgB,0BAAuB;IAAG,+BAA6B,KAAK;IACzE,UAAA,KAAK,QAAQ,KAAA,IACZ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;KAAM,MAAM,KAAK;KAAQ,+BAA4B;IAAI,CAAA,GACzD,oBAAC,QAAD;KAAM,mBAAgB;KAAG,WAAU;KAChC,UAAA,KAAK;IACF,CAAA,CACN,EAAA,CAAA,IAEF,oBAAC,OAAD;KAAO,KAAK,KAAK;KAAK,KAAK,KAAK;KAAO,+BAA4B;IAAI,CAAA;GAEvE,GAXK,KAWL,CACL;EACC,CAAA,CACD;;AAET"}

package/dist/particles/phone-field/phone-field.d.ts

@@ -0,0 +1,67 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+//#region src/particles/phone-field/phone-field.d.ts
+/**
+ * Country codes supported by PhoneField.
+ * Only US and BR are implemented; every other ISO-2 code falls back to the US
+ * format (Gap-06 in the PhoneField spec).
+ */
+export type PhoneCountry = 'US' | 'BR';
+type PhoneFieldRequirement = 'mandatory' | 'optional' | 'hidden';
+export type PhoneFieldProps = {
+  /** Controlled raw (unmasked) phone value. */
+  value?: string;
+  /** Uncontrolled initial raw value. */
+  defaultValue?: string;
+  /** Called with the raw (unmasked) value on every change. */
+  onValueChange?: (value: string) => void;
+  /** Selects the phone mask and validation rule. */
+  country?: PhoneCountry;
+  /** Visible field label. */
+  label?: string;
+  /** Disables the field when true. */
+  isDisabled?: boolean;
+  /** Input placeholder text. */
+  placeholder?: string;
+  /**
+   * Externally-controlled invalid state. When provided, overrides the
+   * particle's internal blur-triggered validation result.
+   */
+  invalid?: boolean;
+  /**
+   * Externally-supplied error message. When provided, overrides the
+   * particle's internal error string.
+   */
+  error?: string;
+  /** Error string shown when the input format is invalid. */
+  errorInvalid?: string;
+  /** Error string shown when the mandatory field is left empty. */
+  errorRequired?: string;
+  /**
+   * Controls field visibility and required validation.
+   *
+   * - `'mandatory'` (default): empty input blocks submission.
+   * - `'optional'`: empty input is allowed; format is still checked when a
+   *    value is present.
+   * - `'hidden'`: renders null — no DOM node is emitted.
+   */
+  requirement?: PhoneFieldRequirement;
+  /** Called after the field loses focus (post-validation). */
+  onBlur?: () => void;
+  /** Additional class applied to the root element. */
+  className?: string;
+};
+export declare const PhoneFieldDefinition: ComponentDefinition<PhoneFieldProps>;
+/**
+ * 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).
+ */
+export declare function PhoneField({ value, defaultValue, onValueChange, country, label, isDisabled, placeholder, invalid, error, errorInvalid, errorRequired, requirement, onBlur, className }: PhoneFieldProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=phone-field.d.ts.map