@ark-ui/react 5.38.1 → 5.39.0

package/dist/providers/hotkeys/use-hotkey-recorder.d.ts

@@ -0,0 +1,30 @@
+import { HotkeyRecorderOptions, RecordedHotkey } from '@zag-js/hotkeys';
+export interface UseHotkeyRecorderProps extends Omit<HotkeyRecorderOptions, 'target'> {
+}
+export interface UseHotkeyRecorderReturn {
+    /**
+     * Whether the recorder is currently listening for key events.
+     */
+    recording: boolean;
+    /**
+     * The hotkey recorded so far, or `null` if nothing has been recorded.
+     */
+    value: RecordedHotkey | null;
+    /**
+     * Start listening for key events.
+     */
+    start: () => void;
+    /**
+     * Stop listening and finalize the recorded hotkey.
+     */
+    stop: () => void;
+    /**
+     * Stop listening and discard the recorded hotkey.
+     */
+    cancel: () => void;
+    /**
+     * Clear the recorded hotkey.
+     */
+    clear: () => void;
+}
+export declare const useHotkeyRecorder: (props?: UseHotkeyRecorderProps) => UseHotkeyRecorderReturn;

package/dist/providers/hotkeys/use-hotkey-recorder.js

@@ -0,0 +1,58 @@
+"use client";
+import { useEnvironmentContext } from "../environment/use-environment-context.js";
+import { useSafeLayoutEffect } from "../../utils/use-safe-layout-effect.js";
+import { useEvent } from "../../utils/use-event.js";
+import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createHotkeyRecorder } from "@zag-js/hotkeys";
+//#region src/providers/hotkeys/use-hotkey-recorder.ts
+var useHotkeyRecorder = (props = {}) => {
+	const { formatOptions, sequenceTimeoutMs } = props;
+	const env = useEnvironmentContext();
+	const [recorder] = useState(() => createHotkeyRecorder());
+	const onRecord = useEvent(props.onRecord);
+	const onCancel = useEvent(props.onCancel);
+	const onClear = useEvent(props.onClear);
+	useSafeLayoutEffect(() => {
+		recorder.init(env.getRootNode());
+		recorder.setOptions({
+			onRecord,
+			onCancel,
+			onClear
+		});
+		return () => {
+			recorder.destroy();
+		};
+	}, [
+		recorder,
+		env,
+		onRecord,
+		onCancel,
+		onClear
+	]);
+	const formatRef = useRef(formatOptions);
+	formatRef.current = formatOptions;
+	const formatKey = formatOptions ? JSON.stringify(formatOptions) : "";
+	useSafeLayoutEffect(() => {
+		recorder.setOptions({
+			...formatRef.current && { formatOptions: formatRef.current },
+			...sequenceTimeoutMs !== void 0 && { sequenceTimeoutMs }
+		});
+	}, [
+		recorder,
+		formatKey,
+		sequenceTimeoutMs
+	]);
+	const subscribe = useCallback((onChange) => recorder.subscribe(onChange), [recorder]);
+	const getSnapshot = useCallback(() => recorder.getState(), [recorder]);
+	const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	return useMemo(() => ({
+		recording: state.recording,
+		value: state.value,
+		start: () => void recorder.start(),
+		stop: () => void recorder.stop(),
+		cancel: () => void recorder.cancel(),
+		clear: () => void recorder.clear()
+	}), [state, recorder]);
+};
+//#endregion
+export { useHotkeyRecorder };

package/dist/providers/hotkeys/use-hotkey-registrations.cjs

@@ -0,0 +1,12 @@
+"use client";
+const require_use_hotkey_store = require("./use-hotkey-store.cjs");
+const require_use_store_snapshot = require("./use-store-snapshot.cjs");
+//#region src/providers/hotkeys/use-hotkey-registrations.ts
+var getVersion = (state) => Array.from(state.commands.values(), (command) => `${command.id}:${command.hotkey}:${command.label ?? ""}`).join("|");
+var build = (state) => Array.from(state.commands.values());
+var useHotkeyRegistrations = (props = {}) => {
+	const store = require_use_hotkey_store.useHotkeyStore(props);
+	return require_use_store_snapshot.useStoreSnapshot(store, getVersion, build);
+};
+//#endregion
+exports.useHotkeyRegistrations = useHotkeyRegistrations;

