@ark-ui/react 4.9.2 → 5.0.0

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

@@ -1,35 +1,7 @@
-export interface UseToggleProps {
-    /**
-     * Whether the toggle is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * The default pressed state of the toggle.
-     */
-    defaultPressed?: boolean;
-    /**
-     * The pressed state of the toggle.
-     */
-    pressed?: boolean;
-    /**
-     * Event handler called when the pressed state of the toggle changes.
-     */
-    onPressedChange?: (pressed: boolean) => void;
+import { PropTypes } from '@zag-js/react';
+import * as toggle from '@zag-js/toggle';
+export interface UseToggleProps extends toggle.Props {
 }
-export interface UseToggleReturn {
-    /**
-     * Whether the toggle is pressed.
-     */
-    pressed: boolean;
-    /**
-     * Whether the toggle is disabled.
-     */
-    disabled: boolean;
-    /**
-     * Sets the pressed state of the toggle.
-     */
-    setPressed(pressed: boolean): void;
-    getRootProps(): React.ComponentProps<'button'>;
-    getIndicatorProps(): React.ComponentProps<'div'>;
+export interface UseToggleReturn extends toggle.Api<PropTypes> {
 }
 export declare function useToggle(props: UseToggleProps): UseToggleReturn;

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

@@ -1,35 +1,7 @@
-export interface UseToggleProps {
-    /**
-     * Whether the toggle is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * The default pressed state of the toggle.
-     */
-    defaultPressed?: boolean;
-    /**
-     * The pressed state of the toggle.
-     */
-    pressed?: boolean;
-    /**
-     * Event handler called when the pressed state of the toggle changes.
-     */
-    onPressedChange?: (pressed: boolean) => void;
+import { PropTypes } from '@zag-js/react';
+import * as toggle from '@zag-js/toggle';
+export interface UseToggleProps extends toggle.Props {
 }
-export interface UseToggleReturn {
-    /**
-     * Whether the toggle is pressed.
-     */
-    pressed: boolean;
-    /**
-     * Whether the toggle is disabled.
-     */
-    disabled: boolean;
-    /**
-     * Sets the pressed state of the toggle.
-     */
-    setPressed(pressed: boolean): void;
-    getRootProps(): React.ComponentProps<'button'>;
-    getIndicatorProps(): React.ComponentProps<'div'>;
+export interface UseToggleReturn extends toggle.Api<PropTypes> {
 }
 export declare function useToggle(props: UseToggleProps): UseToggleReturn;

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

@@ -1,44 +1,10 @@
 'use client';
-import { dataAttr } from '@zag-js/dom-query';
-import { useControllableState } from '../../utils/use-controllable-state.js';
-import { parts } from './toggle.anatomy.js';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import * as toggle from '@zag-js/toggle';
 
 function useToggle(props) {
-  const { defaultPressed, pressed, onPressedChange, disabled } = props;
-  const [pressedState, setPressedState] = useControllableState({
-    defaultValue: !!defaultPressed,
-    value: pressed,
-    onChange: onPressedChange
-  });
-  return {
-    pressed: pressedState,
-    disabled: !!disabled,
-    setPressed: setPressedState,
-    getRootProps() {
-      return {
-        ...parts.root.attrs,
-        type: "button",
-        disabled,
-        "aria-pressed": pressedState,
-        "data-state": pressedState ? "on" : "off",
-        "data-pressed": dataAttr(pressedState),
-        "data-disabled": dataAttr(disabled),
-        onClick(event) {
-          if (event.defaultPrevented) return;
-          if (disabled) return;
-          setPressedState(!pressedState);
-        }
-      };
-    },
-    getIndicatorProps() {
-      return {
-        ...parts.indicator.attrs,
-        "data-disabled": dataAttr(disabled),
-        "data-pressed": dataAttr(pressedState),
-        "data-state": pressedState ? "on" : "off"
-      };
-    }
-  };
+  const service = useMachine(toggle.machine, props);
+  return toggle.connect(service, normalizeProps);
 }
 
 export { useToggle };

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

@@ -1,9 +1,9 @@
 export type { ValueChangeDetails as ToggleGroupValueChangeDetails } from '@zag-js/toggle-group';
 export { ToggleGroupContext, type ToggleGroupContextProps } from './toggle-group-context';
-export { ToggleGroupItem, type ToggleGroupItemBaseProps, type ToggleGroupItemProps, } from './toggle-group-item';
-export { ToggleGroupRoot, type ToggleGroupRootBaseProps, type ToggleGroupRootProps, } from './toggle-group-root';
+export { ToggleGroupItem, type ToggleGroupItemBaseProps, type ToggleGroupItemProps } from './toggle-group-item';
+export { ToggleGroupRoot, type ToggleGroupRootBaseProps, type ToggleGroupRootProps } from './toggle-group-root';
 export { ToggleGroupRootProvider, type ToggleGroupRootProviderBaseProps, type ToggleGroupRootProviderProps, } from './toggle-group-root-provider';
 export { toggleGroupAnatomy } from './toggle-group.anatomy';
-export { useToggleGroup, type UseToggleGroupProps, type UseToggleGroupReturn, } from './use-toggle-group';
+export { useToggleGroup, type UseToggleGroupProps, type UseToggleGroupReturn } from './use-toggle-group';
 export { useToggleGroupContext, type UseToggleGroupContext } from './use-toggle-group-context';
 export * as ToggleGroup from './toggle-group';

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

@@ -1,9 +1,9 @@
 export type { ValueChangeDetails as ToggleGroupValueChangeDetails } from '@zag-js/toggle-group';
 export { ToggleGroupContext, type ToggleGroupContextProps } from './toggle-group-context';
-export { ToggleGroupItem, type ToggleGroupItemBaseProps, type ToggleGroupItemProps, } from './toggle-group-item';
-export { ToggleGroupRoot, type ToggleGroupRootBaseProps, type ToggleGroupRootProps, } from './toggle-group-root';
+export { ToggleGroupItem, type ToggleGroupItemBaseProps, type ToggleGroupItemProps } from './toggle-group-item';
+export { ToggleGroupRoot, type ToggleGroupRootBaseProps, type ToggleGroupRootProps } from './toggle-group-root';
 export { ToggleGroupRootProvider, type ToggleGroupRootProviderBaseProps, type ToggleGroupRootProviderProps, } from './toggle-group-root-provider';
 export { toggleGroupAnatomy } from './toggle-group.anatomy';
-export { useToggleGroup, type UseToggleGroupProps, type UseToggleGroupReturn, } from './use-toggle-group';
+export { useToggleGroup, type UseToggleGroupProps, type UseToggleGroupReturn } from './use-toggle-group';
 export { useToggleGroupContext, type UseToggleGroupContext } from './use-toggle-group-context';
 export * as ToggleGroup from './toggle-group';

package/dist/components/toggle-group/toggle-group-root-provider.cjs

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

package/dist/components/toggle-group/toggle-group-root-provider.js

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

package/dist/components/toggle-group/toggle-group.d.cts

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails } from '@zag-js/toggle-group';
-export { ToggleGroupContext as Context, type ToggleGroupContextProps as ContextProps, } from './toggle-group-context';
+export { ToggleGroupContext as Context, type ToggleGroupContextProps as ContextProps } from './toggle-group-context';
 export { ToggleGroupItem as Item, type ToggleGroupItemBaseProps as ItemBaseProps, type ToggleGroupItemProps as ItemProps, } from './toggle-group-item';
 export { ToggleGroupRoot as Root, type ToggleGroupRootBaseProps as RootBaseProps, type ToggleGroupRootProps as RootProps, } from './toggle-group-root';
 export { ToggleGroupRootProvider as RootProvider, type ToggleGroupRootProviderBaseProps as RootProviderBaseProps, type ToggleGroupRootProviderProps as RootProviderProps, } from './toggle-group-root-provider';

package/dist/components/toggle-group/toggle-group.d.ts

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails } from '@zag-js/toggle-group';
-export { ToggleGroupContext as Context, type ToggleGroupContextProps as ContextProps, } from './toggle-group-context';
+export { ToggleGroupContext as Context, type ToggleGroupContextProps as ContextProps } from './toggle-group-context';
 export { ToggleGroupItem as Item, type ToggleGroupItemBaseProps as ItemBaseProps, type ToggleGroupItemProps as ItemProps, } from './toggle-group-item';
 export { ToggleGroupRoot as Root, type ToggleGroupRootBaseProps as RootBaseProps, type ToggleGroupRootProps as RootProps, } from './toggle-group-root';
 export { ToggleGroupRootProvider as RootProvider, type ToggleGroupRootProviderBaseProps as RootProviderBaseProps, type ToggleGroupRootProviderProps as RootProviderProps, } from './toggle-group-root-provider';

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

@@ -8,7 +8,6 @@ const toggleGroup = require('@zag-js/toggle-group');
 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,24 +29,17 @@ function _interopNamespaceDefault(e) {
 const toggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(toggleGroup);
 
 const useToggleGroup = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(toggleGroup__namespace.machine(initialContext), {
-    context
-  });
-  return toggleGroup__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(toggleGroup__namespace.machine, machineProps);
+  return toggleGroup__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useToggleGroup = useToggleGroup;

package/dist/components/toggle-group/use-toggle-group.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as toggleGroup from '@zag-js/toggle-group';
-export interface UseToggleGroupProps extends Optional<Omit<toggleGroup.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the toggle group when it is first rendered.
-     * Use when you do not need to control the state of the toggle group.
-     */
-    defaultValue?: toggleGroup.Context['value'];
+export interface UseToggleGroupProps extends Optional<Omit<toggleGroup.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseToggleGroupReturn extends toggleGroup.Api<PropTypes> {
 }

package/dist/components/toggle-group/use-toggle-group.d.ts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as toggleGroup from '@zag-js/toggle-group';
-export interface UseToggleGroupProps extends Optional<Omit<toggleGroup.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the toggle group when it is first rendered.
-     * Use when you do not need to control the state of the toggle group.
-     */
-    defaultValue?: toggleGroup.Context['value'];
+export interface UseToggleGroupProps extends Optional<Omit<toggleGroup.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseToggleGroupReturn extends toggleGroup.Api<PropTypes> {
 }

package/dist/components/toggle-group/use-toggle-group.js

@@ -4,27 +4,19 @@ import * as toggleGroup from '@zag-js/toggle-group';
 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 useToggleGroup = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true })
-  };
-  const [state, send] = useMachine(toggleGroup.machine(initialContext), {
-    context
-  });
-  return toggleGroup.connect(state, send, normalizeProps);
+  const service = useMachine(toggleGroup.machine, machineProps);
+  return toggleGroup.connect(service, normalizeProps);
 };
 
 export { useToggleGroup };

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

