@keybindy/react 1.0.2 → 1.1.0

package/dist/index.cjs

@@ -0,0 +1,232 @@
+"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 useKeybindy = ({
+  logs = false,
+  onShortcutFired
+} = {}) => {
+  const managerRef = _react2.default.useRef(null);
+  const registeredIds = _react2.default.useRef(/* @__PURE__ */ new Set());
+  if (!sharedInstance) {
+    sharedInstance = new (0, _core2.default)({ onShortcutFired, silent: !logs });
+  }
+  if (!managerRef.current) {
+    managerRef.current = sharedInstance;
+  }
+  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 (keys.length === 0) {
+        warn("No keys provided to register");
+        return;
+      }
+      const id = _optionalChain([options, 'optionalAccess', _ => _.data, 'optionalAccess', _2 => _2.id]);
+      if (id) registeredIds.current.add(id);
+      log("Registered:", _nullishCoalesce(id, () => ( keys)));
+      _optionalChain([managerRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.register, 'call', _5 => _5(keys, handler, options)]);
+    },
+    []
+  );
+  const unregister = _react2.default.useCallback((keys, scope) => {
+    if (keys.length === 0) {
+      warn("No keys provided to unregister");
+      return;
+    }
+    _optionalChain([managerRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.unregister, 'call', _8 => _8(keys, scope)]);
+    log("Unregistered:", keys);
+  }, []);
+  const enable = _react2.default.useCallback((keys, scope) => {
+    if (keys.length === 0) {
+      warn("No keys provided to enable");
+      return;
+    }
+    _optionalChain([managerRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.enable, 'call', _11 => _11(keys, scope)]);
+    log("Enabled:", keys);
+  }, []);
+  const disable = _react2.default.useCallback((keys, scope) => {
+    if (keys.length === 0) {
+      warn("No keys provided to disable");
+      return;
+    }
+    _optionalChain([managerRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.disable, 'call', _14 => _14(keys, scope)]);
+    log("Disabled:", keys);
+  }, []);
+  const toggle = _react2.default.useCallback((keys, scope) => {
+    if (keys.length === 0) {
+      warn("No keys provided to toggle");
+      return;
+    }
+    _optionalChain([managerRef, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.toggle, 'call', _17 => _17(keys, scope)]);
+    log("Toggled:", keys);
+  }, []);
+  const getCheatSheet = _react2.default.useCallback((scope) => {
+    return _optionalChain([managerRef, 'access', _18 => _18.current, 'optionalAccess', _19 => _19.getCheatSheet, 'call', _20 => _20(scope)]);
+  }, []);
+  const getActiveScope = _react2.default.useCallback(() => {
+    return _nullishCoalesce(_optionalChain([managerRef, 'access', _21 => _21.current, 'optionalAccess', _22 => _22.getActiveScope, 'call', _23 => _23()]), () => ( ""));
+  }, []);
+  const disableAll = _react2.default.useCallback((scope) => {
+    _optionalChain([managerRef, 'access', _24 => _24.current, 'optionalAccess', _25 => _25.disableAll, 'call', _26 => _26(scope)]);
+    log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
+  }, []);
+  const enableAll = _react2.default.useCallback((scope) => {
+    _optionalChain([managerRef, 'access', _27 => _27.current, 'optionalAccess', _28 => _28.enableAll, 'call', _29 => _29(scope)]);
+    log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
+  }, []);
+  const setScope = _react2.default.useCallback((scope) => {
+    _optionalChain([managerRef, 'access', _30 => _30.current, 'optionalAccess', _31 => _31.setActiveScope, 'call', _32 => _32(scope)]);
+    log("Scope set to:", scope);
+  }, []);
+  const resetScope = _react2.default.useCallback(() => {
+    _optionalChain([managerRef, 'access', _33 => _33.current, 'optionalAccess', _34 => _34.resetScope, 'call', _35 => _35()]);
+    log("Reset scope");
+  }, []);
+  const getScopes = _react2.default.useCallback(() => {
+    return _nullishCoalesce(_optionalChain([managerRef, 'access', _36 => _36.current, 'optionalAccess', _37 => _37.getScopes, 'call', _38 => _38()]), () => ( []));
+  }, []);
+  const isScopeActive = _react2.default.useCallback((scope) => {
+    return _optionalChain([managerRef, 'access', _39 => _39.current, 'optionalAccess', _40 => _40.isScopeActive, 'call', _41 => _41(scope)]);
+  }, []);
+  const onTyping = _react2.default.useCallback(
+    (callback) => {
+      _optionalChain([managerRef, 'access', _42 => _42.current, 'optionalAccess', _43 => _43.onTyping, 'call', _44 => _44(callback)]);
+    },
+    []
+  );
+  const popScope = _react2.default.useCallback(() => {
+    _optionalChain([managerRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.popScope, 'call', _47 => _47()]);
+    log("Popped scope, active scope is:", _optionalChain([managerRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.getActiveScope, 'call', _50 => _50()]));
+  }, []);
+  const pushScope = _react2.default.useCallback((scope) => {
+    _optionalChain([managerRef, 'access', _51 => _51.current, 'optionalAccess', _52 => _52.pushScope, 'call', _53 => _53(scope)]);
+    log("Pushed scope:", scope);
+  }, []);
+  const getScopeInfo = _react2.default.useCallback((scope) => {
+    return _optionalChain([managerRef, 'access', _54 => _54.current, 'optionalAccess', _55 => _55.getScopesInfo, 'call', _56 => _56(scope)]);
+  }, []);
+  const destroy = () => {
+    _optionalChain([managerRef, 'access', _57 => _57.current, 'optionalAccess', _58 => _58.destroy, 'call', _59 => _59()]);
+  };
+  const clear = () => {
+    _optionalChain([managerRef, 'access', _60 => _60.current, 'optionalAccess', _61 => _61.clear, 'call', _62 => _62()]);
+  };
+  return {
+    register,
+    unregister,
+    enable,
+    disable,
+    toggle,
+    setScope,
+    getCheatSheet,
+    destroy,
+    getScopeInfo,
+    getActiveScope,
+    popScope,
+    pushScope,
+    resetScope,
+    getScopes,
+    isScopeActive,
+    onTyping,
+    enableAll,
+    clear,
+    disableAll,
+    manager: managerRef.current
+  };
+};
+
+// 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(() => {
+    prevScope.current = manager.getActiveScope();
+    if (!_optionalChain([getScopes, 'call', _63 => _63(), 'optionalAccess', _64 => _64.includes, 'call', _65 => _65(scope)])) {
+      pushScope(scope);
+    }
+    setScope(scope);
+    shortcuts.forEach(({ keys, handler, options }) => {
+      register(keys, handler, { ...options, scope });
+    });
+    if (disabled) {
+      manager.disableAll(scope);
+    }
+    return () => {
+      shortcuts.forEach(({ keys }) => {
+        if (Array.isArray(keys[0])) {
+          keys.forEach((key) => unregister(key, scope));
+        } else {
+          unregister(keys, scope);
+        }
+      });
+      popScope();
+    };
+  }, [scope, JSON.stringify(shortcuts)]);
+  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/package.json

@@ -1,30 +1,29 @@
 {
   "name": "@keybindy/react",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "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",
-    "url": "https://github.com/prasssamin"
+    "url": "https://github.com/prassamin"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/keybindy/react.git"
+    "url": "git+https://github.com/keybindyjs/keybindy.git"
   },
-  "homepage": "https://github.com/keybindy/react",
+  "homepage": "https://github.com/keybindyjs/keybindy",
   "bugs": {
-    "url": "https://github.com/keybindy/react/issues"
+    "url": "https://github.com/keybindyjs/keybindy/issues"
   },
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
     }
   },
   "files": [
@@ -45,28 +44,22 @@
     "react",
     "shortcut-engine"
   ],
-  "scripts": {
-    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
-    "publish": "npm publish --access public",
-    "prebuild": "rm -rf dist",
-    "build": "rollup -c",
-    "dev": "rollup -c -w"
-  },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "@types/bun": "latest",
     "@types/react": "^19.1.2",
-    "prettier": "^3.5.3",
-    "rollup-plugin-dts": "^6.2.1",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "@keybindy/core": "^1.0.2",
-    "react": "^19.1.0"
+    "react": "^19.1.0",
+    "@keybindy/core": "1.1.0"
+  },
+  "scripts": {
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "prebuild": "rm -rf dist",
+    "build": "tsup",
+    "dev": "tsup -w",
+    "test": "vitest"
   }
-}
+}

package/dist/Keybindy.d.ts

@@ -1,87 +0,0 @@
-import React from 'react';
-import type { Keys, Shortcut as ShortcutType, ShortcutHandler, ShortcutOptions } from '@keybindy/core';
-/**
- * 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;
-    /**
-     * 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: ShortcutType) => 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.
- */
-export declare const Keybindy: React.FC<KeybindyProps>;
-export {};

package/dist/Keybindy.js

@@ -1,74 +0,0 @@
-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(() => {
-        prevScope.current = manager.getActiveScope();
-        // 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);
-        }
-        return () => {
-            shortcuts.forEach(({ keys }) => {
-                if (Array.isArray(keys[0])) {
-                    keys.forEach(key => unregister(key, scope));
-                }
-                else {
-                    unregister(keys, scope);
-                }
-            });
-            popScope();
-        };
-    }, [scope, JSON.stringify(shortcuts)]);
-    return jsx(Fragment, { children: children });
-};
-
-export { Keybindy };

package/dist/ShortcutLabel.d.ts

@@ -1,57 +0,0 @@
-import type { Keys } from '@keybindy/core';
-import React from 'react';
-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
- */
-export declare const ShortcutLabel: ({ keys, renderKey, style, ...props }: ShortcutLabelProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/ShortcutLabel.js

@@ -1,69 +0,0 @@
-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.d.ts

@@ -1,202 +0,0 @@
-import React from 'react';
-import ShortcutManager, { Keys, ShortcutHandler, 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;
-    /**
-     * 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, 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;
-    popScope: () => void;
-    pushScope: (scope: string) => void;
-    resetScope: () => void;
-    getScopes: () => string[];
-    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;
-};
-/**
- * React hook to manage keyboard shortcuts using a shared instance of `ShortcutManager`.
- * Automatically cleans up shortcuts registered by the component on unmount.
- *
- * @param {Object} config - Configuration object.
- * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
- *
- * @returns {Object} Object containing shortcut management methods.
- *
- * @example
- * const {
- *   register,
- *   setScope,
- *   getCheatSheet,
- * } = useKeybindy({ logs: true });
- *
- * useEffect(() => {
- *   register(['ctrl', 's'], () => save(), {
- *     scope: 'editor',
- *     data: { description: 'Save document' }
- *   });
- *   setScope('editor');
- * }, []);
- */
-declare const useKeybindy: ({ logs, onShortcutFired, }?: {
-    logs?: boolean;
-    onShortcutFired?: (info: Shortcut) => void;
-}) => UseKeybindyReturn;
-
-export { Keybindy, ShortcutLabel, useKeybindy };

package/dist/index.js

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

package/dist/useKeybindy.d.ts

@@ -1,58 +0,0 @@
-import ShortcutManager from '@keybindy/core';
-import type { Keys, Shortcut, ShortcutHandler, ShortcutOptions } from '@keybindy/core';
-type UseKeybindyReturn = {
-    register: (keys: Keys[] | Keys[][], handler: ShortcutHandler, 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;
-    popScope: () => void;
-    pushScope: (scope: string) => void;
-    resetScope: () => void;
-    getScopes: () => string[];
-    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;
-};
-/**
- * React hook to manage keyboard shortcuts using a shared instance of `ShortcutManager`.
- * Automatically cleans up shortcuts registered by the component on unmount.
- *
- * @param {Object} config - Configuration object.
- * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
- *
- * @returns {Object} Object containing shortcut management methods.
- *
- * @example
- * const {
- *   register,
- *   setScope,
- *   getCheatSheet,
- * } = useKeybindy({ logs: true });
- *
- * useEffect(() => {
- *   register(['ctrl', 's'], () => save(), {
- *     scope: 'editor',
- *     data: { description: 'Save document' }
- *   });
- *   setScope('editor');
- * }, []);
- */
-export declare const useKeybindy: ({ logs, onShortcutFired, }?: {
-    logs?: boolean;
-    onShortcutFired?: (info: Shortcut) => void;
-}) => UseKeybindyReturn;
-export {};

package/dist/useKeybindy.js

@@ -1,253 +0,0 @@
-import React from 'react';
-import ShortcutManager from '@keybindy/core';
-
-let sharedInstance = null;
-/**
- * React hook to manage keyboard shortcuts using a shared instance of `ShortcutManager`.
- * Automatically cleans up shortcuts registered by the component on unmount.
- *
- * @param {Object} config - Configuration object.
- * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
- *
- * @returns {Object} Object containing shortcut management methods.
- *
- * @example
- * const {
- *   register,
- *   setScope,
- *   getCheatSheet,
- * } = useKeybindy({ logs: true });
- *
- * useEffect(() => {
- *   register(['ctrl', 's'], () => save(), {
- *     scope: 'editor',
- *     data: { description: 'Save document' }
- *   });
- *   setScope('editor');
- * }, []);
- */
-const useKeybindy = ({ logs = false, onShortcutFired, } = {}) => {
-    const managerRef = React.useRef(null);
-    const registeredIds = React.useRef(new Set());
-    if (!sharedInstance) {
-        sharedInstance = new ShortcutManager({ onShortcutFired, silent: !logs });
-    }
-    if (!managerRef.current) {
-        managerRef.current = sharedInstance;
-        managerRef.current.start();
-    }
-    const log = (...args) => {
-        if (logs)
-            console.log('[Keybindy]', ...args);
-    };
-    const warn = (...args) => {
-        if (logs)
-            console.warn('[Keybindy]', ...args);
-    };
-    /**
-     * Registers a new keyboard shortcut.
-     *
-     * @param {Keys[] | Keys[][]} keys - Key combination(s) to listen for.
-     * @param {ShortcutHandler} handler - Callback function to invoke when shortcut is triggered.
-     * @param {ShortcutOptions} [options] - Optional configuration, including scope and metadata.
-     */
-    const register = React.useCallback((keys, handler, options) => {
-        if (keys.length === 0) {
-            warn('No keys provided to register');
-            return;
-        }
-        const id = options?.data?.id;
-        if (id)
-            registeredIds.current.add(id);
-        log('Registered:', id ?? keys);
-        managerRef.current?.register(keys, handler, options);
-    }, []);
-    /**
-     * Unregisters a previously registered keyboard shortcut.
-     *
-     * @param {Keys[]} keys - Key combination to unregister.
-     * @param {string} [scope] - Optional scope for more targeted unregistration.
-     */
-    const unregister = React.useCallback((keys, scope) => {
-        if (keys.length === 0) {
-            warn('No keys provided to unregister');
-            return;
-        }
-        managerRef.current?.unregister(keys, scope);
-        log('Unregistered:', keys);
-    }, []);
-    /**
-     * Enables a previously disabled shortcut.
-     *
-     * @param {Keys[]} keys - Key combination to enable.
-     * @param {string} [scope] - Optional scope to target a specific set.
-     */
-    const enable = React.useCallback((keys, scope) => {
-        if (keys.length === 0) {
-            warn('No keys provided to enable');
-            return;
-        }
-        managerRef.current?.enable(keys, scope);
-        log('Enabled:', keys);
-    }, []);
-    /**
-     * Disables a shortcut so it no longer triggers its handler.
-     *
-     * @param {Keys[]} keys - Key combination to disable.
-     * @param {string} [scope] - Optional scope to target a specific set.
-     */
-    const disable = React.useCallback((keys, scope) => {
-        if (keys.length === 0) {
-            warn('No keys provided to disable');
-            return;
-        }
-        managerRef.current?.disable(keys, scope);
-        log('Disabled:', keys);
-    }, []);
-    /**
-     * Toggles a shortcut between enabled and disabled.
-     *
-     * @param {Keys[]} keys - Key combination to toggle.
-     * @param {string} [scope] - Optional scope to target a specific set.
-     */
-    const toggle = React.useCallback((keys, scope) => {
-        if (keys.length === 0) {
-            warn('No keys provided to toggle');
-            return;
-        }
-        managerRef.current?.toggle(keys, scope);
-        log('Toggled:', keys);
-    }, []);
-    /**
-     * Returns a list of shortcuts registered in a given scope.
-     *
-     * @param {string} [scope] - The scope to query. Defaults to the active scope.
-     * @returns {Array} List of shortcut definitions.
-     */
-    const getCheatSheet = React.useCallback((scope) => {
-        return managerRef.current?.getCheatSheet(scope);
-    }, []);
-    /**
-     * Returns the currently active scope.
-     * @returns {string} The active scope.
-     */
-    const getActiveScope = React.useCallback(() => {
-        return managerRef.current?.getActiveScope() ?? '';
-    }, []);
-    /**
-     * Disables all shortcuts in the specified scope or all scopes if no scope is provided.
-     * @param scope - The scope to disable shortcuts in.
-     */
-    const disableAll = React.useCallback((scope) => {
-        managerRef.current?.disableAll(scope);
-        log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ''}`);
-    }, []);
-    /**
-     * Enables all shortcuts in the specified scope or all scopes if no scope is provided.
-     * @param scope - The scope to enable shortcuts in.
-     */
-    const enableAll = React.useCallback((scope) => {
-        managerRef.current?.enableAll(scope);
-        log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ''}`);
-    }, []);
-    /**
-     * Sets the currently active shortcut scope.
-     *
-     * @param {string} scope - The scope name to set as active.
-     */
-    const setScope = React.useCallback((scope) => {
-        managerRef.current?.setActiveScope(scope);
-        log('Scope set to:', scope);
-    }, []);
-    /**
-     * Resets the scope stack to the default state.
-     */
-    const resetScope = React.useCallback(() => {
-        managerRef.current?.resetScope();
-        log('Reset scope');
-    }, []);
-    /**
-     * Returns all scopes in the stack.
-     * @returns An array of scopes.
-     */
-    const getScopes = React.useCallback(() => {
-        return managerRef.current?.getScopes() ?? [];
-    }, []);
-    /**
-     * Checks if the given scope is active.
-     * @param scope - The scope to check.
-     * @returns `true` if the scope is active, `false` otherwise.
-     */
-    const isScopeActive = React.useCallback((scope) => {
-        return managerRef.current?.isScopeActive(scope);
-    }, []);
-    /**
-     * Registers a callback to be called when a key is typed.
-     * @param callback - The callback function to be called.
-     */
-    const onTyping = React.useCallback((callback) => {
-        managerRef.current?.onTyping(callback);
-    }, []);
-    /**
-     * Pops the last scope from the scope stack.
-     */
-    const popScope = React.useCallback(() => {
-        managerRef.current?.popScope();
-        log('Popped scope, active scope is:', managerRef.current?.getActiveScope());
-    }, []);
-    /**
-     * Pushes a new scope onto the scope stack.
-     * @param scope - The scope to push.
-     */
-    const pushScope = React.useCallback((scope) => {
-        managerRef.current?.pushScope(scope);
-        log('Pushed scope:', scope);
-    }, []);
-    /**
-     * Returns internal information about the registered scopes and shortcuts.
-     *
-     * @param {string} [scope] - Optional scope to filter results.
-     * @returns {Object} Scope information.
-     */
-    const getScopeInfo = React.useCallback((scope) => {
-        return managerRef.current?.getScopesInfo(scope);
-    }, []);
-    /**
-     * Destroys the instance of `ShortcutManager`.
-     * This should be called explicitly when you no longer need the manager.
-     */
-    const destroy = () => {
-        managerRef.current?.destroy();
-    };
-    /**
-     * Clears the internal state, removing all pressed keys and event listeners.
-     * This does not unregister shortcuts.
-     */
-    const clear = () => {
-        managerRef.current?.clear();
-    };
-    return {
-        register,
-        unregister,
-        enable,
-        disable,
-        toggle,
-        setScope,
-        getCheatSheet,
-        destroy,
-        getScopeInfo,
-        getActiveScope,
-        popScope,
-        pushScope,
-        resetScope,
-        getScopes,
-        isScopeActive,
-        onTyping,
-        enableAll,
-        clear,
-        disableAll,
-        manager: managerRef.current,
-    };
-};
-
-export { useKeybindy };