@jamsrui/otp-input 0.0.13 → 0.0.14

package/dist/index.mjs

@@ -1 +1 @@
-import{a as r}from"./chunk-7OASMB7X.mjs";import{a as t}from"./chunk-IOPU4CKA.mjs";import{a as O,b as u,c as m}from"./chunk-EQPCLKKL.mjs";import"./chunk-5TVJ6UCI.mjs";import"./chunk-OVL5L7PR.mjs";import"./chunk-XJPALAY7.mjs";import{a as n,b as I}from"./chunk-WEHL2U4J.mjs";import{a as p}from"./chunk-W3C7AQ5G.mjs";import"./chunk-Y77CDLW4.mjs";import"./chunk-NYIKF22A.mjs";import{a as o}from"./chunk-HOOWHAPU.mjs";import"./chunk-6EZ5ORGY.mjs";var i=Object.assign(t,{Root:t,Slot:r,Separator:o,Group:p});export{i as OtpInput,n as OtpInputConfig,u as REGEXP_ONLY_CHARS,O as REGEXP_ONLY_DIGITS,m as REGEXP_ONLY_DIGITS_AND_CHARS,I as useOtpInputConfig};
+import{OtpInput as t}from"./otp-input.mjs";import{OtpInputGroup as p}from"./otp-input-group.mjs";import{OtpInputSeparator as o}from"./otp-input-separator.mjs";import{OtpInputSlot as r}from"./otp-input-slot.mjs";import{OtpInputConfig as _,useOtpInputConfig as e}from"./otp-input-config.mjs";import{REGEXP_ONLY_CHARS as G,REGEXP_ONLY_DIGITS as R,REGEXP_ONLY_DIGITS_AND_CHARS as a}from"./regexp.mjs";const m=Object.assign(t,{Root:t,Slot:r,Separator:o,Group:p});export{m as OtpInput,_ as OtpInputConfig,G as REGEXP_ONLY_CHARS,R as REGEXP_ONLY_DIGITS,a as REGEXP_ONLY_DIGITS_AND_CHARS,e as useOtpInputConfig};

package/dist/otp-input-caret.mjs

@@ -1 +1 @@
-"use client";import{a}from"./chunk-XJPALAY7.mjs";import"./chunk-6EZ5ORGY.mjs";export{a as OtpInputCaret};
+"use client";import{useRenderElement as r}from"@jamsrui/hooks";import{useOtpInputContext as p}from"./otp-input-context.mjs";const m=e=>{const{getCaretProps:t}=p();return r("span",{props:t(e)})};export{m as OtpInputCaret};

package/dist/otp-input-config.mjs

@@ -1 +1 @@
-"use client";import{a,b}from"./chunk-WEHL2U4J.mjs";export{a as OtpInputConfig,b as useOtpInputConfig};
+"use client";import{createConfigContext as p}from"@jamsrui/utils";const[o,n]=p({displayName:"OtpInputConfig"});export{o as OtpInputConfig,n as useOtpInputConfig};

package/dist/otp-input-context.mjs

@@ -1 +1 @@
-import{a,b}from"./chunk-6EZ5ORGY.mjs";export{a as OtpInputContext,b as useOtpInputContext};
+import{createContext as e,use as n}from"react";const p=e(null),u=()=>{const t=n(p);if(!t)throw new Error("useOtpInputContext must be used within an OtpInputContext");return t};export{p as OtpInputContext,u as useOtpInputContext};

package/dist/otp-input-group.mjs

@@ -1 +1 @@
-"use client";import{a}from"./chunk-W3C7AQ5G.mjs";import"./chunk-6EZ5ORGY.mjs";export{a as OtpInputGroup};
+"use client";import{useRenderElement as r}from"@jamsrui/hooks";import{useOtpInputContext as p}from"./otp-input-context.mjs";const u=e=>{const{getGroupProps:t}=p();return r("div",{props:t(e)})};export{u as OtpInputGroup};

package/dist/otp-input-input.mjs

@@ -1 +1 @@
-"use client";import{a}from"./chunk-Y77CDLW4.mjs";import"./chunk-6EZ5ORGY.mjs";export{a as OtpInputInput};
+"use client";import{useRenderElement as p}from"@jamsrui/hooks";import{useOtpInputContext as e}from"./otp-input-context.mjs";const u=n=>{const{getInputProps:t}=e();return p("input",{props:t()})};export{u as OtpInputInput};

