@ark-ui/vue 5.16.1 → 5.18.0

package/dist/components/checkbox/checkbox-group-provider.vue.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const factory = require('../factory.cjs');
+const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
+const useForwardExpose = require('../../utils/use-forward-expose.cjs');
+const checkbox_anatomy = require('./checkbox.anatomy.cjs');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "checkbox-group-provider",
+  props: {
+    value: {},
+    asChild: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const checkboxGroup = vue.computed(() => props.value);
+    useCheckboxGroupContext.CheckboxGroupContextProvider(checkboxGroup);
+    useForwardExpose.useForwardExpose();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ role: "group" }, vue.unref(checkbox_anatomy.checkboxAnatomy).build().group.attrs, { "as-child": _ctx.asChild }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as-child"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/components/checkbox/checkbox-group-provider.vue.d.cts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, UnwrapRef, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { PolymorphicProps } from '../factory';
+import { UseCheckboxGroupReturn } from './use-checkbox-group';
+interface GroupProviderProps {
+    value: UnwrapRef<UseCheckboxGroupReturn>;
+}
+export interface CheckboxGroupProviderBaseProps extends GroupProviderProps, PolymorphicProps {
+}
+export interface CheckboxGroupProviderProps extends CheckboxGroupProviderBaseProps, 
+/**
+ * @vue-ignore
+ */
+HTMLAttributes {
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<CheckboxGroupProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CheckboxGroupProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/checkbox-group-provider.vue.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, UnwrapRef, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { PolymorphicProps } from '../factory';
+import { UseCheckboxGroupReturn } from './use-checkbox-group';
+interface GroupProviderProps {
+    value: UnwrapRef<UseCheckboxGroupReturn>;
+}
+export interface CheckboxGroupProviderBaseProps extends GroupProviderProps, PolymorphicProps {
+}
+export interface CheckboxGroupProviderProps extends CheckboxGroupProviderBaseProps, 
+/**
+ * @vue-ignore
+ */
+HTMLAttributes {
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<CheckboxGroupProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CheckboxGroupProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/checkbox-group-provider.vue.js

@@ -0,0 +1,29 @@
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { ark } from '../factory.js';
+import { CheckboxGroupContextProvider } from './use-checkbox-group-context.js';
+import { useForwardExpose } from '../../utils/use-forward-expose.js';
+import { checkboxAnatomy } from './checkbox.anatomy.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "checkbox-group-provider",
+  props: {
+    value: {},
+    asChild: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const checkboxGroup = computed(() => props.value);
+    CheckboxGroupContextProvider(checkboxGroup);
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ark).div, mergeProps({ role: "group" }, unref(checkboxAnatomy).build().group.attrs, { "as-child": _ctx.asChild }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as-child"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/checkbox/checkbox-group-provider.vue2.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const checkboxGroupProvider_vue_vue_type_script_setup_true_lang = require('./checkbox-group-provider.vue.cjs');
+
+
+
+exports.default = checkboxGroupProvider_vue_vue_type_script_setup_true_lang.default;

package/dist/components/checkbox/checkbox-group-provider.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './checkbox-group-provider.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/checkbox/checkbox-group.vue.cjs

@@ -29,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emits = __emit;
     const checkboxGroup = useCheckboxGroup.useCheckboxGroup(props, emits);
-    useCheckboxGroupContext.CheckboxGroupProvider(checkboxGroup);
+    useCheckboxGroupContext.CheckboxGroupContextProvider(checkboxGroup);
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ role: "group" }, { ...vue.unref(checkbox_anatomy.checkboxAnatomy).build().group.attrs }, { "as-child": _ctx.asChild }), {

package/dist/components/checkbox/checkbox-group.vue.js

@@ -2,7 +2,7 @@ import { defineComponent, mergeDefaults, createBlock, openBlock, unref, mergePro
 import { ark } from '../factory.js';
 import { checkboxAnatomy } from './checkbox.anatomy.js';
 import { useCheckboxGroup } from './use-checkbox-group.js';
-import { CheckboxGroupProvider } from './use-checkbox-group-context.js';
+import { CheckboxGroupContextProvider } from './use-checkbox-group-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -25,7 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const checkboxGroup = useCheckboxGroup(props, emits);
-    CheckboxGroupProvider(checkboxGroup);
+    CheckboxGroupContextProvider(checkboxGroup);
     useForwardExpose();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ark).div, mergeProps({ role: "group" }, { ...unref(checkboxAnatomy).build().group.attrs }, { "as-child": _ctx.asChild }), {

package/dist/components/checkbox/checkbox.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const checkboxContext_vue_vue_type_script_setup_true_lang = require('./checkbox-context.vue.cjs');
 const checkboxControl_vue_vue_type_script_setup_true_lang = require('./checkbox-control.vue.cjs');
 const checkboxGroup_vue_vue_type_script_setup_true_lang = require('./checkbox-group.vue.cjs');
+const checkboxGroupProvider_vue_vue_type_script_setup_true_lang = require('./checkbox-group-provider.vue.cjs');
 const checkboxHiddenInput_vue_vue_type_script_setup_true_lang = require('./checkbox-hidden-input.vue.cjs');
 const checkboxIndicator_vue_vue_type_script_setup_true_lang = require('./checkbox-indicator.vue.cjs');
 const checkboxLabel_vue_vue_type_script_setup_true_lang = require('./checkbox-label.vue.cjs');
@@ -16,6 +17,7 @@ const checkboxRoot_vue_vue_type_script_setup_true_lang = require('./checkbox-roo
 exports.Context = checkboxContext_vue_vue_type_script_setup_true_lang.default;
 exports.Control = checkboxControl_vue_vue_type_script_setup_true_lang.default;
 exports.Group = checkboxGroup_vue_vue_type_script_setup_true_lang.default;
+exports.GroupProvider = checkboxGroupProvider_vue_vue_type_script_setup_true_lang.default;
 exports.HiddenInput = checkboxHiddenInput_vue_vue_type_script_setup_true_lang.default;
 exports.Indicator = checkboxIndicator_vue_vue_type_script_setup_true_lang.default;
 exports.Label = checkboxLabel_vue_vue_type_script_setup_true_lang.default;

package/dist/components/checkbox/checkbox.d.cts

@@ -2,6 +2,7 @@ export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
 export { default as Context, type CheckboxContextProps as ContextProps } from './checkbox-context.vue';
 export { default as Control, type CheckboxControlBaseProps as ControlBaseProps, type CheckboxControlProps as ControlProps, } from './checkbox-control.vue';
 export { default as Group, type CheckboxGroupBaseProps as GroupBaseProps, type CheckboxGroupProps as GroupProps, } from './checkbox-group.vue';
+export { default as GroupProvider, type CheckboxGroupProviderBaseProps as GroupProviderBaseProps, type CheckboxGroupProviderProps as GroupProviderProps, } from './checkbox-group-provider.vue';
 export { default as HiddenInput, type CheckboxHiddenInputBaseProps as HiddenInputBaseProps, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input.vue';
 export { default as Indicator, type CheckboxIndicatorBaseProps as IndicatorBaseProps, type CheckboxIndicatorProps as IndicatorProps, } from './checkbox-indicator.vue';
 export { default as Label, type CheckboxLabelBaseProps as LabelBaseProps, type CheckboxLabelProps as LabelProps, } from './checkbox-label.vue';

package/dist/components/checkbox/checkbox.d.ts

@@ -2,6 +2,7 @@ export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
 export { default as Context, type CheckboxContextProps as ContextProps } from './checkbox-context.vue';
 export { default as Control, type CheckboxControlBaseProps as ControlBaseProps, type CheckboxControlProps as ControlProps, } from './checkbox-control.vue';
 export { default as Group, type CheckboxGroupBaseProps as GroupBaseProps, type CheckboxGroupProps as GroupProps, } from './checkbox-group.vue';
+export { default as GroupProvider, type CheckboxGroupProviderBaseProps as GroupProviderBaseProps, type CheckboxGroupProviderProps as GroupProviderProps, } from './checkbox-group-provider.vue';
 export { default as HiddenInput, type CheckboxHiddenInputBaseProps as HiddenInputBaseProps, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input.vue';
 export { default as Indicator, type CheckboxIndicatorBaseProps as IndicatorBaseProps, type CheckboxIndicatorProps as IndicatorProps, } from './checkbox-indicator.vue';
 export { default as Label, type CheckboxLabelBaseProps as LabelBaseProps, type CheckboxLabelProps as LabelProps, } from './checkbox-label.vue';

package/dist/components/checkbox/checkbox.js

@@ -1,6 +1,7 @@
 export { default as Context } from './checkbox-context.vue.js';
 export { default as Control } from './checkbox-control.vue.js';
 export { default as Group } from './checkbox-group.vue.js';
+export { default as GroupProvider } from './checkbox-group-provider.vue.js';
 export { default as HiddenInput } from './checkbox-hidden-input.vue.js';
 export { default as Indicator } from './checkbox-indicator.vue.js';
 export { default as Label } from './checkbox-label.vue.js';

package/dist/components/checkbox/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const checkboxContext_vue_vue_type_script_setup_true_lang = require('./checkbox-context.vue.cjs');
 const checkboxControl_vue_vue_type_script_setup_true_lang = require('./checkbox-control.vue.cjs');
 const checkboxGroup_vue_vue_type_script_setup_true_lang = require('./checkbox-group.vue.cjs');
+const checkboxGroupProvider_vue_vue_type_script_setup_true_lang = require('./checkbox-group-provider.vue.cjs');
 const checkboxHiddenInput_vue_vue_type_script_setup_true_lang = require('./checkbox-hidden-input.vue.cjs');
 const checkboxIndicator_vue_vue_type_script_setup_true_lang = require('./checkbox-indicator.vue.cjs');
 const checkboxLabel_vue_vue_type_script_setup_true_lang = require('./checkbox-label.vue.cjs');
@@ -22,6 +23,7 @@ const checkbox = require('./checkbox.cjs');
 exports.CheckboxContext = checkboxContext_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxControl = checkboxControl_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxGroup = checkboxGroup_vue_vue_type_script_setup_true_lang.default;
+exports.CheckboxGroupProvider = checkboxGroupProvider_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxHiddenInput = checkboxHiddenInput_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxIndicator = checkboxIndicator_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxLabel = checkboxLabel_vue_vue_type_script_setup_true_lang.default;

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

@@ -2,6 +2,7 @@ export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState
 export { default as CheckboxContext, type CheckboxContextProps } from './checkbox-context.vue';
 export { default as CheckboxControl, type CheckboxControlProps, type CheckboxControlBaseProps, } from './checkbox-control.vue';
 export { default as CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupBaseProps } from './checkbox-group.vue';
+export { default as CheckboxGroupProvider, type CheckboxGroupProviderProps, type CheckboxGroupProviderBaseProps, } from './checkbox-group-provider.vue';
 export { default as CheckboxHiddenInput, type CheckboxHiddenInputProps, type CheckboxHiddenInputBaseProps, } from './checkbox-hidden-input.vue';
 export { default as CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxIndicatorBaseProps, } from './checkbox-indicator.vue';
 export { default as CheckboxLabel, type CheckboxLabelProps, type CheckboxLabelBaseProps } from './checkbox-label.vue';

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

@@ -2,6 +2,7 @@ export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState
 export { default as CheckboxContext, type CheckboxContextProps } from './checkbox-context.vue';
 export { default as CheckboxControl, type CheckboxControlProps, type CheckboxControlBaseProps, } from './checkbox-control.vue';
 export { default as CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupBaseProps } from './checkbox-group.vue';
+export { default as CheckboxGroupProvider, type CheckboxGroupProviderProps, type CheckboxGroupProviderBaseProps, } from './checkbox-group-provider.vue';
 export { default as CheckboxHiddenInput, type CheckboxHiddenInputProps, type CheckboxHiddenInputBaseProps, } from './checkbox-hidden-input.vue';
 export { default as CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxIndicatorBaseProps, } from './checkbox-indicator.vue';
 export { default as CheckboxLabel, type CheckboxLabelProps, type CheckboxLabelBaseProps } from './checkbox-label.vue';

package/dist/components/checkbox/index.js

@@ -1,6 +1,7 @@
 export { default as CheckboxContext } from './checkbox-context.vue.js';
 export { default as CheckboxControl } from './checkbox-control.vue.js';
 export { default as CheckboxGroup } from './checkbox-group.vue.js';
+export { default as CheckboxGroupProvider } from './checkbox-group-provider.vue.js';
 export { default as CheckboxHiddenInput } from './checkbox-hidden-input.vue.js';
 export { default as CheckboxIndicator } from './checkbox-indicator.vue.js';
 export { default as CheckboxLabel } from './checkbox-label.vue.js';

package/dist/components/checkbox/use-checkbox-group-context.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createContext = require('../../utils/create-context.cjs');
 
-const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext.createContext('CheckboxGroupContext');
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext.createContext('CheckboxGroupContext');
 
-exports.CheckboxGroupProvider = CheckboxGroupProvider;
+exports.CheckboxGroupContextProvider = CheckboxGroupContextProvider;
 exports.useCheckboxGroupContext = useCheckboxGroupContext;

package/dist/components/checkbox/use-checkbox-group-context.d.cts

@@ -1,4 +1,4 @@
 import { UseCheckboxGroupReturn } from './use-checkbox-group';
 export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
 }
-export declare const CheckboxGroupProvider: (opts: UseCheckboxGroupContext | undefined) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext | undefined;
+export declare const CheckboxGroupContextProvider: (opts: UseCheckboxGroupContext | undefined) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext | undefined;

package/dist/components/checkbox/use-checkbox-group-context.d.ts

@@ -1,4 +1,4 @@
 import { UseCheckboxGroupReturn } from './use-checkbox-group';
 export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
 }
-export declare const CheckboxGroupProvider: (opts: UseCheckboxGroupContext | undefined) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext | undefined;
+export declare const CheckboxGroupContextProvider: (opts: UseCheckboxGroupContext | undefined) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext | undefined;

package/dist/components/checkbox/use-checkbox-group-context.js

@@ -1,5 +1,5 @@
 import { createContext } from '../../utils/create-context.js';
 
-const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext('CheckboxGroupContext');
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext('CheckboxGroupContext');
 
-export { CheckboxGroupProvider, useCheckboxGroupContext };
+export { CheckboxGroupContextProvider, useCheckboxGroupContext };

package/dist/components/collapsible/collapsible-trigger.vue.cjs

@@ -16,12 +16,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const collapsible = useCollapsibleContext.useCollapsibleContext();
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).button, vue.normalizeProps(vue.guardReactiveProps(vue.unref(collapsible).getTriggerProps())), {
+      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).button, vue.mergeProps(vue.unref(collapsible).getTriggerProps(), { "as-child": _ctx.asChild }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16);
+      }, 16, ["as-child"]);
     };
   }
 });

