@ark-ui/react 4.2.0 → 4.4.0

package/README.md

@@ -6,7 +6,7 @@
 
 # Welcome to Ark UI
 
-Ark UI is a headless, open-source UI library with over 30+ components designed for building
+Ark UI is a headless, open-source UI library with over 45+ components designed for building
 reusable, scalable Design Systems. It supports a wide range of JavaScript frameworks, offering
 dedciated packages for each supported framework.
 

package/dist/components/anatomy.d.cts

@@ -0,0 +1 @@
+export * from '@zag-js/anatomy';

package/dist/components/anatomy.d.ts

@@ -0,0 +1 @@
+export * from '@zag-js/anatomy';

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/combobox/use-combobox.cjs

@@ -58,7 +58,7 @@ const useCombobox = (props) => {
     return {
       ...restProps,
       value: props.value,
-      onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+      onValueChange: useEvent.useEvent(props.onValueChange),
       onInputValueChange: useEvent.useEvent(props.onInputValueChange, { sync: true }),
       onHighlightChange: useEvent.useEvent(props.onHighlightChange),
       onOpenChange: useEvent.useEvent(props.onOpenChange)

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

@@ -35,7 +35,7 @@ const useCombobox = (props) => {
     return {
       ...restProps,
       value: props.value,
-      onValueChange: useEvent(props.onValueChange, { sync: true }),
+      onValueChange: useEvent(props.onValueChange),
       onInputValueChange: useEvent(props.onInputValueChange, { sync: true }),
       onHighlightChange: useEvent(props.onHighlightChange),
       onOpenChange: useEvent(props.onOpenChange)

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

@@ -517,7 +517,7 @@ const timePickerSpacer = require('./time-picker/time-picker-spacer.cjs');
 const timePickerTrigger = require('./time-picker/time-picker-trigger.cjs');
 const useTimePicker = require('./time-picker/use-time-picker.cjs');
 const useTimePickerContext = require('./time-picker/use-time-picker-context.cjs');
-const timePicker = require('./time-picker/time-picker.cjs');
+const timePicker$1 = require('./time-picker/time-picker.cjs');
 const timerActionTrigger = require('./timer/timer-action-trigger.cjs');
 const timerContext = require('./timer/timer-context.cjs');
 const timerItem = require('./timer/timer-item.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');
@@ -609,6 +608,7 @@ const steps = require('@zag-js/steps');
 const zagSwitch = require('@zag-js/switch');
 const tabs = require('@zag-js/tabs');
 const tagsInput = require('@zag-js/tags-input');
+const timePicker = require('@zag-js/time-picker');
 const timer = require('@zag-js/timer');
 const toast = require('@zag-js/toast');
 const toggleGroup = require('@zag-js/toggle-group');
@@ -724,6 +724,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;
@@ -1143,7 +1144,7 @@ exports.TimePickerSpacer = timePickerSpacer.TimePickerSpacer;
 exports.TimePickerTrigger = timePickerTrigger.TimePickerTrigger;
 exports.useTimePicker = useTimePicker.useTimePicker;
 exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
-exports.TimePicker = timePicker;
+exports.TimePicker = timePicker$1;
 exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
 exports.TimerContext = timerContext.TimerContext;
 exports.TimerItem = timerItem.TimerItem;
@@ -1193,21 +1194,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,
@@ -1313,6 +1313,10 @@ Object.defineProperty(exports, "tagsInputAnatomy", {
 	enumerable: true,
 	get: () => tagsInput.anatomy
 });
+Object.defineProperty(exports, "timePickerAnatomy", {
+	enumerable: true,
+	get: () => timePicker.anatomy
+});
 Object.defineProperty(exports, "timerAnatomy", {
 	enumerable: true,
 	get: () => timer.anatomy

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';
@@ -646,6 +645,7 @@ export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
+export { anatomy as timePickerAnatomy } from '@zag-js/time-picker';
 export { anatomy as timerAnatomy } from '@zag-js/timer';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';

package/dist/components/time-picker/index.cjs

@@ -18,7 +18,8 @@ const timePickerSpacer = require('./time-picker-spacer.cjs');
 const timePickerTrigger = require('./time-picker-trigger.cjs');
 const useTimePicker = require('./use-time-picker.cjs');
 const useTimePickerContext = require('./use-time-picker-context.cjs');
-const timePicker = require('./time-picker.cjs');
+const timePicker$1 = require('./time-picker.cjs');
+const timePicker = require('@zag-js/time-picker');
 
 
 
@@ -41,4 +42,8 @@ exports.TimePickerSpacer = timePickerSpacer.TimePickerSpacer;
 exports.TimePickerTrigger = timePickerTrigger.TimePickerTrigger;
 exports.useTimePicker = useTimePicker.useTimePicker;
 exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
-exports.TimePicker = timePicker;
+exports.TimePicker = timePicker$1;
+Object.defineProperty(exports, "timePickerAnatomy", {
+  enumerable: true,
+  get: () => timePicker.anatomy
+});

package/dist/components/time-picker/index.d.cts

@@ -13,6 +13,7 @@ export { TimePickerRoot, type TimePickerRootBaseProps, type TimePickerRootProps,
 export { TimePickerRootProvider, type TimePickerRootProviderBaseProps, type TimePickerRootProviderProps, } from './time-picker-root-provider';
 export { TimePickerSpacer, type TimePickerSpacerBaseProps, type TimePickerSpacerProps, } from './time-picker-spacer';
 export { TimePickerTrigger, type TimePickerTriggerBaseProps, type TimePickerTriggerProps, } from './time-picker-trigger';
+export { timePickerAnatomy } from './time-picker.anatomy';
 export { useTimePicker, type UseTimePickerProps, type UseTimePickerReturn } from './use-time-picker';
 export { useTimePickerContext, type UseTimePickerContext } from './use-time-picker-context';
 export * as TimePicker from './time-picker';

package/dist/components/time-picker/index.d.ts

@@ -13,6 +13,7 @@ export { TimePickerRoot, type TimePickerRootBaseProps, type TimePickerRootProps,
 export { TimePickerRootProvider, type TimePickerRootProviderBaseProps, type TimePickerRootProviderProps, } from './time-picker-root-provider';
 export { TimePickerSpacer, type TimePickerSpacerBaseProps, type TimePickerSpacerProps, } from './time-picker-spacer';
 export { TimePickerTrigger, type TimePickerTriggerBaseProps, type TimePickerTriggerProps, } from './time-picker-trigger';
+export { timePickerAnatomy } from './time-picker.anatomy';
 export { useTimePicker, type UseTimePickerProps, type UseTimePickerReturn } from './use-time-picker';
 export { useTimePickerContext, type UseTimePickerContext } from './use-time-picker-context';
 export * as TimePicker from './time-picker';

package/dist/components/time-picker/index.js

@@ -16,3 +16,4 @@ export { useTimePicker } from './use-time-picker.js';
 export { useTimePickerContext } from './use-time-picker-context.js';
 import * as timePicker from './time-picker.js';
 export { timePicker as TimePicker };
+export { anatomy as timePickerAnatomy } from '@zag-js/time-picker';

package/dist/components/time-picker/time-picker.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as timePickerAnatomy } from '@zag-js/time-picker';

package/dist/components/time-picker/time-picker.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as timePickerAnatomy } from '@zag-js/time-picker';

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