@ark-ui/solid 1.0.0-beta.2 → 1.0.0-beta.3

package/esm/index.js

@@ -1,11 +1,11 @@
 import { spread as spread$1, createComponent, Dynamic, mergeProps as mergeProps$1, memo, use, template, insert, effect } from 'solid-js/web';
 import { mergeProps as mergeProps$2, useMachine, normalizeProps, useActor } from '@zag-js/solid';
-import { splitProps, createMemo, mergeProps, children, createEffect, createContext as createContext$1, useContext, createUniqueId, createSignal, onCleanup, Index } from 'solid-js';
+import { splitProps, createMemo, mergeProps, children, createEffect, createContext as createContext$1, useContext, createUniqueId, createSignal, Index, onCleanup } from 'solid-js';
 import * as accordion from '@zag-js/accordion';
 import * as presence from '@zag-js/presence';
 import * as avatar from '@zag-js/avatar';
 import * as carousel from '@zag-js/carousel';
-import { carouselAnatomy, segmentGroupAnatomy, selectAnatomy } from '@ark-ui/anatomy';
+import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy } from '@ark-ui/anatomy';
 import * as checkbox from '@zag-js/checkbox';
 import * as colorPicker from '@zag-js/color-picker';
 import * as combobox from '@zag-js/combobox';
@@ -429,7 +429,7 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
   strict: false
 });
 
-const _tmpl$$a = /*#__PURE__*/template(`<span hidden>`);
+const _tmpl$$m = /*#__PURE__*/template(`<span hidden>`);
 const Environment$1 = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -440,7 +440,7 @@ const Environment$1 = props => {
     },
     get children() {
       return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
-        const _el$ = _tmpl$$a();
+        const _el$ = _tmpl$$m();
         const _ref$ = spanRef;
         typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
         return _el$;
@@ -529,30 +529,38 @@ const Presence$1 = props => {
   });
   return memo((() => {
     const _c$ = memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
-    return () => _c$() ? null : getChildren();
+    return () => _c$() ? localProps.fallback : getChildren();
   })());
 };
 
 function splitPresenceProps(props) {
-  return createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
+  return createSplitProps()(props, ['fallback', 'lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
 }
 
 const Presence = Object.assign(Presence$1, {
   Root: Presence$1
 });
 
+const _tmpl$$l = /*#__PURE__*/template(`<div>`);
 const AccordionItemContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useAccordionContext();
   const accordionItem = useAccordionItemContext();
-  const contentProps = mergeProps$2(() => api().getItemContentProps(accordionItem), localProps);
+  const mergedProps = mergeProps$2(() => api().getItemContentProps(accordionItem), localProps);
   return createComponent(Presence, mergeProps$1({
     get present() {
       return accordionItem.isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$l();
+        spread$1(_el$, mergeProps$1(() => api().getItemContentProps(accordionItem)), false, false);
+        return _el$;
+      })();
+    },
     get children() {
-      return createComponent(ark.div, contentProps);
+      return createComponent(ark.div, mergedProps);
     }
   }));
 };
@@ -750,12 +758,12 @@ const Checkbox$1 = props => {
   });
 };
 
