@ark-ui/solid 2.0.1 → 2.1.1

package/esm/index.js

@@ -1,5 +1,5 @@
 import { createComponent, Dynamic, mergeProps, memo, use, template, spread, insert, effect } from 'solid-js/web';
-import { createContext as createContext$1, useContext, splitProps, createSignal, createMemo, createEffect, Show, createUniqueId, Index, children, onCleanup } from 'solid-js';
+import { createContext as createContext$1, useContext, splitProps, createSignal, createMemo, createEffect, Show, createUniqueId, children, Index, onCleanup } from 'solid-js';
 import { useMachine, normalizeProps, mergeProps as mergeProps$1, useActor } from '@zag-js/solid';
 import * as presence from '@zag-js/presence';
 import * as accordion$1 from '@zag-js/accordion';
@@ -7,6 +7,7 @@ import * as avatar$1 from '@zag-js/avatar';
 import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy, treeViewAnatomy } from '@ark-ui/anatomy';
 import * as carousel$1 from '@zag-js/carousel';
 import * as checkbox$1 from '@zag-js/checkbox';
+import * as clipboard$1 from '@zag-js/clipboard';
 import * as colorPicker$1 from '@zag-js/color-picker';
 import * as combobox$1 from '@zag-js/combobox';
 import * as datePicker$1 from '@zag-js/date-picker';
@@ -14,6 +15,7 @@ import * as dialog$1 from '@zag-js/dialog';
 import * as editable$1 from '@zag-js/editable';
 import * as fileUpload$1 from '@zag-js/file-upload';
 import * as hoverCard$1 from '@zag-js/hover-card';
+import { trackLocale, isRTL } from '@zag-js/i18n-utils';
 import * as menu$1 from '@zag-js/menu';
 import * as numberInput$1 from '@zag-js/number-input';
 import * as pagination$1 from '@zag-js/pagination';
@@ -217,7 +219,7 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
   strict: false
 });
 
-const _tmpl$$c = /*#__PURE__*/template(`<span hidden>`);
+var _tmpl$$c = /*#__PURE__*/template(`<span hidden>`);
 const Environment = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -228,8 +230,8 @@ const Environment = props => {
     },
     get children() {
       return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
-        const _el$ = _tmpl$$c();
-        const _ref$ = spanRef;
+        var _el$ = _tmpl$$c();
+        var _ref$ = spanRef;
         typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
         return _el$;
       })())];
@@ -425,12 +427,12 @@ const [CheckboxProvider, useCheckboxContext] = createContext({
   providerName: '<CheckboxProvider />'
 });
 
