@ark-ui/react 3.4.0-1 → 3.4.0

package/dist/components/field/use-field.d.cts

@@ -0,0 +1,100 @@
+import { HTMLProps } from '../factory';
+import { RefObject } from 'react';
+
+export interface UseFieldProps {
+    id?: string;
+    /**
+     * Indicates whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the field is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Indicates whether the field is read-only.
+     */
+    readOnly?: boolean;
+}
+export type UseFieldReturn = ReturnType<typeof useField>;
+export declare const useField: (props: UseFieldProps) => {
+    ariaDescribedby: string;
+    ids: {
+        control: string;
+        label: string;
+        errorText: string;
+        helperText: string;
+    };
+    refs: {
+        rootRef: RefObject<HTMLDivElement>;
+    };
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    getLabelProps: () => {
+        id: string;
+        'data-disabled': Booleanish;
+        'data-invalid': Booleanish;
+        'data-readonly': Booleanish;
+        htmlFor: string;
+        "data-scope": string;
+        "data-part": string;
+    };
+    getRootProps: () => {
+        role: string;
+        'data-disabled': Booleanish;
+        'data-invalid': Booleanish;
+        'data-readonly': Booleanish;
+        "data-scope": string;
+        "data-part": string;
+    };
+    getInputProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getTextareaProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getSelectProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getHelperTextProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        id: string;
+    };
+    getErrorTextProps: () => HTMLProps<"span">;
+};
+type Booleanish = boolean | 'true' | 'false';
+export {};

package/dist/components/field/use-field.d.ts

@@ -0,0 +1,100 @@
+import { HTMLProps } from '../factory';
+import { RefObject } from 'react';
+
+export interface UseFieldProps {
+    id?: string;
+    /**
+     * Indicates whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the field is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Indicates whether the field is read-only.
+     */
+    readOnly?: boolean;
+}
+export type UseFieldReturn = ReturnType<typeof useField>;
+export declare const useField: (props: UseFieldProps) => {
+    ariaDescribedby: string;
+    ids: {
+        control: string;
+        label: string;
+        errorText: string;
+        helperText: string;
+    };
+    refs: {
+        rootRef: RefObject<HTMLDivElement>;
+    };
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    getLabelProps: () => {
+        id: string;
+        'data-disabled': Booleanish;
+        'data-invalid': Booleanish;
+        'data-readonly': Booleanish;
+        htmlFor: string;
+        "data-scope": string;
+        "data-part": string;
+    };
+    getRootProps: () => {
+        role: string;
+        'data-disabled': Booleanish;
+        'data-invalid': Booleanish;
+        'data-readonly': Booleanish;
+        "data-scope": string;
+        "data-part": string;
+    };
+    getInputProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getTextareaProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getSelectProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getHelperTextProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        id: string;
+    };
+    getErrorTextProps: () => HTMLProps<"span">;
+};
+type Booleanish = boolean | 'true' | 'false';
+export {};

package/dist/components/field/use-field.js

