nextuiq/dist/index34.js

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

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index46.js"),r=require("react"),t=r.forwardRef((({length:t=6,value:o="",onChange:n,disabled:a=!1,error:s=!1,hint:c,className:i="",label:u="Verification code",description:l="Enter the verification code",inputType:d="numeric",...m},h)=>{const[x,p]=r.useState(o.split("")),f=r.useRef([]),g=r.useRef(`otp-${Math.random().toString(36).slice(2,11)}`),v=e=>{e.preventDefault();const r=e.clipboardData.getData("text").slice(0,t);if(!{numeric:/^\d*$/,alphanumeric:/^[a-zA-Z0-9]*$/,any:/^.*$/}[d].test(r))return;const o=[...x];r.split("").forEach(((e,r)=>{o[r]=e,f.current[r]&&(f.current[r].value=e)})),p(o),n?.(o.join("")),f.current[Math.min(r.length,t)-1]?.focus()};return e.jsxRuntimeExports.jsxs("div",{ref:h,className:"space-y-2",children:[e.jsxRuntimeExports.jsxs("div",{role:"group","aria-labelledby":`${g.current}-label`,"aria-describedby":`${g.current}-description ${s?`${g.current}-error`:""}`,className:"space-y-2",children:[e.jsxRuntimeExports.jsx("label",{id:`${g.current}-label`,className:"block text-sm font-medium text-[oklch(var(--theme-foreground))]",children:u}),l&&e.jsxRuntimeExports.jsx("p",{id:`${g.current}-description`,className:"text-sm text-[oklch(var(--theme-muted-foreground))]",children:l}),e.jsxRuntimeExports.jsx("div",{className:`flex gap-2 ${i}`,children:Array.from({length:t},((r,o)=>e.jsxRuntimeExports.jsx("input",{ref(e){e&&(f.current[o]=e)},type:"text",inputMode:"numeric"===d?"numeric":"text",pattern:"numeric"===d?"\\d*":void 0,maxLength:1,value:x[o]||"",onChange:e=>((e,r)=>{if(!{numeric:/^\d*$/,alphanumeric:/^[a-zA-Z0-9]*$/,any:/^.*$/}[d].test(r))return;const o=[...x];o[e]=r,p(o),n?.(o.join("")),r&&e<t-1&&f.current[e+1]?.focus()})(o,e.target.value),onKeyDown:e=>((e,r)=>{"Backspace"===r.key&&!x[e]&&e>0||"ArrowLeft"===r.key&&e>0?f.current[e-1]?.focus():"ArrowRight"===r.key&&e<t-1&&f.current[e+1]?.focus()})(o,e),onPaste:v,disabled:a,"aria-label":`Digit ${o+1} of ${t}`,...m,className:"h-12 w-12 text-center rounded-lg border text-lg font-semibold shadow-sm\n                bg-[oklch(var(--theme-background))]\n                text-[oklch(var(--theme-foreground))]\n                focus:outline-none focus:ring-2\n                "+(a?"text-[oklch(var(--theme-muted-foreground))] border-[oklch(var(--theme-border))] bg-[oklch(var(--theme-muted))] cursor-not-allowed":s?"border-[oklch(var(--theme-destructive))] focus:ring-[oklch(var(--theme-destructive)/0.2)]":"border-[oklch(var(--theme-border))] focus:border-[oklch(var(--theme-ring))] focus:ring-[oklch(var(--theme-ring)/0.2)]")},o)))})]}),c&&e.jsxRuntimeExports.jsx("p",{id:`${g.current}-error`,className:"text-xs "+(s?"text-[oklch(var(--theme-destructive))]":"text-[oklch(var(--theme-muted-foreground))]"),children:c})]})}));t.displayName="OTPInput",exports.OTPInput=t,exports.default=t;