react-responsive-tools 2.6.0 → 2.6.2

package/README.MD

@@ -8,10 +8,6 @@ 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
 ```
@@ -58,6 +54,16 @@ This command will run the `reinit.sh` script, which will recreate the necessary
 
 The following horizontal and vertical breakpoints are provided by default:
 
+### Preferred Adaptive Variant (`PREFERRED_VARIANT`)
+
+By default, the library uses the following preferred adaptive variant:
+
+```ts 
+    // DESKTOP_TO_FIRST or MOBILE_TO_FIRST
+    // TAdaptiveVariant = Dtf | MtF
+    export const PREFERRED_VARIANT: TAdaptiveVariant = 'DtF';  
+```
+
 #### Horizontal Breakpoints
 
 ```typescript
@@ -107,38 +113,29 @@ const MyComponent = () => {
 };
 ```
 
-#### Hook `useBreakpointMF`
-
-```typescript
-import { useBreakpointMF } from 'react-responsive-tools';
+#### Hook `useBreakpointBetween`
 
-// Usage Example
-const MyComponent = () => {
-    const isMedium = useBreakpointMF('md');
+`useBreakpointBetween` is an optimized hook for checking whether the current
+viewport is between two breakpoints (`min` and `max`).
 
-    return (
-        <div>
-            {isMedium && <p>Current breakpoint: Medium (md) for Mobile First</p>}
-        </div>
-    );
-};
-```
+It is especially useful as a safe replacement for combining `useBreakpoint`
+with both mobile-first (`For`) and desktop-first (`Before`) logic, where
+their ranges would otherwise overlap at the same pixel (for example,
+`min-width: 300px` and `max-width: 300px` both including 300px).
 
-#### Hook `useBreakpointDF`
+Internally the hook adjusts one of the boundaries by `1px` based on
+the preferred adaptive variant (`PREFERRED_VARIANT`) to ensure that
+a particular pixel falls into only one range.
 
 ```typescript
-import { useBreakpointDF } from 'react-responsive-tools';
-
-// Usage Example
-const MyComponent = () => {
-    const isLarge = useBreakpointDF('lg');
-
-    return (
-        <div>
-            {isLarge && <p>Current breakpoint: Large (lg) for Desktop First</p>}
-        </div>
-    );
-};
+    import { useBreakpointBetween } from 'react-responsive-tools';
+
+    const MyComponent = () => { 
+        const isVisible = useBreakpointBetween('sm', 'lg');
+        return (
+            {isVisible && Visible only between "sm" and "lg" breakpoints}
+        ); 
+    };
 ```
 
 #### Hook `useVBreakpoint`
@@ -158,40 +155,6 @@ const MyComponent = () => {
 };
 ```
 
-#### Hook `useVBreakpointMF`
-
-```typescript
-import { useVBreakpointMF } from 'react-responsive-tools';
-
-// Usage Example
-const MyComponent = () => {
-    const isMedium = useVBreakpointMF('md');
-
-    return (
-        <div>
-            {isMedium && <p>Current vertical breakpoint: Medium (md) for Mobile First</p>}
-        </div>
-    );
-};
-```
-
-#### Hook `useVBreakpointDF`
-
-```typescript
-import { useVBreakpointDF } from 'react-responsive-tools';
-
-// Usage Example
-const MyComponent = () => {
-    const isLarge = useVBreakpointDF('lg');
-
-    return (
-        <div>
-            {isLarge && <p>Current vertical breakpoint: Large (lg) for Desktop First</p>}
-        </div>
-    );
-};
-```
-
 ### Using Components
 
 #### Component `For`
@@ -232,6 +195,37 @@ const CustomSizeComponent = () => (
 );
 ```
 
+#### Component `Between`
+
+`Between` is a convenience component built on top of `useBreakpointBetween`.
+It renders its children only when the viewport width is between `min` and `max`.
+
+Compared to combining `For` and `Before`, `Between` automatically applies the
+1px shift logic to avoid overlapping ranges.
+
+```tsx
+import React from 'react';
+
+import { Between } from 'react-responsive-tools';
+
+/**
+ * Visible only on tablet widths: from "sm" (576px) up to "lg" (992px)
+ * with a safe 1px gap between adjacent ranges.
+ */
+export function TabletOnlyBanner() {
+    return (
+        <Between min="sm" max="lg">
+            <section className="tablet-banner">
+                <h2>Tablet-only promo</h2>
+                <p>
+                    This banner is visible only between the <code>sm</code> and <code>lg</code> breakpoints.
+                </p>
+            </section>
+        </Between>
+    );
+}
+```
+
 ### Breakpoint Types
 
 ```typescript

package/dist/breakpoints.config.d.ts

@@ -1,5 +1,21 @@
 import { TAdaptiveVariant } from "./interfaces/TAdaptiveVariant";
