@inpulse-ui/otc 3.0.0
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/README.md +23 -0
- package/dist/index.d.ts +46 -0
- package/dist/index.js +1 -0
- package/dist/index.m.js +1 -0
- package/package.json +72 -0
package/README.md
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# @inpulse-ui/otc
|
|
2
|
+
|
|
3
|
+
It presents a group of text fields, each accepting a single character, forming a code.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @inpulse-ui/otc
|
|
9
|
+
# or
|
|
10
|
+
bun add @inpulse-ui/otc
|
|
11
|
+
# or
|
|
12
|
+
yarn add @inpulse-ui/otc
|
|
13
|
+
# or
|
|
14
|
+
npm install @inpulse-ui/otc
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Documentation
|
|
18
|
+
|
|
19
|
+
Visit https://ui.inpulse.cx/components/forms/otc to view the documentation.
|
|
20
|
+
|
|
21
|
+
## License
|
|
22
|
+
|
|
23
|
+
Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React, { ComponentRef } from 'react';
|
|
2
|
+
|
|
3
|
+
type Group = {
|
|
4
|
+
onComplete?: () => void;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
label?: string;
|
|
7
|
+
length: number;
|
|
8
|
+
name: string;
|
|
9
|
+
size?: "sm" | "md" | "lg";
|
|
10
|
+
autoSubmit?: boolean;
|
|
11
|
+
variant?: "default" | "rift" | "line";
|
|
12
|
+
};
|
|
13
|
+
type GroupRef = ComponentRef<'div'> & Group;
|
|
14
|
+
|
|
15
|
+
declare const OneTimeCode: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
16
|
+
onComplete?: () => void;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
label?: string;
|
|
19
|
+
length: number;
|
|
20
|
+
name: string;
|
|
21
|
+
size?: "sm" | "md" | "lg";
|
|
22
|
+
autoSubmit?: boolean;
|
|
23
|
+
variant?: "default" | "rift" | "line";
|
|
24
|
+
} & React.RefAttributes<GroupRef>>;
|
|
25
|
+
declare const OTC: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
26
|
+
onComplete?: () => void;
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
label?: string;
|
|
29
|
+
length: number;
|
|
30
|
+
name: string;
|
|
31
|
+
size?: "sm" | "md" | "lg";
|
|
32
|
+
autoSubmit?: boolean;
|
|
33
|
+
variant?: "default" | "rift" | "line";
|
|
34
|
+
} & React.RefAttributes<GroupRef>>;
|
|
35
|
+
declare const Otc: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
36
|
+
onComplete?: () => void;
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
label?: string;
|
|
39
|
+
length: number;
|
|
40
|
+
name: string;
|
|
41
|
+
size?: "sm" | "md" | "lg";
|
|
42
|
+
autoSubmit?: boolean;
|
|
43
|
+
variant?: "default" | "rift" | "line";
|
|
44
|
+
} & React.RefAttributes<GroupRef>>;
|
|
45
|
+
|
|
46
|
+
export { OTC, OneTimeCode, Otc };
|
package/dist/index.js
ADDED
|
@@ -0,0 +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});
|
package/dist/index.m.js
ADDED
|
@@ -0,0 +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};
|
package/package.json
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@inpulse-ui/otc",
|
|
3
|
+
"version": "3.0.0",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"auth",
|
|
6
|
+
"input",
|
|
7
|
+
"password"
|
|
8
|
+
],
|
|
9
|
+
"author": "Jo Santana <josantana@gmail.com>",
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public"
|
|
13
|
+
},
|
|
14
|
+
"homepage": "https://ds.inpulse.cx",
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/inpulse-cx/ds.git",
|
|
18
|
+
"directory": "packages/components/otc"
|
|
19
|
+
},
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/inpulse-cx/ds/issues"
|
|
22
|
+
},
|
|
23
|
+
"source": "./src/index.ts",
|
|
24
|
+
"main": "./dist/index.js",
|
|
25
|
+
"module": "./dist/index.m.js",
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"require": "./dist/index.js",
|
|
30
|
+
"import": "./dist/index.m.js",
|
|
31
|
+
"types": "./dist/index.d.ts"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist",
|
|
36
|
+
"README.md"
|
|
37
|
+
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"preinstall": "npx only-allow pnpm",
|
|
40
|
+
"link:local": "pnpm link --global --silent",
|
|
41
|
+
"build": "tsup && rimraf dist/*.d.mts",
|
|
42
|
+
"check": "tsc",
|
|
43
|
+
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
|
|
44
|
+
"release": "npm publish",
|
|
45
|
+
"prepublishOnly": "pnpm build && pnpm check"
|
|
46
|
+
},
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"@types/react": "^18.2.78 || ^19.0",
|
|
49
|
+
"@types/react-dom": "^18.2 || ^19.0",
|
|
50
|
+
"typescript": "^5.0"
|
|
51
|
+
},
|
|
52
|
+
"peerDependencies": {
|
|
53
|
+
"@hookform/resolvers": "^5.2",
|
|
54
|
+
"@types/react": "*",
|
|
55
|
+
"@types/react-dom": "*",
|
|
56
|
+
"react": "^18.2 || ^19.0",
|
|
57
|
+
"react-dom": "^18.2 || ^19.0",
|
|
58
|
+
"react-hook-form": "^7.6",
|
|
59
|
+
"tailwind-merge": "^3.3",
|
|
60
|
+
"tailwind-variants": "^2.1",
|
|
61
|
+
"tailwindcss": "^4.1",
|
|
62
|
+
"zod": "^4.0"
|
|
63
|
+
},
|
|
64
|
+
"peerDependenciesMeta": {
|
|
65
|
+
"@types/react": {
|
|
66
|
+
"optional": true
|
|
67
|
+
},
|
|
68
|
+
"@types/react-dom": {
|
|
69
|
+
"optional": true
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|