@ark-ui/react 5.11.0 → 5.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/dist/components/collection/grid-collection.cjs +10 -0
  2. package/dist/components/collection/grid-collection.d.cts +3 -0
  3. package/dist/components/collection/grid-collection.d.ts +3 -0
  4. package/dist/components/collection/grid-collection.js +6 -0
  5. package/dist/components/collection/index.cjs +16 -0
  6. package/dist/components/collection/index.d.cts +4 -0
  7. package/dist/components/collection/index.d.ts +4 -0
  8. package/dist/components/collection/index.js +4 -0
  9. package/dist/components/collection/list-collection.cjs +10 -0
  10. package/dist/components/collection/list-collection.d.cts +3 -0
  11. package/dist/components/collection/list-collection.d.ts +3 -0
  12. package/dist/components/collection/list-collection.js +6 -0
  13. package/dist/components/{collection.cjs → collection/tree-collection.cjs} +1 -2
  14. package/dist/components/collection/tree-collection.d.cts +4 -0
  15. package/dist/components/collection/tree-collection.d.ts +4 -0
  16. package/dist/components/collection/tree-collection.js +7 -0
  17. package/dist/components/collection/use-list-collection.cjs +73 -0
  18. package/dist/components/collection/use-list-collection.d.cts +34 -0
  19. package/dist/components/collection/use-list-collection.d.ts +34 -0
  20. package/dist/components/collection/use-list-collection.js +69 -0
  21. package/dist/components/combobox/index.cjs +4 -2
  22. package/dist/components/combobox/index.d.cts +2 -2
  23. package/dist/components/combobox/index.d.ts +2 -2
  24. package/dist/components/combobox/index.js +2 -1
  25. package/dist/components/index.cjs +11 -4
  26. package/dist/components/index.js +5 -1
  27. package/dist/components/listbox/index.cjs +2 -2
  28. package/dist/components/listbox/index.js +1 -1
  29. package/dist/components/progress/index.d.cts +1 -0
  30. package/dist/components/progress/index.d.ts +1 -0
  31. package/dist/components/progress/progress.d.cts +1 -0
  32. package/dist/components/progress/progress.d.ts +1 -0
  33. package/dist/components/select/index.cjs +4 -2
  34. package/dist/components/select/index.d.cts +1 -1
  35. package/dist/components/select/index.d.ts +1 -1
  36. package/dist/components/select/index.js +2 -1
  37. package/dist/components/tree-view/index.cjs +7 -3
  38. package/dist/components/tree-view/index.d.cts +3 -1
  39. package/dist/components/tree-view/index.d.ts +3 -1
  40. package/dist/components/tree-view/index.js +3 -1
  41. package/dist/components/tree-view/tree-view-branch.cjs +3 -2
  42. package/dist/components/tree-view/tree-view-branch.js +3 -2
  43. package/dist/components/tree-view/tree-view-node-provider.cjs +5 -1
  44. package/dist/components/tree-view/tree-view-node-provider.js +5 -1
  45. package/dist/components/tree-view/tree-view-root.cjs +3 -1
  46. package/dist/components/tree-view/tree-view-root.js +3 -1
  47. package/dist/components/tree-view/tree-view.d.cts +1 -1
  48. package/dist/components/tree-view/tree-view.d.ts +1 -1
  49. package/dist/components/tree-view/use-tree-view-node-context.cjs +2 -2
  50. package/dist/components/tree-view/use-tree-view-node-context.d.cts +1 -1
  51. package/dist/components/tree-view/use-tree-view-node-context.d.ts +1 -1
  52. package/dist/components/tree-view/use-tree-view-node-context.js +2 -2
  53. package/dist/index.cjs +11 -4
  54. package/dist/index.js +5 -1
  55. package/package.json +59 -59
  56. package/dist/components/collection.d.cts +0 -6
  57. package/dist/components/collection.d.ts +0 -6
  58. package/dist/components/collection.js +0 -7
@@ -0,0 +1,10 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const collection = require('@zag-js/collection');
7
+
8
+ const createGridCollection = (options) => new collection.GridCollection(options);
9
+
10
+ exports.createGridCollection = createGridCollection;
@@ -0,0 +1,3 @@
1
+ import { CollectionItem, CollectionOptions, GridCollection, GridCollectionOptions } from '@zag-js/collection';
2
+ export declare const createGridCollection: <T extends CollectionItem>(options: GridCollectionOptions<T>) => GridCollection<T>;
3
+ export type { GridCollection, CollectionOptions, CollectionItem, GridCollectionOptions };
@@ -0,0 +1,3 @@
1
+ import { CollectionItem, CollectionOptions, GridCollection, GridCollectionOptions } from '@zag-js/collection';
2
+ export declare const createGridCollection: <T extends CollectionItem>(options: GridCollectionOptions<T>) => GridCollection<T>;
3
+ export type { GridCollection, CollectionOptions, CollectionItem, GridCollectionOptions };
@@ -0,0 +1,6 @@
1
+ 'use client';
2
+ import { GridCollection } from '@zag-js/collection';
3
+
4
+ const createGridCollection = (options) => new GridCollection(options);
5
+
6
+ export { createGridCollection };
@@ -0,0 +1,16 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const gridCollection = require('./grid-collection.cjs');
6
+ const listCollection = require('./list-collection.cjs');
7
+ const treeCollection = require('./tree-collection.cjs');
8
+ const useListCollection = require('./use-list-collection.cjs');
9
+
10
+
11
+
12
+ exports.createGridCollection = gridCollection.createGridCollection;
13
+ exports.createListCollection = listCollection.createListCollection;
14
+ exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
15
+ exports.createTreeCollection = treeCollection.createTreeCollection;
16
+ exports.useListCollection = useListCollection.useListCollection;
@@ -0,0 +1,4 @@
1
+ export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
2
+ export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
3
+ export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
4
+ export { useListCollection, type UseListCollectionProps } from './use-list-collection';
@@ -0,0 +1,4 @@
1
+ export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
2
+ export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
3
+ export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
4
+ export { useListCollection, type UseListCollectionProps } from './use-list-collection';
@@ -0,0 +1,4 @@
1
+ export { createGridCollection } from './grid-collection.js';
2
+ export { createListCollection } from './list-collection.js';
3
+ export { createFileTreeCollection, createTreeCollection } from './tree-collection.js';
4
+ export { useListCollection } from './use-list-collection.js';
@@ -0,0 +1,10 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const collection = require('@zag-js/collection');
7
+
8
+ const createListCollection = (options) => new collection.ListCollection(options);
9
+
10
+ exports.createListCollection = createListCollection;
@@ -0,0 +1,3 @@
1
+ import { CollectionItem, CollectionOptions, ListCollection } from '@zag-js/collection';
2
+ export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
3
+ export type { ListCollection, CollectionOptions, CollectionItem };
@@ -0,0 +1,3 @@
1
+ import { CollectionItem, CollectionOptions, ListCollection } from '@zag-js/collection';
2
+ export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
3
+ export type { ListCollection, CollectionOptions, CollectionItem };
@@ -0,0 +1,6 @@
1
+ 'use client';
2
+ import { ListCollection } from '@zag-js/collection';
3
+
4
+ const createListCollection = (options) => new ListCollection(options);
5
+
6
+ export { createListCollection };
@@ -1,13 +1,12 @@
1
+ 'use client';
1
2
  'use strict';
2
3
 
3
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
5
 
5
6
  const collection = require('@zag-js/collection');
6
7
 
7
- const createListCollection = (options) => new collection.ListCollection(options);
8
8
  const createTreeCollection = (options) => new collection.TreeCollection(options);
9
9
  const createFileTreeCollection = (paths) => collection.filePathToTree(paths);
10
10
 
11
11
  exports.createFileTreeCollection = createFileTreeCollection;
