@ark-ui/solid 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -6,11 +6,46 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [2.1.0] - 2024-02-14
+
+### Added
+
+- Introduced `Clipboard` component. Refer to the [documentation](https://ark-ui.com/docs/components/clipboard) for details.
+- Implemented programmable control over the open state for `ColorPicker`, `DatePicker`, `Dialog`, `HoverCard`, `Menu`, `Popover`, `Select`, and `Tooltip`.
+- Exported `SelectionDetails` type for the `Menu` component.
+- Added a `PresetTrigger` part to the `DatePicker` component, enabling custom triggers for common date presets (e.g., Last 7 days, Last 30 days).
+- Enhanced the `DatePicker.Control` component to support multiple inputs by introducing an optional `index` attribute to `DatePicker.Input`. Example usage:
+
+```jsx
+<DatePicker.Control>
+  <DatePicker.Input index={0} />
+  <DatePicker.Input index={1} />
+</DatePicker.Control>
+```
+
+### Changed
+
+- Refined the `TreeView` component API for streamlined component usage. See the [documentation](https://ark-ui.com/docs/components/tree-view) for details.
+- Updated `Dialog.Description` and `Popover.Description` elements from `p` to `div` for better paragraph handling.
+- Altered `TreeView.BranchTrigger` element from `button` to `div` for accessibility enhancements.
+
+### Fixed
+
+- Resolved unintentional interactions when clicking the scrollbar.
+- Addressed an issue where positioned components failed to adjust to window resizing.
+- Corrected a behavior where restoring scroll position triggered a smooth scroll effect back to the starting point.
+- Rectified a problem in `Combobox`, `Menu`, and `Select` where scrolling into view inadvertently scrolled the body element.
+- Fixed a discrepancy in `DatePicker` regarding the incorrect display of weeks when setting `startOfWeek`.
+- Solved an issue in the `Editable` preventing text deletion upon reaching `maxLength`.
+- Corrected an issue in the `Select` where an item group's label `id` was misdirected.
+- Adjusted `Select` to use the correct `id` for the `aria-activedescendant` attribute.
+
 ## [2.0.1] - 2024-01-30
 
 ### Fixed
 
 - Resolved an issue that for some components the types were not being generated correctly.
+- Fix issue where `Select` component submits its first option when used in a form, even if there is no value selected.
 
 ## [2.0.0] - 2024-01-30
 

package/cjs/index.js

@@ -267,7 +267,7 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
   strict: false
 });
 
-const _tmpl$$c = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$c = /*#__PURE__*/web.template(`<span hidden>`);
 const Environment = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -278,8 +278,8 @@ const Environment = props => {
     },
     get children() {
       return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
-        const _el$ = _tmpl$$c();
-        const _ref$ = spanRef;
+        var _el$ = _tmpl$$c();
+        var _ref$ = spanRef;
         typeof _ref$ === "function" ? web.use(_ref$, _el$) : spanRef = _el$;
         return _el$;
       })())];
@@ -475,12 +475,12 @@ const [CheckboxProvider, useCheckboxContext] = createContext({
   providerName: '<CheckboxProvider />'
 });
 
