@cherrywind/flexible 0.0.2-beta.2 → 0.0.2-beta.3

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=(f={})=>{const{breakpoints:u=[768],layouts:s,basicLayout:p,scope:c,immediate:l=!1,orientationchange:d=!0}=f,a=u.sort((e,o)=>e-o),n=s==null?void 0:s.sort((e,o)=>e-o),m=p??(n==null?void 0:n.at(-1)),v=e=>!n||!m?1:n.length-1===a.length?m/n[e]:1,t=()=>{const e=document.documentElement,o=e.clientWidth;let r=o/100;for(let i=0;i<a.length;i++)if(o<=a[i]){r=r*v(i);break}if(c){const{element:i=document.documentElement,cssVarName:w="--local-scope-rem"}=c;i.style.setProperty(w,r+"px")}else e.style.fontSize=r+"px"};return l?t():window.addEventListener("load",t),window.addEventListener("resize",t),d&&screen.orientation.addEventListener("change",t),()=>{l||window.removeEventListener("load",t),window.removeEventListener("resize",t),d&&screen.orientation.removeEventListener("change",t)}};exports.flexible=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=(m={})=>{const{breakpoints:f=[768],layouts:r,basicLayout:u,scope:a,immediate:c=!1,orientationchange:l=!0}=m,s=f.sort((e,t)=>e-t),o=r==null?void 0:r.sort((e,t)=>e-t),d=u??(o==null?void 0:o.at(-1)),p=e=>!o||!d?1:o.length-1===s.length?d/o[e]:1,n=()=>{const e=window.innerWidth;let t=e/100;for(let i=0;i<s.length;i++)if(e<=s[i]){t=t*p(i);break}if(a){const{element:i=document.documentElement,cssVarName:v="--local-scope-rem"}=a;i.style.setProperty(v,t+"px")}else document.documentElement.style.fontSize=t+"px"};return c?n():window.addEventListener("load",n),window.addEventListener("resize",n),l&&screen.orientation.addEventListener("change",n),()=>{c||window.removeEventListener("load",n),window.removeEventListener("resize",n),l&&screen.orientation.removeEventListener("change",n)}};exports.flexible=w;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["/**\n * Options for the flexible layout function.\n */\nexport interface FlexibleOptions {\n  /**\n   * An array of breakpoints in pixels, from largest to smallest.\n   * Defaults to [768].\n   */\n  breakpoints?: number[];\n  /**\n   * An array of layout widths that corresponds to breakpoints.\n   * Must have exactly one more item than breakpoints array.\n   * For example, if breakpoints is [768], layouts could be [375, 1920],\n   * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.\n   */\n  layouts?: number[];\n  /**\n   * The base layout width used as reference for calculations.\n   * Only effective when layouts is provided.\n   * Used as the baseline layout width for ratio calculations.\n   * Defaults to the last item in layouts array (layouts?.at(-1)),\n   * which typically represents the largest viewport width.\n   */\n  basicLayout?: number;\n  /**\n   * Whether to apply the layout immediately on initialization.\n   * Defaults to false.\n   */\n  immediate?: boolean;\n  /**\n   * Whether to listen for orientation change events.\n   * Defaults to true.\n   */\n  orientationchange?: boolean;\n\n  /**\n   * Whether to set the CSS variable on a specific scope element.\n   * Defaults to false, which means setting the font size on the document element.\n   * If an object is provided, it can specify the element and CSS variable name.\n   */\n  scope?:\n    | false\n    | {\n        /**\n         * The scope element to set the CSS variable on.\n         * Defaults to document.documentElement.\n         */\n        element?: HTMLElement;\n        /**\n         * The CSS variable name to use for the base rem value.\n         * Defaults to \"--local-scope-rem\".\n         */\n        cssVarName?: string;\n      };\n}\n\n/**\n * Initializes a flexible layout system that sets a CSS variable for rem units\n * based on the viewport width and adaptively scales according to breakpoints.\n *\n * @param options - Configuration options for the flexible layout\n * @returns A cleanup function to remove event listeners\n */\nexport const flexible = (options: FlexibleOptions = {}): (() => void) => {\n  const {\n    breakpoints: propBreakpoints = [768],\n    layouts: propLayouts,\n    basicLayout: propBasicLayout,\n    scope,\n    immediate = false,\n    orientationchange = true,\n  } = options;\n  // Sort breakpoints and layouts in ascending order\n  const breakpoints = propBreakpoints.sort((a, b) => a - b);\n  const layouts = propLayouts?.sort((a, b) => a - b);\n  const basicLayout = propBasicLayout ?? layouts?.at(-1);\n\n  /**\n   * Calculate the ratio factor for a specific breakpoint\n   * @param index - Breakpoint index\n   * @returns The ratio factor, defaults to 1\n   */\n  const getBreakpointRatio = (index: number): number => {\n    if (!layouts || !basicLayout) return 1;\n    if (layouts.length - 1 === breakpoints.length) {\n      return basicLayout / layouts[index];\n    }\n    return 1; // Default to ratio factor of 1\n  };\n\n  /**\n   * Respond to window size changes and update CSS variable\n   */\n  const responsive = (): void => {\n    const html = document.documentElement;\n    const width = html.clientWidth;\n    // 100rem = 100vw = design width\n    let vw = width / 100;\n\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (width <= breakpoints[i]) {\n        // Should use layouts[i] as the base\n        vw = vw * getBreakpointRatio(i);\n        break;\n      }\n    }\n    if (scope) {\n      const { element = document.documentElement, cssVarName = '--local-scope-rem' } = scope;\n      // Set the CSS variable --local-scope-rem for the element\n      element.style.setProperty(cssVarName, vw + 'px');\n    } else {\n      html.style.fontSize = vw + 'px';\n    }\n  };\n\n  if (immediate) {\n    responsive();\n  } else {\n    window.addEventListener('load', responsive);\n  }\n  window.addEventListener('resize', responsive);\n  if (orientationchange) {\n    screen.orientation.addEventListener('change', responsive);\n  }\n  // Return cleanup function\n  return () => {\n    if (!immediate) {\n      window.removeEventListener('load', responsive);\n    }\n    window.removeEventListener('resize', responsive);\n    if (orientationchange) {\n      screen.orientation.removeEventListener('change', responsive);\n    }\n  };\n};\n"],"names":["flexible","options","propBreakpoints","propLayouts","propBasicLayout","scope","immediate","orientationchange","breakpoints","a","b","layouts","basicLayout","getBreakpointRatio","index","responsive","html","width","vw","element","cssVarName"],"mappings":"gFA+DO,MAAMA,EAAW,CAACC,EAA2B,KAAqB,CACjE,KAAA,CACJ,YAAaC,EAAkB,CAAC,GAAG,EACnC,QAASC,EACT,YAAaC,EACb,MAAAC,EACA,UAAAC,EAAY,GACZ,kBAAAC,EAAoB,EAAA,EAClBN,EAEEO,EAAcN,EAAgB,KAAK,CAACO,EAAGC,IAAMD,EAAIC,CAAC,EAClDC,EAAUR,GAAA,YAAAA,EAAa,KAAK,CAACM,EAAGC,IAAMD,EAAIC,GAC1CE,EAAcR,IAAmBO,GAAA,YAAAA,EAAS,GAAG,KAO7CE,EAAsBC,GACtB,CAACH,GAAW,CAACC,EAAoB,EACjCD,EAAQ,OAAS,IAAMH,EAAY,OAC9BI,EAAcD,EAAQG,CAAK,EAE7B,EAMHC,EAAa,IAAY,CAC7B,MAAMC,EAAO,SAAS,gBAChBC,EAAQD,EAAK,YAEnB,IAAIE,EAAKD,EAAQ,IAEjB,QAAS,EAAI,EAAG,EAAIT,EAAY,OAAQ,IAClC,GAAAS,GAAST,EAAY,CAAC,EAAG,CAEtBU,EAAAA,EAAKL,EAAmB,CAAC,EAC9B,KAAA,CAGJ,GAAIR,EAAO,CACT,KAAM,CAAE,QAAAc,EAAU,SAAS,gBAAiB,WAAAC,EAAa,qBAAwBf,EAEjFc,EAAQ,MAAM,YAAYC,EAAYF,EAAK,IAAI,CAAA,MAE1CF,EAAA,MAAM,SAAWE,EAAK,IAE/B,EAEA,OAAIZ,EACSS,EAAA,EAEJ,OAAA,iBAAiB,OAAQA,CAAU,EAErC,OAAA,iBAAiB,SAAUA,CAAU,EACxCR,GACK,OAAA,YAAY,iBAAiB,SAAUQ,CAAU,EAGnD,IAAM,CACNT,GACI,OAAA,oBAAoB,OAAQS,CAAU,EAExC,OAAA,oBAAoB,SAAUA,CAAU,EAC3CR,GACK,OAAA,YAAY,oBAAoB,SAAUQ,CAAU,CAE/D,CACF"}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["/**\n * Options for the flexible layout function.\n */\nexport interface FlexibleOptions {\n  /**\n   * An array of breakpoints in pixels, from largest to smallest.\n   * Defaults to [768].\n   */\n  breakpoints?: number[];\n  /**\n   * An array of layout widths that corresponds to breakpoints.\n   * Must have exactly one more item than breakpoints array.\n   * For example, if breakpoints is [768], layouts could be [375, 1920],\n   * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.\n   */\n  layouts?: number[];\n  /**\n   * The base layout width used as reference for calculations.\n   * Only effective when layouts is provided.\n   * Used as the baseline layout width for ratio calculations.\n   * Defaults to the last item in layouts array (layouts?.at(-1)),\n   * which typically represents the largest viewport width.\n   */\n  basicLayout?: number;\n  /**\n   * Whether to apply the layout immediately on initialization.\n   * Defaults to false.\n   */\n  immediate?: boolean;\n  /**\n   * Whether to listen for orientation change events.\n   * Defaults to true.\n   */\n  orientationchange?: boolean;\n\n  /**\n   * Whether to set the CSS variable on a specific scope element.\n   * Defaults to false, which means setting the font size on the document element.\n   * If an object is provided, it can specify the element and CSS variable name.\n   */\n  scope?:\n    | false\n    | {\n        /**\n         * The scope element to set the CSS variable on.\n         * Defaults to document.documentElement.\n         */\n        element?: HTMLElement;\n        /**\n         * The CSS variable name to use for the base rem value.\n         * Defaults to \"--local-scope-rem\".\n         */\n        cssVarName?: string;\n      };\n}\n\n/**\n * Initializes a flexible layout system that sets a CSS variable for rem units\n * based on the viewport width and adaptively scales according to breakpoints.\n *\n * @param options - Configuration options for the flexible layout\n * @returns A cleanup function to remove event listeners\n */\nexport const flexible = (options: FlexibleOptions = {}): (() => void) => {\n  const {\n    breakpoints: propBreakpoints = [768],\n    layouts: propLayouts,\n    basicLayout: propBasicLayout,\n    scope,\n    immediate = false,\n    orientationchange = true,\n  } = options;\n  // Sort breakpoints and layouts in ascending order\n  const breakpoints = propBreakpoints.sort((a, b) => a - b);\n  const layouts = propLayouts?.sort((a, b) => a - b);\n  const basicLayout = propBasicLayout ?? layouts?.at(-1);\n\n  /**\n   * Calculate the ratio factor for a specific breakpoint\n   * @param index - Breakpoint index\n   * @returns The ratio factor, defaults to 1\n   */\n  const getBreakpointRatio = (index: number): number => {\n    if (!layouts || !basicLayout) return 1;\n    if (layouts.length - 1 === breakpoints.length) {\n      return basicLayout / layouts[index];\n    }\n    return 1; // Default to ratio factor of 1\n  };\n\n  /**\n   * Respond to window size changes and update CSS variable\n   */\n  const responsive = (): void => {\n    const width = window.innerWidth;\n    // 100rem = 100vw = design width\n    let vw = width / 100;\n\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (width <= breakpoints[i]) {\n        // Should use layouts[i] as the base\n        vw = vw * getBreakpointRatio(i);\n        break;\n      }\n    }\n    if (scope) {\n      const { element = document.documentElement, cssVarName = '--local-scope-rem' } = scope;\n      // Set the CSS variable --local-scope-rem for the element\n      element.style.setProperty(cssVarName, vw + 'px');\n    } else {\n      document.documentElement.style.fontSize = vw + 'px';\n    }\n  };\n\n  if (immediate) {\n    responsive();\n  } else {\n    window.addEventListener('load', responsive);\n  }\n  window.addEventListener('resize', responsive);\n  if (orientationchange) {\n    screen.orientation.addEventListener('change', responsive);\n  }\n  // Return cleanup function\n  return () => {\n    if (!immediate) {\n      window.removeEventListener('load', responsive);\n    }\n    window.removeEventListener('resize', responsive);\n    if (orientationchange) {\n      screen.orientation.removeEventListener('change', responsive);\n    }\n  };\n};\n"],"names":["flexible","options","propBreakpoints","propLayouts","propBasicLayout","scope","immediate","orientationchange","breakpoints","a","b","layouts","basicLayout","getBreakpointRatio","index","responsive","width","vw","element","cssVarName"],"mappings":"gFA+DO,MAAMA,EAAW,CAACC,EAA2B,KAAqB,CACjE,KAAA,CACJ,YAAaC,EAAkB,CAAC,GAAG,EACnC,QAASC,EACT,YAAaC,EACb,MAAAC,EACA,UAAAC,EAAY,GACZ,kBAAAC,EAAoB,EAAA,EAClBN,EAEEO,EAAcN,EAAgB,KAAK,CAACO,EAAGC,IAAMD,EAAIC,CAAC,EAClDC,EAAUR,GAAA,YAAAA,EAAa,KAAK,CAACM,EAAGC,IAAMD,EAAIC,GAC1CE,EAAcR,IAAmBO,GAAA,YAAAA,EAAS,GAAG,KAO7CE,EAAsBC,GACtB,CAACH,GAAW,CAACC,EAAoB,EACjCD,EAAQ,OAAS,IAAMH,EAAY,OAC9BI,EAAcD,EAAQG,CAAK,EAE7B,EAMHC,EAAa,IAAY,CAC7B,MAAMC,EAAQ,OAAO,WAErB,IAAIC,EAAKD,EAAQ,IAEjB,QAAS,EAAI,EAAG,EAAIR,EAAY,OAAQ,IAClC,GAAAQ,GAASR,EAAY,CAAC,EAAG,CAEtBS,EAAAA,EAAKJ,EAAmB,CAAC,EAC9B,KAAA,CAGJ,GAAIR,EAAO,CACT,KAAM,CAAE,QAAAa,EAAU,SAAS,gBAAiB,WAAAC,EAAa,qBAAwBd,EAEjFa,EAAQ,MAAM,YAAYC,EAAYF,EAAK,IAAI,CAAA,MAEtC,SAAA,gBAAgB,MAAM,SAAWA,EAAK,IAEnD,EAEA,OAAIX,EACSS,EAAA,EAEJ,OAAA,iBAAiB,OAAQA,CAAU,EAErC,OAAA,iBAAiB,SAAUA,CAAU,EACxCR,GACK,OAAA,YAAY,iBAAiB,SAAUQ,CAAU,EAGnD,IAAM,CACNT,GACI,OAAA,oBAAoB,OAAQS,CAAU,EAExC,OAAA,oBAAoB,SAAUA,CAAU,EAC3CR,GACK,OAAA,YAAY,oBAAoB,SAAUQ,CAAU,CAE/D,CACF"}

