bonkers-ui 2.0.7 → 2.0.8

package/components/UiStars/UiStars.js

@@ -1,7 +1,7 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import "react";
-import m from "classnames";
-import { EStarColors as r, EStarsSize as e } from "./_types.js";
+import C from "classnames";
+import { EStarColors as r, EStarsSize as s } from "./_types.js";
 const L = {
   [r.DEFAULT]: "text-accent-alt-600",
   [r.PRIMARY]: "text-primary",
@@ -9,33 +9,33 @@ const L = {
   [r.BLACK]: "text-black",
   [r.CURRENT]: "text-current"
 }, x = {
-  [e.SM]: "w-sm h-sm",
-  [e.MD]: "w-md h-md",
-  [e.LG]: "w-lg h-lg"
-}, v = ({
-  starsFilled: C = 0,
-  size: f = e.MD,
+  [s.SM]: "w-sm h-sm",
+  [s.MD]: "w-md h-md",
+  [s.LG]: "w-lg h-lg"
+}, u = ({
+  starsFilled: f = 0,
+  size: d = s.MD,
   count: i = 5,
-  className: d,
-  color: h = r.DEFAULT,
-  name: p = "stars"
+  className: h,
+  color: p = r.DEFAULT,
+  name: c = "stars"
 }) => {
-  const s = Math.min(Math.max(C, 0), i);
-  return /* @__PURE__ */ t("div", { className: m("flex", d), children: Array.from({
+  const e = Math.min(Math.max(f, 0), i);
+  return /* @__PURE__ */ t("div", { className: C("flex", h), children: Array.from({
     length: i
   }, (M, l) => {
-    const c = l < Math.floor(s), o = !c && l === Math.floor(s);
+    const n = l < Math.floor(e), o = !n && l === Math.floor(e);
     let a = 0;
-    return o && (a = s % 1 * 100), /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ n(
+    return o && (a = e % 1 * 100), /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ m(
       "svg",
       {
-        className: m(
-          x[f],
-          L[h]
+        className: C(
+          x[d],
+          L[p]
         ),
         viewBox: "0 0 25 23",
         children: [
-          o && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id: `${p}-star-fill-${l}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+          o && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ m("linearGradient", { id: `${c}-star-fill-${l}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
             /* @__PURE__ */ t("stop", { offset: `${a}%`, stopColor: "currentColor" }),
             /* @__PURE__ */ t("stop", { offset: `${a}%`, stopColor: "transparent" })
           ] }) }),
@@ -43,7 +43,7 @@ const L = {
             "path",
             {
               d: "M11.474 1.68128C11.8026 0.912241 12.8927 0.912241 13.2213 1.68128L15.5868 7.21835C15.7989 7.71478 16.2692 8.0523 16.8074 8.09431L22.8886 8.56895C23.738 8.63525 24.0774 9.69994 23.4231 10.2457L18.8377 14.0697C18.4124 14.4244 18.2263 14.9904 18.3581 15.5283L19.7672 21.2797C19.9677 22.0979 19.083 22.7529 18.3589 22.3223L13.0888 19.1884C12.632 18.9167 12.0633 18.9167 11.6065 19.1884L6.33637 22.3223C5.61231 22.7529 4.72763 22.0979 4.9281 21.2797L6.33724 15.5283C6.46904 14.9904 6.28291 14.4244 5.85758 14.0697L1.27223 10.2457C0.617879 9.69994 0.957297 8.63525 1.80676 8.56895L7.88795 8.09431C8.42615 8.0523 8.89645 7.71478 9.10853 7.21835L11.474 1.68128Z",
-              fill: c ? "currentColor" : o ? `url(#star-fill-${l})` : "transparent"
+              fill: n ? "currentColor" : o ? `url(#${c}-star-fill-${l})` : "transparent"
             }
           )
         ]
@@ -52,7 +52,7 @@ const L = {
   }) });
 };
 export {
-  v as UiStars,
+  u as UiStars,
   L as colorClasses
 };
 //# sourceMappingURL=UiStars.js.map

package/components/UiStars/UiStars.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiStars.js","sources":["../../../src/components/UiStars/UiStars.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EStarsSize, EStarColors } from \"./_types\";\n\nexport const colorClasses = {\n\t[EStarColors.DEFAULT]: \"text-accent-alt-600\",\n\t[EStarColors.PRIMARY]: \"text-primary\",\n\t[EStarColors.WHITE]: \"text-white\",\n\t[EStarColors.BLACK]: \"text-black\",\n\t[EStarColors.CURRENT]: \"text-current\",\n};\n\ninterface IUiStars {\n\tstarsFilled?: number\n\tsize?: EStarsSize\n\tcount?: number\n\tcolor?: EStarColors\n\tname?: string\n\tclassName?: string\n}\n\nconst sizeClasses = {\n\t[EStarsSize.SM]: \"w-sm h-sm\",\n\t[EStarsSize.MD]: \"w-md h-md\",\n\t[EStarsSize.LG]: \"w-lg h-lg\"\n};\n\nexport const UiStars = ({\n\tstarsFilled = 0,\n\tsize = EStarsSize.MD,\n\tcount = 5,\n\tclassName,\n\tcolor = EStarColors.DEFAULT,\n\tname = \"stars\"\n}: IUiStars) => {\n\tconst filledStars = Math.min(Math.max(starsFilled, 0), count);\n\n\treturn (\n\t\t<div className={ cx(\"flex\", className) }>\n\t\t\t{ Array.from({\n\t\t\t\tlength: count\n\t\t\t}, (_, index) => {\n\t\t\t\tconst isCompletelyFilled = index < Math.floor(filledStars);\n\t\t\t\tconst isPartiallyFilled = !isCompletelyFilled && index === Math.floor(filledStars);\n\n\t\t\t\tlet filledPercentage = 0;\n\n\t\t\t\tif (isPartiallyFilled) {\n\t\t\t\t\tconst decimal = filledStars % 1;\n\t\t\t\t\tfilledPercentage = decimal * 100;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={ index } className=\"relative\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\tsizeClasses[size],\n\t\t\t\t\t\t\t\tcolorClasses[color]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tviewBox=\"0 0 25 23\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isPartiallyFilled && (\n\t\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t\t<linearGradient id={ `${name}-star-fill-${index}` } x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n\t\t\t\t\t\t\t\t\t\t<stop offset={ `${filledPercentage}%` } stopColor=\"currentColor\" />\n\t\t\t\t\t\t\t\t\t\t<stop offset={ `${filledPercentage}%` } stopColor=\"transparent\" />\n\t\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M11.474 1.68128C11.8026 0.912241 12.8927 0.912241 13.2213 1.68128L15.5868 7.21835C15.7989 7.71478 16.2692 8.0523 16.8074 8.09431L22.8886 8.56895C23.738 8.63525 24.0774 9.69994 23.4231 10.2457L18.8377 14.0697C18.4124 14.4244 18.2263 14.9904 18.3581 15.5283L19.7672 21.2797C19.9677 22.0979 19.083 22.7529 18.3589 22.3223L13.0888 19.1884C12.632 18.9167 12.0633 18.9167 11.6065 19.1884L6.33637 22.3223C5.61231 22.7529 4.72763 22.0979 4.9281 21.2797L6.33724 15.5283C6.46904 14.9904 6.28291 14.4244 5.85758 14.0697L1.27223 10.2457C0.617879 9.69994 0.957297 8.63525 1.80676 8.56895L7.88795 8.09431C8.42615 8.0523 8.89645 7.71478 9.10853 7.21835L11.474 1.68128Z\"\n\t\t\t\t\t\t\t\tfill={ isCompletelyFilled\n\t\t\t\t\t\t\t\t\t? \"currentColor\"\n\t\t\t\t\t\t\t\t\t: (isPartiallyFilled\n\t\t\t\t\t\t\t\t\t\t? `url(#star-fill-${index})`\n\t\t\t\t\t\t\t\t\t\t: \"transparent\") }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}) }\n\t\t</div>\n\t);\n};\n"],"names":["colorClasses","EStarColors","sizeClasses","EStarsSize","UiStars","starsFilled","size","count","className","color","name","filledStars","jsx","cx","_","index","isCompletelyFilled","isPartiallyFilled","filledPercentage","jsxs"],"mappings":";;;;AAIO,MAAMA,IAAe;AAAA,EAC3B,CAACC,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,KAAK,GAAG;AAAA,EACrB,CAACA,EAAY,KAAK,GAAG;AAAA,EACrB,CAACA,EAAY,OAAO,GAAG;AACxB,GAWMC,IAAc;AAAA,EACnB,CAACC,EAAW,EAAE,GAAG;AAAA,EACjB,CAACA,EAAW,EAAE,GAAG;AAAA,EACjB,CAACA,EAAW,EAAE,GAAG;AAClB,GAEaC,IAAU,CAAC;AAAA,EACvB,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAOH,EAAW;AAAA,EAClB,OAAAI,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC,IAAQR,EAAY;AAAA,EACpB,MAAAS,IAAO;AACR,MAAgB;AACT,QAAAC,IAAc,KAAK,IAAI,KAAK,IAAIN,GAAa,CAAC,GAAGE,CAAK;AAG3D,SAAA,gBAAAK,EAAC,SAAI,WAAYC,EAAG,QAAQL,CAAS,GAClC,gBAAM,KAAK;AAAA,IACZ,QAAQD;AAAA,EAAA,GACN,CAACO,GAAGC,MAAU;AAChB,UAAMC,IAAqBD,IAAQ,KAAK,MAAMJ,CAAW,GACnDM,IAAoB,CAACD,KAAsBD,MAAU,KAAK,MAAMJ,CAAW;AAEjF,QAAIO,IAAmB;AAEvB,WAAID,MAEHC,IADgBP,IAAc,IACD,MAI7B,gBAAAC,EAAC,OAAkB,EAAA,WAAU,YAC5B,UAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAYN;AAAA,UACXX,EAAYI,CAAI;AAAA,UAChBN,EAAaS,CAAK;AAAA,QACnB;AAAA,QACA,SAAQ;AAAA,QAEN,UAAA;AAAA,UAAAQ,uBACA,QACA,EAAA,UAAA,gBAAAE,EAAC,kBAAe,EAAA,IAAK,GAAGT,CAAI,cAAcK,CAAK,IAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC3E,UAAA;AAAA,YAAA,gBAAAH,EAAC,UAAK,QAAS,GAAGM,CAAgB,KAAM,WAAU,gBAAe;AAAA,8BAChE,QAAK,EAAA,QAAS,GAAGA,CAAgB,KAAM,WAAU,cAAc,CAAA;AAAA,UAAA,EAAA,CACjE,EACD,CAAA;AAAA,UAED,gBAAAN;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,GAAE;AAAA,cACF,MAAOI,IACJ,iBACCC,IACA,kBAAkBF,CAAK,MACvB;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,SAvBSA,CAyBX;AAAA,EAED,CAAA,GACF;AAEF;"}
+{"version":3,"file":"UiStars.js","sources":["../../../src/components/UiStars/UiStars.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EStarsSize, EStarColors } from \"./_types\";\n\nexport const colorClasses = {\n\t[EStarColors.DEFAULT]: \"text-accent-alt-600\",\n\t[EStarColors.PRIMARY]: \"text-primary\",\n\t[EStarColors.WHITE]: \"text-white\",\n\t[EStarColors.BLACK]: \"text-black\",\n\t[EStarColors.CURRENT]: \"text-current\",\n};\n\ninterface IUiStars {\n\tstarsFilled?: number\n\tsize?: EStarsSize\n\tcount?: number\n\tcolor?: EStarColors\n\tname?: string\n\tclassName?: string\n}\n\nconst sizeClasses = {\n\t[EStarsSize.SM]: \"w-sm h-sm\",\n\t[EStarsSize.MD]: \"w-md h-md\",\n\t[EStarsSize.LG]: \"w-lg h-lg\"\n};\n\nexport const UiStars = ({\n\tstarsFilled = 0,\n\tsize = EStarsSize.MD,\n\tcount = 5,\n\tclassName,\n\tcolor = EStarColors.DEFAULT,\n\tname = \"stars\"\n}: IUiStars) => {\n\tconst filledStars = Math.min(Math.max(starsFilled, 0), count);\n\n\treturn (\n\t\t<div className={ cx(\"flex\", className) }>\n\t\t\t{ Array.from({\n\t\t\t\tlength: count\n\t\t\t}, (_, index) => {\n\t\t\t\tconst isCompletelyFilled = index < Math.floor(filledStars);\n\t\t\t\tconst isPartiallyFilled = !isCompletelyFilled && index === Math.floor(filledStars);\n\n\t\t\t\tlet filledPercentage = 0;\n\n\t\t\t\tif (isPartiallyFilled) {\n\t\t\t\t\tconst decimal = filledStars % 1;\n\t\t\t\t\tfilledPercentage = decimal * 100;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={ index } className=\"relative\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\tsizeClasses[size],\n\t\t\t\t\t\t\t\tcolorClasses[color]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tviewBox=\"0 0 25 23\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isPartiallyFilled && (\n\t\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t\t<linearGradient id={ `${name}-star-fill-${index}` } x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n\t\t\t\t\t\t\t\t\t\t<stop offset={ `${filledPercentage}%` } stopColor=\"currentColor\" />\n\t\t\t\t\t\t\t\t\t\t<stop offset={ `${filledPercentage}%` } stopColor=\"transparent\" />\n\t\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M11.474 1.68128C11.8026 0.912241 12.8927 0.912241 13.2213 1.68128L15.5868 7.21835C15.7989 7.71478 16.2692 8.0523 16.8074 8.09431L22.8886 8.56895C23.738 8.63525 24.0774 9.69994 23.4231 10.2457L18.8377 14.0697C18.4124 14.4244 18.2263 14.9904 18.3581 15.5283L19.7672 21.2797C19.9677 22.0979 19.083 22.7529 18.3589 22.3223L13.0888 19.1884C12.632 18.9167 12.0633 18.9167 11.6065 19.1884L6.33637 22.3223C5.61231 22.7529 4.72763 22.0979 4.9281 21.2797L6.33724 15.5283C6.46904 14.9904 6.28291 14.4244 5.85758 14.0697L1.27223 10.2457C0.617879 9.69994 0.957297 8.63525 1.80676 8.56895L7.88795 8.09431C8.42615 8.0523 8.89645 7.71478 9.10853 7.21835L11.474 1.68128Z\"\n\t\t\t\t\t\t\t\tfill={ isCompletelyFilled\n\t\t\t\t\t\t\t\t\t? \"currentColor\"\n\t\t\t\t\t\t\t\t\t: (isPartiallyFilled\n\t\t\t\t\t\t\t\t\t\t? `url(#${name}-star-fill-${index})`\n\t\t\t\t\t\t\t\t\t\t: \"transparent\") }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}) }\n\t\t</div>\n\t);\n};\n"],"names":["colorClasses","EStarColors","sizeClasses","EStarsSize","UiStars","starsFilled","size","count","className","color","name","filledStars","jsx","cx","_","index","isCompletelyFilled","isPartiallyFilled","filledPercentage","jsxs"],"mappings":";;;;AAIO,MAAMA,IAAe;AAAA,EAC3B,CAACC,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,KAAK,GAAG;AAAA,EACrB,CAACA,EAAY,KAAK,GAAG;AAAA,EACrB,CAACA,EAAY,OAAO,GAAG;AACxB,GAWMC,IAAc;AAAA,EACnB,CAACC,EAAW,EAAE,GAAG;AAAA,EACjB,CAACA,EAAW,EAAE,GAAG;AAAA,EACjB,CAACA,EAAW,EAAE,GAAG;AAClB,GAEaC,IAAU,CAAC;AAAA,EACvB,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAOH,EAAW;AAAA,EAClB,OAAAI,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC,IAAQR,EAAY;AAAA,EACpB,MAAAS,IAAO;AACR,MAAgB;AACT,QAAAC,IAAc,KAAK,IAAI,KAAK,IAAIN,GAAa,CAAC,GAAGE,CAAK;AAG3D,SAAA,gBAAAK,EAAC,SAAI,WAAYC,EAAG,QAAQL,CAAS,GAClC,gBAAM,KAAK;AAAA,IACZ,QAAQD;AAAA,EAAA,GACN,CAACO,GAAGC,MAAU;AAChB,UAAMC,IAAqBD,IAAQ,KAAK,MAAMJ,CAAW,GACnDM,IAAoB,CAACD,KAAsBD,MAAU,KAAK,MAAMJ,CAAW;AAEjF,QAAIO,IAAmB;AAEvB,WAAID,MAEHC,IADgBP,IAAc,IACD,MAI7B,gBAAAC,EAAC,OAAkB,EAAA,WAAU,YAC5B,UAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAYN;AAAA,UACXX,EAAYI,CAAI;AAAA,UAChBN,EAAaS,CAAK;AAAA,QACnB;AAAA,QACA,SAAQ;AAAA,QAEN,UAAA;AAAA,UAAAQ,uBACA,QACA,EAAA,UAAA,gBAAAE,EAAC,kBAAe,EAAA,IAAK,GAAGT,CAAI,cAAcK,CAAK,IAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC3E,UAAA;AAAA,YAAA,gBAAAH,EAAC,UAAK,QAAS,GAAGM,CAAgB,KAAM,WAAU,gBAAe;AAAA,8BAChE,QAAK,EAAA,QAAS,GAAGA,CAAgB,KAAM,WAAU,cAAc,CAAA;AAAA,UAAA,EAAA,CACjE,EACD,CAAA;AAAA,UAED,gBAAAN;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,GAAE;AAAA,cACF,MAAOI,IACJ,iBACCC,IACA,QAAQP,CAAI,cAAcK,CAAK,MAC/B;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,SAvBSA,CAyBX;AAAA,EAED,CAAA,GACF;AAEF;"}

package/components/UiTabs/UiTabs.js

@@ -1,35 +1,40 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { jsx as s, jsxs as o } from "react/jsx-runtime";
 import "react";
 import r from "classnames";
-const p = ({
-  tabs: s,
-  tabsModel: l,
-  onTabChange: a,
-  className: c
-}) => /* @__PURE__ */ o("ul", { className: r(
+const m = ({
+  tabs: c,
+  tabsModel: t,
+  onTabChange: l,
+  className: n
+}) => /* @__PURE__ */ s("ul", { className: r(
   "ui-tabs",
   "grid",
   "grid-flow-col",
+  "items-stretch",
   "rounded-full",
   "bg-secondary-alt-200",
   "p-[2px]",
   "text-secondary-400",
-  c
-), children: s.map((e) => /* @__PURE__ */ o(
+  n
+), children: c.map((e) => /* @__PURE__ */ s(
   "li",
   {
     className: r(
+      "flex",
+      "items-center",
+      "justify-center",
       "rounded-full",
       "text-center",
-      l === e && "bg-white border border-secondary-alt-600 text-secondary-500"
+      t === e && "bg-white border border-secondary-alt-600 text-secondary-500"
     ),
-    children: /* @__PURE__ */ n("label", { className: r(
-      "block",
+    children: /* @__PURE__ */ o("label", { className: r(
+      "flex",
+      "items-center",
       "cursor-pointer",
       "px-md",
       "py-xxs"
     ), children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ s(
         "input",
         {
           className: r(
@@ -38,11 +43,11 @@ const p = ({
           ),
           type: "radio",
           value: e,
-          checked: l === e,
-          onChange: () => a(e)
+          checked: t === e,
+          onChange: () => l(e)
         }
       ),
-      /* @__PURE__ */ o("span", { className: r(
+      /* @__PURE__ */ s("span", { className: r(
         "font-bold",
         "text-xs"
       ), children: e })
@@ -51,6 +56,6 @@ const p = ({
   e
 )) });
 export {
-  p as UiTabs
+  m as UiTabs
 };
 //# sourceMappingURL=UiTabs.js.map

package/components/UiTabs/UiTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTabs.js","sources":["../../../src/components/UiTabs/UiTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\n\ntype UiTabsProps = {\n\ttabs: string[]\n\ttabsModel: string,\n\tclassName: string\n\tonTabChange: (val: string) => void\n}\n\nexport const UiTabs: React.FC<UiTabsProps> = ({\n\ttabs,\n\ttabsModel,\n\tonTabChange,\n\tclassName\n}) => {\n\n\treturn (\n\t\t<ul className={ cx(\n\t\t\t\"ui-tabs\",\n\t\t\t\"grid\",\n\t\t\t\"grid-flow-col\",\n\t\t\t\"rounded-full\",\n\t\t\t\"bg-secondary-alt-200\",\n\t\t\t\"p-[2px]\",\n\t\t\t\"text-secondary-400\",\n\t\t\tclassName\n\t\t) }>\n\t\t\t{ tabs.map((tab) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ tab }\n\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\"text-center\",\n\t\t\t\t\t\ttabsModel === tab && \"bg-white border border-secondary-alt-600 text-secondary-500\",\n\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<label className={ cx(\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\t\t\"px-md\",\n\t\t\t\t\t\t\"py-xxs\"\n\t\t\t\t\t) }>\n\t\t\t\t\t\t<input className={ cx(\n\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\t\"appearance-none\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue={ tab }\n\t\t\t\t\t\tchecked={ tabsModel === tab }\n\t\t\t\t\t\tonChange={ ()=> onTabChange(tab) }>\n\t\t\t\t\t\t</input>\n\n\t\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\t\"font-bold\",\n\t\t\t\t\t\t\t\"text-xs\"\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t{ tab }\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t</label>\n\n\t\t\t\t</li>\n\t\t\t)) }\n\t\t</ul>\n\t);\n};\n"],"names":["UiTabs","tabs","tabsModel","onTabChange","className","jsx","cx","tab","jsxs"],"mappings":";;;AAUO,MAAMA,IAAgC,CAAC;AAAA,EAC7C,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AACD,MAGE,gBAAAC,EAAC,QAAG,WAAYC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACAF;AAEE,GAAA,UAAAH,EAAK,IAAI,CAACM,MACX,gBAAAF;AAAA,EAAC;AAAA,EAAA;AAAA,IAEA,WAAYC;AAAA,MACX;AAAA,MACA;AAAA,MACAJ,MAAcK,KAAO;AAAA,IAEtB;AAAA,IAEA,UAAA,gBAAAC,EAAC,WAAM,WAAYF;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAEA,GAAA,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UAAM,WAAYC;AAAA,YAClB;AAAA,YACA;AAAA,UACD;AAAA,UACA,MAAK;AAAA,UACL,OAAQC;AAAA,UACR,SAAUL,MAAcK;AAAA,UACxB,UAAW,MAAKJ,EAAYI,CAAG;AAAA,QAAA;AAAA,MAC/B;AAAA,MAEA,gBAAAF,EAAC,UAAK,WAAYC;AAAA,QACjB;AAAA,QACA;AAAA,MAAA,GAEE,UACHC,EAAA,CAAA;AAAA,IAAA,EAED,CAAA;AAAA,EAAA;AAAA,EA/BMA;AAkCP,CAAA,GACF;"}
+{"version":3,"file":"UiTabs.js","sources":["../../../src/components/UiTabs/UiTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\n\ntype UiTabsProps = {\n\ttabs: string[]\n\ttabsModel: string,\n\tclassName: string\n\tonTabChange: (val: string) => void\n}\n\nexport const UiTabs: React.FC<UiTabsProps> = ({\n\ttabs,\n\ttabsModel,\n\tonTabChange,\n\tclassName\n}) => {\n\n\treturn (\n\t\t<ul className={ cx(\n\t\t\t\"ui-tabs\",\n\t\t\t\"grid\",\n\t\t\t\"grid-flow-col\",\n\t\t\t\"items-stretch\",\n\t\t\t\"rounded-full\",\n\t\t\t\"bg-secondary-alt-200\",\n\t\t\t\"p-[2px]\",\n\t\t\t\"text-secondary-400\",\n\t\t\tclassName\n\t\t) }>\n\t\t\t{ tabs.map((tab) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ tab }\n\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\"items-center\",\n\t\t\t\t\t\t\"justify-center\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\"text-center\",\n\t\t\t\t\t\ttabsModel === tab && \"bg-white border border-secondary-alt-600 text-secondary-500\",\n\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<label className={ cx(\n\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\"items-center\",\n\t\t\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\t\t\"px-md\",\n\t\t\t\t\t\t\"py-xxs\"\n\t\t\t\t\t) }>\n\t\t\t\t\t\t<input className={ cx(\n\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\t\"appearance-none\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue={ tab }\n\t\t\t\t\t\tchecked={ tabsModel === tab }\n\t\t\t\t\t\tonChange={ ()=> onTabChange(tab) }>\n\t\t\t\t\t\t</input>\n\n\t\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\t\"font-bold\",\n\t\t\t\t\t\t\t\"text-xs\"\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t{ tab }\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t</label>\n\n\t\t\t\t</li>\n\t\t\t)) }\n\t\t</ul>\n\t);\n};\n"],"names":["UiTabs","tabs","tabsModel","onTabChange","className","jsx","cx","tab","jsxs"],"mappings":";;;AAUO,MAAMA,IAAgC,CAAC;AAAA,EAC7C,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AACD,MAGE,gBAAAC,EAAC,QAAG,WAAYC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACAF;AAEE,GAAA,UAAAH,EAAK,IAAI,CAACM,MACX,gBAAAF;AAAA,EAAC;AAAA,EAAA;AAAA,IAEA,WAAYC;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAJ,MAAcK,KAAO;AAAA,IAEtB;AAAA,IAEA,UAAA,gBAAAC,EAAC,WAAM,WAAYF;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAEA,GAAA,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UAAM,WAAYC;AAAA,YAClB;AAAA,YACA;AAAA,UACD;AAAA,UACA,MAAK;AAAA,UACL,OAAQC;AAAA,UACR,SAAUL,MAAcK;AAAA,UACxB,UAAW,MAAKJ,EAAYI,CAAG;AAAA,QAAA;AAAA,MAC/B;AAAA,MAEA,gBAAAF,EAAC,UAAK,WAAYC;AAAA,QACjB;AAAA,QACA;AAAA,MAAA,GAEE,UACHC,EAAA,CAAA;AAAA,IAAA,EAED,CAAA;AAAA,EAAA;AAAA,EAnCMA;AAsCP,CAAA,GACF;"}

package/helper.d.ts

@@ -1,4 +1,4 @@
-export type TColor = {
+export type TToken = {
     name: string;
     value: string;
 };
@@ -15,18 +15,10 @@ export declare const getBaseVariables: () => {
     name: string;
     value: string;
 }[];
-export declare const getThemeTokens: () => {
-    fontSizes: {
-        name: string;
-        value: string;
-    }[];
-    spacings: {
-        name: string;
-        value: string;
-    }[];
+export declare const getThemeTokens: (variables: TToken[]) => {
+    fontSizes: TToken[];
+    spacings: TToken[];
     groupedColors: TGroupedColor[];
-    baseColors: {
-        name: string;
-        value: string;
-    }[];
+    baseColors: TToken[];
 };
+export declare function getCSSVariables(): TToken[];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v2.0.7",
+    "version": "v2.0.8",
     "type": "module",
     "description": "Bonkers ui library",
     "author": "cc6.magister@gmail.com",
@@ -18,43 +18,36 @@
         "prepare": "husky"
     },
     "dependencies": {
-        "@tailwindcss/vite": "^4.1.7",
+        "@tailwindcss/vite": "^4.1.10",
         "ajv": "^8.17.1",
         "classnames": "^2.5.1",
-        "postcss": "^8.5.3",
+        "postcss": "^8.5.6",
         "prettier": "^3.5.3",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "tailwindcss": "^4.1.7",
+        "tailwindcss": "^4.1.10",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^3.2.6",
-        "@storybook/addon-essentials": "^8.6.14",
-        "@storybook/addon-interactions": "^8.6.14",
-        "@storybook/addon-onboarding": "^8.6.14",
-        "@storybook/blocks": "^8.6.14",
-        "@storybook/manager-api": "^8.6.14",
-        "@storybook/preview-api": "^8.6.14",
-        "@storybook/react": "^8.6.14",
-        "@storybook/react-vite": "^8.6.14",
-        "@storybook/test": "^8.6.14",
-        "@stylistic/eslint-plugin": "^4.2.0",
+        "@chromatic-com/storybook": "^4.0.0",
+        "@storybook/addon-docs": "^9.0.12",
+        "@storybook/addon-onboarding": "^9.0.12",
+        "@storybook/react-vite": "^9.0.12",
+        "@stylistic/eslint-plugin": "^4.4.1",
         "@types/bun": "latest",
-        "@types/react": "^19.1.5",
-        "@types/react-dom": "^19.1.5",
-        "@vitejs/plugin-react": "^4.4.1",
-        "eslint": "^9.27.0",
+        "@types/react": "^19.1.8",
+        "@types/react-dom": "^19.1.6",
+        "@vitejs/plugin-react": "^4.5.2",
+        "eslint": "^9.29.0",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-storybook": "^0.12.0",
+        "eslint-plugin-storybook": "^9.0.12",
         "eslint-plugin-tailwindcss": "^3.18.0",
         "gh-pages": "^6.3.0",
         "husky": "^9.1.7",
-        "lint-staged": "^16.0.0",
-        "storybook": "^8.6.14",
-        "storybook-dark-mode": "^4.0.2",
+        "lint-staged": "^16.1.2",
+        "storybook": "^9.0.12",
         "typescript": "^5.8.3",
-        "typescript-eslint": "^8.32.1",
+        "typescript-eslint": "^8.34.1",
         "vite": "^6.3.5",
         "vite-plugin-dts": "^4.5.4",
         "vite-plugin-lib-inject-css": "^2.2.2"