@ark-ui/react 4.2.0 → 4.3.0

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

@@ -7,14 +7,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const useTreeViewBranchContext = require('./use-tree-view-branch-context.cjs');
 const useTreeViewContext = require('./use-tree-view-context.cjs');
+const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
 
 const TreeViewBranchText = react.forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext.useTreeViewContext();
-    const branchContext = useTreeViewBranchContext.useTreeViewBranchContext();
-    const mergedProps = react$1.mergeProps(treeView.getBranchTextProps(branchContext), props);
+    const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+    const mergedProps = react$1.mergeProps(treeView.getBranchTextProps(nodeProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
   }
 );

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

@@ -3,14 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
-import { useTreeViewBranchContext } from './use-tree-view-branch-context.js';
 import { useTreeViewContext } from './use-tree-view-context.js';
+import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
 
 const TreeViewBranchText = forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext();
-    const branchContext = useTreeViewBranchContext();
-    const mergedProps = mergeProps(treeView.getBranchTextProps(branchContext), props);
+    const nodeProps = useTreeViewNodePropsContext();
+    const mergedProps = mergeProps(treeView.getBranchTextProps(nodeProps), props);
     return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
   }
 );

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

@@ -7,14 +7,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const useTreeViewBranchContext = require('./use-tree-view-branch-context.cjs');
 const useTreeViewContext = require('./use-tree-view-context.cjs');
+const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
 
 const TreeViewBranchTrigger = react.forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext.useTreeViewContext();
-    const branchContext = useTreeViewBranchContext.useTreeViewBranchContext();
-    const mergedProps = react$1.mergeProps(treeView.getBranchTriggerProps(branchContext), props);
+    const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+    const mergedProps = react$1.mergeProps(treeView.getBranchTriggerProps(nodeProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -3,14 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
-import { useTreeViewBranchContext } from './use-tree-view-branch-context.js';
 import { useTreeViewContext } from './use-tree-view-context.js';
+import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
 
 const TreeViewBranchTrigger = forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext();
-    const branchContext = useTreeViewBranchContext();
-    const mergedProps = mergeProps(treeView.getBranchTriggerProps(branchContext), props);
+    const nodeProps = useTreeViewNodePropsContext();
+    const mergedProps = mergeProps(treeView.getBranchTriggerProps(nodeProps), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -6,19 +6,28 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const createSplitProps = require('../../utils/create-split-props.cjs');
-const factory = require('../factory.cjs');
-const useTreeViewBranchContext = require('./use-tree-view-branch-context.cjs');
+const renderStrategy = require('../../utils/render-strategy.cjs');
+const collapsibleRoot = require('../collapsible/collapsible-root.cjs');
 const useTreeViewContext = require('./use-tree-view-context.cjs');
-const useTreeViewDepthContext = require('./use-tree-view-depth-context.cjs');
+const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
 
 const TreeViewBranch = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["disabled", "value"]);
   const treeView = useTreeViewContext.useTreeViewContext();
-  const depth = useTreeViewDepthContext.useTreeViewDepthContext();
-  const branchContext = { ...itemProps, depth };
-  const mergedProps = react$1.mergeProps(treeView.getBranchProps(branchContext), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewDepthContext.TreeViewDepthProvider, { value: depth + 1, children: /* @__PURE__ */ jsxRuntime.jsx(useTreeViewBranchContext.TreeViewBranchProvider, { value: branchContext, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref }) }) });
+  const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+  const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
+  const node = treeView.getNodeState(nodeProps);
+  const mergedProps = react$1.mergeProps(treeView.getBranchProps(nodeProps), props);
+  const branchContentProps = treeView.getBranchContentProps(nodeProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    collapsibleRoot.CollapsibleRoot,
+    {
+      ref,
+      open: node.expanded,
+      ids: { content: branchContentProps.id },
+      ...renderStrategyProps,
+      ...mergedProps
+    }
+  );
 });
 TreeViewBranch.displayName = "TreeViewBranch";
 

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

@@ -1,9 +1,8 @@
 import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
