@ark-ui/react 4.4.3 → 4.5.0

package/dist/components/collection.cjs

@@ -7,6 +7,8 @@ const core = require('@zag-js/core');
 
 const createListCollection = (options) => core.ref(new collection.ListCollection(options));
 const createTreeCollection = (options) => core.ref(new collection.TreeCollection(options));
+const createFileTreeCollection = (paths) => core.ref(collection.filePathToTree(paths));
 
+exports.createFileTreeCollection = createFileTreeCollection;
 exports.createListCollection = createListCollection;
 exports.createTreeCollection = createTreeCollection;

package/dist/components/collection.js

@@ -1,7 +1,8 @@
-import { ListCollection, TreeCollection } from '@zag-js/collection';
+import { ListCollection, TreeCollection, filePathToTree } from '@zag-js/collection';
 import { ref } from '@zag-js/core';
 
 const createListCollection = (options) => ref(new ListCollection(options));
 const createTreeCollection = (options) => ref(new TreeCollection(options));
+const createFileTreeCollection = (paths) => ref(filePathToTree(paths));
 
-export { createListCollection, createTreeCollection };
+export { createFileTreeCollection, createListCollection, createTreeCollection };

package/dist/components/color-picker/color-picker-root.cjs

@@ -27,6 +27,7 @@ const ColorPickerRoot = react.forwardRef((props, ref) => {
       "id",
       "ids",
       "initialFocusEl",
+      "invalid",
       "name",
       "name",
       "onFocusOutside",
@@ -37,6 +38,7 @@ const ColorPickerRoot = react.forwardRef((props, ref) => {
       "onValueChange",
       "onValueChangeEnd",
       "open",
+      "openAutoFocus",
       "positioning",
       "readOnly",
       "required",

package/dist/components/color-picker/color-picker-root.js

@@ -23,6 +23,7 @@ const ColorPickerRoot = forwardRef((props, ref) => {
       "id",
       "ids",
       "initialFocusEl",
+      "invalid",
       "name",
       "name",
       "onFocusOutside",
@@ -33,6 +34,7 @@ const ColorPickerRoot = forwardRef((props, ref) => {
       "onValueChange",
       "onValueChangeEnd",
       "open",
+      "openAutoFocus",
       "positioning",
       "readOnly",
       "required",

package/dist/components/color-picker/use-color-picker.cjs

@@ -42,6 +42,7 @@ const useColorPicker = (props = {}) => {
     },
     dir,
     disabled: field?.disabled,
+    invalid: field?.invalid,
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,

package/dist/components/color-picker/use-color-picker.js

@@ -19,6 +19,7 @@ const useColorPicker = (props = {}) => {
     },
     dir,
     disabled: field?.disabled,
+    invalid: field?.invalid,
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,

package/dist/components/date-picker/date-picker-root.cjs

@@ -31,7 +31,6 @@ const DatePickerRoot = react.forwardRef((props, ref) => {
     "locale",
     "max",
     "min",
-    "modal",
     "name",
     "numOfMonths",
     "onFocusChange",

package/dist/components/date-picker/date-picker-root.js

@@ -27,7 +27,6 @@ const DatePickerRoot = forwardRef((props, ref) => {
     "locale",
     "max",
     "min",
-    "modal",
     "name",
     "numOfMonths",
     "onFocusChange",

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

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails } from '@zag-js/file-upload';
+export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails, } 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 } from '@zag-js/file-upload';
+export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails, } 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, } from '@zag-js/file-upload';
+export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, } 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, } from '@zag-js/file-upload';
+export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, } 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

@@ -571,6 +571,7 @@ const treeViewBranchIndentGuide = require('./tree-view/tree-view-branch-indent-g
 const treeViewBranchIndicator = require('./tree-view/tree-view-branch-indicator.cjs');
 const treeViewBranchText = require('./tree-view/tree-view-branch-text.cjs');
 const treeViewBranchTrigger = require('./tree-view/tree-view-branch-trigger.cjs');
+const treeViewContext = require('./tree-view/tree-view-context.cjs');
 const treeViewItem = require('./tree-view/tree-view-item.cjs');
 const treeViewItemIndicator = require('./tree-view/tree-view-item-indicator.cjs');
 const treeViewItemText = require('./tree-view/tree-view-item-text.cjs');
@@ -723,6 +724,7 @@ exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
 exports.useColorPicker = useColorPicker.useColorPicker;
 exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
 exports.ColorPicker = colorPicker$1;
+exports.createFileTreeCollection = collection.createFileTreeCollection;
 exports.createListCollection = collection.createListCollection;
 exports.createTreeCollection = collection.createTreeCollection;
 exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
@@ -1198,6 +1200,7 @@ exports.TreeViewBranchIndentGuide = treeViewBranchIndentGuide.TreeViewBranchInde
 exports.TreeViewBranchIndicator = treeViewBranchIndicator.TreeViewBranchIndicator;
 exports.TreeViewBranchText = treeViewBranchText.TreeViewBranchText;
 exports.TreeViewBranchTrigger = treeViewBranchTrigger.TreeViewBranchTrigger;
+exports.TreeViewContext = treeViewContext.TreeViewContext;
 exports.TreeViewItem = treeViewItem.TreeViewItem;
 exports.TreeViewItemIndicator = treeViewItemIndicator.TreeViewItemIndicator;
 exports.TreeViewItemText = treeViewItemText.TreeViewItemText;

package/dist/components/index.js

@@ -108,7 +108,7 @@ export { useColorPicker } from './color-picker/use-color-picker.js';
 export { useColorPickerContext } from './color-picker/use-color-picker-context.js';
 import * as colorPicker from './color-picker/color-picker.js';
 export { colorPicker as ColorPicker };
-export { createListCollection, createTreeCollection } from './collection.js';
+export { createFileTreeCollection, createListCollection, createTreeCollection } from './collection.js';
 export { ComboboxClearTrigger } from './combobox/combobox-clear-trigger.js';
 export { ComboboxContent } from './combobox/combobox-content.js';
 export { ComboboxContext } from './combobox/combobox-context.js';
@@ -607,6 +607,7 @@ export { TreeViewBranchIndentGuide } from './tree-view/tree-view-branch-indent-g
 export { TreeViewBranchIndicator } from './tree-view/tree-view-branch-indicator.js';
 export { TreeViewBranchText } from './tree-view/tree-view-branch-text.js';
 export { TreeViewBranchTrigger } from './tree-view/tree-view-branch-trigger.js';
+export { TreeViewContext } from './tree-view/tree-view-context.js';
 export { TreeViewItem } from './tree-view/tree-view-item.js';
 export { TreeViewItemIndicator } from './tree-view/tree-view-item-indicator.js';
 export { TreeViewItemText } from './tree-view/tree-view-item-text.js';

package/dist/components/number-input/use-number-input.cjs

@@ -32,7 +32,7 @@ const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput
 
 const useNumberInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
-  const { dir } = useLocaleContext.useLocaleContext();
+  const { dir, locale } = useLocaleContext.useLocaleContext();
   const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
@@ -45,6 +45,7 @@ const useNumberInput = (props = {}) => {
     required: field?.required,
     invalid: field?.invalid,
     dir,
+    locale,
     getRootNode,
     value: props.defaultValue,
     ...props

package/dist/components/number-input/use-number-input.js

@@ -9,7 +9,7 @@ import { useFieldContext } from '../field/use-field-context.js';
 
 const useNumberInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext();
-  const { dir } = useLocaleContext();
+  const { dir, locale } = useLocaleContext();
   const field = useFieldContext();
   const initialContext = {
     id: useId(),
@@ -22,6 +22,7 @@ const useNumberInput = (props = {}) => {
     required: field?.required,
     invalid: field?.invalid,
     dir,
+    locale,
     getRootNode,
     value: props.defaultValue,
     ...props

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const presence = require('@zag-js/presence');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const useDebounce = require('../../utils/use-debounce.cjs');
 const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,8 +31,10 @@ const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
 const usePresence = (props) => {
   const { lazyMount, unmountOnExit, ...rest } = props;
   const wasEverPresent = react.useRef(false);
+  const present = useDebounce.useDebounce(props.present, 0);
   const context = {
     ...rest,
+    present,
     onExitComplete: useEvent.useEvent(props.onExitComplete)
   };
   const [state, send] = react$1.useMachine(presence__namespace.machine(context), { context });
@@ -41,7 +44,7 @@ const usePresence = (props) => {
   }
   const unmounted = !api.present && !wasEverPresent.current && lazyMount || unmountOnExit && !api.present && wasEverPresent.current;
   const getPresenceProps = () => ({
-    "data-state": props.present ? "open" : "closed",
+    "data-state": present ? "open" : "closed",
     hidden: !api.present
   });
   return {

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

@@ -2,13 +2,16 @@
 import * as presence from '@zag-js/presence';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useRef } from 'react';
+import { useDebounce } from '../../utils/use-debounce.js';
 import { useEvent } from '../../utils/use-event.js';
 
 const usePresence = (props) => {
   const { lazyMount, unmountOnExit, ...rest } = props;
   const wasEverPresent = useRef(false);
+  const present = useDebounce(props.present, 0);
   const context = {
     ...rest,
+    present,
     onExitComplete: useEvent(props.onExitComplete)
   };
   const [state, send] = useMachine(presence.machine(context), { context });
@@ -18,7 +21,7 @@ const usePresence = (props) => {
   }
   const unmounted = !api.present && !wasEverPresent.current && lazyMount || unmountOnExit && !api.present && wasEverPresent.current;
   const getPresenceProps = () => ({
-    "data-state": props.present ? "open" : "closed",
+    "data-state": present ? "open" : "closed",
     hidden: !api.present
   });
   return {

package/dist/components/tree-view/index.cjs

@@ -10,6 +10,7 @@ const treeViewBranchIndentGuide = require('./tree-view-branch-indent-guide.cjs')
 const treeViewBranchIndicator = require('./tree-view-branch-indicator.cjs');
 const treeViewBranchText = require('./tree-view-branch-text.cjs');
 const treeViewBranchTrigger = require('./tree-view-branch-trigger.cjs');
+const treeViewContext = require('./tree-view-context.cjs');
 const treeViewItem = require('./tree-view-item.cjs');
 const treeViewItemIndicator = require('./tree-view-item-indicator.cjs');
 const treeViewItemText = require('./tree-view-item-text.cjs');
@@ -25,6 +26,7 @@ const treeView = require('@zag-js/tree-view');
 
 
 
+exports.createFileTreeCollection = collection.createFileTreeCollection;
 exports.createTreeCollection = collection.createTreeCollection;
 exports.TreeViewBranch = treeViewBranch.TreeViewBranch;
 exports.TreeViewBranchContent = treeViewBranchContent.TreeViewBranchContent;
@@ -33,6 +35,7 @@ exports.TreeViewBranchIndentGuide = treeViewBranchIndentGuide.TreeViewBranchInde
 exports.TreeViewBranchIndicator = treeViewBranchIndicator.TreeViewBranchIndicator;
 exports.TreeViewBranchText = treeViewBranchText.TreeViewBranchText;
 exports.TreeViewBranchTrigger = treeViewBranchTrigger.TreeViewBranchTrigger;
+exports.TreeViewContext = treeViewContext.TreeViewContext;
 exports.TreeViewItem = treeViewItem.TreeViewItem;
 exports.TreeViewItemIndicator = treeViewItemIndicator.TreeViewItemIndicator;
 exports.TreeViewItemText = treeViewItemText.TreeViewItemText;

package/dist/components/tree-view/index.d.cts

@@ -1,5 +1,5 @@
 export type { ExpandedChangeDetails as TreeViewExpandedChangeDetails, FocusChangeDetails as TreeViewFocusChangeDetails, SelectionChangeDetails as TreeViewSelectionChangeDetails, } from '@zag-js/tree-view';
-export { createTreeCollection, type TreeNode } from '../collection';
+export { createFileTreeCollection, createTreeCollection, type TreeCollection, type TreeNode, } from '../collection';
 export { TreeViewBranch, type TreeViewBranchBaseProps, type TreeViewBranchProps, } from './tree-view-branch';
 export { TreeViewBranchContent, type TreeViewBranchContentBaseProps, type TreeViewBranchContentProps, } from './tree-view-branch-content';
 export { TreeViewBranchControl, type TreeViewBranchControlBaseProps, type TreeViewBranchControlProps, } from './tree-view-branch-control';
@@ -7,15 +7,16 @@ export { TreeViewBranchIndentGuide, type TreeViewBranchIndentGuideBaseProps, typ
 export { TreeViewBranchIndicator, type TreeViewBranchIndicatorBaseProps, type TreeViewBranchIndicatorProps, } from './tree-view-branch-indicator';
 export { TreeViewBranchText, type TreeViewBranchTextBaseProps, type TreeViewBranchTextProps, } from './tree-view-branch-text';
 export { TreeViewBranchTrigger, type TreeViewBranchTriggerBaseProps, type TreeViewBranchTriggerProps, } from './tree-view-branch-trigger';
-export { TreeViewItem, type TreeViewItemBaseProps, type TreeViewItemProps, } from './tree-view-item';
+export { TreeViewContext, type TreeViewContextProps } from './tree-view-context';
+export { TreeViewItem, type TreeViewItemBaseProps, type TreeViewItemProps } from './tree-view-item';
 export { TreeViewItemIndicator, type TreeViewItemIndicatorBaseProps, type TreeViewItemIndicatorProps, } from './tree-view-item-indicator';
 export { TreeViewItemText, type TreeViewItemTextBaseProps, type TreeViewItemTextProps, } from './tree-view-item-text';
 export { TreeViewLabel, type TreeViewLabelBaseProps, type TreeViewLabelProps, } from './tree-view-label';
-export { TreeViewNodeContext, type TreeViewNodeContextProps, } from './tree-view-node-context';
+export { TreeViewNodeContext, type TreeViewNodeContextProps } from './tree-view-node-context';
 export { TreeViewNodeProvider, type TreeViewNodeProviderBaseProps, type TreeViewNodeProviderProps, } from './tree-view-node-provider';
-export { TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootProps, } from './tree-view-root';
+export { TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootProps } from './tree-view-root';
 export { TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeViewRootProviderProps, } from './tree-view-root-provider';
-export { TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps, } from './tree-view-tree';
+export { TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps } from './tree-view-tree';
 export { treeViewAnatomy } from './tree-view.anatomy';
 export { useTreeView, type UseTreeViewProps, type UseTreeViewReturn } from './use-tree-view';
 export * as TreeView from './tree-view';

package/dist/components/tree-view/index.d.ts

@@ -1,5 +1,5 @@
 export type { ExpandedChangeDetails as TreeViewExpandedChangeDetails, FocusChangeDetails as TreeViewFocusChangeDetails, SelectionChangeDetails as TreeViewSelectionChangeDetails, } from '@zag-js/tree-view';
-export { createTreeCollection, type TreeNode } from '../collection';
+export { createFileTreeCollection, createTreeCollection, type TreeCollection, type TreeNode, } from '../collection';
 export { TreeViewBranch, type TreeViewBranchBaseProps, type TreeViewBranchProps, } from './tree-view-branch';
 export { TreeViewBranchContent, type TreeViewBranchContentBaseProps, type TreeViewBranchContentProps, } from './tree-view-branch-content';
 export { TreeViewBranchControl, type TreeViewBranchControlBaseProps, type TreeViewBranchControlProps, } from './tree-view-branch-control';
@@ -7,15 +7,16 @@ export { TreeViewBranchIndentGuide, type TreeViewBranchIndentGuideBaseProps, typ
 export { TreeViewBranchIndicator, type TreeViewBranchIndicatorBaseProps, type TreeViewBranchIndicatorProps, } from './tree-view-branch-indicator';
 export { TreeViewBranchText, type TreeViewBranchTextBaseProps, type TreeViewBranchTextProps, } from './tree-view-branch-text';
 export { TreeViewBranchTrigger, type TreeViewBranchTriggerBaseProps, type TreeViewBranchTriggerProps, } from './tree-view-branch-trigger';
-export { TreeViewItem, type TreeViewItemBaseProps, type TreeViewItemProps, } from './tree-view-item';
+export { TreeViewContext, type TreeViewContextProps } from './tree-view-context';
+export { TreeViewItem, type TreeViewItemBaseProps, type TreeViewItemProps } from './tree-view-item';
 export { TreeViewItemIndicator, type TreeViewItemIndicatorBaseProps, type TreeViewItemIndicatorProps, } from './tree-view-item-indicator';
 export { TreeViewItemText, type TreeViewItemTextBaseProps, type TreeViewItemTextProps, } from './tree-view-item-text';
 export { TreeViewLabel, type TreeViewLabelBaseProps, type TreeViewLabelProps, } from './tree-view-label';
-export { TreeViewNodeContext, type TreeViewNodeContextProps, } from './tree-view-node-context';
+export { TreeViewNodeContext, type TreeViewNodeContextProps } from './tree-view-node-context';
 export { TreeViewNodeProvider, type TreeViewNodeProviderBaseProps, type TreeViewNodeProviderProps, } from './tree-view-node-provider';
-export { TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootProps, } from './tree-view-root';
+export { TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootProps } from './tree-view-root';
 export { TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeViewRootProviderProps, } from './tree-view-root-provider';
-export { TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps, } from './tree-view-tree';
+export { TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps } from './tree-view-tree';
 export { treeViewAnatomy } from './tree-view.anatomy';
 export { useTreeView, type UseTreeViewProps, type UseTreeViewReturn } from './use-tree-view';
 export * as TreeView from './tree-view';

package/dist/components/tree-view/index.js

@@ -1,4 +1,4 @@
-export { createTreeCollection } from '../collection.js';
+export { createFileTreeCollection, createTreeCollection } from '../collection.js';
 export { TreeViewBranch } from './tree-view-branch.js';
 export { TreeViewBranchContent } from './tree-view-branch-content.js';
 export { TreeViewBranchControl } from './tree-view-branch-control.js';
@@ -6,6 +6,7 @@ export { TreeViewBranchIndentGuide } from './tree-view-branch-indent-guide.js';
 export { TreeViewBranchIndicator } from './tree-view-branch-indicator.js';
 export { TreeViewBranchText } from './tree-view-branch-text.js';
 export { TreeViewBranchTrigger } from './tree-view-branch-trigger.js';
+export { TreeViewContext } from './tree-view-context.js';
 export { TreeViewItem } from './tree-view-item.js';
 export { TreeViewItemIndicator } from './tree-view-item-indicator.js';
 export { TreeViewItemText } from './tree-view-item-text.js';

package/dist/index.cjs

@@ -571,6 +571,7 @@ const treeViewBranchIndentGuide = require('./components/tree-view/tree-view-bran
 const treeViewBranchIndicator = require('./components/tree-view/tree-view-branch-indicator.cjs');
 const treeViewBranchText = require('./components/tree-view/tree-view-branch-text.cjs');
 const treeViewBranchTrigger = require('./components/tree-view/tree-view-branch-trigger.cjs');
+const treeViewContext = require('./components/tree-view/tree-view-context.cjs');
 const treeViewItem = require('./components/tree-view/tree-view-item.cjs');
 const treeViewItemIndicator = require('./components/tree-view/tree-view-item-indicator.cjs');
 const treeViewItemText = require('./components/tree-view/tree-view-item-text.cjs');
@@ -727,6 +728,7 @@ exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
 exports.useColorPicker = useColorPicker.useColorPicker;
 exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
 exports.ColorPicker = colorPicker$1;
+exports.createFileTreeCollection = collection.createFileTreeCollection;
 exports.createListCollection = collection.createListCollection;
 exports.createTreeCollection = collection.createTreeCollection;
 exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
@@ -1202,6 +1204,7 @@ exports.TreeViewBranchIndentGuide = treeViewBranchIndentGuide.TreeViewBranchInde
 exports.TreeViewBranchIndicator = treeViewBranchIndicator.TreeViewBranchIndicator;
 exports.TreeViewBranchText = treeViewBranchText.TreeViewBranchText;
 exports.TreeViewBranchTrigger = treeViewBranchTrigger.TreeViewBranchTrigger;
+exports.TreeViewContext = treeViewContext.TreeViewContext;
 exports.TreeViewItem = treeViewItem.TreeViewItem;
 exports.TreeViewItemIndicator = treeViewItemIndicator.TreeViewItemIndicator;
 exports.TreeViewItemText = treeViewItemText.TreeViewItemText;

package/dist/index.js

@@ -108,7 +108,7 @@ export { useColorPicker } from './components/color-picker/use-color-picker.js';
 export { useColorPickerContext } from './components/color-picker/use-color-picker-context.js';
 import * as colorPicker from './components/color-picker/color-picker.js';
 export { colorPicker as ColorPicker };
-export { createListCollection, createTreeCollection } from './components/collection.js';
+export { createFileTreeCollection, createListCollection, createTreeCollection } from './components/collection.js';
 export { ComboboxClearTrigger } from './components/combobox/combobox-clear-trigger.js';
 export { ComboboxContent } from './components/combobox/combobox-content.js';
 export { ComboboxContext } from './components/combobox/combobox-context.js';
@@ -607,6 +607,7 @@ export { TreeViewBranchIndentGuide } from './components/tree-view/tree-view-bran
 export { TreeViewBranchIndicator } from './components/tree-view/tree-view-branch-indicator.js';
 export { TreeViewBranchText } from './components/tree-view/tree-view-branch-text.js';
 export { TreeViewBranchTrigger } from './components/tree-view/tree-view-branch-trigger.js';
+export { TreeViewContext } from './components/tree-view/tree-view-context.js';
 export { TreeViewItem } from './components/tree-view/tree-view-item.js';
 export { TreeViewItemIndicator } from './components/tree-view/tree-view-item-indicator.js';
 export { TreeViewItemText } from './components/tree-view/tree-view-item-text.js';

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

@@ -1,2 +1,6 @@
 export { EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider';
-export { useEnvironmentContext, type EnvironmentContext, type RootNode, } from './use-environment-context';
+export { useEnvironmentContext, type UseEnvironmentContext, 
+/**
+ * @deprecated Use `UseEnvironmentContext` instead.
+ */
+type UseEnvironmentContext as EnvironmentContext, type RootNode, } from './use-environment-context';

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

@@ -1,2 +1,6 @@
 export { EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider';
-export { useEnvironmentContext, type EnvironmentContext, type RootNode, } from './use-environment-context';
+export { useEnvironmentContext, type UseEnvironmentContext, 
+/**
+ * @deprecated Use `UseEnvironmentContext` instead.
+ */
+type UseEnvironmentContext as EnvironmentContext, type RootNode, } from './use-environment-context';

package/dist/providers/environment/use-environment-context.d.cts

@@ -1,6 +1,6 @@
 import { Provider } from 'react';
 export type RootNode = ShadowRoot | Document | Node;
-export interface EnvironmentContext {
+export interface UseEnvironmentContext {
     /**
      * The root node of the application.
      * This is used to determine the window and document objects.
@@ -15,4 +15,4 @@ export interface EnvironmentContext {
      */
     getWindow(): Window & typeof globalThis;
 }
-export declare const EnvironmentContextProvider: Provider<EnvironmentContext>, useEnvironmentContext: () => EnvironmentContext;
+export declare const EnvironmentContextProvider: Provider<UseEnvironmentContext>, useEnvironmentContext: () => UseEnvironmentContext;

package/dist/providers/environment/use-environment-context.d.ts

@@ -1,6 +1,6 @@
 import { Provider } from 'react';
 export type RootNode = ShadowRoot | Document | Node;
-export interface EnvironmentContext {
+export interface UseEnvironmentContext {
     /**
      * The root node of the application.
      * This is used to determine the window and document objects.
@@ -15,4 +15,4 @@ export interface EnvironmentContext {
      */
     getWindow(): Window & typeof globalThis;
 }
-export declare const EnvironmentContextProvider: Provider<EnvironmentContext>, useEnvironmentContext: () => EnvironmentContext;
+export declare const EnvironmentContextProvider: Provider<UseEnvironmentContext>, useEnvironmentContext: () => UseEnvironmentContext;

package/dist/utils/use-debounce.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = react.useState(value);
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+exports.useDebounce = useDebounce;

package/dist/utils/use-debounce.d.cts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay: number): T;

package/dist/utils/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay: number): T;

package/dist/utils/use-debounce.js

@@ -0,0 +1,17 @@
+'use client';
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export { useDebounce };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "4.4.3",
+  "version": "4.5.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -134,6 +134,7 @@
   },
   "scripts": {
     "build": "vite build",
+    "dev": "bun run storybook",
     "lint": "biome lint ./src",
     "test": "vitest",
     "test:ci": "vitest --run",
@@ -159,88 +160,88 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@internationalized/date": "3.5.6",
-    "@zag-js/accordion": "0.77.1",
-    "@zag-js/anatomy": "0.77.1",
-    "@zag-js/auto-resize": "0.77.1",
-    "@zag-js/avatar": "0.77.1",
-    "@zag-js/carousel": "0.77.1",
-    "@zag-js/checkbox": "0.77.1",
-    "@zag-js/clipboard": "0.77.1",
-    "@zag-js/collapsible": "0.77.1",
-    "@zag-js/collection": "0.77.1",
-    "@zag-js/color-picker": "0.77.1",
-    "@zag-js/color-utils": "0.77.1",
-    "@zag-js/combobox": "0.77.1",
-    "@zag-js/core": "0.77.1",
-    "@zag-js/date-picker": "0.77.1",
-    "@zag-js/date-utils": "0.77.1",
-    "@zag-js/dialog": "0.77.1",
-    "@zag-js/dom-query": "0.77.1",
-    "@zag-js/editable": "0.77.1",
-    "@zag-js/file-upload": "0.77.1",
-    "@zag-js/file-utils": "0.77.1",
-    "@zag-js/highlight-word": "0.77.1",
-    "@zag-js/hover-card": "0.77.1",
-    "@zag-js/i18n-utils": "0.77.1",
-    "@zag-js/menu": "0.77.1",
-    "@zag-js/number-input": "0.77.1",
-    "@zag-js/pagination": "0.77.1",
-    "@zag-js/pin-input": "0.77.1",
-    "@zag-js/popover": "0.77.1",
-    "@zag-js/presence": "0.77.1",
-    "@zag-js/progress": "0.77.1",
-    "@zag-js/qr-code": "0.77.1",
-    "@zag-js/radio-group": "0.77.1",
-    "@zag-js/rating-group": "0.77.1",
-    "@zag-js/react": "0.77.1",
-    "@zag-js/select": "0.77.1",
-    "@zag-js/signature-pad": "0.77.1",
-    "@zag-js/slider": "0.77.1",
-    "@zag-js/splitter": "0.77.1",
-    "@zag-js/steps": "0.77.1",
-    "@zag-js/switch": "0.77.1",
-    "@zag-js/tabs": "0.77.1",
-    "@zag-js/tags-input": "0.77.1",
-    "@zag-js/time-picker": "0.77.1",
-    "@zag-js/timer": "0.77.1",
-    "@zag-js/toast": "0.77.1",
-    "@zag-js/toggle-group": "0.77.1",
-    "@zag-js/tooltip": "0.77.1",
-    "@zag-js/tree-view": "0.77.1",
-    "@zag-js/types": "0.77.1"
+    "@internationalized/date": "3.6.0",
+    "@zag-js/accordion": "0.78.2",
+    "@zag-js/anatomy": "0.78.2",
+    "@zag-js/auto-resize": "0.78.2",
+    "@zag-js/avatar": "0.78.2",
+    "@zag-js/carousel": "0.78.2",
+    "@zag-js/checkbox": "0.78.2",
+    "@zag-js/clipboard": "0.78.2",
+    "@zag-js/collapsible": "0.78.2",
+    "@zag-js/collection": "0.78.2",
+    "@zag-js/color-picker": "0.78.2",
+    "@zag-js/color-utils": "0.78.2",
+    "@zag-js/combobox": "0.78.2",
+    "@zag-js/core": "0.78.2",
+    "@zag-js/date-picker": "0.78.2",
+    "@zag-js/date-utils": "0.78.2",
+    "@zag-js/dialog": "0.78.2",
+    "@zag-js/dom-query": "0.78.2",
+    "@zag-js/editable": "0.78.2",
+    "@zag-js/file-upload": "0.78.2",
+    "@zag-js/file-utils": "0.78.2",
+    "@zag-js/highlight-word": "0.78.2",
+    "@zag-js/hover-card": "0.78.2",
+    "@zag-js/i18n-utils": "0.78.2",
+    "@zag-js/menu": "0.78.2",
+    "@zag-js/number-input": "0.78.2",
+    "@zag-js/pagination": "0.78.2",
+    "@zag-js/pin-input": "0.78.2",
+    "@zag-js/popover": "0.78.2",
+    "@zag-js/presence": "0.78.2",
+    "@zag-js/progress": "0.78.2",
+    "@zag-js/qr-code": "0.78.2",
+    "@zag-js/radio-group": "0.78.2",
+    "@zag-js/rating-group": "0.78.2",
+    "@zag-js/react": "0.78.2",
+    "@zag-js/select": "0.78.2",
+    "@zag-js/signature-pad": "0.78.2",
+    "@zag-js/slider": "0.78.2",
+    "@zag-js/splitter": "0.78.2",
+    "@zag-js/steps": "0.78.2",
+    "@zag-js/switch": "0.78.2",
+    "@zag-js/tabs": "0.78.2",
+    "@zag-js/tags-input": "0.78.2",
+    "@zag-js/time-picker": "0.78.2",
+    "@zag-js/timer": "0.78.2",
+    "@zag-js/toast": "0.78.2",
+    "@zag-js/toggle-group": "0.78.2",
+    "@zag-js/tooltip": "0.78.2",
+    "@zag-js/tree-view": "0.78.2",
+    "@zag-js/types": "0.78.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "8.4.2",
-    "@storybook/addon-essentials": "8.4.2",
-    "@storybook/react-vite": "8.4.2",
-    "@storybook/react": "8.4.2",
+    "@storybook/addon-a11y": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
+    "@storybook/react": "8.4.7",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.1",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.3",
-    "@zag-js/stringify-state": "0.77.1",
+    "@types/react": "18.3.16",
+    "@types/react-dom": "18.3.5",
+    "@vitejs/plugin-react": "4.3.4",
+    "@zag-js/stringify-state": "0.78.2",
     "clean-package": "2.2.0",
     "globby": "14.0.2",
     "jsdom": "25.0.1",
-    "lucide-react": "0.456.0",
+    "lucide-react": "0.462.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-frame-component": "5.2.7",
-    "react-hook-form": "7.53.2",
+    "react-hook-form": "7.54.0",
     "release-it": "17.10.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.4.2",
+    "storybook": "8.4.7",
     "typescript": "5.6.3",
     "vite": "5.4.11",
     "vite-plugin-dts": "4.3.0",
-    "vitest": "2.1.4",
+    "vitest": "2.1.8",
     "vitest-axe": "1.0.0-pre.3"
   },
   "peerDependencies": {