@ark-ui/react 5.38.1 → 5.39.0

package/dist/providers/index.cjs

@@ -1,6 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_use_environment_context = require("./environment/use-environment-context.cjs");
 const require_environment_provider = require("./environment/environment-provider.cjs");
+const require_use_platform = require("./hotkeys/use-platform.cjs");
+const require_use_format_hotkey = require("./hotkeys/use-format-hotkey.cjs");
+const require_use_hotkey_store = require("./hotkeys/use-hotkey-store.cjs");
+const require_use_hotkeys = require("./hotkeys/use-hotkeys.cjs");
+const require_use_hotkey = require("./hotkeys/use-hotkey.cjs");
+const require_use_hotkey_recorder = require("./hotkeys/use-hotkey-recorder.cjs");
+const require_use_hotkey_registrations = require("./hotkeys/use-hotkey-registrations.cjs");
+const require_use_is_key_pressed = require("./hotkeys/use-is-key-pressed.cjs");
+const require_use_pressed_keys = require("./hotkeys/use-pressed-keys.cjs");
 const require_use_focus_visible = require("./interaction/use-focus-visible.cjs");
 const require_use_interaction_modality = require("./interaction/use-interaction-modality.cjs");
 const require_use_locale_context = require("./locale/use-locale-context.cjs");
@@ -8,12 +17,58 @@ const require_locale_provider = require("./locale/locale-provider.cjs");
 const require_use_collator = require("./locale/use-collator.cjs");
 const require_use_date_formatter = require("./locale/use-date-formatter.cjs");
 const require_use_filter = require("./locale/use-filter.cjs");
+let _zag_js_hotkeys = require("@zag-js/hotkeys");
 exports.EnvironmentProvider = require_environment_provider.EnvironmentProvider;
 exports.LocaleProvider = require_locale_provider.LocaleProvider;
+Object.defineProperty(exports, "createHotkeyStore", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_hotkeys.createHotkeyStore;
+	}
+});
+Object.defineProperty(exports, "formatHotkey", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_hotkeys.formatHotkey;
+	}
+});
+Object.defineProperty(exports, "isHotKey", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_hotkeys.isHotKey;
+	}
+});
+Object.defineProperty(exports, "isHotkeyEqual", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_hotkeys.isHotkeyEqual;
+	}
+});
+Object.defineProperty(exports, "parseHotkey", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_hotkeys.parseHotkey;
+	}
+});
 exports.useCollator = require_use_collator.useCollator;
 exports.useDateFormatter = require_use_date_formatter.useDateFormatter;
 exports.useEnvironmentContext = require_use_environment_context.useEnvironmentContext;
 exports.useFilter = require_use_filter.useFilter;
 exports.useFocusVisible = require_use_focus_visible.useFocusVisible;
+exports.useFormatHotkey = require_use_format_hotkey.useFormatHotkey;
+exports.useHotkey = require_use_hotkey.useHotkey;
+exports.useHotkeyRecorder = require_use_hotkey_recorder.useHotkeyRecorder;
+exports.useHotkeyRegistrations = require_use_hotkey_registrations.useHotkeyRegistrations;
+exports.useHotkeyStore = require_use_hotkey_store.useHotkeyStore;
+exports.useHotkeys = require_use_hotkeys.useHotkeys;
 exports.useInteractionModality = require_use_interaction_modality.useInteractionModality;
+exports.useIsKeyPressed = require_use_is_key_pressed.useIsKeyPressed;
 exports.useLocaleContext = require_use_locale_context.useLocaleContext;
+exports.usePlatform = require_use_platform.usePlatform;
+exports.usePressedKeys = require_use_pressed_keys.usePressedKeys;
+Object.defineProperty(exports, "validateHotkey", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_hotkeys.validateHotkey;
+	}
+});

package/dist/providers/index.d.cts

@@ -1,3 +1,4 @@
 export * from './environment/index.js';
+export * from './hotkeys/index.js';
 export * from './interaction/index.js';
 export * from './locale/index.js';

package/dist/providers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './environment/index.js';
+export * from './hotkeys/index.js';
 export * from './interaction/index.js';
 export * from './locale/index.js';

package/dist/providers/index.js

@@ -1,5 +1,15 @@
 import { useEnvironmentContext } from "./environment/use-environment-context.js";
 import { EnvironmentProvider } from "./environment/environment-provider.js";
