@jamsrui/otp-input 0.0.12 → 0.0.14

package/dist/index.d.mts

@@ -1,6 +1,24 @@
-export { OtpInput } from './otp-input.mjs';
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OtpInput as OtpInput$1 } from './otp-input.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';
-import 'react';
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from './regexp.mjs';
+import './use-otp-input.mjs';
 import '@jamsrui/utils';
-import 'react/jsx-runtime';
+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>>;
+};
+
+export { OtpInput };

package/dist/index.mjs

@@ -1 +1 @@
-"use client";import{a as p,b as n}from"./chunk-WEHL2U4J.mjs";import{a as t}from"./chunk-WPMKZ7NQ.mjs";export{t as OtpInput,p as OtpInputConfig,n 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.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const OtpInputCaret: (props: OtpInputCaret.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace OtpInputCaret {
+    interface Props extends UIProps<"span"> {
+    }
+}
+
+export { OtpInputCaret };

package/dist/otp-input-caret.mjs

@@ -0,0 +1 @@
+"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.d.mts

@@ -1,8 +1,16 @@
-import { OtpInput } from './otp-input.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GlobalConfigProps } from '@jamsrui/core';
-import 'react';
+import { OtpInput } from './otp-input.mjs';
+import './use-otp-input.mjs';
 import '@jamsrui/utils';
+import './otp-input-caret.mjs';
+import 'react';
+import './otp-input-group.mjs';
+import './otp-input-input.mjs';
+import './otp-input-root.mjs';
+import './otp-input-separator.mjs';
+import './otp-input-slot.mjs';
+import './styles.mjs';
 
 declare const useOtpInputConfig: () => Record<string, any>;
 declare const OtpInputConfig: (props: Omit<Partial<Record<string, any>>, "children"> & {

package/dist/otp-input-config.mjs

@@ -1 +1 @@
-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.d.mts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { useOtpInput } from './use-otp-input.mjs';
+import '@jamsrui/utils';
+import './otp-input-caret.mjs';
+import './otp-input-group.mjs';
+import './otp-input-input.mjs';
+import './otp-input-root.mjs';
+import './otp-input-separator.mjs';
+import './otp-input-slot.mjs';
+import './styles.mjs';
+
+declare const useOtpInputContext: () => OtpInputContext.Props;
+declare const OtpInputContext: react.Context<OtpInputContext.Props | null>;
+declare namespace OtpInputContext {
+    interface Props extends ReturnType<typeof useOtpInput> {
+    }
+}
+
+export { OtpInputContext, useOtpInputContext };

package/dist/otp-input-context.mjs

@@ -0,0 +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};

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

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const OtpInputGroup: (props: OtpInputGroup.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace OtpInputGroup {
+    interface Props extends UIProps<"div"> {
+    }
+}
+
+export { OtpInputGroup };

package/dist/otp-input-group.mjs

@@ -0,0 +1 @@
+"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.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const OtpInputInput: (props: OtpInputInput.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace OtpInputInput {
+    interface Props extends UIProps<"input"> {
+    }
+}
+
+export { OtpInputInput };

package/dist/otp-input-input.mjs

@@ -0,0 +1 @@
+"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.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const OtpInputRoot: (props: OtpInputRoot.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace OtpInputRoot {
+    interface Props extends UIProps<"div"> {
+    }
+}
+
+export { OtpInputRoot };

package/dist/otp-input-root.mjs

@@ -0,0 +1 @@
+"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.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const OtpInputSeparator: (props: OtpInputSeparator.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace OtpInputSeparator {
+    interface Props extends UIProps<"div"> {
+    }
+}
+
+export { OtpInputSeparator };

package/dist/otp-input-separator.mjs

@@ -0,0 +1 @@
+"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.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const OtpInputSlot: (props: OtpInputSlot.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace OtpInputSlot {
+    interface Props extends UIProps<"div"> {
+        index: number;
+    }
+}
+
+export { OtpInputSlot };

package/dist/otp-input-slot.mjs

@@ -0,0 +1 @@
+"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.d.mts

@@ -1,9 +1,18 @@
-import * as react from 'react';
-import { UIProps } from '@jamsrui/utils';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useOtpInput } from './use-otp-input.mjs';
+import '@jamsrui/utils';
+import './otp-input-caret.mjs';
+import 'react';
+import './otp-input-group.mjs';
+import './otp-input-input.mjs';
+import './otp-input-root.mjs';
+import './otp-input-separator.mjs';
+import './otp-input-slot.mjs';
+import './styles.mjs';
 
