@ark-ui/react 3.4.0-1 → 3.5.0

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/editable.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as editableAnatomy } from '@zag-js/editable';

package/dist/components/editable/editable.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as editableAnatomy } from '@zag-js/editable';

package/dist/components/editable/index.cjs

@@ -15,7 +15,8 @@ const editableRootProvider = require('./editable-root-provider.cjs');
 const editableSubmitTrigger = require('./editable-submit-trigger.cjs');
 const useEditable = require('./use-editable.cjs');
 const useEditableContext = require('./use-editable-context.cjs');
-const editable = require('./editable.cjs');
+const editable$1 = require('./editable.cjs');
+const editable = require('@zag-js/editable');
 
 
 
@@ -32,4 +33,8 @@ exports.EditableRootProvider = editableRootProvider.EditableRootProvider;
 exports.EditableSubmitTrigger = editableSubmitTrigger.EditableSubmitTrigger;
 exports.useEditable = useEditable.useEditable;
 exports.useEditableContext = useEditableContext.useEditableContext;
-exports.Editable = editable;
+exports.Editable = editable$1;
+Object.defineProperty(exports, "editableAnatomy", {
+  enumerable: true,
+  get: () => editable.anatomy
+});

package/dist/components/editable/index.d.cts

@@ -12,4 +12,5 @@ export { EditableRootProvider, type EditableRootProviderProps, type EditableRoot
 export { EditableSubmitTrigger, type EditableSubmitTriggerProps, type EditableSubmitTriggerBaseProps, } from './editable-submit-trigger';
 export { useEditable, type UseEditableProps, type UseEditableReturn } from './use-editable';
 export { useEditableContext, type UseEditableContext } from './use-editable-context';
+export { editableAnatomy } from './editable.anatomy';
 export * as Editable from './editable';

package/dist/components/editable/index.d.ts

@@ -12,4 +12,5 @@ export { EditableRootProvider, type EditableRootProviderProps, type EditableRoot
 export { EditableSubmitTrigger, type EditableSubmitTriggerProps, type EditableSubmitTriggerBaseProps, } from './editable-submit-trigger';
 export { useEditable, type UseEditableProps, type UseEditableReturn } from './use-editable';
 export { useEditableContext, type UseEditableContext } from './use-editable-context';
+export { editableAnatomy } from './editable.anatomy';
 export * as Editable from './editable';

package/dist/components/editable/index.js

@@ -13,3 +13,4 @@ export { useEditable } from './use-editable.js';
 export { useEditableContext } from './use-editable-context.js';
 import * as editable from './editable.js';
 export { editable as Editable };
+export { anatomy as editableAnatomy } from '@zag-js/editable';

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 };

package/dist/components/field/field-label.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 FieldLabel = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = react$1.mergeProps(field?.getLabelProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+FieldLabel.displayName = "FieldLabel";
+
+exports.FieldLabel = FieldLabel;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldLabelBaseProps extends PolymorphicProps {
+}
+export interface FieldLabelProps extends HTMLProps<'label'>, FieldLabelBaseProps {
+}
+export declare const FieldLabel: ForwardRefExoticComponent<FieldLabelProps & RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldLabelBaseProps extends PolymorphicProps {
+}
+export interface FieldLabelProps extends HTMLProps<'label'>, FieldLabelBaseProps {
+}
+export declare const FieldLabel: ForwardRefExoticComponent<FieldLabelProps & RefAttributes<HTMLLabelElement>>;

package/dist/components/field/field-label.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 FieldLabel = forwardRef((props, ref) => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps(field?.getLabelProps(), props);
+  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+});
+FieldLabel.displayName = "FieldLabel";
+
+export { FieldLabel };

package/dist/components/field/field-root-provider.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 createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldRootProvider = react.forwardRef(
+  (props, ref) => {
+    const [{ value: field }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+    const mergedProps = react$1.mergeProps(field.getRootProps(), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(useFieldContext.FieldProvider, { value: field, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  }
+);
+FieldRootProvider.displayName = "FieldRootProvider";
+
+exports.FieldRootProvider = FieldRootProvider;

package/dist/components/field/field-root-provider.d.cts

@@ -0,0 +1,13 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseFieldReturn } from './use-field';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseFieldReturn;
+}
+export interface FieldRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
+}
+export interface FieldRootProviderProps extends HTMLProps<'div'>, FieldRootProviderBaseProps {
+}
+export declare const FieldRootProvider: ForwardRefExoticComponent<FieldRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/field/field-root-provider.d.ts

@@ -0,0 +1,13 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseFieldReturn } from './use-field';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseFieldReturn;
+}
+export interface FieldRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
+}
+export interface FieldRootProviderProps extends HTMLProps<'div'>, FieldRootProviderBaseProps {
+}
+export declare const FieldRootProvider: ForwardRefExoticComponent<FieldRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/field/field-root-provider.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { FieldProvider } from './use-field-context.js';
+
+const FieldRootProvider = forwardRef(
+  (props, ref) => {
+    const [{ value: field }, localProps] = createSplitProps()(props, ["value"]);
+    const mergedProps = mergeProps(field.getRootProps(), localProps);
+    return /* @__PURE__ */ jsx(FieldProvider, { value: field, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  }
+);
+FieldRootProvider.displayName = "FieldRootProvider";
+
+export { FieldRootProvider };

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

@@ -0,0 +1,29 @@
+'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 composeRefs = require('../../utils/compose-refs.cjs');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useField = require('./use-field.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldRoot = react.forwardRef((props, ref) => {
+  const [useFieldProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "id",
+    "disabled",
+    "invalid",
+    "readOnly",
+    "required"
+  ]);
+  const field = useField.useField(useFieldProps);
+  const mergedProps = react$1.mergeProps(field.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useFieldContext.FieldProvider, { value: field, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(ref, field.refs.rootRef) }) });
+});
+FieldRoot.displayName = "FieldRoot";
+
+exports.FieldRoot = FieldRoot;

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

