@ark-ui/solid 4.10.1 → 5.0.0

package/dist/chunk/{HWL7X2QR.jsx → PVOFTEOB.jsx}

@@ -3,7 +3,7 @@ import {
   splitPresenceProps,
   usePresence,
   usePresenceContext
-} from "./E72NMPSK.jsx";
+} from "./2FYSIKNK.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -12,13 +12,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";
@@ -72,15 +72,9 @@ var DatePickerControl = (props) => {
 // src/components/date-picker/date-picker-input.tsx
 import { mergeProps as mergeProps4 } from "@zag-js/solid";
 var DatePickerInput = (props) => {
-  const [inputProps, localProps] = createSplitProps()(props, [
-    "index",
-    "fixOnBlur"
-  ]);
+  const [inputProps, localProps] = createSplitProps()(props, ["index", "fixOnBlur"]);
   const datePicker2 = useDatePickerContext();
-  const mergedProps = mergeProps4(
-    () => datePicker2().getInputProps(inputProps),
-    localProps
-  );
+  const mergedProps = mergeProps4(() => datePicker2().getInputProps(inputProps), localProps);
   return <ark.input {...mergedProps} />;
 };
 
@@ -99,9 +93,7 @@ var DatePickerMonthSelect = (props) => {
   const datePicker2 = useDatePickerContext();
   const mergedProps = mergeProps6(() => datePicker2().getMonthSelectProps(), props);
   return <ark.select {...mergedProps}>
-      <Index each={datePicker2().getMonths()}>
-        {(month) => <option value={month().value}>{month().label}</option>}
-      </Index>
+      <Index each={datePicker2().getMonths()}>{(month) => <option value={month().value}>{month().label}</option>}</Index>
     </ark.select>;
 };
 
@@ -170,21 +162,18 @@ import * as datePicker from "@zag-js/date-picker";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo, createUniqueId } from "solid-js";
 var useDatePicker = (props = {}) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     dir: locale().dir,
+    locale: locale().locale,
     getRootNode: environment().getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
-    value: props.defaultValue,
-    view: props.defaultView,
     ...props
   }));
-  const [state, send] = useMachine(datePicker.machine(context()), { context });
-  return createMemo(() => datePicker.connect(state, send, normalizeProps));
+  const service = useMachine(datePicker.machine, machineProps);
+  return createMemo(() => datePicker.connect(service, normalizeProps));
 };
 
 // src/components/date-picker/date-picker-root.tsx
@@ -192,6 +181,7 @@ var DatePickerRoot = (props) => {
   const [presenceProps, datePickerProps] = splitPresenceProps(props);
   const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, [
     "closeOnSelect",
+    "defaultFocusedValue",
     "defaultOpen",
     "defaultValue",
     "defaultView",
@@ -227,25 +217,20 @@ var DatePickerRoot = (props) => {
     "view"
   ]);
   const api = useDatePicker(useDatePickerProps);
-  const apiPresence = usePresence(
-    mergeProps12(presenceProps, () => ({ present: api().open }))
-  );
+  const apiPresence = usePresence(mergeProps12(presenceProps, () => ({ present: api().open })));
   const mergedProps = mergeProps12(() => api().getRootProps(), localProps);
   return <DatePickerProvider value={api}>
-			<PresenceProvider value={apiPresence}>
-				<ark.div {...mergedProps} />
-			</PresenceProvider>
-		</DatePickerProvider>;
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps} />
+      </PresenceProvider>
+    </DatePickerProvider>;
 };
 
 // src/components/date-picker/date-picker-root-provider.tsx
 import { mergeProps as mergeProps13 } from "@zag-js/solid";
 var DatePickerRootProvider = (props) => {
   const [presenceProps, datePickerProps] = splitPresenceProps(props);
-  const [{ value: datePicker2 }, localProps] = createSplitProps()(
-    datePickerProps,
-    ["value"]
-  );
+  const [{ value: datePicker2 }, localProps] = createSplitProps()(datePickerProps, ["value"]);
   const presence = usePresence(mergeProps13(presenceProps, () => ({ present: datePicker2().open })));
   const mergedProps = mergeProps13(() => datePicker2().getRootProps(), localProps);
   return <DatePickerProvider value={datePicker2}>
@@ -267,9 +252,7 @@ var [DatePickerTableProvider, useDatePickerTableContext] = createContext({
 
 // src/components/date-picker/date-picker-table.tsx
 var DatePickerTable = (props) => {
-  const [{ columns }, localProps] = createSplitProps()(props, [
-    "columns"
-  ]);
+  const [{ columns }, localProps] = createSplitProps()(props, ["columns"]);
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
   const tableProps = { columns, id: createUniqueId2(), ...viewProps };
@@ -420,9 +403,7 @@ var DatePickerYearSelect = (props) => {
   const datePicker2 = useDatePickerContext();
   const mergedProps = mergeProps25(() => datePicker2().getYearSelectProps(), props);
   return <ark.select {...mergedProps}>
-      <Index2 each={datePicker2().getYears()}>
-        {(year) => <option value={year().value}>{year().label}</option>}
-      </Index2>
+      <Index2 each={datePicker2().getYears()}>{(year) => <option value={year().value}>{year().label}</option>}</Index2>
     </ark.select>;
 };
 

package/dist/chunk/{HPDOBQ3V.js → QEMQBM6W.js}

@@ -1,4 +1,4 @@
-import { createContext } from './I5UG2QUO.js';
+import { createContext } from './TROPIN4C.js';
 import { createComponent } from 'solid-js/web';
 import { isRTL } from '@zag-js/i18n-utils';
 import { createMemo } from 'solid-js';

package/dist/chunk/{L7OSYHVR.js → QFAL6GWC.js}

@@ -1,5 +1,5 @@
 import { createSplitProps } from './ZMHI4GDJ.js';
-import { createContext } from './I5UG2QUO.js';
+import { createContext } from './TROPIN4C.js';
 
 // src/utils/render-strategy.ts
 var [RenderStrategyProvider, useRenderStrategyContext] = createContext({

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

@@ -1,14 +1,14 @@
-import { useFieldContext } from './632HFNZF.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/{DUDD2T7G.js → R6Q7TUSQ.js}

@@ -1,9 +1,9 @@
-import { useFieldContext } from './632HFNZF.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/{N73ADPX5.jsx → RG3IJESS.jsx}

@@ -1,12 +1,12 @@
 import {
   useFieldContext
-} from "./MSHQY44G.jsx";
+} from "./XHA6B6L2.jsx";
 import {
   PresenceProvider,
   splitPresenceProps,
   usePresence,
   usePresenceContext
-} from "./E72NMPSK.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