+/**
+ * Preferred adaptive layout variant.
+ *
+ * 'DtF' stands for "Desktop To First" and is used as the default strategy
+ * for resolving overlaps between "mobile-first" (`min-width`) and
+ * "desktop-first" (`max-width`) breakpoints.
+ *
+ * When switching between these variants we shift the opposite boundary
+ * by 1px to avoid cases when two ranges overlap at the exact same pixel.
+ *
+ * For example:
+ *  - `min-width: 300px` includes 300px,
+ *  - `max-width: 300px` also includes 300px,
+ * which causes an overlap. By shifting one of them by 1px we guarantee
+ * that a given pixel belongs to only one range.
+ */
 export declare const PREFERRED_VARIANT: TAdaptiveVariant;
-declare const HORIZONTAL_BREAKPOINTS: Record<string, string>;
-declare const VERTICAL_BREAKPOINTS: Record<string, string>;
+declare const HORIZONTAL_BREAKPOINTS: Record<string, number>;
+declare const VERTICAL_BREAKPOINTS: Record<string, number>;
 export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };

package/dist/breakpoints.config.js

@@ -1,23 +1,39 @@
 // src/breakpoints.config.ts
-export const PREFERRED_VARIANT = 'DtF'; // DESKTOP_TO_FIRST
+/**
+ * Preferred adaptive layout variant.
+ *
+ * 'DtF' stands for "Desktop To First" and is used as the default strategy
+ * for resolving overlaps between "mobile-first" (`min-width`) and
+ * "desktop-first" (`max-width`) breakpoints.
+ *
+ * When switching between these variants we shift the opposite boundary
+ * by 1px to avoid cases when two ranges overlap at the exact same pixel.
+ *
+ * For example:
+ *  - `min-width: 300px` includes 300px,
+ *  - `max-width: 300px` also includes 300px,
+ * which causes an overlap. By shifting one of them by 1px we guarantee
+ * that a given pixel belongs to only one range.
+ */
+export const PREFERRED_VARIANT = 'MtF'; // DESKTOP_TO_FIRST
 const HORIZONTAL_BREAKPOINTS = {
-    "xs": "320px",
-    "sm": "576px",
-    "md": "768px",
-    "lg": "992px",
-    "lt": "1024px",
-    "ltm": "1200px",
-    "ltl": "1440px",
-    "xl": "1920px",
-    "xxl": "2560px",
-    "qxl": "3840px"
+    "xs": 320,
+    "sm": 576,
+    "md": 768,
+    "lg": 992,
+    "lt": 1024,
+    "ltm": 1200,
+    "ltl": 1440,
+    "xl": 1920,
+    "xxl": 2560,
+    "qxl": 384,
 };
 const VERTICAL_BREAKPOINTS = {
-    "xs": "600px",
-    "sm": "800px",
-    "md": "1000px",
-    "lg": "1200px",
-    "xl": "1600px",
-    "xxl": "1601px"
+    "xs": 600,
+    "sm": 800,
+    "md": 1000,
+    "lg": 1200,
+    "xl": 1600,
+    "xxl": 160,
 };
 export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };

package/dist/components/horizontal.d.ts

@@ -12,7 +12,32 @@ interface BetweenProps {
     max: TBreakpoint | number;
     min: TBreakpoint | number;
 }
+/**
+ * Renders children only when the current viewport matches
+ * the given breakpoint using the mobile-first ("MtF") strategy.
+ *
+ * Internally it uses {@link useBreakpoint} with variant "MtF".
+ */
 export declare function For({ children, p }: Props): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Renders children only when the current viewport matches
+ * the given breakpoint using the desktop-first ("DtF") strategy.
+ *
+ * Internally it uses {@link useBreakpoint} with variant "DtF".
+ */
 export declare function Before({ children, p }: Props): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Renders children only when the current viewport is between