12
- exports.createListCollection = createListCollection;
13
12
  exports.createTreeCollection = createTreeCollection;
@@ -0,0 +1,4 @@
1
+ import { FilePathTreeNode, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
2
+ export type { TreeCollection, TreeNode, TreeCollectionOptions, FilePathTreeNode, FlatTreeNode, } from '@zag-js/collection';
3
+ export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
4
+ export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
@@ -0,0 +1,4 @@
1
+ import { FilePathTreeNode, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
2
+ export type { TreeCollection, TreeNode, TreeCollectionOptions, FilePathTreeNode, FlatTreeNode, } from '@zag-js/collection';
3
+ export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
4
+ export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
@@ -0,0 +1,7 @@
1
+ 'use client';
2
+ import { filePathToTree, TreeCollection } from '@zag-js/collection';
3
+
4
+ const createTreeCollection = (options) => new TreeCollection(options);
5
+ const createFileTreeCollection = (paths) => filePathToTree(paths);
6
+
7
+ export { createFileTreeCollection, createTreeCollection };
@@ -0,0 +1,73 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const react = require('react');
7
+ const useEvent = require('../../utils/use-event.cjs');
8
+ const listCollection = require('./list-collection.cjs');
9
+
10
+ function useListCollection(props) {
11
+ const { initialItems = [], filter, limit, ...collectionOptions } = props;
12
+ const create = (items) => {
13
+ return listCollection.createListCollection({ ...collectionOptions, items });
14
+ };
15
+ const [collection, setCollectionImpl] = react.useState(
16
+ () => create(limit != null ? initialItems.slice(0, limit) : initialItems)
17
+ );
18
+ const setCollection = useEvent.useEvent((collection2) => {
19
+ setCollectionImpl(limit == null ? collection2 : collection2.copy(collection2.items.slice(0, limit)));
20
+ });
21
+ return {
22
+ collection,
23
+ filter: (inputValue) => {
24
+ if (!filter) return;
25
+ const filtered = create(initialItems).filter((itemString) => filter(itemString, inputValue));
26
+ setCollection(filtered);
27
+ },
28
+ set: useEvent.useEvent((items) => {
29
+ setCollection(create(items));
30
+ }),
31
+ reset: useEvent.useEvent(() => {
32
+ setCollection(create(initialItems));
33
+ }),
34
+ clear: useEvent.useEvent(() => {
35
+ setCollection(create([]));
36
+ }),
37
+ insert: useEvent.useEvent((index, ...items) => {
38
+ setCollection(collection.insert(index, ...items));
39
+ }),
40
+ insertBefore: useEvent.useEvent((value, ...items) => {
41
+ setCollection(collection.insertBefore(value, ...items));
42
+ }),
43
+ insertAfter: useEvent.useEvent((value, ...items) => {
44
+ setCollection(collection.insertAfter(value, ...items));
45
+ }),
46
+ remove: useEvent.useEvent((...itemOrValues) => {
47
+ setCollection(collection.remove(...itemOrValues));
48
+ }),
49
+ move: useEvent.useEvent((value, to) => {
50
+ setCollection(collection.move(value, to));
51
+ }),
52
+ moveBefore: useEvent.useEvent((value, ...values) => {
53
+ setCollection(collection.moveBefore(value, ...values));
54
+ }),
55
+ moveAfter: useEvent.useEvent((value, ...values) => {
56
+ setCollection(collection.moveAfter(value, ...values));
57
+ }),
58
+ reorder: useEvent.useEvent((from, to) => {
59
+ setCollection(collection.reorder(from, to));
60
+ }),
61
+ append: useEvent.useEvent((...items) => {
62
+ setCollection(collection.append(...items));
63
+ }),
64
+ prepend: useEvent.useEvent((...items) => {
65
+ setCollection(collection.prepend(...items));
66
+ }),
67
+ update: useEvent.useEvent((value, item) => {
68
+ setCollection(collection.update(value, item));
69
+ })
70
+ };
71
+ }
72
+
73
+ exports.useListCollection = useListCollection;
@@ -0,0 +1,34 @@
1
+ import { CollectionOptions, ListCollection } from './list-collection';
2
+ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'items'> {
3
+ /**
4
+ * The initial items to display in the collection.
5
+ */
6
+ initialItems: T[];
7
+ /**
8
+ * The filter function to use to filter the items.
9
+ */
10
+ filter?: (itemText: string, filterText: string) => boolean;
11
+ /**
12
+ * The maximum number of items to display in the collection.
13
+ * Useful for performance when you have a large number of items.
14
+ */
15
+ limit?: number;
16
+ }
17
+ export declare function useListCollection<T>(props: UseListCollectionProps<T>): {
18
+ collection: ListCollection<T>;
19
+ filter: (inputValue: string) => void;
20
+ set: (items: T[]) => void;
21
+ reset: () => void;
22
+ clear: () => void;
23
+ insert: (index: number, ...items: T[]) => void;
24
+ insertBefore: (value: string, ...items: T[]) => void;
25
+ insertAfter: (value: string, ...items: T[]) => void;
26
+ remove: (...itemOrValues: T[]) => void;
27
+ move: (value: string, to: number) => void;
28
+ moveBefore: (value: string, ...values: string[]) => void;
29
+ moveAfter: (value: string, ...values: string[]) => void;
30
+ reorder: (from: number, to: number) => void;
31
+ append: (...items: T[]) => void;
32
+ prepend: (...items: T[]) => void;
33
+ update: (value: string, item: T) => void;
34
+ };
@@ -0,0 +1,34 @@
1
+ import { CollectionOptions, ListCollection } from './list-collection';
2
+ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'items'> {
3
+ /**
4
+ * The initial items to display in the collection.
5
+ */
6
+ initialItems: T[];
7
+ /**
8
+ * The filter function to use to filter the items.
9
+ */
10
+ filter?: (itemText: string, filterText: string) => boolean;
11
+ /**
12
+ * The maximum number of items to display in the collection.
13
+ * Useful for performance when you have a large number of items.
14
+ */
15
+ limit?: number;
16
+ }
17
+ export declare function useListCollection<T>(props: UseListCollectionProps<T>): {
18
+ collection: ListCollection<T>;
19
+ filter: (inputValue: string) => void;
20
+ set: (items: T[]) => void;
21
+ reset: () => void;
22
+ clear: () => void;
23
+ insert: (index: number, ...items: T[]) => void;
24
+ insertBefore: (value: string, ...items: T[]) => void;
25
+ insertAfter: (value: string, ...items: T[]) => void;
26
+ remove: (...itemOrValues: T[]) => void;
27
+ move: (value: string, to: number) => void;
28
+ moveBefore: (value: string, ...values: string[]) => void;
29
+ moveAfter: (value: string, ...values: string[]) => void;
30
+ reorder: (from: number, to: number) => void;
31
+ append: (...items: T[]) => void;
32
+ prepend: (...items: T[]) => void;
33
+ update: (value: string, item: T) => void;
34
+ };
@@ -0,0 +1,69 @@
1
+ 'use client';
2
+ import { useState } from 'react';
3
+ import { useEvent } from '../../utils/use-event.js';
4
+ import { createListCollection } from './list-collection.js';
5
+
6
+ function useListCollection(props) {
7
+ const { initialItems = [], filter, limit, ...collectionOptions } = props;
8
+ const create = (items) => {
9
+ return createListCollection({ ...collectionOptions, items });
10
+ };
11
+ const [collection, setCollectionImpl] = useState(
12
+ () => create(limit != null ? initialItems.slice(0, limit) : initialItems)
13
+ );
14
+ const setCollection = useEvent((collection2) => {
15
+ setCollectionImpl(limit == null ? collection2 : collection2.copy(collection2.items.slice(0, limit)));
16
+ });
17
+ return {
18
+ collection,
19
+ filter: (inputValue) => {
20
+ if (!filter) return;
21
+ const filtered = create(initialItems).filter((itemString) => filter(itemString, inputValue));
22
+ setCollection(filtered);
23
+ },
24
+ set: useEvent((items) => {
25
+ setCollection(create(items));
26
+ }),
27
+ reset: useEvent(() => {
28
+ setCollection(create(initialItems));
29
+ }),
30
+ clear: useEvent(() => {
31
+ setCollection(create([]));
32
+ }),
33
+ insert: useEvent((index, ...items) => {
34
+ setCollection(collection.insert(index, ...items));
35
+ }),
36
+ insertBefore: useEvent((value, ...items) => {
37
+ setCollection(collection.insertBefore(value, ...items));
38
+ }),
39
+ insertAfter: useEvent((value, ...items) => {
40
+ setCollection(collection.insertAfter(value, ...items));
41
+ }),
42
+ remove: useEvent((...itemOrValues) => {
43
+ setCollection(collection.remove(...itemOrValues));
44
+ }),
45
+ move: useEvent((value, to) => {
46
+ setCollection(collection.move(value, to));
47
+ }),
48
+ moveBefore: useEvent((value, ...values) => {
49
+ setCollection(collection.moveBefore(value, ...values));
50
+ }),
51
+ moveAfter: useEvent((value, ...values) => {
52
+ setCollection(collection.moveAfter(value, ...values));
53
+ }),
54
+ reorder: useEvent((from, to) => {
55
+ setCollection(collection.reorder(from, to));
56
+ }),
57
+ append: useEvent((...items) => {
58
+ setCollection(collection.append(...items));
59
+ }),
60
+ prepend: useEvent((...items) => {
61
+ setCollection(collection.prepend(...items));
62
+ }),
63
+ update: useEvent((value, item) => {
64
+ setCollection(collection.update(value, item));
65
+ })
66
+ };
67
+ }
68
+
69
+ export { useListCollection };
@@ -2,7 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const collection = require('../collection.cjs');
5
+ const listCollection = require('../collection/list-collection.cjs');
6
+ const useListCollection = require('../collection/use-list-collection.cjs');
6
7
  const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
7
8
  const comboboxContent = require('./combobox-content.cjs');
8
9
  const comboboxContext = require('./combobox-context.cjs');
@@ -28,7 +29,8 @@ const combobox = require('@zag-js/combobox');
28
29
 
29
30
 
30
31
 
31
- exports.createListCollection = collection.createListCollection;
32
+ exports.createListCollection = listCollection.createListCollection;
33
+ exports.useListCollection = useListCollection.useListCollection;
32
34
  exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
33
35
  exports.ComboboxContent = comboboxContent.ComboboxContent;
34
36
  exports.ComboboxContext = comboboxContext.ComboboxContext;
@@ -1,5 +1,5 @@
1
- export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, ValueChangeDetails as ComboboxValueChangeDetails, SelectionDetails as ComboboxSelectionDetails, } from '@zag-js/combobox';
2
- export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
1
+ export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, SelectionDetails as ComboboxSelectionDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
2
+ export { createListCollection, useListCollection, type CollectionItem, type ListCollection, type UseListCollectionProps, } from '../collection';
3
3
  export { ComboboxClearTrigger, type ComboboxClearTriggerBaseProps, type ComboboxClearTriggerProps, } from './combobox-clear-trigger';
4
4
  export { ComboboxContent, type ComboboxContentBaseProps, type ComboboxContentProps } from './combobox-content';
5
5
  export { ComboboxContext, type ComboboxContextProps } from './combobox-context';
@@ -1,5 +1,5 @@
1
- export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, ValueChangeDetails as ComboboxValueChangeDetails, SelectionDetails as ComboboxSelectionDetails, } from '@zag-js/combobox';
2
- export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
1
+ export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, SelectionDetails as ComboboxSelectionDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
2
+ export { createListCollection, useListCollection, type CollectionItem, type ListCollection, type UseListCollectionProps, } from '../collection';
3
3
  export { ComboboxClearTrigger, type ComboboxClearTriggerBaseProps, type ComboboxClearTriggerProps, } from './combobox-clear-trigger';
