@ark-ui/solid 2.0.0 → 2.1.0

package/cjs/index.js

@@ -1,39 +1,39 @@
 'use strict';
 
 var web = require('solid-js/web');
-var solid = require('@zag-js/solid');
 var solidJs = require('solid-js');
+var solid = require('@zag-js/solid');
 var presence = require('@zag-js/presence');
-var accordion = require('@zag-js/accordion');
-var avatar = require('@zag-js/avatar');
+var accordion$1 = require('@zag-js/accordion');
+var avatar$1 = require('@zag-js/avatar');
 var anatomy = require('@ark-ui/anatomy');
-var carousel = require('@zag-js/carousel');
-var checkbox = require('@zag-js/checkbox');
-var colorPicker = require('@zag-js/color-picker');
-var combobox = require('@zag-js/combobox');
-var datePicker = require('@zag-js/date-picker');
-var dialog = require('@zag-js/dialog');
-var editable = require('@zag-js/editable');
-var fileUpload = require('@zag-js/file-upload');
-var hoverCard = require('@zag-js/hover-card');
-var menu = require('@zag-js/menu');
-var numberInput = require('@zag-js/number-input');
-var pagination = require('@zag-js/pagination');
-var pinInput = require('@zag-js/pin-input');
-var popover = require('@zag-js/popover');
-var progress = require('@zag-js/progress');
+var carousel$1 = require('@zag-js/carousel');
+var checkbox$1 = require('@zag-js/checkbox');
+var colorPicker$1 = require('@zag-js/color-picker');
+var combobox$1 = require('@zag-js/combobox');
+var datePicker$1 = require('@zag-js/date-picker');
+var dialog$1 = require('@zag-js/dialog');
+var editable$1 = require('@zag-js/editable');
+var fileUpload$1 = require('@zag-js/file-upload');
+var hoverCard$1 = require('@zag-js/hover-card');
+var menu$1 = require('@zag-js/menu');
+var numberInput$1 = require('@zag-js/number-input');
+var pagination$1 = require('@zag-js/pagination');
+var pinInput$1 = require('@zag-js/pin-input');
+var popover$1 = require('@zag-js/popover');
+var progress$1 = require('@zag-js/progress');
 var radio = require('@zag-js/radio-group');
 var rating = require('@zag-js/rating-group');
-var select = require('@zag-js/select');
-var slider = require('@zag-js/slider');
-var splitter = require('@zag-js/splitter');
+var select$1 = require('@zag-js/select');
+var slider$1 = require('@zag-js/slider');
+var splitter$1 = require('@zag-js/splitter');
 var zagSwitch = require('@zag-js/switch');
-var tabs = require('@zag-js/tabs');
-var tagsInput = require('@zag-js/tags-input');
-var toggleGroup = require('@zag-js/toggle-group');
-var tooltip = require('@zag-js/tooltip');
-var treeView = require('@zag-js/tree-view');
-var toast = require('@zag-js/toast');
+var tabs$1 = require('@zag-js/tabs');
+var tagsInput$1 = require('@zag-js/tags-input');
+var toast$1 = require('@zag-js/toast');
+var toggleGroup$1 = require('@zag-js/toggle-group');
+var tooltip$1 = require('@zag-js/tooltip');
+var treeView$1 = require('@zag-js/tree-view');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -53,35 +53,35 @@ function _interopNamespaceDefault(e) {
 }
 
 var presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
-var accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion);
-var avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar);
-var carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel);
-var checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
-var colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker);
-var combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
-var datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker);
-var dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
-var editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
-var fileUpload__namespace = /*#__PURE__*/_interopNamespaceDefault(fileUpload);
-var hoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(hoverCard);
-var menu__namespace = /*#__PURE__*/_interopNamespaceDefault(menu);
-var numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput);
-var pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination);
-var pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
-var popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover);
-var progress__namespace = /*#__PURE__*/_interopNamespaceDefault(progress);
+var accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion$1);
+var avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar$1);
+var carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel$1);
+var checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox$1);
+var colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker$1);
+var combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox$1);
+var datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker$1);
+var dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog$1);
+var editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable$1);
+var fileUpload__namespace = /*#__PURE__*/_interopNamespaceDefault(fileUpload$1);
+var hoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(hoverCard$1);
+var menu__namespace = /*#__PURE__*/_interopNamespaceDefault(menu$1);
+var numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput$1);
+var pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination$1);
+var pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput$1);
+var popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover$1);
+var progress__namespace = /*#__PURE__*/_interopNamespaceDefault(progress$1);
 var radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 var rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
