bonkers-ui 2.0.6 → 2.0.8

package/components/UiInputRange/UiInputRange.js

@@ -1,71 +1,81 @@
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import n from "react";
-import h from "classnames";
-import '../../assets/UiInputRange.css';const W = "_thumb_hkko1_18", F = {
-  thumb: W
-}, w = ({
-  value: o,
-  min: a,
-  max: r,
-  step: p,
-  onChangeHandler: m,
-  className: b,
+import { jsxs as M, jsx as n } from "react/jsx-runtime";
+import m, { useState as b, useCallback as O, useEffect as S } from "react";
+import g from "classnames";
+import '../../assets/UiInputRange.css';const j = "_thumb_hkko1_18", T = {
+  thumb: j
+}, $ = ({
+  value: s,
+  min: r,
+  max: a,
+  step: x,
+  onChangeHandler: y,
+  className: v,
   ...l
 }) => {
-  const c = n.useRef(null), i = n.useRef(null), [f, g] = n.useState(0), [x, y] = n.useState(0);
-  n.useEffect(() => {
-    if (!c.current || !i.current) return;
-    const t = parseFloat(String(o)), s = parseFloat(String(a)), M = parseFloat(String(r)), k = (t - s) / (M - s) * 100, N = i.current.getBoundingClientRect().width, P = c.current.clientWidth, u = N / P * 100, d = k * (1 - u / 100);
-    g(Math.max(0, Math.min(100, d))), y(Math.max(0, Math.min(100, d + u)));
-  }, [a, r, o]);
-  const v = (t) => {
-    if (t === o) return;
-    const s = parseFloat(t.toFixed(10));
-    m(s);
+  const e = m.useRef(null), c = m.useRef(null), [k, R] = b(0), [w, N] = b(0), i = O(() => {
+    var h, f;
+    if (!e.current || !c.current) return;
+    const t = parseFloat(String(s)), o = parseFloat(String(r)), z = parseFloat(String(a)), C = ((h = c.current) == null ? void 0 : h.getBoundingClientRect().width) ?? 0, u = ((f = e.current) == null ? void 0 : f.getBoundingClientRect().width) ?? 0;
+    if (u === 0) return;
+    const F = (t - o) / (z - o) * 100, p = C / u * 100, d = Math.max(0, Math.min(100, F * (1 - p / 100)));
+    R(d), N(d + p / 2);
+  }, [r, a, s]);
+  S(() => {
+    i();
+    const t = new ResizeObserver(() => {
+      i();
+    });
+    return e.current && t.observe(e.current), () => {
+      t.disconnect();
+    };
+  }, [i]);
+  const P = (t) => {
+    if (t === s) return;
+    const o = parseFloat(t.toFixed(10));
+    y(o);
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ M(
     "div",
     {
-      className: h(
+      className: g(
         "relative box-content h-xl py-xxs",
         l.disabled && "opacity-60 cursor-default pointer-events-none",
-        b
+        v
       ),
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n(
           "input",
           {
             ...l,
-            ref: c,
+            ref: e,
             className: "absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent",
             style: {
               touchAction: "none"
             },
             type: "range",
-            min: a,
-            max: r,
-            step: p,
-            value: o,
-            onChange: (t) => v(+t.target.value),
+            min: r,
+            max: a,
+            step: x,
+            value: s,
+            onChange: (t) => P(+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-sm bg-secondary-alt" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n("div", { className: "pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt overflow-clip", children: /* @__PURE__ */ n(
           "div",
           {
-            className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary",
+            className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600",
             style: {
-              width: `${x}%`
+              width: `${w}%`
             }
           }
-        ),
-        /* @__PURE__ */ e(
+        ) }),
+        /* @__PURE__ */ n(
           "div",
           {
-            className: h(
-              F.thumb,
+            className: g(
+              T.thumb,
               "pointer-events-none",
               "absolute",
               "box-content",
@@ -73,13 +83,13 @@ import '../../assets/UiInputRange.css';const W = "_thumb_hkko1_18", F = {
               "-translate-y-1/2",
               "rounded-full",
               "bg-white",
-              "border-primary"
+              "border-primary-600"
             ),
-            ref: i,
+            ref: c,
             style: {
-              left: `${f}%`
+              left: `${k}%`
             },
-            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" })
+            children: /* @__PURE__ */ n("div", { className: "absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600" })
           }
         )
       ]
@@ -87,6 +97,6 @@ import '../../assets/UiInputRange.css';const W = "_thumb_hkko1_18", F = {
   );
 };
 export {
-  w as UiInputRange
+  $ as UiInputRange
 };
 //# sourceMappingURL=UiInputRange.js.map

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\tclassName?: string;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\tclassName,\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\tclassName\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","className","rest","track","React","thumb","thumbPosition","setThumbPosition","trackWidth","setTrackWidth","numValue","numMin","numMax","percentage","thumbWidth","thumbWidthPercentage","adjustedPercentage","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":";;;;;GAaaA,IAA6C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;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,OAAOd,CAAK,CAAC,GACnCe,IAAS,WAAW,OAAOd,CAAG,CAAC,GAC/Be,IAAS,WAAW,OAAOd,CAAG,CAAC,GAE/Be,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,CAAClB,GAAKC,GAAKF,CAAK,CAAC;AAEd,QAAAqB,IAAiB,CAACC,MAAqB;AAC5C,QAAIA,MAAatB,EAAO;AACxB,UAAMuB,IAAe,WAAWD,EAAS,QAAQ,EAAE,CAAC;AACpD,IAAAlB,EAAgBmB,CAAY;AAAA,EAC7B;AAGC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACAnB,EAAK,YAAY;AAAA,QACjBD;AAAA,MACD;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAqB;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,KAAAN;AAAA,YACA,KAAAC;AAAA,YACA,MAAAC;AAAA,YACA,OAAAH;AAAA,YACA,UAAW,CAAC2B,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;"}
+{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } 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\tclassName?: string;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\tclassName,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState(0);\n\tconst [trackOffset, setTrackOffset] = useState(0);\n\n\tconst updatePositions = useCallback(() => {\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 thumbWidth = thumb.current?.getBoundingClientRect().width ?? 0;\n\t\tconst trackWidth = track.current?.getBoundingClientRect().width ?? 0;\n\n\t\tif (trackWidth === 0) return;\n\n\t\tconst percentage = ((numValue - numMin) / (numMax - numMin)) * 100;\n\t\tconst thumbWidthPercentage = (thumbWidth / trackWidth) * 100;\n\n\t\tconst adjustedPercentage = Math.max(0, Math.min(100, percentage * (1 - thumbWidthPercentage / 100)));\n\n\t\tsetPosition(adjustedPercentage);\n\t\tsetTrackOffset(adjustedPercentage + (thumbWidthPercentage / 2));\n\t}, [min, max, value]);\n\n\tuseEffect(() => {\n\t\tupdatePositions();\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tupdatePositions();\n\t\t});\n\n\t\tif (track.current) {\n\t\t\tresizeObserver.observe(track.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [updatePositions]);\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\tclassName\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 overflow-clip\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: `${trackOffset}%`,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\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-600\",\n\t\t\t\t) }\n\t\t\t\tref={ thumb }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${position}%`,\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-600\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputRange","value","min","max","step","onChangeHandler","className","rest","track","React","thumb","position","setPosition","useState","trackOffset","setTrackOffset","updatePositions","useCallback","numValue","numMin","numMax","thumbWidth","_a","trackWidth","_b","percentage","thumbWidthPercentage","adjustedPercentage","useEffect","resizeObserver","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":"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"}

package/components/UiPlainRadio/UiPlainRadio.js

@@ -1,90 +1,110 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
 import "react";
-import p from "classnames";
-import { UiRadio as c } from "../UiRadio/UiRadio.js";
-const f = ({
-  children: l,
+import i from "classnames";
+const v = ({
+  id: p,
+  children: s,
   disabled: r,
-  subHeader: d,
-  value: e,
-  name: a,
-  checked: o = !1,
-  className: s,
-  onChange: t
-}) => /* @__PURE__ */ i(
+  subHeader: t,
+  value: o,
+  name: l,
+  checked: e = !1,
+  className: g,
+  onChange: c,
+  ...m
+}) => /* @__PURE__ */ a(
   "label",
   {
-    className: p(
-      "ui-radio-fancy",
+    className: i(
+      "ui-plain-radio",
       "relative",
+      "group",
       {
         "pointer-events-none opacity-50": r
       },
-      s
+      g
     ),
-    htmlFor: a + e,
     children: [
       /* @__PURE__ */ n(
         "input",
         {
-          className: p(
+          className: i(
             " absolute",
             "appearance-none",
-            "peer/plain-radio"
+            "peer"
           ),
-          id: a + e,
+          id: p || `${l}-${o}`,
           type: "radio",
-          value: e,
-          checked: o,
-          onChange: () => t(e)
+          value: o,
+          checked: e,
+          onChange: () => c(o),
+          ...m
         }
       ),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ a(
         "div",
         {
-          className: p(
+          className: i(
+            "bg-white",
             "box-border",
-            "size-full",
             "cursor-pointer",
-            "rounded-xl",
-            "border border-secondary-alt-600",
-            "peer-checked/plain-radio:border-primary-600",
-            "peer-checked/plain-radio:outline",
-            "peer-checked/plain-radio:outline",
-            "peer-checked/plain-radio:outline-primary-600",
-            "peer-hover/plain-radio:peer-checked/plain-radio:outline-primary-700",
-            "bg-white",
-            "peer-active/plain-radio:bg-secondary-alt-200",
-            "p-sm",
-            "peer-hover/plain-radio:border-primary-700",
-            "peer-focus/plain-radio:shadow-border-primary",
             "flex",
-            "items-center",
             "gap-sm",
+            "items-center",
+            "p-sm",
+            "peer-active:bg-secondary-alt-200",
+            "peer-active:ring-primary-800",
+            "peer-focus-within:outline-offset-4",
+            "peer-focus:outline-2",
+            "peer-focus:peer-checked:outline-primary-600",
+            "peer-hover:ring-primary-700",
+            "rounded-xl",
+            "size-full",
             "text-sm",
+            r ? "ring-secondary-alt-300" : "peer-checked:ring-primary-600 peer-checked:outline peer-checked:outline-primary-600",
+            e ? "ring-2" : "ring",
             {
-              "border-secondary-alt-400": r && !o,
-              "border-primary-300": r && o,
-              "border-secondary-alt-600": !r && !o,
-              "border-primary-600": !r && o
+              "ring-secondary-alt-600 hover:ring-secondary-500": !r && !e
             }
           ),
           children: [
-            /* @__PURE__ */ n(
-              c,
+            /* @__PURE__ */ n("span", { className: i(
+              "bg-white",
+              "group-active:ring-primary-800",
+              "group-hover:ring-primary-700",
+              "pointer-events-none",
+              "relative",
+              "rounded-full",
+              "size-md",
+              e ? "ring-2" : "ring",
+              r ? "ring-secondary-alt-300" : "ring-primary-600",
+              {
+                "ring-secondary-alt-600 group-hover:ring-secondary-500  group-active:ring-secondary-500": !r && !e
+              }
+            ), children: /* @__PURE__ */ n(
+              "span",
               {
-                className: "pointer-events-none",
-                disabled: r,
-                value: e,
-                name: a,
-                onChange: () => t(e),
-                checked: o,
-                tabIndex: -1
+                className: i(
+                  "absolute",
+                  "block",
+                  "group-active:bg-primary-800",
+                  "group-hover:bg-primary-700",
+                  "left-xxs",
+                  "pointer-events-none",
+                  "rounded-full",
+                  "size-xxs",
+                  "top-xxs",
+                  e ? "bg-primary-600" : "bg-white",
+                  r ? "bg-secondary-alt-300" : "bg-primary-600",
+                  {
+                    "bg-white group-hover:bg-white group-active:bg-white": !r && !e
+                  }
+                )
               }
-            ),
-            /* @__PURE__ */ i("div", { className: "flex flex-col", children: [
-              l,
-              /* @__PURE__ */ n("div", { className: "text-xs font-normal text-secondary-alt-400", children: d })
+            ) }),
+            /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+              s,
+              t ? /* @__PURE__ */ n("div", { className: "text-xs font-normal text-secondary-alt-400", children: t }) : null
             ] })
           ]
         }
@@ -93,6 +113,6 @@ const f = ({
   }
 );
 export {
-  f as UiPlainRadio
+  v as UiPlainRadio
 };
 //# sourceMappingURL=UiPlainRadio.js.map

package/components/UiPlainRadio/UiPlainRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiPlainRadio.js","sources":["../../../src/components/UiPlainRadio/UiPlainRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiRadio } from \"../UiRadio\";\n\nexport type  TUiPlainRadio = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean;\n\tsubHeader?: string;\n\tvalue: string;\n\tname: string;\n\tclassName?: string\n\tchecked?: boolean\n\tonChange: (value: string) => void;\n\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nexport const UiPlainRadio: React.FC<TUiPlainRadio> = ({\n\tchildren,\n\tdisabled,\n\tsubHeader,\n\tvalue,\n\tname,\n\tchecked = false,\n\tclassName,\n\tonChange\n\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 opacity-50\": disabled\n\t\t\t},\n\t\t\tclassName\n\t\t) }\n\t\thtmlFor={ name + value }\n\t\t>\n\t\t\t<input className={ cx(\n\t\t\t\t\" absolute\",\n\t\t\t\t\"appearance-none\",\n\t\t\t\t\"peer/plain-radio\",\n\t\t\t) }\n\t\t\tid={ name + value }\n\t\t\ttype=\"radio\"\n\t\t\tvalue={ value }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ ()=> onChange(value) }\n\t\t\t/>\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-xl\",\n\t\t\t\t\"border border-secondary-alt-600\",\n\t\t\t\t\"peer-checked/plain-radio:border-primary-600\",\n\t\t\t\t\"peer-checked/plain-radio:outline\",\n\t\t\t\t\"peer-checked/plain-radio:outline\",\n\t\t\t\t\"peer-checked/plain-radio:outline-primary-600\",\n\t\t\t\t\"peer-hover/plain-radio:peer-checked/plain-radio:outline-primary-700\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"peer-active/plain-radio:bg-secondary-alt-200\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"peer-hover/plain-radio:border-primary-700\",\n\t\t\t\t\"peer-focus/plain-radio:shadow-border-primary\",\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 && !checked,\n\t\t\t\t\t\"border-primary-300\": disabled && checked,\n\t\t\t\t\t\"border-secondary-alt-600\": !disabled && !checked,\n\t\t\t\t\t\"border-primary-600\": !disabled && checked\n\t\t\t\t}\n\n\t\t\t) }\n\t\t\t>\n\n\t\t\t\t<UiRadio\n\t\t\t\t\tclassName=\"pointer-events-none\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonChange={ ()=> onChange(value) }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t/>\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":["UiPlainRadio","children","disabled","subHeader","value","name","checked","className","onChange","jsxs","cx","jsx","UiRadio"],"mappings":";;;;AAgBO,MAAMA,IAAwC,CAAC;AAAA,EACrD,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAED,MAGE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IAAM,WAAYC;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,QACC,kCAAkCR;AAAA,MACnC;AAAA,MACAK;AAAA,IACD;AAAA,IACA,SAAUF,IAAOD;AAAA,IAEhB,UAAA;AAAA,MAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UAAM,WAAYD;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,UACA,IAAKL,IAAOD;AAAA,UACZ,MAAK;AAAA,UACL,OAAAA;AAAA,UACA,SAAAE;AAAA,UACA,UAAW,MAAKE,EAASJ,CAAK;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UAAI,WAAYC;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,cACC,4BAA4BR,KAAY,CAACI;AAAA,cACzC,sBAAsBJ,KAAYI;AAAA,cAClC,4BAA4B,CAACJ,KAAY,CAACI;AAAA,cAC1C,sBAAsB,CAACJ,KAAYI;AAAA,YAAA;AAAA,UAGrC;AAAA,UAGC,UAAA;AAAA,YAAA,gBAAAK;AAAA,cAACC;AAAA,cAAA;AAAA,gBACA,WAAU;AAAA,gBACV,UAAAV;AAAA,gBACA,OAAAE;AAAA,gBACA,MAAAC;AAAA,gBACA,UAAW,MAAKG,EAASJ,CAAK;AAAA,gBAC9B,SAAAE;AAAA,gBACA,UAAW;AAAA,cAAA;AAAA,YACZ;AAAA,YAEA,gBAAAG,EAAC,OAAI,EAAA,WAAU,iBACZ,UAAA;AAAA,cAAAR;AAAA,cACD,gBAAAU,EAAA,OAAA,EAAI,WAAU,8CAA+C,UAAWR,EAAA,CAAA;AAAA,YAAA,EAC1E,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAED;"}
+{"version":3,"file":"UiPlainRadio.js","sources":["../../../src/components/UiPlainRadio/UiPlainRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\n\nexport type TUiPlainRadio = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean;\n\tsubHeader?: string;\n\tvalue: string;\n\tname: string;\n\tclassName?: string\n\tchecked?: boolean\n\tonChange: (value: string) => void;\n\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nexport const UiPlainRadio: React.FC<TUiPlainRadio> = ({\n\tid,\n\tchildren,\n\tdisabled,\n\tsubHeader,\n\tvalue,\n\tname,\n\tchecked = false,\n\tclassName,\n\tonChange,\n\t...rest\n\n}) => {\n\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-plain-radio\",\n\t\t\t\"relative\",\n\t\t\t\"group\",\n\t\t\t{\n\t\t\t\t\"pointer-events-none opacity-50\": disabled\n\t\t\t},\n\t\t\tclassName\n\t\t) }\n\t\t>\n\t\t\t<input className={ cx(\n\t\t\t\t\" absolute\",\n\t\t\t\t\"appearance-none\",\n\t\t\t\t\"peer\",\n\t\t\t) }\n\t\t\tid={ id  || `${name}-${value}` }\n\t\t\ttype=\"radio\"\n\t\t\tvalue={ value }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ () => onChange(value) }\n\t\t\t{ ...rest }\n\t\t\t/>\n\n\t\t\t<div className={ cx(\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"box-border\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"peer-active:bg-secondary-alt-200\",\n\t\t\t\t\"peer-active:ring-primary-800\",\n\t\t\t\t\"peer-focus-within:outline-offset-4\",\n\t\t\t\t\"peer-focus:outline-2\",\n\t\t\t\t\"peer-focus:peer-checked:outline-primary-600\",\n\t\t\t\t\"peer-hover:ring-primary-700\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"size-full\",\n\t\t\t\t\"text-sm\",\n\t\t\t\tdisabled\n\t\t\t\t\t? \"ring-secondary-alt-300\"\n\t\t\t\t\t: \"peer-checked:ring-primary-600 peer-checked:outline peer-checked:outline-primary-600\",\n\t\t\t\tchecked\n\t\t\t\t\t? \"ring-2\"\n\t\t\t\t\t: \"ring\",\n\t\t\t\t{\n\t\t\t\t\t\"ring-secondary-alt-600 hover:ring-secondary-500\": !disabled && !checked,\n\t\t\t\t}\n\n\t\t\t) }\n\t\t\t>\n\n\t\t\t\t<span className={ cx(\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"group-active:ring-primary-800\",\n\t\t\t\t\t\"group-hover:ring-primary-700\",\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\tchecked\n\t\t\t\t\t\t? \"ring-2\"\n\t\t\t\t\t\t: \"ring\",\n\t\t\t\t\tdisabled\n\t\t\t\t\t\t? \"ring-secondary-alt-300\"\n\t\t\t\t\t\t: \"ring-primary-600\",\n\n\t\t\t\t\t{\n\t\t\t\t\t\t\"ring-secondary-alt-600 group-hover:ring-secondary-500  group-active:ring-secondary-500\": !disabled && !checked,\n\t\t\t\t\t}\n\n\t\t\t\t) }>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\t\"group-active:bg-primary-800\",\n\t\t\t\t\t\t\t\"group-hover:bg-primary-700\",\n\t\t\t\t\t\t\t\"left-xxs\",\n\t\t\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\t\"size-xxs\",\n\t\t\t\t\t\t\t\"top-xxs\",\n\t\t\t\t\t\t\tchecked\n\t\t\t\t\t\t\t\t? \"bg-primary-600\"\n\t\t\t\t\t\t\t\t: \"bg-white\",\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t? \"bg-secondary-alt-300\"\n\t\t\t\t\t\t\t\t: \"bg-primary-600\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\"bg-white group-hover:bg-white group-active:bg-white\": !disabled && !checked,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t) }/>\n\n\t\t\t\t</span>\n\n\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t{ children }\n\n\t\t\t\t\t{\n\t\t\t\t\t\tsubHeader\n\t\t\t\t\t\t\t? <div className=\"text-xs font-normal text-secondary-alt-400\">{ subHeader }</div>\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</div>\n\n\t\t</label>\n\n\t);\n};\n"],"names":["UiPlainRadio","id","children","disabled","subHeader","value","name","checked","className","onChange","rest","jsxs","cx","jsx"],"mappings":";;;AAeO,MAAMA,IAAwC,CAAC;AAAA,EACrD,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AAEJ,MAGE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IAAM,WAAYC;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACC,kCAAkCT;AAAA,MACnC;AAAA,MACAK;AAAA,IACD;AAAA,IAEC,UAAA;AAAA,MAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UAAM,WAAYD;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,UACA,IAAKX,KAAO,GAAGK,CAAI,IAAID,CAAK;AAAA,UAC5B,MAAK;AAAA,UACL,OAAAA;AAAA,UACA,SAAAE;AAAA,UACA,UAAW,MAAME,EAASJ,CAAK;AAAA,UAC7B,GAAGK;AAAA,QAAA;AAAA,MACL;AAAA,MAEA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAAI,WAAYC;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAT,IACG,2BACA;AAAA,YACHI,IACG,WACA;AAAA,YACH;AAAA,cACC,mDAAmD,CAACJ,KAAY,CAACI;AAAA,YAAA;AAAA,UAGnE;AAAA,UAGC,UAAA;AAAA,YAAA,gBAAAM,EAAC,UAAK,WAAYD;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAL,IACG,WACA;AAAA,cACHJ,IACG,2BACA;AAAA,cAEH;AAAA,gBACC,0FAA0F,CAACA,KAAY,CAACI;AAAA,cAAA;AAAA,YAIzG,GAAA,UAAA,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,WAAYD;AAAA,kBACX;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACAL,IACG,mBACA;AAAA,kBACHJ,IACG,yBACA;AAAA,kBACH;AAAA,oBACC,uDAAuD,CAACA,KAAY,CAACI;AAAA,kBAAA;AAAA,gBACtE;AAAA,cAED;AAAA,YAAA,GAEF;AAAA,YAEA,gBAAAI,EAAC,OAAI,EAAA,WAAU,iBACZ,UAAA;AAAA,cAAAT;AAAA,cAGDE,IACI,gBAAAS,EAAA,OAAA,EAAI,WAAU,8CAA+C,aAAW,IACzE;AAAA,YAAA,EAGL,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAED;"}

package/components/UiRadio/UiRadio.js

@@ -1,61 +1,62 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
 import "react";
-import a from "classnames";
+import s from "classnames";
 import { EJustify as e } from "../../_types/align.js";
-import '../../assets/UiRadio.css';const b = "_UiRadio__custom_wei69_1", R = "_UiRadio__dot_wei69_4", d = {
-  UiRadio__custom: b,
-  UiRadio__dot: R
-}, g = {
+import '../../assets/UiRadio.css';const R = "_UiRadio__custom_wei69_1", g = "_UiRadio__dot_wei69_4", c = {
+  UiRadio__custom: R,
+  UiRadio__dot: g
+}, h = {
   [e.START]: "justify-start",
   [e.END]: "justify-end",
   [e.CENTER]: "justify-center",
   [e.BETWEEN]: "justify-between",
   [e.AROUND]: "justify-around",
   [e.EVENLY]: "justify-evenly"
-}, N = ({
-  name: c,
-  value: s,
-  invertOrder: n = !1,
-  justify: l = e.START,
+}, x = ({
+  id: n,
+  name: t,
+  value: a,
+  invertOrder: l = !1,
+  justify: p = e.START,
   disabled: r = !1,
-  onChange: t,
-  checked: p = !1,
-  children: i,
-  className: u,
-  tabIndex: m
+  onChange: i,
+  checked: u = !1,
+  children: d,
+  className: m,
+  tabIndex: _
 }) => {
-  const _ = (f) => {
-    !r && t && t(f.target.value);
+  const f = (y) => {
+    !r && i && i(y.target.value);
   };
-  return /* @__PURE__ */ y("label", { className: a(
+  return /* @__PURE__ */ b("label", { className: s(
     "UiRadio",
     "group",
     "grid",
     "grid-flow-col",
     "cursor-pointer",
-    g[l],
+    h[p],
     {
       "pointer-events-none": r,
-      "items-center gap-xxs": i
+      "items-center gap-xxs": d
     }
   ), children: [
     /* @__PURE__ */ o(
       "input",
       {
-        id: s,
-        name: c.toString(),
+        id: n || `${t}-${a}`,
+        name: t.toString(),
         type: "radio",
-        value: s,
+        value: a,
         disabled: r,
-        checked: p,
-        onChange: _,
+        checked: u,
+        onChange: f,
         className: "peer absolute appearance-none",
-        tabIndex: m
+        tabIndex: _
       }
     ),
-    /* @__PURE__ */ o("span", { className: a(
-      d.UiRadio__custom,
-      n && "order-last",
+    /* @__PURE__ */ o("span", { className: s(
+      c.UiRadio__custom,
+      l && "order-last",
       "relative",
       "block",
       "size-md",
@@ -72,9 +73,9 @@ import '../../assets/UiRadio.css';const b = "_UiRadio__custom_wei69_1", R = "_Ui
       "peer-focus:shadow-border-primary",
       "peer-disabled:border-secondary-alt-400",
       "peer-disabled:bg-secondary-alt-200",
-      u
-    ), children: /* @__PURE__ */ o("span", { className: a(
-      d.UiRadio__dot,
+      m
+    ), children: /* @__PURE__ */ o("span", { className: s(
+      c.UiRadio__dot,
       "absolute",
       "left-2/4",
       "top-2/4",
@@ -83,10 +84,10 @@ import '../../assets/UiRadio.css';const b = "_UiRadio__custom_wei69_1", R = "_Ui
       "rounded-full",
       "bg-primary"
     ) }) }),
-    i
+    d
   ] });
 };
 export {
-  N as UiRadio
+  x as UiRadio
 };
 //# sourceMappingURL=UiRadio.js.map

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\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;"}
+{"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\tid,\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={ id || `${name}-${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","id","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,IAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAUN,EAAS;AAAA,EACnB,UAAAO,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,IACAjB,EAAqBO,CAAO;AAAA,IAC5B;AAAA,MACC,uBAAuBC;AAAA,MACvB,wBAAwBG;AAAA,IAAA;AAAA,EAG1B,GAAA,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,IAAKf,KAAM,GAAGC,CAAI,IAAIC,CAAK;AAAA,QAC3B,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;"}