@inpulse-ui/otc 3.0.0 → 3.1.0

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import React, { ComponentRef } from 'react';
 type Group = {
     onComplete?: () => void;
     disabled?: boolean;
+    fit?: boolean;
     label?: string;
     length: number;
     name: string;
@@ -15,6 +16,7 @@ type GroupRef = ComponentRef<'div'> & Group;
 declare const OneTimeCode: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     onComplete?: () => void;
     disabled?: boolean;
+    fit?: boolean;
     label?: string;
     length: number;
     name: string;
@@ -25,6 +27,7 @@ declare const OneTimeCode: React.ForwardRefExoticComponent<Omit<React.DetailedHT
 declare const OTC: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     onComplete?: () => void;
     disabled?: boolean;
+    fit?: boolean;
     label?: string;
     length: number;
     name: string;
@@ -35,6 +38,7 @@ declare const OTC: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<
 declare const Otc: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     onComplete?: () => void;
     disabled?: boolean;
+    fit?: boolean;
     label?: string;
     length: number;
     name: string;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var P=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.prototype.hasOwnProperty;var Y=(t,s)=>{for(var i in s)P(t,i,{get:s[i],enumerable:!0})},_=(t,s,i,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of W(s))!X.call(t,n)&&n!==i&&P(t,n,{get:()=>s[n],enumerable:!(l=Q(s,n))||l.enumerable});return t};var j=t=>_(P({},"__esModule",{value:!0}),t);var le={};Y(le,{OTC:()=>ae,OneTimeCode:()=>$,Otc:()=>re});module.exports=j(le);var E=require("react");var D=require("react"),V=require("react-hook-form"),M=require("react/jsx-runtime");function ee(t){return t&&(t.value===""||t.value===void 0)}function A(t){return t&&t.value!==""&&t.value!==void 0}function b(t){if(t){let{length:s}=t.value,i=t.value!==""&&t.value!==void 0;t.focus(),t.setSelectionRange&&t.setSelectionRange(i?0:s,s)}}var H=(0,D.forwardRef)((t,s)=>{let{className:i,index:l,slotsRef:n,label:y,length:o,name:h,autoSubmit:S,onComplete:g}=t,{register:T,setValue:I}=(0,V.useFormContext)(),x=`${h}.${l}`,C=l===0,{ref:k,...K}=T(x),f=()=>n.current[l],d=()=>n.current[l-1],v=()=>n.current[l+1];function O(a){let e=a===1,r=[],p=e?o-l:l+1;return[...Array(p)].forEach((z,c)=>{let m=e?l+c:l-c,u=n.current[m];ee(u)&&r.push(u)}),r[e?0:r.length-1]}function w(){let a=0;return n.current.forEach((e,r)=>{A(e)&&(a+=1)}),a}function L(){if(S){let e=n.current[l]?.closest("form");e&&e.requestSubmit()}g&&g()}function U(){let a=f();b(a)}function q(){if(w()>0)return!1;let a=O(-1);return b(a),!1}function B(a){let e=a.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,o-l);let r=e.split("");if(I(h,r),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),w()===o)L();else{let p=O(1);p&&setTimeout(()=>p.focus(),0)}}}function Z(a){let e,{key:r}=a,{ctrlKey:p,metaKey:z,shiftKey:c}=a,m=!p&&!z&&!c&&r.match(/^[A-Za-z0-9]$/),{value:u}=a.currentTarget;r==="Backspace"||r==="Delete"?u?(e=f(),e&&(e.value="")):(e=d(),e&&(e.value="",e.focus())):r==="Enter"?w()===o&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),L()):r==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():m&&(r=r.replace(/[^0-9]+/g,""),r.length||a.preventDefault())}function J(a){let e,{key:r}=a,{ctrlKey:p,metaKey:z,shiftKey:c}=a,m=!p&&!z&&!c&&r?.match(/^[0-9]$/),{value:u}=a.currentTarget;r==="ArrowLeft"||r==="PageUp"||r==="ArrowRight"||r==="PageDown"?(r==="ArrowLeft"||r==="PageUp"?e=d():e=v(),b(e||f())):m&&(A(a.currentTarget)&&l<o-1?(e=v(),b(e)):u&&l===o-1&&(w()===o?(e=f(),e&&e.blur(),L()):(e=O(-1),e&&e.focus())))}return(0,M.jsx)("div",{style:{width:`calc(100% / ${o})`},children:(0,M.jsx)("input",{...K,id:x,ref:a=>{k(a),typeof s=="function"?s(a):s&&(s.current=a),n.current[l]=a},type:"tel",className:i,pattern:"[0-9]",defaultValue:"",autoComplete:C?"one-time-code":"off","aria-label":`${y||"Code Number"} ${l}`,maxLength:1,onClick:U,onFocus:q,onPaste:B,onKeyDown:Z,onKeyUp:J})})});H.displayName="OneTimeCodeSlot";var F=require("tailwind-variants"),te=(0,F.tv)({slots:{base:"relative",icon:"absolute text-slate-400 dark:text-zinc-500 cursor-pointer",input:["appearance-none","outline-0","focus:outline-hidden","bg-white","dark:bg-zinc-900","text-slate-900","caret-slate-500","dark:caret-zinc-500","dark:text-zinc-100","text-fill-slate-900","dark:text-fill-white","border-slate-300","dark:border-zinc-600","transition","placeholder:text-fill-slate-400","placeholder:dark:text-fill-zinc-400","placeholder:opacity-0","placeholder:transition-opacity","placeholder:duration-200","focus:placeholder:opacity-100","disabled:cursor-not-allowed","disabled:opacity-50","disabled:bg-black/5","peer"],label:["absolute","dark:bg-zinc-900","pointer-events-none","text-slate-400","dark:text-zinc-400","duration-200","rounded-sm","transform","origin-[0]","scale-[0.65]","translate-x-1","peer-placeholder-shown:-translate-y-0","peer-placeholder-shown:translate-x-0","peer-placeholder-shown:scale-100","peer-placeholder-shown:text-slate-600","dark:peer-placeholder-shown:text-zinc-300","peer-focus:translate-x-1","peer-focus:scale-[0.65]","peer-focus:text-slate-400","dark:peer-focus:text-zinc-400","peer-disabled:opacity-35"]},variants:{isOTC:{true:{base:"flex",input:"text-center mx-1"}},size:{sm:{input:["pt-2","pb-1.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-5","peer-focus:-translate-y-5"],icon:["h-8","w-8","px-1.5","top-[0.15rem]","right-0.5"]},md:{input:["pt-2","pb-1.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"],icon:["h-11","w-11","px-2.5","-top-[0.1rem]","right-0.5"]},lg:{input:["pt-3","pb-2.5","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-[1.675rem]","peer-focus:-translate-y-[1.675rem]"],icon:["h-12","w-12","px-2.5","top-0","right-1"]}},variant:{default:{},rift:{label:"bg-white peer-disabled:bg-transparent"},line:{input:["border-b","shadow-none"]},ghost:{},raw:{input:["placeholder:opacity-100"],label:["!translate-x-0","!translate-y-0","!scale-100","peer-focus:!translate-x-0","peer-focus:!translate-y-0","peer-focus:!scale-100","peer-focus:opacity-0","peer-placeholder-shown:opacity-100","opacity-0"]}},rows:{true:{label:"bg-white"}}},compoundSlots:[{slots:["input","label"],size:"sm",class:"text-sm"},{slots:["input","label"],size:"md",class:"text-base"},{slots:["input","label"],size:"lg",isOTC:!0,class:"text-lg"}],compoundVariants:[{variant:["default","rift","raw"],class:{input:["border","rounded-sm","shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px white !important]","dark:shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px rgb(24 24 27) !important]"]}},{variant:["ghost","line"],class:{input:["disabled:bg-transparent"]}},{size:"sm",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-2","peer-focus:-translate-y-2"]}},{size:"sm",raw:!0,class:{input:["pt-[0.4375rem]","pb-[0.4375rem]","pl-[0.6875rem]","pr-[1.125rem]"]}},{size:"md",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"md",raw:!0,class:{input:["pt-[0.4375rem]","pb-2","pl-[0.9375rem]"]}},{size:"lg",variant:["default","ghost"],class:{input:["text-base","pt-[1.125rem]","pb-1","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"lg",raw:!0,class:{input:["pt-[0.6875rem]","pb-[0.6875rem]","pl-[0.9375rem]","pr-[0.9375rem]"]}},{size:"sm",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.125rem]","peer-focus:-translate-y-[1.125rem]"]}},{size:"md",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-5","peer-focus:-translate-y-5"]}},{size:"lg",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"]}},{size:"sm",type:"password",class:{input:"pr-10"}},{size:"md",type:"password",class:{input:"pr-13"}},{size:"lg",type:"password",class:{input:"pr-13"}},{size:"sm",isOTC:!0,class:{input:"w-8 p-1.5 pt-2 px-0"}},{size:"md",isOTC:!0,class:{input:"text-lg w-9 p-2 pt-2 pb-1.5"}},{size:"lg",isOTC:!0,class:{input:"w-10 p-2 pt-2.5"}},{rows:!0,variant:"default",class:{label:["rounded-tr-none"]}},{size:"sm",rows:!0,variant:"default",class:{label:["pr-4","-translate-y-[0.65rem]","peer-focus:pr-4","peer-focus:-translate-y-[0.65rem]"]}},{size:"md",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.7rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.7rem]"]}},{size:"lg",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.95rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.95rem]"]}}],defaultVariants:{disabled:!1,isOTC:!1,size:"md",type:"text",variant:"default",rows:!1}}),G=te;var N=require("react/jsx-runtime"),$=(0,E.forwardRef)((t,s)=>{let{className:i,disabled:l=!1,label:n="Input",length:y=6,name:o="input",size:h,autoSubmit:S=!1,onComplete:g,variant:T="default",...I}=t,x=(0,E.useRef)([]),C={disabled:l,isOTC:!0,size:h,variant:T},{base:k,input:K}=G(C);return o?(0,N.jsx)("div",{ref:s,className:k(),children:[...Array(y)].map((f,d)=>{let v=`${o}-otc-slot-${d}`;return(0,N.jsx)(H,{name:o,slotsRef:x,className:K({class:i}),index:d,label:n,length:y,autoSubmit:S,onComplete:g},v)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),ae=$,re=$;0&&(module.exports={OTC,OneTimeCode,Otc});
