@reformer/ui-kit 8.0.0 → 9.0.0-beta.2

package/dist/ui/form-field.js

@@ -1,34 +1,44 @@
-import { jsx as i, jsxs as x, Fragment as w } from "react/jsx-runtime";
-import * as B from "react";
-import { forwardRef as f, Children as L, isValidElement as A, cloneElement as V, useId as W, useMemo as $, createContext as E, useContext as M } from "react";
+import { jsx as d, jsxs as w, Fragment as $ } from "react/jsx-runtime";
+import * as L from "react";
+import { useContext as x, createContext as R, forwardRef as F, Children as T, isValidElement as V, cloneElement as W, useId as M, useMemo as k } from "react";
 import { useFormControl as O } from "@reformer/core";
-import { Checkbox as T } from "./checkbox.js";
-function z(e, n) {
-  const l = { ...e };
-  for (const r of Object.keys(n)) {
-    const o = e[r], t = n[r];
-    r.startsWith("on") && typeof o == "function" && typeof t == "function" ? l[r] = (...d) => {
-      t(...d), o(...d);
-    } : r === "className" && typeof o == "string" && typeof t == "string" ? l[r] = [t, o].filter(Boolean).join(" ") : r === "style" && typeof o == "object" && typeof t == "object" ? l[r] = { ...t, ...o } : r === "disabled" ? l[r] = !!o || !!t : t !== void 0 && (l[r] = t);
+import { Checkbox as z } from "./checkbox.js";
+const G = (e) => e.message || e.code, H = R(G);
+function j() {
+  return x(H);
+}
+function J(...e) {
+  return (l) => {
+    for (const o of e)
+      typeof o == "function" ? o(l) : o != null && (o.current = l);
+  };
+}
+function K(e, l) {
+  const o = { ...e };
+  for (const r of Object.keys(l)) {
+    const t = e[r], n = l[r];
+    r.startsWith("on") && typeof t == "function" && typeof n == "function" ? o[r] = (...i) => {
+      n(...i), t(...i);
+    } : r === "className" && typeof t == "string" && typeof n == "string" ? o[r] = [n, t].filter(Boolean).join(" ") : r === "style" && typeof t == "object" && typeof n == "object" ? o[r] = { ...n, ...t } : r === "disabled" ? o[r] = !!t || !!n : n !== void 0 && (o[r] = n);
   }
-  return l;
+  return o;
 }
-const b = f(
-  ({ children: e, ...n }, l) => {
-    const r = L.only(e);
-    if (!A(r))
+const I = F(
+  ({ children: e, ...l }, o) => {
+    const r = T.only(e);
+    if (!V(r))
       return null;
-    const o = r.props, t = z(n, o), d = r.ref;
-    return V(r, {
-      ...t,
-      ref: l || d
+    const t = r.props, n = K(l, t), i = r.ref, s = J(o, i);
+    return W(r, {
+      ...n,
+      ref: s
     });
   }
 );
-b.displayName = "Slot";
-const k = E(null);
-function F() {
-  const e = M(k);
+I.displayName = "Slot";
+const q = R(null);
+function v() {
+  const e = x(q);
   if (!e)
     throw new Error(
       "FormField.* components must be used within <FormField.Root>. Wrap your field with <FormField.Root control={control}>."
@@ -37,183 +47,198 @@ function F() {
 }
 function N({
   control: e,
-  children: n,
-  id: l,
+  children: l,
+  id: o,
   hasDescription: r = !1
 }) {
-  const o = W(), t = l ?? o, d = $(
+  const t = M(), n = o ?? t, i = k(
     () => ({
-      controlId: `control-${t}`,
-      labelId: `label-${t}`,
-      descriptionId: `desc-${t}`,
-      errorId: `error-${t}`
+      controlId: `control-${n}`,
+      labelId: `label-${n}`,
+      descriptionId: `desc-${n}`,
+      errorId: `error-${n}`
     }),
-    [t]
-  ), s = O(e), c = $(() => {
+    [n]
+  ), s = O(e), a = j(), p = k(() => {
     const {
-      value: h,
-      errors: a,
-      pending: m,
-      disabled: v,
+      value: u,
+      errors: m,
+      pending: c,
+      disabled: b,
       valid: y,
-      invalid: I,
-      touched: C,
-      shouldShowError: g,
-      componentProps: p
+      invalid: g,
+      touched: E,
+      shouldShowError: C,
+      componentProps: f
     } = s;
     return {
-      value: h,
-      errors: a,
-      pending: m,
-      disabled: v,
+      value: u,
+      errors: m,
+      pending: c,
+      disabled: b,
       valid: y,
-      invalid: I,
-      touched: C,
-      shouldShowError: g,
-      error: g ? a[0]?.message : void 0,
-      label: p.label,
-      required: !!p.required,
-      componentProps: p,
+      invalid: g,
+      touched: E,
+      shouldShowError: C,
+      error: C && m[0] ? a(m[0]) : void 0,
+      label: f.label,
+      required: !!f.required,
+      componentProps: f,
       control: e,
-      ids: d,
+      ids: i,
       hasDescription: r
     };
-  }, [s, e, d, r]);
-  return /* @__PURE__ */ i(k.Provider, { value: c, children: n });
+  }, [s, e, i, r, a]);
+  return /* @__PURE__ */ d(q.Provider, { value: p, children: l });
 }
 N.displayName = "FormField.Root";
-const j = f(
-  ({ asChild: e = !1, children: n, forceRender: l = !1, ...r }, o) => {
-    const { label: t, required: d, ids: s } = F(), c = n ?? t;
-    return !c && !l ? null : /* @__PURE__ */ x(e ? b : "label", { ref: o, id: s.labelId, htmlFor: e ? void 0 : s.controlId, ...r, children: [
-      c,
-      d && /* @__PURE__ */ i("span", { "aria-hidden": "true", children: " *" })
+const D = F(
+  ({ asChild: e = !1, children: l, forceRender: o = !1, ...r }, t) => {
+    const { label: n, required: i, ids: s } = v(), a = l ?? n;
+    return !a && !o ? null : /* @__PURE__ */ w(e ? I : "label", { ref: t, id: s.labelId, htmlFor: e ? void 0 : s.controlId, ...r, children: [
+      a,
+      i && /* @__PURE__ */ d("span", { "aria-hidden": "true", children: " *" })
     ] });
   }
 );
-j.displayName = "FormField.Label";
-const R = f(
-  ({ asChild: e = !1, children: n, ...l }, r) => {
+D.displayName = "FormField.Label";
+const S = F(
+  ({ asChild: e = !1, children: l, ...o }, r) => {
     const {
-      control: o,
-      value: t,
-      disabled: d,
+      control: t,
+      value: n,
+      disabled: i,
       shouldShowError: s,
-      errors: c,
-      required: h,
-      ids: a,
+      errors: a,
+      required: p,
+      ids: u,
       hasDescription: m,
-      componentProps: v
-    } = F(), y = [
-      m ? a.descriptionId : null,
-      s && c.length > 0 ? a.errorId : null
-    ].filter(Boolean).join(" ") || void 0, I = {
-      id: a.controlId,
-      "aria-labelledby": a.labelId,
+      componentProps: c
+    } = v(), b = [
+      m ? u.descriptionId : null,
+      s && a.length > 0 ? u.errorId : null
+    ].filter(Boolean).join(" ") || void 0, y = {
+      id: u.controlId,
+      "aria-labelledby": u.labelId,
       "aria-invalid": s ? !0 : void 0,
-      "aria-describedby": y,
-      "aria-errormessage": s && c.length > 0 ? a.errorId : void 0,
-      "aria-required": h ? !0 : void 0
+      "aria-describedby": b,
+      "aria-errormessage": s && a.length > 0 ? u.errorId : void 0,
+      "aria-required": p ? !0 : void 0
     };
-    if (n || e)
-      return /* @__PURE__ */ i(b, { ref: r, ...I, ...l, children: n });
-    const C = o.component, { testId: g, ...p } = v ?? {};
-    return /* @__PURE__ */ i(
-      C,
+    if (l || e)
+      return /* @__PURE__ */ d(
+        I,
+        {
+          ref: r,
+          ...y,
+          ...o,
+          value: n,
+          disabled: i,
+          onChange: (f) => t.setValue(f),
+          onBlur: () => t.markAsTouched(),
+          children: l
+        }
+      );
+    const g = t.component, { testId: E, ...C } = c ?? {};
+    return /* @__PURE__ */ d(
+      g,
       {
         ref: r,
-        ...p,
-        ...I,
-        ...l,
-        value: t,
-        disabled: d,
-        onChange: (D) => o.setValue(D),
-        onBlur: () => o.markAsTouched()
+        ...C,
+        ...y,
+        ...o,
+        value: n,
+        disabled: i,
+        onChange: (f) => t.setValue(f),
+        onBlur: () => t.markAsTouched()
       }
     );
   }
 );
-R.displayName = "FormField.Control";
-const S = f(
-  ({ asChild: e = !1, multi: n = !1, render: l, children: r, ...o }, t) => {
-    const { shouldShowError: d, errors: s, ids: c } = F();
-    if (!d || s.length === 0) return null;
-    const h = e ? b : "p";
-    return l ? /* @__PURE__ */ i(w, { children: s.map((a, m) => /* @__PURE__ */ i(
-      h,
+S.displayName = "FormField.Control";
+const B = F(
+  ({ asChild: e = !1, multi: l = !1, render: o, children: r, ...t }, n) => {
+    const { shouldShowError: i, errors: s, ids: a } = v(), p = j();
+    if (!i || s.length === 0) return null;
+    const u = e ? I : "p";
+    return o ? /* @__PURE__ */ d($, { children: s.map((m, c) => /* @__PURE__ */ d(
+      u,
       {
-        id: m === 0 ? c.errorId : void 0,
+        ref: c === 0 ? n : void 0,
+        id: c === 0 ? a.errorId : void 0,
         role: "alert",
-        ...o,
-        children: l(a, m)
-      },
-      a.code ?? m
-    )) }) : n ? /* @__PURE__ */ i(w, { children: s.map((a, m) => /* @__PURE__ */ i(
-      h,
-      {
-        id: m === 0 ? c.errorId : void 0,
-        role: "alert",
-        ...o,
-        children: a.message
+        ...t,
+        children: o(m, c)
       },
-      a.code ?? m
-    )) }) : /* @__PURE__ */ i(h, { ref: t, id: c.errorId, role: "alert", ...o, children: r ?? s[0].message });
+      m.code ?? c
+    )) }) : l ? /* @__PURE__ */ d($, { children: s.map((m, c) => {
+      const b = p(m);
+      return /* @__PURE__ */ d(
+        u,
+        {
+          ref: c === 0 ? n : void 0,
+          id: c === 0 ? a.errorId : void 0,
+          role: "alert",
+          ...t,
+          children: e ? /* @__PURE__ */ d("span", { children: b }) : b
+        },
+        m.code ?? c
+      );
+    }) }) : /* @__PURE__ */ d(u, { ref: n, id: a.errorId, role: "alert", ...t, children: r ?? p(s[0]) });
   }
 );
-S.displayName = "FormField.Error";
-const q = f(
-  ({ asChild: e = !1, children: n, ...l }, r) => {
-    const { ids: o } = F();
-    return /* @__PURE__ */ i(e ? b : "p", { ref: r, id: o.descriptionId, ...l, children: n });
+B.displayName = "FormField.Error";
+const A = F(
+  ({ asChild: e = !1, children: l, ...o }, r) => {
+    const { ids: t } = v();
+    return /* @__PURE__ */ d(e ? I : "p", { ref: r, id: t.descriptionId, ...o, children: l });
   }
 );
-q.displayName = "FormField.Description";
-const u = N;
-u.Root = N;
-u.Label = j;
-u.Control = R;
-u.Error = S;
-u.Description = q;
-const G = (e) => e.message || e.code;
-E(G);
-function H({
+A.displayName = "FormField.Description";
+const h = N;
+h.Root = N;
+h.Label = D;
+h.Control = S;
+h.Error = B;
+h.Description = A;
+function P({
   className: e,
-  testIdProp: n,
-  isCheckbox: l,
+  testIdProp: l,
+  isCheckbox: o,
   customChildren: r
 }) {
-  const { componentProps: o, pending: t } = F(), d = n ?? o?.testId ?? "unknown";
-  return /* @__PURE__ */ x("div", { className: e, "data-testid": `field-${d}`, children: [
-    !l && /* @__PURE__ */ i(
-      u.Label,
+  const { componentProps: t, pending: n } = v(), i = l ?? t?.testId ?? "unknown";
+  return /* @__PURE__ */ w("div", { className: e, "data-testid": `field-${i}`, children: [
+    !o && /* @__PURE__ */ d(
+      h.Label,
       {
         className: "block mb-1 text-sm font-medium",
-        "data-testid": `label-${d}`
+        "data-testid": `label-${i}`
       }
     ),
-    r ? /* @__PURE__ */ i(u.Control, { asChild: !0, children: r }) : /* @__PURE__ */ i(u.Control, { "data-testid": `input-${d}` }),
-    /* @__PURE__ */ i(
-      u.Error,
+    r ? /* @__PURE__ */ d(h.Control, { asChild: !0, children: r }) : /* @__PURE__ */ d(h.Control, { "data-testid": `input-${i}` }),
+    /* @__PURE__ */ d(
+      h.Error,
       {
         className: "text-destructive text-sm mt-1 block",
-        "data-testid": `error-${d}`
+        "data-testid": `error-${i}`
       }
     ),
-    t && /* @__PURE__ */ i("span", { className: "text-gray-500 text-sm mt-1 block", children: "Проверка..." })
+    n && /* @__PURE__ */ d("span", { role: "status", "aria-live": "polite", className: "text-gray-500 text-sm mt-1 block", children: "Проверка..." })
   ] });
 }
-const J = ({ control: e, className: n, testId: l, children: r }) => {
-  const o = e.component === T;
-  return /* @__PURE__ */ i(u.Root, { control: e, children: /* @__PURE__ */ i(
-    H,
+const Q = ({ control: e, className: l, testId: o, children: r }) => {
+  const t = e.component === z;
+  return /* @__PURE__ */ d(h.Root, { control: e, children: /* @__PURE__ */ d(
+    P,
     {
-      className: n,
-      testIdProp: l,
-      isCheckbox: o,
+      className: l,
+      testIdProp: o,
+      isCheckbox: t,
       customChildren: r
     }
   ) });
-}, X = B.memo(J, (e, n) => e.control === n.control && e.className === n.className && e.testId === n.testId && e.children === n.children);
+}, _ = L.memo(Q, (e, l) => e.control === l.control && e.className === l.className && e.testId === l.testId && e.children === l.children);
 export {
-  X as FormField
+  _ as FormField
 };

package/dist/ui/input.js

@@ -1,48 +1,77 @@
 import { jsx as g } from "react/jsx-runtime";
-import * as u from "react";
-import { c as v } from "../utils-DtaLkIY8.js";
-const x = u.forwardRef(
-  ({ className: l, value: i, onChange: r, onBlur: a, type: e = "text", placeholder: d, disabled: m, ...n }, c) => {
-    const f = (p) => {
-      const t = p.target.value;
-      if (e === "number")
-        if (t === "")
-          r?.(null);
-        else {
-          const o = Number(t);
-          if (!isNaN(o)) {
-            const s = n.min !== void 0 ? Number(n.min) : void 0;
-            s !== void 0 && s >= 0 && o < 0 ? r?.(0) : r?.(o);
-          }
-        }
-      else
-        r?.(t || null);
-    }, b = u.useMemo(() => i == null ? "" : e === "number" && typeof i == "number" ? isNaN(i) ? "" : i.toString() : String(i), [i, e]);
-    return /* @__PURE__ */ g(
-      "input",
-      {
-        ref: c,
-        type: e,
-        value: b,
-        disabled: m,
-        placeholder: d,
-        "data-slot": "input",
-        className: v(
-          "h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs transition-colors",
-          "placeholder:text-muted-foreground",
-          "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-          l
-        ),
-        onChange: f,
-        onBlur: a,
-        ...n
-      }
-    );
-  }
-);
-x.displayName = "Input";
+import * as a from "react";
+import { c as y } from "../utils-DtaLkIY8.js";
+function o(e) {
+  if (e === "") return { kind: "empty" };
+  const n = Number(e);
+  return Number.isNaN(n) ? { kind: "partial" } : { kind: "number", value: n };
+}
+function h(e, n) {
+  const t = o(e);
+  if (t.kind === "empty") return { emit: !0, value: null };
+  if (t.kind === "partial") return { emit: !1 };
+  let i = t.value;
+  return n !== void 0 && n >= 0 && i < 0 && (i = 0), { emit: !0, value: i };
+}
+function x(e, n) {
+  if (e !== null)
+    if (e === "") {
+      if (n == null) return "";
+    } else {
+      const t = o(e);
+      if (t.kind === "partial" || t.kind === "number" && typeof n == "number" && !Number.isNaN(n) && t.value === n)
+        return e;
+    }
+  return n == null || typeof n == "number" && Number.isNaN(n) ? "" : n.toString();
+}
+const k = a.forwardRef((e, n) => {
+  const t = e.type ?? "text", [i, s] = a.useState(null), d = (r) => {
+    const u = r.target.value;
+    if (e.type === "number") {
+      s(u);
+      const p = e.min !== void 0 ? Number(e.min) : void 0, l = h(u, p);
+      l.emit && e.onChange?.(l.value);
+    } else
+      e.onChange?.(u || null);
+  }, m = a.useMemo(() => {
+    if (e.type === "number")
+      return x(i, e.value);
+    const r = e.value;
+    return r == null ? "" : String(r);
+  }, [e.value, e.type, i]), {
+    className: c,
+    onBlur: b,
+    placeholder: f,
+    disabled: v,
+    value: C,
+    onChange: I,
+    type: R,
+    ...N
+  } = e;
+  return /* @__PURE__ */ g(
+    "input",
+    {
+      ref: n,
+      type: t,
+      value: m,
+      disabled: v,
+      placeholder: f,
+      "data-slot": "input",
+      className: y(
+        "h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs transition-colors",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        c
+      ),
+      onChange: d,
+      onBlur: b,
+      ...N
+    }
+  );
+});
+k.displayName = "Input";
 export {
-  x as Input
+  k as Input
 };

package/dist/ui/radio-group.js

@@ -1,53 +1,73 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import * as v from "react";
-import { c as i } from "../utils-DtaLkIY8.js";
-const g = v.forwardRef(
-  ({ className: d, value: s, onChange: o, onBlur: c, options: t, disabled: u, "data-testid": a, ...m }, n) => {
-    const p = (e) => {
-      o?.(e.target.value);
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import * as i from "react";
+import { c as s } from "../utils-DtaLkIY8.js";
+const y = i.forwardRef(
+  ({
+    className: d,
+    value: c,
+    onChange: t,
+    onBlur: n,
+    options: u,
+    disabled: m,
+    name: p,
+    id: l,
+    "data-testid": a,
+    ...g
+  }, f) => {
+    const v = i.useId(), h = p ?? l ?? a ?? v, x = (e) => {
+      t?.(e.target.value);
     };
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        ref: n,
-        className: i("flex flex-col gap-2", d),
-        "data-testid": a,
-        ...m,
-        children: t.map((e) => {
-          const l = a ? `${a}-${e.value}` : `radio-${e.value}`;
-          return /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ r(
-              "input",
-              {
-                type: "radio",
-                id: l,
-                value: e.value,
-                checked: s === e.value,
-                disabled: u,
-                className: i(
-                  "h-4 w-4 border-gray-300 text-primary focus:ring-2 focus:ring-primary",
-                  "disabled:cursor-not-allowed disabled:opacity-50"
-                ),
-                onChange: p,
-                onBlur: c,
-                "data-testid": a ? `${a}-${e.value}` : void 0
-              }
-            ),
-            /* @__PURE__ */ r(
-              "label",
-              {
-                htmlFor: l,
-                className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
-                children: e.label
-              }
-            )
-          ] }, e.value);
-        })
-      }
+    return (
+      // role="radiogroup" + прокинутые aria-* (aria-labelledby/aria-invalid/
+      // aria-describedby из FormField) делают контейнер настоящей группой для AT:
+      // метка ассоциируется, состояние невалидности экспонируется, навигация
+      // стрелками работает как по группе.
+      /* @__PURE__ */ r(
+        "div",
+        {
+          ref: f,
+          role: "radiogroup",
+          id: l,
+          className: s("flex flex-col gap-2", d),
+          "data-testid": a,
+          ...g,
+          children: u.map((e) => {
+            const o = a ? `${a}-${e.value}` : `radio-${e.value}`;
+            return /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  type: "radio",
+                  id: o,
+                  name: h,
+                  value: e.value,
+                  checked: c === e.value,
+                  disabled: m,
+                  className: s(
+                    "h-4 w-4 border-gray-300 text-primary focus:ring-2 focus:ring-primary",
+                    "disabled:cursor-not-allowed disabled:opacity-50"
+                  ),
+                  onChange: x,
+                  onBlur: n,
+                  "data-testid": a ? `${a}-${e.value}` : void 0
+                }
+              ),
+              /* @__PURE__ */ r(
+                "label",
+                {
+                  htmlFor: o,
+                  className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+                  children: e.label
+                }
+              )
+            ] }, e.value);
+          })
+        }
+      )
     );
   }
 );
-g.displayName = "RadioGroup";
+y.displayName = "RadioGroup";
 export {
-  g as RadioGroup
+  y as RadioGroup
 };