nextuiq/dist/index29.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { forwardRef, useId } from 'react';

const TextAreaComponent = forwardRef(({
  placeholder = "Enter your message",
  rows = 3,
  value = "",
  onChange,
  className = "",
  disabled = false,
  error = false,
  hint = "",
  label,
  required = false,
  id,
  name,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedby,
  ...props
}, ref) => {
  const uniqueId = useId();
  const textareaId = id || uniqueId;
  const hintId = `${textareaId}-hint`;
  const handleChange = (e) => {
    onChange?.(e.target.value);
  };
  let textareaClasses = `w-full rounded-lg border px-4 py-2.5 text-sm shadow-sm 
      bg-[oklch(var(--theme-background))]
      text-[oklch(var(--theme-foreground))]
      placeholder:text-[oklch(var(--theme-muted-foreground))]
      focus:outline-none focus:ring-2 ${className}`;
  if (disabled) {
    textareaClasses += ` bg-[oklch(var(--theme-muted))] opacity-50 
      text-[oklch(var(--theme-muted-foreground))] 
      border-[oklch(var(--theme-border))] cursor-not-allowed`;
  } else if (error) {
    textareaClasses += ` border-[oklch(var(--theme-destructive))] 
      focus:ring-[oklch(var(--theme-destructive)/0.2)]`;
  } else {
    textareaClasses += ` border-[oklch(var(--theme-border))] 
      focus:ring-[oklch(var(--theme-ring))]`;
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
    label && /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "label",
      {
        htmlFor: textareaId,
        className: `block text-sm font-medium ${disabled ? "text-[oklch(var(--theme-muted-foreground))]" : "text-[oklch(var(--theme-foreground))]"}`,
        children: [
          label,
          required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[oklch(var(--theme-destructive))] ml-1", children: "*" })
        ]
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "textarea",
        {
          ref,
          id: textareaId,
          name,
          placeholder,
          rows,
          value,
          onChange: handleChange,
          disabled,
          required,
          "aria-invalid": error,
          "aria-label": ariaLabel || label,
          "aria-describedby": hint ? hintId : ariaDescribedby,
          className: textareaClasses,
          ...props
        }
      ),
      hint && /* @__PURE__ */ jsxRuntimeExports.jsx(
        "p",
        {
          id: hintId,
          className: `mt-2 text-sm ${error ? "text-[oklch(var(--theme-destructive))]" : "text-[oklch(var(--theme-muted-foreground))]"}`,
          children: hint
        }
      )
    ] })
  ] });
});
TextAreaComponent.displayName = "TextArea";
const TextArea = TextAreaComponent;

export { TextArea };