@ark-ui/react 5.0.1 → 5.2.0

package/dist/components/download-trigger/download-trigger.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const fileUtils = require('@zag-js/file-utils');
+const index = require('../../node_modules/@zag-js/utils/dist/index.cjs');
+const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const factory = require('../factory.cjs');
+
+const DownloadTrigger = react.forwardRef((props, ref) => {
+  const { fileName, data, mimeType, ...rest } = props;
+  const { getWindow } = useEnvironmentContext.useEnvironmentContext();
+  const download = (data2) => {
+    fileUtils.downloadFile({ file: data2, name: fileName, type: mimeType, win: getWindow() });
+  };
+  const onClick = (e) => {
+    props.onClick?.(e);
+    if (e.defaultPrevented) return;
+    if (index.isFunction(data)) {
+      const maybePromise = data();
+      if (maybePromise instanceof Promise) {
+        maybePromise.then((data2) => download(data2));
+      } else {
+        download(maybePromise);
+      }
+    } else {
+      download(data);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...rest, type: "button", onClick });
+});
+DownloadTrigger.displayName = "DownloadTrigger";
+
+exports.DownloadTrigger = DownloadTrigger;

package/dist/components/download-trigger/download-trigger.d.cts

@@ -0,0 +1,22 @@
+import { FileMimeType } from '@zag-js/file-utils';
+import { MaybePromise } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type DownloadableData = string | Blob | File;
+export interface DownloadTriggerBaseProps extends PolymorphicProps {
+    /**
+     * The name of the file to download
+     */
+    fileName: string;
+    /**
+     * The data to download
+     */
+    data: DownloadableData | (() => MaybePromise<DownloadableData>);
+    /**
+     * The MIME type of the data to download
+     */
+    mimeType: FileMimeType;
+}
+export interface DownloadTriggerProps extends HTMLProps<'button'>, DownloadTriggerBaseProps {
+}
+export declare const DownloadTrigger: ForwardRefExoticComponent<DownloadTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/download-trigger/download-trigger.d.ts

@@ -0,0 +1,22 @@
+import { FileMimeType } from '@zag-js/file-utils';
+import { MaybePromise } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type DownloadableData = string | Blob | File;
+export interface DownloadTriggerBaseProps extends PolymorphicProps {
+    /**
+     * The name of the file to download
+     */
+    fileName: string;
+    /**
+     * The data to download
+     */
+    data: DownloadableData | (() => MaybePromise<DownloadableData>);
+    /**
+     * The MIME type of the data to download
+     */
+    mimeType: FileMimeType;
+}
+export interface DownloadTriggerProps extends HTMLProps<'button'>, DownloadTriggerBaseProps {
+}
+export declare const DownloadTrigger: ForwardRefExoticComponent<DownloadTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/download-trigger/download-trigger.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { downloadFile } from '@zag-js/file-utils';
+import { isFunction } from '../../node_modules/@zag-js/utils/dist/index.js';
+import { forwardRef } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
+import { ark } from '../factory.js';
+
+const DownloadTrigger = forwardRef((props, ref) => {
+  const { fileName, data, mimeType, ...rest } = props;
+  const { getWindow } = useEnvironmentContext();
+  const download = (data2) => {
+    downloadFile({ file: data2, name: fileName, type: mimeType, win: getWindow() });
+  };
+  const onClick = (e) => {
+    props.onClick?.(e);
+    if (e.defaultPrevented) return;
+    if (isFunction(data)) {
+      const maybePromise = data();
+      if (maybePromise instanceof Promise) {
+        maybePromise.then((data2) => download(data2));
+      } else {
+        download(maybePromise);
+      }
+    } else {
+      download(data);
+    }
+  };
+  return /* @__PURE__ */ jsx(ark.button, { ref, ...rest, type: "button", onClick });
+});
+DownloadTrigger.displayName = "DownloadTrigger";
+
+export { DownloadTrigger };

