@ark-ui/react 4.0.0 → 4.1.1

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const presence = require('@zag-js/presence');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const composeRefs = require('../../utils/compose-refs.cjs');
 const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -41,12 +40,12 @@ const usePresence = (props) => {
     wasEverPresent.current = true;
   }
   const unmounted = !api.present && !wasEverPresent.current && lazyMount || unmountOnExit && !api.present && wasEverPresent.current;
-  const getPresenceProps = (ref) => ({
-    ref: composeRefs.composeRefs(api.setNode, ref),
+  const getPresenceProps = () => ({
     "data-state": props.present ? "open" : "closed",
     hidden: !api.present
   });
   return {
+    ref: api.setNode,
     getPresenceProps,
     present: api.present,
     unmounted

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

@@ -1,4 +1,3 @@
-import { ForwardedRef } from 'react';
 import { Optional } from '../../types';
 import { RenderStrategyProps } from '../../utils/render-strategy';
 import * as presence from '@zag-js/presence';
@@ -6,8 +5,8 @@ export interface UsePresenceProps extends Optional<presence.Context, 'present'>,
 }
 export type UsePresenceReturn = ReturnType<typeof usePresence>;
 export declare const usePresence: (props: UsePresenceProps) => {
-    getPresenceProps: <T extends HTMLElement>(ref: ForwardedRef<T>) => {
-        ref: ForwardedRef<T>;
+    ref: (node: HTMLElement | null) => void;
+    getPresenceProps: () => {
         'data-state': string;
         hidden: boolean;
     };

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

@@ -1,4 +1,3 @@
-import { ForwardedRef } from 'react';
 import { Optional } from '../../types';
 import { RenderStrategyProps } from '../../utils/render-strategy';
 import * as presence from '@zag-js/presence';
@@ -6,8 +5,8 @@ export interface UsePresenceProps extends Optional<presence.Context, 'present'>,
 }
 export type UsePresenceReturn = ReturnType<typeof usePresence>;
 export declare const usePresence: (props: UsePresenceProps) => {
-    getPresenceProps: <T extends HTMLElement>(ref: ForwardedRef<T>) => {
-        ref: ForwardedRef<T>;
+    ref: (node: HTMLElement | null) => void;
+    getPresenceProps: () => {
         'data-state': string;
         hidden: boolean;
     };

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

@@ -2,7 +2,6 @@
 import * as presence from '@zag-js/presence';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useRef } from 'react';
-import { composeRefs } from '../../utils/compose-refs.js';
 import { useEvent } from '../../utils/use-event.js';
 
 const usePresence = (props) => {
@@ -18,12 +17,12 @@ const usePresence = (props) => {
     wasEverPresent.current = true;
   }
   const unmounted = !api.present && !wasEverPresent.current && lazyMount || unmountOnExit && !api.present && wasEverPresent.current;
-  const getPresenceProps = (ref) => ({
-    ref: composeRefs(api.setNode, ref),
+  const getPresenceProps = () => ({
     "data-state": props.present ? "open" : "closed",
     hidden: !api.present
   });
   return {
+    ref: api.setNode,
     getPresenceProps,
     present: api.present,
     unmounted

package/dist/components/select/select-content.cjs

@@ -6,6 +6,7 @@ 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 composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useSelectContext = require('./use-select-context.cjs');
@@ -13,11 +14,11 @@ const useSelectContext = require('./use-select-context.cjs');
 const SelectContent = react.forwardRef((props, ref) => {
   const select = useSelectContext.useSelectContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(select.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(select.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
 });
 SelectContent.displayName = "SelectContent";
 

package/dist/components/select/select-content.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useSelectContext } from './use-select-context.js';
@@ -9,11 +10,11 @@ import { useSelectContext } from './use-select-context.js';
 const SelectContent = forwardRef((props, ref) => {
   const select = useSelectContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(select.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(select.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 SelectContent.displayName = "SelectContent";
 

package/dist/components/tabs/tab-content.cjs

@@ -6,6 +6,7 @@ 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 composeRefs = require('../../utils/compose-refs.cjs');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const renderStrategy = require('../../utils/render-strategy.cjs');
 const factory = require('../factory.cjs');
@@ -24,10 +25,10 @@ const TabContent = react.forwardRef((props, ref) => {
   });
   const mergedProps = react$1.mergeProps(
     tabs.getContentProps(contentProps),
-    presence.getPresenceProps(ref),
+    presence.getPresenceProps(),
     localProps
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) }) });
 });
 TabContent.displayName = "TabContent";
 

package/dist/components/tabs/tab-content.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
 import { ark } from '../factory.js';
@@ -20,10 +21,10 @@ const TabContent = forwardRef((props, ref) => {
   });
   const mergedProps = mergeProps(
     tabs.getContentProps(contentProps),
-    presence.getPresenceProps(ref),
+    presence.getPresenceProps(),
     localProps
   );
-  return /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsx(ark.div, { ...mergedProps }) });
+  return /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) }) });
 });
 TabContent.displayName = "TabContent";
 

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const date = require('@internationalized/date');
 const timePickerCell = require('./time-picker-cell.cjs');
 const timePickerClearTrigger = require('./time-picker-clear-trigger.cjs');
 const timePickerColumn = require('./time-picker-column.cjs');