@@ -0,0 +1,9 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseFieldProps } from './use-field';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps {
+}
+export interface FieldRootProps extends HTMLProps<'div'>, FieldRootBaseProps {
+}
+export declare const FieldRoot: ForwardRefExoticComponent<FieldRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseFieldProps } from './use-field';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps {
+}
+export interface FieldRootProps extends HTMLProps<'div'>, FieldRootBaseProps {
+}
+export declare const FieldRoot: ForwardRefExoticComponent<FieldRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useField } from './use-field.js';
+import { FieldProvider } from './use-field-context.js';
+
+const FieldRoot = forwardRef((props, ref) => {
+  const [useFieldProps, localProps] = createSplitProps()(props, [
+    "id",
+    "disabled",
+    "invalid",
+    "readOnly",
+    "required"
+  ]);
+  const field = useField(useFieldProps);
+  const mergedProps = mergeProps(field.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(FieldProvider, { value: field, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(ref, field.refs.rootRef) }) });
+});
+FieldRoot.displayName = "FieldRoot";
+
+export { FieldRoot };

package/dist/components/field/field-select.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 FieldSelect = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = react$1.mergeProps(field?.getSelectProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.select, { ...mergedProps, ref });
+});
+FieldSelect.displayName = "FieldSelect";
+
+exports.FieldSelect = FieldSelect;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldSelectBaseProps extends PolymorphicProps {
+}
+export interface FieldSelectProps extends HTMLProps<'select'>, FieldSelectBaseProps {
+}
+export declare const FieldSelect: ForwardRefExoticComponent<FieldSelectProps & RefAttributes<HTMLSelectElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldSelectBaseProps extends PolymorphicProps {
+}
+export interface FieldSelectProps extends HTMLProps<'select'>, FieldSelectBaseProps {
+}
+export declare const FieldSelect: ForwardRefExoticComponent<FieldSelectProps & RefAttributes<HTMLSelectElement>>;

package/dist/components/field/field-select.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 FieldSelect = forwardRef((props, ref) => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps(field?.getSelectProps(), props);
+  return /* @__PURE__ */ jsx(ark.select, { ...mergedProps, ref });
+});
+FieldSelect.displayName = "FieldSelect";
+
+export { FieldSelect };

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@zag-js/core');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldTextarea = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = core.mergeProps(field?.getTextareaProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.textarea, { ...mergedProps, ref });
+});
+FieldTextarea.displayName = "FieldTextarea";
+
+exports.FieldTextarea = FieldTextarea;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldTextareaBaseProps extends PolymorphicProps {
+}
+export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {
+}
+export declare const FieldTextarea: ForwardRefExoticComponent<FieldTextareaProps & RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldTextareaBaseProps extends PolymorphicProps {
+}
+export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {
+}
+export declare const FieldTextarea: ForwardRefExoticComponent<FieldTextareaProps & RefAttributes<HTMLTextAreaElement>>;