@ark-ui/react 3.4.0-1 → 3.4.0

package/dist/components/checkbox/checkbox-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 useCheckboxContext = require('./use-checkbox-context.cjs');
 
 const CheckboxHiddenInput = react.forwardRef(
   (props, ref) => {
     const checkbox = useCheckboxContext.useCheckboxContext();
     const mergedProps = react$1.mergeProps(checkbox.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 });
   }
 );
 CheckboxHiddenInput.displayName = "CheckboxHiddenInput";

package/dist/components/checkbox/checkbox-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 { useCheckboxContext } from './use-checkbox-context.js';
 
 const CheckboxHiddenInput = forwardRef(
   (props, ref) => {
     const checkbox = useCheckboxContext();
     const mergedProps = mergeProps(checkbox.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 CheckboxHiddenInput.displayName = "CheckboxHiddenInput";

package/dist/components/checkbox/use-checkbox.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');
 const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -32,6 +33,7 @@ const checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
 
 const useCheckbox = (ownProps = {}) => {
   const checkboxGroup = useCheckboxGroupContext.useCheckboxGroupContext();
+  const field = useFieldContext.useFieldContext();
   const props = react.useMemo(() => {
     return react$1.mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
@@ -39,7 +41,15 @@ const useCheckbox = (ownProps = {}) => {
   const { dir } = useLocaleContext.useLocaleContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    invalid: field?.invalid,
+    required: field?.required,
     getRootNode,
     checked: props.defaultChecked,
     ...props

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

@@ -5,10 +5,12 @@ import { useMemo, 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';
 import { useCheckboxGroupContext } from './use-checkbox-group-context.js';
 
 const useCheckbox = (ownProps = {}) => {
   const checkboxGroup = useCheckboxGroupContext();
+  const field = useFieldContext();
   const props = useMemo(() => {
     return mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
@@ -16,7 +18,15 @@ const useCheckbox = (ownProps = {}) => {
   const { dir } = useLocaleContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    invalid: field?.invalid,
+    required: field?.required,
     getRootNode,
     checked: props.defaultChecked,
     ...props

package/dist/components/color-picker/color-picker-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 useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerHiddenInput = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
     const mergedProps = react$1.mergeProps(colorPicker.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 });
   }
 );
 ColorPickerHiddenInput.displayName = "ColorPickerHiddenInput";

package/dist/components/color-picker/color-picker-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 { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerHiddenInput = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
     const mergedProps = mergeProps(colorPicker.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 ColorPickerHiddenInput.displayName = "ColorPickerHiddenInput";

package/dist/components/color-picker/color-picker-root.cjs

@@ -39,6 +39,7 @@ const ColorPickerRoot = react.forwardRef((props, ref) => {
       "open",
       "positioning",
       "readOnly",
+      "required",
       "value"
     ]
   );

package/dist/components/color-picker/color-picker-root.js

@@ -35,6 +35,7 @@ const ColorPickerRoot = forwardRef((props, ref) => {
       "open",
       "positioning",
       "readOnly",
+      "required",
       "value"
     ]
   );

package/dist/components/color-picker/use-color-picker.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,17 @@ const colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker
 const useColorPicker = (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
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     open: props.defaultOpen,
     "open.controlled": props.open !== void 0,

package/dist/components/color-picker/use-color-picker.js

@@ -5,13 +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 useColorPicker = (props) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     open: props.defaultOpen,
     "open.controlled": props.open !== void 0,

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

@@ -7,12 +7,14 @@ 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 useComboboxContext = require('./use-combobox-context.cjs');
 
 const ComboboxInput = react.forwardRef((props, ref) => {
   const combobox = useComboboxContext.useComboboxContext();
   const mergedProps = react$1.mergeProps(combobox.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 });
 });
 ComboboxInput.displayName = "ComboboxInput";
 

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

@@ -3,12 +3,14 @@ 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 { useComboboxContext } from './use-combobox-context.js';
 
 const ComboboxInput = forwardRef((props, ref) => {
   const combobox = useComboboxContext();
   const mergedProps = mergeProps(combobox.getInputProps(), props);
-  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
 });
 ComboboxInput.displayName = "ComboboxInput";
 

package/dist/components/combobox/combobox-root.cjs

@@ -55,6 +55,7 @@ const ComboboxImpl = (props, ref) => {
     "placeholder",
     "positioning",
     "readOnly",
+    "required",
     "scrollToIndexFn",
     "selectionBehavior",
     "translations",

package/dist/components/combobox/combobox-root.js

@@ -51,6 +51,7 @@ const ComboboxImpl = (props, ref) => {
     "placeholder",
     "positioning",
     "readOnly",
+    "required",
     "scrollToIndexFn",
     "selectionBehavior",
     "translations",

package/dist/components/combobox/use-combobox.cjs

@@ -10,6 +10,7 @@ const useEnvironmentContext = require('../../providers/environment/use-environme
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const createSplitProps = require('../../utils/create-split-props.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' } });
@@ -43,8 +44,17 @@ const useCombobox = (props) => {
   );
   const { dir } = useLocaleContext.useLocaleContext();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  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,
     collection,

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

@@ -6,6 +6,7 @@ import { useEnvironmentContext } from '../../providers/environment/use-environme
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldContext } from '../field/use-field-context.js';
 
 const useCombobox = (props) => {
   const [collectionOptions, comboboxProps] = createSplitProps()(props, [
@@ -20,8 +21,17 @@ const useCombobox = (props) => {
   );
   const { dir } = useLocaleContext();
   const { getRootNode } = useEnvironmentContext();
+  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,
     collection,

package/dist/components/dialog/dialog-description.d.cts

@@ -5,4 +5,4 @@ export interface DialogDescriptionBaseProps extends PolymorphicProps {
 }
 export interface DialogDescriptionProps extends HTMLProps<'div'>, DialogDescriptionBaseProps {
 }
-export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLDivElement>>;

package/dist/components/dialog/dialog-description.d.ts

@@ -5,4 +5,4 @@ export interface DialogDescriptionBaseProps extends PolymorphicProps {
 }
 export interface DialogDescriptionProps extends HTMLProps<'div'>, DialogDescriptionBaseProps {
 }
-export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLDivElement>>;

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

@@ -7,12 +7,14 @@ 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 useEditableContext = require('./use-editable-context.cjs');
 
 const EditableInput = react.forwardRef((props, ref) => {
   const editable = useEditableContext.useEditableContext();
   const mergedProps = react$1.mergeProps(editable.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 });
 });
 EditableInput.displayName = "EditableInput";
 

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

@@ -3,12 +3,14 @@ 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 { useEditableContext } from './use-editable-context.js';
 
 const EditableInput = forwardRef((props, ref) => {
   const editable = useEditableContext();
   const mergedProps = mergeProps(editable.getInputProps(), props);
-  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
 });
 EditableInput.displayName = "EditableInput";
 

package/dist/components/editable/editable-root.cjs

@@ -33,6 +33,7 @@ const EditableRoot = react.forwardRef((props, ref) => {
     "onValueRevert",
     "placeholder",
     "readOnly",
+    "required",
     "selectOnFocus",
     "startWithEditView",
     "submitMode",

package/dist/components/editable/editable-root.js

@@ -29,6 +29,7 @@ const EditableRoot = forwardRef((props, ref) => {
     "onValueRevert",
     "placeholder",
     "readOnly",
+    "required",
     "selectOnFocus",
     "startWithEditView",
     "submitMode",

package/dist/components/editable/use-editable.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,18 @@ const editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
 const useEditable = (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
+    },
     dir,
+    disabled: field?.disabled,
+    invalid: field?.invalid,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     value: props.defaultValue,
     ...props

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

@@ -5,13 +5,23 @@ 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 useEditable = (props = {}) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    invalid: field?.invalid,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     value: props.defaultValue,
     ...props

package/dist/components/field/field-context.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldContext = (props) => props.children(useFieldContext.useFieldContext());
+
+exports.FieldContext = FieldContext;

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { UseFieldContext } from './use-field-context';
+
+export interface FieldContextProps {
+    children: (context: UseFieldContext) => ReactNode;
+}
+export declare const FieldContext: (props: FieldContextProps) => ReactNode;

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { UseFieldContext } from './use-field-context';
+
+export interface FieldContextProps {
+    children: (context: UseFieldContext) => ReactNode;
+}
+export declare const FieldContext: (props: FieldContextProps) => ReactNode;

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

@@ -0,0 +1,6 @@
+'use client';
+import { useFieldContext } from './use-field-context.js';
+
+const FieldContext = (props) => props.children(useFieldContext());
+
+export { FieldContext };

package/dist/components/field/field-error-text.cjs

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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('./use-field-context.cjs');
+
+const FieldErrorText = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = react$1.mergeProps(field.getErrorTextProps(), props);
+  if (field?.invalid) {
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+  }
+  return null;
+});
+FieldErrorText.displayName = "FieldErrorText";
+
+exports.FieldErrorText = FieldErrorText;

package/dist/components/field/field-error-text.d.cts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldErrorTextBaseProps extends PolymorphicProps {
+}
+export interface FieldErrorTextProps extends HTMLProps<'span'>, FieldErrorTextBaseProps {
+}
+export declare const FieldErrorText: ForwardRefExoticComponent<FieldErrorTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/field/field-error-text.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldErrorTextBaseProps extends PolymorphicProps {
+}
+export interface FieldErrorTextProps extends HTMLProps<'span'>, FieldErrorTextBaseProps {
+}
+export declare const FieldErrorText: ForwardRefExoticComponent<FieldErrorTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/field/field-error-text.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useFieldContext } from './use-field-context.js';
+
+const FieldErrorText = forwardRef((props, ref) => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps(field.getErrorTextProps(), props);
+  if (field?.invalid) {
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+  }
+  return null;
+});
+FieldErrorText.displayName = "FieldErrorText";
+
+export { FieldErrorText };

package/dist/components/field/field-helper-text.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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('./use-field-context.cjs');
+
+const FieldHelperText = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = react$1.mergeProps(field?.getHelperTextProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+});
+FieldHelperText.displayName = "FieldHelperText";
+
+exports.FieldHelperText = FieldHelperText;

package/dist/components/field/field-helper-text.d.cts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldHelperTextBaseProps extends PolymorphicProps {
+}
+export interface FieldHelperTextProps extends HTMLProps<'span'>, FieldHelperTextBaseProps {
+}
+export declare const FieldHelperText: ForwardRefExoticComponent<FieldHelperTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/field/field-helper-text.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldHelperTextBaseProps extends PolymorphicProps {
+}
+export interface FieldHelperTextProps extends HTMLProps<'span'>, FieldHelperTextBaseProps {
+}
+export declare const FieldHelperText: ForwardRefExoticComponent<FieldHelperTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/field/field-helper-text.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useFieldContext } from './use-field-context.js';
+
+const FieldHelperText = forwardRef((props, ref) => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps(field?.getHelperTextProps(), props);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+});
+FieldHelperText.displayName = "FieldHelperText";
+
+export { FieldHelperText };

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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('./use-field-context.cjs');
+
+const FieldInput = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = react$1.mergeProps(field?.getInputProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+});
+FieldInput.displayName = "FieldInput";
+
+exports.FieldInput = FieldInput;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldInputBaseProps extends PolymorphicProps {
+}
+export interface FieldInputProps extends HTMLProps<'input'>, FieldInputBaseProps {
+}
+export declare const FieldInput: ForwardRefExoticComponent<FieldInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldInputBaseProps extends PolymorphicProps {
+}
+export interface FieldInputProps extends HTMLProps<'input'>, FieldInputBaseProps {
+}
+export declare const FieldInput: ForwardRefExoticComponent<FieldInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useFieldContext } from './use-field-context.js';
+
+const FieldInput = forwardRef((props, ref) => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps(field?.getInputProps(), props);
+  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+});
+FieldInput.displayName = "FieldInput";
+
+export { FieldInput };