@@ -21,6 +22,10 @@ const timePicker = require('./time-picker.cjs');
 
 
 
+Object.defineProperty(exports, "parseTime", {
+  enumerable: true,
+  get: () => date.parseTime
+});
 exports.TimePickerCell = timePickerCell.TimePickerCell;
 exports.TimePickerClearTrigger = timePickerClearTrigger.TimePickerClearTrigger;
 exports.TimePickerColumn = timePickerColumn.TimePickerColumn;

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

@@ -1,3 +1,4 @@
+export { parseTime } from '@internationalized/date';
 export type { FocusChangeDetails as TimePickerFocusChangeDetails, OpenChangeDetails as TimePickerOpenChangeDetails, ValueChangeDetails as TimePickerValueChangeDetails, } from '@zag-js/time-picker';
 export { TimePickerCell, type TimePickerCellBaseProps, type TimePickerCellProps, } from './time-picker-cell';
 export { TimePickerClearTrigger, type TimePickerClearTriggerBaseProps, type TimePickerClearTriggerProps, } from './time-picker-clear-trigger';

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

@@ -1,3 +1,4 @@
+export { parseTime } from '@internationalized/date';
 export type { FocusChangeDetails as TimePickerFocusChangeDetails, OpenChangeDetails as TimePickerOpenChangeDetails, ValueChangeDetails as TimePickerValueChangeDetails, } from '@zag-js/time-picker';
 export { TimePickerCell, type TimePickerCellBaseProps, type TimePickerCellProps, } from './time-picker-cell';
 export { TimePickerClearTrigger, type TimePickerClearTriggerBaseProps, type TimePickerClearTriggerProps, } from './time-picker-clear-trigger';

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

@@ -1,3 +1,4 @@
+export { parseTime } from '@internationalized/date';
 export { TimePickerCell } from './time-picker-cell.js';
 export { TimePickerClearTrigger } from './time-picker-clear-trigger.js';
 export { TimePickerColumn } from './time-picker-column.js';

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

@@ -6,6 +6,7 @@ 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 composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useTimePickerContext = require('./use-time-picker-context.cjs');
@@ -14,15 +15,11 @@ const TimePickerContent = react.forwardRef(
   (props, ref) => {
     const timePicker = useTimePickerContext.useTimePickerContext();
     const presence = usePresenceContext.usePresenceContext();
-    const mergedProps = react$1.mergeProps(
-      timePicker.getContentProps(),
-      presence.getPresenceProps(ref),
-      props
-    );
+    const mergedProps = react$1.mergeProps(timePicker.getContentProps(), presence.getPresenceProps(), props);
     if (presence.unmounted) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
   }
 );
 TimePickerContent.displayName = "TimePickerContent";

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useTimePickerContext } from './use-time-picker-context.js';
@@ -10,15 +11,11 @@ const TimePickerContent = forwardRef(
   (props, ref) => {
     const timePicker = useTimePickerContext();
     const presence = usePresenceContext();
-    const mergedProps = mergeProps(
-      timePicker.getContentProps(),
-      presence.getPresenceProps(ref),
-      props
-    );
+    const mergedProps = mergeProps(timePicker.getContentProps(), presence.getPresenceProps(), props);
     if (presence.unmounted) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
   }
 );
 TimePickerContent.displayName = "TimePickerContent";

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

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const date = require('@internationalized/date');
 const react$1 = require('@zag-js/react');
 const timePicker = require('@zag-js/time-picker');
 const react = require('react');