+import { usePlatform } from "./hotkeys/use-platform.js";
+import { useFormatHotkey } from "./hotkeys/use-format-hotkey.js";
+import { useHotkeyStore } from "./hotkeys/use-hotkey-store.js";
+import { useHotkeys } from "./hotkeys/use-hotkeys.js";
+import { useHotkey } from "./hotkeys/use-hotkey.js";
+import { useHotkeyRecorder } from "./hotkeys/use-hotkey-recorder.js";
+import { useHotkeyRegistrations } from "./hotkeys/use-hotkey-registrations.js";
+import { useIsKeyPressed } from "./hotkeys/use-is-key-pressed.js";
+import { usePressedKeys } from "./hotkeys/use-pressed-keys.js";
+import { createHotkeyStore, formatHotkey, isHotKey, isHotkeyEqual, parseHotkey, validateHotkey } from "./hotkeys/index.js";
 import { useFocusVisible } from "./interaction/use-focus-visible.js";
 import { useInteractionModality } from "./interaction/use-interaction-modality.js";
 import { useLocaleContext } from "./locale/use-locale-context.js";
@@ -7,4 +17,4 @@ import { LocaleProvider } from "./locale/locale-provider.js";
 import { useCollator } from "./locale/use-collator.js";
 import { useDateFormatter } from "./locale/use-date-formatter.js";
 import { useFilter } from "./locale/use-filter.js";
-export { EnvironmentProvider, LocaleProvider, useCollator, useDateFormatter, useEnvironmentContext, useFilter, useFocusVisible, useInteractionModality, useLocaleContext };
+export { EnvironmentProvider, LocaleProvider, createHotkeyStore, formatHotkey, isHotKey, isHotkeyEqual, parseHotkey, useCollator, useDateFormatter, useEnvironmentContext, useFilter, useFocusVisible, useFormatHotkey, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeyStore, useHotkeys, useInteractionModality, useIsKeyPressed, useLocaleContext, usePlatform, usePressedKeys, validateHotkey };

package/dist/providers/interaction/use-focus-visible.cjs

