@ark-ui/solid 4.10.2 → 5.1.0

package/dist/chunk/{WM2IZOYM.jsx → 72UBZBQP.jsx}

@@ -1,12 +1,12 @@
+import {
+  useFieldContext
+} from "./UCYPIMZC.jsx";
 import {
   PresenceProvider,
   splitPresenceProps,
   usePresence,
   usePresenceContext
-} from "./E72NMPSK.jsx";
-import {
-  useFieldContext
-} from "./P7I44WC4.jsx";
+} from "./A4744EEE.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -15,13 +15,16 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./D2Z5BEON.jsx";
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
+import {
+  runIfFn
+} from "./KGOB2IMX.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -75,10 +78,7 @@ var ColorPickerAreaThumb = (props) => {
 // src/components/color-picker/color-picker-channel-input.tsx
 import { mergeProps as mergeProps4 } from "@zag-js/solid";
 var ColorPickerChannelInput = (props) => {
-  const [channelProps, inputProps] = createSplitProps()(props, [
-    "channel",
-    "orientation"
-  ]);
+  const [channelProps, inputProps] = createSplitProps()(props, ["channel", "orientation"]);
   const api = useColorPickerContext();
   const mergedProps = mergeProps4(() => api().getChannelInputProps(channelProps), inputProps);
   return <ark.input {...mergedProps} />;
@@ -102,10 +102,7 @@ var [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createC
 
 // src/components/color-picker/color-picker-channel-slider.tsx
 var ColorPickerChannelSlider = (props) => {
-  const [channelProps, localProps] = createSplitProps()(props, [
-    "channel",
-    "orientation"
-  ]);
+  const [channelProps, localProps] = createSplitProps()(props, ["channel", "orientation"]);
   const api = useColorPickerContext();
   const formatProps = useColorPickerFormatPropsContext();
   const channelSliderProps = mergeProps5(channelProps, formatProps);
@@ -120,10 +117,7 @@ import { mergeProps as mergeProps6 } from "@zag-js/solid";
 var ColorPickerChannelSliderLabel = (props) => {
   const colorPicker2 = useColorPickerContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = mergeProps6(
-    () => colorPicker2().getChannelSliderLabelProps(channelProps),
-    props
-  );
+  const mergedProps = mergeProps6(() => colorPicker2().getChannelSliderLabelProps(channelProps), props);
   return <ark.label {...mergedProps} />;
 };
 
@@ -155,10 +149,7 @@ var ColorPickerChannelSliderValueText = (props) => {
   const colorPicker2 = useColorPickerContext();
   const localeContext = useLocaleContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = mergeProps9(
-    () => colorPicker2().getChannelSliderValueTextProps(channelProps),
-    props
-  );
+  const mergedProps = mergeProps9(() => colorPicker2().getChannelSliderValueTextProps(channelProps), props);
   return <ark.span {...mergedProps}>
       {props.children || colorPicker2().getChannelValueText(channelProps.channel, localeContext().locale)}
     </ark.span>;
@@ -206,9 +197,7 @@ var ColorPickerFormatSelect = (props) => {
   const api = useColorPickerContext();
   const mergedProps = mergeProps13(() => api().getFormatSelectProps(), props);
   return <ark.select {...mergedProps}>
-      <Index each={["rgba", "hsla", "hsba"]}>
-        {(format) => <ark.option value={format()}>{format()}</ark.option>}
-      </Index>
+      <Index each={["rgba", "hsla", "hsba"]}>{(format) => <ark.option value={format()}>{format()}</ark.option>}</Index>
     </ark.select>;
 };
 
@@ -256,12 +245,12 @@ import { mergeProps as mergeProps18 } from "@zag-js/solid";
 import * as colorPicker from "@zag-js/color-picker";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo, createUniqueId } from "solid-js";
-var useColorPicker = (props = {}) => {
+var useColorPicker = (props) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const field = useFieldContext();
-  const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -273,47 +262,42 @@ var useColorPicker = (props = {}) => {
     readOnly: field?.().readOnly,
     required: field?.().required,
     getRootNode: environment().getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
-    value: props.defaultValue,
-    ...props
+    ...runIfFn(props)
   }));
-  const [state, send] = useMachine(colorPicker.machine(context()), { context });
-  return createMemo(() => colorPicker.connect(state, send, normalizeProps));
+  const service = useMachine(colorPicker.machine, machineProps);
+  return createMemo(() => colorPicker.connect(service, normalizeProps));
 };
 
 // src/components/color-picker/color-picker-root.tsx
 var ColorPickerRoot = (props) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(
-    colorPickerProps,
-    [
-      "closeOnSelect",
-      "defaultOpen",
-      "defaultValue",
-      "disabled",
-      "format",
-      "id",
-      "ids",
-      "initialFocusEl",
-      "invalid",
-      "name",
-      "name",
-      "onFocusOutside",
-      "onFormatChange",
-      "onInteractOutside",
-      "onOpenChange",
-      "onPointerDownOutside",
-      "onValueChange",
-      "onValueChangeEnd",
-      "open",
-      "openAutoFocus",
-      "positioning",
-      "readOnly",
-      "required",
-      "value"
-    ]
-  );
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
+    "closeOnSelect",
+    "defaultOpen",
+    "defaultValue",
+    "defaultFormat",
+    "disabled",
+    "format",
+    "id",
+    "ids",
+    "initialFocusEl",
+    "invalid",
+    "name",
+    "name",
+    "onFocusOutside",
+    "onFormatChange",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onValueChange",
+    "onValueChangeEnd",
+    "open",
+    "openAutoFocus",
+    "positioning",
+    "readOnly",
+    "required",
+    "value"
+  ]);
   const api = useColorPicker(useColorPickerProps);
   const apiPresence = usePresence(mergeProps18(presenceProps, () => ({ present: api().open })));
   const mergedProps = mergeProps18(() => api().getRootProps(), localProps);
