reso-ui 3.4.0 → 3.5.0

package/README.md

@@ -33,6 +33,7 @@ A React component library built with TypeScript + SCSS. Ships as tree-shakeable
   - [Import styles](#import-styles)
   - [Basic usage](#basic-usage)
 - [Theming & Dark Mode Setup](#theming--dark-mode-setup)
+- [Responsive Context](#responsive-context)
 - [Overriding the Color Palette](#overriding-the-color-palette)
 - [Utility Classes](#utility-classes)
 - [Dev Notes](#dev-notes)
@@ -472,6 +473,78 @@ Scope dark-mode overrides with the same attribute selector:
 
 ---
 
+## Responsive Context
+
+`ResoUiProvider` includes a `ResponsiveContext` that exposes viewport breakpoints to any component in your app.
+
+### Basic usage (viewport-only)
+
+```tsx
+import { useContext } from "react";
+import { ResponsiveContext } from "reso-ui";
+
+const MyComponent = () => {
+  const { isMobile, isTablet } = useContext(ResponsiveContext);
+  return isMobile ? <MobileLayout /> : <DesktopLayout />;
+};
+```
+
+### Breakpoints
+
+| Flag | Range |
+|------|-------|
+| `isMobile` | `width < 640` |
+| `isTablet` | `640 <= width < 768` |
+| `isMdDesktop` | `768 <= width < 1024` |
+| `isLgDesktop` | `1024 <= width < 1280` |
+| `isXLgDesktop` | `width >= 1280` |
+
+### Container-aware breakpoints (optional)
+
+By default, breakpoints are computed from the viewport width. If your app has sidebars, drawers, or panels that reduce the main content area, you can register a container element so breakpoints reflect the **actual available space**.
+
+When a container is registered, breakpoints are computed from `Math.min(viewportWidth, containerWidth)`. This means `isMobile` becomes `true` when **either** the viewport or the tracked container is narrow.
+
+```tsx
+import { useContext, useEffect, useRef } from "react";
+import { Flex, ResponsiveContext } from "reso-ui";
+
+const App = () => {
+  const mainRef = useRef<HTMLDivElement>(null);
+  const { setContainerRef } = useContext(ResponsiveContext);
+
+  useEffect(() => {
+    if (mainRef.current) setContainerRef(mainRef.current);
+    return () => setContainerRef(null);
+  }, []);
+
+  return (
+    <Flex ref={mainRef} direction="column">
+      {/* All child components get container-aware breakpoints */}
+    </Flex>
+  );
+};
+```
+
+When no container is registered (the default), breakpoints work exactly as before — no changes needed in existing apps.
+
+### Available context values
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `isMobile` | `boolean` | Effective width < 640 |
+| `isTablet` | `boolean` | 640 <= effective width < 768 |
+| `isMdDesktop` | `boolean` | 768 <= effective width < 1024 |
+| `isLgDesktop` | `boolean` | 1024 <= effective width < 1280 |
+| `isXLgDesktop` | `boolean` | Effective width >= 1280 |
+| `windowWidth` | `number` | Actual viewport width |
+| `windowHeight` | `number` | Actual viewport height |
+| `containerWidth` | `number` | Tracked container width (0 if none registered) |
+| `containerHeight` | `number` | Tracked container height (0 if none registered) |
+| `setContainerRef` | `(el: HTMLElement \| null) => void` | Register/unregister a container element |
+
+---
+
 ## Overriding the Color Palette
 
 `ResoUiProvider` accepts optional `theme` and `mode` props for runtime theming with no build step required.

package/dist/cjs/context/ResponsiveContext.js

@@ -10,6 +10,9 @@ const ResponsiveContext = React.createContext({
     isXLgDesktop: false,
     windowWidth: 0,
     windowHeight: 0,
+    containerWidth: 0,
+    containerHeight: 0,
+    setContainerRef: () => { },
 });
 
 exports.ResponsiveContext = ResponsiveContext;

package/dist/cjs/context/ResponsiveContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveContext.js","sources":["../../../src/library/context/ResponsiveContext.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAYO,MAAM,iBAAiB,GAAGA,mBAAa,CAAqB;AACjE,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,YAAY,EAAE,CAAC;AAChB,CAAA;;;;"}
+{"version":3,"file":"ResponsiveContext.js","sources":["../../../src/library/context/ResponsiveContext.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAeO,MAAM,iBAAiB,GAAGA,mBAAa,CAAqB;AACjE,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,eAAe,EAAE,CAAC;AAClB,IAAA,eAAe,EAAE,MAAK,EAAE,CAAC;AAC1B,CAAA;;;;"}

package/dist/cjs/providers/ResponsiveProvider.js

@@ -3,25 +3,43 @@
 var React = require('react');
 var useWindowSize = require('../hooks/useWindowSize.js');
 var ResponsiveContext = require('../context/ResponsiveContext.js');
+var responsive = require('../utils/responsive.js');
 
 const ResponsiveProvider = ({ children }) => {
-    const [width, height] = useWindowSize.useWindowSize();
-    const { isMobile, isTablet, isMdDesktop, isLgDesktop, isXLgDesktop } = React.useMemo(() => ({
-        isMobile: width < 640, // phones: 0–639
-        isTablet: width >= 640 && width < 768, // tablets: 640–767
-        isMdDesktop: width >= 768 && width < 1024, // small laptops: 768–1023
-        isLgDesktop: width >= 1024 && width < 1280, // desktops: 1024–1279
-        isXLgDesktop: width >= 1280, // large desktops / 2K+: 1280+
-    }), [width]);
-    return (React.createElement(ResponsiveContext.ResponsiveContext.Provider, { value: {
-            isMobile,
-            isTablet,
-            isMdDesktop,
-            isLgDesktop,
-            isXLgDesktop,
-            windowWidth: width,
-            windowHeight: height,
-        } }, children));
+    const [windowWidth, windowHeight] = useWindowSize.useWindowSize();
+    const [containerEl, setContainerEl] = React.useState(null);
+    const [containerSize, setContainerSize] = React.useState({ width: 0, height: 0 });
+    React.useEffect(() => {
+        if (!containerEl) {
+            setContainerSize({ width: 0, height: 0 });
+            return;
+        }
+        setContainerSize({ width: containerEl.offsetWidth, height: containerEl.offsetHeight });
+        const observer = new ResizeObserver((entries) => {
+            if (entries[0]) {
+                setContainerSize({
+                    width: entries[0].contentRect.width,
+                    height: entries[0].contentRect.height,
+                });
+            }
+        });
+        observer.observe(containerEl);
+        return () => observer.disconnect();
+    }, [containerEl]);
+    const effectiveWidth = containerEl
+        ? Math.min(windowWidth, containerSize.width)
+        : windowWidth;
+    const band = responsive.computeBreakpointBand(effectiveWidth);
+    const breakpoints = React.useMemo(() => responsive.computeBreakpoints(effectiveWidth), [band]);
+    const value = React.useMemo(() => ({
+        ...breakpoints,
+        windowWidth,
+        windowHeight,
+        containerWidth: containerSize.width,
+        containerHeight: containerSize.height,
+        setContainerRef: setContainerEl,
+    }), [breakpoints, windowWidth, windowHeight, containerSize.width, containerSize.height]);
+    return (React.createElement(ResponsiveContext.ResponsiveContext.Provider, { value: value }, children));
 };
 
 exports.ResponsiveProvider = ResponsiveProvider;

package/dist/cjs/providers/ResponsiveProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveProvider.js","sources":["../../../src/library/providers/ResponsiveProvider.tsx"],"sourcesContent":[null],"names":["useWindowSize","useMemo","ResponsiveContext"],"mappings":";;;;;;MAIa,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAI;IACjD,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAGA,2BAAa,EAAE;AAEvC,IAAA,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAClEC,aAAO,CACL,OAAO;AACL,QAAA,QAAQ,EAAE,KAAK,GAAG,GAAG;QACrB,QAAQ,EAAE,KAAK,IAAI,GAAG,IAAI,KAAK,GAAG,GAAG;QACrC,WAAW,EAAE,KAAK,IAAI,GAAG,IAAI,KAAK,GAAG,IAAI;QACzC,WAAW,EAAE,KAAK,IAAI,IAAI,IAAI,KAAK,GAAG,IAAI;AAC1C,QAAA,YAAY,EAAE,KAAK,IAAI,IAAI;AAC5B,KAAA,CAAC,EACF,CAAC,KAAK,CAAC,CACR;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAACC,mCAAiB,CAAC,QAAQ,EAAA,EACzB,KAAK,EAAE;YACL,QAAQ;YACR,QAAQ;YACR,WAAW;YACX,WAAW;YACX,YAAY;AACZ,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,YAAY,EAAE,MAAM;SACrB,EAAA,EAEA,QAAQ,CACkB;AAEjC;;;;"}
+{"version":3,"file":"ResponsiveProvider.js","sources":["../../../src/library/providers/ResponsiveProvider.tsx"],"sourcesContent":[null],"names":["useWindowSize","useState","useEffect","computeBreakpointBand","useMemo","computeBreakpoints","ResponsiveContext"],"mappings":";;;;;;;MAKa,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAI;IACjD,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAGA,2BAAa,EAAE;IAEnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC;AACxE,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAoC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IAE9GC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,EAAE;YAChB,gBAAgB,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;YACzC;QACF;AAEA,QAAA,gBAAgB,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC;QAEtF,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAI;AAC9C,YAAA,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;AACd,gBAAA,gBAAgB,CAAC;oBACf,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK;oBACnC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM;AACtC,iBAAA,CAAC;YACJ;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC;AAC7B,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACpC,IAAA,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAEjB,MAAM,cAAc,GAAG;UACnB,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,aAAa,CAAC,KAAK;UACzC,WAAW;AAEf,IAAA,MAAM,IAAI,GAAGC,gCAAqB,CAAC,cAAc,CAAC;AAElD,IAAA,MAAM,WAAW,GAAGC,aAAO,CACzB,MAAMC,6BAAkB,CAAC,cAAc,CAAC,EACxC,CAAC,IAAI,CAAC,CACP;AAED,IAAA,MAAM,KAAK,GAAGD,aAAO,CACnB,OAAO;AACL,QAAA,GAAG,WAAW;QACd,WAAW;QACX,YAAY;QACZ,cAAc,EAAE,aAAa,CAAC,KAAK;QACnC,eAAe,EAAE,aAAa,CAAC,MAAM;AACrC,QAAA,eAAe,EAAE,cAAc;AAChC,KAAA,CAAC,EACF,CAAC,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,CACpF;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAACE,mCAAiB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,EACrC,QAAQ,CACkB;AAEjC;;;;"}

package/dist/cjs/utils/responsive.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const BREAKPOINT_MOBILE = 640;
+const BREAKPOINT_TABLET = 768;
+const BREAKPOINT_MD_DESKTOP = 1024;
+const BREAKPOINT_LG_DESKTOP = 1280;
+const computeBreakpoints = (width) => ({
+    isMobile: width < BREAKPOINT_MOBILE,
+    isTablet: width >= BREAKPOINT_MOBILE && width < BREAKPOINT_TABLET,
+    isMdDesktop: width >= BREAKPOINT_TABLET && width < BREAKPOINT_MD_DESKTOP,
+    isLgDesktop: width >= BREAKPOINT_MD_DESKTOP && width < BREAKPOINT_LG_DESKTOP,
+    isXLgDesktop: width >= BREAKPOINT_LG_DESKTOP,
+});
+const computeBreakpointBand = (width) => {
+    if (width < BREAKPOINT_MOBILE)
+        return 0;
+    if (width < BREAKPOINT_TABLET)
+        return 1;
+    if (width < BREAKPOINT_MD_DESKTOP)
+        return 2;
+    if (width < BREAKPOINT_LG_DESKTOP)
+        return 3;
+    return 4;
+};
+
+exports.BREAKPOINT_LG_DESKTOP = BREAKPOINT_LG_DESKTOP;
+exports.BREAKPOINT_MD_DESKTOP = BREAKPOINT_MD_DESKTOP;
+exports.BREAKPOINT_MOBILE = BREAKPOINT_MOBILE;
+exports.BREAKPOINT_TABLET = BREAKPOINT_TABLET;
+exports.computeBreakpointBand = computeBreakpointBand;
+exports.computeBreakpoints = computeBreakpoints;
+//# sourceMappingURL=responsive.js.map

package/dist/cjs/utils/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sources":["../../../src/library/utils/responsive.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAO,MAAM,iBAAiB,GAAG;AAC1B,MAAM,iBAAiB,GAAG;AAC1B,MAAM,qBAAqB,GAAG;AAC9B,MAAM,qBAAqB,GAAG;MAExB,kBAAkB,GAAG,CAAC,KAAa,MAAM;IACpD,QAAQ,EAAE,KAAK,GAAG,iBAAiB;AACnC,IAAA,QAAQ,EAAE,KAAK,IAAI,iBAAiB,IAAI,KAAK,GAAG,iBAAiB;AACjE,IAAA,WAAW,EAAE,KAAK,IAAI,iBAAiB,IAAI,KAAK,GAAG,qBAAqB;AACxE,IAAA,WAAW,EAAE,KAAK,IAAI,qBAAqB,IAAI,KAAK,GAAG,qBAAqB;IAC5E,YAAY,EAAE,KAAK,IAAI,qBAAqB;AAC7C,CAAA;AAEM,MAAM,qBAAqB,GAAG,CAAC,KAAa,KAAY;IAC7D,IAAI,KAAK,GAAG,iBAAiB;AAAE,QAAA,OAAO,CAAC;IACvC,IAAI,KAAK,GAAG,iBAAiB;AAAE,QAAA,OAAO,CAAC;IACvC,IAAI,KAAK,GAAG,qBAAqB;AAAE,QAAA,OAAO,CAAC;IAC3C,IAAI,KAAK,GAAG,qBAAqB;AAAE,QAAA,OAAO,CAAC;AAC3C,IAAA,OAAO,CAAC;AACV;;;;;;;;;"}

package/dist/esm/context/ResponsiveContext.d.ts

@@ -6,5 +6,8 @@ export interface IResponsiveContext {
     isXLgDesktop: boolean;
     windowWidth: number;
     windowHeight: number;
+    containerWidth: number;
+    containerHeight: number;
+    setContainerRef: (el: HTMLElement | null) => void;
 }
 export declare const ResponsiveContext: import("react").Context<IResponsiveContext>;

package/dist/esm/context/ResponsiveContext.js

@@ -8,6 +8,9 @@ const ResponsiveContext = createContext({
     isXLgDesktop: false,
     windowWidth: 0,
     windowHeight: 0,
+    containerWidth: 0,
+    containerHeight: 0,
+    setContainerRef: () => { },
 });
 
 export { ResponsiveContext };

package/dist/esm/context/ResponsiveContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveContext.js","sources":["../../../src/library/context/ResponsiveContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAYO,MAAM,iBAAiB,GAAG,aAAa,CAAqB;AACjE,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,YAAY,EAAE,CAAC;AAChB,CAAA;;;;"}
+{"version":3,"file":"ResponsiveContext.js","sources":["../../../src/library/context/ResponsiveContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAeO,MAAM,iBAAiB,GAAG,aAAa,CAAqB;AACjE,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,eAAe,EAAE,CAAC;AAClB,IAAA,eAAe,EAAE,MAAK,EAAE,CAAC;AAC1B,CAAA;;;;"}

package/dist/esm/providers/ResponsiveProvider.js

@@ -1,25 +1,43 @@
-import React__default, { useMemo } from 'react';
+import React__default, { useState, useEffect, useMemo } from 'react';
 import { useWindowSize } from '../hooks/useWindowSize.js';
 import { ResponsiveContext } from '../context/ResponsiveContext.js';
+import { computeBreakpoints, computeBreakpointBand } from '../utils/responsive.js';
 
 const ResponsiveProvider = ({ children }) => {
-    const [width, height] = useWindowSize();
-    const { isMobile, isTablet, isMdDesktop, isLgDesktop, isXLgDesktop } = useMemo(() => ({
-        isMobile: width < 640, // phones: 0–639
-        isTablet: width >= 640 && width < 768, // tablets: 640–767
-        isMdDesktop: width >= 768 && width < 1024, // small laptops: 768–1023
-        isLgDesktop: width >= 1024 && width < 1280, // desktops: 1024–1279
-        isXLgDesktop: width >= 1280, // large desktops / 2K+: 1280+
-    }), [width]);
-    return (React__default.createElement(ResponsiveContext.Provider, { value: {
-            isMobile,
-            isTablet,
-            isMdDesktop,
-            isLgDesktop,
-            isXLgDesktop,
-            windowWidth: width,
-            windowHeight: height,
-        } }, children));
+    const [windowWidth, windowHeight] = useWindowSize();
+    const [containerEl, setContainerEl] = useState(null);
+    const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        if (!containerEl) {
+            setContainerSize({ width: 0, height: 0 });
+            return;
+        }
+        setContainerSize({ width: containerEl.offsetWidth, height: containerEl.offsetHeight });
+        const observer = new ResizeObserver((entries) => {
+            if (entries[0]) {
+                setContainerSize({
+                    width: entries[0].contentRect.width,
+                    height: entries[0].contentRect.height,
+                });
+            }
+        });
+        observer.observe(containerEl);
+        return () => observer.disconnect();
+    }, [containerEl]);
+    const effectiveWidth = containerEl
+        ? Math.min(windowWidth, containerSize.width)
+        : windowWidth;
+    const band = computeBreakpointBand(effectiveWidth);
+    const breakpoints = useMemo(() => computeBreakpoints(effectiveWidth), [band]);
+    const value = useMemo(() => ({
+        ...breakpoints,
+        windowWidth,
+        windowHeight,
+        containerWidth: containerSize.width,
+        containerHeight: containerSize.height,
+        setContainerRef: setContainerEl,
+    }), [breakpoints, windowWidth, windowHeight, containerSize.width, containerSize.height]);
+    return (React__default.createElement(ResponsiveContext.Provider, { value: value }, children));
 };
 
 export { ResponsiveProvider };

package/dist/esm/providers/ResponsiveProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveProvider.js","sources":["../../../src/library/providers/ResponsiveProvider.tsx"],"sourcesContent":[null],"names":["React"],"mappings":";;;;MAIa,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAI;IACjD,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,aAAa,EAAE;AAEvC,IAAA,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAClE,OAAO,CACL,OAAO;AACL,QAAA,QAAQ,EAAE,KAAK,GAAG,GAAG;QACrB,QAAQ,EAAE,KAAK,IAAI,GAAG,IAAI,KAAK,GAAG,GAAG;QACrC,WAAW,EAAE,KAAK,IAAI,GAAG,IAAI,KAAK,GAAG,IAAI;QACzC,WAAW,EAAE,KAAK,IAAI,IAAI,IAAI,KAAK,GAAG,IAAI;AAC1C,QAAA,YAAY,EAAE,KAAK,IAAI,IAAI;AAC5B,KAAA,CAAC,EACF,CAAC,KAAK,CAAC,CACR;AAEH,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,iBAAiB,CAAC,QAAQ,EAAA,EACzB,KAAK,EAAE;YACL,QAAQ;YACR,QAAQ;YACR,WAAW;YACX,WAAW;YACX,YAAY;AACZ,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,YAAY,EAAE,MAAM;SACrB,EAAA,EAEA,QAAQ,CACkB;AAEjC;;;;"}
+{"version":3,"file":"ResponsiveProvider.js","sources":["../../../src/library/providers/ResponsiveProvider.tsx"],"sourcesContent":[null],"names":["React"],"mappings":";;;;;MAKa,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAI;IACjD,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,aAAa,EAAE;IAEnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC;AACxE,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAoC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IAE9G,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,EAAE;YAChB,gBAAgB,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;YACzC;QACF;AAEA,QAAA,gBAAgB,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC;QAEtF,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAI;AAC9C,YAAA,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;AACd,gBAAA,gBAAgB,CAAC;oBACf,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK;oBACnC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM;AACtC,iBAAA,CAAC;YACJ;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC;AAC7B,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACpC,IAAA,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAEjB,MAAM,cAAc,GAAG;UACnB,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,aAAa,CAAC,KAAK;UACzC,WAAW;AAEf,IAAA,MAAM,IAAI,GAAG,qBAAqB,CAAC,cAAc,CAAC;AAElD,IAAA,MAAM,WAAW,GAAG,OAAO,CACzB,MAAM,kBAAkB,CAAC,cAAc,CAAC,EACxC,CAAC,IAAI,CAAC,CACP;AAED,IAAA,MAAM,KAAK,GAAG,OAAO,CACnB,OAAO;AACL,QAAA,GAAG,WAAW;QACd,WAAW;QACX,YAAY;QACZ,cAAc,EAAE,aAAa,CAAC,KAAK;QACnC,eAAe,EAAE,aAAa,CAAC,MAAM;AACrC,QAAA,eAAe,EAAE,cAAc;AAChC,KAAA,CAAC,EACF,CAAC,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,CACpF;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,iBAAiB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,EACrC,QAAQ,CACkB;AAEjC;;;;"}

package/dist/esm/utils/responsive.d.ts

@@ -0,0 +1,12 @@
+export declare const BREAKPOINT_MOBILE = 640;
+export declare const BREAKPOINT_TABLET = 768;
+export declare const BREAKPOINT_MD_DESKTOP = 1024;
+export declare const BREAKPOINT_LG_DESKTOP = 1280;
+export declare const computeBreakpoints: (width: number) => {
+    isMobile: boolean;
+    isTablet: boolean;
+    isMdDesktop: boolean;
+    isLgDesktop: boolean;
+    isXLgDesktop: boolean;
+};
+export declare const computeBreakpointBand: (width: number) => number;

package/dist/esm/utils/responsive.js

@@ -0,0 +1,25 @@
+const BREAKPOINT_MOBILE = 640;
+const BREAKPOINT_TABLET = 768;
+const BREAKPOINT_MD_DESKTOP = 1024;
+const BREAKPOINT_LG_DESKTOP = 1280;
+const computeBreakpoints = (width) => ({
+    isMobile: width < BREAKPOINT_MOBILE,
+    isTablet: width >= BREAKPOINT_MOBILE && width < BREAKPOINT_TABLET,
+    isMdDesktop: width >= BREAKPOINT_TABLET && width < BREAKPOINT_MD_DESKTOP,
+    isLgDesktop: width >= BREAKPOINT_MD_DESKTOP && width < BREAKPOINT_LG_DESKTOP,
+    isXLgDesktop: width >= BREAKPOINT_LG_DESKTOP,
+});
+const computeBreakpointBand = (width) => {
+    if (width < BREAKPOINT_MOBILE)
+        return 0;
+    if (width < BREAKPOINT_TABLET)
+        return 1;
+    if (width < BREAKPOINT_MD_DESKTOP)
+        return 2;
+    if (width < BREAKPOINT_LG_DESKTOP)
+        return 3;
+    return 4;
+};
+
+export { BREAKPOINT_LG_DESKTOP, BREAKPOINT_MD_DESKTOP, BREAKPOINT_MOBILE, BREAKPOINT_TABLET, computeBreakpointBand, computeBreakpoints };
+//# sourceMappingURL=responsive.js.map

package/dist/esm/utils/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sources":["../../../src/library/utils/responsive.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAO,MAAM,iBAAiB,GAAG;AAC1B,MAAM,iBAAiB,GAAG;AAC1B,MAAM,qBAAqB,GAAG;AAC9B,MAAM,qBAAqB,GAAG;MAExB,kBAAkB,GAAG,CAAC,KAAa,MAAM;IACpD,QAAQ,EAAE,KAAK,GAAG,iBAAiB;AACnC,IAAA,QAAQ,EAAE,KAAK,IAAI,iBAAiB,IAAI,KAAK,GAAG,iBAAiB;AACjE,IAAA,WAAW,EAAE,KAAK,IAAI,iBAAiB,IAAI,KAAK,GAAG,qBAAqB;AACxE,IAAA,WAAW,EAAE,KAAK,IAAI,qBAAqB,IAAI,KAAK,GAAG,qBAAqB;IAC5E,YAAY,EAAE,KAAK,IAAI,qBAAqB;AAC7C,CAAA;AAEM,MAAM,qBAAqB,GAAG,CAAC,KAAa,KAAY;IAC7D,IAAI,KAAK,GAAG,iBAAiB;AAAE,QAAA,OAAO,CAAC;IACvC,IAAI,KAAK,GAAG,iBAAiB;AAAE,QAAA,OAAO,CAAC;IACvC,IAAI,KAAK,GAAG,qBAAqB;AAAE,QAAA,OAAO,CAAC;IAC3C,IAAI,KAAK,GAAG,qBAAqB;AAAE,QAAA,OAAO,CAAC;AAC3C,IAAA,OAAO,CAAC;AACV;;;;"}

package/dist/src/library/components/Dialog/stories/Dialog.stories.d.ts

@@ -23,13 +23,13 @@ declare const _default: {
         okButtonStyles?: React.CSSProperties;
         rootClassName?: string;
         rootStyles?: React.CSSProperties;
-        pa?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
-        pv?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
-        ph?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
-        pt?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
-        pb?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
-        pr?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
-        pl?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
+        pv?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+        ph?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+        pa?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+        pt?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+        pb?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+        pr?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+        pl?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
         isOpen: boolean;
         layer?: number;
     }>) => React.JSX.Element)[];

package/dist/src/library/context/ResponsiveContext.d.ts

@@ -6,5 +6,8 @@ export interface IResponsiveContext {
     isXLgDesktop: boolean;
     windowWidth: number;
     windowHeight: number;
+    containerWidth: number;
+    containerHeight: number;
+    setContainerRef: (el: HTMLElement | null) => void;
 }
 export declare const ResponsiveContext: import("react").Context<IResponsiveContext>;

package/dist/src/library/providers/__test__/ResponsiveProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/library/utils/__test__/responsive.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/library/utils/responsive.d.ts

@@ -0,0 +1,12 @@
+export declare const BREAKPOINT_MOBILE = 640;
+export declare const BREAKPOINT_TABLET = 768;
+export declare const BREAKPOINT_MD_DESKTOP = 1024;
+export declare const BREAKPOINT_LG_DESKTOP = 1280;
+export declare const computeBreakpoints: (width: number) => {
+    isMobile: boolean;
+    isTablet: boolean;
+    isMdDesktop: boolean;
+    isLgDesktop: boolean;
+    isXLgDesktop: boolean;
+};
+export declare const computeBreakpointBand: (width: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reso-ui",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Reusable React components in Typescript",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",