-var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
-var slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider);
-var splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter);
+var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select$1);
+var slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider$1);
+var splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter$1);
 var zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
-var tabs__namespace = /*#__PURE__*/_interopNamespaceDefault(tabs);
-var tagsInput__namespace = /*#__PURE__*/_interopNamespaceDefault(tagsInput);
-var toggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(toggleGroup);
-var tooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(tooltip);
-var treeView__namespace = /*#__PURE__*/_interopNamespaceDefault(treeView);
-var toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
+var tabs__namespace = /*#__PURE__*/_interopNamespaceDefault(tabs$1);
+var tagsInput__namespace = /*#__PURE__*/_interopNamespaceDefault(tagsInput$1);
+var toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast$1);
+var toggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(toggleGroup$1);
+var tooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(tooltip$1);
+var treeView__namespace = /*#__PURE__*/_interopNamespaceDefault(treeView$1);
 
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
@@ -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$;
       })())];
@@ -317,13 +317,14 @@ const AccordionRoot = props => {
   });
 };
 
-const Accordion = {
-  Root: AccordionRoot,
+var accordion = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Item: AccordionItem,
   ItemContent: AccordionItemContent,
   ItemIndicator: AccordionItemIndicator,
-  ItemTrigger: AccordionItemTrigger
-};
+  ItemTrigger: AccordionItemTrigger,
+  Root: AccordionRoot
+});
 
 const [AvatarProvider, useAvatarContext] = createContext({
   hookName: 'useAvatarContext',
@@ -366,11 +367,12 @@ const AvatarRoot = props => {
   });
 };
 
-const Avatar = {
-  Root: AvatarRoot,
+var avatar = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Fallback: AvatarFallback,
-  Image: AvatarImage
-};
+  Image: AvatarImage,
+  Root: AvatarRoot
+});
 
 const [CarouselProvider, useCarouselContext] = createContext({
   hookName: 'useCarouselContext',
@@ -455,29 +457,30 @@ const CarouselViewport = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const Carousel = {
-  Root: CarouselRoot,
+var carousel = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: CarouselControl,
   Indicator: CarouselIndicator,
   IndicatorGroup: CarouselIndicatorGroup,
-  NextTrigger: CarouselNextTrigger,
-  PrevTrigger: CarouselPrevTrigger,
   Item: CarouselItem,
   ItemGroup: CarouselItemGroup,
+  NextTrigger: CarouselNextTrigger,
+  PrevTrigger: CarouselPrevTrigger,
+  Root: CarouselRoot,
   Viewport: CarouselViewport
-};
+});
 
 const [CheckboxProvider, useCheckboxContext] = createContext({
   hookName: 'useCheckboxContext',
   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$;
   })()];
@@ -524,12 +527,13 @@ const CheckboxRoot = props => {
   });
 };
 
-const Checkbox = {
-  Root: CheckboxRoot,
+var checkbox = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: CheckboxControl,
+  Indicator: CheckboxIndicator,
   Label: CheckboxLabel,
-  Indicator: CheckboxIndicator
-};
+  Root: CheckboxRoot
+});
 
 const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
   hookName: 'useColorPickerAreaContext',
@@ -683,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
@@ -691,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']);
@@ -714,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$;
       })()];
@@ -801,8 +806,8 @@ const ColorPickerView = props => {
   });
 };
 
-const ColorPicker = {
-  Root: ColorPickerRoot,
+var colorPicker = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Area: ColorPickerArea,
   AreaBackground: ColorPickerAreaBackground,
   AreaThumb: ColorPickerAreaThumb,
@@ -813,10 +818,11 @@ const ColorPicker = {
   Content: ColorPickerContent,
   Control: ColorPickerControl,
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
-  FormatTrigger: ColorPickerFormatTrigger,
   FormatSelect: ColorPickerFormatSelect,
+  FormatTrigger: ColorPickerFormatTrigger,
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
+  Root: ColorPickerRoot,
   Swatch: ColorPickerSwatch,
   SwatchGroup: ColorPickerSwatchGroup,
   SwatchIndicator: ColorPickerSwatchIndicator,
@@ -825,7 +831,7 @@ const ColorPicker = {
   Trigger: ColorPickerTrigger,
   ValueText: ColorPickerValueText,
   View: ColorPickerView
-};
+});
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const [ComboboxProvider, useComboboxContext] = createContext({
@@ -984,8 +990,8 @@ const ComboboxTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const Combobox = {
-  Root: ComboboxRoot,
+var combobox = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: ComboboxClearTrigger,
   Content: ComboboxContent,
   Control: ComboboxControl,
@@ -997,8 +1003,9 @@ const Combobox = {
   ItemText: ComboboxItemText,
   Label: ComboboxLabel,
   Positioner: ComboboxPositioner,
+  Root: ComboboxRoot,
   Trigger: ComboboxTrigger
-};
+});
 
 const [DatePickerProvider, useDatePickerContext] = createContext({
   hookName: 'useDatePickerContext',
@@ -1032,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);
 };
 
@@ -1043,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$;
@@ -1085,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();
@@ -1109,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
@@ -1274,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);
@@ -1284,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$;
@@ -1300,8 +1316,8 @@ function getYearsRange(range) {
   return years;
 }
 
