@keybindy/react 1.1.12 → 2.0.1

package/README.md

@@ -1,26 +1,46 @@
 # @keybindy/react
 
-`@keybindy/react` is the official React integration for the [Keybindy](https://www.npmjs.com/package/@keybindy/core) keyboard shortcut system. Built on top of `@keybindy/core`, this package brings powerful and scoped keyboard bindings to your React applications — with components and hooks tailored to React’s architecture.
+<p align="center">
+  <strong>Modern, rock-solid React hooks and components for keyboard shortcuts.</strong><br />
+  <em>Zero lifecycle blinking. Zero stale closures. 100% headless.</em>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@keybindy/react"><img src="https://img.shields.io/npm/v/@keybindy/react.svg?style=flat&colorA=18181B&colorB=3B82F6" alt="npm version" /></a>
+  <a href="https://bundlephobia.com/package/@keybindy/react"><img src="https://img.shields.io/bundlephobia/minzip/@keybindy/react?style=flat&colorA=18181B&colorB=10B981" alt="minzipped size" /></a>
+  <a href="https://github.com/keybindyjs/keybindy/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat&colorA=18181B&colorB=6366F1" alt="MIT License" /></a>
+  <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-blue?style=flat&colorA=18181B&colorB=3178C6" alt="TypeScript" /></a>
+</p>
 
-[![npm version](https://badge.fury.io/js/@keybindy%2Freact.svg)](https://www.npmjs.com/package/@keybindy/react)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+---
+
+Most React keyboard shortcut hooks fail in subtle, frustrating ways:
+1. **The "Blinking" Problem**: Every state change re-renders the component, causing the hook to unregister and re-register the hotkey. Rapid typing or animations cause micro-gaps where shortcuts are dropped.
+2. **Stale Closures**: Forgetting to update dependency arrays traps shortcuts with initial state values.
+3. **Modal Leaks**: Closing a dialog forgets to re-enable background shortcuts or corrupts the active scope.
+
+**`@keybindy/react`** completely eliminates these bugs with a **stable ref architecture**. Handlers always execute with the freshest state without ever re-registering the listener.
 
 ---
 
-## 🧠 What is @keybindy/react?
+## Why `@keybindy/react`?
 
-While `@keybindy/core` gives you the underlying logic to register and manage shortcuts in any JavaScript environment, **@keybindy/react** wraps it in a React-friendly API with scoped context, declarative components, and hooks for full control.
+- ⚡️ **Zero Lifecycle Blinking** — Listeners register once on mount and unregister on unmount. No keystrokes are ever dropped during state updates.
+- 🔄 **Always Fresh State** — Access your component's latest state and props inside callbacks without stale closures.
+- 🎯 **Modal Isolation & Cascading Tools** — Effortlessly trap shortcuts in modals or cascade layered hotkeys.
+- 🛡 **Hooks & Components** — Use `useShortcut`, `useShortcuts`, `useShortcutManager`, or `<Keybindy />` JSX.
+- ⚡️ **SSR & Next.js App Router Ready** — Client-safe initialization that never crashes during server rendering.
 
 ---
 
-## Installation
+## 📦 Installation
 
 ```bash
 # npm
 npm install @keybindy/react
 
-# yarn
-yarn add @keybindy/react
+# pnpm
+pnpm add @keybindy/react
 
 # bun
 bun add @keybindy/react
@@ -28,162 +48,277 @@ bun add @keybindy/react
 
 ---
 
-## Usage
+## 🚀 Quick Start
 
-#### `<Keybindy />` component
+### 1. The `useShortcut` Hook (Single Shortcut)
 
-The core declarative component. Register all your scoped or global shortcuts with ease.
+The cleanest, most ergonomic way to bind hotkeys in any functional component:
 
-| Prop              | Type                 | Default     | Description                                                    |
-| ----------------- | -------------------- | ----------- | -------------------------------------------------------------- |
-| `logs`            | `boolean`            | `false`     | Whether to enable debug logs in the console.                   |
-| `onShortcutFired` | `fn(info: Shortcut)` | `undefined` | Optional callback to handle shortcut firing events.            |
-| `disabled`        | `boolean`            | `false`     | Whether to disable all shortcuts within the component's scope. |
-| `scope`           | `string`             | `global`    | The scope to apply the shortcuts to.                           |
-| `shortcuts`       | `Shortcut[]`         | `[]`        | Array of shortcut objects to register.                         |
-| `children`        | `React.ReactNode`    | `undefined` | The content to render inside the component.                    |
+```tsx
+import { useState } from 'react';
+import { useShortcut } from '@keybindy/react';
 
-##### Example
+function DocumentEditor() {
+  const [content, setContent] = useState('');
 
-```ts
-import { Keybindy } from '@keybindy/react';
+  // ⚡️ Always accesses the latest `content` state without re-registering!
+  useShortcut(['Ctrl', 'S'], (event) => {
+    saveDocument(content);
+  }, {
+    preventDefault: true,
+    ignoreInputs: true, // Won't trigger if user is typing in a textarea
+  });
+
+  // Cross-platform Command/Ctrl + K
+  useShortcut([['Meta', 'K'], ['Ctrl', 'K']], () => {
+    openSearchPalette();
+  }, { preventDefault: true });
+
+  return <textarea value={content} onChange={e => setContent(e.target.value)} />;
+}
+```
 
-<Keybindy
-  scope="global"
-  shortcuts={[
+---
+
+### 2. The `useShortcuts` Hook (Multiple Shortcuts)
+
+Great for components with many hotkeys (e.g. video players, canvas apps, tables):
+
+```tsx
+import { useShortcuts } from '@keybindy/react';
+
+function VideoPlayer({ isPlaying, onPlayPause, onSeekForward, onSeekBackward }) {
+  useShortcuts([
     {
-      keys: ['A'],
-      handler: () => console.log('A pressed'),
-      options: {
-        preventDefault: true,
-      },
+      keys: ['Space'],
+      handler: onPlayPause,
+      options: { preventDefault: true },
     },
     {
-      keys: ['O', 'P'],
-      handler: () => setIsOpen(true),
-      options: {
-        sequenceDelay: 1000,
-        sequential: true,
-        preventDefault: true,
-      },
+      keys: ['ArrowRight'],
+      handler: () => onSeekForward(5),
+      options: { preventDefault: true },
     },
     {
-      keys: ['R'],
-      handler: () => window.open('https://react.dev', '_blank'),
-      options: {
-        preventDefault: true,
-      },
+      keys: ['ArrowLeft'],
+      handler: () => onSeekBackward(5),
+      options: { preventDefault: true },
     },
-  ]}
-/>;
-```
+    {
+      // Push-to-talk / Hold action
+      keys: ['M'],
+      handler: (e, state) => setTemporaryMute(state === 'down'),
+      options: { hold: true },
+    },
+  ], {
+    scope: 'video-player',
+  });
 
-#### `<ShortcutLabel />` component
+  return <div>{/* Player UI */}</div>;
+}
+```
 
-A lightweight UI component to render visually styled shortcut hints.
+---
 
-| Prop        | Type                                           | Default     | Description                                    |
-| ----------- | ---------------------------------------------- | ----------- | ---------------------------------------------- |
-| `keys`      | `Keys`                                         | `[]`        | The key combination(s) to display.             |
-| `renderKey` | `fn(key: string, index: number, keys: Keys[])` | `undefined` | Custom renderer for each key badge or segment. |
+### 3. The `<Keybindy />` Component (Declarative JSX)
 
-##### Example
+If you prefer wrapping views declaratively, `<Keybindy />` provides the same rock-solid behavior in JSX:
 
-```ts
-import { ShortcutLabel } from '@keybindy/react';
+```tsx
+import { Keybindy } from '@keybindy/react';
 
-<ShortcutLabel
-  keys={['ctrl', 'alt', 'delete']}
-  renderKey={(key, i, all) => (
-    <>
-      <span style={{ color: '#00eaff' }}>{key.toUpperCase()}</span>
-      {i < all.length - 1 && <span style={{ opacity: 0.5 }}> + </span>}
-    </>
-  )}
-/>;
+function App() {
+  return (
+    <Keybindy
+      scope="global"
+      shortcuts={[
+        {
+          keys: ['Ctrl', 'S'],
+          handler: () => console.log('Saved!'),
+          options: { preventDefault: true },
+        },
+      ]}
+    >
+      <MainLayout />
+    </Keybindy>
+  );
+}
 ```
 
-#### `useKeybindy` Hook
-
-A powerful hook that gives you full control over the shortcut system via the ShortcutManager under the hood. Best for dynamic or advanced use cases.
-
-##### Available methods
-
-| Method                                                                   | Description                                  |
-| ------------------------------------------------------------------------ | -------------------------------------------- |
-| [`register()`](https://github.com/keybindy/core#register)                | Register a shortcut                          |
-| [`unregister()`](https://github.com/keybindy/core#unregister)            | Unregister a shortcut                        |
-| [`enable()`](https://github.com/keybindy/core#enable--disable--toggle)   | Enable a specific shortcut                   |
-| [`disable()`](https://github.com/keybindy/core#enable--disable--toggle)  | Disable a specific shortcut                  |
-| [`toggle()`](https://github.com/keybindy/core#enable--disable--toggle)   | Toggle a shortcut on/off                     |
-| [`enableAll()`](https://github.com/keybindy/core#enableall--disableall)  | Enable all shortcuts (global or scoped)      |
-| [`disableAll()`](https://github.com/keybindy/core#enableall--disableall) | Disable all shortcuts (global or scoped)     |
-| [`setScope()`](https://github.com/keybindy/core#setactivescope)          | Set the active scope                         |
-| [`resetScope()`](https://github.com/keybindy/core#resetScope)            | Reset to default scope                       |
-| [`getScopes()`](https://github.com/keybindy/core#getScopes)              | Get all defined scopes                       |
-| [`getActiveScope()`](https://github.com/keybindy/core#getActiveScope)    | Get the current active scope                 |
-| [`popScope()`](https://github.com/keybindy/core#popScope)                | Remove the top scope from the scope stack    |
-| [`pushScope()`](https://github.com/keybindy/core#pushScope)              | Push a new scope onto the scope stack        |
-| [`getCheatSheet()`](https://github.com/keybindy/core#getCheatsheet)      | Retrieve all shortcuts (optionally by scope) |
-| [`onTyping()`](https://github.com/keybindy/core#onTyping)                | Listen to every key press                    |
-| [`destroy()`](https://github.com/keybindy/core#destroy)                  | Tear down the current manager instance       |
-| [`clear()`](https://github.com/keybindy/core#clear)                      | Unregister all shortcuts                     |
-| [`getScopeInfo()`](https://github.com/keybindy/core#getScopeInfo)        | Retrieve metadata about a specific scope     |
-| [`isScopeActive()`](https://github.com/keybindy/core#isScopeActive)      | Check if a scope is currently active         |
-
-> _All methods mirror `@keybindy/core` with a React-friendly API._
-
-##### Example
-
-```ts
-import { useKeybindy } from '@keybindy/react';
-
-const { register, unregister, setScope, getCheatSheet } = useKeybindy();
-
-React.useEffect(() => {
-  register(
-    ['ctrl', 'k'],
-    () => {
-      console.log('Shortcut fired!');
+---
+
+## 🎯 Scoping: Modals vs. Layered Tools
+
+### A. Modal Isolation (`default` mode)
+When opening a modal or dialog, you want to **trap hotkeys** so background shortcuts cannot fire. When the modal unmounts, background shortcuts are automatically restored:
+
+```tsx
+function DeleteConfirmationModal({ isOpen, onClose, onDelete }) {
+  // Opening this modal automatically deactivates global shortcuts
+  useShortcuts([
+    {
+      keys: ['Enter'],
+      handler: onDelete,
     },
     {
-      scope: 'editor',
-      preventDefault: true,
-    }
+      keys: ['Esc'],
+      handler: onClose,
+      options: { enableInInput: true }, // Escape works even inside modal inputs
+    },
+  ], {
+    scope: 'delete-dialog',
+    disabled: !isOpen,
+  });
+
+  if (!isOpen) return null;
+  return <div className="modal">Are you sure?</div>;
+}
+```
+
+---
+
+### B. Layered Tools with Priority (`cascade` mode)
+In Figma / Photoshop style apps, global canvas shortcuts (like `Space` to pan or `Z` to zoom) should continue working while editing in a sub-tool, but sub-tool shortcuts should override colliding keys:
+
+```tsx
+// 1. Root Canvas (in cascade mode)
+function CanvasApp() {
+  return (
+    <Keybindy scopeMode="cascade" scope="canvas" shortcuts={[
+      { keys: ['Space'], handler: panCanvas, options: { hold: true } },
+      { keys: ['V'], handler: selectTool },
+    ]}>
+      <Toolbox />
+      <TextLayerEditor />
+    </Keybindy>
   );
+}
 
-  return () => {
-    unregister(['ctrl', 'k'], 'editor');
-  };
-}, []);
+// 2. Focused Text Layer (higher priority weight)
+function TextLayerEditor() {
+  useShortcuts([
+    {
+      keys: ['V'], // Overrides global 'V' tool while text editor is focused
+      handler: pastePlainText,
+    }
+  ], {
+    scope: 'text-editor',
+    priority: 100, // Higher priority wins colliding keys
+  });
+}
+
+// 3. Isolated Modal inside a cascading app
+function SettingsModal({ isOpen, onClose }) {
+  // 💡 Want to trap shortcuts in a specific modal and block parent cascading?
+  // Pass scopeMode="default" to isolate this child from parent shortcuts!
+  useShortcuts([
+    { keys: ['Esc'], handler: onClose, options: { enableInInput: true } }
+  ], {
+    scope: 'settings-modal',
+    scopeMode: 'default', // Traps shortcuts: parent canvas keys won't fire
+    disabled: !isOpen,
+  });
+
+  if (!isOpen) return null;
+  return <div className="modal">Settings</div>;
+}
 ```
 
+> [!TIP]
+> **Isolating a Child from Parent Cascading**: If your parent container is in `scopeMode="cascade"`, but you want a specific modal or dialog to **trap and block** all parent hotkeys, simply pass `scopeMode="default"` to that child `<Keybindy />` or `useShortcuts` / `useShortcut`. When the modal closes or unmounts, the parent's `cascade` mode is automatically restored.
+
 ---
 
-## Reference
+## 🛡 Guard & Interceptor Hooks
+
+Hook into shortcut lifecycles cleanly from any component:
+
+```tsx
+import { useBeforeShortcut, useAfterShortcut } from '@keybindy/react';
+
+function GlobalHotkeysManager() {
+  // 🛑 Guard: Block all shortcuts while an async mutation is pending
+  useBeforeShortcut((shortcut, event) => {
+    if (isSaving) {
+      console.warn('Action blocked: Save in progress.');
+      return false; // Returning false cancels the shortcut
+    }
+  });
 
-If you're looking for more detailed implementation logic and architecture, check out the [@keybindy/core](https://www.npmjs.com/package/@keybindy/core) documentation for an in-depth look at how shortcut handling works under the hood.
+  // 📊 Interceptor: Log analytics after shortcuts execute
+  useAfterShortcut((shortcut, event) => {
+    analytics.track('Shortcut Fired', { keys: shortcut.keys });
+  });
+}
+```
 
 ---
 
-## 🧩 Want More?
+## 🛠 Programmatic Manager: `useShortcutManager`
+
+When you need direct programmatic control over scopes, priorities, or cheat sheets:
+
+```tsx
+import { useShortcutManager } from '@keybindy/react';
 
-This package is part of the Keybindy Ecosystem:
+function ShortcutsHelpModal() {
+  const { getCheatSheet, setScope, getActiveScope } = useShortcutManager();
 
-| Package                                                        | Description                                                                      |
-| -------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| [`@keybindy/core`](https://npmjs.com/package/@keybindy/core)   | The core JavaScript library. Framework-agnostic, fully typed, and tree-shakable. |
-| [`@keybindy/react`](https://npmjs.com/package/@keybindy/react) | React bindings with hooks and components for easy integration.                   |
-| _Coming Soon_                                                  | Stay tuned!                                                                      |
+  const allShortcuts = getCheatSheet();
+
+  return (
+    <dialog>
+      <h2>Keyboard Shortcuts</h2>
+      {allShortcuts.map((s, i) => (
+        <div key={i}>
+          <kbd>{s.keys.join(' + ')}</kbd>
+          <span>{s.data?.description}</span>
+        </div>
+      ))}
+    </dialog>
+  );
+}
+```
+*(Note: `useKeybindy` is retained as an exact alias to `useShortcutManager`)*.
 
 ---
 
-## Contributing
+## 📝 Input Handling
 
-PRs, issues, and ideas are welcome! See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
+Prevent shortcuts from firing while users type in `<input>`, `<textarea>`, `<select>`, or `contenteditable` elements:
 
-If you're adding a new framework integration (like Vue or Svelte), feel free to open a draft PR — we'd love to collaborate.
+```tsx
+// Ignore inputs by default for this shortcut
+useShortcut(['D'], deleteItem, { ignoreInputs: true });
+
+// Allow this shortcut even while typing in an input
+useShortcut(['Esc'], clearSearch, { enableInInput: true });
+```
+
+---
+
+## 📖 Hook Options Reference
+
+### `useShortcut(keys, handler, options?)`
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `scope` | `string` | `'global'` | Scope context for the shortcut. |
+| `scopeMode` | `'default' \| 'cascade'` | `'default'` | Scope resolution behavior. |
+| `priority` | `number` | `undefined` | Numeric priority weight for cascade mode (e.g. `100`). |
+| `disabled` | `boolean` | `false` | Disable the shortcut without unmounting. |
+| `preventDefault` | `boolean` | `false` | Calls `event.preventDefault()`. |
+| `stopPropagation` | `boolean` | `false` | Calls `event.stopPropagation()`. |
+| `sequential` | `boolean` | `false` | Treat keys as a sequence (e.g. `['G', 'D']`). |
+| `sequenceDelay` | `number` | `1000` | Max milliseconds between sequential keys. |
+| `hold` | `boolean` | `false` | Triggers handler with `state: 'down' \| 'up'`. |
+| `repeat` | `boolean` | `false` | Allow continuous firing when holding key. |
+| `ignoreInputs` | `boolean` | `false` | Ignore shortcut when typing in inputs/textareas. |
+| `enableInInput` | `boolean` | `false` | Explicitly enable shortcut while typing in inputs. |
+| `data` | `object` | `{}` | Custom metadata for cheat sheets. |
 
 ---
 
-> _Might be new in the shortcut game, but Keybindy’s here to change the frame — fast, flexible, and ready to claim. 🎯_
+## 📄 License
+
+MIT © [Keybindy Contributors](https://github.com/keybindyjs/keybindy)

package/dist/Keybindy.js

@@ -1,65 +1,9 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
-import { useKeybindy } from './useKeybindy.js';
+import { useShortcuts } from './useShortcuts.js';
 
-const KeybindyComponent = ({ scope = 'global', shortcuts: shortcutsProp = [], children, disabled, onShortcutFired, logs = false, }) => {
-    const { register, unregister, manager, pushScope, popScope, getScopes, setScope } = useKeybindy({
-        onShortcutFired,
-        logs,
-    });
-    const shortcuts = React.useMemo(() => (typeof shortcutsProp === 'function' ? shortcutsProp() : shortcutsProp) || [], [shortcutsProp]);
-    // Memoize a stable representation of shortcuts, excluding the handler.
-    // This prevents the effect from re-running unnecessarily.
-    const stableShortcuts = React.useMemo(() => {
-        return shortcuts.map(({ keys, options }) => ({ keys, options }));
-    }, [JSON.stringify(shortcuts.map(s => ({ keys: s.keys, options: s.options })))]);
-    // Use a ref to store the latest handlers, preventing re-renders from causing issues.
-    const handlersRef = React.useRef({});
-    React.useEffect(() => {
-        handlersRef.current = shortcuts.reduce((acc, { keys, handler }) => {
-            const key = JSON.stringify(keys);
-            acc[key] = handler;
-            return acc;
-        }, {});
-    });
-    React.useEffect(() => {
-        if (!manager) {
-            return;
-        }
-        if (!getScopes()?.includes(scope)) {
-            pushScope(scope);
-        }
-        setScope(scope);
-        // Register shortcuts using the stable definitions.
-        stableShortcuts.forEach(({ keys, options }) => {
-            const stableHandler = (event, state) => {
-                const key = JSON.stringify(keys);
-                const currentHandler = handlersRef.current[key];
-                if (currentHandler) {
-                    currentHandler(event, state);
-                }
-            };
-            register(keys, stableHandler, { ...options, scope });
-        });
-        if (disabled) {
-            manager.disableAll(scope);
-        }
-        else {
-            manager.enableAll(scope);
-        }
-        return () => {
-            // Unregister using the same stable definitions.
-            stableShortcuts.forEach(({ keys }) => {
-                if (Array.isArray(keys[0])) {
-                    keys.forEach(key => unregister(key, scope));
-                }
-                else {
-                    unregister(keys, scope);
-                }
-            });
-            popScope();
-        };
-    }, [scope, manager, disabled, stableShortcuts]);
+const KeybindyComponent = ({ children, shortcuts = [], ...options }) => {
+    useShortcuts(shortcuts, options);
     return jsx(Fragment, { children: children });
 };
 const Keybindy = React.memo(KeybindyComponent);

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import ShortcutManager, { Keys, ShortcutHandler, ShortcutOptions, Shortcut } from '@keybindy/core';
-export { Keys, Shortcut, ShortcutOptions } from '@keybindy/core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import ShortcutManager, { ShortcutBinding, ShortcutHandler, ShortcutOptions, ScopeMode, BeforeEachHook, AfterEachHook, Shortcut, Keys, ScopePriorityInput, HookOptions } from '@keybindy/core';
+export { AfterEachHook, BeforeEachHook, HookOptions, Key, Keys, ScopeMode, ScopePriorityInput, ScopePriorityRecord, Shortcut, ShortcutBinding, ShortcutHandler, ShortcutManagerOptions, ShortcutOptions } from '@keybindy/core';
 
 /**
  * Represents a shortcut definition for the `<Keybindy />` component.
@@ -11,7 +10,7 @@ type KeybindyShortcut = {
      * The key combination(s) to listen for.
      * Can be a single array of keys or an array of key combinations.
      */
-    keys: Keys[] | Keys[][];
+    keys: ShortcutBinding;
     /**
      * Callback function to invoke when the shortcut is triggered.
      */
@@ -23,24 +22,44 @@ type KeybindyShortcut = {
 };
 
 /**
- * Props for the `<Keybindy />` component.
+ * Options for `useShortcuts` hook.
  */
-type KeybindyProps = {
+type UseShortcutsOptions = {
     /**
      * The scope under which the shortcuts should be active.
-     * This allows managing different contexts for shortcuts.
+     * Defaults to `'global'`.
      */
     scope?: 'global' | string;
     /**
-     * An array of shortcut definitions or a function that returns an array of shortcuts.
-     * Using a function can be useful for memoizing shortcuts or defining them conditionally.
+     * Scope management mode:
+     * - `'default'`: Only shortcuts in the single active scope are enabled.
+     * - `'cascade'`: Shortcuts across all active scopes are enabled, with common shortcut collisions resolved by scope priority or stack order.
      */
-    shortcuts?: KeybindyShortcut[] | (() => KeybindyShortcut[]);
+    scopeMode?: ScopeMode;
     /**
-     * Whether the shortcuts should be disabled for this scope.
+     * Whether all shortcuts in this scope should be disabled.
      * Defaults to `false`.
      */
     disabled?: boolean;
+    /**
+     * Numeric priority weight for this scope in cascade mode.
+     * Higher numbers take precedence over lower numbers (e.g. 100 > 10 > 0).
+     */
+    priority?: number;
+    /**
+     * Whether to ignore shortcuts when typing inside an input, textarea, select, or contenteditable.
+     * Can be overridden per shortcut via `enableInInput: true` or `ignoreInputs: false`.
+     */
+    ignoreInputs?: boolean;
+    /**
+     * Guard hook that runs before any shortcut in this scope executes.
+     * Return `false` to cancel/abort execution.
+     */
+    beforeEach?: BeforeEachHook;
+    /**
+     * Interceptor hook that runs after any shortcut in this scope successfully executes.
+     */
+    afterEach?: AfterEachHook;
     /**
      * Callback function that will be called when a shortcut is fired.
      * Receives the fired shortcut info as an argument.
@@ -50,81 +69,88 @@ type KeybindyProps = {
      * Whether to enable debug logs in the console.
      */
     logs?: boolean;
+};
+/**
+ * Options for single `useShortcut` hook.
+ */
+type UseShortcutOptions = Omit<ShortcutOptions, 'scope'> & {
     /**
-     * The content that will be rendered inside the Shortcut component.
+     * The scope under which the shortcut should be active.
+     * Defaults to `'global'`.
      */
-    children?: React.ReactNode;
-};
-declare const Keybindy: React.NamedExoticComponent<KeybindyProps>;
-
-type AllowedKeys = Omit<Keys, 'Ctrl (Left)' | 'Ctrl (Right)' | 'Shift (Left)' | 'Shift (Right)' | 'Alt (Left)' | 'Alt (Right)' | 'Meta (Left)' | 'Meta (Right)'>;
-interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    scope?: 'global' | string;
+    /**
+     * Scope management mode: `'default'` | `'cascade'`.
+     */
+    scopeMode?: ScopeMode;
+    /**
+     * Whether the shortcut is disabled.
+     */
+    disabled?: boolean;
     /**
-     * Array of keys to display. Can be a single binding `['Ctrl', 'S']` or multiple bindings `[['Ctrl', 'S'], ['Cmd', 'S']]`.
+     * Numeric priority weight for this scope in cascade mode.
      */
-    keys: AllowedKeys[] | AllowedKeys[][];
+    priority?: number;
     /**
-     * Custom render function for full control over how your keys are rendered.
-     * This function receives the entire `keys` array (either `string[]` or `string[][]`)
-     * and should return the ReactNode to be displayed.
+     * Whether to ignore shortcut when typing inside an input/textarea.
      */
-    render?: (keys: AllowedKeys[] | AllowedKeys[][]) => React.ReactNode;
-}
+    ignoreInputs?: boolean;
+    /**
+     * Guard hook that runs before this shortcut executes. Return `false` to abort.
+     */
+    beforeEach?: BeforeEachHook;
+    /**
+     * Interceptor hook that runs after this shortcut executes.
+     */
+    afterEach?: AfterEachHook;
+    /**
+     * Whether to enable debug logs in the console.
+     */
+    logs?: boolean;
+};
 /**
- * ... (rest of the description) ...
- *
- * @example
- * // Default usage
- * <ShortcutLabel keys={['ctrl', 's']} />
- *
- * @example
- * // With multiple bindings
- * <ShortcutLabel keys={[['ctrl', 's'], ['meta', 's']]} />
+ * React hook to register multiple keyboard shortcuts declaratively.
+ * Safe from stale closures and re-registration flickering/blinking.
  *
- * @example
- * // With custom render prop
- * <ShortcutLabel
- *   keys={['ctrl', 'shift', 'a']}
- *   render={(keys) => {
- *     // 'keys' here will be ['ctrl', 'shift', 'a']
- *     return keys.map((key) => (
- *       <span key={key} style={{ color: '#00eaff' }}>
- *         {key.toUpperCase()}
- *       </span>
- *     ));
- *   }}
- * />
+ * @param shortcutsProp - An array of shortcut definitions or a function returning shortcuts.
+ * @param options - Scope, priority, mode, and lifecycle configuration.
+ */
+declare const useShortcuts: (shortcutsProp?: KeybindyShortcut[] | (() => KeybindyShortcut[]), options?: UseShortcutsOptions) => void;
+/**
+ * React hook to register a single keyboard shortcut.
+ * Safe from stale closures and re-registration flickering/blinking.
  *
  * @example
- * // With custom render prop for multiple bindings
- * <ShortcutLabel
- *   keys={[['ctrl', 's'], ['meta', 's']]}
- *   render={(bindings) => {
- *     // 'bindings' here will be [['ctrl', 's'], ['meta', 's']]
- *     return bindings.map((binding, bindingIndex) => (
- *       <React.Fragment key={bindingIndex}>
- *         {binding.map((key, keyIndex) => (
- *           <span key={keyIndex} style={{ fontWeight: 'bold' }}>
- *             {key}
- *           </span>
- *         ))}
- *         {bindingIndex < bindings.length - 1 && ' or '}
- *       </React.Fragment>
- *     ));
- *   }}
- * />
+ * ```tsx
+ * useShortcut(['Ctrl', 'S'], (e) => {
+ *   save(currentData);
+ * }, { preventDefault: true, scope: 'editor' });
+ * ```
  *
- * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
- * @param {string[] | string[][]} props.keys - The list of keys to display.
- * @param {Function} [props.render] - Optional custom render function for full control over how your keys are rendered.
- *
- * @returns {JSX.Element} Rendered shortcut label
+ * @param keys - Key combination (e.g. `['Ctrl', 'S']` or `[['Ctrl', 'K'], ['Meta', 'K']]`).
+ * @param handler - Callback to execute when shortcut is triggered. Always accesses fresh state without re-registering.
+ * @param options - Configuration options for scope, preventDefault, hold, repeat, etc.
+ */
+declare const useShortcut: (keys: ShortcutBinding, handler: ShortcutHandler, options?: UseShortcutOptions) => void;
+
+/**
+ * Props for the `<Keybindy />` component.
  */
-declare const ShortcutLabel: ({ keys, render, style, ...props }: ShortcutLabelProps) => react_jsx_runtime.JSX.Element;
+type KeybindyProps = UseShortcutsOptions & {
+    /**
+     * An array of shortcut definitions or a function that returns an array of shortcuts.
+     */
+    shortcuts?: KeybindyShortcut[] | (() => KeybindyShortcut[]);
+    /**
+     * Child elements to render within the Keybindy context.
+     */
+    children?: React.ReactNode;
+};
+declare const Keybindy: React.NamedExoticComponent<KeybindyProps>;
 
-type UseKeybindyReturn = {
-    register: (keys: Keys[] | Keys[][], handler: ShortcutHandler, options?: ShortcutOptions) => void;
-    unregister: (keys: Keys[], scope?: string) => void;
+type UseShortcutManagerReturn = {
+    register: (keys: ShortcutBinding, handler: ShortcutHandler, options?: ShortcutOptions) => void;
+    unregister: (keys: ShortcutBinding, scope?: string) => void;
     enable: (keys: Keys[], scope?: string) => void;
     disable: (keys: Keys[], scope?: string) => void;
     toggle: (keys: Keys[], scope?: string) => void;
@@ -138,11 +164,19 @@ type UseKeybindyReturn = {
     destroy: () => void;
     getScopeInfo: (scope?: string) => any;
     getActiveScope: () => string | undefined;
-    popScope: () => void;
+    popScope: (scope?: string) => void;
     pushScope: (scope: string) => void;
     resetScope: () => void;
     getScopes: () => string[] | undefined;
     isScopeActive: (scope: string) => boolean | undefined;
+    setScopeMode: (mode: ScopeMode) => void;
+    getScopeMode: () => ScopeMode | undefined;
+    setScopePriority: ((scope: string, priority: number) => void) & ((input: ScopePriorityInput) => void);
+    getScopePriority: (scope?: string) => number | Record<string, number> | null | undefined;
+    getScopePriorityValue: (scope: string) => number | undefined;
+    getSortedScopes: () => string[] | undefined;
+    clearScopePriority: () => void;
+    removeScopePriority: (scope: string) => void;
     onTyping: (callback: (payload: {
         key: string;
         event: KeyboardEvent;
@@ -150,22 +184,53 @@ type UseKeybindyReturn = {
     enableAll: (scope?: string) => void;
     clear: () => void;
     disableAll: (scope?: string) => void;
+    beforeEach: (hook: BeforeEachHook, options?: HookOptions) => () => void;
+    afterEach: (hook: AfterEachHook, options?: HookOptions) => () => void;
     manager: ShortcutManager | null;
 };
+type UseKeybindyReturn = UseShortcutManagerReturn;
 /**
- * React hook to manage keyboard shortcuts using a shared instance of `ShortcutManager`.
- * This hook is safe for server-side rendering (SSR) and will only initialize the manager on the client.
+ * Low-level programmatic hook to manage keyboard shortcuts and the `ShortcutManager` instance.
+ * Safe for server-side rendering (SSR) - manager initializes on client.
  *
  * @param {Object} config - Configuration object.
  * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
+ * @param {boolean} [config.ignoreInputs=false] - Global default to ignore shortcuts when typing in inputs/textareas.
  * @param {(info: Shortcut) => void} [config.onShortcutFired] - Callback for when a shortcut is fired.
+ * @param {ScopeMode} [config.scopeMode] - Initial scope mode ('default' | 'cascade').
  *
- * @returns {Object} Object containing shortcut management methods and the manager instance (null on server).
+ * @returns {UseShortcutManagerReturn} Object containing programmatic methods and manager instance.
+ */
+declare const useShortcutManager: ({ logs, ignoreInputs, onShortcutFired, scopeMode, }?: {
+    logs?: boolean;
+    ignoreInputs?: boolean;
+    onShortcutFired?: (info: Shortcut) => void;
+    scopeMode?: ScopeMode;
+}) => UseShortcutManagerReturn;
+/**
+ * @deprecated Use `useShortcutManager` for programmatic manager access or `useShortcut` / `useShortcuts` for component shortcuts.
  */
-declare const useKeybindy: ({ logs, onShortcutFired, }?: {
+declare const useKeybindy: ({ logs, ignoreInputs, onShortcutFired, scopeMode, }?: {
     logs?: boolean;
+    ignoreInputs?: boolean;
     onShortcutFired?: (info: Shortcut) => void;
-}) => UseKeybindyReturn;
+    scopeMode?: ScopeMode;
+}) => UseShortcutManagerReturn;
+/**
+ * React hook to register a guard hook before shortcuts execute.
+ * Returning `false` will cancel/abort the shortcut execution.
+ *
+ * @param hook - Guard function to run before matching shortcuts.
+ * @param options - Optional filter options (scope, keys).
+ */
+declare const useBeforeShortcut: (hook: BeforeEachHook, options?: HookOptions) => void;
+/**
+ * React hook to register an interceptor hook after shortcuts successfully execute.
+ *
+ * @param hook - Interceptor function to run after matching shortcuts.
+ * @param options - Optional filter options (scope, keys).
+ */
+declare const useAfterShortcut: (hook: AfterEachHook, options?: HookOptions) => void;
 
-export { Keybindy, ShortcutLabel, useKeybindy };
-export type { KeybindyShortcut };
+export { Keybindy, useAfterShortcut, useBeforeShortcut, useKeybindy, useShortcut, useShortcutManager, useShortcuts };
+export type { KeybindyProps, KeybindyShortcut, UseKeybindyReturn, UseShortcutManagerReturn, UseShortcutOptions, UseShortcutsOptions };

package/dist/index.js

@@ -1,3 +1,3 @@
 export { Keybindy } from './Keybindy.js';
-export { ShortcutLabel } from './ShortcutLabel.js';
-export { useKeybindy } from './useKeybindy.js';
+export { useShortcut, useShortcuts } from './useShortcuts.js';
+export { useAfterShortcut, useBeforeShortcut, useKeybindy, useShortcutManager } from './useKeybindy.js';

package/dist/useKeybindy.js

@@ -12,20 +12,27 @@ const getSharedInstance = (options) => {
     return sharedInstance;
 };
 /**
- * React hook to manage keyboard shortcuts using a shared instance of `ShortcutManager`.
- * This hook is safe for server-side rendering (SSR) and will only initialize the manager on the client.
+ * Low-level programmatic hook to manage keyboard shortcuts and the `ShortcutManager` instance.
+ * Safe for server-side rendering (SSR) - manager initializes on client.
  *
  * @param {Object} config - Configuration object.
  * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
+ * @param {boolean} [config.ignoreInputs=false] - Global default to ignore shortcuts when typing in inputs/textareas.
  * @param {(info: Shortcut) => void} [config.onShortcutFired] - Callback for when a shortcut is fired.
+ * @param {ScopeMode} [config.scopeMode] - Initial scope mode ('default' | 'cascade').
  *
- * @returns {Object} Object containing shortcut management methods and the manager instance (null on server).
+ * @returns {UseShortcutManagerReturn} Object containing programmatic methods and manager instance.
  */
-const useKeybindy = ({ logs = false, onShortcutFired, } = {}) => {
+const useShortcutManager = ({ logs = false, ignoreInputs = false, onShortcutFired, scopeMode, } = {}) => {
     const [manager, setManager] = React.useState(null);
     React.useEffect(() => {
         if (!manager) {
-            const instance = getSharedInstance({ onShortcutFired, silent: !logs });
+            const instance = getSharedInstance({
+                onShortcutFired,
+                silent: !logs,
+                ignoreInputs,
+                scopeMode,
+            });
             setManager(instance);
         }
     }, []);
@@ -116,11 +123,45 @@ const useKeybindy = ({ logs = false, onShortcutFired, } = {}) => {
     const isScopeActive = React.useCallback((scope) => {
         return manager?.isScopeActive(scope);
     }, [manager]);
+    const setScopeMode = React.useCallback((mode) => {
+        manager?.setScopeMode(mode);
+        log('Scope mode set to:', mode);
+    }, [manager]);
+    const getScopeMode = React.useCallback(() => {
+        return manager?.getScopeMode();
+    }, [manager]);
+    const setScopePriority = React.useCallback((scopeOrInput, priority) => {
+        if (typeof scopeOrInput === 'string' && typeof priority === 'number') {
+            manager?.setScopePriority(scopeOrInput, priority);
+            log(`Scope "${scopeOrInput}" priority set to:`, priority);
+        }
+        else {
+            manager?.setScopePriority(scopeOrInput);
+            log('Scope priority set');
+        }
+    }, [manager]);
+    const getScopePriority = React.useCallback((scope) => {
+        return manager?.getScopePriority(scope);
+    }, [manager]);
+    const getScopePriorityValue = React.useCallback((scope) => {
+        return manager?.getScopePriorityValue(scope);
+    }, [manager]);
+    const getSortedScopes = React.useCallback(() => {
+        return manager?.getSortedScopes();
+    }, [manager]);
+    const clearScopePriority = React.useCallback(() => {
+        manager?.clearScopePriority();
+        log('Cleared scope priority');
+    }, [manager]);
+    const removeScopePriority = React.useCallback((scope) => {
+        manager?.removeScopePriority(scope);
+        log(`Removed scope "${scope}" from priority`);
+    }, [manager]);
     const onTyping = React.useCallback((callback) => {
         manager?.onTyping(callback);
     }, [manager]);
-    const popScope = React.useCallback(() => {
-        manager?.popScope();
+    const popScope = React.useCallback((scope) => {
+        manager?.popScope(scope);
         log('Popped scope, active scope is:', manager?.getActiveScope());
     }, [manager]);
     const pushScope = React.useCallback((scope) => {
@@ -130,6 +171,12 @@ const useKeybindy = ({ logs = false, onShortcutFired, } = {}) => {
     const getScopeInfo = React.useCallback((scope) => {
         return manager?.getScopesInfo(scope);
     }, [manager]);
+    const beforeEach = React.useCallback((hook, options) => {
+        return manager?.beforeEach(hook, options) ?? (() => { });
+    }, [manager]);
+    const afterEach = React.useCallback((hook, options) => {
+        return manager?.afterEach(hook, options) ?? (() => { });
+    }, [manager]);
     const destroy = () => {
         manager?.destroy();
     };
@@ -152,12 +199,69 @@ const useKeybindy = ({ logs = false, onShortcutFired, } = {}) => {
         resetScope,
         getScopes,
         isScopeActive,
+        setScopeMode,
+        getScopeMode,
+        setScopePriority,
+        getScopePriority,
+        getScopePriorityValue,
+        getSortedScopes,
+        clearScopePriority,
+        removeScopePriority,
         onTyping,
         enableAll,
         clear,
         disableAll,
+        beforeEach,
+        afterEach,
         manager,
     };
 };
+/**
+ * @deprecated Use `useShortcutManager` for programmatic manager access or `useShortcut` / `useShortcuts` for component shortcuts.
+ */
+const useKeybindy = useShortcutManager;
+/**
+ * React hook to register a guard hook before shortcuts execute.
+ * Returning `false` will cancel/abort the shortcut execution.
+ *
+ * @param hook - Guard function to run before matching shortcuts.
+ * @param options - Optional filter options (scope, keys).
+ */
+const useBeforeShortcut = (hook, options) => {
+    const hookRef = React.useRef(hook);
+    hookRef.current = hook;
+    React.useEffect(() => {
+        const instance = getSharedInstance();
+        if (!instance)
+            return;
+        const unregister = instance.beforeEach((shortcut, event) => {
+            return hookRef.current(shortcut, event);
+        }, options);
+        return () => {
+            unregister();
+        };
+    }, [options?.scope, JSON.stringify(options?.keys)]);
+};
+/**
+ * React hook to register an interceptor hook after shortcuts successfully execute.
+ *
+ * @param hook - Interceptor function to run after matching shortcuts.
+ * @param options - Optional filter options (scope, keys).
+ */
+const useAfterShortcut = (hook, options) => {
+    const hookRef = React.useRef(hook);
+    hookRef.current = hook;
+    React.useEffect(() => {
+        const instance = getSharedInstance();
+        if (!instance)
+            return;
+        const unregister = instance.afterEach((shortcut, event) => {
+            hookRef.current(shortcut, event);
+        }, options);
+        return () => {
+            unregister();
+        };
+    }, [options?.scope, JSON.stringify(options?.keys)]);
+};
 
-export { useKeybindy };
+export { useAfterShortcut, useBeforeShortcut, useKeybindy, useShortcutManager };

package/dist/useShortcuts.js

@@ -0,0 +1,151 @@
+import React from 'react';
+import { useShortcutManager } from './useKeybindy.js';
+
+/**
+ * React hook to register multiple keyboard shortcuts declaratively.
+ * Safe from stale closures and re-registration flickering/blinking.
+ *
+ * @param shortcutsProp - An array of shortcut definitions or a function returning shortcuts.
+ * @param options - Scope, priority, mode, and lifecycle configuration.
+ */
+const useShortcuts = (shortcutsProp = [], options = {}) => {
+    const { scope = 'global', scopeMode, disabled, priority, ignoreInputs, beforeEach, afterEach, onShortcutFired, logs = false, } = options;
+    const { register, unregister, manager, pushScope, popScope, getScopes, setScope, setScopeMode, setScopePriority, removeScopePriority, } = useShortcutManager({
+        onShortcutFired,
+        logs,
+    });
+    const beforeEachRef = React.useRef(beforeEach);
+    beforeEachRef.current = beforeEach;
+    const afterEachRef = React.useRef(afterEach);
+    afterEachRef.current = afterEach;
+    // Resolve shortcuts from prop, whether array or function
+    const shortcuts = typeof shortcutsProp === 'function' ? shortcutsProp() : shortcutsProp;
+    // Keep a ref of current handlers so our stable handler closures never go stale.
+    const handlersRef = React.useRef({});
+    handlersRef.current = {};
+    shortcuts.forEach(({ keys, handler }) => {
+        handlersRef.current[JSON.stringify(keys)] = handler;
+    });
+    // Create stable shortcuts definitions containing only serializable fields (keys, options).
+    const stableShortcuts = React.useMemo(() => {
+        return shortcuts.map(({ keys, options: opt }) => ({ keys, options: opt }));
+    }, [JSON.stringify(shortcuts.map(s => ({ keys: s.keys, options: s.options })))]);
+    React.useEffect(() => {
+        if (!manager)
+            return;
+        let prevScopeMode;
+        if (scopeMode) {
+            prevScopeMode = manager.getScopeMode();
+            setScopeMode(scopeMode);
+        }
+        if (typeof priority === 'number') {
+            setScopePriority(scope, priority);
+        }
+        else {
+            if (!getScopes()?.includes(scope)) {
+                pushScope(scope);
+            }
+            setScope(scope);
+        }
+        let unregisterBefore;
+        let unregisterAfter;
+        const hookKeys = stableShortcuts.flatMap(s => Array.isArray(s.keys[0]) ? s.keys : [s.keys]);
+        if (beforeEach) {
+            unregisterBefore = manager.beforeEach((shortcut, event) => {
+                return beforeEachRef.current ? beforeEachRef.current(shortcut, event) : undefined;
+            }, { scope, keys: hookKeys.length > 0 ? hookKeys : undefined });
+        }
+        if (afterEach) {
+            unregisterAfter = manager.afterEach((shortcut, event) => {
+                if (afterEachRef.current)
+                    afterEachRef.current(shortcut, event);
+            }, { scope, keys: hookKeys.length > 0 ? hookKeys : undefined });
+        }
+        // Register shortcuts using the stable definitions.
+        stableShortcuts.forEach(({ keys, options: opt }) => {
+            const stableHandler = (event, state) => {
+                const key = JSON.stringify(keys);
+                const currentHandler = handlersRef.current[key];
+                if (currentHandler) {
+                    currentHandler(event, state);
+                }
+            };
+            register(keys, stableHandler, {
+                ...opt,
+                scope,
+                ignoreInputs: opt?.ignoreInputs ?? ignoreInputs,
+            });
+        });
+        if (disabled) {
+            manager.disableAll(scope);
+        }
+        else {
+            manager.enableAll(scope);
+        }
+        return () => {
+            if (unregisterBefore)
+                unregisterBefore();
+            if (unregisterAfter)
+                unregisterAfter();
+            // Unregister using the same stable definitions.
+            stableShortcuts.forEach(({ keys }) => {
+                unregister(keys, scope);
+            });
+            if (typeof priority === 'number') {
+                removeScopePriority(scope);
+            }
+            if (scope !== 'global') {
+                const remaining = manager.getCheatSheet(scope);
+                if (!remaining || remaining.length === 0) {
+                    popScope(scope);
+                }
+            }
+            if (scopeMode && prevScopeMode !== undefined) {
+                setScopeMode(prevScopeMode);
+            }
+        };
+    }, [scope, manager, disabled, priority, scopeMode, Boolean(beforeEach), Boolean(afterEach), stableShortcuts]);
+};
+/**
+ * React hook to register a single keyboard shortcut.
+ * Safe from stale closures and re-registration flickering/blinking.
+ *
+ * @example
+ * ```tsx
+ * useShortcut(['Ctrl', 'S'], (e) => {
+ *   save(currentData);
+ * }, { preventDefault: true, scope: 'editor' });
+ * ```
+ *
+ * @param keys - Key combination (e.g. `['Ctrl', 'S']` or `[['Ctrl', 'K'], ['Meta', 'K']]`).
+ * @param handler - Callback to execute when shortcut is triggered. Always accesses fresh state without re-registering.
+ * @param options - Configuration options for scope, preventDefault, hold, repeat, etc.
+ */
+const useShortcut = (keys, handler, options) => {
+    const { scope = 'global', scopeMode, disabled, priority, ignoreInputs, beforeEach, afterEach, logs, ...shortcutOptions } = options || {};
+    const handlerRef = React.useRef(handler);
+    handlerRef.current = handler;
+    const shortcutsGetter = React.useCallback(() => [
+        {
+            keys,
+            handler: ((e, state) => {
+                if (handlerRef.current) {
+                    handlerRef.current(e, state);
+                }
+            }),
+            options: shortcutOptions,
+        }
+    ], [JSON.stringify(keys), JSON.stringify(shortcutOptions)]);
+    useShortcuts(shortcutsGetter, {
+        scope,
+        scopeMode,
+        disabled,
+        priority,
+        ignoreInputs,
+        beforeEach,
+        afterEach,
+        logs,
+    });
+};
+
+export { useShortcut, useShortcuts };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keybindy/react",
-  "version": "1.1.12",
+  "version": "2.0.1",
   "description": "Keybindy for React: Simple, scoped keyboard shortcuts that require little setup. designed to smoothly blend in with your React applications, allowing for robust keybinding functionality without the overhead.",
   "author": {
     "name": "PRASSamin",
@@ -22,6 +22,7 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
       "import": "./dist/index.js"
     }
@@ -51,7 +52,11 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "@keybindy/core": "1.1.7"
+    "@keybindy/core": "2.0.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",

package/dist/ShortcutLabel.js

@@ -1,94 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
-
-/**
- * ... (rest of the description) ...
- *
- * @example
- * // Default usage
- * <ShortcutLabel keys={['ctrl', 's']} />
- *
- * @example
- * // With multiple bindings
- * <ShortcutLabel keys={[['ctrl', 's'], ['meta', 's']]} />
- *
- * @example
- * // With custom render prop
- * <ShortcutLabel
- *   keys={['ctrl', 'shift', 'a']}
- *   render={(keys) => {
- *     // 'keys' here will be ['ctrl', 'shift', 'a']
- *     return keys.map((key) => (
- *       <span key={key} style={{ color: '#00eaff' }}>
- *         {key.toUpperCase()}
- *       </span>
- *     ));
- *   }}
- * />
- *
- * @example
- * // With custom render prop for multiple bindings
- * <ShortcutLabel
- *   keys={[['ctrl', 's'], ['meta', 's']]}
- *   render={(bindings) => {
- *     // 'bindings' here will be [['ctrl', 's'], ['meta', 's']]
- *     return bindings.map((binding, bindingIndex) => (
- *       <React.Fragment key={bindingIndex}>
- *         {binding.map((key, keyIndex) => (
- *           <span key={keyIndex} style={{ fontWeight: 'bold' }}>
- *             {key}
- *           </span>
- *         ))}
- *         {bindingIndex < bindings.length - 1 && ' or '}
- *       </React.Fragment>
- *     ));
- *   }}
- * />
- *
- * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
- * @param {string[] | string[][]} props.keys - The list of keys to display.
- * @param {Function} [props.render] - Optional custom render function for full control over how your keys are rendered.
- *
- * @returns {JSX.Element} Rendered shortcut label
- */
-const ShortcutLabel = ({ keys, render, style, ...props }) => {
-    const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.userAgent);
-    const defaultRenderKey = (key) => {
-        switch (key.toLowerCase()) {
-            case 'meta':
-                return isMac ? '⌘' : 'Ctrl';
-            case 'ctrl':
-                return 'Ctrl';
-            case 'shift':
-                return '⇧';
-            case 'alt':
-                return isMac ? '⌥' : 'Alt';
-            case 'enter':
-                return '↵';
-            default:
-                return key.toUpperCase();
-        }
-    };
-    const renderBinding = (binding) => {
-        if (render) {
-            return render(binding);
-        }
-        return binding.map(key => defaultRenderKey(key)).join(' + ');
-    };
-    const isNestedArray = Array.isArray(keys[0]);
-    return (jsx("kbd", { style: {
-            fontFamily: 'monospace',
-            padding: '2.5px 5px',
-            border: '1px solid #cccccc2f',
-            backgroundColor: '#2e2e2e',
-            borderRadius: '4px',
-            userSelect: 'none',
-            ...style,
-        }, ...props, children: isNestedArray
-            ? render
-                ? renderBinding(keys)
-                : keys.map((binding, index) => (jsxs(React.Fragment, { children: [renderBinding(binding), index < keys.length - 1 && ' / '] }, index)))
-            : renderBinding(keys) }));
-};
-
-export { ShortcutLabel };