bonkers-ui 2.0.2 → 2.0.4

package/components/UiTable/UiTableRow.js

@@ -1,25 +1,26 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import "react";
-import { ERowKind as s } from "./_types.js";
-import d from "classnames";
-const m = ({ kind: t, children: r, ...o }) => /* @__PURE__ */ e(
+import { ERowKind as d } from "./_types.js";
+import f from "classnames";
+const a = ({ kind: t, children: r, className: o, ...e }) => /* @__PURE__ */ s(
   "tr",
   {
-    className: d(
+    className: f(
       "text-center",
       "[&>td:last-of-type]:rounded-r-xxs",
       "[&>td:last-of-type]:text-right",
       "[&>td:first-of-type]:text-left",
       "[&>td:first-of-type]:rounded-l-xxs",
       {
-        "bg-secondary-alt-200": t === s.SECONDARY
-      }
+        "bg-secondary-alt-200": t === d.SECONDARY
+      },
+      o
     ),
-    ...o,
+    ...e,
     children: r
   }
 );
 export {
-  m as UiTableRow
+  a as UiTableRow
 };
 //# sourceMappingURL=UiTableRow.js.map

package/components/UiTable/UiTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTableRow.js","sources":["../../../src/components/UiTable/UiTableRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { ERowKind } from \"./_types\";\nimport cn from \"classnames\";\n\ntype TRowProps = {\n\tkind?: ERowKind;\n} & React.HTMLAttributes<HTMLTableRowElement>;\n\nexport const UiTableRow: React.FC<TRowProps> = ({ kind, children, ...rest }) => {\n\treturn (\n\t\t<tr\n\t\t\tclassName={ cn(\n\t\t\t\t\"text-center\",\n\t\t\t\t\"[&>td:last-of-type]:rounded-r-xxs\",\n\t\t\t\t\"[&>td:last-of-type]:text-right\",\n\t\t\t\t\"[&>td:first-of-type]:text-left\",\n\t\t\t\t\"[&>td:first-of-type]:rounded-l-xxs\",\n\t\t\t\t{\n\t\t\t\t\t\"bg-secondary-alt-200\": kind === ERowKind.SECONDARY\n\t\t\t\t}\n\t\t\t)\n\t\t\t}\n\t\t\t{ ...rest }\n\t\t>\n\t\t\t{ children }\n\t\t</tr>\n\t);\n};\n"],"names":["UiTableRow","kind","children","rest","jsx","cn","ERowKind"],"mappings":";;;;AAQO,MAAMA,IAAkC,CAAC,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,QAEnE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAYC;AAAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACC,wBAAwBJ,MAASK,EAAS;AAAA,MAAA;AAAA,IAE5C;AAAA,IAEE,GAAGH;AAAA,IAEH,UAAAD;AAAA,EAAA;AACH;"}
+{"version":3,"file":"UiTableRow.js","sources":["../../../src/components/UiTable/UiTableRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { ERowKind } from \"./_types\";\nimport cn from \"classnames\";\n\ntype TRowProps = {\n\tkind?: ERowKind;\n} & React.HTMLAttributes<HTMLTableRowElement>;\n\nexport const UiTableRow: React.FC<TRowProps> = ({ kind, children, className, ...rest }) => {\n\treturn (\n\t\t<tr\n\t\t\tclassName={ cn(\n\t\t\t\t\"text-center\",\n\t\t\t\t\"[&>td:last-of-type]:rounded-r-xxs\",\n\t\t\t\t\"[&>td:last-of-type]:text-right\",\n\t\t\t\t\"[&>td:first-of-type]:text-left\",\n\t\t\t\t\"[&>td:first-of-type]:rounded-l-xxs\",\n\t\t\t\t{\n\t\t\t\t\t\"bg-secondary-alt-200\": kind === ERowKind.SECONDARY\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)\n\t\t\t}\n\t\t\t{ ...rest }\n\t\t>\n\t\t\t{ children }\n\t\t</tr>\n\t);\n};\n"],"names":["UiTableRow","kind","children","className","rest","jsx","cn","ERowKind"],"mappings":";;;;AAQa,MAAAA,IAAkC,CAAC,EAAE,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAE9E,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAYC;AAAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACC,wBAAwBL,MAASM,EAAS;AAAA,MAC3C;AAAA,MACAJ;AAAA,IACD;AAAA,IAEE,GAAGC;AAAA,IAEH,UAAAF;AAAA,EAAA;AACH;"}

