bonkers-ui 2.0.2 → 2.0.4

package/components/UiProgress/UiProgress.js

@@ -1,22 +1,24 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import "react";
 import o from "classnames";
-import { UiTypography as m } from "../UiTypography/UiTypography.js";
-import { ETypographySizes as p, ETextWeight as d } from "../UiTypography/_types.js";
-import { EColors as f } from "../../_types/colors.js";
-const y = ({
+import { UiTypography as p } from "../UiTypography/UiTypography.js";
+import { ETextWeight as d, ETypographySizes as f } from "../UiTypography/_types.js";
+import { EColors as h } from "../../_types/colors.js";
+const b = ({
   progressText: i,
   max: e,
   min: l,
-  current: s
+  current: s,
+  className: t
 }) => {
-  const t = (s - l) / (e - l) * 100;
-  return /* @__PURE__ */ a("div", { className: o(
-    "ui-progress"
+  const a = (s - l) / (e - l) * 100;
+  return /* @__PURE__ */ m("div", { className: o(
+    "ui-progress",
+    t
   ), children: [
     /* @__PURE__ */ r("div", { className: o(
       "relative",
-      "h-xs ",
+      "h-xxs ",
       "w-full",
       "overflow-hidden",
       "rounded-3xl",
@@ -38,15 +40,15 @@ const y = ({
           "duration-300"
         ),
         style: {
-          width: `${t}%`
+          width: `${a}%`
         }
       }
     ) }),
     i && /* @__PURE__ */ r(
-      m,
+      p,
       {
-        color: f.PRIMARY_700,
-        size: p.SM,
+        color: h.PRIMARY_700,
+        size: f.SM,
         weight: d.SEMI_BOLD,
         children: i
       }
@@ -54,6 +56,6 @@ const y = ({
   ] });
 };
 export {
-  y as UiProgress
+  b as UiProgress
 };
 //# sourceMappingURL=UiProgress.js.map

package/components/UiProgress/UiProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiProgress.js","sources":["../../../src/components/UiProgress/UiProgress.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EColors, ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\n\ninterface IUiProgress {\n\tmin: number\n\tmax: number\n\tcurrent: number\n\tprogressText?: string\n\n}\n\nexport const UiProgress: React.FC<IUiProgress> = ({\n\tprogressText,\n\tmax,\n\tmin,\n\tcurrent\n\n}) => {\n\tconst filler = ((current - min) / (max - min)) * 100;\n\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-progress\"\n\t\t) }>\n\t\t\t<div className={ cx(\n\t\t\t\t\"relative\",\n\t\t\t\t\"h-xs \",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"overflow-hidden\",\n\t\t\t\t\"rounded-3xl\",\n\t\t\t\t\"bg-primary-50\",\n\t\t\t\t\"mb-xxs\"\n\t\t\t) } >\n\t\t\t\t<div className={ cx(\n\t\t\t\t\t\"ui-progress__bar-fill\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-0\",\n\t\t\t\t\t\"top-0\",\n\t\t\t\t\t\"z-10\",\n\t\t\t\t\t\"h-full\",\n\t\t\t\t\t\"rounded-2xl\",\n\t\t\t\t\t\"bg-primary-700\",\n\t\t\t\t\t\"transition-all\",\n\t\t\t\t\t\"duration-300\"\n\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${filler}%`\n\t\t\t\t} }>\n\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ progressText && (\n\t\t\t\t<UiTypography\n\t\t\t\t\tcolor={ EColors.PRIMARY_700 }\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tweight={ ETextWeight.SEMI_BOLD }\n\t\t\t\t>\n\t\t\t\t\t{ progressText }\n\t\t\t\t</UiTypography>\n\t\t\t) }\n\n\t\t</div>\n\n\t);\n};\n"],"names":["UiProgress","progressText","max","min","current","filler","jsxs","cx","jsx","UiTypography","EColors","ETypographySizes","ETextWeight"],"mappings":";;;;;;AAYO,MAAMA,IAAoC,CAAC;AAAA,EACjD,cAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAED,MAAM;AACL,QAAMC,KAAWD,IAAUD,MAAQD,IAAMC,KAAQ;AAGhD,SAAA,gBAAAG,EAAC,SAAI,WAAYC;AAAA,IAChB;AAAA,EAEA,GAAA,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAYD;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAEA,GAAA,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAYD;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAED;AAAA,QACA,OAAQ;AAAA,UACP,OAAO,GAAGF,CAAM;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA,GAGD;AAAA,IACEJ,KACD,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAQC,EAAQ;AAAA,QAChB,MAAOC,EAAiB;AAAA,QACxB,QAASC,EAAY;AAAA,QAEnB,UAAAX;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGF;AAGF;"}
+{"version":3,"file":"UiProgress.js","sources":["../../../src/components/UiProgress/UiProgress.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EColors, ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\n\ninterface IUiProgress {\n\tmin: number\n\tmax: number\n\tcurrent: number\n\tprogressText?: string\n\tclassName?: string\n}\n\nexport const UiProgress: React.FC<IUiProgress> = ({\n\tprogressText,\n\tmax,\n\tmin,\n\tcurrent,\n\tclassName\n\n}) => {\n\tconst filler = ((current - min) / (max - min)) * 100;\n\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-progress\",\n\t\t\tclassName\n\t\t) }>\n\t\t\t<div className={ cx(\n\t\t\t\t\"relative\",\n\t\t\t\t\"h-xxs \",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"overflow-hidden\",\n\t\t\t\t\"rounded-3xl\",\n\t\t\t\t\"bg-primary-50\",\n\t\t\t\t\"mb-xxs\"\n\t\t\t) } >\n\t\t\t\t<div className={ cx(\n\t\t\t\t\t\"ui-progress__bar-fill\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-0\",\n\t\t\t\t\t\"top-0\",\n\t\t\t\t\t\"z-10\",\n\t\t\t\t\t\"h-full\",\n\t\t\t\t\t\"rounded-2xl\",\n\t\t\t\t\t\"bg-primary-700\",\n\t\t\t\t\t\"transition-all\",\n\t\t\t\t\t\"duration-300\"\n\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${filler}%`\n\t\t\t\t} }>\n\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ progressText && (\n\t\t\t\t<UiTypography\n\t\t\t\t\tcolor={ EColors.PRIMARY_700 }\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tweight={ ETextWeight.SEMI_BOLD }\n\t\t\t\t>\n\t\t\t\t\t{ progressText }\n\t\t\t\t</UiTypography>\n\t\t\t) }\n\n\t\t</div>\n\n\t);\n};\n"],"names":["UiProgress","progressText","max","min","current","className","filler","jsxs","cx","jsx","UiTypography","EColors","ETypographySizes","ETextWeight"],"mappings":";;;;;;AAYO,MAAMA,IAAoC,CAAC;AAAA,EACjD,cAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAED,MAAM;AACL,QAAMC,KAAWF,IAAUD,MAAQD,IAAMC,KAAQ;AAGhD,SAAA,gBAAAI,EAAC,SAAI,WAAYC;AAAA,IAChB;AAAA,IACAH;AAAA,EAEA,GAAA,UAAA;AAAA,IAAA,gBAAAI,EAAC,SAAI,WAAYD;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAEA,GAAA,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAYD;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAED;AAAA,QACA,OAAQ;AAAA,UACP,OAAO,GAAGF,CAAM;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA,GAGD;AAAA,IACEL,KACD,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAQC,EAAQ;AAAA,QAChB,MAAOC,EAAiB;AAAA,QACxB,QAASC,EAAY;AAAA,QAEnB,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGF;AAGF;"}

package/components/UiRadio/UiRadio.js

@@ -1,9 +1,11 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
 import "react";
 import a from "classnames";
-import d from "./UiRadio.module.css.js";
 import { EJustify as e } from "../../_types/align.js";
-const y = {
+import '../../assets/UiRadio.css';const b = "_UiRadio__custom_wei69_1", R = "_UiRadio__dot_wei69_4", d = {
+  UiRadio__custom: b,
+  UiRadio__dot: R
+}, g = {
   [e.START]: "justify-start",
   [e.END]: "justify-end",
   [e.CENTER]: "justify-center",
@@ -18,18 +20,20 @@ const y = {
   disabled: r = !1,
   onChange: t,
   checked: p = !1,
-  children: i
+  children: i,
+  className: u,
+  tabIndex: m
 }) => {
-  const u = (f) => {
+  const _ = (f) => {
     !r && t && t(f.target.value);
   };
-  return /* @__PURE__ */ m("label", { className: a(
+  return /* @__PURE__ */ y("label", { className: a(
     "UiRadio",
     "group",
     "grid",
     "grid-flow-col",
     "cursor-pointer",
-    y[l],
+    g[l],
     {
       "pointer-events-none": r,
       "items-center gap-xxs": i
@@ -44,8 +48,9 @@ const y = {
         value: s,
         disabled: r,
         checked: p,
-        onChange: u,
-        className: "peer absolute appearance-none"
+        onChange: _,
+        className: "peer absolute appearance-none",
+        tabIndex: m
       }
     ),
     /* @__PURE__ */ o("span", { className: a(
@@ -62,11 +67,12 @@ const y = {
       "group-focus:border-secondary-alt-700",
       "peer-checked:border-2",
       "peer-checked:border-primary",
-      "peer-checked:hover:border-primary-600",
-      "peer-checked:active:border-primary-800",
+      "hover:peer-checked:border-primary-600",
+      "active:peer-checked:border-primary-800",
       "peer-focus:shadow-border-primary",
       "peer-disabled:border-secondary-alt-400",
-      "peer-disabled:bg-secondary-alt-200"
+      "peer-disabled:bg-secondary-alt-200",
+      u
     ), children: /* @__PURE__ */ o("span", { className: a(
       d.UiRadio__dot,
       "absolute",
@@ -75,7 +81,7 @@ const y = {
       "block",
       "size-xxs",
       "rounded-full",
-      "bg-primary	"
+      "bg-primary"
     ) }) }),
     i
   ] });

package/components/UiRadio/UiRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiRadio.js","sources":["../../../src/components/UiRadio/UiRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiRadio.module.css\";\nimport { EJustify } from \"../../_types/align\";\n\nexport type TUiRadioProps = {\n\tchildren?: React.ReactNode;\n\tname: string;\n\tvalue: string;\n\tinvertOrder?: boolean;\n\tjustify?: EJustify;\n\tdisabled?: boolean;\n\tchecked?: boolean;\n\tonChange: (value: string) => void;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\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\nexport const UiRadio: React.FC<TUiRadioProps> = ({\n\tname,\n\tvalue,\n\tinvertOrder = false,\n\tjustify = EJustify.START,\n\tdisabled = false,\n\tonChange,\n\tchecked = false,\n\tchildren\n}) => {\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (!disabled && onChange) {\n\t\t\tonChange(event.target.value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<label className={\n\t\t\tcx(\"UiRadio\",\n\t\t\t\t\"group\",\n\t\t\t\t\"grid\",\n\t\t\t\t\"grid-flow-col\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\tjustificationClasses[justify],\n\t\t\t\t{\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t\t\"items-center gap-xxs\": children\n\t\t\t\t}\n\t\t\t) }>\n\t\t\t<input\n\t\t\t\tid={ value }\n\t\t\t\tname={ name.toString() }\n\t\t\t\ttype=\"radio\"\n\t\t\t\tvalue={ value }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tclassName=\"peer absolute appearance-none\"\n\t\t\t/>\n\t\t\t<span className={ cx(\n\t\t\t\tstyles.UiRadio__custom,\n\t\t\t\tinvertOrder && \"order-last\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"block\",\n\t\t\t\t\"size-md\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-secondary-alt\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"group-hover:border-secondary-alt-700\",\n\t\t\t\t\"group-focus:border-secondary-alt-700\",\n\t\t\t\t\"peer-checked:border-2\",\n\t\t\t\t\"peer-checked:border-primary\",\n\t\t\t\t\"peer-checked:hover:border-primary-600\",\n\t\t\t\t\"peer-checked:active:border-primary-800\",\n\t\t\t\t\"peer-focus:shadow-border-primary\",\n\t\t\t\t\"peer-disabled:border-secondary-alt-400\",\n\t\t\t\t\"peer-disabled:bg-secondary-alt-200\"\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\tstyles.UiRadio__dot,\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-2/4\",\n\t\t\t\t\t\"top-2/4\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"size-xxs\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-primary\t\"\n\t\t\t\t) } />\n\t\t\t</span>\n\t\t\t{ children }\n\t\t</label>\n\t);\n};\n"],"names":["justificationClasses","EJustify","UiRadio","name","value","invertOrder","justify","disabled","onChange","checked","children","handleChange","event","jsxs","cx","jsx","styles"],"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,GAEaC,IAAmC,CAAC;AAAA,EAChD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAUL,EAAS;AAAA,EACnB,UAAAM,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AACD,MAAM;AAEC,QAAAC,IAAe,CAACC,MAA+C;AAChE,IAAA,CAACL,KAAYC,KACPA,EAAAI,EAAM,OAAO,KAAK;AAAA,EAE7B;AAGC,SAAA,gBAAAC,EAAC,WAAM,WACNC;AAAA,IAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAd,EAAqBM,CAAO;AAAA,IAC5B;AAAA,MACC,uBAAuBC;AAAA,MACvB,wBAAwBG;AAAA,IAAA;AAAA,EAG1B,GAAA,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,IAAKX;AAAA,QACL,MAAOD,EAAK,SAAS;AAAA,QACrB,MAAK;AAAA,QACL,OAAAC;AAAA,QACA,UAAAG;AAAA,QACA,SAAAE;AAAA,QACA,UAAWE;AAAA,QACX,WAAU;AAAA,MAAA;AAAA,IACX;AAAA,IACA,gBAAAI,EAAC,UAAK,WAAYD;AAAA,MACjBE,EAAO;AAAA,MACPX,KAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,GACC,UAAC,gBAAAU,EAAA,QAAA,EAAK,WAAYD;AAAA,MACjBE,EAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACG,EACL,CAAA;AAAA,IACEN;AAAA,EAAA,GACH;AAEF;"}
+{"version":3,"file":"UiRadio.js","sources":["../../../src/components/UiRadio/UiRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiRadio.module.css\";\nimport { EJustify } from \"../../_types/align\";\n\nexport type TUiRadioProps = {\n\tchildren?: React.ReactNode;\n\tname: string;\n\tvalue: string;\n\tinvertOrder?: boolean;\n\tjustify?: EJustify;\n\tdisabled?: boolean;\n\tchecked?: boolean;\n\tonChange: (value: string) => void;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\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\nexport const UiRadio: React.FC<TUiRadioProps> = ({\n\tname,\n\tvalue,\n\tinvertOrder = false,\n\tjustify = EJustify.START,\n\tdisabled = false,\n\tonChange,\n\tchecked = false,\n\tchildren,\n\tclassName,\n\ttabIndex\n}) => {\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (!disabled && onChange) {\n\t\t\tonChange(event.target.value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<label className={\n\t\t\tcx(\"UiRadio\",\n\t\t\t\t\"group\",\n\t\t\t\t\"grid\",\n\t\t\t\t\"grid-flow-col\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\tjustificationClasses[justify],\n\t\t\t\t{\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t\t\"items-center gap-xxs\": children\n\t\t\t\t}\n\t\t\t) }>\n\t\t\t<input\n\t\t\t\tid={ value }\n\t\t\t\tname={ name.toString() }\n\t\t\t\ttype=\"radio\"\n\t\t\t\tvalue={ value }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tclassName=\"peer absolute appearance-none\"\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t/>\n\t\t\t<span className={ cx(\n\t\t\t\tstyles.UiRadio__custom,\n\t\t\t\tinvertOrder && \"order-last\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"block\",\n\t\t\t\t\"size-md\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-secondary-alt\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"group-hover:border-secondary-alt-700\",\n\t\t\t\t\"group-focus:border-secondary-alt-700\",\n\t\t\t\t\"peer-checked:border-2\",\n\t\t\t\t\"peer-checked:border-primary\",\n\t\t\t\t\"hover:peer-checked:border-primary-600\",\n\t\t\t\t\"active:peer-checked:border-primary-800\",\n\t\t\t\t\"peer-focus:shadow-border-primary\",\n\t\t\t\t\"peer-disabled:border-secondary-alt-400\",\n\t\t\t\t\"peer-disabled:bg-secondary-alt-200\",\n\t\t\t\tclassName,\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\tstyles.UiRadio__dot,\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-2/4\",\n\t\t\t\t\t\"top-2/4\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"size-xxs\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-primary\",\n\t\t\t\t) } />\n\t\t\t</span>\n\t\t\t{ children }\n\t\t</label>\n\t);\n};\n"],"names":["justificationClasses","EJustify","UiRadio","name","value","invertOrder","justify","disabled","onChange","checked","children","className","tabIndex","handleChange","event","jsxs","cx","jsx","styles"],"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,GAEaC,IAAmC,CAAC;AAAA,EAChD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAUL,EAAS;AAAA,EACnB,UAAAM,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACD,MAAM;AAEC,QAAAC,IAAe,CAACC,MAA+C;AAChE,IAAA,CAACP,KAAYC,KACPA,EAAAM,EAAM,OAAO,KAAK;AAAA,EAE7B;AAGC,SAAA,gBAAAC,EAAC,WAAM,WACNC;AAAA,IAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAhB,EAAqBM,CAAO;AAAA,IAC5B;AAAA,MACC,uBAAuBC;AAAA,MACvB,wBAAwBG;AAAA,IAAA;AAAA,EAG1B,GAAA,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,IAAKb;AAAA,QACL,MAAOD,EAAK,SAAS;AAAA,QACrB,MAAK;AAAA,QACL,OAAAC;AAAA,QACA,UAAAG;AAAA,QACA,SAAAE;AAAA,QACA,UAAWI;AAAA,QACX,WAAU;AAAA,QACV,UAAAD;AAAA,MAAA;AAAA,IACD;AAAA,IACA,gBAAAK,EAAC,UAAK,WAAYD;AAAA,MACjBE,EAAO;AAAA,MACPb,KAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAM;AAAA,IACD,GACC,UAAC,gBAAAM,EAAA,QAAA,EAAK,WAAYD;AAAA,MACjBE,EAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACG,EACL,CAAA;AAAA,IACER;AAAA,EAAA,GACH;AAEF;"}

package/components/UiRadioFancy/UiRadioFancy.d.ts

@@ -1,10 +1,15 @@
 import { default as React } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-interface IUiRadioFancy {
+import { ERadioTypes } from './_types';
+export type TUiRadioFancy = {
     children: React.ReactNode;
     icon?: IconProp;
     disabled?: boolean;
+    active?: boolean;
     subHeader?: string;
-}
-export declare const UiRadioFancy: React.FC<IUiRadioFancy>;
-export {};
+    className?: string;
+    radioType?: ERadioTypes;
+    value: string;
+    onChange: (value: string) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "checked" | "value" | "name">;
+export declare const UiRadioFancy: React.FC<TUiRadioFancy>;

package/components/UiRadioFancy/UiRadioFancy.js

@@ -1,46 +1,58 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
 import "react";
-import a from "classnames";
-import { UiIcon as n } from "../UiIcon/UiIcon.js";
-import { ESize as l } from "../../_types/sizing.js";
+import t from "classnames";
+import { UiIcon as f } from "../UiIcon/UiIcon.js";
+import { ESize as u } from "../../_types/sizing.js";
 import "@fortawesome/fontawesome-svg-core";
-const u = ({
-  children: t,
-  icon: i,
+import { ERadioTypes as a } from "./_types.js";
+const h = {
+  [a.DEFAULT]: "items-center",
+  [a.COMPACT]: "items-start flex-col"
+}, w = ({
+  children: i,
+  icon: s,
   disabled: e,
-  subHeader: s
-}) => /* @__PURE__ */ o("label", { className: a(
+  subHeader: n,
+  active: c,
+  radioType: l = a.DEFAULT,
+  value: d,
+  onChange: p,
+  className: m
+}) => /* @__PURE__ */ o("label", { className: t(
   "ui-radio-fancy",
   "relative",
   {
     "pointer-events-none": e
-  }
+  },
+  m
 ), children: [
-  /* @__PURE__ */ r("input", { className: "group peer absolute appearance-none", type: "radio" }),
-  /* @__PURE__ */ o("div", { className: a(
+  /* @__PURE__ */ r("input", { className: "group peer absolute appearance-none", type: "radio", checked: c, onChange: () => p(d) }),
+  /* @__PURE__ */ o("div", { className: t(
     "box-border",
-    "size-full",
     "cursor-pointer",
     "rounded-lg",
-    "border-2",
+    "border",
     "bg-white",
     "p-sm",
-    "hover:border-primary-700",
-    "peer-focus:shadow-border-primary",
-    "peer-active:bg-secondary-alt-200",
+    "hover:border-secondary-alt-700",
+    "peer-focus:outline ",
+    "peer-focus:outline-4",
+    "peer-focus:outline-primary-300",
+    "peer-checked:shadow-border-primary-600",
+    "peer-checked:border-0",
+    "active:peer-checked:bg-secondary-alt-200",
+    "hover:peer-checked:shadow-border-primary-700",
     "flex",
-    "items-center",
     "gap-sm",
     "text-sm",
-    {
-      "border-secondary-alt-400": e,
-      "border-primary-600": !e
-    }
+    c ? "peer-focus:outline-offset-2" : "peer-focus:outline-offset-0",
+    e ? "border-secondary-alt-400 text-secondary-alt-500 peer-checked:shadow-border-primary-disabled" : "border-secondary-alt-600",
+    h[l]
   ), children: [
     /* @__PURE__ */ r(
       "div",
       {
-        className: a(
+        className: t(
           "relative",
           "grid",
           "size-fit",
@@ -53,22 +65,22 @@ const u = ({
             "bg-primary": !e
           }
         ),
-        children: i ? /* @__PURE__ */ r(
-          n,
+        children: s ? /* @__PURE__ */ r(
+          f,
           {
-            name: i,
-            size: l.SM
+            name: s,
+            size: u.SM
           }
         ) : null
       }
     ),
     /* @__PURE__ */ o("div", { className: "flex flex-col", children: [
-      t,
-      /* @__PURE__ */ r("div", { className: "text-xs font-normal text-secondary-alt-400", children: s })
+      i,
+      /* @__PURE__ */ r("div", { className: "text-xs font-normal text-secondary-alt-400", children: n })
     ] })
   ] })
 ] });
 export {
-  u as UiRadioFancy
+  w as UiRadioFancy
 };
 //# sourceMappingURL=UiRadioFancy.js.map

package/components/UiRadioFancy/UiRadioFancy.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiRadioFancy.js","sources":["../../../src/components/UiRadioFancy/UiRadioFancy.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiIcon } from \"../UiIcon\";\nimport { ESize } from \"../../_types/sizing\";\nimport { type IconProp } from \"@fortawesome/fontawesome-svg-core\";\n\ninterface IUiRadioFancy {\n\tchildren: React.ReactNode\n\ticon?: IconProp\n\tdisabled?: boolean;\n\tsubHeader?: string;\n\n}\n\nexport const UiRadioFancy: React.FC<IUiRadioFancy> = ({\n\tchildren,\n\ticon,\n\tdisabled,\n\tsubHeader\n}) => {\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-radio-fancy\",\n\t\t\t\"relative\",\n\t\t\t{\n\t\t\t\t\"pointer-events-none\": disabled\n\t\t\t}\n\t\t) }>\n\t\t\t<input className=\"group peer absolute appearance-none\" type=\"radio\"/>\n\n\t\t\t<div className={ cx(\n\t\t\t\t\"box-border\",\n\t\t\t\t\"size-full\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"rounded-lg\",\n\t\t\t\t\"border-2\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"hover:border-primary-700\",\n\t\t\t\t\"peer-focus:shadow-border-primary\",\n\t\t\t\t\"peer-active:bg-secondary-alt-200\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"text-sm\",\n\t\t\t\t{\n\t\t\t\t\t\"border-secondary-alt-400\": disabled,\n\t\t\t\t\t\"border-primary-600\": !disabled\n\t\t\t\t}\n\n\t\t\t) }>\n\t\t\t\t<div className={ cx(\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"grid\",\n\t\t\t\t\t\"size-fit\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"place-items-center\",\n\t\t\t\t\t\"text-white\",\n\t\t\t\t\t\"p-xxs\",\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-primary-300\": disabled,\n\t\t\t\t\t\t\"bg-primary\": !disabled\n\t\t\t\t\t}\n\n\t\t\t\t) }\n\t\t\t\t>\n\n\t\t\t\t\t{\n\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t? <UiIcon\n\t\t\t\t\t\t\t\tname={ icon }\n\t\t\t\t\t\t\t\tsize={ ESize.SM }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t: null\n\t\t\t\t\t}\n\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t{ children }\n\t\t\t\t\t<div className=\"text-xs font-normal text-secondary-alt-400\">{ subHeader }</div>\n\t\t\t\t</div>\n\n\t\t\t</div>\n\n\t\t</label>\n\n\t);\n};\n"],"names":["UiRadioFancy","children","icon","disabled","subHeader","jsxs","cx","jsx","UiIcon","ESize"],"mappings":";;;;;;AAcO,MAAMA,IAAwC,CAAC;AAAA,EACrD,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACD,MAEE,gBAAAC,EAAC,WAAM,WAAYC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,IACC,uBAAuBH;AAAA,EAAA;AAGxB,GAAA,UAAA;AAAA,EAAA,gBAAAI,EAAC,SAAM,EAAA,WAAU,uCAAsC,MAAK,SAAO;AAAA,EAEnE,gBAAAF,EAAC,SAAI,WAAYC;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACC,4BAA4BH;AAAA,MAC5B,sBAAsB,CAACA;AAAA,IAAA;AAAA,EAIxB,GAAA,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAYD;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACC,kBAAkBH;AAAA,YAClB,cAAc,CAACA;AAAA,UAAA;AAAA,QAGjB;AAAA,QAIE,UACGD,IAAA,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACF,MAAON;AAAA,YACP,MAAOO,EAAM;AAAA,UAAA;AAAA,QAAA,IAEZ;AAAA,MAAA;AAAA,IAGL;AAAA,IAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,iBACZ,UAAA;AAAA,MAAAJ;AAAA,MACD,gBAAAM,EAAA,OAAA,EAAI,WAAU,8CAA+C,UAAWH,EAAA,CAAA;AAAA,IAAA,EAC1E,CAAA;AAAA,EAAA,EAED,CAAA;AAAA,GAED;"}
+{"version":3,"file":"UiRadioFancy.js","sources":["../../../src/components/UiRadioFancy/UiRadioFancy.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiIcon } from \"../UiIcon\";\nimport { ESize } from \"../../_types/sizing\";\nimport { type IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { ERadioTypes } from \"./_types\";\n\nexport type TUiRadioFancy = {\n\tchildren: React.ReactNode\n\ticon?: IconProp\n\tdisabled?: boolean;\n\tactive?: boolean;\n\tsubHeader?: string;\n\tclassName?: string;\n\tradioType?: ERadioTypes;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\n}& Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nconst typeClasses = {\n\t[ERadioTypes.DEFAULT]: \"items-center\",\n\t[ERadioTypes.COMPACT]: \"items-start flex-col\"\n};\n\nexport const UiRadioFancy: React.FC<TUiRadioFancy> = ({\n\tchildren,\n\ticon,\n\tdisabled,\n\tsubHeader,\n\tactive,\n\tradioType = ERadioTypes.DEFAULT,\n\tvalue,\n\tonChange,\n\tclassName\n\n}) => {\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-radio-fancy\",\n\t\t\t\"relative\",\n\t\t\t{\n\t\t\t\t\"pointer-events-none\": disabled\n\t\t\t},\n\t\t\tclassName\n\t\t) }>\n\t\t\t<input className=\"group peer absolute appearance-none\" type=\"radio\" checked={ active } onChange={ ()=> onChange(value) }/>\n\n\t\t\t<div className={ cx(\n\t\t\t\t\"box-border\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"rounded-lg\",\n\t\t\t\t\"border\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\t\"peer-focus:outline \",\n\t\t\t\t\"peer-focus:outline-4\",\n\t\t\t\t\"peer-focus:outline-primary-300\",\n\t\t\t\t\"peer-checked:shadow-border-primary-600\",\n\t\t\t\t\"peer-checked:border-0\",\n\t\t\t\t\"active:peer-checked:bg-secondary-alt-200\",\n\t\t\t\t\"hover:peer-checked:shadow-border-primary-700\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"text-sm\",\n\t\t\t\tactive\n\t\t\t\t\t? \"peer-focus:outline-offset-2\"\n\t\t\t\t\t: \"peer-focus:outline-offset-0\",\n\t\t\t\tdisabled\n\t\t\t\t\t? \"border-secondary-alt-400 text-secondary-alt-500 peer-checked:shadow-border-primary-disabled\"\n\t\t\t\t\t: \"border-secondary-alt-600\",\n\n\t\t\t\ttypeClasses[radioType],\n\n\t\t\t) }>\n\t\t\t\t<div className={ cx(\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"grid\",\n\t\t\t\t\t\"size-fit\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"place-items-center\",\n\t\t\t\t\t\"text-white\",\n\t\t\t\t\t\"p-xxs\",\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-primary-300\": disabled,\n\t\t\t\t\t\t\"bg-primary\": !disabled\n\t\t\t\t\t}\n\n\t\t\t\t) }\n\t\t\t\t>\n\n\t\t\t\t\t{\n\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t? <UiIcon\n\t\t\t\t\t\t\t\tname={ icon }\n\t\t\t\t\t\t\t\tsize={ ESize.SM }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t: null\n\t\t\t\t\t}\n\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t{ children }\n\t\t\t\t\t<div className=\"text-xs font-normal text-secondary-alt-400\">{ subHeader }</div>\n\t\t\t\t</div>\n\n\t\t\t</div>\n\n\t\t</label>\n\n\t);\n};\n"],"names":["typeClasses","ERadioTypes","UiRadioFancy","children","icon","disabled","subHeader","active","radioType","value","onChange","className","jsxs","cx","jsx","UiIcon","ESize"],"mappings":";;;;;;;AAoBA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,OAAO,GAAG;AACxB,GAEaC,IAAwC,CAAC;AAAA,EACrD,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAYP,EAAY;AAAA,EACxB,OAAAQ;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAED,MAEE,gBAAAC,EAAC,WAAM,WAAYC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,IACC,uBAAuBR;AAAA,EACxB;AAAA,EACAM;AAEA,GAAA,UAAA;AAAA,EAAC,gBAAAG,EAAA,SAAA,EAAM,WAAU,uCAAsC,MAAK,SAAQ,SAAUP,GAAS,UAAW,MAAKG,EAASD,CAAK,EAAG,CAAA;AAAA,EAExH,gBAAAG,EAAC,SAAI,WAAYC;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAN,IACG,gCACA;AAAA,IACHF,IACG,gGACA;AAAA,IAEHL,EAAYQ,CAAS;AAAA,EAGrB,GAAA,UAAA;AAAA,IAAA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAYD;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACC,kBAAkBR;AAAA,YAClB,cAAc,CAACA;AAAA,UAAA;AAAA,QAGjB;AAAA,QAIE,UACGD,IAAA,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACF,MAAOX;AAAA,YACP,MAAOY,EAAM;AAAA,UAAA;AAAA,QAAA,IAEZ;AAAA,MAAA;AAAA,IAGL;AAAA,IAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,iBACZ,UAAA;AAAA,MAAAT;AAAA,MACD,gBAAAW,EAAA,OAAA,EAAI,WAAU,8CAA+C,UAAWR,EAAA,CAAA;AAAA,IAAA,EAC1E,CAAA;AAAA,EAAA,EAED,CAAA;AAAA,GAED;"}

package/components/UiRadioFancy/_types.d.ts

@@ -1,4 +1,4 @@
 export declare enum ERadioTypes {
-    MINIMAL = "minimal",
+    DEFAULT = "default",
     COMPACT = "compact"
 }

package/components/UiRadioFancy/_types.js

@@ -1,5 +1,5 @@
-var m = /* @__PURE__ */ ((r) => (r.MINIMAL = "minimal", r.COMPACT = "compact", r))(m || {});
+var t = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.COMPACT = "compact", r))(t || {});
 export {
-  m as ERadioTypes
+  t as ERadioTypes
 };
 //# sourceMappingURL=_types.js.map

package/components/UiRadioFancy/_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"_types.js","sources":["../../../src/components/UiRadioFancy/_types.ts"],"sourcesContent":["export enum ERadioTypes {\n\t//DEFAULT = \"default\",\n\tMINIMAL = \"minimal\",\n\tCOMPACT = \"compact\"\n}\n"],"names":["ERadioTypes"],"mappings":"AAAY,IAAAA,sBAAAA,OAEXA,EAAA,UAAU,WACVA,EAAA,UAAU,WAHCA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiRadioFancy/_types.ts"],"sourcesContent":["export enum ERadioTypes {\n\tDEFAULT = \"default\",\n\tCOMPACT = \"compact\"\n}\n"],"names":["ERadioTypes"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,UAAU,WAFCA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiSelect/UiSelect.d.ts

@@ -6,6 +6,7 @@ type TSelectProps = {
     value?: string | number | readonly string[];
     placeholder?: string;
     postfixIcon?: React.ReactNode;
+    className?: string;
     onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 } & React.SelectHTMLAttributes<HTMLSelectElement>;
 export declare const UiSelect: React.FC<TSelectProps>;

package/components/UiSelect/UiSelect.js

@@ -0,0 +1,99 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import d from "react";
+import b from "classnames";
+import { UiTypography as m } from "../UiTypography/UiTypography.js";
+import { ETypographySizes as u } from "../UiTypography/_types.js";
+import { EColors as f } from "../../_types/colors.js";
+import '../../assets/UiSelect.css';const S = "_UiSelect_1fbno_1", w = {
+  UiSelect: S
+}, z = ({
+  children: p,
+  heading: o,
+  subLabel: n,
+  disabled: s,
+  onChange: r,
+  className: h,
+  placeholder: a,
+  postfixIcon: i,
+  ...l
+}) => {
+  const [v, x] = d.useState(l.value || l.defaultValue || ""), y = d.useCallback(
+    (c) => {
+      x(c.target.value), r == null || r(c);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ t("div", { className: h, children: [
+    o ? /* @__PURE__ */ e(
+      m,
+      {
+        size: u.MD,
+        className: "mb-xxs",
+        children: o
+      }
+    ) : null,
+    /* @__PURE__ */ t("div", { className: b(
+      w.UiSelect,
+      "relative",
+      "rounded-xl",
+      "border",
+      "hover:border-secondary-alt-700",
+      s ? ["pointer-events-none", "border-secondary-alt-300", "bg-secondary-alt-200"] : ["border-secondary-alt-500", "bg-white"]
+    ), children: [
+      /* @__PURE__ */ t(
+        "select",
+        {
+          ...l,
+          className: `m-0
+					w-full
+					cursor-pointer
+					appearance-none
+					border-0
+					bg-transparent
+					p-sm
+					italic
+					text-secondary-alt
+					outline-0
+					`,
+          disabled: s,
+          value: v,
+          onChange: y,
+          children: [
+            a ? /* @__PURE__ */ e("option", { value: "", disabled: !0, hidden: !0, children: a }) : null,
+            p
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "absolute right-sm top-1/2 -translate-y-1/2", children: i || /* @__PURE__ */ e(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z",
+              fill: "currentColor"
+            }
+          )
+        }
+      ) })
+    ] }),
+    n ? /* @__PURE__ */ e(
+      m,
+      {
+        size: u.SM,
+        color: f.SECONDARY_ALT,
+        className: "mt-xxs",
+        children: n
+      }
+    ) : null
+  ] });
+};
+export {
+  z as UiSelect
+};
+//# sourceMappingURL=UiSelect.js.map

package/components/UiSelect/UiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiSelect.js","sources":["../../../src/components/UiSelect/UiSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiTypography, ETypographySizes, EColors } from \"../UiTypography\";\nimport styles from \"./UiSelect.module.css\";\n\ntype TSelectProps = {\n\theading?: string\n\tsubLabel?: string;\n\tdisabled?: boolean;\n\tvalue?: string | number | readonly string[];\n\tplaceholder?: string;\n\tpostfixIcon?: React.ReactNode;\n\tclassName?: string;\n\tonChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\n} & React.SelectHTMLAttributes<HTMLSelectElement>\n\nexport const UiSelect: React.FC<TSelectProps> = ({\n\tchildren,\n\theading,\n\tsubLabel,\n\tdisabled,\n\tonChange,\n\tclassName,\n\tplaceholder,\n\tpostfixIcon,\n\t...rest\n}) => {\n\tconst [value, setValue] = React.useState(rest.value || rest.defaultValue || \"\");\n\tconst handleChange = React.useCallback(\n\t\t(event: React.ChangeEvent<HTMLSelectElement>) => {\n\t\t\tsetValue(event.target.value);\n\t\t\tonChange?.(event);\n\t\t},\n\t\t[onChange],\n\t);\n\treturn (\n\t\t<div className={ className }>\n\t\t\t{ heading\n\t\t\t\t? <UiTypography\n\t\t\t\t\tsize={ ETypographySizes.MD }\n\t\t\t\t\tclassName=\"mb-xxs\">\n\t\t\t\t\t{ heading }\n\t\t\t\t</UiTypography>\n\t\t\t\t: null\n\t\t\t}\n\t\t\t<div className={ cx(styles.UiSelect, \"relative\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"border\",\n\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\tdisabled\n\t\t\t\t\t? [\"pointer-events-none\", \"border-secondary-alt-300\", \"bg-secondary-alt-200\"]\n\t\t\t\t\t: [\"border-secondary-alt-500\", \"bg-white\"]\n\t\t\t) }>\n\t\t\t\t<select\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\tclassName=\"m-0\n\t\t\t\t\tw-full\n\t\t\t\t\tcursor-pointer\n\t\t\t\t\tappearance-none\n\t\t\t\t\tborder-0\n\t\t\t\t\tbg-transparent\n\t\t\t\t\tp-sm\n\t\t\t\t\titalic\n\t\t\t\t\ttext-secondary-alt\n\t\t\t\t\toutline-0\n\t\t\t\t\t\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t>\n\t\t\t\t\t{ placeholder ? <option value={ \"\" } disabled hidden>{ placeholder }</option> : null }\n\t\t\t\t\t{ children }\n\t\t\t\t</select>\n\t\t\t\t<div className=\"absolute right-sm top-1/2 -translate-y-1/2\">\n\t\t\t\t\t{ postfixIcon\n\t\t\t\t\t\t? postfixIcon\n\t\t\t\t\t\t: (<svg\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>)\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ subLabel\n\t\t\t\t? (<UiTypography\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tcolor={ EColors.SECONDARY_ALT }\n\t\t\t\t\tclassName=\"mt-xxs\"\n\t\t\t\t>\n\t\t\t\t\t{ subLabel }\n\t\t\t\t</UiTypography>)\n\t\t\t\t: null\n\t\t\t}\n\t\t</div>\n\t);\n};\n"],"names":["UiSelect","children","heading","subLabel","disabled","onChange","className","placeholder","postfixIcon","rest","value","setValue","React","handleChange","event","jsxs","jsx","UiTypography","ETypographySizes","cx","styles","EColors"],"mappings":";;;;;;;;GAgBaA,IAAmC,CAAC;AAAA,EAChD,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAM,SAASH,EAAK,SAASA,EAAK,gBAAgB,EAAE,GACxEI,IAAeD,EAAM;AAAA,IAC1B,CAACE,MAAgD;AACvC,MAAAH,EAAAG,EAAM,OAAO,KAAK,GAC3BT,KAAA,QAAAA,EAAWS;AAAA,IACZ;AAAA,IACA,CAACT,CAAQ;AAAA,EACV;AAEC,SAAA,gBAAAU,EAAC,SAAI,WAAAT,GACF,UAAA;AAAA,IACCJ,IAAA,gBAAAc;AAAA,MAACC;AAAA,MAAA;AAAA,QACF,MAAOC,EAAiB;AAAA,QACxB,WAAU;AAAA,QACR,UAAAhB;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,IAEH,gBAAAa,EAAC,SAAI,WAAYI;AAAA,MAAGC,EAAO;AAAA,MAAU;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACAhB,IACG,CAAC,uBAAuB,4BAA4B,sBAAsB,IAC1E,CAAC,4BAA4B,UAAU;AAAA,IAE1C,GAAA,UAAA;AAAA,MAAA,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGN;AAAA,UACL,WAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWV,UAAAL;AAAA,UACA,OAAAM;AAAA,UACA,UAAWG;AAAA,UAET,UAAA;AAAA,YAAcN,IAAA,gBAAAS,EAAC,YAAO,OAAQ,IAAK,UAAQ,IAAC,QAAM,IAAG,UAAAT,EAAA,CAAa,IAAY;AAAA,YAC9EN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,MACC,gBAAAe,EAAA,OAAA,EAAI,WAAU,8CACZ,eAEE,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACH,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UAEN,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA,EAGH,CAAA;AAAA,IAAA,GACD;AAAA,IACEb,IACE,gBAAAa;AAAA,MAACC;AAAA,MAAA;AAAA,QACH,MAAOC,EAAiB;AAAA,QACxB,OAAQG,EAAQ;AAAA,QAChB,WAAU;AAAA,QAER,UAAAlB;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,EAAA,GAEJ;AAEF;"}

package/components/UiSelect/index.js

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

package/components/UiSelect/index.js.map

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

package/components/UiSkeleton/UiSkeleton.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { ESkeletonKind } from './_types';
 type UiSkeletonProps = {
     kind: ESkeletonKind;
+    className?: string;
 };
 export declare const UiSkeleton: React.FC<UiSkeletonProps>;
 export {};