@prom-ui/core 2.5.0 → 3.0.0-alpha.0

package/useColorScheme/cjs/index.development.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var BodyProvider = require('@prom-ui/core/BodyProvider');
+var ColorScheme = require('@prom-ui/core/ColorScheme');
+
+/** Можливі значення теми інтерфейсу */
+
+var DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+var subscribeToSystemDark = function subscribeToSystemDark(cb) {
+  var mq = window.matchMedia(DARK_MEDIA_QUERY);
+  mq.addEventListener('change', cb);
+  return function () {
+    return mq.removeEventListener('change', cb);
+  };
+};
+var getSystemDarkSnapshot = function getSystemDarkSnapshot() {
+  return window.matchMedia(DARK_MEDIA_QUERY).matches;
+};
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+
+/**
+ * Хук для керування темою інтерфейсу.
+ *
+ * Повертає поточне значення теми, функцію для її зміни та прапор `isDarkMode`.
+ * При `colorScheme === 'auto'` `isDarkMode` відображає реальний стан системної теми.
+ *
+ * Якщо хук викликається всередині `<ColorScheme>`, локальна тема має пріоритет над глобальною.
+ * `setColorScheme` завжди змінює глобальну тему незалежно від локального контексту.
+ *
+ * Потребує `<BodyProvider>` у дереві компонентів.
+ *
+ * @example
+ * const { colorScheme, setColorScheme, isDarkMode } = useColorScheme();
+ * setColorScheme(isDarkMode ? 'light' : 'dark');
+ */
+var useColorScheme = function useColorScheme() {
+  var localScheme = react.useContext(ColorScheme.ColorSchemeContext);
+  var globalColorScheme = BodyProvider.useBodyStore(function (s) {
+    return s.colorSchemeValue;
+  });
+  var setColorScheme = BodyProvider.useBodyStore(function (s) {
+    return s.colorSchemeSet;
+  });
+  var systemPrefersDark = react.useSyncExternalStore(subscribeToSystemDark, getSystemDarkSnapshot, getServerSnapshot);
+
+  // якщо хук всередині <ColorScheme value="...">, пріоритет за локальною темою
+  var colorScheme = localScheme || globalColorScheme;
+  var isDarkMode = colorScheme === 'dark' || colorScheme === 'auto' && systemPrefersDark;
+  return {
+    colorScheme: colorScheme,
+    setColorScheme: setColorScheme,
+    isDarkMode: isDarkMode
+  };
+};
+
+exports.useColorScheme = useColorScheme;

package/useColorScheme/cjs/index.development.v2.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var BodyProvider = require('@prom-ui/core/BodyProvider');
+var ColorScheme = require('@prom-ui/core/ColorScheme');
+
+/** Можливі значення теми інтерфейсу */
+
+var DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+var subscribeToSystemDark = function subscribeToSystemDark(cb) {
+  var mq = window.matchMedia(DARK_MEDIA_QUERY);
+  mq.addEventListener('change', cb);
+  return function () {
+    return mq.removeEventListener('change', cb);
+  };
+};
+var getSystemDarkSnapshot = function getSystemDarkSnapshot() {
+  return window.matchMedia(DARK_MEDIA_QUERY).matches;
+};
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+
+/**
+ * Хук для керування темою інтерфейсу.
+ *
+ * Повертає поточне значення теми, функцію для її зміни та прапор `isDarkMode`.
+ * При `colorScheme === 'auto'` `isDarkMode` відображає реальний стан системної теми.
+ *
+ * Якщо хук викликається всередині `<ColorScheme>`, локальна тема має пріоритет над глобальною.
+ * `setColorScheme` завжди змінює глобальну тему незалежно від локального контексту.
+ *
+ * Потребує `<BodyProvider>` у дереві компонентів.
+ *
+ * @example
+ * const { colorScheme, setColorScheme, isDarkMode } = useColorScheme();
+ * setColorScheme(isDarkMode ? 'light' : 'dark');
+ */
+var useColorScheme = function useColorScheme() {
+  var localScheme = react.useContext(ColorScheme.ColorSchemeContext);
+  var globalColorScheme = BodyProvider.useBodyStore(function (s) {
+    return s.colorSchemeValue;
+  });
+  var setColorScheme = BodyProvider.useBodyStore(function (s) {
+    return s.colorSchemeSet;
+  });
+  var systemPrefersDark = react.useSyncExternalStore(subscribeToSystemDark, getSystemDarkSnapshot, getServerSnapshot);
+
+  // якщо хук всередині <ColorScheme value="...">, пріоритет за локальною темою
+  var colorScheme = localScheme || globalColorScheme;
+  var isDarkMode = colorScheme === 'dark' || colorScheme === 'auto' && systemPrefersDark;
+  return {
+    colorScheme: colorScheme,
+    setColorScheme: setColorScheme,
+    isDarkMode: isDarkMode
+  };
+};
+
+exports.useColorScheme = useColorScheme;