+"use strict";var N=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.prototype.hasOwnProperty;var _=(t,l)=>{for(var i in l)N(t,i,{get:l[i],enumerable:!0})},j=(t,l,i,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of X(l))!Y.call(t,n)&&n!==i&&N(t,n,{get:()=>l[n],enumerable:!(r=W(l,n))||r.enumerable});return t};var ee=t=>j(N({},"__esModule",{value:!0}),t);var le={};_(le,{OTC:()=>se,OneTimeCode:()=>A,Otc:()=>re});module.exports=ee(le);var E=require("react");var G=require("react"),U=require("react-hook-form");var V=require("tailwind-variants"),te=(0,V.tv)({slots:{base:"relative",icon:"absolute text-slate-400 dark:text-zinc-500 cursor-pointer",interval:"flex justify-center",input:["appearance-none","outline-0","focus:outline-hidden","bg-white","dark:bg-zinc-900","text-slate-900","caret-slate-500","dark:caret-zinc-500","dark:text-zinc-100","text-fill-slate-900","dark:text-fill-white","border-slate-300","dark:border-zinc-600","transition","placeholder:text-fill-slate-400","placeholder:dark:text-fill-zinc-400","placeholder:opacity-0","placeholder:transition-opacity","placeholder:duration-200","focus:placeholder:opacity-100","disabled:cursor-not-allowed","disabled:opacity-50","disabled:bg-black/5","peer"],label:["absolute","dark:bg-zinc-900","pointer-events-none","text-slate-400","dark:text-zinc-400","duration-200","rounded-sm","transform","origin-[0]","scale-[0.65]","translate-x-1","peer-placeholder-shown:-translate-y-0","peer-placeholder-shown:translate-x-0","peer-placeholder-shown:scale-100","peer-placeholder-shown:text-slate-600","dark:peer-placeholder-shown:text-zinc-300","peer-focus:translate-x-1","peer-focus:scale-[0.65]","peer-focus:text-slate-400","dark:peer-focus:text-zinc-400","peer-disabled:opacity-35"]},variants:{isOTC:{true:{base:"flex gap-1",input:"text-center"}},size:{sm:{input:["pt-2","pb-1.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-5","peer-focus:-translate-y-5"],icon:["h-8","w-8","px-1.5","top-[0.15rem]","right-0.5"]},md:{input:["pt-2","pb-1.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"],icon:["h-11","w-11","px-2.5","-top-[0.1rem]","right-0.5"]},lg:{input:["pt-3","pb-2.5","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-[1.675rem]","peer-focus:-translate-y-[1.675rem]"],icon:["h-12","w-12","px-2.5","top-0","right-1"]}},variant:{default:{},rift:{label:"bg-white peer-disabled:bg-transparent"},line:{input:["border-b","shadow-none"]},ghost:{},raw:{input:["placeholder:opacity-100"],label:["!translate-x-0","!translate-y-0","!scale-100","peer-focus:!translate-x-0","peer-focus:!translate-y-0","peer-focus:!scale-100","peer-focus:opacity-0","peer-placeholder-shown:opacity-100","opacity-0"]}},rows:{true:{label:"bg-white"}}},compoundSlots:[{slots:["input","label"],size:"sm",class:"text-sm"},{slots:["input","label"],size:"md",class:"text-base"},{slots:["input","label"],size:"lg",isOTC:!0,class:"text-lg"}],compoundVariants:[{variant:["default","rift","raw"],class:{input:["border","rounded-sm","shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px white !important]","dark:shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px rgb(24 24 27) !important]"]}},{variant:["ghost","line"],class:{input:["disabled:bg-transparent"]}},{size:"sm",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-2","peer-focus:-translate-y-2"]}},{size:"sm",raw:!0,class:{input:["pt-[0.4375rem]","pb-[0.4375rem]","pl-[0.6875rem]","pr-[1.125rem]"]}},{size:"md",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"md",raw:!0,class:{input:["pt-[0.4375rem]","pb-2","pl-[0.9375rem]"]}},{size:"lg",variant:["default","ghost"],class:{input:["text-base","pt-[1.125rem]","pb-1","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"lg",raw:!0,class:{input:["pt-[0.6875rem]","pb-[0.6875rem]","pl-[0.9375rem]","pr-[0.9375rem]"]}},{size:"sm",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.125rem]","peer-focus:-translate-y-[1.125rem]"]}},{size:"md",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-5","peer-focus:-translate-y-5"]}},{size:"lg",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"]}},{size:"sm",type:"password",class:{input:"pr-10"}},{size:"md",type:"password",class:{input:"pr-13"}},{size:"lg",type:"password",class:{input:"pr-13"}},{size:"sm",isOTC:!0,class:{base:"gap-0.75",input:"w-8 p-1.5 pt-2 px-0"}},{size:"md",isOTC:!0,class:{base:"gap-1",input:"text-lg w-9 p-2 pt-2 pb-1.5"}},{size:"lg",isOTC:!0,class:{base:"gap-1.5",input:"w-10 p-2 pt-2.5"}},{rows:!0,variant:"default",class:{label:["rounded-tr-none"]}},{size:"sm",rows:!0,variant:"default",class:{label:["pr-4","-translate-y-[0.65rem]","peer-focus:pr-4","peer-focus:-translate-y-[0.65rem]"]}},{size:"md",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.7rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.7rem]"]}},{size:"lg",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.95rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.95rem]"]}},{isOTC:!0,fit:!0,class:{input:"w-full"}}],defaultVariants:{disabled:!1,fit:!1,isOTC:!1,size:"md",type:"text",variant:"default",rows:!1}}),z=te;var H=require("react/jsx-runtime");function ae(t){return t&&(t.value===""||t.value===void 0)}function F(t){return t&&t.value!==""&&t.value!==void 0}function y(t){if(t){let{length:l}=t.value,i=t.value!==""&&t.value!==void 0;t.focus(),t.setSelectionRange&&t.setSelectionRange(i?0:l,l)}}var $=(0,G.forwardRef)((t,l)=>{let{className:i,index:r,slotsRef:n,label:S,length:o,name:c,autoSubmit:T,onComplete:g}=t,{interval:C}=z(),{register:k,setValue:D}=(0,U.useFormContext)(),h=`${c}.${r}`,O=r===0,{ref:K,...L}=k(h),m=()=>n.current[r],d=()=>n.current[r-1],x=()=>n.current[r+1];function P(a){let e=a===1,s=[],p=e?o-r:r+1;return[...Array(p)].forEach((w,u)=>{let b=e?r+u:r-u,f=n.current[b];ae(f)&&s.push(f)}),s[e?0:s.length-1]}function v(){let a=0;return n.current.forEach((e,s)=>{F(e)&&(a+=1)}),a}function M(){if(T){let e=n.current[r]?.closest("form");e&&e.requestSubmit()}g&&g()}function q(){let a=m();y(a)}function B(){if(v()>0)return!1;let a=P(-1);return y(a),!1}function Z(a){let e=a.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,o-r);let s=e.split("");if(D(c,s),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),v()===o)M();else{let p=P(1);p&&setTimeout(()=>p.focus(),0)}}}function J(a){let e,{key:s}=a,{ctrlKey:p,metaKey:w,shiftKey:u}=a,b=!p&&!w&&!u&&s.match(/^[A-Za-z0-9]$/),{value:f}=a.currentTarget;s==="Backspace"||s==="Delete"?f?(e=m(),e&&(e.value="")):(e=d(),e&&(e.value="",e.focus())):s==="Enter"?v()===o&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),M()):s==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():b&&(s=s.replace(/[^0-9]+/g,""),s.length||a.preventDefault())}function Q(a){let e,{key:s}=a,{ctrlKey:p,metaKey:w,shiftKey:u}=a,b=!p&&!w&&!u&&s?.match(/^[0-9]$/),{value:f}=a.currentTarget;s==="ArrowLeft"||s==="PageUp"||s==="ArrowRight"||s==="PageDown"?(s==="ArrowLeft"||s==="PageUp"?e=d():e=x(),y(e||m())):b&&(F(a.currentTarget)&&r<o-1?(e=x(),y(e)):f&&r===o-1&&(v()===o?(e=m(),e&&e.blur(),M()):(e=P(-1),e&&e.focus())))}return(0,H.jsx)("div",{className:C(),style:{width:`calc(100% / ${o})`},children:(0,H.jsx)("input",{...L,id:h,ref:a=>{K(a),typeof l=="function"?l(a):l&&(l.current=a),n.current[r]=a},type:"tel",className:i,pattern:"[0-9]",defaultValue:"",autoComplete:O?"one-time-code":"off","aria-label":`${S||"Code Number"} ${r}`,maxLength:1,onClick:q,onFocus:B,onPaste:Z,onKeyDown:J,onKeyUp:Q})})});$.displayName="OneTimeCodeSlot";var I=require("react/jsx-runtime"),A=(0,E.forwardRef)((t,l)=>{let{className:i,disabled:r=!1,fit:n=!1,label:S="Input",length:o=6,name:c="input",size:T,autoSubmit:g=!1,onComplete:C,variant:k="default",...D}=t,h=(0,E.useRef)([]),O={disabled:r,fit:n,isOTC:!0,size:T,variant:k},{base:K,input:L}=z(O);return c?(0,I.jsx)("div",{ref:l,className:K(),children:[...Array(o)].map((m,d)=>{let x=`${c}-otc-slot-${d}`;return(0,I.jsx)($,{name:c,slotsRef:h,className:L({class:i}),index:d,label:S,length:o,autoSubmit:g,onComplete:C},x)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),se=A,re=A;0&&(module.exports={OTC,OneTimeCode,Otc});