-const _tmpl$$b = /*#__PURE__*/template(`<input>`);
+var _tmpl$$b = /*#__PURE__*/template(`<input>`);
 const CheckboxControl = props => {
   const api = useCheckboxContext();
   const mergedProps = mergeProps$1(() => api().controlProps, props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$b();
+    var _el$ = _tmpl$$b();
     spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -485,6 +487,98 @@ var checkbox = /*#__PURE__*/Object.freeze({
   Root: CheckboxRoot
 });
 
+const [ClipboardProvider, useClipboardContext] = createContext({
+  hookName: 'useClipboardContext',
+  providerName: '<ClipboardProvider />'
+});
+
+const ClipboardControl = props => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ClipboardIndicator = props => {
+  const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(api().getIndicatorProps({
+    copied: api().isCopied
+  }), localProps);
+  const getChildren = children(() => localProps.children);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return api().isCopied;
+        },
+        get fallback() {
+          return getChildren();
+        },
+        get children() {
+          return indicatorProps.copied;
+        }
+      });
+    }
+  }));
+};
+
+const ClipboardInput = props => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const ClipboardLabel = props => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useClipboard = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(clipboard$1.machine(context), {
+    context
+  });
+  return createMemo(() => clipboard$1.connect(state, send, normalizeProps));
+};
+
+const ClipboardRoot = props => {
+  const [useClipboardProps, localProps] = createSplitProps()(props, ['getRootNode', 'id', 'ids', 'value', 'timeout', 'onCopyStatusChange']);
+  const api = useClipboard(useClipboardProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(ClipboardProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const ClipboardTrigger = props => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var clipboard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Control: ClipboardControl,
+  Indicator: ClipboardIndicator,
+  Input: ClipboardInput,
+  Label: ClipboardLabel,
+  Root: ClipboardRoot,
+  Trigger: ClipboardTrigger
+});
+
 const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
   hookName: 'useColorPickerAreaContext',
   providerName: '<ColorPickerAreaProvider />'
@@ -637,7 +731,8 @@ const useColorPicker = props => {
   const context = mergeProps$1(() => ({
     id: createUniqueId(),
     getRootNode,
-    value: local.value ? colorPicker$1.parse(local.value) : undefined
+    value: local.value ? colorPicker$1.parse(local.value) : undefined,
+    'open.controlled': props.open !== undefined
   }), rest);
   const [state, send] = useMachine(colorPicker$1.machine(context), {
     context
@@ -645,7 +740,7 @@ const useColorPicker = props => {
   return createMemo(() => colorPicker$1.connect(state, send, normalizeProps));
 };
 
-const _tmpl$$a = /*#__PURE__*/template(`<input>`);
+var _tmpl$$a = /*#__PURE__*/template(`<input>`);
 const ColorPickerRoot = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
   const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'dir', 'disabled', 'format', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
@@ -668,7 +763,7 @@ const ColorPickerRoot = props => {
           }));
         }
       }), (() => {
-        const _el$ = _tmpl$$a();
+        var _el$ = _tmpl$$a();
         spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -988,8 +1083,9 @@ const DatePickerControl = props => {
 };
 
 const DatePickerInput = props => {
+  const [inputProps, localProps] = createSplitProps()(props, ['index']);
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().getInputProps(inputProps), localProps);
   return createComponent(ark.input, mergedProps);
 };
 
@@ -999,14 +1095,14 @@ const DatePickerLabel = props => {
   return createComponent(ark.label, mergedProps);
 };
 
-const _tmpl$$9 = /*#__PURE__*/template(`<option>`);
+var _tmpl$$9 = /*#__PURE__*/template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = mergeProps$1(() => api().monthSelectProps, props);
   return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        const _el$ = _tmpl$$9();
+        var _el$ = _tmpl$$9();
         insert(_el$, () => month.label);
         effect(() => _el$.value = month.value);
         return _el$;
@@ -1041,6 +1137,13 @@ const DatePickerPositioner = props => {
   });
 };
 
