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) • 2.97 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),r=require("react"),o=r.memo((({countries:o,placeholder:t="+1 (555) 000-0000",onChange:n,selectPosition:s="start",id:a,name:l,required:d=!1,disabled:i=!1,"aria-label":u,"aria-describedby":c})=>{const[h,m]=r.useState("US"),[p,x]=r.useState("+1"),b=r.useMemo((()=>o.reduce(((e,r)=>({...e,[r.code]:r})),{})),[o]),g=r.useCallback((e=>{const r=e.target.value;m(r);const o=b[r];x(o?.code||"+1"),n?.(o?.code||"+1")}),[b,n]),v=r.useId(),j=a||v,k=`${j}-country`,f=r.useCallback((e=>{const r=e.target.value;x(r),n?.(r)}),[n]),y=r.useCallback((({position:r})=>e.jsxRuntimeExports.jsxs("div",{className:"absolute "+("end"===r?"right-0":""),children:[e.jsxRuntimeExports.jsx("select",{id:k,value:h,onChange:g,disabled:i,required:d,"aria-label":"Select country code",className:`appearance-none bg-none ${"start"===r?"rounded-l-lg border-r":"rounded-r-lg border-l"} border-0 border-[oklch(var(--theme-border))] bg-transparent py-3 pl-3.5 pr-8 \n text-[oklch(var(--theme-foreground))] \n focus:border-[oklch(var(--theme-ring))] \n focus:outline-none focus:ring-2 \n focus:ring-[oklch(var(--theme-ring))]`,children:o.map((r=>e.jsxRuntimeExports.jsx("option",{value:r.code,className:"text-[oklch(var(--theme-foreground))] bg-[oklch(var(--theme-background))]",children:r.code},r.code)))}),e.jsxRuntimeExports.jsx("div",{className:"absolute inset-y-0 flex items-center text-[oklch(var(--theme-muted-foreground))] pointer-events-none right-3","aria-hidden":"true",children:e.jsxRuntimeExports.jsx("svg",{className:"stroke-current",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e.jsxRuntimeExports.jsx("path",{d:"M4.79175 7.396L10.0001 12.6043L15.2084 7.396",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})),[k,h,g,i,d,o]);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex",role:"group","aria-labelledby":u?void 0:j,children:["start"===s&&e.jsxRuntimeExports.jsx(y,{position:"start"}),e.jsxRuntimeExports.jsx("input",{type:"tel",id:j,name:l,value:p,onChange:f,placeholder:t,required:d,disabled:i,"aria-label":u||"Phone number","aria-describedby":c,inputMode:"tel",autoComplete:"tel",className:`h-11 w-full ${"start"===s?"pl-[84px]":"pr-[84px]"} rounded-lg border border-[oklch(var(--theme-border))] \n bg-[oklch(var(--theme-background))] py-3 px-4 text-sm \n text-[oklch(var(--theme-foreground))] shadow-sm \n placeholder:text-[oklch(var(--theme-muted-foreground))] \n focus:border-[oklch(var(--theme-ring))] \n focus:outline-none focus:ring-2 \n focus:ring-[oklch(var(--theme-ring))]\n disabled:cursor-not-allowed disabled:opacity-50`}),"end"===s&&e.jsxRuntimeExports.jsx(y,{position:"end"})]})}));o.displayName="PhoneInput",exports.PhoneInput=o;