+ * two breakpoints (`min` and `max`).
+ *
+ * This component is an optimized alternative to combining `For`
+ * and `Before` when their ranges would overlap at the same pixel
+ * (e.g. `min-width: 300px` and `max-width: 300px` both including 300px).
+ *
+ * Under the hood it uses {@link useBreakpointBetween}, which shifts
+ * one of the boundaries by 1px depending on the preferred adaptive
+ * variant (see {@link PREFERRED_VARIANT}) to guarantee that a given
+ * pixel belongs to only one logical range.
+ */
 export declare function Between({ children, min, max }: BetweenProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/horizontal.js

@@ -3,19 +3,44 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Created by westp on 15.05.2023
  */
 import { Fragment } from "react";
-import { useBreakpoint, useBreakpointBetween } from '../hooks/useBreakpoint.js';
+import { useBreakpoint, useBreakpointBetween } from '../hooks/useBreakpoint';
+/**
+ * Renders children only when the current viewport matches
+ * the given breakpoint using the mobile-first ("MtF") strategy.
+ *
+ * Internally it uses {@link useBreakpoint} with variant "MtF".
+ */
 export function For({ children, p }) {
     const is = useBreakpoint(p, 'MtF');
     if (is)
         return _jsx(Fragment, { children: children });
     return null;
 }
+/**
+ * Renders children only when the current viewport matches
+ * the given breakpoint using the desktop-first ("DtF") strategy.
+ *
+ * Internally it uses {@link useBreakpoint} with variant "DtF".
+ */
 export function Before({ children, p }) {
     const is = useBreakpoint(p, 'DtF');
     if (is)
         return _jsx(Fragment, { children: children });
     return null;
 }
+/**
+ * Renders children only when the current viewport is between
+ * two breakpoints (`min` and `max`).
+ *
+ * This component is an optimized alternative to combining `For`
+ * and `Before` when their ranges would overlap at the same pixel
+ * (e.g. `min-width: 300px` and `max-width: 300px` both including 300px).
+ *
+ * Under the hood it uses {@link useBreakpointBetween}, which shifts
+ * one of the boundaries by 1px depending on the preferred adaptive
+ * variant (see {@link PREFERRED_VARIANT}) to guarantee that a given
+ * pixel belongs to only one logical range.
+ */
 export function Between({ children, min, max }) {
     const is = useBreakpointBetween(min, max);
     if (is)

package/dist/default.config.d.ts

@@ -1,5 +1,5 @@
 import { TAdaptiveVariant } from "./interfaces/TAdaptiveVariant";
 declare const PREFERRED_VARIANT: TAdaptiveVariant;
-declare const HORIZONTAL_BREAKPOINTS: Record<string, string>;
-declare const VERTICAL_BREAKPOINTS: Record<string, string>;
+declare const HORIZONTAL_BREAKPOINTS: Record<string, number>;
+declare const VERTICAL_BREAKPOINTS: Record<string, number>;
 export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };

package/dist/default.config.js

@@ -1,23 +1,23 @@
 // breakpointConfig.js
-const PREFERRED_VARIANT = 'DtF'; // DESKTOP_TO_FIRST
+const PREFERRED_VARIANT = 'MtF'; // DESKTOP_TO_FIRST
 const HORIZONTAL_BREAKPOINTS = {
-    xs: '320px',
-    sm: '576px',
-    md: '768px',
-    lg: '992px',
-    lt: '1024px',
-    ltm: '1200px',
-    ltl: '1440px',
-    xl: '1920px',
-    xxl: '2560px',
-    qxl: '3840px',
+    "xs": 320,
+    "sm": 576,
+    "md": 768,
+    "lg": 992,
+    "lt": 1024,
+    "ltm": 1200,
+    "ltl": 1440,
+    "xl": 1920,
+    "xxl": 2560,
+    "qxl": 384,
 };
 const VERTICAL_BREAKPOINTS = {
-    xs: '600px',
-    sm: '800px',
-    md: '1000px',
-    lg: '1200px',
-    xl: '1600px',
-    xxl: '1601px',
+    "xs": 600,
+    "sm": 800,
+    "md": 1000,
+    "lg": 1200,
+    "xl": 1600,
+    "xxl": 160,
 };
 export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };

package/dist/hooks/useBreakpoint.d.ts

@@ -1,4 +1,53 @@
 import { TBreakpoint } from '../interfaces/TBreakpoint';
 import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
-export declare function useBreakpoint(b: TBreakpoint | number, variant?: TAdaptiveVariant): boolean | null;
+/**
+ * Low-level hook that checks if the current viewport matches a horizontal breakpoint.
+ *
+ * It supports:
+ *  - named breakpoints (e.g. "md", "lg"),
+ *  - custom numeric pixel values (e.g. 768).
+ *
+ * The check is performed using `react-responsive` and the current adaptive variant:
+ *  - for mobile-first (MtF) the hook uses `min-width`,
+ *  - for desktop-first (DtF) the hook uses `max-width`.
+ *
+ * To avoid overlap between opposite variants (e.g. `min-width: 300px` and
+ * `max-width: 300px` both including 300px), the hook shifts the opposite
+ * boundary by 1px when the requested variant differs from `PREFERRED_VARIANT`.
+ *
+ * @param b Breakpoint name or explicit pixel value.
+ * @param variant Adaptive variant: "MtF" (mobile to first) or "DtF" (desktop to first).
+ *                By default, uses {@link PREFERRED_VARIANT}.
+ * @returns `true` if the media query matches, otherwise `false` or `null`
+ *          (depending on `react-responsive` behavior).
+ */
+export declare function useBreakpoint(b: TBreakpoint | number, variant?: TAdaptiveVariant): boolean;
+/**
+ * Optimized hook for checking if the current viewport is between two breakpoints.
+ *
+ * This hook is designed as a safe alternative to using a combination of
+ * `For` (mobile-first) and `Before` (desktop-first) when their ranges would
+ * otherwise overlap.
+ *
+ * Example of the overlap problem:
+ *  - `min-width: 300px` includes 300px,
+ *  - `max-width: 300px` also includes 300px,
+ * so both conditions are `true` at exactly 300px.
+ *
+ * To prevent this, {@link useBreakpointBetween} automatically shifts the
+ * opposite boundary by 1px depending on the adaptive variant:
+ *
+ *  - preferredVariant === "MtF":
+ *      max = max - 1 (so the upper bound becomes exclusive by 1px),
+ *  - preferredVariant === "DtF":
+ *      min = min - 1 (so the lower bound becomes exclusive by 1px),
+ *
+ * ensuring that a particular pixel belongs to only one logical range.
+ *
+ * @param min Lower breakpoint (inclusive in the original definition).
+ * @param max Upper breakpoint (inclusive in the original definition).
+ * @param preferredVariant Adaptive variant used to resolve the 1px overlap.
+ *                         By default, uses {@link PREFERRED_VARIANT}.
+ * @returns `true` if the viewport width is within the adjusted [min, max] range.
+ */
 export declare function useBreakpointBetween(min: TBreakpoint | number, max: TBreakpoint | number, preferredVariant?: TAdaptiveVariant): boolean;

package/dist/hooks/useBreakpoint.js

@@ -1,17 +1,64 @@
 import { useMediaQuery } from 'react-responsive';
-import { PREFERRED_VARIANT } from '../breakpoints.config';
-import useVariant from './useVariant';
-import { getBreakpoint } from "../functions/getBreakpoint";
+import { PREFERRED_VARIANT, HORIZONTAL_BREAKPOINTS } from '../breakpoints.config';
+/**
+ * Low-level hook that checks if the current viewport matches a horizontal breakpoint.
+ *
+ * It supports:
+ *  - named breakpoints (e.g. "md", "lg"),
+ *  - custom numeric pixel values (e.g. 768).
+ *
+ * The check is performed using `react-responsive` and the current adaptive variant:
+ *  - for mobile-first (MtF) the hook uses `min-width`,
+ *  - for desktop-first (DtF) the hook uses `max-width`.
+ *
+ * To avoid overlap between opposite variants (e.g. `min-width: 300px` and
+ * `max-width: 300px` both including 300px), the hook shifts the opposite
+ * boundary by 1px when the requested variant differs from `PREFERRED_VARIANT`.
+ *
+ * @param b Breakpoint name or explicit pixel value.
+ * @param variant Adaptive variant: "MtF" (mobile to first) or "DtF" (desktop to first).
+ *                By default, uses {@link PREFERRED_VARIANT}.
+ * @returns `true` if the media query matches, otherwise `false` or `null`
+ *          (depending on `react-responsive` behavior).
+ */
 export function useBreakpoint(b, variant = PREFERRED_VARIANT) {
-    let _bp = typeof b === 'number' ? b : +getBreakpoint(b);
-    const v = useVariant(variant);
+    let _bp = typeof b === 'number' ? b : HORIZONTAL_BREAKPOINTS[b];
+    const v = variant === 'MtF' ? 'min' : 'max';
     if (variant !== PREFERRED_VARIANT)
         _bp = _bp - 1;
     return useMediaQuery({ query: `(${v}-width: ${_bp}px)` });
 }