package/useColorScheme/cjs/index.production.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/core/BodyProvider"),o=require("@prom-ui/core/ColorScheme"),t="(prefers-color-scheme: dark)",n=function(e){var r=window.matchMedia(t);return r.addEventListener("change",e),function(){return r.removeEventListener("change",e)}},c=function(){return window.matchMedia(t).matches},u=function(){return!1};exports.useColorScheme=function(){var t=e.useContext(o.ColorSchemeContext),i=r.useBodyStore(function(e){return e.colorSchemeValue}),a=r.useBodyStore(function(e){return e.colorSchemeSet}),s=e.useSyncExternalStore(n,c,u),d=t||i;return{colorScheme:d,setColorScheme:a,isDarkMode:"dark"===d||"auto"===d&&s}};

package/useColorScheme/cjs/index.production.v2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/core/BodyProvider"),o=require("@prom-ui/core/ColorScheme"),t="(prefers-color-scheme: dark)",n=function(e){var r=window.matchMedia(t);return r.addEventListener("change",e),function(){return r.removeEventListener("change",e)}},c=function(){return window.matchMedia(t).matches},u=function(){return!1};exports.useColorScheme=function(){var t=e.useContext(o.ColorSchemeContext),i=r.useBodyStore(function(e){return e.colorSchemeValue}),a=r.useBodyStore(function(e){return e.colorSchemeSet}),s=e.useSyncExternalStore(n,c,u),d=t||i;return{colorScheme:d,setColorScheme:a,isDarkMode:"dark"===d||"auto"===d&&s}};

package/useColorScheme/index.d.ts

@@ -0,0 +1,31 @@
+import { type BodyProviderProps } from '@prom-ui/core/BodyProvider';
+/** Можливі значення теми інтерфейсу */
+export type ColorSchemeValue = NonNullable<BodyProviderProps['colorScheme']>;
+export type UseColorScheme = () => {
+    /** Поточне вибране значення теми (`light`, `dark` або `auto`) */
+    colorScheme: ColorSchemeValue;
+    /** Встановити нову тему */
+    setColorScheme: (value: ColorSchemeValue) => void;
+    /**
+     * Чи активна темна тема прямо зараз.
+     * При `colorScheme === 'auto'` враховує системні налаштування користувача.
+     * На SSR завжди `false`.
+     */
+    isDarkMode: boolean;
+};
+/**
+ * Хук для керування темою інтерфейсу.
+ *
+ * Повертає поточне значення теми, функцію для її зміни та прапор `isDarkMode`.
+ * При `colorScheme === 'auto'` `isDarkMode` відображає реальний стан системної теми.
+ *
+ * Якщо хук викликається всередині `<ColorScheme>`, локальна тема має пріоритет над глобальною.
+ * `setColorScheme` завжди змінює глобальну тему незалежно від локального контексту.
+ *
+ * Потребує `<BodyProvider>` у дереві компонентів.
+ *
+ * @example
+ * const { colorScheme, setColorScheme, isDarkMode } = useColorScheme();
+ * setColorScheme(isDarkMode ? 'light' : 'dark');
+ */
+export declare const useColorScheme: UseColorScheme;

package/useColorScheme/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.js');
+} else {
+    module.exports = require('./cjs/index.development.js');
+}

package/useColorScheme/index.v2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.v2.js');
+} else {
+    module.exports = require('./cjs/index.development.v2.js');
+}

package/useColorScheme/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@prom-ui/core/useColorScheme",
+  "version": "3.0.0-alpha.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/useDebounce/cjs/index.development.js

@@ -10,28 +10,21 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultCompat(_slicedToArray);
 
 /**
- * Reack hook
+ * Хук для відкладеного оновлення значення після заданої затримки.
  */
 var useDebounce = function useDebounce(value, delay) {
-  // State and setters for debounced value
   var _useState = react.useState(value),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     debouncedValue = _useState2[0],
     setDebouncedValue = _useState2[1];
   react.useEffect(function () {
-    // Update debounced value after delay
     var handler = setTimeout(function () {
       setDebouncedValue(value);
     }, delay);
-
-    // Cancel the timeout if value changes (also on delay change or unmount)
-    // This is how we prevent debounced value from updating if value is changed ...
-    // .. within the delay period. Timeout gets cleared and restarted.
     return function () {
       clearTimeout(handler);
     };
-  }, [value, delay] // Only re-call effect if value or delay changes
-  );
+  }, [value, delay]);
   return debouncedValue;
 };
 

package/useDebounce/cjs/index.development.v2.js

@@ -10,28 +10,21 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultCompat(_slicedToArray);
 
 /**
- * Reack hook
+ * Хук для відкладеного оновлення значення після заданої затримки.
  */
 var useDebounce = function useDebounce(value, delay) {
-  // State and setters for debounced value
   var _useState = react.useState(value),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     debouncedValue = _useState2[0],
     setDebouncedValue = _useState2[1];
   react.useEffect(function () {
-    // Update debounced value after delay
     var handler = setTimeout(function () {
       setDebouncedValue(value);
     }, delay);
-
-    // Cancel the timeout if value changes (also on delay change or unmount)
-    // This is how we prevent debounced value from updating if value is changed ...
-    // .. within the delay period. Timeout gets cleared and restarted.
     return function () {
       clearTimeout(handler);
     };
-  }, [value, delay] // Only re-call effect if value or delay changes
-  );
+  }, [value, delay]);
   return debouncedValue;
 };
 

package/useDebounce/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(e);exports.useDebounce=function(e,r){var n=t.useState(e),o=u.default(n,2),i=o[0],a=o[1];return t.useEffect((function(){var t=setTimeout((function(){a(e)}),r);return function(){clearTimeout(t)}}),[e,r]),i};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(e);exports.useDebounce=function(e,r){var n=t.useState(e),o=u.default(n,2),i=o[0],a=o[1];return t.useEffect(function(){var t=setTimeout(function(){a(e)},r);return function(){clearTimeout(t)}},[e,r]),i};

package/useDebounce/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(e);exports.useDebounce=function(e,r){var n=t.useState(e),o=u.default(n,2),i=o[0],a=o[1];return t.useEffect((function(){var t=setTimeout((function(){a(e)}),r);return function(){clearTimeout(t)}}),[e,r]),i};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(e);exports.useDebounce=function(e,r){var n=t.useState(e),o=u.default(n,2),i=o[0],a=o[1];return t.useEffect(function(){var t=setTimeout(function(){a(e)},r);return function(){clearTimeout(t)}},[e,r]),i};

package/useDebounce/index.d.ts

@@ -1,4 +1,4 @@
 /**
- * Reack hook
+ * Хук для відкладеного оновлення значення після заданої затримки.
  */
 export declare const useDebounce: <T>(value: T, delay: number) => T;

package/useDebounce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/useDebounce",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/useForwardRef/cjs/index.development.js

