@keybindy/react 1.1.2 → 1.1.3

package/dist/Keybindy.js

@@ -0,0 +1,80 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { useKeybindy } from './useKeybindy.js';
+
+/**
+ * `<Keybindy />` is a React component that registers keyboard shortcuts within a given scope. It allows
+ * users to define custom shortcuts and their associated handlers, while managing scope-based shortcut behavior.
+ * The component listens for keyboard events and triggers the registered handler when the corresponding keys are pressed.
+ * It also provides an optional callback (`onShortcutFired`) to notify users when a shortcut is triggered.
+ *
+ * @component
+ *
+ * @example
+ * // Basic usage
+ * <Keybindy scope="global" shortcuts={[{ keys: ['ctrl', 's'], handler: saveDocument }]} >
+ *   <div>Content with shortcuts</div>
+ * </Keybindy>
+ *
+ * @example
+ * // With custom callback for onShortcutFired
+ * <Keybindy
+ *   scope="editor"
+ *   shortcuts={[{ keys: ['ctrl', 'e'], handler: editDocument }]}
+ *   onShortcutFired={(info) => console.log('Shortcut fired:', info)}
+ * >
+ *   <div>Editor with shortcuts</div>
+ * </Keybindy>
+ *
+ * @param {ShortcutProps} props - Props for the Shortcut component.
+ * @param {string} props.scope - The scope under which the shortcuts should be active.
+ * @param {ShortcutDefinition[]} [props.shortcuts] - An array of shortcut definitions, each containing keys, handler, and options.
+ * @param {boolean} [props.disabled=false] - Whether the shortcuts should be disabled for this scope.
+ * @param {(info: Shortcut) => void} [props.onShortcutFired] - Optional callback triggered when a shortcut is fired, providing the shortcut info.
+ * @param {React.ReactNode} props.children - The children to be rendered inside the component, which can contain any JSX elements.
+ *
+ * @returns {JSX.Element} The rendered component with registered shortcuts within the provided scope.
+ */
+const Keybindy = ({ scope = 'global', shortcuts = [], children, disabled, onShortcutFired, logs = false, }) => {
+    const { register, unregister, manager, pushScope, popScope, getScopes, setScope } = useKeybindy({
+        onShortcutFired,
+        logs,
+    });
+    const prevScope = React.useRef(null);
+    React.useEffect(() => {
+        if (!manager) {
+            return;
+        }
+        prevScope.current = manager.getActiveScope() ?? 'global';
+        // Add scope if doesn't exist
+        if (!getScopes()?.includes(scope)) {
+            pushScope(scope);
+        }
+        // Set this scope as active
+        setScope(scope);
+        // Register all shortcuts for this scope
+        shortcuts.forEach(({ keys, handler, options }) => {
+            register(keys, handler, { ...options, scope });
+        });
+        if (disabled) {
+            manager.disableAll(scope);
+        }
+        else {
+            manager.enableAll(scope);
+        }
+        return () => {
+            shortcuts.forEach(({ keys }) => {
+                if (Array.isArray(keys[0])) {
+                    keys.forEach(key => unregister(key, scope));
+                }
+                else {
+                    unregister(keys, scope);
+                }
+            });
+            popScope();
+        };
+    }, [scope, shortcuts, manager, disabled]);
+    return jsx(Fragment, { children: children });
+};
+
+export { Keybindy };