-declare const OtpInput: (props: OtpInput.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare const OtpInput: (props: OtpInput.Props) => react_jsx_runtime.JSX.Element;
 declare namespace OtpInput {
-    interface Props extends UIProps<"div"> {
+    interface Props extends useOtpInput.Props {
     }
 }
 

package/dist/otp-input.mjs

@@ -1 +1 @@
-import{a}from"./chunk-WPMKZ7NQ.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.d.mts

@@ -0,0 +1,5 @@
+declare const REGEXP_ONLY_DIGITS = "^\\d+$";
+declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/dist/regexp.mjs

@@ -0,0 +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};

package/dist/styles.d.mts

@@ -1,2 +1,104 @@
+import * as _jamsrui_utils from '@jamsrui/utils';
+import { VariantProps } from '@jamsrui/utils';
 
-export {  }
+declare const otpInputVariants: _jamsrui_utils.TVReturnType<{
+    radius: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        "2xl": {};
+        "3xl": {};
+        full: {};
+        none: {};
+    };
+    size: {
+        sm: {
+            slot: string;
+            caret: string;
+        };
+        md: {
+            slot: string;
+            caret: string;
+        };
+        lg: {
+            slot: string;
+            caret: string;
+        };
+    };
+}, {
+    root: string;
+    group: string;
+    slot: string;
+    separator: string;
+    input: string[];
+    caret: string;
+}, undefined, {
+    radius: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        "2xl": {};
+        "3xl": {};
+        full: {};
+        none: {};
+    };
+    size: {
+        sm: {
+            slot: string;
+            caret: string;
+        };
+        md: {
+            slot: string;
+            caret: string;
+        };
+        lg: {
+            slot: string;
+            caret: string;
+        };
+    };
+}, {
+    root: string;
+    group: string;
+    slot: string;
+    separator: string;
+    input: string[];
+    caret: string;
+}, _jamsrui_utils.TVReturnType<{
+    radius: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        "2xl": {};
+        "3xl": {};
+        full: {};
+        none: {};
+    };
+    size: {
+        sm: {
+            slot: string;
+            caret: string;
+        };
+        md: {
+            slot: string;
+            caret: string;
+        };
+        lg: {
+            slot: string;
+            caret: string;
+        };
+    };
+}, {
+    root: string;
+    group: string;
+    slot: string;
+    separator: string;
+    input: string[];
+    caret: string;
+}, undefined, unknown, unknown, undefined>>;
+type OtpInputVariants = VariantProps<typeof otpInputVariants>;
+type OtpInputSlots = keyof ReturnType<typeof otpInputVariants>;
+
+export { type OtpInputSlots, type OtpInputVariants, otpInputVariants };

package/dist/styles.mjs

@@ -0,0 +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-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.d.mts

@@ -1,7 +1,36 @@
-declare const useOTPInput: (props: useOTPInput.Props) => void;
-declare namespace useOTPInput {
-    interface Props {
+import { PropGetter } from '@jamsrui/utils';
+import { OtpInputCaret } from './otp-input-caret.mjs';
+import { OtpInputGroup } from './otp-input-group.mjs';
+import { OtpInputInput } from './otp-input-input.mjs';
+import { OtpInputRoot } from './otp-input-root.mjs';
+import { OtpInputSeparator } from './otp-input-separator.mjs';
+import { OtpInputSlot } from './otp-input-slot.mjs';
+import { OtpInputVariants } from './styles.mjs';
+import 'react';
+
+type OverrideProps<T, R> = Omit<T, keyof R> & R;
+declare const useOtpInput: (props: useOtpInput.Props) => {
+    getRootProps: PropGetter<OtpInputRoot.Props>;
+    getGroupProps: PropGetter<OtpInputGroup.Props>;
+    getSlotProps: PropGetter<OtpInputSlot.Props>;
+    getSeparatorProps: PropGetter<OtpInputSeparator.Props>;
+    getInputProps: () => OtpInputInput.Props;
+    getCaretProps: PropGetter<OtpInputCaret.Props>;
+    slots: {
+        char: string | null;
+        placeholderChar: string | undefined;
+        isActive: boolean;
+    }[];
+};
+declare namespace useOtpInput {
+    interface Props extends OtpInputVariants, OverrideProps<OtpInputInput.Props, {
+        value?: string;
+        onValueChange?: (value: string) => void;
+        defaultValue?: string;
+        maxLength: number;
+        onComplete?: (value: string) => void;
+    }> {
     }
 }
 
-export { useOTPInput };
+export { useOtpInput };

package/dist/use-otp-input.mjs

@@ -1 +1 @@
-var e=p=>{};export{e 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.12",
+  "version": "0.0.14",
   "peerDependencies": {
     "react": ">=19"
   },
   "dependencies": {
-    "@jamsrui/hooks": "^0.0.12",
-    "@jamsrui/core": "^0.0.10",
-    "@jamsrui/utils": "^0.0.12"
+    "@jamsrui/core": "^0.0.12",
+    "@jamsrui/hooks": "^0.0.14",
+    "@jamsrui/utils": "^0.0.14"
   },
   "exports": {
     ".": {

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-WPMKZ7NQ.mjs

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