@jamsrui/otp-input 0.0.20 → 0.0.21

package/dist/styles.d.mts

@@ -26,13 +26,10 @@ declare const otpInputVariants: _jamsrui_utils.TVReturnType<{
             caret: string;
         };
     };
-    isInvalid: {
-        true: {};
-    };
 }, {
     root: string;
     group: string;
-    slot: string;
+    slot: string[];
     separator: string;
     input: string[];
     caret: string;
@@ -61,13 +58,10 @@ declare const otpInputVariants: _jamsrui_utils.TVReturnType<{
             caret: string;
         };
     };
-    isInvalid: {
-        true: {};
-    };
 }, {
     root: string;
     group: string;
-    slot: string;
+    slot: string[];
     separator: string;
     input: string[];
     caret: string;
@@ -96,13 +90,10 @@ declare const otpInputVariants: _jamsrui_utils.TVReturnType<{
             caret: string;
         };
     };
-    isInvalid: {
-        true: {};
-    };
 }, {
     root: string;
     group: string;
-    slot: string;
+    slot: string[];
     separator: string;
     input: string[];
     caret: string;

package/dist/styles.mjs

@@ -1 +1 @@
-import{radiusVariant as t,tv as r}from"@jamsrui/utils";const o=r({slots:{root:"otp-input otp-input__root relative flex gap-2 items-center group data-disabled:opacity-disabled data-disabled:cursor-not-allowed",group:"otp-input__group flex",slot:"otp-input__slot border-divider relative flex items-center justify-center border-y border-r first:border-l first:rounded-l-md last:rounded-r-md transition-all duration-300 ease-in-out outline-solid outline-0 outline-accent-foreground/20 group-data-hover:border-primary-foreground/20 group-focus-within:border-primary-foreground/30  data-active:outline-primary-foreground",separator:"otp-input__separator w-4 h-1 bg-divider",input:["otp-input__input absolute bg-transparent inset-0 size-full outline-none outline-0 border-none border-0","z-10 text-transparent selection:text-transparent selection:bg-transparent","disabled:cursor-not-allowed"],caret:"otp-input__caret absolute pointer-events-none flex w-[1.5px] bg-primary-foreground animate-caret-blink z-1"},variants:{radius:t(["group","separator"],"otp-input"),size:{sm:{slot:"w-8 h-8 data-active:outline-2",caret:"h-4"},md:{slot:"w-10 h-10 data-active:outline-3",caret:"h-5"},lg:{slot:"w-12 h-12 data-active:outline-4",caret:"h-6"}},isInvalid:{true:{}}},defaultVariants:{radius:"md",size:"md"}});export{o as otpInputVariants};
+import{radiusVariant as t,tv as r}from"@jamsrui/utils";const a=r({slots:{root:"otp-input otp-input__root relative flex gap-2 items-center group data-disabled:status-disabled",group:"otp-input__group flex",slot:["otp-input__slot border-border relative flex items-center justify-center","border-y border-r first:border-l first:rounded-l-md last:rounded-r-md outline-solid outline-0 outline-border/20","transition-all duration-300 ease-in-out","group-data-hover:border-border-dark data-active:border-transparent data-active:outline-focus data-active:outline-2","group-data-invalid:border-danger group-data-invalid:data-active:outline-danger"],separator:"otp-input__separator w-4 h-1 bg-divider",input:["otp-input__input absolute bg-transparent inset-0 size-full outline-none outline-0 border-none border-0","z-10 text-transparent selection:text-transparent selection:bg-transparent","disabled:cursor-not-allowed"],caret:"otp-input__caret absolute pointer-events-none flex w-[1.5px] bg-foreground animate-caret-blink z-1"},variants:{radius:t(["group","separator"],"otp-input"),size:{sm:{slot:"w-8 h-8",caret:"h-4"},md:{slot:"w-10 h-10",caret:"h-5"},lg:{slot:"w-12 h-12",caret:"h-6"}}},defaultVariants:{radius:"md",size:"md"}});export{a as otpInputVariants};

package/dist/use-otp-input.d.mts

@@ -29,6 +29,7 @@ declare namespace useOtpInput {
         defaultValue?: string;
         maxLength: number;
         onComplete?: (value: string) => void;
+        isInvalid?: boolean;
     }> {
     }
 }

package/dist/use-otp-input.mjs

