@lazar-ui/kit 0.3.0 → 0.5.0

package/dist/input.js

@@ -1,120 +1,211 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import v from "clsx";
-import { useState as g, useCallback as N } from "react";
-import { g as U } from "./getVariantClassName-D7Nhpuec.mjs";
-import { I as f } from "./Icon-DsTlU3j3.mjs";
-import { u as E } from "./useLocale-DdHNhmvT.mjs";
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import z from "clsx";
+import { useState as N, useCallback as _ } from "react";
+import { g as S } from "./getVariantClassName-D7Nhpuec.mjs";
+import { I as Y } from "./Icon-DsTlU3j3.mjs";
+import { u as A } from "./useLocale-CJh-krrY.mjs";
 import './input.css';const m = {
   INPUT: "Input",
+  INPUT_DATE: "InputDate",
   INPUT_EMAIL: "InputEmail",
   INPUT_NUMBER: "InputNumber",
   INPUT_PASSWORD: "InputPassword",
   INPUT_PHONE: "InputPhone"
-}, S = "_root_1k18n_17", C = "_invalid_1k18n_36", M = "_disabled_1k18n_42", T = "_sizeSm_1k18n_56", B = "_sizeMd_1k18n_60", L = "_sizeLg_1k18n_64", x = "_control_1k18n_68", A = "_before_1k18n_99", O = "_after_1k18n_100", $ = "_togglePassword_1k18n_108", l = {
-  root: S,
-  invalid: C,
-  disabled: M,
-  sizeSm: T,
-  sizeMd: B,
-  sizeLg: L,
+}, E = "_root_8a405_17", U = "_invalid_8a405_36", C = "_disabled_8a405_42", B = "_sizeSm_8a405_56", L = "_sizeMd_8a405_60", k = "_sizeLg_8a405_64", x = "_control_8a405_68", O = "_before_8a405_100", $ = "_after_8a405_101", H = "_togglePassword_8a405_109", p = {
+  root: E,
+  invalid: U,
+  disabled: C,
+  sizeSm: B,
+  sizeMd: L,
+  sizeLg: k,
   control: x,
-  before: A,
-  after: O,
-  togglePassword: $
-}, d = (n) => {
-  const { ref: e, invalid: s = !1, size: a = "md", before: r, after: t, className: i, onChange: c, onBlur: u, onFocus: _, ...p } = n, w = v(
-    l.root,
-    U("size", a, l),
+  before: O,
+  after: $,
+  togglePassword: H
+}, f = (s) => {
+  const { ref: e, invalid: t = !1, size: o = "md", before: r, after: n, className: a, onChange: l, onBlur: c, onFocus: u, ...d } = s, g = z(
+    p.root,
+    S("size", o, p),
     {
-      [l.disabled]: p.disabled === !0,
-      [l.invalid]: s
+      [p.disabled]: d.disabled === !0,
+      [p.invalid]: t
     },
-    i
-  ), z = (k) => {
-    c?.(k.target.value);
+    a
+  ), I = (h) => {
+    l?.(h.target.value);
   };
-  return /* @__PURE__ */ y("div", { className: w, children: [
-    r && /* @__PURE__ */ o("span", { className: l.before, children: r }),
-    /* @__PURE__ */ o("input", { ref: e, className: l.control, onChange: z, onBlur: u, onFocus: _, ...p }),
-    t && /* @__PURE__ */ o("span", { className: l.after, children: t })
+  return /* @__PURE__ */ v("div", { className: g, children: [
+    r && /* @__PURE__ */ i("span", { className: p.before, children: r }),
+    /* @__PURE__ */ i("input", { ref: e, className: p.control, onChange: I, onBlur: c, onFocus: u, ...d }),
+    n && /* @__PURE__ */ i("span", { className: p.after, children: n })
   ] });
 };
-d.displayName = m.INPUT;
-function D(n) {
-  const e = n.replace(/\D/g, "").slice(0, 11);
+f.displayName = m.INPUT;
+const R = 8;
+function j(s, e) {
+  const t = s.replace(/\D/g, "").slice(0, R);
+  if (!t)
+    return "";
+  const o = e.replace(/[A-Z]/g, "").charAt(0), r = F(e);
+  let n = "";
+  for (let a = 0; a < t.length; a++)
+    r.has(a) && (n += o), n += t[a];
+  return n;
+}
+function F(s) {
+  switch (s) {
+    case "DD/MM/YYYY":
+    case "MM/DD/YYYY":
+    case "DD.MM.YYYY":
+    case "MM.DD.YYYY":
+      return /* @__PURE__ */ new Set([2, 4]);
+    case "YYYY-MM-DD":
+      return /* @__PURE__ */ new Set([4, 6]);
+    default:
+      return /* @__PURE__ */ new Set([2, 4]);
+  }
+}
+function V(s) {
+  const e = s.replace(/\D/g, "").slice(0, 11);
   if (!e)
     return "";
-  let s = "+7";
-  return e.length > 1 && (s += ` (${e.slice(1, 4)}`), e.length >= 4 && (s += `) ${e.slice(4, 7)}`), e.length >= 7 && (s += `-${e.slice(7, 9)}`), e.length >= 9 && (s += `-${e.slice(9, 11)}`), s;
+  let t = "+7";
+  return e.length > 1 && (t += ` (${e.slice(1, 4)}`), e.length >= 4 && (t += `) ${e.slice(4, 7)}`), e.length >= 7 && (t += `-${e.slice(7, 9)}`), e.length >= 9 && (t += `-${e.slice(9, 11)}`), t;
+}
+const W = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function Z(s, e) {
+  const o = e.replace(/[A-Z]/g, "").charAt(0);
+  if (!o)
+    return !1;
+  const r = s.split(o);
+  if (r.length !== 3)
+    return !1;
+  const [n, a, l] = r;
+  if (!n || !a || !l)
+    return !1;
+  let c = 0, u = 0, d = 0;
+  switch (e) {
+    case "DD/MM/YYYY":
+    case "DD.MM.YYYY":
+      c = parseInt(n, 10), u = parseInt(a, 10), d = parseInt(l, 10);
+      break;
+    case "MM/DD/YYYY":
+    case "MM.DD.YYYY":
+      u = parseInt(n, 10), c = parseInt(a, 10), d = parseInt(l, 10);
+      break;
+    case "YYYY-MM-DD":
+      c = parseInt(l, 10), u = parseInt(a, 10), d = parseInt(n, 10);
+      break;
+    default:
+      return !1;
+  }
+  if (u < 1 || u > 12 || d < 1)
+    return !1;
+  const I = u === 2 && G(d) ? 29 : W[u] ?? 0;
+  return c >= 1 && c <= I;
 }
-function R(n) {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n);
+function G(s) {
+  return s % 4 === 0 && s % 100 !== 0 || s % 400 === 0;
 }
-const I = (n) => {
-  const { ref: e, before: s, onBlur: a, invalid: r, ...t } = n, [i, c] = g(!1), u = N(
-    (p) => {
-      c(!0), a?.(p);
+function X(s) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s);
+}
+const M = (s) => {
+  const { ref: e, format: t, before: o, value: r, onChange: n, onBlur: a, invalid: l, ...c } = s, [u, d] = N(!1), g = _(
+    (D) => {
+      const T = j(D, t);
+      n?.(T);
+    },
+    [t, n]
+  ), I = _(
+    (D) => {
+      d(!0), a?.(D);
     },
     [a]
-  ), _ = r || i && t.value != null && !R(t.value);
-  return /* @__PURE__ */ o(
-    d,
+  ), h = l || u && typeof r == "string" && r.length > 0 && !Z(r, t);
+  return /* @__PURE__ */ i(
+    f,
+    {
+      ref: e,
+      type: "text",
+      inputMode: "numeric",
+      before: o ?? /* @__PURE__ */ i(Y, { name: "calendar", size: 16 }),
+      maxLength: 10,
+      value: r,
+      onChange: g,
+      onBlur: I,
+      invalid: h,
+      ...c
+    }
+  );
+};
+M.displayName = m.INPUT_DATE;
+const b = (s) => {
+  const { ref: e, before: t, onBlur: o, invalid: r, ...n } = s, [a, l] = N(!1), c = _(
+    (d) => {
+      l(!0), o?.(d);
+    },
+    [o]
+  ), u = r || a && n.value != null && !X(n.value);
+  return /* @__PURE__ */ i(
+    f,
     {
       ref: e,
       type: "email",
-      before: s ?? /* @__PURE__ */ o(f, { name: "mail", size: 16 }),
-      invalid: _,
-      onBlur: u,
-      ...t
+      before: t ?? /* @__PURE__ */ i(Y, { name: "mail", size: 16 }),
+      invalid: u,
+      onBlur: c,
+      ...n
     }
   );
 };
-I.displayName = m.INPUT_EMAIL;
-const P = (n) => {
-  const { ref: e, ...s } = n;
-  return /* @__PURE__ */ o(d, { ref: e, type: "number", inputMode: "numeric", ...s });
+b.displayName = m.INPUT_EMAIL;
+const P = (s) => {
+  const { ref: e, ...t } = s;
+  return /* @__PURE__ */ i(f, { ref: e, type: "number", inputMode: "numeric", ...t });
 };
 P.displayName = m.INPUT_NUMBER;
-const b = (n) => {
-  const { ref: e, after: s, ...a } = n, r = E(), [t, i] = g(!1), c = N(() => i((u) => !u), []);
-  return /* @__PURE__ */ o(
-    d,
+const w = (s) => {
+  const { ref: e, after: t, ...o } = s, r = A(), [n, a] = N(!1), l = _(() => a((c) => !c), []);
+  return /* @__PURE__ */ i(
+    f,
     {
       ref: e,
-      type: t ? "text" : "password",
-      after: s ?? /* @__PURE__ */ o(
+      type: n ? "text" : "password",
+      after: t ?? /* @__PURE__ */ i(
         "button",
         {
           type: "button",
-          className: l.togglePassword,
-          onClick: c,
+          className: p.togglePassword,
+          onClick: l,
           tabIndex: -1,
-          "aria-label": t ? r.input.passwordHide : r.input.passwordShow,
-          children: t ? /* @__PURE__ */ o(f, { name: "eye-off", size: 16 }) : /* @__PURE__ */ o(f, { name: "eye", size: 16 })
+          "aria-label": n ? r.Input.Password.passwordHide : r.Input.Password.passwordShow,
+          children: n ? /* @__PURE__ */ i(Y, { name: "eye-off", size: 16 }) : /* @__PURE__ */ i(Y, { name: "eye", size: 16 })
         }
       ),
-      ...a
+      ...o
     }
   );
 };
-b.displayName = m.INPUT_PASSWORD;
-const h = (n) => {
-  const { ref: e, before: s, onChange: a, ...r } = n, t = N(
-    (i) => {
-      const c = D(i);
-      a?.(c);
+w.displayName = m.INPUT_PASSWORD;
+const y = (s) => {
+  const { ref: e, before: t, onChange: o, ...r } = s, n = _(
+    (a) => {
+      const l = V(a);
+      o?.(l);
     },
-    [a]
+    [o]
   );
-  return /* @__PURE__ */ o(d, { ref: e, type: "tel", before: s ?? /* @__PURE__ */ o(f, { name: "phone", size: 16 }), onChange: t, ...r });
+  return /* @__PURE__ */ i(f, { ref: e, type: "tel", before: t ?? /* @__PURE__ */ i(Y, { name: "phone", size: 16 }), onChange: n, ...r });
 };
-h.displayName = m.INPUT_PHONE;
-const q = Object.assign(d, {
-  Email: I,
+y.displayName = m.INPUT_PHONE;
+const te = Object.assign(f, {
+  Date: M,
+  Email: b,
   Number: P,
-  Password: b,
-  Phone: h
+  Password: w,
+  Phone: y
 });
 export {
-  q as Input
+  te as Input
 };

package/dist/lazar-ui-provider.d.ts

@@ -6,24 +6,44 @@ export declare interface IConfigContext {
 }
 
 export declare interface ILocaleMessages {
-    dialog: {
+    Chip: {
+        remove: string;
+    };
+    Dialog: {
         close: string;
     };
-    input: {
-        passwordHide: string;
-        passwordShow: string;
+    Drawer: {
+        Header: {
+            close: string;
+        };
+    };
+    Input: {
+        Password: {
+            passwordHide: string;
+            passwordShow: string;
+        };
     };
-    pagination: {
+    Pagination: {
+        items: string;
+        label: string;
         next: string;
-        page: string;
-        pagination: string;
+        of: string;
         prev: string;
+        Item: {
+            page: string;
+        };
     };
-    select: {
+    Select: {
         clear: string;
         noOptions: string;
         placeholder: string;
     };
+    Table: {
+        ActiveFilters: {
+            clearAll: string;
+            remove: string;
+        };
+    };
 }
 
 declare interface IProps extends default_2.PropsWithChildren {
@@ -58,7 +78,7 @@ declare interface IProps extends default_2.PropsWithChildren {
  * // With custom locale and theme target
  * <LazarUiProvider
  *   theme="dark"
- *   locale={{ dialog: { close: 'Закрыть' } }}
+ *   locale={{ Dialog: { close: 'Закрыть' } }}
  *   themeTarget={document.getElementById('root')}
  * >
  *   <YourApp />

package/dist/lazar-ui-provider.js

@@ -1,5 +1,5 @@
-import { C as t } from "./useLocale-DdHNhmvT.mjs";
-import { L as u, u as x } from "./useLocale-DdHNhmvT.mjs";
+import { C as t } from "./useLocale-CJh-krrY.mjs";
+import { L as u, u as x } from "./useLocale-CJh-krrY.mjs";
 import { useContext as o } from "react";
 const i = () => {
   const r = o(t);

package/dist/pagination.js

@@ -1,15 +1,15 @@
 import { jsx as c, jsxs as N } from "react/jsx-runtime";
 import { createContext as L, useContext as S, useMemo as y, useCallback as R } from "react";
 import f from "clsx";
-import { u as v } from "./useLocale-DdHNhmvT.mjs";
+import { u as v } from "./useLocale-CJh-krrY.mjs";
 import { g as C } from "./getVariantClassName-D7Nhpuec.mjs";
 import { I as z } from "./Icon-DsTlU3j3.mjs";
-import './pagination.css';const P = L(null), w = P.Provider, I = () => {
+import './pagination.css';const P = L(null), I = P.Provider, w = () => {
   const n = S(P);
   if (!n)
     throw new Error("Pagination sub-component must be used within a Pagination");
   return n;
-}, $ = "_button_nl5gc_14", E = "_active_nl5gc_40", A = "_prevNext_nl5gc_44", j = "_sizeSm_nl5gc_49", k = "_sizeMd_nl5gc_55", B = "_sizeLg_nl5gc_61", m = {
+}, $ = "_button_nl5gc_14", E = "_active_nl5gc_40", A = "_prevNext_nl5gc_44", j = "_sizeSm_nl5gc_49", k = "_sizeMd_nl5gc_55", B = "_sizeLg_nl5gc_61", _ = {
   button: $,
   active: E,
   prevNext: A,
@@ -17,12 +17,12 @@ import './pagination.css';const P = L(null), w = P.Provider, I = () => {
   sizeMd: k,
   sizeLg: B
 }, x = (n) => {
-  const { page: e, type: a = "page", children: t } = n, { currentPage: r, totalPages: l, disabled: s, onChange: p, size: u } = I(), i = v(), g = e === r, o = s || e < 1 || e > l || g;
-  let d, _;
-  a === "prev" ? (d = i.pagination.prev, _ = t ?? /* @__PURE__ */ c(z, { name: "chevron-left", size: 14 })) : a === "next" ? (d = i.pagination.next, _ = t ?? /* @__PURE__ */ c(z, { name: "chevron-right", size: 14 })) : (d = i.pagination.page.replace("{page}", String(e)), _ = t ?? e);
-  const M = f(m.button, C("size", u, m), {
-    [m.active]: g,
-    [m.prevNext]: a !== "page"
+  const { page: e, type: a = "page", children: t } = n, { currentPage: l, totalPages: r, disabled: s, onChange: p, size: u } = w(), i = v(), g = e === l, o = s || e < 1 || e > r || g;
+  let d, m;
+  a === "prev" ? (d = i.Pagination.prev, m = t ?? /* @__PURE__ */ c(z, { name: "chevron-left", size: 14 })) : a === "next" ? (d = i.Pagination.next, m = t ?? /* @__PURE__ */ c(z, { name: "chevron-right", size: 14 })) : (d = i.Pagination.Item.page.replace("{page}", String(e)), m = t ?? e);
+  const M = f(_.button, C("size", u, _), {
+    [_.active]: g,
+    [_.prevNext]: a !== "page"
   });
   return /* @__PURE__ */ c(
     "button",
@@ -33,22 +33,22 @@ import './pagination.css';const P = L(null), w = P.Provider, I = () => {
       disabled: o,
       onClick: () => p(e),
       type: "button",
-      children: _
+      children: m
     }
   );
 }, D = "Pagination", b = (n, e) => Array.from({ length: e - n + 1 }, (a, t) => n + t), V = (n, e) => {
   if (e <= 7)
     return b(1, e);
-  const r = Math.max(n - 1, 1), l = Math.min(n + 1, e), s = r > 2, p = l < e - 1;
+  const l = Math.max(n - 1, 1), r = Math.min(n + 1, e), s = l > 2, p = r < e - 1;
   if (!s && p) {
-    const i = Math.min(l + 1, e);
+    const i = Math.min(r + 1, e);
     return [...b(1, i), "ellipsis", e];
   }
   if (s && !p) {
-    const i = Math.max(r - 1, 1);
+    const i = Math.max(l - 1, 1);
     return [1, "ellipsis", ...b(i, e)];
   }
-  return [1, "ellipsis", ...b(r, l), "ellipsis", e];
+  return [1, "ellipsis", ...b(l, r), "ellipsis", e];
 }, Y = "_root_60eox_6", q = "_disabled_60eox_13", F = "_ellipsis_60eox_18", G = "_sizeSm_60eox_27", H = "_sizeMd_60eox_33", J = "_sizeLg_60eox_39", h = {
   root: Y,
   disabled: q,
@@ -57,16 +57,16 @@ import './pagination.css';const P = L(null), w = P.Provider, I = () => {
   sizeMd: H,
   sizeLg: J
 }, K = (n) => {
-  const { disabled: e = !1, onChange: a, page: t, showPrevNext: r = !0, size: l = "md", totalPages: s } = n, p = v(), u = y(() => V(t, s), [t, s]), i = R(
+  const { disabled: e = !1, onChange: a, page: t, showPrevNext: l = !0, size: r = "md", totalPages: s } = n, p = v(), u = y(() => V(t, s), [t, s]), i = R(
     (o) => {
       e || o < 1 || o > s || a?.(o);
     },
     [e, a, s]
-  ), g = f(h.root, C("size", l, h), { [h.disabled]: e });
-  return /* @__PURE__ */ c(w, { value: { currentPage: t, disabled: e, onChange: i, size: l, totalPages: s }, children: /* @__PURE__ */ N("nav", { "aria-label": p.pagination.pagination, className: g, children: [
-    r && /* @__PURE__ */ c(x, { page: t - 1, type: "prev" }),
+  ), g = f(h.root, C("size", r, h), { [h.disabled]: e });
+  return /* @__PURE__ */ c(I, { value: { currentPage: t, disabled: e, onChange: i, size: r, totalPages: s }, children: /* @__PURE__ */ N("nav", { "aria-label": p.Pagination.label, className: g, children: [
+    l && /* @__PURE__ */ c(x, { page: t - 1, type: "prev" }),
     u.map((o, d) => o === "ellipsis" ? /* @__PURE__ */ c("span", { "aria-hidden": "true", className: h.ellipsis, children: "…" }, `ellipsis-${d}`) : /* @__PURE__ */ c(x, { page: o, type: "page" }, o)),
-    r && /* @__PURE__ */ c(x, { page: t + 1, type: "next" })
+    l && /* @__PURE__ */ c(x, { page: t + 1, type: "next" })
   ] }) });
 };
 K.displayName = D;

package/dist/radio.css

@@ -0,0 +1 @@
+@charset "UTF-8";._item_1mf7l_3{align-items:flex-start;cursor:pointer;display:inline-flex;gap:var(--radio-gap);position:relative;-webkit-user-select:none;user-select:none;vertical-align:middle}._item_1mf7l_3._disabled_1mf7l_12{cursor:not-allowed;opacity:.5}._item_1mf7l_3._invalid_1mf7l_17 ._radio_1mf7l_17{border-color:var(--radio-error-border)}._item_1mf7l_3._invalid_1mf7l_17 ._input_1mf7l_20:checked+._radio_1mf7l_17{background-color:var(--radio-error-checked-bg);border-color:var(--radio-error-checked-border)}._input_1mf7l_20{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}._radio_1mf7l_17{align-items:center;background:var(--radio-bg);border:1px solid var(--radio-border);border-radius:var(--radio-radius);display:flex;flex-shrink:0;justify-content:center;position:relative;transition:background var(--radio-transition-duration) var(--radio-transition-timing),border-color var(--radio-transition-duration) var(--radio-transition-timing)}._radio_1mf7l_17:after{background:var(--radio-dot-color);border-radius:50%;content:"";opacity:0;position:absolute;transition:opacity var(--radio-transition-duration) var(--radio-transition-timing),transform var(--radio-transition-duration) var(--radio-transition-timing)}._content_1mf7l_63{display:flex;flex-direction:column;gap:var(--radio-content-gap);padding-top:var(--radio-content-padding-top)}._label_1mf7l_70{color:var(--radio-label-color);font-weight:var(--radio-label-font-weight)}._description_1mf7l_75{color:var(--radio-description-color);font-weight:var(--lui-font-weight-normal)}._item_1mf7l_3:not(._disabled_1mf7l_12) ._input_1mf7l_20:not(:checked):hover+._radio_1mf7l_17{border-color:var(--radio-hover-border)}._input_1mf7l_20:focus-visible+._radio_1mf7l_17{box-shadow:var(--radio-focus-shadow)}._input_1mf7l_20:checked+._radio_1mf7l_17{background:var(--radio-checked-bg);border-color:var(--radio-checked-border)}._input_1mf7l_20:checked+._radio_1mf7l_17:after{opacity:1}._disabled_1mf7l_12 ._input_1mf7l_20:checked+._radio_1mf7l_17{background:var(--radio-disabled-bg);border-color:var(--radio-disabled-border)}._disabled_1mf7l_12 ._input_1mf7l_20:checked+._radio_1mf7l_17:after{background:var(--radio-disabled-dot)}._disabled_1mf7l_12 ._input_1mf7l_20:not(:checked)+._radio_1mf7l_17{background:var(--radio-disabled-bg);border-color:var(--radio-disabled-border)}._sizeSm_1mf7l_113 ._radio_1mf7l_17{height:16px;width:16px}._sizeSm_1mf7l_113 ._radio_1mf7l_17:after{height:6px;width:6px}._sizeSm_1mf7l_113 ._label_1mf7l_70{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm)}._sizeSm_1mf7l_113 ._description_1mf7l_75{font-size:var(--lui-font-size-xs);line-height:var(--line-height-xs)}._sizeMd_1mf7l_130 ._radio_1mf7l_17{height:20px;width:20px}._sizeMd_1mf7l_130 ._radio_1mf7l_17:after{height:8px;width:8px}._sizeMd_1mf7l_130 ._label_1mf7l_70{font-size:var(--lui-font-size-md);line-height:var(--line-height-md)}._sizeMd_1mf7l_130 ._description_1mf7l_75{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm)}._sizeLg_1mf7l_147 ._radio_1mf7l_17{height:24px;width:24px}._sizeLg_1mf7l_147 ._radio_1mf7l_17:after{height:10px;width:10px}._sizeLg_1mf7l_147 ._label_1mf7l_70{font-size:var(--lui-font-size-lg);line-height:var(--line-height-lg)}._sizeLg_1mf7l_147 ._description_1mf7l_75{font-size:var(--lui-font-size-md);line-height:var(--line-height-md)}:root{--radio-bg: var(--lui-color-background-primary);--radio-border: var(--lui-color-border-primary);--radio-checked-bg: var(--lui-color-background-brand);--radio-checked-border: var(--lui-color-background-brand);--radio-dot-color: var(--lui-color-text-on-brand);--radio-disabled-bg: var(--lui-color-background-disabled);--radio-disabled-border: var(--lui-color-border-disabled);--radio-disabled-dot: var(--lui-color-text-disabled);--radio-error-border: var(--lui-color-border-focus-error);--radio-error-checked-bg: var(--lui-color-background-error);--radio-error-checked-border: var(--lui-color-background-error);--radio-radius: var(--lui-radius-full);--radio-hover-border: var(--lui-palette-gray-400);--radio-focus-shadow: 0 0 0 2px var(--lui-palette-brand-secondary);--radio-label-color: var(--lui-color-text-primary);--radio-description-color: var(--lui-color-text-tertiary);--radio-label-font-weight: var(--lui-font-weight-medium);--radio-gap: var(--lui-space-2);--radio-content-gap: 2px;--radio-content-padding-top: 1px;--radio-group-gap: var(--lui-space-2);--radio-transition-duration: .15s;--radio-transition-timing: cubic-bezier(.4, 0, .2, 1)}._root_pott0_33{border:none;display:flex;flex-direction:column;margin:0;padding:0}._root_pott0_33._vertical_pott0_40 ._group_pott0_40{flex-direction:column}._root_pott0_33._horizontal_pott0_43 ._group_pott0_40{flex-direction:row}._group_pott0_40{display:flex;gap:var(--radio-group-gap)}

package/dist/radio.d.ts

@@ -0,0 +1,51 @@
+import { default as default_2 } from 'react';
+
+export declare enum ERadioSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+
+export declare interface IItemProps extends TNativeInputProps, default_2.PropsWithChildren {
+    /** The value of the radio button. Required for group integration. */
+    value: string;
+    /** Description text displayed below the option label. */
+    description?: default_2.ReactNode;
+    /** Ref to the native input element. */
+    ref?: default_2.Ref<HTMLInputElement>;
+}
+
+export declare interface IRadioProps extends default_2.PropsWithChildren {
+    /** Name attribute passed to all radio inputs in the group. */
+    name?: string;
+    /** Controlled selected value. */
+    value?: string;
+    /** Default selected value for uncontrolled mode. */
+    defaultValue?: string;
+    /** Callback when the selected value changes. */
+    onChange?: (value: string) => void;
+    /** Vertical layout. Set false for horizontal. Default: true. */
+    vertical?: boolean;
+    /** Radio size: sm, md, lg. Default: 'md'. Applied to all items in the group. */
+    size?: TRadioSize;
+    /** When true, all radios in the group are disabled. */
+    disabled?: boolean;
+    /** When true, all radio items show error styling. */
+    invalid?: boolean;
+}
+
+declare const Item: default_2.FC<IItemProps>;
+
+export declare const Radio: TRadioCompoundComponent;
+
+declare const Radio_2: default_2.FC<IRadioProps>;
+
+declare type TNativeInputProps = Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'type' | 'name' | 'checked' | 'size' | 'className'>;
+
+declare type TRadioCompoundComponent = typeof Radio_2 & {
+    Item: typeof Item;
+};
+
+declare type TRadioSize = `${ERadioSize.SM | ERadioSize.MD | ERadioSize.LG}`;
+
+export { }

package/dist/radio.js

@@ -0,0 +1,113 @@
+import { jsx as s, jsxs as z } from "react/jsx-runtime";
+import L, { createContext as S, useContext as E, useId as P, useState as T, useCallback as x, useRef as $ } from "react";
+import I from "clsx";
+import { g as k } from "./getVariantClassName-D7Nhpuec.mjs";
+import { i as A } from "./isValidReactNode-CmYwTWCE.mjs";
+import "./camelCase-PtIYufW8.mjs";
+import './radio.css';const M = S(null), D = () => {
+  const e = E(M);
+  if (!e)
+    throw new Error("useRadioContext should be used inside Radio component");
+  return e;
+}, j = (e) => {
+  const { children: n, name: a, value: i, defaultValue: l, onChange: r, size: m, disabled: _, invalid: t } = e, p = P(), v = a ?? p, c = i !== void 0, [d, f] = T(l), g = c ? i : d, N = x(
+    (h) => {
+      c || f(h), r?.(h);
+    },
+    [c, r]
+  );
+  return /* @__PURE__ */ s(M.Provider, { value: { disabled: _, invalid: t, name: v, onChange: N, size: m, value: g }, children: n });
+}, b = "Radio", w = "_item_1mf7l_3", B = "_disabled_1mf7l_12", O = "_invalid_1mf7l_17", U = "_radio_1mf7l_17", G = "_input_1mf7l_20", Y = "_content_1mf7l_63", q = "_label_1mf7l_70", F = "_description_1mf7l_75", H = "_sizeSm_1mf7l_113", J = "_sizeMd_1mf7l_130", K = "_sizeLg_1mf7l_147", o = {
+  item: w,
+  disabled: B,
+  invalid: O,
+  radio: U,
+  input: G,
+  content: Y,
+  label: q,
+  description: F,
+  sizeSm: H,
+  sizeMd: J,
+  sizeLg: K
+}, R = (e) => {
+  const { ref: n, children: a, value: i, description: l, disabled: r, onChange: m, ..._ } = e, t = D(), p = $(null), v = t.size ?? "md", c = t.value !== void 0 ? i === t.value : void 0, d = r !== void 0 ? r : t.disabled, f = t.invalid === !0, g = x(
+    (u) => {
+      p.current = u, typeof n == "function" ? n(u) : n && (n.current = u);
+    },
+    [n]
+  ), N = (u) => {
+    t.onChange?.(u.target.value), m?.(u);
+  }, h = I(
+    o.item,
+    k("size", v, o),
+    {
+      [o.disabled]: d,
+      [o.invalid]: f
+    }
+  );
+  return /* @__PURE__ */ z("label", { className: h, children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        ref: g,
+        className: o.input,
+        type: "radio",
+        checked: c,
+        disabled: d,
+        "aria-invalid": f || void 0,
+        name: t.name,
+        value: i,
+        onChange: N,
+        ..._
+      }
+    ),
+    /* @__PURE__ */ s("span", { className: o.radio, "aria-hidden": "true" }),
+    (a || l) && /* @__PURE__ */ z("span", { className: o.content, children: [
+      a && /* @__PURE__ */ s("span", { className: o.label, children: a }),
+      l && /* @__PURE__ */ s("span", { className: o.description, children: l })
+    ] })
+  ] });
+};
+R.displayName = `${b}.Item`;
+var V = ((e) => (e.ITEM = `${b}.Item`, e))(V || {}), Q = /* @__PURE__ */ ((e) => (e.SM = "sm", e.MD = "md", e.LG = "lg", e))(Q || {});
+const W = "_root_pott0_33", X = "_vertical_pott0_40", Z = "_group_pott0_40", ee = "_horizontal_pott0_43", C = {
+  root: W,
+  vertical: X,
+  group: Z,
+  horizontal: ee
+}, te = [V.ITEM], y = (e) => {
+  const {
+    children: n,
+    name: a,
+    value: i,
+    defaultValue: l,
+    onChange: r,
+    vertical: m = !0,
+    size: _ = "md",
+    disabled: t = !1,
+    invalid: p = !1
+  } = e, v = (d) => A(te, d) ? d : null, c = I(C.root, {
+    [C.horizontal]: !m,
+    [C.vertical]: m
+  });
+  return /* @__PURE__ */ s(
+    j,
+    {
+      name: a,
+      value: i,
+      defaultValue: l,
+      onChange: r,
+      size: _,
+      disabled: t,
+      invalid: p,
+      children: /* @__PURE__ */ s("fieldset", { className: c, children: /* @__PURE__ */ s("div", { className: C.group, children: L.Children.map(n, v) }) })
+    }
+  );
+};
+y.displayName = b;
+const ne = y;
+ne.Item = R;
+export {
+  Q as ERadioSize,
+  ne as Radio
+};