@@ -1,12 +1,12 @@
 export type { OpenChangeDetails as TooltipOpenChangeDetails } from '@zag-js/tooltip';
 export { TooltipArrow, type TooltipArrowBaseProps, type TooltipArrowProps } from './tooltip-arrow';
-export { TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps, } from './tooltip-arrow-tip';
-export { TooltipContent, type TooltipContentBaseProps, type TooltipContentProps, } from './tooltip-content';
+export { TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps } from './tooltip-arrow-tip';
+export { TooltipContent, type TooltipContentBaseProps, type TooltipContentProps } from './tooltip-content';
 export { TooltipContext, type TooltipContextProps } from './tooltip-context';
-export { TooltipPositioner, type TooltipPositionerBaseProps, type TooltipPositionerProps, } from './tooltip-positioner';
+export { TooltipPositioner, type TooltipPositionerBaseProps, type TooltipPositionerProps } from './tooltip-positioner';
 export { TooltipRoot, type TooltipRootBaseProps, type TooltipRootProps } from './tooltip-root';
 export { TooltipRootProvider, type TooltipRootProviderBaseProps, type TooltipRootProviderProps, } from './tooltip-root-provider';
-export { TooltipTrigger, type TooltipTriggerBaseProps, type TooltipTriggerProps, } from './tooltip-trigger';
+export { TooltipTrigger, type TooltipTriggerBaseProps, type TooltipTriggerProps } from './tooltip-trigger';
 export { tooltipAnatomy } from './tooltip.anatomy';
 export { useTooltip, type UseTooltipProps, type UseTooltipReturn } from './use-tooltip';
 export { useTooltipContext, type UseTooltipContext } from './use-tooltip-context';

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