-const DatePicker = {
-  Root: DatePickerRoot,
+var datePicker = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: DatePickerClearTrigger,
   Content: DatePickerContent,
   Control: DatePickerControl,
@@ -1310,8 +1326,10 @@ const DatePicker = {
   MonthSelect: DatePickerMonthSelect,
   NextTrigger: DatePickerNextTrigger,
   Positioner: DatePickerPositioner,
+  PresetTrigger: DatePickerPresetTrigger,
   PrevTrigger: DatePickerPrevTrigger,
   RangeText: DatePickerRangeText,
+  Root: DatePickerRoot,
   Table: DatePickerTable,
   TableBody: DatePickerTableBody,
   TableCell: DatePickerTableCell,
@@ -1324,7 +1342,7 @@ const DatePicker = {
   ViewControl: DatePickerViewControl,
   ViewTrigger: DatePickerViewTrigger,
   YearSelect: DatePickerYearSelect
-};
+});
 
 const [DialogProvider, useDialogContext] = createContext({
   hookName: 'useDialogContext',
@@ -1371,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 => {
@@ -1392,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
@@ -1441,16 +1460,17 @@ const DialogTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const Dialog = {
-  Root: DialogRoot,
+var dialog = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Backdrop: DialogBackdrop,
   CloseTrigger: DialogCloseTrigger,
   Content: DialogContent,
   Description: DialogDescription,
   Positioner: DialogPositioner,
+  Root: DialogRoot,
   Title: DialogTitle,
   Trigger: DialogTrigger
-};
+});
 
 const [EditableProvider, useEditableContext] = createContext({
   hookName: 'useEditableContext',
@@ -1534,8 +1554,8 @@ const EditableSubmitTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const Editable = {
-  Root: EditableRoot,
+var editable = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Area: EditableArea,
   CancelTrigger: EditableCancelTrigger,
   Control: EditableControl,
@@ -1543,20 +1563,21 @@ const Editable = {
   Input: EditableInput,
   Label: EditableLabel,
   Preview: EditablePreview,
+  Root: EditableRoot,
   SubmitTrigger: EditableSubmitTrigger
-};
+});
 
 const [FileUploadProvider, useFileUploadContext] = createContext({
   hookName: 'useFileUploadContext',
   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$;
   })()];
@@ -1687,8 +1708,8 @@ const FileUploadTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const FileUpload = {
-  Root: FileUploadRoot,
+var fileUpload = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Dropzone: FileUploadDropzone,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
@@ -1698,8 +1719,9 @@ const FileUpload = {
   ItemPreviewImage: FileUploadItemPreviewImage,
   ItemSizeText: FileUploadItemSizeText,
   Label: FileUploadLabel,
+  Root: FileUploadRoot,
   Trigger: FileUploadTrigger
-};
+});
 
 const [HoverCardProvider, useHoverCardContext] = createContext({
   hookName: 'useHoverCardContext',
@@ -1750,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
@@ -1785,14 +1808,15 @@ const HoverCardTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const HoverCard = {
-  Root: HoverCardRoot,
+var hoverCard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Arrow: HoverCardArrow,
   ArrowTip: HoverCardArrowTip,
   Content: HoverCardContent,
   Positioner: HoverCardPositioner,
+  Root: HoverCardRoot,
   Trigger: HoverCardTrigger
-};
+});
 
 const [MenuProvider, useMenuContext] = createContext({
   hookName: 'useMenuContext',
@@ -1896,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
@@ -1970,8 +1995,8 @@ const MenuTriggerItem = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const Menu = {
-  Root: MenuRoot,
+var menu = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Arrow: MenuArrow,
   ArrowTip: MenuArrowTip,
   Content: MenuContent,
@@ -1981,10 +2006,11 @@ const Menu = {
   ItemGroupLabel: MenuItemGroupLabel,
   OptionItem: MenuOptionItem,
   Positioner: MenuPositioner,
+  Root: MenuRoot,
   Separator: MenuSeparator,
   Trigger: MenuTrigger,
   TriggerItem: MenuTriggerItem
-};
+});
 
 const [NumberInputProvider, useNumberInputContext] = createContext({
   hookName: 'useNumberInputContext',
@@ -2056,15 +2082,16 @@ const NumberInputScrubber = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const NumberInput = {
-  Root: NumberInputRoot,
+var numberInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: NumberInputControl,
   DecrementTrigger: NumberInputDecrementTrigger,
-  Input: NumberInputInput,
   IncrementTrigger: NumberInputIncrementTrigger,
+  Input: NumberInputInput,
   Label: NumberInputLabel,
+  Root: NumberInputRoot,
   Scrubber: NumberInputScrubber
-};
+});
 
 const [PaginationProvider, usePaginationContext] = createContext({
   hookName: 'usePaginationContext',
@@ -2126,13 +2153,14 @@ const PaginationRoot = props => {
   });
 };
 
-const Pagination = {
-  Root: PaginationRoot,
+var pagination = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Ellipsis: PaginationEllipsis,
   Item: PaginationItem,
   NextTrigger: PaginationNextTrigger,
-  PrevTrigger: PaginationPrevTrigger
-};
+  PrevTrigger: PaginationPrevTrigger,
+  Root: PaginationRoot
+});
 
 const [PinInputProvider, usePinInputContext] = createContext({
   hookName: 'usePinInputContext',
@@ -2170,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);
@@ -2179,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$;
       })()];
