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

package/dist/source/components/accordion/use-accordion.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId, mergeProps } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useAccordion = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(accordion.machine(context), { context });
     return createMemo(() => accordion.connect(state, send, normalizeProps));
 };

package/dist/source/components/avatar/use-avatar.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useAvatar = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(avatar.machine(context), { context });
     return createMemo(() => avatar.connect(state, send, normalizeProps));
 };

package/dist/source/components/carousel/use-carousel.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useCarousel = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(carousel.machine(context), { context });
     return createMemo(() => carousel.connect(state, send, normalizeProps));
 };

package/dist/source/components/checkbox/checkbox-control.jsx

@@ -2,10 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useCheckboxContext } from './use-checkbox-context';
 export const CheckboxControl = (props) => {
-    const api = useCheckboxContext();
-    const mergedProps = mergeProps(() => api().controlProps, props);
-    return (<>
-      <ark.div {...mergedProps}/>
-      <input {...api().hiddenInputProps}/>
-    </>);
+    const checkbox = useCheckboxContext();
+    const mergedProps = mergeProps(() => checkbox().controlProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/checkbox/checkbox-hidden-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCheckboxContext } from './use-checkbox-context';
+export const CheckboxHiddenInput = (props) => {
+    const checkbox = useCheckboxContext();
+    const mergedProps = mergeProps(() => checkbox().hiddenInputProps, props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/checkbox/checkbox-indicator.jsx

@@ -1,8 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
 import { ark } from '../factory';
 import { useCheckboxContext } from './use-checkbox-context';
 export const CheckboxIndicator = (props) => {
-    const api = useCheckboxContext();
-    const mergedProps = mergeProps(() => api().indicatorProps, props);
-    return <ark.div {...mergedProps}/>;
+    const [indicatorProps, localProps] = createSplitProps()(props, ['indeterminate']);
+    const checkbox = useCheckboxContext();
+    const mergedProps = mergeProps(() => checkbox().indicatorProps, localProps);
+    return (<ark.div {...mergedProps} hidden={!(indicatorProps.indeterminate ? checkbox().indeterminate : checkbox().checked)}/>);
 };

package/dist/source/components/checkbox/checkbox-root.jsx

@@ -17,9 +17,9 @@ export const CheckboxRoot = (props) => {
         'required',
         'value',
     ]);
-    const api = useCheckbox(useCheckboxProps);
-    const mergedProps = mergeProps(() => api().rootProps, labelprops);
-    return (<CheckboxProvider value={api}>
+    const checkbox = useCheckbox(useCheckboxProps);
+    const mergedProps = mergeProps(() => checkbox().rootProps, labelprops);
+    return (<CheckboxProvider value={checkbox}>
       <ark.label {...mergedProps}/>
     </CheckboxProvider>);
 };

package/dist/source/components/checkbox/checkbox.js

@@ -1,5 +1,6 @@
 export { CheckboxContext as Context, } from './checkbox-context';
 export { CheckboxControl as Control, } from './checkbox-control';
+export { CheckboxHiddenInput as HiddenInput, } from './checkbox-hidden-input';
 export { CheckboxIndicator as Indicator, } from './checkbox-indicator';
 export { CheckboxLabel as Label } from './checkbox-label';
 export { CheckboxRoot as Root } from './checkbox-root';

package/dist/source/components/checkbox/index.js

@@ -1,5 +1,6 @@
 export { CheckboxContext } from './checkbox-context';
 export { CheckboxControl } from './checkbox-control';
+export { CheckboxHiddenInput } from './checkbox-hidden-input';
 export { CheckboxIndicator } from './checkbox-indicator';
 export { CheckboxLabel } from './checkbox-label';
 export { CheckboxRoot } from './checkbox-root';

package/dist/source/components/checkbox/use-checkbox.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useCheckbox = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(checkbox.machine(context), { context });
     return createMemo(() => checkbox.connect(state, send, normalizeProps));
 };

package/dist/source/components/clipboard/use-clipboard.js

@@ -3,8 +3,8 @@ import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../../providers';
 export const useClipboard = (props) => {
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(clipboard.machine(context), { context });
     return createMemo(() => clipboard.connect(state, send, normalizeProps));
 };

package/dist/source/components/collapsible/use-collapsible.js

@@ -5,12 +5,12 @@ import { useEnvironmentContext, useLocaleContext } from '../../providers';
 import { splitRenderStrategyProps } from '../../utils/render-strategy';
 export const useCollapsible = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
     const context = mergeProps({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
     }, collapsibleProps);
     const [state, send] = useMachine(collapsible.machine(context), { context });

package/dist/source/components/color-picker/color-picker-hidden-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './use-color-picker-context';
+export const ColorPickerHiddenInput = (props) => {
+    const colorPicker = useColorPickerContext();
+    const mergedProps = mergeProps(() => colorPicker().hiddenInputProps, props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/color-picker/color-picker-root.jsx

@@ -34,6 +34,5 @@ export const ColorPickerRoot = (props) => {
       <PresenceProvider value={apiPresence}>
         <ark.div {...mergedProps}/>
       </PresenceProvider>
-      <input {...api().hiddenInputProps}/>
     </ColorPickerProvider>);
 };

package/dist/source/components/color-picker/color-picker.js

@@ -22,3 +22,4 @@ export { ColorPickerTransparencyGrid as TransparencyGrid, } from './color-picker
 export { ColorPickerTrigger as Trigger, } from './color-picker-trigger';
 export { ColorPickerValueText as ValueText, } from './color-picker-value-text';
 export { ColorPickerView as View, } from './color-picker-view';
+export { ColorPickerHiddenInput as HiddenInput, } from './color-picker-hidden-input';

package/dist/source/components/color-picker/index.js

@@ -11,6 +11,7 @@ export { ColorPickerControl } from './color-picker-control';
 export { ColorPickerEyeDropperTrigger, } from './color-picker-eye-dropper-trigger';
 export { ColorPickerFormatSelect, } from './color-picker-format-select';
 export { ColorPickerFormatTrigger, } from './color-picker-format-trigger';
+export { ColorPickerHiddenInput, } from './color-picker-hidden-input';
 export { ColorPickerLabel } from './color-picker-label';
 export { ColorPickerPositioner } from './color-picker-positioner';
 export { ColorPickerRoot } from './color-picker-root';

package/dist/source/components/color-picker/use-color-picker.js

@@ -5,11 +5,11 @@ import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useColorPicker = (props) => {
     const [local, rest] = splitProps(props, ['value']);
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const context = mergeProps(() => ({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
         value: local.value ? colorPicker.parse(local.value) : undefined,
     }), rest);

package/dist/source/components/combobox/use-combobox.js

@@ -12,11 +12,11 @@ export const useCombobox = (props) => {
     ]);
     const collection = () => combobox.collection(collectionOptions);
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const context = mergeProps({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
         collection: collection(),
     }, rest);

package/dist/source/components/date-picker/use-date-picker.js

@@ -4,12 +4,12 @@ import { createMemo, createUniqueId, splitProps } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useDatePicker = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const [localProps, restProps] = splitProps(props, ['value', 'focusedValue', 'min', 'max']);
     const context = mergeProps(() => ({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
         focusedValue: localProps.focusedValue ? datePicker.parse(localProps.focusedValue) : undefined,
         value: localProps.value ? datePicker.parse(localProps.value) : undefined,

package/dist/source/components/dialog/use-dialog.js

@@ -4,11 +4,11 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useDialog = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const context = mergeProps({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
     }, props);
     const [state, send] = useMachine(dialog.machine(context), { context });

package/dist/source/components/editable/use-editable.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useEditable = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(editable.machine(context), { context });
     return createMemo(() => editable.connect(state, send, normalizeProps));
 };

package/dist/source/components/file-upload/file-upload-dropzone.jsx

@@ -4,8 +4,5 @@ import { useFileUploadContext } from './use-file-upload-context';
 export const FileUploadDropzone = (props) => {
     const fileUpload = useFileUploadContext();
     const mergedProps = mergeProps(() => fileUpload().dropzoneProps, props);
-    return (<>
-      <ark.div {...mergedProps}/>
-      <input {...fileUpload().hiddenInputProps}/>
-    </>);
+    return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/file-upload/file-upload-hidden-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './use-file-upload-context';
+export const FileUploadHiddenInput = (props) => {
+    const fileUpload = useFileUploadContext();
+    const mergedProps = mergeProps(() => fileUpload().hiddenInputProps, props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/file-upload/file-upload.js

@@ -10,3 +10,4 @@ export { FileUploadItemSizeText as ItemSizeText, } from './file-upload-item-size
 export { FileUploadLabel as Label, } from './file-upload-label';
 export { FileUploadRoot as Root } from './file-upload-root';
 export { FileUploadTrigger as Trigger, } from './file-upload-trigger';
+export { FileUploadHiddenInput as HiddenInput, } from './file-upload-hidden-input';

package/dist/source/components/file-upload/index.js

@@ -10,5 +10,6 @@ export { FileUploadItemSizeText, } from './file-upload-item-size-text';
 export { FileUploadLabel } from './file-upload-label';
 export { FileUploadRoot } from './file-upload-root';
 export { FileUploadTrigger } from './file-upload-trigger';
+export { FileUploadHiddenInput } from './file-upload-hidden-input';
 export { useFileUploadContext } from './use-file-upload-context';
 export * as FileUpload from './file-upload';

package/dist/source/components/file-upload/use-file-upload.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useFileUpload = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(fileUpload.machine(context), { context });
     return createMemo(() => fileUpload.connect(state, send, normalizeProps));
 };

package/dist/source/components/hover-card/use-hover-card.js

@@ -4,11 +4,11 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useHoverCard = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const context = mergeProps({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
     }, props);
     const [state, send] = useMachine(hoverCard.machine(context), { context });

package/dist/source/components/menu/use-menu.js

@@ -4,11 +4,11 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useMenu = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const context = mergeProps({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
     }, props);
     const [state, send, machine] = useMachine(menu.machine(context), { context });

package/dist/source/components/number-input/use-number-input.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useNumberInput = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(numberInput.machine(context), { context });
     return createMemo(() => numberInput.connect(state, send, normalizeProps));
 };

package/dist/source/components/pagination/use-pagination.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const usePagination = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(pagination.machine(context), { context });
     return createMemo(() => pagination.connect(state, send, normalizeProps));
 };

package/dist/source/components/pin-input/index.js

@@ -3,5 +3,6 @@ export { PinInputControl } from './pin-input-control';
 export { PinInputInput } from './pin-input-input';
 export { PinInputLabel } from './pin-input-label';
 export { PinInputRoot } from './pin-input-root';
+export { PinInputHiddenInput } from './pin-input-hidden-input';
 export { usePinInputContext } from './use-pin-input-context';
 export * as PinInput from './pin-input';

package/dist/source/components/pin-input/pin-input-hidden-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { usePinInputContext } from './use-pin-input-context';
+export const PinInputHiddenInput = (props) => {
+    const pinInput = usePinInputContext();
+    const mergedProps = mergeProps(() => pinInput().hiddenInputProps, props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/pin-input/pin-input-root.jsx

@@ -25,10 +25,9 @@ export const PinInputRoot = (props) => {
         'type',
         'value',
     ]);
-    const api = usePinInput(usePinInputProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    return (<PinInputProvider value={api}>
+    const pinInput = usePinInput(usePinInputProps);
+    const mergedProps = mergeProps(() => pinInput().rootProps, localProps);
+    return (<PinInputProvider value={pinInput}>
       <ark.div {...mergedProps}/>
-      <input {...api().hiddenInputProps}/>
     </PinInputProvider>);
 };

package/dist/source/components/pin-input/pin-input.js

@@ -1,5 +1,6 @@
 export { PinInputContext as Context, } from './pin-input-context';
 export { PinInputControl as Control, } from './pin-input-control';
+export { PinInputHiddenInput as HiddenInput, } from './pin-input-hidden-input';
 export { PinInputInput as Input } from './pin-input-input';
 export { PinInputLabel as Label } from './pin-input-label';
 export { PinInputRoot as Root } from './pin-input-root';

package/dist/source/components/pin-input/use-pin-input.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const usePinInput = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(pinInput.machine(context), { context });
     return createMemo(() => pinInput.connect(state, send, normalizeProps));
 };

package/dist/source/components/popover/use-popover.js

@@ -4,11 +4,11 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const usePopover = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const context = mergeProps({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
     }, props);
     const [state, send] = useMachine(popover.machine(context), { context });

package/dist/source/components/progress/use-progress.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useProgress = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(progress.machine(context), { context });
     return createMemo(() => progress.connect(state, send, normalizeProps));
 };

package/dist/source/components/radio-group/use-radio-group.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useRadioGroup = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(radio.machine(context), {
         context,
     });

package/dist/source/components/rating-group/index.js

@@ -5,5 +5,6 @@ export { RatingGroupItemContext, } from './rating-group-item-context';
 export { RatingGroupLabel } from './rating-group-label';
 export { RatingGroupRoot } from './rating-group-root';
 export { useRatingGroupContext } from './use-rating-group-context';
+export { RatingGroupHiddenInput, } from './rating-group-hidden-input';
 export { useRatingGroupItemContext, } from './use-rating-group-item-context';
 export * as RatingGroup from './rating-group';

package/dist/source/components/rating-group/rating-group-control.jsx

@@ -2,10 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useRatingGroupContext } from './use-rating-group-context';
 export const RatingGroupControl = (props) => {
-    const api = useRatingGroupContext();
-    const mergedProps = mergeProps(() => api().controlProps, props);
-    return (<>
-      <ark.div {...mergedProps}/>
-      <input {...api().hiddenInputProps}/>
-    </>);
+    const ratingGroup = useRatingGroupContext();
+    const mergedProps = mergeProps(() => ratingGroup().controlProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/rating-group/rating-group-hidden-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useRatingGroupContext } from './use-rating-group-context';
+export const RatingGroupHiddenInput = (props) => {
+    const ratingGroup = useRatingGroupContext();
+    const mergedProps = mergeProps(() => ratingGroup().hiddenInputProps, props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/rating-group/rating-group.js

@@ -4,3 +4,4 @@ export { RatingGroupItem as Item, } from './rating-group-item';
 export { RatingGroupItemContext as ItemContext, } from './rating-group-item-context';
 export { RatingGroupLabel as Label, } from './rating-group-label';
 export { RatingGroupRoot as Root, } from './rating-group-root';
+export { RatingGroupHiddenInput as HiddenInput, } from './rating-group-hidden-input';

package/dist/source/components/rating-group/use-rating-group.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useRatingGroup = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(rating.machine(context), { context });
     return createMemo(() => rating.connect(state, send, normalizeProps));
 };

package/dist/source/components/segment-group/use-segment-group.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useSegmentGroup = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(segment.machine(context), { context });
     return createMemo(() => segment.connect(state, send, normalizeProps));
 };

package/dist/source/components/select/index.js

@@ -2,6 +2,7 @@ export { SelectClearTrigger } from './select-clear-trigger';
 export { SelectContent } from './select-content';
 export { SelectContext } from './select-context';
 export { SelectControl } from './select-control';
+export { SelectHiddenSelect } from './select-hidden-select';
 export { SelectIndicator } from './select-indicator';
 export { SelectItem } from './select-item';
 export { SelectItemContext } from './select-item-context';

package/dist/source/components/select/select-control.jsx

@@ -1,20 +1,8 @@
 import { mergeProps } from '@zag-js/solid';
-import { Index, Show, createMemo } from 'solid-js';
 import { ark } from '../factory';
 import { useSelectContext } from './use-select-context';
 export const SelectControl = (props) => {
     const select = useSelectContext();
     const mergedProps = mergeProps(() => select().controlProps, props);
-    const isValueEmpty = createMemo(() => select().value.length === 0);
-    return (<>
-      <ark.div {...mergedProps}/>
-      <select {...select().hiddenSelectProps}>
-        <Show when={isValueEmpty()}>
-          <option value=""/>
-        </Show>
-        <Index each={select().collection.toArray()}>
-          {(option) => <option value={option().value}>{option().label}</option>}
-        </Index>
-      </select>
-    </>);
+    return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/select/select-hidden-select.jsx

@@ -0,0 +1,17 @@
+import { mergeProps } from '@zag-js/solid';
+import { Index, Show, createMemo } from 'solid-js';
+import { ark } from '../factory';
+import { useSelectContext } from './use-select-context';
+export const SelectHiddenSelect = (props) => {
+    const select = useSelectContext();
+    const mergedProps = mergeProps(() => select().controlProps, props);
+    const isValueEmpty = createMemo(() => select().value.length === 0);
+    return (<ark.select {...mergedProps}>
+      <Show when={isValueEmpty()}>
+        <option value=""/>
+      </Show>
+      <Index each={select().collection.toArray()}>
+        {(option) => <option value={option().value}>{option().label}</option>}
+      </Index>
+    </ark.select>);
+};

package/dist/source/components/select/select.js

@@ -2,6 +2,7 @@ export { SelectClearTrigger as ClearTrigger, } from './select-clear-trigger';
 export { SelectContent as Content } from './select-content';
 export { SelectContext as Context } from './select-context';
 export { SelectControl as Control } from './select-control';
+export { SelectHiddenSelect as HiddenSelect, } from './select-hidden-select';
 export { SelectIndicator as Indicator, } from './select-indicator';
 export { SelectItem as Item } from './select-item';
 export { SelectItemContext as ItemContext, } from './select-item-context';

package/dist/source/components/select/use-select.js

@@ -12,11 +12,11 @@ export const useSelect = (props) => {
     ]);
     const collection = () => select.collection(collectionOptions);
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
+    const environment = useEnvironmentContext();
     const context = mergeProps({
         id: createUniqueId(),
         dir: locale().dir,
-        getRootNode,
+        getRootNode: environment().getRootNode,
         collection: collection(),
         'open.controlled': props.open !== undefined,
     }, rest);

package/dist/source/components/slider/use-slider.js

@@ -4,8 +4,8 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useSlider = (props) => {
     const locale = useLocaleContext();
-    const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const environment = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
     const [state, send] = useMachine(slider.machine(context), { context });
     return createMemo(() => slider.connect(state, send, normalizeProps));
 };