react-responsive-tools 2.1.4 → 2.2.0

package/README.MD

@@ -8,6 +8,14 @@ The package is based on [react-responsive](https://www.npmjs.com/package/react-r
 
 To install the project, run the following command:
 
+### Установка
+
+Пожалуйста, убедитесь, что вы установили следующие зависимости:
+
+```sh
+yarn add react-responsive
+```
+
 ```sh
 # Using Yarn
 yarn add react-responsive-tools

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './hooks/useBreakpoint';
+export * from './hooks/useVBreakpoint';
+export * from './components/horizontal';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "",
-  "main": "index.js",
-  "module": "index.js",
-  "types": "index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "type": "module",
   "scripts": {
     "dev": "webpack --mode development --watch",
+    "start": "webpack serve --config webpack.config.js --env development=true",
     "tsc": "tsc",
     "test": "jest",
     "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
@@ -18,11 +19,7 @@
   },
   "files": [
     "src",
-    "*.ts",
-    "*.scss",
-    "index.js",
-    "reinit.sh",
-    "index.d.ts"
+    "reinit.sh"
   ],
   "keywords": [
     "react",
@@ -33,6 +30,8 @@
   "author": "westprophet",
   "license": "ISC",
   "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-responsive": "^10.0.0"
   },
   "devDependencies": {
@@ -45,8 +44,8 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^22.5.4",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.4.0",
-    "@typescript-eslint/parser": "^8.4.0",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
@@ -56,10 +55,13 @@
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-webpack-plugin": "^4.2.0",
     "file-loader": "^6.2.0",
     "husky": "^9.1.5",
     "jest": "^29.7.0",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "sass": "^1.78.0",
@@ -74,5 +76,8 @@
   },
   "bin": {
     "react-responsive-tools": "bin/react-responsive-tools.mjs"
+  },
+  "dependencies": {
+    "react-responsive": "^10.0.0"
   }
 }

package/reinit.sh

@@ -1,43 +1,49 @@
 #!/bin/bash
 
-# Получение директории, в которой расположен текущий скрипт
-SCRIPT_DIR=$(dirname "$0")
-PACKAGE_DIR=$(cd "$SCRIPT_DIR" && pwd)
+# Путь до каталога dist
+DIST_DIR="./dist"
+SCRIPT_DIR="$DIST_DIR/scripts"
+
+# Проверка наличия каталога dist/scripts
+if [ ! -d "$SCRIPT_DIR" ]; then
+  echo "Scripts directory $SCRIPT_DIR does not exist."
+  exit 1
+fi
 
-# Запуск createConfig.mjs из пакета
+# Запуск createConfig.mjs из dist/scripts
 echo "Running createConfig.mjs from package..."
-node "$PACKAGE_DIR/src/scripts/createConfig.mjs"
+node "$SCRIPT_DIR/createConfig.mjs"
 
 if [ $? -ne 0 ]; then
-echo "Error occurred while running createConfig.mjs"
-exit 1
+  echo "Error occurred while running createConfig.mjs"
+  exit 1
 fi
 
-# Запуск generateCustomBreakpointsSCSS.mjs из пакета
+# Запуск generateCustomBreakpointsSCSS.mjs из dist/scripts
 echo "Running generateCustomBreakpointsSCSS.mjs from package..."
-node "$PACKAGE_DIR/src/scripts/generateCustomBreakpointsSCSS.mjs"
+node "$SCRIPT_DIR/generateCustomBreakpointsSCSS.mjs"
 
 if [ $? -ne 0 ]; then
-echo "Error occurred while running generateCustomBreakpointsSCSS.mjs"
-exit 1
+  echo "Error occurred while running generateCustomBreakpointsSCSS.mjs"
+  exit 1
 fi
 
-# Запуск generateSCSS.mjs из пакета
+# Запуск generateSCSS.mjs из dist/scripts
 echo "Running generateSCSS.mjs from package..."
-node "$PACKAGE_DIR/src/scripts/generateSCSS.mjs"
+node "$SCRIPT_DIR/generateSCSS.mjs"
 
 if [ $? -ne 0 ]; then
-echo "Error occurred while running generateSCSS.mjs"
-exit 1
+  echo "Error occurred while running generateSCSS.mjs"
+  exit 1
 fi
 
-# Запуск generateTBreakpoint.mjs из пакета
+# Запуск generateTBreakpoint.mjs из dist/scripts
 echo "Running generateTBreakpoint.mjs from package..."
-node "$PACKAGE_DIR/src/scripts/generateTBreakpoint.mjs"
+node "$SCRIPT_DIR/generateTBreakpoint.mjs"
 
 if [ $? -ne 0 ]; then
-echo "Error occurred while running generateTBreakpoint.mjs"
-exit 1
+  echo "Error occurred while running generateTBreakpoint.mjs"
+  exit 1
 fi
 
 echo "All scripts have been executed successfully."

package/src/{breakpoints.config.mjs → breakpoints.config.ts}

@@ -1,6 +1,6 @@
+// src/breakpoints.config.ts
 
-// breakpoints.config.mjs
-const HORIZONTAL_BREAKPOINTS = {
+const HORIZONTAL_BREAKPOINTS: Record<string, string> = {
   "xs": "320px",
   "sm": "576px",
   "md": "768px",
@@ -13,7 +13,7 @@ const HORIZONTAL_BREAKPOINTS = {
   "qxl": "3840px"
 };
 
-const VERTICAL_BREAKPOINTS = {
+const VERTICAL_BREAKPOINTS: Record<string, string> = {
   "xs": "600px",
   "sm": "800px",
   "md": "1000px",

package/src/components/horizontal.tsx

@@ -2,11 +2,13 @@
  * Created by westp on 15.05.2023
  */
 
+import React from "react";
+
 import { TBreakpoint } from '../interfaces/TBreakpoint';
 import { useBreakpointDF, useBreakpointMF } from '../hooks/useBreakpoint';
 
 interface Props {
-  children: any;
+  children: React.ReactNode;
 }
 
 interface ForComponentProps extends Props {

package/src/functions/getBreakpoint.ts

@@ -1,4 +1,4 @@
-// @ts-ignore
+
 import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config';
 import { TBreakpoint, TVerticalBreakpoint } from '../interfaces/TBreakpoint';
 

package/src/hooks/useVBreakpoint.ts

@@ -3,7 +3,7 @@ import { useMediaQuery } from 'react-responsive';
 import { TVerticalBreakpoint } from '../interfaces/TBreakpoint';
 import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
 import useVariant from './useVariant';
-import getBreakpoint, {getVBreakpoint} from "../functions/getBreakpoint";
+import  {getVBreakpoint} from "../functions/getBreakpoint";
 
 export default function useVBreakpoint(b: TVerticalBreakpoint | number, variant: TAdaptiveVariant = 'MtF') {
   const _bp = typeof b === 'number' ? b + 'px' :  getVBreakpoint(b);

package/src/index.scss

@@ -0,0 +1,4 @@
+@import "./scss/vertical";
+@import "./scss/horizontal";
+@import "./scss/horizontal-breakpoints";
+@import "./scss/vertical-breakpoints";

package/src/scripts/generateCustomBreakpointsSCSS.mjs

@@ -2,7 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url'; // Импортируем необходимую функцию из 'url'
-import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.mjs';
+import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.ts';
 
 // Определение __filename и __dirname
 const __filename = fileURLToPath(import.meta.url);

package/src/scripts/generateSCSS.mjs

@@ -2,7 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.mjs';
+import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.ts';
 
 // Определение __filename и __dirname
 const __filename = fileURLToPath(import.meta.url);
@@ -12,12 +12,12 @@ const __dirname = path.dirname(__filename);
 const generateHorizontalSCSS = (breakpoints) => {
   const beforeMixins = Object.keys(breakpoints).map(bp => `
 /**
- * Mixin for applying styles for screens greater than or equal to ${breakpoints[bp]}px.
- * Usage:
- * 
- * @include for-${bp} {
+ * @mixin for-${bp}
+ * @description Mixin for applying styles for screens greater than or equal to ${breakpoints[bp]}px.
+ * @example
+ *  @include for-${bp} {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-${bp}() {
   @include mob-first(${bp}) {
@@ -27,12 +27,12 @@ const generateHorizontalSCSS = (breakpoints) => {
 
   const afterMixins = Object.keys(breakpoints).map(bp => `
 /**
- * Mixin for applying styles for screens less than ${breakpoints[bp]}px.
- * Usage:
- * 
- * @include before-${bp} {
+ * @mixin before-${bp}
+ * @description Mixin for applying styles for screens less than ${breakpoints[bp]}px.
+ * @example
+ *  @include before-${bp} {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-${bp}() {
   @include desk-first(${bp}) {
@@ -53,12 +53,12 @@ ${afterMixins}
 const generateVerticalSCSS = (breakpoints) => {
   const beforeMixins = Object.keys(breakpoints).map(bp => `
 /**
- * Mixin for applying styles for screens with height greater than or equal to ${breakpoints[bp]}px.
- * Usage:
- * 
- * @include v-for-${bp} {
+ * @mixin v-for-${bp}
+ * @description Mixin for applying styles for screens with height greater than or equal to ${breakpoints[bp]}px.
+ * @example
+ *  @include v-for-${bp} {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-for-${bp}() {
   @include v-mob-first(${bp}) {
@@ -68,12 +68,12 @@ const generateVerticalSCSS = (breakpoints) => {
 
   const afterMixins = Object.keys(breakpoints).map(bp => `
 /**
- * Mixin for applying styles for screens with height less than ${breakpoints[bp]}px.
- * Usage:
- * 
- * @include v-before-${bp} {
+ * @mixin v-before-${bp}
+ * @description Mixin for applying styles for screens with height less than ${breakpoints[bp]}px.
+ * @example
+ *  @include v-before-${bp} {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-before-${bp}() {
   @include v-desk-first(${bp}) {

package/src/scripts/generateTBreakpoint.mjs

@@ -2,7 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.mjs';
+import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.ts';
 
 // Определение __filename и __dirname
 const __filename = fileURLToPath(import.meta.url);

package/src/scss/_horizontal-breakpoints.scss

@@ -3,12 +3,12 @@
 
 
 /**
- * Mixin for applying styles for screens greater than or equal to 320pxpx.
- * Usage:
- * 
- * @include for-xs {
+ * @mixin for-xs
+ * @description Mixin for applying styles for screens greater than or equal to 320pxpx.
+ * @example
+ *  @include for-xs {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-xs() {
   @include mob-first(xs) {
@@ -16,13 +16,14 @@
   }
 }
 
+
 /**
- * Mixin for applying styles for screens greater than or equal to 576pxpx.
- * Usage:
- * 
- * @include for-sm {
+ * @mixin for-sm
+ * @description Mixin for applying styles for screens greater than or equal to 576pxpx.
+ * @example
+ *  @include for-sm {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-sm() {
   @include mob-first(sm) {
@@ -31,12 +32,12 @@
 }
 
 /**
- * Mixin for applying styles for screens greater than or equal to 768pxpx.
- * Usage:
- * 
- * @include for-md {
+ * @mixin for-md
+ * @description Mixin for applying styles for screens greater than or equal to 768pxpx.
+ * @example
+ *  @include for-md {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-md() {
   @include mob-first(md) {
@@ -45,12 +46,12 @@
 }
 
 /**
- * Mixin for applying styles for screens greater than or equal to 992pxpx.
- * Usage:
- * 
- * @include for-lg {
+ * @mixin for-lg
+ * @description Mixin for applying styles for screens greater than or equal to 992pxpx.
+ * @example
+ *  @include for-lg {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-lg() {
   @include mob-first(lg) {
@@ -59,12 +60,12 @@
 }
 
 /**
- * Mixin for applying styles for screens greater than or equal to 1024pxpx.
- * Usage:
- * 
- * @include for-lt {
+ * @mixin for-lt
+ * @description Mixin for applying styles for screens greater than or equal to 1024pxpx.
+ * @example
+ *  @include for-lt {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-lt() {
   @include mob-first(lt) {
@@ -73,12 +74,12 @@
 }
 
 /**
- * Mixin for applying styles for screens greater than or equal to 1200pxpx.
- * Usage:
- * 
- * @include for-ltm {
+ * @mixin for-ltm
+ * @description Mixin for applying styles for screens greater than or equal to 1200pxpx.
+ * @example
+ *  @include for-ltm {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-ltm() {
   @include mob-first(ltm) {
@@ -87,12 +88,12 @@
 }
 
 /**
- * Mixin for applying styles for screens greater than or equal to 1440pxpx.
- * Usage:
- * 
- * @include for-ltl {
+ * @mixin for-ltl
+ * @description Mixin for applying styles for screens greater than or equal to 1440pxpx.
+ * @example
+ *  @include for-ltl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-ltl() {
   @include mob-first(ltl) {
@@ -101,12 +102,12 @@
 }
 
 /**
- * Mixin for applying styles for screens greater than or equal to 1920pxpx.
- * Usage:
- * 
- * @include for-xl {
+ * @mixin for-xl
+ * @description Mixin for applying styles for screens greater than or equal to 1920pxpx.
+ * @example
+ *  @include for-xl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-xl() {
   @include mob-first(xl) {
@@ -115,12 +116,12 @@
 }
 
 /**
- * Mixin for applying styles for screens greater than or equal to 2560pxpx.
- * Usage:
- * 
- * @include for-xxl {
+ * @mixin for-xxl
+ * @description Mixin for applying styles for screens greater than or equal to 2560pxpx.
+ * @example
+ *  @include for-xxl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-xxl() {
   @include mob-first(xxl) {
@@ -129,12 +130,12 @@
 }
 
 /**
- * Mixin for applying styles for screens greater than or equal to 3840pxpx.
- * Usage:
- * 
- * @include for-qxl {
+ * @mixin for-qxl
+ * @description Mixin for applying styles for screens greater than or equal to 3840pxpx.
+ * @example
+ *  @include for-qxl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin for-qxl() {
   @include mob-first(qxl) {
@@ -144,12 +145,12 @@
 
 
 /**
- * Mixin for applying styles for screens less than 320pxpx.
- * Usage:
- * 
- * @include before-xs {
+ * @mixin before-xs
+ * @description Mixin for applying styles for screens less than 320pxpx.
+ * @example
+ *  @include before-xs {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-xs() {
   @include desk-first(xs) {
@@ -158,12 +159,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 576pxpx.
- * Usage:
- * 
- * @include before-sm {
+ * @mixin before-sm
+ * @description Mixin for applying styles for screens less than 576pxpx.
+ * @example
+ *  @include before-sm {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-sm() {
   @include desk-first(sm) {
@@ -172,12 +173,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 768pxpx.
- * Usage:
- * 
- * @include before-md {
+ * @mixin before-md
+ * @description Mixin for applying styles for screens less than 768pxpx.
+ * @example
+ *  @include before-md {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-md() {
   @include desk-first(md) {
@@ -186,12 +187,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 992pxpx.
- * Usage:
- * 
- * @include before-lg {
+ * @mixin before-lg
+ * @description Mixin for applying styles for screens less than 992pxpx.
+ * @example
+ *  @include before-lg {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-lg() {
   @include desk-first(lg) {
@@ -200,12 +201,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 1024pxpx.
- * Usage:
- * 
- * @include before-lt {
+ * @mixin before-lt
+ * @description Mixin for applying styles for screens less than 1024pxpx.
+ * @example
+ *  @include before-lt {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-lt() {
   @include desk-first(lt) {
@@ -214,12 +215,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 1200pxpx.
- * Usage:
- * 
- * @include before-ltm {
+ * @mixin before-ltm
+ * @description Mixin for applying styles for screens less than 1200pxpx.
+ * @example
+ *  @include before-ltm {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-ltm() {
   @include desk-first(ltm) {
@@ -228,12 +229,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 1440pxpx.
- * Usage:
- * 
- * @include before-ltl {
+ * @mixin before-ltl
+ * @description Mixin for applying styles for screens less than 1440pxpx.
+ * @example
+ *  @include before-ltl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-ltl() {
   @include desk-first(ltl) {
@@ -242,12 +243,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 1920pxpx.
- * Usage:
- * 
- * @include before-xl {
+ * @mixin before-xl
+ * @description Mixin for applying styles for screens less than 1920pxpx.
+ * @example
+ *  @include before-xl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-xl() {
   @include desk-first(xl) {
@@ -256,12 +257,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 2560pxpx.
- * Usage:
- * 
- * @include before-xxl {
+ * @mixin before-xxl
+ * @description Mixin for applying styles for screens less than 2560pxpx.
+ * @example
+ *  @include before-xxl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-xxl() {
   @include desk-first(xxl) {
@@ -270,12 +271,12 @@
 }
 
 /**
- * Mixin for applying styles for screens less than 3840pxpx.
- * Usage:
- * 
- * @include before-qxl {
+ * @mixin before-qxl
+ * @description Mixin for applying styles for screens less than 3840pxpx.
+ * @example
+ *  @include before-qxl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin before-qxl() {
   @include desk-first(qxl) {

package/src/scss/_vertical-breakpoints.scss

@@ -3,12 +3,12 @@
 
 
 /**
- * Mixin for applying styles for screens with height greater than or equal to 600pxpx.
- * Usage:
- * 
- * @include v-for-xs {
+ * @mixin v-for-xs
+ * @description Mixin for applying styles for screens with height greater than or equal to 600pxpx.
+ * @example
+ *  @include v-for-xs {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-for-xs() {
   @include v-mob-first(xs) {
@@ -17,12 +17,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height greater than or equal to 800pxpx.
- * Usage:
- * 
- * @include v-for-sm {
+ * @mixin v-for-sm
+ * @description Mixin for applying styles for screens with height greater than or equal to 800pxpx.
+ * @example
+ *  @include v-for-sm {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-for-sm() {
   @include v-mob-first(sm) {
@@ -31,12 +31,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height greater than or equal to 1000pxpx.
- * Usage:
- * 
- * @include v-for-md {
+ * @mixin v-for-md
+ * @description Mixin for applying styles for screens with height greater than or equal to 1000pxpx.
+ * @example
+ *  @include v-for-md {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-for-md() {
   @include v-mob-first(md) {
@@ -45,12 +45,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height greater than or equal to 1200pxpx.
- * Usage:
- * 
- * @include v-for-lg {
+ * @mixin v-for-lg
+ * @description Mixin for applying styles for screens with height greater than or equal to 1200pxpx.
+ * @example
+ *  @include v-for-lg {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-for-lg() {
   @include v-mob-first(lg) {
@@ -59,12 +59,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height greater than or equal to 1600pxpx.
- * Usage:
- * 
- * @include v-for-xl {
+ * @mixin v-for-xl
+ * @description Mixin for applying styles for screens with height greater than or equal to 1600pxpx.
+ * @example
+ *  @include v-for-xl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-for-xl() {
   @include v-mob-first(xl) {
@@ -73,12 +73,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height greater than or equal to 1601pxpx.
- * Usage:
- * 
- * @include v-for-xxl {
+ * @mixin v-for-xxl
+ * @description Mixin for applying styles for screens with height greater than or equal to 1601pxpx.
+ * @example
+ *  @include v-for-xxl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-for-xxl() {
   @include v-mob-first(xxl) {
@@ -88,12 +88,12 @@
 
 
 /**
- * Mixin for applying styles for screens with height less than 600pxpx.
- * Usage:
- * 
- * @include v-before-xs {
+ * @mixin v-before-xs
+ * @description Mixin for applying styles for screens with height less than 600pxpx.
+ * @example
+ *  @include v-before-xs {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-before-xs() {
   @include v-desk-first(xs) {
@@ -102,12 +102,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height less than 800pxpx.
- * Usage:
- * 
- * @include v-before-sm {
+ * @mixin v-before-sm
+ * @description Mixin for applying styles for screens with height less than 800pxpx.
+ * @example
+ *  @include v-before-sm {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-before-sm() {
   @include v-desk-first(sm) {
@@ -116,12 +116,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height less than 1000pxpx.
- * Usage:
- * 
- * @include v-before-md {
+ * @mixin v-before-md
+ * @description Mixin for applying styles for screens with height less than 1000pxpx.
+ * @example
+ *  @include v-before-md {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-before-md() {
   @include v-desk-first(md) {
@@ -130,12 +130,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height less than 1200pxpx.
- * Usage:
- * 
- * @include v-before-lg {
+ * @mixin v-before-lg
+ * @description Mixin for applying styles for screens with height less than 1200pxpx.
+ * @example
+ *  @include v-before-lg {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-before-lg() {
   @include v-desk-first(lg) {
@@ -144,12 +144,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height less than 1600pxpx.
- * Usage:
- * 
- * @include v-before-xl {
+ * @mixin v-before-xl
+ * @description Mixin for applying styles for screens with height less than 1600pxpx.
+ * @example
+ *  @include v-before-xl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-before-xl() {
   @include v-desk-first(xl) {
@@ -158,12 +158,12 @@
 }
 
 /**
- * Mixin for applying styles for screens with height less than 1601pxpx.
- * Usage:
- * 
- * @include v-before-xxl {
+ * @mixin v-before-xxl
+ * @description Mixin for applying styles for screens with height less than 1601pxpx.
+ * @example
+ *  @include v-before-xxl {
  *    // your styles here
- * }
+ *  }
  */
 @mixin v-before-xxl() {
   @include v-desk-first(xxl) {

package/declarations.d.ts

@@ -1,5 +0,0 @@
-// declaration.d.ts
-declare module '*.scss' {
-  const content: Record<string, string>;
-  export default content;
-}

package/index.scss

@@ -1,4 +0,0 @@
-@import "src/scss/vertical";
-@import "src/scss/horizontal";
-@import "src/scss/vertical-breakpoints";
-@import "src/scss/horizontal-breakpoints";

package/index.ts

@@ -1 +0,0 @@
-export * from './src'

package/reset.scss

@@ -1,99 +0,0 @@
-/***
-    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
-    GitHub page: https://github.com/elad2412/the-new-css-reset
-***/
-
-/*
-    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
-    - The "symbol *" part is to solve Firefox SVG sprite bug
- */
-*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
-  all: unset;
-  display: revert;
-}
-
-/* Preferred box-sizing value */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Reapply the pointer cursor for anchor tags */
-a, button {
-  cursor: revert;
-}
-
-/* Remove list styles (bullets/numbers) */
-ol, ul, menu {
-  list-style: none;
-}
-
-/* For images to not be able to exceed their container */
-img {
-  max-inline-size: 100%;
-  max-block-size: 100%;
-}
-
-/* removes spacing between cells in tables */
-table {
-  border-collapse: collapse;
-}
-
-/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
-input, textarea {
-  -webkit-user-select: auto;
-}
-
-/* revert the 'white-space' property for textarea elements on Safari */
-textarea {
-  white-space: revert;
-}
-
-/* minimum style to allow to style meter element */
-meter {
-  -webkit-appearance: revert;
-  appearance: revert;
-}
-
-/* preformatted text - use only for this feature */
-:where(pre) {
-  all: revert;
-}
-
-/* reset default text opacity of input placeholder */
-::placeholder {
-  color: unset;
-}
-
-/* remove default dot (•) sign */
-::marker {
-  content: initial;
-}
-
-/* fix the feature of 'hidden' attribute.
-   display:revert; revert to element instead of attribute */
-:where([hidden]) {
-  display: none;
-}
-
-/* revert for bug in Chromium browsers
-   - fix for the content editable attribute will work properly.
-   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
-:where([contenteditable]:not([contenteditable="false"])) {
-  -moz-user-modify: read-write;
-  -webkit-user-modify: read-write;
-  overflow-wrap: break-word;
-  -webkit-line-break: after-white-space;
-  -webkit-user-select: auto;
-}
-
-/* apply back the draggable feature - exist only in Chromium and Safari */
-:where([draggable="true"]) {
-  -webkit-user-drag: element;
-}
-
-/* Revert Modal native behavior */
-:where(dialog:modal) {
-  all: revert;
-}

package/src/breakpoints.config.d.ts

@@ -1,4 +0,0 @@
-declare module 'breakpoints.config' {
-  export const HORIZONTAL_BREAKPOINTS: { [key: string]: string };
-  export const VERTICAL_BREAKPOINTS: { [key: string]: string };
-}

package/src/hooks/useBreakpoint.test.ts

@@ -1,56 +0,0 @@
-    // src/hooks/__tests__/useBreakpoint.test.tsx
-    import { renderHook } from '@testing-library/react';
-    import useBreakpoint, { useBreakpointMF, useBreakpointDF } from './useBreakpoint';
-    import breakpoints from '../../scss/_horizontal.export.scss';
-
-    jest.mock('react-responsive', () => ({
-      useMediaQuery: jest.fn(),
-    }));
-
-    jest.mock('./useVariant', () => jest.fn(() => 'min'));
-
-    describe('useBreakpoint', () => {
-      it('should return true for the media query that matches the breakpoint', () => {
-        const mockedUseMediaQuery = require('react-responsive').useMediaQuery as jest.Mock;
-        mockedUseMediaQuery.mockReturnValue(true);
-
-        const { result } = renderHook(() => useBreakpoint('sm'));
-
-        expect(result.current).toBe(true);
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({ query: `(min-width: ${breakpoints.sm}px)` });
-      });
-
-      it('should return false for the media query that does not match the breakpoint', () => {
-        const mockedUseMediaQuery = require('react-responsive').useMediaQuery as jest.Mock;
-        mockedUseMediaQuery.mockReturnValue(false);
-
-        const { result } = renderHook(() => useBreakpoint('sm'));
-
-        expect(result.current).toBe(false);
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({ query: `(min-width: ${breakpoints.sm}px)` });
-      });
-    });
-
-    describe('useBreakpointMF', () => {
-      it('should return true for the `MtF` variant', () => {
-        const mockedUseMediaQuery = require('react-responsive').useMediaQuery as jest.Mock;
-        mockedUseMediaQuery.mockReturnValue(true);
-
-        const { result } = renderHook(() => useBreakpointMF('md'));
-
-        expect(result.current).toBe(true);
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({ query: `(min-width: ${breakpoints.md}px)` });
-      });
-    });
-
-    describe('useBreakpointDF', () => {
-      it('should return true for the `DtF` variant', () => {
-        const mockedUseMediaQuery = require('react-responsive').useMediaQuery as jest.Mock;
-        mockedUseMediaQuery.mockReturnValue(true);
-
-        const { result } = renderHook(() => useBreakpointDF('lg'));
-
-        expect(result.current).toBe(true);
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({ query: `(min-width: ${breakpoints.lg}px)` });
-      });
-    });

package/src/scss/index.scss

@@ -1,5 +0,0 @@
-@import "vertical";
-@import "horizontal";
-@import "horizontal-breakpoints";
-@import "vertical-breakpoints";
-