@ark-ui/react 4.2.0 → 4.3.0

package/dist/components/collection.cjs

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

package/dist/components/collection.d.cts

@@ -1,3 +1,6 @@
-import { CollectionOptions, ListCollection } from '@zag-js/collection';
+import { CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions } from '@zag-js/collection';
 export type { CollectionItem, ListCollection } from '@zag-js/collection';
 export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
+export type { TreeCollection, TreeNode } from '@zag-js/collection';
+export declare const createTreeCollection: <T extends unknown>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
+export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;

package/dist/components/collection.d.ts

@@ -1,3 +1,6 @@
-import { CollectionOptions, ListCollection } from '@zag-js/collection';
+import { CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions } from '@zag-js/collection';
 export type { CollectionItem, ListCollection } from '@zag-js/collection';
 export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
+export type { TreeCollection, TreeNode } from '@zag-js/collection';
+export declare const createTreeCollection: <T extends unknown>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
+export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;

package/dist/components/collection.js

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

package/dist/components/combobox/combobox-root.cjs

@@ -27,7 +27,6 @@ const ComboboxImpl = (props, ref) => {
     "disabled",
     "disableLayer",
     "form",
-    "getSelectionValue",
     "highlightedValue",
     "id",
     "ids",

package/dist/components/combobox/combobox-root.js

@@ -23,7 +23,6 @@ const ComboboxImpl = (props, ref) => {
     "disabled",
     "disableLayer",
     "form",
-    "getSelectionValue",
     "highlightedValue",
     "id",
     "ids",

package/dist/components/field/field-textarea.cjs

@@ -4,15 +4,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const autoResize = require('@zag-js/auto-resize');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const useFieldContext = require('./use-field-context.cjs');
 
 const FieldTextarea = react.forwardRef((props, ref) => {
+  const { autoresize, ...textareaProps } = props;
+  const textareaRef = react.useRef(null);
   const field = useFieldContext.useFieldContext();
-  const mergedProps = react$1.mergeProps(field?.getTextareaProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.textarea, { ...mergedProps, ref });
+  const mergedProps = react$1.mergeProps(
+    field?.getTextareaProps(),
+    { style: { resize: autoresize ? "none" : void 0 } },
+    textareaProps
+  );
+  react.useEffect(() => {
+    if (!autoresize) return;
+    return autoResize.autoresizeTextarea(textareaRef.current);
+  }, [autoresize]);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.textarea, { ...mergedProps, ref: composeRefs.composeRefs(ref, textareaRef) });
 });
 FieldTextarea.displayName = "FieldTextarea";
 

package/dist/components/field/field-textarea.d.cts

@@ -1,6 +1,11 @@
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface FieldTextareaBaseProps extends PolymorphicProps {
+    /**
+     * Whether the textarea should autoresize
+     * @default false
+     */
+    autoresize?: boolean;
 }
 export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {
 }

package/dist/components/field/field-textarea.d.ts

@@ -1,6 +1,11 @@
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface FieldTextareaBaseProps extends PolymorphicProps {
+    /**
+     * Whether the textarea should autoresize
+     * @default false
+     */
+    autoresize?: boolean;
 }
 export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {
 }

package/dist/components/field/field-textarea.js

@@ -1,14 +1,26 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { autoresizeTextarea } from '@zag-js/auto-resize';
 import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { useFieldContext } from './use-field-context.js';
 
 const FieldTextarea = forwardRef((props, ref) => {
+  const { autoresize, ...textareaProps } = props;
+  const textareaRef = useRef(null);
   const field = useFieldContext();
-  const mergedProps = mergeProps(field?.getTextareaProps(), props);
-  return /* @__PURE__ */ jsx(ark.textarea, { ...mergedProps, ref });
+  const mergedProps = mergeProps(
+    field?.getTextareaProps(),
+    { style: { resize: autoresize ? "none" : void 0 } },
+    textareaProps
+  );
+  useEffect(() => {
+    if (!autoresize) return;
+    return autoresizeTextarea(textareaRef.current);
+  }, [autoresize]);
+  return /* @__PURE__ */ jsx(ark.textarea, { ...mergedProps, ref: composeRefs(ref, textareaRef) });
 });
 FieldTextarea.displayName = "FieldTextarea";
 

package/dist/components/index.cjs

@@ -567,21 +567,20 @@ const tooltip$1 = require('./tooltip/tooltip.cjs');
 const treeViewBranch = require('./tree-view/tree-view-branch.cjs');
 const treeViewBranchContent = require('./tree-view/tree-view-branch-content.cjs');
 const treeViewBranchControl = require('./tree-view/tree-view-branch-control.cjs');
+const treeViewBranchIndentGuide = require('./tree-view/tree-view-branch-indent-guide.cjs');
 const treeViewBranchIndicator = require('./tree-view/tree-view-branch-indicator.cjs');
 const treeViewBranchText = require('./tree-view/tree-view-branch-text.cjs');
 const treeViewBranchTrigger = require('./tree-view/tree-view-branch-trigger.cjs');
-const treeViewContext = require('./tree-view/tree-view-context.cjs');
 const treeViewItem = require('./tree-view/tree-view-item.cjs');
-const treeViewItemContext = require('./tree-view/tree-view-item-context.cjs');
 const treeViewItemIndicator = require('./tree-view/tree-view-item-indicator.cjs');
 const treeViewItemText = require('./tree-view/tree-view-item-text.cjs');
 const treeViewLabel = require('./tree-view/tree-view-label.cjs');
+const treeViewNodeContext = require('./tree-view/tree-view-node-context.cjs');
+const treeViewNodeProvider = require('./tree-view/tree-view-node-provider.cjs');
 const treeViewRoot = require('./tree-view/tree-view-root.cjs');
 const treeViewRootProvider = require('./tree-view/tree-view-root-provider.cjs');
 const treeViewTree = require('./tree-view/tree-view-tree.cjs');
 const useTreeView = require('./tree-view/use-tree-view.cjs');
-const useTreeViewContext = require('./tree-view/use-tree-view-context.cjs');
-const useTreeViewItemContext = require('./tree-view/use-tree-view-item-context.cjs');
 const treeView$1 = require('./tree-view/tree-view.cjs');
 const accordion = require('@zag-js/accordion');
 const avatar = require('@zag-js/avatar');
@@ -724,6 +723,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;
@@ -1193,21 +1193,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;
 Object.defineProperty(exports, "accordionAnatomy", {
 	enumerable: true,

package/dist/components/index.js

@@ -108,7 +108,7 @@ export { useColorPicker } from './color-picker/use-color-picker.js';
 export { useColorPickerContext } from './color-picker/use-color-picker-context.js';
 import * as colorPicker from './color-picker/color-picker.js';
 export { colorPicker as ColorPicker };
-export { createListCollection } from './collection.js';
+export { createListCollection, createTreeCollection } from './collection.js';
 export { ComboboxClearTrigger } from './combobox/combobox-clear-trigger.js';
 export { ComboboxContent } from './combobox/combobox-content.js';
 export { ComboboxContext } from './combobox/combobox-context.js';
@@ -603,21 +603,20 @@ export { tooltip as Tooltip };
 export { TreeViewBranch } from './tree-view/tree-view-branch.js';
 export { TreeViewBranchContent } from './tree-view/tree-view-branch-content.js';
 export { TreeViewBranchControl } from './tree-view/tree-view-branch-control.js';
+export { TreeViewBranchIndentGuide } from './tree-view/tree-view-branch-indent-guide.js';
 export { TreeViewBranchIndicator } from './tree-view/tree-view-branch-indicator.js';
 export { TreeViewBranchText } from './tree-view/tree-view-branch-text.js';
 export { TreeViewBranchTrigger } from './tree-view/tree-view-branch-trigger.js';
-export { TreeViewContext } from './tree-view/tree-view-context.js';
 export { TreeViewItem } from './tree-view/tree-view-item.js';
-export { TreeViewItemContext } from './tree-view/tree-view-item-context.js';
 export { TreeViewItemIndicator } from './tree-view/tree-view-item-indicator.js';
 export { TreeViewItemText } from './tree-view/tree-view-item-text.js';
 export { TreeViewLabel } from './tree-view/tree-view-label.js';
+export { TreeViewNodeContext } from './tree-view/tree-view-node-context.js';
+export { TreeViewNodeProvider } from './tree-view/tree-view-node-provider.js';
 export { TreeViewRoot } from './tree-view/tree-view-root.js';
 export { TreeViewRootProvider } from './tree-view/tree-view-root-provider.js';
 export { TreeViewTree } from './tree-view/tree-view-tree.js';
 export { useTreeView } from './tree-view/use-tree-view.js';
-export { useTreeViewContext } from './tree-view/use-tree-view-context.js';
-export { useTreeViewItemContext } from './tree-view/use-tree-view-item-context.js';
 import * as treeView from './tree-view/tree-view.js';
 export { treeView as TreeView };
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/dist/components/toast/create-toaster.d.cts

@@ -2,7 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { ReactNode } from 'react';
 import { Optional } from '../../types';
 import * as toast from '@zag-js/toast';
-export interface CreateToasterProps extends Optional<Partial<toast.GroupMachineContext<ReactNode>>, 'id'> {
+export interface CreateToasterProps extends Optional<Partial<toast.GroupMachineContext>, 'id'> {
     placement: toast.Placement;
 }
 export interface CreateToasterReturn extends toast.GroupApi<PropTypes, ReactNode> {

package/dist/components/toast/create-toaster.d.ts

@@ -2,7 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { ReactNode } from 'react';
 import { Optional } from '../../types';
 import * as toast from '@zag-js/toast';
-export interface CreateToasterProps extends Optional<Partial<toast.GroupMachineContext<ReactNode>>, 'id'> {
+export interface CreateToasterProps extends Optional<Partial<toast.GroupMachineContext>, 'id'> {
     placement: toast.Placement;
 }
 export interface CreateToasterReturn extends toast.GroupApi<PropTypes, ReactNode> {

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

@@ -2,47 +2,47 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const collection = require('../collection.cjs');
 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');
 const useTreeView = require('./use-tree-view.cjs');
-const useTreeViewContext = require('./use-tree-view-context.cjs');
-const useTreeViewItemContext = require('./use-tree-view-item-context.cjs');
 const treeView$1 = require('./tree-view.cjs');
 const treeView = require('@zag-js/tree-view');
 
 
 
+exports.createTreeCollection = collection.createTreeCollection;
 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;
 Object.defineProperty(exports, "treeViewAnatomy", {
   enumerable: true,

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

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

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

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

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

@@ -1,21 +1,21 @@
+export { createTreeCollection } from '../collection.js';
 export { TreeViewBranch } from './tree-view-branch.js';
 export { TreeViewBranchContent } from './tree-view-branch-content.js';
 export { TreeViewBranchControl } from './tree-view-branch-control.js';
+export { TreeViewBranchIndentGuide } from './tree-view-branch-indent-guide.js';
 export { TreeViewBranchIndicator } from './tree-view-branch-indicator.js';
 export { TreeViewBranchText } from './tree-view-branch-text.js';
 export { TreeViewBranchTrigger } from './tree-view-branch-trigger.js';
-export { TreeViewContext } from './tree-view-context.js';
 export { TreeViewItem } from './tree-view-item.js';
-export { TreeViewItemContext } from './tree-view-item-context.js';
 export { TreeViewItemIndicator } from './tree-view-item-indicator.js';
 export { TreeViewItemText } from './tree-view-item-text.js';
 export { TreeViewLabel } from './tree-view-label.js';
+export { TreeViewNodeContext } from './tree-view-node-context.js';
+export { TreeViewNodeProvider } from './tree-view-node-provider.js';
 export { TreeViewRoot } from './tree-view-root.js';
 export { TreeViewRootProvider } from './tree-view-root-provider.js';
 export { TreeViewTree } from './tree-view-tree.js';
 export { useTreeView } from './use-tree-view.js';
-export { useTreeViewContext } from './use-tree-view-context.js';
-export { useTreeViewItemContext } from './use-tree-view-item-context.js';
 import * as treeView from './tree-view.js';
 export { treeView as TreeView };
 export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';

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

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

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

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

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

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

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 });
   }
 );