@ark-ui/react 4.1.2 → 4.3.0

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

@@ -2,16 +2,20 @@
 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 { createSplitProps } from '../../utils/create-split-props.js';
+import { CollapsibleContent } from '../collapsible/collapsible-content.js';
 import { useTreeViewContext } from './use-tree-view-context.js';
+import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
 
+const splitVisibilityProps = createSplitProps();
 const TreeViewBranchContent = forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext();
-    const branchContext = useTreeViewBranchContext();
-    const mergedProps = mergeProps(treeView.getBranchContentProps(branchContext), props);
-    return /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref });
+    const nodeProps = useTreeViewNodePropsContext();
+    const contentProps = treeView.getBranchContentProps(nodeProps);
+    const [, branchContentProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]);
+    const mergedProps = mergeProps(branchContentProps, props);
+    return /* @__PURE__ */ jsx(CollapsibleContent, { ref, ...mergedProps });
   }
 );
 TreeViewBranchContent.displayName = "TreeViewBranchContent";

package/dist/components/tree-view/tree-view-branch-control.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 TreeViewBranchControl = react.forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext.useTreeViewContext();
-    const branchContext = useTreeViewBranchContext.useTreeViewBranchContext();
-    const mergedProps = react$1.mergeProps(treeView.getBranchControlProps(branchContext), props);
+    const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+    const mergedProps = react$1.mergeProps(treeView.getBranchControlProps(nodeProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/dist/components/tree-view/tree-view-branch-control.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 TreeViewBranchControl = forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext();
-    const branchContext = useTreeViewBranchContext();
-    const mergedProps = mergeProps(treeView.getBranchControlProps(branchContext), props);
+    const nodeProps = useTreeViewNodePropsContext();
+    const mergedProps = mergeProps(treeView.getBranchControlProps(nodeProps), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+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 factory = require('../factory.cjs');
+const useTreeViewContext = require('./use-tree-view-context.cjs');
+const useTreeViewNodePropsContext = require('./use-tree-view-node-props-context.cjs');
+
+const TreeViewBranchIndentGuide = react.forwardRef(
+  (props, ref) => {
+    const treeView = useTreeViewContext.useTreeViewContext();
+    const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+    const mergedProps = react$1.mergeProps(treeView.getBranchIndentGuideProps(nodeProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+TreeViewBranchIndentGuide.displayName = "TreeViewBranchIndentGuide";
+
+exports.TreeViewBranchIndentGuide = TreeViewBranchIndentGuide;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface TreeViewBranchIndentGuideBaseProps extends PolymorphicProps {
+}
+export interface TreeViewBranchIndentGuideProps extends HTMLProps<'div'>, TreeViewBranchIndentGuideBaseProps {
+}
+export declare const TreeViewBranchIndentGuide: ForwardRefExoticComponent<TreeViewBranchIndentGuideProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface TreeViewBranchIndentGuideBaseProps extends PolymorphicProps {
+}
+export interface TreeViewBranchIndentGuideProps extends HTMLProps<'div'>, TreeViewBranchIndentGuideBaseProps {
+}
+export declare const TreeViewBranchIndentGuide: ForwardRefExoticComponent<TreeViewBranchIndentGuideProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useTreeViewContext } from './use-tree-view-context.js';
+import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.js';
+
+const TreeViewBranchIndentGuide = forwardRef(
+  (props, ref) => {
+    const treeView = useTreeViewContext();
+    const nodeProps = useTreeViewNodePropsContext();
+    const mergedProps = mergeProps(treeView.getBranchIndentGuideProps(nodeProps), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+TreeViewBranchIndentGuide.displayName = "TreeViewBranchIndentGuide";
+
+export { TreeViewBranchIndentGuide };

package/dist/components/tree-view/tree-view-branch-indicator.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 TreeViewBranchIndicator = react.forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext.useTreeViewContext();
-    const branchContext = useTreeViewBranchContext.useTreeViewBranchContext();
-    const mergedProps = react$1.mergeProps(treeView.getBranchIndicatorProps(branchContext), props);
+    const nodeProps = useTreeViewNodePropsContext.useTreeViewNodePropsContext();
+    const mergedProps = react$1.mergeProps(treeView.getBranchIndicatorProps(nodeProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/dist/components/tree-view/tree-view-branch-indicator.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 TreeViewBranchIndicator = forwardRef(
   (props, ref) => {
     const treeView = useTreeViewContext();
-    const branchContext = useTreeViewBranchContext();
-    const mergedProps = mergeProps(treeView.getBranchIndicatorProps(branchContext), props);
+    const nodeProps = useTreeViewNodePropsContext();
+    const mergedProps = mergeProps(treeView.getBranchIndicatorProps(nodeProps), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

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;