package/dist/components/collapsible/collapsible-trigger.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useCollapsibleContext } from './use-collapsible-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';
@@ -12,12 +12,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const collapsible = useCollapsibleContext();
     useForwardExpose();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ark).button, normalizeProps(guardReactiveProps(unref(collapsible).getTriggerProps())), {
+      return openBlock(), createBlock(unref(ark).button, mergeProps(unref(collapsible).getTriggerProps(), { "as-child": _ctx.asChild }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16);
+      }, 16, ["as-child"]);
     };
   }
 });

package/dist/components/collection/index.cjs

@@ -6,6 +6,7 @@ const gridCollection = require('./grid-collection.cjs');
 const listCollection = require('./list-collection.cjs');
 const treeCollection = require('./tree-collection.cjs');
 const useListCollection = require('./use-list-collection.cjs');
+const useListSelection = require('./use-list-selection.cjs');
 
 
 
@@ -14,3 +15,4 @@ exports.createListCollection = listCollection.createListCollection;
 exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
 exports.createTreeCollection = treeCollection.createTreeCollection;
 exports.useListCollection = useListCollection.useListCollection;
+exports.useListSelection = useListSelection.useListSelection;

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

@@ -1,4 +1,5 @@
 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 { useListCollection, type UseListCollectionProps } from './use-list-collection';
