@ark-ui/solid 4.10.1 → 5.0.0

package/README.md

@@ -6,9 +6,8 @@
 
 # Welcome to Ark UI
 
-Ark UI is a headless, open-source UI library with over 45+ components designed for building
-reusable, scalable Design Systems. It supports a wide range of JavaScript frameworks, offering
-dedciated packages for each supported framework.
+Ark UI is a headless, open-source UI library with over 45+ components designed for building reusable, scalable Design
+Systems. It supports a wide range of JavaScript frameworks, offering dedciated packages for each supported framework.
 
 ## Supported Frameworks
 
@@ -101,8 +100,7 @@ export const MySlider = () => {
 
 ## Documentation
 
-For more detailed documentation and examples, please visit the
-[official documentation](https://ark-ui.com/).
+For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/).
 
 ## Roadmap
 
@@ -111,10 +109,9 @@ You can request, vote for, and check upcoming features on our [roadmap](https://
 ## Contribution
 
 We welcome contributions to Ark UI. Please read our
-[contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more
-information on how to contribute.
+[contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to
+contribute.
 
 ## License
 
-This project is licensed under the terms of the
-[MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).

package/dist/chunk/{E72NMPSK.jsx → 2FYSIKNK.jsx}

@@ -1,6 +1,6 @@
 import {
   splitRenderStrategyProps
-} from "./5ONYCKM3.jsx";
+} from "./NEBB7COJ.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,20 +9,14 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.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";
@@ -31,10 +25,8 @@ import { createEffect, createMemo, createSignal } from "solid-js";
 var usePresence = (props) => {
   const [renderStrategyProps, context] = splitRenderStrategyProps(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);

package/dist/chunk/{2ILK4IFM.jsx → 2TEQVFZN.jsx}

@@ -1,6 +1,6 @@
 import {
   useFieldContext
-} from "./MSHQY44G.jsx";
+} from "./XHA6B6L2.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,13 +9,13 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./BPYAMTER.jsx";
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -42,14 +42,9 @@ var FileUploadContext = (props) => props.children(useFileUploadContext());
 // src/components/file-upload/file-upload-dropzone.tsx
 import { mergeProps as mergeProps2 } from "@zag-js/solid";
 var FileUploadDropzone = (props) => {
-  const [dropzoneProps, localProps] = createSplitProps()(props, [
-    "disableClick"
-  ]);
+  const [dropzoneProps, localProps] = createSplitProps()(props, ["disableClick"]);
   const fileUpload2 = useFileUploadContext();
-  const mergedProps = mergeProps2(
-    () => fileUpload2().getDropzoneProps(dropzoneProps),
-    localProps
-  );
+  const mergedProps = mergeProps2(() => fileUpload2().getDropzoneProps(dropzoneProps), localProps);
   return <ark.div {...mergedProps} />;
 };
 
@@ -125,19 +120,13 @@ var FileUploadItemPreviewImage = (props) => {
   const itemProps = useFileUploadItemPropsContext();
   const [url, setUrl] = createSignal("");
   createEffect(() => {
-    const cleanup = fileUpload2().createFileUrl(
-      itemProps.file,
-      (url2) => setUrl(url2)
-    );
+    const cleanup = fileUpload2().createFileUrl(itemProps.file, (url2) => setUrl(url2));
     onCleanup(cleanup);
   });
-  const mergedProps = mergeProps9(
-    () => fileUpload2().getItemPreviewImageProps({ ...itemProps, url: url() }),
-    props
-  );
+  const mergedProps = mergeProps9(() => fileUpload2().getItemPreviewImageProps({ ...itemProps, url: url() }), props);
   return <Show when={url()}>
-			<ark.img {...mergedProps} />
-		</Show>;
+      <ark.img {...mergedProps} />
+    </Show>;
 };
 
 // src/components/file-upload/file-upload-item-size-text.tsx
@@ -165,11 +154,11 @@ import * as fileUpload from "@zag-js/file-upload";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo, createUniqueId } from "solid-js";
 var useFileUpload = (props = {}) => {
+  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,
@@ -177,13 +166,14 @@ var useFileUpload = (props = {}) => {
     },
     dir: locale().dir,
     disabled: field?.().disabled,
+    locale: locale().locale,
     required: field?.().required,
     invalid: field?.().invalid,
     getRootNode: environment().getRootNode,
     ...props
   }));
-  const [state, send] = useMachine(fileUpload.machine(context()), { context });
-  return createMemo(() => fileUpload.connect(state, send, normalizeProps));
+  const service = useMachine(fileUpload.machine, machineProps);
+  return createMemo(() => fileUpload.connect(service, normalizeProps));
 };
 
 // src/components/file-upload/file-upload-root.tsx
@@ -220,9 +210,7 @@ var FileUploadRoot = (props) => {
 // src/components/file-upload/file-upload-root-provider.tsx
 import { mergeProps as mergeProps13 } from "@zag-js/solid";
 var FileUploadRootProvider = (props) => {
-  const [{ value: fileUpload2 }, localProps] = createSplitProps()(props, [
-    "value"
-  ]);
+  const [{ value: fileUpload2 }, localProps] = createSplitProps()(props, ["value"]);
   const mergedProps = mergeProps13(() => fileUpload2().getRootProps(), localProps);
   return <FileUploadProvider value={fileUpload2}>
       <ark.div {...mergedProps} />

package/dist/chunk/{2H4WHODR.js → 3CUJRNYI.js}

@@ -1,8 +1,8 @@
 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 './6MQ6S5JP.js';
+import { useLocaleContext } from './QEMQBM6W.js';
+import { createContext } from './TROPIN4C.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
@@ -81,20 +81,17 @@ var RadioGroupLabel = (props) => {
   return createComponent(ark.label, mergedProps);
 };
 var useRadioGroup = (props = {}) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    value: props.defaultValue,
     ...props
   }));
-  const [state, send] = useMachine(radio.machine(context()), {
-    context
-  });
-  return createMemo(() => radio.connect(state, send, normalizeProps));
+  const service = useMachine(radio.machine, machineProps);
+  return createMemo(() => radio.connect(service, normalizeProps));
 };
 
 // src/components/radio-group/radio-group-root.tsx

package/dist/chunk/{MRQ2UYM4.jsx → 3VB4UGEY.jsx}

@@ -6,13 +6,13 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./BPYAMTER.jsx";
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -71,15 +71,14 @@ var usePagination = (props) => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    page: props.defaultPage,
     ...props
   }));
-  const [state, send] = useMachine(pagination.machine(context()), { context });
-  return createMemo(() => pagination.connect(state, send, normalizeProps));
+  const service = useMachine(pagination.machine, machineProps);
+  return createMemo(() => pagination.connect(service, normalizeProps));
 };
 
 // src/components/pagination/pagination-root.tsx
@@ -87,6 +86,7 @@ var PaginationRoot = (props) => {
   const [usePaginationProps, localProps] = createSplitProps()(props, [
     "count",
     "defaultPage",
+    "defaultPageSize",
     "id",
     "ids",
     "onPageChange",
@@ -107,9 +107,7 @@ var PaginationRoot = (props) => {
 // src/components/pagination/pagination-root-provider.tsx
 import { mergeProps as mergeProps6 } from "@zag-js/solid";
 var PaginationRootProvider = (props) => {
-  const [{ value: pagination2 }, localProps] = createSplitProps()(props, [
-    "value"
-  ]);
+  const [{ value: pagination2 }, localProps] = createSplitProps()(props, ["value"]);
   const mergedProps = mergeProps6(() => pagination2().getRootProps(), localProps);
   return <PaginationProvider value={pagination2}>
       <ark.nav {...mergedProps} />

package/dist/chunk/{ATMUKDFF.js → 44YJVOL2.js}

@@ -1,9 +1,9 @@
-import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './LCESUDZB.js';
+import { splitPresenceProps, usePresence, PresenceProvider, usePresenceContext } from './WRLQ7Y6E.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 './6MQ6S5JP.js';
+import { useLocaleContext } from './QEMQBM6W.js';
+import { createContext } from './TROPIN4C.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
@@ -61,22 +61,20 @@ var useHoverCard = (props = {}) => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   }));
-  const [state, send] = useMachine(hoverCard.machine(context()), { context });
-  return createMemo(() => hoverCard.connect(state, send, normalizeProps));
+  const service = useMachine(hoverCard.machine, machineProps);
+  return createMemo(() => hoverCard.connect(service, normalizeProps));
 };
 
 // src/components/hover-card/hover-card-root.tsx
 var HoverCardRoot = (props) => {
   const [presenceProps, hoverCardProps] = splitPresenceProps(props);
-  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ["closeDelay", "defaultOpen", "id", "ids", "onOpenChange", "open", "openDelay", "positioning"]);
+  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ["closeDelay", "defaultOpen", "id", "ids", "onFocusOutside", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "open", "openDelay", "positioning"]);
   const api = useHoverCard(useHoverCardProps);
   const apiPresence = usePresence(mergeProps(presenceProps, () => ({
     present: api().open

package/dist/chunk/{RVUYRERH.jsx → 4D76BVTD.jsx}

@@ -1,9 +1,6 @@
-import {
-  useControllableState
-} from "./52WUF3CY.jsx";
 import {
   useFieldContext
-} from "./MSHQY44G.jsx";
+} from "./XHA6B6L2.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -11,14 +8,15 @@ import {
   ark
 } from "./UFYZ7HLU.jsx";
 import {
+  runIfFn,
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./BPYAMTER.jsx";
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -45,15 +43,36 @@ import { anatomy } from "@zag-js/checkbox";
 var checkboxAnatomy = anatomy.extendWith("group");
 
 // src/components/checkbox/use-checkbox-group.ts
-import { createMemo } from "solid-js";
+import { createMemo as createMemo2 } from "solid-js";
+
+// src/utils/use-controllable-state.ts
+import { createMemo, createSignal, untrack } from "solid-js";
+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 interactive = createMemo2(() => !(props.disabled || props.readOnly));
   const [value, setValue] = useControllableState({
     value: props.value,
     defaultValue: props.defaultValue || [],
     onChange: props.onValueChange
   });
-  return createMemo(() => {
+  return createMemo2(() => {
     const isChecked = (val) => {
       return value().some((v) => String(v) === String(val));
     };
@@ -157,17 +176,17 @@ import { mergeProps as mergeProps6 } from "@zag-js/solid";
 // src/components/checkbox/use-checkbox.ts
 import * as checkbox from "@zag-js/checkbox";
 import { mergeProps as mergeProps5, normalizeProps, useMachine } from "@zag-js/solid";
-import { createMemo as createMemo2, createUniqueId } from "solid-js";
+import { createMemo as createMemo3, createUniqueId } from "solid-js";
 var useCheckbox = (ownProps = {}) => {
   const checkboxGroup = useCheckboxGroupContext();
-  const props = createMemo2(() => {
+  const props = createMemo3(() => {
     return mergeProps5(ownProps, checkboxGroup?.().getItemProps({ value: ownProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
   const field = useFieldContext();
-  const context = createMemo2(() => ({
+  const machineProps = createMemo3(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -179,11 +198,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 createMemo2(() => checkbox.connect(state, send, normalizeProps));
+  const service = useMachine(checkbox.machine, machineProps);
+  return createMemo3(() => checkbox.connect(service, normalizeProps));
 };
 
 // src/components/checkbox/checkbox-root.tsx

package/dist/chunk/{VARNCRUN.js → 4E5OPUFZ.js}

@@ -1,13 +1,13 @@
-import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './LCESUDZB.js';
+import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './WRLQ7Y6E.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 './6MQ6S5JP.js';
+import { useLocaleContext } from './QEMQBM6W.js';
+import { createContext } from './TROPIN4C.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
-import { createMemo, Show, createUniqueId, createEffect } from 'solid-js';
+import { createEffect, onMount, createUniqueId, createMemo, Show } from 'solid-js';
 import * as menu from '@zag-js/menu';
 export { anatomy } from '@zag-js/menu';
 
@@ -199,22 +199,20 @@ var MenuRadioItemGroup = (props) => {
   });
 };
 var useMenu = (props = {}) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   }));
-  const [state, send, machine2] = useMachine(menu.machine(context()), { context });
-  const api = createMemo(() => menu.connect(state, send, normalizeProps));
+  const service = useMachine(menu.machine, machineProps);
+  const api = createMemo(() => menu.connect(service, normalizeProps));
   return {
     api,
-    machine: machine2
+    service
   };
 };
 
@@ -235,16 +233,16 @@ var [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
 // src/components/menu/menu-root.tsx
 var MenuRoot = (props) => {
   const [presenceProps, menuProps] = splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps()(menuProps, ["anchorPoint", "aria-label", "closeOnSelect", "composite", "defaultOpen", "highlightedValue", "id", "ids", "loopFocus", "onEscapeKeyDown", "onFocusOutside", "onHighlightChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onSelect", "open", "navigate", "positioning", "typeahead"]);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, ["anchorPoint", "aria-label", "closeOnSelect", "composite", "defaultHighlightedValue", "defaultOpen", "highlightedValue", "id", "ids", "loopFocus", "navigate", "onEscapeKeyDown", "onFocusOutside", "onHighlightChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onSelect", "open", "positioning", "typeahead"]);
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
   const menu2 = useMenu(useMenuProps);
   const presenceApi = usePresence(mergeProps(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());
@@ -253,7 +251,7 @@ var MenuRoot = (props) => {
     get children() {
       return createComponent(MenuMachineProvider, {
         get value() {
-          return menu2.machine;
+          return menu2.service;
         },
         get children() {
           return createComponent(MenuProvider, {
@@ -283,7 +281,7 @@ var MenuRootProvider = (props) => {
   })));
   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());
@@ -292,7 +290,7 @@ var MenuRootProvider = (props) => {
     get children() {
       return createComponent(MenuMachineProvider, {
         get value() {
-          return menuProps.value.machine;
+          return menuProps.value.service;
         },
         get children() {
           return createComponent(MenuProvider, {

package/dist/chunk/{5JS7LFUQ.js → 4GOBFWQB.js}

@@ -1,7 +1,7 @@
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './QODB3C3M.js';
-import { createContext } from './I5UG2QUO.js';
+import { useEnvironmentContext } from './6MQ6S5JP.js';
+import { createContext } from './TROPIN4C.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
@@ -17,8 +17,9 @@ var [TimerProvider, useTimerContext] = createContext({
 
 // src/components/timer/timer-action-trigger.tsx
 var TimerActionTrigger = (props) => {
+  const [actionTriggerProps, localProps] = createSplitProps()(props, ["action"]);
   const timer2 = useTimerContext();
-  const mergedProps = mergeProps(() => timer2().getActionTriggerProps(props), props);
+  const mergedProps = mergeProps(() => timer2().getActionTriggerProps(actionTriggerProps), localProps);
   return createComponent(ark.button, mergedProps);
 };
 var TimerArea = (props) => {
@@ -45,15 +46,15 @@ var TimerItem = (props) => {
   }));
 };
 var useTimer = (props = {}) => {
-  const env = useEnvironmentContext();
   const id = createUniqueId();
-  const context = createMemo(() => ({
+  const environment = useEnvironmentContext();
+  const machineProps = createMemo(() => ({
     id,
-    getRootNode: env().getRootNode,
+    getRootNode: environment().getRootNode,
     ...props
   }));
-  const [state, send] = useMachine(timer.machine(context()), { context });
-  return createMemo(() => timer.connect(state, send, normalizeProps));
+  const service = useMachine(timer.machine, machineProps);
+  return createMemo(() => timer.connect(service, normalizeProps));
 };
 
 // src/components/timer/timer-root.tsx

package/dist/chunk/{RAEDLHD3.js → 55NHLACH.js}

@@ -1,8 +1,8 @@
 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 './6MQ6S5JP.js';
+import { useLocaleContext } from './QEMQBM6W.js';
+import { createContext } from './TROPIN4C.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
@@ -11,12 +11,10 @@ import { anatomy } from '@zag-js/radio-group';
 import { createMemo, createUniqueId } from 'solid-js';
 
 // src/components/segment-group/use-segment-group-context.ts
-var [SegmentGroupProvider, useSegmentGroupContext] = createContext(
-  {
-    hookName: "useSegmentGroupContext",
-    providerName: "<SegmentGroupProvider />"
-  }
-);
+var [SegmentGroupProvider, useSegmentGroupContext] = createContext({
+  hookName: "useSegmentGroupContext",
+  providerName: "<SegmentGroupProvider />"
+});
 
 // src/components/segment-group/segment-group-context.tsx
 var SegmentGroupContext = (props) => props.children(useSegmentGroupContext());
@@ -87,18 +85,17 @@ var SegmentGroupLabel = (props) => {
   return createComponent(ark.label, mergedProps);
 };
 var useSegmentGroup = (props = {}) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    value: props.defaultValue,
     ...props
   }));
-  const [state, send] = useMachine(segmentGroup.machine(context()), { context });
-  return createMemo(() => segmentGroup.connect(state, send, normalizeProps));
+  const service = useMachine(segmentGroup.machine, machineProps);
+  return createMemo(() => segmentGroup.connect(service, normalizeProps));
 };
 
 // src/components/segment-group/segment-group-root.tsx