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.94 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),r=require("react"),t=require("./index47.js"),a=({options:a,placeholder:o="Select an option",onChange:n,className:s="",defaultValue:l="",disabled:d=!1,error:i=!1,required:c=!1,name:u,id:h,"aria-label":m,"aria-describedby":x,...v})=>{const[p,b]=r.useState(l),g=r.useId(),j=h||g,k=r.useCallback((e=>{const r=e.target.value;b(r),n(r)}),[n]);return e.jsxRuntimeExports.jsxs("div",{className:"relative",children:[e.jsxRuntimeExports.jsxs("select",{id:j,name:u,value:p,onChange:k,disabled:d,required:c,"aria-label":m,"aria-describedby":x,"aria-invalid":i,className:`h-11 w-full appearance-none rounded-lg border px-4 py-2.5 pr-11 text-sm shadow-sm \n ${i?"border-[oklch(var(--theme-destructive))]":"border-[oklch(var(--theme-border))]"}\n ${d?"cursor-not-allowed opacity-50":""}\n ${p?"text-[oklch(var(--theme-foreground))]":"text-[oklch(var(--theme-muted-foreground))]"}\n bg-[oklch(var(--theme-background))]\n placeholder:text-[oklch(var(--theme-muted-foreground))]\n focus:border-[oklch(var(--theme-primary))]\n focus:outline-none\n focus:ring-2\n focus:ring-[oklch(var(--theme-ring))]\n ${s}`,...v,children:[e.jsxRuntimeExports.jsx("option",{value:"",disabled:!0,hidden:!0,children:o}),a.map((r=>e.jsxRuntimeExports.jsx("option",{value:r.value,disabled:r.disabled,className:"text-[oklch(var(--theme-foreground))] bg-[oklch(var(--theme-background))]",children:r.label},r.value)))]}),e.jsxRuntimeExports.jsx("div",{className:"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2","aria-hidden":"true",children:e.jsxRuntimeExports.jsx(t.FiChevronDown,{className:"h-5 w-5 "+(i?"text-[oklch(var(--theme-destructive))]":"text-[oklch(var(--theme-muted-foreground))]")})})]})};a.displayName="Select";const o=r.memo(a);exports.Select=o;