"use client";
import { jsxs as b, Fragment as ce, jsx as r } from "react/jsx-runtime";
import { EyeSlash as ue, Eye as pe } from "@phosphor-icons/react";
import { forwardRef as de, useState as C, useRef as N, useId as S, useCallback as c, useEffect as me } from "react";
import { K as fe, i as ve } from "./input-ckl5misj0jd9cu5r.js";
import { F as he } from "./field-bmglk138wa8bf3ei.js";
import { c as p } from "./vendor-styling-ofvnbcuht98q88oo.js";
import { I as ge } from "./vendor-base-ui-elpbzr8xeffrz4h2.js";
const Te = fe, ye = {
  size: "base",
  variant: "default"
}, be = de(
  ({
    value: T,
    defaultValue: B = "",
    onChange: E,
    onValueChange: R,
    onCopy: k,
    size: t = ye.size,
    variant: V,
    disabled: i = !1,
    readOnly: d = !1,
    id: j,
    autoComplete: $ = "off",
    className: H,
    label: y,
    labelTooltip: L,
    description: X,
    error: m,
    required: Y,
    ...O
  }, f) => {
    process.env.NODE_ENV !== "production" && V === "error" && console.warn(
      '[Kumo SensitiveInput]: variant="error" is deprecated. Error styling is now automatically applied when the `error` prop is truthy. Simply remove the variant prop and pass an error message instead.'
    );
    const W = V ?? (m ? "error" : "default"), q = typeof y == "string" ? y : "Sensitive value", x = T !== void 0, [G, J] = C(B), v = x ? T : G, o = v.length > 0, [n, l] = C(
      () => o ? "masked" : "empty"
    ), [h, w] = C(!1), I = N(null), u = N(null), K = S(), Q = S(), Z = j ?? Q, A = S(), z = c(
      (e) => {
        I.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
      },
      [f]
    );
    me(() => {
      if (h) {
        const e = setTimeout(() => w(!1), 2e3);
        return () => clearTimeout(e);
      }
    }, [h]);
    const ee = c(
      async (e) => {
        e.stopPropagation();
        try {
          if (typeof navigator < "u" && navigator.clipboard && typeof navigator.clipboard.writeText == "function") {
            await navigator.clipboard.writeText(v), w(!0), k?.();
            return;
          }
        } catch {
        }
        if (typeof document < "u") {
          const a = document.createElement("textarea");
          a.value = v, a.setAttribute("readonly", ""), a.style.position = "absolute", a.style.left = "-9999px", document.body.appendChild(a);
          const g = document.getSelection(), M = g?.rangeCount ? g.getRangeAt(0) : null;
          a.select();
          try {
            document.execCommand("copy"), w(!0), k?.();
          } catch (le) {
            console.warn("Clipboard copy failed", le);
          } finally {
            document.body.removeChild(a), M && (g?.removeAllRanges(), g?.addRange(M));
          }
        }
      },
      [v, k]
    ), _ = N(o);
    _.current !== o && (_.current = o, !o && n === "masked" && l("empty"));
    const te = c(
      (e) => {
        if (!i) {
          if (u.current) {
            const a = u.current.getBoundingClientRect();
            if (!(e.clientX >= a.left && e.clientX <= a.right && e.clientY >= a.top && e.clientY <= a.bottom)) return;
          }
          n === "masked" && o && (l("revealed"), d || setTimeout(() => I.current?.focus(), 0));
        }
      },
      [n, o, i, d]
    ), ne = c(
      (e) => {
        e.stopPropagation(), n === "revealed" ? l("masked") : n === "empty" && o && l("revealed");
      },
      [n, o]
    ), oe = c(
      (e) => {
        const a = e.target.value;
        x || J(a), n === "empty" && a.length > 0 && l("revealed"), E?.(e), R?.(a);
      },
      [x, E, R, n]
    ), ae = c(
      (e) => {
        u.current && e.relatedTarget instanceof Node && u.current.contains(e.relatedTarget) || o && l("masked");
      },
      [o]
    ), ie = c(
      (e) => {
        i || n === "masked" && o && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l("revealed"), d || setTimeout(() => I.current?.focus(), 0));
      },
      [n, o, i, d]
    ), re = c(
      (e) => {
        n === "revealed" && e.key === "Escape" && (l("masked"), setTimeout(() => u.current?.focus(), 0));
      },
      [n]
    ), s = n === "masked" && o, D = !i && (n === "revealed" || n === "empty" && o), se = t === "xs" || t === "sm" ? "size-3" : "size-4", U = p(
      ve({ size: t, variant: W, parentFocusIndicator: !0 }),
      "group/container relative flex w-full items-center",
      // Show browser-native focus outline on container when child input is focused
      "focus-within:outline focus-within:outline-2 focus-within:outline-kumo-focus",
      s && !i && "cursor-pointer",
      i && "cursor-not-allowed",
      H
    ), F = /* @__PURE__ */ b(ce, { children: [
      /* @__PURE__ */ r(
        ge,
        {
          ref: z,
          id: Z,
          type: n === "revealed" ? "text" : "password",
          value: v,
          onChange: oe,
          onBlur: ae,
          onKeyDown: re,
          disabled: i,
          readOnly: d || s,
          autoComplete: $,
          tabIndex: s ? -1 : 0,
          className: p(
            "w-full border-0 bg-transparent p-0 text-kumo-default ring-0 outline-none kumo-input-placeholder disabled:cursor-not-allowed disabled:text-kumo-subtle",
            t === "xs" && "pr-5",
            t === "sm" && "pr-6",
            t === "base" && "pr-8",
            t === "lg" && "pr-10",
            s && "pointer-events-none text-transparent"
          ),
          "aria-hidden": s,
          ...O
        }
      ),
      /* @__PURE__ */ r(
        "span",
        {
          className: p(
            "pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none",
            // Match input pr padding (space for icon)
            t === "xs" && "right-5",
            t === "sm" && "right-6",
            t === "base" && "right-8",
            t === "lg" && "right-10",
            // Match the padding from inputVariants
            t === "xs" && "px-1.5",
            t === "sm" && "px-2",
            t === "base" && "px-3",
            t === "lg" && "px-4",
            // Hidden when not masked
            !s && "invisible",
            // When masked: enable pointer events
            s && "pointer-events-auto",
            // Text color - use text-kumo-default to contrast with bg-kumo-control input background
            "text-kumo-default",
            // Hover state - pure CSS, no React state (group for children)
            "group/mask"
          ),
          "aria-hidden": "true",
          children: /* @__PURE__ */ b("span", { className: "relative", children: [
            /* @__PURE__ */ r(
              "span",
              {
                className: p(
                  s && !i && "group-focus-within/container:invisible group-hover/mask:invisible"
                ),
                children: "••••••••"
              }
            ),
            s && !i && /* @__PURE__ */ r("span", { className: "invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible", children: "Click to reveal" })
          ] })
        }
      ),
      /* @__PURE__ */ r(
        "button",
        {
          type: "button",
          "data-kumo-component": "SensitiveInput",
          "data-kumo-part": "toggle-visibility",
          onClick: ne,
          onKeyDown: (e) => e.stopPropagation(),
          "aria-label": n === "revealed" ? "Hide value" : "Reveal value",
          tabIndex: D ? 0 : -1,
          className: p(
            "absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle hover:text-kumo-default focus:text-kumo-default focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:rounded-sm",
            // Defensive styles to prevent global CSS pollution (e.g., button { background: gray })
            "bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 inline-flex items-center justify-center",
            // Match right padding from inputVariants
            t === "xs" && "right-1.5",
            t === "sm" && "right-2",
            t === "base" && "right-3",
            t === "lg" && "right-4",
            se,
            !D && "pointer-events-none opacity-0"
          ),
          children: n === "revealed" ? /* @__PURE__ */ r(ue, { className: "size-full" }) : /* @__PURE__ */ r(pe, { className: "size-full" })
        }
      ),
      o && !i && /* @__PURE__ */ r(
        "button",
        {
          type: "button",
          "data-kumo-component": "SensitiveInput",
          "data-kumo-part": "copy",
          onClick: ee,
          onKeyDown: (e) => e.stopPropagation(),
          "aria-label": h ? "Copied" : "Copy to clipboard",
          className: p(
            "absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
            // Defensive styles to prevent global CSS pollution
            "border-none shadow-none m-0 h-auto min-h-0"
          ),
          children: h ? "Copied" : "Copy"
        }
      )
    ] }), P = /* @__PURE__ */ b("div", { children: [
      s ? /* @__PURE__ */ r(
        "div",
        {
          ref: u,
          role: "button",
          "data-kumo-component": "SensitiveInput",
          "data-kumo-part": "masked-container",
          tabIndex: i ? -1 : 0,
          className: U,
          onClick: te,
          onKeyDown: ie,
          "aria-label": `${q}, masked.`,
          "aria-describedby": `${A} ${K}`,
          "aria-disabled": i,
          children: F
        }
      ) : /* @__PURE__ */ r("div", { ref: u, className: U, children: F }),
      s && /* @__PURE__ */ r("span", { id: A, className: "sr-only", children: "Click or press Enter to reveal." }),
      /* @__PURE__ */ b("span", { id: K, className: "sr-only", "aria-live": "polite", children: [
        n === "masked" && o && "Value hidden",
        h && "Copied to clipboard"
      ] })
    ] });
    return y ? /* @__PURE__ */ r(
      he,
      {
        label: y,
        required: Y,
        labelTooltip: L,
        description: X,
        error: m ? typeof m == "string" ? { message: m, match: !0 } : m : void 0,
        children: P
      }
    ) : P;
  }
);
be.displayName = "SensitiveInput";
export {
  Te as K,
  be as S,
  ye as a
};
//# sourceMappingURL=sensitive-input-it1hsswlccq3u7g6.js.map