+const DatePickerPresetTrigger = props => {
+  const [presetTriggerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
 const DatePickerPrevTrigger = props => {
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
@@ -1065,7 +1168,8 @@ const useDatePicker = props => {
     id: createUniqueId(),
     getRootNode,
     focusedValue: local.focusedValue ? datePicker$1.parse(local.focusedValue) : undefined,
-    value: local.value ? datePicker$1.parse(local.value) : undefined
+    value: local.value ? datePicker$1.parse(local.value) : undefined,
+    'open.controlled': props.open !== undefined
   }), rest);
   const [state, send] = useMachine(datePicker$1.machine(context), {
     context
@@ -1230,7 +1334,7 @@ const DatePickerViewTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
-const _tmpl$$8 = /*#__PURE__*/template(`<option>`);
+var _tmpl$$8 = /*#__PURE__*/template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = mergeProps$1(() => api().yearSelectProps, props);
@@ -1240,7 +1344,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        const _el$ = _tmpl$$8();
+        var _el$ = _tmpl$$8();
         _el$.value = year;
         insert(_el$, year);
         return _el$;
@@ -1266,6 +1370,7 @@ var datePicker = /*#__PURE__*/Object.freeze({
   MonthSelect: DatePickerMonthSelect,
   NextTrigger: DatePickerNextTrigger,
   Positioner: DatePickerPositioner,
+  PresetTrigger: DatePickerPresetTrigger,
   PrevTrigger: DatePickerPrevTrigger,
   RangeText: DatePickerRangeText,
   Root: DatePickerRoot,
@@ -1328,7 +1433,7 @@ const DialogContent = props => {
 const DialogDescription = props => {
   const dialog = useDialogContext();
   const mergedProps = mergeProps$1(() => dialog().descriptionProps, props);
-  return createComponent(ark.p, mergedProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 const DialogPositioner = props => {
@@ -1349,7 +1454,8 @@ const useDialog = props => {
   const getRootNode = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = useMachine(dialog$1.machine(context), {
     context
@@ -1510,12 +1616,12 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
   providerName: '<FileUploadProvider />'
 });
 
-const _tmpl$$7 = /*#__PURE__*/template(`<input>`);
+var _tmpl$$7 = /*#__PURE__*/template(`<input>`);
 const FileUploadDropzone = props => {
   const api = useFileUploadContext();
   const mergedProps = mergeProps$1(() => api().dropzoneProps, props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$7();
+    var _el$ = _tmpl$$7();
     spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -1710,7 +1816,8 @@ const useHoverCard = props => {
   const getRootNode = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = useMachine(hoverCard$1.machine(context), {
     context
@@ -1755,6 +1862,42 @@ var hoverCard = /*#__PURE__*/Object.freeze({
   Trigger: HoverCardTrigger
 });
 
+const [LocaleContextProvider, useLocaleContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false,
+  defaultValue: () => ({
+    dir: 'ltr',
+    locale: 'en-US'
+  })
+});
+
+const LocaleProvider = props => {
+  const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
+  const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+  const getRootNode = useEnvironmentContext();
+  createEffect(() => {
+    const cleanup = trackLocale({
+      locale: localeProps.locale,
+      getRootNode,
+      onLocaleChange(locale) {
+        setLocale(locale.locale);
+      }
+    });
+    onCleanup(cleanup);
+  });
+  const context = createMemo(() => ({
+    locale: locale(),
+    dir: isRTL(locale()) ? 'rtl' : 'ltr'
+  }));
+  return createComponent(LocaleContextProvider, {
+    value: context,
+    get children() {
+      return restProps.children;
+    }
+  });
+};
+
 const [MenuProvider, useMenuContext] = createContext({
   hookName: 'useMenuContext',
   providerName: '<MenuProvider />',
@@ -1857,7 +2000,8 @@ const useMenu = props => {
   const getRootNode = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send, machine] = useMachine(menu$1.machine(context), {
     context
@@ -2134,7 +2278,7 @@ const usePinInput = props => {
   return createMemo(() => pinInput$1.connect(state, send, normalizeProps));
 };
 
-const _tmpl$$6 = /*#__PURE__*/template(`<input>`);
+var _tmpl$$6 = /*#__PURE__*/template(`<input>`);
 const PinInputRoot = props => {
   const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
   const api = usePinInput(usePinInputProps);
@@ -2143,7 +2287,7 @@ const PinInputRoot = props => {
     value: api,
     get children() {
       return [createComponent(ark.div, mergedProps), (() => {
-        const _el$ = _tmpl$$6();
+        var _el$ = _tmpl$$6();
         spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -2205,7 +2349,7 @@ const PopoverContent = props => {
 const PopoverDescription = props => {
   const api = usePopoverContext();
   const mergedProps = mergeProps$1(() => api().descriptionProps, props);
-  return createComponent(ark.p, mergedProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 const PopoverIndicator = props => {
@@ -2232,7 +2376,8 @@ const usePopover = props => {
   const getRootNode = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = useMachine(popover$1.machine(context), {
     context
@@ -2426,13 +2571,13 @@ const RadioGroupItem = props => {
   });
 };
 
-const _tmpl$$5 = /*#__PURE__*/template(`<input>`);
+var _tmpl$$5 = /*#__PURE__*/template(`<input>`);
 const RadioGroupItemControl = props => {
   const api = useRadioGroupContext();
   const itemProps = useRadioGroupItemContext();
   const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$5();
+    var _el$ = _tmpl$$5();
     spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2490,7 +2635,7 @@ const [RatingGroupProvider, useRatingGroupContext] = createContext({
   providerName: '<RatingGroupProvider />'
 });
 
-const _tmpl$$4 = /*#__PURE__*/template(`<input>`);
+var _tmpl$$4 = /*#__PURE__*/template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
   const mergedProps = mergeProps$1(() => api().controlProps, props);
@@ -2500,7 +2645,7 @@ const RatingGroupControl = props => {
       return getChildren();
     }
   })), (() => {
-    const _el$ = _tmpl$$4();
+    var _el$ = _tmpl$$4();
     spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -2601,13 +2746,13 @@ const SegmentGroupItem = props => {
   });
 };
 
-const _tmpl$$3 = /*#__PURE__*/template(`<input>`);
+var _tmpl$$3 = /*#__PURE__*/template(`<input>`);
 const SegmentGroupItemControl = props => {
   const api = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemContext();
   const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$3();
+    var _el$ = _tmpl$$3();
     spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2686,25 +2831,35 @@ const SelectContent = props => {
   });
 };
 
-const _tmpl$$2 = /*#__PURE__*/template(`<select>`),
-  _tmpl$2 = /*#__PURE__*/template(`<option>`);
+var _tmpl$$2 = /*#__PURE__*/template(`<option value="">`),
+  _tmpl$2 = /*#__PURE__*/template(`<select>`),
+  _tmpl$3 = /*#__PURE__*/template(`<option>`);
 const SelectControl = props => {
   const api = useSelectContext();
   const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const isValueEmpty = createMemo(() => api().value.length === 0);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$2();
+    var _el$ = _tmpl$2();
     spread(_el$, mergeProps(() => api().hiddenSelectProps), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isValueEmpty();
+      },
+      get children() {
+        return _tmpl$$2();
+      }
+    }), null);
     insert(_el$, createComponent(Index, {
       get each() {
         return api().collection.toArray();
       },
       children: option => (() => {
-        const _el$2 = _tmpl$2();
-        insert(_el$2, () => option().label);
-        effect(() => _el$2.value = option().value);
-        return _el$2;
+        var _el$3 = _tmpl$3();
+        insert(_el$3, () => option().label);
+        effect(() => _el$3.value = option().value);
+        return _el$3;
       })()
-    }));
+    }), null);
     return _el$;
   })()];
 };
@@ -2794,7 +2949,8 @@ const useSelect = props => {
   const context = () => mergeProps$1({
     id: createUniqueId(),
     getRootNode,
-    collection: collection()
+    collection: collection(),
+    'open.controlled': props.open !== undefined
   }, rest);
   const [state, send] = useMachine(select$1.machine(context()), {
     context
@@ -3024,12 +3180,12 @@ const [SwitchProvider, useSwitchContext] = createContext({
   providerName: '<SwitchProvider />'
 });
 
-const _tmpl$$1 = /*#__PURE__*/template(`<input>`);
+var _tmpl$$1 = /*#__PURE__*/template(`<input>`);
 const SwitchControl = props => {
   const api = useSwitchContext();
   const mergedProps = mergeProps$1(() => api().controlProps, props);
   return [createComponent(ark.span, mergedProps), (() => {
-    const _el$ = _tmpl$$1();
+    var _el$ = _tmpl$$1();
     spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -3261,7 +3417,7 @@ const useTagsInput = props => {
   return createMemo(() => tagsInput$1.connect(state, send, normalizeProps));
 };
 
-const _tmpl$ = /*#__PURE__*/template(`<input>`);
+var _tmpl$ = /*#__PURE__*/template(`<input>`);
 const TagsInputRoot = props => {
   const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
   const api = useTagsInput(tagsInputParams);
@@ -3275,7 +3431,7 @@ const TagsInputRoot = props => {
           return getChildren();
         }
       })), (() => {
-        const _el$ = _tmpl$();
+        var _el$ = _tmpl$();
         spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -3476,7 +3632,8 @@ const useTooltip = props => {
   const getRootNode = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = useMachine(tooltip$1.machine(context), {
     context
@@ -3521,76 +3678,121 @@ var tooltip = /*#__PURE__*/Object.freeze({
   Trigger: TooltipTrigger
 });
 
-// TODO: remove after zag release
+const [TreeViewBranchProvider, useTreeViewBranchContext] = createContext({
+  hookName: 'useTreeViewBranchContext',
+  providerName: '<TreeViewBranchProvider />'
+});
 
 const [TreeViewProvider, useTreeViewContext] = createContext({
   hookName: 'useTreeViewContext',
   providerName: '<TreeViewProvider />'
 });
 
+const [TreeViewDepthProvider, useTreeViewDepthContext] = createContext({
+  hookName: 'useTreeViewDepthContext',
+  providerName: '<TreeViewDepthProvider />'
+});
+
 const TreeViewBranch = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'id']);
   const api = useTreeViewContext();
+  const depth = useTreeViewDepthContext();
+  const branchProps = mergeProps$1(itemProps, {
+    depth
+  });
   const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getBranchState(branchProps));
-  return createComponent(ark.li, mergeProps(mergedProps, {
+  return createComponent(TreeViewDepthProvider, {
+    value: depth + 1,
     get children() {
-      return getChildren();
+      return createComponent(TreeViewBranchProvider, {
+        value: branchProps,
+        get children() {
+          return createComponent(ark.li, mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      });
     }
-  }));
+  });
 };
 
 const TreeViewBranchContent = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = mergeProps$1(() => api().getBranchContentProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchContentProps(branchProps), props);
   return createComponent(ark.ul, mergedProps);
 };
 
 const TreeViewBranchControl = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = mergeProps$1(() => api().getBranchControlProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchControlProps(branchProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TreeViewBranchIndicator = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps), treeViewAnatomy.build().branchIndicator.attrs, localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps),
+  // TODO use api.getBranchIndicatorProps() when available
+  treeViewAnatomy.build().branchIndicator.attrs, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TreeViewBranchText = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = mergeProps$1(() => api().getBranchTextProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchTextProps(branchProps), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const TreeViewBranchTrigger = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = mergeProps$1(() => api().getBranchTriggerProps(branchProps), localProps);
-  return createComponent(ark.button, mergedProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchTriggerProps(branchProps), props);
+  return createComponent(ark.div, mergedProps);
 };
 
+const [TreeViewItemProvider, useTreeViewItemContext] = createContext({
+  hookName: 'useTreeViewItemContext',
+  providerName: '<TreeViewItemProvider />'
+});
+
 const TreeViewItem = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const [_itemProps, localProps] = createSplitProps()(props, ['id', 'disabled']);
   const api = useTreeViewContext();
+  const depth = useTreeViewDepthContext();
+  const itemProps = mergeProps$1(_itemProps, {
+    depth
+  });
   const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
-  return createComponent(ark.li, mergeProps(mergedProps, {
+  return createComponent(TreeViewItemProvider, {
+    value: itemProps,
     get children() {
-      return getChildren();
+      return createComponent(ark.li, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
-  }));
+  });
+};
+
+const TreeViewItemIndicator = props => {
+  const api = useTreeViewContext();
+  const itemProps = useTreeViewItemContext();
+  const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const TreeViewItemText = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), treeViewAnatomy.build().itemText.attrs, localProps);
+  const itemProps = useTreeViewItemContext();
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
   return createComponent(ark.span, mergedProps);
 };
 
@@ -3632,7 +3834,12 @@ const TreeViewRoot = props => {
 const TreeViewTree = props => {
   const api = useTreeViewContext();
   const mergedProps = mergeProps$1(() => api().treeProps, props);
-  return createComponent(ark.ul, mergedProps);
+  return createComponent(TreeViewDepthProvider, {
+    value: 1,
+    get children() {
+      return createComponent(ark.ul, mergedProps);
+    }
+  });
 };
 
 var treeView = /*#__PURE__*/Object.freeze({
@@ -3644,11 +3851,12 @@ var treeView = /*#__PURE__*/Object.freeze({
   BranchText: TreeViewBranchText,
   BranchTrigger: TreeViewBranchTrigger,
   Item: TreeViewItem,
+  ItemIndicator: TreeViewItemIndicator,
   ItemText: TreeViewItemText,
   Label: TreeViewLabel,
   Root: TreeViewRoot,
   Tree: TreeViewTree
 });
 
-export { accordion as Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, fileUpload as FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, menu as Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle, toggleGroup as ToggleGroup, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext, useTreeViewContext, withAsProp };
+export { accordion as Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, clipboard as Clipboard, ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, fileUpload as FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, LocaleProvider, menu as Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle, toggleGroup as ToggleGroup, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useClipboardContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useLocaleContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext, useTreeViewContext, withAsProp };
 //# sourceMappingURL=index.js.map