@ark-ui/react 4.9.2 → 5.0.0

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';

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

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

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

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

package/dist/components/toast/toast-close-trigger.cjs

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

package/dist/components/toast/toast-close-trigger.js

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

package/dist/components/toast/toaster.cjs

@@ -7,6 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const toast = require('@zag-js/toast');
 const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const factory = require('../factory.cjs');
 const useToastContext = require('./use-toast-context.cjs');
 
@@ -30,19 +32,30 @@ function _interopNamespaceDefault(e) {
 const toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
 
 const Toaster = react.forwardRef((props, ref) => {
-  const { toaster, children, ...rest } = props;
-  const [state, send] = react$1.useMachine(toaster.machine);
-  const placement = state.context.placement;
-  const api = toast__namespace.group.connect(state, send, react$1.normalizeProps);
-  const toasts = api.getToastsByPlacement(placement);
-  const mergedProps = react$1.mergeProps(api.getGroupProps({ placement }), rest);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(ToastActor, { value: toast2, children: (ctx) => children(ctx) }, toast2.id)) });
+  const { toaster, children, ...localProps } = props;
+  const locale = useLocaleContext.useLocaleContext();
+  const env = useEnvironmentContext.useEnvironmentContext();
+  const service = react$1.useMachine(toast__namespace.group.machine, {
+    store: toaster,
+    id: react.useId(),
+    dir: locale?.dir,
+    getRootNode: () => env?.getDocument()
+  });
+  const api = toast__namespace.group.connect(service, react$1.normalizeProps);
+  const mergedProps = react$1.mergeProps(api.getGroupProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: api.getToasts().map((toast2, index) => /* @__PURE__ */ jsxRuntime.jsx(ToastActor, { value: toast2, parent: service, index, children: (ctx) => children(ctx) }, toast2.id)) });
 });
 Toaster.displayName = "Toaster";
 const ToastActor = (props) => {
-  const [state, send] = react$1.useActor(props.value);
-  const api = toast__namespace.connect(state, send, react$1.normalizeProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useToastContext.ToastProvider, { value: api, children: props.children(state.context) });
+  const localProps = {
+    ...props.value,
+    parent: props.parent,
+    index: props.index
+  };
+  const service = react$1.useMachine(toast__namespace.machine, { ...localProps });
+  const api = toast__namespace.connect(service, react$1.normalizeProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useToastContext.ToastProvider, { value: api, children: props.children(props.value) });
 };
+ToastActor.displayName = "ToastActor";
 
 exports.Toaster = Toaster;

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

@@ -3,7 +3,7 @@ import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { CreateToasterReturn } from './create-toaster';
 import * as toast from '@zag-js/toast';
-export interface ToasterBaseProps extends PolymorphicProps {
+export interface ToasterBaseProps extends PolymorphicProps, Omit<toast.GroupProps, 'store' | 'id'> {
     toaster: CreateToasterReturn;
     children: (toast: toast.Options<ReactNode>) => ReactNode;
 }

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

@@ -3,7 +3,7 @@ import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { CreateToasterReturn } from './create-toaster';
 import * as toast from '@zag-js/toast';
-export interface ToasterBaseProps extends PolymorphicProps {
+export interface ToasterBaseProps extends PolymorphicProps, Omit<toast.GroupProps, 'store' | 'id'> {
     toaster: CreateToasterReturn;
     children: (toast: toast.Options<ReactNode>) => ReactNode;
 }

package/dist/components/toast/toaster.js

@@ -1,25 +1,38 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMachine, normalizeProps, mergeProps, useActor } from '@zag-js/react';
+import { useMachine, normalizeProps, mergeProps } from '@zag-js/react';
 import * as toast from '@zag-js/toast';
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
+import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { ark } from '../factory.js';
 import { ToastProvider } from './use-toast-context.js';
 
 const Toaster = forwardRef((props, ref) => {
-  const { toaster, children, ...rest } = props;
-  const [state, send] = useMachine(toaster.machine);
-  const placement = state.context.placement;
-  const api = toast.group.connect(state, send, normalizeProps);
-  const toasts = api.getToastsByPlacement(placement);
-  const mergedProps = mergeProps(api.getGroupProps({ placement }), rest);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsx(ToastActor, { value: toast2, children: (ctx) => children(ctx) }, toast2.id)) });
+  const { toaster, children, ...localProps } = props;
+  const locale = useLocaleContext();
+  const env = useEnvironmentContext();
+  const service = useMachine(toast.group.machine, {
+    store: toaster,
+    id: useId(),
+    dir: locale?.dir,
+    getRootNode: () => env?.getDocument()
+  });
+  const api = toast.group.connect(service, normalizeProps);
+  const mergedProps = mergeProps(api.getGroupProps(), localProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: api.getToasts().map((toast2, index) => /* @__PURE__ */ jsx(ToastActor, { value: toast2, parent: service, index, children: (ctx) => children(ctx) }, toast2.id)) });
 });
 Toaster.displayName = "Toaster";
 const ToastActor = (props) => {
-  const [state, send] = useActor(props.value);
-  const api = toast.connect(state, send, normalizeProps);
-  return /* @__PURE__ */ jsx(ToastProvider, { value: api, children: props.children(state.context) });
+  const localProps = {
+    ...props.value,
+    parent: props.parent,
+    index: props.index
+  };
+  const service = useMachine(toast.machine, { ...localProps });
+  const api = toast.connect(service, normalizeProps);
+  return /* @__PURE__ */ jsx(ToastProvider, { value: api, children: props.children(props.value) });
 };