@@ -1,12 +1,12 @@
 export type { OpenChangeDetails as TooltipOpenChangeDetails } from '@zag-js/tooltip';
 export { TooltipArrow, type TooltipArrowBaseProps, type TooltipArrowProps } from './tooltip-arrow';
-export { TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps, } from './tooltip-arrow-tip';
-export { TooltipContent, type TooltipContentBaseProps, type TooltipContentProps, } from './tooltip-content';
+export { TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps } from './tooltip-arrow-tip';
+export { TooltipContent, type TooltipContentBaseProps, type TooltipContentProps } from './tooltip-content';
 export { TooltipContext, type TooltipContextProps } from './tooltip-context';
-export { TooltipPositioner, type TooltipPositionerBaseProps, type TooltipPositionerProps, } from './tooltip-positioner';
+export { TooltipPositioner, type TooltipPositionerBaseProps, type TooltipPositionerProps } from './tooltip-positioner';
 export { TooltipRoot, type TooltipRootBaseProps, type TooltipRootProps } from './tooltip-root';
 export { TooltipRootProvider, type TooltipRootProviderBaseProps, type TooltipRootProviderProps, } from './tooltip-root-provider';
-export { TooltipTrigger, type TooltipTriggerBaseProps, type TooltipTriggerProps, } from './tooltip-trigger';
+export { TooltipTrigger, type TooltipTriggerBaseProps, type TooltipTriggerProps } from './tooltip-trigger';
 export { tooltipAnatomy } from './tooltip.anatomy';
 export { useTooltip, type UseTooltipProps, type UseTooltipReturn } from './use-tooltip';
 export { useTooltipContext, type UseTooltipContext } from './use-tooltip-context';