@@ -39,16 +38,12 @@ const useTimePicker = (props = {}) => {
     getRootNode,
     open: props.defaultOpen,
     "open.controlled": props.open !== void 0,
-    ...props,
-    min: props.min ? date.parseTime(props.min) : void 0,
-    max: props.max ? date.parseTime(props.max) : void 0,
-    value: props.defaultValue ? date.parseTime(props.defaultValue) : void 0
+    value: props.defaultValue,
+    ...props
   };
   const context = {
     ...initialContext,
-    min: props.min ? date.parseTime(props.min) : void 0,
-    max: props.max ? date.parseTime(props.max) : void 0,
-    value: props.value ? date.parseTime(props.value) : void 0,
+    value: props.value,
     onValueChange: useEvent.useEvent(props.onValueChange),
     onFocusChange: useEvent.useEvent(props.onFocusChange),
     onOpenChange: useEvent.useEvent(props.onOpenChange)

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

@@ -1,7 +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' | 'min' | 'max' | 'open.controlled' | 'value'>, 'id'> {
+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.
@@ -11,19 +11,7 @@ export interface UseTimePickerProps extends Optional<Omit<timePicker.Context, 'd
      * 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?: string;
-    /**
-     * The minimum time that can be selected.
-     */
-    min?: string;
-    /**
-     * The maximum time that can be selected.
-     */
-    max?: string;
-    /**
-     * The value of the time picker
-     */
-    value?: string;
+    defaultValue?: timePicker.Context['value'];
 }
 export interface UseTimePickerReturn extends timePicker.Api<PropTypes> {
 }

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

@@ -1,7 +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' | 'min' | 'max' | 'open.controlled' | 'value'>, 'id'> {
+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.
@@ -11,19 +11,7 @@ export interface UseTimePickerProps extends Optional<Omit<timePicker.Context, 'd
      * 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?: string;
-    /**
-     * The minimum time that can be selected.
-     */
-    min?: string;
-    /**
-     * The maximum time that can be selected.
-     */
-    max?: string;
-    /**
-     * The value of the time picker
-     */
-    value?: string;
+    defaultValue?: timePicker.Context['value'];
 }
 export interface UseTimePickerReturn extends timePicker.Api<PropTypes> {
 }

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

@@ -1,5 +1,4 @@
 'use client';
-import { parseTime } from '@internationalized/date';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as timePicker from '@zag-js/time-picker';
 import { useId } from 'react';
