@vtex/faststore 0.0.1

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

@@ -0,0 +1,146 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { Field } from "../field/field.js";
+import { applyMask, countSlots, isDigitOnly } from "../shared/input-mask.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/document-field/document-field.tsx
+/**
+* CPF check-digit validation, ported from the legacy `validateCPF`. Strips non-digits, requires
+* exactly 11 digits, rejects all-equal sequences (e.g. `111.111.111-11`), and verifies both check
+* digits. Runs on blur/submit only, never per keystroke.
+*/
+function validateCPF(value) {
+	const digits = value.replace(/[^\d]+/g, "");
+	if (digits.length !== 11 || /(\d)\1{10}/.test(digits)) return false;
+	const values = digits.split("").map((el) => +el);
+	const rest = (count) => values.slice(0, count - 12).reduce((sum, el, index) => sum + el * (count - index), 0) * 10 % 11 % 10;
+	return rest(10) === values[9] && rest(11) === values[10];
+}
+const DOCUMENTS = { CPF: {
+	id: "CPF",
+	name: "CPF",
+	mask: "999.999.999-99",
+	validate: validateCPF
+} };
+/** True when `type` is a document type this build supports (lets a host gate the field by locale). */
+function isSupportedDocumentType(type) {
+	return typeof type === "string" && type in DOCUMENTS;
+}
+/**
+* Apply a document type's mask to raw input: strip non-digits for digit-only masks, then truncate to
+* the mask's slot count so excess characters never trail past the mask (e.g. a 15-digit paste into
+* the 11-slot CPF mask yields `111.444.777-35`, not `111.444.777-358888`).
+*/
+function maskDocumentValue(rawValue, documentType) {
+	const spec = DOCUMENTS[documentType];
+	const sanitized = isDigitOnly(spec.mask) ? rawValue.replace(/\D/g, "") : rawValue;
+	const maxSlots = Math.max(...spec.mask.split("|").map(countSlots));
+	return applyMask(sanitized.slice(0, maxSlots), spec.mask);
+}
+/**
+* Check-digit validity for a document value. An **empty** value is valid (the field is optional),
+* mirroring the legacy `validateCardholderDocument`; a non-empty value must pass the document
+* type's check-digit validation.
+*/
+function isValidDocument(value, documentType) {
+	if (!value.trim()) return true;
+	return DOCUMENTS[documentType].validate(value);
+}
+const DocumentFieldDefinition = defineComponent({
+	name: "DocumentField",
+	importPath: "@vtex/faststore/components",
+	component: DocumentField,
+	editor: {
+		label: "Document Field",
+		category: "content"
+	},
+	schema: {
+		label: {
+			type: "string",
+			label: "Label"
+		},
+		placeholder: {
+			type: "string",
+			label: "Placeholder"
+		},
+		errorMessage: {
+			type: "string",
+			label: "Error message"
+		},
+		documentType: {
+			type: "string",
+			default: "CPF",
+			label: "Document type"
+		},
+		required: {
+			type: "boolean",
+			default: false,
+			label: "Required"
+		},
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		}
+	},
+	guideline: "Presentational tax-document input composing the Field particle; applies the locale mask on change and runs check-digit validation on blur/submit. Data-agnostic (value/defaultValue/onValueChange); a host wires it to the shopper profile. CPF is optional by default."
+});
+/**
+* Presentational tax-document input (particle). Composes the `Field` particle (`Field.Root` +
+* `Field.Label` + `Field.Control` + `Field.Error`) and owns the locale mask (applied progressively on
+* every change, never blocking typing) plus check-digit validation (run on blur/submit only — never
+* per keystroke). An empty value is valid (the field is optional). It surfaces `errorMessage` inline
+* when the check digit fails or when the host forces `invalid` (e.g. a server error surfaced by the
+* form that owns the write). It consumes no GraphQL and no domain context — value flows through
+* `value`/`defaultValue`/`onValueChange`, and `documentType` selects the mask + validator.
+*/
+function DocumentField({ value, defaultValue = "", onValueChange, onBlur, invalid = false, errorMessage, label, placeholder, disabled = false, required = false, name = "document", documentType = "CPF", className, ...props }) {
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(() => maskDocumentValue(defaultValue, documentType));
+	const [checkInvalid, setCheckInvalid] = useState(false);
+	const currentValue = isControlled ? value : internalValue;
+	const displayValue = maskDocumentValue(currentValue, documentType);
+	const showInvalid = invalid || checkInvalid;
+	const numericOnly = isDigitOnly(DOCUMENTS[documentType].mask);
+	function handleChange(event) {
+		const masked = maskDocumentValue(event.target.value, documentType);
+		if (!isControlled) setInternalValue(masked);
+		if (checkInvalid) setCheckInvalid(false);
+		onValueChange?.(masked);
+	}
+	function handleBlur(event) {
+		setCheckInvalid(!isValidDocument(currentValue, documentType));
+		onBlur?.(event);
+	}
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...props,
+		className,
+		name,
+		invalid: showInvalid,
+		disabled,
+		"data-fs-document-field": "",
+		children: [
+			label ? /* @__PURE__ */ jsx(Field.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Field.Control, {
+				name,
+				required,
+				placeholder,
+				disabled,
+				value: displayValue,
+				...numericOnly ? { inputMode: "numeric" } : {},
+				onChange: handleChange,
+				onBlur: handleBlur
+			}),
+			showInvalid && errorMessage ? /* @__PURE__ */ jsx(Field.Error, {
+				match: true,
+				children: errorMessage
+			}) : null
+		]
+	});
+}
+//#endregion
+export { DOCUMENTS, DocumentField, DocumentFieldDefinition, applyMask, isSupportedDocumentType, isValidDocument, maskDocumentValue, validateCPF };
+
+//# sourceMappingURL=document-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"document-field.js","names":[],"sources":["../../../src/particles/document-field/document-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, ComponentPropsWithRef, FocusEvent } from 'react';\nimport { useState } from 'react';\nimport { Field } from '../field/field.js';\nimport { applyMask, countSlots, isDigitOnly } from '../shared/input-mask.js';\n\n// `applyMask` was public from this module before the engine moved out; keep the export path stable.\nexport { applyMask } from '../shared/input-mask.js';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type DocumentType = 'CPF';\n\nexport type DocumentSpec = {\n  id: DocumentType;\n  name: string;\n  mask: string;\n  validate: (value: string) => boolean;\n};\n\nexport type DocumentFieldProps = Omit<\n  ComponentPropsWithRef<'div'>,\n  'defaultValue' | 'value' | 'onChange' | 'onBlur'\n> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  invalid?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  documentType?: DocumentType;\n};\n\n// ---------------------------------------------------------------------------\n// Ported check-digit validation (fastcheckout `packages/libs/validators/src/document`).\n// ---------------------------------------------------------------------------\n\n/**\n * CPF check-digit validation, ported from the legacy `validateCPF`. Strips non-digits, requires\n * exactly 11 digits, rejects all-equal sequences (e.g. `111.111.111-11`), and verifies both check\n * digits. Runs on blur/submit only, never per keystroke.\n */\nexport function validateCPF(value: string): boolean {\n  const digits = value.replace(/[^\\d]+/g, '');\n\n  if (digits.length !== 11 || /(\\d)\\1{10}/.test(digits)) {\n    return false;\n  }\n\n  const values = digits.split('').map((el) => +el);\n  const rest = (count: number) =>\n    ((values.slice(0, count - 12).reduce((sum, el, index) => sum + el * (count - index), 0) * 10) % 11) % 10;\n\n  return rest(10) === values[9] && rest(11) === values[10];\n}\n\n// ---------------------------------------------------------------------------\n// Document table (subset needed for the CPF launch). `documentType` selects the mask +\n// validator + digit-only input mode. Extendable later (SSN | SIN | CURP) without touching callers.\n// ---------------------------------------------------------------------------\n\nexport const DOCUMENTS: Record<DocumentType, DocumentSpec> = {\n  CPF: {\n    id: 'CPF',\n    name: 'CPF',\n    mask: '999.999.999-99',\n    validate: validateCPF,\n  },\n};\n\n/** True when `type` is a document type this build supports (lets a host gate the field by locale). */\nexport function isSupportedDocumentType(type: unknown): type is DocumentType {\n  return typeof type === 'string' && type in DOCUMENTS;\n}\n\n/**\n * Apply a document type's mask to raw input: strip non-digits for digit-only masks, then truncate to\n * the mask's slot count so excess characters never trail past the mask (e.g. a 15-digit paste into\n * the 11-slot CPF mask yields `111.444.777-35`, not `111.444.777-358888`).\n */\nexport function maskDocumentValue(rawValue: string, documentType: DocumentType): string {\n  const spec = DOCUMENTS[documentType];\n  const sanitized = isDigitOnly(spec.mask) ? rawValue.replace(/\\D/g, '') : rawValue;\n  const maxSlots = Math.max(...spec.mask.split('|').map(countSlots));\n  return applyMask(sanitized.slice(0, maxSlots), spec.mask);\n}\n\n/**\n * Check-digit validity for a document value. An **empty** value is valid (the field is optional),\n * mirroring the legacy `validateCardholderDocument`; a non-empty value must pass the document\n * type's check-digit validation.\n */\nexport function isValidDocument(value: string, documentType: DocumentType): boolean {\n  if (!value.trim()) return true;\n  return DOCUMENTS[documentType].validate(value);\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const DocumentFieldDefinition = defineComponent<DocumentFieldProps>({\n  name: 'DocumentField',\n  importPath: '@vtex/faststore/components',\n  component: DocumentField,\n  editor: { label: 'Document Field', category: 'content' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    errorMessage: { type: 'string', label: 'Error message' },\n    documentType: { type: 'string', default: 'CPF', label: 'Document type' },\n    required: { type: 'boolean', default: false, label: 'Required' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Presentational tax-document input composing the Field particle; applies the locale mask on change and runs check-digit validation on blur/submit. Data-agnostic (value/defaultValue/onValueChange); a host wires it to the shopper profile. CPF is optional by default.',\n});\n\n/**\n * Presentational tax-document input (particle). Composes the `Field` particle (`Field.Root` +\n * `Field.Label` + `Field.Control` + `Field.Error`) and owns the locale mask (applied progressively on\n * every change, never blocking typing) plus check-digit validation (run on blur/submit only — never\n * per keystroke). An empty value is valid (the field is optional). It surfaces `errorMessage` inline\n * when the check digit fails or when the host forces `invalid` (e.g. a server error surfaced by the\n * form that owns the write). It consumes no GraphQL and no domain context — value flows through\n * `value`/`defaultValue`/`onValueChange`, and `documentType` selects the mask + validator.\n */\nexport function DocumentField({\n  value,\n  defaultValue = '',\n  onValueChange,\n  onBlur,\n  invalid = false,\n  errorMessage,\n  label,\n  placeholder,\n  disabled = false,\n  required = false,\n  name = 'document',\n  documentType = 'CPF',\n  className,\n  ...props\n}: DocumentFieldProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(() => maskDocumentValue(defaultValue, documentType));\n  const [checkInvalid, setCheckInvalid] = useState(false);\n\n  const currentValue = isControlled ? value : internalValue;\n  // Masking is idempotent, so masking here formats both a raw pre-fill (a controlled `value` seeded\n  // from the saved profile) and an already-masked typed value identically.\n  const displayValue = maskDocumentValue(currentValue, documentType);\n  const showInvalid = invalid || checkInvalid;\n  const numericOnly = isDigitOnly(DOCUMENTS[documentType].mask);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const masked = maskDocumentValue(event.target.value, documentType);\n    if (!isControlled) setInternalValue(masked);\n    // Clear a prior check-digit error while typing; it is re-evaluated on the next blur.\n    if (checkInvalid) setCheckInvalid(false);\n    onValueChange?.(masked);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    // Validation runs only after the complete number is entered; empty is valid (optional field).\n    setCheckInvalid(!isValidDocument(currentValue, documentType));\n    onBlur?.(event);\n  }\n\n  return (\n    <Field.Root\n      {...props}\n      className={className}\n      name={name}\n      invalid={showInvalid}\n      disabled={disabled}\n      data-fs-document-field=\"\"\n    >\n      {label ? <Field.Label>{label}</Field.Label> : null}\n      <Field.Control\n        name={name}\n        required={required}\n        placeholder={placeholder}\n        disabled={disabled}\n        value={displayValue}\n        {...(numericOnly ? { inputMode: 'numeric' as const } : {})}\n        onChange={handleChange}\n        onBlur={handleBlur}\n      />\n      {showInvalid && errorMessage ? <Field.Error match>{errorMessage}</Field.Error> : null}\n    </Field.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/particles/drawer/drawer.d.ts

