@ark-ui/react 4.9.2 → 5.0.0

package/dist/components/steps/index.d.ts

@@ -2,16 +2,16 @@ export type { StepChangeDetails } from '@zag-js/steps';
 export { StepsCompletedContent, type StepsCompletedContentBaseProps, type StepsCompletedContentProps, } from './steps-completed-content';
 export { StepsContent, type StepsContentBaseProps, type StepsContentProps } from './steps-content';
 export { StepsContext, type StepsContextProps } from './steps-context';
-export { StepsIndicator, type StepsIndicatorBaseProps, type StepsIndicatorProps, } from './steps-indicator';
+export { StepsIndicator, type StepsIndicatorBaseProps, type StepsIndicatorProps } from './steps-indicator';
 export { StepsItem, type StepsItemBaseProps, type StepsItemProps } from './steps-item';
 export { StepsItemContext, type StepsItemContextProps } from './steps-item-context';
 export { StepsList, type StepsListBaseProps, type StepsListProps } from './steps-list';
-export { StepsNextTrigger, type StepsNextTriggerBaseProps, type StepsNextTriggerProps, } from './steps-next-trigger';
-export { StepsPrevTrigger, type StepsPrevTriggerBaseProps, type StepsPrevTriggerProps, } from './steps-prev-trigger';
-export { StepsProgress, type StepsProgressBaseProps, type StepsProgressProps, } from './steps-progress';
+export { StepsNextTrigger, type StepsNextTriggerBaseProps, type StepsNextTriggerProps } from './steps-next-trigger';
+export { StepsPrevTrigger, type StepsPrevTriggerBaseProps, type StepsPrevTriggerProps } from './steps-prev-trigger';
+export { StepsProgress, type StepsProgressBaseProps, type StepsProgressProps } from './steps-progress';
 export { StepsRoot, type StepsRootBaseProps, type StepsRootProps } from './steps-root';
-export { StepsRootProvider, type StepsRootProviderBaseProps, type StepsRootProviderProps, } from './steps-root-provider';
-export { StepsSeparator, type StepsSeparatorBaseProps, type StepsSeparatorProps, } from './steps-separator';
+export { StepsRootProvider, type StepsRootProviderBaseProps, type StepsRootProviderProps } from './steps-root-provider';
+export { StepsSeparator, type StepsSeparatorBaseProps, type StepsSeparatorProps } from './steps-separator';
 export { StepsTrigger, type StepsTriggerBaseProps, type StepsTriggerProps } from './steps-trigger';
 export { stepsAnatomy } from './steps.anatomy';
 export { useSteps, type UseStepsProps, type UseStepsReturn } from './use-steps';

package/dist/components/steps/steps-completed-content.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useStepsContext = require('./use-steps-context.cjs');
 
