@konstructio/ui 0.1.2-alpha.112 → 0.1.2-alpha.114

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.variants.js

@@ -6,7 +6,7 @@ var a = r([
   "w-full",
   "relative",
   "cursor-pointer"
-]), t = r(["cursor-pointer", "select-none"]), o = r([
+]), t = r(["cursor-pointer", "select-none"]), l = r([
   "min-h-9",
   "border",
   "cursor-pointer",
@@ -23,9 +23,28 @@ var a = r([
   "border-gray-200",
   "dark:border-metal-700",
   "dark:bg-metal-800"
-]);
+], {
+  variants: {
+    hasError: {
+      true: ["border-red-600", "dark:border-red-500"],
+      false: []
+    },
+    disabled: {
+      true: [
+        "cursor-default",
+        "bg-gray-100",
+        "dark:bg-metal-700/80"
+      ],
+      false: []
+    }
+  },
+  defaultVariants: {
+    hasError: !1,
+    disabled: !1
+  }
+});
 export {
   t as labelVariants,
-  o as multiSelectDropdownVariants,
+  l as multiSelectDropdownVariants,
   a as wrapperVariants
 };

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

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

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

@@ -1,4 +1,4 @@
-import { n as p } from "../../../../components-z-LYRWfq.js";
+import { n as p } from "../../../../components-B_SWqhCL.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-z-LYRWfq.js";
+import { n as p, r as t } from "../../../components-B_SWqhCL.js";
 export {
   m as Item,
   t as List,

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,103 @@
+import { t as I } from "../../utils-DnIJruo0.js";
+import { Typography as $ } from "../Typography/Typography.js";
+import { useEffect as z, useId as B, useRef as S, useState as T } from "react";
+import { jsx as f, jsxs as w } from "react/jsx-runtime";
+var x = (c, u) => Array.from({ length: u }, (y, p) => c?.[p] ?? ""), _ = ({ autoFocus: c = !1, className: u, defaultValue: y, digitLabel: p = (l) => `Digit ${l}`, disabled: h = !1, error: m, inputClassName: N, label: j, length: a = 6, name: v, theme: A, value: D, onChange: C, onComplete: E }) => {
+  const l = `${B()}-error`, g = S([]), [K, M] = T(() => x(y, a)), o = D !== void 0 ? x(D, a) : K, s = typeof m == "string" && m.length > 0;
+  z(() => {
+    if (c) {
+      const e = o.findIndex((t) => t === "");
+      g.current[e === -1 ? a - 1 : e]?.focus();
+    }
+  }, [c]);
+  const n = (e) => {
+    const t = g.current[Math.min(Math.max(e, 0), a - 1)];
+    t?.focus(), t?.select();
+  }, b = (e) => {
+    M(e);
+    const t = e.join("");
+    C?.(t), e.every((r) => r !== "") && E?.(t);
+  }, k = (e, t) => {
+    const r = e.replace(/\D/g, "");
+    if (!r) return;
+    const i = [...o];
+    let d = t;
+    for (const P of r) {
+      if (d >= a) break;
+      i[d] = P, d += 1;
+    }
+    b(i), n(d);
+  }, R = (e, t) => {
+    const r = t.target.value.replace(/\D/g, "");
+    if (r.length > 1) {
+      k(r, e);
+      return;
+    }
+    const i = [...o];
+    i[e] = r, b(i), r && e < a - 1 && n(e + 1);
+  }, L = (e, t) => {
+    if (t.key === "Backspace" && !o[e] && e > 0) {
+      t.preventDefault();
+      const r = [...o];
+      r[e - 1] = "", b(r), n(e - 1);
+      return;
+    }
+    if (t.key === "ArrowLeft") {
+      t.preventDefault(), n(e - 1);
+      return;
+    }
+    t.key === "ArrowRight" && (t.preventDefault(), n(e + 1));
+  }, O = (e, t) => {
+    const r = t.clipboardData.getData("text");
+    r && (t.preventDefault(), k(r, e));
+  };
+  return /* @__PURE__ */ w("div", {
+    className: "flex flex-col gap-2",
+    "data-theme": A,
+    children: [/* @__PURE__ */ w("fieldset", {
+      className: I("flex gap-3 border-0 p-0", u),
+      "aria-describedby": s ? l : void 0,
+      "aria-invalid": s || void 0,
+      disabled: h,
+      children: [
+        /* @__PURE__ */ f("legend", {
+          className: "sr-only",
+          children: j
+        }),
+        o.map((e, t) => /* @__PURE__ */ f("input", {
+          ref: (r) => {
+            g.current[t] = r;
+          },
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: t === 0 ? "one-time-code" : "off",
+          maxLength: t === 0 ? a : 1,
+          value: e,
+          disabled: h,
+          "aria-label": p(t + 1),
+          "aria-invalid": s || void 0,
+          className: I("size-10 rounded border bg-white text-center text-base text-slate-800 transition-all", "focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-1", "disabled:cursor-not-allowed disabled:bg-gray-100", "dark:bg-metal-800 dark:text-metal-50 dark:disabled:bg-metal-900", s ? "border-red-600 focus-visible:ring-red-600 dark:border-red-500" : "border-gray-200 focus-visible:ring-aurora-500 dark:border-metal-700", N),
+          onChange: (r) => R(t, r),
+          onKeyDown: (r) => L(t, r),
+          onPaste: (r) => O(t, r),
+          onFocus: (r) => r.target.select()
+        }, t)),
+        v ? /* @__PURE__ */ f("input", {
+          type: "hidden",
+          name: v,
+          value: o.join("")
+        }) : null
+      ]
+    }), s ? /* @__PURE__ */ f($, {
+      component: "span",
+      id: l,
+      role: "alert",
+      className: "text-xs tracking-normal text-red-700 dark:text-red-400",
+      children: m
+    }) : null]
+  });
+};
+_.displayName = "KonstructOtpInput";
+export {
+  _ as OtpInput
+};

package/dist/components/PasswordRules/PasswordRules.js

@@ -0,0 +1,51 @@
+import { t as s } from "../../utils-DnIJruo0.js";
+import { CheckAltIcon as x } from "../../assets/icons/components/CheckAlt.js";
+import { Typography as i } from "../Typography/Typography.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+var u = ({ className: r, metLabel: c = "met", pendingLabel: o = "pending", rules: m, theme: d, title: n, value: p }) => /* @__PURE__ */ l("div", {
+  "aria-live": "polite",
+  "data-theme": d,
+  className: s("flex flex-col gap-1", r),
+  children: [n ? /* @__PURE__ */ e(i, {
+    variant: "body3",
+    component: "p",
+    className: "text-slate-700 dark:text-metal-200",
+    children: n
+  }) : null, /* @__PURE__ */ e("ul", {
+    className: "m-0 flex list-none flex-col gap-1 p-0",
+    children: m.map((t) => {
+      const a = t.test(p);
+      return /* @__PURE__ */ l("li", {
+        "data-met": a,
+        className: "flex items-center gap-3",
+        children: [
+          /* @__PURE__ */ l("span", {
+            className: "relative inline-flex size-4 items-center justify-center",
+            children: [/* @__PURE__ */ e("span", {
+              "aria-hidden": "true",
+              className: s("absolute inset-0 inline-flex items-center justify-center leading-none text-slate-500 transition-all duration-200 ease-out dark:text-metal-400", a ? "scale-75 opacity-0" : "scale-100 opacity-100"),
+              children: "•"
+            }), /* @__PURE__ */ e(x, {
+              "aria-hidden": "true",
+              className: s("absolute inset-0 size-4 text-green-600 transition-all duration-200 ease-out dark:text-green-400", a ? "scale-100 opacity-100" : "scale-75 opacity-0")
+            })]
+          }),
+          /* @__PURE__ */ e(i, {
+            variant: "body3",
+            component: "span",
+            className: "text-slate-700 dark:text-metal-200",
+            children: t.label
+          }),
+          /* @__PURE__ */ e("span", {
+            className: "sr-only",
+            children: a ? c : o
+          })
+        ]
+      }, t.id);
+    })
+  })]
+});
+u.displayName = "KonstructPasswordRules";
+export {
+  u as PasswordRules
+};

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -1,14 +1,43 @@
-import { t as p } from "../../phone-number.provider-BASl9fGG.js";
-import { t } from "../../Wrapper-BxfB3BDa.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, {
-  defaultCountryCode: o,
-  children: /* @__PURE__ */ r(t, {
-    ref: e,
-    ...m
+import { t as c } from "../../utils-DnIJruo0.js";
+import { Typography as t } from "../Typography/Typography.js";
+import { labelVariants as p, phoneNumberInputVariants as d } from "./PhoneNumberInput.variants.js";
+import { Suspense as u, forwardRef as h, lazy as f } from "react";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+var N = f(() => import("./components/PhoneNumberInputContent.js").then((a) => ({ default: a.PhoneNumberInputContent }))), v = ({ error: a, isRequired: r, label: n, labelClassName: s, labelWrapperClassName: m, wrapperClassName: o }) => {
+  const i = typeof a == "string" && a.length > 0;
+  return /* @__PURE__ */ l("div", {
+    className: "w-full flex flex-col gap-2",
+    "aria-busy": "true",
+    children: [n ? /* @__PURE__ */ e("div", {
+      className: c(m),
+      children: /* @__PURE__ */ l(t, {
+        component: "span",
+        className: p({ className: s }),
+        children: [n, r && /* @__PURE__ */ e(t, {
+          component: "span",
+          "aria-hidden": "true",
+          className: "text-red-600 dark:text-red-500 ml-1",
+          children: "*"
+        })]
+      })
+    }) : null, /* @__PURE__ */ e("div", {
+      className: d({
+        className: o,
+        variant: i ? "error" : "default"
+      }),
+      children: /* @__PURE__ */ e("div", {
+        className: "p-2 flex items-center gap-2.5",
+        children: /* @__PURE__ */ e("div", { className: "h-6 w-full" })
+      })
+    })]
+  });
+}, P = h((a, r) => /* @__PURE__ */ e(u, {
+  fallback: /* @__PURE__ */ e(v, { ...a }),
+  children: /* @__PURE__ */ e(N, {
+    ref: r,
+    ...a
   })
 }));
 export {
-  h as PhoneNumberInput
+  P as PhoneNumberInput
 };

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

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

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

@@ -1,10 +1,10 @@
 import { t as i } from "../../../../Input-2M2I_H60.js";
 import { t as c } from "../../../../utils-DnIJruo0.js";
-import { t as d } from "../../../../FlagSelectorList-ClKGwDpS.js";
-import { usePhoneNumberContext as p } from "../../contexts/phone-number.hook.js";
+import { usePhoneNumberContext as d } from "../../contexts/phone-number.hook.js";
+import { t as p } from "../../../../FlagSelectorList-iZ3gUVpf.js";
 import { jsx as r, jsxs as h } from "react/jsx-runtime";
 var v = ({ placeholder: e = "Search", showFlagOnSearch: a, showInputFilter: o, showNameOnSearch: t, showPlaceHolder: m = !0 }) => {
-  const { onChangeTermOfSearch: l } = p(), n = (s) => {
+  const { onChangeTermOfSearch: l } = d(), n = (s) => {
     l(s.target.value);
   };
   return /* @__PURE__ */ h("div", {
@@ -17,7 +17,7 @@ var v = ({ placeholder: e = "Search", showFlagOnSearch: a, showInputFilter: o, s
         placeholder: m ? e : void 0,
         onChange: n
       })
-    }), /* @__PURE__ */ r(d, {
+    }), /* @__PURE__ */ r(p, {
       showFlagOnSearch: a,
       showNameOnSearch: t
     })]

package/dist/components/PhoneNumberInput/components/PhoneNumberInputContent.js

@@ -0,0 +1,15 @@
+import { t as m } from "../../../phone-number.provider-DnuL-yYF.js";
+import { t as n } from "../../../Wrapper-ThpRi_Gg.js";
+import { forwardRef as p } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var a = p(({ defaultCountryCode: o = "US", ...e }, t) => /* @__PURE__ */ r(m, {
+  defaultCountryCode: o,
+  children: /* @__PURE__ */ r(n, {
+    ref: t,
+    ...e
+  })
+}));
+a.displayName = "PhoneNumberInputContent";
+export {
+  a as PhoneNumberInputContent
+};

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

@@ -1,31 +1,31 @@
 import { o as f } from "../../../../rolldown-runtime-Dw9YIBcH.js";
-import { a as u, i as b, n as m, o as p } from "../../../../dist-D5Q2IYuC.js";
-import { t as h } from "../../../../debounce-BdyZeJQk.js";
-import { useCallback as w, useEffect as i, useRef as g, useState as v } from "react";
+import { a as u, o as b, r as m, t as p } from "../../../../dist-vUCyiTQy.js";
+import { t as h } from "../../../../debounce-dMRJxNsT.js";
+import { useCallback as T, useEffect as i, useRef as w, useState as g } from "react";
 import { jsx as s, jsxs as a } from "react/jsx-runtime";
-var k = /* @__PURE__ */ f(h(), 1), N = ({ text: r, prefix: n }) => {
-  const o = g(null), [c, d] = v(!1), t = w(() => {
-    const e = o.current;
+var v = /* @__PURE__ */ f(h(), 1), R = ({ text: r, prefix: o }) => {
+  const n = w(null), [c, d] = g(!1), t = T(() => {
+    const e = n.current;
     e && d(e.scrollWidth > e.clientWidth);
   }, []);
   return i(() => {
-    const e = new AbortController(), l = (0, k.default)(t, 300);
+    const e = new AbortController(), l = (0, v.default)(t, 300);
     return window.addEventListener("resize", l, { signal: e.signal }), () => {
       e.abort(), l.cancel();
     };
   }, [t]), i(() => {
     t();
-  }, [r, t]), c ? /* @__PURE__ */ s(b, {
+  }, [r, t]), c ? /* @__PURE__ */ s(u, {
     delayDuration: 0,
-    children: /* @__PURE__ */ a(u, { children: [/* @__PURE__ */ s(p, {
+    children: /* @__PURE__ */ a(p, { children: [/* @__PURE__ */ s(b, {
       asChild: !0,
       children: /* @__PURE__ */ a("span", {
-        ref: o,
+        ref: n,
         className: "w-full truncate cursor-pointer",
         children: [
           r,
           " ",
-          n
+          o
         ]
       })
     }), /* @__PURE__ */ a(m, {
@@ -35,18 +35,18 @@ var k = /* @__PURE__ */ f(h(), 1), N = ({ text: r, prefix: n }) => {
       children: [
         r,
         " ",
-        n
+        o
       ]
     })] })
   }) : /* @__PURE__ */ a("span", {
-    ref: o,
+    ref: n,
     className: "w-full truncate",
     children: [r, /* @__PURE__ */ s("span", {
       className: "text-slate-500",
-      children: n
+      children: o
     })]
   });
 };
 export {
-  N as TruncateText
+  R as TruncateText
 };

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

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

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

@@ -1,5 +1,5 @@
-import { t } from "../../../FlagSelectorList-ClKGwDpS.js";
-import { t as p } from "../../../Wrapper-BxfB3BDa.js";
+import { t } from "../../../FlagSelectorList-iZ3gUVpf.js";
+import { t as p } from "../../../Wrapper-ThpRi_Gg.js";
 export {
   t as FlagSelectorList,
   p as Wrapper

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

@@ -1,8 +1,8 @@
-import { PhoneNumberContext as r } from "./phone-number.context.js";
-import { t as m } from "../../../phone-number.provider-BASl9fGG.js";
+import { t as r } from "../../../phone-number.provider-DnuL-yYF.js";
+import { PhoneNumberContext as m } from "./phone-number.context.js";
 import { usePhoneNumberContext as n } from "./phone-number.hook.js";
 export {
-  r as PhoneNumberContext,
-  m as PhoneNumberProvider,
+  m as PhoneNumberContext,
+  r as PhoneNumberProvider,
   n as usePhoneNumberContext
 };

package/dist/components/PhoneNumberInput/contexts/phone-number.provider.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../phone-number.provider-BASl9fGG.js";
+import { t as o } from "../../../phone-number.provider-DnuL-yYF.js";
 export {
   o as PhoneNumberProvider
 };

package/dist/components/PieChart/PieChart.js

@@ -1,55 +1,12 @@
-import { a as e } from "../../utils-DnIJruo0.js";
-import { a as A, r as T, t as j } from "../../dist-Dg3vyTx9.js";
-import { useMemo as i } from "react";
-import { jsx as k } from "react/jsx-runtime";
-A.register(T);
-var G = ({ values: d, 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: n, subtitle: s, titleFontSize: a = 16, subtitleFontSize: t = 14, titleColor: g = e("--color-gray-900"), subtitleColor: w = e("--color-gray-500"), titleFontWeight: u = "bold", subtitleFontWeight: y = "normal", redraw: $ = !0 }) => {
-  const v = i(() => ({ datasets: [{
-    data: d,
-    backgroundColor: m,
-    borderWidth: h,
-    borderColor: p
-  }] }), [
-    p,
-    h,
-    m,
-    d
-  ]), C = i(() => ({
-    plugins: { legend: { display: !1 } },
-    cutout: `${x}%`,
-    hover: { mode: null }
-  }), [x]), D = i(() => {
-    const l = [];
-    return n && l.push({
-      id: "titleCenter",
-      beforeDraw(o) {
-        const r = o.ctx, c = o.width, f = o.height;
-        r.restore(), r.font = `${u} ${a}px sans-serif`, r.fillStyle = g, r.textAlign = "center", r.textBaseline = "middle", r.fillText(n, c / 2, f / 2 - (s ? a / 2 : 0)), r.save();
-      }
-    }), s && l.push({
-      id: "subtitleCenter",
-      beforeDraw(o) {
-        const r = o.ctx, c = o.width, f = o.height;
-        r.restore(), r.font = `${y} ${t}px sans-serif`, r.fillStyle = w, r.fillText(s, c / 2, f / 2 + t / 2), r.save();
-      }
-    }), l;
-  }, [
-    s,
-    w,
-    t,
-    y,
-    n,
-    g,
-    a,
-    u
-  ]);
-  return /* @__PURE__ */ k(j, {
-    data: v,
-    options: C,
-    plugins: D,
-    redraw: $
-  });
-};
+import { Suspense as a, lazy as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+var l = e(() => import("./components/PieChartContent/PieChartContent.js").then((r) => ({ default: r.PieChartContent }))), n = (r) => /* @__PURE__ */ t(a, {
+  fallback: /* @__PURE__ */ t("div", {
+    className: "w-full h-full",
+    "aria-busy": "true"
+  }),
+  children: /* @__PURE__ */ t(l, { ...r })
+});
 export {
-  G as PieChart
+  n as PieChart
 };

package/dist/components/PieChart/components/PieChartContent/PieChartContent.js

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

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,23 +1,23 @@
-import { t as p } from "../../dist-DX0sBG3Q.js";
+import { t as p } from "../../dist-C_jtUTU9.js";
 import { t as v } from "../../utils-DnIJruo0.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;
+var b = ({ ariaLabel: m, className: d, fillClassName: l, leftContent: e, percent: o, rightContent: r, status: s, theme: n, trackClassName: t }) => {
+  const c = Math.min(Math.max(o, 0), 100), h = e || r;
   return /* @__PURE__ */ i("div", {
-    className: v("flex flex-col gap-1 w-full", o),
-    "data-theme": t,
+    className: v("flex flex-col gap-1 w-full", d),
+    "data-theme": n,
     children: [h && /* @__PURE__ */ i("div", {
       className: "flex items-center justify-between",
-      children: [r && /* @__PURE__ */ a("div", {
+      children: [e && /* @__PURE__ */ a("div", {
         className: "overflow-hidden text-ellipsis whitespace-nowrap",
-        children: r
-      }), e && /* @__PURE__ */ a("div", {
-        className: "text-right shrink-0",
         children: e
+      }), r && /* @__PURE__ */ a("div", {
+        className: "text-right shrink-0",
+        children: r
       })]
     }), /* @__PURE__ */ i("div", {
-      className: f({ className: n }),
+      className: f({ className: t }),
       role: "progressbar",
       "aria-label": m,
       "aria-valuenow": c,

package/dist/components/Radio/Radio.js

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

package/dist/components/Radio/Radio.variants.js

@@ -32,7 +32,10 @@ var a = e([
   "h-4",
   "w-4",
   "peer-checked:before:h-[70%]",
-  "peer-checked:before:w-[70%]"
+  "peer-checked:before:w-[70%]",
+  "peer-focus-visible:outline-2",
+  "peer-focus-visible:outline-offset-2",
+  "peer-focus-visible:outline-aurora-500"
 ], {
   variants: {
     disabled: {