@ark-ui/solid 4.10.2 → 5.1.0

package/dist/chunk/{LVPQ6GR4.js → GMNTJ5KE.js}

@@ -1,8 +1,9 @@
 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 } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
@@ -30,19 +31,18 @@ var SplitterResizeTrigger = (props) => {
   const mergedProps = mergeProps(() => api().getResizeTriggerProps(resizeTriggerProps), restProps);
   return createComponent(ark.button, mergedProps);
 };
-var useSplitter = (props = {}) => {
+var useSplitter = (props) => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    size: props.defaultSize,
-    ...props
+    ...runIfFn(props)
   }));
-  const [state, send] = useMachine(splitter.machine(context()), { context });
-  return createMemo(() => splitter.connect(state, send, normalizeProps));
+  const service = useMachine(splitter.machine, machineProps);
+  return createMemo(() => splitter.connect(service, normalizeProps));
 };
 
 // src/components/splitter/splitter-root.tsx

package/dist/chunk/{WPFSEVTX.js → I2RQ2435.js}

@@ -1,17 +1,18 @@
-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 * as colorPicker from '@zag-js/color-picker';
 import { anatomy } from '@zag-js/color-picker';
 export { parse } from '@zag-js/color-picker';
 import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
-import { Show, Index, createUniqueId, createMemo } from 'solid-js';
+import { Show, createMemo, Index, createUniqueId } from 'solid-js';
 
 // src/components/color-picker/use-color-picker-area-props-context.ts
 var [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext({
@@ -194,12 +195,12 @@ var ColorPickerPositioner = (props) => {
     }
   });
 };
-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,
@@ -211,19 +212,16 @@ 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(mergeProps(presenceProps, () => ({
     present: api().open

package/dist/chunk/{AIQFNVCU.jsx → IKA3JJFV.jsx}

@@ -6,13 +6,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";
@@ -52,11 +55,7 @@ var [RadioGroupItemPropsProvider, useRadioGroupItemPropsContext] = createContext
 
 // src/components/radio-group/radio-group-item.tsx
 var RadioGroupItem = (props) => {
-  const [itemProps, localProps] = createSplitProps()(props, [
-    "value",
-    "disabled",
-    "invalid"
-  ]);
+  const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled", "invalid"]);
   const radioGroup = useRadioGroupContext();
   const mergedProps = mergeProps2(() => radioGroup().getItemProps(itemProps), localProps);
   const itemState = createMemo(() => radioGroup().getItemState(itemProps));
@@ -112,21 +111,18 @@ import { mergeProps as mergeProps7 } from "@zag-js/solid";
 import * as radio from "@zag-js/radio-group";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo as createMemo2, createUniqueId } from "solid-js";
-var useRadioGroup = (props = {}) => {
+var useRadioGroup = (props) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
-  const context = createMemo2(() => ({
+  const machineProps = createMemo2(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    value: props.defaultValue,
-    ...props
+    ...runIfFn(props)
   }));
-  const [state, send] = useMachine(radio.machine(context()), {
-    context
-  });
-  return createMemo2(() => radio.connect(state, send, normalizeProps));
+  const service = useMachine(radio.machine, machineProps);
+  return createMemo2(() => radio.connect(service, normalizeProps));
 };
 
 // src/components/radio-group/radio-group-root.tsx
@@ -153,9 +149,7 @@ var RadioGroupRoot = (props) => {
 // src/components/radio-group/radio-group-root-provider.tsx
 import { mergeProps as mergeProps8 } from "@zag-js/solid";
 var RadioGroupRootProvider = (props) => {
-  const [{ value: radioGroup }, localProps] = createSplitProps()(props, [
-    "value"
-  ]);
+  const [{ value: radioGroup }, localProps] = createSplitProps()(props, ["value"]);
   const mergedProps = mergeProps8(() => radioGroup().getRootProps(), localProps);
   return <RadioGroupProvider value={radioGroup}>
       <ark.div {...mergedProps} />

package/dist/chunk/{3O5VTKDF.jsx → IYMTFLF3.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";
@@ -158,10 +161,7 @@ import { mergeProps as mergeProps8 } from "@zag-js/solid";
 var SelectItemGroupLabel = (props) => {
   const select2 = useSelectContext();
   const itemGroupProps = useSelectItemGroupPropsContext();
-  const mergedProps = mergeProps8(
-    () => select2().getItemGroupLabelProps({ htmlFor: itemGroupProps.id }),
-    props
-  );
+  const mergedProps = mergeProps8(() => select2().getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
   return <ark.div {...mergedProps} />;
 };
 
@@ -217,13 +217,13 @@ import { mergeProps as mergeProps14 } from "@zag-js/solid";
 // src/components/select/use-select.ts
 import * as select from "@zag-js/select";
 import { normalizeProps, useMachine } from "@zag-js/solid";
-import { createEffect, createMemo as createMemo3, createUniqueId as createUniqueId2, splitProps } from "solid-js";
+import { createMemo as createMemo3, createUniqueId as createUniqueId2 } from "solid-js";
 var useSelect = (props) => {
+  const id = createUniqueId2();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId2();
   const field = useFieldContext();
-  const initialContext = createMemo3(() => ({
+  const machineProps = createMemo3(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -235,22 +235,10 @@ 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 = createMemo3(() => {
-    const [, restProps] = splitProps(initialContext(), ["collection"]);
-    return restProps;
-  });
-  const [state, send, service] = useMachine(select.machine(initialContext()), {
-    context
-  });
-  createEffect(() => {
-    service.setContext({ collection: props.collection });
-  });
-  return createMemo3(() => select.connect(state, send, normalizeProps));
+  const service = useMachine(select.machine, machineProps);
+  return createMemo3(() => select.connect(service, normalizeProps));
 };
 
 // src/components/select/select-root.tsx
@@ -258,8 +246,9 @@ var SelectRoot = (props) => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
   const [useSelectProps, localProps] = createSplitProps()(selectProps, [
     "closeOnSelect",
-    "composite",
     "collection",
+    "composite",
+    "defaultHighlightedValue",
     "defaultOpen",
     "defaultValue",
     "deselectable",
@@ -299,9 +288,7 @@ var SelectRoot = (props) => {
 import { mergeProps as mergeProps15 } from "@zag-js/solid";
 var SelectRootProvider = (props) => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [{ value: select2 }, localProps] = createSplitProps()(selectProps, [
-    "value"
-  ]);
+  const [{ value: select2 }, localProps] = createSplitProps()(selectProps, ["value"]);
   const presence = usePresence(mergeProps15(() => ({ present: select2().open }), presenceProps));
   const mergedProps = mergeProps15(() => select2().getRootProps(), localProps);
   return <SelectProvider value={select2}>

package/dist/chunk/{EHJDQTTW.jsx → JRMTU7C7.jsx}

@@ -3,17 +3,10 @@ import {
 } from "./DOBZPYAN.jsx";
 import {
   EnvironmentProvider
-} from "./5O4RWSWO.jsx";
+} from "./D2Z5BEON.jsx";
 
 // src/components/frame/frame.tsx
-import {
-  Show,
-  createEffect as createEffect2,
-  createMemo,
-  createSignal,
-  onCleanup as onCleanup2,
-  splitProps
-} from "solid-js";
+import { Show, createEffect as createEffect2, createMemo, createSignal, onCleanup as onCleanup2, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 
 // src/components/frame/frame-content.tsx
@@ -38,13 +31,7 @@ function getMountNode(frame) {
   return doc.body.querySelector(".frame-root") || doc.body;
 }
 var Frame = (props) => {
-  const [frameProps, localProps] = splitProps(props, [
-    "children",
-    "head",
-    "onMount",
-    "onUnmount",
-    "srcdoc"
-  ]);
+  const [frameProps, localProps] = splitProps(props, ["children", "head", "onMount", "onUnmount", "srcdoc"]);
   const srcdoc = createMemo(() => frameProps.srcdoc ?? initialSrcDoc);
   const [frameRef, setFrameRef] = createSignal(null);
   const [mountNode, setMountNode] = createSignal(null);

package/dist/chunk/{VARNCRUN.js → JUYBJNX6.js}

@@ -1,13 +1,14 @@
-import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './LCESUDZB.js';
+import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './OY4ARTMM.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 } 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';
 
@@ -198,23 +199,21 @@ var MenuRadioItemGroup = (props) => {
     }
   });
 };
-var useMenu = (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
+    ...runIfFn(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 +234,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 +252,7 @@ var MenuRoot = (props) => {
     get children() {
       return createComponent(MenuMachineProvider, {
         get value() {
-          return menu2.machine;
+          return menu2.service;
         },
         get children() {
           return createComponent(MenuProvider, {
@@ -283,7 +282,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 +291,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/{FNEB2RAF.js → JWXGONCE.js}

@@ -1,8 +1,9 @@
 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';
@@ -69,7 +70,7 @@ var StepsItem = (props) => {
       return createComponent(StepsItemProvider, {
         value: itemState,
         get children() {
-          return createComponent(ark.li, mergedProps);
+          return createComponent(ark.div, mergedProps);
         }
       });
     }
@@ -84,7 +85,7 @@ StepsItemContext.displayName = "StepsItemContext";
 var StepsList = (props) => {
   const steps2 = useStepsContext();
   const mergedProps = mergeProps(() => steps2().getListProps(), props);
-  return createComponent(ark.ol, mergedProps);
+  return createComponent(ark.div, mergedProps);
 };
 var StepsNextTrigger = (props) => {
   const steps2 = useStepsContext();
@@ -101,19 +102,18 @@ var StepsProgress = (props) => {
   const mergedProps = mergeProps(() => steps2().getProgressProps(), props);
   return createComponent(ark.div, mergedProps);
 };
-function useSteps(props = {}) {
+function useSteps(props) {
+  const id = createUniqueId();
   const environment = useEnvironmentContext();
   const locale = useLocaleContext();
-  const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    step: props.defaultStep,
-    ...props
+    ...runIfFn(props)
   }));
-  const [state, send] = useMachine(steps.machine(context()), { context });
-  return createMemo(() => steps.connect(state, send, normalizeProps));
+  const service = useMachine(steps.machine, machineProps);
+  return createMemo(() => steps.connect(service, normalizeProps));
 }
 
 // src/components/steps/steps-root.tsx

package/dist/chunk/{SN5TXTB6.jsx → JZ7ZQZT4.jsx}

@@ -1,6 +1,3 @@
-import {
-  useControllableState
-} from "./52WUF3CY.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,7 +6,7 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -37,13 +34,13 @@ import { mergeProps } from "@zag-js/solid";
 import { Show } from "solid-js";
 var ToggleIndicator = (props) => {
   const { children, fallback, ...restProps } = props;
-  const toggle = useToggleContext();
-  const mergedProps = mergeProps(() => toggle().getIndicatorProps(), restProps);
+  const toggle2 = useToggleContext();
+  const mergedProps = mergeProps(() => toggle2().getIndicatorProps(), restProps);
   return <ark.div {...mergedProps}>
       {
     /* @ts-ignore */
   }
-      <Show when={toggle().pressed} fallback={fallback}>
+      <Show when={toggle2().pressed} fallback={fallback}>
         {children}
       </Show>
     </ark.div>;
@@ -53,51 +50,12 @@ var ToggleIndicator = (props) => {
 import { mergeProps as mergeProps2 } from "@zag-js/solid";
 
 // src/components/toggle/use-toggle.ts
-import { dataAttr } from "@zag-js/dom-query";
+import { normalizeProps, useMachine } from "@zag-js/solid";
+import * as toggle from "@zag-js/toggle";
 import { createMemo } from "solid-js";
-
-// src/components/toggle/toggle.anatomy.ts
-import { createAnatomy } from "@zag-js/anatomy";
-var toggleAnatomy = createAnatomy("toggle", ["root", "indicator"]);
-var parts = toggleAnatomy.build();
-
-// src/components/toggle/use-toggle.ts
 function useToggle(props) {
-  const { defaultPressed, pressed, onPressedChange, disabled } = props;
-  const [pressedState, setPressedState] = useControllableState({
-    defaultValue: !!defaultPressed,
-    value: pressed,
-    onChange: onPressedChange
-  });
-  return createMemo(() => ({
-    pressed: pressedState(),
-    disabled: !!disabled,
-    setPressed: setPressedState,
-    getRootProps() {
-      return {
-        ...parts.root.attrs,
-        type: "button",
-        disabled,
-        "aria-pressed": pressedState(),
-        "data-state": pressedState() ? "on" : "off",
-        "data-pressed": dataAttr(pressedState()),
-        "data-disabled": dataAttr(disabled),
-        onClick(event) {
-          if (event.defaultPrevented) return;
-          if (disabled) return;
-          setPressedState(!pressedState());
-        }
-      };
-    },
-    getIndicatorProps() {
-      return {
-        ...parts.indicator.attrs,
-        "data-disabled": dataAttr(disabled),
-        "data-pressed": dataAttr(pressedState()),
-        "data-state": pressedState() ? "on" : "off"
-      };
-    }
-  }));
+  const service = useMachine(toggle.machine, props);
+  return createMemo(() => toggle.connect(service, normalizeProps));
 }
 
 // src/components/toggle/toggle-root.tsx
@@ -108,19 +66,24 @@ var ToggleRoot = (props) => {
     "disabled",
     "onPressedChange"
   ]);
-  const toggle = useToggle(useToggleProps);
-  const mergedProps = mergeProps2(() => toggle().getRootProps(), localProps);
-  return <ToggleProvider value={toggle}>
+  const toggle2 = useToggle(useToggleProps);
+  const mergedProps = mergeProps2(() => toggle2().getRootProps(), localProps);
+  return <ToggleProvider value={toggle2}>
       <button {...mergedProps} />
     </ToggleProvider>;
 };
 
+// src/components/toggle/toggle.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var toggleAnatomy = createAnatomy("toggle", ["root", "indicator"]);
+var parts = toggleAnatomy.build();
+
 export {
   useToggleContext,
   ToggleContext,
   ToggleIndicator,
-  toggleAnatomy,
   useToggle,
   ToggleRoot,
+  toggleAnatomy,
   toggle_exports
 };