-const _tmpl$$9 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$k = /*#__PURE__*/template(`<input>`);
 const CheckboxControl = props => {
   const api = useCheckboxContext();
   const mergedProps = mergeProps$2(() => api().controlProps, props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$9();
+    const _el$ = _tmpl$$k();
     spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -799,7 +807,7 @@ const useColorPicker = props => {
   return createMemo(() => colorPicker.connect(state, send, normalizeProps));
 };
 
-const _tmpl$$8 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$j = /*#__PURE__*/template(`<input>`);
 const ColorPicker$1 = props => {
   const [colorPickerProps, localProps] = createSplitProps()(props, ['autoFocus', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
   const api = useColorPicker(colorPickerProps);
@@ -813,7 +821,7 @@ const ColorPicker$1 = props => {
           return getChildren();
         }
       })), (() => {
-        const _el$ = _tmpl$$8();
+        const _el$ = _tmpl$$j();
         spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -890,10 +898,27 @@ const ColorPickerChannelSliderTrack = props => {
   return createComponent(ark.div, mergedProps);
 };
 
+const _tmpl$$i = /*#__PURE__*/template(`<div>`);
 const ColorPickerContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, props);
-  return createComponent(ark.div, mergedProps);
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$i();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 const ColorPickerControl = props => {
@@ -953,6 +978,16 @@ const ColorPickerTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerValueText = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => colorPickerAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps$1(mergedProps, {
+    get children() {
+      return api().valueAsString || props.children;
+    }
+  }));
+};
+
 const ColorPicker = Object.assign(ColorPicker$1, {
   Root: ColorPicker$1,
   Area: ColorPickerArea,
@@ -971,7 +1006,8 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   SwatchGroup: ColorPickerSwatchGroup,
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
-  Trigger: ColorPickerTrigger
+  Trigger: ColorPickerTrigger,
+  ValueText: ColorPickerValueText
 });
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1018,6 +1054,7 @@ const ComboboxClearTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
+const _tmpl$$h = /*#__PURE__*/template(`<div>`);
 const ComboboxContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useComboboxContext();
@@ -1027,6 +1064,13 @@ const ComboboxContent = props => {
       return api().isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$h();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -1075,9 +1119,11 @@ const ComboboxItemGroup = props => {
 };
 
 const ComboboxItemGroupLabel = props => {
-  const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
   const api = useComboboxContext();
-  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps(labelProps), localProps);
+  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -1150,7 +1196,7 @@ const useDatePicker = props => {
 };
 
 const DatePicker$1 = props => {
-  const [datePickerProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'inline', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
+  const [datePickerProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
   const api = useDatePicker(datePickerProps);
   const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
@@ -1172,10 +1218,27 @@ const DatePickerClearTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
+const _tmpl$$g = /*#__PURE__*/template(`<div>`);
 const DatePickerContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, props);
-  return createComponent(ark.div, mergedProps);
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$g();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 const DatePickerControl = props => {
@@ -1196,14 +1259,14 @@ const DatePickerLabel = props => {
   return createComponent(ark.label, mergedProps);
 };
 
-const _tmpl$$7 = /*#__PURE__*/template(`<option>`);
+const _tmpl$$f = /*#__PURE__*/template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = mergeProps$2(() => api().monthSelectProps, props);
   return createComponent(ark.select, mergeProps$1(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        const _el$ = _tmpl$$7();
+        const _el$ = _tmpl$$f();
         insert(_el$, () => month.label);
         effect(() => _el$.value = month.value);
         return _el$;
@@ -1348,10 +1411,11 @@ const DatePickerView = props => {
   const [viewProps, localProps] = createSplitProps()(props, ['view']);
   const api = useDatePickerContext();
   const getChildren = () => runIfFn(localProps.children, api);
+  const mergedProps = mergeProps$2(() => datePickerAnatomy.build().view.attrs, localProps);
   return createComponent(DatePickerViewProvider, {
     value: viewProps,
     get children() {
-      return createComponent(ark.div, mergeProps$1(localProps, {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
         get hidden() {
           return api().view !== viewProps.view;
         },
@@ -1377,7 +1441,7 @@ const DatePickerViewTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
-const _tmpl$$6 = /*#__PURE__*/template(`<option>`);
+const _tmpl$$e = /*#__PURE__*/template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = mergeProps$2(() => api().yearSelectProps, props);
@@ -1387,7 +1451,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        const _el$ = _tmpl$$6();
+        const _el$ = _tmpl$$e();
         _el$.value = year;
         insert(_el$, year);
         return _el$;
@@ -1458,6 +1522,7 @@ const Dialog$1 = props => {
   });
 };
 
+const _tmpl$$d = /*#__PURE__*/template(`<div>`);
 const DialogBackdrop = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
@@ -1467,6 +1532,13 @@ const DialogBackdrop = props => {
       return api().isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$d();
+        spread$1(_el$, mergeProps$1(() => api().backdropProps), false, false);
+        return _el$;
+      })();
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -1479,6 +1551,7 @@ const DialogCloseTrigger = props => {
   return createComponent(ark.button, triggerProps);
 };
 
+const _tmpl$$c = /*#__PURE__*/template(`<div>`);
 const DialogContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
@@ -1488,6 +1561,13 @@ const DialogContent = props => {
       return api().isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$c();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -1665,6 +1745,7 @@ const HoverCardArrowTip = props => {
   return createComponent(ark.div, tipProps);
 };
 
+const _tmpl$$b = /*#__PURE__*/template(`<div>`);
 const HoverCardContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useHoverCardContext();
@@ -1674,6 +1755,13 @@ const HoverCardContent = props => {
       return api().isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$b();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -1784,6 +1872,7 @@ const MenuArrowTip = props => {
   return createComponent(ark.div, arrowTipProps);
 };
 
+const _tmpl$$a = /*#__PURE__*/template(`<div>`);
 const MenuContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useMenuContext();
@@ -1793,6 +1882,13 @@ const MenuContent = props => {
       return api?.().isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$a();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -1821,9 +1917,11 @@ const MenuItemGroup = props => {
 
 const MenuItemGroupLabel = props => {
   const menu = useMenuContext();
-  const [itemGroupLabelProps, localProps] = createSplitProps()(props, ['htmlFor']);
-  const labelProps = mergeProps$2(() => menu?.().getItemGroupLabelProps(itemGroupLabelProps), localProps);
-  return createComponent(ark.label, labelProps);
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
+  const mergedProps = mergeProps$2(() => menu?.().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 const MenuOptionItem = props => {
@@ -2040,7 +2138,7 @@ const usePinInput = props => {
   return createMemo(() => pinInput.connect(state, send, normalizeProps));
 };
 
-const _tmpl$$5 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$9 = /*#__PURE__*/template(`<input>`);
 const PinInput$1 = props => {
   const [pinInputProps, 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(pinInputProps);
@@ -2049,7 +2147,7 @@ const PinInput$1 = props => {
     value: api,
     get children() {
       return [createComponent(ark.div, mergedProps), (() => {
-        const _el$ = _tmpl$$5();
+        const _el$ = _tmpl$$9();
         spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -2135,6 +2233,7 @@ const PopoverCloseTrigger = props => {
   return createComponent(ark.button, triggerProps);
 };
 
+const _tmpl$$8 = /*#__PURE__*/template(`<div>`);
 const PopoverContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePopoverContext();
@@ -2144,6 +2243,13 @@ const PopoverContent = props => {
       return api().isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$8();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -2246,13 +2352,13 @@ const RadioGroupItem = props => {
   });
 };
 
-const _tmpl$$4 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$7 = /*#__PURE__*/template(`<input>`);
 const RadioGroupItemControl = props => {
   const api = useRadioGroupContext();
   const itemProps = useRadioGroupItemContext();
   const mergedProps = mergeProps$2(() => api().getItemControlProps(itemProps), props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$4();
+    const _el$ = _tmpl$$7();
     spread$1(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2309,7 +2415,7 @@ const RatingGroup$1 = props => {
   });
 };
 
-const _tmpl$$3 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$6 = /*#__PURE__*/template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
   const getChildren = () => runIfFn(props.children, api);
@@ -2319,7 +2425,7 @@ const RatingGroupControl = props => {
       return getChildren();
     }
   })), (() => {
-    const _el$ = _tmpl$$3();
+    const _el$ = _tmpl$$6();
     spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -2413,13 +2519,13 @@ const SegmentGroupItem = props => {
   });
 };
 
-const _tmpl$$2 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$5 = /*#__PURE__*/template(`<input>`);
 const SegmentGroupItemControl = props => {
   const api = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemContext();
   const mergedProps = mergeProps$2(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$2();
+    const _el$ = _tmpl$$5();
     spread$1(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2491,6 +2597,7 @@ const SelectClearTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
+const _tmpl$$4 = /*#__PURE__*/template(`<div>`);
 const SelectContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useSelectContext();
@@ -2500,16 +2607,40 @@ const SelectContent = props => {
       return api().isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$4();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
   }));
 };
 
+const _tmpl$$3 = /*#__PURE__*/template(`<select>`),
+  _tmpl$2 = /*#__PURE__*/template(`<option>`);
 const SelectControl = props => {
   const api = useSelectContext();
   const mergedProps = mergeProps$2(() => api().controlProps, props);
-  return createComponent(ark.div, mergedProps);
+  return [createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$3();
+    spread$1(_el$, mergeProps$1(() => api().hiddenSelectProps), false, true);
+    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;
+      })()
+    }));
+    return _el$;
+  })()];
 };
 
 const SelectIndicator = props => {
@@ -2548,9 +2679,11 @@ const SelectItemGroup = props => {
 };
 
 const SelectItemGroupLabel = props => {
-  const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps(labelProps), localProps);
+  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2672,17 +2805,6 @@ const SliderMarkerGroup = props => {
   return createComponent(ark.div, mergedProps);
 };
 
-const SliderOutput = props => {
-  const slider = useSliderContext();
-  const getChildren = () => runIfFn(props.children, slider);
-  const outputProps = mergeProps$2(() => slider().outputProps, props);
-  return createComponent(ark.output, mergeProps$1(outputProps, {
-    get children() {
-      return getChildren();
-    }
-  }));
-};
-
 const SliderRange = props => {
   const api = useSliderContext();
   const mergedProps = mergeProps$2(() => api().rangeProps, props);
@@ -2702,16 +2824,27 @@ const SliderTrack = props => {
   return createComponent(ark.div, mergedProps);
 };
 
+const SliderValueText = props => {
+  const api = useSliderContext();
+  const getChildren = () => runIfFn(props.children, api);
+  const mergedProps = mergeProps$2(() => api().valueTextProps, props);
+  return createComponent(ark.div, mergeProps$1(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
 const Slider = Object.assign(Slider$1, {
   Root: Slider$1,
   Control: SliderControl,
   Label: SliderLabel,
   Marker: SliderMarker,
   MarkerGroup: SliderMarkerGroup,
-  Output: SliderOutput,
   Range: SliderRange,
   Thumb: SliderThumb,
-  Track: SliderTrack
+  Track: SliderTrack,
+  ValueText: SliderValueText
 });
 
 const [SplitterProvider, useSplitterContext] = createContext({
@@ -2802,12 +2935,12 @@ const Switch$1 = props => {
   });
 };
 
-const _tmpl$$1 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$2 = /*#__PURE__*/template(`<input>`);
 const SwitchControl = props => {
   const api = useSwitchContext();
   const mergedProps = mergeProps$2(() => api().controlProps, props);
   return [createComponent(ark.span, mergedProps), (() => {
-    const _el$ = _tmpl$$1();
+    const _el$ = _tmpl$$2();
     spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -2926,7 +3059,7 @@ const useTagsInput = props => {
   return createMemo(() => tagsInput.connect(state, send, normalizeProps));
 };
 
-const _tmpl$ = /*#__PURE__*/template(`<input>`);
+const _tmpl$$1 = /*#__PURE__*/template(`<input>`);
 const TagsInput$1 = 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);
@@ -2940,7 +3073,7 @@ const TagsInput$1 = props => {
           return getChildren();
         }
       })), (() => {
-        const _el$ = _tmpl$();
+        const _el$ = _tmpl$$1();
         spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -3032,8 +3165,6 @@ const [ToastProvider, useToastContext] = createContext({
   providerName: '<ToastProvider />'
 });
 
-// TODO simplify types after next zag.js upgrade
-
 const createToaster = props => {
   const {
     placement,
@@ -3196,6 +3327,7 @@ const TooltipArrowTip = props => {
   return createComponent(ark.div, arrowTipProps);
 };
 
+const _tmpl$ = /*#__PURE__*/template(`<div>`);
 const TooltipContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useTooltipContext();
@@ -3205,6 +3337,13 @@ const TooltipContent = props => {
       return api().isOpen;
     }
   }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
     get children() {
       return createComponent(ark.div, contentProps);
     }
@@ -3232,5 +3371,5 @@ const Tooltip = Object.assign(Tooltip$1, {
   Trigger: TooltipTrigger
 });
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, Avatar, AvatarFallback, AvatarImage, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, Environment, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PinInput, PinInputControl, PinInputInput, PinInputLabel, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, Presence, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, Splitter, SplitterPanel, SplitterResizeTrigger, Switch, SwitchControl, SwitchLabel, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, Toast, ToastCloseTrigger, ToastDescription, ToastTitle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, Avatar, AvatarFallback, AvatarImage, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, Environment, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PinInput, PinInputControl, PinInputInput, PinInputLabel, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, Presence, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, Splitter, SplitterPanel, SplitterResizeTrigger, Switch, SwitchControl, SwitchLabel, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, Toast, ToastCloseTrigger, ToastDescription, ToastTitle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext };
 //# sourceMappingURL=index.js.map