@@ -1 +1 @@
-"use client";import{useCallback as l,useEffect as st,useMemo as C,useRef as z,useState as J}from"react";import{useControlledState as at,useFocus as lt,useHover as ut,useMergeRefs as ct}from"@jamsrui/hooks";import{dataAttr as O,dataAttrDev as m,mapPropsVariants as pt,mergeProps as it}from"@jamsrui/utils";import{otpInputVariants as Q}from"./styles.mjs";const Pt=S=>{const[U,W]=pt(S,Q.variantKeys),r=Q(W),{value:X,onValueChange:Y,defaultValue:Z,disabled:c=!1,maxLength:o,onComplete:y,placeholder:b,pattern:N,ref:tt,...w}=U,[p="",V]=at({defaultProp:Z,prop:X,onChange:Y}),s=z(null),{ref:et,isHovered:G}=ut({isDisabled:c}),{ref:nt,isFocused:D}=lt({isDisabled:c}),L=ct([s,et,nt,tt]),R=z([s.current?.selectionStart??null,s.current?.selectionEnd??null,s.current?.selectionDirection??"none"]),d=C(()=>N?new RegExp(N):null,[N]),[f,v]=J(null),[P,h]=J(null),M=l(t=>{v(null),h(null)},[]),T=l(t=>{if(s.current){const e=Math.min(s.current.value.length,o-1),n=s.current.value.length;s.current.setSelectionRange(e,n),v(e),h(n)}},[o]),k=l(t=>{const e=t.currentTarget.value.slice(0,o);if(e.length>0&&d&&!d.test(e)){t.preventDefault();return}V(e),e.length===o&&y?.(e)},[o,y,d,V]);st(()=>{const t=s.current;if(!t)return;R.current=[t.selectionStart,t.selectionEnd,t.selectionDirection];function e(){if(!t)return;if(document.activeElement!==t){v(null),h(null);return}const n=t.selectionStart,g=t.selectionEnd,E=t.selectionDirection,i=R.current;let a=-1,u=-1,I;if(p.length!==0&&n!==null&&g!==null){if(n===g){if(n===0)a=0,u=1;else if(n===o)a=o-1,u=o;else if(o>1&&p.length>1){let q=0;if(i[0]!==null&&i[1]!==null){I=n<i[1]?"backward":"forward";const ot=i[0]===i[1]&&i[0]<n;I==="backward"&&!ot&&(q=-1)}a=n+q,u=a+1}}a!=-1&&u!==-1&&a!==u&&t.setSelectionRange(a,u,I)}const _=a!==-1?a:n,$=u!==-1?u:g,rt=I??E;v(_),h($),R.current=[_,$,rt]}return document.addEventListener("selectionchange",e,{capture:!0}),()=>{document.removeEventListener("selectionchange",e,{capture:!0})}},[o,p]);const F=C(()=>Array.from({length:6}).map((t,e)=>{const n=p[e]??null,g=b?.[e],E=f!==null&&P!==null&&(f===P&&f===e||f<=e&&P>e);return{char:n,placeholderChar:g,isActive:E}}),[b,P,f,p]),H=l(t=>({"data-slot":m("root"),"data-disabled":O(c),"aria-disabled":O(c),"data-hover":O(G),"data-focus":O(D),...t,className:r.root({className:t.className})}),[D,G,r,c]),x=l(t=>({"data-slot":m("group"),...t,className:r.group({className:t.className})}),[r]),A=l(t=>({"data-slot":m("slot"),...t,className:r.slot({className:t.className})}),[r]),B=l(t=>({"data-slot":m("separator"),...t,className:r.separator({className:t.className})}),[r]),K=l(()=>({...it(w,{onChange:k,onBlur:M,onFocus:T}),ref:L,"data-slot":m("input"),value:p,maxLength:o,className:r.input({className:S.className}),disabled:c,pattern:d?.source}),[w,p,k,M,T,L,o,r,S.className,c,d?.source]),j=l(t=>({"data-slot":m("caret"),...t,className:r.caret({className:t.className})}),[r]);return C(()=>({getRootProps:H,getGroupProps:x,getSlotProps:A,getSeparatorProps:B,getInputProps:K,getCaretProps:j,slots:F}),[H,x,A,B,K,j,F])};export{Pt as useOtpInput};
+"use client";import{useCallback as l,useEffect as at,useMemo as C,useRef as J,useState as Q}from"react";import{useControlledState as lt,useFocus as ut,useHover as ct,useMergeRefs as pt}from"@jamsrui/hooks";import{dataAttr as v,dataAttrDev as m,mapPropsVariants as it,mergeProps as mt}from"@jamsrui/utils";import{otpInputVariants as U}from"./styles.mjs";const Pt=S=>{const[W,X]=it(S,U.variantKeys),o=U(X),{value:Y,onValueChange:Z,defaultValue:tt,disabled:c=!1,maxLength:r,onComplete:b,placeholder:y,pattern:N,ref:et,isInvalid:w=!1,...V}=W,[p="",G]=lt({defaultProp:tt,prop:Y,onChange:Z}),s=J(null),{ref:nt,isHovered:D}=ct({isDisabled:c}),{ref:ot,isFocused:L}=ut({isDisabled:c}),M=pt([s,nt,ot,et]),R=J([s.current?.selectionStart??null,s.current?.selectionEnd??null,s.current?.selectionDirection??"none"]),d=C(()=>N?new RegExp(N):null,[N]),[f,I]=Q(null),[P,h]=Q(null),T=l(t=>{I(null),h(null)},[]),k=l(t=>{if(s.current){const e=Math.min(s.current.value.length,r-1),n=s.current.value.length;s.current.setSelectionRange(e,n),I(e),h(n)}},[r]),F=l(t=>{const e=t.currentTarget.value.slice(0,r);if(e.length>0&&d&&!d.test(e)){t.preventDefault();return}G(e),e.length===r&&b?.(e)},[r,b,d,G]);at(()=>{const t=s.current;if(!t)return;R.current=[t.selectionStart,t.selectionEnd,t.selectionDirection];function e(){if(!t)return;if(document.activeElement!==t){I(null),h(null);return}const n=t.selectionStart,g=t.selectionEnd,E=t.selectionDirection,i=R.current;let a=-1,u=-1,O;if(p.length!==0&&n!==null&&g!==null){if(n===g){if(n===0)a=0,u=1;else if(n===r)a=r-1,u=r;else if(r>1&&p.length>1){let z=0;if(i[0]!==null&&i[1]!==null){O=n<i[1]?"backward":"forward";const st=i[0]===i[1]&&i[0]<n;O==="backward"&&!st&&(z=-1)}a=n+z,u=a+1}}a!=-1&&u!==-1&&a!==u&&t.setSelectionRange(a,u,O)}const $=a!==-1?a:n,q=u!==-1?u:g,rt=O??E;I($),h(q),R.current=[$,q,rt]}return document.addEventListener("selectionchange",e,{capture:!0}),()=>{document.removeEventListener("selectionchange",e,{capture:!0})}},[r,p]);const H=C(()=>Array.from({length:6}).map((t,e)=>{const n=p[e]??null,g=y?.[e],E=f!==null&&P!==null&&(f===P&&f===e||f<=e&&P>e);return{char:n,placeholderChar:g,isActive:E}}),[y,P,f,p]),x=l(t=>({"data-slot":m("root"),"data-disabled":v(c),"aria-disabled":v(c),"data-hover":v(D),"data-focus":v(L),"data-invalid":v(w),...t,className:o.root({className:t.className})}),[c,D,L,w,o]),A=l(t=>({"data-slot":m("group"),...t,className:o.group({className:t.className})}),[o]),B=l(t=>({"data-slot":m("slot"),...t,className:o.slot({className:t.className})}),[o]),K=l(t=>({"data-slot":m("separator"),...t,className:o.separator({className:t.className})}),[o]),j=l(()=>({...mt(V,{onChange:F,onBlur:T,onFocus:k}),ref:M,"data-slot":m("input"),value:p,maxLength:r,className:o.input({className:S.className}),disabled:c,pattern:d?.source}),[V,p,F,T,k,M,r,o,S.className,c,d?.source]),_=l(t=>({"data-slot":m("caret"),...t,className:o.caret({className:t.className})}),[o]);return C(()=>({getRootProps:x,getGroupProps:A,getSlotProps:B,getSeparatorProps:K,getInputProps:j,getCaretProps:_,slots:H}),[x,A,B,K,j,_,H])};export{Pt as useOtpInput};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jamsrui/otp-input",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "peerDependencies": {
     "react": ">=19"
   },
   "dependencies": {
-    "@jamsrui/core": "^0.0.15",
-    "@jamsrui/hooks": "^0.0.19",
-    "@jamsrui/utils": "^0.0.19"
+    "@jamsrui/core": "^0.0.16",
+    "@jamsrui/hooks": "^0.0.20",
+    "@jamsrui/utils": "^0.0.20"
   },
   "exports": {
     ".": {