@konstructio/ui 0.1.2-alpha.103 → 0.1.2-alpha.104

package/dist/components/Filter/contexts/filter.provider.js

@@ -1,12 +1,17 @@
-import { FilterContext as t } from "./filter.context.js";
-import { jsx as i } from "react/jsx-runtime";
-var l = ({ children: r, closeOnApply: o, theme: e }) => /* @__PURE__ */ i(t.Provider, {
-  value: {
-    closeOnApply: o,
-    theme: e
-  },
-  children: r
-});
+import { FilterContext as m } from "./filter.context.js";
+import { useId as p } from "react";
+import { jsx as d } from "react/jsx-runtime";
+var a = ({ children: r, closeOnApply: e, resetScope: o, theme: t }) => {
+  const i = p();
+  return /* @__PURE__ */ d(m.Provider, {
+    value: {
+      closeOnApply: e,
+      resetScope: o ?? i,
+      theme: t
+    },
+    children: r
+  });
+};
 export {
-  l as FilterProvider
+  a as FilterProvider
 };

package/dist/components/Filter/events/index.js

@@ -1,8 +1,29 @@
-var e = /* @__PURE__ */ (function(t) {
+var s = /* @__PURE__ */ (function(t) {
+  return t.OPEN = "@konstructio/KonstructFilter/event-OPEN", t.RESET = "@konstructio/KonstructFilter/event-RESET", t;
+})({}), E = /* @__PURE__ */ (function(t) {
   return t.OPEN = "@konstrtuctio/KonstructFilter/event-OPEN", t.RESET = "@konstrtuctio/KonstructFilter/event-RESET", t;
-})({}), n = (t) => document.dispatchEvent(new CustomEvent("@konstrtuctio/KonstructFilter/event-OPEN", { detail: t })), r = () => document.dispatchEvent(new CustomEvent("@konstrtuctio/KonstructFilter/event-RESET"));
+})({}), o = {
+  "@konstructio/KonstructFilter/event-OPEN": "@konstrtuctio/KonstructFilter/event-OPEN",
+  "@konstructio/KonstructFilter/event-RESET": "@konstrtuctio/KonstructFilter/event-RESET"
+}, c = "__konstructFilterDuplicate", u = (t, e) => {
+  document.dispatchEvent(new CustomEvent(t, { detail: e }));
+  const n = new CustomEvent(o[t], { detail: e });
+  Object.assign(n, { [c]: !0 }), document.dispatchEvent(n);
+}, i = (t) => {
+  u("@konstructio/KonstructFilter/event-OPEN", t);
+}, v = (t) => {
+  u("@konstructio/KonstructFilter/event-RESET", t);
+}, a = (t, e, n) => {
+  document.addEventListener(t, (r) => {
+    e(r);
+  }, n), document.addEventListener(o[t], (r) => {
+    c in r || e(r);
+  }, n);
+};
 export {
-  e as FilterEvent,
-  r as resetEvent,
-  n as sendOpenFilterEvent
+  s as FilterEvent,
+  E as LegacyFilterEvent,
+  a as addFilterEventListener,
+  v as resetEvent,
+  i as sendOpenFilterEvent
 };

package/dist/components/Filter/hooks/index.js

@@ -0,0 +1,4 @@
+import { useFilterDropdownSync as r } from "./useFilterDropdownSync.js";
+export {
+  r as useFilterDropdownSync
+};

package/dist/components/Filter/hooks/useFilterDropdownSync.js

@@ -0,0 +1,26 @@
+import { useFilterContext as s } from "../contexts/filter.hook.js";
+import { FilterEvent as o, addFilterEventListener as a } from "../events/index.js";
+import { useEffect as d } from "react";
+var u = ({ id: i, onClose: r, onReset: n }) => {
+  const { resetScope: l } = s();
+  d(() => {
+    const t = new AbortController();
+    return a(o.OPEN, (e) => {
+      e.detail !== i && r();
+    }, { signal: t.signal }), a(o.RESET, (e) => {
+      e.detail != null && e.detail !== l || n();
+    }, { signal: t.signal }), document.addEventListener("visibilitychange", () => {
+      document.hidden && r();
+    }, { signal: t.signal }), () => {
+      t.abort();
+    };
+  }, [
+    i,
+    r,
+    n,
+    l
+  ]);
+};
+export {
+  u as useFilterDropdownSync
+};

package/dist/components/ImageUpload/ImageUpload.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../ImageUpload-DZTm4SBB.js";
+import { t as a } from "../../ImageUpload-DiwymQcU.js";
 export {
   a as ImageUpload
 };

package/dist/components/Input/Input.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../Input-CW0VwW2T.js";
+import { t as o } from "../../Input-Cf44DzfE.js";
 export {
   o as Input
 };

package/dist/components/Loading/Loading.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../Loading-fD0Xiyeq.js";
+import { t as r } from "../../Loading-DUh9PMJN.js";
 export {
   r as Loading
 };

package/dist/components/Modal/Modal.js

@@ -1,5 +1,5 @@
 "use client";
-import { t } from "../../Modal-Bfzggwlr.js";
+import { t } from "../../Modal-Dyn088X7.js";
 export {
   t as Modal
 };

package/dist/components/Modal/components/Body/Body.js

@@ -1,4 +1,4 @@
-import { t as m } from "../../../../dist-DqKFpce5.js";
+import { t as m } from "../../../../dist-xCbHbMLA.js";
 import { t as a } from "../../../../utils-Cx-WzRZF.js";
 import { jsx as s } from "react/jsx-runtime";
 var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ s(o ? m : "div", {

package/dist/components/Modal/components/Footer/Footer.js

@@ -1,4 +1,4 @@
-import { t as m } from "../../../../dist-DqKFpce5.js";
+import { t as m } from "../../../../dist-xCbHbMLA.js";
 import { t as a } from "../../../../utils-Cx-WzRZF.js";
 import { jsx as e } from "react/jsx-runtime";
 var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ e(o ? m : "div", {

package/dist/components/Modal/components/Header/Header.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../dist-DqKFpce5.js";
+import { t as a } from "../../../../dist-xCbHbMLA.js";
 import { t as e } from "../../../../utils-Cx-WzRZF.js";
 import { jsx as m } from "react/jsx-runtime";
 var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ m(o ? a : "div", {

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,4 +1,4 @@
-import { n as p } from "../../../../Modal-Bfzggwlr.js";
+import { n as p } from "../../../../Modal-Dyn088X7.js";
 export {
   p as Wrapper
 };

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as o } from "./Body/Body.js";
 import { Footer as p } from "./Footer/Footer.js";
 import { Header as e } from "./Header/Header.js";
-import { n as i } from "../../../Modal-Bfzggwlr.js";
+import { n as i } from "../../../Modal-Dyn088X7.js";
 export {
   o as Body,
   p as Footer,

package/dist/components/Modal/contexts/Modal.provider.js

@@ -1,23 +1,30 @@
-import { useToggle as i } from "../../../hooks/useToggle.js";
-import { ModalContext as f } from "./Modal.context.js";
-import { useCallback as t, useState as n } from "react";
-import { jsx as h } from "react/jsx-runtime";
-var x = ({ children: s }) => {
-  const [r, l] = n(!0), [a, o] = i(!1), [u, d] = n(), e = t(() => o(!0), [o]), p = t(() => o(!1), [o]), c = (m, C = !0) => {
-    d(m), e(), l(C);
-  };
-  return /* @__PURE__ */ h(f.Provider, {
-    value: {
-      content: u,
-      isOpen: a,
-      shouldShowClose: r,
-      onClose: p,
-      onOpen: e,
-      setContentAndOpen: c
-    },
-    children: s
+import { useToggle as f } from "../../../hooks/useToggle.js";
+import { ModalContext as h } from "./Modal.context.js";
+import { useCallback as t, useMemo as S, useState as u } from "react";
+import { jsx as g } from "react/jsx-runtime";
+var w = ({ children: c }) => {
+  const [n, d] = u(!0), [s, o] = f(!1), [r, m] = u(), e = t(() => o(!0), [o]), l = t(() => o(!1), [o]), a = t((C, i = !0) => {
+    m(C), e(), d(i);
+  }, [e]), p = S(() => ({
+    content: r,
+    isOpen: s,
+    shouldShowClose: n,
+    onClose: l,
+    onOpen: e,
+    setContentAndOpen: a
+  }), [
+    r,
+    s,
+    n,
+    l,
+    e,
+    a
+  ]);
+  return /* @__PURE__ */ g(h.Provider, {
+    value: p,
+    children: c
   });
 };
 export {
-  x as ModalProvider
+  w as ModalProvider
 };

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -1,4 +1,4 @@
-import { t } from "../../components-BIHlj4yH.js";
+import { t } from "../../components-Cf345jTv.js";
 export {
   t as MultiSelectDropdown
 };

package/dist/components/MultiSelectDropdown/components/List/List.js

@@ -1,4 +1,4 @@
-import { r as o } from "../../../../components-BIHlj4yH.js";
+import { r as o } from "../../../../components-Cf345jTv.js";
 export {
   o as List
 };

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -1,4 +1,4 @@
-import { n as p } from "../../../../components-BIHlj4yH.js";
+import { n as p } from "../../../../components-Cf345jTv.js";
 export {
   p as Wrapper
 };

package/dist/components/MultiSelectDropdown/components/index.js

@@ -1,5 +1,5 @@
 import { Item as m } from "./Item/Item.js";
-import { n as p, r as t } from "../../../components-BIHlj4yH.js";
+import { n as p, r as t } from "../../../components-Cf345jTv.js";
 export {
   m as Item,
   t as List,

package/dist/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.js

@@ -1,23 +1,24 @@
+import { useClickOutside as l } from "../../../hooks/useClickOutside.js";
 import { useMultiSelectDropdown as s } from "../contexts/MultiSelectDropdown.hook.js";
 import { useCallback as a, useEffect as u, useRef as c } from "react";
-var f = () => {
-  const n = c(null), { onOpen: e } = s();
-  return u(() => {
-    const t = new AbortController(), r = (o) => {
-      o.key === "Escape" && e(!1);
-    }, l = (o) => {
-      n.current?.contains(o.target) || e(!1);
+var m = () => {
+  const o = c(null), { onOpen: e } = s();
+  return l(o, a(() => {
+    e(!1);
+  }, [e])), u(() => {
+    const t = new AbortController(), n = (r) => {
+      r.key === "Escape" && e(!1);
     };
-    return document.addEventListener("keydown", r, { signal: t.signal }), document.addEventListener("mousedown", l, { signal: t.signal }), () => {
+    return document.addEventListener("keydown", n, { signal: t.signal }), () => {
       t.abort();
     };
-  }, [e, n]), {
-    wrapperRef: n,
-    handleOpen: a((t) => {
+  }, [e]), {
+    wrapperRef: o,
+    handleOpen: (t) => {
       t.target?.closest("[data-value]") || e(!0);
-    }, [e])
+    }
   };
 };
 export {
-  f as useMultiSelectDropdown
+  m as useMultiSelectDropdown
 };

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -1,5 +1,5 @@
 import { t as p } from "../../phone-number.provider-BxQCTxp8.js";
-import { t } from "../../Wrapper-XeeD3av7.js";
+import { t } from "../../Wrapper-DP6Sxngx.js";
 import { forwardRef as f } from "react";
 import { jsx as r } from "react/jsx-runtime";
 var h = f(({ defaultCountryCode: o = "US", ...m }, e) => /* @__PURE__ */ r(p, {

package/dist/components/PhoneNumberInput/components/FlagContent/FlagContent.js

@@ -1,14 +1,16 @@
 import { t as n } from "../../../../utils-Cx-WzRZF.js";
 import { t as s } from "../../../../chevron-up-Bjpvg6ui.js";
 import { usePhoneNumberContext as l } from "../../contexts/phone-number.hook.js";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
 var u = () => {
-  const { selectedCountry: o, isOpenSelector: t, handleOpenSelector: a } = l(), { flag: r } = o;
+  const { selectedCountry: e, isOpenSelector: t, handleOpenSelector: o } = l(), { flag: r } = e;
   return /* @__PURE__ */ c("button", {
     type: "button",
+    "aria-label": `Select country, ${e.name}`,
+    "aria-expanded": t,
     className: "flex items-center gap-2 cursor-pointer",
-    onClick: () => a(!t),
-    children: [/* @__PURE__ */ e(r, {}), /* @__PURE__ */ e(s, {
+    onClick: () => o(!t),
+    children: [/* @__PURE__ */ a(r, {}), /* @__PURE__ */ a(s, {
       className: n("transition-all", "duration-100", "data-[state=open]:rotate-0", "data-[state=closed]:rotate-180", "w-5", "h-5", "text-slate-400"),
       "data-state": t ? "open" : "closed"
     })]

package/dist/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../../FlagSelectorList-BoYG-_It.js";
+import { t as o } from "../../../../FlagSelectorList-CkTR3j6O.js";
 export {
   o as FlagSelectorList
 };

package/dist/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.js

@@ -1,28 +1,28 @@
-import { t as n } from "../../../../Input-CW0VwW2T.js";
-import { t as d } from "../../../../utils-Cx-WzRZF.js";
-import { t as p } from "../../../../FlagSelectorList-BoYG-_It.js";
-import { usePhoneNumberContext as c } from "../../contexts/phone-number.hook.js";
-import { useCallback as u } from "react";
+import { t as i } from "../../../../Input-Cf44DzfE.js";
+import { t as c } from "../../../../utils-Cx-WzRZF.js";
+import { t as d } from "../../../../FlagSelectorList-CkTR3j6O.js";
+import { usePhoneNumberContext as p } from "../../contexts/phone-number.hook.js";
 import { jsx as r, jsxs as h } from "react/jsx-runtime";
-var C = ({ placeholder: e = "Search", showFlagOnSearch: o, showInputFilter: a, showNameOnSearch: t, showPlaceHolder: m = !0 }) => {
-  const { onChangeTermOfSearch: l } = c(), s = u((i) => {
-    l(i.target.value);
-  }, []);
+var v = ({ placeholder: e = "Search", showFlagOnSearch: a, showInputFilter: o, showNameOnSearch: t, showPlaceHolder: m = !0 }) => {
+  const { onChangeTermOfSearch: l } = p(), n = (s) => {
+    l(s.target.value);
+  };
   return /* @__PURE__ */ h("div", {
-    className: d("absolute", "top-full", "mt-1.5", "animate-in", "fade-in-0", "zoom-in-95", "w-full", "border", "border-gray-100", "bg-white", "shadow-sm", "py-2", "z-10", "rounded-sm", "dark:bg-metal-800", "dark:border-metal-700"),
-    children: [a && /* @__PURE__ */ r("div", {
+    className: c("absolute", "top-full", "mt-1.5", "animate-in", "fade-in-0", "zoom-in-95", "w-full", "border", "border-gray-100", "bg-white", "shadow-sm", "py-2", "z-10", "rounded-sm", "dark:bg-metal-800", "dark:border-metal-700"),
+    children: [o && /* @__PURE__ */ r("div", {
       className: "px-6 py-2.5",
-      children: /* @__PURE__ */ r(n, {
+      children: /* @__PURE__ */ r(i, {
         isSearch: !0,
+        "aria-label": "Search country",
         placeholder: m ? e : void 0,
-        onChange: s
+        onChange: n
       })
-    }), /* @__PURE__ */ r(p, {
-      showFlagOnSearch: o,
+    }), /* @__PURE__ */ r(d, {
+      showFlagOnSearch: a,
       showNameOnSearch: t
     })]
   });
 };
 export {
-  C as FlagSelectorWrapper
+  v as FlagSelectorWrapper
 };

package/dist/components/PhoneNumberInput/components/TruncateText/TruncateText.js

@@ -1,5 +1,5 @@
 import { o as f } from "../../../../rolldown-runtime-Ck3dxwZt.js";
-import { a as u, i as b, n as m, o as p } from "../../../../dist-CVDFmWf2.js";
+import { a as u, i as b, n as m, o as p } from "../../../../dist-tGUUcv8n.js";
 import { t as h } from "../../../../debounce-C5Ycjilj.js";
 import { useCallback as w, useEffect as i, useRef as g, useState as v } from "react";
 import { jsx as s, jsxs as a } from "react/jsx-runtime";

package/dist/components/PhoneNumberInput/components/Wrapper.js

@@ -1,4 +1,4 @@
-import { t as p } from "../../../Wrapper-XeeD3av7.js";
+import { t as p } from "../../../Wrapper-DP6Sxngx.js";
 export {
   p as Wrapper
 };

package/dist/components/PhoneNumberInput/components/index.js

@@ -1,5 +1,5 @@
-import { t } from "../../../FlagSelectorList-BoYG-_It.js";
-import { t as p } from "../../../Wrapper-XeeD3av7.js";
+import { t } from "../../../FlagSelectorList-CkTR3j6O.js";
+import { t as p } from "../../../Wrapper-DP6Sxngx.js";
 export {
   t as FlagSelectorList,
   p as Wrapper

package/dist/components/PieChart/PieChart.js

@@ -1,51 +1,52 @@
-import { a as $, r as D, t as v } from "../../dist-AihTpWdF.js";
-import { useMemo as i } from "react";
-import { jsx as y } from "react/jsx-runtime";
-$.register(D);
-var T = ({ values: p, colors: x = ["#525252", "#00D492"], borderColors: h = ["#FFFFFF", "#FFFFFF"], borderWidth: m = 0, cutoutPercentage: l = 80, title: n, subtitle: s, titleFontSize: a = 16, subtitleFontSize: o = 14, titleColor: g = "#111827", subtitleColor: c = "#6B7280", titleFontWeight: u = "bold", subtitleFontWeight: w = "normal", redraw: F = !0 }) => /* @__PURE__ */ y(v, {
-  data: i(() => ({ datasets: [{
-    data: p,
-    backgroundColor: x,
-    borderWidth: m,
-    borderColor: h
+import { i as e } from "../../utils-Cx-WzRZF.js";
+import { a as v, r as C, t as D } from "../../dist-AihTpWdF.js";
+import { useMemo as d } from "react";
+import { jsx as A } from "react/jsx-runtime";
+v.register(C);
+var E = ({ values: c, colors: m = [e("--color-neutral-600"), e("--color-emerald-400")], borderColors: p = [e("--color-white"), e("--color-white")], borderWidth: h = 0, cutoutPercentage: x = 80, title: a, subtitle: s, titleFontSize: n = 16, subtitleFontSize: l = 14, titleColor: g = e("--color-gray-900"), subtitleColor: w = e("--color-gray-500"), titleFontWeight: u = "bold", subtitleFontWeight: y = "normal", redraw: $ = !0 }) => /* @__PURE__ */ A(D, {
+  data: d(() => ({ datasets: [{
+    data: c,
+    backgroundColor: m,
+    borderWidth: h,
+    borderColor: p
   }] }), [
+    p,
     h,
     m,
-    x,
-    p
+    c
   ]),
-  options: i(() => ({
+  options: d(() => ({
     plugins: { legend: { display: !1 } },
-    cutout: `${l}%`,
+    cutout: `${x}%`,
     hover: { mode: null }
-  }), [l]),
-  plugins: i(() => {
-    const f = [];
-    return n && f.push({
+  }), [x]),
+  plugins: d(() => {
+    const t = [];
+    return a && t.push({
       id: "titleCenter",
-      beforeDraw(r) {
-        const e = r.ctx, t = r.width, d = r.height;
-        e.restore(), e.font = `${u} ${a}px sans-serif`, e.fillStyle = g, e.textAlign = "center", e.textBaseline = "middle", e.fillText(n, t / 2, d / 2 - (s ? a / 2 : 0)), e.save();
+      beforeDraw(o) {
+        const r = o.ctx, f = o.width, i = o.height;
+        r.restore(), r.font = `${u} ${n}px sans-serif`, r.fillStyle = g, r.textAlign = "center", r.textBaseline = "middle", r.fillText(a, f / 2, i / 2 - (s ? n / 2 : 0)), r.save();
       }
-    }), s && f.push({
+    }), s && t.push({
       id: "subtitleCenter",
-      beforeDraw(r) {
-        const e = r.ctx, t = r.width, d = r.height;
-        e.restore(), e.font = `${w} ${o}px sans-serif`, e.fillStyle = c, e.fillText(s, t / 2, d / 2 + o / 2), e.save();
+      beforeDraw(o) {
+        const r = o.ctx, f = o.width, i = o.height;
+        r.restore(), r.font = `${y} ${l}px sans-serif`, r.fillStyle = w, r.fillText(s, f / 2, i / 2 + l / 2), r.save();
       }
-    }), f;
+    }), t;
   }, [
     s,
-    c,
-    o,
     w,
-    n,
-    g,
+    l,
+    y,
     a,
+    g,
+    n,
     u
   ]),
-  redraw: F
+  redraw: $
 });
 export {
-  T as PieChart
+  E as PieChart
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,32 +1,38 @@
-import { t as n } from "../../utils-Cx-WzRZF.js";
-import { progressBarFillVariants as p, progressBarTrackVariants as x } from "./ProgressBar.variants.js";
-import { jsx as s, jsxs as i } from "react/jsx-runtime";
-var w = ({ className: l, fillClassName: r, leftContent: a, percent: c, rightContent: e, status: m, theme: d, trackClassName: t }) => {
-  const h = Math.min(Math.max(c, 0), 100), o = a || e;
+import { t as p } from "../../dist-DX0sBG3Q.js";
+import { t as v } from "../../utils-Cx-WzRZF.js";
+import { progressBarFillVariants as x, progressBarTrackVariants as f } from "./ProgressBar.variants.js";
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+var b = ({ ariaLabel: m, className: o, fillClassName: l, leftContent: r, percent: d, rightContent: e, status: s, theme: t, trackClassName: n }) => {
+  const c = Math.min(Math.max(d, 0), 100), h = r || e;
   return /* @__PURE__ */ i("div", {
-    className: n("flex flex-col gap-1 w-full", l),
-    "data-theme": d,
-    children: [o && /* @__PURE__ */ i("div", {
+    className: v("flex flex-col gap-1 w-full", o),
+    "data-theme": t,
+    children: [h && /* @__PURE__ */ i("div", {
       className: "flex items-center justify-between",
-      children: [a && /* @__PURE__ */ s("div", {
+      children: [r && /* @__PURE__ */ a("div", {
         className: "overflow-hidden text-ellipsis whitespace-nowrap",
-        children: a
-      }), e && /* @__PURE__ */ s("div", {
+        children: r
+      }), e && /* @__PURE__ */ a("div", {
         className: "text-right shrink-0",
         children: e
       })]
-    }), /* @__PURE__ */ s("div", {
-      className: x({ className: t }),
-      children: /* @__PURE__ */ s("div", {
-        className: p({
-          status: r ? null : m,
-          className: r
+    }), /* @__PURE__ */ i("div", {
+      className: f({ className: n }),
+      role: "progressbar",
+      "aria-label": m,
+      "aria-valuenow": c,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: [/* @__PURE__ */ a("div", {
+        className: x({
+          status: l ? null : s,
+          className: l
         }),
-        style: { width: `${h}%` }
-      })
+        style: { width: `${c}%` }
+      }), s && /* @__PURE__ */ a(p, { children: s })]
     })]
   });
 };
 export {
-  w as ProgressBar
+  b as ProgressBar
 };

package/dist/components/Radio/Radio.js

@@ -1,53 +1,51 @@
 import { t as a } from "../../utils-Cx-WzRZF.js";
-import { Typography as c } from "../Typography/Typography.js";
-import { labelRadioVariants as p, radioVariants as V, wrapperRadioVariants as j } from "./Radio.variants.js";
-import { forwardRef as w, useCallback as F, useId as $ } from "react";
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-var v = w(({ checked: l = !1, className: f, defaultChecked: o, disabled: e, label: N, labelTextClassName: h, description: r, descriptionClassName: x, name: m, theme: R, value: n, wrapperClassName: u, onChange: t }, y) => {
-  const i = `${$()}-${m}`, b = F((g) => {
-    t?.(g);
-  }, [t]);
-  return /* @__PURE__ */ d("label", {
-    htmlFor: i,
-    className: a(j({
-      className: u,
+import { Typography as t } from "../Typography/Typography.js";
+import { labelRadioVariants as p, radioVariants as u, wrapperRadioVariants as V } from "./Radio.variants.js";
+import { forwardRef as b, useId as j } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+var w = b(({ checked: o = !1, className: d, defaultChecked: l, disabled: e, label: f, labelTextClassName: N, description: r, descriptionClassName: h, name: m, theme: x, value: i, wrapperClassName: R, onChange: y }, g) => {
+  const n = `${j()}-${m}`;
+  return /* @__PURE__ */ c("label", {
+    htmlFor: n,
+    className: a(V({
+      className: R,
       disabled: e || !1
     })),
-    "data-theme": R,
+    "data-theme": x,
     children: [
       /* @__PURE__ */ s("input", {
-        ref: y,
-        id: i,
+        ref: g,
+        id: n,
         type: "radio",
         name: m,
-        value: n,
-        checked: l,
-        defaultChecked: o,
+        value: i,
+        checked: o,
+        defaultChecked: l,
         className: "hidden peer",
-        onChange: () => b(n),
+        onChange: () => y?.(i),
         disabled: e
       }),
-      /* @__PURE__ */ s("span", { className: a(V({
-        className: f,
+      /* @__PURE__ */ s("span", { className: a(u({
+        className: d,
         disabled: e || !1,
-        checked: l || o || !1
+        checked: o || l || !1
       })) }),
-      /* @__PURE__ */ d("div", {
+      /* @__PURE__ */ c("div", {
         className: a(r && "flex flex-col gap-1"),
-        children: [/* @__PURE__ */ s(c, {
+        children: [/* @__PURE__ */ s(t, {
           component: "span",
-          className: a(p({ className: h })),
-          children: N
-        }), r && /* @__PURE__ */ s(c, {
+          className: a(p({ className: N })),
+          children: f
+        }), r && /* @__PURE__ */ s(t, {
           component: "span",
-          className: a(p({ className: x })),
+          className: a(p({ className: h })),
           children: r
         })]
       })
     ]
   });
 });
-v.displayName = "KonstructRadio";
+w.displayName = "KonstructRadio";
 export {
-  v as Radio
+  w as Radio
 };