@clicktap/ui 0.14.17 → 0.14.19

package/components/ContextMenu/ContextMenu.d.ts

@@ -1,3 +1,3 @@
 import { PopoverProps } from './ContextMenu.types';
-export declare function ContextMenu({ children, key, onAction, setAnimation, animation, className, classNames, onAnimationStart, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextMenu({ children, key, onAction, setAnimation, animation, className, classNames, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export default ContextMenu;

package/components/ContextMenu/ContextMenu.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{Popover as x,Menu as h}from"react-aria-components";import{forwardRef as c}from"react";import{motion as _}from"framer-motion";import{cn as m}from"../../utils/cn.js";const b=c(({style:o,...n},r)=>{const e=typeof o=="function"?o(n):o;return t(x,{...n,ref:r,style:e})}),l=_.create(b);function A({children:o,key:n,onAction:r,setAnimation:e,animation:d="hidden",className:a,classNames:i,onAnimationStart:y,...u}){return t(l,{className:m("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-56","bg-white","border border-solid border-slate-300",a),isExiting:d==="hidden",onAnimationComplete:f=>{e(p=>f==="hidden"&&p==="hidden"?"unmounted":p)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:d,...u,children:t(h,{className:m("outline-none",i==null?void 0:i.menu),onAction:r,children:o})},n)}export{A as ContextMenu,A as default};
+import{jsx as t}from"react/jsx-runtime";import{Popover as x,Menu as h}from"react-aria-components";import{forwardRef as c}from"react";import{motion as _}from"framer-motion";import{cn as m}from"../../utils/cn.js";const b=c(({style:o,...e},n)=>{const r=typeof o=="function"?o(e):o;return t(x,{...e,ref:n,style:r})}),l=_.create(b);function P({children:o,key:e,onAction:n,setAnimation:r,animation:d="hidden",className:a,classNames:i,...u}){return t(l,{className:m("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-56","bg-white","border border-solid border-slate-300",a),isExiting:d==="hidden",onAnimationComplete:f=>{r(p=>f==="hidden"&&p==="hidden"?"unmounted":p)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:d,...u,children:t(h,{className:m("outline-none",i==null?void 0:i.menu),onAction:n,children:o})},e)}export{P as ContextMenu,P as default};

package/components/ContextMenu/ContextMenu.tsx

@@ -32,7 +32,6 @@ export function ContextMenu({
   animation = 'hidden',
   className,
   classNames,
-  onAnimationStart,
   ...props
 }: PopoverProps) {
   return (

package/components/ContextMenu/ContextMenu.types.d.ts

@@ -3,7 +3,7 @@ import { Dispatch, Key, SetStateAction, ReactNode } from 'react';
 import { MotionStyle } from 'framer-motion';
 import { SlotsToClasses } from '../../types/SlotsToClasses';
 type ContextMenuAnimationState = 'unmounted' | 'hidden' | 'visible';
-export interface PopoverProps extends Omit<AriaPopoverProps, 'children' | 'style'> {
+export interface PopoverProps extends Omit<AriaPopoverProps, 'children' | 'style' | 'onAnimationStart'> {
     animation: ContextMenuAnimationState;
     children: ReactNode;
     onAction?: (key: Key) => void;

package/components/ContextMenu/ContextMenu.types.ts

@@ -6,7 +6,7 @@ import type { SlotsToClasses } from '../../types/SlotsToClasses';
 type ContextMenuAnimationState = 'unmounted' | 'hidden' | 'visible';
 
 export interface PopoverProps
-  extends Omit<AriaPopoverProps, 'children' | 'style'> {
+  extends Omit<AriaPopoverProps, 'children' | 'style' | 'onAnimationStart'> {
   animation: ContextMenuAnimationState;
   children: ReactNode;
   onAction?: (key: Key) => void;

package/components/Dialog/Dialog.d.ts

@@ -1,3 +1,3 @@
 import { DialogProps } from './Dialog.types';
-export declare function Dialog({ className, children, animationVariants, onAnimationStart, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ className, children, animationVariants, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/components/Dialog/Dialog.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Dialog as s}from"react-aria-components";import{motion as l}from"framer-motion";import{cn as m}from"../../utils/cn.js";const f=i(({style:a,animationVariants:r,...t},n)=>{const o=typeof a=="function"?a(t):a;return e(s,{...t,ref:n,style:o})}),c=l.create(f);function x({className:a,children:r,animationVariants:t,onAnimationStart:n,...o}){return e(c,{className:m("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-slate-400","transform -translate-x-1/2 -translate-y-1/2",a),...o,variants:t||{hidden:{transform:"translate(-50%, -50%) scale(0.8)",transition:{ease:"backIn"}},visible:{transform:"translate(-50%, -50%) scale(1)",transition:{ease:"backOut"}}},children:r})}export{x as Dialog,x as default};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Dialog as s}from"react-aria-components";import{motion as l}from"framer-motion";import{cn as m}from"../../utils/cn.js";const f=i(({style:a,animationVariants:o,...r},t)=>{const n=typeof a=="function"?a(r):a;return e(s,{...r,ref:t,style:n})}),c=l.create(f);function x({className:a,children:o,animationVariants:r,...t}){return e(c,{className:m("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-slate-400","transform -translate-x-1/2 -translate-y-1/2",a),...t,variants:r||{hidden:{transform:"translate(-50%, -50%) scale(0.8)",transition:{ease:"backIn"}},visible:{transform:"translate(-50%, -50%) scale(1)",transition:{ease:"backOut"}}},children:o})}export{x as Dialog,x as default};

package/components/Dialog/Dialog.tsx

@@ -28,7 +28,6 @@ export function Dialog({
   className,
   children,
   animationVariants,
-  onAnimationStart,
   ...props
 }: DialogProps) {
   return (

package/components/Dialog/Dialog.types.d.ts

@@ -1,7 +1,7 @@
 import { Key } from 'react';
 import { DialogProps as UIDialogProps } from 'react-aria-components';
 import { MotionStyle, Variants } from 'framer-motion';
-export type DialogProps = UIDialogProps & {
+export type DialogProps = Omit<UIDialogProps, 'onAnimationStart'> & {
     key?: Key;
     style?: MotionStyle;
     animationVariants?: Variants;

package/components/Dialog/Dialog.types.ts

@@ -2,7 +2,7 @@ import type { Key } from 'react';
 import type { DialogProps as UIDialogProps } from 'react-aria-components';
 import { MotionStyle, Variants } from 'framer-motion';
 
-export type DialogProps = UIDialogProps & {
+export type DialogProps = Omit<UIDialogProps, 'onAnimationStart'> & {
   key?: Key;
   style?: MotionStyle;
   animationVariants?: Variants;

package/components/Drawer/Drawer.d.ts

@@ -1,3 +1,3 @@
 import { DrawerProps } from './Drawer.types';
-export declare function Drawer({ direction, children, className, animationVariants, onAnimationStart, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ direction, children, className, animationVariants, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 export default Drawer;

package/components/Drawer/Drawer.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{forwardRef as n}from"react";import{Dialog as d}from"react-aria-components";import{motion as m}from"framer-motion";import{cn as b}from"../../utils/cn.js";const h={top:{hidden:{y:"-100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},bottom:{hidden:{y:"100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},right:{hidden:{x:"100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}},left:{hidden:{x:"-100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}}},l=n(({style:t,size:r="20rem",...e},a)=>{const o=typeof t=="function"?t(e):{...t,"--drawer-size":`${r}`};return i(d,{...e,ref:a,style:o})}),p=m.create(l);function v({direction:t="right",children:r,className:e,animationVariants:a,onAnimationStart:o,...s}){return i(p,{className:b("fixed p-8 outline-0 bg-white","border-solid border-slate-200","max-w-full max-h-[var(--visual-viewport-height)]",t==="top"&&"top-0 left-0 right-0 bottom-auto border-b shadow-[0_8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="right"&&"top-0 left-auto bottom-0 right-0 border-l shadow-[-8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",t==="bottom"&&"bottom-0 left-0 right-0 top-auto border-t shadow-[0_-8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="left"&&"top-0 bottom-0 left-0 right-auto border-r shadow-[8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",e),"data-direction":t,variants:a||h[t],...s,children:r})}export{v as Drawer,v as default};
+import{jsx as i}from"react/jsx-runtime";import{forwardRef as s}from"react";import{Dialog as n}from"react-aria-components";import{motion as d}from"framer-motion";import{cn as b}from"../../utils/cn.js";const m={top:{hidden:{y:"-100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},bottom:{hidden:{y:"100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},right:{hidden:{x:"100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}},left:{hidden:{x:"-100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}}},h=s(({style:t,size:r="20rem",...e},a)=>{const o=typeof t=="function"?t(e):{...t,"--drawer-size":`${r}`};return i(n,{...e,ref:a,style:o})}),l=d.create(h);function g({direction:t="right",children:r,className:e,animationVariants:a,...o}){return i(l,{className:b("fixed p-8 outline-0 bg-white","border-solid border-slate-200","max-w-full max-h-[var(--visual-viewport-height)]",t==="top"&&"top-0 left-0 right-0 bottom-auto border-b shadow-[0_8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="right"&&"top-0 left-auto bottom-0 right-0 border-l shadow-[-8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",t==="bottom"&&"bottom-0 left-0 right-0 top-auto border-t shadow-[0_-8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="left"&&"top-0 bottom-0 left-0 right-auto border-r shadow-[8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",e),"data-direction":t,variants:a||m[t],...o,children:r})}export{g as Drawer,g as default};

package/components/Drawer/Drawer.tsx

@@ -95,7 +95,6 @@ export function Drawer({
   children,
   className,
   animationVariants,
-  onAnimationStart,
   ...props
 }: DrawerProps) {
   return (

package/components/Drawer/Drawer.types.d.ts

@@ -1,7 +1,7 @@
 import { Key } from 'react';
 import { DialogProps } from 'react-aria-components';
 import { MotionStyle, Variants } from 'framer-motion';
-export type DrawerProps = DialogProps & {
+export type DrawerProps = Omit<DialogProps, 'onAnimationStart'> & {
     direction?: 'top' | 'right' | 'bottom' | 'left';
     key?: Key;
     style?: MotionStyle;

package/components/Drawer/Drawer.types.ts

@@ -2,7 +2,7 @@ import type { Key } from 'react';
 import type { DialogProps } from 'react-aria-components';
 import type { MotionStyle, Variants } from 'framer-motion';
 
-export type DrawerProps = DialogProps & {
+export type DrawerProps = Omit<DialogProps, 'onAnimationStart'> & {
   direction?: 'top' | 'right' | 'bottom' | 'left';
   key?: Key;
   style?: MotionStyle;

package/components/ModalOverlay/ModalOverlay.js

@@ -1 +1 @@
-import{jsx as n}from"react/jsx-runtime";import{forwardRef as u,useId as v}from"react";import{ModalOverlay as h}from"react-aria-components";import{motion as y,AnimatePresence as b}from"framer-motion";import{useDialogTrigger as x}from"../DialogTrigger/DialogTrigger.js";import{cn as M}from"../../utils/cn.js";const O=u(({style:i,...t},e)=>n(h,{...t,ref:e,style:i})),g=y.create(O);function a({animate:i,animation:t,setAnimation:e,className:o,animationVariants:d,onAnimationStart:k,children:l,...m}){const s=v(),{key:c,...f}=m;return n(g,{isExiting:t==="hidden",onAnimationComplete:p=>{e(r=>p==="hidden"&&r==="hidden"?"unmounted":r)},variants:d||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:i,exit:"hidden",className:M("bg-black/30","fixed top-0 left-0","z-50","w-screen h-[var(--visual-viewport-height)]",o),...f,children:l},c||s)}function z(i){const{isOpen:t}=i,{animation:e,setAnimation:o}=x();return t!==void 0?n(b,{children:t&&n(a,{...i,animate:"visible",animation:e,setAnimation:o})}):n(a,{...i,animate:e,animation:e,setAnimation:o})}export{z as ModalOverlay,z as default};
+import{jsx as o}from"react/jsx-runtime";import{forwardRef as p,useId as v}from"react";import{ModalOverlay as y}from"react-aria-components";import{motion as h,AnimatePresence as b}from"framer-motion";import{useDialogTrigger as x}from"../DialogTrigger/DialogTrigger.js";import{cn as M}from"../../utils/cn.js";const O=p(({style:i,...e},t)=>{const n=typeof i=="function"?i(e):i;return o(y,{...e,ref:t,style:n})}),g=h.create(O);function a({animate:i,animation:e,setAnimation:t,className:n,animationVariants:d,children:l,...m}){const s=v(),{key:c,...f}=m;return o(g,{isExiting:e==="hidden",onAnimationComplete:u=>{t(r=>u==="hidden"&&r==="hidden"?"unmounted":r)},variants:d||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:i,exit:"hidden",className:M("bg-black/30","fixed top-0 left-0","z-50","w-screen h-[var(--visual-viewport-height)]",n),...f,children:l},c||s)}function j(i){const{isOpen:e}=i,{animation:t,setAnimation:n}=x();return e!==void 0?o(b,{children:e&&o(a,{...i,animate:"visible",animation:t,setAnimation:n})}):o(a,{...i,animate:t,animation:t,setAnimation:n})}export{j as ModalOverlay,j as default};

package/components/ModalOverlay/ModalOverlay.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef, useId } from 'react';
-import type { CSSProperties, Dispatch, ReactNode, SetStateAction } from 'react';
+import type { Dispatch, ReactNode, Ref, SetStateAction } from 'react';
 import { ModalOverlay as UIModalOverlay } from 'react-aria-components';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useDialogTrigger } from '../DialogTrigger/DialogTrigger';
@@ -10,16 +10,17 @@ import type { DriverAnimationState } from '../DialogTrigger/DialogTrigger.types'
 import { cn } from '../../utils/cn';
 import type { ModalOverlayProps } from './ModalOverlay.types';
 
-const ForwardedModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(
-  ({ style, ...props }, ref) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ForwardedModalOverlay = forwardRef<HTMLElement, any>(
+  ({ style, ...props }, ref: Ref<HTMLElement>) => {
+    // Separate the dynamic style logic
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+    const ariaStyle = typeof style === 'function' ? style(props) : style;
+
     return (
       // Pass only static styles to framer-motion
-      <UIModalOverlay
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-        style={style as CSSProperties}
-      />
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, react/jsx-props-no-spreading
+      <UIModalOverlay {...props} ref={ref} style={ariaStyle} />
     );
   }
 );
@@ -32,7 +33,6 @@ function InnerModalOverlay({
   setAnimation,
   className,
   animationVariants,
-  onAnimationStart,
   children,
   ...props
 }: ModalOverlayProps & {

package/components/ModalOverlay/ModalOverlay.types.d.ts

@@ -1,7 +1,7 @@
 import { Key, ReactNode } from 'react';
 import { ModalOverlayProps as UiModalOverlayProps, ModalRenderProps } from 'react-aria-components';
 import { MotionStyle, Variant } from 'framer-motion';
-export interface ModalOverlayProps extends Omit<UiModalOverlayProps, 'children' | 'style'> {
+export interface ModalOverlayProps extends Omit<UiModalOverlayProps, 'children' | 'style' | 'onAnimationStart'> {
     key?: Key;
     style?: MotionStyle;
     animationVariants?: {

package/components/ModalOverlay/ModalOverlay.types.ts

@@ -6,7 +6,7 @@ import type {
 import type { MotionStyle, Variant } from 'framer-motion';
 
 export interface ModalOverlayProps
-  extends Omit<UiModalOverlayProps, 'children' | 'style'> {
+  extends Omit<UiModalOverlayProps, 'children' | 'style' | 'onAnimationStart'> {
   key?: Key;
   style?: MotionStyle;
   animationVariants?: { visible: Variant; hidden: Variant };

package/components/PinInput/PinInput.js

@@ -1 +1 @@
-import{jsxs as T,jsx as s}from"react/jsx-runtime";import{useState as j,useRef as J,useEffect as z}from"react";import{Group as M,Label as U,TextField as E,Input as K,Text as Z,FieldError as H}from"react-aria-components";import{cn as f}from"../../utils/cn.js";function q({description:D,errorMessage:P,isDisabled:k=!1,isInvalid:A=!1,isMasked:L=!1,isRequired:V=!0,label:$,length:c=6,name:h,onChange:w,value:v="",type:I="numeric",validationBehavior:m="native",className:F,classNames:r,...R}){const[S,W]=j(v),[u,g]=j(Array(c).fill("")),a=J([]);z(()=>{a.current=a.current.slice(0,c)},[c]),z(()=>{const t=u.join("");W(t),w&&w(t)},[w,u]);const B=t=>{var l,o;const e=t.target.value,i=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&i<u.length-1&&((o=(l=a.current)==null?void 0:l[i+1])==null||o.focus());const d=u.map((x,p)=>p===i?e:x);g(d)},C=t=>{var l,o,x,p;const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const i=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],d={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(d[I])&&!i.includes(t.key)&&t.preventDefault(),u[e]===""&&e>0&&t.key==="Backspace"){const b=u.map((n,y)=>y===e-1?"":n);g(b),(o=(l=a.current)==null?void 0:l[e-1])==null||o.focus(),t.preventDefault()}if(u[e]===""&&e<u.length-1&&t.key==="Delete"){const b=u.map((n,y)=>y===e+1?"":n);g(b),(p=(x=a.current)==null?void 0:x[e+1])==null||p.focus(),t.preventDefault()}},G=t=>{var p,b;const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const i=(p=t.clipboardData)==null?void 0:p.getData("text");if(!i)return;const d=i.split("").filter(n=>{switch(I){case"alpha":return/^[a-zA-Z]$/.test(n);case"alphanumeric":return/^[a-z0-9]$/i.test(n);case"numeric":default:return/^[0-9]$/.test(n)}});if(d.length===0)return;const l=[...u];let o=e;for(let n=0;n<d.length&&e+n<c;n++)l[e+n]=d[n],o=e+n;g(l);const x=o+1<c?o+1:c-1;(b=a.current[x])==null||b.focus()};return T(M,{className:f("flex flex-wrap gap-2",F),"aria-label":$,...R,children:[s(U,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.label),children:$}),u.map((t,e)=>s(E,{className:f("flex flex-col w-full flex-1 text-slate-900",r==null?void 0:r.inputWrap),"aria-label":`Pin Input Digit ${e+1}`,isDisabled:k,isInvalid:A,isRequired:V,validationBehavior:m,children:s(K,{className:f("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","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",r==null?void 0:r.input),onChange:B,onKeyDown:C,onPaste:G,type:L?"password":"text",ref:i=>i?a.current[e]=i:null,value:t,maxLength:1,name:h&&`${h}-${e}`,"data-pin-input-index":e})},`pin-input-${e}`)),T(E,{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",r==null?void 0:r.textWrap),"aria-label":"Pin Input",isDisabled:k,isInvalid:A,isRequired:V,validationBehavior:m,children:[h&&s(K,{type:"hidden",name:h,value:S}),D&&s(Z,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.description),slot:"description",children:D}),s(H,{className:f("flex text-red-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.error),children:P})]})]})}export{q as PinInput,q as default};
+import{jsxs as T,jsx as s}from"react/jsx-runtime";import{useState as j,useRef as J,useEffect as z}from"react";import{Group as M,Label as U,TextField as E,Input as K,Text as Z,FieldError as H}from"react-aria-components";import{cn as f}from"../../utils/cn.js";function q({description:D,errorMessage:P,isDisabled:k=!1,isInvalid:A=!1,isMasked:L=!1,isRequired:V=!0,label:$,length:c=6,name:h,onChange:w,value:v="",type:I="numeric",validationBehavior:m="native",className:F,classNames:r,...R}){const[S,W]=j(v),[i,g]=j(Array(c).fill("")),a=J([]);z(()=>{a.current=a.current.slice(0,c)},[c]),z(()=>{const t=i.join("");W(t),w&&w(t)},[w,i]);const B=t=>{var l,o;const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<i.length-1&&((o=(l=a.current)==null?void 0:l[u+1])==null||o.focus());const d=i.map((x,p)=>p===u?e:x);g(d)},C=t=>{var l,o,x,p;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"],d={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(d[I])&&!u.includes(t.key)&&t.preventDefault(),i[e]===""&&e>0&&t.key==="Backspace"){const b=i.map((n,y)=>y===e-1?"":n);g(b),(o=(l=a.current)==null?void 0:l[e-1])==null||o.focus(),t.preventDefault()}if(i[e]===""&&e<i.length-1&&t.key==="Delete"){const b=i.map((n,y)=>y===e+1?"":n);g(b),(p=(x=a.current)==null?void 0:x[e+1])==null||p.focus(),t.preventDefault()}},G=t=>{var p,b;const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=(p=t.clipboardData)==null?void 0:p.getData("text");if(!u)return;const d=u.split("").filter(n=>{switch(I){case"alpha":return/^[a-zA-Z]$/.test(n);case"alphanumeric":return/^[a-z0-9]$/i.test(n);case"numeric":default:return/^[0-9]$/.test(n)}});if(d.length===0)return;const l=[...i];let o=e;for(let n=0;n<d.length&&e+n<c;n++)l[e+n]=d[n],o=e+n;g(l);const x=o+1<c?o+1:c-1;(b=a.current[x])==null||b.focus()};return T(M,{className:f("flex flex-wrap gap-2",F),"aria-label":$,...R,children:[s(U,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.label),children:$}),i.map((t,e)=>s(E,{className:f("flex flex-col w-full flex-1 text-slate-900",r==null?void 0:r.inputWrap),"aria-label":`Pin Input Digit ${e+1}`,isDisabled:k,isInvalid:A,isRequired:V,validationBehavior:m,children:s(K,{className:f("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","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",r==null?void 0:r.input),onChange:B,onKeyDown:C,onPaste:G,type:L?"password":"text",ref:u=>{u&&(a.current[e]=u)},value:t,maxLength:1,name:h&&`${h}-${e}`,"data-pin-input-index":e})},`pin-input-${e}`)),T(E,{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",r==null?void 0:r.textWrap),"aria-label":"Pin Input",isDisabled:k,isInvalid:A,isRequired:V,validationBehavior:m,children:[h&&s(K,{type:"hidden",name:h,value:S}),D&&s(Z,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.description),slot:"description",children:D}),s(H,{className:f("flex text-red-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.error),children:P})]})]})}export{q as PinInput,q as default};

package/components/PinInput/PinInput.tsx

@@ -263,7 +263,11 @@ export function PinInput({
             onPaste={onPaste}
             type={isMasked ? 'password' : 'text'}
             // eslint-disable-next-line no-return-assign
-            ref={(el) => (el ? (inputRefs.current[i] = el) : null)}
+            ref={(el) => {
+              if (el) {
+                inputRefs.current[i] = el;
+              }
+            }}
             value={v}
             maxLength={1}
             name={name && `${name}-${i}`}

package/components/Select/Select.tsx

@@ -269,3 +269,4 @@ interface SelectComponent {
 export const Select = forwardRef(SelectInner) as SelectComponent;
 
 export default Select;
+

package/package.json

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