@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/components/inputs/input.mjs

@@ -0,0 +1,442 @@
+import { jsxs as f, jsx as n, Fragment as Ne } from "react/jsx-runtime";
+import { forwardRef as Me, useState as y, useRef as de, useId as Ce, useCallback as q, useEffect as C } from "react";
+import { createPortal as Se } from "react-dom";
+import h from "classnames";
+import { FieldError as Ie } from "./helpers/field-error-text.mjs";
+import { FieldHelperText as $e } from "./helpers/field-helper-text.mjs";
+import { textControlColorClasses as Te } from "./helpers/control-colors.mjs";
+import { textControlSizeClasses as Ee } from "./helpers/control-sizes.mjs";
+import { EyeSlashIcon as Le } from "../icons/eyeslash.mjs";
+import { EyeIcon as je } from "../icons/eye.mjs";
+import { CalendarIcon as He } from "../icons/calendar-icon.mjs";
+import { ChevronLeft as Pe } from "../icons/chevron-left.mjs";
+import { ChevronRight as Fe } from "../icons/chevron-right.mjs";
+const Re = {
+  ghost: "transition-shadow border border-border bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100",
+  solid: "transition-colors bg-gray-200/70 hover:bg-gray-300 text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-100",
+  transparent: ""
+}, Be = (g) => {
+  const d = new Date(2024, 0, 7), r = [];
+  for (let m = 0; m < 7; m++) {
+    const S = new Date(d);
+    S.setDate(d.getDate() + m);
+    const A = S.toLocaleDateString(g, { weekday: "short" });
+    r.push(A);
+  }
+  return r;
+}, ze = (g) => {
+  const d = {
+    "en-US": "Today",
+    en: "Today",
+    "es-ES": "Hoy",
+    es: "Hoy",
+    "fr-FR": "Aujourd'hui",
+    fr: "Aujourd'hui",
+    "de-DE": "Heute",
+    de: "Heute",
+    "pt-BR": "Hoje",
+    pt: "Hoje"
+  };
+  if (d[g])
+    return d[g];
+  const r = g.split("-")[0];
+  return d[r] ? d[r] : "Today";
+}, Oe = Me(
+  ({
+    label: g,
+    error: d,
+    type: r = "text",
+    variant: m = "ghost",
+    className: S,
+    inputClassName: A,
+    labelClassName: le,
+    helperText: U,
+    color: V,
+    suffix: W,
+    suffixClassName: ce,
+    useUppercaseLabel: ue = !1,
+    icon: I,
+    size: _ = "md",
+    id: ge,
+    value: l,
+    onChange: ee,
+    dateFormat: x = "DD/MM/YYYY",
+    locale: G = "en-US",
+    ...p
+  }, $) => {
+    const [T, pe] = y(!1), [c, te] = y(!1), [he, J] = y(!1), [E, L] = y(null), [b, N] = y(/* @__PURE__ */ new Date()), [w, j] = y(!1), K = de(null), M = de(null), [me, xe] = y({}), be = Ce(), H = ge || be, re = `${H}-error`, ae = `${H}-helper`, fe = [d ? re : null, U ? ae : null].filter(Boolean).join(" ") || void 0, ne = () => {
+      pe(!T);
+    }, ye = r === "password" && T ? "text" : r, P = q(
+      (e, t = x) => {
+        if (!e || e.trim() === "")
+          return null;
+        const a = /^(\d{4})-(\d{2})-(\d{2})$/, o = e.match(a);
+        if (o) {
+          const Q = parseInt(o[1], 10), X = parseInt(o[2], 10), Z = parseInt(o[3], 10);
+          if (!isNaN(Z) && !isNaN(X) && !isNaN(Q)) {
+            const O = new Date(Q, X - 1, Z);
+            if (O.getFullYear() === Q && O.getMonth() === X - 1 && O.getDate() === Z)
+              return O;
+          }
+        }
+        const s = t.includes("/") ? "/" : t.includes("-") ? "-" : "/", i = e.split(s);
+        if (i.length !== 3)
+          return null;
+        let u, k, v;
+        switch (t) {
+          case "DD-MM-YYYY":
+          case "DD/MM/YYYY":
+            u = parseInt(i[0], 10), k = parseInt(i[1], 10), v = parseInt(i[2], 10);
+            break;
+          case "MM-DD-YYYY":
+          case "MM/DD/YYYY":
+            k = parseInt(i[0], 10), u = parseInt(i[1], 10), v = parseInt(i[2], 10);
+            break;
+          case "YYYY-MM-DD":
+          case "YYYY/MM/DD":
+            v = parseInt(i[0], 10), k = parseInt(i[1], 10), u = parseInt(i[2], 10);
+            break;
+          default:
+            return null;
+        }
+        if (isNaN(u) || isNaN(k) || isNaN(v))
+          return null;
+        const z = new Date(v, k - 1, u);
+        return z.getFullYear() !== v || z.getMonth() !== k - 1 || z.getDate() !== u ? null : z;
+      },
+      [x]
+    ), we = (e, t = x) => {
+      const a = e.getDate().toString().padStart(2, "0"), o = (e.getMonth() + 1).toString().padStart(2, "0"), s = e.getFullYear();
+      switch (t) {
+        case "DD-MM-YYYY":
+          return `${a}-${o}-${s}`;
+        case "MM-DD-YYYY":
+          return `${o}-${a}-${s}`;
+        case "YYYY-MM-DD":
+          return `${s}-${o}-${a}`;
+        case "DD/MM/YYYY":
+          return `${a}/${o}/${s}`;
+        case "MM/DD/YYYY":
+          return `${o}/${a}/${s}`;
+        case "YYYY/MM/DD":
+          return `${s}/${o}/${a}`;
+        default:
+          return `${a}-${o}-${s}`;
+      }
+    }, De = (e) => {
+      const t = e.getDate().toString().padStart(2, "0"), a = (e.getMonth() + 1).toString().padStart(2, "0");
+      return `${e.getFullYear()}-${a}-${t}`;
+    };
+    C(() => {
+      if (r === "date" && l && typeof l == "string") {
+        const e = P(l, x);
+        e && !isNaN(e.getTime()) && (setTimeout(() => {
+          L(e);
+        }, 100), setTimeout(() => {
+          N(e);
+        }, 100));
+      } else r === "date" && !l && setTimeout(() => {
+        L(null);
+      }, 100);
+    }, [l, r, x, P]);
+    const D = q(() => {
+      if (!M.current) return;
+      const e = M.current.getBoundingClientRect(), t = w ? 320 : 380, a = window.innerHeight - e.bottom, o = e.top, s = a < t && o > a;
+      xe({
+        position: "fixed",
+        ...s ? { bottom: window.innerHeight - e.top + 4 } : { top: e.bottom + 4 },
+        left: e.left,
+        width: Math.max(e.width, 320),
+        zIndex: 9999
+      });
+    }, [w]), Y = q(() => {
+      J(!0);
+      const e = setTimeout(() => {
+        te(!1), J(!1), j(!1);
+      }, 100);
+      return () => clearTimeout(e);
+    }, []), Ye = q(() => {
+      if (!(p.disabled || r !== "date") && (D(), J(!1), te(!0), j(!1), l && typeof l == "string")) {
+        const e = P(l, x);
+        e && !isNaN(e.getTime()) && (L(e), N(e));
+      }
+    }, [
+      p.disabled,
+      r,
+      D,
+      l,
+      P,
+      x
+    ]);
+    C(() => {
+      if (!c) return;
+      const e = (t) => {
+        M.current && !M.current.contains(t.target) && K.current && !K.current.contains(t.target) && Y();
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [c, Y]), C(() => {
+      if (!c) return;
+      const e = (t) => {
+        t.key === "Escape" && (Y(), ie());
+      };
+      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+    }, [c, Y]), C(() => {
+      if (!c) return;
+      const e = () => D();
+      return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+        window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+      };
+    }, [c, D]), C(() => {
+      c && D();
+    }, [c, w, D]);
+    const F = (e) => {
+      L(e), N(e), Y();
+      const t = {
+        target: { value: De(e), name: p.name }
+      };
+      ee?.(t);
+    }, ke = () => {
+      const e = b.getFullYear(), t = b.getMonth(), a = new Date(e, t, 1), o = new Date(a);
+      o.setDate(o.getDate() - a.getDay());
+      const s = [], i = new Date(o);
+      for (let u = 0; u < 42; u++)
+        s.push(new Date(i)), i.setDate(i.getDate() + 1);
+      return s;
+    }, R = (e) => {
+      N((t) => {
+        const a = new Date(t);
+        return e === "prev" ? a.setMonth(t.getMonth() - 1) : a.setMonth(t.getMonth() + 1), a;
+      });
+    }, B = () => {
+      c ? Y() : Ye();
+    }, ve = () => {
+      const e = [];
+      for (let t = 1900; t <= 2100; t++)
+        e.push(t);
+      return e;
+    }, oe = (e) => {
+      const t = new Date(b);
+      t.setFullYear(e), N(t), j(!1);
+    }, se = () => {
+      j(!w);
+    }, ie = () => {
+      $ && "current" in $ && $.current.focus();
+    };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        "data-tucu": "input",
+        "data-variant": m,
+        "data-color": V,
+        "data-size": _,
+        className: h("text-sm sm:text-sm", S),
+        children: [
+          /* @__PURE__ */ f("div", { className: h("relative", le), children: [
+            g && /* @__PURE__ */ f(
+              "label",
+              {
+                htmlFor: H,
+                className: h(
+                  "block font-medium tracking-widest text-gray-800 dark:text-gray-100",
+                  ue ? "mb-[8px] uppercase sm:mb-[12px]" : "mb-[6px] ml-[6px]"
+                ),
+                children: [
+                  g,
+                  p.required && /* @__PURE__ */ n("sup", { className: "inline-block text-[13px] text-red-500 ltr:ml-[4px] rtl:mr-[4px]", children: "*" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ f("div", { ref: M, className: "relative", children: [
+              /* @__PURE__ */ n(
+                "input",
+                {
+                  "data-tucu": "input-control",
+                  type: r === "date" ? "text" : ye,
+                  ref: $,
+                  id: H,
+                  "aria-describedby": fe,
+                  "aria-invalid": d ? "true" : "false",
+                  "aria-required": p.required ? "true" : void 0,
+                  readOnly: r === "date",
+                  value: r === "date" && E ? we(E) : l,
+                  onChange: r !== "date" ? ee : void 0,
+                  onClick: r === "date" ? B : void 0,
+                  onTouchStart: r === "date" ? B : ie,
+                  ...r !== "date" ? p : {
+                    ...p,
+                    onChange: void 0
+                  },
+                  className: h(
+                    "block w-full placeholder-gray-400 transition-shadow duration-200 rounded-xl text-gray-900 dark:invalid:border-red-500 dark:invalid:text-red-600 invalid:border-red-500 invalid:text-red-600 focus:border-border focus:outline-hidden focus:ring-1 focus:ring-gray-300 focus:invalid:border-red-500 focus:invalid:ring-red-500 disabled:border-border disabled:bg-muted/10 disabled:text-gray-500 disabled:cursor-not-allowed dark:text-gray-100 dark:focus:border-gray-600 dark:focus:ring-gray-600 cursor-pointer",
+                    Ee.input[_],
+                    !!I && "pl-[40px]",
+                    r === "date" ? "pr-[48px] cursor-pointer" : "",
+                    r === "password" ? "pr-[40px]" : "",
+                    V && Te[m][V],
+                    p.disabled ? "bg-muted/10! cursor-not-allowed" : "",
+                    A,
+                    !!(W || I) && "pl-[40px]",
+                    Re[m]
+                  )
+                }
+              ),
+              (W || I) && /* @__PURE__ */ n(
+                "span",
+                {
+                  className: h(
+                    "w-[40px] h-[40px] flex items-center justify-center absolute top-1/2 left-0 -translate-y-1/2 whitespace-nowrap leading-normal text-gray-400 dark:text-white",
+                    ce
+                  ),
+                  "aria-hidden": "true",
+                  children: W || I
+                }
+              ),
+              r === "password" && /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: ne,
+                  onTouchStart: ne,
+                  className: "absolute top-1/2 right-[12px] -translate-y-1/2 flex items-center justify-center w-[20px] h-[20px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none cursor-pointer",
+                  "aria-label": T ? "Hide password" : "Show password",
+                  children: T ? /* @__PURE__ */ n(Le, { className: "w-[16px] h-[16px]" }) : /* @__PURE__ */ n(je, { className: "w-[16px] h-[16px]" })
+                }
+              ),
+              r === "date" && /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: B,
+                  onTouchStart: B,
+                  className: "absolute top-1/2 right-[12px] -translate-y-1/2 flex items-center justify-center w-[20px] h-[20px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none cursor-pointer",
+                  "aria-label": "Open date picker",
+                  children: /* @__PURE__ */ n(He, { className: "w-[16px] h-[16px]" })
+                }
+              )
+            ] }),
+            r === "date" && c && Se(
+              /* @__PURE__ */ f(
+                "div",
+                {
+                  ref: K,
+                  "data-tucu": "input-calendar",
+                  style: me,
+                  className: h(
+                    "overflow-hidden rounded-xl border border-border bg-white p-[16px] shadow-large outline-hidden dark:bg-gray-800",
+                    "transition ease-in duration-100",
+                    he ? "opacity-0" : "opacity-100"
+                  ),
+                  children: [
+                    /* @__PURE__ */ f("div", { className: "flex items-center justify-between mb-[16px]", children: [
+                      /* @__PURE__ */ n(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => R("prev"),
+                          onTouchStart: () => R("prev"),
+                          className: "p-[4px] hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
+                          children: /* @__PURE__ */ n(Pe, { className: "w-[16px] h-[16px] text-gray-600 dark:text-gray-400" })
+                        }
+                      ),
+                      /* @__PURE__ */ n(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: se,
+                          onTouchStart: se,
+                          className: "text-sm font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 px-[8px] py-[4px] rounded-md transition-colors",
+                          children: b.toLocaleDateString(G, {
+                            month: "long",
+                            year: "numeric"
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ n(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => R("next"),
+                          onTouchStart: () => R("next"),
+                          className: "p-[4px] hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
+                          children: /* @__PURE__ */ n(Fe, { className: "w-[16px] h-[16px] text-gray-600 dark:text-gray-400" })
+                        }
+                      )
+                    ] }),
+                    w && /* @__PURE__ */ n("div", { className: "mb-[16px]", children: /* @__PURE__ */ n("div", { className: "grid grid-cols-4 gap-[8px] max-h-[160px] overflow-y-auto", children: ve().map((e) => /* @__PURE__ */ n(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => oe(e),
+                        onTouchStart: () => oe(e),
+                        className: h(
+                          "text-xs p-[8px] rounded-md transition-colors",
+                          {
+                            "bg-blue-500 text-white hover:bg-blue-600": e === b.getFullYear(),
+                            "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700": e !== b.getFullYear()
+                          }
+                        ),
+                        children: e
+                      },
+                      e
+                    )) }) }),
+                    !w && /* @__PURE__ */ f(Ne, { children: [
+                      /* @__PURE__ */ n("div", { className: "grid grid-cols-7 gap-[4px] mb-[8px]", children: Be(G).map((e) => /* @__PURE__ */ n(
+                        "div",
+                        {
+                          className: "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-[4px]",
+                          children: e
+                        },
+                        e
+                      )) }),
+                      /* @__PURE__ */ n("div", { className: "grid grid-cols-7 gap-[4px]", children: ke().map((e, t) => {
+                        const a = e.getMonth() === b.getMonth(), o = E && e.toDateString() === E.toDateString(), s = e.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+                        return /* @__PURE__ */ n(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => F(e),
+                            onTouchStart: () => F(e),
+                            className: h(
+                              "text-xs p-[8px] rounded-md transition-colors hover:bg-gray-100 dark:hover:bg-gray-700",
+                              {
+                                "text-gray-400 dark:text-gray-500": !a,
+                                "text-gray-900 dark:text-gray-100": a && !o,
+                                "bg-blue-500 text-white hover:bg-blue-600": o,
+                                "ring-2 ring-blue-500 ring-offset-1": s && !o
+                              }
+                            ),
+                            children: e.getDate()
+                          },
+                          t
+                        );
+                      }) }),
+                      /* @__PURE__ */ n("div", { className: "mt-[16px] pt-[12px] border-t border-border", children: /* @__PURE__ */ n(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => F(/* @__PURE__ */ new Date()),
+                          onTouchStart: () => F(/* @__PURE__ */ new Date()),
+                          className: "w-full text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium py-[4px] transition-colors",
+                          children: ze(G)
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              ),
+              document.body
+            )
+          ] }),
+          d && /* @__PURE__ */ n(Ie, { id: re, error: d, size: "md" }),
+          !d && U && /* @__PURE__ */ n($e, { id: ae, size: "md", children: U })
+        ]
+      }
+    );
+  }
+);
+Oe.displayName = "Input";
+export {
+  Oe as Input,
+  Oe as default,
+  Re as inputVariantClasses
+};

package/components/inputs/pin-code.mjs

@@ -0,0 +1,174 @@
+import { jsxs as F, jsx as b } from "react/jsx-runtime";
+import { useRef as K, useEffect as T } from "react";
+import f from "classnames";
+import { FieldError as B } from "./helpers/field-error-text.mjs";
+import { FieldHelperText as H } from "./helpers/field-helper-text.mjs";
+import { textControlColorClasses as I } from "./helpers/control-colors.mjs";
+const x = {
+  base: "flex flex-row",
+  center: "justify-center align-center"
+}, s = {
+  base: "block peer text-center mr-[8px] last:mr-0 focus:placeholder:opacity-0 focus:outline-hidden transition duration-200 disabled:bg-muted/10 disabled:placeholder:text-gray-400 disabled:cursor-not-allowed disabled:border-border",
+  numberType: "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
+  error: "border-red hover:enabled:!border-red-500 focus:enabled:!border-red-500 focus:!ring-red-500",
+  size: {
+    sm: "px-[4px] py-[4px] text-sm h-[32px] w-[32px]",
+    md: "px-[8px] py-[8px] text-sm h-[40px] w-[40px]",
+    lg: "px-[8px] py-[8px] text-base h-[48px] w-[48px]",
+    xl: "px-[10px] py-[10px] text-lg h-[56px] w-[56px]"
+  },
+  rounded: {
+    none: "rounded-none",
+    sm: "rounded-xs",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  },
+  variant: {
+    ghost: {
+      base: "transition-shadow border border-border bg-white text-gray-900 hover:border-border hover:ring-1 hover:ring-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:ring-gray-600"
+    },
+    solid: {
+      base: "transition-colors bg-gray-200/70 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
+    },
+    transparent: {
+      base: "bg-transparent"
+    }
+  }
+}, L = {
+  primary: "!border-brand/70 hover:!border-brand/80 focus:!border-brand dark:!border-brand/75 dark:!bg-brand/20",
+  info: "!border-blue-500/70 hover:!border-blue-500/80 focus:!border-blue-500 dark:!border-blue-500/75 dark:!bg-blue-500/20"
+};
+function Q({
+  type: d = "text",
+  value: i = "",
+  onChange: m,
+  mask: v = !1,
+  length: n = 4,
+  center: w = !0,
+  size: k = "md",
+  rounded: C = "md",
+  variant: l = "ghost",
+  color: u,
+  placeholder: j = "-",
+  error: c,
+  className: z,
+  inputClassName: V,
+  errorClassName: D,
+  helperText: g,
+  helperTextClassName: N,
+  fullWidth: h = !1,
+  ...y
+}) {
+  const o = K([]);
+  function A(e) {
+    return (r) => {
+      r && (o.current[e] = r);
+    };
+  }
+  T(() => {
+    const e = i.split("");
+    o.current.forEach((r, a) => {
+      r && r.value !== (e[a] || "") && (r.value = e[a] || "");
+    });
+  }, [i]);
+  function p() {
+    const e = o.current.map((r) => r?.value || "").join("");
+    m && m(e);
+  }
+  function R(e, r) {
+    const a = e.target.value.split("");
+    o.current[r].value = a[a.length - 1], r < n - 1 && o.current[r + 1].focus(), p();
+  }
+  function E(e, r) {
+    const a = o.current[r].value;
+    if (e.key === "ArrowRight" && r < n - 1 && o.current[r + 1].focus(), e.key === "ArrowLeft" && r > 0 && o.current[r - 1].focus(), e.key === "Backspace") {
+      if (a !== "")
+        o.current[r].value = "";
+      else {
+        if (r === 0) return;
+        o.current[r - 1].value = "", o.current[r - 1].focus();
+      }
+      p();
+    }
+  }
+  function P(e, r) {
+    const a = e.clipboardData.getData("text").split("");
+    for (let t = 0; t < n - r; t += 1)
+      o.current[r + t].value = a[t] ?? "", r + t === n - 1 ? o.current[r + t].focus() : o.current[r + t + 1].focus();
+    e.preventDefault(), p();
+  }
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      "data-tucu": "pin-code",
+      "data-variant": l,
+      "data-color": u,
+      className: f(
+        "flex flex-col items-center justify-center",
+        h && "w-full"
+      ),
+      children: [
+        /* @__PURE__ */ b(
+          "div",
+          {
+            className: f(
+              x.base,
+              w && x.center,
+              h && "w-full! justify-between!",
+              z
+            ),
+            children: Array.from({ length: n }, (e, r) => {
+              const a = i.split("")[r] || "";
+              return /* @__PURE__ */ b(
+                "input",
+                {
+                  ref: A(r),
+                  "data-tucu": "pin-code-input",
+                  type: d,
+                  inputMode: d === "text" ? d : "numeric",
+                  value: a,
+                  autoCapitalize: "off",
+                  autoCorrect: "off",
+                  autoComplete: "off",
+                  placeholder: j,
+                  onChange: (t) => R(t, r),
+                  onKeyDown: (t) => E(t, r),
+                  onPaste: (t) => P(t, r),
+                  className: f(
+                    s.base,
+                    d === "number" && s.numberType,
+                    s.size[k],
+                    s.rounded[C],
+                    s.variant[l].base,
+                    u && I[l][u],
+                    l === "ghost" && u && L[u],
+                    c && s.error,
+                    v && "password-dot",
+                    y.disabled && "bg-muted/10! cursor-not-allowed border-border! dark:border-border! hover:border-border! dark:hover:border-gray-700!",
+                    V
+                  ),
+                  ...y
+                },
+                r
+              );
+            })
+          }
+        ),
+        !c && g && /* @__PURE__ */ b(H, { size: "md", className: N, children: g }),
+        c && /* @__PURE__ */ b(
+          B,
+          {
+            className: f("text-left w-full", D),
+            error: c,
+            size: "md"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Q as PinCode,
+  Q as default
+};