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

package/README.md

@@ -12,6 +12,8 @@ A lightweight and flexible layout system for responsive web design, inspired by
 - 🎯 Customizable breakpoints
 - 🎨 CSS variable support
 - 🧹 Clean API with cleanup function
+- ⚡ Immediate layout application
+- 📐 Orientation change support
 
 ## Installation
 
@@ -44,8 +46,10 @@ import { flexible } from '@cherrywind/flexible';
 
 const cleanup = flexible({
   breakpoints: [1024, 768],
-  containers: [1920, 1024, 768],
-  basicContainer: 1920,
+  layouts: [375, 1024, 1920],
+  basicLayout: 1920,
+  immediate: true,
+  orientationchange: false,
   scope: {
     element: document.querySelector('.container'),
     cssVarName: '--custom-rem'
@@ -65,22 +69,49 @@ interface FlexibleOptions {
    */
   breakpoints?: number[];
   /**
-   * An array of container widths that corresponds to breakpoints.
+   * An array of layout widths that corresponds to breakpoints.
    * Must have exactly one more item than breakpoints array.
+   * For example, if breakpoints is [768], layouts could be [375, 1920],
+   * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.
    */
-  containers?: number[];
+  layouts?: number[];
   /**
-   * The base container width used as reference for calculations.
-   * Defaults to the last item in containers array.
+   * The base layout width used as reference for calculations.
+   * Only effective when layouts is provided.
+   * Used as the baseline layout width for ratio calculations.
+   * Defaults to the last item in layouts array (layouts?.at(-1)),
+   * which typically represents the largest viewport width.
    */
-  basicContainer?: number;
+  basicLayout?: number;
+  /**
+   * Whether to apply the layout immediately on initialization.
+   * Defaults to false.
+   */
+  immediate?: boolean;
+  /**
+   * Whether to listen for orientation change events.
+   * Defaults to true.
+   */
+  orientationchange?: boolean;
   /**
    * Whether to set the CSS variable on a specific scope element.
+   * Defaults to false, which means setting the font size on the document element.
+   * If an object is provided, it can specify the element and CSS variable name.
    */
-  scope?: {
-    element?: HTMLElement;
-    cssVarName?: string;
-  } | false;
+  scope?:
+    | false
+    | {
+        /**
+         * The scope element to set the CSS variable on.
+         * Defaults to document.documentElement.
+         */
+        element?: HTMLElement;
+        /**
+         * The CSS variable name to use for the base rem value.
+         * Defaults to "--local-scope-rem".
+         */
+        cssVarName?: string;
+      };
 }
 ```
 
@@ -115,8 +146,8 @@ import { flexible } from '@cherrywind/flexible';
 
 const cleanup = flexible({
   breakpoints: [1024, 768],
-  containers: [1920, 1024, 768],
-  basicContainer: 1920
+  layouts: [375, 1024, 1920],
+  basicLayout: 1920
 });
 ```
 
@@ -134,6 +165,28 @@ const cleanup = flexible({
 });
 ```
 
+### Immediate Layout Example
+
+```typescript
+import { flexible } from '@cherrywind/flexible';
+
+// Apply layout immediately without waiting for load event
+const cleanup = flexible({
+  immediate: true
+});
+```
+
+### Disable Orientation Change Example
+
+```typescript
+import { flexible } from '@cherrywind/flexible';
+
+// Disable orientation change handling
+const cleanup = flexible({
+  orientationchange: false
+});
+```
+
 ## License
 
 MIT

package/README.zh-CN.md

@@ -12,6 +12,8 @@
 - 🎯 可自定义断点
 - 🎨 支持 CSS 变量
 - 🧹 提供清理函数的简洁 API
+- ⚡ 支持立即应用布局
+- 📐 支持屏幕方向变化
 
 ## 安装
 
@@ -44,8 +46,10 @@ import { flexible } from '@cherrywind/flexible';
 
 const cleanup = flexible({
   breakpoints: [1024, 768],
-  containers: [1920, 1024, 768],
-  basicContainer: 1920,
+  layouts: [375, 1024, 1920],
+  basicLayout: 1920,
+  immediate: true,
+  orientationchange: false,
   scope: {
     element: document.querySelector('.container'),
     cssVarName: '--custom-rem'
@@ -65,22 +69,49 @@ interface FlexibleOptions {
    */
   breakpoints?: number[];
   /**
-   * 与断点对应的容器宽度数组。
+   * 与断点对应的布局宽度数组。
    * 数组长度必须比断点数组多一个。
+   * 例如，如果断点是 [768]，布局可以是 [375, 1920]，
+   * 其中 375 是视口宽度 <= 768px 时的宽度，1920 是视口宽度 > 768px 时的宽度。
    */
-  containers?: number[];
+  layouts?: number[];
   /**
-   * 用于计算的基础容器宽度。
-   * 默认为 containers 数组的最后一项。
+   * 用于计算的基础布局宽度。
+   * 仅在提供 layouts 时有效。
+   * 用作比例计算的基础布局宽度。
+   * 默认为 layouts 数组的最后一项（layouts?.at(-1)），
+   * 通常代表最大的视口宽度。
    */
-  basicContainer?: number;
+  basicLayout?: number;
+  /**
+   * 是否在初始化时立即应用布局。
+   * 默认为 false。
+   */
+  immediate?: boolean;
+  /**
+   * 是否监听屏幕方向变化事件。
+   * 默认为 true。
+   */
+  orientationchange?: boolean;
   /**
    * 是否在特定作用域元素上设置 CSS 变量。
+   * 默认为 false，表示在文档元素上设置字体大小。
+   * 如果提供对象，可以指定元素和 CSS 变量名。
    */
-  scope?: {
-    element?: HTMLElement;
-    cssVarName?: string;
-  } | false;
+  scope?:
+    | false
+    | {
+        /**
+         * 设置 CSS 变量的作用域元素。
+         * 默认为 document.documentElement。
+         */
+        element?: HTMLElement;
+        /**
+         * 用于基础 rem 值的 CSS 变量名。
+         * 默认为 "--local-scope-rem"。
+         */
+        cssVarName?: string;
+      };
 }
 ```
 
@@ -115,8 +146,8 @@ import { flexible } from '@cherrywind/flexible';
 
 const cleanup = flexible({
   breakpoints: [1024, 768],
-  containers: [1920, 1024, 768],
-  basicContainer: 1920
+  layouts: [375, 1024, 1920],
+  basicLayout: 1920
 });
 ```
 
@@ -134,6 +165,28 @@ const cleanup = flexible({
 });
 ```
 
+### 立即应用布局示例
+
+```typescript
+import { flexible } from '@cherrywind/flexible';
+
+// 立即应用布局，不等待 load 事件
+const cleanup = flexible({
+  immediate: true
+});
+```
+
+### 禁用屏幕方向变化示例
+
+```typescript
+import { flexible } from '@cherrywind/flexible';
+
+// 禁用屏幕方向变化处理
+const cleanup = flexible({
+  orientationchange: false
+});
+```
+
 ## 许可证
 
-MIT 
+MIT

package/dist/index.cjs

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

package/dist/index.cjs.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -17,20 +17,30 @@ export declare interface FlexibleOptions {
      */
     breakpoints?: number[];
     /**
-     * An array of container widths that corresponds to breakpoints.
+     * An array of layout widths that corresponds to breakpoints.
      * Must have exactly one more item than breakpoints array.
-     * For example, if breakpoints is [768], containers could be [375, 1920],
+     * For example, if breakpoints is [768], layouts could be [375, 1920],
      * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.
      */
-    containers?: number[];
+    layouts?: number[];
     /**
-     * The base container width used as reference for calculations.
-     * Only effective when containers is provided.
-     * Used as the baseline container width for ratio calculations.
-     * Defaults to the last item in containers array (containers?.at(-1)),
+     * The base layout width used as reference for calculations.
+     * Only effective when layouts is provided.
+     * Used as the baseline layout width for ratio calculations.
+     * Defaults to the last item in layouts array (layouts?.at(-1)),
      * which typically represents the largest viewport width.
      */
-    basicContainer?: number;
+    basicLayout?: number;
+    /**
+     * Whether to apply the layout immediately on initialization.
+     * Defaults to false.
+     */
+    immediate?: boolean;
+    /**
+     * Whether to listen for orientation change events.
+     * Defaults to true.
+     */
+    orientationchange?: boolean;
     /**
      * Whether to set the CSS variable on a specific scope element.
      * Defaults to false, which means setting the font size on the document element.

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +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;"}

package/package.json

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