4
4
  export { ComboboxContent, type ComboboxContentBaseProps, type ComboboxContentProps } from './combobox-content';
5
5
  export { ComboboxContext, type ComboboxContextProps } from './combobox-context';
@@ -1,4 +1,5 @@
1
- export { createListCollection } from '../collection.js';
1
+ export { createListCollection } from '../collection/list-collection.js';
2
+ export { useListCollection } from '../collection/use-list-collection.js';
2
3
  export { ComboboxClearTrigger } from './combobox-clear-trigger.js';
3
4
  export { ComboboxContent } from './combobox-content.js';
4
5
  export { ComboboxContext } from './combobox-context.js';
@@ -119,7 +119,9 @@ const colorPicker_anatomy = require('./color-picker/color-picker.anatomy.cjs');
119
119
  const useColorPicker = require('./color-picker/use-color-picker.cjs');
120
120
  const useColorPickerContext = require('./color-picker/use-color-picker-context.cjs');
121
121
  const colorPicker$1 = require('./color-picker/color-picker.cjs');
122
- const collection = require('./collection.cjs');
122
+ const listCollection = require('./collection/list-collection.cjs');
123
+ const treeCollection = require('./collection/tree-collection.cjs');
124
+ const useListCollection = require('./collection/use-list-collection.cjs');
123
125
  const comboboxClearTrigger = require('./combobox/combobox-clear-trigger.cjs');
124
126
  const comboboxContent = require('./combobox/combobox-content.cjs');
125
127
  const comboboxContext = require('./combobox/combobox-context.cjs');
@@ -664,6 +666,8 @@ const treeViewRoot = require('./tree-view/tree-view-root.cjs');
664
666
  const treeViewRootProvider = require('./tree-view/tree-view-root-provider.cjs');
665
667
  const treeViewTree = require('./tree-view/tree-view-tree.cjs');
666
668
  const useTreeView = require('./tree-view/use-tree-view.cjs');
669
+ const useTreeViewContext = require('./tree-view/use-tree-view-context.cjs');
670
+ const useTreeViewNodeContext = require('./tree-view/use-tree-view-node-context.cjs');
667
671
  const treeView$1 = require('./tree-view/tree-view.cjs');
668
672
  const accordion = require('@zag-js/accordion');
669
673
  const angleSlider = require('@zag-js/angle-slider');
@@ -825,9 +829,10 @@ exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
825
829
  exports.useColorPicker = useColorPicker.useColorPicker;
826
830
  exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
827
831
  exports.ColorPicker = colorPicker$1;
828
- exports.createFileTreeCollection = collection.createFileTreeCollection;
829
- exports.createListCollection = collection.createListCollection;
830
- exports.createTreeCollection = collection.createTreeCollection;
832
+ exports.createListCollection = listCollection.createListCollection;
833
+ exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
834
+ exports.createTreeCollection = treeCollection.createTreeCollection;
835
+ exports.useListCollection = useListCollection.useListCollection;
831
836
  exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
832
837
  exports.ComboboxContent = comboboxContent.ComboboxContent;
833
838
  exports.ComboboxContext = comboboxContext.ComboboxContext;
@@ -1380,6 +1385,8 @@ exports.TreeViewRoot = treeViewRoot.TreeViewRoot;
1380
1385
  exports.TreeViewRootProvider = treeViewRootProvider.TreeViewRootProvider;
1381
1386
  exports.TreeViewTree = treeViewTree.TreeViewTree;
1382
1387
  exports.useTreeView = useTreeView.useTreeView;
