@ark-ui/solid 2.0.0 → 2.1.0

package/esm/index.js

@@ -1,37 +1,37 @@
 import { createComponent, Dynamic, mergeProps, memo, use, template, spread, insert, effect } from 'solid-js/web';
-import { useMachine, normalizeProps, mergeProps as mergeProps$1, useActor } from '@zag-js/solid';
 import { createContext as createContext$1, useContext, splitProps, createSignal, createMemo, createEffect, Show, createUniqueId, Index, children, 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 from '@zag-js/accordion';
-import * as avatar from '@zag-js/avatar';
+import * as accordion$1 from '@zag-js/accordion';
+import * as avatar$1 from '@zag-js/avatar';
 import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy, treeViewAnatomy } from '@ark-ui/anatomy';
-import * as carousel from '@zag-js/carousel';
-import * as checkbox from '@zag-js/checkbox';
-import * as colorPicker from '@zag-js/color-picker';
-import * as combobox from '@zag-js/combobox';
-import * as datePicker from '@zag-js/date-picker';
-import * as dialog from '@zag-js/dialog';
-import * as editable from '@zag-js/editable';
-import * as fileUpload from '@zag-js/file-upload';
-import * as hoverCard from '@zag-js/hover-card';
-import * as menu from '@zag-js/menu';
-import * as numberInput from '@zag-js/number-input';
-import * as pagination from '@zag-js/pagination';
-import * as pinInput from '@zag-js/pin-input';
-import * as popover from '@zag-js/popover';
-import * as progress from '@zag-js/progress';
+import * as carousel$1 from '@zag-js/carousel';
+import * as checkbox$1 from '@zag-js/checkbox';
+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';
+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 * as menu$1 from '@zag-js/menu';
+import * as numberInput$1 from '@zag-js/number-input';
+import * as pagination$1 from '@zag-js/pagination';
+import * as pinInput$1 from '@zag-js/pin-input';
+import * as popover$1 from '@zag-js/popover';
+import * as progress$1 from '@zag-js/progress';
 import * as radio from '@zag-js/radio-group';
 import * as rating from '@zag-js/rating-group';
-import * as select from '@zag-js/select';
-import * as slider from '@zag-js/slider';
-import * as splitter from '@zag-js/splitter';
+import * as select$1 from '@zag-js/select';
+import * as slider$1 from '@zag-js/slider';
+import * as splitter$1 from '@zag-js/splitter';
 import * as zagSwitch from '@zag-js/switch';
-import * as tabs from '@zag-js/tabs';
-import * as tagsInput from '@zag-js/tags-input';
-import * as toggleGroup from '@zag-js/toggle-group';
-import * as tooltip from '@zag-js/tooltip';
-import * as treeView from '@zag-js/tree-view';
-import * as toast from '@zag-js/toast';
+import * as tabs$1 from '@zag-js/tabs';
+import * as tagsInput$1 from '@zag-js/tags-input';
+import * as toast$1 from '@zag-js/toast';
+import * as toggleGroup$1 from '@zag-js/toggle-group';
+import * as tooltip$1 from '@zag-js/tooltip';
+import * as treeView$1 from '@zag-js/tree-view';
 
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
@@ -217,7 +217,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 +228,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$;
       })())];
