@ark-ui/react 4.0.0 → 4.1.0

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

@@ -0,0 +1,44 @@
+'use client';
+import { dataAttr } from '@zag-js/dom-query';
+import { useControllableState } from '../../utils/use-controllable-state.js';
+import { parts } from './toggle.anatomy.js';
+
+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"
+      };
+    }
+  };
+}
+
+export { useToggle };

package/dist/components/tooltip/tooltip-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 useTooltipContext = require('./use-tooltip-context.cjs');
@@ -13,11 +14,11 @@ const useTooltipContext = require('./use-tooltip-context.cjs');
 const TooltipContent = react.forwardRef((props, ref) => {
   const tooltip = useTooltipContext.useTooltipContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(tooltip.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(tooltip.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) });
 });
 TooltipContent.displayName = "TooltipContent";
 

package/dist/components/tooltip/tooltip-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 { useTooltipContext } from './use-tooltip-context.js';
@@ -9,11 +10,11 @@ import { useTooltipContext } from './use-tooltip-context.js';
 const TooltipContent = forwardRef((props, ref) => {
   const tooltip = useTooltipContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(tooltip.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(tooltip.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) });
 });
 TooltipContent.displayName = "TooltipContent";
 

package/dist/index.cjs

@@ -535,6 +535,13 @@ const toastTitle = require('./components/toast/toast-title.cjs');
 const toaster = require('./components/toast/toaster.cjs');
 const useToastContext = require('./components/toast/use-toast-context.cjs');
 const toast$1 = require('./components/toast/toast.cjs');
+const toggleContext = require('./components/toggle/toggle-context.cjs');
+const toggleIndicator = require('./components/toggle/toggle-indicator.cjs');
+const toggleRoot = require('./components/toggle/toggle-root.cjs');
+const toggle_anatomy = require('./components/toggle/toggle.anatomy.cjs');
+const useToggle = require('./components/toggle/use-toggle.cjs');
+const useToggleContext = require('./components/toggle/use-toggle-context.cjs');
+const toggle = require('./components/toggle/toggle.cjs');
 const toggleGroupContext = require('./components/toggle-group/toggle-group-context.cjs');
 const toggleGroupItem = require('./components/toggle-group/toggle-group-item.cjs');
 const toggleGroupRoot = require('./components/toggle-group/toggle-group-root.cjs');
@@ -1151,6 +1158,13 @@ exports.ToastTitle = toastTitle.ToastTitle;
 exports.Toaster = toaster.Toaster;
 exports.useToastContext = useToastContext.useToastContext;
 exports.Toast = toast$1;
+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;
 exports.ToggleGroupContext = toggleGroupContext.ToggleGroupContext;
 exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
 exports.ToggleGroupRoot = toggleGroupRoot.ToggleGroupRoot;

package/dist/index.js

@@ -568,6 +568,14 @@ export { Toaster } from './components/toast/toaster.js';
 export { useToastContext } from './components/toast/use-toast-context.js';
 import * as toast from './components/toast/toast.js';
 export { toast as Toast };
+export { ToggleContext } from './components/toggle/toggle-context.js';
+export { ToggleIndicator } from './components/toggle/toggle-indicator.js';
+export { ToggleRoot } from './components/toggle/toggle-root.js';
+export { toggleAnatomy } from './components/toggle/toggle.anatomy.js';
+export { useToggle } from './components/toggle/use-toggle.js';
+export { useToggleContext } from './components/toggle/use-toggle-context.js';
+import * as toggle from './components/toggle/toggle.js';
+export { toggle as Toggle };
 export { ToggleGroupContext } from './components/toggle-group/toggle-group-context.js';
 export { ToggleGroupItem } from './components/toggle-group/toggle-group-item.js';
 export { ToggleGroupRoot } from './components/toggle-group/toggle-group-root.js';

package/dist/utils/compose-refs.d.cts

@@ -1,3 +1,3 @@
-type PossibleRef<T> = React.Ref<T> | undefined;
-export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+type PossibleRef<T> = React.Ref<T | null> | undefined;
+export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 export {};

package/dist/utils/compose-refs.d.ts