@@ -0,0 +1,52 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/particles/drawer/drawer.d.ts
+export type DrawerSwipeDirection = 'up' | 'down' | 'left' | 'right';
+export type DrawerRootProps = {
+  swipeDirection?: DrawerSwipeDirection;
+  modal?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: {
+    isCanceled: boolean;
+  }) => void;
+  children?: ReactNode;
+};
+export type DrawerTriggerProps = ComponentPropsWithRef<'button'>;
+export type DrawerPortalProps = {
+  children?: ReactNode;
+};
+export type DrawerBackdropProps = ComponentPropsWithRef<'div'>;
+export type DrawerPopupProps = ComponentPropsWithRef<'div'>;
+export type DrawerTitleProps = ComponentPropsWithRef<'h2'>;
+export type DrawerDescriptionProps = ComponentPropsWithRef<'p'>;
+export type DrawerCloseProps = ComponentPropsWithRef<'button'>;
+export declare const DrawerRootDefinition: ComponentDefinition<DrawerRootProps>;
+export declare const DrawerTriggerDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+export declare const DrawerPortalDefinition: ComponentDefinition<DrawerPortalProps>;
+export declare const DrawerBackdropDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DrawerPopupDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DrawerTitleDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const DrawerDescriptionDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+export declare const DrawerCloseDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+export declare function DrawerRoot({ swipeDirection, modal, children, ...props }: DrawerRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerTrigger({ className, children, ...props }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerPortal({ children }: DrawerPortalProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerBackdrop({ className, children, ...props }: DrawerBackdropProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerPopup({ className, children, ...props }: DrawerPopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerTitle({ className, children, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerDescription({ className, children, ...props }: DrawerDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerClose({ className, children, ...props }: DrawerCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: {
+  Root: typeof DrawerRoot;
+  Trigger: typeof DrawerTrigger;
+  Portal: typeof DrawerPortal;
+  Backdrop: typeof DrawerBackdrop;
+  Popup: typeof DrawerPopup;
+  Title: typeof DrawerTitle;
+  Description: typeof DrawerDescription;
+  Close: typeof DrawerClose;
+};
+//#endregion
+//# sourceMappingURL=drawer.d.ts.map

package/dist/particles/drawer/drawer.js

@@ -0,0 +1,183 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/particles/drawer/drawer.tsx
+const DrawerRootDefinition = defineComponent({
+	name: "DrawerRoot",
+	importPath: "@vtex/faststore/components",
+	component: DrawerRoot,
+	editor: {
+		label: "Drawer Root",
+		category: "layout"
+	},
+	schema: {
+		swipeDirection: {
+			type: [
+				"up",
+				"down",
+				"left",
+				"right"
+			],
+			default: "right",
+			label: "Swipe Direction"
+		},
+		modal: {
+			type: "boolean",
+			default: true,
+			label: "Modal"
+		}
+	},
+	guideline: "Root of a drawer side panel. When modal (the default) it delivers the full overlay contract: focus trapping inside the popup, body scroll lock on the page behind it, Escape-to-close, and backdrop-click dismissal — all inherited from Base UI, none re-implemented in the layout. Compose as: DrawerRoot > (DrawerTrigger + DrawerPortal > (DrawerBackdrop + DrawerPopup > (DrawerTitle + DrawerDescription + content + DrawerClose))). Set swipeDirection to control the slide edge (right for cart/filters, bottom for mobile menus); modal=false only when the drawer must coexist with page interactions (drops focus trap and scroll lock)."
+});
+const DrawerTriggerDefinition = defineComponent({
+	name: "DrawerTrigger",
+	importPath: "@vtex/faststore/components",
+	component: DrawerTrigger,
+	editor: {
+		label: "Drawer Trigger",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Button that opens the Drawer. Place inside or outside Drawer.Root — Base UI connects them via context."
+});
+const DrawerPortalDefinition = defineComponent({
+	name: "DrawerPortal",
+	importPath: "@vtex/faststore/components",
+	component: DrawerPortal,
+	editor: {
+		label: "Drawer Portal",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Portal wrapper that renders Drawer.Backdrop and Drawer.Popup outside the DOM tree. Always wrap both inside Drawer.Portal."
+});
+const DrawerBackdropDefinition = defineComponent({
+	name: "DrawerBackdrop",
+	importPath: "@vtex/faststore/components",
+	component: DrawerBackdrop,
+	editor: {
+		label: "Drawer Backdrop",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Semi-transparent overlay rendered behind the popup. Clicking it dismisses the drawer unless disablePointerDismissal is set on Drawer.Root."
+});
+const DrawerPopupDefinition = defineComponent({
+	name: "DrawerPopup",
+	importPath: "@vtex/faststore/components",
+	component: DrawerPopup,
+	editor: {
+		label: "Drawer Popup",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Main drawer panel. Animation and positioning are controlled by swipeDirection on Drawer.Root. Contains Drawer.Title, content, and Drawer.Close."
+});
+const DrawerTitleDefinition = defineComponent({
+	name: "DrawerTitle",
+	importPath: "@vtex/faststore/components",
+	component: DrawerTitle,
+	editor: {
+		label: "Drawer Title",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Semantic heading inside Drawer.Popup. Required for screen reader accessibility — sets the accessible name of the dialog."
+});
+const DrawerDescriptionDefinition = defineComponent({
+	name: "DrawerDescription",
+	importPath: "@vtex/faststore/components",
+	component: DrawerDescription,
+	editor: {
+		label: "Drawer Description",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Accessible description of the drawer. Optional but recommended for screen readers."
+});
+const DrawerCloseDefinition = defineComponent({
+	name: "DrawerClose",
+	importPath: "@vtex/faststore/components",
+	component: DrawerClose,
+	editor: {
+		label: "Drawer Close",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Button that closes the drawer. Place at the top of Drawer.Popup. Receives ARIA label management automatically from Base UI."
+});
+function DrawerRoot({ swipeDirection = "right", modal = true, children, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Root, {
+		...props,
+		swipeDirection,
+		modal,
+		children
+	});
+}
+function DrawerTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		...props,
+		className,
+		"data-fs-drawer-trigger": "",
+		children
+	});
+}
+function DrawerPortal({ children }) {
+	return /* @__PURE__ */ jsx(Drawer.Portal, { children });
+}
+function DrawerBackdrop({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		...props,
+		className,
+		"data-fs-drawer-backdrop": "",
+		children
+	});
+}
+function DrawerPopup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Popup, {
+		...props,
+		className,
+		"data-fs-drawer-popup": "",
+		children
+	});
+}
+function DrawerTitle({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		...props,
+		className,
+		"data-fs-drawer-title": "",
+		children
+	});
+}
+function DrawerDescription({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		...props,
+		className,
+		"data-fs-drawer-description": "",
+		children
+	});
+}
+function DrawerClose({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		...props,
+		className,
+		"data-fs-drawer-close": "",
+		children
+	});
+}
+const Drawer$1 = {
+	Root: DrawerRoot,
+	Trigger: DrawerTrigger,
+	Portal: DrawerPortal,
+	Backdrop: DrawerBackdrop,
+	Popup: DrawerPopup,
+	Title: DrawerTitle,
+	Description: DrawerDescription,
+	Close: DrawerClose
+};
+//#endregion
+export { Drawer$1 as Drawer, DrawerBackdrop, DrawerBackdropDefinition, DrawerClose, DrawerCloseDefinition, DrawerDescription, DrawerDescriptionDefinition, DrawerPopup, DrawerPopupDefinition, DrawerPortal, DrawerPortalDefinition, DrawerRoot, DrawerRootDefinition, DrawerTitle, DrawerTitleDefinition, DrawerTrigger, DrawerTriggerDefinition };
+
+//# sourceMappingURL=drawer.js.map

package/dist/particles/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":["BaseDrawer","Drawer"],"sources":["../../../src/particles/drawer/drawer.tsx"],"sourcesContent":["'use client';\nimport { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type DrawerSwipeDirection = 'up' | 'down' | 'left' | 'right';\n\nexport type DrawerRootProps = {\n  swipeDirection?: DrawerSwipeDirection;\n  modal?: boolean;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n};\n\nexport type DrawerTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type DrawerPortalProps = {\n  children?: ReactNode;\n};\n\nexport type DrawerBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type DrawerPopupProps = ComponentPropsWithRef<'div'>;\n\nexport type DrawerTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type DrawerDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type DrawerCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const DrawerRootDefinition = defineComponent<DrawerRootProps>({\n  name: 'DrawerRoot',\n  importPath: '@vtex/faststore/components',\n  component: DrawerRoot,\n  editor: { label: 'Drawer Root', category: 'layout' },\n  schema: {\n    swipeDirection: { type: ['up', 'down', 'left', 'right'] as const, default: 'right', label: 'Swipe Direction' },\n    modal: { type: 'boolean', default: true, label: 'Modal' },\n  },\n  guideline:\n    'Root of a drawer side panel. When modal (the default) it delivers the full overlay contract: focus trapping inside the popup, body scroll lock on the page behind it, Escape-to-close, and backdrop-click dismissal — all inherited from Base UI, none re-implemented in the layout. Compose as: DrawerRoot > (DrawerTrigger + DrawerPortal > (DrawerBackdrop + DrawerPopup > (DrawerTitle + DrawerDescription + content + DrawerClose))). Set swipeDirection to control the slide edge (right for cart/filters, bottom for mobile menus); modal=false only when the drawer must coexist with page interactions (drops focus trap and scroll lock).',\n});\n\nexport const DrawerTriggerDefinition = defineComponent<DrawerTriggerProps>({\n  name: 'DrawerTrigger',\n  importPath: '@vtex/faststore/components',\n  component: DrawerTrigger,\n  editor: { label: 'Drawer Trigger', category: 'action' },\n  schema: {},\n  guideline: 'Button that opens the Drawer. Place inside or outside Drawer.Root — Base UI connects them via context.',\n});\n\nexport const DrawerPortalDefinition = defineComponent<DrawerPortalProps>({\n  name: 'DrawerPortal',\n  importPath: '@vtex/faststore/components',\n  component: DrawerPortal,\n  editor: { label: 'Drawer Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Portal wrapper that renders Drawer.Backdrop and Drawer.Popup outside the DOM tree. Always wrap both inside Drawer.Portal.',\n});\n\nexport const DrawerBackdropDefinition = defineComponent<DrawerBackdropProps>({\n  name: 'DrawerBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: DrawerBackdrop,\n  editor: { label: 'Drawer Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay rendered behind the popup. Clicking it dismisses the drawer unless disablePointerDismissal is set on Drawer.Root.',\n});\n\nexport const DrawerPopupDefinition = defineComponent<DrawerPopupProps>({\n  name: 'DrawerPopup',\n  importPath: '@vtex/faststore/components',\n  component: DrawerPopup,\n  editor: { label: 'Drawer Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'Main drawer panel. Animation and positioning are controlled by swipeDirection on Drawer.Root. Contains Drawer.Title, content, and Drawer.Close.',\n});\n\nexport const DrawerTitleDefinition = defineComponent<DrawerTitleProps>({\n  name: 'DrawerTitle',\n  importPath: '@vtex/faststore/components',\n  component: DrawerTitle,\n  editor: { label: 'Drawer Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semantic heading inside Drawer.Popup. Required for screen reader accessibility — sets the accessible name of the dialog.',\n});\n\nexport const DrawerDescriptionDefinition = defineComponent<DrawerDescriptionProps>({\n  name: 'DrawerDescription',\n  importPath: '@vtex/faststore/components',\n  component: DrawerDescription,\n  editor: { label: 'Drawer Description', category: 'layout' },\n  schema: {},\n  guideline: 'Accessible description of the drawer. Optional but recommended for screen readers.',\n});\n\nexport const DrawerCloseDefinition = defineComponent<DrawerCloseProps>({\n  name: 'DrawerClose',\n  importPath: '@vtex/faststore/components',\n  component: DrawerClose,\n  editor: { label: 'Drawer Close', category: 'action' },\n  schema: {},\n  guideline:\n    'Button that closes the drawer. Place at the top of Drawer.Popup. Receives ARIA label management automatically from Base UI.',\n});\n\nexport function DrawerRoot({ swipeDirection = 'right', modal = true, children, ...props }: DrawerRootProps) {\n  return (\n    <BaseDrawer.Root {...props} swipeDirection={swipeDirection} modal={modal}>\n      {children}\n    </BaseDrawer.Root>\n  );\n}\n\nexport function DrawerTrigger({ className, children, ...props }: DrawerTriggerProps) {\n  return (\n    <BaseDrawer.Trigger {...props} className={className} data-fs-drawer-trigger=\"\">\n      {children}\n    </BaseDrawer.Trigger>\n  );\n}\n\nexport function DrawerPortal({ children }: DrawerPortalProps) {\n  return <BaseDrawer.Portal>{children}</BaseDrawer.Portal>;\n}\n\nexport function DrawerBackdrop({ className, children, ...props }: DrawerBackdropProps) {\n  return (\n    <BaseDrawer.Backdrop {...props} className={className} data-fs-drawer-backdrop=\"\">\n      {children}\n    </BaseDrawer.Backdrop>\n  );\n}\n\nexport function DrawerPopup({ className, children, ...props }: DrawerPopupProps) {\n  return (\n    <BaseDrawer.Popup {...props} className={className} data-fs-drawer-popup=\"\">\n      {children}\n    </BaseDrawer.Popup>\n  );\n}\n\nexport function DrawerTitle({ className, children, ...props }: DrawerTitleProps) {\n  return (\n    <BaseDrawer.Title {...props} className={className} data-fs-drawer-title=\"\">\n      {children}\n    </BaseDrawer.Title>\n  );\n}\n\nexport function DrawerDescription({ className, children, ...props }: DrawerDescriptionProps) {\n  return (\n    <BaseDrawer.Description {...props} className={className} data-fs-drawer-description=\"\">\n      {children}\n    </BaseDrawer.Description>\n  );\n}\n\nexport function DrawerClose({ className, children, ...props }: DrawerCloseProps) {\n  return (\n    <BaseDrawer.Close {...props} className={className} data-fs-drawer-close=\"\">\n      {children}\n    </BaseDrawer.Close>\n  );\n}\n\nexport const Drawer = {\n  Root: DrawerRoot,\n  Trigger: DrawerTrigger,\n  Portal: DrawerPortal,\n  Backdrop: DrawerBackdrop,\n  Popup: DrawerPopup,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Close: DrawerClose,\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, FocusEvent } from "react";
+//#region src/particles/email-field/email-field.d.ts
+export type EmailFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'value' | 'onChange' | 'onBlur'> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  invalid?: boolean;
+  errorMessage?: string;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+};
+/**
+ * Email format rule, ported from the legacy `EMAIL_VALIDATE_REGEX` (fastcheckout `validations.ts`).
+ * The exact legacy source was unavailable at authoring time, so this uses the WHATWG/HTML5 email-input
+ * pattern — the same rule the browser applies to `<input type="email">`. Format validation runs on
+ * blur/submit only, never per keystroke (Invariants & Constraints).
+ */
+export declare const EMAIL_VALIDATE_REGEX: RegExp;
+/** True when `value` is a well-formed email address. Trims surrounding whitespace before testing. */
+export declare function isValidEmail(value: string): boolean;
+export declare const EmailFieldDefinition: ComponentDefinition<EmailFieldProps>;
+/**
+ * Presentational email input (particle). Composes the `Field` particle (`Field.Root` + `Field.Label` +
+ * `Field.Control` + `Field.Error`) and owns email **format** validation: it validates on blur/submit
+ * (never per keystroke) and surfaces `errorMessage` inline when the format is invalid or when the host
+ * forces `invalid` (e.g. a server-side error from `EmailIdentificationControl`). It consumes no
+ * GraphQL and no domain context — value flows through `value`/`defaultValue`/`onValueChange`.
+ */
+export declare function EmailField({ value, defaultValue, onValueChange, onBlur, invalid, errorMessage, label, placeholder, disabled, required, name, className, ...props }: EmailFieldProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=email-field.d.ts.map

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

@@ -0,0 +1,106 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { Field } from "../field/field.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/email-field/email-field.tsx
+/**
+* Email format rule, ported from the legacy `EMAIL_VALIDATE_REGEX` (fastcheckout `validations.ts`).
+* The exact legacy source was unavailable at authoring time, so this uses the WHATWG/HTML5 email-input
+* pattern — the same rule the browser applies to `<input type="email">`. Format validation runs on
+* blur/submit only, never per keystroke (Invariants & Constraints).
+*/
+const EMAIL_VALIDATE_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;
+/** True when `value` is a well-formed email address. Trims surrounding whitespace before testing. */
+function isValidEmail(value) {
+	return EMAIL_VALIDATE_REGEX.test(value.trim());
+}
+const EmailFieldDefinition = defineComponent({
+	name: "EmailField",
+	importPath: "@vtex/faststore/components",
+	component: EmailField,
+	editor: {
+		label: "Email Field",
+		category: "content"
+	},
+	schema: {
+		label: {
+			type: "string",
+			label: "Label"
+		},
+		placeholder: {
+			type: "string",
+			label: "Placeholder"
+		},
+		errorMessage: {
+			type: "string",
+			label: "Error message"
+		},
+		required: {
+			type: "boolean",
+			default: true,
+			label: "Required"
+		},
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		}
+	},
+	guideline: "Presentational, data-agnostic email input with blur/submit format validation; for a checkout-bound field use EmailIdentificationControl instead. See email-field.md."
+});
+/**
+* Presentational email input (particle). Composes the `Field` particle (`Field.Root` + `Field.Label` +
+* `Field.Control` + `Field.Error`) and owns email **format** validation: it validates on blur/submit
+* (never per keystroke) and surfaces `errorMessage` inline when the format is invalid or when the host
+* forces `invalid` (e.g. a server-side error from `EmailIdentificationControl`). It consumes no
+* GraphQL and no domain context — value flows through `value`/`defaultValue`/`onValueChange`.
+*/
+function EmailField({ value, defaultValue = "", onValueChange, onBlur, invalid = false, errorMessage, label, placeholder, disabled = false, required = true, name = "email", className, ...props }) {
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [formatInvalid, setFormatInvalid] = useState(false);
+	const currentValue = isControlled ? value : internalValue;
+	const showInvalid = invalid || formatInvalid;
+	function handleChange(event) {
+		const next = event.target.value;
+		if (!isControlled) setInternalValue(next);
+		if (formatInvalid) setFormatInvalid(false);
+		onValueChange?.(next);
+	}
+	function handleBlur(event) {
+		const trimmed = currentValue.trim();
+		setFormatInvalid(trimmed.length > 0 && !isValidEmail(trimmed));
+		onBlur?.(event);
+	}
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...props,
+		className,
+		name,
+		invalid: showInvalid,
+		disabled,
+		"data-fs-email-field": "",
+		children: [
+			label ? /* @__PURE__ */ jsx(Field.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Field.Control, {
+				type: "email",
+				name,
+				required,
+				placeholder,
+				disabled,
+				onChange: handleChange,
+				onBlur: handleBlur,
+				...isControlled ? { value: currentValue } : { defaultValue }
+			}),
+			showInvalid && errorMessage ? /* @__PURE__ */ jsx(Field.Error, {
+				match: true,
+				children: errorMessage
+			}) : null
+		]
+	});
+}
+//#endregion
+export { EMAIL_VALIDATE_REGEX, EmailField, EmailFieldDefinition, isValidEmail };
+
+//# sourceMappingURL=email-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"email-field.js","names":[],"sources":["../../../src/particles/email-field/email-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, ComponentPropsWithRef, FocusEvent } from 'react';\nimport { useState } from 'react';\nimport { Field } from '../field/field.js';\n\nexport type EmailFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'value' | 'onChange' | 'onBlur'> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  invalid?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n};\n\n/**\n * Email format rule, ported from the legacy `EMAIL_VALIDATE_REGEX` (fastcheckout `validations.ts`).\n * The exact legacy source was unavailable at authoring time, so this uses the WHATWG/HTML5 email-input\n * pattern — the same rule the browser applies to `<input type=\"email\">`. Format validation runs on\n * blur/submit only, never per keystroke (Invariants & Constraints).\n */\nexport const EMAIL_VALIDATE_REGEX =\n  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;\n\n/** True when `value` is a well-formed email address. Trims surrounding whitespace before testing. */\nexport function isValidEmail(value: string): boolean {\n  return EMAIL_VALIDATE_REGEX.test(value.trim());\n}\n\nexport const EmailFieldDefinition = defineComponent<EmailFieldProps>({\n  name: 'EmailField',\n  importPath: '@vtex/faststore/components',\n  component: EmailField,\n  editor: { label: 'Email Field', category: 'content' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    errorMessage: { type: 'string', label: 'Error message' },\n    required: { type: 'boolean', default: true, label: 'Required' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Presentational, data-agnostic email input with blur/submit format validation; for a checkout-bound field use EmailIdentificationControl instead. See email-field.md.',\n});\n\n/**\n * Presentational email input (particle). Composes the `Field` particle (`Field.Root` + `Field.Label` +\n * `Field.Control` + `Field.Error`) and owns email **format** validation: it validates on blur/submit\n * (never per keystroke) and surfaces `errorMessage` inline when the format is invalid or when the host\n * forces `invalid` (e.g. a server-side error from `EmailIdentificationControl`). It consumes no\n * GraphQL and no domain context — value flows through `value`/`defaultValue`/`onValueChange`.\n */\nexport function EmailField({\n  value,\n  defaultValue = '',\n  onValueChange,\n  onBlur,\n  invalid = false,\n  errorMessage,\n  label,\n  placeholder,\n  disabled = false,\n  required = true,\n  name = 'email',\n  className,\n  ...props\n}: EmailFieldProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [formatInvalid, setFormatInvalid] = useState(false);\n\n  const currentValue = isControlled ? value : internalValue;\n  const showInvalid = invalid || formatInvalid;\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const next = event.target.value;\n    if (!isControlled) setInternalValue(next);\n    // Clear a prior format error while typing; it is re-evaluated on the next blur (no per-keystroke validation).\n    if (formatInvalid) setFormatInvalid(false);\n    onValueChange?.(next);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    const trimmed = currentValue.trim();\n    setFormatInvalid(trimmed.length > 0 && !isValidEmail(trimmed));\n    onBlur?.(event);\n  }\n\n  return (\n    <Field.Root\n      {...props}\n      className={className}\n      name={name}\n      invalid={showInvalid}\n      disabled={disabled}\n      data-fs-email-field=\"\"\n    >\n      {label ? <Field.Label>{label}</Field.Label> : null}\n      <Field.Control\n        type=\"email\"\n        name={name}\n        required={required}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        {...(isControlled ? { value: currentValue } : { defaultValue })}\n      />\n      {showInvalid && errorMessage ? <Field.Error match>{errorMessage}</Field.Error> : null}\n    </Field.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA0BA,MAAa,uBACX;;AAGF,SAAgB,aAAa,OAAwB;CACnD,OAAO,qBAAqB,KAAK,MAAM,KAAK,CAAC;AAC/C;AAEA,MAAa,uBAAuB,gBAAiC;CACnE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAe,UAAU;CAAU;CACpD,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,cAAc;GAAE,MAAM;GAAU,OAAO;EAAgB;EACvD,UAAU;GAAE,MAAM;GAAW,SAAS;GAAM,OAAO;EAAW;EAC9D,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;CACjE;CACA,WACE;AACJ,CAAC;;;;;;;;AASD,SAAgB,WAAW,EACzB,OACA,eAAe,IACf,eACA,QACA,UAAU,OACV,cACA,OACA,aACA,WAAW,OACX,WAAW,MACX,OAAO,SACP,WACA,GAAG,SACe;CAClB,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAC/D,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAExD,MAAM,eAAe,eAAe,QAAQ;CAC5C,MAAM,cAAc,WAAW;CAE/B,SAAS,aAAa,OAAsC;EAC1D,MAAM,OAAO,MAAM,OAAO;EAC1B,IAAI,CAAC,cAAc,iBAAiB,IAAI;EAExC,IAAI,eAAe,iBAAiB,KAAK;EACzC,gBAAgB,IAAI;CACtB;CAEA,SAAS,WAAW,OAAqC;EACvD,MAAM,UAAU,aAAa,KAAK;EAClC,iBAAiB,QAAQ,SAAS,KAAK,CAAC,aAAa,OAAO,CAAC;EAC7D,SAAS,KAAK;CAChB;CAEA,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACO;EACL;EACN,SAAS;EACC;EACV,uBAAoB;EANtB,UAAA;GAQG,QAAQ,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA,IAAI;GAC9C,oBAAC,MAAM,SAAP;IACE,MAAK;IACC;IACI;IACG;IACH;IACV,UAAU;IACV,QAAQ;IACR,GAAK,eAAe,EAAE,OAAO,aAAa,IAAI,EAAE,aAAa;GAC9D,CAAA;GACA,eAAe,eAAe,oBAAC,MAAM,OAAP;IAAa,OAAA;IAAO,UAAA;GAA0B,CAAA,IAAI;EACvE;;AAEhB"}

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

@@ -0,0 +1,50 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+import { FieldValidityState } from "@base-ui/react/field";
+//#region src/particles/field/field.d.ts
+export type FieldRootProps = ComponentPropsWithRef<'div'> & {
+  disabled?: boolean;
+  invalid?: boolean;
+  name?: string;
+};
+export type FieldLabelProps = ComponentPropsWithRef<'label'>;
+export type FieldControlProps = Omit<ComponentPropsWithRef<'input'>, 'children'>;
+export type FieldDescriptionProps = ComponentPropsWithRef<'p'>;
+export type FieldErrorProps = ComponentPropsWithRef<'div'> & {
+  /**
+   * Controls when the error is shown. `true` always shows it (for externally/caller-driven
+   * validity, e.g. presence-only checks with no native constraint validation); a
+   * `ValidityState` key shows it only when that specific native validity flag is set. Omit to
+   * fall back to Base UI's default: shown whenever the field's tracked validity is invalid.
+   * Note `match={false}` does not suppress the error — it falls back to that default
+   * invalid-driven behavior; callers needing a boolean should use `invalid ? true : 'customError'`.
+   */
+  match?: boolean | keyof ValidityState;
+};
+export type FieldValidityProps = {
+  children: (state: FieldValidityState) => ReactNode;
+};
+export declare const FieldRootDefinition: ComponentDefinition<FieldRootProps>;
+export declare const FieldLabelDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
+export declare const FieldControlDefinition: ComponentDefinition<FieldControlProps>;
+export declare const FieldDescriptionDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+export declare const FieldErrorDefinition: ComponentDefinition<FieldErrorProps>;
+export declare const FieldValidityDefinition: ComponentDefinition<FieldValidityProps>;
+export declare function FieldRoot({ disabled, invalid, name, className, children, ...props }: FieldRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldLabel({ className, children, ...props }: FieldLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldControl({ className, ...props }: FieldControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldDescription({ className, children, ...props }: FieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldError({ className, children, ...props }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldValidity({ children }: FieldValidityProps): import("react/jsx-runtime").JSX.Element;
+declare const Field$1: {
+  Root: typeof FieldRoot;
+  Label: typeof FieldLabel;
+  Control: typeof FieldControl;
+  Description: typeof FieldDescription;
+  Error: typeof FieldError;
+  Validity: typeof FieldValidity;
+};
+//#endregion
+export { Field$1 as Field };
+//# sourceMappingURL=field.d.ts.map