bonkers-ui 2.0.1 → 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.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { EInputKind } from './_types';
+export type TUiInputBaseProps = {
+    id: string;
+    postIcon?: React.ReactNode;
+    preIcon?: React.ReactNode;
+    kind?: EInputKind;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const UiInputBase: React.FC<TUiInputBaseProps>;

package/components/UiInput/UiInput.base.js

@@ -0,0 +1,43 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import "react";
+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-600 hover:border-secondary-alt-700",
+    [e.ERROR]: "border-error",
+    [e.SUCCESS]: "border-primary-600"
+  };
+  return /* @__PURE__ */ s(
+    n,
+    {
+      tag: "label",
+      htmlFor: r.id,
+      className: t(
+        "ui-input-wrapper",
+        "flex flex-row items-center gap-sm rounded-xl border p-sm",
+        l && d[l],
+        {
+          "bg-white": !r.disabled,
+          "border-secondary-alt-300 bg-secondary-alt-200": r.disabled
+        }
+      ),
+      children: [
+        a || null,
+        /* @__PURE__ */ i(
+          "input",
+          {
+            className: t("border-0 flex-1 bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full"),
+            ...r
+          }
+        ),
+        o || null
+      ]
+    }
+  );
+};
+export {
+  x as UiInputBase
+};
+//# sourceMappingURL=UiInput.base.js.map

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

