@vtex/faststore 0.0.5 → 0.0.6

package/dist/particles/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,68 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentProps, ComponentPropsWithRef, ReactNode } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+//#region src/particles/alert-dialog/alert-dialog.d.ts
+type BasePopupProps = ComponentProps<typeof AlertDialog.Popup>;
+export type AlertDialogRootProps = Readonly<{
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: {
+    isCanceled: boolean;
+  }) => void;
+  children?: ReactNode;
+}>;
+export type AlertDialogTriggerProps = ComponentPropsWithRef<'button'>;
+export type AlertDialogPortalProps = Readonly<{
+  children?: ReactNode;
+}>;
+export type AlertDialogBackdropProps = ComponentPropsWithRef<'div'>;
+export type AlertDialogViewportProps = ComponentPropsWithRef<'div'>;
+export type AlertDialogPopupProps = ComponentPropsWithRef<'div'> & {
+  initialFocus?: BasePopupProps['initialFocus'];
+  finalFocus?: BasePopupProps['finalFocus'];
+};
+export type AlertDialogTitleProps = ComponentPropsWithRef<'h2'>;
+export type AlertDialogDescriptionProps = ComponentPropsWithRef<'p'>;
+export type AlertDialogCloseProps = ComponentPropsWithRef<'button'>;
+export declare const AlertDialogRootDefinition: ComponentDefinition<Readonly<{
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: {
+    isCanceled: boolean;
+  }) => void;
+  children?: ReactNode;
+}>>;
+export declare const AlertDialogTriggerDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+export declare const AlertDialogPortalDefinition: ComponentDefinition<Readonly<{
+  children?: ReactNode;
+}>>;
+export declare const AlertDialogBackdropDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const AlertDialogViewportDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const AlertDialogPopupDefinition: ComponentDefinition<AlertDialogPopupProps>;
+export declare const AlertDialogTitleDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const AlertDialogDescriptionDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+export declare const AlertDialogCloseDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+export declare function AlertDialogRoot({ open, defaultOpen, onOpenChange, children }: AlertDialogRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogTrigger({ className, children, ...props }: AlertDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogPortal({ children }: AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogBackdrop({ className, children, ...props }: AlertDialogBackdropProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogViewport({ className, children, ...props }: AlertDialogViewportProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogPopup({ className, children, ...props }: AlertDialogPopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogTitle({ className, children, ...props }: AlertDialogTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogDescription({ className, children, ...props }: AlertDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogClose({ className, children, ...props }: AlertDialogCloseProps): import("react/jsx-runtime").JSX.Element;
+declare const AlertDialog$1: {
+  Root: typeof AlertDialogRoot;
+  Trigger: typeof AlertDialogTrigger;
+  Portal: typeof AlertDialogPortal;
+  Backdrop: typeof AlertDialogBackdrop;
+  Viewport: typeof AlertDialogViewport;
+  Popup: typeof AlertDialogPopup;
+  Title: typeof AlertDialogTitle;
+  Description: typeof AlertDialogDescription;
+  Close: typeof AlertDialogClose;
+};
+//#endregion
+export { AlertDialog$1 as AlertDialog };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/particles/alert-dialog/alert-dialog.js

@@ -0,0 +1,187 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+//#region src/particles/alert-dialog/alert-dialog.tsx
+const AlertDialogRootDefinition = defineComponent({
+	name: "AlertDialogRoot",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogRoot,
+	editor: {
+		label: "Alert Dialog Root",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Root of a confirmation prompt for an irreversible action. Compose as: AlertDialogRoot > (AlertDialogTrigger + AlertDialogPortal > (AlertDialogBackdrop + AlertDialogViewport > AlertDialogPopup > (AlertDialogTitle + AlertDialogDescription + AlertDialogClose + your confirm Button))). Always modal and never closes on an outside click; only Escape or an AlertDialogClose dismisses it. Use Dialog instead when a stray click may close the overlay."
+});
+const AlertDialogTriggerDefinition = defineComponent({
+	name: "AlertDialogTrigger",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogTrigger,
+	editor: {
+		label: "Alert Dialog Trigger",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Opens the alert dialog when clicked. Direct child of AlertDialogRoot. Accepts any children (text, Icon). Base UI connects it to AlertDialogRoot via context — no explicit wiring needed."
+});
+const AlertDialogPortalDefinition = defineComponent({
+	name: "AlertDialogPortal",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogPortal,
+	editor: {
+		label: "Alert Dialog Portal",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Renders its children outside the DOM tree (into document.body). Place AlertDialogBackdrop and AlertDialogViewport as direct children, in that order."
+});
+const AlertDialogBackdropDefinition = defineComponent({
+	name: "AlertDialogBackdrop",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogBackdrop,
+	editor: {
+		label: "Alert Dialog Backdrop",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Semi-transparent overlay behind the popup. Direct child of AlertDialogPortal, before AlertDialogViewport. Clicking it does not close the alert dialog."
+});
+const AlertDialogViewportDefinition = defineComponent({
+	name: "AlertDialogViewport",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogViewport,
+	editor: {
+		label: "Alert Dialog Viewport",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Positioning container for AlertDialogPopup. Direct child of AlertDialogPortal, after AlertDialogBackdrop. Apply fixed positioning and centering here (e.g. fixed inset-0 flex items-center justify-center). Place AlertDialogPopup inside."
+});
+const AlertDialogPopupDefinition = defineComponent({
+	name: "AlertDialogPopup",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogPopup,
+	editor: {
+		label: "Alert Dialog Popup",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "The visible prompt, inside AlertDialogViewport, with role alertdialog. Place AlertDialogTitle (required), AlertDialogDescription, an AlertDialogClose for cancel, and a confirm Button inside. Focus starts on the first focusable element, except when opened by touch, where Base UI focuses the popup itself: put the cancel control first, and pass initialFocus (a ref) when Cancel must receive focus for every kind of interaction."
+});
+const AlertDialogTitleDefinition = defineComponent({
+	name: "AlertDialogTitle",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogTitle,
+	editor: {
+		label: "Alert Dialog Title",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Required heading inside AlertDialogPopup — sets the accessible name of the alert dialog for screen readers. State the question, e.g. \"Delete this address?\"."
+});
+const AlertDialogDescriptionDefinition = defineComponent({
+	name: "AlertDialogDescription",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogDescription,
+	editor: {
+		label: "Alert Dialog Description",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Description inside AlertDialogPopup, after AlertDialogTitle. Screen readers announce it with the prompt, so use it to state the consequence of confirming."
+});
+const AlertDialogCloseDefinition = defineComponent({
+	name: "AlertDialogClose",
+	importPath: "@vtex/faststore/components",
+	component: AlertDialogClose,
+	editor: {
+		label: "Alert Dialog Close",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Closes the alert dialog when clicked. Use it for the cancel control inside AlertDialogPopup. The confirm control is a separate Button that runs the consumer action."
+});
+function AlertDialogRoot({ open, defaultOpen, onOpenChange, children }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		children
+	});
+}
+function AlertDialogTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		...props,
+		className,
+		"data-fs-alert-dialog-trigger": "",
+		children
+	});
+}
+function AlertDialogPortal({ children }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, { children });
+}
+function AlertDialogBackdrop({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		...props,
+		className,
+		"data-fs-alert-dialog-backdrop": "",
+		children
+	});
+}
+function AlertDialogViewport({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-alert-dialog-viewport": "",
+		children
+	});
+}
+function AlertDialogPopup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		...props,
+		className,
+		"data-fs-alert-dialog-popup": "",
+		children
+	});
+}
+function AlertDialogTitle({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		...props,
+		className,
+		"data-fs-alert-dialog-title": "",
+		children
+	});
+}
+function AlertDialogDescription({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		...props,
+		className,
+		"data-fs-alert-dialog-description": "",
+		children
+	});
+}
+function AlertDialogClose({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		...props,
+		className,
+		"data-fs-alert-dialog-close": "",
+		children
+	});
+}
+const AlertDialog$1 = {
+	Root: AlertDialogRoot,
+	Trigger: AlertDialogTrigger,
+	Portal: AlertDialogPortal,
+	Backdrop: AlertDialogBackdrop,
+	Viewport: AlertDialogViewport,
+	Popup: AlertDialogPopup,
+	Title: AlertDialogTitle,
+	Description: AlertDialogDescription,
+	Close: AlertDialogClose
+};
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogBackdrop, AlertDialogBackdropDefinition, AlertDialogClose, AlertDialogCloseDefinition, AlertDialogDescription, AlertDialogDescriptionDefinition, AlertDialogPopup, AlertDialogPopupDefinition, AlertDialogPortal, AlertDialogPortalDefinition, AlertDialogRoot, AlertDialogRootDefinition, AlertDialogTitle, AlertDialogTitleDefinition, AlertDialogTrigger, AlertDialogTriggerDefinition, AlertDialogViewport, AlertDialogViewportDefinition };
+
+//# sourceMappingURL=alert-dialog.js.map

package/dist/particles/alert-dialog/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","names":["BaseAlertDialog","AlertDialog"],"sources":["../../../src/particles/alert-dialog/alert-dialog.tsx"],"sourcesContent":["'use client';\nimport { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentProps, ComponentPropsWithRef, ReactNode } from 'react';\n\ntype BasePopupProps = ComponentProps<typeof BaseAlertDialog.Popup>;\n\nexport type AlertDialogRootProps = Readonly<{\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n}>;\n\nexport type AlertDialogTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type AlertDialogPortalProps = Readonly<{\n  children?: ReactNode;\n}>;\n\nexport type AlertDialogBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type AlertDialogViewportProps = ComponentPropsWithRef<'div'>;\n\nexport type AlertDialogPopupProps = ComponentPropsWithRef<'div'> & {\n  initialFocus?: BasePopupProps['initialFocus'];\n  finalFocus?: BasePopupProps['finalFocus'];\n};\n\nexport type AlertDialogTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type AlertDialogDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type AlertDialogCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const AlertDialogRootDefinition = defineComponent<AlertDialogRootProps>({\n  name: 'AlertDialogRoot',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogRoot,\n  editor: { label: 'Alert Dialog Root', category: 'layout' },\n  schema: {},\n  guideline:\n    'Root of a confirmation prompt for an irreversible action. Compose as: AlertDialogRoot > (AlertDialogTrigger + AlertDialogPortal > (AlertDialogBackdrop + AlertDialogViewport > AlertDialogPopup > (AlertDialogTitle + AlertDialogDescription + AlertDialogClose + your confirm Button))). Always modal and never closes on an outside click; only Escape or an AlertDialogClose dismisses it. Use Dialog instead when a stray click may close the overlay.',\n});\n\nexport const AlertDialogTriggerDefinition = defineComponent<AlertDialogTriggerProps>({\n  name: 'AlertDialogTrigger',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogTrigger,\n  editor: { label: 'Alert Dialog Trigger', category: 'action' },\n  schema: {},\n  guideline:\n    'Opens the alert dialog when clicked. Direct child of AlertDialogRoot. Accepts any children (text, Icon). Base UI connects it to AlertDialogRoot via context — no explicit wiring needed.',\n});\n\nexport const AlertDialogPortalDefinition = defineComponent<AlertDialogPortalProps>({\n  name: 'AlertDialogPortal',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogPortal,\n  editor: { label: 'Alert Dialog Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Renders its children outside the DOM tree (into document.body). Place AlertDialogBackdrop and AlertDialogViewport as direct children, in that order.',\n});\n\nexport const AlertDialogBackdropDefinition = defineComponent<AlertDialogBackdropProps>({\n  name: 'AlertDialogBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogBackdrop,\n  editor: { label: 'Alert Dialog Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay behind the popup. Direct child of AlertDialogPortal, before AlertDialogViewport. Clicking it does not close the alert dialog.',\n});\n\nexport const AlertDialogViewportDefinition = defineComponent<AlertDialogViewportProps>({\n  name: 'AlertDialogViewport',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogViewport,\n  editor: { label: 'Alert Dialog Viewport', category: 'layout' },\n  schema: {},\n  guideline:\n    'Positioning container for AlertDialogPopup. Direct child of AlertDialogPortal, after AlertDialogBackdrop. Apply fixed positioning and centering here (e.g. fixed inset-0 flex items-center justify-center). Place AlertDialogPopup inside.',\n});\n\nexport const AlertDialogPopupDefinition = defineComponent<AlertDialogPopupProps>({\n  name: 'AlertDialogPopup',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogPopup,\n  editor: { label: 'Alert Dialog Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'The visible prompt, inside AlertDialogViewport, with role alertdialog. Place AlertDialogTitle (required), AlertDialogDescription, an AlertDialogClose for cancel, and a confirm Button inside. Focus starts on the first focusable element, except when opened by touch, where Base UI focuses the popup itself: put the cancel control first, and pass initialFocus (a ref) when Cancel must receive focus for every kind of interaction.',\n});\n\nexport const AlertDialogTitleDefinition = defineComponent<AlertDialogTitleProps>({\n  name: 'AlertDialogTitle',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogTitle,\n  editor: { label: 'Alert Dialog Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Required heading inside AlertDialogPopup — sets the accessible name of the alert dialog for screen readers. State the question, e.g. \"Delete this address?\".',\n});\n\nexport const AlertDialogDescriptionDefinition = defineComponent<AlertDialogDescriptionProps>({\n  name: 'AlertDialogDescription',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogDescription,\n  editor: { label: 'Alert Dialog Description', category: 'layout' },\n  schema: {},\n  guideline:\n    'Description inside AlertDialogPopup, after AlertDialogTitle. Screen readers announce it with the prompt, so use it to state the consequence of confirming.',\n});\n\nexport const AlertDialogCloseDefinition = defineComponent<AlertDialogCloseProps>({\n  name: 'AlertDialogClose',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogClose,\n  editor: { label: 'Alert Dialog Close', category: 'action' },\n  schema: {},\n  guideline:\n    'Closes the alert dialog when clicked. Use it for the cancel control inside AlertDialogPopup. The confirm control is a separate Button that runs the consumer action.',\n});\n\nexport function AlertDialogRoot({ open, defaultOpen, onOpenChange, children }: AlertDialogRootProps) {\n  return (\n    <BaseAlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {children}\n    </BaseAlertDialog.Root>\n  );\n}\n\nexport function AlertDialogTrigger({ className, children, ...props }: AlertDialogTriggerProps) {\n  return (\n    <BaseAlertDialog.Trigger {...props} className={className} data-fs-alert-dialog-trigger=\"\">\n      {children}\n    </BaseAlertDialog.Trigger>\n  );\n}\n\nexport function AlertDialogPortal({ children }: AlertDialogPortalProps) {\n  return <BaseAlertDialog.Portal>{children}</BaseAlertDialog.Portal>;\n}\n\nexport function AlertDialogBackdrop({ className, children, ...props }: AlertDialogBackdropProps) {\n  return (\n    <BaseAlertDialog.Backdrop {...props} className={className} data-fs-alert-dialog-backdrop=\"\">\n      {children}\n    </BaseAlertDialog.Backdrop>\n  );\n}\n\nexport function AlertDialogViewport({ className, children, ...props }: AlertDialogViewportProps) {\n  return (\n    <div {...props} className={className} data-fs-alert-dialog-viewport=\"\">\n      {children}\n    </div>\n  );\n}\n\nexport function AlertDialogPopup({ className, children, ...props }: AlertDialogPopupProps) {\n  return (\n    <BaseAlertDialog.Popup {...props} className={className} data-fs-alert-dialog-popup=\"\">\n      {children}\n    </BaseAlertDialog.Popup>\n  );\n}\n\nexport function AlertDialogTitle({ className, children, ...props }: AlertDialogTitleProps) {\n  return (\n    <BaseAlertDialog.Title {...props} className={className} data-fs-alert-dialog-title=\"\">\n      {children}\n    </BaseAlertDialog.Title>\n  );\n}\n\nexport function AlertDialogDescription({ className, children, ...props }: AlertDialogDescriptionProps) {\n  return (\n    <BaseAlertDialog.Description {...props} className={className} data-fs-alert-dialog-description=\"\">\n      {children}\n    </BaseAlertDialog.Description>\n  );\n}\n\nexport function AlertDialogClose({ className, children, ...props }: AlertDialogCloseProps) {\n  return (\n    <BaseAlertDialog.Close {...props} className={className} data-fs-alert-dialog-close=\"\">\n      {children}\n    </BaseAlertDialog.Close>\n  );\n}\n\nexport const AlertDialog = {\n  Root: AlertDialogRoot,\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Backdrop: AlertDialogBackdrop,\n  Viewport: AlertDialogViewport,\n  Popup: AlertDialogPopup,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription,\n  Close: AlertDialogClose,\n};\n"],"mappings":"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"}

package/dist/particles/checkbox/checkbox.d.ts

@@ -1,8 +1,10 @@
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { ComponentPropsWithRef, ReactNode, Ref } from "react";
 //#region src/particles/checkbox/checkbox.d.ts
-export type CheckboxRootProps = {
+export type CheckboxRootProps = Omit<ComponentPropsWithRef<'span'>, 'defaultValue' | 'defaultChecked' | 'onChange' | 'ref' | 'dangerouslySetInnerHTML'> & {
+  /** The rendered host element is a span; Base UI types its forwarded ref as HTMLElement because `render` can replace it. */
+  ref?: Ref<HTMLElement>;
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
@@ -15,6 +17,8 @@ export type CheckboxRootProps = {
   id?: string;
   className?: string;
   children?: ReactNode;
+  /** Id of the element this checkbox shows, hides or changes; forwarded to the `role="checkbox"` element. */
+  'aria-controls'?: string;
 };
 export type CheckboxIndicatorProps = ComponentPropsWithRef<'span'> & {
   keepMounted?: boolean;
@@ -29,7 +33,7 @@ export type CheckboxGroupProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValu
 export declare const CheckboxRootDefinition: ComponentDefinition<CheckboxRootProps>;
 export declare const CheckboxIndicatorDefinition: ComponentDefinition<CheckboxIndicatorProps>;
 export declare const CheckboxGroupDefinition: ComponentDefinition<CheckboxGroupProps>;
-export declare function CheckboxRoot({ checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, className, children }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxRoot({ checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, className, children, 'aria-controls': ariaControls, ref, ...props }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
 export declare function CheckboxIndicator({ keepMounted, className, children, ...props }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export declare function CheckboxGroup({ className, children, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare const Checkbox: {

package/dist/particles/checkbox/checkbox.js

@@ -38,8 +38,10 @@ const CheckboxGroupDefinition = defineComponent({
 	schema: {},
 	guideline: "Shared state container for a series of checkboxes. Use allValues to enable select-all behavior. Contains Checkbox.Root children with individual value props."
 });
-function CheckboxRoot({ checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, className, children }) {
+function CheckboxRoot({ checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, className, children, "aria-controls": ariaControls, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		...props,
+		ref,
 		checked,
 		defaultChecked,
 		onCheckedChange,
@@ -51,6 +53,7 @@ function CheckboxRoot({ checked, defaultChecked, onCheckedChange, indeterminate,
 		value,
 		id,
 		className,
+		"aria-controls": ariaControls,
 		"data-fs-checkbox-root": "",
 		children
 	});

package/dist/particles/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["CheckboxGroup","BaseCheckbox","BaseCheckboxGroup","Checkbox"],"sources":["../../../src/particles/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type CheckboxRootProps = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  value?: string;\n  id?: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport type CheckboxIndicatorProps = ComponentPropsWithRef<'span'> & {\n  keepMounted?: boolean;\n};\n\nexport type CheckboxGroupProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  allValues?: string[];\n  disabled?: boolean;\n};\n\nexport const CheckboxRootDefinition = defineComponent<CheckboxRootProps>({\n  name: 'CheckboxRoot',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxRoot,\n  editor: { label: 'Checkbox Root', category: 'action' },\n  schema: {},\n  guideline:\n    'Form checkbox that integrates with Field for labeling and validation. Requires a Checkbox.Indicator child for visual state. Use indeterminate for partial selection in nested lists.',\n});\n\nexport const CheckboxIndicatorDefinition = defineComponent<CheckboxIndicatorProps>({\n  name: 'CheckboxIndicator',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxIndicator,\n  editor: { label: 'Checkbox Indicator', category: 'layout' },\n  schema: {},\n  guideline:\n    'Visual indicator inside Checkbox.Root showing checked/indeterminate state. Render a checkmark SVG as a child. Visible only when checked or indeterminate via data-checked/data-indeterminate.',\n});\n\nexport const CheckboxGroupDefinition = defineComponent<CheckboxGroupProps>({\n  name: 'CheckboxGroup',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxGroup,\n  editor: { label: 'Checkbox Group', category: 'layout' },\n  schema: {},\n  guideline:\n    'Shared state container for a series of checkboxes. Use allValues to enable select-all behavior. Contains Checkbox.Root children with individual value props.',\n});\n\nexport function CheckboxRoot({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  indeterminate,\n  disabled,\n  readOnly,\n  required,\n  name,\n  value,\n  id,\n  className,\n  children,\n}: CheckboxRootProps) {\n  return (\n    <BaseCheckbox.Root\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      indeterminate={indeterminate}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      name={name}\n      value={value}\n      id={id}\n      className={className}\n      data-fs-checkbox-root=\"\"\n    >\n      {children}\n    </BaseCheckbox.Root>\n  );\n}\n\nexport function CheckboxIndicator({ keepMounted = false, className, children, ...props }: CheckboxIndicatorProps) {\n  return (\n    <BaseCheckbox.Indicator {...props} keepMounted={keepMounted} className={className} data-fs-checkbox-indicator=\"\">\n      {children}\n    </BaseCheckbox.Indicator>\n  );\n}\n\nexport function CheckboxGroup({ className, children, ...props }: CheckboxGroupProps) {\n  return (\n    <BaseCheckboxGroup {...props} className={className} data-fs-checkbox-group=\"\">\n      {children}\n    </BaseCheckboxGroup>\n  );\n}\n\nexport const Checkbox = {\n  Root: CheckboxRoot,\n  Indicator: CheckboxIndicator,\n};\n"],"mappings":";;;;;;;AAiCA,MAAa,yBAAyB,gBAAmC;CACvE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAiB,UAAU;CAAS;CACrD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,8BAA8B,gBAAwC;CACjF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAS;CAC1D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAWA;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAgB,aAAa,EAC3B,SACA,gBACA,iBACA,eACA,UACA,UACA,UACA,MACA,OACA,IACA,WACA,YACoB;CACpB,OACE,oBAACC,SAAa,MAAd;EACW;EACO;EACC;EACF;EACL;EACA;EACA;EACJ;EACC;EACH;EACO;EACX,yBAAsB;EAErB;CACgB,CAAA;AAEvB;AAEA,SAAgB,kBAAkB,EAAE,cAAc,OAAO,WAAW,UAAU,GAAG,SAAiC;CAChH,OACE,oBAACA,SAAa,WAAd;EAAwB,GAAI;EAAoB;EAAwB;EAAW,8BAA2B;EAC3G;CACqB,CAAA;AAE5B;AAEA,SAAgBD,gBAAc,EAAE,WAAW,UAAU,GAAG,SAA6B;CACnF,OACE,oBAACE,eAAD;EAAmB,GAAI;EAAkB;EAAW,0BAAuB;EACxE;CACgB,CAAA;AAEvB;AAEA,MAAaC,aAAW;CACtB,MAAM;CACN,WAAW;AACb"}
+{"version":3,"file":"checkbox.js","names":["CheckboxGroup","BaseCheckbox","BaseCheckboxGroup","Checkbox"],"sources":["../../../src/particles/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode, Ref } from 'react';\n\n// The twelve members below, over the span props Base UI's own `CheckboxRoot` already accepts, so\n// `ref`, `onBlur` and any `data-*` attribute reach the rendered host element through a rest spread.\n// `dangerouslySetInnerHTML` is excluded — the rest spread otherwise forwards it straight onto the\n// rendered `<span>`, and a schema-authored `page.json` can supply it with no allowlist in between.\nexport type CheckboxRootProps = Omit<\n  ComponentPropsWithRef<'span'>,\n  'defaultValue' | 'defaultChecked' | 'onChange' | 'ref' | 'dangerouslySetInnerHTML'\n> & {\n  /** The rendered host element is a span; Base UI types its forwarded ref as HTMLElement because `render` can replace it. */\n  ref?: Ref<HTMLElement>;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  value?: string;\n  id?: string;\n  className?: string;\n  children?: ReactNode;\n  /** Id of the element this checkbox shows, hides or changes; forwarded to the `role=\"checkbox\"` element. */\n  'aria-controls'?: string;\n};\n\nexport type CheckboxIndicatorProps = ComponentPropsWithRef<'span'> & {\n  keepMounted?: boolean;\n};\n\nexport type CheckboxGroupProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  allValues?: string[];\n  disabled?: boolean;\n};\n\nexport const CheckboxRootDefinition = defineComponent<CheckboxRootProps>({\n  name: 'CheckboxRoot',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxRoot,\n  editor: { label: 'Checkbox Root', category: 'action' },\n  schema: {},\n  guideline:\n    'Form checkbox that integrates with Field for labeling and validation. Requires a Checkbox.Indicator child for visual state. Use indeterminate for partial selection in nested lists.',\n});\n\nexport const CheckboxIndicatorDefinition = defineComponent<CheckboxIndicatorProps>({\n  name: 'CheckboxIndicator',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxIndicator,\n  editor: { label: 'Checkbox Indicator', category: 'layout' },\n  schema: {},\n  guideline:\n    'Visual indicator inside Checkbox.Root showing checked/indeterminate state. Render a checkmark SVG as a child. Visible only when checked or indeterminate via data-checked/data-indeterminate.',\n});\n\nexport const CheckboxGroupDefinition = defineComponent<CheckboxGroupProps>({\n  name: 'CheckboxGroup',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxGroup,\n  editor: { label: 'Checkbox Group', category: 'layout' },\n  schema: {},\n  guideline:\n    'Shared state container for a series of checkboxes. Use allValues to enable select-all behavior. Contains Checkbox.Root children with individual value props.',\n});\n\nexport function CheckboxRoot({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  indeterminate,\n  disabled,\n  readOnly,\n  required,\n  name,\n  value,\n  id,\n  className,\n  children,\n  'aria-controls': ariaControls,\n  ref,\n  ...props\n}: CheckboxRootProps) {\n  return (\n    <BaseCheckbox.Root\n      {...props}\n      ref={ref}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      indeterminate={indeterminate}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      name={name}\n      value={value}\n      id={id}\n      className={className}\n      aria-controls={ariaControls}\n      data-fs-checkbox-root=\"\"\n    >\n      {children}\n    </BaseCheckbox.Root>\n  );\n}\n\nexport function CheckboxIndicator({ keepMounted = false, className, children, ...props }: CheckboxIndicatorProps) {\n  return (\n    <BaseCheckbox.Indicator {...props} keepMounted={keepMounted} className={className} data-fs-checkbox-indicator=\"\">\n      {children}\n    </BaseCheckbox.Indicator>\n  );\n}\n\nexport function CheckboxGroup({ className, children, ...props }: CheckboxGroupProps) {\n  return (\n    <BaseCheckboxGroup {...props} className={className} data-fs-checkbox-group=\"\">\n      {children}\n    </BaseCheckboxGroup>\n  );\n}\n\nexport const Checkbox = {\n  Root: CheckboxRoot,\n  Indicator: CheckboxIndicator,\n};\n"],"mappings":";;;;;;;AA4CA,MAAa,yBAAyB,gBAAmC;CACvE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAiB,UAAU;CAAS;CACrD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,8BAA8B,gBAAwC;CACjF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAS;CAC1D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAWA;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAgB,aAAa,EAC3B,SACA,gBACA,iBACA,eACA,UACA,UACA,UACA,MACA,OACA,IACA,WACA,UACA,iBAAiB,cACjB,KACA,GAAG,SACiB;CACpB,OACE,oBAACC,SAAa,MAAd;EACE,GAAI;EACC;EACI;EACO;EACC;EACF;EACL;EACA;EACA;EACJ;EACC;EACH;EACO;EACX,iBAAe;EACf,yBAAsB;EAErB;CACgB,CAAA;AAEvB;AAEA,SAAgB,kBAAkB,EAAE,cAAc,OAAO,WAAW,UAAU,GAAG,SAAiC;CAChH,OACE,oBAACA,SAAa,WAAd;EAAwB,GAAI;EAAoB;EAAwB;EAAW,8BAA2B;EAC3G;CACqB,CAAA;AAE5B;AAEA,SAAgBD,gBAAc,EAAE,WAAW,UAAU,GAAG,SAA6B;CACnF,OACE,oBAACE,eAAD;EAAmB,GAAI;EAAkB;EAAW,0BAAuB;EACxE;CACgB,CAAA;AAEvB;AAEA,MAAaC,aAAW;CACtB,MAAM;CACN,WAAW;AACb"}

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

@@ -1,28 +1,52 @@
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { applyMask } from "../shared/input-mask.js";
-import { ComponentPropsWithRef, FocusEvent } from "react";
+import { ComponentPropsWithRef, FocusEvent, ReactNode, Ref } from "react";
 //#region src/particles/document-field/document-field.d.ts
 export type DocumentType = 'CPF';
+type DocumentFieldRequirement = 'mandatory' | 'optional';
 export type DocumentSpec = {
   id: DocumentType;
   name: string;
   mask: string;
   validate: (value: string) => boolean;
 };
-export type DocumentFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'value' | 'onChange' | 'onBlur'> & {
+export type DocumentFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'value' | 'onChange' | 'onBlur' | 'ref' | 'dangerouslySetInnerHTML'> & {
+  /** Unused on the bound path — react-hook-form owns the value. */
   value?: string;
+  /** Unused on the bound path — the field contract's `defaultValue` seeds it instead. */
   defaultValue?: string;
   onValueChange?: (value: string) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
   invalid?: boolean;
   errorMessage?: string;
+  /** Falls back to the field contract's `label` when bound. */
   label?: string;
+  /** Falls back to the field contract's `placeholder` when bound. */
   placeholder?: string;
+  /** Falls back to the field contract's `disabled` when bound. */
   disabled?: boolean;
-  required?: boolean;
+  /**
+   * Raises the field to required, the same word `PhoneField` uses. It only ever raises: bound to a
+   * fieldset whose rule already says required, `'optional'` does not lower it. Left unset it is no
+   * opinion, which keeps CPF optional by recommendation.
+   */
+  requirement?: DocumentFieldRequirement;
   name?: string;
   documentType?: DocumentType;
+  /**
+   * Lands on the `<input>` `Field.Control` renders — not on the wrapper `<div>`, as it did before
+   * (a deliberate, source-breaking re-route: the previous ref pointed at an untabbable div). Composed
+   * with react-hook-form's own ref on the bound path.
+   */
+  ref?: Ref<HTMLInputElement>;
+  /**
+   * Given, replaces the default `Field.Label` + `DocumentFieldInput` + `Field.Error` anatomy — any
+   * order, any subset. `DocumentFieldInput` is the one part that carries the mask, the composed ref
+   * and the particle's own value/handlers; a composed generic `Field.Control` would call
+   * `useController` a second time for the same name (RFC's named, accepted double-binder hole).
+   */
+  children?: ReactNode;
 };
 /**
  * CPF check-digit validation, ported from the legacy `validateCPF`. Strips non-digits, requires
@@ -31,7 +55,15 @@ export type DocumentFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValu
  */
 export declare function validateCPF(value: string): boolean;
 export declare const DOCUMENTS: Record<DocumentType, DocumentSpec>;
-/** True when `type` is a document type this build supports (lets a host gate the field by locale). */
+/**
+ * True when `type` is a document type this build supports (lets a host gate the field by locale).
+ *
+ * `Object.hasOwn`, not the `in` operator: `in` walks the prototype chain, so `constructor`,
+ * `__proto__` and `toString` all satisfied it and were then trusted as a `DocumentType` by callers
+ * (`client-profile-fieldset.tsx` renders the field on the strength of this narrowing). The value is
+ * author-only — a literal written into `page.json`, never a runtime expression — so this is
+ * robustness rather than a reachable defect, but the narrowing should not be able to lie.
+ */
 export declare function isSupportedDocumentType(type: unknown): type is DocumentType;
 /**
  * Apply a document type's mask to raw input: strip non-digits for digit-only masks, then truncate to
@@ -54,8 +86,19 @@ export declare const DocumentFieldDefinition: ComponentDefinition<DocumentFieldP
  * 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.
+ *
+ * Reads the field contract through `useField()` and `useFormContext()` and dispatches to a bound or an
+ * unbound sub-component — "bound" means both are present. Every react-hook-form hook lives in
+ * `BoundDocumentField`, so hook order never changes under a mounted component. Both sub-components
+ * render the same `DocumentFieldView`, so the two paths cannot drift into different DOM.
  */
-export declare function DocumentField({ value, defaultValue, onValueChange, onBlur, invalid, errorMessage, label, placeholder, disabled, required, name, documentType, className, ...props }: DocumentFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function DocumentField(props: DocumentFieldProps): ReactNode;
+export type DocumentFieldInputProps = {
+  className?: string;
+};
+export declare const DocumentFieldInputDefinition: ComponentDefinition<DocumentFieldInputProps>;
+/** Renders the masked document `<input>`, reading its value/handlers/ref from the enclosing `DocumentField`. */
+export declare function DocumentFieldInput({ className }: DocumentFieldInputProps): ReactNode;
 //#endregion
 export { applyMask };
 //# sourceMappingURL=document-field.d.ts.map