@@ -1,3 +1,3 @@
-type PossibleRef<T> = React.Ref<T> | undefined;
-export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+type PossibleRef<T> = React.Ref<T | null> | undefined;
+export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -143,71 +143,71 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.5.5",
-    "@zag-js/accordion": "0.71.0",
-    "@zag-js/anatomy": "0.71.0",
-    "@zag-js/avatar": "0.71.0",
-    "@zag-js/carousel": "0.71.0",
-    "@zag-js/checkbox": "0.71.0",
-    "@zag-js/clipboard": "0.71.0",
-    "@zag-js/collapsible": "0.71.0",
-    "@zag-js/collection": "0.71.0",
-    "@zag-js/color-picker": "0.71.0",
-    "@zag-js/color-utils": "0.71.0",
-    "@zag-js/combobox": "0.71.0",
-    "@zag-js/core": "0.71.0",
-    "@zag-js/date-picker": "0.71.0",
-    "@zag-js/date-utils": "0.71.0",
-    "@zag-js/dialog": "0.71.0",
-    "@zag-js/dom-query": "0.71.0",
-    "@zag-js/editable": "0.71.0",
-    "@zag-js/file-upload": "0.71.0",
-    "@zag-js/file-utils": "0.71.0",
-    "@zag-js/highlight-word": "0.71.0",
-    "@zag-js/hover-card": "0.71.0",
-    "@zag-js/i18n-utils": "0.71.0",
-    "@zag-js/menu": "0.71.0",
-    "@zag-js/number-input": "0.71.0",
-    "@zag-js/pagination": "0.71.0",
-    "@zag-js/pin-input": "0.71.0",
-    "@zag-js/popover": "0.71.0",
-    "@zag-js/presence": "0.71.0",
-    "@zag-js/progress": "0.71.0",
-    "@zag-js/qr-code": "0.71.0",
-    "@zag-js/radio-group": "0.71.0",
-    "@zag-js/rating-group": "0.71.0",
-    "@zag-js/react": "0.71.0",
-    "@zag-js/select": "0.71.0",
-    "@zag-js/signature-pad": "0.71.0",
-    "@zag-js/slider": "0.71.0",
-    "@zag-js/splitter": "0.71.0",
-    "@zag-js/steps": "0.71.0",
-    "@zag-js/switch": "0.71.0",
-    "@zag-js/tabs": "0.71.0",
-    "@zag-js/tags-input": "0.71.0",
-    "@zag-js/time-picker": "0.71.0",
-    "@zag-js/timer": "0.71.0",
-    "@zag-js/toast": "0.71.0",
-    "@zag-js/toggle-group": "0.71.0",
-    "@zag-js/tooltip": "0.71.0",
-    "@zag-js/tree-view": "0.71.0",
-    "@zag-js/types": "0.71.0"
+    "@zag-js/accordion": "0.73.0",
+    "@zag-js/anatomy": "0.73.0",
+    "@zag-js/avatar": "0.73.0",
+    "@zag-js/carousel": "0.73.0",
+    "@zag-js/checkbox": "0.73.0",
+    "@zag-js/clipboard": "0.73.0",
+    "@zag-js/collapsible": "0.73.0",
+    "@zag-js/collection": "0.73.0",
+    "@zag-js/color-picker": "0.73.0",
+    "@zag-js/color-utils": "0.73.0",
+    "@zag-js/combobox": "0.73.0",
+    "@zag-js/core": "0.73.0",
+    "@zag-js/date-picker": "0.73.0",
+    "@zag-js/date-utils": "0.73.0",
+    "@zag-js/dialog": "0.73.0",
+    "@zag-js/dom-query": "0.73.0",
+    "@zag-js/editable": "0.73.0",
+    "@zag-js/file-upload": "0.73.0",
+    "@zag-js/file-utils": "0.73.0",
+    "@zag-js/highlight-word": "0.73.0",
+    "@zag-js/hover-card": "0.73.0",
+    "@zag-js/i18n-utils": "0.73.0",
+    "@zag-js/menu": "0.73.0",
+    "@zag-js/number-input": "0.73.0",
+    "@zag-js/pagination": "0.73.0",
+    "@zag-js/pin-input": "0.73.0",
+    "@zag-js/popover": "0.73.0",
+    "@zag-js/presence": "0.73.0",
+    "@zag-js/progress": "0.73.0",
+    "@zag-js/qr-code": "0.73.0",
+    "@zag-js/radio-group": "0.73.0",
+    "@zag-js/rating-group": "0.73.0",
+    "@zag-js/react": "0.73.0",
+    "@zag-js/select": "0.73.0",
+    "@zag-js/signature-pad": "0.73.0",
+    "@zag-js/slider": "0.73.0",
+    "@zag-js/splitter": "0.73.0",
+    "@zag-js/steps": "0.73.0",
+    "@zag-js/switch": "0.73.0",
+    "@zag-js/tabs": "0.73.0",
+    "@zag-js/tags-input": "0.73.0",
+    "@zag-js/time-picker": "0.73.0",
+    "@zag-js/timer": "0.73.0",
+    "@zag-js/toast": "0.73.0",
+    "@zag-js/toggle-group": "0.73.0",
+    "@zag-js/tooltip": "0.73.0",
+    "@zag-js/tree-view": "0.73.0",
+    "@zag-js/types": "0.73.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.2",
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "8.3.3",
-    "@storybook/addon-essentials": "8.3.3",
-    "@storybook/react-vite": "8.3.3",
-    "@storybook/react": "8.3.3",
+    "@storybook/addon-a11y": "8.3.4",
+    "@storybook/addon-essentials": "8.3.4",
+    "@storybook/react-vite": "8.3.4",
+    "@storybook/react": "8.3.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
-    "@types/react": "18.3.9",
+    "@types/react": "18.3.10",
     "@types/react-dom": "18.3.0",
-    "@vitejs/plugin-react": "4.3.1",
-    "@zag-js/stringify-state": "0.71.0",
+    "@vitejs/plugin-react": "4.3.2",
+    "@zag-js/stringify-state": "0.73.0",
     "globby": "14.0.2",
     "jsdom": "25.0.1",
     "lucide-react": "0.446.0",
@@ -217,10 +217,10 @@
     "react-hook-form": "7.53.0",
     "release-it": "17.6.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.3.3",
+    "storybook": "8.3.4",
     "typescript": "5.6.2",
     "vite": "5.4.8",
-    "vite-plugin-dts": "4.2.2",
+    "vite-plugin-dts": "4.2.3",
     "vitest": "2.1.1",
     "vitest-axe": "1.0.0-pre.3"
   },