-const StepsCompletedContent = react.forwardRef(
-  (props, ref) => {
-    const steps = useStepsContext.useStepsContext();
-    const mergedProps = react$1.mergeProps(steps.getContentProps({ index: steps.count }), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const StepsCompletedContent = react.forwardRef((props, ref) => {
+  const steps = useStepsContext.useStepsContext();
+  const mergedProps = react$1.mergeProps(steps.getContentProps({ index: steps.count }), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 StepsCompletedContent.displayName = "StepsCompletedContent";
 
 exports.StepsCompletedContent = StepsCompletedContent;

package/dist/components/steps/steps-completed-content.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useStepsContext } from './use-steps-context.js';
 
-const StepsCompletedContent = forwardRef(
-  (props, ref) => {
-    const steps = useStepsContext();
-    const mergedProps = mergeProps(steps.getContentProps({ index: steps.count }), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const StepsCompletedContent = forwardRef((props, ref) => {
+  const steps = useStepsContext();
+  const mergedProps = mergeProps(steps.getContentProps({ index: steps.count }), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 StepsCompletedContent.displayName = "StepsCompletedContent";
 
 export { StepsCompletedContent };

package/dist/components/steps/steps-item.cjs

@@ -17,7 +17,7 @@ const StepsItem = react.forwardRef((props, ref) => {
   const steps = useStepsContext.useStepsContext();
   const mergedProps = react$1.mergeProps(steps.getItemProps(itemProps), localProps);
   const itemState = steps.getItemState(itemProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useStepsItemPropsContext.StepsItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useStepsItemContext.StepsItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(useStepsItemPropsContext.StepsItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useStepsItemContext.StepsItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 StepsItem.displayName = "StepsItem";
 

package/dist/components/steps/steps-item.d.cts

@@ -3,6 +3,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface StepsItemBaseProps extends ItemProps, PolymorphicProps {
 }
-export interface StepsItemProps extends HTMLProps<'li'>, StepsItemBaseProps {
+export interface StepsItemProps extends HTMLProps<'div'>, StepsItemBaseProps {
 }
-export declare const StepsItem: ForwardRefExoticComponent<StepsItemProps & RefAttributes<HTMLLIElement>>;
+export declare const StepsItem: ForwardRefExoticComponent<StepsItemProps & RefAttributes<HTMLDivElement>>;

package/dist/components/steps/steps-item.d.ts

@@ -3,6 +3,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface StepsItemBaseProps extends ItemProps, PolymorphicProps {
 }
-export interface StepsItemProps extends HTMLProps<'li'>, StepsItemBaseProps {
+export interface StepsItemProps extends HTMLProps<'div'>, StepsItemBaseProps {
 }
-export declare const StepsItem: ForwardRefExoticComponent<StepsItemProps & RefAttributes<HTMLLIElement>>;
+export declare const StepsItem: ForwardRefExoticComponent<StepsItemProps & RefAttributes<HTMLDivElement>>;

package/dist/components/steps/steps-item.js

@@ -13,7 +13,7 @@ const StepsItem = forwardRef((props, ref) => {
   const steps = useStepsContext();
   const mergedProps = mergeProps(steps.getItemProps(itemProps), localProps);
   const itemState = steps.getItemState(itemProps);
-  return /* @__PURE__ */ jsx(StepsItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsx(StepsItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsx(StepsItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsx(StepsItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 StepsItem.displayName = "StepsItem";
 

package/dist/components/steps/steps-list.cjs

@@ -12,7 +12,7 @@ const useStepsContext = require('./use-steps-context.cjs');
 const StepsList = react.forwardRef((props, ref) => {
   const steps = useStepsContext.useStepsContext();
   const mergedProps = react$1.mergeProps(steps.getListProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ol, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 StepsList.displayName = "StepsList";
 

package/dist/components/steps/steps-list.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface StepsListBaseProps extends PolymorphicProps {
 }
-export interface StepsListProps extends HTMLProps<'ol'>, StepsListBaseProps {
+export interface StepsListProps extends HTMLProps<'div'>, StepsListBaseProps {
 }
-export declare const StepsList: ForwardRefExoticComponent<StepsListProps & RefAttributes<HTMLOListElement>>;
+export declare const StepsList: ForwardRefExoticComponent<StepsListProps & RefAttributes<HTMLDivElement>>;

package/dist/components/steps/steps-list.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface StepsListBaseProps extends PolymorphicProps {
 }
-export interface StepsListProps extends HTMLProps<'ol'>, StepsListBaseProps {
+export interface StepsListProps extends HTMLProps<'div'>, StepsListBaseProps {
 }
-export declare const StepsList: ForwardRefExoticComponent<StepsListProps & RefAttributes<HTMLOListElement>>;
+export declare const StepsList: ForwardRefExoticComponent<StepsListProps & RefAttributes<HTMLDivElement>>;

package/dist/components/steps/steps-list.js

@@ -8,7 +8,7 @@ import { useStepsContext } from './use-steps-context.js';
 const StepsList = forwardRef((props, ref) => {
   const steps = useStepsContext();
   const mergedProps = mergeProps(steps.getListProps(), props);
-  return /* @__PURE__ */ jsx(ark.ol, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 StepsList.displayName = "StepsList";
 

package/dist/components/steps/steps-next-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useStepsContext = require('./use-steps-context.cjs');
 
-const StepsNextTrigger = react.forwardRef(
-  (props, ref) => {
-    const steps = useStepsContext.useStepsContext();
-    const mergedProps = react$1.mergeProps(steps.getNextTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const StepsNextTrigger = react.forwardRef((props, ref) => {
+  const steps = useStepsContext.useStepsContext();
+  const mergedProps = react$1.mergeProps(steps.getNextTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 StepsNextTrigger.displayName = "StepsNextTrigger";
 
 exports.StepsNextTrigger = StepsNextTrigger;

package/dist/components/steps/steps-next-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useStepsContext } from './use-steps-context.js';
 
-const StepsNextTrigger = forwardRef(
-  (props, ref) => {
-    const steps = useStepsContext();
-    const mergedProps = mergeProps(steps.getNextTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const StepsNextTrigger = forwardRef((props, ref) => {
+  const steps = useStepsContext();
+  const mergedProps = mergeProps(steps.getNextTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 StepsNextTrigger.displayName = "StepsNextTrigger";
 
 export { StepsNextTrigger };

package/dist/components/steps/steps-prev-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useStepsContext = require('./use-steps-context.cjs');
 
-const StepsPrevTrigger = react.forwardRef(
-  (props, ref) => {
-    const steps = useStepsContext.useStepsContext();
-    const mergedProps = react$1.mergeProps(steps.getPrevTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const StepsPrevTrigger = react.forwardRef((props, ref) => {
+  const steps = useStepsContext.useStepsContext();
+  const mergedProps = react$1.mergeProps(steps.getPrevTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 StepsPrevTrigger.displayName = "StepsPrevTrigger";
 
 exports.StepsPrevTrigger = StepsPrevTrigger;

package/dist/components/steps/steps-prev-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useStepsContext } from './use-steps-context.js';
 
-const StepsPrevTrigger = forwardRef(
-  (props, ref) => {
-    const steps = useStepsContext();
-    const mergedProps = mergeProps(steps.getPrevTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const StepsPrevTrigger = forwardRef((props, ref) => {
+  const steps = useStepsContext();
+  const mergedProps = mergeProps(steps.getPrevTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 StepsPrevTrigger.displayName = "StepsPrevTrigger";
 
 export { StepsPrevTrigger };

package/dist/components/steps/steps-root-provider.cjs

@@ -10,13 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useStepsContext = require('./use-steps-context.cjs');
 
-const StepsRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: steps }, rootProps] = createSplitProps.createSplitProps()(props, ["value"]);
-    const mergedProps = react$1.mergeProps(steps.getRootProps(), rootProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useStepsContext.StepsProvider, { value: steps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }) });
-  }
-);
+const StepsRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: steps }, rootProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(steps.getRootProps(), rootProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useStepsContext.StepsProvider, { value: steps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }) });
+});
 StepsRootProvider.displayName = "StepsRootProvider";
 
 exports.StepsRootProvider = StepsRootProvider;

package/dist/components/steps/steps-root-provider.js

@@ -6,13 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { StepsProvider } from './use-steps-context.js';
 
-const StepsRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: steps }, rootProps] = createSplitProps()(props, ["value"]);
-    const mergedProps = mergeProps(steps.getRootProps(), rootProps);
-    return /* @__PURE__ */ jsx(StepsProvider, { value: steps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }) });
-  }
-);
+const StepsRootProvider = forwardRef((props, ref) => {
+  const [{ value: steps }, rootProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(steps.getRootProps(), rootProps);
+  return /* @__PURE__ */ jsx(StepsProvider, { value: steps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }) });
+});
 StepsRootProvider.displayName = "StepsRootProvider";
 
 export { StepsRootProvider };

package/dist/components/steps/steps.d.cts

@@ -4,7 +4,7 @@ export { StepsContent as Content, type StepsContentBaseProps as ContentBaseProps
 export { StepsContext as Context, type StepsContextProps as ContextProps } from './steps-context';
 export { StepsIndicator as Indicator, type StepsIndicatorBaseProps as IndicatorBaseProps, type StepsIndicatorProps as IndicatorProps, } from './steps-indicator';
 export { StepsItem as Item, type StepsItemBaseProps as ItemBaseProps, type StepsItemProps as ItemProps, } from './steps-item';
-export { StepsItemContext as ItemContext, type StepsItemContextProps as ItemContextProps, } from './steps-item-context';
+export { StepsItemContext as ItemContext, type StepsItemContextProps as ItemContextProps } from './steps-item-context';
 export { StepsList as List, type StepsListBaseProps as ListBaseProps, type StepsListProps as ListProps, } from './steps-list';
 export { StepsNextTrigger as NextTrigger, type StepsNextTriggerBaseProps as NextTriggerBaseProps, type StepsNextTriggerProps as NextTriggerProps, } from './steps-next-trigger';
 export { StepsPrevTrigger as PrevTrigger, type StepsPrevTriggerBaseProps as PrevTriggerBaseProps, type StepsPrevTriggerProps as PrevTriggerProps, } from './steps-prev-trigger';

package/dist/components/steps/steps.d.ts

@@ -4,7 +4,7 @@ export { StepsContent as Content, type StepsContentBaseProps as ContentBaseProps
 export { StepsContext as Context, type StepsContextProps as ContextProps } from './steps-context';
 export { StepsIndicator as Indicator, type StepsIndicatorBaseProps as IndicatorBaseProps, type StepsIndicatorProps as IndicatorProps, } from './steps-indicator';
 export { StepsItem as Item, type StepsItemBaseProps as ItemBaseProps, type StepsItemProps as ItemProps, } from './steps-item';
-export { StepsItemContext as ItemContext, type StepsItemContextProps as ItemContextProps, } from './steps-item-context';
+export { StepsItemContext as ItemContext, type StepsItemContextProps as ItemContextProps } from './steps-item-context';
 export { StepsList as List, type StepsListBaseProps as ListBaseProps, type StepsListProps as ListProps, } from './steps-list';
 export { StepsNextTrigger as NextTrigger, type StepsNextTriggerBaseProps as NextTriggerBaseProps, type StepsNextTriggerProps as NextTriggerProps, } from './steps-next-trigger';
 export { StepsPrevTrigger as PrevTrigger, type StepsPrevTriggerBaseProps as PrevTriggerBaseProps, type StepsPrevTriggerProps as PrevTriggerProps, } from './steps-prev-trigger';

package/dist/components/steps/use-steps.cjs

@@ -8,7 +8,6 @@ const steps = require('@zag-js/steps');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -30,25 +29,17 @@ function _interopNamespaceDefault(e) {
 const steps__namespace = /*#__PURE__*/_interopNamespaceDefault(steps);
 
 function useSteps(props = {}) {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    step: props.defaultStep,
     ...props
   };
-  const context = {
-    ...initialContext,
-    step: props.step,
-    onStepChange: useEvent.useEvent(props.onStepChange),
-    onStepComplete: useEvent.useEvent(props.onStepComplete)
-  };
-  const [state, send] = react$1.useMachine(steps__namespace.machine(initialContext), {
-    context
-  });
-  return steps__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(steps__namespace.machine, machineProps);
+  return steps__namespace.connect(service, react$1.normalizeProps);
 }
 
 exports.useSteps = useSteps;

package/dist/components/steps/use-steps.d.cts

@@ -1,11 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as steps from '@zag-js/steps';
-export interface UseStepsProps extends Optional<Omit<steps.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the step
-     */
-    defaultStep?: number;
+export interface UseStepsProps extends Optional<Omit<steps.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseStepsReturn extends steps.Api<PropTypes> {
 }

package/dist/components/steps/use-steps.d.ts

@@ -1,11 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as steps from '@zag-js/steps';
-export interface UseStepsProps extends Optional<Omit<steps.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the step
-     */
-    defaultStep?: number;
+export interface UseStepsProps extends Optional<Omit<steps.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseStepsReturn extends steps.Api<PropTypes> {
 }

package/dist/components/steps/use-steps.js

@@ -4,28 +4,19 @@ import * as steps from '@zag-js/steps';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 function useSteps(props = {}) {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    step: props.defaultStep,
     ...props
   };
-  const context = {
-    ...initialContext,
-    step: props.step,
-    onStepChange: useEvent(props.onStepChange),
-    onStepComplete: useEvent(props.onStepComplete)
-  };
-  const [state, send] = useMachine(steps.machine(initialContext), {
-    context
-  });
-  return steps.connect(state, send, normalizeProps);
+  const service = useMachine(steps.machine, machineProps);
+  return steps.connect(service, normalizeProps);
 }
 
 export { useSteps };

package/dist/components/switch/index.d.cts

@@ -1,7 +1,7 @@
 export type { CheckedChangeDetails as SwitchCheckedChangeDetails } from '@zag-js/switch';
 export { SwitchContext, type SwitchContextProps } from './switch-context';
-export { SwitchControl, type SwitchControlBaseProps, type SwitchControlProps, } from './switch-control';
-export { SwitchHiddenInput, type SwitchHiddenInputBaseProps, type SwitchHiddenInputProps, } from './switch-hidden-input';
+export { SwitchControl, type SwitchControlBaseProps, type SwitchControlProps } from './switch-control';
+export { SwitchHiddenInput, type SwitchHiddenInputBaseProps, type SwitchHiddenInputProps } from './switch-hidden-input';
 export { SwitchLabel, type SwitchLabelBaseProps, type SwitchLabelProps } from './switch-label';
 export { SwitchRoot, type SwitchRootBaseProps, type SwitchRootProps } from './switch-root';
 export { SwitchRootProvider, type SwitchRootProviderBaseProps, type SwitchRootProviderProps, } from './switch-root-provider';

package/dist/components/switch/index.d.ts

@@ -1,7 +1,7 @@
 export type { CheckedChangeDetails as SwitchCheckedChangeDetails } from '@zag-js/switch';
 export { SwitchContext, type SwitchContextProps } from './switch-context';
-export { SwitchControl, type SwitchControlBaseProps, type SwitchControlProps, } from './switch-control';
-export { SwitchHiddenInput, type SwitchHiddenInputBaseProps, type SwitchHiddenInputProps, } from './switch-hidden-input';
+export { SwitchControl, type SwitchControlBaseProps, type SwitchControlProps } from './switch-control';
+export { SwitchHiddenInput, type SwitchHiddenInputBaseProps, type SwitchHiddenInputProps } from './switch-hidden-input';
 export { SwitchLabel, type SwitchLabelBaseProps, type SwitchLabelProps } from './switch-label';
 export { SwitchRoot, type SwitchRootBaseProps, type SwitchRootProps } from './switch-root';
 export { SwitchRootProvider, type SwitchRootProviderBaseProps, type SwitchRootProviderProps, } from './switch-root-provider';

package/dist/components/switch/switch-hidden-input.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 const useSwitchContext = require('./use-switch-context.cjs');
 
-const SwitchHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const switchContext = useSwitchContext.useSwitchContext();
-    const mergedProps = react$1.mergeProps(switchContext.getHiddenInputProps(), props);
-    const field = useFieldContext.useFieldContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const SwitchHiddenInput = react.forwardRef((props, ref) => {
+  const switchContext = useSwitchContext.useSwitchContext();
+  const mergedProps = react$1.mergeProps(switchContext.getHiddenInputProps(), props);
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 SwitchHiddenInput.displayName = "SwitchHiddenInput";
 
 exports.SwitchHiddenInput = SwitchHiddenInput;

package/dist/components/switch/switch-hidden-input.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useFieldContext } from '../field/use-field-context.js';
 import { useSwitchContext } from './use-switch-context.js';
 
-const SwitchHiddenInput = forwardRef(
-  (props, ref) => {
-    const switchContext = useSwitchContext();
-    const mergedProps = mergeProps(switchContext.getHiddenInputProps(), props);
-    const field = useFieldContext();
-    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const SwitchHiddenInput = forwardRef((props, ref) => {
+  const switchContext = useSwitchContext();
+  const mergedProps = mergeProps(switchContext.getHiddenInputProps(), props);
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 SwitchHiddenInput.displayName = "SwitchHiddenInput";
 
 export { SwitchHiddenInput };

package/dist/components/switch/switch-root-provider.cjs

@@ -10,13 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useSwitchContext = require('./use-switch-context.cjs');
 
-const SwitchRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: api }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
-    const mergedProps = react$1.mergeProps(api.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useSwitchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref }) });
-  }
-);
+const SwitchRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: api }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(api.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useSwitchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref }) });
+});
 SwitchRootProvider.displayName = "SwitchRootProvider";
 
 exports.SwitchRootProvider = SwitchRootProvider;

package/dist/components/switch/switch-root-provider.js

@@ -6,13 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { SwitchProvider } from './use-switch-context.js';
 
-const SwitchRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: api }, localProps] = createSplitProps()(props, ["value"]);
-    const mergedProps = mergeProps(api.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });
-  }
-);
+const SwitchRootProvider = forwardRef((props, ref) => {
+  const [{ value: api }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(api.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });
+});
 SwitchRootProvider.displayName = "SwitchRootProvider";
 
 export { SwitchRootProvider };

package/dist/components/switch/use-switch.cjs

@@ -8,7 +8,6 @@ const zagSwitch = require('@zag-js/switch');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -31,11 +30,12 @@ function _interopNamespaceDefault(e) {
 const zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
 
 const useSwitch = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -46,16 +46,10 @@ const useSwitch = (props = {}) => {
     invalid: field?.invalid,
     required: field?.required,
     getRootNode,
-    checked: props.defaultChecked,
     ...props
   };
-  const context = {
-    ...initialContext,
-    checked: props.checked,
-    onCheckedChange: useEvent.useEvent(props.onCheckedChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(zagSwitch__namespace.machine(initialContext), { context });
-  return zagSwitch__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(zagSwitch__namespace.machine, machineProps);
+  return zagSwitch__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useSwitch = useSwitch;

package/dist/components/switch/use-switch.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as zagSwitch from '@zag-js/switch';
-export interface UseSwitchProps extends Optional<Omit<zagSwitch.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The checked state of the switch when it is first rendered.
-     * Use this when you do not need to control the state of the switch.
-     */
-    defaultChecked?: zagSwitch.Context['checked'];
+export interface UseSwitchProps extends Optional<Omit<zagSwitch.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSwitchReturn extends zagSwitch.Api<PropTypes> {
 }

package/dist/components/switch/use-switch.d.ts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as zagSwitch from '@zag-js/switch';
-export interface UseSwitchProps extends Optional<Omit<zagSwitch.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The checked state of the switch when it is first rendered.
-     * Use this when you do not need to control the state of the switch.
-     */
-    defaultChecked?: zagSwitch.Context['checked'];
+export interface UseSwitchProps extends Optional<Omit<zagSwitch.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSwitchReturn extends zagSwitch.Api<PropTypes> {
 }

package/dist/components/switch/use-switch.js

@@ -4,15 +4,15 @@ import * as zagSwitch from '@zag-js/switch';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 import { useFieldContext } from '../field/use-field-context.js';
 
 const useSwitch = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
   const field = useFieldContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -23,16 +23,10 @@ const useSwitch = (props = {}) => {
     invalid: field?.invalid,
     required: field?.required,
     getRootNode,
-    checked: props.defaultChecked,
     ...props
   };
-  const context = {
-    ...initialContext,
-    checked: props.checked,
-    onCheckedChange: useEvent(props.onCheckedChange, { sync: true })
-  };
-  const [state, send] = useMachine(zagSwitch.machine(initialContext), { context });
-  return zagSwitch.connect(state, send, normalizeProps);
+  const service = useMachine(zagSwitch.machine, machineProps);
+  return zagSwitch.connect(service, normalizeProps);
 };
 
 export { useSwitch };