@@ -243,10 +243,10 @@ const useAccordion = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(accordion.machine(context), {
+  const [state, send] = useMachine(accordion$1.machine(context), {
     context
   });
-  return createMemo(() => accordion.connect(state, send, normalizeProps));
+  return createMemo(() => accordion$1.connect(state, send, normalizeProps));
 };
 
 const AccordionRoot = props => {
@@ -267,13 +267,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',
@@ -298,10 +299,10 @@ const useAvatar = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(avatar.machine(context), {
+  const [state, send] = useMachine(avatar$1.machine(context), {
     context
   });
-  return createMemo(() => avatar.connect(state, send, normalizeProps));
+  return createMemo(() => avatar$1.connect(state, send, normalizeProps));
 };
 
 const AvatarRoot = props => {
@@ -316,11 +317,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',
@@ -376,10 +378,10 @@ const useCarousel = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(carousel.machine(context), {
+  const [state, send] = useMachine(carousel$1.machine(context), {
     context
   });
-  return createMemo(() => carousel.connect(state, send, normalizeProps));
+  return createMemo(() => carousel$1.connect(state, send, normalizeProps));
 };
 
 const CarouselRoot = props => {
@@ -405,29 +407,30 @@ const CarouselViewport = props => {
   return 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__*/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$;
   })()];
@@ -451,10 +454,10 @@ const useCheckbox = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(checkbox.machine(context), {
+  const [state, send] = useMachine(checkbox$1.machine(context), {
     context
   });
-  return createMemo(() => checkbox.connect(state, send, normalizeProps));
+  return createMemo(() => checkbox$1.connect(state, send, normalizeProps));
 };
 
 const CheckboxRoot = props => {
@@ -474,12 +477,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',
@@ -633,15 +637,16 @@ const useColorPicker = props => {
   const context = mergeProps$1(() => ({
     id: createUniqueId(),
     getRootNode,
-    value: local.value ? colorPicker.parse(local.value) : undefined
+    value: local.value ? colorPicker$1.parse(local.value) : undefined,
+    'open.controlled': props.open !== undefined
   }), rest);
-  const [state, send] = useMachine(colorPicker.machine(context), {
+  const [state, send] = useMachine(colorPicker$1.machine(context), {
     context
   });
-  return createMemo(() => colorPicker.connect(state, send, normalizeProps));
+  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']);
@@ -664,7 +669,7 @@ const ColorPickerRoot = props => {
           }));
         }
       }), (() => {
-        const _el$ = _tmpl$$a();
+        var _el$ = _tmpl$$a();
         spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -751,8 +756,8 @@ const ColorPickerView = props => {
   });
 };
 
-const ColorPicker = {
-  Root: ColorPickerRoot,
+var colorPicker = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Area: ColorPickerArea,
   AreaBackground: ColorPickerAreaBackground,
   AreaThumb: ColorPickerAreaThumb,
@@ -763,10 +768,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,
@@ -775,7 +781,7 @@ const ColorPicker = {
   Trigger: ColorPickerTrigger,
   ValueText: ColorPickerValueText,
   View: ColorPickerView
-};
+});
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const [ComboboxProvider, useComboboxContext] = createContext({
@@ -889,17 +895,17 @@ const ComboboxPositioner = props => {
 
 const useCombobox = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => combobox.collection(collectionOptions);
+  const collection = () => combobox$1.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
   const context = () => mergeProps$1({
     id: createUniqueId(),
     getRootNode,
     collection: collection()
   }, rest);
-  const [state, send] = useMachine(combobox.machine(context()), {
+  const [state, send] = useMachine(combobox$1.machine(context()), {
     context
   });
-  return createMemo(() => combobox.connect(state, send, normalizeProps));
+  return createMemo(() => combobox$1.connect(state, send, normalizeProps));
 };
 
 const ComboboxRoot = props => {
@@ -934,8 +940,8 @@ const ComboboxTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
-const Combobox = {
-  Root: ComboboxRoot,
+var combobox = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: ComboboxClearTrigger,
   Content: ComboboxContent,
   Control: ComboboxControl,
@@ -947,8 +953,9 @@ const Combobox = {
   ItemText: ComboboxItemText,
   Label: ComboboxLabel,
   Positioner: ComboboxPositioner,
+  Root: ComboboxRoot,
   Trigger: ComboboxTrigger
-};
+});
 
 const [DatePickerProvider, useDatePickerContext] = createContext({
   hookName: 'useDatePickerContext',
@@ -982,8 +989,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);
 };
 
@@ -993,14 +1001,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$;
@@ -1035,6 +1043,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();
@@ -1058,13 +1073,14 @@ const useDatePicker = props => {
   const context = mergeProps$1(() => ({
     id: createUniqueId(),
     getRootNode,
-    focusedValue: local.focusedValue ? datePicker.parse(local.focusedValue) : undefined,
-    value: local.value ? datePicker.parse(local.value) : undefined
+    focusedValue: local.focusedValue ? datePicker$1.parse(local.focusedValue) : undefined,
+    value: local.value ? datePicker$1.parse(local.value) : undefined,
+    'open.controlled': props.open !== undefined
   }), rest);
-  const [state, send] = useMachine(datePicker.machine(context), {
+  const [state, send] = useMachine(datePicker$1.machine(context), {
     context
   });
-  return createMemo(() => datePicker.connect(state, send, normalizeProps));
+  return createMemo(() => datePicker$1.connect(state, send, normalizeProps));
 };
 
 const DatePickerRoot = props => {
@@ -1224,7 +1240,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);
@@ -1234,7 +1250,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$;
@@ -1250,8 +1266,8 @@ function getYearsRange(range) {
   return years;
 }
 
-const DatePicker = {
-  Root: DatePickerRoot,
+var datePicker = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: DatePickerClearTrigger,
   Content: DatePickerContent,
   Control: DatePickerControl,
@@ -1260,8 +1276,10 @@ const DatePicker = {
   MonthSelect: DatePickerMonthSelect,
   NextTrigger: DatePickerNextTrigger,
   Positioner: DatePickerPositioner,
+  PresetTrigger: DatePickerPresetTrigger,
   PrevTrigger: DatePickerPrevTrigger,
   RangeText: DatePickerRangeText,
+  Root: DatePickerRoot,
   Table: DatePickerTable,
   TableBody: DatePickerTableBody,
   TableCell: DatePickerTableCell,
@@ -1274,7 +1292,7 @@ const DatePicker = {
   ViewControl: DatePickerViewControl,
   ViewTrigger: DatePickerViewTrigger,
   YearSelect: DatePickerYearSelect
-};
+});
 
 const [DialogProvider, useDialogContext] = createContext({
   hookName: 'useDialogContext',
@@ -1321,7 +1339,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 => {
@@ -1342,12 +1360,13 @@ 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.machine(context), {
+  const [state, send] = useMachine(dialog$1.machine(context), {
     context
   });
-  return createMemo(() => dialog.connect(state, send, normalizeProps));
+  return createMemo(() => dialog$1.connect(state, send, normalizeProps));
 };
 
 const DialogRoot = props => {
@@ -1391,16 +1410,17 @@ const DialogTrigger = props => {
   return 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',
@@ -1455,10 +1475,10 @@ const useEditable = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(editable.machine(context), {
+  const [state, send] = useMachine(editable$1.machine(context), {
     context
   });
-  return createMemo(() => editable.connect(state, send, normalizeProps));
+  return createMemo(() => editable$1.connect(state, send, normalizeProps));
 };
 
 const EditableRoot = props => {
@@ -1484,8 +1504,8 @@ const EditableSubmitTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
-const Editable = {
-  Root: EditableRoot,
+var editable = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Area: EditableArea,
   CancelTrigger: EditableCancelTrigger,
   Control: EditableControl,
@@ -1493,20 +1513,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__*/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$;
   })()];
@@ -1608,10 +1629,10 @@ const useFileUpload = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(fileUpload.machine(context), {
+  const [state, send] = useMachine(fileUpload$1.machine(context), {
     context
   });
-  return createMemo(() => fileUpload.connect(state, send, normalizeProps));
+  return createMemo(() => fileUpload$1.connect(state, send, normalizeProps));
 };
 
 const FileUploadRoot = props => {
@@ -1637,8 +1658,8 @@ const FileUploadTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
-const FileUpload = {
-  Root: FileUploadRoot,
+var fileUpload = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Dropzone: FileUploadDropzone,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
@@ -1648,8 +1669,9 @@ const FileUpload = {
   ItemPreviewImage: FileUploadItemPreviewImage,
   ItemSizeText: FileUploadItemSizeText,
   Label: FileUploadLabel,
+  Root: FileUploadRoot,
   Trigger: FileUploadTrigger
-};
+});
 
 const [HoverCardProvider, useHoverCardContext] = createContext({
   hookName: 'useHoverCardContext',
@@ -1700,12 +1722,13 @@ 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.machine(context), {
+  const [state, send] = useMachine(hoverCard$1.machine(context), {
     context
   });
-  return createMemo(() => hoverCard.connect(state, send, normalizeProps));
+  return createMemo(() => hoverCard$1.connect(state, send, normalizeProps));
 };
 
 const HoverCardRoot = props => {
@@ -1735,14 +1758,15 @@ const HoverCardTrigger = props => {
   return 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',
@@ -1846,13 +1870,14 @@ 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.machine(context), {
+  const [state, send, machine] = useMachine(menu$1.machine(context), {
     context
   });
   return createMemo(() => ({
-    api: () => menu.connect(state, send, normalizeProps),
+    api: () => menu$1.connect(state, send, normalizeProps),
     machine: machine
   }));
 };
@@ -1920,8 +1945,8 @@ const MenuTriggerItem = props => {
   return createComponent(ark.div, mergedProps);
 };
 
-const Menu = {
-  Root: MenuRoot,
+var menu = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Arrow: MenuArrow,
   ArrowTip: MenuArrowTip,
   Content: MenuContent,
@@ -1931,10 +1956,11 @@ const Menu = {
   ItemGroupLabel: MenuItemGroupLabel,
   OptionItem: MenuOptionItem,
   Positioner: MenuPositioner,
+  Root: MenuRoot,
   Separator: MenuSeparator,
   Trigger: MenuTrigger,
   TriggerItem: MenuTriggerItem
-};
+});
 
 const [NumberInputProvider, useNumberInputContext] = createContext({
   hookName: 'useNumberInputContext',
@@ -1977,10 +2003,10 @@ const useNumberInput = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(numberInput.machine(context), {
+  const [state, send] = useMachine(numberInput$1.machine(context), {
     context
   });
-  return createMemo(() => numberInput.connect(state, send, normalizeProps));
+  return createMemo(() => numberInput$1.connect(state, send, normalizeProps));
 };
 
 const NumberInputRoot = props => {
@@ -2006,15 +2032,16 @@ const NumberInputScrubber = props => {
   return 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',
@@ -2053,10 +2080,10 @@ const usePagination = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(pagination.machine(context), {
+  const [state, send] = useMachine(pagination$1.machine(context), {
     context
   });
-  return createMemo(() => pagination.connect(state, send, normalizeProps));
+  return createMemo(() => pagination$1.connect(state, send, normalizeProps));
 };
 
 const PaginationRoot = props => {
@@ -2076,13 +2103,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',
@@ -2114,13 +2142,13 @@ const usePinInput = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(pinInput.machine(context), {
+  const [state, send] = useMachine(pinInput$1.machine(context), {
     context
   });
-  return createMemo(() => pinInput.connect(state, send, normalizeProps));
+  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);
@@ -2129,7 +2157,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$;
       })()];
@@ -2137,12 +2165,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',
@@ -2190,7 +2219,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 => {
@@ -2217,12 +2246,13 @@ 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.machine(context), {
+  const [state, send] = useMachine(popover$1.machine(context), {
     context
   });
-  return createMemo(() => popover.connect(state, send, normalizeProps));
+  return createMemo(() => popover$1.connect(state, send, normalizeProps));
 };
 
 const PopoverRoot = props => {
@@ -2261,8 +2291,8 @@ const PopoverTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
-const Popover = {
-  Root: PopoverRoot,
+var popover = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Anchor: PopoverAnchor,
   Arrow: PopoverArrow,
   ArrowTip: PopoverArrowTip,
@@ -2271,9 +2301,10 @@ const Popover = {
   Description: PopoverDescription,
   Indicator: PopoverIndicator,
   Positioner: PopoverPositioner,
+  Root: PopoverRoot,
   Title: PopoverTitle,
   Trigger: PopoverTrigger
-};
+});
 
 const [ProgressProvider, useProgressContext] = createContext({
   hookName: 'useProgressContext',
@@ -2316,10 +2347,10 @@ const useProgress = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(progress.machine(context), {
+  const [state, send] = useMachine(progress$1.machine(context), {
     context
   });
-  return createMemo(() => progress.connect(state, send, normalizeProps));
+  return createMemo(() => progress$1.connect(state, send, normalizeProps));
 };
 
 const ProgressRoot = props => {
@@ -2363,17 +2394,18 @@ const ProgressView = props => {
   return 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',
@@ -2409,13 +2441,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$;
   })()];
@@ -2458,21 +2490,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__*/template(`<input>`);
+var _tmpl$$4 = /*#__PURE__*/template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
   const mergedProps = mergeProps$1(() => api().controlProps, props);
@@ -2482,7 +2515,7 @@ const RatingGroupControl = props => {
       return getChildren();
     }
   })), (() => {
-    const _el$ = _tmpl$$4();
+    var _el$ = _tmpl$$4();
     spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -2541,12 +2574,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',
@@ -2582,13 +2616,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$;
   })()];
@@ -2631,14 +2665,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({
@@ -2666,25 +2701,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$;
   })()];
 };
@@ -2769,17 +2814,18 @@ const SelectPositioner = props => {
 
 const useSelect = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => select.collection(collectionOptions);
+  const collection = () => select$1.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
   const context = () => mergeProps$1({
     id: createUniqueId(),
     getRootNode,
-    collection: collection()
+    collection: collection(),
+    'open.controlled': props.open !== undefined
   }, rest);
-  const [state, send] = useMachine(select.machine(context()), {
+  const [state, send] = useMachine(select$1.machine(context()), {
     context
   });
-  return createMemo(() => select.connect(state, send, normalizeProps));
+  return createMemo(() => select$1.connect(state, send, normalizeProps));
 };
 
 const SelectRoot = props => {
@@ -2824,8 +2870,8 @@ const SelectValueText = props => {
   }));
 };
 
-const Select = {
-  Root: SelectRoot,
+var select = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Control: SelectControl,
@@ -2837,9 +2883,10 @@ const Select = {
   ItemText: SelectItemText,
   Label: SelectLabel,
   Positioner: SelectPositioner,
+  Root: SelectRoot,
   Trigger: SelectTrigger,
   ValueText: SelectValueText
-};
+});
 
 const [SliderProvider, useSliderContext] = createContext({
   hookName: 'useSliderContext',
@@ -2883,10 +2930,10 @@ const useSlider = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(slider.machine(context), {
+  const [state, send] = useMachine(slider$1.machine(context), {
     context
   });
-  return createMemo(() => slider.connect(state, send, normalizeProps));
+  return createMemo(() => slider$1.connect(state, send, normalizeProps));
 };
 
 const SliderRoot = props => {
@@ -2930,17 +2977,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',
@@ -2967,10 +3015,10 @@ const useSplitter = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(splitter.machine(context), {
+  const [state, send] = useMachine(splitter$1.machine(context), {
     context
   });
-  return createMemo(() => splitter.connect(state, send, normalizeProps));
+  return createMemo(() => splitter$1.connect(state, send, normalizeProps));
 };
 
 const SplitterRoot = props => {
@@ -2990,23 +3038,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__*/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$;
   })()];
@@ -3053,12 +3102,13 @@ const SwitchThumb = props => {
   return 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',
@@ -3113,10 +3163,10 @@ const useTabs = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(tabs.machine(context), {
+  const [state, send] = useMachine(tabs$1.machine(context), {
     context
   });
-  return createMemo(() => tabs.connect(state, send, normalizeProps));
+  return createMemo(() => tabs$1.connect(state, send, normalizeProps));
 };
 
 const TabsRoot = props => {
@@ -3137,13 +3187,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',
@@ -3230,13 +3281,13 @@ const useTagsInput = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(tagsInput.machine(context), {
+  const [state, send] = useMachine(tagsInput$1.machine(context), {
     context
   });
-  return createMemo(() => tagsInput.connect(state, send, normalizeProps));
+  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);
@@ -3250,7 +3301,7 @@ const TagsInputRoot = props => {
           return getChildren();
         }
       })), (() => {
-        const _el$ = _tmpl$();
+        var _el$ = _tmpl$();
         spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -3258,18 +3309,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',
@@ -3281,12 +3333,12 @@ const ToastGroup = props => {
 };
 
 const createToaster = props => {
-  const service = toast.group.machine({
+  const service = toast$1.group.machine({
     id: '1',
     ...props
   }).start();
   const [state, send] = useActor(service);
-  const api = createMemo(() => toast.group.connect(state, send, normalizeProps));
+  const api = createMemo(() => toast$1.group.connect(state, send, normalizeProps));
   const Toaster = toasterProps => {
     const getRootNode = useEnvironmentContext();
     createEffect(() => {
@@ -3317,7 +3369,7 @@ const createToaster = props => {
 };
 const ToastProviderFactory = props => {
   const [state, send] = useActor(props.service);
-  const api = createMemo(() => toast.connect(state, send, normalizeProps));
+  const api = createMemo(() => toast$1.connect(state, send, normalizeProps));
   return createComponent(ToastProvider, {
     value: api,
     get children() {
@@ -3350,13 +3402,14 @@ const ToastTitle = props => {
   return 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',
@@ -3376,10 +3429,10 @@ const useToggleGroup = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(toggleGroup.machine(context), {
+  const [state, send] = useMachine(toggleGroup$1.machine(context), {
     context
   });
-  return createMemo(() => toggleGroup.connect(state, send, normalizeProps));
+  return createMemo(() => toggleGroup$1.connect(state, send, normalizeProps));
 };
 
 const ToggleGroupRoot = props => {
@@ -3394,10 +3447,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',
@@ -3448,12 +3502,13 @@ 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.machine(context), {
+  const [state, send] = useMachine(tooltip$1.machine(context), {
     context
   });
-  return createMemo(() => tooltip.connect(state, send, normalizeProps));
+  return createMemo(() => tooltip$1.connect(state, send, normalizeProps));
 };
 
 const TooltipRoot = props => {
@@ -3483,85 +3538,131 @@ const TooltipTrigger = props => {
   return 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 = 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);
 };
 
@@ -3577,10 +3678,10 @@ const useTreeView = props => {
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(treeView.machine(context), {
+  const [state, send] = useMachine(treeView$1.machine(context), {
     context
   });
-  return createMemo(() => treeView.connect(state, send, normalizeProps));
+  return createMemo(() => treeView$1.connect(state, send, normalizeProps));
 };
 
 const TreeViewRoot = props => {
@@ -3603,22 +3704,29 @@ 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);
+    }
+  });
 };
 
-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
+});
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Avatar, AvatarFallback, AvatarImage, AvatarRoot, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, 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, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, 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, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, PinInput, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterRoot, Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TabsRoot, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle, ToggleGroup, ToggleGroupItem, ToggleGroupRoot, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, 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, 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, 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, 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 };
 //# sourceMappingURL=index.js.map