@clicktap/ui 0.19.2 → 0.20.0

package/components/Input/Input.js

@@ -1 +1 @@
-import{jsxs as s,jsx as t}from"react/jsx-runtime";import{Label as n,TextField as m,Input as p,Text as b,FieldError as h}from"react-aria-components";import{forwardRef as v}from"react";import{cn as e}from"../../utils/cn.js";import{Skeleton as w}from"../Skeleton/Skeleton.js";import I from"../../hooks/useIsClient.js";function g({className:r}){return t(w,{className:e("w-full h-10 rounded-md z-20 relative",r)})}const y=v(({inputProps:r,label:o,description:i,errorMessage:a,placeholder:u,className:d,classNames:l,disableSkeleton:f,...x},c)=>!I()&&!f?s("div",{className:e("flex flex-col w-full text-slate-900",d),children:[o?t(n,{className:e("flex text-slate-500 text-xs",l?.label),children:o}):null,t(g,{className:l?.skeleton})]}):s(m,{className:e("flex flex-col w-full text-slate-900",d),...x,children:[t(n,{className:e("flex text-slate-500 text-xs",l?.label),children:o}),t(p,{ref:c,placeholder:u,className:e("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200",l?.input),...r}),i&&t(b,{className:e("flex text-slate-500 text-sm",l?.description),slot:"description",children:i}),t(h,{className:e("flex text-red-500 text-sm",l?.error),children:a})]}));export{y as Input,y as default};
+import{jsxs as s,jsx as e}from"react/jsx-runtime";import{Label as u,TextField as v,Input as k,Text as g,FieldError as L}from"react-aria-components";import{forwardRef as C,useState as I}from"react";import{cn as t}from"../../utils/cn.js";import{Skeleton as N}from"../Skeleton/Skeleton.js";import S from"../../hooks/useIsClient.js";function j({className:r}){return s("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:r,children:[e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.64 0 8.577 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.64 0-8.577-3.007-9.963-7.178Z"}),e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]})}function y({className:r}){return e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:r,children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"})})}function M({className:r}){return e(N,{className:t("w-full h-10 rounded-md z-20 relative",r)})}const W=C(({inputProps:r,label:n,description:i,errorMessage:x,placeholder:f,className:d,classNames:o,disableSkeleton:p,type:c,...m},h)=>{const w=S(),a=c==="password",[l,b]=I(!1);return!w&&!p?s("div",{className:t("flex flex-col w-full text-slate-900",d),children:[n?e(u,{className:t("flex text-slate-500 text-xs",o?.label),children:n}):null,e(M,{className:o?.skeleton})]}):s(v,{className:t("flex flex-col w-full text-slate-900",d),type:a?l?"text":"password":c,...m,children:[e(u,{className:t("flex text-slate-500 text-xs",o?.label),children:n}),s("div",{className:"relative",children:[e(k,{ref:h,placeholder:f,className:t("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200",a&&"pr-10",o?.input),...r}),a&&e("button",{type:"button",className:"absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600 bg-transparent border-none cursor-pointer",onClick:()=>b(!l),"aria-label":l?"Hide password":"Show password",tabIndex:-1,children:l?e(y,{className:"w-5 h-5"}):e(j,{className:"w-5 h-5"})})]}),i&&e(g,{className:t("flex text-slate-500 text-sm",o?.description),slot:"description",children:i}),e(L,{className:t("flex text-red-500 text-sm",o?.error),children:x})]})});export{W as Input,W as default};

package/components/ModalOverlay/ModalOverlay.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{forwardRef as _,useId as A,useEffect as w,useCallback as k}from"react";import{ModalOverlay as y}from"react-aria-components";import{motion as C,AnimatePresence as I}from"framer-motion";import{useDialogTrigger as N}from"../DialogTrigger/DialogTrigger.js";import{cn as P}from"../../utils/cn.js";const F="body > [inert]:not(#__next):not([data-overlay-container])";function R(t){return Object.keys(t).some(e=>e.startsWith("__react"))}function b(){document.querySelectorAll(F).forEach(t=>t.removeAttribute("inert"))}function S(t){return!!(t.closest("[data-overlay-container]")||t.closest("#__next"))}const T=_(({style:t,children:e,...n},o)=>{const s=typeof t=="function"?t(n):t;return i(y,{...n,ref:o,style:s,children:e})});let d=null;function j(){return typeof window>"u"?null:(d||(d=C.create(T)),d)}const v=j();function p({animate:t,animation:e,setAnimation:n,className:o,animationVariants:s,isDismissable:O=!0,children:m,...h}){const M=A();w(()=>{b();const r=new MutationObserver(a=>{for(const u of a)if(u.type==="attributes"&&u.attributeName==="inert"){const c=u.target;c.parentElement===document.body?b():R(c)||c.removeAttribute("inert")}});return r.observe(document.body,{attributes:!0,attributeFilter:["inert"],subtree:!0}),()=>r.disconnect()},[]);const{key:E,shouldCloseOnInteractOutside:l,...g}=h,x=k(r=>l?l(r):S(r),[l]),f={isDismissable:O,shouldCloseOnInteractOutside:x,className:P("bg-black/30","fixed top-0 left-0","z-[1000]","w-screen h-[var(--visual-viewport-height)]",o),...g};return v?i(v,{isExiting:e==="hidden",onAnimationComplete:r=>{n(a=>r==="hidden"&&a==="hidden"?"unmounted":a)},variants:s||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:t,exit:"hidden",...f,children:m},E||M):i(y,{...f,children:m})}function B(t){const{isOpen:e}=t,{animation:n,setAnimation:o}=N();return e!==void 0?i(I,{children:e&&i(p,{...t,animate:"visible",animation:n,setAnimation:o})}):i(p,{...t,animate:n,animation:n,setAnimation:o})}export{B as ModalOverlay,B as default};
+import{jsx as i}from"react/jsx-runtime";import{forwardRef as A,useId as w,useEffect as x,useCallback as C}from"react";import{ModalOverlay as p}from"react-aria-components";import{motion as I,AnimatePresence as N}from"framer-motion";import{useDialogTrigger as P}from"../DialogTrigger/DialogTrigger.js";import{cn as k}from"../../utils/cn.js";const R="body > [inert]:not(#__next):not([data-overlay-container])";function S(t){return Object.keys(t).some(e=>e.startsWith("__react"))}function v(){document.querySelectorAll(R).forEach(t=>t.removeAttribute("inert"))}function F(t){return!!(t.closest("[data-overlay-container]")||t.closest("#__next"))}const T=A(({style:t,children:e,...n},r)=>{const s=typeof t=="function"?t(n):t;return i(p,{...n,ref:r,style:s,children:e})});let d=null;function j(){return typeof window>"u"?null:(d||(d=I.create(T)),d)}const b=j();function y({animate:t,animation:e,setAnimation:n,className:r,animationVariants:s,isDismissable:O=!0,children:m,...h}){const M=w();x(()=>{v();const o=new MutationObserver(a=>{for(const l of a)if(l.type==="attributes"&&l.attributeName==="inert"){const c=l.target;c.parentElement===document.body?v():S(c)||c.removeAttribute("inert")}});return o.observe(document.body,{attributes:!0,attributeFilter:["inert"],subtree:!0}),()=>o.disconnect()},[]);const{key:E,shouldCloseOnInteractOutside:u,...g}=h,_=C(o=>u?u(o):F(o),[u]),f={isDismissable:O,shouldCloseOnInteractOutside:_,className:k("bg-black/30 backdrop-blur-sm","fixed top-0 left-0","z-[1000]","w-screen h-[var(--visual-viewport-height)]",r),...g};return b?i(b,{isExiting:e==="hidden",onAnimationComplete:o=>{n(a=>o==="hidden"&&a==="hidden"?"unmounted":a)},variants:s||{hidden:{opacity:0,transition:{delay:.08}},visible:{opacity:1}},initial:"hidden",animate:t,exit:"hidden",...f,children:m},E||M):i(p,{...f,children:m})}function B(t){const{isOpen:e}=t,{animation:n,setAnimation:r}=P();return e!==void 0?i(N,{children:e&&i(y,{...t,animate:"visible",animation:n,setAnimation:r})}):i(y,{...t,animate:n,animation:n,setAnimation:r})}export{B as ModalOverlay,B as default};

package/components/PasswordCheck/PasswordCheck.d.ts

@@ -1,3 +1,3 @@
 import { PasswordCheckProps } from './PasswordCheck.types';
-export declare function PasswordCheck({ value, variant, }: PasswordCheckProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordCheck({ value, variant, requirements, }: PasswordCheckProps): import("react/jsx-runtime").JSX.Element;
 export default PasswordCheck;

package/components/PasswordCheck/PasswordCheck.js

@@ -1 +1 @@
-import{jsx as t,jsxs as n}from"react/jsx-runtime";import{cn as l}from"../../utils/cn.js";import{checkStrength as i,getProgressText as d}from"./PasswordCheck.utils.js";function f({value:o,variant:s="default"}){const e=i(o);return t("div",{children:n("div",{className:l("relative w-full flex gap-x-2",s==="default"&&"mb-8 -mt-1"),children:[Array.from({length:5},(a,r)=>r).map((a,r)=>t("div",{className:l("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-slate-200",e<=r&&"bg-slate-600",(e===1||e===2)&&"bg-red-600",e===3&&"bg-yellow-600",e===4&&"bg-green-600",e===5&&"bg-blue-600")},a)),s==="default"&&n("div",{className:l("inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-slate-950",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:l((e===1||e===2)&&"text-red-600",e===3&&"text-yellow-600",e===4&&"text-green-600",e===5&&"text-blue-600"),children:d(e)})]})]})})}export{f as PasswordCheck,f as default};
+import{jsxs as n,jsx as t}from"react/jsx-runtime";import{cn as r}from"../../utils/cn.js";import{checkStrength as d,getProgressText as o}from"./PasswordCheck.utils.js";const x=[{label:"At least 8 characters",test:s=>s.length>=8},{label:"At least one uppercase letter",test:s=>/[A-Z]/.test(s)},{label:"At least one digit",test:s=>/\d/.test(s)},{label:"At least one special character",test:s=>/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(s)}];function p({value:s,variant:i="default",requirements:c=x}){const e=d(s);return i==="requirements"?n("div",{className:"mt-4 flex flex-col gap-2",children:[t("ul",{className:"flex flex-col gap-1 text-xs text-left",children:c.map(a=>{const l=a.test(s);return n("li",{className:"flex items-center gap-1.5",children:[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:r("shrink-0 transition-colors",l?"text-green-600":"text-slate-400"),children:l?t("path",{d:"M20 6 9 17l-5-5"}):t("circle",{cx:"12",cy:"12",r:"4"})}),t("span",{className:r("transition-colors",l?"text-green-700":"text-slate-500"),children:a.label})]},a.label)})}),n("div",{className:"flex flex-col",children:[t("div",{className:"w-full flex gap-x-2",children:Array.from({length:5},(a,l)=>l).map((a,l)=>t("div",{className:r("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-slate-200",e<=l&&"bg-slate-600",(e===1||e===2)&&"bg-red-600",e===3&&"bg-yellow-600",e===4&&"bg-green-600",e===5&&"bg-blue-600")},a))}),n("div",{className:r("inline-flex gap-x-1 text-xs text-slate-950 transition-opacity mt-1",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:r((e===1||e===2)&&"text-red-600",e===3&&"text-yellow-600",e===4&&"text-green-600",e===5&&"text-blue-600"),children:o(e)})]})]})]}):t("div",{children:n("div",{className:r("relative w-full flex gap-x-2",i==="default"&&"mb-8 -mt-1"),children:[Array.from({length:5},(a,l)=>l).map((a,l)=>t("div",{className:r("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-slate-200",e<=l&&"bg-slate-600",(e===1||e===2)&&"bg-red-600",e===3&&"bg-yellow-600",e===4&&"bg-green-600",e===5&&"bg-blue-600")},a)),i==="default"&&n("div",{className:r("inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-slate-950",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:r((e===1||e===2)&&"text-red-600",e===3&&"text-yellow-600",e===4&&"text-green-600",e===5&&"text-blue-600"),children:o(e)})]})]})})}export{p as PasswordCheck,p as default};

