@ark-ui/react 4.9.1 → 5.0.0

package/dist/components/time-picker/time-picker-control.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useTimePickerContext } from './use-time-picker-context.js';
 
-const TimePickerControl = forwardRef(
-  (props, ref) => {
-    const timePicker = useTimePickerContext();
-    const mergedProps = mergeProps(timePicker.getControlProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const TimePickerControl = forwardRef((props, ref) => {
+  const timePicker = useTimePickerContext();
+  const mergedProps = mergeProps(timePicker.getControlProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 TimePickerControl.displayName = "TimePickerControl";
 
 export { TimePickerControl };

package/dist/components/time-picker/time-picker-positioner.cjs

@@ -10,17 +10,15 @@ const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useTimePickerContext = require('./use-time-picker-context.cjs');
 
-const TimePickerPositioner = react.forwardRef(
-  (props, ref) => {
-    const timePicker = useTimePickerContext.useTimePickerContext();
-    const mergedProps = react$1.mergeProps(timePicker.getPositionerProps(), props);
-    const presence = usePresenceContext.usePresenceContext();
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+const TimePickerPositioner = react.forwardRef((props, ref) => {
+  const timePicker = useTimePickerContext.useTimePickerContext();
+  const mergedProps = react$1.mergeProps(timePicker.getPositionerProps(), props);
+  const presence = usePresenceContext.usePresenceContext();
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 TimePickerPositioner.displayName = "TimePickerPositioner";
 
 exports.TimePickerPositioner = TimePickerPositioner;

package/dist/components/time-picker/time-picker-positioner.js

@@ -6,17 +6,15 @@ import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useTimePickerContext } from './use-time-picker-context.js';
 
-const TimePickerPositioner = forwardRef(
-  (props, ref) => {
-    const timePicker = useTimePickerContext();
-    const mergedProps = mergeProps(timePicker.getPositionerProps(), props);
-    const presence = usePresenceContext();
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+const TimePickerPositioner = forwardRef((props, ref) => {
+  const timePicker = useTimePickerContext();
+  const mergedProps = mergeProps(timePicker.getPositionerProps(), props);
+  const presence = usePresenceContext();
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 TimePickerPositioner.displayName = "TimePickerPositioner";
 
 export { TimePickerPositioner };

package/dist/components/time-picker/time-picker-root-provider.cjs

@@ -13,18 +13,13 @@ const usePresence = require('../presence/use-presence.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useTimePickerContext = require('./use-time-picker-context.cjs');
 
-const TimePickerRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [presenceProps, timePickerProps] = splitPresenceProps.splitPresenceProps(props);
-    const [{ value: timePicker }, localProps] = createSplitProps.createSplitProps()(
-      timePickerProps,
-      ["value"]
-    );
-    const presence = usePresence.usePresence(react$1.mergeProps({ present: timePicker.open }, presenceProps));
-    const mergedProps = react$1.mergeProps(timePicker.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useTimePickerContext.TimePickerProvider, { value: timePicker, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
-  }
-);
+const TimePickerRootProvider = react.forwardRef((props, ref) => {
+  const [presenceProps, timePickerProps] = splitPresenceProps.splitPresenceProps(props);
+  const [{ value: timePicker }, localProps] = createSplitProps.createSplitProps()(timePickerProps, ["value"]);
+  const presence = usePresence.usePresence(react$1.mergeProps({ present: timePicker.open }, presenceProps));
+  const mergedProps = react$1.mergeProps(timePicker.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useTimePickerContext.TimePickerProvider, { value: timePicker, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+});
 TimePickerRootProvider.displayName = "TimePickerRootProvider";
 
 exports.TimePickerRootProvider = TimePickerRootProvider;

package/dist/components/time-picker/time-picker-root-provider.js

@@ -9,18 +9,13 @@ import { usePresence } from '../presence/use-presence.js';
 import { PresenceProvider } from '../presence/use-presence-context.js';
 import { TimePickerProvider } from './use-time-picker-context.js';
 
-const TimePickerRootProvider = forwardRef(
-  (props, ref) => {
-    const [presenceProps, timePickerProps] = splitPresenceProps(props);
-    const [{ value: timePicker }, localProps] = createSplitProps()(
-      timePickerProps,
-      ["value"]
-    );
-    const presence = usePresence(mergeProps({ present: timePicker.open }, presenceProps));
-    const mergedProps = mergeProps(timePicker.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(TimePickerProvider, { value: timePicker, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
-  }
-);
+const TimePickerRootProvider = forwardRef((props, ref) => {
+  const [presenceProps, timePickerProps] = splitPresenceProps(props);
+  const [{ value: timePicker }, localProps] = createSplitProps()(timePickerProps, ["value"]);
+  const presence = usePresence(mergeProps({ present: timePicker.open }, presenceProps));
+  const mergedProps = mergeProps(timePicker.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(TimePickerProvider, { value: timePicker, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+});
 TimePickerRootProvider.displayName = "TimePickerRootProvider";
 
 export { TimePickerRootProvider };

package/dist/components/time-picker/time-picker-trigger.cjs

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

package/dist/components/time-picker/time-picker-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useTimePickerContext } from './use-time-picker-context.js';
 
-const TimePickerTrigger = forwardRef(
-  (props, ref) => {
-    const timePicker = useTimePickerContext();
-    const mergedProps = mergeProps(timePicker.getTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const TimePickerTrigger = forwardRef((props, ref) => {
+  const timePicker = useTimePickerContext();
+  const mergedProps = mergeProps(timePicker.getTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 TimePickerTrigger.displayName = "TimePickerTrigger";
 
 export { TimePickerTrigger };

package/dist/components/time-picker/time-picker.d.cts

@@ -3,7 +3,7 @@ export { TimePickerCell as Cell, type TimePickerCellBaseProps as CellBaseProps,
 export { TimePickerClearTrigger as ClearTrigger, type TimePickerClearTriggerBaseProps as ClearTriggerBaseProps, type TimePickerClearTriggerProps as ClearTriggerProps, } from './time-picker-clear-trigger';
 export { TimePickerColumn as Column, type TimePickerColumnBaseProps as ColumnBaseProps, type TimePickerColumnProps as ColumnProps, } from './time-picker-column';
 export { TimePickerContent as Content, type TimePickerContentBaseProps as ContentBaseProps, type TimePickerContentProps as ContentProps, } from './time-picker-content';
-export { TimePickerContext as Context, type TimePickerContextProps as ContextProps, } from './time-picker-context';
+export { TimePickerContext as Context, type TimePickerContextProps as ContextProps } from './time-picker-context';
 export { TimePickerControl as Control, type TimePickerControlBaseProps as ControlBaseProps, type TimePickerControlProps as ControlProps, } from './time-picker-control';
 export { TimePickerInput as Input, type TimePickerInputBaseProps as InputBaseProps, type TimePickerInputProps as InputProps, } from './time-picker-input';
 export { TimePickerLabel as Label, type TimePickerLabelBaseProps as LabelBaseProps, type TimePickerLabelProps as LabelProps, } from './time-picker-label';

package/dist/components/time-picker/time-picker.d.ts

@@ -3,7 +3,7 @@ export { TimePickerCell as Cell, type TimePickerCellBaseProps as CellBaseProps,
 export { TimePickerClearTrigger as ClearTrigger, type TimePickerClearTriggerBaseProps as ClearTriggerBaseProps, type TimePickerClearTriggerProps as ClearTriggerProps, } from './time-picker-clear-trigger';
 export { TimePickerColumn as Column, type TimePickerColumnBaseProps as ColumnBaseProps, type TimePickerColumnProps as ColumnProps, } from './time-picker-column';
 export { TimePickerContent as Content, type TimePickerContentBaseProps as ContentBaseProps, type TimePickerContentProps as ContentProps, } from './time-picker-content';
-export { TimePickerContext as Context, type TimePickerContextProps as ContextProps, } from './time-picker-context';
+export { TimePickerContext as Context, type TimePickerContextProps as ContextProps } from './time-picker-context';
 export { TimePickerControl as Control, type TimePickerControlBaseProps as ControlBaseProps, type TimePickerControlProps as ControlProps, } from './time-picker-control';
 export { TimePickerInput as Input, type TimePickerInputBaseProps as InputBaseProps, type TimePickerInputProps as InputProps, } from './time-picker-input';
 export { TimePickerLabel as Label, type TimePickerLabelBaseProps as LabelBaseProps, type TimePickerLabelProps as LabelProps, } from './time-picker-label';

package/dist/components/time-picker/use-time-picker.cjs

@@ -8,7 +8,6 @@ const timePicker = require('@zag-js/time-picker');
 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,26 +29,18 @@ function _interopNamespaceDefault(e) {
 const timePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(timePicker);
 
 const useTimePicker = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
-  const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const { dir, locale } = useLocaleContext.useLocaleContext();
+  const machineProps = {
+    id,
     dir,
+    locale,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange),
-    onFocusChange: useEvent.useEvent(props.onFocusChange),
-    onOpenChange: useEvent.useEvent(props.onOpenChange)
-  };
-  const [state, send] = react$1.useMachine(timePicker__namespace.machine(initialContext), { context });
-  return timePicker__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(timePicker__namespace.machine, machineProps);
+  return timePicker__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useTimePicker = useTimePicker;

package/dist/components/time-picker/use-time-picker.d.cts

@@ -1,17 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as timePicker from '@zag-js/time-picker';
-export interface UseTimePickerProps extends Optional<Omit<timePicker.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'> {
-    /**
-     * The initial open state of the time picker when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: timePicker.Context['open'];
-    /**
-     * The initial value of the time picker when it is first rendered.
-     * Use when you do not need to control the state of the time picker.
-     */
-    defaultValue?: timePicker.Context['value'];
+export interface UseTimePickerProps extends Optional<Omit<timePicker.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseTimePickerReturn extends timePicker.Api<PropTypes> {
 }

package/dist/components/time-picker/use-time-picker.d.ts

@@ -1,17 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as timePicker from '@zag-js/time-picker';
-export interface UseTimePickerProps extends Optional<Omit<timePicker.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'> {
-    /**
-     * The initial open state of the time picker when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: timePicker.Context['open'];
-    /**
-     * The initial value of the time picker when it is first rendered.
-     * Use when you do not need to control the state of the time picker.
-     */
-    defaultValue?: timePicker.Context['value'];
+export interface UseTimePickerProps extends Optional<Omit<timePicker.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseTimePickerReturn extends timePicker.Api<PropTypes> {
 }

package/dist/components/time-picker/use-time-picker.js

@@ -4,29 +4,20 @@ import * as timePicker from '@zag-js/time-picker';
 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';
 
 const useTimePicker = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
-  const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const { dir, locale } = useLocaleContext();
+  const machineProps = {
+    id,
     dir,
+    locale,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange),
-    onFocusChange: useEvent(props.onFocusChange),
-    onOpenChange: useEvent(props.onOpenChange)
-  };
-  const [state, send] = useMachine(timePicker.machine(initialContext), { context });
-  return timePicker.connect(state, send, normalizeProps);
+  const service = useMachine(timePicker.machine, machineProps);
+  return timePicker.connect(service, normalizeProps);
 };
 
 export { useTimePicker };

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

@@ -4,8 +4,8 @@ export { TimerContext, type TimerContextProps } from './timer-context';
 export { TimerControl, type TimerControlBaseProps, type TimerControlProps } from './timer-control';
 export { TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item';
 export { TimerRoot, type TimerRootBaseProps, type TimerRootProps } from './timer-root';
-export { TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps, } from './timer-root-provider';
-export { TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps, } from './timer-separator';
+export { TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps } from './timer-root-provider';
+export { TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps } from './timer-separator';
 export { timerAnatomy } from './timer.anatomy';
 export { useTimer, type UseTimerProps, type UseTimerReturn } from './use-timer';
 export { useTimerContext, type UseTimerContext } from './use-timer-context';

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

@@ -4,8 +4,8 @@ export { TimerContext, type TimerContextProps } from './timer-context';
 export { TimerControl, type TimerControlBaseProps, type TimerControlProps } from './timer-control';
 export { TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item';
 export { TimerRoot, type TimerRootBaseProps, type TimerRootProps } from './timer-root';
-export { TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps, } from './timer-root-provider';
-export { TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps, } from './timer-separator';
+export { TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps } from './timer-root-provider';
+export { TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps } from './timer-separator';
 export { timerAnatomy } from './timer.anatomy';
 export { useTimer, type UseTimerProps, type UseTimerReturn } from './use-timer';
 export { useTimerContext, type UseTimerContext } from './use-timer-context';

package/dist/components/timer/timer-action-trigger.cjs

@@ -6,16 +6,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useTimerContext = require('./use-timer-context.cjs');
 
-const TimerActionTrigger = react.forwardRef(
-  (props, ref) => {
-    const timer = useTimerContext.useTimerContext();
-    const mergedProps = react$1.mergeProps(timer.getActionTriggerProps(props), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const TimerActionTrigger = react.forwardRef((props, ref) => {
+  const [actionTriggerProps, localProps] = createSplitProps.createSplitProps()(props, ["action"]);
+  const timer = useTimerContext.useTimerContext();
+  const mergedProps = react$1.mergeProps(timer.getActionTriggerProps(actionTriggerProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 TimerActionTrigger.displayName = "TimerActionTrigger";
 
 exports.TimerActionTrigger = TimerActionTrigger;

package/dist/components/timer/timer-action-trigger.js

@@ -2,16 +2,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useTimerContext } from './use-timer-context.js';
 
-const TimerActionTrigger = forwardRef(
-  (props, ref) => {
-    const timer = useTimerContext();
-    const mergedProps = mergeProps(timer.getActionTriggerProps(props), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const TimerActionTrigger = forwardRef((props, ref) => {
+  const [actionTriggerProps, localProps] = createSplitProps()(props, ["action"]);
+  const timer = useTimerContext();
+  const mergedProps = mergeProps(timer.getActionTriggerProps(actionTriggerProps), localProps);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 TimerActionTrigger.displayName = "TimerActionTrigger";
 
 export { TimerActionTrigger };

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

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

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

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

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

@@ -7,7 +7,6 @@ const react$1 = require('@zag-js/react');
 const timer = require('@zag-js/timer');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,19 +28,15 @@ function _interopNamespaceDefault(e) {
 const timer__namespace = /*#__PURE__*/_interopNamespaceDefault(timer);
 
 const useTimer = (props = {}) => {
-  const env = useEnvironmentContext.useEnvironmentContext();
-  const initialContext = {
-    id: react.useId(),
-    getRootNode: env.getRootNode,
+  const id = react.useId();
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  const machineProps = {
+    id,
+    getRootNode,
     ...props
   };
-  const context = {
-    ...initialContext,
-    onComplete: useEvent.useEvent(props.onComplete),
-    onTick: useEvent.useEvent(props.onTick)
-  };
-  const [state, send] = react$1.useMachine(timer__namespace.machine(initialContext), { context });
-  return timer__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(timer__namespace.machine, machineProps);
+  return timer__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useTimer = useTimer;

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

@@ -1,7 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as timer from '@zag-js/timer';
-export interface UseTimerProps extends Optional<Omit<timer.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseTimerProps extends Optional<Omit<timer.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseTimerReturn extends timer.Api<PropTypes> {
 }

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

@@ -1,7 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as timer from '@zag-js/timer';
-export interface UseTimerProps extends Optional<Omit<timer.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseTimerProps extends Optional<Omit<timer.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseTimerReturn extends timer.Api<PropTypes> {
 }

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

@@ -3,22 +3,17 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import * as timer from '@zag-js/timer';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 const useTimer = (props = {}) => {
-  const env = useEnvironmentContext();
-  const initialContext = {
-    id: useId(),
-    getRootNode: env.getRootNode,
+  const id = useId();
+  const { getRootNode } = useEnvironmentContext();
+  const machineProps = {
+    id,
+    getRootNode,
     ...props
   };
-  const context = {
-    ...initialContext,
-    onComplete: useEvent(props.onComplete),
-    onTick: useEvent(props.onTick)
-  };
-  const [state, send] = useMachine(timer.machine(initialContext), { context });
-  return timer.connect(state, send, normalizeProps);
+  const service = useMachine(timer.machine, machineProps);
+  return timer.connect(service, normalizeProps);
 };
 
 export { useTimer };

package/dist/components/toast/create-toaster.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const react = require('@zag-js/react');
 const toast = require('@zag-js/toast');
 
 function _interopNamespaceDefault(e) {
@@ -26,9 +25,7 @@ function _interopNamespaceDefault(e) {
 const toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
 
 const createToaster = (props) => {
-  const machine = toast__namespace.group.machine({ id: "1", ...props });
-  const api = toast__namespace.group.connect(machine, machine.send, react.normalizeProps);
-  return { ...api, machine };
+  return toast__namespace.createStore(props);
 };
 
 exports.createToaster = createToaster;

package/dist/components/toast/create-toaster.d.cts

@@ -1,11 +1,6 @@
-import { PropTypes } from '@zag-js/react';
-import { ReactNode } from 'react';
-import { Optional } from '../../types';
 import * as toast from '@zag-js/toast';
-export interface CreateToasterProps extends Optional<Partial<toast.GroupMachineContext>, 'id'> {
-    placement: toast.Placement;
+export interface CreateToasterProps extends toast.StoreProps {
 }
-export interface CreateToasterReturn extends toast.GroupApi<PropTypes, ReactNode> {
-    machine: toast.GroupService<ReactNode>;
+export interface CreateToasterReturn extends toast.Store {
 }
-export declare const createToaster: (props: CreateToasterProps) => CreateToasterReturn;
+export declare const createToaster: (props: toast.StoreProps) => toast.Store;

package/dist/components/toast/create-toaster.d.ts

@@ -1,11 +1,6 @@
-import { PropTypes } from '@zag-js/react';
-import { ReactNode } from 'react';
-import { Optional } from '../../types';
 import * as toast from '@zag-js/toast';
-export interface CreateToasterProps extends Optional<Partial<toast.GroupMachineContext>, 'id'> {
-    placement: toast.Placement;
+export interface CreateToasterProps extends toast.StoreProps {
 }
-export interface CreateToasterReturn extends toast.GroupApi<PropTypes, ReactNode> {
-    machine: toast.GroupService<ReactNode>;
+export interface CreateToasterReturn extends toast.Store {
 }
-export declare const createToaster: (props: CreateToasterProps) => CreateToasterReturn;
+export declare const createToaster: (props: toast.StoreProps) => toast.Store;

package/dist/components/toast/create-toaster.js

@@ -1,11 +1,8 @@
 'use client';
-import { normalizeProps } from '@zag-js/react';
 import * as toast from '@zag-js/toast';
 
 const createToaster = (props) => {
-  const machine = toast.group.machine({ id: "1", ...props });
-  const api = toast.group.connect(machine, machine.send, normalizeProps);
-  return { ...api, machine };
+  return toast.createStore(props);
 };
 
 export { createToaster };

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

@@ -1,8 +1,8 @@
 export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
 export { ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger';
-export { ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps, } from './toast-close-trigger';
+export { ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps } from './toast-close-trigger';
 export { ToastContext, type ToastContextProps } from './toast-context';
-export { ToastDescription, type ToastDescriptionBaseProps, type ToastDescriptionProps, } from './toast-description';
+export { ToastDescription, type ToastDescriptionBaseProps, type ToastDescriptionProps } from './toast-description';
 export { ToastRoot, type ToastRootBaseProps, type ToastRootProps } from './toast-root';
 export { ToastTitle, type ToastTitleBaseProps, type ToastTitleProps } from './toast-title';
 export { toastAnatomy } from './toast.anatomy';

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

@@ -1,8 +1,8 @@
 export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
 export { ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger';
-export { ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps, } from './toast-close-trigger';
+export { ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps } from './toast-close-trigger';
 export { ToastContext, type ToastContextProps } from './toast-context';
-export { ToastDescription, type ToastDescriptionBaseProps, type ToastDescriptionProps, } from './toast-description';
+export { ToastDescription, type ToastDescriptionBaseProps, type ToastDescriptionProps } from './toast-description';
 export { ToastRoot, type ToastRootBaseProps, type ToastRootProps } from './toast-root';
 export { ToastTitle, type ToastTitleBaseProps, type ToastTitleProps } from './toast-title';
 export { toastAnatomy } from './toast.anatomy';