package/dist/providers/hotkeys/use-hotkey-registrations.d.cts

@@ -0,0 +1,3 @@
+import { HotkeyCommand } from '@zag-js/hotkeys';
+import { UseHotkeyStoreProps } from './use-hotkey-store.js';
+export declare const useHotkeyRegistrations: (props?: UseHotkeyStoreProps) => HotkeyCommand[];

package/dist/providers/hotkeys/use-hotkey-registrations.d.ts

@@ -0,0 +1,3 @@
+import { HotkeyCommand } from '@zag-js/hotkeys';
+import { UseHotkeyStoreProps } from './use-hotkey-store.js';
+export declare const useHotkeyRegistrations: (props?: UseHotkeyStoreProps) => HotkeyCommand[];

package/dist/providers/hotkeys/use-hotkey-registrations.js

@@ -0,0 +1,12 @@
+"use client";
+import { useHotkeyStore } from "./use-hotkey-store.js";
+import { useStoreSnapshot } from "./use-store-snapshot.js";
+//#region src/providers/hotkeys/use-hotkey-registrations.ts
+var getVersion = (state) => Array.from(state.commands.values(), (command) => `${command.id}:${command.hotkey}:${command.label ?? ""}`).join("|");
+var build = (state) => Array.from(state.commands.values());
+var useHotkeyRegistrations = (props = {}) => {
+	const store = useHotkeyStore(props);
+	return useStoreSnapshot(store, getVersion, build);
+};
+//#endregion
+export { useHotkeyRegistrations };

package/dist/providers/hotkeys/use-hotkey-store.cjs

@@ -0,0 +1,23 @@
+"use client";
+const require_use_environment_context = require("../environment/use-environment-context.cjs");
+const require_use_safe_layout_effect = require("../../utils/use-safe-layout-effect.cjs");
+let _zag_js_hotkeys = require("@zag-js/hotkeys");
+//#region src/providers/hotkeys/use-hotkey-store.ts
+var defaultHotkeyStore;
+var getDefaultHotkeyStore = () => {
+	defaultHotkeyStore ??= (0, _zag_js_hotkeys.createHotkeyStore)();
+	return defaultHotkeyStore;
+};
+var initialized = /* @__PURE__ */ new WeakSet();
+var useHotkeyStore = (props = {}) => {
+	const env = require_use_environment_context.useEnvironmentContext();
+	const store = props.store ?? getDefaultHotkeyStore();
+	require_use_safe_layout_effect.useSafeLayoutEffect(() => {
+		if (initialized.has(store)) return;
+		initialized.add(store);
+		store.init({ target: env.getRootNode() });
+	}, [store, env]);
+	return store;
+};
+//#endregion
+exports.useHotkeyStore = useHotkeyStore;

package/dist/providers/hotkeys/use-hotkey-store.d.cts

@@ -0,0 +1,12 @@
+import { HotkeyStore } from '@zag-js/hotkeys';
+export interface UseHotkeyStoreProps {
+    /**
+     * The store to read from and register on. Defaults to a store shared by every hook that
+     * does not name one.
+     *
+     * Keep it stable: build it outside the component or memoize it, since a store created
+     * during render is rebuilt on every render and loses its registrations.
+     */
+    store?: HotkeyStore | undefined;
+}
+export declare const useHotkeyStore: (props?: UseHotkeyStoreProps) => HotkeyStore;

package/dist/providers/hotkeys/use-hotkey-store.d.ts