package/dist/components/download-trigger/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const downloadTrigger = require('./download-trigger.cjs');
+
+
+
+exports.DownloadTrigger = downloadTrigger.DownloadTrigger;

package/dist/components/download-trigger/index.d.cts

@@ -0,0 +1,2 @@
+export { DownloadTrigger } from './download-trigger';
+export type { DownloadTriggerBaseProps, DownloadTriggerProps } from './download-trigger';

package/dist/components/download-trigger/index.d.ts

@@ -0,0 +1,2 @@
+export { DownloadTrigger } from './download-trigger';
+export type { DownloadTriggerBaseProps, DownloadTriggerProps } from './download-trigger';

package/dist/components/download-trigger/index.js

@@ -0,0 +1 @@
+export { DownloadTrigger } from './download-trigger.js';

package/dist/components/field/index.cjs

@@ -13,6 +13,7 @@ const fieldRootProvider = require('./field-root-provider.cjs');
 const fieldSelect = require('./field-select.cjs');
 const fieldTextarea = require('./field-textarea.cjs');
 const field_anatomy = require('./field.anatomy.cjs');
+const useField = require('./use-field.cjs');
 const useFieldContext = require('./use-field-context.cjs');
 const field = require('./field.cjs');
 
@@ -29,5 +30,6 @@ exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
 exports.FieldSelect = fieldSelect.FieldSelect;
 exports.FieldTextarea = fieldTextarea.FieldTextarea;
 exports.fieldAnatomy = field_anatomy.fieldAnatomy;
+exports.useField = useField.useField;
 exports.useFieldContext = useFieldContext.useFieldContext;
 exports.Field = field;

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

@@ -9,5 +9,6 @@ export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProvi
 export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
 export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps } from './field-textarea';
 export { fieldAnatomy } from './field.anatomy';
+export { useField, type UseFieldProps, type UseFieldReturn } from './use-field';
 export { useFieldContext, type UseFieldContext } from './use-field-context';
 export * as Field from './field';

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

@@ -9,5 +9,6 @@ export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProvi
 export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
 export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps } from './field-textarea';
 export { fieldAnatomy } from './field.anatomy';
+export { useField, type UseFieldProps, type UseFieldReturn } from './use-field';
 export { useFieldContext, type UseFieldContext } from './use-field-context';
 export * as Field from './field';

package/dist/components/field/index.js

@@ -9,6 +9,7 @@ export { FieldRootProvider } from './field-root-provider.js';
 export { FieldSelect } from './field-select.js';
 export { FieldTextarea } from './field-textarea.js';
 export { fieldAnatomy } from './field.anatomy.js';
+export { useField } from './use-field.js';
 export { useFieldContext } from './use-field-context.js';
 import * as field from './field.js';
 export { field as Field };

package/dist/components/index.cjs

@@ -171,6 +171,7 @@ const dialogTrigger = require('./dialog/dialog-trigger.cjs');
 const useDialog = require('./dialog/use-dialog.cjs');
 const useDialogContext = require('./dialog/use-dialog-context.cjs');
 const dialog$1 = require('./dialog/dialog.cjs');
+const downloadTrigger = require('./download-trigger/download-trigger.cjs');
 const editableArea = require('./editable/editable-area.cjs');
 const editableCancelTrigger = require('./editable/editable-cancel-trigger.cjs');
 const editableContext = require('./editable/editable-context.cjs');
@@ -197,6 +198,7 @@ const fieldRootProvider = require('./field/field-root-provider.cjs');
 const fieldSelect = require('./field/field-select.cjs');
 const fieldTextarea = require('./field/field-textarea.cjs');
 const field_anatomy = require('./field/field.anatomy.cjs');
+const useField = require('./field/use-field.cjs');
 const useFieldContext = require('./field/use-field-context.cjs');
 const field = require('./field/field.cjs');
 const fieldsetContext = require('./fieldset/fieldset-context.cjs');
@@ -817,6 +819,7 @@ exports.DialogTrigger = dialogTrigger.DialogTrigger;
 exports.useDialog = useDialog.useDialog;
 exports.useDialogContext = useDialogContext.useDialogContext;
 exports.Dialog = dialog$1;
+exports.DownloadTrigger = downloadTrigger.DownloadTrigger;
 exports.EditableArea = editableArea.EditableArea;
 exports.EditableCancelTrigger = editableCancelTrigger.EditableCancelTrigger;
 exports.EditableContext = editableContext.EditableContext;
@@ -844,6 +847,7 @@ exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
 exports.FieldSelect = fieldSelect.FieldSelect;
 exports.FieldTextarea = fieldTextarea.FieldTextarea;
 exports.fieldAnatomy = field_anatomy.fieldAnatomy;
+exports.useField = useField.useField;
 exports.useFieldContext = useFieldContext.useFieldContext;
 exports.Field = field;
 exports.FieldsetContext = fieldsetContext.FieldsetContext;

package/dist/components/index.d.cts

@@ -9,6 +9,7 @@ export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';
 export * from './dialog';
+export * from './download-trigger';
 export * from './editable';
 export * from './factory';
 export * from './field';

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';
 export * from './dialog';
+export * from './download-trigger';
 export * from './editable';
 export * from './factory';
 export * from './field';

package/dist/components/index.js

@@ -177,6 +177,7 @@ export { useDialog } from './dialog/use-dialog.js';
 export { useDialogContext } from './dialog/use-dialog-context.js';
 import * as dialog from './dialog/dialog.js';
 export { dialog as Dialog };
+export { DownloadTrigger } from './download-trigger/download-trigger.js';
 export { EditableArea } from './editable/editable-area.js';
 export { EditableCancelTrigger } from './editable/editable-cancel-trigger.js';
 export { EditableContext } from './editable/editable-context.js';
@@ -204,6 +205,7 @@ export { FieldRootProvider } from './field/field-root-provider.js';
 export { FieldSelect } from './field/field-select.js';
 export { FieldTextarea } from './field/field-textarea.js';
 export { fieldAnatomy } from './field/field.anatomy.js';
+export { useField } from './field/use-field.js';
 export { useFieldContext } from './field/use-field-context.js';
 import * as field from './field/field.js';
 export { field as Field };

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

@@ -1,4 +1,4 @@
-export type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
+export type { ExpandCollapseDetails as SplitterExpandCollapseDetails, PanelData as SplitterPanelData, ResizeDetails as SplitterResizeDetails, ResizeEndDetails as SplitterResizeEndDetails, } from '@zag-js/splitter';
 export { SplitterContext, type SplitterContextProps } from './splitter-context';
 export { SplitterPanel, type SplitterPanelBaseProps, type SplitterPanelProps } from './splitter-panel';
 export { SplitterResizeTrigger, type SplitterResizeTriggerBaseProps, type SplitterResizeTriggerProps, } from './splitter-resize-trigger';

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

@@ -1,4 +1,4 @@
-export type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
+export type { ExpandCollapseDetails as SplitterExpandCollapseDetails, PanelData as SplitterPanelData, ResizeDetails as SplitterResizeDetails, ResizeEndDetails as SplitterResizeEndDetails, } from '@zag-js/splitter';
 export { SplitterContext, type SplitterContextProps } from './splitter-context';
 export { SplitterPanel, type SplitterPanelBaseProps, type SplitterPanelProps } from './splitter-panel';
 export { SplitterResizeTrigger, type SplitterResizeTriggerBaseProps, type SplitterResizeTriggerProps, } from './splitter-resize-trigger';

package/dist/components/splitter/splitter-panel.cjs

@@ -11,7 +11,7 @@ const factory = require('../factory.cjs');
 const useSplitterContext = require('./use-splitter-context.cjs');
 
 const SplitterPanel = react.forwardRef((props, ref) => {
-  const [splitterPanelProps, localProps] = createSplitProps.createSplitProps()(props, ["id", "snapSize"]);
+  const [splitterPanelProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
   const splitter = useSplitterContext.useSplitterContext();
   const mergedProps = react$1.mergeProps(splitter.getPanelProps(splitterPanelProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/splitter/splitter-panel.js

@@ -7,7 +7,7 @@ import { ark } from '../factory.js';
 import { useSplitterContext } from './use-splitter-context.js';
 
 const SplitterPanel = forwardRef((props, ref) => {
-  const [splitterPanelProps, localProps] = createSplitProps()(props, ["id", "snapSize"]);
+  const [splitterPanelProps, localProps] = createSplitProps()(props, ["id"]);
   const splitter = useSplitterContext();
   const mergedProps = mergeProps(splitter.getPanelProps(splitterPanelProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/splitter/splitter-resize-trigger.cjs

@@ -11,7 +11,7 @@ const factory = require('../factory.cjs');
 const useSplitterContext = require('./use-splitter-context.cjs');
 
 const SplitterResizeTrigger = react.forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["disabled", "id", "step"]);
+  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["disabled", "id"]);
   const splitter = useSplitterContext.useSplitterContext();
   const mergedProps = react$1.mergeProps(splitter.getResizeTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...mergedProps });

package/dist/components/splitter/splitter-resize-trigger.js

@@ -7,7 +7,7 @@ import { ark } from '../factory.js';
 import { useSplitterContext } from './use-splitter-context.js';
 
 const SplitterResizeTrigger = forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps()(props, ["disabled", "id", "step"]);
+  const [triggerProps, localProps] = createSplitProps()(props, ["disabled", "id"]);
   const splitter = useSplitterContext();
   const mergedProps = mergeProps(splitter.getResizeTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });

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

@@ -16,9 +16,15 @@ const SplitterRoot = react.forwardRef((props, ref) => {
     "defaultSize",
     "id",
     "ids",
-    "onSizeChange",
-    "onSizeChangeEnd",
+    "keyboardResizeBy",
+    "nonce",
+    "onCollapse",
+    "onExpand",
+    "onResize",
+    "onResizeEnd",
+    "onResizeStart",
     "orientation",
+    "panels",
     "size"
   ]);
   const splitter = useSplitter.useSplitter(useSplitterProps);

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

@@ -1,8 +1,9 @@
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseSplitterProps } from './use-splitter';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface SplitterRootBaseProps extends UseSplitterProps, PolymorphicProps {
 }
-export interface SplitterRootProps extends HTMLProps<'div'>, SplitterRootBaseProps {
+export interface SplitterRootProps extends Assign<HTMLProps<'div'>, SplitterRootBaseProps> {
 }
 export declare const SplitterRoot: ForwardRefExoticComponent<SplitterRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,9 @@
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseSplitterProps } from './use-splitter';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface SplitterRootBaseProps extends UseSplitterProps, PolymorphicProps {
 }
-export interface SplitterRootProps extends HTMLProps<'div'>, SplitterRootBaseProps {
+export interface SplitterRootProps extends Assign<HTMLProps<'div'>, SplitterRootBaseProps> {
 }
 export declare const SplitterRoot: ForwardRefExoticComponent<SplitterRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -12,9 +12,15 @@ const SplitterRoot = forwardRef((props, ref) => {
     "defaultSize",
     "id",
     "ids",
-    "onSizeChange",
-    "onSizeChangeEnd",
+    "keyboardResizeBy",
+    "nonce",
+    "onCollapse",
+    "onExpand",
+    "onResize",
+    "onResizeEnd",
+    "onResizeStart",
     "orientation",
+    "panels",
     "size"
   ]);
   const splitter = useSplitter(useSplitterProps);

package/dist/components/splitter/splitter.d.cts

@@ -1,4 +1,4 @@
-export type { SizeChangeDetails } from '@zag-js/splitter';
+export type { ExpandCollapseDetails, PanelData, ResizeDetails, ResizeEndDetails } from '@zag-js/splitter';
 export { SplitterContext as Context, type SplitterContextProps as ContextProps } from './splitter-context';
 export { SplitterPanel as Panel, type SplitterPanelBaseProps as PanelBaseProps, type SplitterPanelProps as PanelProps, } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, type SplitterResizeTriggerBaseProps as ResizeTriggerBaseProps, type SplitterResizeTriggerProps as ResizeTriggerProps, } from './splitter-resize-trigger';

package/dist/components/splitter/splitter.d.ts

@@ -1,4 +1,4 @@
-export type { SizeChangeDetails } from '@zag-js/splitter';
+export type { ExpandCollapseDetails, PanelData, ResizeDetails, ResizeEndDetails } from '@zag-js/splitter';
 export { SplitterContext as Context, type SplitterContextProps as ContextProps } from './splitter-context';
 export { SplitterPanel as Panel, type SplitterPanelBaseProps as PanelBaseProps, type SplitterPanelProps as PanelProps, } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, type SplitterResizeTriggerBaseProps as ResizeTriggerBaseProps, type SplitterResizeTriggerProps as ResizeTriggerProps, } from './splitter-resize-trigger';

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

@@ -5,4 +5,4 @@ export interface UseSplitterProps extends Optional<Omit<splitter.Props, 'dir' |
 }
 export interface UseSplitterReturn extends splitter.Api<PropTypes> {
 }
-export declare const useSplitter: (props?: UseSplitterProps) => UseSplitterReturn;
+export declare const useSplitter: (props: UseSplitterProps) => UseSplitterReturn;

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

@@ -5,4 +5,4 @@ export interface UseSplitterProps extends Optional<Omit<splitter.Props, 'dir' |
 }
 export interface UseSplitterReturn extends splitter.Api<PropTypes> {
 }
-export declare const useSplitter: (props?: UseSplitterProps) => UseSplitterReturn;
+export declare const useSplitter: (props: UseSplitterProps) => UseSplitterReturn;

package/dist/components/toast/toaster.cjs

@@ -39,7 +39,7 @@ const Toaster = react.forwardRef((props, ref) => {
     store: toaster,
     id: react.useId(),
     dir: locale?.dir,
-    getRootNode: () => env?.getDocument()
+    getRootNode: env?.getRootNode
   });
   const api = toast__namespace.group.connect(service, react$1.normalizeProps);
   const mergedProps = react$1.mergeProps(api.getGroupProps(), localProps);

package/dist/components/toast/toaster.js

@@ -16,7 +16,7 @@ const Toaster = forwardRef((props, ref) => {
     store: toaster,
     id: useId(),
     dir: locale?.dir,
-    getRootNode: () => env?.getDocument()
+    getRootNode: env?.getRootNode
   });
   const api = toast.group.connect(service, normalizeProps);
   const mergedProps = mergeProps(api.getGroupProps(), localProps);

package/dist/index.cjs

@@ -171,6 +171,7 @@ const dialogTrigger = require('./components/dialog/dialog-trigger.cjs');
 const useDialog = require('./components/dialog/use-dialog.cjs');
 const useDialogContext = require('./components/dialog/use-dialog-context.cjs');
 const dialog$1 = require('./components/dialog/dialog.cjs');
+const downloadTrigger = require('./components/download-trigger/download-trigger.cjs');
 const editableArea = require('./components/editable/editable-area.cjs');
 const editableCancelTrigger = require('./components/editable/editable-cancel-trigger.cjs');
 const editableContext = require('./components/editable/editable-context.cjs');
@@ -197,6 +198,7 @@ const fieldRootProvider = require('./components/field/field-root-provider.cjs');
 const fieldSelect = require('./components/field/field-select.cjs');
 const fieldTextarea = require('./components/field/field-textarea.cjs');
 const field_anatomy = require('./components/field/field.anatomy.cjs');
+const useField = require('./components/field/use-field.cjs');
 const useFieldContext = require('./components/field/use-field-context.cjs');
 const field = require('./components/field/field.cjs');
 const fieldsetContext = require('./components/fieldset/fieldset-context.cjs');
@@ -821,6 +823,7 @@ exports.DialogTrigger = dialogTrigger.DialogTrigger;
 exports.useDialog = useDialog.useDialog;
 exports.useDialogContext = useDialogContext.useDialogContext;
 exports.Dialog = dialog$1;
+exports.DownloadTrigger = downloadTrigger.DownloadTrigger;
 exports.EditableArea = editableArea.EditableArea;
 exports.EditableCancelTrigger = editableCancelTrigger.EditableCancelTrigger;
 exports.EditableContext = editableContext.EditableContext;
@@ -848,6 +851,7 @@ exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
 exports.FieldSelect = fieldSelect.FieldSelect;
 exports.FieldTextarea = fieldTextarea.FieldTextarea;
 exports.fieldAnatomy = field_anatomy.fieldAnatomy;
+exports.useField = useField.useField;
 exports.useFieldContext = useFieldContext.useFieldContext;
 exports.Field = field;
 exports.FieldsetContext = fieldsetContext.FieldsetContext;

package/dist/index.js

@@ -177,6 +177,7 @@ export { useDialog } from './components/dialog/use-dialog.js';
 export { useDialogContext } from './components/dialog/use-dialog-context.js';
 import * as dialog from './components/dialog/dialog.js';
 export { dialog as Dialog };
+export { DownloadTrigger } from './components/download-trigger/download-trigger.js';
 export { EditableArea } from './components/editable/editable-area.js';
 export { EditableCancelTrigger } from './components/editable/editable-cancel-trigger.js';
 export { EditableContext } from './components/editable/editable-context.js';
@@ -204,6 +205,7 @@ export { FieldRootProvider } from './components/field/field-root-provider.js';
 export { FieldSelect } from './components/field/field-select.js';
 export { FieldTextarea } from './components/field/field-textarea.js';
 export { fieldAnatomy } from './components/field/field.anatomy.js';
+export { useField } from './components/field/use-field.js';
 export { useFieldContext } from './components/field/use-field-context.js';
 import * as field from './components/field/field.js';
 export { field as Field };

package/dist/node_modules/@zag-js/utils/dist/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+// src/array.ts
+var isFunction = (v) => typeof v === "function";
+var fnToString = Function.prototype.toString;
+fnToString.call(Object);
+
+exports.isFunction = isFunction;

package/dist/node_modules/@zag-js/utils/dist/index.js

@@ -0,0 +1,6 @@
+// src/array.ts
+var isFunction = (v) => typeof v === "function";
+var fnToString = Function.prototype.toString;
+fnToString.call(Object);
+
+export { isFunction };

package/dist/types.d.cts

@@ -1,2 +1,3 @@
 export type Assign<T, U> = Omit<T, keyof U> & U;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type MaybePromise<T> = T | Promise<T>;

package/dist/types.d.ts

@@ -1,2 +1,3 @@
 export type Assign<T, U> = Omit<T, keyof U> & U;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type MaybePromise<T> = T | Promise<T>;

package/dist/utils/compose-refs.cjs

@@ -2,17 +2,25 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
 function composeRefs(...refs) {
   return (node) => {
+    const cleanUps = [];
     for (const ref of refs) {
-      setRef(ref, node);
+      if (typeof ref === "function") {
+        const cb = ref(node);
+        if (typeof cb === "function") {
+          cleanUps.push(cb);
+        }
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+    if (cleanUps.length) {
+      return () => {
+        for (const cleanUp of cleanUps) {
+          cleanUp();
+        }
+      };
     }
   };
 }

package/dist/utils/compose-refs.d.cts

@@ -1,3 +1,4 @@
-type PossibleRef<T> = React.Ref<T | null> | undefined;
+import { Ref } from 'react';
+type PossibleRef<T> = Ref<T | null> | undefined;
 export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 export {};

package/dist/utils/compose-refs.d.ts

@@ -1,3 +1,4 @@
-type PossibleRef<T> = React.Ref<T | null> | undefined;
+import { Ref } from 'react';
+type PossibleRef<T> = Ref<T | null> | undefined;
 export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 export {};

package/dist/utils/compose-refs.js

@@ -1,14 +1,22 @@
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
 function composeRefs(...refs) {
   return (node) => {
+    const cleanUps = [];
     for (const ref of refs) {
-      setRef(ref, node);
+      if (typeof ref === "function") {
+        const cb = ref(node);
+        if (typeof cb === "function") {
+          cleanUps.push(cb);
+        }
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+    if (cleanUps.length) {
+      return () => {
+        for (const cleanUp of cleanUps) {
+          cleanUp();
+        }
+      };
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.0.1",
+  "version": "5.2.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -134,6 +134,7 @@
     "dev": "bun run storybook",
     "lint": "biome lint ./src",
     "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "test:ci": "vitest --run",
     "typecheck": "tsc",
     "storybook": "storybook dev -p 6006",
@@ -147,66 +148,66 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.7.0",
-    "@zag-js/accordion": "1.3.3",
-    "@zag-js/anatomy": "1.3.3",
-    "@zag-js/auto-resize": "1.3.3",
-    "@zag-js/avatar": "1.3.3",
-    "@zag-js/carousel": "1.3.3",
-    "@zag-js/checkbox": "1.3.3",
-    "@zag-js/clipboard": "1.3.3",
-    "@zag-js/collapsible": "1.3.3",
-    "@zag-js/collection": "1.3.3",
-    "@zag-js/color-picker": "1.3.3",
-    "@zag-js/color-utils": "1.3.3",
-    "@zag-js/combobox": "1.3.3",
-    "@zag-js/core": "1.3.3",
-    "@zag-js/date-picker": "1.3.3",
-    "@zag-js/date-utils": "1.3.3",
-    "@zag-js/dialog": "1.3.3",
-    "@zag-js/dom-query": "1.3.3",
-    "@zag-js/editable": "1.3.3",
-    "@zag-js/file-upload": "1.3.3",
-    "@zag-js/file-utils": "1.3.3",
-    "@zag-js/focus-trap": "1.3.3",
-    "@zag-js/highlight-word": "1.3.3",
-    "@zag-js/hover-card": "1.3.3",
-    "@zag-js/i18n-utils": "1.3.3",
-    "@zag-js/menu": "1.3.3",
-    "@zag-js/number-input": "1.3.3",
-    "@zag-js/pagination": "1.3.3",
-    "@zag-js/pin-input": "1.3.3",
-    "@zag-js/popover": "1.3.3",
-    "@zag-js/presence": "1.3.3",
-    "@zag-js/progress": "1.3.3",
-    "@zag-js/qr-code": "1.3.3",
-    "@zag-js/radio-group": "1.3.3",
-    "@zag-js/rating-group": "1.3.3",
-    "@zag-js/react": "1.3.3",
-    "@zag-js/select": "1.3.3",
-    "@zag-js/signature-pad": "1.3.3",
-    "@zag-js/slider": "1.3.3",
-    "@zag-js/splitter": "1.3.3",
-    "@zag-js/steps": "1.3.3",
-    "@zag-js/switch": "1.3.3",
-    "@zag-js/tabs": "1.3.3",
-    "@zag-js/tags-input": "1.3.3",
-    "@zag-js/time-picker": "1.3.3",
-    "@zag-js/timer": "1.3.3",
-    "@zag-js/toast": "1.3.3",
-    "@zag-js/toggle": "1.3.3",
-    "@zag-js/toggle-group": "1.3.3",
-    "@zag-js/tooltip": "1.3.3",
-    "@zag-js/tour": "1.3.3",
-    "@zag-js/tree-view": "1.3.3",
-    "@zag-js/types": "1.3.3"
+    "@zag-js/accordion": "1.5.0",
+    "@zag-js/anatomy": "1.5.0",
+    "@zag-js/auto-resize": "1.5.0",
+    "@zag-js/avatar": "1.5.0",
+    "@zag-js/carousel": "1.5.0",
+    "@zag-js/checkbox": "1.5.0",
+    "@zag-js/clipboard": "1.5.0",
+    "@zag-js/collapsible": "1.5.0",
+    "@zag-js/collection": "1.5.0",
+    "@zag-js/color-picker": "1.5.0",
+    "@zag-js/color-utils": "1.5.0",
+    "@zag-js/combobox": "1.5.0",
+    "@zag-js/core": "1.5.0",
+    "@zag-js/date-picker": "1.5.0",
+    "@zag-js/date-utils": "1.5.0",
+    "@zag-js/dialog": "1.5.0",
+    "@zag-js/dom-query": "1.5.0",
+    "@zag-js/editable": "1.5.0",
+    "@zag-js/file-upload": "1.5.0",
+    "@zag-js/file-utils": "1.5.0",
+    "@zag-js/focus-trap": "1.5.0",
+    "@zag-js/highlight-word": "1.5.0",
+    "@zag-js/hover-card": "1.5.0",
+    "@zag-js/i18n-utils": "1.5.0",
+    "@zag-js/menu": "1.5.0",
+    "@zag-js/number-input": "1.5.0",
+    "@zag-js/pagination": "1.5.0",
+    "@zag-js/pin-input": "1.5.0",
+    "@zag-js/popover": "1.5.0",
+    "@zag-js/presence": "1.5.0",
+    "@zag-js/progress": "1.5.0",
+    "@zag-js/qr-code": "1.5.0",
+    "@zag-js/radio-group": "1.5.0",
+    "@zag-js/rating-group": "1.5.0",
+    "@zag-js/react": "1.5.0",
+    "@zag-js/select": "1.5.0",
+    "@zag-js/signature-pad": "1.5.0",
+    "@zag-js/slider": "1.5.0",
+    "@zag-js/splitter": "1.5.0",
+    "@zag-js/steps": "1.5.0",
+    "@zag-js/switch": "1.5.0",
+    "@zag-js/tabs": "1.5.0",
+    "@zag-js/tags-input": "1.5.0",
+    "@zag-js/time-picker": "1.5.0",
+    "@zag-js/timer": "1.5.0",
+    "@zag-js/toast": "1.5.0",
+    "@zag-js/toggle": "1.5.0",
+    "@zag-js/toggle-group": "1.5.0",
+    "@zag-js/tooltip": "1.5.0",
+    "@zag-js/tour": "1.5.0",
+    "@zag-js/tree-view": "1.5.0",
+    "@zag-js/types": "1.5.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@release-it/keep-a-changelog": "6.0.0",
-    "@storybook/addon-a11y": "8.6.4",
-    "@storybook/addon-essentials": "8.6.4",
-    "@storybook/react": "8.6.4",
-    "@storybook/react-vite": "8.6.4",
+    "@storybook/addon-a11y": "8.6.7",
+    "@storybook/addon-essentials": "8.6.7",
+    "@storybook/react": "8.6.7",
+    "@storybook/react-vite": "8.6.7",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
@@ -215,22 +216,23 @@
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
-    "@zag-js/stringify-state": "1.3.3",
+    "@zag-js/stringify-state": "1.5.0",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
-    "happy-dom": "17.4.3",
-    "lucide-react": "0.479.0",
+    "happy-dom": "17.4.4",
+    "lucide-react": "0.482.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-frame-component": "5.2.7",
     "react-hook-form": "7.54.2",
     "release-it": "18.1.2",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.6.4",
+    "storybook": "8.6.7",
     "typescript": "5.8.2",
-    "vite": "6.2.0",
+    "vite": "6.2.2",
     "vite-plugin-dts": "4.5.3",
-    "vitest": "3.0.8",
+    "vitest": "3.0.9",
+    "@vitest/coverage-v8": "3.0.9",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {