import { jsx as t, jsxs as m } from "react/jsx-runtime";
import { forwardRef as I, useRef as j, useImperativeHandle as R, useState as w, useEffect as p, Fragment as B } from "react";
import { Input as k } from "@headlessui/react";
import { CloseW700 as z } from "@material-symbols-svg/react-rounded/icons/close";
import { cn as i } from "../utils/cn.js";
const $ = I(
  ({
    state: e = "default",
    defaultValue: r = "",
    focusOnMount: x = !1,
    className: y,
    onChange: u,
    children: b,
    icon: c,
    ...d
  }, h) => {
    const a = j(null);
    R(h, () => a.current);
    const [s, f] = w(!1), [o, n] = w(r), v = () => f(!0), N = () => f(!1), C = () => {
      n(""), u?.({
        target: { value: "" }
      });
    }, F = (g) => {
      n(g.target.value), u?.(g);
    };
    p(() => {
      n(r);
    }, [r]), p(() => {
      x && a.current?.focus();
    }, []);
    const l = ["disabled", "fixed"].includes(e);
    return /* @__PURE__ */ t(
      k,
      {
        type: "text",
        as: B,
        disabled: l,
        autoComplete: "off",
        className: i(
          "px-sw-lg py-sw-lg text-sw-label-md rounded-sw-md ring-transparent ring-1 ring-inset data-focus:outline-none transition-colors bg-sw-gray-800",
          {
            "text-sw-gray-400 bg-sw-gray-800": e === "fixed",
            "text-sw-status-error bg-sw-gray-800": e === "error",
            "text-sw-gray-50 bg-sw-gray-700": s && e === "default",
            "text-sw-gray-50 hover:bg-sw-gray-700": !s && e === "default",
            "cursor-not-allowed bg-sw-gray-800 text-sw-gray-400": e === "disabled"
          },
          y
        ),
        ...d,
        children: () => /* @__PURE__ */ m("div", { className: "flex items-center justify-between", children: [
          c && /* @__PURE__ */ t(c, { size: 16, className: "mr-sw-md text-sw-gray-200" }),
          /* @__PURE__ */ t(
            "input",
            {
              value: o,
              ref: a,
              onBlur: N,
              onFocus: v,
              onChange: F,
              disabled: l,
              placeholder: d.placeholder,
              autoComplete: "off",
              className: i("text-sw-label-md mr-auto w-full outline-none", {
                "cursor-not-allowed": e === "disabled"
              })
            }
          ),
          !l && /* @__PURE__ */ m("div", { className: "gap-sw-md relative flex items-center justify-end", children: [
            b,
            o ? /* @__PURE__ */ t(
              "button",
              {
                type: "button",
                className: i(
                  "opacity-0 transition-opacity duration-150 ease-in-out cursor-pointer hover:text-sw-gray-50",
                  {
                    "opacity-100": !!o,
                    "text-sw-gray-200": s,
                    "text-sw-gray-300": !s
                  }
                ),
                onClick: C,
                children: /* @__PURE__ */ t(z, { className: "h-sw-xl w-sw-xl" })
              }
            ) : null
          ] })
        ] })
      }
    );
  }
);
export {
  $ as Input
};
//# sourceMappingURL=Input.js.map
