@ark-ui/react 5.16.1 → 5.18.0

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const checkbox_anatomy = require('./checkbox.anatomy.cjs');
+const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
+
+const CheckboxGroupProvider = react.forwardRef((props, ref) => {
+  const [localProps, restProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(useCheckboxGroupContext.CheckboxGroupContextProvider, { value: localProps.value, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, role: "group", ...restProps, ...checkbox_anatomy.checkboxAnatomy.build().group.attrs }) });
+});
+CheckboxGroupProvider.displayName = "CheckboxGroupProvider";
+
+exports.CheckboxGroupProvider = CheckboxGroupProvider;

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

@@ -0,0 +1,13 @@
+import { Assign } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseCheckboxGroupContext } from './use-checkbox-group-context';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+interface ProviderProps {
+    value: UseCheckboxGroupContext;
+}
+export interface CheckboxGroupProviderBaseProps extends ProviderProps, PolymorphicProps {
+}
+export interface CheckboxGroupProviderProps extends Assign<HTMLProps<'div'>, CheckboxGroupProviderBaseProps> {
+}
+export declare const CheckboxGroupProvider: ForwardRefExoticComponent<CheckboxGroupProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,13 @@
+import { Assign } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseCheckboxGroupContext } from './use-checkbox-group-context';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+interface ProviderProps {
+    value: UseCheckboxGroupContext;
+}
+export interface CheckboxGroupProviderBaseProps extends ProviderProps, PolymorphicProps {
+}
+export interface CheckboxGroupProviderProps extends Assign<HTMLProps<'div'>, CheckboxGroupProviderBaseProps> {
+}
+export declare const CheckboxGroupProvider: ForwardRefExoticComponent<CheckboxGroupProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { checkboxAnatomy } from './checkbox.anatomy.js';
+import { CheckboxGroupContextProvider } from './use-checkbox-group-context.js';
+
+const CheckboxGroupProvider = forwardRef((props, ref) => {
+  const [localProps, restProps] = createSplitProps()(props, ["value"]);
+  return /* @__PURE__ */ jsx(CheckboxGroupContextProvider, { value: localProps.value, children: /* @__PURE__ */ jsx(ark.div, { ref, role: "group", ...restProps, ...checkboxAnatomy.build().group.attrs }) });
+});
+CheckboxGroupProvider.displayName = "CheckboxGroupProvider";
+
+export { CheckboxGroupProvider };

package/dist/components/checkbox/checkbox.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
 const checkboxGroup = require('./checkbox-group.cjs');
