bonkers-ui 2.0.1 → 2.0.3

package/components/UiSnackbar/UiSnackbar.js

@@ -0,0 +1,69 @@
+import { jsx as r, Fragment as s, jsxs as n } from "react/jsx-runtime";
+import "react";
+import m from "classnames";
+import { ESnackbarTypes as t } from "./_types.js";
+import { UiButton as a } from "../UiButton/UiButton.js";
+import { EButtonSizes as c, EButtonTypes as x } from "../UiButton/_types.js";
+const l = {
+  [t.DEFAULT]: `
+		bg-white
+		text-secondary-700
+
+	`,
+  [t.PRIMARY]: `
+		bg-primary-600
+		text-white
+	`,
+  [t.WARNING]: `
+		bg-warning
+		text-white
+	`,
+  [t.ERROR]: `
+		bg-error
+		text-white
+	`,
+  [t.SECONDARY]: `
+		bg-secondary
+		text-white
+	`
+}, g = ({
+  kind: e = t.SECONDARY,
+  title: o,
+  children: i
+}) => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ n(
+  "div",
+  {
+    className: m(
+      "ui-snackbar",
+      "flex",
+      "w-full",
+      "rounded-xxs",
+      "items-center",
+      "justify-between",
+      "shadow-md",
+      "p-sm",
+      "flex-row-reverse",
+      "text-sm",
+      l[e]
+    ),
+    children: [
+      /* @__PURE__ */ r(
+        a,
+        {
+          kind: x.LINK,
+          size: c.SMALL,
+          style: {
+            color: e === t.DEFAULT ? "black" : "white",
+            fontWeight: "normal"
+          },
+          children: i
+        }
+      ),
+      o
+    ]
+  }
+) });
+export {
+  g as UiSnackbar
+};
+//# sourceMappingURL=UiSnackbar.js.map

package/components/UiSnackbar/UiSnackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiSnackbar.js","sources":["../../../src/components/UiSnackbar/UiSnackbar.tsx"],"sourcesContent":["import React  from \"react\";\nimport cx from \"classnames\";\nimport { ESnackbarTypes } from \"./_types\";\nimport { EButtonSizes, EButtonTypes, UiButton } from \"../UiButton\";\n\ntype UiSnackbarProps ={\n\tkind?: ESnackbarTypes;\n\ttitle: React.ReactNode;\n\tchildren: React.ReactNode;\n\n}\n\nconst kindClasses = {\n\t[ESnackbarTypes.DEFAULT]: `\n\t\tbg-white\n\t\ttext-secondary-700\n\n\t`,\n\t[ESnackbarTypes.PRIMARY]: `\n\t\tbg-primary-600\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.WARNING]: `\n\t\tbg-warning\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.ERROR]: `\n\t\tbg-error\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.SECONDARY]: `\n\t\tbg-secondary\n\t\ttext-white\n\t`,\n\n};\n\nexport const UiSnackbar: React.FC<UiSnackbarProps> = ({\n\n\tkind= ESnackbarTypes.SECONDARY,\n\ttitle,\n\tchildren\n\n}) => {\n\n\treturn (\n\t\t<>\n\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\t\"ui-snackbar\",\n\t\t\t\t\t\"flex\",\n\t\t\t\t\t\"w-full\",\n\t\t\t\t\t\"rounded-xxs\",\n\t\t\t\t\t\"items-center\",\n\t\t\t\t\t\"justify-between\",\n\t\t\t\t\t\"shadow-md\",\n\t\t\t\t\t\"p-sm\",\n\t\t\t\t\t\"flex-row-reverse\",\n\t\t\t\t\t\"text-sm\",\n\t\t\t\t\tkindClasses[kind]\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<UiButton\n\t\t\t\t\tkind={ EButtonTypes.LINK }\n\t\t\t\t\tsize={ EButtonSizes.SMALL }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tcolor: kind === ESnackbarTypes.DEFAULT ? \"black\" : \"white\",\n\t\t\t\t\t\tfontWeight: \"normal\",\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</UiButton>\n\n\t\t\t\t{ title }\n\t\t\t</div>\n\n\t\t</>\n\t);\n};\n"],"names":["kindClasses","ESnackbarTypes","UiSnackbar","kind","title","children","jsx","Fragment","jsxs","cx","UiButton","EButtonTypes","EButtonSizes"],"mappings":";;;;;;AAYA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1B,CAACA,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,EAI1B,CAACA,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,EAI1B,CAACA,EAAe,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,EAIxB,CAACA,EAAe,SAAS,GAAG;AAAA;AAAA;AAAA;AAK7B,GAEaC,IAAwC,CAAC;AAAA,EAErD,MAAAC,IAAMF,EAAe;AAAA,EACrB,OAAAG;AAAA,EACA,UAAAC;AAED,MAKG,gBAAAC,EAAAC,GAAA,EAAA,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAYC;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAT,EAAYG,CAAI;AAAA,IACjB;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAG;AAAA,QAACI;AAAA,QAAA;AAAA,UACA,MAAOC,EAAa;AAAA,UACpB,MAAOC,EAAa;AAAA,UACpB,OAAQ;AAAA,YACP,OAAOT,MAASF,EAAe,UAAU,UAAU;AAAA,YACnD,YAAY;AAAA,UACb;AAAA,UAEE,UAAAI;AAAA,QAAA;AAAA,MACH;AAAA,MAEED;AAAA,IAAA;AAAA,EAAA;AAAA,GAGJ;"}

package/components/UiSnackbar/_types.d.ts

@@ -0,0 +1,7 @@
+export declare enum ESnackbarTypes {
+    SECONDARY = "secondary",
+    DEFAULT = "default",
+    PRIMARY = "primary",
+    WARNING = "warning",
+    ERROR = "error"
+}

