bonkers-ui 2.0.2 → 2.0.3

package/components/UiCheckbox/UiCheckbox.js

@@ -1,79 +1,83 @@
-import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
 import "react";
-import o from "./UiCheckbox.module.css.js";
-import c from "classnames";
+import r from "classnames";
 import { EJustify as e } from "../../_types/align.js";
 import { ECheckboxSize as s } from "./_types.js";
-const b = {
+import '../../assets/UiCheckbox.css';const C = "_UiCheckbox_6diu5_1", f = "_UiCheckbox__custom_6diu5_5", U = "_UiCheckbox__icon_6diu5_11", p = "_UiCheckbox__disabled_6diu5_63", t = {
+  UiCheckbox: C,
+  UiCheckbox__custom: f,
+  UiCheckbox__icon: U,
+  UiCheckbox__disabled: p
+}, y = {
   [e.START]: "justify-start",
   [e.END]: "justify-end",
   [e.CENTER]: "justify-center",
   [e.BETWEEN]: "justify-between",
   [e.AROUND]: "justify-around",
   [e.EVENLY]: "justify-evenly"
-}, k = {
+}, j = {
   [s.SM]: "size-sm",
   [s.MD]: "size-md"
-}, j = {
+}, E = {
   [s.SM]: "size-xs",
   [s.MD]: "size-sm"
-}, z = ({
-  checked: l,
-  value: m,
-  size: a = s.MD,
-  disabled: i = !1,
-  justify: d = e.START,
-  invertOrder: f = !1,
-  children: n,
-  onChange: t,
-  name: u,
-  ...p
+}, M = ({
+  checked: a,
+  value: d,
+  size: n = s.MD,
+  disabled: c = !1,
+  justify: l = e.START,
+  invertOrder: x = !1,
+  children: _,
+  onChange: o,
+  name: b,
+  ...h
 }) => {
-  const x = (h) => {
-    !i && t && (t == null || t(h.target.checked));
+  const u = (m) => {
+    !c && o && (o == null || o(m.target.checked));
   };
-  return /* @__PURE__ */ y("label", { className: c(
-    o.UiCheckbox,
+  return /* @__PURE__ */ k("label", { className: r(
+    t.UiCheckbox,
     "grid",
     "cursor-pointer",
-    n && "items-center gap-sm",
-    b[d],
-    i && o.UiCheckbox__disabled
+    _ && "items-center gap-sm",
+    y[l],
+    c && t.UiCheckbox__disabled
   ), children: [
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ i(
       "input",
       {
-        ...p,
+        ...h,
         className: "absolute appearance-none",
         type: "checkbox",
-        checked: l,
-        disabled: i,
-        value: m,
-        name: u,
-        onChange: x
+        checked: a,
+        disabled: c,
+        value: d,
+        name: b,
+        onChange: u
       }
     ),
-    /* @__PURE__ */ r("span", { className: c(
-      o.UiCheckbox__custom,
+    /* @__PURE__ */ i("span", { className: r(
+      t.UiCheckbox__custom,
       "relative",
       "flex",
       "items-center",
       "justify-center",
-      "rounded",
+      "rounded-sm",
       "border",
-      "border-secondary-alt-500",
+      "border-secondary-alt-600",
       "hover:border-secondary-alt-700",
-      f && "order-last",
-      k[a]
-    ), children: /* @__PURE__ */ r(
+      x && "order-last",
+      j[n]
+    ), children: /* @__PURE__ */ i(
       "svg",
       {
-        className: c(o.UiCheckbox__icon, "text-white", j[a]),
+        className: r(t.UiCheckbox__icon, "text-white", E[n]),
         viewBox: "0 0 16 12",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ i(
           "path",
           {
             d: "M1 4.40106L6.60071 10.1135L15.1694 1.71245",
@@ -84,10 +88,10 @@ const b = {
         )
       }
     ) }),
-    n
+    _
   ] });
 };
 export {
-  z as UiCheckbox
+  M as UiCheckbox
 };
 //# sourceMappingURL=UiCheckbox.js.map

package/components/UiCheckbox/UiCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiCheckbox.js","sources":["../../../src/components/UiCheckbox/UiCheckbox.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./UiCheckbox.module.css\";\nimport cx from \"classnames\";\nimport { EJustify } from \"../../_types/align\";\nimport { ECheckboxSize } from \"./_types.ts\";\n\nexport type TUiCheckboxProps = {\n\tinvertOrder?: boolean;\n\tjustify?: EJustify;\n\tdisabled?: boolean;\n\tvalue?: string;\n\tsize?: ECheckboxSize;\n\tonChange?: (checked: boolean) => void;\n\tname?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\">;\n\nconst justificationClasses = {\n\t[EJustify.START]: \"justify-start\",\n\t[EJustify.END]: \"justify-end\",\n\t[EJustify.CENTER]: \"justify-center\",\n\t[EJustify.BETWEEN]: \"justify-between\",\n\t[EJustify.AROUND]: \"justify-around\",\n\t[EJustify.EVENLY]: \"justify-evenly\"\n};\n\nconst spanSizeClasses = {\n\t[ECheckboxSize.SM]: \"size-sm\",\n\t[ECheckboxSize.MD]: \"size-md\"\n};\n\nconst svgSizeClasses = {\n\t[ECheckboxSize.SM]: \"size-xs\",\n\t[ECheckboxSize.MD]: \"size-sm\"\n};\n\nexport const UiCheckbox: React.FC<TUiCheckboxProps> = ({\n\tchecked,\n\tvalue,\n\tsize = ECheckboxSize.MD,\n\tdisabled = false,\n\tjustify = EJustify.START,\n\tinvertOrder = false,\n\tchildren,\n\tonChange,\n\tname,\n\t...rest\n}) => {\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (!disabled && onChange) {\n\t\t\tonChange?.(event.target.checked);\n\t\t}\n\t};\n\treturn (\n\t\t<label className={\n\t\t\tcx(styles.UiCheckbox,\n\t\t\t\t\"grid\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\tchildren && \"items-center gap-sm\",\n\t\t\t\tjustificationClasses[justify],\n\t\t\t\tdisabled && styles.UiCheckbox__disabled)\n\t\t}>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tclassName=\"absolute appearance-none\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tvalue={ value }\n\t\t\t\tname={ name }\n\t\t\t\tonChange={ handleChange }\n\t\t\t/>\n\t\t\t<span className={ cx(styles.UiCheckbox__custom,\n\t\t\t\t\"relative\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"justify-center\",\n\t\t\t\t\"rounded\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-secondary-alt-500\",\n\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\tinvertOrder && \"order-last\",\n\t\t\t\tspanSizeClasses[size]\n\t\t\t) }>\n\t\t\t\t<svg\n\t\t\t\t\tclassName={ cx(styles.UiCheckbox__icon, \"text-white\", svgSizeClasses[size]) }\n\t\t\t\t\tviewBox=\"0 0 16 12\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1 4.40106L6.60071 10.1135L15.1694 1.71245\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"1.6\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t\t{ children }\n\t\t</label>\n\t);\n};\n"],"names":["justificationClasses","EJustify","spanSizeClasses","ECheckboxSize","svgSizeClasses","UiCheckbox","checked","value","size","disabled","justify","invertOrder","children","onChange","name","rest","handleChange","event","jsxs","cx","styles","jsx"],"mappings":";;;;;;AAgBA,MAAMA,IAAuB;AAAA,EAC5B,CAACC,EAAS,KAAK,GAAG;AAAA,EAClB,CAACA,EAAS,GAAG,GAAG;AAAA,EAChB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,OAAO,GAAG;AAAA,EACpB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,MAAM,GAAG;AACpB,GAEMC,IAAkB;AAAA,EACvB,CAACC,EAAc,EAAE,GAAG;AAAA,EACpB,CAACA,EAAc,EAAE,GAAG;AACrB,GAEMC,IAAiB;AAAA,EACtB,CAACD,EAAc,EAAE,GAAG;AAAA,EACpB,CAACA,EAAc,EAAE,GAAG;AACrB,GAEaE,IAAyC,CAAC;AAAA,EACtD,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOL,EAAc;AAAA,EACrB,UAAAM,IAAW;AAAA,EACX,SAAAC,IAAUT,EAAS;AAAA,EACnB,aAAAU,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAAC,IAAe,CAACC,MAA+C;AAChE,IAAA,CAACR,KAAYI,MACLA,KAAA,QAAAA,EAAAI,EAAM,OAAO;AAAA,EAE1B;AAEC,SAAA,gBAAAC,EAAC,WAAM,WACNC;AAAA,IAAGC,EAAO;AAAA,IACT;AAAA,IACA;AAAA,IACAR,KAAY;AAAA,IACZZ,EAAqBU,CAAO;AAAA,IAC5BD,KAAYW,EAAO;AAAA,EAEpB,GAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGN;AAAA,QACL,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAAT;AAAA,QACA,UAAAG;AAAA,QACA,OAAAF;AAAA,QACA,MAAAO;AAAA,QACA,UAAWE;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAK,EAAC,UAAK,WAAYF;AAAA,MAAGC,EAAO;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAT,KAAe;AAAA,MACfT,EAAgBM,CAAI;AAAA,IAEpB,GAAA,UAAA,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAYF,EAAGC,EAAO,kBAAkB,cAAchB,EAAeI,CAAI,CAAC;AAAA,QAC1E,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,eAAY;AAAA,QAEZ,UAAA,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA,GAEF;AAAA,IACET;AAAA,EAAA,GACH;AAEF;"}
+{"version":3,"file":"UiCheckbox.js","sources":["../../../src/components/UiCheckbox/UiCheckbox.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./UiCheckbox.module.css\";\nimport cx from \"classnames\";\nimport { EJustify } from \"../../_types/align\";\nimport { ECheckboxSize } from \"./_types.ts\";\n\nexport type TUiCheckboxProps = {\n\tinvertOrder?: boolean;\n\tjustify?: EJustify;\n\tdisabled?: boolean;\n\tvalue?: string;\n\tsize?: ECheckboxSize;\n\tonChange?: (checked: boolean) => void;\n\tname?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\">;\n\nconst justificationClasses = {\n\t[EJustify.START]: \"justify-start\",\n\t[EJustify.END]: \"justify-end\",\n\t[EJustify.CENTER]: \"justify-center\",\n\t[EJustify.BETWEEN]: \"justify-between\",\n\t[EJustify.AROUND]: \"justify-around\",\n\t[EJustify.EVENLY]: \"justify-evenly\"\n};\n\nconst spanSizeClasses = {\n\t[ECheckboxSize.SM]: \"size-sm\",\n\t[ECheckboxSize.MD]: \"size-md\"\n};\n\nconst svgSizeClasses = {\n\t[ECheckboxSize.SM]: \"size-xs\",\n\t[ECheckboxSize.MD]: \"size-sm\"\n};\n\nexport const UiCheckbox: React.FC<TUiCheckboxProps> = ({\n\tchecked,\n\tvalue,\n\tsize = ECheckboxSize.MD,\n\tdisabled = false,\n\tjustify = EJustify.START,\n\tinvertOrder = false,\n\tchildren,\n\tonChange,\n\tname,\n\t...rest\n}) => {\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (!disabled && onChange) {\n\t\t\tonChange?.(event.target.checked);\n\t\t}\n\t};\n\treturn (\n\t\t<label className={\n\t\t\tcx(styles.UiCheckbox,\n\t\t\t\t\"grid\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\tchildren && \"items-center gap-sm\",\n\t\t\t\tjustificationClasses[justify],\n\t\t\t\tdisabled && styles.UiCheckbox__disabled)\n\t\t}>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tclassName=\"absolute appearance-none\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tvalue={ value }\n\t\t\t\tname={ name }\n\t\t\t\tonChange={ handleChange }\n\t\t\t/>\n\t\t\t<span className={ cx(styles.UiCheckbox__custom,\n\t\t\t\t\"relative\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"justify-center\",\n\t\t\t\t\"rounded-sm\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-secondary-alt-600\",\n\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\tinvertOrder && \"order-last\",\n\t\t\t\tspanSizeClasses[size]\n\t\t\t) }>\n\t\t\t\t<svg\n\t\t\t\t\tclassName={ cx(styles.UiCheckbox__icon, \"text-white\", svgSizeClasses[size]) }\n\t\t\t\t\tviewBox=\"0 0 16 12\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1 4.40106L6.60071 10.1135L15.1694 1.71245\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"1.6\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t\t{ children }\n\t\t</label>\n\t);\n};\n"],"names":["justificationClasses","EJustify","spanSizeClasses","ECheckboxSize","svgSizeClasses","UiCheckbox","checked","value","size","disabled","justify","invertOrder","children","onChange","name","rest","handleChange","event","jsxs","cx","styles","jsx"],"mappings":";;;;;;;;;;GAgBMA,IAAuB;AAAA,EAC5B,CAACC,EAAS,KAAK,GAAG;AAAA,EAClB,CAACA,EAAS,GAAG,GAAG;AAAA,EAChB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,OAAO,GAAG;AAAA,EACpB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,MAAM,GAAG;AACpB,GAEMC,IAAkB;AAAA,EACvB,CAACC,EAAc,EAAE,GAAG;AAAA,EACpB,CAACA,EAAc,EAAE,GAAG;AACrB,GAEMC,IAAiB;AAAA,EACtB,CAACD,EAAc,EAAE,GAAG;AAAA,EACpB,CAACA,EAAc,EAAE,GAAG;AACrB,GAEaE,IAAyC,CAAC;AAAA,EACtD,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOL,EAAc;AAAA,EACrB,UAAAM,IAAW;AAAA,EACX,SAAAC,IAAUT,EAAS;AAAA,EACnB,aAAAU,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAAC,IAAe,CAACC,MAA+C;AAChE,IAAA,CAACR,KAAYI,MACLA,KAAA,QAAAA,EAAAI,EAAM,OAAO;AAAA,EAE1B;AAEC,SAAA,gBAAAC,EAAC,WAAM,WACNC;AAAA,IAAGC,EAAO;AAAA,IACT;AAAA,IACA;AAAA,IACAR,KAAY;AAAA,IACZZ,EAAqBU,CAAO;AAAA,IAC5BD,KAAYW,EAAO;AAAA,EAEpB,GAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGN;AAAA,QACL,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAAT;AAAA,QACA,UAAAG;AAAA,QACA,OAAAF;AAAA,QACA,MAAAO;AAAA,QACA,UAAWE;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAK,EAAC,UAAK,WAAYF;AAAA,MAAGC,EAAO;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAT,KAAe;AAAA,MACfT,EAAgBM,CAAI;AAAA,IAEpB,GAAA,UAAA,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAYF,EAAGC,EAAO,kBAAkB,cAAchB,EAAeI,CAAI,CAAC;AAAA,QAC1E,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,eAAY;AAAA,QAEZ,UAAA,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA,GAEF;AAAA,IACET;AAAA,EAAA,GACH;AAEF;"}

package/components/UiCheckbox/index.d.ts

@@ -1,2 +1,3 @@
 export { UiCheckbox } from './UiCheckbox';
 export { ECheckboxSize } from './_types';
+export { EJustify } from '../../_types/align';

package/components/UiCheckbox/index.js

@@ -1,7 +1,9 @@
 import { UiCheckbox as r } from "./UiCheckbox.js";
-import { ECheckboxSize as b } from "./_types.js";
+import { ECheckboxSize as f } from "./_types.js";
+import { EJustify as i } from "../../_types/align.js";
 export {
-  b as ECheckboxSize,
+  f as ECheckboxSize,
+  i as EJustify,
   r as UiCheckbox
 };
 //# sourceMappingURL=index.js.map

package/components/UiCheckbox/index.js.map

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

package/components/UiIcon/UiIcon.d.ts

@@ -4,6 +4,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 interface IUiIconProps {
     name: IconProp;
     size?: ESize;
+    className?: string;
 }
 export declare const UiIcon: React.FC<IUiIconProps>;
 export {};

package/components/UiIcon/UiIcon.js

@@ -1,10 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as x } from "react/jsx-runtime";
 import "react";
 import { ESize as i } from "../../_types/sizing.js";
-import { FontAwesomeIcon as x } from "@fortawesome/react-fontawesome";
-import X from "classnames";
+import { FontAwesomeIcon as X } from "@fortawesome/react-fontawesome";
+import m from "classnames";
 import "@fortawesome/fontawesome-svg-core";
-const m = {
+const r = {
   [i.XXXS]: "size-xxxs",
   [i.XXS]: "size-xxs",
   [i.XS]: "size-xs",
@@ -18,20 +18,21 @@ const m = {
   [i.XXXXXL]: "size-xxxxxl",
   [i.AUTO]: "size-auto",
   [i.ZERO]: "size-zero"
-}, p = ({ size: s, name: e }) => /* @__PURE__ */ o(
-  x,
+}, a = ({ size: s, name: e, className: o }) => /* @__PURE__ */ x(
+  X,
   {
     icon: e,
-    className: X(
+    className: m(
       "ui-icon",
       "inline",
       "overflow-visible",
       "align-[-.125em]",
-      s && m[s]
+      s && r[s],
+      o
     )
   }
 );
 export {
-  p as UiIcon
+  a as UiIcon
 };
 //# sourceMappingURL=UiIcon.js.map

package/components/UiIcon/UiIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiIcon.js","sources":["../../../src/components/UiIcon/UiIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { ESize } from \"../../_types/sizing\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport cx from \"classnames\";\nimport { type IconProp } from \"@fortawesome/fontawesome-svg-core\";\n\ninterface IUiIconProps {\n\tname: IconProp;\n\tsize?: ESize;\n}\n\nconst sizeToClassName: { [key in ESize]: string } = {\n\t[ESize.XXXS]: \"size-xxxs\",\n\t[ESize.XXS]: \"size-xxs\",\n\t[ESize.XS]: \"size-xs\",\n\t[ESize.SM]: \"size-sm\",\n\t[ESize.MD]: \"size-md\",\n\t[ESize.LG]: \"size-lg\",\n\t[ESize.XL]: \"size-xl\",\n\t[ESize.XXL]: \"size-xxl\",\n\t[ESize.XXXL]: \"size-xxxl\",\n\t[ESize.XXXXL]: \"size-xxxxl\",\n\t[ESize.XXXXXL]: \"size-xxxxxl\",\n\t[ESize.AUTO]: \"size-auto\",\n\t[ESize.ZERO]: \"size-zero\",\n};\n\nexport const UiIcon: React.FC<IUiIconProps> = ({ size, name }) => {\n\n\treturn (\n\t\t<FontAwesomeIcon\n\t\t\ticon={ name }\n\t\t\tclassName={ cx(\n\t\t\t\t\"ui-icon\",\n\t\t\t\t\"inline\",\n\t\t\t\t\"overflow-visible\",\n\t\t\t\t\"align-[-.125em]\",\n\t\t\t\tsize && sizeToClassName[size]\n\t\t\t) }\n\t\t/>\n\t);\n};\n"],"names":["sizeToClassName","ESize","UiIcon","size","name","jsx","FontAwesomeIcon","cx"],"mappings":";;;;;;AAWA,MAAMA,IAA8C;AAAA,EACnD,CAACC,EAAM,IAAI,GAAG;AAAA,EACd,CAACA,EAAM,GAAG,GAAG;AAAA,EACb,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,GAAG,GAAG;AAAA,EACb,CAACA,EAAM,IAAI,GAAG;AAAA,EACd,CAACA,EAAM,KAAK,GAAG;AAAA,EACf,CAACA,EAAM,MAAM,GAAG;AAAA,EAChB,CAACA,EAAM,IAAI,GAAG;AAAA,EACd,CAACA,EAAM,IAAI,GAAG;AACf,GAEaC,IAAiC,CAAC,EAAE,MAAAC,GAAM,MAAAC,QAGrD,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,MAAOF;AAAA,IACP,WAAYG;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAJ,KAAQH,EAAgBG,CAAI;AAAA,IAAA;AAAA,EAC7B;AACD;"}
+{"version":3,"file":"UiIcon.js","sources":["../../../src/components/UiIcon/UiIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { ESize } from \"../../_types/sizing\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport cx from \"classnames\";\nimport { type IconProp } from \"@fortawesome/fontawesome-svg-core\";\n\ninterface IUiIconProps {\n\tname: IconProp;\n\tsize?: ESize;\n\tclassName?: string;\n}\n\nconst sizeToClassName: { [key in ESize]: string } = {\n\t[ESize.XXXS]: \"size-xxxs\",\n\t[ESize.XXS]: \"size-xxs\",\n\t[ESize.XS]: \"size-xs\",\n\t[ESize.SM]: \"size-sm\",\n\t[ESize.MD]: \"size-md\",\n\t[ESize.LG]: \"size-lg\",\n\t[ESize.XL]: \"size-xl\",\n\t[ESize.XXL]: \"size-xxl\",\n\t[ESize.XXXL]: \"size-xxxl\",\n\t[ESize.XXXXL]: \"size-xxxxl\",\n\t[ESize.XXXXXL]: \"size-xxxxxl\",\n\t[ESize.AUTO]: \"size-auto\",\n\t[ESize.ZERO]: \"size-zero\",\n};\n\nexport const UiIcon: React.FC<IUiIconProps> = ({ size, name, className }) => {\n\n\treturn (\n\t\t<FontAwesomeIcon\n\t\t\ticon={ name }\n\t\t\tclassName={ cx(\n\t\t\t\t\"ui-icon\",\n\t\t\t\t\"inline\",\n\t\t\t\t\"overflow-visible\",\n\t\t\t\t\"align-[-.125em]\",\n\t\t\t\tsize && sizeToClassName[size],\n\t\t\t\tclassName\n\t\t\t) }\n\t\t/>\n\t);\n};\n"],"names":["sizeToClassName","ESize","UiIcon","size","name","className","jsx","FontAwesomeIcon","cx"],"mappings":";;;;;;AAYA,MAAMA,IAA8C;AAAA,EACnD,CAACC,EAAM,IAAI,GAAG;AAAA,EACd,CAACA,EAAM,GAAG,GAAG;AAAA,EACb,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,EAAE,GAAG;AAAA,EACZ,CAACA,EAAM,GAAG,GAAG;AAAA,EACb,CAACA,EAAM,IAAI,GAAG;AAAA,EACd,CAACA,EAAM,KAAK,GAAG;AAAA,EACf,CAACA,EAAM,MAAM,GAAG;AAAA,EAChB,CAACA,EAAM,IAAI,GAAG;AAAA,EACd,CAACA,EAAM,IAAI,GAAG;AACf,GAEaC,IAAiC,CAAC,EAAE,MAAAC,GAAM,MAAAC,GAAM,WAAAC,QAG3D,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,MAAOH;AAAA,IACP,WAAYI;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAL,KAAQH,EAAgBG,CAAI;AAAA,MAC5BE;AAAA,IAAA;AAAA,EACD;AACD;"}

package/components/UiInput/UiInput.base.js

@@ -1,22 +1,22 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import "react";
-import { UiTypography as i } from "../UiTypography/UiTypography.js";
+import { UiTypography as n } from "../UiTypography/UiTypography.js";
 import { EInputKind as e } from "./_types.js";
 import t from "classnames";
 const x = ({ postIcon: o, preIcon: a, kind: l = e.DEFAULT, ...r }) => {
   const d = {
-    [e.DEFAULT]: "border-secondary-alt-500 hover:border-secondary-alt-700",
+    [e.DEFAULT]: "border-secondary-alt-600 hover:border-secondary-alt-700",
     [e.ERROR]: "border-error",
     [e.SUCCESS]: "border-primary-600"
   };
   return /* @__PURE__ */ s(
-    i,
+    n,
     {
       tag: "label",
       htmlFor: r.id,
       className: t(
         "ui-input-wrapper",
-        "flex flex-row items-center gap-xxs rounded-lg border p-sm",
+        "flex flex-row items-center gap-sm rounded-xl border p-sm",
         l && d[l],
         {
           "bg-white": !r.disabled,
@@ -25,10 +25,10 @@ const x = ({ postIcon: o, preIcon: a, kind: l = e.DEFAULT, ...r }) => {
       ),
       children: [
         a || null,
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ i(
           "input",
           {
-            className: t("border-0 flex-1 bg-transparent outline-none placeholder:text-secondary-alt-600 w-full"),
+            className: t("border-0 flex-1 bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full"),
             ...r
           }
         ),

package/components/UiInput/UiInput.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiInput.base.js","sources":["../../../src/components/UiInput/UiInput.base.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiTypography } from \"../UiTypography\";\nimport { EInputKind } from \"./_types\";\nimport cx from \"classnames\";\n\nexport type TUiInputBaseProps = {\n\tid: string;\n\tpostIcon?: React.ReactNode;\n\tpreIcon?: React.ReactNode;\n\tkind?: EInputKind;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputBase: React.FC<\n\tTUiInputBaseProps\n> = ({ postIcon, preIcon, kind = EInputKind.DEFAULT, ...rest } ) => {\n\n\tconst stateClasses = {\n\t\t[EInputKind.DEFAULT]: \"border-secondary-alt-500 hover:border-secondary-alt-700\",\n\t\t[EInputKind.ERROR]: \"border-error\",\n\t\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t};\n\n\treturn (\n\t\t<UiTypography\n\t\t\ttag=\"label\"\n\t\t\thtmlFor={ rest.id }\n\t\t\tclassName={\n\t\t\t\tcx(\"ui-input-wrapper\",\n\t\t\t\t\t\"flex flex-row items-center gap-xxs rounded-lg border p-sm\",\n\t\t\t\t\tkind && stateClasses[kind],\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-white\": !rest.disabled,\n\t\t\t\t\t\t\"border-secondary-alt-300 bg-secondary-alt-200\": rest.disabled,\n\t\t\t\t\t})\n\t\t\t}\n\t\t>\n\t\t\t{ preIcon ? preIcon : null }\n\t\t\t<input\n\t\t\t\tclassName={ cx(\"border-0 flex-1 bg-transparent outline-none placeholder:text-secondary-alt-600 w-full\") }\n\t\t\t\t{ ...rest }\n\t\t\t/>\n\t\t\t{ postIcon ? postIcon : null }\n\t\t</UiTypography>\n\t);\n};\n"],"names":["UiInputBase","postIcon","preIcon","kind","EInputKind","rest","stateClasses","jsxs","UiTypography","cx","jsx"],"mappings":";;;;;AAYa,MAAAA,IAET,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAOC,EAAW,SAAS,GAAGC,QAAY;AAEnE,QAAMC,IAAe;AAAA,IACpB,CAACF,EAAW,OAAO,GAAG;AAAA,IACtB,CAACA,EAAW,KAAK,GAAG;AAAA,IACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACvB;AAGC,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAI;AAAA,MACJ,SAAUH,EAAK;AAAA,MACf,WACCI;AAAA,QAAG;AAAA,QACF;AAAA,QACAN,KAAQG,EAAaH,CAAI;AAAA,QACzB;AAAA,UACC,YAAY,CAACE,EAAK;AAAA,UAClB,iDAAiDA,EAAK;AAAA,QAAA;AAAA,MACtD;AAAA,MAGD,UAAA;AAAA,QAAAH,KAAoB;AAAA,QACtB,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD,EAAG,uFAAuF;AAAA,YACpG,GAAGJ;AAAA,UAAA;AAAA,QACN;AAAA,QACEJ,KAAsB;AAAA,MAAA;AAAA,IAAA;AAAA,EACzB;AAEF;"}
+{"version":3,"file":"UiInput.base.js","sources":["../../../src/components/UiInput/UiInput.base.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiTypography } from \"../UiTypography\";\nimport { EInputKind } from \"./_types\";\nimport cx from \"classnames\";\n\nexport type TUiInputBaseProps = {\n\tid: string;\n\tpostIcon?: React.ReactNode;\n\tpreIcon?: React.ReactNode;\n\tkind?: EInputKind;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputBase: React.FC<\n\tTUiInputBaseProps\n> = ({ postIcon, preIcon, kind = EInputKind.DEFAULT, ...rest } ) => {\n\n\tconst stateClasses = {\n\t\t[EInputKind.DEFAULT]: \"border-secondary-alt-600 hover:border-secondary-alt-700\",\n\t\t[EInputKind.ERROR]: \"border-error\",\n\t\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t};\n\n\treturn (\n\t\t<UiTypography\n\t\t\ttag=\"label\"\n\t\t\thtmlFor={ rest.id }\n\t\t\tclassName={\n\t\t\t\tcx(\"ui-input-wrapper\",\n\t\t\t\t\t\"flex flex-row items-center gap-sm rounded-xl border p-sm\",\n\t\t\t\t\tkind && stateClasses[kind],\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-white\": !rest.disabled,\n\t\t\t\t\t\t\"border-secondary-alt-300 bg-secondary-alt-200\": rest.disabled,\n\t\t\t\t\t})\n\t\t\t}\n\t\t>\n\t\t\t{ preIcon ? preIcon : null }\n\t\t\t<input\n\t\t\t\tclassName={ cx(\"border-0 flex-1 bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full\") }\n\t\t\t\t{ ...rest }\n\t\t\t/>\n\t\t\t{ postIcon ? postIcon : null }\n\t\t</UiTypography>\n\t);\n};\n"],"names":["UiInputBase","postIcon","preIcon","kind","EInputKind","rest","stateClasses","jsxs","UiTypography","cx","jsx"],"mappings":";;;;;AAYa,MAAAA,IAET,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAOC,EAAW,SAAS,GAAGC,QAAY;AAEnE,QAAMC,IAAe;AAAA,IACpB,CAACF,EAAW,OAAO,GAAG;AAAA,IACtB,CAACA,EAAW,KAAK,GAAG;AAAA,IACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACvB;AAGC,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAI;AAAA,MACJ,SAAUH,EAAK;AAAA,MACf,WACCI;AAAA,QAAG;AAAA,QACF;AAAA,QACAN,KAAQG,EAAaH,CAAI;AAAA,QACzB;AAAA,UACC,YAAY,CAACE,EAAK;AAAA,UAClB,iDAAiDA,EAAK;AAAA,QAAA;AAAA,MACtD;AAAA,MAGD,UAAA;AAAA,QAAAH,KAAoB;AAAA,QACtB,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD,EAAG,yFAAyF;AAAA,YACtG,GAAGJ;AAAA,UAAA;AAAA,QACN;AAAA,QACEJ,KAAsB;AAAA,MAAA;AAAA,IAAA;AAAA,EACzB;AAEF;"}

package/components/UiInputRange/UiInputRange.js

@@ -1,30 +1,31 @@
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
+import { jsxs as P, jsx as e } from "react/jsx-runtime";
 import n from "react";
-import d from "classnames";
-import W from "./UiInputRange.module.css.js";
-const j = ({
+import h from "classnames";
+import '../../assets/UiInputRange.css';const S = "_thumb_hkko1_18", W = {
+  thumb: S
+}, j = ({
   value: o,
-  min: s,
-  max: a,
-  step: h,
+  min: a,
+  max: r,
+  step: p,
   onChangeHandler: m,
   ...l
 }) => {
-  const i = n.useRef(null), c = n.useRef(null), [f, b] = n.useState(0), [g, x] = n.useState(0);
+  const c = n.useRef(null), i = n.useRef(null), [b, f] = n.useState(0), [g, x] = n.useState(0);
   n.useEffect(() => {
-    if (!i.current || !c.current) return;
-    const t = parseFloat(String(o)), r = parseFloat(String(s)), v = parseFloat(String(a)), M = (t - r) / (v - r) * 100, N = c.current.getBoundingClientRect().width, P = i.current.clientWidth, u = N / P * 100, p = M * (1 - u / 100);
-    b(Math.max(0, Math.min(100, p))), x(Math.max(0, Math.min(100, p + u)));
-  }, [s, a, o]);
+    if (!c.current || !i.current) return;
+    const t = parseFloat(String(o)), s = parseFloat(String(a)), v = parseFloat(String(r)), M = (t - s) / (v - s) * 100, k = i.current.getBoundingClientRect().width, N = c.current.clientWidth, u = k / N * 100, d = M * (1 - u / 100);
+    f(Math.max(0, Math.min(100, d))), x(Math.max(0, Math.min(100, d + u)));
+  }, [a, r, o]);
   const y = (t) => {
     if (t === o) return;
-    const r = parseFloat(t.toFixed(10));
-    m(r);
+    const s = parseFloat(t.toFixed(10));
+    m(s);
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ P(
     "div",
     {
-      className: d(
+      className: h(
         "relative box-content h-xl py-xxs",
         l.disabled && "opacity-60 cursor-default pointer-events-none"
       ),
@@ -33,26 +34,26 @@ const j = ({
           "input",
           {
             ...l,
-            ref: i,
+            ref: c,
             className: "absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent",
             style: {
               touchAction: "none"
             },
             type: "range",
-            min: s,
-            max: a,
-            step: h,
+            min: a,
+            max: r,
+            step: p,
             value: o,
             onChange: (t) => y(+t.target.value),
             onTouchStart: (t) => t.stopPropagation(),
             onTouchMove: (t) => t.stopPropagation()
           }
         ),
-        /* @__PURE__ */ e("div", { className: "pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded bg-secondary-alt" }),
+        /* @__PURE__ */ e("div", { className: "pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt" }),
         /* @__PURE__ */ e(
           "div",
           {
-            className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded bg-primary",
+            className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary",
             style: {
               width: `${g}%`
             }
@@ -61,7 +62,7 @@ const j = ({
         /* @__PURE__ */ e(
           "div",
           {
-            className: d(
+            className: h(
               W.thumb,
               "pointer-events-none",
               "absolute",
@@ -72,9 +73,9 @@ const j = ({
               "bg-white",
               "border-primary"
             ),
-            ref: c,
+            ref: i,
             style: {
-              left: `${f}%`
+              left: `${b}%`
             },
             children: /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary" })
           }

package/components/UiInputRange/UiInputRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiInputRange.module.css\";\n\nexport type TUiInputRangeProps = {\n\tvalue: number;\n\tmin: string | number;\n\tmax: string | number;\n\tstep: string | number;\n\tonChangeHandler: (value: number) => void;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\n\tconst [thumbPosition, setThumbPosition] = React.useState(0);\n\tconst [trackWidth, setTrackWidth] = React.useState(0);\n\n\tReact.useEffect(() => {\n\t\tif (!track.current || !thumb.current) return;\n\n\t\tconst numValue = parseFloat(String(value));\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\n\t\tconst percentage = ((numValue - numMin) / (numMax - numMin)) * 100;\n\n\t\tconst thumbWidth = thumb.current.getBoundingClientRect().width;\n\t\tconst trackWidth = track.current.clientWidth;\n\t\tconst thumbWidthPercentage = (thumbWidth / trackWidth) * 100;\n\t\tconst adjustedPercentage = percentage * (1 - thumbWidthPercentage / 100);\n\n\t\tsetThumbPosition(Math.max(0, Math.min(100, adjustedPercentage)));\n\t\tsetTrackWidth(Math.max(0, Math.min(100, adjustedPercentage + thumbWidthPercentage)));\n\t}, [min, max, value]);\n\n\tconst handleOnChange = (newValue: number) => {\n\t\tif (newValue === value) return;\n\t\tconst preciseValue = parseFloat(newValue.toFixed(10));\n\t\tonChangeHandler(preciseValue);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ cx(\n\t\t\t\t\"relative box-content h-xl py-xxs\",\n\t\t\t\trest.disabled && \"opacity-60 cursor-default pointer-events-none\",\n\t\t\t) }\n\t\t>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tref={ track }\n\t\t\t\tclassName=\"absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t} }\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tstep={ step }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ (e) => handleOnChange(+e.target.value) }\n\t\t\t\tonTouchStart={ (e) => e.stopPropagation() }\n\t\t\t\tonTouchMove={ (e) => e.stopPropagation() }\n\t\t\t/>\n\n\t\t\t<div className=\"pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded bg-secondary-alt\" />\n\n\t\t\t<div\n\t\t\t\tclassName=\"pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded bg-primary\"\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${trackWidth}%`,\n\t\t\t\t} }\n\t\t\t/>\n\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\tstyles.thumb,\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"box-content\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\t\"-translate-y-1/2\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"border-primary\",\n\t\t\t\t) }\n\t\t\t\tref={ thumb }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${thumbPosition}%`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputRange","value","min","max","step","onChangeHandler","rest","track","React","thumb","thumbPosition","setThumbPosition","trackWidth","setTrackWidth","numValue","numMin","numMax","percentage","thumbWidth","thumbWidthPercentage","adjustedPercentage","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":";;;;AAYO,MAAMA,IAA6C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAAC,IAAQC,EAAM,OAAyB,IAAI,GAC3CC,IAAQD,EAAM,OAAuB,IAAI,GAEzC,CAACE,GAAeC,CAAgB,IAAIH,EAAM,SAAS,CAAC,GACpD,CAACI,GAAYC,CAAa,IAAIL,EAAM,SAAS,CAAC;AAEpD,EAAAA,EAAM,UAAU,MAAM;AACrB,QAAI,CAACD,EAAM,WAAW,CAACE,EAAM,QAAS;AAEtC,UAAMK,IAAW,WAAW,OAAOb,CAAK,CAAC,GACnCc,IAAS,WAAW,OAAOb,CAAG,CAAC,GAC/Bc,IAAS,WAAW,OAAOb,CAAG,CAAC,GAE/Bc,KAAeH,IAAWC,MAAWC,IAASD,KAAW,KAEzDG,IAAaT,EAAM,QAAQ,sBAAwB,EAAA,OACnDG,IAAaL,EAAM,QAAQ,aAC3BY,IAAwBD,IAAaN,IAAc,KACnDQ,IAAqBH,KAAc,IAAIE,IAAuB;AAEnD,IAAAR,EAAA,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKS,CAAkB,CAAC,CAAC,GACjDP,EAAA,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKO,IAAqBD,CAAoB,CAAC,CAAC;AAAA,EACjF,GAAA,CAACjB,GAAKC,GAAKF,CAAK,CAAC;AAEd,QAAAoB,IAAiB,CAACC,MAAqB;AAC5C,QAAIA,MAAarB,EAAO;AACxB,UAAMsB,IAAe,WAAWD,EAAS,QAAQ,EAAE,CAAC;AACpD,IAAAjB,EAAgBkB,CAAY;AAAA,EAC7B;AAGC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACAnB,EAAK,YAAY;AAAA,MAClB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGpB;AAAA,YACL,KAAMC;AAAA,YACN,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,aAAa;AAAA,YACd;AAAA,YACA,MAAK;AAAA,YACL,KAAAL;AAAA,YACA,KAAAC;AAAA,YACA,MAAAC;AAAA,YACA,OAAAH;AAAA,YACA,UAAW,CAAC0B,MAAMN,EAAe,CAACM,EAAE,OAAO,KAAK;AAAA,YAChD,cAAe,CAACA,MAAMA,EAAE,gBAAgB;AAAA,YACxC,aAAc,CAACA,MAAMA,EAAE,gBAAgB;AAAA,UAAA;AAAA,QACxC;AAAA,QAEA,gBAAAD,EAAC,OAAI,EAAA,WAAU,qGAAqG,CAAA;AAAA,QAEpH,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,OAAO,GAAGd,CAAU;AAAA,YAAA;AAAA,UACrB;AAAA,QACD;AAAA,QAEA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD;AAAA,cACXG,EAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA,YACA,KAAMnB;AAAA,YACN,OAAQ;AAAA,cACP,MAAM,GAAGC,CAAa;AAAA,YACvB;AAAA,YAEA,UAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAU,+FAA+F,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/G;AAAA,IAAA;AAAA,EACD;AAEF;"}
+{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiInputRange.module.css\";\n\nexport type TUiInputRangeProps = {\n\tvalue: number;\n\tmin: string | number;\n\tmax: string | number;\n\tstep: string | number;\n\tonChangeHandler: (value: number) => void;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\n\tconst [thumbPosition, setThumbPosition] = React.useState(0);\n\tconst [trackWidth, setTrackWidth] = React.useState(0);\n\n\tReact.useEffect(() => {\n\t\tif (!track.current || !thumb.current) return;\n\n\t\tconst numValue = parseFloat(String(value));\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\n\t\tconst percentage = ((numValue - numMin) / (numMax - numMin)) * 100;\n\n\t\tconst thumbWidth = thumb.current.getBoundingClientRect().width;\n\t\tconst trackWidth = track.current.clientWidth;\n\t\tconst thumbWidthPercentage = (thumbWidth / trackWidth) * 100;\n\t\tconst adjustedPercentage = percentage * (1 - thumbWidthPercentage / 100);\n\n\t\tsetThumbPosition(Math.max(0, Math.min(100, adjustedPercentage)));\n\t\tsetTrackWidth(Math.max(0, Math.min(100, adjustedPercentage + thumbWidthPercentage)));\n\t}, [min, max, value]);\n\n\tconst handleOnChange = (newValue: number) => {\n\t\tif (newValue === value) return;\n\t\tconst preciseValue = parseFloat(newValue.toFixed(10));\n\t\tonChangeHandler(preciseValue);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ cx(\n\t\t\t\t\"relative box-content h-xl py-xxs\",\n\t\t\t\trest.disabled && \"opacity-60 cursor-default pointer-events-none\",\n\t\t\t) }\n\t\t>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tref={ track }\n\t\t\t\tclassName=\"absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t} }\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tstep={ step }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ (e) => handleOnChange(+e.target.value) }\n\t\t\t\tonTouchStart={ (e) => e.stopPropagation() }\n\t\t\t\tonTouchMove={ (e) => e.stopPropagation() }\n\t\t\t/>\n\n\t\t\t<div className=\"pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt\" />\n\n\t\t\t<div\n\t\t\t\tclassName=\"pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary\"\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${trackWidth}%`,\n\t\t\t\t} }\n\t\t\t/>\n\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\tstyles.thumb,\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"box-content\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\t\"-translate-y-1/2\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"border-primary\",\n\t\t\t\t) }\n\t\t\t\tref={ thumb }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${thumbPosition}%`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputRange","value","min","max","step","onChangeHandler","rest","track","React","thumb","thumbPosition","setThumbPosition","trackWidth","setTrackWidth","numValue","numMin","numMax","percentage","thumbWidth","thumbWidthPercentage","adjustedPercentage","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":";;;;;GAYaA,IAA6C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAAC,IAAQC,EAAM,OAAyB,IAAI,GAC3CC,IAAQD,EAAM,OAAuB,IAAI,GAEzC,CAACE,GAAeC,CAAgB,IAAIH,EAAM,SAAS,CAAC,GACpD,CAACI,GAAYC,CAAa,IAAIL,EAAM,SAAS,CAAC;AAEpD,EAAAA,EAAM,UAAU,MAAM;AACrB,QAAI,CAACD,EAAM,WAAW,CAACE,EAAM,QAAS;AAEtC,UAAMK,IAAW,WAAW,OAAOb,CAAK,CAAC,GACnCc,IAAS,WAAW,OAAOb,CAAG,CAAC,GAC/Bc,IAAS,WAAW,OAAOb,CAAG,CAAC,GAE/Bc,KAAeH,IAAWC,MAAWC,IAASD,KAAW,KAEzDG,IAAaT,EAAM,QAAQ,sBAAwB,EAAA,OACnDG,IAAaL,EAAM,QAAQ,aAC3BY,IAAwBD,IAAaN,IAAc,KACnDQ,IAAqBH,KAAc,IAAIE,IAAuB;AAEnD,IAAAR,EAAA,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKS,CAAkB,CAAC,CAAC,GACjDP,EAAA,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKO,IAAqBD,CAAoB,CAAC,CAAC;AAAA,EACjF,GAAA,CAACjB,GAAKC,GAAKF,CAAK,CAAC;AAEd,QAAAoB,IAAiB,CAACC,MAAqB;AAC5C,QAAIA,MAAarB,EAAO;AACxB,UAAMsB,IAAe,WAAWD,EAAS,QAAQ,EAAE,CAAC;AACpD,IAAAjB,EAAgBkB,CAAY;AAAA,EAC7B;AAGC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACAnB,EAAK,YAAY;AAAA,MAClB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGpB;AAAA,YACL,KAAMC;AAAA,YACN,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,aAAa;AAAA,YACd;AAAA,YACA,MAAK;AAAA,YACL,KAAAL;AAAA,YACA,KAAAC;AAAA,YACA,MAAAC;AAAA,YACA,OAAAH;AAAA,YACA,UAAW,CAAC0B,MAAMN,EAAe,CAACM,EAAE,OAAO,KAAK;AAAA,YAChD,cAAe,CAACA,MAAMA,EAAE,gBAAgB;AAAA,YACxC,aAAc,CAACA,MAAMA,EAAE,gBAAgB;AAAA,UAAA;AAAA,QACxC;AAAA,QAEA,gBAAAD,EAAC,OAAI,EAAA,WAAU,wGAAwG,CAAA;AAAA,QAEvH,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,OAAO,GAAGd,CAAU;AAAA,YAAA;AAAA,UACrB;AAAA,QACD;AAAA,QAEA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD;AAAA,cACXG,EAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA,YACA,KAAMnB;AAAA,YACN,OAAQ;AAAA,cACP,MAAM,GAAGC,CAAa;AAAA,YACvB;AAAA,YAEA,UAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAU,+FAA+F,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/G;AAAA,IAAA;AAAA,EACD;AAEF;"}

package/components/UiList/UiList.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
-import { EListItemSize, EListItemSpacing } from './_types.ts';
+import { EListItemDirection, EListItemSize, EListItemSpacing } from './_types.ts';
 interface IUiListProps {
     children?: React.ReactNode;
+    direction?: EListItemDirection;
     size?: EListItemSize;
     spacing?: EListItemSpacing;
 }

package/components/UiList/UiList.js

@@ -1,24 +1,29 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import "react";
-import { EListItemSpacing as s, EListItemSize as t } from "./_types.js";
-import r from "classnames";
-const p = {
-  [s.DEFAULT]: "gap-sm",
-  [s.COMPACT]: "gap-xxs"
+import { EListItemDirection as s, EListItemSpacing as t, EListItemSize as i } from "./_types.js";
+import l from "classnames";
+const x = {
+  [s.VERTICAL]: "flex-col",
+  [s.HORIZONTAL]: "flex-row"
 }, a = {
-  [t.SM]: "text-sm",
-  [t.MD]: "text-md"
-}, l = ({
-  children: i,
-  spacing: m = s.DEFAULT,
-  size: e = t.SM
-}) => /* @__PURE__ */ o("ul", { className: r(
+  [t.DEFAULT]: "gap-sm",
+  [t.COMPACT]: "gap-xxs"
+}, n = {
+  [i.SM]: "text-sm",
+  [i.MD]: "text-md"
+}, f = ({
+  children: e,
+  direction: o = s.VERTICAL,
+  spacing: m = t.DEFAULT,
+  size: r = i.SM
+}) => /* @__PURE__ */ c("ul", { className: l(
   "ui-list",
-  "grid",
-  p[m],
-  a[e]
-), children: i });
+  "flex",
+  x[o],
+  a[m],
+  n[r]
+), children: e });
 export {
-  l as UiList
+  f as UiList
 };
 //# sourceMappingURL=UiList.js.map

package/components/UiList/UiList.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiList.js","sources":["../../../src/components/UiList/UiList.tsx"],"sourcesContent":["import React from \"react\";\nimport { EListItemSize, EListItemSpacing } from \"./_types.ts\";\nimport cx from \"classnames\";\n\ninterface IUiListProps {\n\tchildren?: React.ReactNode\n\tsize?: EListItemSize\n\tspacing?: EListItemSpacing\n}\n\nconst spacingClasses = {\n\t[EListItemSpacing.DEFAULT]: \"gap-sm\",\n\t[EListItemSpacing.COMPACT]: \"gap-xxs\"\n};\n\nconst sizeClasses = {\n\t[EListItemSize.SM]: \"text-sm\",\n\t[EListItemSize.MD]: \"text-md\"\n};\n\nexport const UiList: React.FC<IUiListProps> = ({\n\tchildren,\n\tspacing = EListItemSpacing.DEFAULT,\n\tsize = EListItemSize.SM\n}) => {\n\treturn (\n\t\t<ul className={ cx(\n\t\t\t\"ui-list\",\n\t\t\t\"grid\",\n\t\t\tspacingClasses[spacing],\n\t\t\tsizeClasses[size],\n\t\t) }>\n\t\t\t{ children }\n\t\t</ul>\n\t);\n};\n"],"names":["spacingClasses","EListItemSpacing","sizeClasses","EListItemSize","UiList","children","spacing","size","jsx","cx"],"mappings":";;;;AAUA,MAAMA,IAAiB;AAAA,EACtB,CAACC,EAAiB,OAAO,GAAG;AAAA,EAC5B,CAACA,EAAiB,OAAO,GAAG;AAC7B,GAEMC,IAAc;AAAA,EACnB,CAACC,EAAc,EAAE,GAAG;AAAA,EACpB,CAACA,EAAc,EAAE,GAAG;AACrB,GAEaC,IAAiC,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,SAAAC,IAAUL,EAAiB;AAAA,EAC3B,MAAAM,IAAOJ,EAAc;AACtB,MAEE,gBAAAK,EAAC,QAAG,WAAYC;AAAA,EACf;AAAA,EACA;AAAA,EACAT,EAAeM,CAAO;AAAA,EACtBJ,EAAYK,CAAI;GAEd,UAAAF,EACH,CAAA;"}
+{"version":3,"file":"UiList.js","sources":["../../../src/components/UiList/UiList.tsx"],"sourcesContent":["import React from \"react\";\nimport { EListItemDirection, EListItemSize, EListItemSpacing } from \"./_types.ts\";\nimport cx from \"classnames\";\n\ninterface IUiListProps {\n\tchildren?: React.ReactNode\n\tdirection?: EListItemDirection\n\tsize?: EListItemSize\n\tspacing?: EListItemSpacing\n}\n\nconst directionClasses = {\n\t[EListItemDirection.VERTICAL]: \"flex-col\",\n\t[EListItemDirection.HORIZONTAL]: \"flex-row\"\n};\n\nconst spacingClasses = {\n\t[EListItemSpacing.DEFAULT]: \"gap-sm\",\n\t[EListItemSpacing.COMPACT]: \"gap-xxs\"\n};\n\nconst sizeClasses = {\n\t[EListItemSize.SM]: \"text-sm\",\n\t[EListItemSize.MD]: \"text-md\"\n};\n\nexport const UiList: React.FC<IUiListProps> = ({\n\tchildren,\n\tdirection = EListItemDirection.VERTICAL,\n\tspacing = EListItemSpacing.DEFAULT,\n\tsize = EListItemSize.SM\n}) => {\n\treturn (\n\t\t<ul className={ cx(\n\t\t\t\"ui-list\",\n\t\t\t\"flex\",\n\t\t\tdirectionClasses[direction],\n\t\t\tspacingClasses[spacing],\n\t\t\tsizeClasses[size],\n\t\t) }>\n\t\t\t{ children }\n\t\t</ul>\n\t);\n};\n"],"names":["directionClasses","EListItemDirection","spacingClasses","EListItemSpacing","sizeClasses","EListItemSize","UiList","children","direction","spacing","size","jsx","cx"],"mappings":";;;;AAWA,MAAMA,IAAmB;AAAA,EACxB,CAACC,EAAmB,QAAQ,GAAG;AAAA,EAC/B,CAACA,EAAmB,UAAU,GAAG;AAClC,GAEMC,IAAiB;AAAA,EACtB,CAACC,EAAiB,OAAO,GAAG;AAAA,EAC5B,CAACA,EAAiB,OAAO,GAAG;AAC7B,GAEMC,IAAc;AAAA,EACnB,CAACC,EAAc,EAAE,GAAG;AAAA,EACpB,CAACA,EAAc,EAAE,GAAG;AACrB,GAEaC,IAAiC,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,WAAAC,IAAYP,EAAmB;AAAA,EAC/B,SAAAQ,IAAUN,EAAiB;AAAA,EAC3B,MAAAO,IAAOL,EAAc;AACtB,MAEE,gBAAAM,EAAC,QAAG,WAAYC;AAAA,EACf;AAAA,EACA;AAAA,EACAZ,EAAiBQ,CAAS;AAAA,EAC1BN,EAAeO,CAAO;AAAA,EACtBL,EAAYM,CAAI;GAEd,UAAAH,EACH,CAAA;"}

package/components/UiList/_types.d.ts

@@ -1,3 +1,7 @@
+export declare enum EListItemDirection {
+    VERTICAL = "VERTICAL",
+    HORIZONTAL = "HORIZONTAL"
+}
 export declare enum EListItemSpacing {
     DEFAULT = "DEFAULT",
     COMPACT = "COMPACT"

package/components/UiList/_types.js

@@ -1,6 +1,7 @@
-var M = /* @__PURE__ */ ((r) => (r.DEFAULT = "DEFAULT", r.COMPACT = "COMPACT", r))(M || {}), A = /* @__PURE__ */ ((r) => (r.SM = "SM", r.MD = "MD", r))(A || {});
+var A = /* @__PURE__ */ ((r) => (r.VERTICAL = "VERTICAL", r.HORIZONTAL = "HORIZONTAL", r))(A || {}), T = /* @__PURE__ */ ((r) => (r.DEFAULT = "DEFAULT", r.COMPACT = "COMPACT", r))(T || {}), C = /* @__PURE__ */ ((r) => (r.SM = "SM", r.MD = "MD", r))(C || {});
 export {
-  A as EListItemSize,
-  M as EListItemSpacing
+  A as EListItemDirection,
+  C as EListItemSize,
+  T as EListItemSpacing
 };
 //# sourceMappingURL=_types.js.map

package/components/UiList/_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"_types.js","sources":["../../../src/components/UiList/_types.ts"],"sourcesContent":["export enum EListItemSpacing {\n\tDEFAULT = \"DEFAULT\",\n\tCOMPACT = \"COMPACT\"\n}\n\nexport enum EListItemSize {\n\tSM = \"SM\",\n\tMD = \"MD\"\n}\n"],"names":["EListItemSpacing","EListItemSize"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,UAAU,WAFCA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACXA,EAAA,KAAK,MACLA,EAAA,KAAK,MAFMA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiList/_types.ts"],"sourcesContent":["export enum EListItemDirection {\n\tVERTICAL = \"VERTICAL\",\n\tHORIZONTAL = \"HORIZONTAL\"\n}\n\nexport enum EListItemSpacing {\n\tDEFAULT = \"DEFAULT\",\n\tCOMPACT = \"COMPACT\"\n}\n\nexport enum EListItemSize {\n\tSM = \"SM\",\n\tMD = \"MD\"\n}\n"],"names":["EListItemDirection","EListItemSpacing","EListItemSize"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,WAAW,YACXA,EAAA,aAAa,cAFFA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,UAAU,WAFCA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACXA,EAAA,KAAK,MACLA,EAAA,KAAK,MAFMA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiNotificationBadge/UiNotificationBadge.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-import { EBadgeOffset } from './_types';
-import { EColors } from '../UiTypography';
+import { EBadgeOffset, EBadgeSizes, EBadgeTypes } from './_types';
 type UiNotificationBadge = {
     offset?: EBadgeOffset;
     children: React.ReactNode;
-    color?: EColors;
+    kind?: EBadgeTypes;
+    size?: EBadgeSizes;
 };
 export declare const UiNotificationBadge: React.FC<UiNotificationBadge>;
 export {};