@ark-ui/react 4.2.0 → 4.3.0

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

@@ -1,8 +1,10 @@
+import { RenderStrategyProps } from '../../utils/render-strategy';
+import { TreeNode } from '../collection';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseTreeViewProps } from './use-tree-view';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TreeViewRootBaseProps extends UseTreeViewProps, PolymorphicProps {
+export interface TreeViewRootBaseProps<T extends TreeNode> extends UseTreeViewProps<T>, RenderStrategyProps, PolymorphicProps {
 }
-export interface TreeViewRootProps extends HTMLProps<'div'>, TreeViewRootBaseProps {
+export interface TreeViewRootProps<T extends TreeNode> extends HTMLProps<'div'>, TreeViewRootBaseProps<T> {
 }
-export declare const TreeViewRoot: ForwardRefExoticComponent<TreeViewRootProps & RefAttributes<HTMLDivElement>>;
+export type TreeViewComponent = <T extends TreeNode>(props: TreeViewRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const TreeViewRoot: TreeViewComponent;

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

@@ -3,12 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
+import { splitRenderStrategyProps, RenderStrategyPropsProvider } from '../../utils/render-strategy.js';
 import { ark } from '../factory.js';
 import { useTreeView } from './use-tree-view.js';
 import { TreeViewProvider } from './use-tree-view-context.js';
 
-const TreeViewRoot = forwardRef((props, ref) => {
-  const [useTreeViewProps, localProps] = createSplitProps()(props, [
+const TreeViewImpl = (props, ref) => {
+  const [renderStrategyProps, treeViewProps] = splitRenderStrategyProps(props);
+  const [useTreeViewProps, localProps] = createSplitProps()(treeViewProps, [
+    "collection",
     "defaultExpandedValue",
     "defaultSelectedValue",
     "expandedValue",
@@ -25,8 +28,8 @@ const TreeViewRoot = forwardRef((props, ref) => {
   ]);
   const treeView = useTreeView(useTreeViewProps);
   const mergedProps = mergeProps(treeView.getRootProps(), localProps);
-  return /* @__PURE__ */ jsx(TreeViewProvider, { value: treeView, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-});
-TreeViewRoot.displayName = "TreeViewRoot";
+  return /* @__PURE__ */ jsx(TreeViewProvider, { value: treeView, children: /* @__PURE__ */ jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+};
+const TreeViewRoot = forwardRef(TreeViewImpl);
 
 export { TreeViewRoot };

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

@@ -8,12 +8,11 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const useTreeViewContext = require('./use-tree-view-context.cjs');
-const useTreeViewDepthContext = require('./use-tree-view-depth-context.cjs');
 
 const TreeViewTree = react.forwardRef((props, ref) => {
   const treeView = useTreeViewContext.useTreeViewContext();
   const mergedProps = react$1.mergeProps(treeView.getTreeProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewDepthContext.TreeViewDepthProvider, { value: 1, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 TreeViewTree.displayName = "TreeViewTree";
 

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

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface TreeViewTreeBaseProps extends PolymorphicProps {
 }
-export interface TreeViewTreeProps extends HTMLProps<'ul'>, TreeViewTreeBaseProps {
+export interface TreeViewTreeProps extends HTMLProps<'div'>, TreeViewTreeBaseProps {
 }
-export declare const TreeViewTree: ForwardRefExoticComponent<TreeViewTreeProps & RefAttributes<HTMLUListElement>>;
+export declare const TreeViewTree: ForwardRefExoticComponent<TreeViewTreeProps & RefAttributes<HTMLDivElement>>;

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

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface TreeViewTreeBaseProps extends PolymorphicProps {
 }
-export interface TreeViewTreeProps extends HTMLProps<'ul'>, TreeViewTreeBaseProps {
+export interface TreeViewTreeProps extends HTMLProps<'div'>, TreeViewTreeBaseProps {
 }
-export declare const TreeViewTree: ForwardRefExoticComponent<TreeViewTreeProps & RefAttributes<HTMLUListElement>>;
+export declare const TreeViewTree: ForwardRefExoticComponent<TreeViewTreeProps & RefAttributes<HTMLDivElement>>;

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

@@ -4,12 +4,11 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useTreeViewContext } from './use-tree-view-context.js';
-import { TreeViewDepthProvider } from './use-tree-view-depth-context.js';
 
 const TreeViewTree = forwardRef((props, ref) => {
   const treeView = useTreeViewContext();
   const mergedProps = mergeProps(treeView.getTreeProps(), props);
-  return /* @__PURE__ */ jsx(TreeViewDepthProvider, { value: 1, children: /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref }) });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 TreeViewTree.displayName = "TreeViewTree";
 

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

@@ -5,15 +5,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const treeViewBranch = require('./tree-view-branch.cjs');
 const treeViewBranchContent = require('./tree-view-branch-content.cjs');
 const treeViewBranchControl = require('./tree-view-branch-control.cjs');
+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 treeViewItemContext = require('./tree-view-item-context.cjs');
 const treeViewItemIndicator = require('./tree-view-item-indicator.cjs');
 const treeViewItemText = require('./tree-view-item-text.cjs');
 const treeViewLabel = require('./tree-view-label.cjs');
+const treeViewNodeContext = require('./tree-view-node-context.cjs');
+const treeViewNodeProvider = require('./tree-view-node-provider.cjs');
 const treeViewRoot = require('./tree-view-root.cjs');
 const treeViewRootProvider = require('./tree-view-root-provider.cjs');
 const treeViewTree = require('./tree-view-tree.cjs');
@@ -23,15 +25,17 @@ const treeViewTree = require('./tree-view-tree.cjs');
 exports.Branch = treeViewBranch.TreeViewBranch;
 exports.BranchContent = treeViewBranchContent.TreeViewBranchContent;
 exports.BranchControl = treeViewBranchControl.TreeViewBranchControl;
+exports.BranchIndentGuide = treeViewBranchIndentGuide.TreeViewBranchIndentGuide;
 exports.BranchIndicator = treeViewBranchIndicator.TreeViewBranchIndicator;
 exports.BranchText = treeViewBranchText.TreeViewBranchText;
 exports.BranchTrigger = treeViewBranchTrigger.TreeViewBranchTrigger;
 exports.Context = treeViewContext.TreeViewContext;
 exports.Item = treeViewItem.TreeViewItem;
-exports.ItemContext = treeViewItemContext.TreeViewItemContext;
 exports.ItemIndicator = treeViewItemIndicator.TreeViewItemIndicator;
 exports.ItemText = treeViewItemText.TreeViewItemText;
 exports.Label = treeViewLabel.TreeViewLabel;
+exports.NodeContext = treeViewNodeContext.TreeViewNodeContext;
+exports.NodeProvider = treeViewNodeProvider.TreeViewNodeProvider;
 exports.Root = treeViewRoot.TreeViewRoot;
 exports.RootProvider = treeViewRootProvider.TreeViewRootProvider;
 exports.Tree = treeViewTree.TreeViewTree;

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

@@ -1,16 +1,18 @@
 export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails, } from '@zag-js/tree-view';
-export { TreeViewBranch as Branch, type TreeViewBranchProps as BranchProps, type TreeViewBranchBaseProps as BranchBaseProps, } from './tree-view-branch';
-export { TreeViewBranchContent as BranchContent, type TreeViewBranchContentProps as BranchContentProps, type TreeViewBranchContentBaseProps as BranchContentBaseProps, } from './tree-view-branch-content';
-export { TreeViewBranchControl as BranchControl, type TreeViewBranchControlProps as BranchControlProps, type TreeViewBranchControlBaseProps as BranchControlBaseProps, } from './tree-view-branch-control';
-export { TreeViewBranchIndicator as BranchIndicator, type TreeViewBranchIndicatorProps as BranchIndicatorProps, type TreeViewBranchIndicatorBaseProps as BranchIndicatorBaseProps, } from './tree-view-branch-indicator';
-export { TreeViewBranchText as BranchText, type TreeViewBranchTextProps as BranchTextProps, type TreeViewBranchTextBaseProps as BranchTextBaseProps, } from './tree-view-branch-text';
-export { TreeViewBranchTrigger as BranchTrigger, type TreeViewBranchTriggerProps as BranchTriggerProps, type TreeViewBranchTriggerBaseProps as BranchTriggerBaseProps, } from './tree-view-branch-trigger';
+export { TreeViewBranch as Branch, type TreeViewBranchBaseProps as BranchBaseProps, type TreeViewBranchProps as BranchProps, } from './tree-view-branch';
+export { TreeViewBranchContent as BranchContent, type TreeViewBranchContentBaseProps as BranchContentBaseProps, type TreeViewBranchContentProps as BranchContentProps, } from './tree-view-branch-content';
+export { TreeViewBranchControl as BranchControl, type TreeViewBranchControlBaseProps as BranchControlBaseProps, type TreeViewBranchControlProps as BranchControlProps, } from './tree-view-branch-control';
+export { TreeViewBranchIndentGuide as BranchIndentGuide, type TreeViewBranchIndentGuideBaseProps as BranchIndentGuideBaseProps, type TreeViewBranchIndentGuideProps as BranchIndentGuideProps, } from './tree-view-branch-indent-guide';
+export { TreeViewBranchIndicator as BranchIndicator, type TreeViewBranchIndicatorBaseProps as BranchIndicatorBaseProps, type TreeViewBranchIndicatorProps as BranchIndicatorProps, } from './tree-view-branch-indicator';
+export { TreeViewBranchText as BranchText, type TreeViewBranchTextBaseProps as BranchTextBaseProps, type TreeViewBranchTextProps as BranchTextProps, } from './tree-view-branch-text';
+export { TreeViewBranchTrigger as BranchTrigger, type TreeViewBranchTriggerBaseProps as BranchTriggerBaseProps, type TreeViewBranchTriggerProps as BranchTriggerProps, } from './tree-view-branch-trigger';
 export { TreeViewContext as Context, type TreeViewContextProps as ContextProps, } from './tree-view-context';
-export { TreeViewItem as Item, type TreeViewItemProps as ItemProps, type TreeViewItemBaseProps as ItemBaseProps, } from './tree-view-item';
-export { TreeViewItemContext as ItemContext, type TreeViewItemContextProps as ItemContextProps, } from './tree-view-item-context';
-export { TreeViewItemIndicator as ItemIndicator, type TreeViewItemIndicatorProps as ItemIndicatorProps, type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, } from './tree-view-item-indicator';
-export { TreeViewItemText as ItemText, type TreeViewItemTextProps as ItemTextProps, type TreeViewItemTextBaseProps as ItemTextBaseProps, } from './tree-view-item-text';
-export { TreeViewLabel as Label, type TreeViewLabelProps as LabelProps, type TreeViewLabelBaseProps as LabelBaseProps, } from './tree-view-label';
-export { TreeViewRoot as Root, type TreeViewRootProps as RootProps, type TreeViewRootBaseProps as RootBaseProps, } from './tree-view-root';
-export { TreeViewRootProvider as RootProvider, type TreeViewRootProviderProps as RootProviderProps, type TreeViewRootProviderBaseProps as RootProviderBaseProps, } from './tree-view-root-provider';
-export { TreeViewTree as Tree, type TreeViewTreeProps as TreeProps, type TreeViewTreeBaseProps as TreeBaseProps, } from './tree-view-tree';
+export { TreeViewItem as Item, type TreeViewItemBaseProps as ItemBaseProps, type TreeViewItemProps as ItemProps, } from './tree-view-item';
+export { TreeViewItemIndicator as ItemIndicator, type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, type TreeViewItemIndicatorProps as ItemIndicatorProps, } from './tree-view-item-indicator';
+export { TreeViewItemText as ItemText, type TreeViewItemTextBaseProps as ItemTextBaseProps, type TreeViewItemTextProps as ItemTextProps, } from './tree-view-item-text';
+export { TreeViewLabel as Label, type TreeViewLabelBaseProps as LabelBaseProps, type TreeViewLabelProps as LabelProps, } from './tree-view-label';
+export { TreeViewNodeContext as NodeContext, type TreeViewNodeContextProps as NodeContextProps, } from './tree-view-node-context';
+export { TreeViewNodeProvider as NodeProvider, type TreeViewNodeProviderBaseProps as NodeProviderBaseProps, type TreeViewNodeProviderProps as NodeProviderProps, } from './tree-view-node-provider';
+export { TreeViewRoot as Root, type TreeViewRootBaseProps as RootBaseProps, type TreeViewRootProps as RootProps, } from './tree-view-root';
+export { TreeViewRootProvider as RootProvider, type TreeViewRootProviderBaseProps as RootProviderBaseProps, type TreeViewRootProviderProps as RootProviderProps, } from './tree-view-root-provider';
+export { TreeViewTree as Tree, type TreeViewTreeBaseProps as TreeBaseProps, type TreeViewTreeProps as TreeProps, } from './tree-view-tree';

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

@@ -1,16 +1,18 @@
 export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails, } from '@zag-js/tree-view';
-export { TreeViewBranch as Branch, type TreeViewBranchProps as BranchProps, type TreeViewBranchBaseProps as BranchBaseProps, } from './tree-view-branch';
-export { TreeViewBranchContent as BranchContent, type TreeViewBranchContentProps as BranchContentProps, type TreeViewBranchContentBaseProps as BranchContentBaseProps, } from './tree-view-branch-content';
-export { TreeViewBranchControl as BranchControl, type TreeViewBranchControlProps as BranchControlProps, type TreeViewBranchControlBaseProps as BranchControlBaseProps, } from './tree-view-branch-control';
-export { TreeViewBranchIndicator as BranchIndicator, type TreeViewBranchIndicatorProps as BranchIndicatorProps, type TreeViewBranchIndicatorBaseProps as BranchIndicatorBaseProps, } from './tree-view-branch-indicator';
-export { TreeViewBranchText as BranchText, type TreeViewBranchTextProps as BranchTextProps, type TreeViewBranchTextBaseProps as BranchTextBaseProps, } from './tree-view-branch-text';
-export { TreeViewBranchTrigger as BranchTrigger, type TreeViewBranchTriggerProps as BranchTriggerProps, type TreeViewBranchTriggerBaseProps as BranchTriggerBaseProps, } from './tree-view-branch-trigger';
+export { TreeViewBranch as Branch, type TreeViewBranchBaseProps as BranchBaseProps, type TreeViewBranchProps as BranchProps, } from './tree-view-branch';
+export { TreeViewBranchContent as BranchContent, type TreeViewBranchContentBaseProps as BranchContentBaseProps, type TreeViewBranchContentProps as BranchContentProps, } from './tree-view-branch-content';
+export { TreeViewBranchControl as BranchControl, type TreeViewBranchControlBaseProps as BranchControlBaseProps, type TreeViewBranchControlProps as BranchControlProps, } from './tree-view-branch-control';
+export { TreeViewBranchIndentGuide as BranchIndentGuide, type TreeViewBranchIndentGuideBaseProps as BranchIndentGuideBaseProps, type TreeViewBranchIndentGuideProps as BranchIndentGuideProps, } from './tree-view-branch-indent-guide';
+export { TreeViewBranchIndicator as BranchIndicator, type TreeViewBranchIndicatorBaseProps as BranchIndicatorBaseProps, type TreeViewBranchIndicatorProps as BranchIndicatorProps, } from './tree-view-branch-indicator';
+export { TreeViewBranchText as BranchText, type TreeViewBranchTextBaseProps as BranchTextBaseProps, type TreeViewBranchTextProps as BranchTextProps, } from './tree-view-branch-text';
+export { TreeViewBranchTrigger as BranchTrigger, type TreeViewBranchTriggerBaseProps as BranchTriggerBaseProps, type TreeViewBranchTriggerProps as BranchTriggerProps, } from './tree-view-branch-trigger';
 export { TreeViewContext as Context, type TreeViewContextProps as ContextProps, } from './tree-view-context';
-export { TreeViewItem as Item, type TreeViewItemProps as ItemProps, type TreeViewItemBaseProps as ItemBaseProps, } from './tree-view-item';
-export { TreeViewItemContext as ItemContext, type TreeViewItemContextProps as ItemContextProps, } from './tree-view-item-context';
-export { TreeViewItemIndicator as ItemIndicator, type TreeViewItemIndicatorProps as ItemIndicatorProps, type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, } from './tree-view-item-indicator';
-export { TreeViewItemText as ItemText, type TreeViewItemTextProps as ItemTextProps, type TreeViewItemTextBaseProps as ItemTextBaseProps, } from './tree-view-item-text';
-export { TreeViewLabel as Label, type TreeViewLabelProps as LabelProps, type TreeViewLabelBaseProps as LabelBaseProps, } from './tree-view-label';
-export { TreeViewRoot as Root, type TreeViewRootProps as RootProps, type TreeViewRootBaseProps as RootBaseProps, } from './tree-view-root';
-export { TreeViewRootProvider as RootProvider, type TreeViewRootProviderProps as RootProviderProps, type TreeViewRootProviderBaseProps as RootProviderBaseProps, } from './tree-view-root-provider';
-export { TreeViewTree as Tree, type TreeViewTreeProps as TreeProps, type TreeViewTreeBaseProps as TreeBaseProps, } from './tree-view-tree';
+export { TreeViewItem as Item, type TreeViewItemBaseProps as ItemBaseProps, type TreeViewItemProps as ItemProps, } from './tree-view-item';
+export { TreeViewItemIndicator as ItemIndicator, type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, type TreeViewItemIndicatorProps as ItemIndicatorProps, } from './tree-view-item-indicator';
+export { TreeViewItemText as ItemText, type TreeViewItemTextBaseProps as ItemTextBaseProps, type TreeViewItemTextProps as ItemTextProps, } from './tree-view-item-text';
+export { TreeViewLabel as Label, type TreeViewLabelBaseProps as LabelBaseProps, type TreeViewLabelProps as LabelProps, } from './tree-view-label';
+export { TreeViewNodeContext as NodeContext, type TreeViewNodeContextProps as NodeContextProps, } from './tree-view-node-context';
+export { TreeViewNodeProvider as NodeProvider, type TreeViewNodeProviderBaseProps as NodeProviderBaseProps, type TreeViewNodeProviderProps as NodeProviderProps, } from './tree-view-node-provider';
+export { TreeViewRoot as Root, type TreeViewRootBaseProps as RootBaseProps, type TreeViewRootProps as RootProps, } from './tree-view-root';
+export { TreeViewRootProvider as RootProvider, type TreeViewRootProviderBaseProps as RootProviderBaseProps, type TreeViewRootProviderProps as RootProviderProps, } from './tree-view-root-provider';
+export { TreeViewTree as Tree, type TreeViewTreeBaseProps as TreeBaseProps, type TreeViewTreeProps as TreeProps, } from './tree-view-tree';

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

@@ -1,15 +1,17 @@
 export { TreeViewBranch as Branch } from './tree-view-branch.js';
 export { TreeViewBranchContent as BranchContent } from './tree-view-branch-content.js';
 export { TreeViewBranchControl as BranchControl } from './tree-view-branch-control.js';
+export { TreeViewBranchIndentGuide as BranchIndentGuide } from './tree-view-branch-indent-guide.js';
 export { TreeViewBranchIndicator as BranchIndicator } from './tree-view-branch-indicator.js';
 export { TreeViewBranchText as BranchText } from './tree-view-branch-text.js';
 export { TreeViewBranchTrigger as BranchTrigger } from './tree-view-branch-trigger.js';
 export { TreeViewContext as Context } from './tree-view-context.js';
 export { TreeViewItem as Item } from './tree-view-item.js';
-export { TreeViewItemContext as ItemContext } from './tree-view-item-context.js';
 export { TreeViewItemIndicator as ItemIndicator } from './tree-view-item-indicator.js';
 export { TreeViewItemText as ItemText } from './tree-view-item-text.js';
 export { TreeViewLabel as Label } from './tree-view-label.js';
+export { TreeViewNodeContext as NodeContext } from './tree-view-node-context.js';
+export { TreeViewNodeProvider as NodeProvider } from './tree-view-node-provider.js';
 export { TreeViewRoot as Root } from './tree-view-root.js';
 export { TreeViewRootProvider as RootProvider } from './tree-view-root-provider.js';
 export { TreeViewTree as Tree } from './tree-view-tree.js';

package/dist/components/tree-view/use-tree-view-context.d.cts

@@ -1,5 +1,6 @@
+import { TreeNode } from '../collection';
 import { UseTreeViewReturn } from './use-tree-view';
 import { Provider } from 'react';
-export interface UseTreeViewContext extends UseTreeViewReturn {
+export interface UseTreeViewContext<T extends TreeNode> extends UseTreeViewReturn<T> {
 }
-export declare const TreeViewProvider: Provider<UseTreeViewContext>, useTreeViewContext: () => UseTreeViewContext;
+export declare const TreeViewProvider: Provider<UseTreeViewContext<any>>, useTreeViewContext: () => UseTreeViewContext<any>;

package/dist/components/tree-view/use-tree-view-context.d.ts

@@ -1,5 +1,6 @@
+import { TreeNode } from '../collection';
 import { UseTreeViewReturn } from './use-tree-view';
 import { Provider } from 'react';
-export interface UseTreeViewContext extends UseTreeViewReturn {
+export interface UseTreeViewContext<T extends TreeNode> extends UseTreeViewReturn<T> {
 }
-export declare const TreeViewProvider: Provider<UseTreeViewContext>, useTreeViewContext: () => UseTreeViewContext;
+export declare const TreeViewProvider: Provider<UseTreeViewContext<any>>, useTreeViewContext: () => UseTreeViewContext<any>;

package/dist/components/tree-view/use-tree-view-node-context.cjs

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext.createContext(
+  {
+    name: "TreeViewNodeContext",
+    hookName: "useTreeViewNodeContext",
+    providerName: "<TreeViewNodeProvider />"
+  }
+);
+
+exports.TreeViewNodeProvider = TreeViewNodeProvider;
+exports.useTreeViewNodeContext = useTreeViewNodeContext;

package/dist/components/tree-view/use-tree-view-node-context.d.cts

@@ -0,0 +1,5 @@
+import { NodeState } from '@zag-js/tree-view';
+import { Provider } from 'react';
+export interface UseTreeViewNodeContext extends NodeState {
+}
+export declare const TreeViewNodeProvider: Provider<UseTreeViewNodeContext>, useTreeViewNodeContext: () => UseTreeViewNodeContext;

package/dist/components/tree-view/use-tree-view-node-context.d.ts

@@ -0,0 +1,5 @@
+import { NodeState } from '@zag-js/tree-view';
+import { Provider } from 'react';
+export interface UseTreeViewNodeContext extends NodeState {
+}
+export declare const TreeViewNodeProvider: Provider<UseTreeViewNodeContext>, useTreeViewNodeContext: () => UseTreeViewNodeContext;

package/dist/components/tree-view/use-tree-view-node-context.js

@@ -0,0 +1,12 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext(
+  {
+    name: "TreeViewNodeContext",
+    hookName: "useTreeViewNodeContext",
+    providerName: "<TreeViewNodeProvider />"
+  }
+);
+
+export { TreeViewNodeProvider, useTreeViewNodeContext };

package/dist/components/tree-view/use-tree-view-node-props-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [TreeViewNodePropsProvider, useTreeViewNodePropsContext] = createContext.createContext({
+  name: "TreeViewNodePropsContext",
+  hookName: "useTreeViewNodePropsContext",
+  providerName: "<TreeViewItemProvider />"
+});
+
+exports.TreeViewNodePropsProvider = TreeViewNodePropsProvider;
+exports.useTreeViewNodePropsContext = useTreeViewNodePropsContext;

package/dist/components/tree-view/use-tree-view-node-props-context.d.cts

@@ -0,0 +1,5 @@
+import { NodeProps } from '@zag-js/tree-view';
+import { Provider } from 'react';
+export interface UseTreeViewNodePropsContext extends NodeProps {
+}
+export declare const TreeViewNodePropsProvider: Provider<UseTreeViewNodePropsContext>, useTreeViewNodePropsContext: () => UseTreeViewNodePropsContext;

package/dist/components/tree-view/use-tree-view-node-props-context.d.ts

@@ -0,0 +1,5 @@
+import { NodeProps } from '@zag-js/tree-view';
+import { Provider } from 'react';
+export interface UseTreeViewNodePropsContext extends NodeProps {
+}
+export declare const TreeViewNodePropsProvider: Provider<UseTreeViewNodePropsContext>, useTreeViewNodePropsContext: () => UseTreeViewNodePropsContext;

package/dist/components/tree-view/use-tree-view-node-props-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [TreeViewNodePropsProvider, useTreeViewNodePropsContext] = createContext({
+  name: "TreeViewNodePropsContext",
+  hookName: "useTreeViewNodePropsContext",
+  providerName: "<TreeViewItemProvider />"
+});
+
+export { TreeViewNodePropsProvider, useTreeViewNodePropsContext };

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

@@ -29,26 +29,36 @@ function _interopNamespaceDefault(e) {
 
 const treeView__namespace = /*#__PURE__*/_interopNamespaceDefault(treeView);
 
-const useTreeView = (props = {}) => {
-  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
-  const { dir } = useLocaleContext.useLocaleContext();
+const useTreeView = (props) => {
+  const { collection, ...treeViewProps } = props;
+  const locale = useLocaleContext.useLocaleContext();
+  const environment = useEnvironmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
-    dir,
-    getRootNode,
+    dir: locale.dir,
+    getRootNode: environment.getRootNode,
     selectedValue: props.defaultSelectedValue,
     expandedValue: props.defaultExpandedValue,
-    ...props
+    collection,
+    ...treeViewProps
   };
-  const context = {
-    ...initialContext,
-    selectedValue: props.selectedValue,
-    expandedValue: props.expandedValue,
-    onFocusChange: useEvent.useEvent(props.onFocusChange, { sync: true }),
-    onExpandedChange: useEvent.useEvent(props.onExpandedChange),
-    onSelectionChange: useEvent.useEvent(props.onSelectionChange)
-  };
-  const [state, send] = react$1.useMachine(treeView__namespace.machine(initialContext), { context });
+  const context = (() => {
+    const { collection: _, ...restProps } = initialContext;
+    return {
+      ...restProps,
+      selectedValue: props.selectedValue,
+      expandedValue: props.expandedValue,
+      onFocusChange: useEvent.useEvent(props.onFocusChange),
+      onExpandedChange: useEvent.useEvent(props.onExpandedChange, { sync: true }),
+      onSelectionChange: useEvent.useEvent(props.onSelectionChange, { sync: true })
+    };
+  })();
+  const [state, send, service] = react$1.useMachine(treeView__namespace.machine(initialContext), {
+    context
+  });
+  react.useEffect(() => {
+    service.setContext({ collection });
+  }, [collection]);
   return treeView__namespace.connect(state, send, react$1.normalizeProps);
 };
 

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

@@ -1,7 +1,8 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
+import { TreeCollection, TreeNode } from '../collection';
 import * as treeView from '@zag-js/tree-view';
-export interface UseTreeViewProps extends Optional<Omit<treeView.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<treeView.Context, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
     /**
      * The initial selected items of the tree view.
      * Use this when you do not need to control the state of the tree view.
@@ -12,7 +13,11 @@ export interface UseTreeViewProps extends Optional<Omit<treeView.Context, 'dir'
      * Use this when you do not need to control the state of the tree view.
      */
     defaultExpandedValue?: treeView.Context['expandedValue'];
+    /**
+     * The collection of tree nodes
+     */
+    collection: TreeCollection<T>;
 }
-export interface UseTreeViewReturn extends treeView.Api<PropTypes> {
+export interface UseTreeViewReturn<T extends TreeNode> extends treeView.Api<PropTypes, T> {
 }
-export declare const useTreeView: (props?: UseTreeViewProps) => UseTreeViewReturn;
+export declare const useTreeView: <T extends unknown>(props: UseTreeViewProps<T>) => UseTreeViewReturn<T>;

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

@@ -1,7 +1,8 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
+import { TreeCollection, TreeNode } from '../collection';
 import * as treeView from '@zag-js/tree-view';
-export interface UseTreeViewProps extends Optional<Omit<treeView.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<treeView.Context, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
     /**
      * The initial selected items of the tree view.
      * Use this when you do not need to control the state of the tree view.
@@ -12,7 +13,11 @@ export interface UseTreeViewProps extends Optional<Omit<treeView.Context, 'dir'
      * Use this when you do not need to control the state of the tree view.
      */
     defaultExpandedValue?: treeView.Context['expandedValue'];
+    /**
+     * The collection of tree nodes
+     */
+    collection: TreeCollection<T>;
 }
-export interface UseTreeViewReturn extends treeView.Api<PropTypes> {
+export interface UseTreeViewReturn<T extends TreeNode> extends treeView.Api<PropTypes, T> {
 }
-export declare const useTreeView: (props?: UseTreeViewProps) => UseTreeViewReturn;
+export declare const useTreeView: <T extends unknown>(props: UseTreeViewProps<T>) => UseTreeViewReturn<T>;

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

@@ -1,31 +1,41 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as treeView from '@zag-js/tree-view';
-import { useId } from 'react';
+import { useId, useEffect } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { useEvent } from '../../utils/use-event.js';
 
-const useTreeView = (props = {}) => {
-  const { getRootNode } = useEnvironmentContext();
-  const { dir } = useLocaleContext();
+const useTreeView = (props) => {
+  const { collection, ...treeViewProps } = props;
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const initialContext = {
     id: useId(),
-    dir,
-    getRootNode,
+    dir: locale.dir,
+    getRootNode: environment.getRootNode,
     selectedValue: props.defaultSelectedValue,
     expandedValue: props.defaultExpandedValue,
-    ...props
+    collection,
+    ...treeViewProps
   };
-  const context = {
-    ...initialContext,
-    selectedValue: props.selectedValue,
-    expandedValue: props.expandedValue,
-    onFocusChange: useEvent(props.onFocusChange, { sync: true }),
-    onExpandedChange: useEvent(props.onExpandedChange),
-    onSelectionChange: useEvent(props.onSelectionChange)
-  };
-  const [state, send] = useMachine(treeView.machine(initialContext), { context });
+  const context = (() => {
+    const { collection: _, ...restProps } = initialContext;
+    return {
+      ...restProps,
+      selectedValue: props.selectedValue,
+      expandedValue: props.expandedValue,
+      onFocusChange: useEvent(props.onFocusChange),
+      onExpandedChange: useEvent(props.onExpandedChange, { sync: true }),
+      onSelectionChange: useEvent(props.onSelectionChange, { sync: true })
+    };
+  })();
+  const [state, send, service] = useMachine(treeView.machine(initialContext), {
+    context
+  });
+  useEffect(() => {
+    service.setContext({ collection });
+  }, [collection]);
   return treeView.connect(state, send, normalizeProps);
 };
 

package/dist/index.cjs

@@ -567,21 +567,20 @@ const tooltip$1 = require('./components/tooltip/tooltip.cjs');
 const treeViewBranch = require('./components/tree-view/tree-view-branch.cjs');
 const treeViewBranchContent = require('./components/tree-view/tree-view-branch-content.cjs');
 const treeViewBranchControl = require('./components/tree-view/tree-view-branch-control.cjs');
+const treeViewBranchIndentGuide = require('./components/tree-view/tree-view-branch-indent-guide.cjs');
 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 treeViewItemContext = require('./components/tree-view/tree-view-item-context.cjs');
 const treeViewItemIndicator = require('./components/tree-view/tree-view-item-indicator.cjs');
 const treeViewItemText = require('./components/tree-view/tree-view-item-text.cjs');
 const treeViewLabel = require('./components/tree-view/tree-view-label.cjs');
+const treeViewNodeContext = require('./components/tree-view/tree-view-node-context.cjs');
+const treeViewNodeProvider = require('./components/tree-view/tree-view-node-provider.cjs');
 const treeViewRoot = require('./components/tree-view/tree-view-root.cjs');
 const treeViewRootProvider = require('./components/tree-view/tree-view-root-provider.cjs');
 const treeViewTree = require('./components/tree-view/tree-view-tree.cjs');
 const useTreeView = require('./components/tree-view/use-tree-view.cjs');
-const useTreeViewContext = require('./components/tree-view/use-tree-view-context.cjs');
-const useTreeViewItemContext = require('./components/tree-view/use-tree-view-item-context.cjs');
 const treeView$1 = require('./components/tree-view/tree-view.cjs');
 const environmentProvider = require('./providers/environment/environment-provider.cjs');
 const useEnvironmentContext = require('./providers/environment/use-environment-context.cjs');
@@ -728,6 +727,7 @@ exports.useColorPicker = useColorPicker.useColorPicker;
 exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
 exports.ColorPicker = colorPicker$1;
 exports.createListCollection = collection.createListCollection;
+exports.createTreeCollection = collection.createTreeCollection;
 exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
 exports.ComboboxContent = comboboxContent.ComboboxContent;
 exports.ComboboxContext = comboboxContext.ComboboxContext;
@@ -1197,21 +1197,20 @@ exports.Tooltip = tooltip$1;
 exports.TreeViewBranch = treeViewBranch.TreeViewBranch;
 exports.TreeViewBranchContent = treeViewBranchContent.TreeViewBranchContent;
 exports.TreeViewBranchControl = treeViewBranchControl.TreeViewBranchControl;
+exports.TreeViewBranchIndentGuide = treeViewBranchIndentGuide.TreeViewBranchIndentGuide;
 exports.TreeViewBranchIndicator = treeViewBranchIndicator.TreeViewBranchIndicator;
 exports.TreeViewBranchText = treeViewBranchText.TreeViewBranchText;
 exports.TreeViewBranchTrigger = treeViewBranchTrigger.TreeViewBranchTrigger;
-exports.TreeViewContext = treeViewContext.TreeViewContext;
 exports.TreeViewItem = treeViewItem.TreeViewItem;
-exports.TreeViewItemContext = treeViewItemContext.TreeViewItemContext;
 exports.TreeViewItemIndicator = treeViewItemIndicator.TreeViewItemIndicator;
 exports.TreeViewItemText = treeViewItemText.TreeViewItemText;
 exports.TreeViewLabel = treeViewLabel.TreeViewLabel;
+exports.TreeViewNodeContext = treeViewNodeContext.TreeViewNodeContext;
+exports.TreeViewNodeProvider = treeViewNodeProvider.TreeViewNodeProvider;
 exports.TreeViewRoot = treeViewRoot.TreeViewRoot;
 exports.TreeViewRootProvider = treeViewRootProvider.TreeViewRootProvider;
 exports.TreeViewTree = treeViewTree.TreeViewTree;
 exports.useTreeView = useTreeView.useTreeView;
-exports.useTreeViewContext = useTreeViewContext.useTreeViewContext;
-exports.useTreeViewItemContext = useTreeViewItemContext.useTreeViewItemContext;
 exports.TreeView = treeView$1;
 exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;

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 } from './components/collection.js';
+export { 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';
@@ -603,21 +603,20 @@ export { tooltip as Tooltip };
 export { TreeViewBranch } from './components/tree-view/tree-view-branch.js';
 export { TreeViewBranchContent } from './components/tree-view/tree-view-branch-content.js';
 export { TreeViewBranchControl } from './components/tree-view/tree-view-branch-control.js';
+export { TreeViewBranchIndentGuide } from './components/tree-view/tree-view-branch-indent-guide.js';
 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 { TreeViewItemContext } from './components/tree-view/tree-view-item-context.js';
 export { TreeViewItemIndicator } from './components/tree-view/tree-view-item-indicator.js';
 export { TreeViewItemText } from './components/tree-view/tree-view-item-text.js';
 export { TreeViewLabel } from './components/tree-view/tree-view-label.js';
+export { TreeViewNodeContext } from './components/tree-view/tree-view-node-context.js';
+export { TreeViewNodeProvider } from './components/tree-view/tree-view-node-provider.js';
 export { TreeViewRoot } from './components/tree-view/tree-view-root.js';
 export { TreeViewRootProvider } from './components/tree-view/tree-view-root-provider.js';
 export { TreeViewTree } from './components/tree-view/tree-view-tree.js';
 export { useTreeView } from './components/tree-view/use-tree-view.js';
-export { useTreeViewContext } from './components/tree-view/use-tree-view-context.js';
-export { useTreeViewItemContext } from './components/tree-view/use-tree-view-item-context.js';
 import * as treeView from './components/tree-view/tree-view.js';
 export { treeView as TreeView };
 export { EnvironmentProvider } from './providers/environment/environment-provider.js';