-const _tmpl$$b = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$b = /*#__PURE__*/web.template(`<input>`);
 const CheckboxControl = props => {
   const api = useCheckboxContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$b();
+    var _el$ = _tmpl$$b();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -687,7 +687,8 @@ const useColorPicker = props => {
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
     getRootNode,
-    value: local.value ? colorPicker__namespace.parse(local.value) : undefined
+    value: local.value ? colorPicker__namespace.parse(local.value) : undefined,
+    'open.controlled': props.open !== undefined
   }), rest);
   const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), {
     context
@@ -695,7 +696,7 @@ const useColorPicker = props => {
   return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$$a = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$a = /*#__PURE__*/web.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']);
@@ -718,7 +719,7 @@ const ColorPickerRoot = props => {
           }));
         }
       }), (() => {
-        const _el$ = _tmpl$$a();
+        var _el$ = _tmpl$$a();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -1038,8 +1039,9 @@ const DatePickerControl = props => {
 };
 
 const DatePickerInput = props => {
+  const [inputProps, localProps] = createSplitProps()(props, ['index']);
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  const mergedProps = solid.mergeProps(() => api().getInputProps(inputProps), localProps);
   return web.createComponent(ark.input, mergedProps);
 };
 
@@ -1049,14 +1051,14 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-const _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().monthSelectProps, props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        const _el$ = _tmpl$$9();
+        var _el$ = _tmpl$$9();
         web.insert(_el$, () => month.label);
         web.effect(() => _el$.value = month.value);
         return _el$;
@@ -1091,6 +1093,13 @@ const DatePickerPositioner = props => {
   });
 };
 