@@ -0,0 +1,106 @@
+'use client';
+import { fieldAnatomy } from '@ark-ui/anatomy';
+import { getWindow } from '@zag-js/dom-query';
+import { useState, useId, useRef, useLayoutEffect } from 'react';
+
+const parts = fieldAnatomy.build();
+const useField = (props) => {
+  const { required = false, disabled = false, invalid = false, readOnly = false } = props;
+  const [hasErrorText, setHasErrorText] = useState(false);
+  const [hasHelperText, setHasHelperText] = useState(false);
+  const id = props.id ?? useId();
+  const rootRef = useRef(null);
+  const errorTextId = `field::${id}::error-text`;
+  const helperTextId = `field::${id}::helper-text`;
+  const labelId = `field::${id}::label`;
+  useLayoutEffect(() => {
+    const rootNode = rootRef.current;
+    if (!rootNode) return;
+    const win = getWindow(rootNode);
+    const doc = win.document;
+    const checkTextElements = () => {
+      setHasErrorText(!!doc.getElementById(errorTextId));
+      setHasHelperText(!!doc.getElementById(helperTextId));
+    };
+    checkTextElements();
+    const observer = new win.MutationObserver(checkTextElements);
+    observer.observe(rootNode, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [errorTextId, helperTextId]);
+  const getRootProps = () => ({
+    ...parts.root.attrs,
+    role: "group",
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid),
+    "data-readonly": dataAttr(readOnly)
+  });
+  const getLabelProps = () => ({
+    ...parts.label.attrs,
+    id: labelId,
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid),
+    "data-readonly": dataAttr(readOnly),
+    htmlFor: id
+  });
+  const labelIds = [];
+  if (hasErrorText && invalid) labelIds.push(errorTextId);
+  if (hasHelperText) labelIds.push(helperTextId);
+  const getControlProps = () => ({
+    "aria-describedby": labelIds.join(" ") || void 0,
+    "aria-invalid": ariaAttr(invalid),
+    "aria-required": ariaAttr(required),
+    "aria-readonly": ariaAttr(readOnly),
+    id,
+    required,
+    disabled,
+    readOnly
+  });
+  const getInputProps = () => ({
+    ...getControlProps(),
+    ...parts.input.attrs
+  });
+  const getTextareaProps = () => ({
+    ...getControlProps(),
+    ...parts.textarea.attrs
+  });
+  const getSelectProps = () => ({
+    ...getControlProps(),
+    ...parts.select.attrs
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...parts.errorText.attrs,
+    "aria-live": "polite"
+  });
+  return {
+    ariaDescribedby: labelIds.join(" "),
+    ids: {
+      control: id,
+      label: labelId,
+      errorText: errorTextId,
+      helperText: helperTextId
+    },
+    refs: {
+      rootRef
+    },
+    disabled,
+    invalid,
+    readOnly,
+    required,
+    getLabelProps,
+    getRootProps,
+    getInputProps,
+    getTextareaProps,
+    getSelectProps,
+    getHelperTextProps,
+    getErrorTextProps
+  };
+};
+const dataAttr = (condition) => condition ? "" : void 0;
+const ariaAttr = (condition) => condition ? true : void 0;
+
+export { useField };