1388
+ exports.useTreeViewContext = useTreeViewContext.useTreeViewContext;
1389
+ exports.useTreeViewNodeContext = useTreeViewNodeContext.useTreeViewNodeContext;
1383
1390
  exports.TreeView = treeView$1;
1384
1391
  Object.defineProperty(exports, "accordionAnatomy", {
1385
1392
  enumerable: true,
@@ -123,7 +123,9 @@ export { useColorPicker } from './color-picker/use-color-picker.js';
123
123
  export { useColorPickerContext } from './color-picker/use-color-picker-context.js';
124
124
  import * as colorPicker from './color-picker/color-picker.js';
125
125
  export { colorPicker as ColorPicker };
126
- export { createFileTreeCollection, createListCollection, createTreeCollection } from './collection.js';
126
+ export { createListCollection } from './collection/list-collection.js';
127
+ export { createFileTreeCollection, createTreeCollection } from './collection/tree-collection.js';
128
+ export { useListCollection } from './collection/use-list-collection.js';
127
129
  export { ComboboxClearTrigger } from './combobox/combobox-clear-trigger.js';
128
130
  export { ComboboxContent } from './combobox/combobox-content.js';
129
131
  export { ComboboxContext } from './combobox/combobox-context.js';
@@ -705,6 +707,8 @@ export { TreeViewRoot } from './tree-view/tree-view-root.js';
705
707
  export { TreeViewRootProvider } from './tree-view/tree-view-root-provider.js';
706
708
  export { TreeViewTree } from './tree-view/tree-view-tree.js';
707
709
  export { useTreeView } from './tree-view/use-tree-view.js';
710
+ export { useTreeViewContext } from './tree-view/use-tree-view-context.js';
711
+ export { useTreeViewNodeContext } from './tree-view/use-tree-view-node-context.js';
708
712
  import * as treeView from './tree-view/tree-view.js';
709
713
  export { treeView as TreeView };
710
714
  export { anatomy as accordionAnatomy } from '@zag-js/accordion';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const collection = require('../collection.cjs');
5
+ const listCollection = require('../collection/list-collection.cjs');
6
6
  const listboxContent = require('./listbox-content.cjs');
7
7
  const listboxInput = require('./listbox-input.cjs');
8
8
  const listboxItem = require('./listbox-item.cjs');
@@ -22,7 +22,7 @@ const listbox = require('@zag-js/listbox');
22
22
 
23
23
 
24
24
 
25
- exports.createListCollection = collection.createListCollection;
25
+ exports.createListCollection = listCollection.createListCollection;
26
26
  exports.ListboxContent = listboxContent.ListboxContent;
27
27
  exports.ListboxInput = listboxInput.ListboxInput;
28
28
  exports.ListboxItem = listboxItem.ListboxItem;
@@ -1,4 +1,4 @@
1
- export { createListCollection } from '../collection.js';
1
+ export { createListCollection } from '../collection/list-collection.js';
2
2
  export { ListboxContent } from './listbox-content.js';
3
3
  export { ListboxInput } from './listbox-input.js';
4
4
  export { ListboxItem } from './listbox-item.js';
@@ -1,3 +1,4 @@
1
+ export type { ValueChangeDetails as ProgressValueChangeDetails, ValueTranslationDetails as ProgressValueTranslationDetails, } from '@zag-js/progress';
1
2
  export { ProgressCircle, type ProgressCircleBaseProps, type ProgressCircleProps } from './progress-circle';
2
3
  export { ProgressCircleRange, type ProgressCircleRangeBaseProps, type ProgressCircleRangeProps, } from './progress-circle-range';
3
4
  export { ProgressCircleTrack, type ProgressCircleTrackBaseProps, type ProgressCircleTrackProps, } from './progress-circle-track';
@@ -1,3 +1,4 @@
1
+ export type { ValueChangeDetails as ProgressValueChangeDetails, ValueTranslationDetails as ProgressValueTranslationDetails, } from '@zag-js/progress';
1
2
  export { ProgressCircle, type ProgressCircleBaseProps, type ProgressCircleProps } from './progress-circle';
2
3
  export { ProgressCircleRange, type ProgressCircleRangeBaseProps, type ProgressCircleRangeProps, } from './progress-circle-range';
3
4
  export { ProgressCircleTrack, type ProgressCircleTrackBaseProps, type ProgressCircleTrackProps, } from './progress-circle-track';
@@ -1,3 +1,4 @@
1
+ export type { ValueChangeDetails, ValueTranslationDetails } from '@zag-js/progress';
1
2
  export { ProgressCircle as Circle, type ProgressCircleBaseProps as CircleBaseProps, type ProgressCircleProps as CircleProps, } from './progress-circle';
2
3
  export { ProgressCircleRange as CircleRange, type ProgressCircleRangeBaseProps as CircleRangeBaseProps, type ProgressCircleRangeProps as CircleRangeProps, } from './progress-circle-range';
3
4
  export { ProgressCircleTrack as CircleTrack, type ProgressCircleTrackBaseProps as CircleTrackBaseProps, type ProgressCircleTrackProps as CircleTrackProps, } from './progress-circle-track';
@@ -1,3 +1,4 @@
1
+ export type { ValueChangeDetails, ValueTranslationDetails } from '@zag-js/progress';
1
2
  export { ProgressCircle as Circle, type ProgressCircleBaseProps as CircleBaseProps, type ProgressCircleProps as CircleProps, } from './progress-circle';
2
3
  export { ProgressCircleRange as CircleRange, type ProgressCircleRangeBaseProps as CircleRangeBaseProps, type ProgressCircleRangeProps as CircleRangeProps, } from './progress-circle-range';
3
4
  export { ProgressCircleTrack as CircleTrack, type ProgressCircleTrackBaseProps as CircleTrackBaseProps, type ProgressCircleTrackProps as CircleTrackProps, } from './progress-circle-track';
@@ -2,7 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const collection = require('../collection.cjs');
5
+ const listCollection = require('../collection/list-collection.cjs');
6
+ const useListCollection = require('../collection/use-list-collection.cjs');
6
7
  const selectClearTrigger = require('./select-clear-trigger.cjs');
7
8
  const selectContent = require('./select-content.cjs');
8
9
  const selectContext = require('./select-context.cjs');
@@ -30,7 +31,8 @@ const select = require('@zag-js/select');
30
31
 
31
32
 
32
33
 
33
- exports.createListCollection = collection.createListCollection;
34
+ exports.createListCollection = listCollection.createListCollection;
35
+ exports.useListCollection = useListCollection.useListCollection;
34
36
  exports.SelectClearTrigger = selectClearTrigger.SelectClearTrigger;
35
37
  exports.SelectContent = selectContent.SelectContent;
36
38
  exports.SelectContext = selectContext.SelectContext;
@@ -1,5 +1,5 @@
1
1
  export type { HighlightChangeDetails as SelectHighlightChangeDetails, OpenChangeDetails as SelectOpenChangeDetails, ValueChangeDetails as SelectValueChangeDetails, } from '@zag-js/select';
2
- export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
2
+ export { createListCollection, type CollectionItem, type ListCollection, useListCollection, type UseListCollectionProps, } from '../collection';
3
3
  export { SelectClearTrigger, type SelectClearTriggerBaseProps, type SelectClearTriggerProps, } from './select-clear-trigger';
4
4
  export { SelectContent, type SelectContentBaseProps, type SelectContentProps } from './select-content';
5
5
  export { SelectContext, type SelectContextProps } from './select-context';
@@ -1,5 +1,5 @@
1
1
  export type { HighlightChangeDetails as SelectHighlightChangeDetails, OpenChangeDetails as SelectOpenChangeDetails, ValueChangeDetails as SelectValueChangeDetails, } from '@zag-js/select';
2
- export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
2
+ export { createListCollection, type CollectionItem, type ListCollection, useListCollection, type UseListCollectionProps, } from '../collection';
3
3
  export { SelectClearTrigger, type SelectClearTriggerBaseProps, type SelectClearTriggerProps, } from './select-clear-trigger';
4
4
  export { SelectContent, type SelectContentBaseProps, type SelectContentProps } from './select-content';
5
5
  export { SelectContext, type SelectContextProps } from './select-context';
@@ -1,4 +1,5 @@
1
- export { createListCollection } from '../collection.js';
1
+ export { createListCollection } from '../collection/list-collection.js';
2
+ export { useListCollection } from '../collection/use-list-collection.js';
2
3
  export { SelectClearTrigger } from './select-clear-trigger.js';
3
4
  export { SelectContent } from './select-content.js';
4
5
  export { SelectContext } from './select-context.js';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const collection = require('../collection.cjs');
5
+ const treeCollection = require('../collection/tree-collection.cjs');
6
6
  const treeViewBranch = require('./tree-view-branch.cjs');
7
7
  const treeViewBranchContent = require('./tree-view-branch-content.cjs');
8
8
  const treeViewBranchControl = require('./tree-view-branch-control.cjs');
@@ -21,13 +21,15 @@ const treeViewRoot = require('./tree-view-root.cjs');
21
21
  const treeViewRootProvider = require('./tree-view-root-provider.cjs');
22
22
  const treeViewTree = require('./tree-view-tree.cjs');
23
23
  const useTreeView = require('./use-tree-view.cjs');
24
+ const useTreeViewContext = require('./use-tree-view-context.cjs');
25
+ const useTreeViewNodeContext = require('./use-tree-view-node-context.cjs');
24
26
  const treeView$1 = require('./tree-view.cjs');
25
27
  const treeView = require('@zag-js/tree-view');
26
28
 
27
29
 
28
30
 
29
- exports.createFileTreeCollection = collection.createFileTreeCollection;
30
- exports.createTreeCollection = collection.createTreeCollection;
31
+ exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
32
+ exports.createTreeCollection = treeCollection.createTreeCollection;
31
33
  exports.TreeViewBranch = treeViewBranch.TreeViewBranch;
32
34
  exports.TreeViewBranchContent = treeViewBranchContent.TreeViewBranchContent;
33
35
  exports.TreeViewBranchControl = treeViewBranchControl.TreeViewBranchControl;
@@ -46,6 +48,8 @@ exports.TreeViewRoot = treeViewRoot.TreeViewRoot;
46
48
  exports.TreeViewRootProvider = treeViewRootProvider.TreeViewRootProvider;
47
49
  exports.TreeViewTree = treeViewTree.TreeViewTree;
48
50
  exports.useTreeView = useTreeView.useTreeView;
51
+ exports.useTreeViewContext = useTreeViewContext.useTreeViewContext;
52
+ exports.useTreeViewNodeContext = useTreeViewNodeContext.useTreeViewNodeContext;
49
53
  exports.TreeView = treeView$1;
50
54
  Object.defineProperty(exports, "treeViewAnatomy", {
51
55
  enumerable: true,
@@ -1,4 +1,4 @@
1
- export type { ExpandedChangeDetails as TreeViewExpandedChangeDetails, FocusChangeDetails as TreeViewFocusChangeDetails, SelectionChangeDetails as TreeViewSelectionChangeDetails, } from '@zag-js/tree-view';
1
+ export type { ExpandedChangeDetails as TreeViewExpandedChangeDetails, FocusChangeDetails as TreeViewFocusChangeDetails, SelectionChangeDetails as TreeViewSelectionChangeDetails, LoadChildrenDetails as TreeViewLoadChildrenDetails, LoadChildrenCompleteDetails as TreeViewLoadChildrenCompleteDetails, } from '@zag-js/tree-view';
2
2
  export { createFileTreeCollection, createTreeCollection, type TreeCollection, type TreeNode } from '../collection';
3
3
  export { TreeViewBranch, type TreeViewBranchBaseProps, type TreeViewBranchProps } from './tree-view-branch';
4
4
  export { TreeViewBranchContent, type TreeViewBranchContentBaseProps, type TreeViewBranchContentProps, } from './tree-view-branch-content';
@@ -19,4 +19,6 @@ export { TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeView
19
19
  export { TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps } from './tree-view-tree';
20
20
  export { treeViewAnatomy } from './tree-view.anatomy';
21
21
  export { useTreeView, type UseTreeViewProps, type UseTreeViewReturn } from './use-tree-view';
22
+ export { useTreeViewContext, type UseTreeViewContext } from './use-tree-view-context';
23
+ export { useTreeViewNodeContext, type UseTreeViewNodeContext } from './use-tree-view-node-context';
22
24
  export * as TreeView from './tree-view';
@@ -1,4 +1,4 @@
1
- export type { ExpandedChangeDetails as TreeViewExpandedChangeDetails, FocusChangeDetails as TreeViewFocusChangeDetails, SelectionChangeDetails as TreeViewSelectionChangeDetails, } from '@zag-js/tree-view';
1
+ export type { ExpandedChangeDetails as TreeViewExpandedChangeDetails, FocusChangeDetails as TreeViewFocusChangeDetails, SelectionChangeDetails as TreeViewSelectionChangeDetails, LoadChildrenDetails as TreeViewLoadChildrenDetails, LoadChildrenCompleteDetails as TreeViewLoadChildrenCompleteDetails, } from '@zag-js/tree-view';
2
2
  export { createFileTreeCollection, createTreeCollection, type TreeCollection, type TreeNode } from '../collection';
3
3
  export { TreeViewBranch, type TreeViewBranchBaseProps, type TreeViewBranchProps } from './tree-view-branch';
4
4
  export { TreeViewBranchContent, type TreeViewBranchContentBaseProps, type TreeViewBranchContentProps, } from './tree-view-branch-content';
@@ -19,4 +19,6 @@ export { TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeView
19
19
  export { TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps } from './tree-view-tree';
20
20
  export { treeViewAnatomy } from './tree-view.anatomy';
21
21
  export { useTreeView, type UseTreeViewProps, type UseTreeViewReturn } from './use-tree-view';
22
+ export { useTreeViewContext, type UseTreeViewContext } from './use-tree-view-context';
23
+ export { useTreeViewNodeContext, type UseTreeViewNodeContext } from './use-tree-view-node-context';
22
24
  export * as TreeView from './tree-view';
@@ -1,4 +1,4 @@
1
- export { createFileTreeCollection, createTreeCollection } from '../collection.js';
1
+ export { createFileTreeCollection, createTreeCollection } from '../collection/tree-collection.js';
2
2
  export { TreeViewBranch } from './tree-view-branch.js';
3
3
  export { TreeViewBranchContent } from './tree-view-branch-content.js';
4
4
  export { TreeViewBranchControl } from './tree-view-branch-control.js';
@@ -17,6 +17,8 @@ export { TreeViewRoot } from './tree-view-root.js';
17
17
  export { TreeViewRootProvider } from './tree-view-root-provider.js';
18
18
  export { TreeViewTree } from './tree-view-tree.js';
19
19
  export { useTreeView } from './use-tree-view.js';
20
+ export { useTreeViewContext } from './use-tree-view-context.js';
21
+ export { useTreeViewNodeContext } from './use-tree-view-node-context.js';
20
22
  import * as treeView from './tree-view.js';
21
23
  export { treeView as TreeView };
22
24
  export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';
@@ -9,20 +9,21 @@ const react = require('react');
9
9
  const renderStrategy = require('../../utils/render-strategy.cjs');
10
10
  const collapsibleRoot = require('../collapsible/collapsible-root.cjs');
11
11
  const useTreeViewContext = require('./use-tree-view-context.cjs');
12
+ const useTreeViewNodeContext = require('./use-tree-view-node-context.cjs');
12
13
  const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
13
14
 
14
15
  const TreeViewBranch = react.forwardRef((props, ref) => {
15
16
  const treeView = useTreeViewContext.useTreeViewContext();
16
17
  const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
18
+ const nodeState = useTreeViewNodeContext.useTreeViewNodeContext();
17
19
  const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
18
- const node = treeView.getNodeState(nodeProps);
19
20
  const mergedProps = react$1.mergeProps(treeView.getBranchProps(nodeProps), props);
20
21
  const branchContentProps = treeView.getBranchContentProps(nodeProps);
21
22
  return /* @__PURE__ */ jsxRuntime.jsx(
22
23
  collapsibleRoot.CollapsibleRoot,
23
24
  {
24
25
  ref,
25
- open: node.expanded,
26
+ open: nodeState.expanded,
26
27
  ids: { content: branchContentProps.id },
27
28
  ...renderStrategyProps,
28
29
  ...mergedProps
@@ -5,20 +5,21 @@ import { forwardRef } from 'react';
5
5
  import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
6
6
  import { CollapsibleRoot } from '../collapsible/collapsible-root.js';
7
7
  import { useTreeViewContext } from './use-tree-view-context.js';
8
+ import { useTreeViewNodeContext } from './use-tree-view-node-context.js';
8
9
  import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
9
10
 
10
11
  const TreeViewBranch = forwardRef((props, ref) => {
11
12
  const treeView = useTreeViewContext();
12
13
  const nodeProps = useTreeViewNodePropsContext();
14
+ const nodeState = useTreeViewNodeContext();
13
15
  const renderStrategyProps = useRenderStrategyPropsContext();
14
- const node = treeView.getNodeState(nodeProps);
15
16
  const mergedProps = mergeProps(treeView.getBranchProps(nodeProps), props);
16
17
  const branchContentProps = treeView.getBranchContentProps(nodeProps);
17
18
  return /* @__PURE__ */ jsx(
18
19
  CollapsibleRoot,
19
20
  {
20
21
  ref,
21
- open: node.expanded,
22
+ open: nodeState.expanded,
22
23
  ids: { content: branchContentProps.id },
23
24
  ...renderStrategyProps,
24
25
  ...mergedProps
@@ -5,11 +5,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
 
6
6
  const jsxRuntime = require('react/jsx-runtime');
7
7
  const createSplitProps = require('../../utils/create-split-props.cjs');
8
+ const useTreeViewContext = require('./use-tree-view-context.cjs');
9
+ const useTreeViewNodeContext = require('./use-tree-view-node-context.cjs');
8
10
  const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
9
11
 
10
12
  function TreeViewNodeProvider(props) {
11
13
  const [nodeProps, localProps] = createSplitProps.createSplitProps()(props, ["indexPath", "node"]);
12
- return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewNodePropsContext.TreeViewNodePropsProvider, { value: nodeProps, children: localProps.children });
14
+ const treeView = useTreeViewContext.useTreeViewContext();
15
+ const nodeState = treeView.getNodeState(nodeProps);
16
+ return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewNodeContext.TreeViewNodeStateProvider, { value: nodeState, children: /* @__PURE__ */ jsxRuntime.jsx(useTreeViewNodePropsContext.TreeViewNodePropsProvider, { value: nodeProps, children: localProps.children }) });
13
17
  }
14
18
 
15
19
  exports.TreeViewNodeProvider = TreeViewNodeProvider;
@@ -1,11 +1,15 @@
1
1
  'use client';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import { createSplitProps } from '../../utils/create-split-props.js';
4
+ import { useTreeViewContext } from './use-tree-view-context.js';
5
+ import { TreeViewNodeStateProvider } from './use-tree-view-node-context.js';
4
6
  import { TreeViewNodePropsProvider } from './use-tree-view-node-props-context.js';
5
7
 
6
8
  function TreeViewNodeProvider(props) {
7
9
  const [nodeProps, localProps] = createSplitProps()(props, ["indexPath", "node"]);
8
- return /* @__PURE__ */ jsx(TreeViewNodePropsProvider, { value: nodeProps, children: localProps.children });
10
+ const treeView = useTreeViewContext();
11
+ const nodeState = treeView.getNodeState(nodeProps);
12
+ return /* @__PURE__ */ jsx(TreeViewNodeStateProvider, { value: nodeState, children: /* @__PURE__ */ jsx(TreeViewNodePropsProvider, { value: nodeProps, children: localProps.children }) });
9
13
  }
10
14
 
11
15
  export { TreeViewNodeProvider };
@@ -28,7 +28,9 @@ const TreeViewImpl = (props, ref) => {
28
28
  "onSelectionChange",
29
29
  "selectedValue",
30
30
  "selectionMode",
31
- "typeahead"
31
+ "typeahead",
32
+ "loadChildren",
33
+ "onLoadChildrenComplete"
32
34
  ]);
33
35
  const treeView = useTreeView.useTreeView(useTreeViewProps);
34
36
  const mergedProps = react$1.mergeProps(treeView.getRootProps(), localProps);
@@ -24,7 +24,9 @@ const TreeViewImpl = (props, ref) => {
24
24
  "onSelectionChange",
25
25
  "selectedValue",
26
26
  "selectionMode",
27
- "typeahead"
27
+ "typeahead",
28
+ "loadChildren",
29
+ "onLoadChildrenComplete"
28
30
  ]);
29
31
  const treeView = useTreeView(useTreeViewProps);
30
32
  const mergedProps = mergeProps(treeView.getRootProps(), localProps);
@@ -1,4 +1,4 @@
1
- export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails } from '@zag-js/tree-view';
1
+ export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails, LoadChildrenDetails, LoadChildrenCompleteDetails, } from '@zag-js/tree-view';
2
2
  export { TreeViewBranch as Branch, type TreeViewBranchBaseProps as BranchBaseProps, type TreeViewBranchProps as BranchProps, } from './tree-view-branch';
3
3
  export { TreeViewBranchContent as BranchContent, type TreeViewBranchContentBaseProps as BranchContentBaseProps, type TreeViewBranchContentProps as BranchContentProps, } from './tree-view-branch-content';
4
4
  export { TreeViewBranchControl as BranchControl, type TreeViewBranchControlBaseProps as BranchControlBaseProps, type TreeViewBranchControlProps as BranchControlProps, } from './tree-view-branch-control';
@@ -1,4 +1,4 @@
1
- export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails } from '@zag-js/tree-view';
1
+ export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails, LoadChildrenDetails, LoadChildrenCompleteDetails, } from '@zag-js/tree-view';
2
2
  export { TreeViewBranch as Branch, type TreeViewBranchBaseProps as BranchBaseProps, type TreeViewBranchProps as BranchProps, } from './tree-view-branch';
3
3
  export { TreeViewBranchContent as BranchContent, type TreeViewBranchContentBaseProps as BranchContentBaseProps, type TreeViewBranchContentProps as BranchContentProps, } from './tree-view-branch-content';
4
4
  export { TreeViewBranchControl as BranchControl, type TreeViewBranchControlBaseProps as BranchControlBaseProps, type TreeViewBranchControlProps as BranchControlProps, } from './tree-view-branch-control';
@@ -5,11 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
 
6
6
  const createContext = require('../../utils/create-context.cjs');
7
7
 
8
- const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext.createContext({
8
+ const [TreeViewNodeStateProvider, useTreeViewNodeContext] = createContext.createContext({
9
9
  name: "TreeViewNodeContext",
10
10
  hookName: "useTreeViewNodeContext",
11
11
  providerName: "<TreeViewNodeProvider />"
12
12
  });
13
13
 
14
- exports.TreeViewNodeProvider = TreeViewNodeProvider;
14
+ exports.TreeViewNodeStateProvider = TreeViewNodeStateProvider;
15
15
  exports.useTreeViewNodeContext = useTreeViewNodeContext;
@@ -2,4 +2,4 @@ import { NodeState } from '@zag-js/tree-view';
2
2
  import { Provider } from 'react';
3
3
  export interface UseTreeViewNodeContext extends NodeState {
4
4
  }
5
- export declare const TreeViewNodeProvider: Provider<UseTreeViewNodeContext>, useTreeViewNodeContext: () => UseTreeViewNodeContext;
5
+ export declare const TreeViewNodeStateProvider: Provider<UseTreeViewNodeContext>, useTreeViewNodeContext: () => UseTreeViewNodeContext;
@@ -2,4 +2,4 @@ import { NodeState } from '@zag-js/tree-view';
2
2
  import { Provider } from 'react';
3
3
  export interface UseTreeViewNodeContext extends NodeState {
4
4
  }
5
- export declare const TreeViewNodeProvider: Provider<UseTreeViewNodeContext>, useTreeViewNodeContext: () => UseTreeViewNodeContext;
5
+ export declare const TreeViewNodeStateProvider: Provider<UseTreeViewNodeContext>, useTreeViewNodeContext: () => UseTreeViewNodeContext;
@@ -1,10 +1,10 @@
1
1
  'use client';
2
2
  import { createContext } from '../../utils/create-context.js';
3
3
 
4
- const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext({
4
+ const [TreeViewNodeStateProvider, useTreeViewNodeContext] = createContext({
5
5
  name: "TreeViewNodeContext",
6
6
  hookName: "useTreeViewNodeContext",
7
7
  providerName: "<TreeViewNodeProvider />"
8
8
  });
9
9
 
10
- export { TreeViewNodeProvider, useTreeViewNodeContext };
10
+ export { TreeViewNodeStateProvider, useTreeViewNodeContext };
package/dist/index.cjs CHANGED
@@ -119,7 +119,9 @@ const colorPicker_anatomy = require('./components/color-picker/color-picker.anat
119
119
  const useColorPicker = require('./components/color-picker/use-color-picker.cjs');
120
120
  const useColorPickerContext = require('./components/color-picker/use-color-picker-context.cjs');
121
121
  const colorPicker$1 = require('./components/color-picker/color-picker.cjs');
122
- const collection = require('./components/collection.cjs');
122
+ const listCollection = require('./components/collection/list-collection.cjs');
123
+ const treeCollection = require('./components/collection/tree-collection.cjs');
124
+ const useListCollection = require('./components/collection/use-list-collection.cjs');
123
125
  const comboboxClearTrigger = require('./components/combobox/combobox-clear-trigger.cjs');
124
126
  const comboboxContent = require('./components/combobox/combobox-content.cjs');
125
127
  const comboboxContext = require('./components/combobox/combobox-context.cjs');
@@ -664,6 +666,8 @@ const treeViewRoot = require('./components/tree-view/tree-view-root.cjs');
664
666
  const treeViewRootProvider = require('./components/tree-view/tree-view-root-provider.cjs');
665
667
  const treeViewTree = require('./components/tree-view/tree-view-tree.cjs');
666
668
  const useTreeView = require('./components/tree-view/use-tree-view.cjs');
669
+ const useTreeViewContext = require('./components/tree-view/use-tree-view-context.cjs');
670
+ const useTreeViewNodeContext = require('./components/tree-view/use-tree-view-node-context.cjs');
667
671
  const treeView$1 = require('./components/tree-view/tree-view.cjs');
668
672
  const environmentProvider = require('./providers/environment/environment-provider.cjs');
669
673
  const useEnvironmentContext = require('./providers/environment/use-environment-context.cjs');
@@ -830,9 +834,10 @@ exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
830
834
  exports.useColorPicker = useColorPicker.useColorPicker;
831
835
  exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
832
836
  exports.ColorPicker = colorPicker$1;
833
- exports.createFileTreeCollection = collection.createFileTreeCollection;
834
- exports.createListCollection = collection.createListCollection;
835
- exports.createTreeCollection = collection.createTreeCollection;
837
+ exports.createListCollection = listCollection.createListCollection;
838
+ exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
839
+ exports.createTreeCollection = treeCollection.createTreeCollection;
840
+ exports.useListCollection = useListCollection.useListCollection;
836
841
  exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
837
842
  exports.ComboboxContent = comboboxContent.ComboboxContent;
838
843
  exports.ComboboxContext = comboboxContext.ComboboxContext;
@@ -1385,6 +1390,8 @@ exports.TreeViewRoot = treeViewRoot.TreeViewRoot;
1385
1390
  exports.TreeViewRootProvider = treeViewRootProvider.TreeViewRootProvider;
1386
1391
  exports.TreeViewTree = treeViewTree.TreeViewTree;
1387
1392
  exports.useTreeView = useTreeView.useTreeView;
1393
+ exports.useTreeViewContext = useTreeViewContext.useTreeViewContext;
1394
+ exports.useTreeViewNodeContext = useTreeViewNodeContext.useTreeViewNodeContext;
1388
1395
  exports.TreeView = treeView$1;
1389
1396
  exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
1390
1397
  exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
package/dist/index.js CHANGED
@@ -123,7 +123,9 @@ export { useColorPicker } from './components/color-picker/use-color-picker.js';
123
123
  export { useColorPickerContext } from './components/color-picker/use-color-picker-context.js';
124
124
  import * as colorPicker from './components/color-picker/color-picker.js';
125
125
  export { colorPicker as ColorPicker };
126
- export { createFileTreeCollection, createListCollection, createTreeCollection } from './components/collection.js';
126
+ export { createListCollection } from './components/collection/list-collection.js';
127
+ export { createFileTreeCollection, createTreeCollection } from './components/collection/tree-collection.js';
128
+ export { useListCollection } from './components/collection/use-list-collection.js';
127
129
  export { ComboboxClearTrigger } from './components/combobox/combobox-clear-trigger.js';
128
130
  export { ComboboxContent } from './components/combobox/combobox-content.js';
129
131
  export { ComboboxContext } from './components/combobox/combobox-context.js';
@@ -705,6 +707,8 @@ export { TreeViewRoot } from './components/tree-view/tree-view-root.js';
705
707
  export { TreeViewRootProvider } from './components/tree-view/tree-view-root-provider.js';
706
708
  export { TreeViewTree } from './components/tree-view/tree-view-tree.js';
707
709
  export { useTreeView } from './components/tree-view/use-tree-view.js';
710
+ export { useTreeViewContext } from './components/tree-view/use-tree-view-context.js';
711
+ export { useTreeViewNodeContext } from './components/tree-view/use-tree-view-node-context.js';
708
712
  import * as treeView from './components/tree-view/tree-view.js';
709
713
  export { treeView as TreeView };
710
714
  export { EnvironmentProvider } from './providers/environment/environment-provider.js';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ark-ui/react",
3
3
  "type": "module",
4
- "version": "5.11.0",
4
+ "version": "5.13.0",
5
5
  "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
6
6
  "keywords": [
7
7
  "accordion",
@@ -151,63 +151,63 @@
151
151
  "sideEffects": false,
152
152
  "dependencies": {
153
153
  "@internationalized/date": "3.8.1",
154
- "@zag-js/accordion": "1.14.0",
155
- "@zag-js/angle-slider": "1.14.0",
156
- "@zag-js/anatomy": "1.14.0",
157
- "@zag-js/auto-resize": "1.14.0",
158
- "@zag-js/avatar": "1.14.0",
159
- "@zag-js/carousel": "1.14.0",
160
- "@zag-js/checkbox": "1.14.0",
161
- "@zag-js/clipboard": "1.14.0",
162
- "@zag-js/collapsible": "1.14.0",
163
- "@zag-js/collection": "1.14.0",
164
- "@zag-js/color-picker": "1.14.0",
165
- "@zag-js/color-utils": "1.14.0",
166
- "@zag-js/combobox": "1.14.0",
167
- "@zag-js/core": "1.14.0",
168
- "@zag-js/date-picker": "1.14.0",
169
- "@zag-js/date-utils": "1.14.0",
170
- "@zag-js/dialog": "1.14.0",
171
- "@zag-js/dom-query": "1.14.0",
172
- "@zag-js/editable": "1.14.0",
173
- "@zag-js/file-upload": "1.14.0",
174
- "@zag-js/file-utils": "1.14.0",
175
- "@zag-js/focus-trap": "1.14.0",
176
- "@zag-js/floating-panel": "1.14.0",
177
- "@zag-js/highlight-word": "1.14.0",
178
- "@zag-js/hover-card": "1.14.0",
179
- "@zag-js/i18n-utils": "1.14.0",
180
- "@zag-js/listbox": "1.14.0",
181
- "@zag-js/menu": "1.14.0",
182
- "@zag-js/number-input": "1.14.0",
183
- "@zag-js/pagination": "1.14.0",
184
- "@zag-js/password-input": "1.14.0",
185
- "@zag-js/pin-input": "1.14.0",
186
- "@zag-js/popover": "1.14.0",
187
- "@zag-js/presence": "1.14.0",
188
- "@zag-js/progress": "1.14.0",
189
- "@zag-js/qr-code": "1.14.0",
190
- "@zag-js/radio-group": "1.14.0",
191
- "@zag-js/rating-group": "1.14.0",
192
- "@zag-js/react": "1.14.0",
193
- "@zag-js/select": "1.14.0",
194
- "@zag-js/signature-pad": "1.14.0",
195
- "@zag-js/slider": "1.14.0",
196
- "@zag-js/splitter": "1.14.0",
197
- "@zag-js/steps": "1.14.0",
198
- "@zag-js/switch": "1.14.0",
199
- "@zag-js/tabs": "1.14.0",
200
- "@zag-js/tags-input": "1.14.0",
201
- "@zag-js/time-picker": "1.14.0",
202
- "@zag-js/timer": "1.14.0",
203
- "@zag-js/toast": "1.14.0",
204
- "@zag-js/toggle": "1.14.0",
205
- "@zag-js/toggle-group": "1.14.0",
206
- "@zag-js/tooltip": "1.14.0",
207
- "@zag-js/tour": "1.14.0",
208
- "@zag-js/tree-view": "1.14.0",
209
- "@zag-js/types": "1.14.0",
210
- "@zag-js/utils": "1.14.0"
154
+ "@zag-js/accordion": "1.15.0",
155
+ "@zag-js/angle-slider": "1.15.0",
156
+ "@zag-js/anatomy": "1.15.0",
157
+ "@zag-js/auto-resize": "1.15.0",
158
+ "@zag-js/avatar": "1.15.0",
159
+ "@zag-js/carousel": "1.15.0",
160
+ "@zag-js/checkbox": "1.15.0",
161
+ "@zag-js/clipboard": "1.15.0",
162
+ "@zag-js/collapsible": "1.15.0",
163
+ "@zag-js/collection": "1.15.0",
164
+ "@zag-js/color-picker": "1.15.0",
165
+ "@zag-js/color-utils": "1.15.0",
166
+ "@zag-js/combobox": "1.15.0",
167
+ "@zag-js/core": "1.15.0",
168
+ "@zag-js/date-picker": "1.15.0",
169
+ "@zag-js/date-utils": "1.15.0",
170
+ "@zag-js/dialog": "1.15.0",
171
+ "@zag-js/dom-query": "1.15.0",
172
+ "@zag-js/editable": "1.15.0",
173
+ "@zag-js/file-upload": "1.15.0",
174
+ "@zag-js/file-utils": "1.15.0",
175
+ "@zag-js/focus-trap": "1.15.0",
176
+ "@zag-js/floating-panel": "1.15.0",
177
+ "@zag-js/highlight-word": "1.15.0",
178
+ "@zag-js/hover-card": "1.15.0",
179
+ "@zag-js/i18n-utils": "1.15.0",
180
+ "@zag-js/listbox": "1.15.0",
181
+ "@zag-js/menu": "1.15.0",
182
+ "@zag-js/number-input": "1.15.0",
183
+ "@zag-js/pagination": "1.15.0",
184
+ "@zag-js/password-input": "1.15.0",
185
+ "@zag-js/pin-input": "1.15.0",
186
+ "@zag-js/popover": "1.15.0",
187
+ "@zag-js/presence": "1.15.0",
188
+ "@zag-js/progress": "1.15.0",
189
+ "@zag-js/qr-code": "1.15.0",
190
+ "@zag-js/radio-group": "1.15.0",
191
+ "@zag-js/rating-group": "1.15.0",
192
+ "@zag-js/react": "1.15.0",
193
+ "@zag-js/select": "1.15.0",
194
+ "@zag-js/signature-pad": "1.15.0",
195
+ "@zag-js/slider": "1.15.0",
196
+ "@zag-js/splitter": "1.15.0",
197
+ "@zag-js/steps": "1.15.0",
198
+ "@zag-js/switch": "1.15.0",
199
+ "@zag-js/tabs": "1.15.0",
200
+ "@zag-js/tags-input": "1.15.0",
201
+ "@zag-js/time-picker": "1.15.0",
202
+ "@zag-js/timer": "1.15.0",
203
+ "@zag-js/toast": "1.15.0",
204
+ "@zag-js/toggle": "1.15.0",
205
+ "@zag-js/toggle-group": "1.15.0",
206
+ "@zag-js/tooltip": "1.15.0",
207
+ "@zag-js/tour": "1.15.0",
208
+ "@zag-js/tree-view": "1.15.0",
209
+ "@zag-js/types": "1.15.0",
210
+ "@zag-js/utils": "1.15.0"
211
211
  },
212
212
  "devDependencies": {
213
213
  "@biomejs/biome": "1.9.4",
@@ -223,7 +223,7 @@
223
223
  "@types/react": "19.1.6",
224
224
  "@types/react-dom": "19.1.5",
225
225
  "@vitejs/plugin-react": "4.5.0",
226
- "@zag-js/stringify-state": "1.14.0",
226
+ "@zag-js/stringify-state": "1.15.0",
227
227
  "clean-package": "2.2.0",
228
228
  "globby": "14.1.0",
229
229
  "happy-dom": "17.4.6",
@@ -1,6 +0,0 @@
1
- import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
2
- export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
3
- export type { TreeCollection, TreeNode } from '@zag-js/collection';
4
- export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
5
- export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
6
- export type { CollectionItem, ListCollection, SelectionMode, CollectionOptions, TreeCollectionOptions, GridCollectionOptions, } from '@zag-js/collection';
@@ -1,6 +0,0 @@
1
- import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
2
- export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
3
- export type { TreeCollection, TreeNode } from '@zag-js/collection';
4
- export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
5
- export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
6
- export type { CollectionItem, ListCollection, SelectionMode, CollectionOptions, TreeCollectionOptions, GridCollectionOptions, } from '@zag-js/collection';
@@ -1,7 +0,0 @@
1
- import { ListCollection, filePathToTree, TreeCollection } from '@zag-js/collection';
2
-
3
- const createListCollection = (options) => new ListCollection(options);
4
- const createTreeCollection = (options) => new TreeCollection(options);
5
- const createFileTreeCollection = (paths) => filePathToTree(paths);
6
-
7
- export { createFileTreeCollection, createListCollection, createTreeCollection };