@ark-ui/solid 3.0.0-2 → 3.0.0-4

package/dist/cjs/index.js

@@ -37,6 +37,7 @@ var toast$1 = require('@zag-js/toast');
 var toggleGroup$1 = require('@zag-js/toggle-group');
 var tooltip$1 = require('@zag-js/tooltip');
 var treeView$1 = require('@zag-js/tree-view');
+var domQuery = require('@zag-js/dom-query');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -191,28 +192,42 @@ const CollapsibleContent = props => {
 
 const CollapsibleContext = props => props.children(useCollapsibleContext());
 
+const isFunction = value => typeof value === 'function';
+const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+
 const [EnvironmentProvider, useEnvironmentContext] = createContext({
   hookName: 'useEnvironmentContext',
   providerName: '<EnvironmentProvider />',
-  strict: false
+  strict: false,
+  defaultValue: () => ({
+    getRootNode: () => document,
+    getDocument: () => document,
+    getWindow: () => window
+  })
 });
 
-var _tmpl$$d = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$6 = /*#__PURE__*/web.template(`<span hidden>`);
 const Environment = props => {
-  const spanRef = undefined;
-
-  // @ts-expect-error TODO fix
-  const currentEnv = solidJs.createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
+  const [spanRef, setSpanRef] = solidJs.createSignal();
+  const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
+  const environment = solidJs.createMemo(() => ({
+    getRootNode,
+    getDocument: () => domQuery.getDocument(getRootNode()),
+    getWindow: () => domQuery.getWindow(getRootNode())
+  }));
   return web.createComponent(EnvironmentProvider, {
-    get value() {
-      return currentEnv();
-    },
+    value: environment,
     get children() {
-      return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
-        var _el$ = _tmpl$$d();
-        web.use(spanRef, _el$);
-        return _el$;
-      })())];
+      return [web.memo(() => props.children), web.createComponent(solidJs.Show, {
+        get when() {
+          return !props.value;
+        },
+        get children() {
+          var _el$ = _tmpl$$6();
+          web.use(setSpanRef, _el$);
+          return _el$;
+        }
+      })];
     }
   });
 };