@@ -0,0 +1,12 @@
+import { HotkeyStore } from '@zag-js/hotkeys';
+export interface UseHotkeyStoreProps {
+    /**
+     * The store to read from and register on. Defaults to a store shared by every hook that
+     * does not name one.
+     *
+     * Keep it stable: build it outside the component or memoize it, since a store created
+     * during render is rebuilt on every render and loses its registrations.
+     */
+    store?: HotkeyStore | undefined;
+}
+export declare const useHotkeyStore: (props?: UseHotkeyStoreProps) => HotkeyStore;

package/dist/providers/hotkeys/use-hotkey-store.js

@@ -0,0 +1,23 @@
+"use client";
+import { useEnvironmentContext } from "../environment/use-environment-context.js";
+import { useSafeLayoutEffect } from "../../utils/use-safe-layout-effect.js";
+import { createHotkeyStore } from "@zag-js/hotkeys";
+//#region src/providers/hotkeys/use-hotkey-store.ts
+var defaultHotkeyStore;
+var getDefaultHotkeyStore = () => {
+	defaultHotkeyStore ??= createHotkeyStore();
+	return defaultHotkeyStore;
+};
+var initialized = /* @__PURE__ */ new WeakSet();
+var useHotkeyStore = (props = {}) => {
+	const env = useEnvironmentContext();
+	const store = props.store ?? getDefaultHotkeyStore();
+	useSafeLayoutEffect(() => {
+		if (initialized.has(store)) return;
+		initialized.add(store);
+		store.init({ target: env.getRootNode() });
+	}, [store, env]);
+	return store;
+};
+//#endregion
+export { useHotkeyStore };

package/dist/providers/hotkeys/use-hotkey.cjs

@@ -0,0 +1,12 @@
+"use client";
+const require_use_hotkeys = require("./use-hotkeys.cjs");
+//#region src/providers/hotkeys/use-hotkey.ts
+var useHotkey = (props) => {
+	const { store, ...command } = props;
+	require_use_hotkeys.useHotkeys({
+		commands: [command],
+		store
+	});
+};
+//#endregion
+exports.useHotkey = useHotkey;

package/dist/providers/hotkeys/use-hotkey.d.cts

@@ -0,0 +1,4 @@
+import { UseHotkeysCommand, UseHotkeysProps } from './use-hotkeys.js';
+export interface UseHotkeyProps extends UseHotkeysCommand, Pick<UseHotkeysProps, 'store'> {
+}
+export declare const useHotkey: (props: UseHotkeyProps) => void;

package/dist/providers/hotkeys/use-hotkey.d.ts

@@ -0,0 +1,4 @@
+import { UseHotkeysCommand, UseHotkeysProps } from './use-hotkeys.js';
+export interface UseHotkeyProps extends UseHotkeysCommand, Pick<UseHotkeysProps, 'store'> {
+}
+export declare const useHotkey: (props: UseHotkeyProps) => void;

package/dist/providers/hotkeys/use-hotkey.js

@@ -0,0 +1,12 @@
+"use client";
+import { useHotkeys } from "./use-hotkeys.js";
+//#region src/providers/hotkeys/use-hotkey.ts
+var useHotkey = (props) => {
+	const { store, ...command } = props;
+	useHotkeys({
+		commands: [command],
+		store
+	});
+};
+//#endregion
+export { useHotkey };

package/dist/providers/hotkeys/use-hotkeys.cjs

@@ -0,0 +1,69 @@
+"use client";
+const require_use_platform = require("./use-platform.cjs");
+const require_use_hotkey_store = require("./use-hotkey-store.cjs");
+let _zag_js_utils = require("@zag-js/utils");
+let react = require("react");
+let _zag_js_hotkeys = require("@zag-js/hotkeys");
+//#region src/providers/hotkeys/use-hotkeys.ts
+var warnOnForeignId = (store, id) => {
+	(0, _zag_js_utils.warn)(store.getState().commands.has(id), `[ark-ui/hotkeys] Command id "${id}" is already registered on this store by another component, so the earlier command will stop firing. Use a unique id, omit it to have one generated, or register on a separate store.`);
+};
+var toRegistration = (command, platform) => ({
+	hotkey: (0, _zag_js_hotkeys.normalizeHotkey)(command.hotkey, platform),
+	scopes: command.scopes,
+	label: command.label,
+	description: command.description,
+	category: command.category,
+	keywords: command.keywords,
+	options: command.options
+});
+var useHotkeys = (props) => {
+	const store = require_use_hotkey_store.useHotkeyStore(props);
+	const platform = require_use_platform.usePlatform();
+	const generatedId = (0, react.useId)();
+	const instanceId = props.id ?? generatedId;
+	const commandsRef = (0, react.useRef)(props.commands);
+	commandsRef.current = props.commands;
+	const registered = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const resolveId = (command, index) => command.id ?? `${instanceId}:${index}`;
+	const findCommand = (id) => commandsRef.current.find((item, index) => resolveId(item, index) === id);
+	(0, react.useEffect)(() => {
+		const current = commandsRef.current;
+		const nextIds = new Set(current.map(resolveId));
+		for (const id of [...registered.current.keys()]) {
+			if (nextIds.has(id)) continue;
+			store.unregister(id);
+			registered.current.delete(id);
+		}
+		current.forEach((command, index) => {
+			const id = resolveId(command, index);
+			const next = toRegistration(command, platform);
+			const previous = registered.current.get(id);
+			if (previous && (0, _zag_js_utils.isEqual)(previous, next)) return;
+			if (previous) store.unregister(id);
+			else warnOnForeignId(store, id);
+			store.register({
+				...command,
+				id,
+				action: (event) => {
+					findCommand(id)?.action(event);
+				},
+				enabled: () => {
+					const enabled = findCommand(id)?.enabled;
+					if (enabled === void 0) return true;
+					return typeof enabled === "function" ? enabled() : enabled;
+				}
+			});
+			registered.current.set(id, next);
+		});
+	});
+	(0, react.useEffect)(() => {
+		const registry = registered.current;
+		return () => {
+			for (const id of registry.keys()) store.unregister(id);
+			registry.clear();
+		};
+	}, [store]);
+};
+//#endregion
+exports.useHotkeys = useHotkeys;

package/dist/providers/hotkeys/use-hotkeys.d.cts

@@ -0,0 +1,21 @@
+import { CommandDefinition } from '@zag-js/hotkeys';
+import { UseHotkeyStoreProps } from './use-hotkey-store.js';
+export interface UseHotkeysCommand extends Omit<CommandDefinition, 'id'> {
+    /**
+     * Identifies the command across renders. One is generated when omitted, which is enough
+     * unless something else needs to address this command by name.
+     */
+    id?: string | undefined;
+}
+export interface UseHotkeysProps extends UseHotkeyStoreProps {
+    /**
+     * The commands to register.
+     */
+    commands: UseHotkeysCommand[];
+    /**
+     * Prefix for the ids generated for commands that do not set their own. One is generated
+     * when omitted.
+     */
+    id?: string | undefined;
+}
+export declare const useHotkeys: (props: UseHotkeysProps) => void;

package/dist/providers/hotkeys/use-hotkeys.d.ts

@@ -0,0 +1,21 @@
+import { CommandDefinition } from '@zag-js/hotkeys';
+import { UseHotkeyStoreProps } from './use-hotkey-store.js';
+export interface UseHotkeysCommand extends Omit<CommandDefinition, 'id'> {
+    /**
+     * Identifies the command across renders. One is generated when omitted, which is enough
+     * unless something else needs to address this command by name.
+     */
+    id?: string | undefined;
+}
+export interface UseHotkeysProps extends UseHotkeyStoreProps {
+    /**
+     * The commands to register.
+     */
+    commands: UseHotkeysCommand[];
+    /**
+     * Prefix for the ids generated for commands that do not set their own. One is generated
+     * when omitted.
+     */
+    id?: string | undefined;
+}
+export declare const useHotkeys: (props: UseHotkeysProps) => void;

package/dist/providers/hotkeys/use-hotkeys.js

@@ -0,0 +1,69 @@
+"use client";
+import { usePlatform } from "./use-platform.js";
+import { useHotkeyStore } from "./use-hotkey-store.js";
+import { isEqual, warn } from "@zag-js/utils";
+import { useEffect, useId, useRef } from "react";
+import { normalizeHotkey } from "@zag-js/hotkeys";
+//#region src/providers/hotkeys/use-hotkeys.ts
+var warnOnForeignId = (store, id) => {
+	warn(store.getState().commands.has(id), `[ark-ui/hotkeys] Command id "${id}" is already registered on this store by another component, so the earlier command will stop firing. Use a unique id, omit it to have one generated, or register on a separate store.`);
+};
+var toRegistration = (command, platform) => ({
+	hotkey: normalizeHotkey(command.hotkey, platform),
+	scopes: command.scopes,
+	label: command.label,
+	description: command.description,
+	category: command.category,
+	keywords: command.keywords,
+	options: command.options
+});
+var useHotkeys = (props) => {
+	const store = useHotkeyStore(props);
+	const platform = usePlatform();
+	const generatedId = useId();
+	const instanceId = props.id ?? generatedId;
+	const commandsRef = useRef(props.commands);
+	commandsRef.current = props.commands;
+	const registered = useRef(/* @__PURE__ */ new Map());
+	const resolveId = (command, index) => command.id ?? `${instanceId}:${index}`;
+	const findCommand = (id) => commandsRef.current.find((item, index) => resolveId(item, index) === id);
+	useEffect(() => {
+		const current = commandsRef.current;
+		const nextIds = new Set(current.map(resolveId));
+		for (const id of [...registered.current.keys()]) {
+			if (nextIds.has(id)) continue;
+			store.unregister(id);
+			registered.current.delete(id);
+		}
+		current.forEach((command, index) => {
+			const id = resolveId(command, index);
+			const next = toRegistration(command, platform);
+			const previous = registered.current.get(id);
+			if (previous && isEqual(previous, next)) return;
+			if (previous) store.unregister(id);
+			else warnOnForeignId(store, id);
+			store.register({
+				...command,
+				id,
+				action: (event) => {
+					findCommand(id)?.action(event);
+				},
+				enabled: () => {
+					const enabled = findCommand(id)?.enabled;
+					if (enabled === void 0) return true;
+					return typeof enabled === "function" ? enabled() : enabled;
+				}
+			});
+			registered.current.set(id, next);
+		});
+	});
+	useEffect(() => {
+		const registry = registered.current;
+		return () => {
+			for (const id of registry.keys()) store.unregister(id);
+			registry.clear();
+		};
+	}, [store]);
+};
+//#endregion
+export { useHotkeys };

package/dist/providers/hotkeys/use-is-key-pressed.cjs

@@ -0,0 +1,13 @@
+"use client";
+const require_use_hotkey_store = require("./use-hotkey-store.cjs");
+let react = require("react");
+//#region src/providers/hotkeys/use-is-key-pressed.ts
+var useIsKeyPressed = (props) => {
+	const { hotkey } = props;
+	const store = require_use_hotkey_store.useHotkeyStore(props);
+	const subscribe = (0, react.useCallback)((onChange) => store.subscribe(() => store.isPressed(hotkey), onChange), [store, hotkey]);
+	const getSnapshot = (0, react.useCallback)(() => store.isPressed(hotkey), [store, hotkey]);
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+};
+//#endregion
+exports.useIsKeyPressed = useIsKeyPressed;

package/dist/providers/hotkeys/use-is-key-pressed.d.cts

@@ -0,0 +1,8 @@
+import { UseHotkeyStoreProps } from './use-hotkey-store.js';
+export interface UseIsKeyPressedProps extends UseHotkeyStoreProps {
+    /**
+     * The key or combination to watch.
+     */
+    hotkey: string;
+}
+export declare const useIsKeyPressed: (props: UseIsKeyPressedProps) => boolean;

package/dist/providers/hotkeys/use-is-key-pressed.d.ts

@@ -0,0 +1,8 @@
+import { UseHotkeyStoreProps } from './use-hotkey-store.js';
+export interface UseIsKeyPressedProps extends UseHotkeyStoreProps {
+    /**
+     * The key or combination to watch.
+     */
+    hotkey: string;
+}
+export declare const useIsKeyPressed: (props: UseIsKeyPressedProps) => boolean;

package/dist/providers/hotkeys/use-is-key-pressed.js

@@ -0,0 +1,13 @@
+"use client";
+import { useHotkeyStore } from "./use-hotkey-store.js";
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/providers/hotkeys/use-is-key-pressed.ts
+var useIsKeyPressed = (props) => {
+	const { hotkey } = props;
+	const store = useHotkeyStore(props);
+	const subscribe = useCallback((onChange) => store.subscribe(() => store.isPressed(hotkey), onChange), [store, hotkey]);
+	const getSnapshot = useCallback(() => store.isPressed(hotkey), [store, hotkey]);
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+//#endregion
+export { useIsKeyPressed };

package/dist/providers/hotkeys/use-platform.cjs

@@ -0,0 +1,18 @@
+"use client";
+let react = require("react");
+let _zag_js_dom_query = require("@zag-js/dom-query");
+//#region src/providers/hotkeys/use-platform.ts
+var isLinux = () => /^Linux|^CrOS/i.test((0, _zag_js_dom_query.getPlatform)()) && !(0, _zag_js_dom_query.isAndroid)();
+var subscribe = () => () => {};
+var detect = () => {
+	if ((0, _zag_js_dom_query.isApple)()) return "mac";
+	if (isLinux()) return "linux";
+	return "windows";
+};
+var usePlatform = () => {
+	const getSnapshot = (0, react.useCallback)(detect, []);
+	const getServerSnapshot = (0, react.useCallback)(() => "windows", []);
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+};
+//#endregion
+exports.usePlatform = usePlatform;

package/dist/providers/hotkeys/use-platform.d.cts

@@ -0,0 +1,2 @@
+export type Platform = 'mac' | 'windows' | 'linux';
+export declare const usePlatform: () => Platform;

package/dist/providers/hotkeys/use-platform.d.ts

@@ -0,0 +1,2 @@
+export type Platform = 'mac' | 'windows' | 'linux';
+export declare const usePlatform: () => Platform;

package/dist/providers/hotkeys/use-platform.js

@@ -0,0 +1,18 @@
+"use client";
+import { useCallback, useSyncExternalStore } from "react";
+import { getPlatform, isAndroid, isApple } from "@zag-js/dom-query";
+//#region src/providers/hotkeys/use-platform.ts
+var isLinux = () => /^Linux|^CrOS/i.test(getPlatform()) && !isAndroid();
+var subscribe = () => () => {};
+var detect = () => {
+	if (isApple()) return "mac";
+	if (isLinux()) return "linux";
+	return "windows";
+};
+var usePlatform = () => {
+	const getSnapshot = useCallback(detect, []);
+	const getServerSnapshot = useCallback(() => "windows", []);
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};
+//#endregion
+export { usePlatform };

package/dist/providers/hotkeys/use-pressed-keys.cjs

@@ -0,0 +1,12 @@
+"use client";
+const require_use_hotkey_store = require("./use-hotkey-store.cjs");
+const require_use_store_snapshot = require("./use-store-snapshot.cjs");
+//#region src/providers/hotkeys/use-pressed-keys.ts
+var getVersion = (state) => Array.from(state.pressedKeys).join("|");
+var build = (state) => Array.from(state.pressedKeys);
+var usePressedKeys = (props = {}) => {
+	const store = require_use_hotkey_store.useHotkeyStore(props);
+	return require_use_store_snapshot.useStoreSnapshot(store, getVersion, build);
+};
+//#endregion
+exports.usePressedKeys = usePressedKeys;

package/dist/providers/hotkeys/use-pressed-keys.d.cts

@@ -0,0 +1,2 @@
+import { UseHotkeyStoreProps } from './use-hotkey-store.js';
+export declare const usePressedKeys: (props?: UseHotkeyStoreProps) => string[];

package/dist/providers/hotkeys/use-pressed-keys.d.ts

@@ -0,0 +1,2 @@
+import { UseHotkeyStoreProps } from './use-hotkey-store.js';
+export declare const usePressedKeys: (props?: UseHotkeyStoreProps) => string[];

package/dist/providers/hotkeys/use-pressed-keys.js

@@ -0,0 +1,12 @@
+"use client";
+import { useHotkeyStore } from "./use-hotkey-store.js";
+import { useStoreSnapshot } from "./use-store-snapshot.js";
+//#region src/providers/hotkeys/use-pressed-keys.ts
+var getVersion = (state) => Array.from(state.pressedKeys).join("|");
+var build = (state) => Array.from(state.pressedKeys);
+var usePressedKeys = (props = {}) => {
+	const store = useHotkeyStore(props);
+	return useStoreSnapshot(store, getVersion, build);
+};
+//#endregion
+export { usePressedKeys };

package/dist/providers/hotkeys/use-store-snapshot.cjs

@@ -0,0 +1,23 @@
+"use client";
+let react = require("react");
+//#region src/providers/hotkeys/use-store-snapshot.ts
+function useStoreSnapshot(store, getVersion, build) {
+	const cache = (0, react.useRef)(null);
+	const subscribe = (0, react.useCallback)((onChange) => store.subscribe(getVersion, onChange), [store, getVersion]);
+	const getSnapshot = (0, react.useCallback)(() => {
+		const state = store.getState();
+		const version = getVersion(state);
+		if (cache.current?.version !== version) cache.current = {
+			version,
+			value: build(state)
+		};
+		return cache.current.value;
+	}, [
+		store,
+		getVersion,
+		build
+	]);
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+//#endregion
+exports.useStoreSnapshot = useStoreSnapshot;

package/dist/providers/hotkeys/use-store-snapshot.d.cts

@@ -0,0 +1,2 @@
+import { HotkeyStore, HotkeyStoreState } from '@zag-js/hotkeys';
+export declare function useStoreSnapshot<T>(store: HotkeyStore, getVersion: (state: HotkeyStoreState) => string, build: (state: HotkeyStoreState) => T): T;

package/dist/providers/hotkeys/use-store-snapshot.d.ts

@@ -0,0 +1,2 @@
+import { HotkeyStore, HotkeyStoreState } from '@zag-js/hotkeys';
+export declare function useStoreSnapshot<T>(store: HotkeyStore, getVersion: (state: HotkeyStoreState) => string, build: (state: HotkeyStoreState) => T): T;

package/dist/providers/hotkeys/use-store-snapshot.js

@@ -0,0 +1,23 @@
+"use client";
+import { useCallback, useRef, useSyncExternalStore } from "react";
+//#region src/providers/hotkeys/use-store-snapshot.ts
+function useStoreSnapshot(store, getVersion, build) {
+	const cache = useRef(null);
+	const subscribe = useCallback((onChange) => store.subscribe(getVersion, onChange), [store, getVersion]);
+	const getSnapshot = useCallback(() => {
+		const state = store.getState();
+		const version = getVersion(state);
+		if (cache.current?.version !== version) cache.current = {
+			version,
+			value: build(state)
+		};
+		return cache.current.value;
+	}, [
+		store,
+		getVersion,
+		build
+	]);
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+//#endregion
+export { useStoreSnapshot };