@nextui-org/react 1.0.1-alpha.48 → 1.0.1-alpha.51

package/cjs/{input → shared}/clear-icon.js

@@ -17,16 +17,35 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const defaultProps = {
   width: 24,
-  height: 24
+  height: 24,
+  plain: false
 };
 
 const Close = ({
   size,
   fill,
+  plain,
   width,
   height,
   ...props
 }) => {
+  if (plain) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      width: size || width,
+      height: size || height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: fill,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M18 6L6 18M6 6l12 12"
+      })
+    });
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     width: size || width,
     height: size || height,

package/cjs/snippet/snippet.d.ts

@@ -1,17 +1,18 @@
 import React from 'react';
-import { SnippetTypes, CopyTypes } from '../utils/prop-types';
+import { SnippetTypes, CopyTypes, TooltipColors } from '../utils/prop-types';
 interface Props {
     text?: string | string[];
     symbol?: string;
-    toastText?: string;
     filled?: boolean;
     width?: string;
     bordered?: boolean;
     showTooltip?: boolean;
+    tooltipText?: string;
     tooltipCopyText?: string;
     tooltipCopiedText?: string;
     copy?: CopyTypes;
     type?: SnippetTypes;
+    tooltipColor?: TooltipColors | string;
     className?: string;
 }
 declare const defaultProps: {
@@ -19,10 +20,10 @@ declare const defaultProps: {
     bordered: boolean;
     showTooltip: boolean;
     symbol: string;
-    toastText: string;
     width: string;
     copy: "default" | "slient" | "prevent";
     type: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "invert";
+    tooltipColor: string;
     tooltipCopyText: string;
     tooltipCopiedText: string;
     className: string;
@@ -34,12 +35,12 @@ declare const _default: React.ComponentType<Partial<{
     bordered: boolean;
     showTooltip: boolean;
     symbol: string;
-    toastText: string;
     width: string;
     copy: "default" | "slient" | "prevent";
     type: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "invert";
+    tooltipColor: string;
     tooltipCopyText: string;
     tooltipCopiedText: string;
     className: string;
-}> & Omit<SnippetProps, "symbol" | "type" | "width" | "copy" | "className" | "bordered" | "filled" | "toastText" | "showTooltip" | "tooltipCopyText" | "tooltipCopiedText">>;
+}> & Omit<SnippetProps, "symbol" | "type" | "width" | "copy" | "className" | "bordered" | "filled" | "showTooltip" | "tooltipCopyText" | "tooltipCopiedText" | "tooltipColor">>;
 export default _default;

package/cjs/snippet/snippet.js

@@ -32,10 +32,10 @@ const defaultProps = {
   bordered: false,
   showTooltip: true,
   symbol: '$',
-  toastText: 'Copied to clipboard!',
   width: 'initial',
   copy: 'default',
   type: 'default',
+  tooltipColor: 'default',
   tooltipCopyText: 'Copy',
   tooltipCopiedText: 'Copied',
   className: ''
@@ -54,12 +54,12 @@ const Snippet = ({
   bordered,
   children,
   symbol,
-  toastText,
   showTooltip,
   text,
   width,
   tooltipCopyText,
   tooltipCopiedText,
+  tooltipColor,
   copy: copyType,
   className,
   ...props
@@ -111,6 +111,8 @@ const Snippet = ({
       children: children || text
     }), showCopyIcon && copyType !== 'slient' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
       hideArrow: true,
+      rounded: true,
+      color: tooltipColor,
       text: copied ? tooltipCopiedText : tooltipCopyText,
       onVisibleChange: handleTooltipVisibleChange,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/cjs/text/child.d.ts

@@ -4,6 +4,7 @@ export interface Props {
     tag: keyof JSX.IntrinsicElements;
     color?: NormalColors | string;
     size?: string | number;
+    margin?: string | number;
     capitalize?: boolean;
     className?: '';
 }

package/cjs/text/child.js

@@ -33,6 +33,7 @@ const TextChild = ({
   className,
   color: userColor,
   capitalize,
+  margin: marginProp,
   size,
   ...props
 }) => {
@@ -44,14 +45,19 @@ const TextChild = ({
     if (typeof size === 'number') return `${size}px`;
     return size;
   }, [size]);
+  const margin = (0, _react.useMemo)(() => {
+    if (!marginProp) return 'inherit';
+    if (typeof marginProp === 'number') return `${size}px`;
+    return marginProp;
+  }, [marginProp]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
-      className: _style.default.dynamic([["895353027", [tag, color, fontSize]]]) + " " + (props && props.className != null && props.className || `${size ? 'custom-size' : ''} ${capitalize ? 'capitalize' : ''} ${className}`),
+      className: _style.default.dynamic([["3362076940", [tag, color, margin, fontSize]]]) + " " + (props && props.className != null && props.className || `${size ? 'custom-size' : ''} ${capitalize ? 'capitalize' : ''} ${className}`),
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "895353027",
-      dynamic: [tag, color, fontSize],
-      children: `${tag}.__jsx-style-dynamic-selector{color:${color};}.custom-size.__jsx-style-dynamic-selector{font-size:${fontSize};}.capitalize.__jsx-style-dynamic-selector{text-transform:capitalize;}`
+      id: "3362076940",
+      dynamic: [tag, color, margin, fontSize],
+      children: `${tag}.__jsx-style-dynamic-selector{color:${color};margin:${margin};}.custom-size.__jsx-style-dynamic-selector{font-size:${fontSize};}.capitalize.__jsx-style-dynamic-selector{text-transform:capitalize;}`
     })]
   });
 };

