"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
__name(cn, "cn");
var DEFAULT_MIN_TEXTAREA_HEIGHT = 32;
var DEFAULT_MAX_TEXTAREA_HEIGHT = 300;
var Textarea = React.forwardRef(
  ({
    className,
    minHeight = DEFAULT_MIN_TEXTAREA_HEIGHT,
    maxHeight = DEFAULT_MAX_TEXTAREA_HEIGHT,
    resize = "none",
    ...props
  }, ref) => {
    const textareaRef = React.useRef(null);
    const mergedRef = ref || textareaRef;
    React.useLayoutEffect(() => {
      if (!mergedRef.current) return;
      mergedRef.current.style.height = "inherit";
      mergedRef.current.style.height = `${Math.max(
        mergedRef.current.scrollHeight + 2,
        minHeight
      )}px`;
      if (props.autoFocus !== void 0 && props.autoFocus) {
        mergedRef.current.focus();
      }
    }, [props.value, minHeight, maxHeight]);
    return /* @__PURE__ */ jsx(
      "textarea",
      {
        className: cn(
          "bg-bg-secondary placeholder:!text-text-placeholder border-input focus-visible:ring-border-input-focus flex w-full rounded-md border px-4 py-2 pt-7 text-sm break-words focus-visible:ring-1 focus-visible:outline-hidden focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50",
          className
        ),
        ref: mergedRef,
        style: {
          minHeight: `${minHeight}px`,
          maxHeight: resize === "vertical" ? void 0 : `${maxHeight}px`,
          resize
        },
        ...props
      }
    );
  }
);
Textarea.displayName = "Textarea";

export { Textarea };
