"use client";
import { jsxs as y, Fragment as ce, jsx as a } 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 T, useCallback as c, useEffect as fe } from "react";
import { c as p } from "./cn-ct4n7r74mh8y0f48.js";
import { K as me, i as he } from "./input-lpa5fc75tgrraafv.js";
import { F as ge } from "./field-lnj619xpe8zjd26r.js";
import { I as ve } from "./vendor-base-ui-ie71jahf0czyf58j.js";
const Te = me, M = {
  size: "base",
  variant: "default"
}, be = de(
  ({
    value: R,
    defaultValue: B = "",
    onChange: S,
    onValueChange: E,
    onCopy: k,
    size: t = M.size,
    variant: j = M.variant,
    disabled: r = !1,
    readOnly: d = !1,
    id: $,
    autoComplete: H = "off",
    className: L,
    label: v,
    labelTooltip: X,
    description: Y,
    error: b,
    required: W,
    ...q
  }, f) => {
    const G = typeof v == "string" ? v : "Sensitive value", x = R !== void 0, [J, O] = C(B), m = x ? R : J, o = m.length > 0, [n, l] = C(
      () => o ? "masked" : "empty"
    ), [h, w] = C(!1), I = N(null), u = N(null), V = T(), Q = T(), Z = $ ?? Q, K = T(), z = c(
      (e) => {
        I.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
      },
      [f]
    );
    fe(() => {
      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(m), w(!0), k?.();
            return;
          }
        } catch {
        }
        if (typeof document < "u") {
          const i = document.createElement("textarea");
          i.value = m, i.setAttribute("readonly", ""), i.style.position = "absolute", i.style.left = "-9999px", document.body.appendChild(i);
          const g = document.getSelection(), F = g?.rangeCount ? g.getRangeAt(0) : null;
          i.select();
          try {
            document.execCommand("copy"), w(!0), k?.();
          } catch (le) {
            console.warn("Clipboard copy failed", le);
          } finally {
            document.body.removeChild(i), F && (g?.removeAllRanges(), g?.addRange(F));
          }
        }
      },
      [m, k]
    ), A = N(o);
    A.current !== o && (A.current = o, !o && n === "masked" && l("empty"));
    const te = c(
      (e) => {
        if (!r) {
          if (u.current) {
            const i = u.current.getBoundingClientRect();
            if (!(e.clientX >= i.left && e.clientX <= i.right && e.clientY >= i.top && e.clientY <= i.bottom)) return;
          }
          n === "masked" && o && (l("revealed"), d || setTimeout(() => I.current?.focus(), 0));
        }
      },
      [n, o, r, d]
    ), ne = c(
      (e) => {
        e.stopPropagation(), n === "revealed" ? l("masked") : n === "empty" && o && l("revealed");
      },
      [n, o]
    ), oe = c(
      (e) => {
        const i = e.target.value;
        x || O(i), n === "empty" && i.length > 0 && l("revealed"), S?.(e), E?.(i);
      },
      [x, S, E, n]
    ), ie = c(
      (e) => {
        u.current && e.relatedTarget instanceof Node && u.current.contains(e.relatedTarget) || o && l("masked");
      },
      [o]
    ), re = c(
      (e) => {
        r || n === "masked" && o && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l("revealed"), d || setTimeout(() => I.current?.focus(), 0));
      },
      [n, o, r, d]
    ), ae = c(
      (e) => {
        n === "revealed" && e.key === "Escape" && (l("masked"), setTimeout(() => u.current?.focus(), 0));
      },
      [n]
    ), s = n === "masked" && o, _ = !r && (n === "revealed" || n === "empty" && o), se = t === "xs" || t === "sm" ? "size-3" : "size-4", D = p(
      he({ size: t, variant: j, 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 && !r && "cursor-pointer",
      r && "cursor-not-allowed",
      L
    ), P = /* @__PURE__ */ y(ce, { children: [
      /* @__PURE__ */ a(
        ve,
        {
          ref: z,
          id: Z,
          type: n === "revealed" ? "text" : "password",
          value: m,
          onChange: oe,
          onBlur: ie,
          onKeyDown: ae,
          disabled: r,
          readOnly: d || s,
          autoComplete: H,
          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,
          ...q
        }
      ),
      /* @__PURE__ */ a(
        "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__ */ y("span", { className: "relative", children: [
            /* @__PURE__ */ a(
              "span",
              {
                className: p(
                  s && !r && "group-focus-within/container:invisible group-hover/mask:invisible"
                ),
                children: "••••••••"
              }
            ),
            s && !r && /* @__PURE__ */ a("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__ */ a(
        "button",
        {
          type: "button",
          onClick: ne,
          onKeyDown: (e) => e.stopPropagation(),
          "aria-label": n === "revealed" ? "Hide value" : "Reveal value",
          tabIndex: _ ? 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,
            !_ && "pointer-events-none opacity-0"
          ),
          children: n === "revealed" ? /* @__PURE__ */ a(ue, { className: "size-full" }) : /* @__PURE__ */ a(pe, { className: "size-full" })
        }
      ),
      o && !r && /* @__PURE__ */ a(
        "button",
        {
          type: "button",
          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"
        }
      )
    ] }), U = /* @__PURE__ */ y("div", { children: [
      s ? /* @__PURE__ */ a(
        "div",
        {
          ref: u,
          role: "button",
          tabIndex: r ? -1 : 0,
          className: D,
          onClick: te,
          onKeyDown: re,
          "aria-label": `${G}, masked.`,
          "aria-describedby": `${K} ${V}`,
          "aria-disabled": r,
          children: P
        }
      ) : /* @__PURE__ */ a("div", { ref: u, className: D, children: P }),
      s && /* @__PURE__ */ a("span", { id: K, className: "sr-only", children: "Click or press Enter to reveal." }),
      /* @__PURE__ */ y("span", { id: V, className: "sr-only", "aria-live": "polite", children: [
        n === "masked" && o && "Value hidden",
        h && "Copied to clipboard"
      ] })
    ] });
    return v ? /* @__PURE__ */ a(
      ge,
      {
        label: v,
        required: W,
        labelTooltip: X,
        description: Y,
        error: b ? typeof b == "string" ? { message: b, match: !0 } : b : void 0,
        children: U
      }
    ) : U;
  }
);
be.displayName = "SensitiveInput";
export {
  Te as K,
  be as S,
  M as a
};
//# sourceMappingURL=sensitive-input-i1upqytzaw2pus8v.js.map
