@reformer/ui-kit 1.0.0-beta.1

package/dist/ui/button.js

@@ -0,0 +1,78 @@
+import { jsx as y } from "react/jsx-runtime";
+import { Slot as k } from "@radix-ui/react-slot";
+import { a as V, c as p } from "../utils-DtaLkIY8.js";
+const g = (n) => typeof n == "boolean" ? `${n}` : n === 0 ? "0" : n, m = V, z = (n, i) => (e) => {
+  var o;
+  if (i?.variants == null) return m(n, e?.class, e?.className);
+  const { variants: l, defaultVariants: r } = i, b = Object.keys(l).map((t) => {
+    const a = e?.[t], d = r?.[t];
+    if (a === null) return null;
+    const s = g(a) || g(d);
+    return l[t][s];
+  }), c = e && Object.entries(e).reduce((t, a) => {
+    let [d, s] = a;
+    return s === void 0 || (t[d] = s), t;
+  }, {}), f = i == null || (o = i.compoundVariants) === null || o === void 0 ? void 0 : o.reduce((t, a) => {
+    let { class: d, className: s, ...h } = a;
+    return Object.entries(h).every((x) => {
+      let [v, u] = x;
+      return Array.isArray(u) ? u.includes({
+        ...r,
+        ...c
+      }[v]) : {
+        ...r,
+        ...c
+      }[v] === u;
+    }) ? [
+      ...t,
+      d,
+      s
+    ] : t;
+  }, []);
+  return m(n, b, f, e?.class, e?.className);
+}, C = z(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function w({
+  className: n,
+  variant: i,
+  size: e,
+  asChild: o = !1,
+  ...l
+}) {
+  return /* @__PURE__ */ y(
+    o ? k : "button",
+    {
+      "data-slot": "button",
+      className: p(C({ variant: i, size: e, className: n })),
+      ...l
+    }
+  );
+}
+export {
+  w as Button
+};

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/checkbox'
+export {}

package/dist/ui/checkbox.js

@@ -0,0 +1,35 @@
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import * as h from "react";
+import { c as f } from "../utils-DtaLkIY8.js";
+const x = h.forwardRef(
+  ({ className: r, value: o, onChange: t, onBlur: d, label: e, disabled: s, "data-testid": c, ...i }, n) => {
+    const l = (m) => {
+      t?.(m.target.checked);
+    };
+    return /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          ref: n,
+          type: "checkbox",
+          checked: o || !1,
+          disabled: s,
+          className: f(
+            "h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            r
+          ),
+          onChange: l,
+          onBlur: d,
+          "data-testid": c,
+          ...i
+        }
+      ),
+      e && /* @__PURE__ */ a("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: e })
+    ] });
+  }
+);
+x.displayName = "Checkbox";
+export {
+  x as Checkbox
+};

package/dist/ui/collapsible.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/collapsible'
+export {}

package/dist/ui/collapsible.js

@@ -0,0 +1,31 @@
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { useState as p } from "react";
+function m({
+  title: i,
+  defaultOpen: r = !0,
+  className: s,
+  titleClassName: a,
+  contentClassName: o,
+  children: d
+}) {
+  const [e, l] = p(r);
+  return /* @__PURE__ */ t("div", { className: s, children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: a,
+        onClick: () => l(!e),
+        "aria-expanded": e,
+        children: [
+          i,
+          /* @__PURE__ */ n("span", { "aria-hidden": "true", children: e ? " ▼" : " ▶" })
+        ]
+      }
+    ),
+    e && /* @__PURE__ */ n("div", { className: o, children: d })
+  ] });
+}
+export {
+  m as Collapsible
+};

package/dist/ui/form-field.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/form-field'
+export {}

package/dist/ui/form-field.js

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

package/dist/ui/input-mask.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/input-mask'
+export {}

package/dist/ui/input-mask.js

@@ -0,0 +1,36 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as r from "react";
+import { c as b } from "../utils-DtaLkIY8.js";
+const g = r.forwardRef(
+  ({ className: t, value: e, onChange: n, onBlur: o, mask: i, placeholder: s, disabled: a, ...l }, d) => {
+    const u = (p) => {
+      const f = p.target.value;
+      n?.(f || null);
+    }, c = r.useMemo(() => e == null ? "" : String(e), [e]);
+    return /* @__PURE__ */ m(
+      "input",
+      {
+        ref: d,
+        type: "text",
+        value: c,
+        disabled: a,
+        placeholder: s || i,
+        className: b(
+          "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",
+          t
+        ),
+        onChange: u,
+        onBlur: o,
+        ...l
+      }
+    );
+  }
+);
+g.displayName = "InputMask";
+export {
+  g as InputMask
+};

package/dist/ui/input-password.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/input-password'
+export {}

package/dist/ui/input-password.js

@@ -0,0 +1,72 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
+import { EyeOffIcon as f, EyeIcon as y } from "lucide-react";
+import { c as v } from "../utils-DtaLkIY8.js";
+const x = a.forwardRef(
+  ({
+    className: n,
+    value: r,
+    onChange: d,
+    onBlur: l,
+    placeholder: u = "Password",
+    disabled: o,
+    showToggle: s = !0,
+    ...p
+  }, c) => {
+    const [t, h] = a.useState(!1), m = (w) => {
+      d?.(w.target.value || null);
+    }, g = () => {
+      h(!t);
+    }, i = !!r;
+    return /* @__PURE__ */ b("div", { style: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: c,
+          type: t ? "text" : "password",
+          value: r || "",
+          disabled: o,
+          placeholder: u,
+          "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",
+            s && i && "pr-10",
+            n
+          ),
+          onChange: m,
+          onBlur: l,
+          ...p
+        }
+      ),
+      s && i && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "text-gray-500 hover:text-gray-700 transition-colors cursor-pointer focus:outline-none",
+          onClick: g,
+          disabled: o,
+          "aria-label": t ? "Hide password" : "Show password",
+          style: {
+            position: "absolute",
+            right: "0.75rem",
+            top: "50%",
+            transform: "translateY(-50%)",
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            lineHeight: 0
+          },
+          children: t ? /* @__PURE__ */ e(f, { style: { width: "1rem", height: "1rem" } }) : /* @__PURE__ */ e(y, { style: { width: "1rem", height: "1rem" } })
+        }
+      )
+    ] });
+  }
+);
+x.displayName = "InputPassword";
+export {
+  x as InputPassword
+};

package/dist/ui/input.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/input'
+export {}

package/dist/ui/input.js

@@ -0,0 +1,48 @@
+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";
+export {
+  x as Input
+};

package/dist/ui/radio-group.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/radio-group'
+export {}

package/dist/ui/radio-group.js

@@ -0,0 +1,53 @@
+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);
+    };
+    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);
+        })
+      }
+    );
+  }
+);
+g.displayName = "RadioGroup";
+export {
+  g as RadioGroup
+};

package/dist/ui/section.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/section'
+export {}

package/dist/ui/section.js

@@ -0,0 +1,16 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+function h({
+  title: e,
+  titleAs: n = "h3",
+  className: r,
+  titleClassName: s,
+  children: c
+}) {
+  return /* @__PURE__ */ i("section", { className: r, children: [
+    e && /* @__PURE__ */ o(n, { className: s, children: e }),
+    c
+  ] });
+}
+export {
+  h as Section
+};

package/dist/ui/select.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/select'
+export {}