+/**
+ * Optimized hook for checking if the current viewport is between two breakpoints.
+ *
+ * This hook is designed as a safe alternative to using a combination of
+ * `For` (mobile-first) and `Before` (desktop-first) when their ranges would
+ * otherwise overlap.
+ *
+ * Example of the overlap problem:
+ *  - `min-width: 300px` includes 300px,
+ *  - `max-width: 300px` also includes 300px,
+ * so both conditions are `true` at exactly 300px.
+ *
+ * To prevent this, {@link useBreakpointBetween} automatically shifts the
+ * opposite boundary by 1px depending on the adaptive variant:
+ *
+ *  - preferredVariant === "MtF":
+ *      max = max - 1 (so the upper bound becomes exclusive by 1px),
+ *  - preferredVariant === "DtF":
+ *      min = min - 1 (so the lower bound becomes exclusive by 1px),
+ *
+ * ensuring that a particular pixel belongs to only one logical range.
+ *
+ * @param min Lower breakpoint (inclusive in the original definition).
+ * @param max Upper breakpoint (inclusive in the original definition).
+ * @param preferredVariant Adaptive variant used to resolve the 1px overlap.
+ *                         By default, uses {@link PREFERRED_VARIANT}.
+ * @returns `true` if the viewport width is within the adjusted [min, max] range.
+ */
 export function useBreakpointBetween(min, max, preferredVariant = PREFERRED_VARIANT) {
-    let _min = typeof min === 'number' ? min : +getBreakpoint(min);
-    let _max = typeof max === 'number' ? max : +getBreakpoint(max);
+    let _min = typeof min === 'number' ? min : HORIZONTAL_BREAKPOINTS[min];
+    let _max = typeof max === 'number' ? max : HORIZONTAL_BREAKPOINTS[max];
     switch (preferredVariant) {
         case 'MtF':
             _max = _max - 1;

package/dist/hooks/useBreakpoint.test.js

@@ -1,30 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
-import { useBreakpoint, useBreakpointBetween } from './useBreakpoint';
-// Mock external dependencies
-jest.mock('react-responsive', () => ({
+import { render } from "@testing-library/react";
+import { useBreakpoint, useBreakpointBetween } from "./useBreakpoint";
+jest.mock("react-responsive", () => ({
     useMediaQuery: jest.fn(),
 }));
-jest.mock('./useVariant', () => ({
+jest.mock("../breakpoints.config", () => ({
     __esModule: true,
-    default: jest.fn(),
+    PREFERRED_VARIANT: "MtF",
 }));
-jest.mock('../functions/getBreakpoint', () => ({
-    __esModule: true,
-    getBreakpoint: jest.fn(),
-}));
-jest.mock('../breakpoints.config', () => ({
-    __esModule: true,
-    PREFERRED_VARIANT: 'MtF', // adjust to your real preferred variant if needed
-}));
-import { useMediaQuery } from 'react-responsive';
-import useVariant from './useVariant';
-import { getBreakpoint } from '../functions/getBreakpoint';
-import { PREFERRED_VARIANT } from '../breakpoints.config';
+import { useMediaQuery } from "react-responsive";
+import { PREFERRED_VARIANT } from "../breakpoints.config";
 const mockedUseMediaQuery = useMediaQuery;
-const mockedUseVariant = useVariant;
-const mockedGetBreakpoint = getBreakpoint;
-// Small test components to use hooks inside React
 function BreakpointTestComponent(props) {
     const value = useBreakpoint(props.b, props.variant);
     return _jsx("div", { "data-testid": "value", children: String(value) });
@@ -33,121 +19,56 @@ function BreakpointBetweenTestComponent(props) {
     const value = useBreakpointBetween(props.min, props.max, props.preferredVariant);
     return _jsx("div", { "data-testid": "value", children: String(value) });
 }
-describe('useBreakpoint', () => {
+describe("useBreakpoint", () => {
     beforeEach(() => {
         jest.clearAllMocks();
-        mockedUseVariant.mockReturnValue('min');
     });
-    it('should call useMediaQuery with numeric breakpoint as-is when variant === PREFERRED_VARIANT', () => {
+    it("uses min-width for numeric breakpoint when variant === PREFERRED_VARIANT", () => {
         mockedUseMediaQuery.mockReturnValue(true);
         const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 768, variant: PREFERRED_VARIANT }));
-        expect(mockedUseVariant).toHaveBeenCalledWith(PREFERRED_VARIANT);
         expect(mockedUseMediaQuery).toHaveBeenCalledWith({
-            query: '(min-width: 768px)',
+            query: "(min-width: 768px)",
         });
-        expect(getByTestId('value').textContent).toBe('true');
+        expect(getByTestId("value").textContent).toBe("true");
     });
-    it('should convert named breakpoint using getBreakpoint', () => {
-        mockedGetBreakpoint.mockReturnValue('1024');
-        mockedUseMediaQuery.mockReturnValue(false);
-        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 'lg', variant: PREFERRED_VARIANT }));
-        expect(mockedGetBreakpoint).toHaveBeenCalledWith('lg');
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
-            query: '(min-width: 1024px)',
-        });
-        expect(getByTestId('value').textContent).toBe('false');
-    });
-    it('should decrease breakpoint by 1px when variant !== PREFERRED_VARIANT (numeric)', () => {
-        mockedUseVariant.mockReturnValue('max');
+    it("decreases breakpoint by 1px when variant !== PREFERRED_VARIANT (numeric)", () => {
         mockedUseMediaQuery.mockReturnValue(true);
-        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 500, variant: 'DtF' }));
-        expect(mockedUseVariant).toHaveBeenCalledWith('DtF');
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
-            query: '(max-width: 499px)',
-        });
-        expect(getByTestId('value').textContent).toBe('true');
-    });
-    it('should also decrease named breakpoint by 1px when variant !== PREFERRED_VARIANT', () => {
-        mockedGetBreakpoint.mockReturnValue('600');
-        mockedUseVariant.mockReturnValue('max');
-        mockedUseMediaQuery.mockReturnValue(false);
-        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 'md', variant: 'DtF' }));
-        expect(mockedGetBreakpoint).toHaveBeenCalledWith('md');
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 500, variant: "DtF" }));
         expect(mockedUseMediaQuery).toHaveBeenCalledWith({
-            query: '(max-width: 599px)',
+            query: "(max-width: 499px)",
         });
-        expect(getByTestId('value').textContent).toBe('false');
+        expect(getByTestId("value").textContent).toBe("true");
     });
 });
-describe('useBreakpointBetween', () => {
+describe("useBreakpointBetween", () => {
     beforeEach(() => {
         jest.clearAllMocks();
     });
-    it('should use min and max as-is when preferredVariant === PREFERRED_VARIANT (numeric)', () => {
+    it("uses min/max as-is but decreases max by 1px when preferredVariant === PREFERRED_VARIANT (numeric)", () => {
         mockedUseMediaQuery.mockReturnValue(true);
         const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: PREFERRED_VARIANT }));
         expect(mockedUseMediaQuery).toHaveBeenCalledWith({
             minWidth: 320,
-            maxWidth: 767, // 768 - 1 because PREFERRED_VARIANT === 'MtF'
+            maxWidth: 767, // 768 - 1
         });
-        expect(getByTestId('value').textContent).toBe('true');
+        expect(getByTestId("value").textContent).toBe("true");
     });
-    it('should convert named min and max via getBreakpoint when preferredVariant === PREFERRED_VARIANT', () => {
-        mockedGetBreakpoint
-            .mockReturnValueOnce('320') // for min
-            .mockReturnValueOnce('768'); // for max
-        mockedUseMediaQuery.mockReturnValue(false);
-        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'md', preferredVariant: PREFERRED_VARIANT }));
-        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(1, 'sm');
-        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(2, 'md');
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
-            minWidth: 320,
-            maxWidth: 767, // 768 - 1 because PREFERRED_VARIANT === 'MtF'
-        });
-        expect(getByTestId('value').textContent).toBe('false');
-    });
-    it('for preferredVariant === "MtF" should decrease max by 1px', () => {
+    it('when preferredVariant === "MtF" it only decreases max by 1px', () => {
         mockedUseMediaQuery.mockReturnValue(true);
-        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: 'MtF' }));
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: "MtF" }));
         expect(mockedUseMediaQuery).toHaveBeenCalledWith({
             minWidth: 320,
             maxWidth: 767,
         });
-        expect(getByTestId('value').textContent).toBe('true');
+        expect(getByTestId("value").textContent).toBe("true");
     });
-    it('for preferredVariant === "DtF" should decrease min by 1px', () => {
+    it('when preferredVariant === "DtF" it only decreases min by 1px', () => {
         mockedUseMediaQuery.mockReturnValue(false);
-        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: 'DtF' }));
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: "DtF" }));
         expect(mockedUseMediaQuery).toHaveBeenCalledWith({
             minWidth: 319,
             maxWidth: 768,
         });
-        expect(getByTestId('value').textContent).toBe('false');
-    });
-    it('MtF + named values: should decrease max after getBreakpoint', () => {
-        mockedGetBreakpoint
-            .mockReturnValueOnce('400') // min
-            .mockReturnValueOnce('900'); // max
-        mockedUseMediaQuery.mockReturnValue(true);
-        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'xl', preferredVariant: 'MtF' }));
-        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(1, 'sm');
-        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(2, 'xl');
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
-            minWidth: 400,
-            maxWidth: 899,
-        });
-        expect(getByTestId('value').textContent).toBe('true');
-    });
-    it('DtF + named values: should decrease min after getBreakpoint', () => {
-        mockedGetBreakpoint
-            .mockReturnValueOnce('400') // min
-            .mockReturnValueOnce('900'); // max
-        mockedUseMediaQuery.mockReturnValue(false);
-        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'xl', preferredVariant: 'DtF' }));
-        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
-            minWidth: 399,
-            maxWidth: 900,
-        });
-        expect(getByTestId('value').textContent).toBe('false');
+        expect(getByTestId("value").textContent).toBe("false");
     });
 });

package/dist/hooks/useVBreakpoint.js

@@ -1,8 +1,9 @@
 import { useMediaQuery } from 'react-responsive';
-import useVariant from './useVariant.js';
-import { getVBreakpoint } from "../functions/getBreakpoint.js";
+import { VERTICAL_BREAKPOINTS, PREFERRED_VARIANT } from "../breakpoints.config";
 export function useVBreakpoint(b, variant = 'MtF') {
-    const _bp = typeof b === 'number' ? b + 'px' : getVBreakpoint(b);
-    const v = useVariant(variant);
-    return useMediaQuery({ query: `(${v}-height: ${_bp})` });
+    let _bp = typeof b === 'number' ? b : VERTICAL_BREAKPOINTS[b];
+    const v = variant === 'MtF' ? 'min' : 'max';
+    if (variant !== PREFERRED_VARIANT)
+        _bp = _bp - 1;
+    return useMediaQuery({ query: `(${v}-height: ${_bp}px)` });
 }

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import { TBreakpoint, TVerticalBreakpoint } from './interfaces/TBreakpoint';
 import { TBreakpoints, TVerticalBreakpoints } from './interfaces/TBreakpoints';
 import { useBreakpointBetween, useBreakpoint } from './hooks/useBreakpoint.js';
 import { useVBreakpoint } from './hooks/useVBreakpoint.js';
-import { getBreakpoint, getVBreakpoint } from './functions/getBreakpoint.js';
 export type { TBreakpoints, TBreakpoint, TVerticalBreakpoint, TVerticalBreakpoints, };
-export { useBreakpointBetween, useBreakpoint, useVBreakpoint, getBreakpoint, getVBreakpoint, };
+export { useBreakpointBetween, useBreakpoint, useVBreakpoint, };
 export * from './components/horizontal.js';

package/dist/index.js

@@ -1,5 +1,4 @@
 import { useBreakpointBetween, useBreakpoint } from './hooks/useBreakpoint.js';
 import { useVBreakpoint } from './hooks/useVBreakpoint.js';
-import { getBreakpoint, getVBreakpoint } from './functions/getBreakpoint.js';
-export { useBreakpointBetween, useBreakpoint, useVBreakpoint, getBreakpoint, getVBreakpoint, };
+export { useBreakpointBetween, useBreakpoint, useVBreakpoint, };
 export * from './components/horizontal.js';

package/dist/interfaces/TBreakpoint.d.ts

@@ -1,2 +1,3 @@
-export type TBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'lt' | 'ltm' | 'ltl' | 'xl' | 'xxl' | 'qxl';
-export type TVerticalBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from "../breakpoints.config";
+export type TBreakpoint = keyof typeof HORIZONTAL_BREAKPOINTS;
+export type TVerticalBreakpoint = keyof typeof VERTICAL_BREAKPOINTS;

package/dist/scripts/createConfig.mjs

@@ -1 +1 @@
-import o from"fs";import n from"path";import{fileURLToPath as e}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as s,PREFERRED_VARIANT as i}from"../default.config.js";const l=e(import.meta.url),t=n.dirname(l),R=n.resolve(t,"../../../../breakpoints.config.js");(async()=>{let e=r,l=s,a=i;if(o.existsSync(R))try{console.log(`User config file found at: ${R}`);const o=await import(R);console.log(`Loaded user config: ${JSON.stringify(o,null,2)}`),o.HORIZONTAL_BREAKPOINTS?(e=o.HORIZONTAL_BREAKPOINTS,console.log("Using user provided horizontal breakpoints.")):console.log("Using default horizontal breakpoints."),o.VERTICAL_BREAKPOINTS?(l=o.VERTICAL_BREAKPOINTS,console.log("Using user provided vertical breakpoints.")):console.log("Using default vertical breakpoints."),o.PREFERRED_VARIANT?(a=o.PREFERRED_VARIANT,console.log("Using user provided preferred variant.")):console.log("Using default preferred variant.")}catch(o){console.error("Error loading user config:",o)}else console.log(`User config file not found at: ${R}. Using default breakpoints.`);const c=`\n    // breakpoints.config.mjs\n    const HORIZONTAL_BREAKPOINTS = ${JSON.stringify(e,null,2)};\n\n    const VERTICAL_BREAKPOINTS = ${JSON.stringify(l,null,2)};\n\n    const PREFERRED_VARIANT = ${JSON.stringify(a)};\n\n    export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };\n    `;try{o.writeFileSync(n.resolve(t,"../breakpoints.config.js"),c),console.log("Config file has been generated successfully.")}catch(o){console.error("Error writing merged config file:",o)}})();
+import o from"fs";import n from"path";import{fileURLToPath as e}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as s,PREFERRED_VARIANT as i}from"../default.config.js";const l=e(import.meta.url),t=n.dirname(l),R=n.resolve(t,"../../../../breakpoints.config.js");(async()=>{let e=r,l=s,a=i;if(o.existsSync(R))try{console.log(`User config file found at: ${R}`);const o=await import(R);console.log(`Loaded user config: ${JSON.stringify(o,null,2)}`),o.HORIZONTAL_BREAKPOINTS?(e=o.HORIZONTAL_BREAKPOINTS,console.log("Using user provided horizontal breakpoints.")):console.log("Using default horizontal breakpoints."),o.VERTICAL_BREAKPOINTS?(l=o.VERTICAL_BREAKPOINTS,console.log("Using user provided vertical breakpoints.")):console.log("Using default vertical breakpoints."),o.PREFERRED_VARIANT?(a=o.PREFERRED_VARIANT,console.log("Using user provided preferred variant.")):console.log("Using default preferred variant.")}catch(o){console.error("Error loading user config:",o)}else console.log(`User config file not found at: ${R}. Using default breakpoints.`);const c=`\n// breakpoints.config.mjs\nconst HORIZONTAL_BREAKPOINTS = ${JSON.stringify(e,null,2)};\n\nconst VERTICAL_BREAKPOINTS = ${JSON.stringify(l,null,2)};\n\nconst PREFERRED_VARIANT = ${JSON.stringify(a)};\n\nexport { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };\n`;try{o.writeFileSync(n.resolve(t,"../breakpoints.config.js"),c),console.log("Config file has been generated successfully.")}catch(o){console.error("Error writing merged config file:",o)}})();

package/dist/scripts/generateCustomBreakpointsSCSS.mjs

