@ark-ui/solid 4.10.2 → 5.0.0

package/dist/chunk/{PSLLOEMD.js → QKFZ3XTM.js}

@@ -1,14 +1,14 @@
-import { useFieldContext } from './X3BMEEJH.js';
-import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './LCESUDZB.js';
+import { useFieldContext } from './KMFRZGLF.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, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
-import { Show, createMemo, createUniqueId, splitProps, createEffect } from 'solid-js';
+import { Show, createUniqueId, createMemo } from 'solid-js';
 import * as combobox from '@zag-js/combobox';
 export { anatomy } from '@zag-js/combobox';
 
@@ -57,12 +57,10 @@ var ComboboxInput = (props) => {
 };
 
 // src/components/combobox/use-combobox-item-context.ts
-var [ComboboxItemProvider, useComboboxItemContext] = createContext(
-  {
-    hookName: "useComboboxItemContext",
-    providerName: "<ComboboxItemProvider />"
-  }
-);
+var [ComboboxItemProvider, useComboboxItemContext] = createContext({
+  hookName: "useComboboxItemContext",
+  providerName: "<ComboboxItemProvider />"
+});
 
 // src/components/combobox/use-combobox-item-props-context.ts
 var [ComboboxItemPropsProvider, useComboboxItemPropsContext] = createContext({
@@ -161,7 +159,7 @@ var useCombobox = (props) => {
   const environment = useEnvironmentContext();
   const id = createUniqueId();
   const field = useFieldContext();
-  const initialContext = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -173,28 +171,16 @@ var useCombobox = (props) => {
     invalid: field?.().invalid,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    open: props.defaultOpen,
-    value: props.defaultValue,
-    "open.controlled": props.open !== void 0,
     ...props
   }));
-  const context = createMemo(() => {
-    const [, restProps] = splitProps(initialContext(), ["collection"]);
-    return restProps;
-  });
-  const [state, send, service] = useMachine(combobox.machine(initialContext()), {
-    context
-  });
-  createEffect(() => {
-    service.setContext({ collection: props.collection });
-  });
-  return createMemo(() => combobox.connect(state, send, normalizeProps));
+  const service = useMachine(combobox.machine, machineProps);
+  return createMemo(() => combobox.connect(service, normalizeProps));
 };
 
 // src/components/combobox/combobox-root.tsx
 var ComboboxRoot = (props) => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ["allowCustomValue", "autoFocus", "closeOnSelect", "collection", "composite", "defaultOpen", "defaultValue", "disabled", "disableLayer", "form", "highlightedValue", "id", "ids", "inputBehavior", "inputValue", "invalid", "loopFocus", "multiple", "name", "navigate", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onOpenChange", "onOpenChange", "onPointerDownOutside", "onValueChange", "open", "openOnChange", "openOnClick", "openOnKeyPress", "placeholder", "positioning", "readOnly", "required", "scrollToIndexFn", "selectionBehavior", "translations", "value"]);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ["allowCustomValue", "autoFocus", "closeOnSelect", "collection", "composite", "defaultHighlightedValue", "defaultInputValue", "defaultOpen", "defaultValue", "disabled", "disableLayer", "form", "highlightedValue", "id", "ids", "inputBehavior", "inputValue", "invalid", "loopFocus", "multiple", "name", "navigate", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onOpenChange", "onOpenChange", "onPointerDownOutside", "onValueChange", "open", "openOnChange", "openOnClick", "openOnKeyPress", "placeholder", "positioning", "readOnly", "required", "scrollToIndexFn", "selectionBehavior", "translations", "value"]);
   const api = useCombobox(useComboboxProps);
   const apiPresence = usePresence(mergeProps(presenceProps, () => ({
     present: api().open

package/dist/chunk/{IZC6PKGT.jsx → QZQUUXCF.jsx}

@@ -3,12 +3,12 @@ import {
   splitPresenceProps,
   usePresence,
   usePresenceContext
-} from "./E72NMPSK.jsx";
+} from "./2FYSIKNK.jsx";
 import {
   RenderStrategyProvider,
   splitRenderStrategyProps,
   useRenderStrategyContext
-} from "./5ONYCKM3.jsx";
+} from "./NEBB7COJ.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -17,13 +17,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";
@@ -108,19 +108,17 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo, createUniqueId } from "solid-js";
 var useDialog = (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] = useMachine(dialog.machine(context()), { context });
-  return createMemo(() => dialog.connect(state, send, normalizeProps));
+  const service = useMachine(dialog.machine, machineProps);
+  return createMemo(() => dialog.connect(service, normalizeProps));
 };
 
 // src/components/dialog/dialog-root.tsx
@@ -163,9 +161,7 @@ import { mergeProps as mergeProps7 } from "@zag-js/solid";
 var DialogRootProvider = (props) => {
   const [presenceProps, dialogProps] = splitPresenceProps(props);
   const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
-  const apiPresence = usePresence(
-    mergeProps7(presenceProps, () => ({ present: dialogProps.value().open }))
-  );
+  const apiPresence = usePresence(mergeProps7(presenceProps, () => ({ present: dialogProps.value().open })));
   return <DialogProvider value={dialogProps.value}>
       <RenderStrategyProvider value={renderStrategyProps}>
         <PresenceProvider value={apiPresence}>{dialogProps.children}</PresenceProvider>

package/dist/chunk/{MMS6MJ72.js → R6Q7TUSQ.js}

@@ -1,9 +1,9 @@
-import { useFieldContext } from './X3BMEEJH.js';
+import { useFieldContext } from './KMFRZGLF.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, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
@@ -62,11 +62,11 @@ var EditablePreview = (props) => {
   return createComponent(ark.span, mergedProps);
 };
 var useEditable = (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,
@@ -78,13 +78,10 @@ var useEditable = (props = {}) => {
     readOnly: field?.().readOnly,
     required: field?.().required,
     getRootNode: environment().getRootNode,
-    edit: props.defaultEdit,
-    value: props.defaultValue,
-    "edit.controlled": props.edit !== void 0,
     ...props
   }));
-  const [state, send] = useMachine(editable.machine(context()), { context });
-  return createMemo(() => editable.connect(state, send, normalizeProps));
+  const service = useMachine(editable.machine, machineProps);
+  return createMemo(() => editable.connect(service, normalizeProps));
 };
 
 // src/components/editable/editable-root.tsx

package/dist/chunk/{3QQZKR3F.jsx → RCXMZN3G.jsx}

@@ -1,6 +1,6 @@
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 
 // src/providers/locale/locale-provider.tsx
 import { isRTL } from "@zag-js/i18n-utils";

package/dist/chunk/{WM2IZOYM.jsx → RG3IJESS.jsx}

@@ -1,12 +1,12 @@
+import {
+  useFieldContext
+} from "./XHA6B6L2.jsx";
 import {
   PresenceProvider,
   splitPresenceProps,
   usePresence,
   usePresenceContext
-} from "./E72NMPSK.jsx";
-import {
-  useFieldContext
-} from "./P7I44WC4.jsx";
+} from "./2FYSIKNK.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -15,13 +15,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";
@@ -75,10 +75,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 +99,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 +114,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 +146,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 +194,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>;
 };
 
@@ -257,11 +243,11 @@ import * as colorPicker from "@zag-js/color-picker";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo, createUniqueId } from "solid-js";
 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 +259,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
   }));
-  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 +309,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 +330,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 +358,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 +385,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/{SWUA2VFC.js → SAI3RCJY.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';
@@ -25,20 +25,17 @@ var ToggleGroupItem = (props) => {
   return createComponent(ark.button, mergedProps);
 };
 var useToggleGroup = (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(toggleGroup.machine(context()), {
-    context
-  });
-  return createMemo(() => toggleGroup.connect(state, send, normalizeProps));
+  const service = useMachine(toggleGroup.machine, machineProps);
+  return createMemo(() => toggleGroup.connect(service, normalizeProps));
 };
 
 // src/components/toggle-group/toggle-group-root.tsx

package/dist/chunk/{ZC6KWJ4T.jsx → SBKJA5N2.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";
@@ -38,11 +38,7 @@ var SplitterPanel = (props) => {
 // src/components/splitter/splitter-resize-trigger.tsx
 import { mergeProps as mergeProps2 } from "@zag-js/solid";
 var SplitterResizeTrigger = (props) => {
-  const [resizeTriggerProps, restProps] = createSplitProps()(props, [
-    "disabled",
-    "id",
-    "step"
-  ]);
+  const [resizeTriggerProps, restProps] = createSplitProps()(props, ["disabled", "id", "step"]);
   const api = useSplitterContext();
   const mergedProps = mergeProps2(() => api().getResizeTriggerProps(resizeTriggerProps), restProps);
   return <ark.button {...mergedProps} />;
@@ -59,15 +55,14 @@ 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
   }));
-  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/{RZBYC7DR.jsx → SBLZHOW2.jsx}

@@ -6,7 +6,7 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -57,12 +57,7 @@ import { createEffect, createMemo, createSignal, createUniqueId, onCleanup } fro
 
 // src/components/fieldset/fieldset.anatomy.ts
 import { createAnatomy } from "@zag-js/anatomy";
-var fieldsetAnatomy = createAnatomy("fieldset").parts(
-  "root",
-  "errorText",
-  "helperText",
-  "legend"
-);
+var fieldsetAnatomy = createAnatomy("fieldset").parts("root", "errorText", "helperText", "legend");
 var parts = fieldsetAnatomy.build();
 
 // src/components/fieldset/use-fieldset.ts
@@ -128,11 +123,7 @@ var dataAttr = (condition) => condition ? "" : void 0;
 
 // src/components/fieldset/fieldset-root.tsx
 var FieldsetRoot = (props) => {
-  const [useFieldsetProps, localProps] = createSplitProps()(props, [
-    "id",
-    "disabled",
-    "invalid"
-  ]);
+  const [useFieldsetProps, localProps] = createSplitProps()(props, ["id", "disabled", "invalid"]);
   const fieldset = useFieldset(useFieldsetProps);
   const mergedProps = mergeProps4(() => fieldset().getRootProps(), localProps);
   return <FieldsetProvider value={fieldset}>

package/dist/chunk/SDD2HKR3.js

@@ -0,0 +1,71 @@
+import { createSplitProps } from './ZMHI4GDJ.js';
+import { ark } from './EPLBB4QN.js';
+import { createContext } from './TROPIN4C.js';
+import { __export } from './ESLJRKWD.js';
+import { createComponent, mergeProps as mergeProps$1, template, spread } from 'solid-js/web';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { Show, createMemo } from 'solid-js';
+import * as toggle from '@zag-js/toggle';
+import { createAnatomy } from '@zag-js/anatomy';
+
+// src/components/toggle/toggle.ts
+var toggle_exports = {};
+__export(toggle_exports, {
+  Context: () => ToggleContext,
+  Indicator: () => ToggleIndicator,
+  Root: () => ToggleRoot,
+  toggleAnatomy: () => toggleAnatomy
+});
+
+// src/components/toggle/use-toggle-context.ts
+var [ToggleProvider, useToggleContext] = createContext({
+  hookName: "useToggleContext",
+  providerName: "<ToggleProvider />"
+});
+
+// src/components/toggle/toggle-context.tsx
+var ToggleContext = (props) => props.children(useToggleContext());
+var ToggleIndicator = (props) => {
+  const {
+    children,
+    fallback,
+    ...restProps
+  } = props;
+  const toggle2 = useToggleContext();
+  const mergedProps = mergeProps(() => toggle2().getIndicatorProps(), restProps);
+  return createComponent(ark.div, mergeProps$1(mergedProps, {
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return toggle2().pressed;
+        },
+        fallback,
+        children
+      });
+    }
+  }));
+};
+function useToggle(props) {
+  const service = useMachine(toggle.machine, props);
+  return createMemo(() => toggle.connect(service, normalizeProps));
+}
+
+// src/components/toggle/toggle-root.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
+var ToggleRoot = (props) => {
+  const [useToggleProps, localProps] = createSplitProps()(props, ["pressed", "defaultPressed", "disabled", "onPressedChange"]);
+  const toggle2 = useToggle(useToggleProps);
+  const mergedProps = mergeProps(() => toggle2().getRootProps(), localProps);
+  return createComponent(ToggleProvider, {
+    value: toggle2,
+    get children() {
+      var _el$ = _tmpl$();
+      spread(_el$, mergedProps, false, false);
+      return _el$;
+    }
+  });
+};
+var toggleAnatomy = createAnatomy("toggle", ["root", "indicator"]);
+toggleAnatomy.build();
+
+export { ToggleContext, ToggleIndicator, ToggleRoot, toggleAnatomy, toggle_exports, useToggle, useToggleContext };