+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,4 +1,5 @@
 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 { useListCollection, type UseListCollectionProps } from './use-list-collection';
+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

@@ -2,3 +2,4 @@ export { createGridCollection } from './grid-collection.js';
 export { createListCollection } from './list-collection.js';
 export { createFileTreeCollection, createTreeCollection } from './tree-collection.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 { filePathToTree, TreeCollection } from '@zag-js/collection';
+import { TreeCollection, filePathToTree } from '@zag-js/collection';
 
 const createTreeCollection = (options) => new TreeCollection(options);
 const createFileTreeCollection = (paths) => filePathToTree(paths);

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

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const collection = require('@zag-js/collection');
+const vue = require('vue');
+
+function useListSelection(props) {
+  const resolvedProps = vue.computed(() => {
+    const {
+      collection,
+      selectionMode = "single",
+      deselectable = true,
+      initialSelectedValues = [],
+      resetOnCollectionChange = false
+    } = vue.toValue(props);
+    return { collection, selectionMode, deselectable, initialSelectedValues, resetOnCollectionChange };
+  });
+  const createSelection = (values = []) => {
+    const { selectionMode, deselectable } = resolvedProps.value;
+    const selection2 = new collection.Selection(values);
+    selection2.selectionMode = selectionMode;
+    selection2.deselectable = deselectable;
+    return selection2;
+  };
+  const init = () => {
+    const { initialSelectedValues } = resolvedProps.value;
+    return createSelection(initialSelectedValues);
+  };
+  const selection = vue.shallowRef(init());
+  vue.watch(
+    [() => resolvedProps.value.collection.getValues(), () => resolvedProps.value.resetOnCollectionChange],
+    ([, resetOnCollectionChange]) => {
+      if (resetOnCollectionChange) {
+        selection.value = createSelection();
+      }
+    }
+  );
+  const selectedValues = vue.computed(() => Array.from(selection.value));
+  const isEmpty = vue.computed(() => selection.value.isEmpty());
+  const firstSelectedValue = vue.computed(() => {
+    const { collection } = resolvedProps.value;
+    return selection.value.firstSelectedValue(collection);
+  });
+  const lastSelectedValue = vue.computed(() => {
+    const { collection } = resolvedProps.value;
+    return selection.value.lastSelectedValue(collection);
+  });
+  return {
+    selectedValues,
+    isEmpty,
+    firstSelectedValue,
+    lastSelectedValue,
+    isSelected: (value) => {
+      return selection.value.isSelected(value);
+    },
+    isAllSelected: () => {
+      const { collection } = resolvedProps.value;
+      const allValues = collection.getValues();
+      return allValues.length > 0 && allValues.every((value) => selection.value.isSelected(value));
+    },
+    isSomeSelected: () => {
+      const { collection } = resolvedProps.value;
+      const allValues = collection.getValues();
+      return allValues.some((value) => selection.value.isSelected(value));
+    },
+    canSelect: (value) => {
+      const { collection } = resolvedProps.value;
+      return selection.value.canSelect(collection, value);
+    },
+    select: (value, forceToggle) => {
+      const { collection } = resolvedProps.value;
+      selection.value = selection.value.select(collection, value, forceToggle);
+    },
+    deselect: (value) => {
+      selection.value = selection.value.deselect(value);
+    },
+    toggle: (value) => {
+      const { collection } = resolvedProps.value;
+      selection.value = selection.value.toggleSelection(collection, value);
+    },
+    replace: (value) => {
+      const { collection } = resolvedProps.value;
+      selection.value = selection.value.replaceSelection(collection, value);
+    },
+    extend: (anchorValue, targetValue) => {
+      const { collection } = resolvedProps.value;
+      selection.value = selection.value.extendSelection(collection, anchorValue, targetValue);
+    },
+    setSelectedValues: (values) => {
+      selection.value = selection.value.setSelection(values);
+    },
+    clear: () => {
+      selection.value = selection.value.clearSelection();
+    },
+    resetSelection: () => {
+      selection.value = createSelection();
+    },
+    setSelection: (newSelection) => {
+      selection.value = selection.value.setSelection(newSelection);
+    },
+    setSelectionMode: (mode) => {
+      const newSelection = selection.value.copy();
+      newSelection.selectionMode = mode;
+      selection.value = newSelection;
+    },
+    setDeselectable: (deselectable) => {
+      const newSelection = selection.value.copy();
+      newSelection.deselectable = deselectable;
+      selection.value = newSelection;
+    }
+  };
+}
+
+exports.useListSelection = useListSelection;

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