@@ -2187,12 +2215,13 @@ const PinInputRoot = props => {
   });
 };
 
-const PinInput = {
-  Root: PinInputRoot,
+var pinInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: PinInputControl,
   Input: PinInputInput,
-  Label: PinInputLabel
-};
+  Label: PinInputLabel,
+  Root: PinInputRoot
+});
 
 const [PopoverProvider, usePopoverContext] = createContext({
   hookName: 'usePopoverContext',
@@ -2240,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 => {
@@ -2267,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
@@ -2311,8 +2341,8 @@ const PopoverTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const Popover = {
-  Root: PopoverRoot,
+var popover = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Anchor: PopoverAnchor,
   Arrow: PopoverArrow,
   ArrowTip: PopoverArrowTip,
@@ -2321,9 +2351,10 @@ const Popover = {
   Description: PopoverDescription,
   Indicator: PopoverIndicator,
   Positioner: PopoverPositioner,
+  Root: PopoverRoot,
   Title: PopoverTitle,
   Trigger: PopoverTrigger
-};
+});
 
 const [ProgressProvider, useProgressContext] = createContext({
   hookName: 'useProgressContext',
@@ -2413,17 +2444,18 @@ const ProgressView = props => {
   return web.createComponent(ark.span, mergedProps);
 };
 
-const Progress = {
-  Root: ProgressRoot,
+var progress = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Circle: ProgressCircle,
+  CircleRange: ProgressCircleRange,
+  CircleTrack: ProgressCircleTrack,
   Label: ProgressLabel,
-  Track: ProgressTrack,
   Range: ProgressRange,
+  Root: ProgressRoot,
+  Track: ProgressTrack,
   ValueText: ProgressValueText,
-  View: ProgressView,
-  Circle: ProgressCircle,
-  CircleTrack: ProgressCircleTrack,
-  CircleRange: ProgressCircleRange
-};
+  View: ProgressView
+});
 
 const [RadioGroupProvider, useRadioGroupContext] = createContext({
   hookName: 'useRadioGroupContext',
@@ -2459,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$;
   })()];
@@ -2508,21 +2540,22 @@ const RadioGroupRoot = props => {
   });
 };
 
-const RadioGroup = {
-  Root: RadioGroupRoot,
+var radioGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Indicator: RadioGroupIndicator,
   Item: RadioGroupItem,
   ItemControl: RadioGroupItemControl,
   ItemText: RadioGroupItemText,
-  Label: RadioGroupLabel
-};
+  Label: RadioGroupLabel,
+  Root: RadioGroupRoot
+});
 
 const [RatingGroupProvider, useRatingGroupContext] = createContext({
   hookName: 'useRatingGroupContext',
   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);
@@ -2532,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$;
   })()];
@@ -2591,12 +2624,13 @@ const RatingGroupRoot = props => {
   });
 };
 
-const RatingGroup = {
-  Root: RatingGroupRoot,
+var ratingGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: RatingGroupControl,
+  Item: RatingGroupItem,
   Label: RatingGroupLabel,
-  Item: RatingGroupItem
-};
+  Root: RatingGroupRoot
+});
 
 const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
   hookName: 'useSegmentGroupContext',
@@ -2632,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$;
   })()];
@@ -2681,14 +2715,15 @@ const SegmentGroupRoot = props => {
   });
 };
 
-const SegmentGroup = {
-  Root: SegmentGroupRoot,
+var segmentGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Indicator: SegmentGroupIndicator,
   Item: SegmentGroupItem,
   ItemControl: SegmentGroupItemControl,
   ItemText: SegmentGroupItemText,
-  Label: SegmentGroupLabel
-};
+  Label: SegmentGroupLabel,
+  Root: SegmentGroupRoot
+});
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const [SelectProvider, useSelectContext] = createContext({
@@ -2716,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$;
   })()];
 };
@@ -2824,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
@@ -2874,8 +2920,8 @@ const SelectValueText = props => {
   }));
 };
 
-const Select = {
-  Root: SelectRoot,
+var select = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Control: SelectControl,
@@ -2887,9 +2933,10 @@ const Select = {
   ItemText: SelectItemText,
   Label: SelectLabel,
   Positioner: SelectPositioner,
+  Root: SelectRoot,
   Trigger: SelectTrigger,
   ValueText: SelectValueText
-};
+});
 
 const [SliderProvider, useSliderContext] = createContext({
   hookName: 'useSliderContext',
@@ -2980,17 +3027,18 @@ const SliderValueText = props => {
   }));
 };
 
-const Slider = {
-  Root: SliderRoot,
+var slider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: SliderControl,
   Label: SliderLabel,
   Marker: SliderMarker,
   MarkerGroup: SliderMarkerGroup,
   Range: SliderRange,
+  Root: SliderRoot,
   Thumb: SliderThumb,
   Track: SliderTrack,
   ValueText: SliderValueText
-};
+});
 
 const [SplitterProvider, useSplitterContext] = createContext({
   hookName: 'useSplitterContext',
@@ -3040,23 +3088,24 @@ const SplitterRoot = props => {
   });
 };
 
-const Splitter = {
-  Root: SplitterRoot,
+var splitter = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Panel: SplitterPanel,
-  ResizeTrigger: SplitterResizeTrigger
-};
+  ResizeTrigger: SplitterResizeTrigger,
+  Root: SplitterRoot
+});
 
 const [SwitchProvider, useSwitchContext] = createContext({
   hookName: 'useSwitchContext',
   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$;
   })()];
@@ -3103,12 +3152,13 @@ const SwitchThumb = props => {
   return web.createComponent(ark.span, mergedProps);
 };
 
-const Switch = {
-  Root: SwitchRoot,
+var _switch = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: SwitchControl,
   Label: SwitchLabel,
+  Root: SwitchRoot,
   Thumb: SwitchThumb
-};
+});
 
 const [TabsProvider, useTabsContext] = createContext({
   hookName: 'useTabsContext',
@@ -3187,13 +3237,14 @@ const TabsRoot = props => {
   });
 };
 
-const Tabs = {
-  Root: TabsRoot,
+var tabs = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Content: TabContent,
   Indicator: TabIndicator,
   List: TabList,
+  Root: TabsRoot,
   Trigger: TabTrigger
-};
+});
 
 const [TagsInputProvider, useTagsInputContext] = createContext({
   hookName: 'useTagsInputContext',
@@ -3286,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);
@@ -3300,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$;
       })()];
@@ -3308,18 +3359,19 @@ const TagsInputRoot = props => {
   });
 };
 
-const TagsInput = {
-  Root: TagsInputRoot,
+var tagsInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: TagsInputClearTrigger,
   Control: TagsInputControl,
   Input: TagsInputInput,
   Item: TagsInputItem,
-  ItemPreview: TagsInputItemPreview,
   ItemDeleteTrigger: TagsInputItemDeleteTrigger,
   ItemInput: TagsInputItemInput,
+  ItemPreview: TagsInputItemPreview,
   ItemText: TagsInputItemText,
-  Label: TagsInputLabel
-};
+  Label: TagsInputLabel,
+  Root: TagsInputRoot
+});
 
 const [ToastProvider, useToastContext] = createContext({
   hookName: 'useToastContext',
@@ -3400,13 +3452,14 @@ const ToastTitle = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const Toast = {
-  Root: ToastRoot,
+var toast = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   CloseTrigger: ToastCloseTrigger,
   Description: ToastDescription,
   Group: ToastGroup,
+  Root: ToastRoot,
   Title: ToastTitle
-};
+});
 
 const [ToggleGroupProvider, useToggleGroupContext] = createContext({
   hookName: 'useToggleGroupContext',
@@ -3444,10 +3497,11 @@ const ToggleGroupRoot = props => {
   });
 };
 
-const ToggleGroup = {
-  Root: ToggleGroupRoot,
-  Item: ToggleGroupItem
-};
+var toggleGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Item: ToggleGroupItem,
+  Root: ToggleGroupRoot
+});
 
 const [TooltipProvider, useTooltipContext] = createContext({
   hookName: 'useTooltipContext',
@@ -3498,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
@@ -3533,85 +3588,131 @@ const TooltipTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const Tooltip = {
-  Root: TooltipRoot,
+var tooltip = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Arrow: TooltipArrow,
   ArrowTip: TooltipArrowTip,
   Content: TooltipContent,
   Positioner: TooltipPositioner,
+  Root: TooltipRoot,
   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);
 };
 
@@ -3653,34 +3754,41 @@ 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);
+    }
+  });
 };
 
-const TreeView = {
-  Root: TreeViewRoot,
-  Label: TreeViewLabel,
-  Tree: TreeViewTree,
+var treeView = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Branch: TreeViewBranch,
-  Item: TreeViewItem,
-  ItemText: TreeViewItemText,
   BranchContent: TreeViewBranchContent,
   BranchControl: TreeViewBranchControl,
-  BranchTrigger: TreeViewBranchTrigger,
   BranchIndicator: TreeViewBranchIndicator,
-  BranchText: TreeViewBranchText
-};
+  BranchText: TreeViewBranchText,
+  BranchTrigger: TreeViewBranchTrigger,
+  Item: TreeViewItem,
+  ItemIndicator: TreeViewItemIndicator,
+  ItemText: TreeViewItemText,
+  Label: TreeViewLabel,
+  Root: TreeViewRoot,
+  Tree: TreeViewTree
+});
 
-exports.Accordion = Accordion;
+exports.Accordion = accordion;
 exports.AccordionItem = AccordionItem;
 exports.AccordionItemContent = AccordionItemContent;
 exports.AccordionItemIndicator = AccordionItemIndicator;
 exports.AccordionItemTrigger = AccordionItemTrigger;
 exports.AccordionRoot = AccordionRoot;
-exports.Avatar = Avatar;
+exports.Avatar = avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.AvatarImage = AvatarImage;
 exports.AvatarRoot = AvatarRoot;
-exports.Carousel = Carousel;
+exports.Carousel = carousel;
 exports.CarouselControl = CarouselControl;
 exports.CarouselIndicator = CarouselIndicator;
 exports.CarouselIndicatorGroup = CarouselIndicatorGroup;
@@ -3690,12 +3798,12 @@ exports.CarouselNextTrigger = CarouselNextTrigger;
 exports.CarouselPrevTrigger = CarouselPrevTrigger;
 exports.CarouselRoot = CarouselRoot;
 exports.CarouselViewport = CarouselViewport;
-exports.Checkbox = Checkbox;
+exports.Checkbox = checkbox;
 exports.CheckboxControl = CheckboxControl;
 exports.CheckboxIndicator = CheckboxIndicator;
 exports.CheckboxLabel = CheckboxLabel;
 exports.CheckboxRoot = CheckboxRoot;
-exports.ColorPicker = ColorPicker;
+exports.ColorPicker = colorPicker;
 exports.ColorPickerArea = ColorPickerArea;
 exports.ColorPickerAreaBackground = ColorPickerAreaBackground;
 exports.ColorPickerAreaThumb = ColorPickerAreaThumb;
@@ -3719,7 +3827,7 @@ exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = ColorPickerTrigger;
 exports.ColorPickerValueText = ColorPickerValueText;
 exports.ColorPickerView = ColorPickerView;
-exports.Combobox = Combobox;
+exports.Combobox = combobox;
 exports.ComboboxClearTrigger = ComboboxClearTrigger;
 exports.ComboboxContent = ComboboxContent;
 exports.ComboboxControl = ComboboxControl;
@@ -3733,7 +3841,7 @@ exports.ComboboxLabel = ComboboxLabel;
 exports.ComboboxPositioner = ComboboxPositioner;
 exports.ComboboxRoot = ComboboxRoot;
 exports.ComboboxTrigger = ComboboxTrigger;
-exports.DatePicker = DatePicker;
+exports.DatePicker = datePicker;
 exports.DatePickerClearTrigger = DatePickerClearTrigger;
 exports.DatePickerContent = DatePickerContent;
 exports.DatePickerControl = DatePickerControl;
@@ -3742,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;
@@ -3757,7 +3866,7 @@ exports.DatePickerView = DatePickerView;
 exports.DatePickerViewControl = DatePickerViewControl;
 exports.DatePickerViewTrigger = DatePickerViewTrigger;
 exports.DatePickerYearSelect = DatePickerYearSelect;
-exports.Dialog = Dialog;
+exports.Dialog = dialog;
 exports.DialogBackdrop = DialogBackdrop;
 exports.DialogCloseTrigger = DialogCloseTrigger;
 exports.DialogContent = DialogContent;
@@ -3766,7 +3875,7 @@ exports.DialogPositioner = DialogPositioner;
 exports.DialogRoot = DialogRoot;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
-exports.Editable = Editable;
+exports.Editable = editable;
 exports.EditableArea = EditableArea;
 exports.EditableCancelTrigger = EditableCancelTrigger;
 exports.EditableControl = EditableControl;
@@ -3777,25 +3886,26 @@ exports.EditablePreview = EditablePreview;
 exports.EditableRoot = EditableRoot;
 exports.EditableSubmitTrigger = EditableSubmitTrigger;
 exports.Environment = Environment;
-exports.FileUpload = FileUpload;
+exports.FileUpload = fileUpload;
 exports.FileUploadDropzone = FileUploadDropzone;
 exports.FileUploadItem = FileUploadItem;
 exports.FileUploadItemDeleteTrigger = FileUploadItemDeleteTrigger;
 exports.FileUploadItemGroup = FileUploadItemGroup;
 exports.FileUploadItemName = FileUploadItemName;
+exports.FileUploadItemPreview = FileUploadItemPreview;
 exports.FileUploadItemPreviewImage = FileUploadItemPreviewImage;
 exports.FileUploadItemSizeText = FileUploadItemSizeText;
 exports.FileUploadLabel = FileUploadLabel;
 exports.FileUploadRoot = FileUploadRoot;
 exports.FileUploadTrigger = FileUploadTrigger;
-exports.HoverCard = HoverCard;
+exports.HoverCard = hoverCard;
 exports.HoverCardArrow = HoverCardArrow;
 exports.HoverCardArrowTip = HoverCardArrowTip;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardPositioner = HoverCardPositioner;
 exports.HoverCardRoot = HoverCardRoot;
 exports.HoverCardTrigger = HoverCardTrigger;
-exports.Menu = Menu;
+exports.Menu = menu;
 exports.MenuArrow = MenuArrow;
 exports.MenuArrowTip = MenuArrowTip;
 exports.MenuContent = MenuContent;
@@ -3809,7 +3919,7 @@ exports.MenuRoot = MenuRoot;
 exports.MenuSeparator = MenuSeparator;
 exports.MenuTrigger = MenuTrigger;
 exports.MenuTriggerItem = MenuTriggerItem;
-exports.NumberInput = NumberInput;
+exports.NumberInput = numberInput;
 exports.NumberInputControl = NumberInputControl;
 exports.NumberInputDecrementTrigger = NumberInputDecrementTrigger;
 exports.NumberInputIncrementTrigger = NumberInputIncrementTrigger;
@@ -3817,18 +3927,18 @@ exports.NumberInputInput = NumberInputInput;
 exports.NumberInputLabel = NumberInputLabel;
 exports.NumberInputRoot = NumberInputRoot;
 exports.NumberInputScrubber = NumberInputScrubber;
-exports.Pagination = Pagination;
+exports.Pagination = pagination;
 exports.PaginationEllipsis = PaginationEllipsis;
 exports.PaginationItem = PaginationItem;
 exports.PaginationNextTrigger = PaginationNextTrigger;
 exports.PaginationPrevTrigger = PaginationPrevTrigger;
 exports.PaginationRoot = PaginationRoot;
-exports.PinInput = PinInput;
+exports.PinInput = pinInput;
 exports.PinInputControl = PinInputControl;
 exports.PinInputInput = PinInputInput;
 exports.PinInputLabel = PinInputLabel;
 exports.PinInputRoot = PinInputRoot;
-exports.Popover = Popover;
+exports.Popover = popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverArrow = PopoverArrow;
 exports.PopoverArrowTip = PopoverArrowTip;
@@ -3843,7 +3953,7 @@ exports.PopoverTrigger = PopoverTrigger;
 exports.Presence = Presence;
 exports.PresencePropsProvider = PresencePropsProvider;
 exports.PresenceProvider = PresenceProvider;
-exports.Progress = Progress;
+exports.Progress = progress;
 exports.ProgressCircle = ProgressCircle;
 exports.ProgressCircleRange = ProgressCircleRange;
 exports.ProgressCircleTrack = ProgressCircleTrack;