@@ -16,16 +15,12 @@ const useTimePicker = (props = {}) => {
     getRootNode,
     open: props.defaultOpen,
     "open.controlled": props.open !== void 0,
-    ...props,
-    min: props.min ? parseTime(props.min) : void 0,
-    max: props.max ? parseTime(props.max) : void 0,
-    value: props.defaultValue ? parseTime(props.defaultValue) : void 0
+    value: props.defaultValue,
+    ...props
   };
   const context = {
     ...initialContext,
-    min: props.min ? parseTime(props.min) : void 0,
-    max: props.max ? parseTime(props.max) : void 0,
-    value: props.value ? parseTime(props.value) : void 0,
+    value: props.value,
     onValueChange: useEvent(props.onValueChange),
     onFocusChange: useEvent(props.onFocusChange),
     onOpenChange: useEvent(props.onOpenChange)

package/dist/components/toggle/index.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const toggleContext = require('./toggle-context.cjs');
+const toggleIndicator = require('./toggle-indicator.cjs');
+const toggleRoot = require('./toggle-root.cjs');
+const toggle_anatomy = require('./toggle.anatomy.cjs');
+const useToggle = require('./use-toggle.cjs');
+const useToggleContext = require('./use-toggle-context.cjs');
+const toggle = require('./toggle.cjs');
+
+
+
+exports.ToggleContext = toggleContext.ToggleContext;
+exports.ToggleIndicator = toggleIndicator.ToggleIndicator;
+exports.ToggleRoot = toggleRoot.ToggleRoot;
+exports.toggleAnatomy = toggle_anatomy.toggleAnatomy;
+exports.useToggle = useToggle.useToggle;
+exports.useToggleContext = useToggleContext.useToggleContext;
+exports.Toggle = toggle;

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

@@ -0,0 +1,7 @@
+export { ToggleContext, type ToggleContextProps } from './toggle-context';
+export { ToggleIndicator, type ToggleIndicatorProps, type ToggleIndicatorBaseProps, } 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';
+export { useToggleContext, type UseToggleContext } from './use-toggle-context';
+export * as Toggle from './toggle';

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

@@ -0,0 +1,7 @@
+export { ToggleContext, type ToggleContextProps } from './toggle-context';
+export { ToggleIndicator, type ToggleIndicatorProps, type ToggleIndicatorBaseProps, } 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';
+export { useToggleContext, type UseToggleContext } from './use-toggle-context';
+export * as Toggle from './toggle';

package/dist/components/toggle/index.js

@@ -0,0 +1,8 @@
+export { ToggleContext } from './toggle-context.js';
+export { ToggleIndicator } from './toggle-indicator.js';
+export { ToggleRoot } from './toggle-root.js';
+export { toggleAnatomy } from './toggle.anatomy.js';
+export { useToggle } from './use-toggle.js';
+export { useToggleContext } from './use-toggle-context.js';
+import * as toggle from './toggle.js';
+export { toggle as Toggle };

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

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useToggleContext = require('./use-toggle-context.cjs');
+
+const ToggleContext = (props) => props.children(useToggleContext.useToggleContext());
+
+exports.ToggleContext = ToggleContext;

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { UseToggleContext } from './use-toggle-context';
+export interface ToggleContextProps {
+    children: (context: UseToggleContext) => ReactNode;
+}
+export declare const ToggleContext: (props: ToggleContextProps) => ReactNode;

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { UseToggleContext } from './use-toggle-context';
+export interface ToggleContextProps {
+    children: (context: UseToggleContext) => ReactNode;
+}
+export declare const ToggleContext: (props: ToggleContextProps) => ReactNode;

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

@@ -0,0 +1,6 @@
+'use client';
+import { useToggleContext } from './use-toggle-context.js';
+
+const ToggleContext = (props) => props.children(useToggleContext());
+
+export { ToggleContext };

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+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 factory = require('../factory.cjs');
+const useToggleContext = require('./use-toggle-context.cjs');
+
+const ToggleIndicator = react.forwardRef((props, ref) => {
+  const { children, fallback, ...restProps } = props;
+  const toggle = useToggleContext.useToggleContext();
+  const mergedProps = react$1.mergeProps(toggle.getIndicatorProps(), restProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: toggle.pressed ? children : fallback });
+});
+ToggleIndicator.displayName = "ToggleIndicator";
+
+exports.ToggleIndicator = ToggleIndicator;

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

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ToggleIndicatorBaseProps {
+    /**
+     * The fallback content to render when the toggle is not pressed.
+     */
+    fallback?: React.ReactNode;
+}
+export interface ToggleIndicatorProps extends HTMLArkProps<'div'>, ToggleIndicatorBaseProps {
+}
+export declare const ToggleIndicator: ForwardRefExoticComponent<ToggleIndicatorProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ToggleIndicatorBaseProps {
+    /**
+     * The fallback content to render when the toggle is not pressed.
+     */
+    fallback?: React.ReactNode;
+}
+export interface ToggleIndicatorProps extends HTMLArkProps<'div'>, ToggleIndicatorBaseProps {
+}
+export declare const ToggleIndicator: ForwardRefExoticComponent<ToggleIndicatorProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useToggleContext } from './use-toggle-context.js';
+
+const ToggleIndicator = forwardRef((props, ref) => {
+  const { children, fallback, ...restProps } = props;
+  const toggle = useToggleContext();
+  const mergedProps = mergeProps(toggle.getIndicatorProps(), restProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: toggle.pressed ? children : fallback });
+});
+ToggleIndicator.displayName = "ToggleIndicator";
+
+export { ToggleIndicator };

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

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+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 useToggle = require('./use-toggle.cjs');
+const useToggleContext = require('./use-toggle-context.cjs');
+
+const ToggleRoot = react.forwardRef((props, ref) => {
+  const [useToggleProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "pressed",
+    "defaultPressed",
+    "disabled",
+    "onPressedChange"
+  ]);
+  const toggle = useToggle.useToggle(useToggleProps);
+  const mergedProps = react$1.mergeProps(toggle.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useToggleContext.ToggleProvider, { value: toggle, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref }) });
+});
+ToggleRoot.displayName = "ToggleRoot";
+
+exports.ToggleRoot = ToggleRoot;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseToggleProps } from './use-toggle';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps {
+}
+export interface ToggleRootProps extends HTMLProps<'button'>, ToggleRootBaseProps {
+}
+export declare const ToggleRoot: ForwardRefExoticComponent<ToggleRootProps & RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseToggleProps } from './use-toggle';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps {
+}
+export interface ToggleRootProps extends HTMLProps<'button'>, ToggleRootBaseProps {
+}
+export declare const ToggleRoot: ForwardRefExoticComponent<ToggleRootProps & RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,23 @@
+'use client';
+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 { useToggle } from './use-toggle.js';
+import { ToggleProvider } from './use-toggle-context.js';
+
+const ToggleRoot = forwardRef((props, ref) => {
+  const [useToggleProps, localProps] = createSplitProps()(props, [
+    "pressed",
+    "defaultPressed",
+    "disabled",
+    "onPressedChange"
+  ]);
+  const toggle = useToggle(useToggleProps);
+  const mergedProps = mergeProps(toggle.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(ToggleProvider, { value: toggle, children: /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref }) });
+});
+ToggleRoot.displayName = "ToggleRoot";
+
+export { ToggleRoot };

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

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

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

@@ -0,0 +1,3 @@
+import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+export declare const toggleAnatomy: Anatomy<"root" | "indicator">;
+export declare const parts: Record<"root" | "indicator", AnatomyPart>;

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

@@ -0,0 +1,3 @@
+import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+export declare const toggleAnatomy: Anatomy<"root" | "indicator">;
+export declare const parts: Record<"root" | "indicator", AnatomyPart>;

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

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