@tabnews/ui/dist/FormField/FormField.js

TabNews UI

"use client";
import { jsx as n, jsxs as p } from "react/jsx-runtime";
import { EyeClosedIcon as H, EyeIcon as M, AlertFillIcon as W } from "@primer/octicons-react";
import { TextInput as z, FormControl as u, Select as S, Checkbox as R, Text as y, Button as U } from "@primer/react";
import { Tooltip as O } from "@primer/react/next";
import { forwardRef as $, useState as V, useRef as q, useImperativeHandle as G } from "react";
const D = {
  block: !0,
  contrast: !0,
  size: "large"
}, B = {
  ...D,
  autoCorrect: "off",
  autoCapitalize: "off",
  spellCheck: !1,
  sx: {
    px: 2,
    "&:focus-within": {
      backgroundColor: "canvas.default"
    },
    "> input": {
      px: 1
    }
  }
}, N = $(
  ({
    caption: e,
    checked: a,
    error: i,
    hidden: x,
    inputMode: c,
    isValid: h,
    label: m,
    name: F,
    options: s,
    required: K,
    suggestion: d,
    sx: P,
    type: v,
    ...t
  }, T) => {
    const [f, A] = V(!1), [j, C] = V(null), b = q();
    if (G(T, () => b.current), x) return null;
    const r = {
      validationStatus: i ? "error" : h ? "success" : null,
      inputMode: c,
      ref: b,
      ...t
    };
    if (v === "password") {
      let o = function() {
        setTimeout(() => {
          const l = b.current, I = l.value.length;
          l.focus(), l.setSelectionRange(I, I);
        });
      }, w = function(l) {
        c !== "numeric" && l.getModifierState("CapsLock") ? C("Caps Lock está ativado.") : C(null);
      }, E = function(l) {
        l.preventDefault(), A(!f), o(), w(l);
      };
      r.type = f ? "text" : "password", r.trailingVisual = r.trailingVisual || /* @__PURE__ */ n(
        z.Action,
        {
          "aria-label": f ? `Ocultar ${m}` : `Visualizar ${m}`,
          tooltipDirection: "nw",
          onClick: E,
          icon: f ? H : M
        }
      ), r.onKeyUp = (l) => {
        w(l), t.onKeyUp && t.onKeyUp(l);
      }, r.onKeyDown = (l) => {
        w(l), t.onKeyDown && t.onKeyDown(l);
      }, r.onBlur = (l) => {
        C(null), t.onBlur && t.onBlur(l);
      }, r.sx = { ...B.sx, pr: 0 };
    }
    const k = typeof a == "boolean";
    return /* @__PURE__ */ p(u, { id: F, required: K, sx: { minHeight: "86px", ...P }, children: [
      /* @__PURE__ */ n(u.Label, { children: m }),
      e && /* @__PURE__ */ n(u.Caption, { children: e }),
      i && !(d != null && d.value) && !s && !k && /* @__PURE__ */ n(u.Validation, { variant: "error", children: i }),
      /* @__PURE__ */ n(J, { suggestion: d }),
      /* @__PURE__ */ n(Q, { message: j }),
      !s && !k && /* @__PURE__ */ n(z, { type: v, ...B, ...r }),
      s && /* @__PURE__ */ n(S, { ...D, sx: { py: 0 }, ...r, children: s.map((o) => /* @__PURE__ */ n(S.Option, { ...o, children: o.label }, o.value)) }),
      k && /* @__PURE__ */ n(R, { checked: a, ...r }),
      /* @__PURE__ */ n("style", { jsx: "true", children: `
          ::-ms-reveal {
            display: none;
          }
        ` })
    ] });
  }
);
N.displayName = "FormField";
function J({ suggestion: e }) {
  return e != null && e.value ? /* @__PURE__ */ p(
    y,
    {
      sx: {
        display: "inline-flex",
        flexWrap: "wrap",
        wordBreak: "break-word",
        fontSize: "12px",
        lineHeight: "14px",
        fontWeight: "bold",
        columnGap: 1,
        mt: 0,
        alignItems: "center",
        color: "attention.fg"
      },
      children: [
        /* @__PURE__ */ n(W, { size: 12 }),
        /* @__PURE__ */ n("span", { children: e.label ?? "Você quis dizer" }),
        /* @__PURE__ */ p(
          L,
          {
            tooltip: e.tooltip || "Aceitar sugestão",
            onClick: e.onClick,
            color: "success.fg",
            children: [
              /* @__PURE__ */ n("span", { children: e.pre }),
              /* @__PURE__ */ n(y, { sx: { textDecoration: "underline" }, children: e.mid }),
              /* @__PURE__ */ n("span", { children: e.post })
            ]
          }
        ),
        /* @__PURE__ */ n("span", { children: e.labelEnd ?? "?" }),
        e.ignoreClick && /* @__PURE__ */ n(
          L,
          {
            tooltip: e.ignoreTooltip || "Ignorar sugestão",
            onClick: e.ignoreClick,
            color: "accent.fg",
            sx: { flex: 1 },
            children: e.ignoreLabel || "Ignorar"
          }
        )
      ]
    }
  ) : null;
}
function L({ children: e, color: a, direction: i = "nw", sx: x, tooltip: c, ...h }) {
  return /* @__PURE__ */ n(O, { text: c, direction: i, children: /* @__PURE__ */ n(
    U,
    {
      variant: "invisible",
      size: "small",
      labelWrap: !0,
      sx: {
        color: a,
        my: "-4px",
        px: 0,
        textAlign: "start",
        "> *": { justifyContent: "end" },
        ":hover": {
          bg: "transparent"
        },
        ...x
      },
      ...h,
      children: e
    }
  ) });
}
function Q({ message: e }) {
  return e ? /* @__PURE__ */ p(
    y,
    {
      sx: {
        wordBreak: "break-word",
        fontSize: "12px",
        lineHeight: "14px",
        fontWeight: "bold",
        color: "attention.fg"
      },
      children: [
        /* @__PURE__ */ n(W, { size: 12 }),
        " ",
        e
      ]
    }
  ) : null;
}
export {
  N as FormField,
  J as Suggestion
};