@inpulse-ui/otc 3.1.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.m.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var M=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var j=(t,r)=>{for(var i in r)M(t,i,{get:r[i],enumerable:!0})},ee=(t,r,i,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of Y(r))!_.call(t,n)&&n!==i&&M(t,n,{get:()=>r[n],enumerable:!(l=X(r,n))||l.enumerable});return t};var te=t=>ee(M({},"__esModule",{value:!0}),t);var ne={};j(ne,{OTC:()=>le,OneTimeCode:()=>I,Otc:()=>re});module.exports=te(ne);var E=require("react");var U=require("react"),q=require("react-hook-form");var F=require("tailwind-variants"),ae=(0,F.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=ae;var R=require("react/jsx-runtime");function se(t){return t&&(t.value===""||t.value===void 0)}function G(t){return t&&t.value!==""&&t.value!==void 0}function m(t){if(t){let{length:r}=t.value,i=t.value!==""&&t.value!==void 0;t.focus(),t.setSelectionRange&&t.setSelectionRange(i?0:r,r)}}var H=(0,U.forwardRef)((t,r)=>{let{className:i,index:l,slotsRef:n,label:S,disabled:b,length:o,name:y,autoSubmit:T,onComplete:g}=t,{interval:C}=z(),{register:A,setValue:k}=(0,q.useFormContext)(),h=`${y}.${l}`,O=l===0,{ref:K,...D}=A(h),c=()=>n.current[l],x=()=>n.current[l-1],V=()=>n.current[l+1];function L(a){let e=a===1,s=[],p=e?o-l:l+1;return[...Array(p)].forEach((w,u)=>{let d=e?l+u:l-u,f=n.current[d];se(f)&&s.push(f)}),s[e?0:s.length-1]}function v(){let a=0;return n.current.forEach((e,s)=>{G(e)&&(a+=1)}),a}function P(){if(T){let e=n.current[l]?.closest("form");e&&e.requestSubmit()}g&&g()}function B(){let a=c();m(a)}function Z(){if(v()>0)return!1;let a=L(-1);return m(a),!1}function J(a){let e=a.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,o-l);let s=e.split("");if(k(y,s),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),v()===o)P();else{let p=L(1);p&&setTimeout(()=>p.focus(),0)}}}function Q(a){let e,{key:s}=a,{ctrlKey:p,metaKey:w,shiftKey:u}=a,d=!p&&!w&&!u&&s.match(/^[A-Za-z0-9]$/),{value:f}=a.currentTarget;s==="Backspace"||s==="Delete"?f?(e=c(),e&&(e.value="")):(e=x(),e&&(e.value="",e.focus())):s==="Enter"?v()===o&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),P()):s==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():d&&(s=s.replace(/[^0-9]+/g,""),s.length||a.preventDefault())}function W(a){let e,{key:s}=a,{ctrlKey:p,metaKey:w,shiftKey:u}=a,d=!p&&!w&&!u&&s?.match(/^[0-9]$/),{value:f}=a.currentTarget;s==="ArrowLeft"||s==="PageUp"||s==="ArrowRight"||s==="PageDown"?(s==="ArrowLeft"||s==="PageUp"?e=x():e=V(),m(e||c())):d&&(G(a.currentTarget)&&l<o-1?(e=V(),m(e)):f&&l===o-1&&(v()===o?(e=c(),e&&e.blur(),P()):(e=L(-1),e&&e.focus())))}return(0,R.jsx)("div",{className:C(),style:{width:`calc(100% / ${o})`},children:(0,R.jsx)("input",{...D,id:h,ref:a=>{K(a),typeof r=="function"?r(a):r&&(r.current=a),n.current[l]=a},type:"tel",className:i,disabled:b,pattern:"[0-9]",defaultValue:"",autoComplete:O?"one-time-code":"off","aria-label":`${S||"Code Number"} ${l}`,maxLength:1,onClick:B,onFocus:Z,onPaste:J,onKeyDown:Q,onKeyUp:W})})});H.displayName="OneTimeCodeSlot";var $=require("react/jsx-runtime"),I=(0,E.forwardRef)((t,r)=>{let{className:i,disabled:l=!1,fit:n=!1,label:S="Input",length:b=6,name:o="input",size:y,autoSubmit:T=!1,onComplete:g,variant:C="default",...A}=t,k=(0,E.useRef)([]),h={disabled:l,fit:n,isOTC:!0,size:y,variant:C},{base:O,input:K}=z(h);return o?(0,$.jsx)("div",{ref:r,className:O(),children:[...Array(b)].map((D,c)=>{let x=`${o}-otc-slot-${c}`;return(0,$.jsx)(H,{name:o,slotsRef:k,disabled:l,className:K({class:i}),index:c,label:S,length:b,autoSubmit:T,onComplete:g},x)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),le=I,re=I;0&&(module.exports={OTC,OneTimeCode,Otc});
|
package/dist/index.m.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{forwardRef as
|
|
1
|
+
import{forwardRef as Y,useRef as _}from"react";import{forwardRef as Q}from"react";import{useFormContext as W}from"react-hook-form";import{tv as Z}from"tailwind-variants";var J=Z({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=J;import{jsx as A}from"react/jsx-runtime";function X(s){return s&&(s.value===""||s.value===void 0)}function I(s){return s&&s.value!==""&&s.value!==void 0}function m(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 N=Q((s,n)=>{let{className:f,index:l,slotsRef:o,label:E,disabled:b,length:r,name:y,autoSubmit:S,onComplete:g}=s,{interval:T}=z(),{register:R,setValue:C}=W(),h=`${y}.${l}`,k=l===0,{ref:O,...H}=R(h),p=()=>o.current[l],x=()=>o.current[l-1],$=()=>o.current[l+1];function K(t){let e=t===1,a=[],i=e?r-l:l+1;return[...Array(i)].forEach((w,c)=>{let d=e?l+c:l-c,u=o.current[d];X(u)&&a.push(u)}),a[e?0:a.length-1]}function v(){let t=0;return o.current.forEach((e,a)=>{I(e)&&(t+=1)}),t}function L(){if(S){let e=o.current[l]?.closest("form");e&&e.requestSubmit()}g&&g()}function F(){let t=p();m(t)}function G(){if(v()>0)return!1;let t=K(-1);return m(t),!1}function U(t){let e=t.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,r-l);let a=e.split("");if(C(y,a),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),v()===r)L();else{let i=K(1);i&&setTimeout(()=>i.focus(),0)}}}function q(t){let e,{key:a}=t,{ctrlKey:i,metaKey:w,shiftKey:c}=t,d=!i&&!w&&!c&&a.match(/^[A-Za-z0-9]$/),{value:u}=t.currentTarget;a==="Backspace"||a==="Delete"?u?(e=p(),e&&(e.value="")):(e=x(),e&&(e.value="",e.focus())):a==="Enter"?v()===r&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),L()):a==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():d&&(a=a.replace(/[^0-9]+/g,""),a.length||t.preventDefault())}function B(t){let e,{key:a}=t,{ctrlKey:i,metaKey:w,shiftKey:c}=t,d=!i&&!w&&!c&&a?.match(/^[0-9]$/),{value:u}=t.currentTarget;a==="ArrowLeft"||a==="PageUp"||a==="ArrowRight"||a==="PageDown"?(a==="ArrowLeft"||a==="PageUp"?e=x():e=$(),m(e||p())):d&&(I(t.currentTarget)&&l<r-1?(e=$(),m(e)):u&&l===r-1&&(v()===r?(e=p(),e&&e.blur(),L()):(e=K(-1),e&&e.focus())))}return A("div",{className:T(),style:{width:`calc(100% / ${r})`},children:A("input",{...H,id:h,ref:t=>{O(t),typeof n=="function"?n(t):n&&(n.current=t),o.current[l]=t},type:"tel",className:f,disabled:b,pattern:"[0-9]",defaultValue:"",autoComplete:k?"one-time-code":"off","aria-label":`${E||"Code Number"} ${l}`,maxLength:1,onClick:F,onFocus:G,onPaste:U,onKeyDown:q,onKeyUp:B})})});N.displayName="OneTimeCodeSlot";import{jsx as D}from"react/jsx-runtime";var V=Y((s,n)=>{let{className:f,disabled:l=!1,fit:o=!1,label:E="Input",length:b=6,name:r="input",size:y,autoSubmit:S=!1,onComplete:g,variant:T="default",...R}=s,C=_([]),h={disabled:l,fit:o,isOTC:!0,size:y,variant:T},{base:k,input:O}=z(h);return r?D("div",{ref:n,className:k(),children:[...Array(b)].map((H,p)=>{let x=`${r}-otc-slot-${p}`;return D(N,{name:r,slotsRef:C,disabled:l,className:O({class:f}),index:p,label:E,length:b,autoSubmit:S,onComplete:g},x)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),de=V,me=V;export{de as OTC,V as OneTimeCode,me as Otc};
|