@@ -0,0 +1,104 @@
+import { SelectionMode } from '@zag-js/collection';
+import { MaybeRef, Ref } from 'vue';
+import { CollectionItem, ListCollection } from './list-collection';
+export interface UseListSelectionProps<T extends CollectionItem> {
+    /**
+     * The selection mode.
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Whether the selection is deselectable.
+     */
+    deselectable?: boolean;
+    /**
+     * The initial selected values.
+     */
+    initialSelectedValues?: string[];
+    /**
+     * Whether to reset the selection when the collection changes.
+     */
+    resetOnCollectionChange?: boolean;
+    /**
+     * The collection to use.
+     */
+    collection: ListCollection<T>;
+}
+export declare function useListSelection<T extends CollectionItem>(props: MaybeRef<UseListSelectionProps<T>>): UseListSelectionReturn;
+export interface UseListSelectionReturn {
+    /**
+     * The selected values as an array.
+     */
+    selectedValues: Ref<string[]>;
+    /**
+     * Whether the selection is empty.
+     */
+    isEmpty: Ref<boolean>;
+    /**
+     * The first selected value.
+     */
+    firstSelectedValue: Ref<string | null>;
+    /**
+     * The last selected value.
+     */
+    lastSelectedValue: Ref<string | null>;
+    /**
+     * Check if a value is selected.
+     */
+    isSelected: (value: string | null) => boolean;
+    /**
+     * Check if a value can be selected.
+     */
+    canSelect: (value: string) => boolean;
+    /**
+     * Select a value.
+     */
+    select: (value: string, forceToggle?: boolean) => void;
+    /**
+     * Deselect a value.
+     */
+    deselect: (value: string) => void;
+    /**
+     * Toggle selection of a value.
+     */
+    toggle: (value: string) => void;
+    /**
+     * Replace the selection with a single value.
+     */
+    replace: (value: string | null) => void;
+    /**
+     * Extend the selection from anchor to target.
+     */
+    extend: (anchorValue: string, targetValue: string) => void;
+    /**
+     * Set the selected values.
+     */
+    setSelectedValues: (values: string[]) => void;
+    /**
+     * Clear the selection.
+     */
+    clear: () => void;
+    /**
+     * Clear all selections.
+     */
+    resetSelection: () => void;
+    /**
+     * Returns true if all items from the collection are selected.
+     */
+    isAllSelected: () => boolean;
+    /**
+     * Returns true if at least one item from the collection is selected.
+     */
+    isSomeSelected: () => boolean;
+    /**
+     * Set the selection to a specific array of items.
+     */
+    setSelection: (selection: string[]) => void;
+    /**
+     * Set the selection mode.
+     */
+    setSelectionMode: (mode: SelectionMode) => void;
+    /**
+     * Set whether the selection is deselectable.
+     */
+    setDeselectable: (deselectable: boolean) => void;
+}