@@ -0,0 +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-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/UiInput/UiInputText.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { EInputKind } from './_types.ts';
+type TUiInputTextProps = {
+    id: string;
+    kind?: EInputKind;
+    statusMessage?: string;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    infoComponent?: React.ReactNode;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const UiInputText: React.FC<TUiInputTextProps>;
+export {};

package/components/UiInput/UiInputText.js

@@ -0,0 +1,39 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import "react";
+import { UiInputBase as l } from "./UiInput.base.js";
+import { UiInputTitled as u } from "./UiInputTitled.js";
+import { EInputKind as s } from "./_types.js";
+import { UiTypography as d } from "../UiTypography/UiTypography.js";
+import { ETypographySizes as f } from "../UiTypography/_types.js";
+import { EColors as i } from "../../_types/colors.js";
+import x from "classnames";
+const j = ({
+  kind: o,
+  title: m,
+  infoComponent: p,
+  subtitle: a,
+  statusMessage: t,
+  ...e
+}) => /* @__PURE__ */ n(u, { title: m, subtitle: a, infoComponent: p, children: [
+  t ? /* @__PURE__ */ r(
+    d,
+    {
+      className: x(
+        "mb-xxs",
+        "transition-all duration-300 ease-in-out",
+        "max-h-0 opacity-0 overflow-hidden",
+        "data-[status=true]:max-h-lg data-[status=true]:opacity-100"
+      ),
+      lineHeight: !0,
+      color: o === s.ERROR ? i.ERROR : i.PRIMARY,
+      size: f.SM,
+      "data-status": !!t,
+      children: t
+    }
+  ) : null,
+  /* @__PURE__ */ r(l, { kind: o, ...e })
+] });
+export {
+  j as UiInputText
+};
+//# sourceMappingURL=UiInputText.js.map

package/components/UiInput/UiInputText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputText: React.FC<TUiInputTextProps> = ({\n\tkind,\n\ttitle,\n\tinfoComponent,\n\tsubtitle,\n\tstatusMessage,\n\t...rest\n}) => {\n\treturn (\n\t\t<UiInputTitled title={ title } subtitle={ subtitle } infoComponent={ infoComponent } >\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"mb-xxs\",\n\t\t\t\t\t\t\t\"transition-all duration-300 ease-in-out\",\n\t\t\t\t\t\t\t\"max-h-0 opacity-0 overflow-hidden\",\n\t\t\t\t\t\t\t\"data-[status=true]:max-h-lg data-[status=true]:opacity-100\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tkind === EInputKind.ERROR ? EColors.ERROR : EColors.PRIMARY\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\tdata-status={ !!statusMessage }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\t\t\t<UiInputBase kind={ kind } { ...rest }/>\n\t\t</UiInputTitled>\n\t);\n};\n"],"names":["UiInputText","kind","title","infoComponent","subtitle","statusMessage","rest","jsxs","UiInputTitled","jsx","UiTypography","cx","EInputKind","EColors","ETypographySizes","UiInputBase"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAA2C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAEG,gBAAAC,EAAAC,GAAA,EAAc,OAAAN,GAAgB,UAAAE,GAAsB,eAAAD,GAClD,UAAA;AAAA,EAEAE,IAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,YAAU;AAAA,MACV,OACCV,MAASW,EAAW,QAAQC,EAAQ,QAAQA,EAAQ;AAAA,MAErD,MAAOC,EAAiB;AAAA,MACxB,eAAc,CAAC,CAACT;AAAA,MAEd,UAAAA;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,EACF,gBAAAI,EAAAM,GAAA,EAAY,MAAAd,GAAgB,GAAGK,EAAM,CAAA;AAAA,GACvC;"}

package/components/UiInput/UiInputTitled.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+type TUiInputTitledProps = {
+    children: React.ReactNode;
+    infoComponent?: React.ReactNode;
+    statusMessage?: string;
+    subtitle?: React.ReactNode;
+    title?: React.ReactNode;
+};
+export declare const UiInputTitled: React.FC<TUiInputTitledProps>;
+export {};

package/components/UiInput/UiInputTitled.js

@@ -0,0 +1,36 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import "react";
+import { UiTypography as l } from "../UiTypography/UiTypography.js";
+import { ETypographySizes as e } from "../UiTypography/_types.js";
+import { EColors as p } from "../../_types/colors.js";
+const g = ({
+  children: s,
+  infoComponent: m,
+  title: i,
+  subtitle: o
+}) => /* @__PURE__ */ t("div", { className: "grid w-full grid-flow-row gap-xxxs", children: [
+  i ? /* @__PURE__ */ r(
+    l,
+    {
+      size: e.MD,
+      color: p.SECONDARY,
+      lineHeight: !0,
+      children: i
+    }
+  ) : null,
+  m,
+  o ? /* @__PURE__ */ r(
+    l,
+    {
+      lineHeight: !0,
+      color: p.SECONDARY_ALT_600,
+      size: e.SM,
+      children: o
+    }
+  ) : null,
+  /* @__PURE__ */ r("div", { className: "relative w-full", children: s })
+] });
+export {
+  g as UiInputTitled
+};
+//# sourceMappingURL=UiInputTitled.js.map

package/components/UiInput/UiInputTitled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiInputTitled.js","sources":["../../../src/components/UiInput/UiInputTitled.tsx"],"sourcesContent":["import React from \"react\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography\";\n\ntype TUiInputTitledProps = {\n\tchildren: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n\tstatusMessage?: string;\n\tsubtitle?: React.ReactNode\n\ttitle?: React.ReactNode;\n};\n\nexport const UiInputTitled: React.FC<TUiInputTitledProps> = ({\n\tchildren,\n\tinfoComponent,\n\ttitle,\n\tsubtitle\n}) => {\n\n\treturn (\n\t\t<div className=\"grid w-full grid-flow-row gap-xxxs\">\n\t\t\t{ title\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tsize={ ETypographySizes.MD }\n\t\t\t\t\t\tcolor={ EColors.SECONDARY }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\t\t\t{ infoComponent }\n\t\t\t{ subtitle\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={ EColors.SECONDARY_ALT_600 }\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ subtitle }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\t\t\t<div className=\"relative w-full\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputTitled","children","infoComponent","title","subtitle","jsxs","jsx","UiTypography","ETypographySizes","EColors"],"mappings":";;;;;AAWO,MAAMA,IAA+C,CAAC;AAAA,EAC5D,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACD,MAGE,gBAAAC,EAAC,OAAI,EAAA,WAAU,sCACZ,UAAA;AAAA,EAEAF,IAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAOC,EAAiB;AAAA,MACxB,OAAQC,EAAQ;AAAA,MAChB,YAAU;AAAA,MAER,UAAAN;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,EACDD;AAAA,EACAE,IAEA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,YAAU;AAAA,MACV,OAAQE,EAAQ;AAAA,MAChB,MAAOD,EAAiB;AAAA,MAEtB,UAAAJ;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,EACF,gBAAAE,EAAA,OAAA,EAAI,WAAU,mBACZ,UAAAL,EACH,CAAA;AAAA,GACD;"}

package/components/UiInput/_types.d.ts

@@ -0,0 +1,5 @@
+export declare enum EInputKind {
+    DEFAULT = "DEFAULT",
+    ERROR = "ERROR",
+    SUCCESS = "SUCCESS"
+}

package/components/UiInput/_types.js

@@ -0,0 +1,5 @@
+var S = /* @__PURE__ */ ((R) => (R.DEFAULT = "DEFAULT", R.ERROR = "ERROR", R.SUCCESS = "SUCCESS", R))(S || {});
+export {
+  S as EInputKind
+};
+//# sourceMappingURL=_types.js.map

package/components/UiInput/_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiInput/_types.ts"],"sourcesContent":["export enum EInputKind {\n\tDEFAULT = \"DEFAULT\",\n\tERROR = \"ERROR\",\n\tSUCCESS = \"SUCCESS\",\n}\n"],"names":["EInputKind"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,UAAU,WAHCA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiInput/index.d.ts

@@ -0,0 +1,4 @@
+export { UiInputBase } from './UiInput.base.tsx';
+export { UiInputTitled } from './UiInputTitled.tsx';
+export { UiInputText } from './UiInputText.tsx';
+export { EInputKind } from './_types.ts';

package/components/UiInput/index.js

@@ -0,0 +1,11 @@
+import { UiInputBase as p } from "./UiInput.base.js";
+import { UiInputTitled as e } from "./UiInputTitled.js";
+import { UiInputText as n } from "./UiInputText.js";
+import { EInputKind as f } from "./_types.js";
+export {
+  f as EInputKind,
+  p as UiInputBase,
+  n as UiInputText,
+  e as UiInputTitled
+};
+//# sourceMappingURL=index.js.map

package/components/UiInput/index.js.map

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

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;
 }