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