+ToastActor.displayName = "ToastActor";
 
 export { Toaster };

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

@@ -1,6 +1,6 @@
 export * as Toggle from './toggle';
 export { ToggleContext, type ToggleContextProps } from './toggle-context';
-export { ToggleIndicator, type ToggleIndicatorBaseProps, type ToggleIndicatorProps, } from './toggle-indicator';
+export { ToggleIndicator, type ToggleIndicatorBaseProps, type ToggleIndicatorProps } from './toggle-indicator';
 export { ToggleRoot, type ToggleRootBaseProps, type ToggleRootProps } from './toggle-root';
 export { toggleAnatomy } from './toggle.anatomy';
 export { useToggle, type UseToggleProps, type UseToggleReturn } from './use-toggle';

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

@@ -1,6 +1,6 @@
 export * as Toggle from './toggle';
 export { ToggleContext, type ToggleContextProps } from './toggle-context';
-export { ToggleIndicator, type ToggleIndicatorBaseProps, type ToggleIndicatorProps, } from './toggle-indicator';
+export { ToggleIndicator, type ToggleIndicatorBaseProps, type ToggleIndicatorProps } from './toggle-indicator';
 export { ToggleRoot, type ToggleRootBaseProps, type ToggleRootProps } from './toggle-root';
 export { toggleAnatomy } from './toggle.anatomy';
 export { useToggle, type UseToggleProps, type UseToggleReturn } from './use-toggle';

package/dist/components/toggle/toggle.anatomy.cjs

@@ -6,7 +6,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const anatomy = require('@zag-js/anatomy');
 
 const toggleAnatomy = anatomy.createAnatomy("toggle", ["root", "indicator"]);
-const parts = toggleAnatomy.build();
+toggleAnatomy.build();
 
-exports.parts = parts;
 exports.toggleAnatomy = toggleAnatomy;

package/dist/components/toggle/toggle.anatomy.js

@@ -2,6 +2,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
 
 const toggleAnatomy = createAnatomy("toggle", ["root", "indicator"]);
-const parts = toggleAnatomy.build();
+toggleAnatomy.build();
 
-export { parts, toggleAnatomy };
+export { toggleAnatomy };

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

@@ -3,46 +3,31 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const domQuery = require('@zag-js/dom-query');
-const useControllableState = require('../../utils/use-controllable-state.cjs');
-const toggle_anatomy = require('./toggle.anatomy.cjs');
+const react = require('@zag-js/react');
+const toggle = require('@zag-js/toggle');
 
-function useToggle(props) {
-  const { defaultPressed, pressed, onPressedChange, disabled } = props;
-  const [pressedState, setPressedState] = useControllableState.useControllableState({
-    defaultValue: !!defaultPressed,
-    value: pressed,
-    onChange: onPressedChange
-  });
-  return {
-    pressed: pressedState,
-    disabled: !!disabled,
-    setPressed: setPressedState,
-    getRootProps() {
-      return {
-        ...toggle_anatomy.parts.root.attrs,
-        type: "button",
-        disabled,
-        "aria-pressed": pressedState,
-        "data-state": pressedState ? "on" : "off",
-        "data-pressed": domQuery.dataAttr(pressedState),
-        "data-disabled": domQuery.dataAttr(disabled),
-        onClick(event) {
-          if (event.defaultPrevented) return;
-          if (disabled) return;
-          setPressedState(!pressedState);
-        }
-      };
-    },
-    getIndicatorProps() {
-      return {
-        ...toggle_anatomy.parts.indicator.attrs,
-        "data-disabled": domQuery.dataAttr(disabled),
-        "data-pressed": domQuery.dataAttr(pressedState),
-        "data-state": pressedState ? "on" : "off"
-      };
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
     }
-  };
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const toggle__namespace = /*#__PURE__*/_interopNamespaceDefault(toggle);
+
+function useToggle(props) {
+  const service = react.useMachine(toggle__namespace.machine, props);
+  return toggle__namespace.connect(service, react.normalizeProps);
 }
 
 exports.useToggle = useToggle;