package/dist/components/file-upload/file-upload-hidden-input.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useFileUploadContext = require('./use-file-upload-context.cjs');
 
 const FileUploadHiddenInput = react.forwardRef(
   (props, ref) => {
     const fileUpload = useFileUploadContext.useFileUploadContext();
     const mergedProps = react$1.mergeProps(fileUpload.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 FileUploadHiddenInput.displayName = "FileUploadHiddenInput";

package/dist/components/file-upload/file-upload-hidden-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useFileUploadContext } from './use-file-upload-context.js';
 
 const FileUploadHiddenInput = forwardRef(
   (props, ref) => {
     const fileUpload = useFileUploadContext();
     const mergedProps = mergeProps(fileUpload.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 FileUploadHiddenInput.displayName = "FileUploadHiddenInput";

package/dist/components/file-upload/file-upload-root.cjs

@@ -28,6 +28,7 @@ const FileUploadRoot = react.forwardRef((props, ref) => {
     "onFileAccept",
     "onFileChange",
     "onFileReject",
+    "required",
     "translations",
     "validate"
   ]);

package/dist/components/file-upload/file-upload-root.js

@@ -24,6 +24,7 @@ const FileUploadRoot = forwardRef((props, ref) => {
     "onFileAccept",
     "onFileChange",
     "onFileReject",
+    "required",
     "translations",
     "validate"
   ]);

package/dist/components/file-upload/use-file-upload.cjs

@@ -9,6 +9,7 @@ const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,9 +33,16 @@ const fileUpload__namespace = /*#__PURE__*/_interopNamespaceDefault(fileUpload);
 const useFileUpload = (props = {}) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    required: field?.required,
     getRootNode,
     ...props
   };

package/dist/components/file-upload/use-file-upload.js

@@ -5,13 +5,21 @@ import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldContext } from '../field/use-field-context.js';
 
 const useFileUpload = (props = {}) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    required: field?.required,
     getRootNode,
     ...props
   };

package/dist/components/index.cjs

@@ -178,6 +178,17 @@ const useEditable = require('./editable/use-editable.cjs');
 const useEditableContext = require('./editable/use-editable-context.cjs');
 const editable = require('./editable/editable.cjs');
 const factory = require('./factory.cjs');
+const fieldContext = require('./field/field-context.cjs');
+const fieldErrorText = require('./field/field-error-text.cjs');
+const fieldHelperText = require('./field/field-helper-text.cjs');
+const fieldInput = require('./field/field-input.cjs');
+const fieldLabel = require('./field/field-label.cjs');
+const fieldSelect = require('./field/field-select.cjs');
+const fieldRoot = require('./field/field-root.cjs');
+const fieldRootProvider = require('./field/field-root-provider.cjs');
+const fieldTextarea = require('./field/field-textarea.cjs');
+const useFieldContext = require('./field/use-field-context.cjs');
+const field = require('./field/field.cjs');
 const fileUploadContext = require('./file-upload/file-upload-context.cjs');
 const fileUploadDropzone = require('./file-upload/file-upload-dropzone.cjs');
 const fileUploadHiddenInput = require('./file-upload/file-upload-hidden-input.cjs');
@@ -378,6 +389,7 @@ const signaturePadContext = require('./signature-pad/signature-pad-context.cjs')
 const signaturePadControl = require('./signature-pad/signature-pad-control.cjs');
 const signaturePadGuide = require('./signature-pad/signature-pad-guide.cjs');
 const signaturePadLabel = require('./signature-pad/signature-pad-label.cjs');
+const signaturePadHiddenInput = require('./signature-pad/signature-pad-hidden-input.cjs');
 const signaturePadRoot = require('./signature-pad/signature-pad-root.cjs');
 const signaturePadRootProvider = require('./signature-pad/signature-pad-root-provider.cjs');
 const signaturePadSegment = require('./signature-pad/signature-pad-segment.cjs');
@@ -672,6 +684,17 @@ exports.useEditableContext = useEditableContext.useEditableContext;
 exports.Editable = editable;
 exports.ark = factory.ark;
 exports.jsxFactory = factory.jsxFactory;
+exports.FieldContext = fieldContext.FieldContext;
+exports.FieldErrorText = fieldErrorText.FieldErrorText;
+exports.FieldHelperText = fieldHelperText.FieldHelperText;
+exports.FieldInput = fieldInput.FieldInput;
+exports.FieldLabel = fieldLabel.FieldLabel;
+exports.FieldSelect = fieldSelect.FieldSelect;
+exports.FieldRoot = fieldRoot.FieldRoot;
+exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
+exports.FieldTextarea = fieldTextarea.FieldTextarea;
+exports.useFieldContext = useFieldContext.useFieldContext;
+exports.Field = field;
 exports.FileUploadContext = fileUploadContext.FileUploadContext;
 exports.FileUploadDropzone = fileUploadDropzone.FileUploadDropzone;
 exports.FileUploadHiddenInput = fileUploadHiddenInput.FileUploadHiddenInput;
@@ -873,6 +896,7 @@ exports.SignaturePadContext = signaturePadContext.SignaturePadContext;
 exports.SignaturePadControl = signaturePadControl.SignaturePadControl;
 exports.SignaturePadGuide = signaturePadGuide.SignaturePadGuide;
 exports.SignaturePadLabel = signaturePadLabel.SignaturePadLabel;
+exports.SignaturePadHiddenInput = signaturePadHiddenInput.SignaturePadHiddenInput;
 exports.SignaturePadRoot = signaturePadRoot.SignaturePadRoot;
 exports.SignaturePadRootProvider = signaturePadRootProvider.SignaturePadRootProvider;
 exports.SignaturePadSegment = signaturePadSegment.SignaturePadSegment;

package/dist/components/index.d.cts

@@ -10,6 +10,7 @@ export * from './date-picker';
 export * from './dialog';
 export * from './editable';
 export * from './factory';
+export * from './field';
 export * from './file-upload';
 export * from './format';
 export * from './hover-card';

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './date-picker';
 export * from './dialog';
 export * from './editable';
 export * from './factory';
+export * from './field';
 export * from './file-upload';
 export * from './format';
 export * from './hover-card';

package/dist/components/index.js

@@ -185,6 +185,18 @@ export { useEditableContext } from './editable/use-editable-context.js';
 import * as editable from './editable/editable.js';
 export { editable as Editable };
 export { ark, jsxFactory } from './factory.js';
+export { FieldContext } from './field/field-context.js';
+export { FieldErrorText } from './field/field-error-text.js';
+export { FieldHelperText } from './field/field-helper-text.js';
+export { FieldInput } from './field/field-input.js';
+export { FieldLabel } from './field/field-label.js';
+export { FieldSelect } from './field/field-select.js';
+export { FieldRoot } from './field/field-root.js';
+export { FieldRootProvider } from './field/field-root-provider.js';
+export { FieldTextarea } from './field/field-textarea.js';
+export { useFieldContext } from './field/use-field-context.js';
+import * as field from './field/field.js';
+export { field as Field };
 export { FileUploadContext } from './file-upload/file-upload-context.js';
 export { FileUploadDropzone } from './file-upload/file-upload-dropzone.js';
 export { FileUploadHiddenInput } from './file-upload/file-upload-hidden-input.js';
@@ -399,6 +411,7 @@ export { SignaturePadContext } from './signature-pad/signature-pad-context.js';
 export { SignaturePadControl } from './signature-pad/signature-pad-control.js';
 export { SignaturePadGuide } from './signature-pad/signature-pad-guide.js';
 export { SignaturePadLabel } from './signature-pad/signature-pad-label.js';
+export { SignaturePadHiddenInput } from './signature-pad/signature-pad-hidden-input.js';
 export { SignaturePadRoot } from './signature-pad/signature-pad-root.js';
 export { SignaturePadRootProvider } from './signature-pad/signature-pad-root-provider.js';
 export { SignaturePadSegment } from './signature-pad/signature-pad-segment.js';

package/dist/components/menu/menu-checkbox-item.cjs

@@ -26,9 +26,9 @@ const MenuCheckboxItem = react.forwardRef((props, ref) => {
     type: "checkbox"
   };
   const menu = useMenuContext.useMenuContext();
-  const item = menu.getOptionItemState(optionItemProps);
   const mergedProps = react$1.mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: item, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  const optionItemState = menu.getOptionItemState(optionItemProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 

package/dist/components/menu/menu-checkbox-item.js

@@ -22,9 +22,9 @@ const MenuCheckboxItem = forwardRef((props, ref) => {
     type: "checkbox"
   };
   const menu = useMenuContext();
-  const item = menu.getOptionItemState(optionItemProps);
   const mergedProps = mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
-  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: item, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  const optionItemState = menu.getOptionItemState(optionItemProps);
+  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 

package/dist/components/menu/menu-radio-item.cjs

@@ -29,8 +29,8 @@ const MenuRadioItem = react.forwardRef((props, ref) => {
     onCheckedChange: () => itemGroup.onValueChange?.({ value: partialItemProps.value })
   };
   const mergedProps = react$1.mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
-  const itemState = menu.getItemState(optionItemProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  const optionItemState = menu.getOptionItemState(optionItemProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 MenuRadioItem.displayName = "MenuRadioItem";
 

package/dist/components/menu/menu-radio-item.js

@@ -25,8 +25,8 @@ const MenuRadioItem = forwardRef((props, ref) => {
     onCheckedChange: () => itemGroup.onValueChange?.({ value: partialItemProps.value })
   };
   const mergedProps = mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
-  const itemState = menu.getItemState(optionItemProps);
-  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  const optionItemState = menu.getOptionItemState(optionItemProps);
+  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 MenuRadioItem.displayName = "MenuRadioItem";
 

package/dist/components/number-input/number-input-input.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
 
 const NumberInputInput = react.forwardRef(
   (props, ref) => {
     const numberInput = useNumberInputContext.useNumberInputContext();
     const mergedProps = react$1.mergeProps(numberInput.getInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 NumberInputInput.displayName = "NumberInputInput";

package/dist/components/number-input/number-input-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useNumberInputContext } from './use-number-input-context.js';
 
 const NumberInputInput = forwardRef(
   (props, ref) => {
     const numberInput = useNumberInputContext();
     const mergedProps = mergeProps(numberInput.getInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 NumberInputInput.displayName = "NumberInputInput";

package/dist/components/number-input/number-input-root.cjs

@@ -34,6 +34,7 @@ const NumberInputRoot = react.forwardRef((props, ref) => {
     "onValueInvalid",
     "pattern",
     "readOnly",
+    "required",
     "spinOnPress",
     "step",
     "translations",

package/dist/components/number-input/number-input-root.js

@@ -30,6 +30,7 @@ const NumberInputRoot = forwardRef((props, ref) => {
     "onValueInvalid",
     "pattern",
     "readOnly",
+    "required",
     "spinOnPress",
     "step",
     "translations",

package/dist/components/number-input/use-number-input.cjs

@@ -9,6 +9,7 @@ const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,8 +33,17 @@ const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput
 const useNumberInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     value: props.defaultValue,

package/dist/components/number-input/use-number-input.js

@@ -5,12 +5,22 @@ import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldContext } from '../field/use-field-context.js';
 
 const useNumberInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     value: props.defaultValue,