-import { ItemProps } from './use-tree-view-branch-context';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TreeViewBranchBaseProps extends ItemProps, PolymorphicProps {
+export interface TreeViewBranchBaseProps extends PolymorphicProps {
 }
-export interface TreeViewBranchProps extends Assign<HTMLProps<'li'>, TreeViewBranchBaseProps> {
+export interface TreeViewBranchProps extends Assign<HTMLProps<'div'>, TreeViewBranchBaseProps> {
 }
-export declare const TreeViewBranch: ForwardRefExoticComponent<TreeViewBranchProps & RefAttributes<HTMLLIElement>>;
+export declare const TreeViewBranch: ForwardRefExoticComponent<TreeViewBranchProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,9 +1,8 @@
 import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
-import { ItemProps } from './use-tree-view-branch-context';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TreeViewBranchBaseProps extends ItemProps, PolymorphicProps {
+export interface TreeViewBranchBaseProps extends PolymorphicProps {
 }
-export interface TreeViewBranchProps extends Assign<HTMLProps<'li'>, TreeViewBranchBaseProps> {
+export interface TreeViewBranchProps extends Assign<HTMLProps<'div'>, TreeViewBranchBaseProps> {
 }
-export declare const TreeViewBranch: ForwardRefExoticComponent<TreeViewBranchProps & RefAttributes<HTMLLIElement>>;
+export declare const TreeViewBranch: ForwardRefExoticComponent<TreeViewBranchProps & RefAttributes<HTMLDivElement>>;

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

@@ -2,19 +2,28 @@
 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 { ark } from '../factory.js';
-import { TreeViewBranchProvider } from './use-tree-view-branch-context.js';
+import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
+import { CollapsibleRoot } from '../collapsible/collapsible-root.js';
 import { useTreeViewContext } from './use-tree-view-context.js';
-import { useTreeViewDepthContext, TreeViewDepthProvider } from './use-tree-view-depth-context.js';
+import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
 
 const TreeViewBranch = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["disabled", "value"]);
   const treeView = useTreeViewContext();
-  const depth = useTreeViewDepthContext();
-  const branchContext = { ...itemProps, depth };
-  const mergedProps = mergeProps(treeView.getBranchProps(branchContext), localProps);
-  return /* @__PURE__ */ jsx(TreeViewDepthProvider, { value: depth + 1, children: /* @__PURE__ */ jsx(TreeViewBranchProvider, { value: branchContext, children: /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref }) }) });
+  const nodeProps = useTreeViewNodePropsContext();
+  const renderStrategyProps = useRenderStrategyPropsContext();
+  const node = treeView.getNodeState(nodeProps);
+  const mergedProps = mergeProps(treeView.getBranchProps(nodeProps), props);
+  const branchContentProps = treeView.getBranchContentProps(nodeProps);
+  return /* @__PURE__ */ jsx(
+    CollapsibleRoot,
+    {
+      ref,
+      open: node.expanded,
+      ids: { content: branchContentProps.id },
+      ...renderStrategyProps,
+      ...mergedProps
+    }
+  );
 });
 TreeViewBranch.displayName = "TreeViewBranch";
 

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

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import { TreeNode } from '../collection';
 import { UseTreeViewContext } from './use-tree-view-context';
-export interface TreeViewContextProps {
-    children: (context: UseTreeViewContext) => ReactNode;
+import { ReactNode } from 'react';
+export interface TreeViewContextProps<T extends TreeNode> {
+    children: (context: UseTreeViewContext<T>) => React.ReactNode;
 }
-export declare const TreeViewContext: (props: TreeViewContextProps) => ReactNode;
+export declare const TreeViewContext: <T extends unknown>(props: TreeViewContextProps<T>) => ReactNode;

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

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import { TreeNode } from '../collection';
 import { UseTreeViewContext } from './use-tree-view-context';
-export interface TreeViewContextProps {
-    children: (context: UseTreeViewContext) => ReactNode;
+import { ReactNode } from 'react';
+export interface TreeViewContextProps<T extends TreeNode> {
+    children: (context: UseTreeViewContext<T>) => React.ReactNode;
 }
-export declare const TreeViewContext: (props: TreeViewContextProps) => ReactNode;
+export declare const TreeViewContext: <T extends unknown>(props: TreeViewContextProps<T>) => ReactNode;

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

@@ -8,13 +8,13 @@ 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 useTreeViewItemPropsContext = require('./use-tree-view-item-props-context.cjs');
+const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
 
 const TreeViewItemIndicator = react.forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext.useTreeViewContext();
-    const itemProps = useTreeViewItemPropsContext.useTreeViewItemPropsContext();
-    const mergedProps = react$1.mergeProps(treeView.getItemIndicatorProps(itemProps), props);
+    const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+    const mergedProps = react$1.mergeProps(treeView.getItemIndicatorProps(nodeProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -4,13 +4,13 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useTreeViewContext } from './use-tree-view-context.js';
-import { useTreeViewItemPropsContext } from './use-tree-view-item-props-context.js';
+import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
 
 const TreeViewItemIndicator = forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext();
-    const itemProps = useTreeViewItemPropsContext();
-    const mergedProps = mergeProps(treeView.getItemIndicatorProps(itemProps), props);
+    const nodeProps = useTreeViewNodePropsContext();
+    const mergedProps = mergeProps(treeView.getItemIndicatorProps(nodeProps), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -8,12 +8,12 @@ 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 useTreeViewItemPropsContext = require('./use-tree-view-item-props-context.cjs');
+const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
 
 const TreeViewItemText = react.forwardRef((props, ref) => {
   const treeView = useTreeViewContext.useTreeViewContext();
-  const itemProps = useTreeViewItemPropsContext.useTreeViewItemPropsContext();
-  const mergedProps = react$1.mergeProps(treeView.getItemTextProps(itemProps), props);
+  const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+  const mergedProps = react$1.mergeProps(treeView.getItemTextProps(nodeProps), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 TreeViewItemText.displayName = "TreeViewItemText";

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

@@ -4,12 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useTreeViewContext } from './use-tree-view-context.js';
-import { useTreeViewItemPropsContext } from './use-tree-view-item-props-context.js';
+import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
 
 const TreeViewItemText = forwardRef((props, ref) => {
   const treeView = useTreeViewContext();
-  const itemProps = useTreeViewItemPropsContext();
-  const mergedProps = mergeProps(treeView.getItemTextProps(itemProps), props);
+  const nodeProps = useTreeViewNodePropsContext();
+  const mergedProps = mergeProps(treeView.getItemTextProps(nodeProps), props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 TreeViewItemText.displayName = "TreeViewItemText";

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

@@ -6,24 +6,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useTreeViewContext = require('./use-tree-view-context.cjs');
-const useTreeViewDepthContext = require('./use-tree-view-depth-context.cjs');
-const useTreeViewItemContext = require('./use-tree-view-item-context.cjs');
-const useTreeViewItemPropsContext = require('./use-tree-view-item-props-context.cjs');
+const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
 
 const TreeViewItem = react.forwardRef((props, ref) => {
-  const [{ value, disabled }, localProps] = createSplitProps.createSplitProps()(props, [
-    "disabled",
-    "value"
-  ]);
   const treeView = useTreeViewContext.useTreeViewContext();
-  const depth = useTreeViewDepthContext.useTreeViewDepthContext();
-  const itemProps = { value, disabled, depth };
-  const mergedProps = react$1.mergeProps(treeView.getItemProps(itemProps), localProps);
-  const itemState = treeView.getItemState(itemProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewItemPropsContext.TreeViewItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useTreeViewItemContext.TreeViewItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref }) }) });
+  const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+  const mergedProps = react$1.mergeProps(treeView.getItemProps(nodeProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 TreeViewItem.displayName = "TreeViewItem";
 

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

@@ -1,9 +1,8 @@
 import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
-import { UseTreeViewItemPropsContext } from './use-tree-view-item-props-context';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TreeViewItemBaseProps extends UseTreeViewItemPropsContext, PolymorphicProps {
+export interface TreeViewItemBaseProps extends PolymorphicProps {
 }
-export interface TreeViewItemProps extends Assign<HTMLProps<'li'>, TreeViewItemBaseProps> {
+export interface TreeViewItemProps extends Assign<HTMLProps<'div'>, TreeViewItemBaseProps> {
 }
-export declare const TreeViewItem: ForwardRefExoticComponent<TreeViewItemProps & RefAttributes<HTMLLIElement>>;
+export declare const TreeViewItem: ForwardRefExoticComponent<TreeViewItemProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,9 +1,8 @@
 import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
-import { UseTreeViewItemPropsContext } from './use-tree-view-item-props-context';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TreeViewItemBaseProps extends UseTreeViewItemPropsContext, PolymorphicProps {
+export interface TreeViewItemBaseProps extends PolymorphicProps {
 }
-export interface TreeViewItemProps extends Assign<HTMLProps<'li'>, TreeViewItemBaseProps> {
+export interface TreeViewItemProps extends Assign<HTMLProps<'div'>, TreeViewItemBaseProps> {
 }
-export declare const TreeViewItem: ForwardRefExoticComponent<TreeViewItemProps & RefAttributes<HTMLLIElement>>;
+export declare const TreeViewItem: ForwardRefExoticComponent<TreeViewItemProps & RefAttributes<HTMLDivElement>>;

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

@@ -2,24 +2,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 { ark } from '../factory.js';
 import { useTreeViewContext } from './use-tree-view-context.js';
-import { useTreeViewDepthContext } from './use-tree-view-depth-context.js';
-import { TreeViewItemProvider } from './use-tree-view-item-context.js';
-import { TreeViewItemPropsProvider } from './use-tree-view-item-props-context.js';
+import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
 
 const TreeViewItem = forwardRef((props, ref) => {
-  const [{ value, disabled }, localProps] = createSplitProps()(props, [
-    "disabled",
-    "value"
-  ]);
   const treeView = useTreeViewContext();
-  const depth = useTreeViewDepthContext();
-  const itemProps = { value, disabled, depth };
-  const mergedProps = mergeProps(treeView.getItemProps(itemProps), localProps);
-  const itemState = treeView.getItemState(itemProps);
-  return /* @__PURE__ */ jsx(TreeViewItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsx(TreeViewItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref }) }) });
+  const nodeProps = useTreeViewNodePropsContext();
+  const mergedProps = mergeProps(treeView.getItemProps(nodeProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 TreeViewItem.displayName = "TreeViewItem";
 

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

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useTreeViewNodeContext = require('./use-tree-view-node-context.cjs');
+
+const TreeViewNodeContext = (props) => props.children(useTreeViewNodeContext.useTreeViewNodeContext());
+
+exports.TreeViewNodeContext = TreeViewNodeContext;

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

@@ -0,0 +1,6 @@
+import { UseTreeViewNodeContext } from './use-tree-view-node-context';
+import { ReactNode } from 'react';
+export interface TreeViewNodeContextProps {
+    children: (context: UseTreeViewNodeContext) => React.ReactNode;
+}
+export declare const TreeViewNodeContext: (props: TreeViewNodeContextProps) => ReactNode;

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

@@ -0,0 +1,6 @@
+import { UseTreeViewNodeContext } from './use-tree-view-node-context';
+import { ReactNode } from 'react';
+export interface TreeViewNodeContextProps {
+    children: (context: UseTreeViewNodeContext) => React.ReactNode;
+}
+export declare const TreeViewNodeContext: (props: TreeViewNodeContextProps) => ReactNode;

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

@@ -0,0 +1,6 @@
+'use client';
+import { useTreeViewNodeContext } from './use-tree-view-node-context.js';
+
+const TreeViewNodeContext = (props) => props.children(useTreeViewNodeContext());
+
+export { TreeViewNodeContext };

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

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
+
+function TreeViewNodeProvider(props) {
+  const [nodeProps, localProps] = createSplitProps.createSplitProps()(props, ["indexPath", "node"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewNodePropsContext.TreeViewNodePropsProvider, { value: nodeProps, children: localProps.children });
+}
+
+exports.TreeViewNodeProvider = TreeViewNodeProvider;

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

@@ -0,0 +1,8 @@
+import { NodeProps } from '@zag-js/tree-view';
+export interface TreeViewNodeProviderBaseProps<T> extends NodeProps {
+    node: T;
+}
+export interface TreeViewNodeProviderProps<T> extends TreeViewNodeProviderBaseProps<T> {
+    children?: React.ReactNode;
+}
+export declare function TreeViewNodeProvider<T>(props: TreeViewNodeProviderProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { NodeProps } from '@zag-js/tree-view';
+export interface TreeViewNodeProviderBaseProps<T> extends NodeProps {
+    node: T;
+}
+export interface TreeViewNodeProviderProps<T> extends TreeViewNodeProviderBaseProps<T> {
+    children?: React.ReactNode;
+}
+export declare function TreeViewNodeProvider<T>(props: TreeViewNodeProviderProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { TreeViewNodePropsProvider } from './use-tree-view-node-props-context.js';
+
+function TreeViewNodeProvider(props) {
+  const [nodeProps, localProps] = createSplitProps()(props, ["indexPath", "node"]);
+  return /* @__PURE__ */ jsx(TreeViewNodePropsProvider, { value: nodeProps, children: localProps.children });
+}
+
+export { TreeViewNodeProvider };

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

@@ -7,18 +7,19 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
+const renderStrategy = require('../../utils/render-strategy.cjs');
 const factory = require('../factory.cjs');
 const useTreeViewContext = require('./use-tree-view-context.cjs');
 
-const TreeViewRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: treeView }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(treeView.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewContext.TreeViewProvider, { value: treeView, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
-TreeViewRootProvider.displayName = "TreeViewRootProvider";
+const TreeViewImpl = (props, ref) => {
+  const [renderStrategyProps, treeViewProps] = renderStrategy.splitRenderStrategyProps(props);
+  const [{ value: treeView }, localProps] = createSplitProps.createSplitProps()(
+    treeViewProps,
+    ["value"]
+  );
+  const mergedProps = react$1.mergeProps(treeView.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewContext.TreeViewProvider, { value: treeView, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+};
+const TreeViewRootProvider = react.forwardRef(TreeViewImpl);
 
 exports.TreeViewRootProvider = TreeViewRootProvider;

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

@@ -1,12 +1,14 @@
+import { RenderStrategyProps } from '../../utils/render-strategy';
+import { TreeNode } from '../collection';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseTreeViewReturn } from './use-tree-view';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-interface RootProviderProps {
-    value: UseTreeViewReturn;
+interface RootProviderProps<T extends TreeNode> {
+    value: UseTreeViewReturn<T>;
 }
-export interface TreeViewRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
+export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends RootProviderProps<T>, RenderStrategyProps, PolymorphicProps {
 }
-export interface TreeViewRootProviderProps extends HTMLProps<'div'>, TreeViewRootProviderBaseProps {
+export interface TreeViewRootProviderProps<T extends TreeNode> extends HTMLProps<'div'>, TreeViewRootProviderBaseProps<T> {
 }
-export declare const TreeViewRootProvider: ForwardRefExoticComponent<TreeViewRootProviderProps & RefAttributes<HTMLDivElement>>;
+export type TreeViewComponent = <T extends TreeNode>(props: TreeViewRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const TreeViewRootProvider: TreeViewComponent;
 export {};

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

@@ -1,12 +1,14 @@
+import { RenderStrategyProps } from '../../utils/render-strategy';
+import { TreeNode } from '../collection';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseTreeViewReturn } from './use-tree-view';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-interface RootProviderProps {
-    value: UseTreeViewReturn;
+interface RootProviderProps<T extends TreeNode> {
+    value: UseTreeViewReturn<T>;
 }
-export interface TreeViewRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
+export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends RootProviderProps<T>, RenderStrategyProps, PolymorphicProps {
 }
-export interface TreeViewRootProviderProps extends HTMLProps<'div'>, TreeViewRootProviderBaseProps {
+export interface TreeViewRootProviderProps<T extends TreeNode> extends HTMLProps<'div'>, TreeViewRootProviderBaseProps<T> {
 }
-export declare const TreeViewRootProvider: ForwardRefExoticComponent<TreeViewRootProviderProps & RefAttributes<HTMLDivElement>>;
+export type TreeViewComponent = <T extends TreeNode>(props: TreeViewRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const TreeViewRootProvider: TreeViewComponent;
 export {};

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

@@ -3,18 +3,19 @@ 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 { TreeViewProvider } from './use-tree-view-context.js';
 
-const TreeViewRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: treeView }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(treeView.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(TreeViewProvider, { value: treeView, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
-TreeViewRootProvider.displayName = "TreeViewRootProvider";
+const TreeViewImpl = (props, ref) => {
+  const [renderStrategyProps, treeViewProps] = splitRenderStrategyProps(props);
+  const [{ value: treeView }, localProps] = createSplitProps()(
+    treeViewProps,
+    ["value"]
+  );
+  const mergedProps = mergeProps(treeView.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(TreeViewProvider, { value: treeView, children: /* @__PURE__ */ jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+};
+const TreeViewRootProvider = forwardRef(TreeViewImpl);
 
 export { TreeViewRootProvider };

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

@@ -7,12 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
+const renderStrategy = require('../../utils/render-strategy.cjs');
 const factory = require('../factory.cjs');
 const useTreeView = require('./use-tree-view.cjs');
 const useTreeViewContext = require('./use-tree-view-context.cjs');
 
-const TreeViewRoot = react.forwardRef((props, ref) => {
-  const [useTreeViewProps, localProps] = createSplitProps.createSplitProps()(props, [
+const TreeViewImpl = (props, ref) => {
+  const [renderStrategyProps, treeViewProps] = renderStrategy.splitRenderStrategyProps(props);
+  const [useTreeViewProps, localProps] = createSplitProps.createSplitProps()(treeViewProps, [
+    "collection",
     "defaultExpandedValue",
     "defaultSelectedValue",
     "expandedValue",
@@ -29,8 +32,8 @@ const TreeViewRoot = react.forwardRef((props, ref) => {
   ]);
   const treeView = useTreeView.useTreeView(useTreeViewProps);
   const mergedProps = react$1.mergeProps(treeView.getRootProps(), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewContext.TreeViewProvider, { value: treeView, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-});
-TreeViewRoot.displayName = "TreeViewRoot";
+  return /* @__PURE__ */ jsxRuntime.jsx(useTreeViewContext.TreeViewProvider, { value: treeView, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+};
+const TreeViewRoot = react.forwardRef(TreeViewImpl);
 
 exports.TreeViewRoot = TreeViewRoot;

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

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