package/dist/index.m.js

@@ -1 +1 @@
-import{forwardRef as W,useRef as X}from"react";import{forwardRef as q}from"react";import{useFormContext as B}from"react-hook-form";import{jsx as N}from"react/jsx-runtime";function Z(r){return r&&(r.value===""||r.value===void 0)}function H(r){return r&&r.value!==""&&r.value!==void 0}function b(r){if(r){let{length:n}=r.value,u=r.value!==""&&r.value!==void 0;r.focus(),r.setSelectionRange&&r.setSelectionRange(u?0:n,n)}}var M=q((r,n)=>{let{className:u,index:l,slotsRef:o,label:y,length:s,name:h,autoSubmit:E,onComplete:g}=r,{register:S,setValue:R}=B(),x=`${h}.${l}`,T=l===0,{ref:C,...k}=S(x),f=()=>o.current[l],d=()=>o.current[l-1],v=()=>o.current[l+1];function K(t){let e=t===1,a=[],i=e?s-l:l+1;return[...Array(i)].forEach((z,p)=>{let m=e?l+p:l-p,c=o.current[m];Z(c)&&a.push(c)}),a[e?0:a.length-1]}function w(){let t=0;return o.current.forEach((e,a)=>{H(e)&&(t+=1)}),t}function O(){if(E){let e=o.current[l]?.closest("form");e&&e.requestSubmit()}g&&g()}function D(){let t=f();b(t)}function V(){if(w()>0)return!1;let t=K(-1);return b(t),!1}function F(t){let e=t.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,s-l);let a=e.split("");if(R(h,a),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),w()===s)O();else{let i=K(1);i&&setTimeout(()=>i.focus(),0)}}}function G(t){let e,{key:a}=t,{ctrlKey:i,metaKey:z,shiftKey:p}=t,m=!i&&!z&&!p&&a.match(/^[A-Za-z0-9]$/),{value:c}=t.currentTarget;a==="Backspace"||a==="Delete"?c?(e=f(),e&&(e.value="")):(e=d(),e&&(e.value="",e.focus())):a==="Enter"?w()===s&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),O()):a==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():m&&(a=a.replace(/[^0-9]+/g,""),a.length||t.preventDefault())}function U(t){let e,{key:a}=t,{ctrlKey:i,metaKey:z,shiftKey:p}=t,m=!i&&!z&&!p&&a?.match(/^[0-9]$/),{value:c}=t.currentTarget;a==="ArrowLeft"||a==="PageUp"||a==="ArrowRight"||a==="PageDown"?(a==="ArrowLeft"||a==="PageUp"?e=d():e=v(),b(e||f())):m&&(H(t.currentTarget)&&l<s-1?(e=v(),b(e)):c&&l===s-1&&(w()===s?(e=f(),e&&e.blur(),O()):(e=K(-1),e&&e.focus())))}return N("div",{style:{width:`calc(100% / ${s})`},children:N("input",{...k,id:x,ref:t=>{C(t),typeof n=="function"?n(t):n&&(n.current=t),o.current[l]=t},type:"tel",className:u,pattern:"[0-9]",defaultValue:"",autoComplete:T?"one-time-code":"off","aria-label":`${y||"Code Number"} ${l}`,maxLength:1,onClick:D,onFocus:V,onPaste:F,onKeyDown:G,onKeyUp:U})})});M.displayName="OneTimeCodeSlot";import{tv as J}from"tailwind-variants";var Q=J({slots:{base:"relative",icon:"absolute text-slate-400 dark:text-zinc-500 cursor-pointer",input:["appearance-none","outline-0","focus:outline-hidden","bg-white","dark:bg-zinc-900","text-slate-900","caret-slate-500","dark:caret-zinc-500","dark:text-zinc-100","text-fill-slate-900","dark:text-fill-white","border-slate-300","dark:border-zinc-600","transition","placeholder:text-fill-slate-400","placeholder:dark:text-fill-zinc-400","placeholder:opacity-0","placeholder:transition-opacity","placeholder:duration-200","focus:placeholder:opacity-100","disabled:cursor-not-allowed","disabled:opacity-50","disabled:bg-black/5","peer"],label:["absolute","dark:bg-zinc-900","pointer-events-none","text-slate-400","dark:text-zinc-400","duration-200","rounded-sm","transform","origin-[0]","scale-[0.65]","translate-x-1","peer-placeholder-shown:-translate-y-0","peer-placeholder-shown:translate-x-0","peer-placeholder-shown:scale-100","peer-placeholder-shown:text-slate-600","dark:peer-placeholder-shown:text-zinc-300","peer-focus:translate-x-1","peer-focus:scale-[0.65]","peer-focus:text-slate-400","dark:peer-focus:text-zinc-400","peer-disabled:opacity-35"]},variants:{isOTC:{true:{base:"flex",input:"text-center mx-1"}},size:{sm:{input:["pt-2","pb-1.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-5","peer-focus:-translate-y-5"],icon:["h-8","w-8","px-1.5","top-[0.15rem]","right-0.5"]},md:{input:["pt-2","pb-1.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"],icon:["h-11","w-11","px-2.5","-top-[0.1rem]","right-0.5"]},lg:{input:["pt-3","pb-2.5","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-[1.675rem]","peer-focus:-translate-y-[1.675rem]"],icon:["h-12","w-12","px-2.5","top-0","right-1"]}},variant:{default:{},rift:{label:"bg-white peer-disabled:bg-transparent"},line:{input:["border-b","shadow-none"]},ghost:{},raw:{input:["placeholder:opacity-100"],label:["!translate-x-0","!translate-y-0","!scale-100","peer-focus:!translate-x-0","peer-focus:!translate-y-0","peer-focus:!scale-100","peer-focus:opacity-0","peer-placeholder-shown:opacity-100","opacity-0"]}},rows:{true:{label:"bg-white"}}},compoundSlots:[{slots:["input","label"],size:"sm",class:"text-sm"},{slots:["input","label"],size:"md",class:"text-base"},{slots:["input","label"],size:"lg",isOTC:!0,class:"text-lg"}],compoundVariants:[{variant:["default","rift","raw"],class:{input:["border","rounded-sm","shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px white !important]","dark:shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px rgb(24 24 27) !important]"]}},{variant:["ghost","line"],class:{input:["disabled:bg-transparent"]}},{size:"sm",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-2","peer-focus:-translate-y-2"]}},{size:"sm",raw:!0,class:{input:["pt-[0.4375rem]","pb-[0.4375rem]","pl-[0.6875rem]","pr-[1.125rem]"]}},{size:"md",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"md",raw:!0,class:{input:["pt-[0.4375rem]","pb-2","pl-[0.9375rem]"]}},{size:"lg",variant:["default","ghost"],class:{input:["text-base","pt-[1.125rem]","pb-1","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"lg",raw:!0,class:{input:["pt-[0.6875rem]","pb-[0.6875rem]","pl-[0.9375rem]","pr-[0.9375rem]"]}},{size:"sm",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.125rem]","peer-focus:-translate-y-[1.125rem]"]}},{size:"md",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-5","peer-focus:-translate-y-5"]}},{size:"lg",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"]}},{size:"sm",type:"password",class:{input:"pr-10"}},{size:"md",type:"password",class:{input:"pr-13"}},{size:"lg",type:"password",class:{input:"pr-13"}},{size:"sm",isOTC:!0,class:{input:"w-8 p-1.5 pt-2 px-0"}},{size:"md",isOTC:!0,class:{input:"text-lg w-9 p-2 pt-2 pb-1.5"}},{size:"lg",isOTC:!0,class:{input:"w-10 p-2 pt-2.5"}},{rows:!0,variant:"default",class:{label:["rounded-tr-none"]}},{size:"sm",rows:!0,variant:"default",class:{label:["pr-4","-translate-y-[0.65rem]","peer-focus:pr-4","peer-focus:-translate-y-[0.65rem]"]}},{size:"md",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.7rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.7rem]"]}},{size:"lg",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.95rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.95rem]"]}}],defaultVariants:{disabled:!1,isOTC:!1,size:"md",type:"text",variant:"default",rows:!1}}),$=Q;import{jsx as I}from"react/jsx-runtime";var A=W((r,n)=>{let{className:u,disabled:l=!1,label:o="Input",length:y=6,name:s="input",size:h,autoSubmit:E=!1,onComplete:g,variant:S="default",...R}=r,x=X([]),T={disabled:l,isOTC:!0,size:h,variant:S},{base:C,input:k}=$(T);return s?I("div",{ref:n,className:C(),children:[...Array(y)].map((f,d)=>{let v=`${s}-otc-slot-${d}`;return I(M,{name:s,slotsRef:x,className:k({class:u}),index:d,label:o,length:y,autoSubmit:E,onComplete:g},v)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),ce=A,ue=A;export{ce as OTC,A as OneTimeCode,ue as Otc};
+import{forwardRef as X,useRef as Y}from"react";import{forwardRef as J}from"react";import{useFormContext as Q}from"react-hook-form";import{tv as B}from"tailwind-variants";var Z=B({slots:{base:"relative",icon:"absolute text-slate-400 dark:text-zinc-500 cursor-pointer",interval:"flex justify-center",input:["appearance-none","outline-0","focus:outline-hidden","bg-white","dark:bg-zinc-900","text-slate-900","caret-slate-500","dark:caret-zinc-500","dark:text-zinc-100","text-fill-slate-900","dark:text-fill-white","border-slate-300","dark:border-zinc-600","transition","placeholder:text-fill-slate-400","placeholder:dark:text-fill-zinc-400","placeholder:opacity-0","placeholder:transition-opacity","placeholder:duration-200","focus:placeholder:opacity-100","disabled:cursor-not-allowed","disabled:opacity-50","disabled:bg-black/5","peer"],label:["absolute","dark:bg-zinc-900","pointer-events-none","text-slate-400","dark:text-zinc-400","duration-200","rounded-sm","transform","origin-[0]","scale-[0.65]","translate-x-1","peer-placeholder-shown:-translate-y-0","peer-placeholder-shown:translate-x-0","peer-placeholder-shown:scale-100","peer-placeholder-shown:text-slate-600","dark:peer-placeholder-shown:text-zinc-300","peer-focus:translate-x-1","peer-focus:scale-[0.65]","peer-focus:text-slate-400","dark:peer-focus:text-zinc-400","peer-disabled:opacity-35"]},variants:{isOTC:{true:{base:"flex gap-1",input:"text-center"}},size:{sm:{input:["pt-2","pb-1.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-5","peer-focus:-translate-y-5"],icon:["h-8","w-8","px-1.5","top-[0.15rem]","right-0.5"]},md:{input:["pt-2","pb-1.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"],icon:["h-11","w-11","px-2.5","-top-[0.1rem]","right-0.5"]},lg:{input:["pt-3","pb-2.5","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-[1.675rem]","peer-focus:-translate-y-[1.675rem]"],icon:["h-12","w-12","px-2.5","top-0","right-1"]}},variant:{default:{},rift:{label:"bg-white peer-disabled:bg-transparent"},line:{input:["border-b","shadow-none"]},ghost:{},raw:{input:["placeholder:opacity-100"],label:["!translate-x-0","!translate-y-0","!scale-100","peer-focus:!translate-x-0","peer-focus:!translate-y-0","peer-focus:!scale-100","peer-focus:opacity-0","peer-placeholder-shown:opacity-100","opacity-0"]}},rows:{true:{label:"bg-white"}}},compoundSlots:[{slots:["input","label"],size:"sm",class:"text-sm"},{slots:["input","label"],size:"md",class:"text-base"},{slots:["input","label"],size:"lg",isOTC:!0,class:"text-lg"}],compoundVariants:[{variant:["default","rift","raw"],class:{input:["border","rounded-sm","shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px white !important]","dark:shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px rgb(24 24 27) !important]"]}},{variant:["ghost","line"],class:{input:["disabled:bg-transparent"]}},{size:"sm",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-2","peer-focus:-translate-y-2"]}},{size:"sm",raw:!0,class:{input:["pt-[0.4375rem]","pb-[0.4375rem]","pl-[0.6875rem]","pr-[1.125rem]"]}},{size:"md",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"md",raw:!0,class:{input:["pt-[0.4375rem]","pb-2","pl-[0.9375rem]"]}},{size:"lg",variant:["default","ghost"],class:{input:["text-base","pt-[1.125rem]","pb-1","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"lg",raw:!0,class:{input:["pt-[0.6875rem]","pb-[0.6875rem]","pl-[0.9375rem]","pr-[0.9375rem]"]}},{size:"sm",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.125rem]","peer-focus:-translate-y-[1.125rem]"]}},{size:"md",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-5","peer-focus:-translate-y-5"]}},{size:"lg",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"]}},{size:"sm",type:"password",class:{input:"pr-10"}},{size:"md",type:"password",class:{input:"pr-13"}},{size:"lg",type:"password",class:{input:"pr-13"}},{size:"sm",isOTC:!0,class:{base:"gap-0.75",input:"w-8 p-1.5 pt-2 px-0"}},{size:"md",isOTC:!0,class:{base:"gap-1",input:"text-lg w-9 p-2 pt-2 pb-1.5"}},{size:"lg",isOTC:!0,class:{base:"gap-1.5",input:"w-10 p-2 pt-2.5"}},{rows:!0,variant:"default",class:{label:["rounded-tr-none"]}},{size:"sm",rows:!0,variant:"default",class:{label:["pr-4","-translate-y-[0.65rem]","peer-focus:pr-4","peer-focus:-translate-y-[0.65rem]"]}},{size:"md",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.7rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.7rem]"]}},{size:"lg",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.95rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.95rem]"]}},{isOTC:!0,fit:!0,class:{input:"w-full"}}],defaultVariants:{disabled:!1,fit:!1,isOTC:!1,size:"md",type:"text",variant:"default",rows:!1}}),z=Z;import{jsx as I}from"react/jsx-runtime";function W(s){return s&&(s.value===""||s.value===void 0)}function $(s){return s&&s.value!==""&&s.value!==void 0}function y(s){if(s){let{length:n}=s.value,f=s.value!==""&&s.value!==void 0;s.focus(),s.setSelectionRange&&s.setSelectionRange(f?0:n,n)}}var R=J((s,n)=>{let{className:f,index:r,slotsRef:o,label:E,length:l,name:p,autoSubmit:S,onComplete:g}=s,{interval:T}=z(),{register:C,setValue:H}=Q(),h=`${p}.${r}`,k=r===0,{ref:O,...K}=C(h),m=()=>o.current[r],d=()=>o.current[r-1],x=()=>o.current[r+1];function L(t){let e=t===1,a=[],i=e?l-r:r+1;return[...Array(i)].forEach((w,c)=>{let b=e?r+c:r-c,u=o.current[b];W(u)&&a.push(u)}),a[e?0:a.length-1]}function v(){let t=0;return o.current.forEach((e,a)=>{$(e)&&(t+=1)}),t}function P(){if(S){let e=o.current[r]?.closest("form");e&&e.requestSubmit()}g&&g()}function V(){let t=m();y(t)}function F(){if(v()>0)return!1;let t=L(-1);return y(t),!1}function G(t){let e=t.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,l-r);let a=e.split("");if(H(p,a),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),v()===l)P();else{let i=L(1);i&&setTimeout(()=>i.focus(),0)}}}function U(t){let e,{key:a}=t,{ctrlKey:i,metaKey:w,shiftKey:c}=t,b=!i&&!w&&!c&&a.match(/^[A-Za-z0-9]$/),{value:u}=t.currentTarget;a==="Backspace"||a==="Delete"?u?(e=m(),e&&(e.value="")):(e=d(),e&&(e.value="",e.focus())):a==="Enter"?v()===l&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),P()):a==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():b&&(a=a.replace(/[^0-9]+/g,""),a.length||t.preventDefault())}function q(t){let e,{key:a}=t,{ctrlKey:i,metaKey:w,shiftKey:c}=t,b=!i&&!w&&!c&&a?.match(/^[0-9]$/),{value:u}=t.currentTarget;a==="ArrowLeft"||a==="PageUp"||a==="ArrowRight"||a==="PageDown"?(a==="ArrowLeft"||a==="PageUp"?e=d():e=x(),y(e||m())):b&&($(t.currentTarget)&&r<l-1?(e=x(),y(e)):u&&r===l-1&&(v()===l?(e=m(),e&&e.blur(),P()):(e=L(-1),e&&e.focus())))}return I("div",{className:T(),style:{width:`calc(100% / ${l})`},children:I("input",{...K,id:h,ref:t=>{O(t),typeof n=="function"?n(t):n&&(n.current=t),o.current[r]=t},type:"tel",className:f,pattern:"[0-9]",defaultValue:"",autoComplete:k?"one-time-code":"off","aria-label":`${E||"Code Number"} ${r}`,maxLength:1,onClick:V,onFocus:F,onPaste:G,onKeyDown:U,onKeyUp:q})})});R.displayName="OneTimeCodeSlot";import{jsx as A}from"react/jsx-runtime";var D=X((s,n)=>{let{className:f,disabled:r=!1,fit:o=!1,label:E="Input",length:l=6,name:p="input",size:S,autoSubmit:g=!1,onComplete:T,variant:C="default",...H}=s,h=Y([]),k={disabled:r,fit:o,isOTC:!0,size:S,variant:C},{base:O,input:K}=z(k);return p?A("div",{ref:n,className:O(),children:[...Array(l)].map((m,d)=>{let x=`${p}-otc-slot-${d}`;return A(R,{name:p,slotsRef:h,className:K({class:f}),index:d,label:E,length:l,autoSubmit:g,onComplete:T},x)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),fe=D,me=D;export{fe as OTC,D as OneTimeCode,me as Otc};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inpulse-ui/otc",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "keywords": [
     "auth",
     "input",
@@ -11,14 +11,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://ds.inpulse.cx",
+  "homepage": "https://ui.inpulse.cx",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/inpulse-cx/ds.git",
+    "url": "git+https://github.com/inpulse-cx/ui.git",
     "directory": "packages/components/otc"
   },
   "bugs": {
-    "url": "https://github.com/inpulse-cx/ds/issues"
+    "url": "https://github.com/inpulse-cx/ui/issues"
   },
   "source": "./src/index.ts",
   "main": "./dist/index.js",