"use client";
import { jsxs as m, jsx as r } from "react/jsx-runtime";
import { designTokens as e } from "../design-tokens.js";
import { Label as x } from "./label.js";
import { cn as a } from "../../lib/utils.js";
function h({
  wrpClassName: o,
  className: s,
  label: t,
  labelClassName: n,
  id: d,
  ...l
}) {
  const i = d || (t ? `textarea-${Math.random().toString(36).substring(2, 9)}` : void 0);
  return /* @__PURE__ */ m("div", { className: a("space-y-1.5", o), children: [
    t && /* @__PURE__ */ r(x, { htmlFor: i, className: n, children: t }),
    /* @__PURE__ */ r(
      "textarea",
      {
        id: i,
        "data-slot": "textarea",
        className: a(
          e.input.base,
          e.radius.default,
          e.text.base,
          e.text.placeholder,
          e.interaction.disabled,
          "flex min-h-16 w-full max-w-full min-w-0 px-3 py-2 shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
          "overflow-x-hidden break-words whitespace-pre-wrap",
          // Focus states
          "focus-visible:ring-d-ring/50 focus-visible:border-d-ring focus-visible:ring-[3px]",
          e.input.invalid,
          s
        ),
        ...l
      }
    )
  ] });
}
export {
  h as Textarea
};
