@jamsrui/otp-input 0.0.16 → 0.0.18

package/dist/index.d.mts

@@ -1,21 +1,21 @@
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OtpInput as OtpInput$1 } from './otp-input.mjs';
+import { OtpInputConfig } from './otp-input-config.mjs';
+export { useOtpInputConfig } from './otp-input-config.mjs';
 import { OtpInputGroup } from './otp-input-group.mjs';
 import { OtpInputSeparator } from './otp-input-separator.mjs';
 import { OtpInputSlot } from './otp-input-slot.mjs';
-export { OtpInputConfig, useOtpInputConfig } from './otp-input-config.mjs';
+export { OtpInputSlots, OtpInputVariants, otpInputVariants } from './styles.mjs';
+export { useOtpInput } from './use-otp-input.mjs';
 export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from './regexp.mjs';
-import './use-otp-input.mjs';
+import '@jamsrui/core';
 import '@jamsrui/utils';
 import './otp-input-caret.mjs';
 import './otp-input-input.mjs';
 import './otp-input-root.mjs';
-import './styles.mjs';
-import '@jamsrui/core';
 
 declare const OtpInput: ((props: OtpInput$1.Props) => react_jsx_runtime.JSX.Element) & {
-    Root: (props: OtpInput$1.Props) => react_jsx_runtime.JSX.Element;
     Slot: (props: OtpInputSlot.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
     Separator: (props: OtpInputSeparator.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
     Group: (props: OtpInputGroup.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
@@ -23,6 +23,8 @@ declare const OtpInput: ((props: OtpInput$1.Props) => react_jsx_runtime.JSX.Elem
 declare namespace OtpInput {
     interface Props extends OtpInput$1.Props {
     }
+    interface Config extends OtpInputConfig.Props {
+    }
     interface Group extends OtpInputGroup.Props {
     }
     interface Separator extends OtpInputSeparator.Props {
@@ -31,4 +33,4 @@ declare namespace OtpInput {
     }
 }
 
-export { OtpInput };
+export { OtpInput, OtpInputConfig, OtpInputGroup, OtpInputSeparator, OtpInputSlot };

package/dist/index.mjs

@@ -1 +1 @@
-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 f,useOtpInputConfig as x}from"./otp-input-config.mjs";import{REGEXP_ONLY_CHARS as i,REGEXP_ONLY_DIGITS as m,REGEXP_ONLY_DIGITS_AND_CHARS as G}from"./regexp.mjs";const O=Object.assign(t,{Root:t,Slot:r,Separator:o,Group:p});export{O as OtpInput,f as OtpInputConfig,i as REGEXP_ONLY_CHARS,m as REGEXP_ONLY_DIGITS,G as REGEXP_ONLY_DIGITS_AND_CHARS,x as useOtpInputConfig};
+import{OtpInput as r}from"./otp-input.mjs";import{OtpInputConfig as e,useOtpInputConfig as n}from"./otp-input-config.mjs";import{OtpInputGroup as t}from"./otp-input-group.mjs";import{OtpInputSeparator as p}from"./otp-input-separator.mjs";import{OtpInputSlot as o}from"./otp-input-slot.mjs";import{otpInputVariants as u}from"./styles.mjs";import{useOtpInput as I}from"./use-otp-input.mjs";import{REGEXP_ONLY_CHARS as R,REGEXP_ONLY_DIGITS as l,REGEXP_ONLY_DIGITS_AND_CHARS as C}from"./regexp.mjs";const P=Object.assign(r,{Slot:o,Separator:p,Group:t});export{P as OtpInput,e as OtpInputConfig,t as OtpInputGroup,p as OtpInputSeparator,o as OtpInputSlot,R as REGEXP_ONLY_CHARS,l as REGEXP_ONLY_DIGITS,C as REGEXP_ONLY_DIGITS_AND_CHARS,u as otpInputVariants,I as useOtpInput,n as useOtpInputConfig};

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { GlobalConfigProps } from '@jamsrui/core';
+import { WithGlobalConfig } from '@jamsrui/core';
 import { OtpInput } from './otp-input.mjs';
 import './use-otp-input.mjs';
 import '@jamsrui/utils';
@@ -18,7 +18,7 @@ declare const OtpInputConfig: (props: Omit<Partial<Record<string, any>>, "childr
     children: React.ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 declare namespace OtpInputConfig {
-    interface Props extends OtpInput.Props, GlobalConfigProps<OtpInput.Props> {
+    interface Props extends WithGlobalConfig<OtpInput.Props> {
     }
 }
 

package/dist/otp-input-config.mjs

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

package/dist/otp-input-context.mjs

@@ -1 +1 @@
-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};
+"use client";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/regexp.mjs

@@ -1 +1 @@
-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};
+"use client";const _="^\\d+$",t="^[a-zA-Z]+$",o="^[a-zA-Z0-9]+$";export{t as REGEXP_ONLY_CHARS,_ as REGEXP_ONLY_DIGITS,o as REGEXP_ONLY_DIGITS_AND_CHARS};

package/dist/use-otp-input.mjs

@@ -1 +1 @@
-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 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.16",
+  "version": "0.0.18",
   "peerDependencies": {
     "react": ">=19"
   },
   "dependencies": {
-    "@jamsrui/core": "^0.0.13",
-    "@jamsrui/hooks": "^0.0.15",
-    "@jamsrui/utils": "^0.0.15"
+    "@jamsrui/hooks": "^0.0.17",
+    "@jamsrui/utils": "^0.0.17",
+    "@jamsrui/core": "^0.0.14"
   },
   "exports": {
     ".": {