package/dist/otp-input-root.mjs

@@ -1 +1 @@
-"use client";import{a}from"./chunk-NYIKF22A.mjs";import"./chunk-6EZ5ORGY.mjs";export{a as OtpInputRoot};
+"use client";import{useRenderElement as o}from"@jamsrui/hooks";import{useOtpInputContext as r}from"./otp-input-context.mjs";const m=t=>{const{getRootProps:e}=r();return o("div",{props:e(t)})};export{m as OtpInputRoot};

package/dist/otp-input-separator.mjs

@@ -1 +1 @@
-"use client";import{a}from"./chunk-HOOWHAPU.mjs";import"./chunk-6EZ5ORGY.mjs";export{a as OtpInputSeparator};
+"use client";import{useRenderElement as r}from"@jamsrui/hooks";import{useOtpInputContext as p}from"./otp-input-context.mjs";const a=e=>{const{getSeparatorProps:t}=p();return r("div",{props:t(e)})};export{a as OtpInputSeparator};

package/dist/otp-input-slot.mjs

@@ -1 +1 @@
-"use client";import{a}from"./chunk-7OASMB7X.mjs";import"./chunk-XJPALAY7.mjs";import"./chunk-6EZ5ORGY.mjs";export{a as OtpInputSlot};
+"use client";import{jsx as d}from"react/jsx-runtime";import{useMemo as l}from"react";import{useRenderElement as c}from"@jamsrui/hooks";import{dataAttr as m}from"@jamsrui/utils";import{OtpInputCaret as u}from"./otp-input-caret.mjs";import{useOtpInputContext as a}from"./otp-input-context.mjs";const P=n=>{const{getSlotProps:p,slots:s}=a(),t=s[n.index],e=t?.isActive??!1,r=t?.char??"",o=t?.placeholderChar??"",i=l(()=>r||o||(e?d(u,{}):null),[r,o,e]);return c("div",{props:[p(n),{"data-active":m(e),children:i}]})};export{P as OtpInputSlot};

package/dist/otp-input.mjs

@@ -1 +1 @@
-"use client";import{a}from"./chunk-IOPU4CKA.mjs";import"./chunk-5TVJ6UCI.mjs";import"./chunk-OVL5L7PR.mjs";import"./chunk-Y77CDLW4.mjs";import"./chunk-NYIKF22A.mjs";import"./chunk-6EZ5ORGY.mjs";export{a as OtpInput};
+"use client";import{jsx as t,jsxs as O}from"react/jsx-runtime";import{OtpInputContext as e}from"./otp-input-context.mjs";import{OtpInputInput as u}from"./otp-input-input.mjs";import{OtpInputRoot as s}from"./otp-input-root.mjs";import{useOtpInput as I}from"./use-otp-input.mjs";const f=p=>{const{children:o,...n}=p,r=I(n);return t(e,{value:r,children:O(s,{children:[t(u,{}),o]})})};export{f as OtpInput};

package/dist/regexp.mjs

@@ -1 +1 @@
-import{a,b,c}from"./chunk-EQPCLKKL.mjs";export{b as REGEXP_ONLY_CHARS,a as REGEXP_ONLY_DIGITS,c as REGEXP_ONLY_DIGITS_AND_CHARS};
+const _="^\\d+$",o="^[a-zA-Z]+$",t="^[a-zA-Z0-9]+$";export{o as REGEXP_ONLY_CHARS,_ as REGEXP_ONLY_DIGITS,t as REGEXP_ONLY_DIGITS_AND_CHARS};

package/dist/styles.mjs

@@ -1 +1 @@
-import{a}from"./chunk-OVL5L7PR.mjs";export{a as otpInputVariants};
+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-50 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"],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"}}},defaultVariants:{radius:"md",size:"md"}});export{o as otpInputVariants};

package/dist/use-otp-input.mjs