package/cjs/text/text.d.ts

@@ -18,6 +18,7 @@ interface Props {
     blockquote?: boolean;
     className?: string;
     size?: string | number;
+    margin?: string | number;
     color?: NormalColors | string;
 }
 declare const defaultProps: {

package/cjs/text/text.js

@@ -65,6 +65,7 @@ const Text = ({
   blockquote,
   capitalize,
   size,
+  margin,
   children,
   className,
   ...props
@@ -113,6 +114,7 @@ const Text = ({
     className: className,
     capitalize: capitalize,
     tag: tag,
+    margin: margin,
     size: size,
     ...props,
     children: modifers

package/cjs/theme/dark.js

@@ -31,9 +31,9 @@ const expressiveness = {
   dropdownBoxShadow: '0 0 0 1px #333',
   scrollerStart: 'rgba(255, 255, 255, 1)',
   scrollerEnd: 'rgba(255, 255, 255, 0)',
-  shadowSmall: '0 10px 20px -10px rgba(255, 255, 255, .15)',
-  shadowMedium: '0 15px 22px -10px rgba(255, 255, 255, 0.15)',
-  shadowLarge: '0 20px 24px -10px rgba(255, 255, 255, 0.15)',
+  shadowSmall: '0 10px 20px -10px rgba(0, 0, 0, 0.1)',
+  shadowMedium: '0 15px 22px -10px rgba(0, 0, 0, 0.1)',
+  shadowLarge: '0 20px 24px -10px rgba(0, 0, 0, 0.1)',
   portalOpacity: 0.75
 };
 exports.expressiveness = expressiveness;

package/cjs/theme/default.js

@@ -18,7 +18,7 @@ const palette = { ..._common.default,
   accents_6: '#444',
   accents_7: '#333',
   accents_8: '#111',
-  text: '#2c3e50',
+  text: '#333',
   white: '#fff',
   background: '#fff',
   foreground: '#000',

package/cjs/theme/types.d.ts

@@ -1,4 +1,5 @@
 import { ThemeTypes } from '../utils/prop-types';
+export declare type ThemeType = ThemeTypes;
 export interface NextUIThemesPalette {
     accents_1: string;
     accents_2: string;

package/cjs/tooltip/tooltip-content.js

@@ -108,15 +108,15 @@ const TooltipContent = ({
       ref: selfRef,
       onClick: preventHandler,
       ...props,
-      className: _style.default.dynamic([["3534938502", [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, borderRadius, shadow ? theme.expressiveness.shadowSmall : 'none', theme.layout.gapQuarter, theme.layout.gapHalf, colors.bgColor, left, top, right, bottom, transform, rect.top]]]) + " " + (props && props.className != null && props.className || `tooltip-content ${className}`),
+      className: _style.default.dynamic([["472873192", [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, borderRadius, shadow ? theme.expressiveness.shadowMedium : 'none', theme.layout.gapQuarter, theme.layout.gapHalf, colors.bgColor, left, top, right, bottom, transform, rect.top]]]) + " " + (props && props.className != null && props.className || `tooltip-content ${className}`),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         role: "tooltip",
-        className: _style.default.dynamic([["3534938502", [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, borderRadius, shadow ? theme.expressiveness.shadowSmall : 'none', theme.layout.gapQuarter, theme.layout.gapHalf, colors.bgColor, left, top, right, bottom, transform, rect.top]]]) + " " + `inner ${!hideArrow ? 'arrow' : ''}`,
+        className: _style.default.dynamic([["472873192", [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, borderRadius, shadow ? theme.expressiveness.shadowMedium : 'none', theme.layout.gapQuarter, theme.layout.gapHalf, colors.bgColor, left, top, right, bottom, transform, rect.top]]]) + " " + `inner ${!hideArrow ? 'arrow' : ''}`,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-        id: "3534938502",
-        dynamic: [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, borderRadius, shadow ? theme.expressiveness.shadowSmall : 'none', theme.layout.gapQuarter, theme.layout.gapHalf, colors.bgColor, left, top, right, bottom, transform, rect.top],
-        children: `.tooltip-content.__jsx-style-dynamic-selector{position:absolute;width:auto;top:calc(${rect.top} + 6px);left:${rect.left};-webkit-transform:${rect.transform};-ms-transform:${rect.transform};transform:${rect.transform};background:${colors.bgColor};color:${colors.color};border-radius:${borderRadius};padding:0;opacity:0;z-index:1000;box-shadow:${shadow ? theme.expressiveness.shadowSmall : 'none'};-webkit-transition:opacity 0.25s ease 0s,top 0.25s ease 0s;transition:opacity 0.25s ease 0s,top 0.25s ease 0s;}.inner.__jsx-style-dynamic-selector{font-size:0.875rem;padding:${theme.layout.gapQuarter} ${theme.layout.gapHalf};position:relative;}.inner.arrow.__jsx-style-dynamic-selector:after{content:'';width:10px;height:10px;z-index:-2;background:${colors.bgColor};border-radius:0px 0px 2px 0px;position:absolute;left:${left};top:${top};right:${right};bottom:${bottom};-webkit-transform:${transform};-ms-transform:${transform};transform:${transform};}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;top:${rect.top};}`
+        id: "472873192",
+        dynamic: [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, borderRadius, shadow ? theme.expressiveness.shadowMedium : 'none', theme.layout.gapQuarter, theme.layout.gapHalf, colors.bgColor, left, top, right, bottom, transform, rect.top],
+        children: `.tooltip-content.__jsx-style-dynamic-selector{position:absolute;width:auto;top:calc(${rect.top} + 6px);left:${rect.left};-webkit-transform:${rect.transform};-ms-transform:${rect.transform};transform:${rect.transform};background:${colors.bgColor};color:${colors.color};border-radius:${borderRadius};padding:0;opacity:0;z-index:1000;box-shadow:${shadow ? theme.expressiveness.shadowMedium : 'none'};-webkit-transition:opacity 0.25s ease 0s,top 0.25s ease 0s;transition:opacity 0.25s ease 0s,top 0.25s ease 0s;}.inner.__jsx-style-dynamic-selector{font-size:0.875rem;padding:${theme.layout.gapQuarter} ${theme.layout.gapHalf};position:relative;}.inner.arrow.__jsx-style-dynamic-selector:after{content:'';width:10px;height:10px;z-index:-2;background:${colors.bgColor};border-radius:0px 0px 2px 0px;position:absolute;left:${left};top:${top};right:${right};bottom:${bottom};-webkit-transform:${transform};-ms-transform:${transform};transform:${transform};}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;top:${rect.top};}`
       })]
     })
   }), el);

package/cjs/use-keyboard/codes.d.ts

@@ -0,0 +1,92 @@
+/**
+ * KeyBinding Codes
+ * The content of this file is based on the design of the open source project "microsoft/vscode",
+ *   Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * We inherit the KeyMod values from "microsoft/vscode",
+ * but use the Browser's KeyboardEvent event implementation, and all values are used only as identification.
+ */
+export declare enum KeyCode {
+    Unknown = 0,
+    Backspace = 8,
+    Tab = 9,
+    Enter = 13,
+    Shift = 16,
+    Ctrl = 17,
+    Alt = 18,
+    PauseBreak = 19,
+    CapsLock = 20,
+    Escape = 27,
+    Space = 32,
+    PageUp = 33,
+    PageDown = 34,
+    End = 35,
+    Home = 36,
+    LeftArrow = 37,
+    UpArrow = 38,
+    RightArrow = 39,
+    DownArrow = 40,
+    Insert = 45,
+    Delete = 46,
+    KEY_0 = 48,
+    KEY_1 = 49,
+    KEY_2 = 50,
+    KEY_3 = 51,
+    KEY_4 = 52,
+    KEY_5 = 53,
+    KEY_6 = 54,
+    KEY_7 = 55,
+    KEY_8 = 56,
+    KEY_9 = 57,
+    KEY_A = 65,
+    KEY_B = 66,
+    KEY_C = 67,
+    KEY_D = 68,
+    KEY_E = 69,
+    KEY_F = 70,
+    KEY_G = 71,
+    KEY_H = 72,
+    KEY_I = 73,
+    KEY_J = 74,
+    KEY_K = 75,
+    KEY_L = 76,
+    KEY_M = 77,
+    KEY_N = 78,
+    KEY_O = 79,
+    KEY_P = 80,
+    KEY_Q = 81,
+    KEY_R = 82,
+    KEY_S = 83,
+    KEY_T = 84,
+    KEY_U = 85,
+    KEY_V = 86,
+    KEY_W = 87,
+    KEY_X = 88,
+    KEY_Y = 89,
+    KEY_Z = 90,
+    Meta = 91,
+    F1 = 112,
+    F2 = 113,
+    F3 = 114,
+    F4 = 115,
+    F5 = 116,
+    F6 = 117,
+    F7 = 118,
+    F8 = 119,
+    F9 = 120,
+    F10 = 121,
+    F11 = 122,
+    F12 = 123,
+    NumLock = 144,
+    ScrollLock = 145,
+    Equal = 187,
+    Minus = 189,
+    Backquote = 192,
+    Backslash = 220
+}
+export declare enum KeyMod {
+    CtrlCmd = 2048,
+    Shift = 1024,
+    Alt = 512,
+    WinCtrl = 256
+}

package/cjs/use-keyboard/codes.js

@@ -0,0 +1,104 @@
+"use strict";
+
+exports.__esModule = true;
+exports.KeyMod = exports.KeyCode = void 0;
+
+/**
+ * KeyBinding Codes
+ * The content of this file is based on the design of the open source project "microsoft/vscode",
+ *   Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * We inherit the KeyMod values from "microsoft/vscode",
+ * but use the Browser's KeyboardEvent event implementation, and all values are used only as identification.
+ */
+let KeyCode;
+exports.KeyCode = KeyCode;
+
+(function (KeyCode) {
+  KeyCode[KeyCode["Unknown"] = 0] = "Unknown";
+  KeyCode[KeyCode["Backspace"] = 8] = "Backspace";
+  KeyCode[KeyCode["Tab"] = 9] = "Tab";
+  KeyCode[KeyCode["Enter"] = 13] = "Enter";
+  KeyCode[KeyCode["Shift"] = 16] = "Shift";
+  KeyCode[KeyCode["Ctrl"] = 17] = "Ctrl";
+  KeyCode[KeyCode["Alt"] = 18] = "Alt";
+  KeyCode[KeyCode["PauseBreak"] = 19] = "PauseBreak";
+  KeyCode[KeyCode["CapsLock"] = 20] = "CapsLock";
+  KeyCode[KeyCode["Escape"] = 27] = "Escape";
+  KeyCode[KeyCode["Space"] = 32] = "Space";
+  KeyCode[KeyCode["PageUp"] = 33] = "PageUp";
+  KeyCode[KeyCode["PageDown"] = 34] = "PageDown";
+  KeyCode[KeyCode["End"] = 35] = "End";
+  KeyCode[KeyCode["Home"] = 36] = "Home";
+  KeyCode[KeyCode["LeftArrow"] = 37] = "LeftArrow";
+  KeyCode[KeyCode["UpArrow"] = 38] = "UpArrow";
+  KeyCode[KeyCode["RightArrow"] = 39] = "RightArrow";
+  KeyCode[KeyCode["DownArrow"] = 40] = "DownArrow";
+  KeyCode[KeyCode["Insert"] = 45] = "Insert";
+  KeyCode[KeyCode["Delete"] = 46] = "Delete";
+  KeyCode[KeyCode["KEY_0"] = 48] = "KEY_0";
+  KeyCode[KeyCode["KEY_1"] = 49] = "KEY_1";
+  KeyCode[KeyCode["KEY_2"] = 50] = "KEY_2";
+  KeyCode[KeyCode["KEY_3"] = 51] = "KEY_3";
+  KeyCode[KeyCode["KEY_4"] = 52] = "KEY_4";
+  KeyCode[KeyCode["KEY_5"] = 53] = "KEY_5";
+  KeyCode[KeyCode["KEY_6"] = 54] = "KEY_6";
+  KeyCode[KeyCode["KEY_7"] = 55] = "KEY_7";
+  KeyCode[KeyCode["KEY_8"] = 56] = "KEY_8";
+  KeyCode[KeyCode["KEY_9"] = 57] = "KEY_9";
+  KeyCode[KeyCode["KEY_A"] = 65] = "KEY_A";
+  KeyCode[KeyCode["KEY_B"] = 66] = "KEY_B";
+  KeyCode[KeyCode["KEY_C"] = 67] = "KEY_C";
+  KeyCode[KeyCode["KEY_D"] = 68] = "KEY_D";
+  KeyCode[KeyCode["KEY_E"] = 69] = "KEY_E";
+  KeyCode[KeyCode["KEY_F"] = 70] = "KEY_F";
+  KeyCode[KeyCode["KEY_G"] = 71] = "KEY_G";
+  KeyCode[KeyCode["KEY_H"] = 72] = "KEY_H";
+  KeyCode[KeyCode["KEY_I"] = 73] = "KEY_I";
+  KeyCode[KeyCode["KEY_J"] = 74] = "KEY_J";
+  KeyCode[KeyCode["KEY_K"] = 75] = "KEY_K";
+  KeyCode[KeyCode["KEY_L"] = 76] = "KEY_L";
+  KeyCode[KeyCode["KEY_M"] = 77] = "KEY_M";
+  KeyCode[KeyCode["KEY_N"] = 78] = "KEY_N";
+  KeyCode[KeyCode["KEY_O"] = 79] = "KEY_O";
+  KeyCode[KeyCode["KEY_P"] = 80] = "KEY_P";
+  KeyCode[KeyCode["KEY_Q"] = 81] = "KEY_Q";
+  KeyCode[KeyCode["KEY_R"] = 82] = "KEY_R";
+  KeyCode[KeyCode["KEY_S"] = 83] = "KEY_S";
+  KeyCode[KeyCode["KEY_T"] = 84] = "KEY_T";
+  KeyCode[KeyCode["KEY_U"] = 85] = "KEY_U";
+  KeyCode[KeyCode["KEY_V"] = 86] = "KEY_V";
+  KeyCode[KeyCode["KEY_W"] = 87] = "KEY_W";
+  KeyCode[KeyCode["KEY_X"] = 88] = "KEY_X";
+  KeyCode[KeyCode["KEY_Y"] = 89] = "KEY_Y";
+  KeyCode[KeyCode["KEY_Z"] = 90] = "KEY_Z";
+  KeyCode[KeyCode["Meta"] = 91] = "Meta";
+  KeyCode[KeyCode["F1"] = 112] = "F1";
+  KeyCode[KeyCode["F2"] = 113] = "F2";
+  KeyCode[KeyCode["F3"] = 114] = "F3";
+  KeyCode[KeyCode["F4"] = 115] = "F4";
+  KeyCode[KeyCode["F5"] = 116] = "F5";
+  KeyCode[KeyCode["F6"] = 117] = "F6";
+  KeyCode[KeyCode["F7"] = 118] = "F7";
+  KeyCode[KeyCode["F8"] = 119] = "F8";
+  KeyCode[KeyCode["F9"] = 120] = "F9";
+  KeyCode[KeyCode["F10"] = 121] = "F10";
+  KeyCode[KeyCode["F11"] = 122] = "F11";
+  KeyCode[KeyCode["F12"] = 123] = "F12";
+  KeyCode[KeyCode["NumLock"] = 144] = "NumLock";
+  KeyCode[KeyCode["ScrollLock"] = 145] = "ScrollLock";
+  KeyCode[KeyCode["Equal"] = 187] = "Equal";
+  KeyCode[KeyCode["Minus"] = 189] = "Minus";
+  KeyCode[KeyCode["Backquote"] = 192] = "Backquote";
+  KeyCode[KeyCode["Backslash"] = 220] = "Backslash";
+})(KeyCode || (exports.KeyCode = KeyCode = {}));
+
+let KeyMod;
+exports.KeyMod = KeyMod;
+
+(function (KeyMod) {
+  KeyMod[KeyMod["CtrlCmd"] = 2048] = "CtrlCmd";
+  KeyMod[KeyMod["Shift"] = 1024] = "Shift";
+  KeyMod[KeyMod["Alt"] = 512] = "Alt";
+  KeyMod[KeyMod["WinCtrl"] = 256] = "WinCtrl";
+})(KeyMod || (exports.KeyMod = KeyMod = {}));

package/cjs/use-keyboard/helper.d.ts

@@ -0,0 +1,3 @@
+import { KeyMod } from './codes';
+export declare const getCtrlKeysByPlatform: () => Record<string, 'metaKey' | 'ctrlKey'>;
+export declare const getActiveModMap: (bindings: number[]) => Record<keyof typeof KeyMod, boolean>;

package/cjs/use-keyboard/helper.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getActiveModMap = exports.getCtrlKeysByPlatform = void 0;
+
+var _collections = require("../utils/collections");
+
+var _codes = require("./codes");
+
+/* istanbul ignore next */
+const getCtrlKeysByPlatform = () => {
+  return {
+    CtrlCmd: (0, _collections.isMac)() ? 'metaKey' : 'ctrlKey',
+    WinCtrl: (0, _collections.isMac)() ? 'ctrlKey' : 'metaKey'
+  };
+};
+
+exports.getCtrlKeysByPlatform = getCtrlKeysByPlatform;
+
+const getActiveModMap = bindings => {
+  const modBindings = bindings.filter(item => !!_codes.KeyMod[item]);
+  const activeModMap = {
+    CtrlCmd: false,
+    Shift: false,
+    Alt: false,
+    WinCtrl: false
+  };
+  modBindings.forEach(code => {
+    const modKey = _codes.KeyMod[code];
+    activeModMap[modKey] = true;
+  });
+  return activeModMap;
+};
+
+exports.getActiveModMap = getActiveModMap;

package/cjs/use-keyboard/index.d.ts

@@ -0,0 +1,5 @@
+import useKeyboard from './use-keyboard';
+import { KeyMod, KeyCode } from './codes';
+export { KeyMod, KeyCode };
+export type { UseKeyboardHandler, KeyboardOptions, KeyboardResult, UseKeyboard } from './use-keyboard';
+export default useKeyboard;

package/cjs/use-keyboard/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useKeyboard = _interopRequireDefault(require("./use-keyboard"));
+
+var _codes = require("./codes");
+
+exports.KeyMod = _codes.KeyMod;
+exports.KeyCode = _codes.KeyCode;
+var _default = _useKeyboard.default;
+exports.default = _default;

package/cjs/use-keyboard/use-keyboard.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare type KeyboardOptions = {
+    disableGlobalEvent?: boolean;
+    stopPropagation?: boolean;
+    preventDefault?: boolean;
+    capture?: boolean;
+    event?: 'keydown' | 'keypress' | 'keyup';
+};
+export declare type KeyboardResult = {
+    bindings: {
+        onKeyDown: React.KeyboardEventHandler;
+        onKeyDownCapture: React.KeyboardEventHandler;
+        onKeyPress: React.KeyboardEventHandler;
+        onKeyPressCapture: React.KeyboardEventHandler;
+        onKeyUp: React.KeyboardEventHandler;
+        onKeyUpCapture: React.KeyboardEventHandler;
+    };
+};
+export declare type UseKeyboardHandler = (event: React.KeyboardEvent | KeyboardEvent) => void;
+export declare type UseKeyboard = (handler: UseKeyboardHandler, keyBindings: Array<number> | number, options?: KeyboardOptions) => KeyboardResult;
+declare const useKeyboard: UseKeyboard;
+export default useKeyboard;

package/cjs/use-keyboard/use-keyboard.js

@@ -0,0 +1,76 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _codes = require("./codes");
+
+var _react = require("react");
+
+var _helper = require("./helper");
+
+const useKeyboard = (handler, keyBindings, options = {}) => {
+  const bindings = Array.isArray(keyBindings) ? keyBindings : [keyBindings];
+  const {
+    disableGlobalEvent = false,
+    capture = false,
+    stopPropagation = false,
+    preventDefault = true,
+    event = 'keydown'
+  } = options;
+  const activeModMap = (0, _helper.getActiveModMap)(bindings);
+  const keyCode = bindings.filter(item => !_codes.KeyMod[item])[0];
+  const {
+    CtrlCmd,
+    WinCtrl
+  } = (0, _helper.getCtrlKeysByPlatform)();
+
+  const eventHandler = event => {
+    if (activeModMap.Shift && !event.shiftKey) return;
+    if (activeModMap.Alt && !event.altKey) return;
+    if (activeModMap.CtrlCmd && !event[CtrlCmd]) return;
+    if (activeModMap.WinCtrl && !event[WinCtrl]) return;
+    if (keyCode && event.keyCode !== keyCode) return;
+
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    if (preventDefault) {
+      event.preventDefault();
+    }
+
+    handler && handler(event);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (!disableGlobalEvent) {
+      document.addEventListener(event, eventHandler);
+    }
+
+    return () => {
+      document.removeEventListener(event, eventHandler);
+    };
+  }, [disableGlobalEvent]);
+
+  const elementBindingHandler = (elementEventType, isCapture = false) => {
+    if (elementEventType !== event) return () => {};
+    if (isCapture !== capture) return () => {};
+    return e => eventHandler(e);
+  };
+
+  return {
+    bindings: {
+      onKeyDown: elementBindingHandler('keydown'),
+      onKeyDownCapture: elementBindingHandler('keydown', true),
+      onKeyPress: elementBindingHandler('keypress'),
+      onKeyPressCapture: elementBindingHandler('keypress', true),
+      onKeyUp: elementBindingHandler('keyup'),
+      onKeyUpCapture: elementBindingHandler('keyup', true)
+    }
+  };
+};
+
+var _default = useKeyboard;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/utils/collections.d.ts