package/components/UiSnackbar/_types.js

@@ -0,0 +1,5 @@
+var R = /* @__PURE__ */ ((r) => (r.SECONDARY = "secondary", r.DEFAULT = "default", r.PRIMARY = "primary", r.WARNING = "warning", r.ERROR = "error", r))(R || {});
+export {
+  R as ESnackbarTypes
+};
+//# sourceMappingURL=_types.js.map

package/components/UiSnackbar/_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiSnackbar/_types.ts"],"sourcesContent":["export enum ESnackbarTypes  {\n\tSECONDARY = \"secondary\",\n\tDEFAULT = \"default\",\n\tPRIMARY = \"primary\",\n\tWARNING = \"warning\",\n\tERROR = \"error\"\n\n}\n"],"names":["ESnackbarTypes"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,QAAQ,SALGA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiSnackbar/index.d.ts

@@ -0,0 +1 @@
+export { UiSnackbar } from './UiSnackbar';

package/components/UiSnackbar/index.js

@@ -0,0 +1,5 @@
+import { UiSnackbar as o } from "./UiSnackbar.js";
+export {
+  o as UiSnackbar
+};
+//# sourceMappingURL=index.js.map

package/components/UiSnackbar/index.js.map

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

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.js

@@ -1,45 +1,46 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { jsx as o, jsxs as c } 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 i = ({
+  tabs: s,
+  tabsModel: l,
+  onTabChange: a
+}) => /* @__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"
+), 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__ */ c("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 +49,6 @@ const d = ({
   e
 )) });
 export {
-  d as UiTabs
+  i 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\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\t\t\t\"text-secondary-400\"\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 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","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;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,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,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,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,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.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 import { ETextAlign, ETextTransform, ETextWeight, ETypographySizes } from './_types.ts';
 import { EColors } from '../../_types/colors.ts';
-interface ITypographyProps {
-    tag?: keyof React.JSX.IntrinsicElements;
+type TUiTypographyProps<T extends keyof React.JSX.IntrinsicElements> = {
+    tag?: T;
     children?: React.ReactNode;
     underline?: boolean;
     lineHeight?: boolean;
@@ -11,7 +11,6 @@ interface ITypographyProps {
     align?: ETextAlign;
     weight?: ETextWeight;
     color?: EColors;
-    className?: string;
-}
-export declare const UiTypography: React.FC<ITypographyProps>;
+} & Omit<React.JSX.IntrinsicElements[T], "children" | "ref">;
+export declare const UiTypography: <T extends keyof React.JSX.IntrinsicElements>({ children, tag, underline, lineHeight, size, textTransform, align, weight, color, className, ...rest }: TUiTypographyProps<T>) => React.JSX.Element;
 export {};

package/components/UiTypography/UiTypography.js

@@ -1,9 +1,8 @@
-import { jsx as i } from "react/jsx-runtime";
-import "react";
-import { ETypographySizes as e, ETextTransform as r, ETextAlign as x, ETextWeight as a } from "./_types.js";
+import i from "react";
+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 s from "classnames";
-const y = {
+import y from "classnames";
+const m = {
   [e.MD]: "text-md",
   [e.XXS]: "text-xxs",
   [e.XS]: "text-xs",
@@ -14,21 +13,21 @@ const y = {
   [e.XXXL]: "text-3xl",
   [e.XXXXL]: "text-4xl",
   [e.XXXXXL]: "text-5xl"
-}, m = {
+}, p = {
   [r.UPPERCASE]: "uppercase",
   [r.LOWERCASE]: "lowercase",
   [r.NONE]: "normal-case",
   [r.CAPITALIZE]: "capitalize"
-}, p = {
-  [x.LEFT]: "text-left",
-  [x.RIGHT]: "text-right",
-  [x.CENTER]: "text-center"
 }, L = {
+  [R.LEFT]: "text-left",
+  [R.RIGHT]: "text-right",
+  [R.CENTER]: "text-center"
+}, Y = {
   [a.LIGHT]: "font-light",
   [a.REGULAR]: "font-medium",
   [a.SEMI_BOLD]: "font-bold",
   [a.BOLD]: "font-black"
-}, Y = {
+}, I = {
   [t.WHITE]: "text-white",
   [t.BLACK]: "text-black",
   [t.TRANSPARENT]: "text-transparent",
@@ -70,6 +69,8 @@ const y = {
   [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",
@@ -88,30 +89,34 @@ const y = {
   [t.ACCENT_ALT_700]: "text-accent-alt-700"
 }, d = ({
   children: o,
-  tag: E = "p",
-  underline: l = !1,
-  lineHeight: C = !1,
-  size: R,
+  tag: s,
+  underline: E = !1,
+  lineHeight: l = !1,
+  size: x,
   textTransform: A,
   align: _,
   weight: n,
   color: c,
-  className: T
+  className: C,
+  ...T
 }) => {
-  const N = s(
+  const N = y(
     "ui-typography",
     {
-      underline: l
+      underline: E
     },
-    C ? "leading-normal" : "leading-none",
-    R && y[R],
-    A && m[A],
-    _ && p[_],
-    n && L[n],
-    c && Y[c],
-    T
+    l ? "leading-normal" : "leading-none",
+    x && m[x],
+    A && p[A],
+    _ && L[_],
+    n && Y[n],
+    c && I[c],
+    C
   );
-  return /* @__PURE__ */ i(E, { className: s(N), children: o });
+  return i.createElement(s || "p", {
+    className: N,
+    ...T
+  }, o);
 };
 export {
   d as UiTypography