@@ -328,13 +312,8 @@ var ColorPickerRoot = (props) => {
 import { mergeProps as mergeProps19 } from "@zag-js/solid";
 var ColorPickerRootProvider = (props) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [{ value: colorPicker2 }, localProps] = createSplitProps()(
-    colorPickerProps,
-    ["value"]
-  );
-  const apiPresence = usePresence(
-    mergeProps19(presenceProps, () => ({ present: colorPicker2().open }))
-  );
+  const [{ value: colorPicker2 }, localProps] = createSplitProps()(colorPickerProps, ["value"]);
+  const apiPresence = usePresence(mergeProps19(presenceProps, () => ({ present: colorPicker2().open })));
   const mergedProps = mergeProps19(() => colorPicker2().getRootProps(), localProps);
   return <ColorPickerProvider value={colorPicker2}>
       <PresenceProvider value={apiPresence}>
@@ -354,10 +333,7 @@ var [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createC
 
 // src/components/color-picker/color-picker-swatch.tsx
 var ColorPickerSwatch = (props) => {
-  const [swatchProps, localProps] = createSplitProps()(props, [
-    "respectAlpha",
-    "value"
-  ]);
+  const [swatchProps, localProps] = createSplitProps()(props, ["respectAlpha", "value"]);
   const api = useColorPickerContext();
   const mergedProps = mergeProps20(() => api().getSwatchProps(swatchProps), localProps);
   return <ColorPickerSwatchPropsProvider value={swatchProps}>
@@ -385,10 +361,7 @@ var ColorPickerSwatchIndicator = (props) => {
 // src/components/color-picker/color-picker-swatch-trigger.tsx
 import { mergeProps as mergeProps23 } from "@zag-js/solid";
 var ColorPickerSwatchTrigger = (props) => {
-  const [triggerProps, localProps] = createSplitProps()(props, [
-    "value",
-    "disabled"
-  ]);
+  const [triggerProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
   const api = useColorPickerContext();
   const mergedProps = mergeProps23(() => api().getSwatchTriggerProps(triggerProps), localProps);
   return <ark.button {...mergedProps} />;
@@ -415,9 +388,7 @@ var ColorPickerTrigger = (props) => {
 import { mergeProps as mergeProps26 } from "@zag-js/solid";
 import { createMemo as createMemo2 } from "solid-js";
 var ColorPickerValueSwatch = (props) => {
-  const [{ respectAlpha }, localProps] = createSplitProps()(props, [
-    "respectAlpha"
-  ]);
+  const [{ respectAlpha }, localProps] = createSplitProps()(props, ["respectAlpha"]);
   const colorPicker2 = useColorPickerContext();
   const swatchProps = createMemo2(() => ({
     respectAlpha,

package/dist/chunk/{F3QPTRGW.jsx → 7IHVZWMT.jsx}

@@ -3,7 +3,7 @@ import {
   splitPresenceProps,
   usePresence,
   usePresenceContext
-} from "./E72NMPSK.jsx";
+} from "./A4744EEE.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -12,13 +12,16 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./D2Z5BEON.jsx";
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
+import {
+  runIfFn
+} from "./KGOB2IMX.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -155,9 +158,7 @@ var [MenuItemGroupProvider, useMenuItemGroupContext] = createContext({
 
 // src/components/menu/menu-item-group.tsx
 var MenuItemGroup = (props) => {
-  const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
-    "id"
-  ]);
+  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id"]);
   const itemGroupProps = mergeProps8({ id: createUniqueId() }, optionalItemGroupProps);
   const menu2 = useMenuContext();
   const mergedProps = mergeProps8(() => menu2().getItemGroupProps(itemGroupProps), localProps);
@@ -171,10 +172,7 @@ import { mergeProps as mergeProps9 } from "@zag-js/solid";
 var MenuItemGroupLabel = (props) => {
   const context = useMenuContext();
   const itemGroupContext = useMenuItemGroupContext();
-  const mergedProps = mergeProps9(
-    context().getItemGroupLabelProps({ htmlFor: itemGroupContext.id }),
-    props
-  );
+  const mergedProps = mergeProps9(context().getItemGroupLabelProps({ htmlFor: itemGroupContext.id }), props);
   return <ark.div {...mergedProps} />;
 };
 
@@ -238,10 +236,11 @@ var MenuRadioItem = (props) => {
 import { mergeProps as mergeProps14 } from "@zag-js/solid";
 import { createUniqueId as createUniqueId2 } from "solid-js";
 var MenuRadioItemGroup = (props) => {
-  const [optionalItemGroupProps, localProps] = createSplitProps()(
-    props,
-    ["id", "onValueChange", "value"]
-  );
+  const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
+    "id",
+    "onValueChange",
+    "value"
+  ]);
   const context = useMenuContext();
   const itemGroupProps = mergeProps14({ id: createUniqueId2() }, optionalItemGroupProps);
   const mergedProps = mergeProps14(() => context().getItemGroupProps(itemGroupProps), localProps);
@@ -252,29 +251,27 @@ var MenuRadioItemGroup = (props) => {
 
 // src/components/menu/menu-root.tsx
 import { mergeProps as mergeProps15 } from "@zag-js/solid";
-import { createEffect } from "solid-js";
+import { onMount } from "solid-js";
 
 // src/components/menu/use-menu.ts
 import * as menu from "@zag-js/menu";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo as createMemo4, createUniqueId as createUniqueId3 } from "solid-js";
-var useMenu = (props = {}) => {
+var useMenu = (props) => {
+  const id = createUniqueId3();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId3();
-  const context = createMemo4(() => ({
+  const machineProps = createMemo4(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
-    ...props
+    ...runIfFn(props)
   }));
-  const [state, send, machine2] = useMachine(menu.machine(context()), { context });
-  const api = createMemo4(() => menu.connect(state, send, normalizeProps));
+  const service = useMachine(menu.machine, machineProps);
+  const api = createMemo4(() => menu.connect(service, normalizeProps));
   return {
     api,
-    machine: machine2
+    service
   };
 };
 
@@ -300,11 +297,13 @@ var MenuRoot = (props) => {
     "aria-label",
     "closeOnSelect",
     "composite",
+    "defaultHighlightedValue",
     "defaultOpen",
     "highlightedValue",
     "id",
     "ids",
     "loopFocus",
+    "navigate",
     "onEscapeKeyDown",
     "onFocusOutside",
     "onHighlightChange",
@@ -313,7 +312,6 @@ var MenuRoot = (props) => {
     "onPointerDownOutside",
     "onSelect",
     "open",
-    "navigate",
     "positioning",
     "typeahead"
   ]);
@@ -321,14 +319,14 @@ var MenuRoot = (props) => {
   const parentMachine = useMenuMachineContext();
   const menu2 = useMenu(useMenuProps);
   const presenceApi = usePresence(mergeProps15(presenceProps, () => ({ present: menu2.api().open })));
-  createEffect(() => {
+  onMount(() => {
     if (!parentMachine) return;
-    parentApi?.().setChild(menu2.machine);
+    parentApi?.().setChild(menu2.service);
     menu2.api().setParent(parentMachine);
   });
   const triggerItemContext = () => parentApi?.().getTriggerItemProps(menu2.api());
   return <MenuTriggerItemProvider value={triggerItemContext}>
-      <MenuMachineProvider value={menu2.machine}>
+      <MenuMachineProvider value={menu2.service}>
         <MenuProvider value={menu2.api}>
           <PresenceProvider value={presenceApi}>{localProps.children}</PresenceProvider>
         </MenuProvider>
@@ -338,22 +336,20 @@ var MenuRoot = (props) => {
 
 // src/components/menu/menu-root-provider.tsx
 import { mergeProps as mergeProps16 } from "@zag-js/solid";
-import { createEffect as createEffect2 } from "solid-js";
+import { createEffect } from "solid-js";
 var MenuRootProvider = (props) => {
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
   const [presenceProps, menuProps] = splitPresenceProps(props);
-  const presenceApi = usePresence(
-    mergeProps16(presenceProps, () => ({ present: menuProps.value.api().open }))
-  );
-  createEffect2(() => {
+  const presenceApi = usePresence(mergeProps16(presenceProps, () => ({ present: menuProps.value.api().open })));
+  createEffect(() => {
     if (!parentMachine) return;
-    parentApi?.().setChild(menuProps.value.machine);
+    parentApi?.().setChild(menuProps.value.service);
     menuProps.value.api().setParent(parentMachine);
   });
   const triggerItemContext = () => parentApi?.().getTriggerItemProps(menuProps.value.api());
   return <MenuTriggerItemProvider value={triggerItemContext}>
-      <MenuMachineProvider value={menuProps.value.machine}>
+      <MenuMachineProvider value={menuProps.value.service}>
         <MenuProvider value={menuProps.value.api}>
           <PresenceProvider value={presenceApi}>{menuProps.children}</PresenceProvider>
         </MenuProvider>

package/dist/chunk/{X34KVQNW.js → 7KGMTGCS.js}

@@ -1,10 +1,11 @@
 import { createSplitProps } from './ZMHI4GDJ.js';
-import { createComponent, spread, insert, template } from 'solid-js/web';
+import { runIfFn } from './DT73WLR4.js';
+import { createComponent, template, spread, insert } from 'solid-js/web';
 import { createMemo, For, Show } from 'solid-js';
 import { highlightWord } from '@zag-js/highlight-word';
 
 var useHighlight = (props) => {
-  return createMemo(() => highlightWord(props));
+  return createMemo(() => highlightWord(runIfFn(props)));
 };
 
 // src/components/highlight/highlight.tsx

package/dist/chunk/{34MDPAG6.js → 7RR233CD.js}

@@ -1,16 +1,16 @@
-import { useControllableState } from './BSPFGETO.js';
-import { useFieldContext } from './X3BMEEJH.js';
+import { useFieldContext } from './KVVYU5Z3.js';
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './QODB3C3M.js';
-import { useLocaleContext } from './HPDOBQ3V.js';
-import { createContext } from './I5UG2QUO.js';
+import { useEnvironmentContext } from './YMMMHJJS.js';
+import { useLocaleContext } from './QEMQBM6W.js';
+import { createContext } from './TROPIN4C.js';
+import { runIfFn } from './DT73WLR4.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import * as checkbox from '@zag-js/checkbox';
 import { anatomy } from '@zag-js/checkbox';
-import { createMemo, createUniqueId } from 'solid-js';
+import { createMemo, createUniqueId, createSignal, untrack } from 'solid-js';
 
 // src/components/checkbox/use-checkbox-context.ts
 var [CheckboxProvider, useCheckboxContext] = createContext({
@@ -26,6 +26,24 @@ var CheckboxControl = (props) => {
   return createComponent(ark.div, mergedProps);
 };
 var checkboxAnatomy = anatomy.extendWith("group");
+function useControllableState(props) {
+  const [uncontrolledValue, setUncontrolledValue] = createSignal(runIfFn(props.defaultValue));
+  const controlled = createMemo(() => props.value?.() !== void 0);
+  const currentValue = createMemo(() => controlled() ? props.value?.() : uncontrolledValue());
+  const setValue = (next) => {
+    untrack(() => {
+      const nextValue = runIfFn(next, currentValue());
+      if (controlled()) {
+        return props.onChange?.(nextValue);
+      }
+      setUncontrolledValue(nextValue);
+      return props.onChange?.(nextValue);
+    });
+  };
+  return [currentValue, setValue];
+}
+
+// src/components/checkbox/use-checkbox-group.ts
 function useCheckboxGroup(props = {}) {
   const interactive = createMemo(() => !(props.disabled || props.readOnly));
   const [value, setValue] = useControllableState({
@@ -126,13 +144,14 @@ var CheckboxLabel = (props) => {
 var useCheckbox = (ownProps = {}) => {
   const checkboxGroup = useCheckboxGroupContext();
   const props = createMemo(() => {
-    return mergeProps(ownProps, checkboxGroup?.().getItemProps({ value: ownProps.value }) ?? {});
+    const resolvedProps = runIfFn(ownProps);
+    return mergeProps(resolvedProps, checkboxGroup?.().getItemProps({ value: resolvedProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
   const field = useFieldContext();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -144,11 +163,10 @@ var useCheckbox = (ownProps = {}) => {
     required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    checked: props().defaultChecked,
     ...props()
   }));
-  const [state, send] = useMachine(checkbox.machine(context()), { context });
-  return createMemo(() => checkbox.connect(state, send, normalizeProps));
+  const service = useMachine(checkbox.machine, machineProps);
+  return createMemo(() => checkbox.connect(service, normalizeProps));
 };
 
 // src/components/checkbox/checkbox-root.tsx

package/dist/chunk/{7S43DIPW.js → 7S7524Q3.js}

@@ -1,14 +1,15 @@
-import { useFieldContext } from './X3BMEEJH.js';
-import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './LCESUDZB.js';
+import { splitPresenceProps, usePresence, PresenceProvider, usePresenceContext } from './OY4ARTMM.js';
+import { useFieldContext } from './KVVYU5Z3.js';
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './QODB3C3M.js';
-import { useLocaleContext } from './HPDOBQ3V.js';
-import { createContext } from './I5UG2QUO.js';
+import { useEnvironmentContext } from './YMMMHJJS.js';
+import { useLocaleContext } from './QEMQBM6W.js';
+import { createContext } from './TROPIN4C.js';
+import { runIfFn } from './DT73WLR4.js';
 import { __export } from './ESLJRKWD.js';
-import { createComponent, mergeProps as mergeProps$1, insert, effect, template } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, template, insert, effect } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
-import { Show, createMemo, Index, createUniqueId, splitProps, createEffect } from 'solid-js';
+import { Show, createUniqueId, createMemo, Index } from 'solid-js';
 import * as select from '@zag-js/select';
 export { anatomy } from '@zag-js/select';
 
@@ -45,7 +46,7 @@ var SelectControl = (props) => {
   const mergedProps = mergeProps(() => select2().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
-var _tmpl$ = /* @__PURE__ */ template(`<option value="">`);
+var _tmpl$ = /* @__PURE__ */ template(`<option value>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<option>`);
 var SelectHiddenSelect = (props) => {
   const select2 = useSelectContext();
@@ -185,11 +186,11 @@ var SelectPositioner = (props) => {
   });
 };
 var useSelect = (props) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
   const field = useFieldContext();
-  const initialContext = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -201,28 +202,16 @@ var useSelect = (props) => {
     required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    open: props.defaultOpen,
-    value: props.defaultValue,
-    "open.controlled": props.open !== void 0,
-    ...props
+    ...runIfFn(props)
   }));
-  const context = createMemo(() => {
-    const [, restProps] = splitProps(initialContext(), ["collection"]);
-    return restProps;
-  });
-  const [state, send, service] = useMachine(select.machine(initialContext()), {
-    context
-  });
-  createEffect(() => {
-    service.setContext({ collection: props.collection });
-  });
-  return createMemo(() => select.connect(state, send, normalizeProps));
+  const service = useMachine(select.machine, machineProps);
+  return createMemo(() => select.connect(service, normalizeProps));
 };
 
 // src/components/select/select-root.tsx
 var SelectRoot = (props) => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, localProps] = createSplitProps()(selectProps, ["closeOnSelect", "composite", "collection", "defaultOpen", "defaultValue", "deselectable", "disabled", "form", "highlightedValue", "id", "ids", "invalid", "loopFocus", "multiple", "name", "onFocusOutside", "onHighlightChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onValueChange", "open", "positioning", "readOnly", "required", "scrollToIndexFn", "value"]);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ["closeOnSelect", "collection", "composite", "defaultHighlightedValue", "defaultOpen", "defaultValue", "deselectable", "disabled", "form", "highlightedValue", "id", "ids", "invalid", "loopFocus", "multiple", "name", "onFocusOutside", "onHighlightChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onValueChange", "open", "positioning", "readOnly", "required", "scrollToIndexFn", "value"]);
   const select2 = useSelect(useSelectProps);
   const presenceApi = usePresence(mergeProps(() => ({
     present: select2().open

package/dist/chunk/{E72NMPSK.jsx → A4744EEE.jsx}

@@ -1,6 +1,6 @@
 import {
   splitRenderStrategyProps
-} from "./5ONYCKM3.jsx";
+} from "./NEBB7COJ.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,32 +9,27 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
+import {
+  runIfFn
+} from "./KGOB2IMX.jsx";
 
 // src/components/presence/presence.tsx
 import { mergeProps } from "@zag-js/solid";
 import { Show } from "solid-js";
 
 // src/components/presence/split-presence-props.ts
-var splitPresenceProps = (props) => createSplitProps()(props, [
-  "immediate",
-  "lazyMount",
-  "onExitComplete",
-  "present",
-  "unmountOnExit"
-]);
+var splitPresenceProps = (props) => createSplitProps()(props, ["immediate", "lazyMount", "onExitComplete", "present", "unmountOnExit"]);
 
 // src/components/presence/use-presence.ts
 import * as presence from "@zag-js/presence";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createEffect, createMemo, createSignal } from "solid-js";
 var usePresence = (props) => {
-  const [renderStrategyProps, context] = splitRenderStrategyProps(props);
+  const [renderStrategyProps, context] = splitRenderStrategyProps(runIfFn(props));
   const [wasEverPresent, setWasEverPresent] = createSignal(false);
-  const [state, send] = useMachine(presence.machine(context), {
-    context
-  });
-  const api = createMemo(() => presence.connect(state, send, normalizeProps));
+  const service = useMachine(presence.machine, props);
+  const api = createMemo(() => presence.connect(service, normalizeProps));
   createEffect(() => {
     const present = api().present;
     if (present) setWasEverPresent(true);