@@ -25,7 +25,7 @@ function _interopNamespaceCompat(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 
 /**
- * React hook that permits to use the forwarded ref, or a fallback when it's not provided.
+ * Хук для використання переданого ref або запасного значення, якщо ref не передано.
  */
 var useForwardRef = function useForwardRef(ref) {
   var initialValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;

package/useForwardRef/cjs/index.development.v2.js

@@ -25,7 +25,7 @@ function _interopNamespaceCompat(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 
 /**
- * React hook that permits to use the forwarded ref, or a fallback when it's not provided.
+ * Хук для використання переданого ref або запасного значення, якщо ref не передано.
  */
 var useForwardRef = function useForwardRef(ref) {
   var initialValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;

package/useForwardRef/cjs/index.production.js

@@ -1 +1 @@
-"use strict";function e(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.useForwardRef=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=t.useRef(r);return t.useEffect((function(){return e&&("function"==typeof e?e(n.current):e.current=n.current),function(){}}),[e]),n};
+"use strict";function e(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.useForwardRef=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=t.useRef(r);return t.useEffect(function(){return e&&("function"==typeof e?e(n.current):e.current=n.current),function(){}},[e]),n};

package/useForwardRef/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";function e(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.useForwardRef=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=t.useRef(r);return t.useEffect((function(){return e&&("function"==typeof e?e(n.current):e.current=n.current),function(){}}),[e]),n};
+"use strict";function e(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.useForwardRef=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=t.useRef(r);return t.useEffect(function(){return e&&("function"==typeof e?e(n.current):e.current=n.current),function(){}},[e]),n};

package/useForwardRef/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 /**
- * React hook that permits to use the forwarded ref, or a fallback when it's not provided.
+ * Хук для використання переданого ref або запасного значення, якщо ref не передано.
  */
 export declare const useForwardRef: <T>(ref: React.ForwardedRef<T>, initialValue?: T | null) => React.RefObject<T | null>;

package/useForwardRef/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/useForwardRef",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/useInView/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/useInView",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/useIsMounted/cjs/index.development.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 
 /**
- * Reack hook
+ * Хук для визначення, чи змонтовано компонент у DOM.
  */
 var useIsMounted = function useIsMounted() {
   var ref = react.useRef(false);

package/useIsMounted/cjs/index.development.v2.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 
 /**
- * Reack hook
+ * Хук для визначення, чи змонтовано компонент у DOM.
  */
 var useIsMounted = function useIsMounted() {
   var ref = react.useRef(false);

package/useIsMounted/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useIsMounted=function(){var r=e.useRef(!1);return e.useEffect((function(){return r.current=!0,function(){r.current=!1}}),[]),r.current};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useIsMounted=function(){var r=e.useRef(!1);return e.useEffect(function(){return r.current=!0,function(){r.current=!1}},[]),r.current};

package/useIsMounted/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useIsMounted=function(){var r=e.useRef(!1);return e.useEffect((function(){return r.current=!0,function(){r.current=!1}}),[]),r.current};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useIsMounted=function(){var r=e.useRef(!1);return e.useEffect(function(){return r.current=!0,function(){r.current=!1}},[]),r.current};

package/useIsMounted/index.d.ts

@@ -1,4 +1,4 @@
 /**
- * Reack hook
+ * Хук для визначення, чи змонтовано компонент у DOM.
  */
 export declare const useIsMounted: () => boolean;

package/useIsMounted/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/useIsMounted",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/useKeyPress/cjs/index.development.js

@@ -29,16 +29,13 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefaultCompat(_slicedToArray)
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 
 /**
- * Reack hook
+ * Хук для відстеження натиснення/відпускання певної клавіші клавіатури.
  */
 var useKeyPress = function useKeyPress(targetKey, handleKeyDown, handleKeyUp) {
-  // State for keeping track of whether key is pressed
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _slicedToArray__default.default(_React$useState, 2),
     keyPressed = _React$useState2[0],
     setKeyPressed = _React$useState2[1];
-
-  // If pressed key is our target key then set to true
   var downHandler = function downHandler(event) {
     if (event.key === targetKey) {
       if (handleKeyDown) {
@@ -48,8 +45,6 @@ var useKeyPress = function useKeyPress(targetKey, handleKeyDown, handleKeyUp) {
       }
     }
   };
-
-  // If released key is our target key then set to false
   var upHandler = function upHandler(event) {
     if (event.key === targetKey) {
       if (handleKeyUp) {
@@ -59,12 +54,9 @@ var useKeyPress = function useKeyPress(targetKey, handleKeyDown, handleKeyUp) {
       }
     }
   };
-
-  // Add event listeners
   React__namespace.useEffect(function () {
     window.addEventListener('keydown', downHandler);
     window.addEventListener('keyup', upHandler);
-    // Remove event listeners on cleanup
     return function () {
       window.removeEventListener('keydown', downHandler);
       window.removeEventListener('keyup', upHandler);

package/useKeyPress/cjs/index.development.v2.js

@@ -29,16 +29,13 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefaultCompat(_slicedToArray)
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 
 /**
- * Reack hook
+ * Хук для відстеження натиснення/відпускання певної клавіші клавіатури.
  */
 var useKeyPress = function useKeyPress(targetKey, handleKeyDown, handleKeyUp) {
-  // State for keeping track of whether key is pressed
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _slicedToArray__default.default(_React$useState, 2),
     keyPressed = _React$useState2[0],
     setKeyPressed = _React$useState2[1];
-
-  // If pressed key is our target key then set to true
   var downHandler = function downHandler(event) {
     if (event.key === targetKey) {
       if (handleKeyDown) {
@@ -48,8 +45,6 @@ var useKeyPress = function useKeyPress(targetKey, handleKeyDown, handleKeyUp) {
       }
     }
   };
-
-  // If released key is our target key then set to false
   var upHandler = function upHandler(event) {
     if (event.key === targetKey) {
       if (handleKeyUp) {
@@ -59,12 +54,9 @@ var useKeyPress = function useKeyPress(targetKey, handleKeyDown, handleKeyUp) {
       }
     }
   };
-
-  // Add event listeners
   React__namespace.useEffect(function () {
     window.addEventListener('keydown', downHandler);
     window.addEventListener('keyup', upHandler);
-    // Remove event listeners on cleanup
     return function () {
       window.removeEventListener('keydown', downHandler);
       window.removeEventListener('keyup', upHandler);

package/useKeyPress/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=r(e),o=n(t);exports.useKeyPress=function(e,t,r){var n=o.useState(!1),i=u.default(n,2),f=i[0],c=i[1],a=function(r){r.key===e&&(t?t(r):c(!0))},d=function(t){t.key===e&&(r?r(t):c(!1))};return o.useEffect((function(){return window.addEventListener("keydown",a),window.addEventListener("keyup",d),function(){window.removeEventListener("keydown",a),window.removeEventListener("keyup",d)}}),[e,t,r]),f};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var u=r(e),o=n(t);exports.useKeyPress=function(e,t,r){var n=o.useState(!1),i=u.default(n,2),f=i[0],c=i[1],a=function(r){r.key===e&&(t?t(r):c(!0))},d=function(t){t.key===e&&(r?r(t):c(!1))};return o.useEffect(function(){return window.addEventListener("keydown",a),window.addEventListener("keyup",d),function(){window.removeEventListener("keydown",a),window.removeEventListener("keyup",d)}},[e,t,r]),f};

package/useKeyPress/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=r(e),o=n(t);exports.useKeyPress=function(e,t,r){var n=o.useState(!1),i=u.default(n,2),f=i[0],c=i[1],a=function(r){r.key===e&&(t?t(r):c(!0))},d=function(t){t.key===e&&(r?r(t):c(!1))};return o.useEffect((function(){return window.addEventListener("keydown",a),window.addEventListener("keyup",d),function(){window.removeEventListener("keydown",a),window.removeEventListener("keyup",d)}}),[e,t,r]),f};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var u=r(e),o=n(t);exports.useKeyPress=function(e,t,r){var n=o.useState(!1),i=u.default(n,2),f=i[0],c=i[1],a=function(r){r.key===e&&(t?t(r):c(!0))},d=function(t){t.key===e&&(r?r(t):c(!1))};return o.useEffect(function(){return window.addEventListener("keydown",a),window.addEventListener("keyup",d),function(){window.removeEventListener("keydown",a),window.removeEventListener("keyup",d)}},[e,t,r]),f};

package/useKeyPress/index.d.ts

@@ -1,6 +1,6 @@
 type handleFn = (e: KeyboardEvent) => void;
 /**
- * Reack hook
+ * Хук для відстеження натиснення/відпускання певної клавіші клавіатури.
  */
 export declare const useKeyPress: (targetKey: string, handleKeyDown?: handleFn, handleKeyUp?: handleFn) => boolean;
 export {};

package/useKeyPress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/useKeyPress",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/useMedia/cjs/index.development.js

@@ -12,7 +12,7 @@ var SCREEN_BREAKPOINTS = {
   huge: 1400
 };
 /**
- * Хук позволяет определять текущее состояние медиа-запроса и обновлять его при изменении размера окна браузера.
+ * Хук для визначення поточного стану медіазапиту з оновленням при зміні розміру вікна браузера.
  */
 var useMedia = function useMedia(_ref) {
   var minWidth = _ref.minWidth,

package/useMedia/cjs/index.development.v2.js

@@ -12,7 +12,7 @@ var SCREEN_BREAKPOINTS = {
   huge: 1400
 };
 /**
- * Хук позволяет определять текущее состояние медиа-запроса и обновлять его при изменении размера окна браузера.
+ * Хук для визначення поточного стану медіазапиту з оновленням при зміні розміру вікна браузера.
  */
 var useMedia = function useMedia(_ref) {
   var minWidth = _ref.minWidth,

package/useMedia/index.d.ts

@@ -7,15 +7,15 @@ export declare const SCREEN_BREAKPOINTS: {
 };
 export type useMedia = (arg: {
     /**
-     * Аналог CSS медиа правила `@media (min-width: ...)`
+     * Аналог CSS-медіаправила `@media (min-width: ...)`
      */
     minWidth?: keyof typeof SCREEN_BREAKPOINTS;
     /**
-     * Аналог CSS медиа правила `@media (max-width: ...)`
+     * Аналог CSS-медіаправила `@media (max-width: ...)`
      */
     maxWidth?: keyof typeof SCREEN_BREAKPOINTS;
 }) => boolean;
 /**
- * Хук позволяет определять текущее состояние медиа-запроса и обновлять его при изменении размера окна браузера.
+ * Хук для визначення поточного стану медіазапиту з оновленням при зміні розміру вікна браузера.
  */
 export declare const useMedia: useMedia;

package/useMedia/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/useMedia",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/useOutsideClick/cjs/index.development.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var useOutsideClickRef__default = /*#__PURE__*/_interopDefaultCompat(useOutsideClickRef);
 
 /**
- * Reack hook
+ * Хук для відстеження кліку за межами заданого елемента.
  */
 var useOutsideClick = useOutsideClickRef__default.default;
 

package/useOutsideClick/cjs/index.development.v2.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var useOutsideClickRef__default = /*#__PURE__*/_interopDefaultCompat(useOutsideClickRef);
 
 /**
- * Reack hook
+ * Хук для відстеження кліку за межами заданого елемента.
  */
 var useOutsideClick = useOutsideClickRef__default.default;
 

package/useOutsideClick/index.d.ts

@@ -1,5 +1,5 @@
 import useOutsideClickRef from '@rooks/use-outside-click-ref';
 /**
- * Reack hook
+ * Хук для відстеження кліку за межами заданого елемента.
  */
 export declare const useOutsideClick: typeof useOutsideClickRef;

package/useOutsideClick/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/useOutsideClick",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [