@ark-ui/solid 4.10.2 → 5.1.0

package/dist/chunk/{RAEDLHD3.js → TKGOCHK5.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';
@@ -11,12 +12,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());
@@ -86,19 +85,18 @@ var SegmentGroupLabel = (props) => {
   const mergedProps = mergeProps(() => segmentGroup2().getLabelProps(), parts.label.attrs, props);
   return createComponent(ark.label, mergedProps);
 };
-var useSegmentGroup = (props = {}) => {
+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
+    ...runIfFn(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

package/dist/chunk/{I5UG2QUO.js → TROPIN4C.js}

@@ -5,13 +5,7 @@ function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
 }
 function createContext(options = {}) {
-  const {
-    strict = true,
-    hookName = "useContext",
-    providerName = "Provider",
-    errorMessage,
-    defaultValue
-  } = options;
+  const { strict = true, hookName = "useContext", providerName = "Provider", errorMessage, defaultValue } = options;
   const Context = createContext$1(defaultValue);
   function useContext$1() {
     const context = useContext(Context);

package/dist/chunk/{AX5SMQMA.js → TRUQMF25.js}

@@ -1,14 +1,15 @@
-import { useFieldContext } from './X3BMEEJH.js';
+import { useFieldContext } from './KVVYU5Z3.js';
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './QODB3C3M.js';
-import { useLocaleContext } from './HPDOBQ3V.js';
-import { createContext } from './I5UG2QUO.js';
+import { useEnvironmentContext } from './YMMMHJJS.js';
+import { useLocaleContext } from './QEMQBM6W.js';
+import { createContext } from './TROPIN4C.js';
+import { runIfFn } from './DT73WLR4.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
-import * as rating from '@zag-js/rating-group';
+import * as ratingGroup from '@zag-js/rating-group';
 export { anatomy } from '@zag-js/rating-group';
 
 // src/components/rating-group/use-rating-group-context.ts
@@ -20,13 +21,13 @@ var [RatingGroupProvider, useRatingGroupContext] = createContext({
 // src/components/rating-group/rating-group-context.tsx
 var RatingGroupContext = (props) => props.children(useRatingGroupContext());
 var RatingGroupControl = (props) => {
-  const ratingGroup = useRatingGroupContext();
-  const mergedProps = mergeProps(() => ratingGroup().getControlProps(), props);
+  const ratingGroup2 = useRatingGroupContext();
+  const mergedProps = mergeProps(() => ratingGroup2().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 var RatingGroupHiddenInput = (props) => {
-  const ratingGroup = useRatingGroupContext();
-  const mergedProps = mergeProps(() => ratingGroup().getHiddenInputProps(), props);
+  const ratingGroup2 = useRatingGroupContext();
+  const mergedProps = mergeProps(() => ratingGroup2().getHiddenInputProps(), props);
   const field = useFieldContext();
   return createComponent(ark.input, mergeProps$1({
     get ["aria-describedby"]() {
@@ -62,12 +63,12 @@ var RatingGroupLabel = (props) => {
   const mergedProps = mergeProps(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
-var useRatingGroup = (props = {}) => {
+var useRatingGroup = (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,11 +79,10 @@ var useRatingGroup = (props = {}) => {
     required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    value: props.defaultValue,
-    ...props
+    ...runIfFn(props)
   }));
-  const [state, send] = useMachine(rating.machine(context()), { context });
-  return createMemo(() => rating.connect(state, send, normalizeProps));
+  const service = useMachine(ratingGroup.machine, machineProps);
+  return createMemo(() => ratingGroup.connect(service, normalizeProps));
 };
 
 // src/components/rating-group/rating-group-root.tsx
@@ -99,11 +99,11 @@ var RatingGroupRoot = (props) => {
 };
 var RatingGroupRootProvider = (props) => {
   const [{
-    value: ratingGroup
+    value: ratingGroup2
   }, localProps] = createSplitProps()(props, ["value"]);
-  const mergedProps = mergeProps(() => ratingGroup().getRootProps(), localProps);
+  const mergedProps = mergeProps(() => ratingGroup2().getRootProps(), localProps);
   return createComponent(RatingGroupProvider, {
-    value: ratingGroup,
+    value: ratingGroup2,
     get children() {
       return createComponent(ark.div, mergedProps);
     }

package/dist/chunk/{NMGUCD2L.jsx → TVCIHLER.jsx}

@@ -1,19 +1,10 @@
 // src/utils/create-context.ts
-import {
-  createContext as createSolidContext,
-  useContext as useSolidContext
-} from "solid-js";
+import { createContext as createSolidContext, useContext as useSolidContext } from "solid-js";
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
 }
 function createContext(options = {}) {
-  const {
-    strict = true,
-    hookName = "useContext",
-    providerName = "Provider",
-    errorMessage,
-    defaultValue
-  } = options;
+  const { strict = true, hookName = "useContext", providerName = "Provider", errorMessage, defaultValue } = options;
   const Context = createSolidContext(defaultValue);
   function useContext() {
     const context = useSolidContext(Context);

package/dist/chunk/{YCYZZGN2.jsx → TZDLUIKR.jsx}

@@ -6,10 +6,13 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./D2Z5BEON.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
+import {
+  runIfFn
+} from "./KGOB2IMX.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -25,8 +28,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 <ark.button {...mergedProps} />;
 };
 
@@ -65,16 +69,16 @@ import { mergeProps as mergeProps5 } from "@zag-js/solid";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import * as timer from "@zag-js/timer";
 import { createMemo, createUniqueId } from "solid-js";
-var useTimer = (props = {}) => {
-  const env = useEnvironmentContext();
+var useTimer = (props) => {
   const id = createUniqueId();
-  const context = createMemo(() => ({
+  const environment = useEnvironmentContext();
+  const machineProps = createMemo(() => ({
     id,
-    getRootNode: env().getRootNode,
-    ...props
+    getRootNode: environment().getRootNode,
+    ...runIfFn(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/{QGV2SUTQ.jsx → U3J33PVO.jsx}

@@ -1,6 +1,6 @@
 import {
   useFieldContext
-} from "./P7I44WC4.jsx";
+} from "./UCYPIMZC.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,13 +9,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";
@@ -32,16 +35,16 @@ var RatingGroupContext = (props) => props.children(useRatingGroupContext());
 // src/components/rating-group/rating-group-control.tsx
 import { mergeProps } from "@zag-js/solid";
 var RatingGroupControl = (props) => {
-  const ratingGroup = useRatingGroupContext();
-  const mergedProps = mergeProps(() => ratingGroup().getControlProps(), props);
+  const ratingGroup2 = useRatingGroupContext();
+  const mergedProps = mergeProps(() => ratingGroup2().getControlProps(), props);
   return <ark.div {...mergedProps} />;
 };
 
 // src/components/rating-group/rating-group-hidden-input.tsx
 import { mergeProps as mergeProps2 } from "@zag-js/solid";
 var RatingGroupHiddenInput = (props) => {
-  const ratingGroup = useRatingGroupContext();
-  const mergedProps = mergeProps2(() => ratingGroup().getHiddenInputProps(), props);
+  const ratingGroup2 = useRatingGroupContext();
+  const mergedProps = mergeProps2(() => ratingGroup2().getHiddenInputProps(), props);
   const field = useFieldContext();
   return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps} />;
 };
@@ -82,15 +85,15 @@ var RatingGroupLabel = (props) => {
 import { mergeProps as mergeProps5 } from "@zag-js/solid";
 
 // src/components/rating-group/use-rating-group.ts
-import * as rating from "@zag-js/rating-group";
+import * as ratingGroup from "@zag-js/rating-group";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo as createMemo2, createUniqueId } from "solid-js";
-var useRatingGroup = (props = {}) => {
+var useRatingGroup = (props) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
   const field = useFieldContext();
-  const context = createMemo2(() => ({
+  const machineProps = createMemo2(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -101,11 +104,10 @@ var useRatingGroup = (props = {}) => {
     required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    value: props.defaultValue,
-    ...props
+    ...runIfFn(props)
   }));
-  const [state, send] = useMachine(rating.machine(context()), { context });
-  return createMemo2(() => rating.connect(state, send, normalizeProps));
+  const service = useMachine(ratingGroup.machine, machineProps);
+  return createMemo2(() => ratingGroup.connect(service, normalizeProps));
 };
 
 // src/components/rating-group/rating-group-root.tsx
@@ -137,11 +139,9 @@ var RatingGroupRoot = (props) => {
 // src/components/rating-group/rating-group-root-provider.tsx
 import { mergeProps as mergeProps6 } from "@zag-js/solid";
 var RatingGroupRootProvider = (props) => {
-  const [{ value: ratingGroup }, localProps] = createSplitProps()(props, [
-    "value"
-  ]);
-  const mergedProps = mergeProps6(() => ratingGroup().getRootProps(), localProps);
-  return <RatingGroupProvider value={ratingGroup}>
+  const [{ value: ratingGroup2 }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps6(() => ratingGroup2().getRootProps(), localProps);
+  return <RatingGroupProvider value={ratingGroup2}>
       <ark.div {...mergedProps} />
     </RatingGroupProvider>;
 };

package/dist/chunk/{P7I44WC4.jsx → UCYPIMZC.jsx}

@@ -1,6 +1,9 @@
 import {
   useFieldsetContext
-} from "./RZBYC7DR.jsx";
+} from "./ZYF7GVNI.jsx";
+import {
+  composeRefs
+} from "./DOBZPYAN.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,7 +12,7 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -75,14 +78,7 @@ import { mergeProps as mergeProps7 } from "@zag-js/solid";
 
 // src/components/field/use-field.ts
 import { ariaAttr, dataAttr, getWindow } from "@zag-js/dom-query";
-import {
-  createEffect,
-  createMemo,
-  createSignal,
-  createUniqueId,
-  mergeProps as mergeProps6,
-  onCleanup
-} from "solid-js";
+import { createMemo, createSignal, createUniqueId, mergeProps as mergeProps6, onCleanup, onMount } from "solid-js";
 
 // src/components/field/field.anatomy.ts
 import { createAnatomy } from "@zag-js/anatomy";
@@ -108,13 +104,13 @@ var useField = (props) => {
   const [hasErrorText, setHasErrorText] = createSignal(false);
   const [hasHelperText, setHasHelperText] = createSignal(false);
   const id = fieldProps.id ?? createUniqueId();
-  let rootRef;
+  const [rootRef, setRootRef] = createSignal(void 0);
   const rootId = fieldProps.ids?.control ?? `field::${id}`;
   const errorTextId = fieldProps.ids?.errorText ?? `field::${id}::error-text`;
   const helperTextId = fieldProps.ids?.helperText ?? `field::${id}::helper-text`;
   const labelId = fieldProps.ids?.label ?? `field::${id}::label`;
-  createEffect(() => {
-    const rootNode = rootRef;
+  onMount(() => {
+    const rootNode = rootRef();
     if (!rootNode) return;
     const win = getWindow(rootNode);
     const doc = win.document;
@@ -143,11 +139,14 @@ var useField = (props) => {
     "data-readonly": dataAttr(fieldProps.readOnly),
     htmlFor: id
   });
-  const labelIds = [];
-  if (hasErrorText() && fieldProps.invalid) labelIds.push(errorTextId);
-  if (hasHelperText()) labelIds.push(helperTextId);
+  const labelIds = createMemo(() => {
+    const ids = [];
+    if (hasErrorText() && fieldProps.invalid) ids.push(errorTextId);
+    if (hasHelperText()) ids.push(helperTextId);
+    return ids;
+  });
   const getControlProps = () => ({
-    "aria-describedby": labelIds.join(" ") || void 0,
+    "aria-describedby": labelIds().join(" ") || void 0,
     "aria-invalid": ariaAttr(fieldProps.invalid),
     "data-invalid": dataAttr(fieldProps.invalid),
     "data-required": dataAttr(fieldProps.required),
@@ -184,7 +183,7 @@ var useField = (props) => {
     ...parts.requiredIndicator.attrs
   });
   return createMemo(() => ({
-    ariaDescribedby: labelIds.join(" "),
+    ariaDescribedby: labelIds().join(" "),
     ids: {
       control: id,
       label: labelId,
@@ -192,7 +191,7 @@ var useField = (props) => {
       helperText: helperTextId
     },
     refs: {
-      rootRef
+      rootRef: setRootRef
     },
     disabled: fieldProps.disabled,
     invalid: fieldProps.invalid,
@@ -222,7 +221,7 @@ var FieldRoot = (props) => {
   const field = useField(useFieldProps);
   const mergedProps = mergeProps7(() => field().getRootProps(), localProps);
   return <FieldProvider value={field}>
-      <ark.div {...mergedProps} />
+      <ark.div {...mergedProps} ref={composeRefs(field().refs.rootRef, props.ref)} />
     </FieldProvider>;
 };
 
@@ -247,7 +246,7 @@ var FieldSelect = (props) => {
 // src/components/field/field-textarea.tsx
 import { autoresizeTextarea } from "@zag-js/auto-resize";
 import { mergeProps as mergeProps10 } from "@zag-js/solid";
-import { createEffect as createEffect2 } from "solid-js";
+import { createEffect } from "solid-js";
 var FieldTextarea = (props) => {
   const field = useFieldContext();
   let textareaRef;
@@ -257,7 +256,7 @@ var FieldTextarea = (props) => {
     () => ({ style: { resize: autoresize ? "none" : void 0 } }),
     textareaProps
   );
-  createEffect2(() => {
+  createEffect(() => {
     if (!autoresize) return;
     const cleanup = autoresizeTextarea(textareaRef);
     return cleanup;

package/dist/chunk/{GXWVYON6.js → UODFV2GS.js}

@@ -1,9 +1,10 @@
-import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './LCESUDZB.js';
+import { splitPresenceProps, usePresence, PresenceProvider, usePresenceContext } 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';
@@ -57,20 +58,18 @@ var TooltipPositioner = (props) => {
     }
   });
 };
-var useTooltip = (props = {}) => {
+var useTooltip = (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] = useMachine(tooltip.machine(context()), { context });
-  return createMemo(() => tooltip.connect(state, send, normalizeProps));
+  const service = useMachine(tooltip.machine, machineProps);
+  return createMemo(() => tooltip.connect(service, normalizeProps));
 };
 
 // src/components/tooltip/tooltip-root.tsx

package/dist/chunk/{7YIHAT7J.jsx → V564AMKR.jsx}

@@ -1,9 +1,6 @@
-import {
-  useControllableState
-} from "./52WUF3CY.jsx";
 import {
   useFieldContext
-} from "./P7I44WC4.jsx";
+} from "./UCYPIMZC.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -12,13 +9,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";
@@ -45,15 +45,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 +178,18 @@ 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(() => {
-    return mergeProps5(ownProps, checkboxGroup?.().getItemProps({ value: ownProps.value }) ?? {});
+  const props = createMemo3(() => {
+    const resolvedProps = runIfFn(ownProps);
+    return mergeProps5(resolvedProps, checkboxGroup?.().getItemProps({ value: resolvedProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
   const field = useFieldContext();
-  const context = createMemo2(() => ({
+  const machineProps = createMemo3(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -179,11 +201,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