xtreme-ui 0.0.38 → 0.0.39

package/dist/components/layout/ThemePicker/ThemePicker.js

@@ -1,77 +1,78 @@
 "use client";
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { forwardRef as k } from "react";
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
 import a from "clsx";
-import { Button as C } from "../../base/Button/Button.js";
-import { Icon as y } from "../../base/Icon/Icon.js";
-import { EThemeScheme as r, EThemeColor as S } from "../../context/Theme/type.js";
-import { useXTheme as $ } from "../../context/useContext.js";
-import { capitalizeFirstLetter as x } from "../../../utils/function/string.js";
+import { ActionCard as k } from "../../base/ActionCard/ActionCard.js";
+import { Button as y } from "../../base/Button/Button.js";
+import { Icon as S } from "../../base/Icon/Icon.js";
+import { EThemeScheme as i, EThemeColor as $ } from "../../context/Theme/type.js";
+import { useXTheme as x } from "../../context/useContext.js";
+import { capitalizeFirstLetter as g } from "../../../utils/function/string.js";
 import "../../../utils/helper/themeController.js";
 import e from "./themePicker.module.scss.js";
-import { EThemePickerSize as g, EThemePickerGap as u } from "./type.js";
-const P = [
-  { name: r.system, icon: "f390" },
-  { name: r.light, icon: "f185" },
-  { name: r.dark, icon: "f6c3" }
-], I = k((l, h) => {
-  const { className: n, size: c = "default" } = l, { themeScheme: t, setThemeScheme: d, themeColor: p, setThemeColor: f } = $(), N = a(
+import { EThemePickerSize as u, EThemePickerGap as P } from "./type.js";
+const I = [
+  { name: i.system, icon: "f390" },
+  { name: i.light, icon: "f185" },
+  { name: i.dark, icon: "f6c3" }
+], z = C((l, h) => {
+  const { className: n, size: s = "default" } = l, { themeScheme: t, setThemeScheme: d, themeColor: p, setThemeColor: f } = x(), N = a(
     e.themePicker,
     n
   );
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ r(
     "section",
     {
       className: N,
       ref: h,
       role: "theme",
       style: {
-        "--schemeSize": `${g[c]}px`,
-        "--schemeGap": `${u[c]}px`
+        "--schemeSize": `${u[s]}px`,
+        "--schemeGap": `${P[s]}px`
       },
       children: [
-        /* @__PURE__ */ o("div", { className: e.themeSchemes, children: P.map(({ name: m, icon: i }, v) => /* @__PURE__ */ s(
-          "div",
+        /* @__PURE__ */ o("div", { className: e.themeSchemes, children: I.map(({ name: m, icon: c }, v) => /* @__PURE__ */ r(
+          k,
           {
             className: a(e.themeSchemeItem, e[m], t === m && e.active),
             onClick: () => d(m),
             children: [
-              /* @__PURE__ */ s("div", { className: e.design, children: [
-                /* @__PURE__ */ o("div", { className: e.navigation, children: Array.from({ length: 6 }, (z, T) => /* @__PURE__ */ o("div", { className: e.navigationItem }, `ThemeScheme-${m}-navigation-${T}`)) }),
-                /* @__PURE__ */ s("div", { className: e.content, children: [
+              /* @__PURE__ */ r("div", { className: e.design, children: [
+                /* @__PURE__ */ o("div", { className: e.navigation, children: Array.from({ length: 6 }, (E, T) => /* @__PURE__ */ o("div", { className: e.navigationItem }, `ThemeScheme-${m}-navigation-${T}`)) }),
+                /* @__PURE__ */ r("div", { className: e.content, children: [
                   /* @__PURE__ */ o("div", { className: e.header }),
                   /* @__PURE__ */ o("div", { className: e.profile })
                 ] })
               ] }),
-              /* @__PURE__ */ s("div", { className: e.footer, children: [
-                /* @__PURE__ */ o(y, { className: e.footerIcon, code: t === m ? "f058" : i, type: "solid" }),
+              /* @__PURE__ */ r("div", { className: e.footer, children: [
+                /* @__PURE__ */ o(S, { className: e.footerIcon, code: t === m ? "f058" : c, type: "solid" }),
                 /* @__PURE__ */ o("span", { className: e.footerLabel, children: m })
               ] })
             ]
           },
           `ThemeScheme-${m}-${v}`
         )) }),
-        /* @__PURE__ */ o("div", { className: e.themeColors, children: Object.keys(S).map((m, i) => /* @__PURE__ */ o(
-          C,
+        /* @__PURE__ */ o("div", { className: e.themeColors, children: Object.keys($).map((m, c) => /* @__PURE__ */ o(
+          y,
           {
             className: e.themeColorsItem,
-            size: c,
+            size: s,
             icon: "f00c",
             iconType: "solid",
             style: {
-              "--themeColor": `var(--color${x(m)}Accent)`,
+              "--themeColor": `var(--color${g(m)}Accent)`,
               color: p === m ? "white" : "transparent"
             },
             onClick: () => f(m)
           },
-          `ThemeColor-${m}-${i}`
+          `ThemeColor-${m}-${c}`
         )) })
       ]
     }
   );
 });
-I.displayName = "ThemePicker";
+z.displayName = "ThemePicker";
 export {
-  I as ThemePicker
+  z as ThemePicker
 };
 //# sourceMappingURL=ThemePicker.js.map

package/dist/components/layout/ThemePicker/ThemePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePicker.js","sources":["../../../../src/components/layout/ThemePicker/ThemePicker.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { Button } from '#components/base/Button/Button';\nimport { Icon } from '#components/base/Icon/Icon';\nimport { EThemeColor, EThemeScheme, TThemeColor } from '#components/context/Theme/type';\nimport { useXTheme } from '#components/context/useContext';\nimport { capitalizeFirstLetter } from '#utils/index';\n\nimport styles from './themePicker.module.scss';\nimport { EThemePickerGap, EThemePickerSize, TThemePickerProps } from './type';\n\nconst schemes = [\n\t{ name: EThemeScheme.system, icon: 'f390' },\n\t{ name: EThemeScheme.light, icon: 'f185' },\n\t{ name: EThemeScheme.dark, icon: 'f6c3' },\n] as const;\n\nexport const ThemePicker = forwardRef<HTMLDivElement, TThemePickerProps>((props, ref) => {\n\tconst { className, size = 'default' } = props;\n\n\tconst { themeScheme, setThemeScheme, themeColor, setThemeColor } = useXTheme();\n\n\tconst ThemePickerClsx = clsx(\n\t\tstyles.themePicker,\n\t\tclassName,\n\t);\n\n\treturn (\n\t\t<section className={ThemePickerClsx} ref={ref} role='theme'\n\t\t\tstyle={{\n\t\t\t\t['--schemeSize' as string]: `${EThemePickerSize[size]}px`,\n\t\t\t\t['--schemeGap' as string]: `${EThemePickerGap[size]}px`,\n\t\t\t}}\n\t\t>\n\t\t\t<div className={styles.themeSchemes}>\n\t\t\t\t{\n\t\t\t\t\tschemes.map(({ name, icon }, i) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={`ThemeScheme-${name}-${i}`}\n\t\t\t\t\t\t\tclassName={clsx(styles.themeSchemeItem, styles[name], themeScheme === name && styles.active)}\n\t\t\t\t\t\t\tonClick={() => setThemeScheme(name)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className={styles.design}>\n\t\t\t\t\t\t\t\t<div className={styles.navigation}>\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tArray.from({ length: 6 }, (_, i) => (\n\t\t\t\t\t\t\t\t\t\t\t<div key={`ThemeScheme-${name}-navigation-${i}`} className={styles.navigationItem} />\n\t\t\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className={styles.content}>\n\t\t\t\t\t\t\t\t\t<div className={styles.header} />\n\t\t\t\t\t\t\t\t\t<div className={styles.profile} />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className={styles.footer}>\n\t\t\t\t\t\t\t\t<Icon className={styles.footerIcon} code={themeScheme === name ? 'f058' : icon} type='solid' />\n\t\t\t\t\t\t\t\t<span className={styles.footerLabel}>{name}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div className={styles.themeColors}>\n\t\t\t\t{\n\t\t\t\t\tObject.keys(EThemeColor).map((color, i) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkey={`ThemeColor-${color}-${i}`}\n\t\t\t\t\t\t\t\tclassName={styles.themeColorsItem}\n\t\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\t\ticon='f00c'\n\t\t\t\t\t\t\t\ticonType='solid'\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t['--themeColor' as string]: `var(--color${capitalizeFirstLetter(color)}Accent)`,\n\t\t\t\t\t\t\t\t\tcolor: themeColor === color ? 'white' : 'transparent',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={() => setThemeColor(color as TThemeColor)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t</div>\n\t\t</section>\n\t);\n});\n\nThemePicker.displayName = 'ThemePicker';\n"],"names":["schemes","EThemeScheme","ThemePicker","forwardRef","props","ref","className","size","themeScheme","setThemeScheme","themeColor","setThemeColor","useXTheme","ThemePickerClsx","clsx","styles","jsxs","EThemePickerSize","EThemePickerGap","jsx","name","icon","i","_","Icon","EThemeColor","color","Button","capitalizeFirstLetter"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,IAAU;AAAA,EACf,EAAE,MAAMC,EAAa,QAAQ,MAAM,OAAO;AAAA,EAC1C,EAAE,MAAMA,EAAa,OAAO,MAAM,OAAO;AAAA,EACzC,EAAE,MAAMA,EAAa,MAAM,MAAM,OAAO;AACzC,GAEaC,IAAcC,EAA8C,CAACC,GAAOC,MAAQ;AACxF,QAAM,EAAE,WAAAC,GAAW,MAAAC,IAAO,UAAA,IAAcH,GAElC,EAAE,aAAAI,GAAa,gBAAAC,GAAgB,YAAAC,GAAY,eAAAC,EAAA,IAAkBC,KAE7DC,IAAkBC;AAAA,IACvBC,EAAO;AAAA,IACPT;AAAA,EAAA;AAIA,SAAA,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MAAQ,WAAWH;AAAA,MAAiB,KAAAR;AAAA,MAAU,MAAK;AAAA,MACnD,OAAO;AAAA,QACL,gBAA2B,GAAGY,EAAiBV,CAAI,CAAC;AAAA,QACpD,eAA0B,GAAGW,EAAgBX,CAAI,CAAC;AAAA,MACpD;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAY,EAAA,OAAA,EAAI,WAAWJ,EAAO,cAErB,UAAAf,EAAQ,IAAI,CAAC,EAAE,MAAAoB,GAAM,MAAAC,EAAK,GAAGC,MAC5B,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YAEA,WAAWF,EAAKC,EAAO,iBAAiBA,EAAOK,CAAI,GAAGZ,MAAgBY,KAAQL,EAAO,MAAM;AAAA,YAC3F,SAAS,MAAMN,EAAeW,CAAI;AAAA,YAElC,UAAA;AAAA,cAAC,gBAAAJ,EAAA,OAAA,EAAI,WAAWD,EAAO,QACtB,UAAA;AAAA,gBAAC,gBAAAI,EAAA,OAAA,EAAI,WAAWJ,EAAO,YAErB,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAACQ,GAAGD,MAC5B,gBAAAH,EAAA,OAAA,EAAgD,WAAWJ,EAAO,eAAzD,GAAA,eAAeK,CAAI,eAAeE,CAAC,EAAsC,CACnF,EAEH,CAAA;AAAA,gBACC,gBAAAN,EAAA,OAAA,EAAI,WAAWD,EAAO,SACtB,UAAA;AAAA,kBAAC,gBAAAI,EAAA,OAAA,EAAI,WAAWJ,EAAO,OAAQ,CAAA;AAAA,kBAC9B,gBAAAI,EAAA,OAAA,EAAI,WAAWJ,EAAO,QAAS,CAAA;AAAA,gBAAA,GACjC;AAAA,cAAA,GACD;AAAA,cACC,gBAAAC,EAAA,OAAA,EAAI,WAAWD,EAAO,QACtB,UAAA;AAAA,gBAAC,gBAAAI,EAAAK,GAAA,EAAK,WAAWT,EAAO,YAAY,MAAMP,MAAgBY,IAAO,SAASC,GAAM,MAAK,QAAQ,CAAA;AAAA,gBAC5F,gBAAAF,EAAA,QAAA,EAAK,WAAWJ,EAAO,aAAc,UAAKK,GAAA;AAAA,cAAA,GAC5C;AAAA,YAAA;AAAA,UAAA;AAAA,UApBK,eAAeA,CAAI,IAAIE,CAAC;AAAA,QAsB9B,CAAA,GAEH;AAAA,QACC,gBAAAH,EAAA,OAAA,EAAI,WAAWJ,EAAO,aAErB,UAAA,OAAO,KAAKU,CAAW,EAAE,IAAI,CAACC,GAAO,MAEnC,gBAAAP;AAAA,UAACQ;AAAA,UAAA;AAAA,YAEA,WAAWZ,EAAO;AAAA,YAClB,MAAAR;AAAA,YACA,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAO;AAAA,cACL,gBAA2B,cAAcqB,EAAsBF,CAAK,CAAC;AAAA,cACtE,OAAOhB,MAAegB,IAAQ,UAAU;AAAA,YACzC;AAAA,YACA,SAAS,MAAMf,EAAce,CAAoB;AAAA,UAAA;AAAA,UAT5C,cAAcA,CAAK,IAAI,CAAC;AAAA,QAAA,CAY/B,GAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH,CAAC;AAEDxB,EAAY,cAAc;"}
+{"version":3,"file":"ThemePicker.js","sources":["../../../../src/components/layout/ThemePicker/ThemePicker.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { ActionCard } from '#components/base/ActionCard/ActionCard';\nimport { Button } from '#components/base/Button/Button';\nimport { Icon } from '#components/base/Icon/Icon';\nimport { EThemeColor, EThemeScheme, TThemeColor } from '#components/context/Theme/type';\nimport { useXTheme } from '#components/context/useContext';\nimport { capitalizeFirstLetter } from '#utils/index';\n\nimport styles from './themePicker.module.scss';\nimport { EThemePickerGap, EThemePickerSize, TThemePickerProps } from './type';\n\nconst schemes = [\n\t{ name: EThemeScheme.system, icon: 'f390' },\n\t{ name: EThemeScheme.light, icon: 'f185' },\n\t{ name: EThemeScheme.dark, icon: 'f6c3' },\n] as const;\n\nexport const ThemePicker = forwardRef<HTMLDivElement, TThemePickerProps>((props, ref) => {\n\tconst { className, size = 'default' } = props;\n\n\tconst { themeScheme, setThemeScheme, themeColor, setThemeColor } = useXTheme();\n\n\tconst ThemePickerClsx = clsx(\n\t\tstyles.themePicker,\n\t\tclassName,\n\t);\n\n\treturn (\n\t\t<section className={ThemePickerClsx} ref={ref} role='theme'\n\t\t\tstyle={{\n\t\t\t\t['--schemeSize' as string]: `${EThemePickerSize[size]}px`,\n\t\t\t\t['--schemeGap' as string]: `${EThemePickerGap[size]}px`,\n\t\t\t}}\n\t\t>\n\t\t\t<div className={styles.themeSchemes}>\n\t\t\t\t{\n\t\t\t\t\tschemes.map(({ name, icon }, i) => (\n\t\t\t\t\t\t<ActionCard\n\t\t\t\t\t\t\tkey={`ThemeScheme-${name}-${i}`}\n\t\t\t\t\t\t\tclassName={clsx(styles.themeSchemeItem, styles[name], themeScheme === name && styles.active)}\n\t\t\t\t\t\t\tonClick={() => setThemeScheme(name)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className={styles.design}>\n\t\t\t\t\t\t\t\t<div className={styles.navigation}>\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tArray.from({ length: 6 }, (_, i) => (\n\t\t\t\t\t\t\t\t\t\t\t<div key={`ThemeScheme-${name}-navigation-${i}`} className={styles.navigationItem} />\n\t\t\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className={styles.content}>\n\t\t\t\t\t\t\t\t\t<div className={styles.header} />\n\t\t\t\t\t\t\t\t\t<div className={styles.profile} />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className={styles.footer}>\n\t\t\t\t\t\t\t\t<Icon className={styles.footerIcon} code={themeScheme === name ? 'f058' : icon} type='solid' />\n\t\t\t\t\t\t\t\t<span className={styles.footerLabel}>{name}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ActionCard>\n\t\t\t\t\t))\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div className={styles.themeColors}>\n\t\t\t\t{\n\t\t\t\t\tObject.keys(EThemeColor).map((color, i) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkey={`ThemeColor-${color}-${i}`}\n\t\t\t\t\t\t\t\tclassName={styles.themeColorsItem}\n\t\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\t\ticon='f00c'\n\t\t\t\t\t\t\t\ticonType='solid'\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t['--themeColor' as string]: `var(--color${capitalizeFirstLetter(color)}Accent)`,\n\t\t\t\t\t\t\t\t\tcolor: themeColor === color ? 'white' : 'transparent',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={() => setThemeColor(color as TThemeColor)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t</div>\n\t\t</section>\n\t);\n});\n\nThemePicker.displayName = 'ThemePicker';\n"],"names":["schemes","EThemeScheme","ThemePicker","forwardRef","props","ref","className","size","themeScheme","setThemeScheme","themeColor","setThemeColor","useXTheme","ThemePickerClsx","clsx","styles","jsxs","EThemePickerSize","EThemePickerGap","jsx","name","icon","i","ActionCard","_","Icon","EThemeColor","color","Button","capitalizeFirstLetter"],"mappings":"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"}

package/dist/components/layout/ThemePicker/themePicker.module.scss.js

@@ -1,37 +1,37 @@
 "use client";
-const e = "_themePicker_1b9ja_1", t = "_themeSchemes_1b9ja_15", o = "_themeSchemeItem_1b9ja_19", _ = "_system_1b9ja_31", a = "_light_1b9ja_52", n = "_dark_1b9ja_61", c = "_design_1b9ja_70", s = "_navigation_1b9ja_76", i = "_navigationItem_1b9ja_88", m = "_content_1b9ja_101", r = "_header_1b9ja_111", h = "_profile_1b9ja_140", b = "_footer_1b9ja_163", j = "_footerIcon_1b9ja_174", l = "_footerLabel_1b9ja_179", f = "_active_1b9ja_193", g = "_themeColors_1b9ja_205", d = {
+const e = "_themePicker_1elyb_1", t = "_themeSchemes_1elyb_14", o = "_themeSchemeItem_1elyb_18", _ = "_system_1elyb_30", n = "_light_1elyb_51", c = "_dark_1elyb_60", s = "_design_1elyb_69", l = "_navigation_1elyb_77", i = "_navigationItem_1elyb_89", m = "_content_1elyb_102", a = "_header_1elyb_112", r = "_profile_1elyb_141", h = "_footer_1elyb_164", y = "_footerIcon_1elyb_175", b = "_footerLabel_1elyb_180", f = "_active_1elyb_191", g = "_themeColors_1elyb_203", d = {
   themePicker: e,
   themeSchemes: t,
   themeSchemeItem: o,
   system: _,
-  light: a,
-  dark: n,
-  design: c,
-  navigation: s,
+  light: n,
+  dark: c,
+  design: s,
+  navigation: l,
   navigationItem: i,
   content: m,
-  header: r,
-  profile: h,
-  footer: b,
-  footerIcon: j,
-  footerLabel: l,
+  header: a,
+  profile: r,
+  footer: h,
+  footerIcon: y,
+  footerLabel: b,
   active: f,
   themeColors: g
 };
 export {
   f as active,
   m as content,
-  n as dark,
+  c as dark,
   d as default,
-  c as design,
-  b as footer,
-  j as footerIcon,
-  l as footerLabel,
-  r as header,
-  a as light,
-  s as navigation,
+  s as design,
+  h as footer,
+  y as footerIcon,
+  b as footerLabel,
+  a as header,
+  n as light,
+  l as navigation,
   i as navigationItem,
-  h as profile,
+  r as profile,
   _ as system,
   g as themeColors,
   e as themePicker,

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export * from './utils/index';
 export { XProvider } from './components/context';
 export { useXTheme, useXData } from './components/context/useContext';
+export { ActionCard } from './components/base/ActionCard/ActionCard';
+export { type TActionCardProps, EActionCardSize } from './components/base/ActionCard/types';
 export { Avatar } from './components/base/Avatar/Avatar';
 export { type TAvatarProps, EAvatarSize } from './components/base/Avatar/types';
 export { Button } from './components/base/Button/Button';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,cAAc,cAAc,CAAC;AAG7B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAGtE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGhF,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,KAAK,YAAY,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGjF,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGhF,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAG7E,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,KAAK,aAAa,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAGnF,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAGrF,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGpG,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAC1E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,cAAc,cAAc,CAAC;AAG7B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAGtE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,KAAK,gBAAgB,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAG5F,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGhF,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,KAAK,YAAY,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGjF,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGhF,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAG7E,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,KAAK,aAAa,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAGnF,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAGrF,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGpG,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAC1E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/index.js

@@ -4,62 +4,66 @@ import { STORAGE as t } from "./utils/constants/commons.js";
 import { getLocalState as m, setLocalState as i } from "./utils/function/localStorage.js";
 import { mergeRefs as x } from "./utils/function/mergeRefs.js";
 import { capitalizeFirstLetter as n, safeStringFromCodePoint as a, unicodeToString as S } from "./utils/function/string.js";
-import { doc as c, elementObserver as g, getCssProperty as P, getCssPropertyPx as C, getCssPropertyVh as E, getCssPropertyVw as d, isClient as u, localStore as y, setCssProperty as T, waitForElement as v, win as z } from "./utils/helper/domHelper.js";
-import { themeController as h } from "./utils/helper/themeController.js";
-import { XProvider as A } from "./components/context/index.js";
+import { doc as l, elementObserver as g, getCssProperty as C, getCssPropertyPx as P, getCssPropertyVh as d, getCssPropertyVw as E, isClient as u, localStore as y, setCssProperty as z, waitForElement as T, win as v } from "./utils/helper/domHelper.js";
+import { themeController as L } from "./utils/helper/themeController.js";
+import { XProvider as w } from "./components/context/index.js";
 import { useXData as F, useXTheme as X } from "./components/context/useContext.js";
-import { Avatar as O } from "./components/base/Avatar/Avatar.js";
-import { EAvatarSize as V } from "./components/base/Avatar/types.js";
-import { Button as k } from "./components/base/Button/Button.js";
-import { EButtonTypes as G } from "./components/base/Button/types.js";
-import { Icon as j } from "./components/base/Icon/Icon.js";
-import { EIconSize as H } from "./components/base/Icon/types.js";
-import { Lottie as K } from "./components/base/Lottie/Lottie.js";
-import { ELottieSize as Q } from "./components/base/Lottie/types.js";
-import { ProgressBar as W } from "./components/base/ProgressBar/ProgressBar.js";
-import { Spinner as Z } from "./components/base/Spinner/Spinner.js";
-import { ESpinnerSize as $ } from "./components/base/Spinner/types.js";
-import { Textfield as re } from "./components/base/Textfield/Textfield.js";
-import { Sider as te } from "./components/layout/Sider/Sider.js";
-import { Navigation as me } from "./components/layout/Navigation/Navigation.js";
-import { ThemePicker as fe } from "./components/layout/ThemePicker/ThemePicker.js";
+import { ActionCard as O } from "./components/base/ActionCard/ActionCard.js";
+import { EActionCardSize as V } from "./components/base/ActionCard/types.js";
+import { Avatar as k } from "./components/base/Avatar/Avatar.js";
+import { EAvatarSize as G } from "./components/base/Avatar/types.js";
+import { Button as j } from "./components/base/Button/Button.js";
+import { EButtonTypes as H } from "./components/base/Button/types.js";
+import { Icon as K } from "./components/base/Icon/Icon.js";
+import { EIconSize as Q } from "./components/base/Icon/types.js";
+import { Lottie as W } from "./components/base/Lottie/Lottie.js";
+import { ELottieSize as Z } from "./components/base/Lottie/types.js";
+import { ProgressBar as $ } from "./components/base/ProgressBar/ProgressBar.js";
+import { Spinner as er } from "./components/base/Spinner/Spinner.js";
+import { ESpinnerSize as tr } from "./components/base/Spinner/types.js";
+import { Textfield as mr } from "./components/base/Textfield/Textfield.js";
+import { Sider as fr } from "./components/layout/Sider/Sider.js";
+import { Navigation as sr } from "./components/layout/Navigation/Navigation.js";
+import { ThemePicker as ar } from "./components/layout/ThemePicker/ThemePicker.js";
 export {
-  O as Avatar,
-  k as Button,
-  V as EAvatarSize,
-  G as EButtonTypes,
-  H as EIconSize,
-  Q as ELottieSize,
-  $ as ESpinnerSize,
-  j as Icon,
-  K as Lottie,
-  me as Navigation,
-  W as ProgressBar,
+  O as ActionCard,
+  k as Avatar,
+  j as Button,
+  V as EActionCardSize,
+  G as EAvatarSize,
+  H as EButtonTypes,
+  Q as EIconSize,
+  Z as ELottieSize,
+  tr as ESpinnerSize,
+  K as Icon,
+  W as Lottie,
+  sr as Navigation,
+  $ as ProgressBar,
   t as STORAGE,
-  te as Sider,
-  Z as Spinner,
-  re as Textfield,
-  fe as ThemePicker,
-  A as XProvider,
+  fr as Sider,
+  er as Spinner,
+  mr as Textfield,
+  ar as ThemePicker,
+  w as XProvider,
   n as capitalizeFirstLetter,
-  c as doc,
+  l as doc,
   g as elementObserver,
-  P as getCssProperty,
-  C as getCssPropertyPx,
-  E as getCssPropertyVh,
-  d as getCssPropertyVw,
+  C as getCssProperty,
+  P as getCssPropertyPx,
+  d as getCssPropertyVh,
+  E as getCssPropertyVw,
   m as getLocalState,
   u as isClient,
   y as localStore,
   x as mergeRefs,
   a as safeStringFromCodePoint,
-  T as setCssProperty,
+  z as setCssProperty,
   i as setLocalState,
-  h as themeController,
+  L as themeController,
   S as unicodeToString,
   F as useXData,
   X as useXTheme,
-  v as waitForElement,
-  z as win
+  T as waitForElement,
+  v as win
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}