@ark-ui/react 3.4.0-0 → 3.4.0

package/dist/components/editable/editable-submit-trigger.d.ts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type EditableSubmitTriggerBaseProps = {};
-export interface EditableSubmitTriggerProps extends HTMLArkProps<'button'>, EditableSubmitTriggerBaseProps {
+export interface EditableSubmitTriggerBaseProps extends PolymorphicProps {
+}
+export interface EditableSubmitTriggerProps extends HTMLProps<'button'>, EditableSubmitTriggerBaseProps {
 }
 export declare const EditableSubmitTrigger: ForwardRefExoticComponent<EditableSubmitTriggerProps & RefAttributes<HTMLButtonElement>>;

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/factory.cjs

@@ -7,10 +7,8 @@ const react = require('react');
 const composeRefs = require('../utils/compose-refs.cjs');
 
 function getRef(child) {
-  if ("ref" in child.props)
-    return child.props.ref;
-  if ("ref" in child)
-    return child.ref;
+  if ("ref" in child.props) return child.props.ref;
+  if ("ref" in child) return child.ref;
   return null;
 }
 const withAsChild = (Component) => {

package/dist/components/factory.d.cts

@@ -1,18 +1,18 @@
 import { default as React, ComponentPropsWithoutRef, JSX } from 'react';
 
-type JsxElements = {
-    [E in keyof JSX.IntrinsicElements]: ArkForwardRefComponent<E>;
-};
-type ArkForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<ArkPropsWithRef<E>>;
-type ArkPropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
-    asChild?: boolean;
-};
-export type HTMLArkProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T> & {
+export interface PolymorphicProps {
     /**
-     * Render as a different element type.
+     * Use the provided child element as the default rendered element, combining their props and behavior.
      */
     asChild?: boolean;
+}
+type JsxElements = {
+    [E in keyof JSX.IntrinsicElements]: ArkForwardRefComponent<E>;
 };
+type ArkForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<ArkPropsWithRef<E>>;
+type ArkPropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & PolymorphicProps;
+export type HTMLProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T>;
+export type HTMLArkProps<T extends keyof JSX.IntrinsicElements> = HTMLProps<T> & PolymorphicProps;
 export declare const jsxFactory: () => JsxElements;
 export declare const ark: JsxElements;
 export {};

package/dist/components/factory.d.ts

@@ -1,18 +1,18 @@
 import { default as React, ComponentPropsWithoutRef, JSX } from 'react';
 
-type JsxElements = {
-    [E in keyof JSX.IntrinsicElements]: ArkForwardRefComponent<E>;
-};
-type ArkForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<ArkPropsWithRef<E>>;
-type ArkPropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
-    asChild?: boolean;
-};
-export type HTMLArkProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T> & {
+export interface PolymorphicProps {
     /**
-     * Render as a different element type.
+     * Use the provided child element as the default rendered element, combining their props and behavior.
      */
     asChild?: boolean;
+}
+type JsxElements = {
+    [E in keyof JSX.IntrinsicElements]: ArkForwardRefComponent<E>;
 };
+type ArkForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<ArkPropsWithRef<E>>;
+type ArkPropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & PolymorphicProps;
+export type HTMLProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T>;
+export type HTMLArkProps<T extends keyof JSX.IntrinsicElements> = HTMLProps<T> & PolymorphicProps;
 export declare const jsxFactory: () => JsxElements;
 export declare const ark: JsxElements;
 export {};

package/dist/components/factory.js

@@ -3,10 +3,8 @@ import { memo, forwardRef, createElement, Children, isValidElement, cloneElement
 import { composeRefs } from '../utils/compose-refs.js';
 
 function getRef(child) {
-  if ("ref" in child.props)
-    return child.props.ref;
-  if ("ref" in child)
-    return child.ref;
+  if ("ref" in child.props) return child.props.ref;
+  if ("ref" in child) return child.ref;
   return null;
 }
 const withAsChild = (Component) => {

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