@@ -230,11 +245,11 @@ const [LocaleContextProvider, useLocaleContext] = createContext({
 const LocaleProvider = props => {
   const [localeProps, restProps] = solidJs.splitProps(props, ['locale', 'defaultLocale']);
   const [locale, setLocale] = solidJs.createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   solidJs.createEffect(() => {
     const cleanup = i18nUtils.trackLocale({
       locale: localeProps.locale,
-      getRootNode,
+      getRootNode: environment().getRootNode,
       onLocaleChange(locale) {
         setLocale(locale.locale);
       }
@@ -255,12 +270,12 @@ const LocaleProvider = props => {
 
 const useCollapsible = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined
   }, collapsibleProps);
   const [state, send] = solid.useMachine(collapsible__namespace.machine(context), {
@@ -375,11 +390,11 @@ const AccordionItemTrigger = props => {
 
 const useAccordion = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solidJs.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(accordion__namespace.machine(context), {
     context
@@ -437,11 +452,11 @@ const AvatarImage = props => {
 
 const useAvatar = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(avatar__namespace.machine(context), {
     context
@@ -521,11 +536,11 @@ const CarouselPrevTrigger = props => {
 
 const useCarousel = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(carousel__namespace.machine(context), {
     context
@@ -572,21 +587,27 @@ const [CheckboxProvider, useCheckboxContext] = createContext({
 
 const CheckboxContext = props => props.children(useCheckboxContext());
 
-var _tmpl$$c = /*#__PURE__*/web.template(`<input>`);
 const CheckboxControl = props => {
-  const api = useCheckboxContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$c();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const checkbox = useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => checkbox().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const CheckboxHiddenInput = props => {
+  const checkbox = useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => checkbox().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
 };
 
 const CheckboxIndicator = props => {
-  const api = useCheckboxContext();
-  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
-  return web.createComponent(ark.div, mergedProps);
+  const [indicatorProps, localProps] = createSplitProps()(props, ['indeterminate']);
+  const checkbox = useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => checkbox().indicatorProps, localProps);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get hidden() {
+      return !(indicatorProps.indeterminate ? checkbox().indeterminate : checkbox().checked);
+    }
+  }));
 };
 
 const CheckboxLabel = props => {
@@ -597,11 +618,11 @@ const CheckboxLabel = props => {
 
 const useCheckbox = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(checkbox__namespace.machine(context), {
     context
@@ -611,10 +632,10 @@ const useCheckbox = props => {
 
 const CheckboxRoot = props => {
   const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
-  const api = useCheckbox(useCheckboxProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, labelprops);
+  const checkbox = useCheckbox(useCheckboxProps);
+  const mergedProps = solid.mergeProps(() => checkbox().rootProps, labelprops);
   return web.createComponent(CheckboxProvider, {
-    value: api,
+    value: checkbox,
     get children() {
       return web.createComponent(ark.label, mergedProps);
     }
@@ -625,6 +646,7 @@ var checkbox = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: CheckboxContext,
   Control: CheckboxControl,
+  HiddenInput: CheckboxHiddenInput,
   Indicator: CheckboxIndicator,
   Label: CheckboxLabel,
   Root: CheckboxRoot
@@ -681,10 +703,10 @@ const ClipboardLabel = props => {
 };
 
 const useClipboard = props => {
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(clipboard__namespace.machine(context), {
     context
@@ -895,6 +917,12 @@ const ColorPickerFormatTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerHiddenInput = props => {
+  const colorPicker = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => colorPicker().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const ColorPickerLabel = props => {
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => api().labelProps, props);
@@ -918,11 +946,11 @@ const ColorPickerPositioner = props => {
 const useColorPicker = props => {
   const [local, rest] = solidJs.splitProps(props, ['value']);
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined,
     value: local.value ? colorPicker__namespace.parse(local.value) : undefined
   }), rest);
@@ -932,7 +960,6 @@ const useColorPicker = props => {
   return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$$b = /*#__PURE__*/web.template(`<input>`);
 const ColorPickerRoot = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
   const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
@@ -944,16 +971,12 @@ const ColorPickerRoot = props => {
   return web.createComponent(ColorPickerProvider, {
     value: api,
     get children() {
-      return [web.createComponent(PresenceProvider, {
+      return web.createComponent(PresenceProvider, {
         value: apiPresence,
         get children() {
           return web.createComponent(ark.div, mergedProps);
         }
-      }), (() => {
-        var _el$ = _tmpl$$b();
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      });
     }
   });
 };
@@ -1052,6 +1075,7 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
   FormatSelect: ColorPickerFormatSelect,
   FormatTrigger: ColorPickerFormatTrigger,
+  HiddenInput: ColorPickerHiddenInput,
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
   Root: ColorPickerRoot,
@@ -1200,15 +1224,17 @@ const ComboboxPositioner = props => {
 
 const useCombobox = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => combobox__namespace.collection(collectionOptions);
+  const collection = solidJs.createMemo(() => combobox__namespace.collection(collectionOptions));
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined,
-    collection: collection()
+    get collection() {
+      return collection();
+    }
   }, rest);
   const [state, send] = solid.useMachine(combobox__namespace.machine(context), {
     context
@@ -1308,14 +1334,14 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$a = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$5 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().monthSelectProps, props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        var _el$ = _tmpl$$a();
+        var _el$ = _tmpl$$5();
         web.insert(_el$, () => month.label);
         web.effect(() => _el$.value = month.value);
         return _el$;
@@ -1376,12 +1402,12 @@ const DatePickerRangeText = props => {
 
 const useDatePicker = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const [localProps, restProps] = solidJs.splitProps(props, ['value', 'focusedValue', 'min', 'max']);
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined,
     focusedValue: localProps.focusedValue ? datePicker__namespace.parse(localProps.focusedValue) : undefined,
     value: localProps.value ? datePicker__namespace.parse(localProps.value) : undefined,
@@ -1542,7 +1568,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$4 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
@@ -1552,7 +1578,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        var _el$ = _tmpl$$9();
+        var _el$ = _tmpl$$4();
         _el$.value = year;
         web.insert(_el$, year);
         return _el$;
@@ -1663,11 +1689,11 @@ const DialogPositioner = props => {
 
 const useDialog = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
@@ -1781,11 +1807,11 @@ const EditablePreview = props => {
 
 const useEditable = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(editable__namespace.machine(context), {
     context
@@ -1832,15 +1858,10 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
 
 const FileUploadContext = props => props.children(useFileUploadContext());
 
-var _tmpl$$8 = /*#__PURE__*/web.template(`<input>`);
 const FileUploadDropzone = props => {
   const fileUpload = useFileUploadContext();
   const mergedProps = solid.mergeProps(() => fileUpload().dropzoneProps, props);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$8();
-    web.spread(_el$, web.mergeProps(() => fileUpload().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
@@ -1923,11 +1944,11 @@ const FileUploadLabel = props => {
 
 const useFileUpload = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(fileUpload__namespace.machine(context), {
     context
@@ -1953,10 +1974,17 @@ const FileUploadTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
+const FileUploadHiddenInput = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 var fileUpload = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: FileUploadContext,
   Dropzone: FileUploadDropzone,
+  HiddenInput: FileUploadHiddenInput,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
   ItemGroup: FileUploadItemGroup,
@@ -2038,11 +2066,11 @@ const HoverCardPositioner = props => {
 
 const useHoverCard = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
@@ -2280,11 +2308,11 @@ const MenuRadioItemGroup = props => {
 
 const useMenu = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined
   }, props);
   const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
@@ -2435,11 +2463,11 @@ const NumberInputLabel = props => {
 
 const useNumberInput = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(numberInput__namespace.machine(context), {
     context
@@ -2512,11 +2540,11 @@ const PaginationPrevTrigger = props => {
 
 const usePagination = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(pagination__namespace.machine(context), {
     context
@@ -2574,11 +2602,11 @@ const PinInputLabel = props => {
 
 const usePinInput = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(pinInput__namespace.machine(context), {
     context
@@ -2586,27 +2614,29 @@ const usePinInput = props => {
   return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$$7 = /*#__PURE__*/web.template(`<input>`);
 const PinInputRoot = props => {
   const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
-  const api = usePinInput(usePinInputProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const pinInput = usePinInput(usePinInputProps);
+  const mergedProps = solid.mergeProps(() => pinInput().rootProps, localProps);
   return web.createComponent(PinInputProvider, {
-    value: api,
+    value: pinInput,
     get children() {
-      return [web.createComponent(ark.div, mergedProps), (() => {
-        var _el$ = _tmpl$$7();
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      return web.createComponent(ark.div, mergedProps);
     }
   });
 };
 
+const PinInputHiddenInput = props => {
+  const pinInput = usePinInputContext();
+  const mergedProps = solid.mergeProps(() => pinInput().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 var pinInput = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: PinInputContext,
   Control: PinInputControl,
+  HiddenInput: PinInputHiddenInput,
   Input: PinInputInput,
   Label: PinInputLabel,
   Root: PinInputRoot
@@ -2685,11 +2715,11 @@ const PopoverPositioner = props => {
 
 const usePopover = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(popover__namespace.machine(context), {
@@ -2788,11 +2818,11 @@ const ProgressRange = props => {
 
 const useProgress = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(progress__namespace.machine(context), {
     context
@@ -2892,13 +2922,13 @@ const RadioGroupItem = props => {
 
 const RadioGroupItemContext = props => props.children(useRadioGroupItemContext());
 
-var _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
 const RadioGroupItemControl = props => {
   const radioGroup = useRadioGroupContext();
   const itemProps = useRadioGroupItemPropsContext();
   const mergedProps = solid.mergeProps(() => radioGroup().getItemControlProps(itemProps), props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$6();
+    var _el$ = _tmpl$$3();
     web.spread(_el$, web.mergeProps(() => radioGroup().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2919,11 +2949,11 @@ const RadioGroupLabel = props => {
 
 const useRadioGroup = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(radio__namespace.machine(context), {
     context
@@ -2962,15 +2992,10 @@ const [RatingGroupProvider, useRatingGroupContext] = createContext({
 
 const RatingGroupContext = props => props.children(useRatingGroupContext());
 
-var _tmpl$$5 = /*#__PURE__*/web.template(`<input>`);
 const RatingGroupControl = props => {
-  const api = useRatingGroupContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$5();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = solid.mergeProps(() => ratingGroup().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
@@ -3001,11 +3026,11 @@ const RatingGroupLabel = props => {
 
 const useRatingGroup = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(rating__namespace.machine(context), {
     context
@@ -3025,10 +3050,17 @@ const RatingGroupRoot = props => {
   });
 };
 
+const RatingGroupHiddenInput = props => {
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = solid.mergeProps(() => ratingGroup().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 var ratingGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: RatingGroupContext,
   Control: RatingGroupControl,
+  HiddenInput: RatingGroupHiddenInput,
   Item: RatingGroupItem,
   ItemContext: RatingGroupItemContext,
   Label: RatingGroupLabel,
@@ -3078,13 +3110,13 @@ const SegmentGroupItem = props => {
 
 const SegmentGroupItemContext = props => props.children(useSegmentGroupItemContext());
 
-var _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$2 = /*#__PURE__*/web.template(`<input>`);
 const SegmentGroupItemControl = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
   const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$4();
+    var _el$ = _tmpl$$2();
     web.spread(_el$, web.mergeProps(() => segmentGroup().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -3105,11 +3137,11 @@ const SegmentGroupLabel = props => {
 
 const useSegmentGroup = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(radio__namespace.machine(context), {
     context
@@ -3169,37 +3201,40 @@ const SelectContent = props => {
 
 const SelectContext = props => props.children(useSelectContext());
 
-var _tmpl$$3 = /*#__PURE__*/web.template(`<option value="">`),
-  _tmpl$2 = /*#__PURE__*/web.template(`<select>`),
-  _tmpl$3 = /*#__PURE__*/web.template(`<option>`);
 const SelectControl = props => {
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+var _tmpl$$1 = /*#__PURE__*/web.template(`<option value="">`),
+  _tmpl$2 = /*#__PURE__*/web.template(`<option>`);
+const SelectHiddenSelect = props => {
   const select = useSelectContext();
   const mergedProps = solid.mergeProps(() => select().controlProps, props);
   const isValueEmpty = solidJs.createMemo(() => select().value.length === 0);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$2();
-    web.spread(_el$, web.mergeProps(() => select().hiddenSelectProps), false, true);
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        return isValueEmpty();
-      },
-      get children() {
-        return _tmpl$$3();
-      }
-    }), null);
-    web.insert(_el$, web.createComponent(solidJs.Index, {
-      get each() {
-        return select().collection.toArray();
-      },
-      children: option => (() => {
-        var _el$3 = _tmpl$3();
-        web.insert(_el$3, () => option().label);
-        web.effect(() => _el$3.value = option().value);
-        return _el$3;
-      })()
-    }), null);
-    return _el$;
-  })()];
+  return web.createComponent(ark.select, web.mergeProps(mergedProps, {
+    get children() {
+      return [web.createComponent(solidJs.Show, {
+        get when() {
+          return isValueEmpty();
+        },
+        get children() {
+          return _tmpl$$1();
+        }
+      }), web.createComponent(solidJs.Index, {
+        get each() {
+          return select().collection.toArray();
+        },
+        children: option => (() => {
+          var _el$2 = _tmpl$2();
+          web.insert(_el$2, () => option().label);
+          web.effect(() => _el$2.value = option().value);
+          return _el$2;
+        })()
+      })];
+    }
+  }));
 };
 
 const SelectIndicator = props => {
@@ -3302,17 +3337,19 @@ const SelectPositioner = props => {
 };
 
 const useSelect = props => {
-  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => select__namespace.collection(collectionOptions);
+  const [collectionOptions, localProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = solidJs.createMemo(() => select__namespace.collection(collectionOptions));
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
-    collection: collection(),
-    'open.controlled': props.open !== undefined
-  }, rest);
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined,
+    get collection() {
+      return collection();
+    }
+  }, localProps);
   const [state, send] = solid.useMachine(select__namespace.machine(context), {
     context
   });
@@ -3362,6 +3399,7 @@ var select = /*#__PURE__*/Object.freeze({
   Content: SelectContent,
   Context: SelectContext,
   Control: SelectControl,
+  HiddenSelect: SelectHiddenSelect,
   Indicator: SelectIndicator,
   Item: SelectItem,
   ItemContext: SelectItemContext,
@@ -3416,11 +3454,11 @@ const SliderRange = props => {
 
 const useSlider = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(slider__namespace.machine(context), {
     context
@@ -3500,11 +3538,11 @@ const SplitterResizeTrigger = props => {
 
 const useSplitter = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(splitter__namespace.machine(context), {
     context
@@ -3539,15 +3577,16 @@ const [SwitchProvider, useSwitchContext] = createContext({
 
 const SwitchContext = props => props.children(useSwitchContext());
 
-var _tmpl$$2 = /*#__PURE__*/web.template(`<input>`);
 const SwitchControl = props => {
   const api = useSwitchContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(ark.span, mergedProps), (() => {
-    var _el$ = _tmpl$$2();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const SwitchHiddenInput = props => {
+  const api = useSwitchContext();
+  const mergedProps = solid.mergeProps(() => api().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
 };
 
 const SwitchLabel = props => {
@@ -3558,11 +3597,11 @@ const SwitchLabel = props => {
 
 const useSwitch = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(zagSwitch__namespace.machine(context), {
     context
@@ -3592,6 +3631,7 @@ var _switch = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: SwitchContext,
   Control: SwitchControl,
+  HiddenInput: SwitchHiddenInput,
   Label: SwitchLabel,
   Root: SwitchRoot,
   Thumb: SwitchThumb
@@ -3648,11 +3688,11 @@ const TabsContext = props => props.children(useTabsContext());
 
 const useTabs = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(tabs__namespace.machine(context), {
     context
@@ -3757,6 +3797,12 @@ const TagsInputItemInput = props => {
   return web.createComponent(ark.input, mergedProps);
 };
 
+const TagsInputHiddenInput = props => {
+  const tagsInput = useTagsInputContext();
+  const mergedProps = solid.mergeProps(() => tagsInput().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const TagsInputItemPreview = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemPropsContext();
@@ -3779,11 +3825,11 @@ const TagsInputLabel = props => {
 
 const useTagsInput = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(tagsInput__namespace.machine(context), {
     context
@@ -3791,7 +3837,6 @@ const useTagsInput = props => {
   return solidJs.createMemo(() => tagsInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$$1 = /*#__PURE__*/web.template(`<input>`);
 const TagsInputRoot = props => {
   const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
   const api = useTagsInput(useTagsInputProps);
@@ -3799,11 +3844,7 @@ const TagsInputRoot = props => {
   return web.createComponent(TagsInputProvider, {
     value: api,
     get children() {
-      return [web.createComponent(ark.div, mergedProps), (() => {
-        var _el$ = _tmpl$$1();
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      return web.createComponent(ark.div, mergedProps);
     }
   });
 };
@@ -3813,6 +3854,7 @@ var tagsInput = /*#__PURE__*/Object.freeze({
   ClearTrigger: TagsInputClearTrigger,
   Context: TagsInputContext,
   Control: TagsInputControl,
+  HiddenInput: TagsInputHiddenInput,
   Input: TagsInputInput,
   Item: TagsInputItem,
   ItemContext: TagsInputItemContext,
@@ -3943,11 +3985,11 @@ const ToggleGroupItem = props => {
 
 const useToggleGroup = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(toggleGroup__namespace.machine(context), {
     context
@@ -4023,11 +4065,11 @@ const TooltipPositioner = props => {
 
 const useTooltip = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode,
+    getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
@@ -4202,11 +4244,11 @@ const TreeViewLabel = props => {
 
 const useTreeView = props => {
   const locale = useLocaleContext();
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     dir: locale().dir,
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(treeView__namespace.machine(context), {
     context
@@ -4282,6 +4324,7 @@ exports.CarouselViewport = CarouselViewport;
 exports.Checkbox = checkbox;
 exports.CheckboxContext = CheckboxContext;
 exports.CheckboxControl = CheckboxControl;
+exports.CheckboxHiddenInput = CheckboxHiddenInput;
 exports.CheckboxIndicator = CheckboxIndicator;
 exports.CheckboxLabel = CheckboxLabel;
 exports.CheckboxRoot = CheckboxRoot;
@@ -4312,6 +4355,7 @@ exports.ColorPickerControl = ColorPickerControl;
 exports.ColorPickerEyeDropperTrigger = ColorPickerEyeDropperTrigger;
 exports.ColorPickerFormatSelect = ColorPickerFormatSelect;
 exports.ColorPickerFormatTrigger = ColorPickerFormatTrigger;
+exports.ColorPickerHiddenInput = ColorPickerHiddenInput;
 exports.ColorPickerLabel = ColorPickerLabel;
 exports.ColorPickerPositioner = ColorPickerPositioner;
 exports.ColorPickerRoot = ColorPickerRoot;
@@ -4390,6 +4434,7 @@ exports.Environment = Environment;
 exports.FileUpload = fileUpload;
 exports.FileUploadContext = FileUploadContext;
 exports.FileUploadDropzone = FileUploadDropzone;
+exports.FileUploadHiddenInput = FileUploadHiddenInput;
 exports.FileUploadItem = FileUploadItem;
 exports.FileUploadItemDeleteTrigger = FileUploadItemDeleteTrigger;
 exports.FileUploadItemGroup = FileUploadItemGroup;
@@ -4452,6 +4497,7 @@ exports.PaginationRoot = PaginationRoot;
 exports.PinInput = pinInput;
 exports.PinInputContext = PinInputContext;
 exports.PinInputControl = PinInputControl;
+exports.PinInputHiddenInput = PinInputHiddenInput;
 exports.PinInputInput = PinInputInput;
 exports.PinInputLabel = PinInputLabel;
 exports.PinInputRoot = PinInputRoot;
@@ -4493,6 +4539,7 @@ exports.RadioGroupRoot = RadioGroupRoot;
 exports.RatingGroup = ratingGroup;
 exports.RatingGroupContext = RatingGroupContext;
 exports.RatingGroupControl = RatingGroupControl;
+exports.RatingGroupHiddenInput = RatingGroupHiddenInput;
 exports.RatingGroupItem = RatingGroupItem;
 exports.RatingGroupItemContext = RatingGroupItemContext;
 exports.RatingGroupLabel = RatingGroupLabel;
@@ -4511,6 +4558,7 @@ exports.SelectClearTrigger = SelectClearTrigger;
 exports.SelectContent = SelectContent;
 exports.SelectContext = SelectContext;
 exports.SelectControl = SelectControl;
+exports.SelectHiddenSelect = SelectHiddenSelect;
 exports.SelectIndicator = SelectIndicator;
 exports.SelectItem = SelectItem;
 exports.SelectItemContext = SelectItemContext;
@@ -4542,6 +4590,7 @@ exports.SplitterRoot = SplitterRoot;
 exports.Switch = _switch;
 exports.SwitchContext = SwitchContext;
 exports.SwitchControl = SwitchControl;
+exports.SwitchHiddenInput = SwitchHiddenInput;
 exports.SwitchLabel = SwitchLabel;
 exports.SwitchRoot = SwitchRoot;
 exports.SwitchThumb = SwitchThumb;
@@ -4556,6 +4605,7 @@ exports.TagsInput = tagsInput;
 exports.TagsInputClearTrigger = TagsInputClearTrigger;
 exports.TagsInputContext = TagsInputContext;
 exports.TagsInputControl = TagsInputControl;
+exports.TagsInputHiddenInput = TagsInputHiddenInput;
 exports.TagsInputInput = TagsInputInput;
 exports.TagsInputItem = TagsInputItem;
 exports.TagsInputItemContext = TagsInputItemContext;