package/dist/components/tooltip/tooltip-positioner.cjs

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

package/dist/components/tooltip/tooltip-positioner.js

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

package/dist/components/tooltip/tooltip.d.cts

@@ -2,7 +2,7 @@ export type { OpenChangeDetails } from '@zag-js/tooltip';
 export { TooltipArrow as Arrow, type TooltipArrowBaseProps as ArrowBaseProps, type TooltipArrowProps as ArrowProps, } from './tooltip-arrow';
 export { TooltipArrowTip as ArrowTip, type TooltipArrowTipBaseProps as ArrowTipBaseProps, type TooltipArrowTipProps as ArrowTipProps, } from './tooltip-arrow-tip';
 export { TooltipContent as Content, type TooltipContentBaseProps as ContentBaseProps, type TooltipContentProps as ContentProps, } from './tooltip-content';
-export { TooltipContext as Context, type TooltipContextProps as ContextProps, } from './tooltip-context';
+export { TooltipContext as Context, type TooltipContextProps as ContextProps } from './tooltip-context';
 export { TooltipPositioner as Positioner, type TooltipPositionerBaseProps as PositionerBaseProps, type TooltipPositionerProps as PositionerProps, } from './tooltip-positioner';
 export { TooltipRoot as Root, type TooltipRootBaseProps as RootBaseProps, type TooltipRootProps as RootProps, } from './tooltip-root';
 export { TooltipRootProvider as RootProvider, type TooltipRootProviderBaseProps as RootProviderBaseProps, type TooltipRootProviderProps as RootProviderProps, } from './tooltip-root-provider';

package/dist/components/tooltip/tooltip.d.ts

