reso-ui 3.5.0 → 3.6.1

package/README.md

@@ -530,6 +530,8 @@ When no container is registered (the default), breakpoints work exactly as befor
 
 ### Available context values
 
+**Top-level (resolved)** — breakpoints computed from `Math.min(viewportWidth, containerWidth)`:
+
 | Field | Type | Description |
 |-------|------|-------------|
 | `isMobile` | `boolean` | Effective width < 640 |
@@ -539,10 +541,44 @@ When no container is registered (the default), breakpoints work exactly as befor
 | `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 |
 
+**`viewport`** — always based on the viewport, ignoring container. Use this for structural layout decisions (e.g., whether to show a sidebar):
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `viewport.isMobile` | `boolean` | Viewport width < 640 |
+| `viewport.isTablet` | `boolean` | 640 <= viewport width < 768 |
+| `viewport.isMdDesktop` | `boolean` | 768 <= viewport width < 1024 |
+| `viewport.isLgDesktop` | `boolean` | 1024 <= viewport width < 1280 |
+| `viewport.isXLgDesktop` | `boolean` | Viewport width >= 1280 |
+| `viewport.width` | `number` | Viewport width |
+| `viewport.height` | `number` | Viewport height |
+
+**`container`** — breakpoints and dimensions of the tracked container element:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `container.isMobile` | `boolean` | Container width < 640 (true when none registered) |
+| `container.isTablet` | `boolean` | 640 <= container width < 768 |
+| `container.isMdDesktop` | `boolean` | 768 <= container width < 1024 |
+| `container.isLgDesktop` | `boolean` | 1024 <= container width < 1280 |
+| `container.isXLgDesktop` | `boolean` | Container width >= 1280 |
+| `container.width` | `number` | Container width (0 if none registered) |
+| `container.height` | `number` | Container height (0 if none registered) |
+
+### When to use which
+
+```tsx
+// Page layout — use top-level (resolved)
+const { isMobile } = useContext(ResponsiveContext);
+return <View pt={isMobile ? 7 : 9}>{/* ... */}</View>;
+
+// Structural decisions (show/hide panels) — use viewport
+const { viewport } = useContext(ResponsiveContext);
+const showSidebar = !viewport.isMobile && !viewport.isTablet;
+```
+
 ---
 
 ## Overriding the Color Palette

package/dist/cjs/context/ResponsiveContext.js

@@ -2,16 +2,19 @@
 
 var React = require('react');
 
-const ResponsiveContext = React.createContext({
+const defaultBreakpoints = {
     isMobile: false,
     isTablet: false,
     isMdDesktop: false,
     isLgDesktop: false,
     isXLgDesktop: false,
+};
+const ResponsiveContext = React.createContext({
+    ...defaultBreakpoints,
     windowWidth: 0,
     windowHeight: 0,
-    containerWidth: 0,
-    containerHeight: 0,
+    viewport: { ...defaultBreakpoints, width: 0, height: 0 },
+    container: { ...defaultBreakpoints, isMobile: true, width: 0, height: 0 },
     setContainerRef: () => { },
 });
 

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":";;;;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;;;;"}
+{"version":3,"file":"ResponsiveContext.js","sources":["../../../src/library/context/ResponsiveContext.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AA4BA,MAAM,kBAAkB,GAAiB;AACvC,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;CACpB;AAEM,MAAM,iBAAiB,GAAGA,mBAAa,CAAqB;AACjE,IAAA,GAAG,kBAAkB;AACrB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,QAAQ,EAAE,EAAE,GAAG,kBAAkB,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACxD,IAAA,SAAS,EAAE,EAAE,GAAG,kBAAkB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzE,IAAA,eAAe,EAAE,MAAK,EAAE,CAAC;AAC1B,CAAA;;;;"}

package/dist/cjs/providers/ResponsiveProvider.js

@@ -14,7 +14,10 @@ const ResponsiveProvider = ({ children }) => {
             setContainerSize({ width: 0, height: 0 });
             return;
         }
-        setContainerSize({ width: containerEl.offsetWidth, height: containerEl.offsetHeight });
+        setContainerSize({
+            width: containerEl.offsetWidth,
+            height: containerEl.offsetHeight,
+        });
         const observer = new ResizeObserver((entries) => {
             if (entries[0]) {
                 setContainerSize({
@@ -29,16 +32,33 @@ const ResponsiveProvider = ({ children }) => {
     const effectiveWidth = containerEl
         ? Math.min(windowWidth, containerSize.width)
         : windowWidth;
+    // default band takes the effective width, which is the min of containerEl width and window width
     const band = responsive.computeBreakpointBand(effectiveWidth);
+    // viewport band essentially takes the absolute window width
+    const viewportBand = responsive.computeBreakpointBand(windowWidth);
+    // containerElBand takes the width of the absolute containerEl width
+    const containerElBand = responsive.computeBreakpointBand(containerSize.width);
     const breakpoints = React.useMemo(() => responsive.computeBreakpoints(effectiveWidth), [band]);
+    const viewportBreakpoints = React.useMemo(() => responsive.computeBreakpoints(windowWidth), [viewportBand]);
+    const containerElBreakpoints = React.useMemo(() => responsive.computeBreakpoints(containerSize.width), [containerElBand]);
+    const viewport = React.useMemo(() => ({
+        ...viewportBreakpoints,
+        width: windowWidth,
+        height: windowHeight,
+    }), [viewportBreakpoints, windowWidth, windowHeight]);
+    const container = React.useMemo(() => ({
+        ...containerElBreakpoints,
+        width: containerSize.width,
+        height: containerSize.height,
+    }), [containerElBreakpoints, containerSize.width, containerSize.height]);
     const value = React.useMemo(() => ({
         ...breakpoints,
         windowWidth,
         windowHeight,
-        containerWidth: containerSize.width,
-        containerHeight: containerSize.height,
+        viewport,
+        container,
         setContainerRef: setContainerEl,
-    }), [breakpoints, windowWidth, windowHeight, containerSize.width, containerSize.height]);
+    }), [breakpoints, windowWidth, windowHeight, viewport, container]);
     return (React.createElement(ResponsiveContext.ResponsiveContext.Provider, { value: value }, children));
 };
 

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

@@ -1 +1 @@
-{"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;;;;"}
+{"version":3,"file":"ResponsiveProvider.js","sources":["../../../src/library/providers/ResponsiveProvider.tsx"],"sourcesContent":[null],"names":["useWindowSize","useState","useEffect","computeBreakpointBand","useMemo","computeBreakpoints","ResponsiveContext"],"mappings":"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"}

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

@@ -1,13 +1,23 @@
-export interface IResponsiveContext {
+export interface IBreakpoints {
     isMobile: boolean;
     isTablet: boolean;
     isMdDesktop: boolean;
     isLgDesktop: boolean;
     isXLgDesktop: boolean;
+}
+export interface IViewportContext extends IBreakpoints {
+    width: number;
+    height: number;
+}
+export interface IContainerContext extends IBreakpoints {
+    width: number;
+    height: number;
+}
+export interface IResponsiveContext extends IBreakpoints {
     windowWidth: number;
     windowHeight: number;
-    containerWidth: number;
-    containerHeight: number;
+    viewport: IViewportContext;
+    container: IContainerContext;
     setContainerRef: (el: HTMLElement | null) => void;
 }
 export declare const ResponsiveContext: import("react").Context<IResponsiveContext>;

package/dist/esm/context/ResponsiveContext.js

@@ -1,15 +1,18 @@
 import { createContext } from 'react';
 
-const ResponsiveContext = createContext({
+const defaultBreakpoints = {
     isMobile: false,
     isTablet: false,
     isMdDesktop: false,
     isLgDesktop: false,
     isXLgDesktop: false,
+};
+const ResponsiveContext = createContext({
+    ...defaultBreakpoints,
     windowWidth: 0,
     windowHeight: 0,
-    containerWidth: 0,
-    containerHeight: 0,
+    viewport: { ...defaultBreakpoints, width: 0, height: 0 },
+    container: { ...defaultBreakpoints, isMobile: true, width: 0, height: 0 },
     setContainerRef: () => { },
 });
 

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

@@ -1 +1 @@
-{"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;;;;"}
+{"version":3,"file":"ResponsiveContext.js","sources":["../../../src/library/context/ResponsiveContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;AA4BA,MAAM,kBAAkB,GAAiB;AACvC,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;CACpB;AAEM,MAAM,iBAAiB,GAAG,aAAa,CAAqB;AACjE,IAAA,GAAG,kBAAkB;AACrB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,QAAQ,EAAE,EAAE,GAAG,kBAAkB,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACxD,IAAA,SAAS,EAAE,EAAE,GAAG,kBAAkB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzE,IAAA,eAAe,EAAE,MAAK,EAAE,CAAC;AAC1B,CAAA;;;;"}

package/dist/esm/providers/ResponsiveProvider.js

@@ -1,7 +1,7 @@
 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';
+import { computeBreakpointBand, computeBreakpoints } from '../utils/responsive.js';
 
 const ResponsiveProvider = ({ children }) => {
     const [windowWidth, windowHeight] = useWindowSize();
@@ -12,7 +12,10 @@ const ResponsiveProvider = ({ children }) => {
             setContainerSize({ width: 0, height: 0 });
             return;
         }
-        setContainerSize({ width: containerEl.offsetWidth, height: containerEl.offsetHeight });
+        setContainerSize({
+            width: containerEl.offsetWidth,
+            height: containerEl.offsetHeight,
+        });
         const observer = new ResizeObserver((entries) => {
             if (entries[0]) {
                 setContainerSize({
@@ -27,16 +30,33 @@ const ResponsiveProvider = ({ children }) => {
     const effectiveWidth = containerEl
         ? Math.min(windowWidth, containerSize.width)
         : windowWidth;
+    // default band takes the effective width, which is the min of containerEl width and window width
     const band = computeBreakpointBand(effectiveWidth);
+    // viewport band essentially takes the absolute window width
+    const viewportBand = computeBreakpointBand(windowWidth);
+    // containerElBand takes the width of the absolute containerEl width
+    const containerElBand = computeBreakpointBand(containerSize.width);
     const breakpoints = useMemo(() => computeBreakpoints(effectiveWidth), [band]);
+    const viewportBreakpoints = useMemo(() => computeBreakpoints(windowWidth), [viewportBand]);
+    const containerElBreakpoints = useMemo(() => computeBreakpoints(containerSize.width), [containerElBand]);
+    const viewport = useMemo(() => ({
+        ...viewportBreakpoints,
+        width: windowWidth,
+        height: windowHeight,
+    }), [viewportBreakpoints, windowWidth, windowHeight]);
+    const container = useMemo(() => ({
+        ...containerElBreakpoints,
+        width: containerSize.width,
+        height: containerSize.height,
+    }), [containerElBreakpoints, containerSize.width, containerSize.height]);
     const value = useMemo(() => ({
         ...breakpoints,
         windowWidth,
         windowHeight,
-        containerWidth: containerSize.width,
-        containerHeight: containerSize.height,
+        viewport,
+        container,
         setContainerRef: setContainerEl,
-    }), [breakpoints, windowWidth, windowHeight, containerSize.width, containerSize.height]);
+    }), [breakpoints, windowWidth, windowHeight, viewport, container]);
     return (React__default.createElement(ResponsiveContext.Provider, { value: value }, children));
 };
 

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":";;;;;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;;;;"}
+{"version":3,"file":"ResponsiveProvider.js","sources":["../../../src/library/providers/ResponsiveProvider.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"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"}

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

@@ -23,9 +23,9 @@ declare const _default: {
         okButtonStyles?: React.CSSProperties;
         rootClassName?: string;
         rootStyles?: React.CSSProperties;
+        pa?: 0 | 2 | 1 | 3 | 4 | 5 | 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;

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

@@ -1,13 +1,23 @@
-export interface IResponsiveContext {
+export interface IBreakpoints {
     isMobile: boolean;
     isTablet: boolean;
     isMdDesktop: boolean;
     isLgDesktop: boolean;
     isXLgDesktop: boolean;
+}
+export interface IViewportContext extends IBreakpoints {
+    width: number;
+    height: number;
+}
+export interface IContainerContext extends IBreakpoints {
+    width: number;
+    height: number;
+}
+export interface IResponsiveContext extends IBreakpoints {
     windowWidth: number;
     windowHeight: number;
-    containerWidth: number;
-    containerHeight: number;
+    viewport: IViewportContext;
+    container: IContainerContext;
     setContainerRef: (el: HTMLElement | null) => void;
 }
 export declare const ResponsiveContext: import("react").Context<IResponsiveContext>;

package/package.json

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