+const DatePickerPresetTrigger = props => {
+  const [presetTriggerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
+  return web.createComponent(ark.button, mergedProps);
+};
+
 const DatePickerPrevTrigger = props => {
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
@@ -1115,7 +1124,8 @@ const useDatePicker = props => {
     id: solidJs.createUniqueId(),
     getRootNode,
     focusedValue: local.focusedValue ? datePicker__namespace.parse(local.focusedValue) : undefined,
-    value: local.value ? datePicker__namespace.parse(local.value) : undefined
+    value: local.value ? datePicker__namespace.parse(local.value) : undefined,
+    'open.controlled': props.open !== undefined
   }), rest);
   const [state, send] = solid.useMachine(datePicker__namespace.machine(context), {
     context
@@ -1280,7 +1290,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const _tmpl$$8 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$8 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
@@ -1290,7 +1300,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        const _el$ = _tmpl$$8();
+        var _el$ = _tmpl$$8();
         _el$.value = year;
         web.insert(_el$, year);
         return _el$;
@@ -1316,6 +1326,7 @@ var datePicker = /*#__PURE__*/Object.freeze({
   MonthSelect: DatePickerMonthSelect,
   NextTrigger: DatePickerNextTrigger,
   Positioner: DatePickerPositioner,
+  PresetTrigger: DatePickerPresetTrigger,
   PrevTrigger: DatePickerPrevTrigger,
   RangeText: DatePickerRangeText,
   Root: DatePickerRoot,
@@ -1378,7 +1389,7 @@ const DialogContent = props => {
 const DialogDescription = props => {
   const dialog = useDialogContext();
   const mergedProps = solid.mergeProps(() => dialog().descriptionProps, props);
-  return web.createComponent(ark.p, mergedProps);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const DialogPositioner = props => {
@@ -1399,7 +1410,8 @@ const useDialog = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
     context
@@ -1560,12 +1572,12 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
   providerName: '<FileUploadProvider />'
 });
 
-const _tmpl$$7 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$7 = /*#__PURE__*/web.template(`<input>`);
 const FileUploadDropzone = props => {
   const api = useFileUploadContext();
   const mergedProps = solid.mergeProps(() => api().dropzoneProps, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$7();
+    var _el$ = _tmpl$$7();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -1760,7 +1772,8 @@ const useHoverCard = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
     context
@@ -1907,7 +1920,8 @@ const useMenu = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
     context
@@ -2184,7 +2198,7 @@ const usePinInput = props => {
   return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$6 = /*#__PURE__*/web.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);
@@ -2193,7 +2207,7 @@ const PinInputRoot = props => {
     value: api,
     get children() {
       return [web.createComponent(ark.div, mergedProps), (() => {
-        const _el$ = _tmpl$$6();
+        var _el$ = _tmpl$$6();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -2255,7 +2269,7 @@ const PopoverContent = props => {
 const PopoverDescription = props => {
   const api = usePopoverContext();
   const mergedProps = solid.mergeProps(() => api().descriptionProps, props);
-  return web.createComponent(ark.p, mergedProps);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const PopoverIndicator = props => {
@@ -2282,7 +2296,8 @@ const usePopover = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(popover__namespace.machine(context), {
     context
@@ -2476,13 +2491,13 @@ const RadioGroupItem = props => {
   });
 };
 
-const _tmpl$$5 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$5 = /*#__PURE__*/web.template(`<input>`);
 const RadioGroupItemControl = props => {
   const api = useRadioGroupContext();
   const itemProps = useRadioGroupItemContext();
   const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$5();
+    var _el$ = _tmpl$$5();
     web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2540,7 +2555,7 @@ const [RatingGroupProvider, useRatingGroupContext] = createContext({
   providerName: '<RatingGroupProvider />'
 });
 
-const _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
@@ -2550,7 +2565,7 @@ const RatingGroupControl = props => {
       return getChildren();
     }
   })), (() => {
-    const _el$ = _tmpl$$4();
+    var _el$ = _tmpl$$4();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -2651,13 +2666,13 @@ const SegmentGroupItem = props => {
   });
 };
 
-const _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
 const SegmentGroupItemControl = props => {
   const api = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemContext();
   const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$3();
+    var _el$ = _tmpl$$3();
     web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2736,25 +2751,35 @@ const SelectContent = props => {
   });
 };
 
-const _tmpl$$2 = /*#__PURE__*/web.template(`<select>`),
-  _tmpl$2 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$2 = /*#__PURE__*/web.template(`<option value="">`),
+  _tmpl$2 = /*#__PURE__*/web.template(`<select>`),
+  _tmpl$3 = /*#__PURE__*/web.template(`<option>`);
 const SelectControl = props => {
   const api = useSelectContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const isValueEmpty = solidJs.createMemo(() => api().value.length === 0);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$2();
+    var _el$ = _tmpl$2();
     web.spread(_el$, web.mergeProps(() => api().hiddenSelectProps), false, true);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return isValueEmpty();
+      },
+      get children() {
+        return _tmpl$$2();
+      }
+    }), null);
     web.insert(_el$, web.createComponent(solidJs.Index, {
       get each() {
         return api().collection.toArray();
       },
       children: option => (() => {
-        const _el$2 = _tmpl$2();
-        web.insert(_el$2, () => option().label);
-        web.effect(() => _el$2.value = option().value);
-        return _el$2;
+        var _el$3 = _tmpl$3();
+        web.insert(_el$3, () => option().label);
+        web.effect(() => _el$3.value = option().value);
+        return _el$3;
       })()
-    }));
+    }), null);
     return _el$;
   })()];
 };
@@ -2844,7 +2869,8 @@ const useSelect = props => {
   const context = () => solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode,
-    collection: collection()
+    collection: collection(),
+    'open.controlled': props.open !== undefined
   }, rest);
   const [state, send] = solid.useMachine(select__namespace.machine(context()), {
     context
@@ -3074,12 +3100,12 @@ const [SwitchProvider, useSwitchContext] = createContext({
   providerName: '<SwitchProvider />'
 });
 
-const _tmpl$$1 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$1 = /*#__PURE__*/web.template(`<input>`);
 const SwitchControl = props => {
   const api = useSwitchContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
   return [web.createComponent(ark.span, mergedProps), (() => {
-    const _el$ = _tmpl$$1();
+    var _el$ = _tmpl$$1();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -3311,7 +3337,7 @@ const useTagsInput = props => {
   return solidJs.createMemo(() => tagsInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$ = /*#__PURE__*/web.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);
@@ -3325,7 +3351,7 @@ const TagsInputRoot = props => {
           return getChildren();
         }
       })), (() => {
-        const _el$ = _tmpl$();
+        var _el$ = _tmpl$();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -3526,7 +3552,8 @@ const useTooltip = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
     context
@@ -3571,76 +3598,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 = solid.mergeProps(itemProps, {
+    depth
+  });
   const mergedProps = solid.mergeProps(() => api().getBranchProps(branchProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getBranchState(branchProps));
-  return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+  return web.createComponent(TreeViewDepthProvider, {
+    value: depth + 1,
     get children() {
-      return getChildren();
+      return web.createComponent(TreeViewBranchProvider, {
+        value: branchProps,
+        get children() {
+          return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      });
     }
-  }));
+  });
 };
 
 const TreeViewBranchContent = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchContentProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchContentProps(branchProps), props);
   return web.createComponent(ark.ul, mergedProps);
 };
 
 const TreeViewBranchControl = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchControlProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchControlProps(branchProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const TreeViewBranchIndicator = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchProps(branchProps), anatomy.treeViewAnatomy.build().branchIndicator.attrs, localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchProps(branchProps),
+  // TODO use api.getBranchIndicatorProps() when available
+  anatomy.treeViewAnatomy.build().branchIndicator.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const TreeViewBranchText = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchTextProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchTextProps(branchProps), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const TreeViewBranchTrigger = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchTriggerProps(branchProps), localProps);
-  return web.createComponent(ark.button, mergedProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchTriggerProps(branchProps), props);
+  return web.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 = solid.mergeProps(_itemProps, {
+    depth
+  });
   const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
-  return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+  return web.createComponent(TreeViewItemProvider, {
+    value: itemProps,
     get children() {
-      return getChildren();
+      return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
-  }));
+  });
+};
+
+const TreeViewItemIndicator = props => {
+  const api = useTreeViewContext();
+  const itemProps = useTreeViewItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemIndicatorProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const TreeViewItemText = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), anatomy.treeViewAnatomy.build().itemText.attrs, localProps);
+  const itemProps = useTreeViewItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
@@ -3682,7 +3754,12 @@ const TreeViewRoot = props => {
 const TreeViewTree = props => {
   const api = useTreeViewContext();
   const mergedProps = solid.mergeProps(() => api().treeProps, props);
-  return web.createComponent(ark.ul, mergedProps);
+  return web.createComponent(TreeViewDepthProvider, {
+    value: 1,
+    get children() {
+      return web.createComponent(ark.ul, mergedProps);
+    }
+  });
 };
 
 var treeView = /*#__PURE__*/Object.freeze({
@@ -3694,6 +3771,7 @@ var treeView = /*#__PURE__*/Object.freeze({
   BranchText: TreeViewBranchText,
   BranchTrigger: TreeViewBranchTrigger,
   Item: TreeViewItem,
+  ItemIndicator: TreeViewItemIndicator,
   ItemText: TreeViewItemText,
   Label: TreeViewLabel,
   Root: TreeViewRoot,
@@ -3772,6 +3850,7 @@ exports.DatePickerLabel = DatePickerLabel;
 exports.DatePickerMonthSelect = DatePickerMonthSelect;
 exports.DatePickerNextTrigger = DatePickerNextTrigger;
 exports.DatePickerPositioner = DatePickerPositioner;
+exports.DatePickerPresetTrigger = DatePickerPresetTrigger;
 exports.DatePickerPrevTrigger = DatePickerPrevTrigger;
 exports.DatePickerRangeText = DatePickerRangeText;
 exports.DatePickerRoot = DatePickerRoot;
@@ -3978,6 +4057,7 @@ exports.TreeViewBranchIndicator = TreeViewBranchIndicator;
 exports.TreeViewBranchText = TreeViewBranchText;
 exports.TreeViewBranchTrigger = TreeViewBranchTrigger;
 exports.TreeViewItem = TreeViewItem;
+exports.TreeViewItemIndicator = TreeViewItemIndicator;
 exports.TreeViewItemText = TreeViewItemText;
 exports.TreeViewLabel = TreeViewLabel;
 exports.TreeViewRoot = TreeViewRoot;