@@ -1 +1 @@
-import{a}from"./chunk-5TVJ6UCI.mjs";import"./chunk-OVL5L7PR.mjs";export{a as useOtpInput};
+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};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jamsrui/otp-input",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "peerDependencies": {
     "react": ">=19"
   },
   "dependencies": {
-    "@jamsrui/core": "^0.0.11",
-    "@jamsrui/hooks": "^0.0.13",
-    "@jamsrui/utils": "^0.0.13"
+    "@jamsrui/core": "^0.0.12",
+    "@jamsrui/hooks": "^0.0.14",
+    "@jamsrui/utils": "^0.0.14"
   },
   "exports": {
     ".": {

package/dist/chunk-5TVJ6UCI.mjs

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

package/dist/chunk-6EZ5ORGY.mjs

@@ -1 +0,0 @@
-import{createContext as e,use as n}from"react";var p=e(null),u=()=>{let t=n(p);if(!t)throw new Error("useOtpInputContext must be used within an OtpInputContext");return t};export{p as a,u as b};

package/dist/chunk-7OASMB7X.mjs

@@ -1 +0,0 @@
-import{a as s}from"./chunk-XJPALAY7.mjs";import{b as p}from"./chunk-6EZ5ORGY.mjs";import{useMemo as m}from"react";import{useRenderElement as u}from"@jamsrui/hooks";import{dataAttr as a}from"@jamsrui/utils";import{jsx as d}from"react/jsx-runtime";var P=n=>{let{getSlotProps:i,slots:l}=p(),t=l[n.index],e=t?.isActive??!1,r=t?.char??"",o=t?.placeholderChar??"",c=m(()=>r||o||(e?d(s,{}):null),[r,o,e]);return u("div",{props:[i(n),{"data-active":a(e),children:c}]})};export{P as a};

package/dist/chunk-EQPCLKKL.mjs

@@ -1 +0,0 @@
-var _="^\\d+$",o="^[a-zA-Z]+$",t="^[a-zA-Z0-9]+$";export{_ as a,o as b,t as c};

package/dist/chunk-HOOWHAPU.mjs

@@ -1 +0,0 @@
-import{b as e}from"./chunk-6EZ5ORGY.mjs";import{useRenderElement as p}from"@jamsrui/hooks";var a=t=>{let{getSeparatorProps:r}=e();return p("div",{props:r(t)})};export{a};

package/dist/chunk-IOPU4CKA.mjs

@@ -1 +0,0 @@
-import{a as n}from"./chunk-5TVJ6UCI.mjs";import{a as p}from"./chunk-Y77CDLW4.mjs";import{a as o}from"./chunk-NYIKF22A.mjs";import{a as t}from"./chunk-6EZ5ORGY.mjs";import{jsx as r,jsxs as O}from"react/jsx-runtime";var f=e=>{let{children:u,...s}=e,I=n(s);return r(t,{value:I,children:O(o,{children:[r(p,{}),u]})})};export{f as a};

package/dist/chunk-NYIKF22A.mjs

@@ -1 +0,0 @@
-import{b as t}from"./chunk-6EZ5ORGY.mjs";import{useRenderElement as r}from"@jamsrui/hooks";var m=e=>{let{getRootProps:o}=t();return r("div",{props:o(e)})};export{m as a};

package/dist/chunk-OVL5L7PR.mjs

@@ -1 +0,0 @@
-import{radiusVariant as t,tv as r}from"@jamsrui/utils";var o=r({slots:{root:"otp-input otp-input__root relative flex gap-2 items-center group data-disabled:opacity-50 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"],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"}}},defaultVariants:{radius:"md",size:"md"}});export{o as a};

package/dist/chunk-W3C7AQ5G.mjs

@@ -1 +0,0 @@
-import{b as e}from"./chunk-6EZ5ORGY.mjs";import{useRenderElement as p}from"@jamsrui/hooks";var u=t=>{let{getGroupProps:r}=e();return p("div",{props:r(t)})};export{u as a};

package/dist/chunk-WEHL2U4J.mjs

@@ -1 +0,0 @@
-import{createConfigContext as p}from"@jamsrui/utils";var[o,n]=p({displayName:"OtpInputConfig"});export{o as a,n as b};

package/dist/chunk-XJPALAY7.mjs

@@ -1 +0,0 @@
-import{b as e}from"./chunk-6EZ5ORGY.mjs";import{useRenderElement as p}from"@jamsrui/hooks";var m=t=>{let{getCaretProps:r}=e();return p("span",{props:r(t)})};export{m as a};

package/dist/chunk-Y77CDLW4.mjs

@@ -1 +0,0 @@
-import{b as t}from"./chunk-6EZ5ORGY.mjs";import{useRenderElement as e}from"@jamsrui/hooks";var u=n=>{let{getInputProps:p}=t();return e("input",{props:p()})};export{u as a};