+const checkboxGroupProvider = require('./checkbox-group-provider.cjs');
 const checkboxHiddenInput = require('./checkbox-hidden-input.cjs');
 const checkboxIndicator = require('./checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
@@ -16,6 +17,7 @@ const checkboxRootProvider = require('./checkbox-root-provider.cjs');
 exports.Context = checkboxContext.CheckboxContext;
 exports.Control = checkboxControl.CheckboxControl;
 exports.Group = checkboxGroup.CheckboxGroup;
+exports.GroupProvider = checkboxGroupProvider.CheckboxGroupProvider;
 exports.HiddenInput = checkboxHiddenInput.CheckboxHiddenInput;
 exports.Indicator = checkboxIndicator.CheckboxIndicator;
 exports.Label = checkboxLabel.CheckboxLabel;

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

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

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

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

package/dist/components/checkbox/checkbox.js

@@ -1,6 +1,7 @@
 export { CheckboxContext as Context } from './checkbox-context.js';
 export { CheckboxControl as Control } from './checkbox-control.js';
 export { CheckboxGroup as Group } from './checkbox-group.js';
+export { CheckboxGroupProvider as GroupProvider } from './checkbox-group-provider.js';
 export { CheckboxHiddenInput as HiddenInput } from './checkbox-hidden-input.js';
 export { CheckboxIndicator as Indicator } from './checkbox-indicator.js';
 export { CheckboxLabel as Label } from './checkbox-label.js';

package/dist/components/checkbox/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
 const checkboxGroup = require('./checkbox-group.cjs');
+const checkboxGroupProvider = require('./checkbox-group-provider.cjs');
 const checkboxHiddenInput = require('./checkbox-hidden-input.cjs');
 const checkboxIndicator = require('./checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
@@ -22,6 +23,7 @@ const checkbox = require('./checkbox.cjs');
 exports.CheckboxContext = checkboxContext.CheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxGroup = checkboxGroup.CheckboxGroup;
+exports.CheckboxGroupProvider = checkboxGroupProvider.CheckboxGroupProvider;
 exports.CheckboxHiddenInput = checkboxHiddenInput.CheckboxHiddenInput;
 exports.CheckboxIndicator = checkboxIndicator.CheckboxIndicator;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;

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

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

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

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

package/dist/components/checkbox/index.js

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

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/use-list-selection.cjs

@@ -0,0 +1,96 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const collection = require('@zag-js/collection');
+const react = require('react');
+const useEvent = require('../../utils/use-event.cjs');
+
+function useListSelection(props) {
+  const {
+    collection: collection$1,
+    selectionMode = "single",
+    deselectable = true,
+    initialSelectedValues = [],
+    resetOnCollectionChange = false
+  } = props;
+  const createSelection = react.useCallback(
+    (values = []) => {
+      const selection2 = new collection.Selection(values);
+      selection2.selectionMode = selectionMode;
+      selection2.deselectable = deselectable;
+      return selection2;
+    },
+    [selectionMode, deselectable]
+  );
+  const [selection, setSelectionState] = react.useState(() => createSelection(initialSelectedValues));
+  react.useEffect(() => {
+    if (resetOnCollectionChange) {
+      setSelectionState(createSelection());
+    }
+  }, [collection$1.toString(), resetOnCollectionChange, createSelection]);
+  const selectedValues = react.useMemo(() => Array.from(selection), [selection]);
+  const isEmpty = react.useMemo(() => selection.isEmpty(), [selection]);
+  const firstSelectedValue = react.useMemo(() => selection.firstSelectedValue(collection$1), [selection, collection$1]);
+  const lastSelectedValue = react.useMemo(() => selection.lastSelectedValue(collection$1), [selection, collection$1]);
+  return {
+    selectedValues,
+    isEmpty,
+    firstSelectedValue,
+    lastSelectedValue,
+    isSelected: useEvent.useEvent((value) => {
+      return selection.isSelected(value);
+    }),
+    isAllSelected: useEvent.useEvent(() => {
+      const allValues = collection$1.getValues();
+      return allValues.length > 0 && allValues.every((value) => selection.isSelected(value));
+    }),
+    isSomeSelected: useEvent.useEvent(() => {
+      const allValues = collection$1.getValues();
+      return allValues.some((value) => selection.isSelected(value));
+    }),
+    canSelect: useEvent.useEvent((value) => {
+      return selection.canSelect(collection$1, value);
+    }),
+    select: useEvent.useEvent((value, forceToggle) => {
+      setSelectionState(selection.select(collection$1, value, forceToggle));
+    }),
+    deselect: useEvent.useEvent((value) => {
+      setSelectionState(selection.deselect(value));
+    }),
+    toggle: useEvent.useEvent((value) => {
+      setSelectionState(selection.toggleSelection(collection$1, value));
+    }),
+    replace: useEvent.useEvent((value) => {
+      setSelectionState(selection.replaceSelection(collection$1, value));
+    }),
+    extend: useEvent.useEvent((anchorValue, targetValue) => {
+      setSelectionState(selection.extendSelection(collection$1, anchorValue, targetValue));
+    }),
+    setSelectedValues: useEvent.useEvent((values) => {
+      setSelectionState(selection.setSelection(values));
+    }),
+    clear: useEvent.useEvent(() => {
+      setSelectionState(selection.clearSelection());
+    }),
+    resetSelection: useEvent.useEvent(() => {
+      setSelectionState(createSelection());
+    }),
+    setSelection: useEvent.useEvent((newSelection) => {
+      setSelectionState(selection.setSelection(newSelection));
+    }),
+    setSelectionMode: useEvent.useEvent((mode) => {
+      const newSelection = selection.copy();
+      newSelection.selectionMode = mode;
+      setSelectionState(newSelection);
+    }),
+    setDeselectable: useEvent.useEvent((deselectable2) => {
+      const newSelection = selection.copy();
+      newSelection.deselectable = deselectable2;
+      setSelectionState(newSelection);
+    })
+  };
+}
+
+exports.useListSelection = useListSelection;

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

@@ -0,0 +1,103 @@
+import { SelectionMode } from '@zag-js/collection';
+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: UseListSelectionProps<T>): UseListSelectionReturn;
+export interface UseListSelectionReturn {
+    /**
+     * The selected values as an array.
+     */
+    selectedValues: string[];
+    /**
+     * Whether the selection is empty.
+     */
+    isEmpty: boolean;
+    /**
+     * The first selected value.
+     */
+    firstSelectedValue: string | null;
+    /**
+     * The last selected value.
+     */
+    lastSelectedValue: 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;
+}

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

@@ -0,0 +1,103 @@
+import { SelectionMode } from '@zag-js/collection';
+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: UseListSelectionProps<T>): UseListSelectionReturn;
+export interface UseListSelectionReturn {
+    /**
+     * The selected values as an array.
+     */
+    selectedValues: string[];
+    /**
+     * Whether the selection is empty.
+     */
+    isEmpty: boolean;
+    /**
+     * The first selected value.
+     */
+    firstSelectedValue: string | null;
+    /**
+     * The last selected value.
+     */
+    lastSelectedValue: 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;
+}

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

