bonkers-ui 2.0.2 → 2.0.3

package/components/UiToggle/UiToggle.js

@@ -1,103 +1,103 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { useState as l } from "react";
-import a from "classnames";
-const f = ({
-  children: c,
-  title: d,
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { useState as u, useEffect as g } from "react";
+import o from "classnames";
+const v = ({
+  children: m,
   disabled: r = !1,
-  invertOrder: m = !1
+  invertOrder: p = !1,
+  checked: s,
+  value: t,
+  defaultChecked: d,
+  onChange: l,
+  ...f
 }) => {
-  const [e, p] = l(!1), [n, t] = l(!1);
-  return /* @__PURE__ */ s(
+  const [n, c] = u(d ?? !1), e = t ?? s ?? n, x = () => {
+    t === void 0 && s === void 0 && c(!n), l == null || l(!e);
+  };
+  return g(() => {
+    s !== void 0 && c(s);
+  }, [s]), /* @__PURE__ */ a(
     "div",
     {
-      className: a(
+      className: o(
         "ui-toggle"
       ),
-      onMouseEnter: () => t(!0),
-      onMouseLeave: () => t(!1),
-      children: [
-        /* @__PURE__ */ o("span", { className: a("font-bold"), children: d }),
-        /* @__PURE__ */ s("label", { className: a(
-          "flex",
-          "cursor-pointer",
-          "gap-sm",
-          "rounded-full",
-          "mt-sm",
-          "items-center",
-          "w-full",
-          "leading-normal",
-          "text-md",
-          {
-            "flex-row-reverse": m,
-            "pointer-events-none": r
-          }
+      children: /* @__PURE__ */ i("label", { className: o(
+        "flex",
+        "cursor-pointer",
+        "gap-sm",
+        "rounded-full",
+        "mt-sm",
+        "items-center",
+        "w-full",
+        "leading-normal",
+        "text-md",
+        {
+          "flex-row-reverse": p,
+          "pointer-events-none opacity-50": r
+        }
+      ), children: [
+        /* @__PURE__ */ i("span", { className: o(
+          "relative",
+          "block",
+          "h-md"
         ), children: [
-          /* @__PURE__ */ s("span", { className: a(
-            "relative",
+          /* @__PURE__ */ a(
+            "input",
+            {
+              className: o(
+                "absolute",
+                "size-0",
+                "appearance-none",
+                "border-0"
+              ),
+              type: "checkbox",
+              checked: e,
+              onChange: x,
+              disabled: r,
+              value: t,
+              ...f
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: o(
             "block",
-            "h-md"
-          ), children: [
-            /* @__PURE__ */ o(
-              "input",
-              {
-                className: a(
-                  "absolute",
-                  "size-0",
-                  "appearance-none",
-                  "border-0"
-                ),
-                type: "checkbox",
-                checked: e,
-                onChange: () => p(!e)
-              }
-            ),
-            /* @__PURE__ */ o(
-              "span",
-              {
-                className: a(
-                  "block",
-                  "h-md",
-                  "w-xl",
-                  "rounded-full",
-                  {
-                    "bg-secondary-alt-300": !e && r,
-                    "bg-primary-500": e && !r,
-                    "bg-primary-300": e && r,
-                    "bg-secondary-alt": !e && !r
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ o("span", { className: a(
-              "absolute",
-              "top-[50%]",
-              "block",
-              "rounded-full",
-              "bg-white",
-              "w-[22px]",
-              "h-[22px]",
-              "translate-x-[1px]",
-              "translate-y-[-50%]",
-              "ease-in-out",
-              "transition-transform",
-              "hover:shadow-border-secondary",
-              "active:shadow-border-secondary",
-              "focus:shadow-border-secondary",
-              {
-                "shadow-border-secondary": n && !e && !r,
-                "shadow-border-primary": n && e && !r,
-                "translate-x-[calc(var(--xl)_-_100%_-_1px)] translate-y-[-50%]": e
-              }
-            ) })
-          ] }),
-          c
-        ] })
-      ]
+            "h-md",
+            "w-xl",
+            "rounded-full",
+            {
+              "bg-primary-500": e && !r,
+              "bg-secondary-alt-300": !e && r,
+              "bg-secondary-alt-600": !e && !r,
+              "bg-primary-300": e && r
+            }
+          ) }),
+          /* @__PURE__ */ a("span", { className: o(
+            "absolute",
+            "top-[50%]",
+            "block",
+            "rounded-full",
+            "bg-white",
+            "w-[22px]",
+            "h-[22px]",
+            "translate-x-[1px]",
+            "translate-y-[-50%]",
+            "ease-in-out",
+            "transition-transform",
+            "active:shadow-border-secondary",
+            "focus:shadow-border-secondary",
+            {
+              "hover:shadow-border-secondary": !e && !r,
+              "hover:shadow-border-primary": e && !r,
+              "translate-x-[calc(var(--xl)_-_100%_-_1px)] translate-y-[-50%]": e
+            }
+          ) })
+        ] }),
+        m
+      ] })
     }
   );
 };
 export {
-  f as UiToggle
+  v as UiToggle
 };
 //# sourceMappingURL=UiToggle.js.map

package/components/UiToggle/UiToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiToggle.js","sources":["../../../src/components/UiToggle/UiToggle.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport cx from \"classnames\";\n\ninterface IUiToggle {\n\ttitle?:  React.ReactNode\n\tchildren?: React.ReactNode\n\tdisabled?: boolean\n\tinvertOrder?: boolean;\n}\n\nexport const UiToggle: React.FC<IUiToggle> = ({\n\tchildren,\n\ttitle,\n\tdisabled = false,\n\tinvertOrder = false\n\n}) => {\n\tconst [isChecked, setIsChecked] = useState(false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-toggle\"\n\t\t) }\n\t\tonMouseEnter={ () => setIsHovered(true) }\n\t\tonMouseLeave={ () => setIsHovered(false) }\n\t\t>\n\n\t\t\t<span className={ cx(\"font-bold\") }>\n\t\t\t\t{ title }\n\t\t\t</span>\n\n\t\t\t<label className={ cx(\n\t\t\t\t\"flex\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"mt-sm\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"leading-normal\",\n\t\t\t\t\"text-md\",\n\t\t\t\t{\n\t\t\t\t\t\"flex-row-reverse\": invertOrder,\n\t\t\t\t\t\"pointer-events-none\": disabled\n\t\t\t\t}\n\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"h-md\"\n\t\t\t\t) }>\n\n\t\t\t\t\t<input className={ cx(\n\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\"size-0\",\n\t\t\t\t\t\t\"appearance-none\",\n\t\t\t\t\t\t\"border-0\"\n\t\t\t\t\t) }\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tchecked={ isChecked }\n\t\t\t\t\tonChange={ () => setIsChecked(!isChecked) }\n\t\t\t\t\t>\n\t\t\t\t\t</input>\n\n\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"h-md\",\n\t\t\t\t\t\t\"w-xl\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"bg-secondary-alt-300\": !isChecked && disabled,\n\t\t\t\t\t\t\t\"bg-primary-500\": isChecked && !disabled,\n\t\t\t\t\t\t\t\"bg-primary-300\": isChecked && disabled,\n\t\t\t\t\t\t\t\"bg-secondary-alt\": !isChecked && !disabled,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\t></span>\n\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\"top-[50%]\",\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\t\"w-[22px]\",\n\t\t\t\t\t\t\"h-[22px]\",\n\t\t\t\t\t\t\"translate-x-[1px]\",\n\t\t\t\t\t\t\"translate-y-[-50%]\",\n\t\t\t\t\t\t\"ease-in-out\",\n\t\t\t\t\t\t\"transition-transform\",\n\t\t\t\t\t\t\"hover:shadow-border-secondary\",\n\t\t\t\t\t\t\"active:shadow-border-secondary\",\n\t\t\t\t\t\t\"focus:shadow-border-secondary\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"shadow-border-secondary\": isHovered && !isChecked && !disabled,\n\t\t\t\t\t\t\t\"shadow-border-primary\": isHovered && isChecked && !disabled,\n\t\t\t\t\t\t\t\"translate-x-[calc(var(--xl)_-_100%_-_1px)] translate-y-[-50%]\": isChecked\n\t\t\t\t\t\t},\n\n\t\t\t\t\t) }>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\n\t\t\t\t{ children }\n\n\t\t\t</label>\n\n\t\t</div>\n\t);\n};\n"],"names":["UiToggle","children","title","disabled","invertOrder","isChecked","setIsChecked","useState","isHovered","setIsHovered","jsxs","cx","jsx"],"mappings":";;;AAUO,MAAMA,IAAgC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAEf,MAAM;AACL,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK;AAG/C,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI,WAAYC;AAAA,QAChB;AAAA,MACD;AAAA,MACA,cAAe,MAAMF,EAAa,EAAI;AAAA,MACtC,cAAe,MAAMA,EAAa,EAAK;AAAA,MAGtC,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAK,EAAA,WAAYD,EAAG,WAAW,GAC7B,UACHT,GAAA;AAAA,QAEA,gBAAAQ,EAAC,WAAM,WAAYC;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACC,oBAAoBP;AAAA,YACpB,uBAAuBD;AAAA,UAAA;AAAA,QAIxB,GAAA,UAAA;AAAA,UAAA,gBAAAO,EAAC,UAAK,WAAYC;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,UAGA,GAAA,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAAM,WAAYD;AAAA,kBAClB;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBACD;AAAA,gBACA,MAAK;AAAA,gBACL,SAAUN;AAAA,gBACV,UAAW,MAAMC,EAAa,CAACD,CAAS;AAAA,cAAA;AAAA,YAExC;AAAA,YAEA,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBAAK,WAAYD;AAAA,kBACjB;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,oBACC,wBAAwB,CAACN,KAAaF;AAAA,oBACtC,kBAAkBE,KAAa,CAACF;AAAA,oBAChC,kBAAkBE,KAAaF;AAAA,oBAC/B,oBAAoB,CAACE,KAAa,CAACF;AAAA,kBAAA;AAAA,gBACpC;AAAA,cACD;AAAA,YACC;AAAA,YACD,gBAAAS,EAAC,UAAK,WAAYD;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,gBACC,2BAA2BH,KAAa,CAACH,KAAa,CAACF;AAAA,gBACvD,yBAAyBK,KAAaH,KAAa,CAACF;AAAA,gBACpD,iEAAiEE;AAAA,cAAA;AAAA,YAClE,EAGD,CAAA;AAAA,UAAA,GACD;AAAA,UAEEJ;AAAA,QAAA,EAEH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED;AAEF;"}
+{"version":3,"file":"UiToggle.js","sources":["../../../src/components/UiToggle/UiToggle.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport cx from \"classnames\";\n\ntype TUiToggleProps = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean\n\tinvertOrder?: boolean\n\tdefaultChecked?: boolean\n\tchecked?: boolean\n\tvalue?: boolean\n\tonChange?: (checked: boolean) => void\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\">;\n\nexport const UiToggle: React.FC<TUiToggleProps> = ({\n\tchildren,\n\tdisabled = false,\n\tinvertOrder = false,\n\tchecked,\n\tvalue,\n\tdefaultChecked,\n\tonChange,\n\t...rest\n}) => {\n\n\tconst [toggled, setIsToggled] = useState<boolean>(defaultChecked ??  false);\n\n\tconst isChecked = value ?? checked ?? toggled;\n\n\tconst handleChange = () => {\n\t\tif (value === undefined && checked === undefined) {\n\t\t\tsetIsToggled(!toggled);\n\t\t}\n\n\t\tonChange?.(!isChecked);\n\t};\n\n\tuseEffect(()=>{\n\t\tif ( checked !== undefined) {\n\t\t\tsetIsToggled(checked);\n\t\t}\n\t}, [checked]);\n\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-toggle\"\n\t\t) }\n\t\t>\n\n\t\t\t<label className={ cx(\n\t\t\t\t\"flex\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"mt-sm\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"leading-normal\",\n\t\t\t\t\"text-md\",\n\t\t\t\t{\n\t\t\t\t\t\"flex-row-reverse\": invertOrder,\n\t\t\t\t\t\"pointer-events-none opacity-50\": disabled\n\t\t\t\t}\n\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"h-md\"\n\t\t\t\t) }>\n\n\t\t\t\t\t<input className={ cx(\n\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\"size-0\",\n\t\t\t\t\t\t\"appearance-none\",\n\t\t\t\t\t\t\"border-0\"\n\t\t\t\t\t) }\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tchecked={ isChecked }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\t>\n\t\t\t\t\t</input>\n\n\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"h-md\",\n\t\t\t\t\t\t\"w-xl\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"bg-primary-500\": isChecked && !disabled,\n\t\t\t\t\t\t\t\"bg-secondary-alt-300\": !isChecked && disabled,\n\t\t\t\t\t\t\t\"bg-secondary-alt-600\": !isChecked && !disabled,\n\t\t\t\t\t\t\t\"bg-primary-300\": isChecked && disabled\n\n\t\t\t\t\t\t}\n\t\t\t\t\t) }>\n\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\"top-[50%]\",\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\t\"w-[22px]\",\n\t\t\t\t\t\t\"h-[22px]\",\n\t\t\t\t\t\t\"translate-x-[1px]\",\n\t\t\t\t\t\t\"translate-y-[-50%]\",\n\t\t\t\t\t\t\"ease-in-out\",\n\t\t\t\t\t\t\"transition-transform\",\n\t\t\t\t\t\t\"active:shadow-border-secondary\",\n\t\t\t\t\t\t\"focus:shadow-border-secondary\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"hover:shadow-border-secondary\": !isChecked && !disabled,\n\t\t\t\t\t\t\t\"hover:shadow-border-primary\": isChecked && !disabled,\n\t\t\t\t\t\t\t\"translate-x-[calc(var(--xl)_-_100%_-_1px)] translate-y-[-50%]\": isChecked\n\t\t\t\t\t\t},\n\n\t\t\t\t\t) }>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\n\t\t\t\t{ children }\n\n\t\t\t</label>\n\n\t\t</div>\n\t);\n};\n"],"names":["UiToggle","children","disabled","invertOrder","checked","value","defaultChecked","onChange","rest","toggled","setIsToggled","useState","isChecked","handleChange","useEffect","jsx","cx","jsxs"],"mappings":";;;AAaO,MAAMA,IAAqC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AAEL,QAAM,CAACC,GAASC,CAAY,IAAIC,EAAkBL,KAAmB,EAAK,GAEpEM,IAAYP,KAASD,KAAWK,GAEhCI,IAAe,MAAM;AACtB,IAAAR,MAAU,UAAaD,MAAY,UACtCM,EAAa,CAACD,CAAO,GAGtBF,KAAA,QAAAA,EAAW,CAACK;AAAA,EACb;AAEA,SAAAE,EAAU,MAAI;AACb,IAAKV,MAAY,UAChBM,EAAaN,CAAO;AAAA,EACrB,GACE,CAACA,CAAO,CAAC,GAGX,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI,WAAYC;AAAA,QAChB;AAAA,MACD;AAAA,MAGC,UAAA,gBAAAC,EAAC,WAAM,WAAYD;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACC,oBAAoBb;AAAA,UACpB,kCAAkCD;AAAA,QAAA;AAAA,MAInC,GAAA,UAAA;AAAA,QAAA,gBAAAe,EAAC,UAAK,WAAYD;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,QAGA,GAAA,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cAAM,WAAYC;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACD;AAAA,cACA,MAAK;AAAA,cACL,SAAUJ;AAAA,cACV,UAAWC;AAAA,cACX,UAAAX;AAAA,cACA,OAAAG;AAAA,cACE,GAAGG;AAAA,YAAA;AAAA,UAEL;AAAA,UAEA,gBAAAO,EAAC,UAAK,WAAYC;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,cACC,kBAAkBJ,KAAa,CAACV;AAAA,cAChC,wBAAwB,CAACU,KAAaV;AAAA,cACtC,wBAAwB,CAACU,KAAa,CAACV;AAAA,cACvC,kBAAkBU,KAAaV;AAAA,YAAA;AAAA,UAEhC,GAGD;AAAA,UACA,gBAAAa,EAAC,UAAK,WAAYC;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,cACC,iCAAiC,CAACJ,KAAa,CAACV;AAAA,cAChD,+BAA+BU,KAAa,CAACV;AAAA,cAC7C,iEAAiEU;AAAA,YAAA;AAAA,UAClE,EAGD,CAAA;AAAA,QAAA,GACD;AAAA,QAEEX;AAAA,MAAA,EAEH,CAAA;AAAA,IAAA;AAAA,EAED;AAEF;"}

package/components/UiTypography/UiTypography.js

@@ -1,5 +1,5 @@
 import i from "react";
-import { ETypographySizes as e, ETextTransform as r, ETextAlign as x, ETextWeight as a } from "./_types.js";
+import { ETypographySizes as e, ETextTransform as r, ETextAlign as R, ETextWeight as a } from "./_types.js";
 import { EColors as t } from "../../_types/colors.js";
 import y from "classnames";
 const m = {
@@ -19,9 +19,9 @@ const m = {
   [r.NONE]: "normal-case",
   [r.CAPITALIZE]: "capitalize"
 }, L = {
-  [x.LEFT]: "text-left",
-  [x.RIGHT]: "text-right",
-  [x.CENTER]: "text-center"
+  [R.LEFT]: "text-left",
+  [R.RIGHT]: "text-right",
+  [R.CENTER]: "text-center"
 }, Y = {
   [a.LIGHT]: "font-light",
   [a.REGULAR]: "font-medium",
@@ -69,6 +69,8 @@ const m = {
   [t.SECONDARY_ALT_600]: "text-secondary-alt-600",
   [t.SECONDARY_ALT_700]: "text-secondary-alt-700",
   [t.ERROR]: "text-error",
+  [t.ERROR_100]: "text-error-100",
+  [t.ERROR_200]: "text-error-200",
   [t.ERROR_300]: "text-error-300",
   [t.ERROR_400]: "text-error-400",
   [t.ERROR_500]: "text-error-500",
@@ -86,11 +88,11 @@ const m = {
   [t.ACCENT_ALT_600]: "text-accent-alt-600",
   [t.ACCENT_ALT_700]: "text-accent-alt-700"
 }, d = ({
-  children: s,
-  tag: o,
+  children: o,
+  tag: s,
   underline: E = !1,
   lineHeight: l = !1,
-  size: R,
+  size: x,
   textTransform: A,
   align: _,
   weight: n,
@@ -104,17 +106,17 @@ const m = {
       underline: E
     },
     l ? "leading-normal" : "leading-none",
-    R && m[R],
+    x && m[x],
     A && p[A],
     _ && L[_],
     n && Y[n],
     c && I[c],
     C
   );
-  return i.createElement(o || "p", {
+  return i.createElement(s || "p", {
     className: N,
     ...T
-  }, s);
+  }, o);
 };
 export {
   d as UiTypography

package/components/UiTypography/UiTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTypography.js","sources":["../../../src/components/UiTypography/UiTypography.tsx"],"sourcesContent":["import React from \"react\";\nimport { ETextAlign, ETextTransform, ETextWeight, ETypographySizes } from \"./_types.ts\";\nimport { EColors } from \"../../_types/colors.ts\";\nimport cx from \"classnames\";\n\ntype TUiTypographyProps<T extends keyof React.JSX.IntrinsicElements> = {\n\ttag?: T;\n\tchildren?: React.ReactNode;\n\tunderline?: boolean;\n\tlineHeight?: boolean;\n\tsize?: ETypographySizes;\n\ttextTransform?: ETextTransform;\n\talign?: ETextAlign;\n\tweight?: ETextWeight;\n\tcolor?: EColors;\n} & Omit<React.JSX.IntrinsicElements[T], \"children\" | \"ref\">;\n\nconst sizeClasses = {\n\t[ETypographySizes.MD]: \"text-md\",\n\t[ETypographySizes.XXS]: \"text-xxs\",\n\t[ETypographySizes.XS]: \"text-xs\",\n\t[ETypographySizes.SM]: \"text-sm\",\n\t[ETypographySizes.LG]: \"text-lg\",\n\t[ETypographySizes.XL]: \"text-xl\",\n\t[ETypographySizes.XXL]: \"text-2xl\",\n\t[ETypographySizes.XXXL]: \"text-3xl\",\n\t[ETypographySizes.XXXXL]: \"text-4xl\",\n\t[ETypographySizes.XXXXXL]: \"text-5xl\",\n};\n\nconst textTransformClasses = {\n\t[ETextTransform.UPPERCASE]: \"uppercase\",\n\t[ETextTransform.LOWERCASE]: \"lowercase\",\n\t[ETextTransform.NONE]: \"normal-case\",\n\t[ETextTransform.CAPITALIZE]: \"capitalize\",\n};\n\nconst alignClasses = {\n\t[ETextAlign.LEFT]: \"text-left\",\n\t[ETextAlign.RIGHT]: \"text-right\",\n\t[ETextAlign.CENTER]: \"text-center\",\n};\n\nconst weightClasses = {\n\t[ETextWeight.LIGHT]: \"font-light\",\n\t[ETextWeight.REGULAR]: \"font-medium\",\n\t[ETextWeight.SEMI_BOLD]: \"font-bold\",\n\t[ETextWeight.BOLD]: \"font-black\",\n};\n\nconst colorClasses = {\n\t[EColors.WHITE]: \"text-white\",\n\t[EColors.BLACK]: \"text-black\",\n\t[EColors.TRANSPARENT]: \"text-transparent\",\n\t[EColors.CURRENT]: \"text-current\",\n\n\t[EColors.PRIMARY]: \"text-primary\",\n\t[EColors.PRIMARY_50]: \"text-primary-50\",\n\t[EColors.PRIMARY_100]: \"text-primary-100\",\n\t[EColors.PRIMARY_200]: \"text-primary-200\",\n\t[EColors.PRIMARY_300]: \"text-primary-300\",\n\t[EColors.PRIMARY_400]: \"text-primary-400\",\n\t[EColors.PRIMARY_500]: \"text-primary-500\",\n\t[EColors.PRIMARY_600]: \"text-primary-600\",\n\t[EColors.PRIMARY_700]: \"text-primary-700\",\n\t[EColors.PRIMARY_800]: \"text-primary-800\",\n\t[EColors.PRIMARY_900]: \"text-primary-900\",\n\n\t[EColors.PRIMARY_ALT]: \"text-primary-alt\",\n\t[EColors.PRIMARY_ALT_300]: \"text-primary-alt-300\",\n\t[EColors.PRIMARY_ALT_400]: \"text-primary-alt-400\",\n\t[EColors.PRIMARY_ALT_500]: \"text-primary-alt-500\",\n\t[EColors.PRIMARY_ALT_600]: \"text-primary-alt-600\",\n\t[EColors.PRIMARY_ALT_700]: \"text-primary-alt-700\",\n\n\t[EColors.WARNING]: \"text-warning\",\n\t[EColors.WARNING_300]: \"text-warning-300\",\n\t[EColors.WARNING_400]: \"text-warning-400\",\n\t[EColors.WARNING_500]: \"text-warning-500\",\n\t[EColors.WARNING_600]: \"text-warning-600\",\n\t[EColors.WARNING_700]: \"text-warning-700\",\n\n\t[EColors.SECONDARY]: \"text-secondary\",\n\t[EColors.SECONDARY_300]: \"text-secondary-300\",\n\t[EColors.SECONDARY_400]: \"text-secondary-400\",\n\t[EColors.SECONDARY_500]: \"text-secondary-500\",\n\t[EColors.SECONDARY_600]: \"text-secondary-600\",\n\t[EColors.SECONDARY_700]: \"text-secondary-700\",\n\n\t[EColors.SECONDARY_ALT]: \"text-secondary-alt\",\n\t[EColors.SECONDARY_ALT_200]: \"text-secondary-alt-200\",\n\t[EColors.SECONDARY_ALT_300]: \"text-secondary-alt-300\",\n\t[EColors.SECONDARY_ALT_400]: \"text-secondary-alt-400\",\n\t[EColors.SECONDARY_ALT_500]: \"text-secondary-alt-500\",\n\t[EColors.SECONDARY_ALT_600]: \"text-secondary-alt-600\",\n\t[EColors.SECONDARY_ALT_700]: \"text-secondary-alt-700\",\n\n\t[EColors.ERROR]: \"text-error\",\n\t[EColors.ERROR_300]: \"text-error-300\",\n\t[EColors.ERROR_400]: \"text-error-400\",\n\t[EColors.ERROR_500]: \"text-error-500\",\n\t[EColors.ERROR_600]: \"text-error-600\",\n\t[EColors.ERROR_700]: \"text-error-700\",\n\n\t[EColors.ACCENT]: \"text-accent\",\n\t[EColors.ACCENT_300]: \"text-accent-300\",\n\t[EColors.ACCENT_500]: \"text-accent-500\",\n\t[EColors.ACCENT_600]: \"text-accent-600\",\n\t[EColors.ACCENT_700]: \"text-accent-700\",\n\n\t[EColors.ACCENT_ALT]: \"text-accent-alt\",\n\t[EColors.ACCENT_ALT_300]: \"text-accent-alt-300\",\n\t[EColors.ACCENT_ALT_400]: \"text-accent-alt-400\",\n\t[EColors.ACCENT_ALT_500]: \"text-accent-alt-500\",\n\t[EColors.ACCENT_ALT_600]: \"text-accent-alt-600\",\n\t[EColors.ACCENT_ALT_700]: \"text-accent-alt-700\",\n};\n\nexport const UiTypography = <T extends keyof React.JSX.IntrinsicElements> (\n\t{\n\t\tchildren,\n\t\ttag,\n\t\tunderline = false,\n\t\tlineHeight = false,\n\t\tsize,\n\t\ttextTransform,\n\t\talign,\n\t\tweight,\n\t\tcolor,\n\t\tclassName,\n\t\t...rest\n\t}: TUiTypographyProps<T> ): React.JSX.Element => {\n\n\tconst classes = cx(\n\t\t\"ui-typography\",\n\t\t{\n\t\t\tunderline\n\t\t},\n\t\tlineHeight ? \"leading-normal\" : \"leading-none\",\n\t\tsize && sizeClasses[size],\n\t\ttextTransform && textTransformClasses[textTransform],\n\t\talign && alignClasses[align],\n\t\tweight && weightClasses[weight],\n\t\tcolor && colorClasses[color],\n\t\tclassName\n\t);\n\n\treturn React.createElement(tag || \"p\", {\n\t\tclassName: classes,\n\t\t...rest\n\t}, children);\n};\n"],"names":["sizeClasses","ETypographySizes","textTransformClasses","ETextTransform","alignClasses","ETextAlign","weightClasses","ETextWeight","colorClasses","EColors","UiTypography","children","tag","underline","lineHeight","size","textTransform","align","weight","color","className","rest","classes","cx","React"],"mappings":"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"}
+{"version":3,"file":"UiTypography.js","sources":["../../../src/components/UiTypography/UiTypography.tsx"],"sourcesContent":["import React from \"react\";\nimport { ETextAlign, ETextTransform, ETextWeight, ETypographySizes } from \"./_types.ts\";\nimport { EColors } from \"../../_types/colors.ts\";\nimport cx from \"classnames\";\n\ntype TUiTypographyProps<T extends keyof React.JSX.IntrinsicElements> = {\n\ttag?: T;\n\tchildren?: React.ReactNode;\n\tunderline?: boolean;\n\tlineHeight?: boolean;\n\tsize?: ETypographySizes;\n\ttextTransform?: ETextTransform;\n\talign?: ETextAlign;\n\tweight?: ETextWeight;\n\tcolor?: EColors;\n} & Omit<React.JSX.IntrinsicElements[T], \"children\" | \"ref\">;\n\nconst sizeClasses = {\n\t[ETypographySizes.MD]: \"text-md\",\n\t[ETypographySizes.XXS]: \"text-xxs\",\n\t[ETypographySizes.XS]: \"text-xs\",\n\t[ETypographySizes.SM]: \"text-sm\",\n\t[ETypographySizes.LG]: \"text-lg\",\n\t[ETypographySizes.XL]: \"text-xl\",\n\t[ETypographySizes.XXL]: \"text-2xl\",\n\t[ETypographySizes.XXXL]: \"text-3xl\",\n\t[ETypographySizes.XXXXL]: \"text-4xl\",\n\t[ETypographySizes.XXXXXL]: \"text-5xl\",\n};\n\nconst textTransformClasses = {\n\t[ETextTransform.UPPERCASE]: \"uppercase\",\n\t[ETextTransform.LOWERCASE]: \"lowercase\",\n\t[ETextTransform.NONE]: \"normal-case\",\n\t[ETextTransform.CAPITALIZE]: \"capitalize\",\n};\n\nconst alignClasses = {\n\t[ETextAlign.LEFT]: \"text-left\",\n\t[ETextAlign.RIGHT]: \"text-right\",\n\t[ETextAlign.CENTER]: \"text-center\",\n};\n\nconst weightClasses = {\n\t[ETextWeight.LIGHT]: \"font-light\",\n\t[ETextWeight.REGULAR]: \"font-medium\",\n\t[ETextWeight.SEMI_BOLD]: \"font-bold\",\n\t[ETextWeight.BOLD]: \"font-black\",\n};\n\nconst colorClasses = {\n\t[EColors.WHITE]: \"text-white\",\n\t[EColors.BLACK]: \"text-black\",\n\t[EColors.TRANSPARENT]: \"text-transparent\",\n\t[EColors.CURRENT]: \"text-current\",\n\n\t[EColors.PRIMARY]: \"text-primary\",\n\t[EColors.PRIMARY_50]: \"text-primary-50\",\n\t[EColors.PRIMARY_100]: \"text-primary-100\",\n\t[EColors.PRIMARY_200]: \"text-primary-200\",\n\t[EColors.PRIMARY_300]: \"text-primary-300\",\n\t[EColors.PRIMARY_400]: \"text-primary-400\",\n\t[EColors.PRIMARY_500]: \"text-primary-500\",\n\t[EColors.PRIMARY_600]: \"text-primary-600\",\n\t[EColors.PRIMARY_700]: \"text-primary-700\",\n\t[EColors.PRIMARY_800]: \"text-primary-800\",\n\t[EColors.PRIMARY_900]: \"text-primary-900\",\n\n\t[EColors.PRIMARY_ALT]: \"text-primary-alt\",\n\t[EColors.PRIMARY_ALT_300]: \"text-primary-alt-300\",\n\t[EColors.PRIMARY_ALT_400]: \"text-primary-alt-400\",\n\t[EColors.PRIMARY_ALT_500]: \"text-primary-alt-500\",\n\t[EColors.PRIMARY_ALT_600]: \"text-primary-alt-600\",\n\t[EColors.PRIMARY_ALT_700]: \"text-primary-alt-700\",\n\n\t[EColors.WARNING]: \"text-warning\",\n\t[EColors.WARNING_300]: \"text-warning-300\",\n\t[EColors.WARNING_400]: \"text-warning-400\",\n\t[EColors.WARNING_500]: \"text-warning-500\",\n\t[EColors.WARNING_600]: \"text-warning-600\",\n\t[EColors.WARNING_700]: \"text-warning-700\",\n\n\t[EColors.SECONDARY]: \"text-secondary\",\n\t[EColors.SECONDARY_300]: \"text-secondary-300\",\n\t[EColors.SECONDARY_400]: \"text-secondary-400\",\n\t[EColors.SECONDARY_500]: \"text-secondary-500\",\n\t[EColors.SECONDARY_600]: \"text-secondary-600\",\n\t[EColors.SECONDARY_700]: \"text-secondary-700\",\n\n\t[EColors.SECONDARY_ALT]: \"text-secondary-alt\",\n\t[EColors.SECONDARY_ALT_200]: \"text-secondary-alt-200\",\n\t[EColors.SECONDARY_ALT_300]: \"text-secondary-alt-300\",\n\t[EColors.SECONDARY_ALT_400]: \"text-secondary-alt-400\",\n\t[EColors.SECONDARY_ALT_500]: \"text-secondary-alt-500\",\n\t[EColors.SECONDARY_ALT_600]: \"text-secondary-alt-600\",\n\t[EColors.SECONDARY_ALT_700]: \"text-secondary-alt-700\",\n\n\t[EColors.ERROR]: \"text-error\",\n\t[EColors.ERROR_100]: \"text-error-100\",\n\t[EColors.ERROR_200]: \"text-error-200\",\n\t[EColors.ERROR_300]: \"text-error-300\",\n\t[EColors.ERROR_400]: \"text-error-400\",\n\t[EColors.ERROR_500]: \"text-error-500\",\n\t[EColors.ERROR_600]: \"text-error-600\",\n\t[EColors.ERROR_700]: \"text-error-700\",\n\n\t[EColors.ACCENT]: \"text-accent\",\n\t[EColors.ACCENT_300]: \"text-accent-300\",\n\t[EColors.ACCENT_500]: \"text-accent-500\",\n\t[EColors.ACCENT_600]: \"text-accent-600\",\n\t[EColors.ACCENT_700]: \"text-accent-700\",\n\n\t[EColors.ACCENT_ALT]: \"text-accent-alt\",\n\t[EColors.ACCENT_ALT_300]: \"text-accent-alt-300\",\n\t[EColors.ACCENT_ALT_400]: \"text-accent-alt-400\",\n\t[EColors.ACCENT_ALT_500]: \"text-accent-alt-500\",\n\t[EColors.ACCENT_ALT_600]: \"text-accent-alt-600\",\n\t[EColors.ACCENT_ALT_700]: \"text-accent-alt-700\",\n};\n\nexport const UiTypography = <T extends keyof React.JSX.IntrinsicElements> (\n\t{\n\t\tchildren,\n\t\ttag,\n\t\tunderline = false,\n\t\tlineHeight = false,\n\t\tsize,\n\t\ttextTransform,\n\t\talign,\n\t\tweight,\n\t\tcolor,\n\t\tclassName,\n\t\t...rest\n\t}: TUiTypographyProps<T> ): React.JSX.Element => {\n\n\tconst classes = cx(\n\t\t\"ui-typography\",\n\t\t{\n\t\t\tunderline\n\t\t},\n\t\tlineHeight ? \"leading-normal\" : \"leading-none\",\n\t\tsize && sizeClasses[size],\n\t\ttextTransform && textTransformClasses[textTransform],\n\t\talign && alignClasses[align],\n\t\tweight && weightClasses[weight],\n\t\tcolor && colorClasses[color],\n\t\tclassName\n\t);\n\n\treturn React.createElement(tag || \"p\", {\n\t\tclassName: classes,\n\t\t...rest\n\t}, children);\n};\n"],"names":["sizeClasses","ETypographySizes","textTransformClasses","ETextTransform","alignClasses","ETextAlign","weightClasses","ETextWeight","colorClasses","EColors","UiTypography","children","tag","underline","lineHeight","size","textTransform","align","weight","color","className","rest","classes","cx","React"],"mappings":"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"}

package/eslint.config.mjs

@@ -2,7 +2,9 @@ import react from "eslint-plugin-react";
 import tseslint from "typescript-eslint";
 import stylisticPlugin from "@stylistic/eslint-plugin";
 import storybook from "eslint-plugin-storybook";
-import pluginTailwind from "eslint-plugin-tailwindcss";
+
+// Not compatible with tailwind v4: https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/325
+// import pluginTailwind from "eslint-plugin-tailwindcss";
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -86,6 +88,5 @@ export default [
 		},
 	},
 	...tseslint.configs.recommended,
-	...storybook.configs["flat/recommended"],
-	...pluginTailwind.configs["flat/recommended"]
+	...storybook.configs["flat/recommended"]
 ];

package/helper.d.ts

@@ -1 +1,32 @@
+export type TColor = {
+    name: string;
+    value: string;
+};
+export type TGroupedColor = {
+    groupTitle: string;
+    groupColors: {
+        shade: string;
+        value: string;
+        name: string;
+    }[];
+};
 export declare const getCssVariableValue: (variable: string) => string;
+export declare const getBaseVariables: () => {
+    name: string;
+    value: string;
+}[];
+export declare const getThemeTokens: () => {
+    fontSizes: {
+        name: string;
+        value: string;
+    }[];
+    spacings: {
+        name: string;
+        value: string;
+    }[];
+    groupedColors: TGroupedColor[];
+    baseColors: {
+        name: string;
+        value: string;
+    }[];
+};

package/index.d.ts

@@ -1,20 +1,23 @@
-export * as UiAlert from './components/UiAlert';
-export * as UiBerRank from './components/UiBerRank';
-export * as UiButton from './components/UiButton';
-export * as UiCheckbox from './components/UiCheckbox';
-export * as UiIcon from './components/UiIcon';
-export * as UiInput from './components/UiInput';
-export * as UiInputRange from './components/UiInputRange';
-export * as UiList from './components/UiList';
-export * as UiNotificationBadge from './components/UiNotificationBadge';
-export * as UiRadio from './components/UiRadio';
-export * as UiPlainRadio from './components/UiPlainRadio';
-export * as UiPills from './components/UiPills';
-export * as UiProductCard from './components/UiProductCard';
-export * as UiProgress from './components/UiProgress';
-export * as UiRadioFancy from './components/UiRadioFancy';
-export * as UiSkeleton from './components/UiSkeleton';
-export * as UiTable from './components/UiTable';
-export * as UiTypography from './components/UiTypography';
-export * as UiToggle from './components/UiToggle';
-export * as UiTabs from './components/UiTabs';
+export * from './components/UiAccordion';
+export * from './components/UiAlert';
+export * from './components/UiBerRank';
+export * from './components/UiButton';
+export * from './components/UiCheckbox';
+export * from './components/UiIcon';
+export * from './components/UiInput';
+export * from './components/UiInputRange';
+export * from './components/UiList';
+export * from './components/UiNotificationBadge';
+export * from './components/UiPills';
+export * from './components/UiPlainRadio';
+export * from './components/UiProductCard';
+export * from './components/UiProgress';
+export * from './components/UiRadio';
+export * from './components/UiRadioFancy';
+export * from './components/UiSelect';
+export * from './components/UiSkeleton';
+export * from './components/UiSnackbar';
+export * from './components/UiTable';
+export * from './components/UiTabs';
+export * from './components/UiToggle';
+export * from './components/UiTypography';

package/package.json

@@ -1,6 +1,7 @@
 {
     "name": "bonkers-ui",
-    "version": "v2.0.2",
+    "version": "v2.0.3",
+    "type": "module",
     "description": "Bonkers ui library",
     "author": "cc6.magister@gmail.com",
     "scripts": {
@@ -10,54 +11,51 @@
         "lint:style": "bun run prettier './src/**/*.{css,scss}' --check",
         "upgrade": "bun x npm-check-updates -ui",
         "build-storybook": "storybook build",
-        "build": "vite build",
+        "build": "tsc && vite build",
         "typecheck": "tsc --noEmit",
         "i": "bun install --frozen-lockfile",
         "pack": "bun run build && bun run postbuild.ts && cd dist && npm pack --pack-destination ../",
         "prepare": "husky"
     },
     "dependencies": {
+        "@tailwindcss/vite": "^4.0.9",
+        "ajv": "^8.17.1",
         "classnames": "^2.5.1",
-        "prettier": "^3.4.2",
+        "postcss": "^8.5.3",
+        "prettier": "^3.5.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "stylelint": "^16.13.2",
-        "stylelint-config-standard": "^37.0.0",
-        "stylelint-config-tailwindcss": "^0.0.7",
-        "stylelint-prettier": "^5.0.2",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "^4.0.9",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^3.2.3",
-        "@storybook/addon-essentials": "^8.5.0",
-        "@storybook/addon-interactions": "^8.5.0",
-        "@storybook/addon-onboarding": "^8.5.0",
-        "@storybook/blocks": "^8.5.0",
-        "@storybook/manager-api": "^8.5.0",
-        "@storybook/preview-api": "^8.5.0",
-        "@storybook/react": "^8.5.0",
-        "@storybook/react-vite": "^8.5.0",
-        "@storybook/test": "^8.5.0",
-        "@stylistic/eslint-plugin": "^2.13.0",
+        "@chromatic-com/storybook": "^3.2.4",
+        "@storybook/addon-essentials": "^8.6.0",
+        "@storybook/addon-interactions": "^8.6.0",
+        "@storybook/addon-onboarding": "^8.6.0",
+        "@storybook/blocks": "^8.6.0",
+        "@storybook/manager-api": "^8.6.0",
+        "@storybook/preview-api": "^8.6.0",
+        "@storybook/react": "^8.6.0",
+        "@storybook/react-vite": "^8.6.0",
+        "@storybook/test": "^8.6.0",
+        "@stylistic/eslint-plugin": "^4.1.0",
         "@types/bun": "latest",
-        "@types/react-dom": "^19.0.3",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
         "@vitejs/plugin-react": "^4.3.4",
-        "ajv": "^8.17.1",
-        "autoprefixer": "^10.4.20",
-        "eslint": "^9.18.0",
+        "eslint": "^9.21.0",
         "eslint-plugin-react": "^7.37.4",
-        "eslint-plugin-storybook": "^0.11.2",
-        "eslint-plugin-tailwindcss": "^3.17.5",
+        "eslint-plugin-storybook": "^0.11.3",
+        "eslint-plugin-tailwindcss": "^3.18.0",
         "gh-pages": "^6.3.0",
         "husky": "^9.1.7",
-        "lint-staged": "^15.4.0",
-        "postcss": "^8.5.1",
-        "storybook": "^8.5.0",
+        "lint-staged": "^15.4.3",
+        "storybook": "^8.6.0",
         "storybook-dark-mode": "^4.0.2",
         "typescript": "^5.7.3",
-        "typescript-eslint": "^8.20.0",
-        "vite": "^6.0.7",
+        "typescript-eslint": "^8.25.0",
+        "vite": "^6.2.0",
         "vite-plugin-dts": "^4.5.0",
         "vite-plugin-lib-inject-css": "^2.2.1"
     },
@@ -70,7 +68,7 @@
         "classnames": "^2",
         "react": "^18",
         "react-dom": "^18",
-        "tailwindcss": "^3"
+        "tailwindcss": "^4"
     },
     "lint-staged": {
         "./src/**/*.css": [
@@ -83,25 +81,28 @@
     },
     "keywords": [],
     "license": "ISC",
-    "main": "./bonkers-ui.umd.js",
+    "main": "./index.js",
     "module": "./index.js",
     "types": "./index.d.ts",
     "exports": {
         ".": "./index.js",
-        "./types": {
-            "import": "./types.js",
-            "types": "./types.d.ts"
+        "./types/*": {
+            "import": "./_types/*.js",
+            "types": "./_types/*.d.ts*"
         },
-        "./plugin": "./plugin.ts",
+        "./theme": "./bonkers.css",
         "./*": {
             "types": "./components/*/index.d.ts",
             "import": "./components/*/index.js"
         },
         "./components/*": {
-            "types": "./components/*/index.d.ts",
-            "import": "./components/*/index.js"
+            "types": "./components/*",
+            "import": "./components/*"
         },
-        "./postcss.config.mjs": "./postcss.config.mjs",
         "./eslint.config.mjs": "./eslint.config.mjs"
-    }
+    },
+    "sideEffects": [
+        "*.css",
+        "./assets/*.css"
+    ]
 }

package/stories/Colors/Colors.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Colors: () => React.JSX.Element;

package/stories/FontSizes/FontSizes.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const FontSizes: React.FC;

package/stories/Spacings/Spacings.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Spacings: () => React.JSX.Element;

package/bonkers-ui.css

@@ -1 +0,0 @@
-._icon_medium_18il7_1{height:60px}._icon_small_18il7_5{height:30px}._UiCheckbox_fnxq5_1{grid-template-columns:auto auto}._UiCheckbox__custom_fnxq5_5{transition:background-color ease-in-out .3s .3s,border-width ease-in-out .2s}._UiCheckbox__icon_fnxq5_11{stroke-dasharray:70;stroke-dashoffset:70;transition:stroke-dashoffset .3s ease-in-out}input+._UiCheckbox__custom_fnxq5_5:active{transition:background-color ease-in-out .1s;background-color:var(--color-secondary-alt-200)}input+._UiCheckbox__custom_fnxq5_5:active,input:focus+._UiCheckbox__custom_fnxq5_5{box-shadow:var(--shadow-selected-disabled)}input:disabled+._UiCheckbox__custom_fnxq5_5{background-color:var(--color-secondary-alt-200);border-color:var(--color-secondary-alt-400)}input:checked+._UiCheckbox__custom_fnxq5_5 ._UiCheckbox__icon_fnxq5_11{stroke-dashoffset:0}input:checked+._UiCheckbox__custom_fnxq5_5>svg{opacity:1}input:checked+._UiCheckbox__custom_fnxq5_5{border-width:0;background-color:var(--color-primary-500);transition:background-color ease-in-out .1s,border-width ease-in-out .1s,box-shadow ease-in-out .2s;animation:_cb-pop_fnxq5_1 .5s ease-in-out}input:checked+._UiCheckbox__custom_fnxq5_5:hover{background-color:var(--color-primary-600)}input:checked+._UiCheckbox__custom_fnxq5_5:active{background-color:var(--color-primary-700)}input:checked:disabled+._UiCheckbox__custom_fnxq5_5{background-color:var(--color-primary-300);border:1px solid var(--color-primary-400)}._UiCheckbox__disabled_fnxq5_63{pointer-events:none;cursor:default}@keyframes _cb-pop_fnxq5_1{0%{transform:scale(1)}33%{transform:scale(.95)}66%{transform:scale(1.05)}to{transform:scale(1)}}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;width:10px;transform:scale(4);background-color:transparent;border:0;box-shadow:none}input[type=range]::-moz-range-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;box-shadow:none}._thumb_hkko1_18{top:50%;border-width:4px}._UiRadio__custom_wei69_1{transition:all ease-in-out .15s}._UiRadio__dot_wei69_4{transform:translate3d(-50%,-50%,0) scale(0);transition:transform .2s ease-in-out}input:checked+._UiRadio__custom_wei69_1 ._UiRadio__dot_wei69_4{transform:translate3d(-50%,-50%,0) scale(1)}input:checked+._UiRadio__custom_wei69_1:hover ._UiRadio__dot_wei69_4{background-color:var(--color-primary-600)}input:checked+._UiRadio__custom_wei69_1:active ._UiRadio__dot_wei69_4{background-color:var(--color-primary-800)}input:checked:disabled+._UiRadio__custom_wei69_1{border:2px solid var(--color-primary-300)}input:checked:disabled+._UiRadio__custom_wei69_1 ._UiRadio__dot_wei69_4{background-color:var(--color-primary-300)}