UNPKG

nextuiq

Version:

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

2 lines (1 loc) 1.87 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),r=require("react"),t=r.forwardRef((({placeholder:t="Enter your message",rows:a=3,value:o="",onChange:s,className:l="",disabled:d=!1,error:n=!1,hint:c="",label:i,required:m=!1,id:h,name:u,"aria-label":x,"aria-describedby":v,...b},g)=>{const p=r.useId(),k=h||p,f=`${k}-hint`;let j=`w-full rounded-lg border px-4 py-2.5 text-sm shadow-sm \n bg-[oklch(var(--theme-background))]\n text-[oklch(var(--theme-foreground))]\n placeholder:text-[oklch(var(--theme-muted-foreground))]\n focus:outline-none focus:ring-2 ${l}`;return j+=d?" bg-[oklch(var(--theme-muted))] opacity-50 \n text-[oklch(var(--theme-muted-foreground))] \n border-[oklch(var(--theme-border))] cursor-not-allowed":n?" border-[oklch(var(--theme-destructive))] \n focus:ring-[oklch(var(--theme-destructive)/0.2)]":" border-[oklch(var(--theme-border))] \n focus:ring-[oklch(var(--theme-ring))]",e.jsxRuntimeExports.jsxs("div",{className:"space-y-1.5",children:[i&&e.jsxRuntimeExports.jsxs("label",{htmlFor:k,className:"block text-sm font-medium "+(d?"text-[oklch(var(--theme-muted-foreground))]":"text-[oklch(var(--theme-foreground))]"),children:[i,m&&e.jsxRuntimeExports.jsx("span",{className:"text-[oklch(var(--theme-destructive))] ml-1",children:"*"})]}),e.jsxRuntimeExports.jsxs("div",{className:"relative",children:[e.jsxRuntimeExports.jsx("textarea",{ref:g,id:k,name:u,placeholder:t,rows:a,value:o,onChange(e){s?.(e.target.value)},disabled:d,required:m,"aria-invalid":n,"aria-label":x||i,"aria-describedby":c?f:v,className:j,...b}),c&&e.jsxRuntimeExports.jsx("p",{id:f,className:"mt-2 text-sm "+(n?"text-[oklch(var(--theme-destructive))]":"text-[oklch(var(--theme-muted-foreground))]"),children:c})]})]})}));t.displayName="TextArea",exports.TextArea=t;