@@ -0,0 +1,92 @@
+'use client';
+import { Selection } from '@zag-js/collection';
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useEvent } from '../../utils/use-event.js';
+
+function useListSelection(props) {
+  const {
+    collection,
+    selectionMode = "single",
+    deselectable = true,
+    initialSelectedValues = [],
+    resetOnCollectionChange = false
+  } = props;
+  const createSelection = useCallback(
+    (values = []) => {
+      const selection2 = new Selection(values);
+      selection2.selectionMode = selectionMode;
+      selection2.deselectable = deselectable;
+      return selection2;
+    },
+    [selectionMode, deselectable]
+  );
+  const [selection, setSelectionState] = useState(() => createSelection(initialSelectedValues));
+  useEffect(() => {
+    if (resetOnCollectionChange) {
+      setSelectionState(createSelection());
+    }
+  }, [collection.toString(), resetOnCollectionChange, createSelection]);
+  const selectedValues = useMemo(() => Array.from(selection), [selection]);
+  const isEmpty = useMemo(() => selection.isEmpty(), [selection]);
+  const firstSelectedValue = useMemo(() => selection.firstSelectedValue(collection), [selection, collection]);
+  const lastSelectedValue = useMemo(() => selection.lastSelectedValue(collection), [selection, collection]);
+  return {
+    selectedValues,
+    isEmpty,
+    firstSelectedValue,
+    lastSelectedValue,
+    isSelected: useEvent((value) => {
+      return selection.isSelected(value);
+    }),
+    isAllSelected: useEvent(() => {
+      const allValues = collection.getValues();
+      return allValues.length > 0 && allValues.every((value) => selection.isSelected(value));
+    }),
+    isSomeSelected: useEvent(() => {
+      const allValues = collection.getValues();
+      return allValues.some((value) => selection.isSelected(value));
+    }),
+    canSelect: useEvent((value) => {
+      return selection.canSelect(collection, value);
+    }),
+    select: useEvent((value, forceToggle) => {
+      setSelectionState(selection.select(collection, value, forceToggle));
+    }),
+    deselect: useEvent((value) => {
+      setSelectionState(selection.deselect(value));
+    }),
+    toggle: useEvent((value) => {
+      setSelectionState(selection.toggleSelection(collection, value));
+    }),
+    replace: useEvent((value) => {
+      setSelectionState(selection.replaceSelection(collection, value));
+    }),
+    extend: useEvent((anchorValue, targetValue) => {
+      setSelectionState(selection.extendSelection(collection, anchorValue, targetValue));
+    }),
+    setSelectedValues: useEvent((values) => {
+      setSelectionState(selection.setSelection(values));
+    }),
+    clear: useEvent(() => {
+      setSelectionState(selection.clearSelection());
+    }),
+    resetSelection: useEvent(() => {
+      setSelectionState(createSelection());
+    }),
+    setSelection: useEvent((newSelection) => {
+      setSelectionState(selection.setSelection(newSelection));
+    }),
+    setSelectionMode: useEvent((mode) => {
+      const newSelection = selection.copy();
+      newSelection.selectionMode = mode;
+      setSelectionState(newSelection);
+    }),
+    setDeselectable: useEvent((deselectable2) => {
+      const newSelection = selection.copy();
+      newSelection.deselectable = deselectable2;
+      setSelectionState(newSelection);
+    })
+  };
+}
+
+export { useListSelection };

package/dist/components/color-picker/color-picker-value-text.cjs

@@ -10,11 +10,11 @@ const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerValueText = react.forwardRef((props, ref) => {
-  const { children, format, ...localprops } = props;
+  const { children, format, ...localProps } = props;
   const colorPicker = useColorPickerContext.useColorPickerContext();
-  const mergedProps = react$1.mergeProps(colorPicker.getValueTextProps(), localprops);
+  const mergedProps = react$1.mergeProps(colorPicker.getValueTextProps(), localProps);
   const valueAsString = format ? colorPicker.value.toString(format) : colorPicker.valueAsString;
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || valueAsString });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || valueAsString });
 });
 ColorPickerValueText.displayName = "ColorPickerValueText";
 

package/dist/components/color-picker/color-picker-value-text.js

@@ -6,11 +6,11 @@ import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerValueText = forwardRef((props, ref) => {
-  const { children, format, ...localprops } = props;
+  const { children, format, ...localProps } = props;
   const colorPicker = useColorPickerContext();
-  const mergedProps = mergeProps(colorPicker.getValueTextProps(), localprops);
+  const mergedProps = mergeProps(colorPicker.getValueTextProps(), localProps);
   const valueAsString = format ? colorPicker.value.toString(format) : colorPicker.valueAsString;
-  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || valueAsString });
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || valueAsString });
 });
 ColorPickerValueText.displayName = "ColorPickerValueText";
 

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

@@ -16,7 +16,8 @@ const useField = (props = {}) => {
   const { ids, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
   const [hasErrorText, setHasErrorText] = react.useState(false);
   const [hasHelperText, setHasHelperText] = react.useState(false);
-  const id = props.id ?? react.useId();
+  const uid = react.useId();
+  const id = props.id ?? uid;
   const rootRef = react.useRef(null);
   const rootId = ids?.control ?? `field::${id}`;
   const errorTextId = ids?.errorText ?? `field::${id}::error-text`;

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

@@ -12,7 +12,8 @@ const useField = (props = {}) => {
   const { ids, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
   const [hasErrorText, setHasErrorText] = useState(false);
   const [hasHelperText, setHasHelperText] = useState(false);
-  const id = props.id ?? useId();
+  const uid = useId();
+  const id = props.id ?? uid;
   const rootRef = useRef(null);
   const rootId = ids?.control ?? `field::${id}`;
   const errorTextId = ids?.errorText ?? `field::${id}::error-text`;

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

@@ -14,7 +14,8 @@ const useFieldset = (props = {}) => {
   const env = useEnvironmentContext.useEnvironmentContext();
   const hasErrorText = react.useRef(false);
   const hasHelperText = react.useRef(false);
-  const id = props.id ?? react.useId();
+  const uid = react.useId();
+  const id = props.id ?? uid;
   const rootRef = react.useRef(null);
   const errorTextId = `fieldset::${id}::error-text`;
   const helperTextId = `fieldset::${id}::helper-text`;