@@ -6,7 +6,7 @@ let _zag_js_focus_visible = require("@zag-js/focus-visible");
 function useFocusVisible(props = {}) {
 	const { isTextInput, autoFocus } = props;
 	const { getRootNode } = require_use_environment_context.useEnvironmentContext();
-	return (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => (0, _zag_js_focus_visible.trackFocusVisible)({
+	const subscribe = (0, react.useCallback)((onStoreChange) => (0, _zag_js_focus_visible.trackFocusVisible)({
 		root: getRootNode(),
 		isTextInput,
 		autoFocus,
@@ -15,7 +15,9 @@ function useFocusVisible(props = {}) {
 		getRootNode,
 		isTextInput,
 		autoFocus
-	]), (0, react.useCallback)(() => autoFocus || (0, _zag_js_focus_visible.isFocusVisible)(), [autoFocus]), () => false);
+	]);
+	const getSnapshot = (0, react.useCallback)(() => autoFocus || (0, _zag_js_focus_visible.isFocusVisible)(), [autoFocus]);
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, () => false);
 }
 //#endregion
 exports.useFocusVisible = useFocusVisible;

package/dist/providers/interaction/use-focus-visible.js

@@ -6,7 +6,7 @@ import { isFocusVisible, trackFocusVisible } from "@zag-js/focus-visible";
 function useFocusVisible(props = {}) {
 	const { isTextInput, autoFocus } = props;
 	const { getRootNode } = useEnvironmentContext();
-	return useSyncExternalStore(useCallback((onStoreChange) => trackFocusVisible({
+	const subscribe = useCallback((onStoreChange) => trackFocusVisible({
 		root: getRootNode(),
 		isTextInput,
 		autoFocus,
@@ -15,7 +15,9 @@ function useFocusVisible(props = {}) {
 		getRootNode,
 		isTextInput,
 		autoFocus
-	]), useCallback(() => autoFocus || isFocusVisible(), [autoFocus]), () => false);
+	]);
+	const getSnapshot = useCallback(() => autoFocus || isFocusVisible(), [autoFocus]);
+	return useSyncExternalStore(subscribe, getSnapshot, () => false);
 }
 //#endregion
 export { useFocusVisible };

package/dist/providers/locale/locale-provider.cjs

@@ -5,11 +5,12 @@ let _zag_js_i18n_utils = require("@zag-js/i18n-utils");
 //#region src/providers/locale/locale-provider.tsx
 var LocaleProvider = (props) => {
 	const { children, locale } = props;
+	const context = {
+		locale,
+		dir: (0, _zag_js_i18n_utils.isRTL)(locale) ? "rtl" : "ltr"
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_locale_context.LocaleContextProvider, {
-		value: {
-			locale,
-			dir: (0, _zag_js_i18n_utils.isRTL)(locale) ? "rtl" : "ltr"
-		},
+		value: context,
 		children
 	});
 };

package/dist/providers/locale/locale-provider.js

@@ -5,11 +5,12 @@ import { isRTL } from "@zag-js/i18n-utils";
 //#region src/providers/locale/locale-provider.tsx
 var LocaleProvider = (props) => {
 	const { children, locale } = props;
+	const context = {
+		locale,
+		dir: isRTL(locale) ? "rtl" : "ltr"
+	};
 	return /* @__PURE__ */ jsx(LocaleContextProvider, {
-		value: {
-			locale,
-			dir: isRTL(locale) ? "rtl" : "ltr"
-		},
+		value: context,
 		children
 	});
 };

package/dist/utils/attr.d.cts

@@ -0,0 +1 @@
+export { ariaAttr, dataAttr } from '@zag-js/dom-query';

package/dist/utils/attr.d.ts

@@ -0,0 +1 @@
+export { ariaAttr, dataAttr } from '@zag-js/dom-query';

package/dist/utils/attr.js

@@ -0,0 +1,2 @@
+import { ariaAttr, dataAttr } from "@zag-js/dom-query";
+export { ariaAttr, dataAttr };

package/dist/utils/index.cjs

@@ -1,7 +1,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_create_context = require("./create-context.cjs");
 let _zag_js_core = require("@zag-js/core");
+let _zag_js_dom_query = require("@zag-js/dom-query");
+Object.defineProperty(exports, "ariaAttr", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_dom_query.ariaAttr;
+	}
+});
 exports.createContext = require_create_context.createContext;
+Object.defineProperty(exports, "dataAttr", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_dom_query.dataAttr;
+	}
+});
 Object.defineProperty(exports, "mergeProps", {
 	enumerable: true,
 	get: function() {

package/dist/utils/index.d.cts

@@ -1,2 +1,3 @@
+export { ariaAttr, dataAttr } from './attr.js';
 export { createContext } from './create-context.js';
 export { mergeProps } from '@zag-js/core';

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
+export { ariaAttr, dataAttr } from './attr.js';
 export { createContext } from './create-context.js';
 export { mergeProps } from '@zag-js/core';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
 import { createContext } from "./create-context.js";
+import { ariaAttr, dataAttr } from "./attr.js";
 import { mergeProps } from "@zag-js/core";
-export { createContext, mergeProps };
+export { ariaAttr, createContext, dataAttr, mergeProps };

package/dist/utils/react-activity.cjs

@@ -0,0 +1,12 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/utils/react-activity.ts
+var getActivity = (react$1) => Reflect.get(react$1, "Activity");
+var Activity = getActivity(react);
+var supportsActivity = Activity !== void 0;
+//#endregion
+exports.Activity = Activity;
+exports.getActivity = getActivity;
+exports.supportsActivity = supportsActivity;

package/dist/utils/react-activity.d.cts

@@ -0,0 +1,10 @@
+import { ComponentType, ReactNode } from 'react';
+interface ActivityProps {
+    children?: ReactNode | undefined;
+    mode: 'visible' | 'hidden';
+}
+type ActivityComponent = ComponentType<ActivityProps>;
+export declare const getActivity: (react: object) => ActivityComponent | undefined;
+export declare const Activity: ActivityComponent | undefined;
+export declare const supportsActivity: boolean;
+export {};

package/dist/utils/react-activity.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType, ReactNode } from 'react';
+interface ActivityProps {
+    children?: ReactNode | undefined;
+    mode: 'visible' | 'hidden';
+}
+type ActivityComponent = ComponentType<ActivityProps>;
+export declare const getActivity: (react: object) => ActivityComponent | undefined;
+export declare const Activity: ActivityComponent | undefined;
+export declare const supportsActivity: boolean;
+export {};

package/dist/utils/react-activity.js

@@ -0,0 +1,8 @@
+"use client";
+import * as React from "react";
+//#region src/utils/react-activity.ts
+var getActivity = (react) => Reflect.get(react, "Activity");
+var Activity = getActivity(React);
+var supportsActivity = Activity !== void 0;
+//#endregion
+export { Activity, getActivity, supportsActivity };

package/dist/utils/react-activity.test.d.cts

@@ -0,0 +1 @@
+export {};

package/dist/utils/react-activity.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.38.1",
+  "version": "5.39.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -41,6 +41,7 @@
     "tags input",
     "timer",
     "toast",
+    "toc",
     "toggle group",
     "tooltip",
     "tree view",
@@ -149,104 +150,106 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@internationalized/date": "3.12.2",
-    "@zag-js/accordion": "1.43.0",
-    "@zag-js/anatomy": "1.43.0",
-    "@zag-js/angle-slider": "1.43.0",
-    "@zag-js/async-list": "1.43.0",
-    "@zag-js/auto-resize": "1.43.0",
-    "@zag-js/avatar": "1.43.0",
-    "@zag-js/carousel": "1.43.0",
-    "@zag-js/cascade-select": "1.43.0",
-    "@zag-js/checkbox": "1.43.0",
-    "@zag-js/clipboard": "1.43.0",
-    "@zag-js/collapsible": "1.43.0",
-    "@zag-js/collection": "1.43.0",
-    "@zag-js/color-picker": "1.43.0",
-    "@zag-js/color-utils": "1.43.0",
-    "@zag-js/combobox": "1.43.0",
-    "@zag-js/core": "1.43.0",
-    "@zag-js/date-input": "1.43.0",
-    "@zag-js/date-picker": "1.43.0",
-    "@zag-js/date-utils": "1.43.0",
-    "@zag-js/dialog": "1.43.0",
-    "@zag-js/dom-query": "1.43.0",
-    "@zag-js/drawer": "1.43.0",
-    "@zag-js/editable": "1.43.0",
-    "@zag-js/file-upload": "1.43.0",
-    "@zag-js/focus-visible": "1.43.0",
-    "@zag-js/file-utils": "1.43.0",
-    "@zag-js/floating-panel": "1.43.0",
-    "@zag-js/focus-trap": "1.43.0",
-    "@zag-js/highlight-word": "1.43.0",
-    "@zag-js/hover-card": "1.43.0",
-    "@zag-js/i18n-utils": "1.43.0",
-    "@zag-js/image-cropper": "1.43.0",
-    "@zag-js/json-tree-utils": "1.43.0",
-    "@zag-js/listbox": "1.43.0",
-    "@zag-js/marquee": "1.43.0",
-    "@zag-js/menu": "1.43.0",
-    "@zag-js/navigation-menu": "1.43.0",
-    "@zag-js/number-input": "1.43.0",
-    "@zag-js/pagination": "1.43.0",
-    "@zag-js/password-input": "1.43.0",
-    "@zag-js/pin-input": "1.43.0",
-    "@zag-js/popover": "1.43.0",
-    "@zag-js/presence": "1.43.0",
-    "@zag-js/progress": "1.43.0",
-    "@zag-js/qr-code": "1.43.0",
-    "@zag-js/radio-group": "1.43.0",
-    "@zag-js/rating-group": "1.43.0",
-    "@zag-js/react": "1.43.0",
-    "@zag-js/scroll-area": "1.43.0",
-    "@zag-js/select": "1.43.0",
-    "@zag-js/signature-pad": "1.43.0",
-    "@zag-js/slider": "1.43.0",
-    "@zag-js/splitter": "1.43.0",
-    "@zag-js/steps": "1.43.0",
-    "@zag-js/switch": "1.43.0",
-    "@zag-js/tabs": "1.43.0",
-    "@zag-js/tags-input": "1.43.0",
-    "@zag-js/timer": "1.43.0",
-    "@zag-js/toast": "1.43.0",
-    "@zag-js/toggle": "1.43.0",
-    "@zag-js/toggle-group": "1.43.0",
-    "@zag-js/tooltip": "1.43.0",
-    "@zag-js/tour": "1.43.0",
-    "@zag-js/tree-view": "1.43.0",
-    "@zag-js/types": "1.43.0",
-    "@zag-js/utils": "1.43.0"
+    "@internationalized/date": "3.12.3",
+    "@zag-js/accordion": "1.43.3",
+    "@zag-js/anatomy": "1.43.3",
+    "@zag-js/angle-slider": "1.43.3",
+    "@zag-js/async-list": "1.43.3",
+    "@zag-js/auto-resize": "1.43.3",
+    "@zag-js/avatar": "1.43.3",
+    "@zag-js/carousel": "1.43.3",
+    "@zag-js/cascade-select": "1.43.3",
+    "@zag-js/checkbox": "1.43.3",
+    "@zag-js/clipboard": "1.43.3",
+    "@zag-js/collapsible": "1.43.3",
+    "@zag-js/collection": "1.43.3",
+    "@zag-js/color-picker": "1.43.3",
+    "@zag-js/color-utils": "1.43.3",
+    "@zag-js/combobox": "1.43.3",
+    "@zag-js/core": "1.43.3",
+    "@zag-js/date-input": "1.43.3",
+    "@zag-js/date-picker": "1.43.3",
+    "@zag-js/date-utils": "1.43.3",
+    "@zag-js/dialog": "1.43.3",
+    "@zag-js/dom-query": "1.43.3",
+    "@zag-js/drawer": "1.43.3",
+    "@zag-js/editable": "1.43.3",
+    "@zag-js/file-upload": "1.43.3",
+    "@zag-js/file-utils": "1.43.3",
+    "@zag-js/floating-panel": "1.43.3",
+    "@zag-js/focus-trap": "1.43.3",
+    "@zag-js/focus-visible": "1.43.3",
+    "@zag-js/highlight-word": "1.43.3",
+    "@zag-js/hotkeys": "1.43.3",
+    "@zag-js/hover-card": "1.43.3",
+    "@zag-js/i18n-utils": "1.43.3",
+    "@zag-js/image-cropper": "1.43.3",
+    "@zag-js/json-tree-utils": "1.43.3",
+    "@zag-js/listbox": "1.43.3",
+    "@zag-js/marquee": "1.43.3",
+    "@zag-js/menu": "1.43.3",
+    "@zag-js/navigation-menu": "1.43.3",
+    "@zag-js/number-input": "1.43.3",
+    "@zag-js/pagination": "1.43.3",
+    "@zag-js/password-input": "1.43.3",
+    "@zag-js/pin-input": "1.43.3",
+    "@zag-js/popover": "1.43.3",
+    "@zag-js/presence": "1.43.3",
+    "@zag-js/progress": "1.43.3",
+    "@zag-js/qr-code": "1.43.3",
+    "@zag-js/radio-group": "1.43.3",
+    "@zag-js/rating-group": "1.43.3",
+    "@zag-js/react": "1.43.3",
+    "@zag-js/scroll-area": "1.43.3",
+    "@zag-js/select": "1.43.3",
+    "@zag-js/signature-pad": "1.43.3",
+    "@zag-js/slider": "1.43.3",
+    "@zag-js/splitter": "1.43.3",
+    "@zag-js/steps": "1.43.3",
+    "@zag-js/switch": "1.43.3",
+    "@zag-js/tabs": "1.43.3",
+    "@zag-js/tags-input": "1.43.3",
+    "@zag-js/timer": "1.43.3",
+    "@zag-js/toast": "1.43.3",
+    "@zag-js/toc": "1.43.3",
+    "@zag-js/toggle": "1.43.3",
+    "@zag-js/toggle-group": "1.43.3",
+    "@zag-js/tooltip": "1.43.3",
+    "@zag-js/tour": "1.43.3",
+    "@zag-js/tree-view": "1.43.3",
+    "@zag-js/types": "1.43.3",
+    "@zag-js/utils": "1.43.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.5",
-    "@storybook/addon-a11y": "10.5.3",
-    "@storybook/react-vite": "10.5.3",
-    "@tanstack/react-virtual": "3.14.8",
+    "@biomejs/biome": "2.5.8",
+    "@storybook/addon-a11y": "10.5.8",
+    "@storybook/react-vite": "10.5.8",
+    "@tanstack/react-virtual": "3.14.9",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "7.0.0",
+    "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.2",
-    "@testing-library/user-event": "14.6.1",
-    "@types/jsdom": "28.0.3",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "6.0.4",
+    "@testing-library/user-event": "14.6.4",
+    "@types/jsdom": "30.0.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
+    "@vitejs/plugin-react": "6.0.5",
     "@vitest/coverage-v8": "4.1.10",
     "check-password-strength": "3.0.0",
     "clean-package": "2.2.0",
-    "globby": "16.2.2",
-    "happy-dom": "20.11.1",
+    "globby": "16.2.3",
+    "happy-dom": "20.11.2",
     "image-conversion": "2.1.1",
-    "lucide-react": "1.26.0",
+    "lucide-react": "1.31.0",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-frame-component": "5.3.2",
-    "react-hook-form": "7.82.0",
+    "react-hook-form": "7.85.0",
     "react-shadow": "20.6.0",
     "react-use": "17.6.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "10.5.3",
+    "storybook": "10.5.8",
     "typescript": "6.0.3",
-    "vite": "8.1.5",
+    "vite": "8.2.1",
     "vite-plugin-dts": "5.0.3",
     "vitest": "4.1.10",
     "vitest-axe": "1.0.0-pre.5"