@@ -5,3 +5,6 @@ export declare const pick: <Obj extends {
     [key: string]: any;
 }, Key extends keyof Obj>(props: Key[], obj: Obj) => Pick<Obj, Key>;
 export declare const pickChild: (children: ReactNode | undefined, targetChild: React.ElementType) => [ReactNode | undefined, ReactNode | undefined];
+export declare const isChildElement: (parent: Element | null | undefined, child: Element | null | undefined) => boolean;
+export declare const isBrowser: () => boolean;
+export declare const isMac: () => boolean;

package/cjs/utils/collections.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.pickChild = exports.pick = exports.hasChild = exports.getId = void 0;
+exports.isMac = exports.isBrowser = exports.isChildElement = exports.pickChild = exports.pick = exports.hasChild = exports.getId = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -49,4 +49,32 @@ const pickChild = (children, targetChild) => {
   return [withoutTargetChildren, targetChildren];
 };
 
-exports.pickChild = pickChild;
+exports.pickChild = pickChild;
+
+const isChildElement = (parent, child) => {
+  if (!parent || !child) return false; // eslint-disable-next-line no-undef
+
+  let node = child;
+
+  while (node) {
+    if (node === parent) return true;
+    node = node.parentNode;
+  }
+
+  return false;
+};
+
+exports.isChildElement = isChildElement;
+
+const isBrowser = () => {
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+};
+
+exports.isBrowser = isBrowser;
+
+const isMac = () => {
+  if (!isBrowser()) return false;
+  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+};
+
+exports.isMac = isMac;