@@ -2,7 +2,7 @@ export type { OpenChangeDetails } from '@zag-js/tooltip';
 export { TooltipArrow as Arrow, type TooltipArrowBaseProps as ArrowBaseProps, type TooltipArrowProps as ArrowProps, } from './tooltip-arrow';
 export { TooltipArrowTip as ArrowTip, type TooltipArrowTipBaseProps as ArrowTipBaseProps, type TooltipArrowTipProps as ArrowTipProps, } from './tooltip-arrow-tip';
 export { TooltipContent as Content, type TooltipContentBaseProps as ContentBaseProps, type TooltipContentProps as ContentProps, } from './tooltip-content';
-export { TooltipContext as Context, type TooltipContextProps as ContextProps, } from './tooltip-context';
+export { TooltipContext as Context, type TooltipContextProps as ContextProps } from './tooltip-context';
 export { TooltipPositioner as Positioner, type TooltipPositionerBaseProps as PositionerBaseProps, type TooltipPositionerProps as PositionerProps, } from './tooltip-positioner';
 export { TooltipRoot as Root, type TooltipRootBaseProps as RootBaseProps, type TooltipRootProps as RootProps, } from './tooltip-root';
 export { TooltipRootProvider as RootProvider, type TooltipRootProviderBaseProps as RootProviderBaseProps, type TooltipRootProviderProps as RootProviderProps, } from './tooltip-root-provider';

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

@@ -8,7 +8,6 @@ const tooltip = require('@zag-js/tooltip');
 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,22 +29,17 @@ function _interopNamespaceDefault(e) {
 const tooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(tooltip);
 
 const useTooltip = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    onOpenChange: useEvent.useEvent(props.onOpenChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(tooltip__namespace.machine(initialContext), { context });
-  return tooltip__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(tooltip__namespace.machine, machineProps);
+  return tooltip__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useTooltip = useTooltip;

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

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

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

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

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

@@ -4,25 +4,19 @@ import * as tooltip from '@zag-js/tooltip';
 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 useTooltip = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    onOpenChange: useEvent(props.onOpenChange, { sync: true })
-  };
-  const [state, send] = useMachine(tooltip.machine(initialContext), { context });
-  return tooltip.connect(state, send, normalizeProps);
+  const service = useMachine(tooltip.machine, machineProps);
+  return tooltip.connect(service, normalizeProps);
 };
 
 export { useTooltip };

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

@@ -1,18 +1,18 @@
 export type { StepDetails as TourStepDetails } from '@zag-js/tour';
