import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useId } from "react";
import { c as cn } from "../../cn-FAaWYZ6x.js";
const Textarea = forwardRef(
  ({ className, label, description, required, ...props }, ref) => {
    const id = useId();
    const descriptionId = `${id}-description`;
    const textareaElement = /* @__PURE__ */ jsx(
      "textarea",
      {
        ref,
        id,
        "data-slot": "textarea",
        required,
        "aria-describedby": description ? descriptionId : void 0,
        className: cn(
          "block w-full rounded-lg bg-input px-3 py-2 text-strong",
          "placeholder:text-subtle",
          "focus:outline-none focus:ring-2 focus:ring-ring",
          "disabled:bg-subtle disabled:text-disabled disabled:opacity-50",
          "min-h-16 resize-vertical",
          className
        ),
        ...props
      }
    );
    if (!label) {
      return textareaElement;
    }
    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "block font-medium text-strong", children: [
          label,
          required && /* @__PURE__ */ jsx("span", { className: "text-negative ml-1", children: "*" })
        ] }),
        description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-subtle", children: description })
      ] }),
      textareaElement
    ] });
  }
);
Textarea.displayName = "Textarea";
export {
  Textarea
};