package/dist/ShortcutLabel.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+/**
+ * `<ShortcutLabel />` is a utility React component that visually renders a keyboard shortcut label.
+ *
+ * It accepts an array of keys (e.g. `["Ctrl", "S"]`) and renders a styled label using platform-aware
+ * symbols (⌘ for Mac, Ctrl for others). Users can also provide a custom render function to override
+ * the default display logic for advanced layouts or custom themes.
+ *
+ * @component
+ *
+ * @example
+ * // Default usage
+ * <ShortcutLabel keys={['ctrl', 's']} />
+ *
+ * @example
+ * // With custom renderKey
+ * <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>}
+ *     </>
+ *   )}
+ * />
+ *
+ * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
+ * @param {string[]} props.keys - The list of keys to display.
+ * @param {Function} [props.renderKey] - Optional custom render function for full control over how each key appears.
+ *
+ * @returns {JSX.Element} Rendered shortcut label
+ */
+const ShortcutLabel = ({ keys, renderKey, 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 rendered = renderKey
+        ? keys.map((key, i) => (jsx(React.Fragment, { children: renderKey(key, i, keys) }, i)))
+        : defaultRenderKey
+            ? [keys.map(key => defaultRenderKey(key)).join(' + ')]
+            : [];
+    return (jsx("kbd", { style: {
+            fontFamily: 'monospace',
+            padding: '2.5px 5px',
+            border: '1px solid #cccccc2f',
+            backgroundColor: '#2e2e2e',
+            borderRadius: '4px',
+            userSelect: 'none',
+            ...style,
+        }, ...props, children: rendered }));
+};
+
+export { ShortcutLabel };

package/dist/index.js

@@ -0,0 +1,3 @@
+export { Keybindy } from './Keybindy.js';
+export { ShortcutLabel } from './ShortcutLabel.js';
+export { useKeybindy } from './useKeybindy.js';

package/dist/useKeybindy.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import ShortcutManager from '@keybindy/core';
+
+let sharedInstance = null;
+const getSharedInstance = (options) => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    if (!sharedInstance) {
+        sharedInstance = new ShortcutManager(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.
+ *
+ * @param {Object} config - Configuration object.
+ * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
+ * @param {(info: Shortcut) => void} [config.onShortcutFired] - Callback for when a shortcut is fired.
+ *
+ * @returns {Object} Object containing shortcut management methods and the manager instance (null on server).
+ */
+const useKeybindy = ({ logs = false, onShortcutFired, } = {}) => {
+    const [manager, setManager] = React.useState(null);
+    React.useEffect(() => {
+        if (!manager) {
+            const instance = getSharedInstance({ onShortcutFired, silent: !logs });
+            setManager(instance);
+        }
+    }, []);
+    const log = (...args) => {
+        if (logs)
+            console.log('[Keybindy]', ...args);
+    };
+    const warn = (...args) => {
+        if (logs)
+            console.warn('[Keybindy]', ...args);
+    };
+    const register = React.useCallback((keys, handler, options) => {
+        if (!manager)
+            return;
+        if (keys.length === 0) {
+            warn('No keys provided to register');
+            return;
+        }
+        const id = options?.data?.id;
+        log('Registered:', id ?? keys);
+        manager.register(keys, handler, options);
+    }, [manager]);
+    const unregister = React.useCallback((keys, scope) => {
+        if (!manager)
+            return;
+        if (keys.length === 0) {
+            warn('No keys provided to unregister');
+            return;
+        }
+        manager.unregister(keys, scope);
+        log('Unregistered:', keys);
+    }, [manager]);
+    const enable = React.useCallback((keys, scope) => {
+        if (!manager)
+            return;
+        if (keys.length === 0) {
+            warn('No keys provided to enable');
+            return;
+        }
+        manager.enable(keys, scope);
+        log('Enabled:', keys);
+    }, [manager]);
+    const disable = React.useCallback((keys, scope) => {
+        if (!manager)
+            return;
+        if (keys.length === 0) {
+            warn('No keys provided to disable');
+            return;
+        }
+        manager.disable(keys, scope);
+        log('Disabled:', keys);
+    }, [manager]);
+    const toggle = React.useCallback((keys, scope) => {
+        if (!manager)
+            return;
+        if (keys.length === 0) {
+            warn('No keys provided to toggle');
+            return;
+        }
+        manager.toggle(keys, scope);
+        log('Toggled:', keys);
+    }, [manager]);
+    const getCheatSheet = React.useCallback((scope) => {
+        return manager?.getCheatSheet(scope);
+    }, [manager]);
+    const getActiveScope = React.useCallback(() => {
+        return manager?.getActiveScope();
+    }, [manager]);
+    const disableAll = React.useCallback((scope) => {
+        manager?.disableAll(scope);
+        log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ''}`);
+    }, [manager]);
+    const enableAll = React.useCallback((scope) => {
+        manager?.enableAll(scope);
+        log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ''}`);
+    }, [manager]);
+    const setScope = React.useCallback((scope) => {
+        manager?.setActiveScope(scope);
+        log('Scope set to:', scope);
+    }, [manager]);
+    const resetScope = React.useCallback(() => {
+        manager?.resetScope();
+        log('Reset scope');
+    }, [manager]);
+    const getScopes = React.useCallback(() => {
+        return manager?.getScopes();
+    }, [manager]);
+    const isScopeActive = React.useCallback((scope) => {
+        return manager?.isScopeActive(scope);
+    }, [manager]);
+    const onTyping = React.useCallback((callback) => {
+        manager?.onTyping(callback);
+    }, [manager]);
+    const popScope = React.useCallback(() => {
+        manager?.popScope();
+        log('Popped scope, active scope is:', manager?.getActiveScope());
+    }, [manager]);
+    const pushScope = React.useCallback((scope) => {
+        manager?.pushScope(scope);
+        log('Pushed scope:', scope);
+    }, [manager]);
+    const getScopeInfo = React.useCallback((scope) => {
+        return manager?.getScopesInfo(scope);
+    }, [manager]);
+    const destroy = () => {
+        manager?.destroy();
+    };
+    const clear = () => {
+        manager?.clear();
+    };
+    return {
+        register,
+        unregister,
+        enable,
+        disable,
+        toggle,
+        setScope,
+        getCheatSheet,
+        destroy,
+        getScopeInfo,
+        getActiveScope,
+        popScope,
+        pushScope,
+        resetScope,
+        getScopes,
+        isScopeActive,
+        onTyping,
+        enableAll,
+        clear,
+        disableAll,
+        manager,
+    };
+};
+
+export { useKeybindy };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keybindy/react",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "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",
@@ -51,13 +51,13 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "@keybindy/core": "1.1.2"
+    "@keybindy/core": "1.1.3"
   },
   "scripts": {
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "prebuild": "rm -rf dist",
-    "build": "tsup",
-    "dev": "tsup -w",
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
     "test": "vitest"
   }
 }

package/dist/index.cjs

@@ -1,282 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }'use client';
-
-// src/Keybindy.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-
-// src/useKeybindy.tsx
-
-var _core = require('@keybindy/core'); var _core2 = _interopRequireDefault(_core);
-var sharedInstance = null;
-var getSharedInstance = (options) => {
-  if (typeof window === "undefined") {
-    return null;
-  }
-  if (!sharedInstance) {
-    sharedInstance = new (0, _core2.default)(options);
-  }
-  return sharedInstance;
-};
-var useKeybindy = ({
-  logs = false,
-  onShortcutFired
-} = {}) => {
-  const [manager, setManager] = _react2.default.useState(null);
-  _react2.default.useEffect(() => {
-    if (!manager) {
-      const instance = getSharedInstance({ onShortcutFired, silent: !logs });
-      setManager(instance);
-    }
-  }, []);
-  const log = (...args) => {
-    if (logs) console.log("[Keybindy]", ...args);
-  };
-  const warn = (...args) => {
-    if (logs) console.warn("[Keybindy]", ...args);
-  };
-  const register = _react2.default.useCallback(
-    (keys, handler, options) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to register");
-        return;
-      }
-      const id = _optionalChain([options, 'optionalAccess', _ => _.data, 'optionalAccess', _2 => _2.id]);
-      log("Registered:", _nullishCoalesce(id, () => ( keys)));
-      manager.register(keys, handler, options);
-    },
-    [manager]
-  );
-  const unregister = _react2.default.useCallback(
-    (keys, scope) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to unregister");
-        return;
-      }
-      manager.unregister(keys, scope);
-      log("Unregistered:", keys);
-    },
-    [manager]
-  );
-  const enable = _react2.default.useCallback(
-    (keys, scope) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to enable");
-        return;
-      }
-      manager.enable(keys, scope);
-      log("Enabled:", keys);
-    },
-    [manager]
-  );
-  const disable = _react2.default.useCallback(
-    (keys, scope) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to disable");
-        return;
-      }
-      manager.disable(keys, scope);
-      log("Disabled:", keys);
-    },
-    [manager]
-  );
-  const toggle = _react2.default.useCallback(
-    (keys, scope) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to toggle");
-        return;
-      }
-      manager.toggle(keys, scope);
-      log("Toggled:", keys);
-    },
-    [manager]
-  );
-  const getCheatSheet = _react2.default.useCallback(
-    (scope) => {
-      return _optionalChain([manager, 'optionalAccess', _3 => _3.getCheatSheet, 'call', _4 => _4(scope)]);
-    },
-    [manager]
-  );
-  const getActiveScope = _react2.default.useCallback(() => {
-    return _optionalChain([manager, 'optionalAccess', _5 => _5.getActiveScope, 'call', _6 => _6()]);
-  }, [manager]);
-  const disableAll = _react2.default.useCallback(
-    (scope) => {
-      _optionalChain([manager, 'optionalAccess', _7 => _7.disableAll, 'call', _8 => _8(scope)]);
-      log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
-    },
-    [manager]
-  );
-  const enableAll = _react2.default.useCallback(
-    (scope) => {
-      _optionalChain([manager, 'optionalAccess', _9 => _9.enableAll, 'call', _10 => _10(scope)]);
-      log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
-    },
-    [manager]
-  );
-  const setScope = _react2.default.useCallback(
-    (scope) => {
-      _optionalChain([manager, 'optionalAccess', _11 => _11.setActiveScope, 'call', _12 => _12(scope)]);
-      log("Scope set to:", scope);
-    },
-    [manager]
-  );
-  const resetScope = _react2.default.useCallback(() => {
-    _optionalChain([manager, 'optionalAccess', _13 => _13.resetScope, 'call', _14 => _14()]);
-    log("Reset scope");
-  }, [manager]);
-  const getScopes = _react2.default.useCallback(() => {
-    return _optionalChain([manager, 'optionalAccess', _15 => _15.getScopes, 'call', _16 => _16()]);
-  }, [manager]);
-  const isScopeActive = _react2.default.useCallback(
-    (scope) => {
-      return _optionalChain([manager, 'optionalAccess', _17 => _17.isScopeActive, 'call', _18 => _18(scope)]);
-    },
-    [manager]
-  );
-  const onTyping = _react2.default.useCallback(
-    (callback) => {
-      _optionalChain([manager, 'optionalAccess', _19 => _19.onTyping, 'call', _20 => _20(callback)]);
-    },
-    [manager]
-  );
-  const popScope = _react2.default.useCallback(() => {
-    _optionalChain([manager, 'optionalAccess', _21 => _21.popScope, 'call', _22 => _22()]);
-    log("Popped scope, active scope is:", _optionalChain([manager, 'optionalAccess', _23 => _23.getActiveScope, 'call', _24 => _24()]));
-  }, [manager]);
-  const pushScope = _react2.default.useCallback(
-    (scope) => {
-      _optionalChain([manager, 'optionalAccess', _25 => _25.pushScope, 'call', _26 => _26(scope)]);
-      log("Pushed scope:", scope);
-    },
-    [manager]
-  );
-  const getScopeInfo = _react2.default.useCallback(
-    (scope) => {
-      return _optionalChain([manager, 'optionalAccess', _27 => _27.getScopesInfo, 'call', _28 => _28(scope)]);
-    },
-    [manager]
-  );
-  const destroy = () => {
-    _optionalChain([manager, 'optionalAccess', _29 => _29.destroy, 'call', _30 => _30()]);
-  };
-  const clear = () => {
-    _optionalChain([manager, 'optionalAccess', _31 => _31.clear, 'call', _32 => _32()]);
-  };
-  return {
-    register,
-    unregister,
-    enable,
-    disable,
-    toggle,
-    setScope,
-    getCheatSheet,
-    destroy,
-    getScopeInfo,
-    getActiveScope,
-    popScope,
-    pushScope,
-    resetScope,
-    getScopes,
-    isScopeActive,
-    onTyping,
-    enableAll,
-    clear,
-    disableAll,
-    manager
-  };
-};
-
-// src/Keybindy.tsx
-var _jsxruntime = require('react/jsx-runtime');
-var Keybindy = ({
-  scope = "global",
-  shortcuts = [],
-  children,
-  disabled,
-  onShortcutFired,
-  logs = false
-}) => {
-  const { register, unregister, manager, pushScope, popScope, getScopes, setScope } = useKeybindy({
-    onShortcutFired,
-    logs
-  });
-  const prevScope = _react2.default.useRef(null);
-  _react2.default.useEffect(() => {
-    if (!manager) {
-      return;
-    }
-    prevScope.current = _nullishCoalesce(manager.getActiveScope(), () => ( "global"));
-    if (!_optionalChain([getScopes, 'call', _33 => _33(), 'optionalAccess', _34 => _34.includes, 'call', _35 => _35(scope)])) {
-      pushScope(scope);
-    }
-    setScope(scope);
-    shortcuts.forEach(({ keys, handler, options }) => {
-      register(keys, handler, { ...options, scope });
-    });
-    if (disabled) {
-      manager.disableAll(scope);
-    } else {
-      manager.enableAll(scope);
-    }
-    return () => {
-      shortcuts.forEach(({ keys }) => {
-        if (Array.isArray(keys[0])) {
-          keys.forEach((key) => unregister(key, scope));
-        } else {
-          unregister(keys, scope);
-        }
-      });
-      popScope();
-    };
-  }, [scope, shortcuts, manager, disabled]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
-};
-
-// src/ShortcutLabel.tsx
-
-
-var ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
-  const isMac = typeof navigator !== "undefined" && /Mac/.test(navigator.userAgent);
-  const defaultRenderKey = (key) => {
-    switch (key.toLowerCase()) {
-      case "meta":
-        return isMac ? "\u2318" : "Ctrl";
-      case "ctrl":
-        return "Ctrl";
-      case "shift":
-        return "\u21E7";
-      case "alt":
-        return isMac ? "\u2325" : "Alt";
-      case "enter":
-        return "\u21B5";
-      default:
-        return key.toUpperCase();
-    }
-  };
-  const rendered = renderKey ? keys.map((key, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.default.Fragment, { children: renderKey(key, i, keys) }, i)) : defaultRenderKey ? [keys.map((key) => defaultRenderKey(key)).join(" + ")] : [];
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "kbd",
-    {
-      style: {
-        fontFamily: "monospace",
-        padding: "2.5px 5px",
-        border: "1px solid #cccccc2f",
-        backgroundColor: "#2e2e2e",
-        borderRadius: "4px",
-        userSelect: "none",
-        ...style
-      },
-      ...props,
-      children: rendered
-    }
-  );
-};
-
-
-
-
-exports.Keybindy = Keybindy; exports.ShortcutLabel = ShortcutLabel; exports.useKeybindy = useKeybindy;

package/dist/index.d.cts

@@ -1,188 +0,0 @@
-import React from 'react';
-import ShortcutManager, { Keys, ShortcutHandler, HoldShortcutHandler, ShortcutOptions, Shortcut } from '@keybindy/core';
-export { KeyBinding, Keys, Shortcut, ShortcutHandler, ShortcutOptions } from '@keybindy/core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-/**
- * Represents a keyboard shortcut definition.
- */
-type ShortcutDefinition = {
-    /**
-     * The key combination(s) to listen for.
-     * Can be a single array of keys or an array of key combinations.
-     */
-    keys: Keys[] | Keys[][];
-    /**
-     * Callback function to invoke when the shortcut is triggered.
-     */
-    handler: ShortcutHandler | HoldShortcutHandler;
-    /**
-     * Optional configuration, including scope and other metadata.
-     */
-    options?: Omit<ShortcutOptions, 'scope'>;
-};
-/**
- * Props for the `<Keybindy />` component.
- */
-type KeybindyProps = {
-    /**
-     * The scope under which the shortcuts should be active.
-     * This allows managing different contexts for shortcuts.
-     */
-    scope?: 'global' | string;
-    /**
-     * Array of shortcut definitions to register for this scope.
-     */
-    shortcuts?: ShortcutDefinition[];
-    /**
-     * Whether the shortcuts should be disabled for this scope.
-     * Defaults to `false`.
-     */
-    disabled?: boolean;
-    /**
-     * Callback function that will be called when a shortcut is fired.
-     * Receives the fired shortcut info as an argument.
-     */
-    onShortcutFired?: (info: Shortcut) => void;
-    /**
-     * Whether to enable debug logs in the console.
-     */
-    logs?: boolean;
-    /**
-     * The content that will be rendered inside the Shortcut component.
-     */
-    children?: React.ReactNode;
-};
-/**
- * `<Keybindy />` is a React component that registers keyboard shortcuts within a given scope. It allows
- * users to define custom shortcuts and their associated handlers, while managing scope-based shortcut behavior.
- * The component listens for keyboard events and triggers the registered handler when the corresponding keys are pressed.
- * It also provides an optional callback (`onShortcutFired`) to notify users when a shortcut is triggered.
- *
- * @component
- *
- * @example
- * // Basic usage
- * <Keybindy scope="global" shortcuts={[{ keys: ['ctrl', 's'], handler: saveDocument }]} >
- *   <div>Content with shortcuts</div>
- * </Keybindy>
- *
- * @example
- * // With custom callback for onShortcutFired
- * <Keybindy
- *   scope="editor"
- *   shortcuts={[{ keys: ['ctrl', 'e'], handler: editDocument }]}
- *   onShortcutFired={(info) => console.log('Shortcut fired:', info)}
- * >
- *   <div>Editor with shortcuts</div>
- * </Keybindy>
- *
- * @param {ShortcutProps} props - Props for the Shortcut component.
- * @param {string} props.scope - The scope under which the shortcuts should be active.
- * @param {ShortcutDefinition[]} [props.shortcuts] - An array of shortcut definitions, each containing keys, handler, and options.
- * @param {boolean} [props.disabled=false] - Whether the shortcuts should be disabled for this scope.
- * @param {(info: Shortcut) => void} [props.onShortcutFired] - Optional callback triggered when a shortcut is fired, providing the shortcut info.
- * @param {React.ReactNode} props.children - The children to be rendered inside the component, which can contain any JSX elements.
- *
- * @returns {JSX.Element} The rendered component with registered shortcuts within the provided scope.
- */
-declare const Keybindy: React.FC<KeybindyProps>;
-
-interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
-    /**
-     * Array of keys to display
-     */
-    keys: Omit<Keys, 'Ctrl (Left)' | 'Ctrl (Right)' | 'Shift (Left)' | 'Shift (Right)' | 'Alt (Left)' | 'Alt (Right)' | 'Meta (Left)' | 'Meta (Right)'>[];
-    /**
-     * Custom render function for each key
-     */
-    renderKey?: (
-    /**
-     * The key to render
-     */
-    key: string, 
-    /**
-     * The index of the key in the array
-     */
-    index: number, 
-    /**
-     * All keys in the array
-     */
-    allKeys: string[]) => React.ReactNode;
-}
-/**
- * `<ShortcutLabel />` is a utility React component that visually renders a keyboard shortcut label.
- *
- * It accepts an array of keys (e.g. `["Ctrl", "S"]`) and renders a styled label using platform-aware
- * symbols (⌘ for Mac, Ctrl for others). Users can also provide a custom render function to override
- * the default display logic for advanced layouts or custom themes.
- *
- * @component
- *
- * @example
- * // Default usage
- * <ShortcutLabel keys={['ctrl', 's']} />
- *
- * @example
- * // With custom renderKey
- * <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>}
- *     </>
- *   )}
- * />
- *
- * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
- * @param {string[]} props.keys - The list of keys to display.
- * @param {Function} [props.renderKey] - Optional custom render function for full control over how each key appears.
- *
- * @returns {JSX.Element} Rendered shortcut label
- */
-declare const ShortcutLabel: ({ keys, renderKey, style, ...props }: ShortcutLabelProps) => react_jsx_runtime.JSX.Element;
-
-type UseKeybindyReturn = {
-    register: (keys: Keys[] | Keys[][], handler: ShortcutHandler | HoldShortcutHandler, options?: ShortcutOptions) => void;
-    unregister: (keys: Keys[], scope?: string) => void;
-    enable: (keys: Keys[], scope?: string) => void;
-    disable: (keys: Keys[], scope?: string) => void;
-    toggle: (keys: Keys[], scope?: string) => void;
-    setScope: (scope: string) => void;
-    getCheatSheet: (scope?: string) => {
-        keys: string[];
-    }[] | undefined;
-    destroy: () => void;
-    getScopeInfo: (scope?: string) => any;
-    getActiveScope: () => string | undefined;
-    popScope: () => void;
-    pushScope: (scope: string) => void;
-    resetScope: () => void;
-    getScopes: () => string[] | undefined;
-    isScopeActive: (scope: string) => boolean | undefined;
-    onTyping: (callback: (payload: {
-        key: string;
-        event: KeyboardEvent;
-    }) => void) => void;
-    enableAll: (scope?: string) => void;
-    clear: () => void;
-    disableAll: (scope?: string) => void;
-    manager: ShortcutManager | null;
-};
-/**
- * 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.
- *
- * @param {Object} config - Configuration object.
- * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
- * @param {(info: Shortcut) => void} [config.onShortcutFired] - Callback for when a shortcut is fired.
- *
- * @returns {Object} Object containing shortcut management methods and the manager instance (null on server).
- */
-declare const useKeybindy: ({ logs, onShortcutFired, }?: {
-    logs?: boolean;
-    onShortcutFired?: (info: Shortcut) => void;
-}) => UseKeybindyReturn;
-
-export { Keybindy, ShortcutLabel, useKeybindy };

package/dist/index.mjs

@@ -1,282 +0,0 @@
-'use client';
-
-// src/Keybindy.tsx
-import React2 from "react";
-
-// src/useKeybindy.tsx
-import React from "react";
-import ShortcutManager from "@keybindy/core";
-var sharedInstance = null;
-var getSharedInstance = (options) => {
-  if (typeof window === "undefined") {
-    return null;
-  }
-  if (!sharedInstance) {
-    sharedInstance = new ShortcutManager(options);
-  }
-  return sharedInstance;
-};
-var useKeybindy = ({
-  logs = false,
-  onShortcutFired
-} = {}) => {
-  const [manager, setManager] = React.useState(null);
-  React.useEffect(() => {
-    if (!manager) {
-      const instance = getSharedInstance({ onShortcutFired, silent: !logs });
-      setManager(instance);
-    }
-  }, []);
-  const log = (...args) => {
-    if (logs) console.log("[Keybindy]", ...args);
-  };
-  const warn = (...args) => {
-    if (logs) console.warn("[Keybindy]", ...args);
-  };
-  const register = React.useCallback(
-    (keys, handler, options) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to register");
-        return;
-      }
-      const id = options?.data?.id;
-      log("Registered:", id ?? keys);
-      manager.register(keys, handler, options);
-    },
-    [manager]
-  );
-  const unregister = React.useCallback(
-    (keys, scope) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to unregister");
-        return;
-      }
-      manager.unregister(keys, scope);
-      log("Unregistered:", keys);
-    },
-    [manager]
-  );
-  const enable = React.useCallback(
-    (keys, scope) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to enable");
-        return;
-      }
-      manager.enable(keys, scope);
-      log("Enabled:", keys);
-    },
-    [manager]
-  );
-  const disable = React.useCallback(
-    (keys, scope) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to disable");
-        return;
-      }
-      manager.disable(keys, scope);
-      log("Disabled:", keys);
-    },
-    [manager]
-  );
-  const toggle = React.useCallback(
-    (keys, scope) => {
-      if (!manager) return;
-      if (keys.length === 0) {
-        warn("No keys provided to toggle");
-        return;
-      }
-      manager.toggle(keys, scope);
-      log("Toggled:", keys);
-    },
-    [manager]
-  );
-  const getCheatSheet = React.useCallback(
-    (scope) => {
-      return manager?.getCheatSheet(scope);
-    },
-    [manager]
-  );
-  const getActiveScope = React.useCallback(() => {
-    return manager?.getActiveScope();
-  }, [manager]);
-  const disableAll = React.useCallback(
-    (scope) => {
-      manager?.disableAll(scope);
-      log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
-    },
-    [manager]
-  );
-  const enableAll = React.useCallback(
-    (scope) => {
-      manager?.enableAll(scope);
-      log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
-    },
-    [manager]
-  );
-  const setScope = React.useCallback(
-    (scope) => {
-      manager?.setActiveScope(scope);
-      log("Scope set to:", scope);
-    },
-    [manager]
-  );
-  const resetScope = React.useCallback(() => {
-    manager?.resetScope();
-    log("Reset scope");
-  }, [manager]);
-  const getScopes = React.useCallback(() => {
-    return manager?.getScopes();
-  }, [manager]);
-  const isScopeActive = React.useCallback(
-    (scope) => {
-      return manager?.isScopeActive(scope);
-    },
-    [manager]
-  );
-  const onTyping = React.useCallback(
-    (callback) => {
-      manager?.onTyping(callback);
-    },
-    [manager]
-  );
-  const popScope = React.useCallback(() => {
-    manager?.popScope();
-    log("Popped scope, active scope is:", manager?.getActiveScope());
-  }, [manager]);
-  const pushScope = React.useCallback(
-    (scope) => {
-      manager?.pushScope(scope);
-      log("Pushed scope:", scope);
-    },
-    [manager]
-  );
-  const getScopeInfo = React.useCallback(
-    (scope) => {
-      return manager?.getScopesInfo(scope);
-    },
-    [manager]
-  );
-  const destroy = () => {
-    manager?.destroy();
-  };
-  const clear = () => {
-    manager?.clear();
-  };
-  return {
-    register,
-    unregister,
-    enable,
-    disable,
-    toggle,
-    setScope,
-    getCheatSheet,
-    destroy,
-    getScopeInfo,
-    getActiveScope,
-    popScope,
-    pushScope,
-    resetScope,
-    getScopes,
-    isScopeActive,
-    onTyping,
-    enableAll,
-    clear,
-    disableAll,
-    manager
-  };
-};
-
-// src/Keybindy.tsx
-import { Fragment, jsx } from "react/jsx-runtime";
-var Keybindy = ({
-  scope = "global",
-  shortcuts = [],
-  children,
-  disabled,
-  onShortcutFired,
-  logs = false
-}) => {
-  const { register, unregister, manager, pushScope, popScope, getScopes, setScope } = useKeybindy({
-    onShortcutFired,
-    logs
-  });
-  const prevScope = React2.useRef(null);
-  React2.useEffect(() => {
-    if (!manager) {
-      return;
-    }
-    prevScope.current = manager.getActiveScope() ?? "global";
-    if (!getScopes()?.includes(scope)) {
-      pushScope(scope);
-    }
-    setScope(scope);
-    shortcuts.forEach(({ keys, handler, options }) => {
-      register(keys, handler, { ...options, scope });
-    });
-    if (disabled) {
-      manager.disableAll(scope);
-    } else {
-      manager.enableAll(scope);
-    }
-    return () => {
-      shortcuts.forEach(({ keys }) => {
-        if (Array.isArray(keys[0])) {
-          keys.forEach((key) => unregister(key, scope));
-        } else {
-          unregister(keys, scope);
-        }
-      });
-      popScope();
-    };
-  }, [scope, shortcuts, manager, disabled]);
-  return /* @__PURE__ */ jsx(Fragment, { children });
-};
-
-// src/ShortcutLabel.tsx
-import React3 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
-  const isMac = typeof navigator !== "undefined" && /Mac/.test(navigator.userAgent);
-  const defaultRenderKey = (key) => {
-    switch (key.toLowerCase()) {
-      case "meta":
-        return isMac ? "\u2318" : "Ctrl";
-      case "ctrl":
-        return "Ctrl";
-      case "shift":
-        return "\u21E7";
-      case "alt":
-        return isMac ? "\u2325" : "Alt";
-      case "enter":
-        return "\u21B5";
-      default:
-        return key.toUpperCase();
-    }
-  };
-  const rendered = renderKey ? keys.map((key, i) => /* @__PURE__ */ jsx2(React3.Fragment, { children: renderKey(key, i, keys) }, i)) : defaultRenderKey ? [keys.map((key) => defaultRenderKey(key)).join(" + ")] : [];
-  return /* @__PURE__ */ jsx2(
-    "kbd",
-    {
-      style: {
-        fontFamily: "monospace",
-        padding: "2.5px 5px",
-        border: "1px solid #cccccc2f",
-        backgroundColor: "#2e2e2e",
-        borderRadius: "4px",
-        userSelect: "none",
-        ...style
-      },
-      ...props,
-      children: rendered
-    }
-  );
-};
-export {
-  Keybindy,
-  ShortcutLabel,
-  useKeybindy
-};