pure-shortcut 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pure-shortcut
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,212 @@
+# pure-shortcut
+
+[npm version](https://www.npmjs.com/package/pure-shortcut)
+[npm downloads](https://www.npmjs.com/package/pure-shortcut)
+[license](LICENSE)
+
+> **Elegant, customizable keyboard shortcut provider for React components (with pure JS support).**
+
+---
+
+## 📚 Table of Contents
+
+- [Project Description](#project-description)
+- [Demo](#demo)
+- [Installation](#installation)
+- [Dependencies](#dependencies)
+- [Quick Start](#quick-start)
+- [API Reference](#api-reference)
+- [Advanced Usage](#advanced-usage)
+  - [Global Shortcuts with JavaScript](#global-shortcuts-with-javascript)
+- [Events System](#events-system)
+- [Examples](#examples)
+- [Contributing & Feedback](#contributing--feedback)
+- [License](#license)
+- [Author](#author)
+
+---
+
+## 📝 Project Description
+
+**pure-shortcut** is a React component and TypeScript utility enabling easy creation and management of global or scoped keyboard shortcuts (hotkeys). Designed for accessibility and productivity, it lets you assign one or more key combinations to any UI part—ideal for commands, CRUD, navigation, and dashboards. 
+
+- Supports both React (via the Shortcut component) and vanilla JS/TS (addShortcuts/removeShortcuts).
+- Ignores input, textarea, and contentEditable by default to avoid interfering with user text input.
+
+---
+
+## 🔗 Dependencies
+
+- **React** (version 18+)
+- **TailwindCSS** (optional; only if you utilize `className` for styling)
+- **@iconify/react** (optional; only if your children require these icons)
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+import React from "react";
+import Shortcut from "pure-shortcut";
+
+function App() {
+  return (
+    <Shortcut
+      onShortPressed={[
+        {
+          key: "s",
+          ctrlKey: true,
+          onPress: (e) => {
+            e.preventDefault();
+            alert("Saved!");
+          }
+        },
+        {
+          key: "x",
+          altKey: true,
+          onPress: (e) => {
+            e.preventDefault();
+            alert("Detected ALT+X combination");
+          }
+        }
+      ]}
+    >
+      <input placeholder="Press Ctrl+S to save or Alt+X for another action" />
+    </Shortcut>
+  );
+}
+
+export default App;
+```
+
+---
+
+## 🛠️ API Reference
+
+### `<Shortcut />` Component
+
+
+| Prop             | Type                   | Required | Description                                                 |
+| ---------------- | ---------------------- | -------- | ----------------------------------------------------------- |
+| `children`       | `ReactNode`            | Yes      | The React content to wrap and enable shortcut listening on. |
+| `onShortPressed` | `OnShortPressedItem[]` | Yes      | Array of shortcut definitions. See below for details.       |
+| `className`      | `string`               | No       | Optional CSS class for the wrapping `<div>`.                |
+
+
+#### **OnShortPressedItem**
+
+```ts
+{
+  key: string;                  // The key to listen for (e.g., "s", "Enter", "ArrowUp")
+  ctrlKey?: boolean;            // Requires Ctrl key (optional)
+  shiftKey?: boolean;           // Requires Shift key (optional)
+  altKey?: boolean;             // Requires Alt key (optional)
+  metaKey?: boolean;            // Requires Meta (⌘ on Mac, Windows key on PC) (optional)
+  onPress: (e: KeyboardEvent) => void; // Callback executed when the shortcut triggers
+}
+```
+
+##### Example:
+
+```tsx
+onShortPressed={[
+  { key: "s", ctrlKey: true, onPress: (e) => { e.preventDefault(); alert("Saved!"); } }
+]}
+```
+
+---
+
+## ⚡️ Advanced Usage
+
+### Global Shortcuts with JavaScript (Utility API)
+
+You can also use pure JavaScript/TypeScript—for instance, in non-React contexts or for global shortcuts:
+
+```js
+import { addShortcuts, removeShortcuts } from "pure-shortcut";
+
+const handler = (e) => { e.preventDefault(); alert("Saved!"); };
+
+addShortcuts([
+  { key: "s", ctrlKey: true, onPress: handler }
+]);
+
+// Later, when you want to clean up:
+removeShortcuts();
+```
+
+You can also use in HTML directly:
+
+```html
+<script src="Shortcut.js"></script>
+<script>
+  addShortcuts([
+    { key: "n", ctrlKey: true, altKey: true, onPress: function(e) { alert('Ctrl+Alt+N!'); } }
+  ]);
+</script>
+```
+
+---
+
+## 🎯 Events System
+
+- **Key Events**: All registered shortcuts receive the native `KeyboardEvent` object.
+- **Input Safety**: Shortcuts are ignored when typing in `<input>`, `<textarea>`, or content-editable elements by default (for UX).
+
+---
+
+## 💡 Examples
+
+### Basic Example
+
+```tsx
+<Shortcut
+  onShortPressed={[
+    { key: "s", ctrlKey: true, onPress: (e) => { e.preventDefault(); alert("Saved!"); } }
+  ]}
+>
+  <input />
+</Shortcut>
+```
+
+### Styled Example
+
+```tsx
+import Shortcut from "pure-shortcut";
+
+function Demo() {
+  return (
+    <Shortcut
+      className="bg-gray-100 p-4 rounded"
+      onShortPressed={[
+        { key: "s", ctrlKey: true, onPress: (e) => { e.preventDefault(); alert("Saved"); } },
+        { key: "u", shiftKey: true, onPress: (e) => { e.preventDefault(); alert("Shift+U"); } }
+      ]}
+    >
+      <input placeholder="Try the shortcuts (Ctrl+S, Shift+U)" />
+    </Shortcut>
+  );
+}
+```
+
+---
+
+## 🙌 Contributing / Feedback
+
+Feedback, issues, and PRs are welcome!  
+Please open an [issue](https://github.com/your-repo/issues) or submit a pull request.
+
+- To contribute, fork the repo, create your feature branch, and submit a pull request.
+- For questions or feature requests, contact the author below.
+
+---
+
+## 📄 License
+
+Distributed under the [MIT License](./LICENSE).
+
+---
+
+## 👤 Author
+
+Developed and maintained by [Antonio Benavides H.](mailto:your-email@example.com)

package/dist/Shortcut.d.ts

@@ -0,0 +1,23 @@
+import { default as React, ReactNode } from 'react';
+export interface OnShortPressedItem {
+    key: string;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+    onPress: (e: KeyboardEvent) => void;
+}
+export interface ShortcutProps {
+    children: ReactNode;
+    onShortPressed: OnShortPressedItem[];
+    className?: string;
+}
+/**
+ * Shortcut: Component to handle custom keyboard shortcuts.
+ * Improvements:
+ * - Uses ref to always have freshest onShortPressed handler.
+ * - Case-insensitive key support.
+ * - Ignores events from input, textarea, or contentEditable by default for better UX.
+ */
+declare const Shortcut: React.FC<ShortcutProps>;
+export default Shortcut;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Shortcut } from './Shortcut';
+export { addShortcuts, removeShortcuts } from './tsShortcut';
+export type { ShortcutProps } from './Shortcut';
+export type { OnShortPressedItem } from './Shortcut';

package/dist/index.js

@@ -0,0 +1,340 @@
+import ne, { useRef as ae, useEffect as F } from "react";
+var k = { exports: {} }, y = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var K;
+function oe() {
+  if (K) return y;
+  K = 1;
+  var t = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
+  function f(d, l, u) {
+    var a = null;
+    if (u !== void 0 && (a = "" + u), l.key !== void 0 && (a = "" + l.key), "key" in l) {
+      u = {};
+      for (var i in l)
+        i !== "key" && (u[i] = l[i]);
+    } else u = l;
+    return l = u.ref, {
+      $$typeof: t,
+      type: d,
+      key: a,
+      ref: l !== void 0 ? l : null,
+      props: u
+    };
+  }
+  return y.Fragment = c, y.jsx = f, y.jsxs = f, y;
+}
+var R = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var D;
+function se() {
+  return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === ee ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case h:
+          return "Fragment";
+        case V:
+          return "Profiler";
+        case J:
+          return "StrictMode";
+        case X:
+          return "Suspense";
+        case B:
+          return "SuspenseList";
+        case Q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case q:
+            return "Portal";
+          case G:
+            return e.displayName || "Context";
+          case z:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case H:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
+          case A:
+            r = e._payload, e = e._init;
+            try {
+              return t(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function c(e) {
+      return "" + e;
+    }
+    function f(e) {
+      try {
+        c(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), c(e);
+      }
+    }
+    function d(e) {
+      if (e === h) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === A)
+        return "<...>";
+      try {
+        var r = t(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function l() {
+      var e = O.A;
+      return e === null ? null : e.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function a(e) {
+      if (N.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function i(e, r) {
+      function n() {
+        L || (L = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function m() {
+      var e = t(this.type);
+      return Y[e] || (Y[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function v(e, r, n, o, T, x) {
+      var s = n.ref;
+      return e = {
+        $$typeof: C,
+        type: e,
+        key: r,
+        props: n,
+        _owner: o
+      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: m
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: T
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: x
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function b(e, r, n, o, T, x) {
+      var s = r.children;
+      if (s !== void 0)
+        if (o)
+          if (re(s)) {
+            for (o = 0; o < s.length; o++)
+              p(s[o]);
+            Object.freeze && Object.freeze(s);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else p(s);
+      if (N.call(r, "key")) {
+        s = t(e);
+        var E = Object.keys(r).filter(function(te) {
+          return te !== "key";
+        });
+        o = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", $[s + o] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          s,
+          E,
+          s
+        ), $[s + o] = !0);
+      }
+      if (s = null, n !== void 0 && (f(n), s = "" + n), a(r) && (f(r.key), s = "" + r.key), "key" in r) {
+        n = {};
+        for (var P in r)
+          P !== "key" && (n[P] = r[P]);
+      } else n = r;
+      return s && i(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), v(
+        e,
+        s,
+        n,
+        l(),
+        T,
+        x
+      );
+    }
+    function p(e) {
+      w(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? w(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function w(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === C;
+    }
+    var _ = ne, C = Symbol.for("react.transitional.element"), q = Symbol.for("react.portal"), h = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), V = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), G = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), B = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), O = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, re = Array.isArray, S = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    _ = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var L, Y = {}, I = _.react_stack_bottom_frame.bind(
+      _,
+      u
+    )(), M = S(d(u)), $ = {};
+    R.Fragment = h, R.jsx = function(e, r, n) {
+      var o = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return b(
+        e,
+        r,
+        n,
+        !1,
+        o ? Error("react-stack-top-frame") : I,
+        o ? S(d(e)) : M
+      );
+    }, R.jsxs = function(e, r, n) {
+      var o = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return b(
+        e,
+        r,
+        n,
+        !0,
+        o ? Error("react-stack-top-frame") : I,
+        o ? S(d(e)) : M
+      );
+    };
+  })()), R;
+}
+var W;
+function le() {
+  return W || (W = 1, process.env.NODE_ENV === "production" ? k.exports = oe() : k.exports = se()), k.exports;
+}
+var ue = le();
+const me = ({
+  children: t,
+  onShortPressed: c,
+  className: f
+}) => {
+  const d = ae(c);
+  return F(() => {
+    d.current = c;
+  }, [c]), F(() => {
+    const l = (a) => {
+      if (!a || !(a instanceof HTMLElement)) return !1;
+      const i = a.tagName.toLowerCase();
+      return i === "input" || i === "textarea" || a.isContentEditable;
+    }, u = (a) => {
+      l(a.target) || d.current.forEach((i) => {
+        const {
+          key: m,
+          ctrlKey: v = !1,
+          shiftKey: b = !1,
+          altKey: p = !1,
+          metaKey: w = !1
+        } = i;
+        (m.length === 1 ? a.key.toLowerCase() === m.toLowerCase() : a.key === m) && a.ctrlKey === v && a.shiftKey === b && a.altKey === p && a.metaKey === w && i.onPress(a);
+      });
+    };
+    return window.addEventListener("keydown", u), () => {
+      window.removeEventListener("keydown", u);
+    };
+  }, []), /* @__PURE__ */ ue.jsx("div", { className: f, children: t });
+};
+let j = [], g = !1;
+function ie(t) {
+  if (!t || !(t instanceof HTMLElement)) return !1;
+  const c = t.tagName.toLowerCase();
+  return c === "input" || c === "textarea" || t.isContentEditable === !0;
+}
+function U(t) {
+  ie(t.target) || j.forEach(function(c) {
+    const {
+      key: f,
+      ctrlKey: d = !1,
+      shiftKey: l = !1,
+      altKey: u = !1,
+      metaKey: a = !1,
+      onPress: i
+    } = c;
+    (f.length === 1 ? t.key && t.key.toLowerCase() === f.toLowerCase() : t.key === f) && !!t.ctrlKey == !!d && !!t.shiftKey == !!l && !!t.altKey == !!u && !!t.metaKey == !!a && typeof i == "function" && i(t);
+  });
+}
+function ce(t) {
+  Array.isArray(t) && (j = t, g || (window.addEventListener("keydown", U), g = !0));
+}
+function fe() {
+  window.removeEventListener("keydown", U), j = [], g = !1;
+}
+typeof window < "u" && (window.addShortcuts = ce, window.removeShortcuts = fe);
+export {
+  me as Shortcut,
+  ce as addShortcuts,
+  fe as removeShortcuts
+};

package/dist/index.umd.cjs

@@ -0,0 +1,22 @@
+(function(m,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],E):(m=typeof globalThis<"u"?globalThis:m||self,E(m.shortcut={},m.React))})(this,(function(m,E){"use strict";var T={exports:{}},R={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var L;function G(){if(L)return R;L=1;var t=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function f(d,u,l){var o=null;if(l!==void 0&&(o=""+l),u.key!==void 0&&(o=""+u.key),"key"in u){l={};for(var c in u)c!=="key"&&(l[c]=u[c])}else l=u;return u=l.ref,{$$typeof:t,type:d,key:o,ref:u!==void 0?u:null,props:l}}return R.Fragment=i,R.jsx=f,R.jsxs=f,R}var b={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Y;function q(){return Y||(Y=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case x:return"Fragment";case re:return"Profiler";case ee:return"StrictMode";case ae:return"Suspense";case se:return"SuspenseList";case le:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case Q:return"Portal";case ne:return e.displayName||"Context";case te:return(e._context.displayName||"Context")+".Consumer";case oe:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case P:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function i(e){return""+e}function f(e){try{i(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),i(e)}}function d(e){if(e===x)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function u(){var e=g.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function o(e){if(W.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function c(e,r){function n(){U||(U=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function _(){var e=t(this.type);return $[e]||($[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function A(e,r,n,a,h,C){var s=n.ref;return e={$$typeof:D,type:e,key:r,props:n,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:_}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:h}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,r,n,a,h,C){var s=r.children;if(s!==void 0)if(a)if(ie(s)){for(a=0;a<s.length;a++)k(s[a]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else k(s);if(W.call(r,"key")){s=t(e);var y=Object.keys(r).filter(function(fe){return fe!=="key"});a=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",z[s+a]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,a,s,y,s),z[s+a]=!0)}if(s=null,n!==void 0&&(f(n),s=""+n),o(r)&&(f(r.key),s=""+r.key),"key"in r){n={};for(var N in r)N!=="key"&&(n[N]=r[N])}else n=r;return s&&c(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),A(e,s,n,u(),h,C)}function k(e){v(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===P&&(e._payload.status==="fulfilled"?v(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function v(e){return typeof e=="object"&&e!==null&&e.$$typeof===D}var p=E,D=Symbol.for("react.transitional.element"),Q=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),ee=Symbol.for("react.strict_mode"),re=Symbol.for("react.profiler"),te=Symbol.for("react.consumer"),ne=Symbol.for("react.context"),oe=Symbol.for("react.forward_ref"),ae=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),g=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,ie=Array.isArray,j=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(e){return e()}};var U,$={},J=p.react_stack_bottom_frame.bind(p,l)(),V=j(d(l)),z={};b.Fragment=x,b.jsx=function(e,r,n){var a=1e4>g.recentlyCreatedOwnerStacks++;return w(e,r,n,!1,a?Error("react-stack-top-frame"):J,a?j(d(e)):V)},b.jsxs=function(e,r,n){var a=1e4>g.recentlyCreatedOwnerStacks++;return w(e,r,n,!0,a?Error("react-stack-top-frame"):J,a?j(d(e)):V)}})()),b}var M;function H(){return M||(M=1,process.env.NODE_ENV==="production"?T.exports=G():T.exports=q()),T.exports}var X=H();const B=({children:t,onShortPressed:i,className:f})=>{const d=E.useRef(i);return E.useEffect(()=>{d.current=i},[i]),E.useEffect(()=>{const u=o=>{if(!o||!(o instanceof HTMLElement))return!1;const c=o.tagName.toLowerCase();return c==="input"||c==="textarea"||o.isContentEditable},l=o=>{u(o.target)||d.current.forEach(c=>{const{key:_,ctrlKey:A=!1,shiftKey:w=!1,altKey:k=!1,metaKey:v=!1}=c;(_.length===1?o.key.toLowerCase()===_.toLowerCase():o.key===_)&&o.ctrlKey===A&&o.shiftKey===w&&o.altKey===k&&o.metaKey===v&&c.onPress(o)})};return window.addEventListener("keydown",l),()=>{window.removeEventListener("keydown",l)}},[]),X.jsx("div",{className:f,children:t})};let S=[],O=!1;function Z(t){if(!t||!(t instanceof HTMLElement))return!1;const i=t.tagName.toLowerCase();return i==="input"||i==="textarea"||t.isContentEditable===!0}function I(t){Z(t.target)||S.forEach(function(i){const{key:f,ctrlKey:d=!1,shiftKey:u=!1,altKey:l=!1,metaKey:o=!1,onPress:c}=i;(f.length===1?t.key&&t.key.toLowerCase()===f.toLowerCase():t.key===f)&&!!t.ctrlKey==!!d&&!!t.shiftKey==!!u&&!!t.altKey==!!l&&!!t.metaKey==!!o&&typeof c=="function"&&c(t)})}function F(t){Array.isArray(t)&&(S=t,O||(window.addEventListener("keydown",I),O=!0))}function K(){window.removeEventListener("keydown",I),S=[],O=!1}typeof window<"u"&&(window.addShortcuts=F,window.removeShortcuts=K),m.Shortcut=B,m.addShortcuts=F,m.removeShortcuts=K,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/tsShortcut.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Shortcut (HOTKEYS) - Pure JavaScript Utility
+ *
+ * Allows you to define custom keyboard shortcuts (hotkeys) to execute functions
+ * when specific key combinations are pressed.
+ *
+ * ## Usage in JavaScript (ES6+):
+ *
+ * ```js
+ * import { addShortcuts, removeShortcuts } from "./Shortcut";
+ *
+ * const handler = (e) => { e.preventDefault(); alert("Saved!"); };
+ * addShortcuts([
+ *   { key: "s", ctrlKey: true, onPress: handler }
+ * ]);
+ *
+ * // To remove all shortcuts later:
+ * removeShortcuts();
+ * ```
+ *
+ * ## Direct HTML Usage:
+ * ```html
+ * <script src="Shortcut.js"></script>
+ * <script>
+ *   addShortcuts([
+ *     { key: "n", ctrlKey: true, altKey: true, onPress: function(e) { alert('Ctrl+Alt+N!'); } }
+ *   ]);
+ * </script>
+ * ```
+ *
+ * ## Type Definition
+ * @typedef {Object} ShortPressedItem
+ * @property {string} key - The key to detect (e.g., "s" or "Enter").
+ * @property {boolean} [ctrlKey] - Requires Control key. Default: false.
+ * @property {boolean} [shiftKey] - Requires Shift key. Default: false.
+ * @property {boolean} [altKey] - Requires Alt key. Default: false.
+ * @property {boolean} [metaKey] - Requires Meta/Super key (⌘, Windows). Default: false.
+ * @property {(e: KeyboardEvent) => void} onPress - Function to execute when shortcut is triggered.
+ */
+type ShortPressedItem = {
+    key: string;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+    onPress: (e: KeyboardEvent) => void;
+};
+/**
+ * Register global keyboard shortcuts.
+ * @param {ShortPressedItem[]} shortcuts
+ */
+export declare function addShortcuts(shortcuts: ShortPressedItem[]): void;
+/**
+ * Remove all currently active keyboard shortcuts.
+ */
+export declare function removeShortcuts(): void;
+declare global {
+    interface Window {
+        addShortcuts?: typeof addShortcuts;
+        removeShortcuts?: typeof removeShortcuts;
+    }
+}
+export {};

package/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "pure-shortcut",
+    "version": "1.0.0",
+    "type": "module",
+    "main": "dist/index.umd.cjs",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "license":"MIT",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "require":"./dist/index.umd.cjs"
+        }
+    },
+    "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19",
+        "tailwindcss": "^4"
+    },
+    "dependencies": {
+        "@iconify/react": "^6.0.2"
+    },
+    "devDependencies": {
+        "@tailwindcss/cli": "^4.2.1",
+        "@types/react": "^19.2.14",
+        "tailwindcss": "^4.2.1"
+    },
+    "scripts": {
+        "build": "vite build"
+    },
+    "keywords": [
+        "shortcut",
+        "hotkey",
+        "react",
+        "keyboard",
+        "hook",
+        "shortcuts",
+        "keyboard-shortcut",
+        "custom-keyboard-shortcut",
+        "react-component",
+        "keybinding",
+        "keyboard-event",
+        "tailwind",
+        "typescript",
+        "shortcut-provider"
+    ]
+}