package/components/UiTabs/UiTabs.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 type UiTabsProps = {
     tabs: string[];
     tabsModel: string;
+    className: string;
     onTabChange: (val: string) => void;
 };
 export declare const UiTabs: React.FC<UiTabsProps>;

package/components/UiTabs/UiTabs.js

@@ -1,45 +1,48 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
 import "react";
-import l from "classnames";
-const d = ({
-  tabs: o,
-  tabsModel: s,
-  onTabChange: c
-}) => /* @__PURE__ */ r("ul", { className: l(
+import r from "classnames";
+const p = ({
+  tabs: s,
+  tabsModel: l,
+  onTabChange: a,
+  className: c
+}) => /* @__PURE__ */ o("ul", { className: r(
   "ui-tabs",
   "grid",
   "grid-flow-col",
   "rounded-full",
   "bg-secondary-alt-200",
-  "p-[2px]"
-), children: o.map((e) => /* @__PURE__ */ r(
+  "p-[2px]",
+  "text-secondary-400",
+  c
+), children: s.map((e) => /* @__PURE__ */ o(
   "li",
   {
-    className: l(
+    className: r(
       "rounded-full",
       "text-center",
-      s === e && "bg-white"
+      l === e && "bg-white border border-secondary-alt-600 text-secondary-500"
     ),
-    children: /* @__PURE__ */ n("label", { className: l(
+    children: /* @__PURE__ */ n("label", { className: r(
       "block",
       "cursor-pointer",
       "px-md",
       "py-xxs"
     ), children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ o(
         "input",
         {
-          className: l(
+          className: r(
             "absolute",
             "appearance-none"
           ),
           type: "radio",
           value: e,
-          checked: s === e,
-          onChange: () => c(e)
+          checked: l === e,
+          onChange: () => a(e)
         }
       ),
-      /* @__PURE__ */ r("span", { className: l(
+      /* @__PURE__ */ o("span", { className: r(
         "font-bold",
         "text-xs"
       ), children: e })
@@ -48,6 +51,6 @@ const d = ({
   e
 )) });
 export {
-  d as UiTabs
+  p 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\tonTabChange: (val: string) => void\n}\n\nexport const UiTabs: React.FC<UiTabsProps> = ({\n\ttabs,\n\ttabsModel,\n\tonTabChange\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\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\"\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","jsx","cx","tab","jsxs"],"mappings":";;;AASO,MAAMA,IAAgC,CAAC;AAAA,EAC7C,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AACD,MAGE,gBAAAC,EAAC,QAAG,WAAYC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAGE,GAAA,UAAAJ,EAAK,IAAI,CAACK,MACX,gBAAAF;AAAA,EAAC;AAAA,EAAA;AAAA,IAEA,WAAYC;AAAA,MACX;AAAA,MACA;AAAA,MACAH,MAAcI,KAAO;AAAA,IACtB;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,SAAUJ,MAAcI;AAAA,UACxB,UAAW,MAAKH,EAAYG,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,EA9BMA;AAiCP,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\"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;"}

package/components/UiToggle/UiToggle.d.ts

@@ -1,9 +1,12 @@
 import { default as React } from 'react';
-interface IUiToggle {
-    title?: React.ReactNode;
+type TUiToggleProps = {
     children?: React.ReactNode;
     disabled?: boolean;
     invertOrder?: boolean;
-}
-export declare const UiToggle: React.FC<IUiToggle>;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    value?: boolean;
+    onChange?: (checked: boolean) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">;
+export declare const UiToggle: React.FC<TUiToggleProps>;
 export {};

package/components/UiToggle/UiToggle.js

@@ -1,103 +1,129 @@
-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,
-  disabled: r = !1,
-  invertOrder: m = !1
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useState as T, useEffect as f } from "react";
+import t from "classnames";
+import '../../assets/UiToggle.css';const U = "_UiToggle__dot_1uov6_1", v = "_UiToggle__dot_checked_1uov6_13", k = "_UiToggle__icon_1uov6_17", w = "_UiToggle__icon_checked_1uov6_26", l = {
+  UiToggle__dot: U,
+  UiToggle__dot_checked: v,
+  UiToggle__icon: k,
+  UiToggle__icon_checked: w
+}, N = ({
+  children: a,
+  disabled: e = !1,
+  invertOrder: d = !1,
+  checked: c,
+  value: i,
+  className: m,
+  defaultChecked: h,
+  onChange: s,
+  ...p
 }) => {
-  const [e, p] = l(!1), [n, t] = l(!1);
-  return /* @__PURE__ */ s(
+  const [_, g] = T(h ?? !1), o = i ?? c ?? _, u = () => {
+    i === void 0 && c === void 0 && g(!_), s == null || s(!o);
+  };
+  return f(() => {
+    c !== void 0 && g(c);
+  }, [c]), /* @__PURE__ */ r(
     "div",
     {
-      className: a(
-        "ui-toggle"
+      className: t(
+        "ui-toggle",
+        m
       ),
-      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__ */ n("label", { className: t(
+        "flex",
+        "cursor-pointer",
+        "gap-sm",
+        "rounded-full",
+        "mt-sm",
+        "items-center",
+        "w-full",
+        "leading-normal",
+        "text-md",
+        {
+          "flex-row-reverse": d,
+          "pointer-events-none opacity-50": e
+        }
+      ), children: [
+        /* @__PURE__ */ n("span", { className: t(
+          "relative",
+          "block",
+          "h-md"
         ), children: [
-          /* @__PURE__ */ s("span", { className: a(
-            "relative",
+          /* @__PURE__ */ r(
+            "input",
+            {
+              className: t(
+                "absolute",
+                "size-0",
+                "appearance-none",
+                "border-0"
+              ),
+              type: "checkbox",
+              checked: o,
+              onChange: u,
+              disabled: e,
+              value: i,
+              ...p
+            }
+          ),
+          /* @__PURE__ */ r("span", { className: t(
             "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-600": o && !e,
+              "bg-secondary-alt-300": !o && e,
+              "bg-secondary-alt-600": !o && !e,
+              "bg-primary-300": o && e
+            }
+          ) }),
+          /* @__PURE__ */ r("span", { className: t(
+            "absolute",
+            "top-[50%]",
+            "block",
+            "rounded-full",
+            "bg-white",
+            l.UiToggle__dot,
+            {
+              "hover:shadow-border-secondary": !o && !e,
+              "hover:shadow-border-primary": o && !e,
+              [l.UiToggle__dot_checked]: o
+            }
+          ), children: /* @__PURE__ */ r(
+            "svg",
+            {
+              className: t(
+                l.UiToggle__icon,
+                "absolute",
+                e ? "text-primary-300" : "text-primary-600",
+                {
+                  [l.UiToggle__icon_checked]: o
+                }
+              ),
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ r(
+                "path",
+                {
+                  d: "M1 4.40106L6.60071 10.1135L15.1694 1.71245",
+                  stroke: "currentColor",
+                  "stroke-width": "1.6",
+                  "stroke-linecap": "round"
+                }
+              )
+            }
+          ) })
+        ] }),
+        a
+      ] })
     }
   );
 };
 export {
-  f as UiToggle
+  N 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\";\nimport styles from \"./UiToggle.module.css\";\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\tclassName,\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\tclassName\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-600\": 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 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\tstyles.UiToggle__dot,\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[styles.UiToggle__dot_checked]: isChecked\n\t\t\t\t\t\t},\n\n\t\t\t\t\t) }>\n\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\tstyles.UiToggle__icon,\n\t\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\t\tdisabled ? \"text-primary-300\" : \"text-primary-600\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t[styles.UiToggle__icon_checked]: isChecked ,\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M1 4.40106L6.60071 10.1135L15.1694 1.71245\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"1.6\"\n\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\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","className","defaultChecked","onChange","rest","toggled","setIsToggled","useState","isChecked","handleChange","useEffect","jsx","cx","jsxs","styles"],"mappings":"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"}

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;
+    }[];
+};