@ark-ui/react 5.16.0 → 5.17.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/client-only/client-only.cjs

@@ -17,7 +17,7 @@ const ClientOnly = (props) => {
   if (!isClient) {
     return fallback;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeof children === "function" ? children() : children });
 };
 
 exports.ClientOnly = ClientOnly;

package/dist/components/client-only/client-only.d.cts

@@ -1,5 +1,5 @@
 export interface ClientOnlyProps {
-    children: React.ReactNode;
+    children: React.ReactNode | (() => React.ReactNode);
     fallback?: React.ReactNode | undefined;
 }
 export declare const ClientOnly: (props: ClientOnlyProps) => React.ReactNode;

package/dist/components/client-only/client-only.d.ts

@@ -1,5 +1,5 @@
 export interface ClientOnlyProps {
-    children: React.ReactNode;
+    children: React.ReactNode | (() => React.ReactNode);
     fallback?: React.ReactNode | undefined;
 }
 export declare const ClientOnly: (props: ClientOnlyProps) => React.ReactNode;

package/dist/components/client-only/client-only.js

@@ -13,7 +13,7 @@ const ClientOnly = (props) => {
   if (!isClient) {
     return fallback;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(Fragment, { children: typeof children === "function" ? children() : children });
 };
 
 export { ClientOnly };

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

@@ -1,4 +1,4 @@
 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';

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

@@ -1,4 +1,4 @@
 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';

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

@@ -9,63 +9,86 @@ const listCollection = require('./list-collection.cjs');
 
 function useListCollection(props) {
   const { initialItems = [], filter, limit, ...collectionOptions } = props;
-  const create = (items) => {
-    return listCollection.createListCollection({ ...collectionOptions, items });
-  };
-  const [collection, setCollectionImpl] = react.useState(
-    () => create(limit != null ? initialItems.slice(0, limit) : initialItems)
-  );
-  const setCollection = useEvent.useEvent((collection2) => {
-    setCollectionImpl(limit == null ? collection2 : collection2.copy(collection2.items.slice(0, limit)));
+  const [items, setItemsImpl] = react.useState(initialItems);
+  const [filterText, setFilterText] = react.useState("");
+  const setItems = useEvent.useEvent((items2) => {
+    setItemsImpl(items2);
+    setFilterText("");
   });
+  const collectionOptionsRef = react.useRef(collectionOptions);
+  collectionOptionsRef.current = collectionOptions;
+  const create = react.useCallback((items2) => {
+    return listCollection.createListCollection({ ...collectionOptionsRef.current, items: items2 });
+  }, []);
+  const collection = react.useMemo(() => {
+    let activeItems = items;
+    if (filterText && filter) {
+      activeItems = create(items).filter((itemString, _index, item) => filter(itemString, filterText, item)).items;
+    }
+    const limitedItems = limit == null ? activeItems : activeItems.slice(0, limit);
+    return listCollection.createListCollection({ ...collectionOptionsRef.current, items: limitedItems });
+  }, [items, filterText, filter, limit, create]);
   return {
     collection,
-    filter: (inputValue) => {
-      if (!filter) return;
-      const filtered = create(initialItems).filter((itemString) => filter(itemString, inputValue));
-      setCollection(filtered);
-    },
-    set: useEvent.useEvent((items) => {
-      setCollection(create(items));
+    filter: useEvent.useEvent((inputValue) => {
+      setFilterText(inputValue || "");
+    }),
+    set: useEvent.useEvent((newItems) => {
+      setItems(newItems);
     }),
     reset: useEvent.useEvent(() => {
-      setCollection(create(initialItems));
+      setItems(initialItems);
     }),
     clear: useEvent.useEvent(() => {
-      setCollection(create([]));
+      setItems([]);
     }),
-    insert: useEvent.useEvent((index, ...items) => {
-      setCollection(collection.insert(index, ...items));
+    insert: useEvent.useEvent((index, ...itemsToInsert) => {
+      const newItems = create(items).insert(index, ...itemsToInsert).items;
+      setItems(newItems);
     }),
-    insertBefore: useEvent.useEvent((value, ...items) => {
-      setCollection(collection.insertBefore(value, ...items));
+    insertBefore: useEvent.useEvent((value, ...itemsToInsert) => {
+      const newItems = create(items).insertBefore(value, ...itemsToInsert).items;
+      setItems(newItems);
     }),
-    insertAfter: useEvent.useEvent((value, ...items) => {
-      setCollection(collection.insertAfter(value, ...items));
+    insertAfter: useEvent.useEvent((value, ...itemsToInsert) => {
+      const newItems = create(items).insertAfter(value, ...itemsToInsert).items;
+      setItems(newItems);
     }),
     remove: useEvent.useEvent((...itemOrValues) => {
-      setCollection(collection.remove(...itemOrValues));
+      const newItems = create(items).remove(...itemOrValues).items;
+      setItems(newItems);
     }),
     move: useEvent.useEvent((value, to) => {
-      setCollection(collection.move(value, to));
+      const newItems = create(items).move(value, to).items;
+      setItems(newItems);
     }),
     moveBefore: useEvent.useEvent((value, ...values) => {
-      setCollection(collection.moveBefore(value, ...values));
+      const newItems = create(items).moveBefore(value, ...values).items;
+      setItems(newItems);
     }),
     moveAfter: useEvent.useEvent((value, ...values) => {
-      setCollection(collection.moveAfter(value, ...values));
+      const newItems = create(items).moveAfter(value, ...values).items;
+      setItems(newItems);
     }),
     reorder: useEvent.useEvent((from, to) => {
-      setCollection(collection.reorder(from, to));
+      const newItems = create(items).reorder(from, to).items;
+      setItems(newItems);
+    }),
+    append: useEvent.useEvent((...itemsToAppend) => {
+      const newItems = create(items).append(...itemsToAppend).items;
+      setItems(newItems);
     }),
-    append: useEvent.useEvent((...items) => {
-      setCollection(collection.append(...items));
+    upsert: useEvent.useEvent((value, item, mode = "append") => {
+      const newItems = create(items).upsert(value, item, mode).items;
+      setItems(newItems);
     }),
-    prepend: useEvent.useEvent((...items) => {
-      setCollection(collection.prepend(...items));
+    prepend: useEvent.useEvent((...itemsToPrepend) => {
+      const newItems = create(items).prepend(...itemsToPrepend).items;
+      setItems(newItems);
     }),
     update: useEvent.useEvent((value, item) => {
-      setCollection(collection.update(value, item));
+      const newItems = create(items).update(value, item).items;
+      setItems(newItems);
     })
   };
 }

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

@@ -7,28 +7,81 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The filter function to use to filter the items.
      */
-    filter?: (itemText: string, filterText: string) => boolean;
+    filter?: (itemText: string, filterText: string, item: T) => boolean;
     /**
      * The maximum number of items to display in the collection.
      * Useful for performance when you have a large number of items.
      */
     limit?: number;
 }
-export declare function useListCollection<T>(props: UseListCollectionProps<T>): {
+export declare function useListCollection<T>(props: UseListCollectionProps<T>): UseListCollectionReturn<T>;
+export interface UseListCollectionReturn<T> {
+    /**
+     * The collection of items.
+     */
     collection: ListCollection<T>;
+    /**
+     * The function to filter the items.
+     */
     filter: (inputValue: string) => void;
+    /**
+     * The function to set the items.
+     */
     set: (items: T[]) => void;
+    /**
+     * The function to reset the items.
+     */
     reset: () => void;
+    /**
+     * The function to clear the items.
+     */
     clear: () => void;
+    /**
+     * The function to insert items at a specific index.
+     */
     insert: (index: number, ...items: T[]) => void;
+    /**
+     * The function to insert items before a specific value.
+     */
     insertBefore: (value: string, ...items: T[]) => void;
+    /**
+     * The function to insert items after a specific value.
+     */
     insertAfter: (value: string, ...items: T[]) => void;
-    remove: (...itemOrValues: T[]) => void;
+    /**
+     * The function to remove items.
+     */
+    remove: (...itemOrValues: Array<T | string>) => void;
+    /**
+     * The function to move an item to a specific index.
+     */
     move: (value: string, to: number) => void;
+    /**
+     * The function to move an item before a specific value.
+     */
     moveBefore: (value: string, ...values: string[]) => void;
+    /**
+     * The function to move an item after a specific value.
+     */
     moveAfter: (value: string, ...values: string[]) => void;
+    /**
+     * The function to reorder items.
+     */
     reorder: (from: number, to: number) => void;
+    /**
+     * The function to append items.
+     */
     append: (...items: T[]) => void;
+    /**
+     * The function to upsert an item.
+     */
+    upsert: (value: string, item: T, mode?: 'append' | 'prepend') => void;
+    /**
+     * The function to prepend items.
+     */
     prepend: (...items: T[]) => void;
+    /**
+     * The function to update an item.
+     */
     update: (value: string, item: T) => void;
-};
+}

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

@@ -7,28 +7,81 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The filter function to use to filter the items.
      */
-    filter?: (itemText: string, filterText: string) => boolean;
+    filter?: (itemText: string, filterText: string, item: T) => boolean;
     /**
      * The maximum number of items to display in the collection.
      * Useful for performance when you have a large number of items.
      */
     limit?: number;
 }
-export declare function useListCollection<T>(props: UseListCollectionProps<T>): {
+export declare function useListCollection<T>(props: UseListCollectionProps<T>): UseListCollectionReturn<T>;
+export interface UseListCollectionReturn<T> {
+    /**
+     * The collection of items.
+     */
     collection: ListCollection<T>;
+    /**
+     * The function to filter the items.
+     */
     filter: (inputValue: string) => void;
+    /**
+     * The function to set the items.
+     */
     set: (items: T[]) => void;
+    /**
+     * The function to reset the items.
+     */
     reset: () => void;
+    /**
+     * The function to clear the items.
+     */
     clear: () => void;
+    /**
+     * The function to insert items at a specific index.
+     */
     insert: (index: number, ...items: T[]) => void;
+    /**
+     * The function to insert items before a specific value.
+     */
     insertBefore: (value: string, ...items: T[]) => void;
+    /**
+     * The function to insert items after a specific value.
+     */
     insertAfter: (value: string, ...items: T[]) => void;
-    remove: (...itemOrValues: T[]) => void;
+    /**
+     * The function to remove items.
+     */
+    remove: (...itemOrValues: Array<T | string>) => void;
+    /**
+     * The function to move an item to a specific index.
+     */
     move: (value: string, to: number) => void;
+    /**
+     * The function to move an item before a specific value.
+     */
     moveBefore: (value: string, ...values: string[]) => void;
+    /**
+     * The function to move an item after a specific value.
+     */
     moveAfter: (value: string, ...values: string[]) => void;
+    /**
+     * The function to reorder items.
+     */
     reorder: (from: number, to: number) => void;
+    /**
+     * The function to append items.
+     */
     append: (...items: T[]) => void;
+    /**
+     * The function to upsert an item.
+     */
+    upsert: (value: string, item: T, mode?: 'append' | 'prepend') => void;
+    /**
+     * The function to prepend items.
+     */
     prepend: (...items: T[]) => void;
+    /**
+     * The function to update an item.
+     */
     update: (value: string, item: T) => void;
-};
+}

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

@@ -1,67 +1,90 @@
 'use client';
-import { useState } from 'react';
+import { useState, useRef, useCallback, useMemo } from 'react';
 import { useEvent } from '../../utils/use-event.js';
 import { createListCollection } from './list-collection.js';
 
 function useListCollection(props) {
   const { initialItems = [], filter, limit, ...collectionOptions } = props;
-  const create = (items) => {
-    return createListCollection({ ...collectionOptions, items });
-  };
-  const [collection, setCollectionImpl] = useState(
-    () => create(limit != null ? initialItems.slice(0, limit) : initialItems)
-  );
-  const setCollection = useEvent((collection2) => {
-    setCollectionImpl(limit == null ? collection2 : collection2.copy(collection2.items.slice(0, limit)));
+  const [items, setItemsImpl] = useState(initialItems);
+  const [filterText, setFilterText] = useState("");
+  const setItems = useEvent((items2) => {
+    setItemsImpl(items2);
+    setFilterText("");
   });
+  const collectionOptionsRef = useRef(collectionOptions);
+  collectionOptionsRef.current = collectionOptions;
+  const create = useCallback((items2) => {
+    return createListCollection({ ...collectionOptionsRef.current, items: items2 });
+  }, []);
+  const collection = useMemo(() => {
+    let activeItems = items;
+    if (filterText && filter) {
+      activeItems = create(items).filter((itemString, _index, item) => filter(itemString, filterText, item)).items;
+    }
+    const limitedItems = limit == null ? activeItems : activeItems.slice(0, limit);
+    return createListCollection({ ...collectionOptionsRef.current, items: limitedItems });
+  }, [items, filterText, filter, limit, create]);
   return {
     collection,
-    filter: (inputValue) => {
-      if (!filter) return;
-      const filtered = create(initialItems).filter((itemString) => filter(itemString, inputValue));
-      setCollection(filtered);
-    },
-    set: useEvent((items) => {
-      setCollection(create(items));
+    filter: useEvent((inputValue) => {
+      setFilterText(inputValue || "");
+    }),
+    set: useEvent((newItems) => {
+      setItems(newItems);
     }),
     reset: useEvent(() => {
-      setCollection(create(initialItems));
+      setItems(initialItems);
     }),
     clear: useEvent(() => {
-      setCollection(create([]));
+      setItems([]);
     }),
-    insert: useEvent((index, ...items) => {
-      setCollection(collection.insert(index, ...items));
+    insert: useEvent((index, ...itemsToInsert) => {
+      const newItems = create(items).insert(index, ...itemsToInsert).items;
+      setItems(newItems);
     }),
-    insertBefore: useEvent((value, ...items) => {
-      setCollection(collection.insertBefore(value, ...items));
+    insertBefore: useEvent((value, ...itemsToInsert) => {
+      const newItems = create(items).insertBefore(value, ...itemsToInsert).items;
+      setItems(newItems);
     }),
-    insertAfter: useEvent((value, ...items) => {
-      setCollection(collection.insertAfter(value, ...items));
+    insertAfter: useEvent((value, ...itemsToInsert) => {
+      const newItems = create(items).insertAfter(value, ...itemsToInsert).items;
+      setItems(newItems);
     }),
     remove: useEvent((...itemOrValues) => {
-      setCollection(collection.remove(...itemOrValues));
+      const newItems = create(items).remove(...itemOrValues).items;
+      setItems(newItems);
     }),
     move: useEvent((value, to) => {
-      setCollection(collection.move(value, to));
+      const newItems = create(items).move(value, to).items;
+      setItems(newItems);
     }),
     moveBefore: useEvent((value, ...values) => {
-      setCollection(collection.moveBefore(value, ...values));
+      const newItems = create(items).moveBefore(value, ...values).items;
+      setItems(newItems);
     }),
     moveAfter: useEvent((value, ...values) => {
-      setCollection(collection.moveAfter(value, ...values));
+      const newItems = create(items).moveAfter(value, ...values).items;
+      setItems(newItems);
     }),
     reorder: useEvent((from, to) => {
-      setCollection(collection.reorder(from, to));
+      const newItems = create(items).reorder(from, to).items;
+      setItems(newItems);
+    }),
+    append: useEvent((...itemsToAppend) => {
+      const newItems = create(items).append(...itemsToAppend).items;
+      setItems(newItems);
     }),
-    append: useEvent((...items) => {
-      setCollection(collection.append(...items));
+    upsert: useEvent((value, item, mode = "append") => {
+      const newItems = create(items).upsert(value, item, mode).items;
+      setItems(newItems);
     }),
-    prepend: useEvent((...items) => {
-      setCollection(collection.prepend(...items));
+    prepend: useEvent((...itemsToPrepend) => {
+      const newItems = create(items).prepend(...itemsToPrepend).items;
+      setItems(newItems);
     }),
     update: useEvent((value, item) => {
-      setCollection(collection.update(value, item));
+      const newItems = create(items).update(value, item).items;
+      setItems(newItems);
     })
   };
 }

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`;

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

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

package/dist/components/file-upload/file-upload.d.cts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails } from '@zag-js/file-upload';
+export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails, FileError, FileMimeType, FileRejection, } from '@zag-js/file-upload';
 export { FileUploadClearTrigger as ClearTrigger, type FileUploadClearTriggerBaseProps as ClearTriggerBaseProps, type FileUploadClearTriggerProps as ClearTriggerProps, } from './file-upload-clear-trigger';
 export { FileUploadContext as Context, type FileUploadContextProps as ContextProps } from './file-upload-context';
 export { FileUploadDropzone as Dropzone, type FileUploadDropzoneBaseProps as DropzoneBaseProps, type FileUploadDropzoneProps as DropzoneProps, } from './file-upload-dropzone';

package/dist/components/file-upload/file-upload.d.ts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails } from '@zag-js/file-upload';
+export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails, FileError, FileMimeType, FileRejection, } from '@zag-js/file-upload';
 export { FileUploadClearTrigger as ClearTrigger, type FileUploadClearTriggerBaseProps as ClearTriggerBaseProps, type FileUploadClearTriggerProps as ClearTriggerProps, } from './file-upload-clear-trigger';
 export { FileUploadContext as Context, type FileUploadContextProps as ContextProps } from './file-upload-context';
 export { FileUploadDropzone as Dropzone, type FileUploadDropzoneBaseProps as DropzoneBaseProps, type FileUploadDropzoneProps as DropzoneProps, } from './file-upload-dropzone';

package/dist/components/file-upload/index.d.cts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, } from '@zag-js/file-upload';
+export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, FileError as FileUploadFileError, FileMimeType as FileUploadFileMimeType, FileRejection as FileUploadFileRejection, } from '@zag-js/file-upload';
 export { FileUploadClearTrigger, type FileUploadClearTriggerBaseProps, type FileUploadClearTriggerProps, } from './file-upload-clear-trigger';
 export { FileUploadContext, type FileUploadContextProps } from './file-upload-context';
 export { FileUploadDropzone, type FileUploadDropzoneBaseProps, type FileUploadDropzoneProps, } from './file-upload-dropzone';

package/dist/components/file-upload/index.d.ts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, } from '@zag-js/file-upload';
+export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, FileError as FileUploadFileError, FileMimeType as FileUploadFileMimeType, FileRejection as FileUploadFileRejection, } from '@zag-js/file-upload';
 export { FileUploadClearTrigger, type FileUploadClearTriggerBaseProps, type FileUploadClearTriggerProps, } from './file-upload-clear-trigger';
 export { FileUploadContext, type FileUploadContextProps } from './file-upload-context';
 export { FileUploadDropzone, type FileUploadDropzoneBaseProps, type FileUploadDropzoneProps, } from './file-upload-dropzone';

package/dist/components/index.cjs

@@ -52,6 +52,7 @@ const carousel$1 = require('./carousel/carousel.cjs');
 const checkboxContext = require('./checkbox/checkbox-context.cjs');
 const checkboxControl = require('./checkbox/checkbox-control.cjs');
 const checkboxGroup = require('./checkbox/checkbox-group.cjs');
+const checkboxGroupProvider = require('./checkbox/checkbox-group-provider.cjs');
 const checkboxHiddenInput = require('./checkbox/checkbox-hidden-input.cjs');
 const checkboxIndicator = require('./checkbox/checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox/checkbox-label.cjs');
@@ -763,6 +764,7 @@ exports.Carousel = carousel$1;
 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/index.js

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

package/dist/index.cjs

@@ -52,6 +52,7 @@ const carousel$1 = require('./components/carousel/carousel.cjs');
 const checkboxContext = require('./components/checkbox/checkbox-context.cjs');
 const checkboxControl = require('./components/checkbox/checkbox-control.cjs');
 const checkboxGroup = require('./components/checkbox/checkbox-group.cjs');
+const checkboxGroupProvider = require('./components/checkbox/checkbox-group-provider.cjs');
 const checkboxHiddenInput = require('./components/checkbox/checkbox-hidden-input.cjs');
 const checkboxIndicator = require('./components/checkbox/checkbox-indicator.cjs');
 const checkboxLabel = require('./components/checkbox/checkbox-label.cjs');
@@ -768,6 +769,7 @@ exports.Carousel = carousel$1;
 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/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.16.0",
+  "version": "5.17.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -141,68 +141,68 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.18.0",
-    "@zag-js/angle-slider": "1.18.0",
-    "@zag-js/anatomy": "1.18.0",
-    "@zag-js/auto-resize": "1.18.0",
-    "@zag-js/avatar": "1.18.0",
-    "@zag-js/carousel": "1.18.0",
-    "@zag-js/checkbox": "1.18.0",
-    "@zag-js/clipboard": "1.18.0",
-    "@zag-js/collapsible": "1.18.0",
-    "@zag-js/collection": "1.18.0",
-    "@zag-js/color-picker": "1.18.0",
-    "@zag-js/color-utils": "1.18.0",
-    "@zag-js/combobox": "1.18.0",
-    "@zag-js/core": "1.18.0",
-    "@zag-js/date-picker": "1.18.0",
-    "@zag-js/date-utils": "1.18.0",
-    "@zag-js/dialog": "1.18.0",
-    "@zag-js/dom-query": "1.18.0",
-    "@zag-js/editable": "1.18.0",
-    "@zag-js/file-upload": "1.18.0",
-    "@zag-js/file-utils": "1.18.0",
-    "@zag-js/focus-trap": "1.18.0",
-    "@zag-js/floating-panel": "1.18.0",
-    "@zag-js/highlight-word": "1.18.0",
-    "@zag-js/hover-card": "1.18.0",
-    "@zag-js/i18n-utils": "1.18.0",
-    "@zag-js/listbox": "1.18.0",
-    "@zag-js/menu": "1.18.0",
-    "@zag-js/number-input": "1.18.0",
-    "@zag-js/pagination": "1.18.0",
-    "@zag-js/password-input": "1.18.0",
-    "@zag-js/pin-input": "1.18.0",
-    "@zag-js/popover": "1.18.0",
-    "@zag-js/presence": "1.18.0",
-    "@zag-js/progress": "1.18.0",
-    "@zag-js/qr-code": "1.18.0",
-    "@zag-js/radio-group": "1.18.0",
-    "@zag-js/rating-group": "1.18.0",
-    "@zag-js/react": "1.18.0",
-    "@zag-js/select": "1.18.0",
-    "@zag-js/signature-pad": "1.18.0",
-    "@zag-js/slider": "1.18.0",
-    "@zag-js/splitter": "1.18.0",
-    "@zag-js/steps": "1.18.0",
-    "@zag-js/switch": "1.18.0",
-    "@zag-js/tabs": "1.18.0",
-    "@zag-js/tags-input": "1.18.0",
-    "@zag-js/time-picker": "1.18.0",
-    "@zag-js/timer": "1.18.0",
-    "@zag-js/toast": "1.18.0",
-    "@zag-js/toggle": "1.18.0",
-    "@zag-js/toggle-group": "1.18.0",
-    "@zag-js/tooltip": "1.18.0",
-    "@zag-js/tour": "1.18.0",
-    "@zag-js/tree-view": "1.18.0",
-    "@zag-js/types": "1.18.0",
-    "@zag-js/utils": "1.18.0"
+    "@zag-js/accordion": "1.18.4",
+    "@zag-js/angle-slider": "1.18.4",
+    "@zag-js/anatomy": "1.18.4",
+    "@zag-js/auto-resize": "1.18.4",
+    "@zag-js/avatar": "1.18.4",
+    "@zag-js/carousel": "1.18.4",
+    "@zag-js/checkbox": "1.18.4",
+    "@zag-js/clipboard": "1.18.4",
+    "@zag-js/collapsible": "1.18.4",
+    "@zag-js/collection": "1.18.4",
+    "@zag-js/color-picker": "1.18.4",
+    "@zag-js/color-utils": "1.18.4",
+    "@zag-js/combobox": "1.18.4",
+    "@zag-js/core": "1.18.4",
+    "@zag-js/date-picker": "1.18.4",
+    "@zag-js/date-utils": "1.18.4",
+    "@zag-js/dialog": "1.18.4",
+    "@zag-js/dom-query": "1.18.4",
+    "@zag-js/editable": "1.18.4",
+    "@zag-js/file-upload": "1.18.4",
+    "@zag-js/file-utils": "1.18.4",
+    "@zag-js/focus-trap": "1.18.4",
+    "@zag-js/floating-panel": "1.18.4",
+    "@zag-js/highlight-word": "1.18.4",
+    "@zag-js/hover-card": "1.18.4",
+    "@zag-js/i18n-utils": "1.18.4",
+    "@zag-js/listbox": "1.18.4",
+    "@zag-js/menu": "1.18.4",
+    "@zag-js/number-input": "1.18.4",
+    "@zag-js/pagination": "1.18.4",
+    "@zag-js/password-input": "1.18.4",
+    "@zag-js/pin-input": "1.18.4",
+    "@zag-js/popover": "1.18.4",
+    "@zag-js/presence": "1.18.4",
+    "@zag-js/progress": "1.18.4",
+    "@zag-js/qr-code": "1.18.4",
+    "@zag-js/radio-group": "1.18.4",
+    "@zag-js/rating-group": "1.18.4",
+    "@zag-js/react": "1.18.4",
+    "@zag-js/select": "1.18.4",
+    "@zag-js/signature-pad": "1.18.4",
+    "@zag-js/slider": "1.18.4",
+    "@zag-js/splitter": "1.18.4",
+    "@zag-js/steps": "1.18.4",
+    "@zag-js/switch": "1.18.4",
+    "@zag-js/tabs": "1.18.4",
+    "@zag-js/tags-input": "1.18.4",
+    "@zag-js/time-picker": "1.18.4",
+    "@zag-js/timer": "1.18.4",
+    "@zag-js/toast": "1.18.4",
+    "@zag-js/toggle": "1.18.4",
+    "@zag-js/toggle-group": "1.18.4",
+    "@zag-js/tooltip": "1.18.4",
+    "@zag-js/tour": "1.18.4",
+    "@zag-js/tree-view": "1.18.4",
+    "@zag-js/types": "1.18.4",
+    "@zag-js/utils": "1.18.4"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@storybook/addon-a11y": "9.0.10",
-    "@storybook/react-vite": "9.0.10",
+    "@storybook/addon-a11y": "9.0.17",
+    "@storybook/react-vite": "9.0.17",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
@@ -210,24 +210,24 @@
     "@types/jsdom": "21.1.7",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
-    "@vitejs/plugin-react": "4.5.2",
+    "@vitejs/plugin-react": "4.6.0",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
     "happy-dom": "18.0.1",
-    "lucide-react": "0.515.0",
+    "lucide-react": "0.525.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-shadow": "20.6.0",
     "react-use": "17.6.0",
     "react-frame-component": "5.2.7",
-    "react-hook-form": "7.57.0",
+    "react-hook-form": "7.60.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "9.0.10",
+    "storybook": "9.0.17",
     "typescript": "5.8.3",
-    "vite": "6.3.5",
+    "vite": "7.0.5",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "3.2.3",
-    "@vitest/coverage-v8": "3.2.3",
+    "vitest": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {