@resval/react-responsive-values/index.cjs

Resval stands for Responsive Values, which is a hook that can return a value based on the current breakpoint. This hook can also respond to the size of the window.

"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));const n={base:"0px",xs:"320px",sm:"576px",md:"768px",lg:"1080px",xl:"1280px"},r=/^[0-9.]+(cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|rlh|vw|vh|vmin|vmax|vb|vi|svw|svh|lvw|lvh|dvw|dvh)$/;function s(e,t){if(!t)return e;if((null==(n=t)?void 0:n.constructor)!==Object)throw new TypeError("Breakpoints option must be an object.");var n;if(function(e){return 0===Object.keys(e).length&&e.constructor===Object}(t))return e;let s=Object.values(t);if(!s.every((e=>"string"==typeof e&&r.test(e))))throw new TypeError("When you initialize `createResponsiveValues`, `breakpoints` property must contain CSS Units such as `px`, `rem`, `em`, etc (case-sensitive). and do not mix up string values and number values OR . Docs: developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units");if(function(e){var t,n;let r=[];for(let s of e){let e=null!==(n=null===(t=s.match(/[a-zA-Z]+/g))||void 0===t?void 0:t[0])&&void 0!==n?n:"";r.includes(e)||r.push(e)}return r.length>1}(s))throw new TypeError("Do not use different CSS Unit values or combine them. Suppose using '100px' and '200rem'. But use the same CSS Units, if you want to use 'px' use 'px' for all.");return t}function o(e,t){if(!t)return e;let n=Object.assign({},e);return Object.keys(t).forEach((e=>{n=Object.assign(Object.assign({},t[e]),n)})),Object.keys(n).forEach((t=>{if("string"==typeof(s=t)&&r.test(s))n[t]=t;else if(!e[t])throw new TypeError(`The key \`${t}\` is not valid CSS Units. Custom breakpoints must be a valid CSS Units such as \`px\`, \`rem\`, \`em\`, etc.`);var s})),n}const i="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;function u(e,n){let[r,s]=t.useState(void 0);return i((()=>{let t=Object.values(e).map((e=>window.matchMedia(`(${n}-width: ${e})`)));function r(){s(function(e){if("undefined"!=typeof window)return Object.entries(e).map((function([e,t]){return{query:e,constraintWidth:t,status:window.matchMedia(`(${n}-width: ${t})`).matches}}));return}(e))}r();for(let e of t)e.addEventListener("change",r);return()=>{for(let e of t)e.removeEventListener("change",r)}}),[]),{breakpointsTrack:r}}exports.createResponsiveValues=function(e){const r=new Map;let{breakpoints:i,media:a="min"}=e,c=s(n,i);return function(e){let n=t.useMemo((()=>o(c,e)),[]),{breakpointsTrack:s}=u(n,a),i=t.useMemo((()=>s?function(e){return e.sort(((e,t)=>Number(e.constraintWidth.replace(/[^0-9.]/g,""))-Number(t.constraintWidth.replace(/[^0-9.]/g,""))))}(s):{}),[s]),{breakpointsCurrent:l,breakpointsClosest:f}=t.useMemo((()=>s?function(e,t){let n=!1,r={query:"",constraintWidth:"",status:!1},s=[];for(let o="min"===t?e.length-1:0;"min"===t?o>=0:o<e.length;"min"===t?o--:o++)e[o].status&&n&&s.push(e[o].query),e[o].status&&!n&&(r=Object.assign({},e[o]),n=!0);return{breakpointsCurrent:r,breakpointsClosest:s}}(i,a):{}),[s,i]);if(l){let t=l.query;if(r.has(t))return r.get(t);let n=function(e,t,n){let r={};const s=t.query;return Object.keys(e).forEach((t=>{const o=Object.keys(e[t]).includes(s),i=e[t][s];if(void 0!==i||o)r[t]=i;else for(const s of n){const n=e[t][s];if(void 0!==n){r[t]=n;break}}})),r}(e,l,f);return r.set(t,n),n}return{}}};