-export { TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps, } from './tour-action-trigger';
+export { TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps } from './tour-action-trigger';
 export { TourActions, type TourActionsProps } from './tour-actions';
 export { TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow';
 export { TourArrowTip, type TourArrowTipBaseProps, type TourArrowTipProps } from './tour-arrow-tip';
 export { TourBackdrop, type TourBackdropBaseProps, type TourBackdropProps } from './tour-backdrop';
-export { TourCloseTrigger, type TourCloseTriggerBaseProps, type TourCloseTriggerProps, } from './tour-close-trigger';
+export { TourCloseTrigger, type TourCloseTriggerBaseProps, type TourCloseTriggerProps } from './tour-close-trigger';
 export { TourContent, type TourContentBaseProps, type TourContentProps } from './tour-content';
 export { TourContext, type TourContextProps } from './tour-context';
 export { TourControl, type TourControlBaseProps, type TourControlProps } from './tour-control';
-export { TourDescription, type TourDescriptionBaseProps, type TourDescriptionProps, } from './tour-description';
-export { TourPositioner, type TourPositionerBaseProps, type TourPositionerProps, } from './tour-positioner';
-export { TourProgressText, type TourProgressTextBaseProps, type TourProgressTextProps, } from './tour-progress-text';
+export { TourDescription, type TourDescriptionBaseProps, type TourDescriptionProps } from './tour-description';
+export { TourPositioner, type TourPositionerBaseProps, type TourPositionerProps } from './tour-positioner';
+export { TourProgressText, type TourProgressTextBaseProps, type TourProgressTextProps } from './tour-progress-text';
 export { TourRoot, type TourRootBaseProps, type TourRootProps } from './tour-root';
-export { TourSpotlight, type TourSpotlightBaseProps, type TourSpotlightProps, } from './tour-spotlight';
+export { TourSpotlight, type TourSpotlightBaseProps, type TourSpotlightProps } from './tour-spotlight';
 export { TourTitle, type TourTitleBaseProps, type TourTitleProps } from './tour-title';
 export { tourAnatomy } from './tour.anatomy';
 export { useTour, type UseTourProps, type UseTourReturn } from './use-tour';

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

@@ -1,18 +1,18 @@
 export type { StepDetails as TourStepDetails } from '@zag-js/tour';
-export { TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps, } from './tour-action-trigger';
+export { TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps } from './tour-action-trigger';
 export { TourActions, type TourActionsProps } from './tour-actions';
 export { TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow';
 export { TourArrowTip, type TourArrowTipBaseProps, type TourArrowTipProps } from './tour-arrow-tip';
 export { TourBackdrop, type TourBackdropBaseProps, type TourBackdropProps } from './tour-backdrop';
-export { TourCloseTrigger, type TourCloseTriggerBaseProps, type TourCloseTriggerProps, } from './tour-close-trigger';
+export { TourCloseTrigger, type TourCloseTriggerBaseProps, type TourCloseTriggerProps } from './tour-close-trigger';
 export { TourContent, type TourContentBaseProps, type TourContentProps } from './tour-content';
 export { TourContext, type TourContextProps } from './tour-context';
 export { TourControl, type TourControlBaseProps, type TourControlProps } from './tour-control';
-export { TourDescription, type TourDescriptionBaseProps, type TourDescriptionProps, } from './tour-description';
-export { TourPositioner, type TourPositionerBaseProps, type TourPositionerProps, } from './tour-positioner';
-export { TourProgressText, type TourProgressTextBaseProps, type TourProgressTextProps, } from './tour-progress-text';
+export { TourDescription, type TourDescriptionBaseProps, type TourDescriptionProps } from './tour-description';
+export { TourPositioner, type TourPositionerBaseProps, type TourPositionerProps } from './tour-positioner';
+export { TourProgressText, type TourProgressTextBaseProps, type TourProgressTextProps } from './tour-progress-text';
 export { TourRoot, type TourRootBaseProps, type TourRootProps } from './tour-root';
-export { TourSpotlight, type TourSpotlightBaseProps, type TourSpotlightProps, } from './tour-spotlight';
+export { TourSpotlight, type TourSpotlightBaseProps, type TourSpotlightProps } from './tour-spotlight';
 export { TourTitle, type TourTitleBaseProps, type TourTitleProps } from './tour-title';
 export { tourAnatomy } from './tour.anatomy';
 export { useTour, type UseTourProps, type UseTourReturn } from './use-tour';

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

@@ -10,16 +10,12 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useTourContext = require('./use-tour-context.cjs');
 
-const TourActionTrigger = react.forwardRef(
-  (props, ref) => {
-    const [actionTriggerProps, localProps] = createSplitProps.createSplitProps()(props, [
-      "action"
-    ]);
-    const tour = useTourContext.useTourContext();
-    const mergedProps = react$1.mergeProps(tour.getActionTriggerProps(actionTriggerProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref, children: mergedProps.children || actionTriggerProps.action.label });
-  }
-);
+const TourActionTrigger = react.forwardRef((props, ref) => {
+  const [actionTriggerProps, localProps] = createSplitProps.createSplitProps()(props, ["action"]);
+  const tour = useTourContext.useTourContext();
+  const mergedProps = react$1.mergeProps(tour.getActionTriggerProps(actionTriggerProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref, children: mergedProps.children || actionTriggerProps.action.label });
+});
 TourActionTrigger.displayName = "TourActionTrigger";
 
 exports.TourActionTrigger = TourActionTrigger;