"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react"; import type { TextareaHTMLAttributes } from "react"; export type TextareaAutosizeProps = Omit, "value" | "defaultValue" | "onChange"> & { label: string; description?: string; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Hard character limit, enforced natively. */ maxLength?: number; minRows?: number; maxRows?: number; /** Characters left at which the counter starts announcing. */ warnAt?: number; error?: string; }; const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; function cx(...values: Array) { return values.filter(Boolean).join(" "); } export function TextareaAutosize({ label, description, value, defaultValue = "", onValueChange, maxLength, minRows = 3, maxRows = 10, warnAt = 20, error, id: idProp, className, ...props }: TextareaAutosizeProps) { const reactId = useId(); const textareaId = idProp ?? reactId + "-textarea"; const descriptionId = reactId + "-description"; const counterId = reactId + "-counter"; const errorId = reactId + "-error"; const [inner, setInner] = useState(defaultValue); const current = value !== undefined ? value : inner; const ref = useRef(null); const resize = useCallback(() => { const node = ref.current; if (!node) return; const styles = window.getComputedStyle(node); const lineHeight = parseFloat(styles.lineHeight) || 24; const chrome = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom) + parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth); node.style.height = "auto"; const minHeight = minRows * lineHeight + chrome; const maxHeight = maxRows * lineHeight + chrome; const next = Math.min(Math.max(node.scrollHeight + (parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth) || 0), minHeight), maxHeight); node.style.height = next + "px"; node.style.overflowY = node.scrollHeight > maxHeight ? "auto" : "hidden"; }, [minRows, maxRows]); useIsomorphicLayoutEffect(() => { resize(); }, [current, resize]); useEffect(() => { window.addEventListener("resize", resize); return () => window.removeEventListener("resize", resize); }, [resize]); const remaining = maxLength !== undefined ? maxLength - current.length : null; const warning = remaining !== null && remaining <= warnAt; const describedBy = cx(description && descriptionId, maxLength !== undefined && counterId, error && errorId) || undefined; return (

{label} {description ? (

{description}

) : null}

{
          if (value === undefined) setInner(event.target.value);
          onValueChange?.(event.target.value);
        }}
        className={cx(
          "w-full resize-none rounded-md border bg-[#FBFBF8] px-3 py-2.5 text-[15px] leading-6 text-[#1D211F] outline-none transition-[border-color,box-shadow] motion-reduce:transition-none placeholder:text-[#5E6764]",
          "focus-visible:border-[#1E6B64] focus-visible:ring-2 focus-visible:ring-[#1E6B64]/35 disabled:cursor-not-allowed disabled:opacity-60",
          "dark:bg-[#232A29] dark:text-[#E9EBE4] dark:placeholder:text-[#A6B0AD] dark:focus-visible:border-[#7FC4BA] dark:focus-visible:ring-[#7FC4BA]/40",
          error ? "border-[#A33228] dark:border-[#F0897D]" : "border-[#858B83] dark:border-[#6E7976]",
        )}
      />
      <div className="flex items-start justify-between gap-4">
        <p id={errorId} aria-live="polite" className="text-sm text-[#A33228] dark:text-[#F0897D]">
          {error ?? ""}
        </p>
        {maxLength !== undefined && remaining !== null ? (
          <p
            id={counterId}
            aria-live={warning ? "polite" : "off"}
            className={cx("shrink-0 text-sm tabular-nums", remaining <= 0 ? "text-[#A33228] dark:text-[#F0897D]" : warning ? "text-[#1D211F] dark:text-[#E9EBE4]" : "text-[#535C59] dark:text-[#A6B0AD]")}
          >
            <span aria-hidden="true">
              {current.length} / {maxLength}
            </span>
            <span className="sr-only">{remaining <= 0 ? "Character limit reached." : remaining + (remaining === 1 ? " character left." : " characters left.")}</span>
          </p>
        ) : null}
      </div>
    </div>
  );
}
</article></body></html>