@@ -3853,25 +3963,26 @@ exports.ProgressRoot = ProgressRoot;
 exports.ProgressTrack = ProgressTrack;
 exports.ProgressValueText = ProgressValueText;
 exports.ProgressView = ProgressView;
-exports.RadioGroup = RadioGroup;
+exports.RadioGroup = radioGroup;
+exports.RadioGroupIndicator = RadioGroupIndicator;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RadioGroupItemControl = RadioGroupItemControl;
 exports.RadioGroupItemText = RadioGroupItemText;
 exports.RadioGroupLabel = RadioGroupLabel;
 exports.RadioGroupRoot = RadioGroupRoot;
-exports.RatingGroup = RatingGroup;
+exports.RatingGroup = ratingGroup;
 exports.RatingGroupControl = RatingGroupControl;
 exports.RatingGroupItem = RatingGroupItem;
 exports.RatingGroupLabel = RatingGroupLabel;
 exports.RatingGroupRoot = RatingGroupRoot;
-exports.SegmentGroup = SegmentGroup;
+exports.SegmentGroup = segmentGroup;
 exports.SegmentGroupIndicator = SegmentGroupIndicator;
 exports.SegmentGroupItem = SegmentGroupItem;
 exports.SegmentGroupItemControl = SegmentGroupItemControl;
 exports.SegmentGroupItemText = SegmentGroupItemText;
 exports.SegmentGroupLabel = SegmentGroupLabel;
 exports.SegmentGroupRoot = SegmentGroupRoot;
-exports.Select = Select;
+exports.Select = select;
 exports.SelectClearTrigger = SelectClearTrigger;
 exports.SelectContent = SelectContent;
 exports.SelectControl = SelectControl;
@@ -3886,7 +3997,7 @@ exports.SelectPositioner = SelectPositioner;
 exports.SelectRoot = SelectRoot;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValueText = SelectValueText;
-exports.Slider = Slider;
+exports.Slider = slider;
 exports.SliderControl = SliderControl;
 exports.SliderLabel = SliderLabel;
 exports.SliderMarker = SliderMarker;
@@ -3896,11 +4007,11 @@ exports.SliderRoot = SliderRoot;
 exports.SliderThumb = SliderThumb;
 exports.SliderTrack = SliderTrack;
 exports.SliderValueText = SliderValueText;
-exports.Splitter = Splitter;
+exports.Splitter = splitter;
 exports.SplitterPanel = SplitterPanel;
 exports.SplitterResizeTrigger = SplitterResizeTrigger;
 exports.SplitterRoot = SplitterRoot;
-exports.Switch = Switch;
+exports.Switch = _switch;
 exports.SwitchControl = SwitchControl;
 exports.SwitchLabel = SwitchLabel;
 exports.SwitchRoot = SwitchRoot;
@@ -3909,9 +4020,9 @@ exports.TabContent = TabContent;
 exports.TabIndicator = TabIndicator;
 exports.TabList = TabList;
 exports.TabTrigger = TabTrigger;
-exports.Tabs = Tabs;
+exports.Tabs = tabs;
 exports.TabsRoot = TabsRoot;
-exports.TagsInput = TagsInput;
+exports.TagsInput = tagsInput;
 exports.TagsInputClearTrigger = TagsInputClearTrigger;
 exports.TagsInputControl = TagsInputControl;
 exports.TagsInputInput = TagsInputInput;
@@ -3922,23 +4033,23 @@ exports.TagsInputItemPreview = TagsInputItemPreview;
 exports.TagsInputItemText = TagsInputItemText;
 exports.TagsInputLabel = TagsInputLabel;
 exports.TagsInputRoot = TagsInputRoot;
-exports.Toast = Toast;
+exports.Toast = toast;
 exports.ToastCloseTrigger = ToastCloseTrigger;
 exports.ToastDescription = ToastDescription;
 exports.ToastGroup = ToastGroup;
 exports.ToastRoot = ToastRoot;
 exports.ToastTitle = ToastTitle;
-exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroup = toggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
 exports.ToggleGroupRoot = ToggleGroupRoot;
-exports.Tooltip = Tooltip;
+exports.Tooltip = tooltip;
 exports.TooltipArrow = TooltipArrow;
 exports.TooltipArrowTip = TooltipArrowTip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipPositioner = TooltipPositioner;
 exports.TooltipRoot = TooltipRoot;
 exports.TooltipTrigger = TooltipTrigger;
-exports.TreeView = TreeView;
+exports.TreeView = treeView;
 exports.TreeViewBranch = TreeViewBranch;
 exports.TreeViewBranchContent = TreeViewBranchContent;
 exports.TreeViewBranchControl = TreeViewBranchControl;
@@ -3946,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;