@ark-ui/vue 5.20.0 → 5.22.0

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,11 +130,9 @@ 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 ComboboxEmpty } from './components/combobox/combobox-empty.vue.js';
 export { default as ComboboxContext } from './components/combobox/combobox-context.vue.js';
 export { default as ComboboxControl } from './components/combobox/combobox-control.vue.js';
 export { default as ComboboxInput } from './components/combobox/combobox-input.vue.js';
@@ -144,6 +148,7 @@ export { default as ComboboxPositioner } from './components/combobox/combobox-po
 export { default as ComboboxRootProvider } from './components/combobox/combobox-root-provider.vue.js';
 export { default as ComboboxRoot } from './components/combobox/combobox-root.vue.js';
 export { default as ComboboxTrigger } from './components/combobox/combobox-trigger.vue.js';
+export { comboboxAnatomy } from './components/combobox/combobox.anatomy.js';
 export { useCombobox } from './components/combobox/use-combobox.js';
 export { useComboboxContext } from './components/combobox/use-combobox-context.js';
 export { useComboboxItemContext } from './components/combobox/use-combobox-item-context.js';
@@ -304,6 +309,7 @@ import * as jsonTreeView from './components/json-tree-view/json-tree-view.js';
 export { jsonTreeView as JsonTreeView };
 export { default as ListboxContext } from './components/listbox/listbox-context.vue.js';
 export { default as ListboxContent } from './components/listbox/listbox-content.vue.js';
+export { default as ListboxEmpty } from './components/listbox/listbox-empty.vue.js';
 export { default as ListboxInput } from './components/listbox/listbox-input.vue.js';
 export { default as ListboxItem } from './components/listbox/listbox-item.vue.js';
 export { default as ListboxItemContext } from './components/listbox/listbox-item-context.vue.js';
@@ -315,6 +321,7 @@ export { default as ListboxLabel } from './components/listbox/listbox-label.vue.
 export { default as ListboxRoot } from './components/listbox/listbox-root.vue.js';
 export { default as ListboxRootProvider } from './components/listbox/listbox-root-provider.vue.js';
 export { default as ListboxValueText } from './components/listbox/listbox-value-text.vue.js';
+export { listboxAnatomy } from './components/listbox/listbox.anatomy.js';
 export { useListbox } from './components/listbox/use-listbox.js';
 export { useListboxContext } from './components/listbox/use-listbox-context.js';
 export { useListboxItemContext } from './components/listbox/use-listbox-item-context.js';
@@ -735,6 +742,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';
@@ -747,13 +755,11 @@ export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
-export { anatomy as listboxAnatomy } from '@zag-js/listbox';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export { anatomy as paginationAnatomy } from '@zag-js/pagination';

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.20.0",
+  "version": "5.22.0",
   "description": "A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -140,91 +140,92 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.21.7",
-    "@zag-js/anatomy": "1.21.7",
-    "@zag-js/angle-slider": "1.21.7",
-    "@zag-js/auto-resize": "1.21.7",
-    "@zag-js/avatar": "1.21.7",
-    "@zag-js/carousel": "1.21.7",
-    "@zag-js/checkbox": "1.21.7",
-    "@zag-js/clipboard": "1.21.7",
-    "@zag-js/collapsible": "1.21.7",
-    "@zag-js/collection": "1.21.7",
-    "@zag-js/color-picker": "1.21.7",
-    "@zag-js/color-utils": "1.21.7",
-    "@zag-js/combobox": "1.21.7",
-    "@zag-js/core": "1.21.7",
-    "@zag-js/date-picker": "1.21.7",
-    "@zag-js/date-utils": "1.21.7",
-    "@zag-js/dialog": "1.21.7",
-    "@zag-js/dom-query": "1.21.7",
-    "@zag-js/editable": "1.21.7",
-    "@zag-js/file-upload": "1.21.7",
-    "@zag-js/file-utils": "1.21.7",
-    "@zag-js/floating-panel": "1.21.7",
-    "@zag-js/focus-trap": "1.21.7",
-    "@zag-js/highlight-word": "1.21.7",
-    "@zag-js/hover-card": "1.21.7",
-    "@zag-js/i18n-utils": "1.21.7",
-    "@zag-js/json-tree-utils": "1.21.7",
-    "@zag-js/listbox": "1.21.7",
-    "@zag-js/menu": "1.21.7",
-    "@zag-js/number-input": "1.21.7",
-    "@zag-js/pagination": "1.21.7",
-    "@zag-js/password-input": "1.21.7",
-    "@zag-js/pin-input": "1.21.7",
-    "@zag-js/popover": "1.21.7",
-    "@zag-js/presence": "1.21.7",
-    "@zag-js/progress": "1.21.7",
-    "@zag-js/qr-code": "1.21.7",
-    "@zag-js/radio-group": "1.21.7",
-    "@zag-js/rating-group": "1.21.7",
-    "@zag-js/scroll-area": "1.21.7",
-    "@zag-js/select": "1.21.7",
-    "@zag-js/signature-pad": "1.21.7",
-    "@zag-js/slider": "1.21.7",
-    "@zag-js/splitter": "1.21.7",
-    "@zag-js/steps": "1.21.7",
-    "@zag-js/switch": "1.21.7",
-    "@zag-js/tabs": "1.21.7",
-    "@zag-js/tags-input": "1.21.7",
-    "@zag-js/time-picker": "1.21.7",
-    "@zag-js/timer": "1.21.7",
-    "@zag-js/toast": "1.21.7",
-    "@zag-js/toggle": "1.21.7",
-    "@zag-js/toggle-group": "1.21.7",
-    "@zag-js/tooltip": "1.21.7",
-    "@zag-js/tour": "1.21.7",
-    "@zag-js/tree-view": "1.21.7",
-    "@zag-js/types": "1.21.7",
-    "@zag-js/utils": "1.21.7",
-    "@zag-js/vue": "1.21.7"
+    "@zag-js/accordion": "1.22.1",
+    "@zag-js/anatomy": "1.22.1",
+    "@zag-js/angle-slider": "1.22.1",
+    "@zag-js/async-list": "1.22.1",
+    "@zag-js/auto-resize": "1.22.1",
+    "@zag-js/avatar": "1.22.1",
+    "@zag-js/carousel": "1.22.1",
+    "@zag-js/checkbox": "1.22.1",
+    "@zag-js/clipboard": "1.22.1",
+    "@zag-js/collapsible": "1.22.1",
+    "@zag-js/collection": "1.22.1",
+    "@zag-js/color-picker": "1.22.1",
+    "@zag-js/color-utils": "1.22.1",
+    "@zag-js/combobox": "1.22.1",
+    "@zag-js/core": "1.22.1",
+    "@zag-js/date-picker": "1.22.1",
+    "@zag-js/date-utils": "1.22.1",
+    "@zag-js/dialog": "1.22.1",
+    "@zag-js/dom-query": "1.22.1",
+    "@zag-js/editable": "1.22.1",
+    "@zag-js/file-upload": "1.22.1",
+    "@zag-js/file-utils": "1.22.1",
+    "@zag-js/floating-panel": "1.22.1",
+    "@zag-js/focus-trap": "1.22.1",
+    "@zag-js/highlight-word": "1.22.1",
+    "@zag-js/hover-card": "1.22.1",
+    "@zag-js/i18n-utils": "1.22.1",
+    "@zag-js/json-tree-utils": "1.22.1",
+    "@zag-js/listbox": "1.22.1",
+    "@zag-js/menu": "1.22.1",
+    "@zag-js/number-input": "1.22.1",
+    "@zag-js/pagination": "1.22.1",
+    "@zag-js/password-input": "1.22.1",
+    "@zag-js/pin-input": "1.22.1",
+    "@zag-js/popover": "1.22.1",
+    "@zag-js/presence": "1.22.1",
+    "@zag-js/progress": "1.22.1",
+    "@zag-js/qr-code": "1.22.1",
+    "@zag-js/radio-group": "1.22.1",
+    "@zag-js/rating-group": "1.22.1",
+    "@zag-js/scroll-area": "1.22.1",
+    "@zag-js/select": "1.22.1",
+    "@zag-js/signature-pad": "1.22.1",
+    "@zag-js/slider": "1.22.1",
+    "@zag-js/splitter": "1.22.1",
+    "@zag-js/steps": "1.22.1",
+    "@zag-js/switch": "1.22.1",
+    "@zag-js/tabs": "1.22.1",
+    "@zag-js/tags-input": "1.22.1",
+    "@zag-js/time-picker": "1.22.1",
+    "@zag-js/timer": "1.22.1",
+    "@zag-js/toast": "1.22.1",
+    "@zag-js/toggle": "1.22.1",
+    "@zag-js/toggle-group": "1.22.1",
+    "@zag-js/tooltip": "1.22.1",
+    "@zag-js/tour": "1.22.1",
+    "@zag-js/tree-view": "1.22.1",
+    "@zag-js/types": "1.22.1",
+    "@zag-js/utils": "1.22.1",
+    "@zag-js/vue": "1.22.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.2.0",
+    "@biomejs/biome": "2.2.2",
     "@histoire/plugin-vue": "0.17.17",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.7.0",
+    "@testing-library/jest-dom": "6.8.0",
     "@testing-library/user-event": "14.6.1",
     "@testing-library/vue": "8.1.0",
     "@types/jsdom": "21.1.7",
     "@vitejs/plugin-vue": "6.0.1",
     "@vitejs/plugin-vue-jsx": "5.0.1",
-    "@vue/compiler-sfc": "3.5.18",
+    "@vue/compiler-sfc": "3.5.20",
     "clean-package": "2.2.0",
     "image-conversion": "2.1.1",
     "globby": "14.1.0",
     "histoire": "0.17.17",
     "jsdom": "26.1.0",
-    "lucide-vue-next": "0.540.0",
+    "lucide-vue-next": "0.541.0",
     "resize-observer-polyfill": "1.5.1",
     "typescript": "5.9.2",
-    "vite": "7.1.2",
+    "vite": "7.1.3",
     "vite-plugin-dts": "4.5.4",
     "vitest": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
-    "vue": "3.5.18",
-    "vue-tsc": "3.0.5"
+    "vue": "3.5.20",
+    "vue-tsc": "3.0.6"
   },
   "peerDependencies": {
     "vue": ">=3.5.0"