@@ -1 +1 @@
-import o from"fs";import e from"path";import{fileURLToPath as r}from"url";import{HORIZONTAL_BREAKPOINTS as s,VERTICAL_BREAKPOINTS as n}from"../breakpoints.config.js";const t=r(import.meta.url),i=e.dirname(t),m=(o,e)=>`$${e}-breakpoints: (\n${Object.entries(o).map((([o,e])=>`  ${o}: ${e}`)).join(",\n")}\n);`,a=`\n${m(s,"horizontal")}\n${m(n,"vertical")}\n`;o.writeFileSync(e.resolve(i,"../scss/_custom-breakpoints.scss"),a),console.log("SCSS file with breakpoints maps has been generated successfully.");
+import o from"fs";import e from"path";import{fileURLToPath as r}from"url";import{HORIZONTAL_BREAKPOINTS as s,VERTICAL_BREAKPOINTS as n}from"../breakpoints.config.js";const t=r(import.meta.url),i=e.dirname(t),m=(o,e)=>`$${e}-breakpoints: (\n${Object.entries(o).map((([o,e])=>`  ${o}: ${e}px`)).join(",\n")}\n);`,a=`\n${m(s,"horizontal")}\n${m(n,"vertical")}\n`;o.writeFileSync(e.resolve(i,"../scss/_custom-breakpoints.scss"),a),console.log("SCSS file with breakpoints maps has been generated successfully.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/reinit.sh

@@ -1,14 +1,14 @@
 #!/bin/bash
 
-           # Путь до каталога dist
+           # Path to dist directory
            DIST_DIR="./dist"
            SCRIPT_DIR="$DIST_DIR/scripts"
 
-           # Диагностическая информация
+           # Diagnostic information
            echo "DIST_DIR: $DIST_DIR"
            echo "SCRIPT_DIR: $SCRIPT_DIR"
 
-           # Проверка наличия каталога dist и scripts
+           # Check if dist and scripts directories exist
            echo "Listing contents of current directory:"
            ls -la
            echo "Listing contents of DIST_DIR:"
@@ -19,7 +19,7 @@
              exit 1
            fi
 
-           # Запуск createConfig.mjs из dist/scripts
+           # Run createConfig.mjs from dist/scripts
            echo "Running createConfig.mjs from package..."
            node "$SCRIPT_DIR/createConfig.mjs"
 
@@ -28,7 +28,7 @@
              exit 1
            fi
 
-           # Запуск generateCustomBreakpointsSCSS.mjs из dist/scripts
+           # Run generateCustomBreakpointsSCSS.mjs from dist/scripts
            echo "Running generateCustomBreakpointsSCSS.mjs from package..."
            node "$SCRIPT_DIR/generateCustomBreakpointsSCSS.mjs"
 
@@ -37,7 +37,7 @@
              exit 1
            fi
 
-           # Запуск generateSCSS.mjs из dist/scripts
+           # Run generateSCSS.mjs from dist/scripts
            echo "Running generateSCSS.mjs from package..."
            node "$SCRIPT_DIR/generateSCSS.mjs"
 
@@ -46,9 +46,9 @@
              exit 1
            fi
 
-           # Запуск generateTBreakpoint.mjs из dist/scripts
-           echo "Running generateTBreakpoint.mjs from package..."
-           node "$SCRIPT_DIR/generateTBreakpoint.mjs"
+           # Run generateTBreakpoint.mjs from dist/scripts
+#           echo "Running generateTBreakpoint.mjs from package..."
+#           node "$SCRIPT_DIR/generateTBreakpoint.mjs"
 
            if [ $? -ne 0 ]; then
              echo "Error occurred while running generateTBreakpoint.mjs"

package/dist/functions/getBreakpoint.d.ts

@@ -1,3 +0,0 @@
-import { TBreakpoint, TVerticalBreakpoint } from '../interfaces/TBreakpoint.js';
-export declare function getBreakpoint(b: TBreakpoint): string;
-export declare function getVBreakpoint(b: TVerticalBreakpoint): string;

package/dist/functions/getBreakpoint.js

@@ -1,7 +0,0 @@
-import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.js';
-export function getBreakpoint(b) {
-    return HORIZONTAL_BREAKPOINTS[b];
-}
-export function getVBreakpoint(b) {
-    return VERTICAL_BREAKPOINTS[b];
-}

package/dist/hooks/useVariant.d.ts

@@ -1,2 +0,0 @@
-import { TAdaptiveVariant } from "../interfaces/TAdaptiveVariant";
-export default function useVariant(variant: TAdaptiveVariant): "min" | "max";

package/dist/hooks/useVariant.js

@@ -1,3 +0,0 @@
-export default function useVariant(variant) {
-    return variant === 'MtF' ? 'min' : 'max';
-}

package/dist/scripts/generateTBreakpoint.mjs

@@ -1 +0,0 @@
-import e from"fs";import r from"path";import{fileURLToPath as t}from"url";import{HORIZONTAL_BREAKPOINTS as o,VERTICAL_BREAKPOINTS as n}from"../breakpoints.config.js";const i=t(import.meta.url),p=r.dirname(i),s=(e,r)=>`export type ${r} =\n${Object.keys(e).map((e=>`    | '${e}'`)).join("\n")}\n`,a=`\n${s(o,"TBreakpoint")}\n\n${s(n,"TVerticalBreakpoint")}\n`;e.writeFileSync(r.resolve(p,"../interfaces/TBreakpoint.d.ts"),a.trim()),console.log("TBreakpoint.ts file has been generated successfully.");