import { as as y, x as h, j as r, z as j, $ as n } from "./index-c65ca4a4.mjs";
const k = ({
  inputRef: d,
  title: s,
  value: l,
  rows: x = 3,
  maxLength: a,
  resize: i = "none",
  error: o,
  placeholder: b,
  hint: t,
  clearBg: m = !0,
  fontStyle: u = "sans",
  className: f,
  onChange: g,
  ...p
}) => {
  const c = y();
  let e = h(
    "peer order-2 rounded-sm border px-3 py-2",
    m ? "bg-transparent" : "bg-grey-75",
    o ? "border-red" : "border-grey-500 hover:border-grey-700 focus:border-grey-800",
    s && "mt-2",
    u === "mono" && "font-mono text-sm",
    f
  );
  switch (i) {
    case "both":
      e += " resize ";
      break;
    case "vertical":
      e += " resize-y ";
      break;
    case "horizontal":
      e += " resize-x ";
      break;
    case "none":
      e += " resize-none ";
      break;
    default:
      e += " resize ";
      break;
  }
  return /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col", children: [
    /* @__PURE__ */ r.jsx(
      "textarea",
      {
        ref: d,
        className: e,
        id: c,
        maxLength: a,
        placeholder: b,
        rows: x,
        value: l,
        onChange: g,
        ...p
      }
    ),
    s && /* @__PURE__ */ r.jsx(j, { className: "order-1 !text-grey-700 peer-focus:!text-black", htmlFor: c, useLabelTag: !0, children: s }),
    t && /* @__PURE__ */ r.jsx(n, { className: "order-3", color: o ? "red" : "", children: t }),
    a && /* @__PURE__ */ r.jsxs(n, { children: [
      "Max length is ",
      a
    ] })
  ] });
};
export {
  k as T
};
//# sourceMappingURL=TextArea-65b41e1e.mjs.map