package/components/PasswordCheck/PasswordCheck.types.d.ts

@@ -1,4 +1,9 @@
+export type PasswordRequirement = {
+    label: string;
+    test: (value: string) => boolean;
+};
 export type PasswordCheckProps = {
     value: string;
-    variant?: 'default' | 'short';
+    variant?: 'default' | 'short' | 'requirements';
+    requirements?: PasswordRequirement[];
 };

package/components/PinInput/PinInput.d.ts

@@ -1,4 +1,4 @@
 import { PinInputProps } from './PinInput.types';
 /** based on https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/src/pin-input/use-pin-input.ts */
-export declare function PinInput({ description, errorMessage, isDisabled, isInvalid, isMasked, isRequired, label, length, name: _name, onChange: controlledOnChange, value: _value, type, validationBehavior: _validationBehavior, className, classNames, ...props }: PinInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function PinInput({ autoFocus, description, errorMessage, isDisabled, isInvalid, isMasked, isRequired, label, length, name: _name, onChange: controlledOnChange, value: _value, type, validationBehavior: _validationBehavior, className, classNames, ...props }: PinInputProps): import("react/jsx-runtime").JSX.Element;
 export default PinInput;

package/components/PinInput/PinInput.js

@@ -1 +1 @@
-import{jsxs as A,jsx as m}from"react/jsx-runtime";import{useState as K,useRef as E,useEffect as L,useCallback as g}from"react";import{Group as P,Label as R}from"react-aria-components";import{cn as p}from"../../utils/cn.js";function U({description:k,errorMessage:b,isDisabled:y=!1,isInvalid:w=!1,isMasked:$=!1,isRequired:j=!0,label:V,length:n=6,name:T,onChange:o,value:_="",type:h="numeric",validationBehavior:v,className:I,classNames:f,...N}){const[r,D]=K(()=>Array(n).fill("")),c=E([]);L(()=>{c.current=c.current.slice(0,n)},[n]);const z=g(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<n-1&&c.current?.[u+1]?.focus();const l=r.map((s,d)=>d===u?e:s);D(l);const a=l.join("");o?.(a)},[r,n,o]),B=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const u=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],l={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(l[h])&&!u.includes(t.key)&&t.preventDefault(),r[e]===""&&e>0&&t.key==="Backspace"){const a=r.map((d,x)=>x===e-1?"":d);D(a),c.current?.[e-1]?.focus(),t.preventDefault();const s=a.join("");o?.(s)}if(r[e]===""&&e<r.length-1&&t.key==="Delete"){const a=r.map((d,x)=>x===e+1?"":d);D(a),c.current?.[e+1]?.focus(),t.preventDefault();const s=a.join("");o?.(s)}},[r,h,o]),J=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=t.clipboardData?.getData("text");if(!u)return;const l=u.split("").filter(i=>{switch(h){case"alpha":return/^[a-zA-Z]$/.test(i);case"alphanumeric":return/^[a-z0-9]$/i.test(i);default:return/^[0-9]$/.test(i)}});if(l.length===0)return;const a=[...r];let s=e;for(let i=0;i<l.length&&e+i<n;i++)a[e+i]=l[i],s=e+i;D(a);const d=a.join("");o?.(d);const x=s+1<n?s+1:n-1;c.current[x]?.focus()},[r,h,n,o]);return A(P,{className:p("flex flex-wrap gap-2",I),"aria-label":V,...N,children:[V&&m(R,{className:p("flex text-slate-500 text-sm grow shrink-0 basis-full",f?.label),children:V}),r.map((t,e)=>m("div",{className:p("flex flex-col w-full flex-1 text-slate-900",f?.inputWrap),children:m("input",{className:p("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100",w&&"border-red-500 bg-red-100 text-red-600",w&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",f?.input),onChange:z,onKeyDown:B,onPaste:J,type:$?"password":"text",autoComplete:"one-time-code",ref:u=>{c.current[e]=u},value:t,maxLength:1,"data-pin-input-index":e,disabled:y,required:j,"aria-label":`Pin Input Digit ${e+1}`})},`pin-input-${e}`)),(k||w&&b)&&A("div",{className:p("flex flex-row flex-wrap grow shrink-0 basis-full",f?.textWrap),children:[k&&m("p",{className:p("flex text-slate-500 text-sm grow shrink-0 basis-full",f?.description),children:k}),w&&b&&typeof b=="string"&&m("p",{className:p("flex text-red-500 text-sm grow shrink-0 basis-full",f?.error),children:b})]})]})}export{U as PinInput,U as default};
+import{jsxs as y,jsx as m}from"react/jsx-runtime";import{useState as L,useRef as P,useEffect as $,useCallback as g}from"react";import{Group as R,Label as T}from"react-aria-components";import{cn as d}from"../../utils/cn.js";function Z({autoFocus:A=!1,description:k,errorMessage:b,isDisabled:j=!1,isInvalid:w=!1,isMasked:I=!1,isRequired:N=!0,label:V,length:n=6,name:_,onChange:c,value:v="",type:h="numeric",validationBehavior:S,className:z,classNames:p,...B}){const[r,D]=L(()=>Array(n).fill("")),l=P([]);$(()=>{l.current=l.current.slice(0,n)},[n]),$(()=>{A&&l.current[0]?.focus()},[A]);const J=g(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<n-1&&l.current?.[u+1]?.focus();const o=r.map((s,f)=>f===u?e:s);D(o);const a=o.join("");c?.(a)},[r,n,c]),K=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const u=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],o={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(o[h])&&!u.includes(t.key)&&t.preventDefault(),r[e]===""&&e>0&&t.key==="Backspace"){const a=r.map((f,x)=>x===e-1?"":f);D(a),l.current?.[e-1]?.focus(),t.preventDefault();const s=a.join("");c?.(s)}if(r[e]===""&&e<r.length-1&&t.key==="Delete"){const a=r.map((f,x)=>x===e+1?"":f);D(a),l.current?.[e+1]?.focus(),t.preventDefault();const s=a.join("");c?.(s)}},[r,h,c]),E=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=t.clipboardData?.getData("text");if(!u)return;const o=u.split("").filter(i=>{switch(h){case"alpha":return/^[a-zA-Z]$/.test(i);case"alphanumeric":return/^[a-z0-9]$/i.test(i);default:return/^[0-9]$/.test(i)}});if(o.length===0)return;const a=[...r];let s=e;for(let i=0;i<o.length&&e+i<n;i++)a[e+i]=o[i],s=e+i;D(a);const f=a.join("");c?.(f);const x=s+1<n?s+1:n-1;l.current[x]?.focus()},[r,h,n,c]);return y(R,{className:d("flex flex-wrap gap-2",z),"aria-label":V,...B,children:[V&&m(T,{className:d("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.label),children:V}),r.map((t,e)=>m("div",{className:d("flex flex-col w-full flex-1 text-slate-900",p?.inputWrap),children:m("input",{className:d("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100",w&&"border-red-500 bg-red-100 text-red-600",w&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",p?.input),onChange:J,onKeyDown:K,onPaste:E,type:I?"password":"text",autoComplete:"one-time-code",ref:u=>{l.current[e]=u},value:t,maxLength:1,"data-pin-input-index":e,disabled:j,required:N,"aria-label":`Pin Input Digit ${e+1}`})},`pin-input-${e}`)),(k||w&&b)&&y("div",{className:d("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[k&&m("p",{className:d("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.description),children:k}),w&&b&&typeof b=="string"&&m("p",{className:d("flex text-red-500 text-sm grow shrink-0 basis-full",p?.error),children:b})]})]})}export{Z as PinInput,Z as default};

package/components/PinInput/PinInput.types.d.ts

@@ -2,6 +2,7 @@ import { GroupProps, ValidationResult } from 'react-aria-components';
 import { SlotsToClasses } from '../../types/SlotsToClasses';
 /** @todo extend certain textfield props like name, validationBehavior and isRequired */
 export interface PinInputProps extends GroupProps {
+    autoFocus?: boolean;
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
     label?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",