@ark-ui/react 4.0.0 → 4.1.0

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/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/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 };

package/dist/components/toggle/toggle.cjs

@@ -0,0 +1,15 @@
+'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');
+
+
+
+exports.Context = toggleContext.ToggleContext;
+exports.Indicator = toggleIndicator.ToggleIndicator;
+exports.Root = toggleRoot.ToggleRoot;
+exports.toggleAnatomy = toggle_anatomy.toggleAnatomy;

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

@@ -0,0 +1,4 @@
+export { ToggleContext as Context, type ToggleContextProps as ContextProps } from './toggle-context';
+export { ToggleIndicator as Indicator, type ToggleIndicatorProps as IndicatorProps, type ToggleIndicatorBaseProps as IndicatorBaseProps, } from './toggle-indicator';
+export { ToggleRoot as Root, type ToggleRootBaseProps as RootBaseProps, type ToggleRootProps as RootProps, } from './toggle-root';
+export { toggleAnatomy } from './toggle.anatomy';

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

@@ -0,0 +1,4 @@
+export { ToggleContext as Context, type ToggleContextProps as ContextProps } from './toggle-context';
+export { ToggleIndicator as Indicator, type ToggleIndicatorProps as IndicatorProps, type ToggleIndicatorBaseProps as IndicatorBaseProps, } from './toggle-indicator';
+export { ToggleRoot as Root, type ToggleRootBaseProps as RootBaseProps, type ToggleRootProps as RootProps, } from './toggle-root';
+export { toggleAnatomy } from './toggle.anatomy';

package/dist/components/toggle/toggle.js

@@ -0,0 +1,4 @@
+export { ToggleContext as Context } from './toggle-context.js';
+export { ToggleIndicator as Indicator } from './toggle-indicator.js';
+export { ToggleRoot as Root } from './toggle-root.js';
+export { toggleAnatomy } from './toggle.anatomy.js';

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

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [ToggleProvider, useToggleContext] = createContext.createContext({
+  name: "ToggleContext",
+  hookName: "useToggleContext",
+  providerName: "<ToggleProvider />"
+});
+
+exports.ToggleProvider = ToggleProvider;
+exports.useToggleContext = useToggleContext;

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

@@ -0,0 +1,5 @@
+import { UseToggleReturn } from './use-toggle';
+import { Provider } from 'react';
+export interface UseToggleContext extends UseToggleReturn {
+}
+export declare const ToggleProvider: Provider<UseToggleContext>, useToggleContext: () => UseToggleContext;

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

@@ -0,0 +1,5 @@
+import { UseToggleReturn } from './use-toggle';
+import { Provider } from 'react';
+export interface UseToggleContext extends UseToggleReturn {
+}
+export declare const ToggleProvider: Provider<UseToggleContext>, useToggleContext: () => UseToggleContext;

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

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [ToggleProvider, useToggleContext] = createContext({
+  name: "ToggleContext",
+  hookName: "useToggleContext",
+  providerName: "<ToggleProvider />"
+});
+
+export { ToggleProvider, useToggleContext };

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

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+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');
+
+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"
+      };
+    }
+  };
+}
+
+exports.useToggle = useToggle;

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

@@ -0,0 +1,35 @@
+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;
+}
+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 declare function useToggle(props: UseToggleProps): UseToggleReturn;

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

@@ -0,0 +1,35 @@
+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;
+}
+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 declare function useToggle(props: UseToggleProps): UseToggleReturn;