package/dist/index.js

@@ -1,30 +1,30 @@
-const h = (p = {}) => {
+const v = (m = {}) => {
   const {
-    breakpoints: f = [768],
-    layouts: s,
-    basicLayout: u,
-    scope: c,
-    immediate: l = !1,
+    breakpoints: p = [768],
+    layouts: r,
+    basicLayout: f,
+    scope: a,
+    immediate: c = !1,
     orientationchange: d = !0
-  } = p, a = f.sort((e, o) => e - o), n = s == null ? void 0 : s.sort((e, o) => e - o), m = u ?? (n == null ? void 0 : n.at(-1)), v = (e) => !n || !m ? 1 : n.length - 1 === a.length ? m / n[e] : 1, t = () => {
-    const e = document.documentElement, o = e.clientWidth;
-    let r = o / 100;
-    for (let i = 0; i < a.length; i++)
-      if (o <= a[i]) {
-        r = r * v(i);
+  } = m, s = p.sort((e, t) => e - t), o = r == null ? void 0 : r.sort((e, t) => e - t), l = f ?? (o == null ? void 0 : o.at(-1)), w = (e) => !o || !l ? 1 : o.length - 1 === s.length ? l / o[e] : 1, n = () => {
+    const e = window.innerWidth;
+    let t = e / 100;
+    for (let i = 0; i < s.length; i++)
+      if (e <= s[i]) {
+        t = t * w(i);
         break;
       }
-    if (c) {
-      const { element: i = document.documentElement, cssVarName: w = "--local-scope-rem" } = c;
-      i.style.setProperty(w, r + "px");
+    if (a) {
+      const { element: i = document.documentElement, cssVarName: u = "--local-scope-rem" } = a;
+      i.style.setProperty(u, t + "px");
     } else
-      e.style.fontSize = r + "px";
+      document.documentElement.style.fontSize = t + "px";
   };
-  return l ? t() : window.addEventListener("load", t), window.addEventListener("resize", t), d && screen.orientation.addEventListener("change", t), () => {
-    l || window.removeEventListener("load", t), window.removeEventListener("resize", t), d && screen.orientation.removeEventListener("change", t);
+  return c ? n() : window.addEventListener("load", n), window.addEventListener("resize", n), d && screen.orientation.addEventListener("change", n), () => {
+    c || window.removeEventListener("load", n), window.removeEventListener("resize", n), d && screen.orientation.removeEventListener("change", n);
   };
 };
 export {
-  h as flexible
+  v as flexible
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * Options for the flexible layout function.\n */\nexport interface FlexibleOptions {\n  /**\n   * An array of breakpoints in pixels, from largest to smallest.\n   * Defaults to [768].\n   */\n  breakpoints?: number[];\n  /**\n   * An array of layout widths that corresponds to breakpoints.\n   * Must have exactly one more item than breakpoints array.\n   * For example, if breakpoints is [768], layouts could be [375, 1920],\n   * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.\n   */\n  layouts?: number[];\n  /**\n   * The base layout width used as reference for calculations.\n   * Only effective when layouts is provided.\n   * Used as the baseline layout width for ratio calculations.\n   * Defaults to the last item in layouts array (layouts?.at(-1)),\n   * which typically represents the largest viewport width.\n   */\n  basicLayout?: number;\n  /**\n   * Whether to apply the layout immediately on initialization.\n   * Defaults to false.\n   */\n  immediate?: boolean;\n  /**\n   * Whether to listen for orientation change events.\n   * Defaults to true.\n   */\n  orientationchange?: boolean;\n\n  /**\n   * Whether to set the CSS variable on a specific scope element.\n   * Defaults to false, which means setting the font size on the document element.\n   * If an object is provided, it can specify the element and CSS variable name.\n   */\n  scope?:\n    | false\n    | {\n        /**\n         * The scope element to set the CSS variable on.\n         * Defaults to document.documentElement.\n         */\n        element?: HTMLElement;\n        /**\n         * The CSS variable name to use for the base rem value.\n         * Defaults to \"--local-scope-rem\".\n         */\n        cssVarName?: string;\n      };\n}\n\n/**\n * Initializes a flexible layout system that sets a CSS variable for rem units\n * based on the viewport width and adaptively scales according to breakpoints.\n *\n * @param options - Configuration options for the flexible layout\n * @returns A cleanup function to remove event listeners\n */\nexport const flexible = (options: FlexibleOptions = {}): (() => void) => {\n  const {\n    breakpoints: propBreakpoints = [768],\n    layouts: propLayouts,\n    basicLayout: propBasicLayout,\n    scope,\n    immediate = false,\n    orientationchange = true,\n  } = options;\n  // Sort breakpoints and layouts in ascending order\n  const breakpoints = propBreakpoints.sort((a, b) => a - b);\n  const layouts = propLayouts?.sort((a, b) => a - b);\n  const basicLayout = propBasicLayout ?? layouts?.at(-1);\n\n  /**\n   * Calculate the ratio factor for a specific breakpoint\n   * @param index - Breakpoint index\n   * @returns The ratio factor, defaults to 1\n   */\n  const getBreakpointRatio = (index: number): number => {\n    if (!layouts || !basicLayout) return 1;\n    if (layouts.length - 1 === breakpoints.length) {\n      return basicLayout / layouts[index];\n    }\n    return 1; // Default to ratio factor of 1\n  };\n\n  /**\n   * Respond to window size changes and update CSS variable\n   */\n  const responsive = (): void => {\n    const html = document.documentElement;\n    const width = html.clientWidth;\n    // 100rem = 100vw = design width\n    let vw = width / 100;\n\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (width <= breakpoints[i]) {\n        // Should use layouts[i] as the base\n        vw = vw * getBreakpointRatio(i);\n        break;\n      }\n    }\n    if (scope) {\n      const { element = document.documentElement, cssVarName = '--local-scope-rem' } = scope;\n      // Set the CSS variable --local-scope-rem for the element\n      element.style.setProperty(cssVarName, vw + 'px');\n    } else {\n      html.style.fontSize = vw + 'px';\n    }\n  };\n\n  if (immediate) {\n    responsive();\n  } else {\n    window.addEventListener('load', responsive);\n  }\n  window.addEventListener('resize', responsive);\n  if (orientationchange) {\n    screen.orientation.addEventListener('change', responsive);\n  }\n  // Return cleanup function\n  return () => {\n    if (!immediate) {\n      window.removeEventListener('load', responsive);\n    }\n    window.removeEventListener('resize', responsive);\n    if (orientationchange) {\n      screen.orientation.removeEventListener('change', responsive);\n    }\n  };\n};\n"],"names":["flexible","options","propBreakpoints","propLayouts","propBasicLayout","scope","immediate","orientationchange","breakpoints","a","b","layouts","basicLayout","getBreakpointRatio","index","responsive","html","width","vw","element","cssVarName"],"mappings":"AA+DO,MAAMA,IAAW,CAACC,IAA2B,OAAqB;AACjE,QAAA;AAAA,IACJ,aAAaC,IAAkB,CAAC,GAAG;AAAA,IACnC,SAASC;AAAA,IACT,aAAaC;AAAA,IACb,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,EAAA,IAClBN,GAEEO,IAAcN,EAAgB,KAAK,CAACO,GAAGC,MAAMD,IAAIC,CAAC,GAClDC,IAAUR,KAAA,gBAAAA,EAAa,KAAK,CAACM,GAAGC,MAAMD,IAAIC,IAC1CE,IAAcR,MAAmBO,KAAA,gBAAAA,EAAS,GAAG,MAO7CE,IAAqB,CAACC,MACtB,CAACH,KAAW,CAACC,IAAoB,IACjCD,EAAQ,SAAS,MAAMH,EAAY,SAC9BI,IAAcD,EAAQG,CAAK,IAE7B,GAMHC,IAAa,MAAY;AAC7B,UAAMC,IAAO,SAAS,iBAChBC,IAAQD,EAAK;AAEnB,QAAIE,IAAKD,IAAQ;AAEjB,aAAS,IAAI,GAAG,IAAIT,EAAY,QAAQ;AAClC,UAAAS,KAAST,EAAY,CAAC,GAAG;AAEtB,QAAAU,IAAAA,IAAKL,EAAmB,CAAC;AAC9B;AAAA,MAAA;AAGJ,QAAIR,GAAO;AACT,YAAM,EAAE,SAAAc,IAAU,SAAS,iBAAiB,YAAAC,IAAa,wBAAwBf;AAEjF,MAAAc,EAAQ,MAAM,YAAYC,GAAYF,IAAK,IAAI;AAAA,IAAA;AAE1C,MAAAF,EAAA,MAAM,WAAWE,IAAK;AAAA,EAE/B;AAEA,SAAIZ,IACSS,EAAA,IAEJ,OAAA,iBAAiB,QAAQA,CAAU,GAErC,OAAA,iBAAiB,UAAUA,CAAU,GACxCR,KACK,OAAA,YAAY,iBAAiB,UAAUQ,CAAU,GAGnD,MAAM;AACX,IAAKT,KACI,OAAA,oBAAoB,QAAQS,CAAU,GAExC,OAAA,oBAAoB,UAAUA,CAAU,GAC3CR,KACK,OAAA,YAAY,oBAAoB,UAAUQ,CAAU;AAAA,EAE/D;AACF;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * Options for the flexible layout function.\n */\nexport interface FlexibleOptions {\n  /**\n   * An array of breakpoints in pixels, from largest to smallest.\n   * Defaults to [768].\n   */\n  breakpoints?: number[];\n  /**\n   * An array of layout widths that corresponds to breakpoints.\n   * Must have exactly one more item than breakpoints array.\n   * For example, if breakpoints is [768], layouts could be [375, 1920],\n   * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.\n   */\n  layouts?: number[];\n  /**\n   * The base layout width used as reference for calculations.\n   * Only effective when layouts is provided.\n   * Used as the baseline layout width for ratio calculations.\n   * Defaults to the last item in layouts array (layouts?.at(-1)),\n   * which typically represents the largest viewport width.\n   */\n  basicLayout?: number;\n  /**\n   * Whether to apply the layout immediately on initialization.\n   * Defaults to false.\n   */\n  immediate?: boolean;\n  /**\n   * Whether to listen for orientation change events.\n   * Defaults to true.\n   */\n  orientationchange?: boolean;\n\n  /**\n   * Whether to set the CSS variable on a specific scope element.\n   * Defaults to false, which means setting the font size on the document element.\n   * If an object is provided, it can specify the element and CSS variable name.\n   */\n  scope?:\n    | false\n    | {\n        /**\n         * The scope element to set the CSS variable on.\n         * Defaults to document.documentElement.\n         */\n        element?: HTMLElement;\n        /**\n         * The CSS variable name to use for the base rem value.\n         * Defaults to \"--local-scope-rem\".\n         */\n        cssVarName?: string;\n      };\n}\n\n/**\n * Initializes a flexible layout system that sets a CSS variable for rem units\n * based on the viewport width and adaptively scales according to breakpoints.\n *\n * @param options - Configuration options for the flexible layout\n * @returns A cleanup function to remove event listeners\n */\nexport const flexible = (options: FlexibleOptions = {}): (() => void) => {\n  const {\n    breakpoints: propBreakpoints = [768],\n    layouts: propLayouts,\n    basicLayout: propBasicLayout,\n    scope,\n    immediate = false,\n    orientationchange = true,\n  } = options;\n  // Sort breakpoints and layouts in ascending order\n  const breakpoints = propBreakpoints.sort((a, b) => a - b);\n  const layouts = propLayouts?.sort((a, b) => a - b);\n  const basicLayout = propBasicLayout ?? layouts?.at(-1);\n\n  /**\n   * Calculate the ratio factor for a specific breakpoint\n   * @param index - Breakpoint index\n   * @returns The ratio factor, defaults to 1\n   */\n  const getBreakpointRatio = (index: number): number => {\n    if (!layouts || !basicLayout) return 1;\n    if (layouts.length - 1 === breakpoints.length) {\n      return basicLayout / layouts[index];\n    }\n    return 1; // Default to ratio factor of 1\n  };\n\n  /**\n   * Respond to window size changes and update CSS variable\n   */\n  const responsive = (): void => {\n    const width = window.innerWidth;\n    // 100rem = 100vw = design width\n    let vw = width / 100;\n\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (width <= breakpoints[i]) {\n        // Should use layouts[i] as the base\n        vw = vw * getBreakpointRatio(i);\n        break;\n      }\n    }\n    if (scope) {\n      const { element = document.documentElement, cssVarName = '--local-scope-rem' } = scope;\n      // Set the CSS variable --local-scope-rem for the element\n      element.style.setProperty(cssVarName, vw + 'px');\n    } else {\n      document.documentElement.style.fontSize = vw + 'px';\n    }\n  };\n\n  if (immediate) {\n    responsive();\n  } else {\n    window.addEventListener('load', responsive);\n  }\n  window.addEventListener('resize', responsive);\n  if (orientationchange) {\n    screen.orientation.addEventListener('change', responsive);\n  }\n  // Return cleanup function\n  return () => {\n    if (!immediate) {\n      window.removeEventListener('load', responsive);\n    }\n    window.removeEventListener('resize', responsive);\n    if (orientationchange) {\n      screen.orientation.removeEventListener('change', responsive);\n    }\n  };\n};\n"],"names":["flexible","options","propBreakpoints","propLayouts","propBasicLayout","scope","immediate","orientationchange","breakpoints","a","b","layouts","basicLayout","getBreakpointRatio","index","responsive","width","vw","element","cssVarName"],"mappings":"AA+DO,MAAMA,IAAW,CAACC,IAA2B,OAAqB;AACjE,QAAA;AAAA,IACJ,aAAaC,IAAkB,CAAC,GAAG;AAAA,IACnC,SAASC;AAAA,IACT,aAAaC;AAAA,IACb,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,EAAA,IAClBN,GAEEO,IAAcN,EAAgB,KAAK,CAACO,GAAGC,MAAMD,IAAIC,CAAC,GAClDC,IAAUR,KAAA,gBAAAA,EAAa,KAAK,CAACM,GAAGC,MAAMD,IAAIC,IAC1CE,IAAcR,MAAmBO,KAAA,gBAAAA,EAAS,GAAG,MAO7CE,IAAqB,CAACC,MACtB,CAACH,KAAW,CAACC,IAAoB,IACjCD,EAAQ,SAAS,MAAMH,EAAY,SAC9BI,IAAcD,EAAQG,CAAK,IAE7B,GAMHC,IAAa,MAAY;AAC7B,UAAMC,IAAQ,OAAO;AAErB,QAAIC,IAAKD,IAAQ;AAEjB,aAAS,IAAI,GAAG,IAAIR,EAAY,QAAQ;AAClC,UAAAQ,KAASR,EAAY,CAAC,GAAG;AAEtB,QAAAS,IAAAA,IAAKJ,EAAmB,CAAC;AAC9B;AAAA,MAAA;AAGJ,QAAIR,GAAO;AACT,YAAM,EAAE,SAAAa,IAAU,SAAS,iBAAiB,YAAAC,IAAa,wBAAwBd;AAEjF,MAAAa,EAAQ,MAAM,YAAYC,GAAYF,IAAK,IAAI;AAAA,IAAA;AAEtC,eAAA,gBAAgB,MAAM,WAAWA,IAAK;AAAA,EAEnD;AAEA,SAAIX,IACSS,EAAA,IAEJ,OAAA,iBAAiB,QAAQA,CAAU,GAErC,OAAA,iBAAiB,UAAUA,CAAU,GACxCR,KACK,OAAA,YAAY,iBAAiB,UAAUQ,CAAU,GAGnD,MAAM;AACX,IAAKT,KACI,OAAA,oBAAoB,QAAQS,CAAU,GAExC,OAAA,oBAAoB,UAAUA,CAAU,GAC3CR,KACK,OAAA,YAAY,oBAAoB,UAAUQ,CAAU;AAAA,EAE/D;AACF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cherrywind/flexible",
-  "version": "0.0.2-beta.2",
+  "version": "0.0.2-beta.3",
   "private": false,
   "keywords": [
     "flexible"