@ark-ui/react 5.0.1 → 5.1.0

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

@@ -197,6 +197,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');
@@ -844,6 +845,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.js

@@ -204,6 +204,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/index.cjs

@@ -197,6 +197,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');
@@ -848,6 +849,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

@@ -204,6 +204,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/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.1.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -147,66 +147,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.4.1",
+    "@zag-js/anatomy": "1.4.1",
+    "@zag-js/auto-resize": "1.4.1",
+    "@zag-js/avatar": "1.4.1",
+    "@zag-js/carousel": "1.4.1",
+    "@zag-js/checkbox": "1.4.1",
+    "@zag-js/clipboard": "1.4.1",
+    "@zag-js/collapsible": "1.4.1",
+    "@zag-js/collection": "1.4.1",
+    "@zag-js/color-picker": "1.4.1",
+    "@zag-js/color-utils": "1.4.1",
+    "@zag-js/combobox": "1.4.1",
+    "@zag-js/core": "1.4.1",
+    "@zag-js/date-picker": "1.4.1",
+    "@zag-js/date-utils": "1.4.1",
+    "@zag-js/dialog": "1.4.1",
+    "@zag-js/dom-query": "1.4.1",
+    "@zag-js/editable": "1.4.1",
+    "@zag-js/file-upload": "1.4.1",
+    "@zag-js/file-utils": "1.4.1",
+    "@zag-js/focus-trap": "1.4.1",
+    "@zag-js/highlight-word": "1.4.1",
+    "@zag-js/hover-card": "1.4.1",
+    "@zag-js/i18n-utils": "1.4.1",
+    "@zag-js/menu": "1.4.1",
+    "@zag-js/number-input": "1.4.1",
+    "@zag-js/pagination": "1.4.1",
+    "@zag-js/pin-input": "1.4.1",
+    "@zag-js/popover": "1.4.1",
+    "@zag-js/presence": "1.4.1",
+    "@zag-js/progress": "1.4.1",
+    "@zag-js/qr-code": "1.4.1",
+    "@zag-js/radio-group": "1.4.1",
+    "@zag-js/rating-group": "1.4.1",
+    "@zag-js/react": "1.4.1",
+    "@zag-js/select": "1.4.1",
+    "@zag-js/signature-pad": "1.4.1",
+    "@zag-js/slider": "1.4.1",
+    "@zag-js/splitter": "1.4.1",
+    "@zag-js/steps": "1.4.1",
+    "@zag-js/switch": "1.4.1",
+    "@zag-js/tabs": "1.4.1",
+    "@zag-js/tags-input": "1.4.1",
+    "@zag-js/time-picker": "1.4.1",
+    "@zag-js/timer": "1.4.1",
+    "@zag-js/toast": "1.4.1",
+    "@zag-js/toggle": "1.4.1",
+    "@zag-js/toggle-group": "1.4.1",
+    "@zag-js/tooltip": "1.4.1",
+    "@zag-js/tour": "1.4.1",
+    "@zag-js/tree-view": "1.4.1",
+    "@zag-js/types": "1.4.1"
   },
   "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 +215,22 @@
     "@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.4.1",
     "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-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {