@ark-ui/vue 5.19.0 → 5.21.0

package/dist/components/collection/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const gridCollection = require('./grid-collection.cjs');
 const listCollection = require('./list-collection.cjs');
 const treeCollection = require('./tree-collection.cjs');
+const useAsyncList = require('./use-async-list.cjs');
 const useListCollection = require('./use-list-collection.cjs');
 const useListSelection = require('./use-list-selection.cjs');
 
@@ -14,5 +15,6 @@ exports.createGridCollection = gridCollection.createGridCollection;
 exports.createListCollection = listCollection.createListCollection;
 exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
 exports.createTreeCollection = treeCollection.createTreeCollection;
+exports.useAsyncList = useAsyncList.useAsyncList;
 exports.useListCollection = useListCollection.useListCollection;
 exports.useListSelection = useListSelection.useListSelection;

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

@@ -1,5 +1,6 @@
 export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
 export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
 export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
+export { useAsyncList, type UseAsyncListProps, type UseAsyncListReturn } from './use-async-list';
 export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn } from './use-list-collection';
 export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn } from './use-list-selection';

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

@@ -1,5 +1,6 @@
 export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
 export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
 export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
+export { useAsyncList, type UseAsyncListProps, type UseAsyncListReturn } from './use-async-list';
 export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn } from './use-list-collection';
 export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn } from './use-list-selection';

package/dist/components/collection/index.js

@@ -1,5 +1,6 @@
 export { createGridCollection } from './grid-collection.js';
 export { createListCollection } from './list-collection.js';
 export { createFileTreeCollection, createTreeCollection } from './tree-collection.js';
+export { useAsyncList } from './use-async-list.js';
 export { useListCollection } from './use-list-collection.js';
 export { useListSelection } from './use-list-selection.js';

package/dist/components/collection/tree-collection.js

@@ -1,4 +1,4 @@
-import { TreeCollection, filePathToTree } from '@zag-js/collection';
+import { filePathToTree, TreeCollection } from '@zag-js/collection';
 
 const createTreeCollection = (options) => new TreeCollection(options);
 const createFileTreeCollection = (paths) => filePathToTree(paths);

package/dist/components/collection/use-async-list.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const asyncList = require('@zag-js/async-list');
+const vue$1 = require('@zag-js/vue');
+const vue = require('vue');
+const cleanProps = require('../../utils/clean-props.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const asyncList__namespace = /*#__PURE__*/_interopNamespaceDefault(asyncList);
+
+const useAsyncList = (props = {}) => {
+  const context = vue.computed(() => cleanProps.cleanProps(vue.toValue(props)));
+  const service = vue$1.useMachine(asyncList__namespace.machine, context);
+  return vue.computed(() => asyncList__namespace.connect(service));
+};
+
+exports.useAsyncList = useAsyncList;

package/dist/components/collection/use-async-list.d.cts

@@ -0,0 +1,7 @@
+import { ComputedRef, MaybeRef } from 'vue';
+import * as asyncList from '@zag-js/async-list';
+export interface UseAsyncListProps<T, C = string> extends asyncList.Props<T, C> {
+}
+export interface UseAsyncListReturn<T, C = string> extends ComputedRef<asyncList.Api<T, C>> {
+}
+export declare const useAsyncList: <T, C = string>(props?: MaybeRef<UseAsyncListProps<T, C>>) => UseAsyncListReturn<T, C>;

package/dist/components/collection/use-async-list.d.ts

@@ -0,0 +1,7 @@
+import { ComputedRef, MaybeRef } from 'vue';
+import * as asyncList from '@zag-js/async-list';
+export interface UseAsyncListProps<T, C = string> extends asyncList.Props<T, C> {
+}
+export interface UseAsyncListReturn<T, C = string> extends ComputedRef<asyncList.Api<T, C>> {
+}
+export declare const useAsyncList: <T, C = string>(props?: MaybeRef<UseAsyncListProps<T, C>>) => UseAsyncListReturn<T, C>;

package/dist/components/collection/use-async-list.js

@@ -0,0 +1,12 @@
+import * as asyncList from '@zag-js/async-list';
+import { useMachine } from '@zag-js/vue';
+import { computed, toValue } from 'vue';
+import { cleanProps } from '../../utils/clean-props.js';
+
+const useAsyncList = (props = {}) => {
+  const context = computed(() => cleanProps(toValue(props)));
+  const service = useMachine(asyncList.machine, context);
+  return computed(() => asyncList.connect(service));
+};
+
+export { useAsyncList };

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

@@ -44,9 +44,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
     required: boolean | undefined;
     getLabelProps: () => {
         id: string;
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         htmlFor: string;
         "data-scope": string;
         "data-part": string;
@@ -54,9 +54,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
     getRootProps: () => {
         id: string;
         role: string;
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
     };
@@ -65,9 +65,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
@@ -78,9 +78,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
@@ -91,16 +91,16 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
         readOnly: boolean | undefined;
     };
     getHelperTextProps: () => {
-        'data-disabled': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
         id: string;

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

@@ -44,9 +44,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
     required: boolean | undefined;
     getLabelProps: () => {
         id: string;
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         htmlFor: string;
         "data-scope": string;
         "data-part": string;
@@ -54,9 +54,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
     getRootProps: () => {
         id: string;
         role: string;
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
     };
@@ -65,9 +65,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
@@ -78,9 +78,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
@@ -91,16 +91,16 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
         readOnly: boolean | undefined;
     };
     getHelperTextProps: () => {
-        'data-disabled': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
         id: string;

package/dist/components/fieldset/fieldset-legend.vue.cjs

@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const fieldset = useFieldsetContext.useFieldsetContext();
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).legend, vue.mergeProps(vue.unref(fieldset).getLegendProps(), { "as-child": _ctx.asChild }), {
+      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps(vue.unref(fieldset).getLegendProps(), { "as-child": _ctx.asChild }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),

package/dist/components/fieldset/fieldset-legend.vue.js

@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const fieldset = useFieldsetContext();
     useForwardExpose();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ark).legend, mergeProps(unref(fieldset).getLegendProps(), { "as-child": _ctx.asChild }), {
+      return openBlock(), createBlock(unref(ark).div, mergeProps(unref(fieldset).getLegendProps(), { "as-child": _ctx.asChild }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),

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

@@ -52,13 +52,14 @@ const useFieldset = (props) => {
       disabled,
       "data-disabled": domQuery.dataAttr(!!disabled),
       "data-invalid": domQuery.dataAttr(invalid),
+      "aria-labelledby": labelId,
       "aria-describedby": labelIds.join(" ")
     });
     const getLegendProps = () => ({
       id: labelId,
       ...fieldset_anatomy.parts.legend.attrs,
       "data-disabled": domQuery.dataAttr(!!disabled),
-      "data-invalid": domQuery.dataAttr(!!invalid)
+      "data-invalid": domQuery.dataAttr(invalid)
     });
     const getHelperTextProps = () => ({
       id: helperTextId,

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

@@ -18,12 +18,12 @@ export declare const useFieldset: (props: MaybeRef<UseFieldsetProps>) => Compute
     refs: {
         rootRef: Ref<null, null>;
     };
-    disabled: boolean | "true" | "false" | undefined;
+    disabled: boolean | "false" | "true" | undefined;
     invalid: boolean | undefined;
     getRootProps: () => FieldsetHTMLAttributes;
     getLegendProps: () => {
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
         id: string;

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

@@ -18,12 +18,12 @@ export declare const useFieldset: (props: MaybeRef<UseFieldsetProps>) => Compute
     refs: {
         rootRef: Ref<null, null>;
     };
-    disabled: boolean | "true" | "false" | undefined;
+    disabled: boolean | "false" | "true" | undefined;
     invalid: boolean | undefined;
     getRootProps: () => FieldsetHTMLAttributes;
     getLegendProps: () => {
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
         id: string;

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

@@ -48,13 +48,14 @@ const useFieldset = (props) => {
       disabled,
       "data-disabled": dataAttr(!!disabled),
       "data-invalid": dataAttr(invalid),
+      "aria-labelledby": labelId,
       "aria-describedby": labelIds.join(" ")
     });
     const getLegendProps = () => ({
       id: labelId,
       ...parts.legend.attrs,
       "data-disabled": dataAttr(!!disabled),
-      "data-invalid": dataAttr(!!invalid)
+      "data-invalid": dataAttr(invalid)
     });
     const getHelperTextProps = () => ({
       id: helperTextId,

package/dist/components/highlight/highlight.types.d.cts

@@ -15,6 +15,10 @@ export interface UseHighlightProps {
      * Whether to match multiple instances of the query
      */
     matchAll?: boolean;
+    /**
+     * Whether to match the exact query
+     */
+    exactMatch?: boolean;
 }
 export interface HighlightChunk {
     text: string;

package/dist/components/highlight/highlight.types.d.ts

@@ -15,6 +15,10 @@ export interface UseHighlightProps {
      * Whether to match multiple instances of the query
      */
     matchAll?: boolean;
+    /**
+     * Whether to match the exact query
+     */
+    exactMatch?: boolean;
 }
 export interface HighlightChunk {
     text: string;

package/dist/components/highlight/highlight.vue.cjs

@@ -12,7 +12,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     text: {},
     query: {},
     ignoreCase: { type: Boolean, default: void 0 },
-    matchAll: { type: Boolean, default: void 0 }
+    matchAll: { type: Boolean, default: void 0 },
+    exactMatch: { type: Boolean, default: void 0 }
   },
   setup(__props) {
     const props = __props;

package/dist/components/highlight/highlight.vue.d.cts

@@ -11,5 +11,6 @@ HTMLAttributes {
 declare const _default: DefineComponent<HighlightProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<HighlightProps> & Readonly<{}>, {
     matchAll: boolean;
     ignoreCase: boolean;
+    exactMatch: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/highlight/highlight.vue.d.ts

@@ -11,5 +11,6 @@ HTMLAttributes {
 declare const _default: DefineComponent<HighlightProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<HighlightProps> & Readonly<{}>, {
     matchAll: boolean;
     ignoreCase: boolean;
+    exactMatch: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/highlight/highlight.vue.js

@@ -8,7 +8,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     text: {},
     query: {},
     ignoreCase: { type: Boolean, default: void 0 },
-    matchAll: { type: Boolean, default: void 0 }
+    matchAll: { type: Boolean, default: void 0 },
+    exactMatch: { type: Boolean, default: void 0 }
   },
   setup(__props) {
     const props = __props;

package/dist/components/index.cjs

@@ -86,6 +86,12 @@ const collapsibleIndicator_vue_vue_type_script_setup_true_lang = require('./coll
 const useCollapsible = require('./collapsible/use-collapsible.cjs');
 const useCollapsibleContext = require('./collapsible/use-collapsible-context.cjs');
 const collapsible$1 = require('./collapsible/collapsible.cjs');
+const gridCollection = require('./collection/grid-collection.cjs');
+const listCollection = require('./collection/list-collection.cjs');
+const treeCollection = require('./collection/tree-collection.cjs');
+const useAsyncList = require('./collection/use-async-list.cjs');
+const useListCollection = require('./collection/use-list-collection.cjs');
+const useListSelection = require('./collection/use-list-selection.cjs');
 const colorPicker = require('@zag-js/color-picker');
 const colorPickerAreaBackground_vue_vue_type_script_setup_true_lang = require('./color-picker/color-picker-area-background.vue.cjs');
 const colorPickerAreaThumb_vue_vue_type_script_setup_true_lang = require('./color-picker/color-picker-area-thumb.vue.cjs');
@@ -120,9 +126,6 @@ const colorPicker_anatomy = require('./color-picker/color-picker.anatomy.cjs');
 const useColorPicker = require('./color-picker/use-color-picker.cjs');
 const useColorPickerContext = require('./color-picker/use-color-picker-context.cjs');
 const colorPicker$1 = require('./color-picker/color-picker.cjs');
-const listCollection = require('./collection/list-collection.cjs');
-const treeCollection = require('./collection/tree-collection.cjs');
-const useListCollection = require('./collection/use-list-collection.cjs');
 const comboboxClearTrigger_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-clear-trigger.vue.cjs');
 const comboboxContent_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-content.vue.cjs');
 const comboboxContext_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-context.vue.cjs');
@@ -813,6 +816,13 @@ exports.CollapsibleIndicator = collapsibleIndicator_vue_vue_type_script_setup_tr
 exports.useCollapsible = useCollapsible.useCollapsible;
 exports.useCollapsibleContext = useCollapsibleContext.useCollapsibleContext;
 exports.Collapsible = collapsible$1;
+exports.createGridCollection = gridCollection.createGridCollection;
+exports.createListCollection = listCollection.createListCollection;
+exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
+exports.createTreeCollection = treeCollection.createTreeCollection;
+exports.useAsyncList = useAsyncList.useAsyncList;
+exports.useListCollection = useListCollection.useListCollection;
+exports.useListSelection = useListSelection.useListSelection;
 Object.defineProperty(exports, "parseColor", {
 	enumerable: true,
 	get: () => colorPicker.parse
@@ -850,10 +860,6 @@ exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
 exports.useColorPicker = useColorPicker.useColorPicker;
 exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
 exports.ColorPicker = colorPicker$1;
-exports.createListCollection = listCollection.createListCollection;
-exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
-exports.createTreeCollection = treeCollection.createTreeCollection;
-exports.useListCollection = useListCollection.useListCollection;
 exports.ComboboxClearTrigger = comboboxClearTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxContent = comboboxContent_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxContext = comboboxContext_vue_vue_type_script_setup_true_lang.default;

package/dist/components/index.d.cts

@@ -6,6 +6,7 @@ export * from './checkbox';
 export * from './client-only';
 export * from './clipboard';
 export * from './collapsible';
+export * from './collection';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './checkbox';
 export * from './client-only';
 export * from './clipboard';
 export * from './collapsible';
+export * from './collection';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';

package/dist/components/index.js

@@ -89,6 +89,12 @@ export { useCollapsible } from './collapsible/use-collapsible.js';
 export { useCollapsibleContext } from './collapsible/use-collapsible-context.js';
 import * as collapsible from './collapsible/collapsible.js';
 export { collapsible as Collapsible };
+export { createGridCollection } from './collection/grid-collection.js';
+export { createListCollection } from './collection/list-collection.js';
+export { createFileTreeCollection, createTreeCollection } from './collection/tree-collection.js';
+export { useAsyncList } from './collection/use-async-list.js';
+export { useListCollection } from './collection/use-list-collection.js';
+export { useListSelection } from './collection/use-list-selection.js';
 export { parse as parseColor } from '@zag-js/color-picker';
 export { default as ColorPickerAreaBackground } from './color-picker/color-picker-area-background.vue.js';
 export { default as ColorPickerAreaThumb } from './color-picker/color-picker-area-thumb.vue.js';
@@ -124,9 +130,6 @@ export { useColorPicker } from './color-picker/use-color-picker.js';
 export { useColorPickerContext } from './color-picker/use-color-picker-context.js';
 import * as colorPicker from './color-picker/color-picker.js';
 export { colorPicker as ColorPicker };
-export { createListCollection } from './collection/list-collection.js';
-export { createFileTreeCollection, createTreeCollection } from './collection/tree-collection.js';
-export { useListCollection } from './collection/use-list-collection.js';
 export { default as ComboboxClearTrigger } from './combobox/combobox-clear-trigger.vue.js';
 export { default as ComboboxContent } from './combobox/combobox-content.vue.js';
 export { default as ComboboxContext } from './combobox/combobox-context.vue.js';

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

@@ -1,3 +1,4 @@
+export type { ActionOptions as ToastActionOptions, Placement as ToastPlacement, PromiseOptions as ToastPromiseOptions, Status as ToastStatus, StatusChangeDetails as ToastStatusChangeDetails, Type as ToastType, } from '@zag-js/toast';
 export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
 export { default as ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger.vue';
 export { default as ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps, } from './toast-close-trigger.vue';

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

@@ -1,3 +1,4 @@
+export type { ActionOptions as ToastActionOptions, Placement as ToastPlacement, PromiseOptions as ToastPromiseOptions, Status as ToastStatus, StatusChangeDetails as ToastStatusChangeDetails, Type as ToastType, } from '@zag-js/toast';
 export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
 export { default as ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger.vue';
 export { default as ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps, } from './toast-close-trigger.vue';

package/dist/index.cjs

@@ -86,6 +86,12 @@ const collapsibleIndicator_vue_vue_type_script_setup_true_lang = require('./comp
 const useCollapsible = require('./components/collapsible/use-collapsible.cjs');
 const useCollapsibleContext = require('./components/collapsible/use-collapsible-context.cjs');
 const collapsible$1 = require('./components/collapsible/collapsible.cjs');
+const gridCollection = require('./components/collection/grid-collection.cjs');
+const listCollection = require('./components/collection/list-collection.cjs');
+const treeCollection = require('./components/collection/tree-collection.cjs');
+const useAsyncList = require('./components/collection/use-async-list.cjs');
+const useListCollection = require('./components/collection/use-list-collection.cjs');
+const useListSelection = require('./components/collection/use-list-selection.cjs');
 const colorPicker = require('@zag-js/color-picker');
 const colorPickerAreaBackground_vue_vue_type_script_setup_true_lang = require('./components/color-picker/color-picker-area-background.vue.cjs');
 const colorPickerAreaThumb_vue_vue_type_script_setup_true_lang = require('./components/color-picker/color-picker-area-thumb.vue.cjs');
@@ -120,9 +126,6 @@ const colorPicker_anatomy = require('./components/color-picker/color-picker.anat
 const useColorPicker = require('./components/color-picker/use-color-picker.cjs');
 const useColorPickerContext = require('./components/color-picker/use-color-picker-context.cjs');
 const colorPicker$1 = require('./components/color-picker/color-picker.cjs');
-const listCollection = require('./components/collection/list-collection.cjs');
-const treeCollection = require('./components/collection/tree-collection.cjs');
-const useListCollection = require('./components/collection/use-list-collection.cjs');
 const comboboxClearTrigger_vue_vue_type_script_setup_true_lang = require('./components/combobox/combobox-clear-trigger.vue.cjs');
 const comboboxContent_vue_vue_type_script_setup_true_lang = require('./components/combobox/combobox-content.vue.cjs');
 const comboboxContext_vue_vue_type_script_setup_true_lang = require('./components/combobox/combobox-context.vue.cjs');
@@ -691,6 +694,7 @@ const treeView$1 = require('./components/tree-view/tree-view.cjs');
 const environmentProvider_vue_vue_type_script_setup_true_lang = require('./providers/environment/environment-provider.vue.cjs');
 const useEnvironmentContext = require('./providers/environment/use-environment-context.cjs');
 const localeProvider_vue_vue_type_script_setup_true_lang = require('./providers/locale/locale-provider.vue.cjs');
+const useCollator = require('./providers/locale/use-collator.cjs');
 const useFilter = require('./providers/locale/use-filter.cjs');
 const useLocaleContext = require('./providers/locale/use-locale-context.cjs');
 const useEmitsAsProps = require('./utils/use-emits-as-props.cjs');
@@ -822,6 +826,13 @@ exports.CollapsibleIndicator = collapsibleIndicator_vue_vue_type_script_setup_tr
 exports.useCollapsible = useCollapsible.useCollapsible;
 exports.useCollapsibleContext = useCollapsibleContext.useCollapsibleContext;
 exports.Collapsible = collapsible$1;
+exports.createGridCollection = gridCollection.createGridCollection;
+exports.createListCollection = listCollection.createListCollection;
+exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
+exports.createTreeCollection = treeCollection.createTreeCollection;
+exports.useAsyncList = useAsyncList.useAsyncList;
+exports.useListCollection = useListCollection.useListCollection;
+exports.useListSelection = useListSelection.useListSelection;
 Object.defineProperty(exports, "parseColor", {
 	enumerable: true,
 	get: () => colorPicker.parse
@@ -859,10 +870,6 @@ exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
 exports.useColorPicker = useColorPicker.useColorPicker;
 exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
 exports.ColorPicker = colorPicker$1;
-exports.createListCollection = listCollection.createListCollection;
-exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
-exports.createTreeCollection = treeCollection.createTreeCollection;
-exports.useListCollection = useListCollection.useListCollection;
 exports.ComboboxClearTrigger = comboboxClearTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxContent = comboboxContent_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxContext = comboboxContext_vue_vue_type_script_setup_true_lang.default;
@@ -1440,6 +1447,7 @@ exports.EnvironmentProvider = environmentProvider_vue_vue_type_script_setup_true
 exports.DEFAULT_ENVIRONMENT = useEnvironmentContext.DEFAULT_ENVIRONMENT;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
 exports.LocaleProvider = localeProvider_vue_vue_type_script_setup_true_lang.default;
+exports.useCollator = useCollator.useCollator;
 exports.useFilter = useFilter.useFilter;
 exports.DEFAULT_LOCALE = useLocaleContext.DEFAULT_LOCALE;
 exports.useLocaleContext = useLocaleContext.useLocaleContext;

package/dist/index.js

@@ -89,6 +89,12 @@ export { useCollapsible } from './components/collapsible/use-collapsible.js';
 export { useCollapsibleContext } from './components/collapsible/use-collapsible-context.js';
 import * as collapsible from './components/collapsible/collapsible.js';
 export { collapsible as Collapsible };
+export { createGridCollection } from './components/collection/grid-collection.js';
+export { createListCollection } from './components/collection/list-collection.js';
+export { createFileTreeCollection, createTreeCollection } from './components/collection/tree-collection.js';
+export { useAsyncList } from './components/collection/use-async-list.js';
+export { useListCollection } from './components/collection/use-list-collection.js';
+export { useListSelection } from './components/collection/use-list-selection.js';
 export { parse as parseColor } from '@zag-js/color-picker';
 export { default as ColorPickerAreaBackground } from './components/color-picker/color-picker-area-background.vue.js';
 export { default as ColorPickerAreaThumb } from './components/color-picker/color-picker-area-thumb.vue.js';
@@ -124,9 +130,6 @@ export { useColorPicker } from './components/color-picker/use-color-picker.js';
 export { useColorPickerContext } from './components/color-picker/use-color-picker-context.js';
 import * as colorPicker from './components/color-picker/color-picker.js';
 export { colorPicker as ColorPicker };
-export { createListCollection } from './components/collection/list-collection.js';
-export { createFileTreeCollection, createTreeCollection } from './components/collection/tree-collection.js';
-export { useListCollection } from './components/collection/use-list-collection.js';
 export { default as ComboboxClearTrigger } from './components/combobox/combobox-clear-trigger.vue.js';
 export { default as ComboboxContent } from './components/combobox/combobox-content.vue.js';
 export { default as ComboboxContext } from './components/combobox/combobox-context.vue.js';
@@ -735,6 +738,7 @@ export { treeView as TreeView };
 export { default as EnvironmentProvider } from './providers/environment/environment-provider.vue.js';
 export { DEFAULT_ENVIRONMENT, useEnvironmentContext } from './providers/environment/use-environment-context.js';
 export { default as LocaleProvider } from './providers/locale/locale-provider.vue.js';
+export { useCollator } from './providers/locale/use-collator.js';
 export { useFilter } from './providers/locale/use-filter.js';
 export { DEFAULT_LOCALE, useLocaleContext } from './providers/locale/use-locale-context.js';
 export { useEmitAsProps } from './utils/use-emits-as-props.js';

package/dist/providers/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const environmentProvider_vue_vue_type_script_setup_true_lang = require('./environment/environment-provider.vue.cjs');
 const useEnvironmentContext = require('./environment/use-environment-context.cjs');
 const localeProvider_vue_vue_type_script_setup_true_lang = require('./locale/locale-provider.vue.cjs');
+const useCollator = require('./locale/use-collator.cjs');
 const useFilter = require('./locale/use-filter.cjs');
 const useLocaleContext = require('./locale/use-locale-context.cjs');
 
@@ -14,6 +15,7 @@ exports.EnvironmentProvider = environmentProvider_vue_vue_type_script_setup_true
 exports.DEFAULT_ENVIRONMENT = useEnvironmentContext.DEFAULT_ENVIRONMENT;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
 exports.LocaleProvider = localeProvider_vue_vue_type_script_setup_true_lang.default;
+exports.useCollator = useCollator.useCollator;
 exports.useFilter = useFilter.useFilter;
 exports.DEFAULT_LOCALE = useLocaleContext.DEFAULT_LOCALE;
 exports.useLocaleContext = useLocaleContext.useLocaleContext;

package/dist/providers/index.js

@@ -1,5 +1,6 @@
 export { default as EnvironmentProvider } from './environment/environment-provider.vue.js';
 export { DEFAULT_ENVIRONMENT, useEnvironmentContext } from './environment/use-environment-context.js';
 export { default as LocaleProvider } from './locale/locale-provider.vue.js';
+export { useCollator } from './locale/use-collator.js';
 export { useFilter } from './locale/use-filter.js';
 export { DEFAULT_LOCALE, useLocaleContext } from './locale/use-locale-context.js';

package/dist/providers/locale/index.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const localeProvider_vue_vue_type_script_setup_true_lang = require('./locale-provider.vue.cjs');
+const useCollator = require('./use-collator.cjs');
 const useFilter = require('./use-filter.cjs');
 const useLocaleContext = require('./use-locale-context.cjs');
 
 
 
 exports.LocaleProvider = localeProvider_vue_vue_type_script_setup_true_lang.default;
+exports.useCollator = useCollator.useCollator;
 exports.useFilter = useFilter.useFilter;
 exports.DEFAULT_LOCALE = useLocaleContext.DEFAULT_LOCALE;
 exports.useLocaleContext = useLocaleContext.useLocaleContext;

package/dist/providers/locale/index.d.cts

@@ -1,3 +1,4 @@
 export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.vue';
+export { useCollator, type UseCollatorProps, type UseCollatorReturn } from './use-collator';
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter';
 export { DEFAULT_LOCALE, useLocaleContext, type LocaleContext } from './use-locale-context';

package/dist/providers/locale/index.d.ts

@@ -1,3 +1,4 @@
 export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.vue';
+export { useCollator, type UseCollatorProps, type UseCollatorReturn } from './use-collator';
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter';
 export { DEFAULT_LOCALE, useLocaleContext, type LocaleContext } from './use-locale-context';

package/dist/providers/locale/index.js

@@ -1,3 +1,4 @@
 export { default as LocaleProvider } from './locale-provider.vue.js';
+export { useCollator } from './use-collator.js';
 export { useFilter } from './use-filter.js';
 export { DEFAULT_LOCALE, useLocaleContext } from './use-locale-context.js';

package/dist/providers/locale/use-collator.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const i18nUtils = require('@zag-js/i18n-utils');
+const vue = require('vue');
+const useLocaleContext = require('./use-locale-context.cjs');
+
+function useCollator(propsOrFn = {}) {
+  const env = useLocaleContext.useLocaleContext();
+  return vue.computed(() => {
+    const props = vue.toValue(propsOrFn);
+    const locale = props.locale ?? env.value.locale;
+    const { locale: _, ...options } = props;
+    return i18nUtils.createCollator(locale, options);
+  });
+}
+
+exports.useCollator = useCollator;

package/dist/providers/locale/use-collator.d.cts

@@ -0,0 +1,7 @@
+import { ComputedRef, MaybeRef } from 'vue';
+export interface UseCollatorProps extends Intl.CollatorOptions {
+    locale?: string;
+}
+export interface UseCollatorReturn extends ComputedRef<Intl.Collator> {
+}
+export declare function useCollator(propsOrFn?: MaybeRef<UseCollatorProps>): UseCollatorReturn;

package/dist/providers/locale/use-collator.d.ts

@@ -0,0 +1,7 @@
+import { ComputedRef, MaybeRef } from 'vue';
+export interface UseCollatorProps extends Intl.CollatorOptions {
+    locale?: string;
+}
+export interface UseCollatorReturn extends ComputedRef<Intl.Collator> {
+}
+export declare function useCollator(propsOrFn?: MaybeRef<UseCollatorProps>): UseCollatorReturn;

package/dist/providers/locale/use-collator.js

@@ -0,0 +1,15 @@
+import { createCollator } from '@zag-js/i18n-utils';
+import { computed, toValue } from 'vue';
+import { useLocaleContext } from './use-locale-context.js';
+
+function useCollator(propsOrFn = {}) {
+  const env = useLocaleContext();
+  return computed(() => {
+    const props = toValue(propsOrFn);
+    const locale = props.locale ?? env.value.locale;
+    const { locale: _, ...options } = props;
+    return createCollator(locale, options);
+  });
+}
+
+export { useCollator };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/vue",
   "type": "module",
-  "version": "5.19.0",
+  "version": "5.21.0",
   "description": "A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -140,65 +140,66 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.21.6",
-    "@zag-js/anatomy": "1.21.6",
-    "@zag-js/angle-slider": "1.21.6",
-    "@zag-js/auto-resize": "1.21.6",
-    "@zag-js/avatar": "1.21.6",
-    "@zag-js/carousel": "1.21.6",
-    "@zag-js/checkbox": "1.21.6",
-    "@zag-js/clipboard": "1.21.6",
-    "@zag-js/collapsible": "1.21.6",
-    "@zag-js/collection": "1.21.6",
-    "@zag-js/color-picker": "1.21.6",
-    "@zag-js/color-utils": "1.21.6",
-    "@zag-js/combobox": "1.21.6",
-    "@zag-js/core": "1.21.6",
-    "@zag-js/date-picker": "1.21.6",
-    "@zag-js/date-utils": "1.21.6",
-    "@zag-js/dialog": "1.21.6",
-    "@zag-js/dom-query": "1.21.6",
-    "@zag-js/editable": "1.21.6",
-    "@zag-js/file-upload": "1.21.6",
-    "@zag-js/file-utils": "1.21.6",
-    "@zag-js/floating-panel": "1.21.6",
-    "@zag-js/focus-trap": "1.21.6",
-    "@zag-js/highlight-word": "1.21.6",
-    "@zag-js/hover-card": "1.21.6",
-    "@zag-js/i18n-utils": "1.21.6",
-    "@zag-js/json-tree-utils": "1.21.6",
-    "@zag-js/listbox": "1.21.6",
-    "@zag-js/menu": "1.21.6",
-    "@zag-js/number-input": "1.21.6",
-    "@zag-js/pagination": "1.21.6",
-    "@zag-js/password-input": "1.21.6",
-    "@zag-js/pin-input": "1.21.6",
-    "@zag-js/popover": "1.21.6",
-    "@zag-js/presence": "1.21.6",
-    "@zag-js/progress": "1.21.6",
-    "@zag-js/qr-code": "1.21.6",
-    "@zag-js/radio-group": "1.21.6",
-    "@zag-js/rating-group": "1.21.6",
-    "@zag-js/scroll-area": "1.21.6",
-    "@zag-js/select": "1.21.6",
-    "@zag-js/signature-pad": "1.21.6",
-    "@zag-js/slider": "1.21.6",
-    "@zag-js/splitter": "1.21.6",
-    "@zag-js/steps": "1.21.6",
-    "@zag-js/switch": "1.21.6",
-    "@zag-js/tabs": "1.21.6",
-    "@zag-js/tags-input": "1.21.6",
-    "@zag-js/time-picker": "1.21.6",
-    "@zag-js/timer": "1.21.6",
-    "@zag-js/toast": "1.21.6",
-    "@zag-js/toggle": "1.21.6",
-    "@zag-js/toggle-group": "1.21.6",
-    "@zag-js/tooltip": "1.21.6",
-    "@zag-js/tour": "1.21.6",
-    "@zag-js/tree-view": "1.21.6",
-    "@zag-js/types": "1.21.6",
-    "@zag-js/utils": "1.21.6",
-    "@zag-js/vue": "1.21.6"
+    "@zag-js/accordion": "1.21.9",
+    "@zag-js/anatomy": "1.21.9",
+    "@zag-js/angle-slider": "1.21.9",
+    "@zag-js/async-list": "1.21.9",
+    "@zag-js/auto-resize": "1.21.9",
+    "@zag-js/avatar": "1.21.9",
+    "@zag-js/carousel": "1.21.9",
+    "@zag-js/checkbox": "1.21.9",
+    "@zag-js/clipboard": "1.21.9",
+    "@zag-js/collapsible": "1.21.9",
+    "@zag-js/collection": "1.21.9",
+    "@zag-js/color-picker": "1.21.9",
+    "@zag-js/color-utils": "1.21.9",
+    "@zag-js/combobox": "1.21.9",
+    "@zag-js/core": "1.21.9",
+    "@zag-js/date-picker": "1.21.9",
+    "@zag-js/date-utils": "1.21.9",
+    "@zag-js/dialog": "1.21.9",
+    "@zag-js/dom-query": "1.21.9",
+    "@zag-js/editable": "1.21.9",
+    "@zag-js/file-upload": "1.21.9",
+    "@zag-js/file-utils": "1.21.9",
+    "@zag-js/floating-panel": "1.21.9",
+    "@zag-js/focus-trap": "1.21.9",
+    "@zag-js/highlight-word": "1.21.9",
+    "@zag-js/hover-card": "1.21.9",
+    "@zag-js/i18n-utils": "1.21.9",
+    "@zag-js/json-tree-utils": "1.21.9",
+    "@zag-js/listbox": "1.21.9",
+    "@zag-js/menu": "1.21.9",
+    "@zag-js/number-input": "1.21.9",
+    "@zag-js/pagination": "1.21.9",
+    "@zag-js/password-input": "1.21.9",
+    "@zag-js/pin-input": "1.21.9",
+    "@zag-js/popover": "1.21.9",
+    "@zag-js/presence": "1.21.9",
+    "@zag-js/progress": "1.21.9",
+    "@zag-js/qr-code": "1.21.9",
+    "@zag-js/radio-group": "1.21.9",
+    "@zag-js/rating-group": "1.21.9",
+    "@zag-js/scroll-area": "1.21.9",
+    "@zag-js/select": "1.21.9",
+    "@zag-js/signature-pad": "1.21.9",
+    "@zag-js/slider": "1.21.9",
+    "@zag-js/splitter": "1.21.9",
+    "@zag-js/steps": "1.21.9",
+    "@zag-js/switch": "1.21.9",
+    "@zag-js/tabs": "1.21.9",
+    "@zag-js/tags-input": "1.21.9",
+    "@zag-js/time-picker": "1.21.9",
+    "@zag-js/timer": "1.21.9",
+    "@zag-js/toast": "1.21.9",
+    "@zag-js/toggle": "1.21.9",
+    "@zag-js/toggle-group": "1.21.9",
+    "@zag-js/tooltip": "1.21.9",
+    "@zag-js/tour": "1.21.9",
+    "@zag-js/tree-view": "1.21.9",
+    "@zag-js/types": "1.21.9",
+    "@zag-js/utils": "1.21.9",
+    "@zag-js/vue": "1.21.9"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.0",
@@ -216,7 +217,7 @@
     "globby": "14.1.0",
     "histoire": "0.17.17",
     "jsdom": "26.1.0",
-    "lucide-vue-next": "0.539.0",
+    "lucide-vue-next": "0.540.0",
     "resize-observer-polyfill": "1.5.1",
     "typescript": "5.9.2",
     "vite": "7.1.2",