@bricks-toolkit/toolkit 0.1.0 → 0.1.1

package/dist/modal/index.d.mts

@@ -0,0 +1,116 @@
+import { ReactNode } from 'react';
+
+type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
+/**
+ * Visual style variant of the modal
+ * - `default`: Standard surface background with border
+ * - `glass`: Glassmorphism effect with blur and translucency
+ * - `flat`: No border, flat surface
+ */
+type ModalVariant = 'default' | 'glass' | 'flat';
+/**
+ * Position/entry direction of the modal
+ * - `top`: Modal appears near the top
+ * - `center`: Modal is vertically centered (default dialog)
+ * - `bottom`: Slides up from the bottom (bottom sheet)
+ * - `left`: Slides in from the left (left drawer)
+ * - `right`: Slides in from the right (right drawer)
+ */
+type ModalPosition = 'top' | 'center' | 'bottom' | 'left' | 'right';
+interface ModalProps {
+    /** Controls whether the modal is visible */
+    isOpen: boolean;
+    /** Called when the modal should close */
+    onClose: () => void;
+    /** Content rendered inside the modal */
+    children?: ReactNode;
+    /**
+     * Size of the modal
+     * @default 'md'
+     */
+    size?: ModalSize;
+    /**
+     * Visual variant of the modal
+     * @default 'default'
+     */
+    variant?: ModalVariant;
+    /**
+     * Vertical position of modal on screen
+     * @default 'center'
+     */
+    position?: ModalPosition;
+    /**
+     * Close modal when clicking the overlay
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Close modal when pressing the Escape key
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Trap focus inside the modal for accessibility
+     * @default true
+     */
+    trapFocus?: boolean;
+    /**
+     * Lock body scroll when modal is open
+     * @default true
+     */
+    lockScroll?: boolean;
+    /** Extra class(es) applied to the modal content panel */
+    contentClassName?: string;
+    /** Extra class(es) applied to the backdrop overlay */
+    overlayClassName?: string;
+    /**
+     * Show the dark backdrop overlay
+     * @default true
+     */
+    showBackdrop?: boolean;
+    /** aria-label for the dialog (use when no visible title exists) */
+    ariaLabel?: string;
+    /** ID of the element that labels the dialog */
+    ariaLabelledby?: string;
+    /** ID of the element that describes the dialog */
+    ariaDescribedby?: string;
+}
+interface ModalHeaderProps {
+    children: ReactNode;
+    className?: string;
+    /** Optional decorative icon rendered before the title */
+    icon?: ReactNode;
+    /** Optional description shown below the title */
+    description?: string;
+}
+interface ModalBodyProps {
+    children: ReactNode;
+    className?: string;
+    /** Remove default padding (useful for full-bleed content) */
+    noPadding?: boolean;
+}
+interface ModalFooterProps {
+    children: ReactNode;
+    className?: string;
+    /** Left-align the footer actions instead of right-aligning */
+    align?: 'left' | 'center' | 'right';
+}
+interface ModalCloseButtonProps {
+    onClick?: () => void;
+    className?: string;
+}
+
+interface ModalComponent {
+    (props: ModalProps): React.ReactPortal | null;
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+    CloseButton: typeof ModalCloseButton;
+}
+declare const Modal: ModalComponent;
+declare function ModalHeader({ children, className, icon, description, }: ModalHeaderProps): React.JSX.Element;
+declare function ModalBody({ children, className, noPadding, }: ModalBodyProps): React.JSX.Element;
+declare function ModalFooter({ children, className, align, }: ModalFooterProps): React.JSX.Element;
+declare function ModalCloseButton({ onClick, className }: ModalCloseButtonProps): React.JSX.Element;
+
+export { Modal, ModalBody, type ModalBodyProps, ModalCloseButton, type ModalCloseButtonProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalPosition, type ModalProps, type ModalSize, type ModalVariant };

package/dist/modal/index.d.ts

@@ -0,0 +1,116 @@
+import { ReactNode } from 'react';
+
+type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
+/**
+ * Visual style variant of the modal
+ * - `default`: Standard surface background with border
+ * - `glass`: Glassmorphism effect with blur and translucency
+ * - `flat`: No border, flat surface
+ */
+type ModalVariant = 'default' | 'glass' | 'flat';
+/**
+ * Position/entry direction of the modal
+ * - `top`: Modal appears near the top
+ * - `center`: Modal is vertically centered (default dialog)
+ * - `bottom`: Slides up from the bottom (bottom sheet)
+ * - `left`: Slides in from the left (left drawer)
+ * - `right`: Slides in from the right (right drawer)
+ */
+type ModalPosition = 'top' | 'center' | 'bottom' | 'left' | 'right';
+interface ModalProps {
+    /** Controls whether the modal is visible */
+    isOpen: boolean;
+    /** Called when the modal should close */
+    onClose: () => void;
+    /** Content rendered inside the modal */
+    children?: ReactNode;
+    /**
+     * Size of the modal
+     * @default 'md'
+     */
+    size?: ModalSize;
+    /**
+     * Visual variant of the modal
+     * @default 'default'
+     */
+    variant?: ModalVariant;
+    /**
+     * Vertical position of modal on screen
+     * @default 'center'
+     */
+    position?: ModalPosition;
+    /**
+     * Close modal when clicking the overlay
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Close modal when pressing the Escape key
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Trap focus inside the modal for accessibility
+     * @default true
+     */
+    trapFocus?: boolean;
+    /**
+     * Lock body scroll when modal is open
+     * @default true
+     */
+    lockScroll?: boolean;
+    /** Extra class(es) applied to the modal content panel */
+    contentClassName?: string;
+    /** Extra class(es) applied to the backdrop overlay */
+    overlayClassName?: string;
+    /**
+     * Show the dark backdrop overlay
+     * @default true
+     */
+    showBackdrop?: boolean;
+    /** aria-label for the dialog (use when no visible title exists) */
+    ariaLabel?: string;
+    /** ID of the element that labels the dialog */
+    ariaLabelledby?: string;
+    /** ID of the element that describes the dialog */
+    ariaDescribedby?: string;
+}
+interface ModalHeaderProps {
+    children: ReactNode;
+    className?: string;
+    /** Optional decorative icon rendered before the title */
+    icon?: ReactNode;
+    /** Optional description shown below the title */
+    description?: string;
+}
+interface ModalBodyProps {
+    children: ReactNode;
+    className?: string;
+    /** Remove default padding (useful for full-bleed content) */
+    noPadding?: boolean;
+}
+interface ModalFooterProps {
+    children: ReactNode;
+    className?: string;
+    /** Left-align the footer actions instead of right-aligning */
+    align?: 'left' | 'center' | 'right';
+}
+interface ModalCloseButtonProps {
+    onClick?: () => void;
+    className?: string;
+}
+
+interface ModalComponent {
+    (props: ModalProps): React.ReactPortal | null;
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+    CloseButton: typeof ModalCloseButton;
+}
+declare const Modal: ModalComponent;
+declare function ModalHeader({ children, className, icon, description, }: ModalHeaderProps): React.JSX.Element;
+declare function ModalBody({ children, className, noPadding, }: ModalBodyProps): React.JSX.Element;
+declare function ModalFooter({ children, className, align, }: ModalFooterProps): React.JSX.Element;
+declare function ModalCloseButton({ onClick, className }: ModalCloseButtonProps): React.JSX.Element;
+
+export { Modal, ModalBody, type ModalBodyProps, ModalCloseButton, type ModalCloseButtonProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalPosition, type ModalProps, type ModalSize, type ModalVariant };

package/dist/modal/index.mjs

@@ -0,0 +1 @@
+import {useRef,useCallback,useEffect}from'react';import {createPortal}from'react-dom';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {XMarkIcon}from'@heroicons/react/24/outline';import {jsx,jsxs}from'react/jsx-runtime';function a(...t){return twMerge(clsx(t))}var V={xs:"max-w-xs",sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl","3xl":"max-w-3xl","4xl":"max-w-4xl","5xl":"max-w-5xl","6xl":"max-w-6xl","7xl":"max-w-7xl",full:"max-w-full w-full h-full m-0 rounded-none"},A={xs:"w-64",sm:"w-80",md:"w-96",lg:"w-[30rem]",xl:"w-[36rem]","2xl":"w-[42rem]","3xl":"w-[48rem]","4xl":"w-[56rem]","5xl":"w-[64rem]","6xl":"w-[72rem]","7xl":"w-[80rem]",full:"w-full"},K={default:"bg-surface border border-border shadow-[0_20px_60px_-10px_rgba(0,0,0,0.2),0_8px_20px_-8px_rgba(0,0,0,0.1)]",glass:"bg-white/10 dark:bg-black/20 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-[0_25px_50px_-12px_rgba(0,0,0,0.4)]",flat:"bg-surface shadow-[0_4px_24px_rgba(0,0,0,0.08)]"},q={top:"items-start pt-16",center:"items-center",bottom:"items-end pb-0",left:"items-stretch justify-start p-0",right:"items-stretch justify-end p-0"},I={top:"",center:"",bottom:"rounded-b-none w-full max-w-full",left:"rounded-l-none rounded-r-2xl h-full max-h-full my-0",right:"rounded-r-none rounded-l-2xl h-full max-h-full my-0"},f=function({isOpen:e,onClose:o,children:i,size:x="md",variant:P="default",position:n="center",closeOnOverlayClick:R=true,closeOnEsc:g=true,trapFocus:w=true,lockScroll:b=true,contentClassName:k,overlayClassName:B,showBackdrop:S=true,ariaLabel:H,ariaLabelledby:N,ariaDescribedby:z}){let u=useRef(null),h=useRef(null),p=useCallback(()=>{o();},[o]);if(useEffect(()=>{if(e){h.current=document.activeElement,b&&(document.body.style.overflow="hidden");let s=l=>{if(g&&l.key==="Escape"){p();return}if(w&&l.key==="Tab"){let d=u.current?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(!d||d.length===0)return;let _=d[0],C=d[d.length-1];l.shiftKey?document.activeElement===_&&(C.focus(),l.preventDefault()):document.activeElement===C&&(_.focus(),l.preventDefault());}};return document.addEventListener("keydown",s),setTimeout(()=>{let l=u.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');l!=null?l.focus():u.current?.focus();},50),()=>{document.removeEventListener("keydown",s),b&&(document.body.style.overflow=""),h.current?.focus();}}},[e,g,p,b,w]),!e)return null;let y=n==="bottom",M=n==="left",v=n==="right",m=M||v,c="animate-[modal-zoom-in_200ms_cubic-bezier(0.34,1.56,0.64,1)_forwards]";y&&(c="animate-[modal-slide-up_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]"),M&&(c="animate-[modal-slide-right_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]"),v&&(c="animate-[modal-slide-left_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]");let L=m?A[x]:V[x];return createPortal(jsx("div",{role:"presentation",className:a("fixed inset-0 z-[1050] flex justify-center",!m&&"overflow-y-auto p-4",S&&"bg-black/50 backdrop-blur-[3px]","animate-[modal-overlay-in_200ms_ease-out_forwards]",q[n],B),onClick:s=>{R&&s.target===s.currentTarget&&p();},children:jsx("div",{ref:u,role:"dialog",tabIndex:-1,"aria-modal":"true","aria-label":H,"aria-labelledby":N,"aria-describedby":z,className:a("relative flex flex-col",!m&&!y&&x!=="full"&&"w-full mx-auto max-h-[90vh] my-4 rounded-2xl",y&&"rounded-2xl",m&&"mx-0",c,K[P],L,I[n],k),children:i})}),document.body)};function W({children:t,className:e,icon:o,description:i}){return jsxs("div",{className:a("relative px-6 py-5 border-b border-border/60 flex-shrink-0",e),children:[o&&jsx("div",{className:"mb-3 w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary",children:o}),jsx("h2",{className:"text-lg font-semibold text-text leading-tight tracking-tight",children:t}),i&&jsx("p",{className:"mt-1 text-sm text-text-muted leading-relaxed",children:i})]})}function G({children:t,className:e,noPadding:o=false}){return jsx("div",{className:a("flex-1 overflow-y-auto text-text-secondary text-sm leading-relaxed",!o&&"px-6 py-5",e),children:t})}var Q={left:"justify-start",center:"justify-center",right:"justify-end"};function U({children:t,className:e,align:o="right"}){return jsx("div",{className:a("flex-shrink-0 px-6 py-4 border-t border-border/60 bg-surface-secondary/30 flex flex-wrap items-center gap-3 rounded-b-2xl",Q[o],e),children:t})}function Y({onClick:t,className:e}){return jsx("button",{type:"button",onClick:t,className:a("absolute top-4 right-4 z-10","w-8 h-8 flex items-center justify-center rounded-lg","text-text-muted hover:text-text","bg-transparent hover:bg-hover","transition-all duration-150","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",e),"aria-label":"Close modal",children:jsx(XMarkIcon,{className:"w-4 h-4",strokeWidth:2})})}f.Header=W;f.Body=G;f.Footer=U;f.CloseButton=Y;export{f as Modal,G as ModalBody,Y as ModalCloseButton,U as ModalFooter,W as ModalHeader};

package/dist/multi-select/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var react=require('react'),solid=require('@heroicons/react/20/solid'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function s(...n){return tailwindMerge.twMerge(clsx.clsx(n))}var ne={xs:"py-1 px-2 text-xs min-h-[1.75rem]",sm:"py-1.5 px-3 text-sm min-h-[2.125rem]",md:"py-2 px-3 text-sm min-h-[2.5rem]",lg:"py-2.5 px-4 text-base min-h-[3rem]",xl:"py-3 px-4 text-lg min-h-[3.5rem]"},z={xs:"text-xs",sm:"text-xs",md:"text-sm",lg:"text-sm",xl:"text-base"},le={default:"rounded-md border border-border bg-surface shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-0 transition-all duration-normal",filled:"rounded-md border border-transparent bg-surface-secondary focus-visible:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-0 transition-all duration-normal",flushed:"rounded-none border-0 border-b border-border bg-transparent focus-visible:outline-none focus-visible:ring-0",unstyled:"border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-0"},oe={default:{default:"border-border focus-visible:border-primary focus-visible:ring-primary/40",filled:"focus-visible:border-primary focus-visible:ring-primary/40",flushed:"border-border focus-visible:border-primary",unstyled:""},error:{default:"border-error focus-visible:border-error focus-visible:ring-error/20",filled:"bg-error/5 focus-visible:border-error focus-visible:ring-error/20",flushed:"border-error focus-visible:border-error",unstyled:""},success:{default:"border-success focus-visible:border-success focus-visible:ring-success/20",filled:"bg-success/5 focus-visible:border-success focus-visible:ring-success/20",flushed:"border-success focus-visible:border-success",unstyled:""},warning:{default:"border-warning focus-visible:border-warning focus-visible:ring-warning/20",filled:"bg-warning/5 focus-visible:border-warning focus-visible:ring-warning/20",flushed:"border-warning focus-visible:border-warning",unstyled:""}},ae={default:"text-text-muted",error:"text-error font-medium",success:"text-success font-medium",warning:"text-warning font-medium"},ce="disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";function de(n,l,a,m){if(n==="error"&&l)return l;if(n==="success"&&a)return a;if(n==="warning"&&m)return m}var L=react.forwardRef(function({options:l,value:a,defaultValue:m=[],onChange:B,placeholder:O="Select options...",label:w,required:H=false,helperText:b,errorMessage:j,successMessage:D,warningMessage:P,variant:h="default",size:g="md",state:c="default",fullWidth:T=true,disabled:x=false,isLoading:v=false,id:$,wrapperClassName:A,triggerClassName:F,dropdownClassName:K,labelClassName:W,helperClassName:S},q){let G=react.useId(),d=$??G,M=`${d}-helper`,N=`${d}-state`,C=`${d}-listbox`,[i,R]=react.useState(false),[J,Q]=react.useState(m),k=a!==void 0,u=k?a:J,y=react.useRef(null),U=()=>{x||v||R(e=>!e);},E=e=>{let r;u.includes(e)?r=u.filter(f=>f!==e):r=[...u,e],k||Q(r),B?.(r);};react.useEffect(()=>{let e=r=>{y.current&&!y.current.contains(r.target)&&R(false);};return i&&(document.addEventListener("mousedown",e),document.addEventListener("touchstart",e)),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e);}},[i]);let p=de(c,j,D,P),X=[b?M:null,p?N:null].filter(Boolean).join(" ")||void 0,I=l.filter(e=>u.includes(e.value)).map(e=>e.label);return jsxRuntime.jsxs("div",{ref:y,className:s("relative flex flex-col gap-1",T?"w-full":"w-fit",i&&"z-[60]",A),children:[w!==void 0&&jsxRuntime.jsxs("label",{htmlFor:d,className:s("font-black leading-none text-text uppercase tracking-widest",z[g],x&&"opacity-50 cursor-not-allowed",W),children:[w,H&&jsxRuntime.jsx("span",{"aria-hidden":"true",className:"ml-1 text-error",children:"*"})]}),jsxRuntime.jsxs("button",{ref:q,id:d,type:"button",disabled:x||v,"aria-haspopup":"listbox","aria-expanded":i,"aria-controls":i?C:void 0,"aria-invalid":c==="error"?true:void 0,"aria-describedby":X,onClick:U,className:s("w-full flex items-center justify-between text-left transition-colors duration-150",ne[g],le[h],oe[c][h],ce,F),children:[jsxRuntime.jsx("div",{className:"flex flex-wrap gap-1 truncate",children:I.length>0?jsxRuntime.jsx("span",{className:"truncate text-text font-bold leading-tight",children:I.join(", ")}):jsxRuntime.jsx("span",{className:"text-text-muted truncate transition-all duration-normal",children:O})}),jsxRuntime.jsx("div",{className:"shrink-0 ml-2 text-text-muted",children:v?jsxRuntime.jsxs("svg",{className:"animate-spin h-4 w-4 text-text-muted",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsxRuntime.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}):jsxRuntime.jsx(solid.ChevronDownIcon,{className:s("w-4 h-4 transition-transform duration-200",i&&"rotate-180")})})]}),i&&jsxRuntime.jsx("div",{className:s("absolute z-dropdown w-full mt-1 bg-surface border border-border rounded-md shadow-lg","max-h-60 overflow-y-auto py-1 animate-in fade-in zoom-in-95 duration-200","top-full left-0",K),children:jsxRuntime.jsx("ul",{id:C,role:"listbox","aria-multiselectable":"true",className:"flex flex-col outline-none",tabIndex:-1,children:l.length===0?jsxRuntime.jsx("li",{className:"px-3 py-2 text-sm text-gray-500 text-center",children:"No options available"}):l.map(e=>{let r=u.includes(e.value);return jsxRuntime.jsxs("li",{role:"option","aria-selected":r,onClick:()=>{E(e.value);},onKeyDown:f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),E(e.value));},tabIndex:0,className:s("flex items-center gap-2 px-3 py-2 cursor-pointer transition-all duration-fast","hover:bg-hover"+(r?"/60":""),r?"text-primary font-bold":"text-text",z[g]),children:[jsxRuntime.jsx("div",{className:s("flex shrink-0 items-center justify-center w-4 h-4 border rounded-sm transition-all duration-normal",r?"bg-primary border-primary":"border-border"),children:r&&jsxRuntime.jsx(solid.CheckIcon,{className:"w-3 h-3 text-text-inverse"})}),jsxRuntime.jsx("span",{className:"truncate",children:e.label})]},e.value)})})}),(b!==void 0||p!==void 0)&&jsxRuntime.jsxs("div",{className:"mt-1",children:[b!==void 0&&jsxRuntime.jsx("p",{id:M,className:s("text-xs leading-tight text-text-muted font-medium",S),children:b}),p!==void 0&&jsxRuntime.jsx("p",{id:N,role:c==="error"?"alert":void 0,className:s("text-xs leading-tight mt-1 font-medium",ae[c],S),children:p})]})]})});L.displayName="MultiSelect";
+exports.MultiSelect=L;

package/dist/multi-select/index.d.mts

@@ -0,0 +1,59 @@
+type MultiSelectVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type MultiSelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type MultiSelectState = 'default' | 'error' | 'success' | 'warning';
+interface MultiSelectOption {
+    label: string;
+    value: string;
+}
+interface MultiSelectProps {
+    /** Array of available options */
+    options: MultiSelectOption[];
+    /** Array of currently selected values */
+    value?: string[];
+    /** Array of initially selected values (for uncontrolled usage) */
+    defaultValue?: string[];
+    /** Callback fired when selection changes */
+    onChange?: (values: string[]) => void;
+    /** Placeholder text when nothing is selected */
+    placeholder?: string;
+    /** Text label rendered above the input */
+    label?: string;
+    /** Adds a required asterisk */
+    required?: boolean;
+    /** Helper text rendered below the input */
+    helperText?: string;
+    /** Error message rendered below the input when state is 'error' */
+    errorMessage?: string;
+    /** Success message rendered below the input when state is 'success' */
+    successMessage?: string;
+    /** Warning message rendered below the input when state is 'warning' */
+    warningMessage?: string;
+    /** Visual variant of the input trigger */
+    variant?: MultiSelectVariant;
+    /** Overall size scale of the component */
+    size?: MultiSelectSize;
+    /** Validation state affecting border colors */
+    state?: MultiSelectState;
+    /** Whether the component should take full width of its container */
+    fullWidth?: boolean;
+    /** Disables interactions */
+    disabled?: boolean;
+    /** Shows a loading state (e.g., fetching options) */
+    isLoading?: boolean;
+    /** Custom ID for the component elements */
+    id?: string;
+    /** Appended to the outermost wrapper */
+    wrapperClassName?: string;
+    /** Appended to the trigger button */
+    triggerClassName?: string;
+    /** Appended to the dropdown menu container */
+    dropdownClassName?: string;
+    /** Appended to the label element */
+    labelClassName?: string;
+    /** Appended to the helper text element */
+    helperClassName?: string;
+}
+
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { MultiSelect, type MultiSelectProps, type MultiSelectSize, type MultiSelectState, type MultiSelectVariant };

package/dist/multi-select/index.d.ts

@@ -0,0 +1,59 @@
+type MultiSelectVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type MultiSelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type MultiSelectState = 'default' | 'error' | 'success' | 'warning';
+interface MultiSelectOption {
+    label: string;
+    value: string;
+}
+interface MultiSelectProps {
+    /** Array of available options */
+    options: MultiSelectOption[];
+    /** Array of currently selected values */
+    value?: string[];
+    /** Array of initially selected values (for uncontrolled usage) */
+    defaultValue?: string[];
+    /** Callback fired when selection changes */
+    onChange?: (values: string[]) => void;
+    /** Placeholder text when nothing is selected */
+    placeholder?: string;
+    /** Text label rendered above the input */
+    label?: string;
+    /** Adds a required asterisk */
+    required?: boolean;
+    /** Helper text rendered below the input */
+    helperText?: string;
+    /** Error message rendered below the input when state is 'error' */
+    errorMessage?: string;
+    /** Success message rendered below the input when state is 'success' */
+    successMessage?: string;
+    /** Warning message rendered below the input when state is 'warning' */
+    warningMessage?: string;
+    /** Visual variant of the input trigger */
+    variant?: MultiSelectVariant;
+    /** Overall size scale of the component */
+    size?: MultiSelectSize;
+    /** Validation state affecting border colors */
+    state?: MultiSelectState;
+    /** Whether the component should take full width of its container */
+    fullWidth?: boolean;
+    /** Disables interactions */
+    disabled?: boolean;
+    /** Shows a loading state (e.g., fetching options) */
+    isLoading?: boolean;
+    /** Custom ID for the component elements */
+    id?: string;
+    /** Appended to the outermost wrapper */
+    wrapperClassName?: string;
+    /** Appended to the trigger button */
+    triggerClassName?: string;
+    /** Appended to the dropdown menu container */
+    dropdownClassName?: string;
+    /** Appended to the label element */
+    labelClassName?: string;
+    /** Appended to the helper text element */
+    helperClassName?: string;
+}
+
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { MultiSelect, type MultiSelectProps, type MultiSelectSize, type MultiSelectState, type MultiSelectVariant };

package/dist/multi-select/index.mjs

@@ -0,0 +1,2 @@
+import {forwardRef,useId,useState,useRef,useEffect}from'react';import {ChevronDownIcon,CheckIcon}from'@heroicons/react/20/solid';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function s(...n){return twMerge(clsx(n))}var ne={xs:"py-1 px-2 text-xs min-h-[1.75rem]",sm:"py-1.5 px-3 text-sm min-h-[2.125rem]",md:"py-2 px-3 text-sm min-h-[2.5rem]",lg:"py-2.5 px-4 text-base min-h-[3rem]",xl:"py-3 px-4 text-lg min-h-[3.5rem]"},z={xs:"text-xs",sm:"text-xs",md:"text-sm",lg:"text-sm",xl:"text-base"},le={default:"rounded-md border border-border bg-surface shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-0 transition-all duration-normal",filled:"rounded-md border border-transparent bg-surface-secondary focus-visible:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-0 transition-all duration-normal",flushed:"rounded-none border-0 border-b border-border bg-transparent focus-visible:outline-none focus-visible:ring-0",unstyled:"border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-0"},oe={default:{default:"border-border focus-visible:border-primary focus-visible:ring-primary/40",filled:"focus-visible:border-primary focus-visible:ring-primary/40",flushed:"border-border focus-visible:border-primary",unstyled:""},error:{default:"border-error focus-visible:border-error focus-visible:ring-error/20",filled:"bg-error/5 focus-visible:border-error focus-visible:ring-error/20",flushed:"border-error focus-visible:border-error",unstyled:""},success:{default:"border-success focus-visible:border-success focus-visible:ring-success/20",filled:"bg-success/5 focus-visible:border-success focus-visible:ring-success/20",flushed:"border-success focus-visible:border-success",unstyled:""},warning:{default:"border-warning focus-visible:border-warning focus-visible:ring-warning/20",filled:"bg-warning/5 focus-visible:border-warning focus-visible:ring-warning/20",flushed:"border-warning focus-visible:border-warning",unstyled:""}},ae={default:"text-text-muted",error:"text-error font-medium",success:"text-success font-medium",warning:"text-warning font-medium"},ce="disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";function de(n,l,a,m){if(n==="error"&&l)return l;if(n==="success"&&a)return a;if(n==="warning"&&m)return m}var L=forwardRef(function({options:l,value:a,defaultValue:m=[],onChange:B,placeholder:O="Select options...",label:w,required:H=false,helperText:b,errorMessage:j,successMessage:D,warningMessage:P,variant:h="default",size:g="md",state:c="default",fullWidth:T=true,disabled:x=false,isLoading:v=false,id:$,wrapperClassName:A,triggerClassName:F,dropdownClassName:K,labelClassName:W,helperClassName:S},q){let G=useId(),d=$??G,M=`${d}-helper`,N=`${d}-state`,C=`${d}-listbox`,[i,R]=useState(false),[J,Q]=useState(m),k=a!==void 0,u=k?a:J,y=useRef(null),U=()=>{x||v||R(e=>!e);},E=e=>{let r;u.includes(e)?r=u.filter(f=>f!==e):r=[...u,e],k||Q(r),B?.(r);};useEffect(()=>{let e=r=>{y.current&&!y.current.contains(r.target)&&R(false);};return i&&(document.addEventListener("mousedown",e),document.addEventListener("touchstart",e)),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e);}},[i]);let p=de(c,j,D,P),X=[b?M:null,p?N:null].filter(Boolean).join(" ")||void 0,I=l.filter(e=>u.includes(e.value)).map(e=>e.label);return jsxs("div",{ref:y,className:s("relative flex flex-col gap-1",T?"w-full":"w-fit",i&&"z-[60]",A),children:[w!==void 0&&jsxs("label",{htmlFor:d,className:s("font-black leading-none text-text uppercase tracking-widest",z[g],x&&"opacity-50 cursor-not-allowed",W),children:[w,H&&jsx("span",{"aria-hidden":"true",className:"ml-1 text-error",children:"*"})]}),jsxs("button",{ref:q,id:d,type:"button",disabled:x||v,"aria-haspopup":"listbox","aria-expanded":i,"aria-controls":i?C:void 0,"aria-invalid":c==="error"?true:void 0,"aria-describedby":X,onClick:U,className:s("w-full flex items-center justify-between text-left transition-colors duration-150",ne[g],le[h],oe[c][h],ce,F),children:[jsx("div",{className:"flex flex-wrap gap-1 truncate",children:I.length>0?jsx("span",{className:"truncate text-text font-bold leading-tight",children:I.join(", ")}):jsx("span",{className:"text-text-muted truncate transition-all duration-normal",children:O})}),jsx("div",{className:"shrink-0 ml-2 text-text-muted",children:v?jsxs("svg",{className:"animate-spin h-4 w-4 text-text-muted",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}):jsx(ChevronDownIcon,{className:s("w-4 h-4 transition-transform duration-200",i&&"rotate-180")})})]}),i&&jsx("div",{className:s("absolute z-dropdown w-full mt-1 bg-surface border border-border rounded-md shadow-lg","max-h-60 overflow-y-auto py-1 animate-in fade-in zoom-in-95 duration-200","top-full left-0",K),children:jsx("ul",{id:C,role:"listbox","aria-multiselectable":"true",className:"flex flex-col outline-none",tabIndex:-1,children:l.length===0?jsx("li",{className:"px-3 py-2 text-sm text-gray-500 text-center",children:"No options available"}):l.map(e=>{let r=u.includes(e.value);return jsxs("li",{role:"option","aria-selected":r,onClick:()=>{E(e.value);},onKeyDown:f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),E(e.value));},tabIndex:0,className:s("flex items-center gap-2 px-3 py-2 cursor-pointer transition-all duration-fast","hover:bg-hover"+(r?"/60":""),r?"text-primary font-bold":"text-text",z[g]),children:[jsx("div",{className:s("flex shrink-0 items-center justify-center w-4 h-4 border rounded-sm transition-all duration-normal",r?"bg-primary border-primary":"border-border"),children:r&&jsx(CheckIcon,{className:"w-3 h-3 text-text-inverse"})}),jsx("span",{className:"truncate",children:e.label})]},e.value)})})}),(b!==void 0||p!==void 0)&&jsxs("div",{className:"mt-1",children:[b!==void 0&&jsx("p",{id:M,className:s("text-xs leading-tight text-text-muted font-medium",S),children:b}),p!==void 0&&jsx("p",{id:N,role:c==="error"?"alert":void 0,className:s("text-xs leading-tight mt-1 font-medium",ae[c],S),children:p})]})]})});L.displayName="MultiSelect";
+export{L as MultiSelect};

package/dist/otp-input/index.cjs

@@ -0,0 +1 @@
+'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),outline=require('@heroicons/react/24/outline'),jsxRuntime=require('react/jsx-runtime');function a(...i){return tailwindMerge.twMerge(clsx.clsx(i))}var se={xs:"w-8 h-8 text-sm",sm:"w-10 h-10 text-base",md:"w-12 h-12 text-lg",lg:"w-14 h-14 text-xl",xl:"w-16 h-16 text-2xl"},ne={xs:"text-xs",sm:"text-xs",md:"text-sm",lg:"text-sm",xl:"text-base"},oe={default:"rounded-md border border-border bg-surface shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",filled:"rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",flushed:"rounded-none border-0 border-b border-border bg-transparent focus:outline-none focus:ring-0",unstyled:"border-0 bg-transparent p-0 focus:outline-none focus:ring-0"},ae={default:{default:"border-border focus:border-primary focus:ring-primary/40",filled:"focus:border-primary focus:ring-primary/40",flushed:"border-border focus:border-primary",unstyled:""},error:{default:"border-error focus:border-error focus:ring-error/20",filled:"bg-error/5 focus:border-error focus:ring-error/20",flushed:"border-error focus:border-error",unstyled:""},success:{default:"border-success focus:border-success focus:ring-success/20",filled:"bg-success/5 focus:border-success focus:ring-success/20",flushed:"border-success focus:border-success",unstyled:""},warning:{default:"border-warning focus:border-warning focus:ring-warning/20",filled:"bg-warning/5 focus:border-warning focus:ring-warning/20",flushed:"border-warning focus:border-warning",unstyled:""}},ie={default:"text-text-muted",error:"text-error font-medium",success:"text-success font-medium",warning:"text-warning font-medium"},ue="disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";function ce(i,s,f,d){if(i==="error"&&s)return s;if(i==="success"&&f)return f;if(i==="warning"&&d)return d}var fe=react.forwardRef(function({length:s=4,value:f="",onChange:d,onComplete:I,label:h,required:A=false,helperText:O,errorMessage:M,successMessage:N,warningMessage:$,variant:v="default",size:R="md",state:l="default",className:k,wrapperClassName:L,inputGroupClassName:z,inputClassName:H,labelClassName:P,helperClassName:C,id:T,disabled:K=false,isLoading:D=false,mask:F=false,alphanumeric:g=false},B){let Z=react.useId(),u=T??Z,E=`${u}-helper`,S=`${u}-state`,[p,b]=react.useState(Array.from({length:s},()=>"")),y=react.useRef([]);react.useEffect(()=>{let t=f.split("").slice(0,s),e=Array.from({length:s},()=>"");for(let r=0;r<t.length;r++)e[r]=t[r]??"";requestAnimationFrame(()=>{b(r=>e.some((o,Q)=>o!==r[Q])?e:r);});},[f,s]);let w=t=>{let e=t.join("");d&&d(e),I&&e.length===s&&!t.includes("")&&I(e);},m=t=>{t>=0&&t<s&&(y.current[t]?.focus(),setTimeout(()=>{y.current[t]?.setSelectionRange(1,1);},0));},j=(t,e)=>{let r=t.target.value;if(r.length>1&&(r=r.slice(-1)),!g&&r&&!/^\d+$/.test(r)||g&&r&&!/^[a-zA-Z0-9]+$/.test(r))return;let n=[...p];n[e]=r,b(n),w(n),r&&e<s-1&&m(e+1);},q=(t,e)=>{if(t.key==="Backspace"){if(!p[e]&&e>0){t.preventDefault();let r=[...p];r[e-1]="",b(r),w(r),m(e-1);}}else t.key==="ArrowLeft"&&e>0?(t.preventDefault(),m(e-1)):t.key==="ArrowRight"&&e<s-1&&(t.preventDefault(),m(e+1));},G=t=>{t.preventDefault();let e=t.clipboardData.getData("text/plain").trim();if(g?e=e.replace(/[^a-zA-Z0-9]/g,""):e=e.replace(/[^\d]/g,""),!e)return;let r=[...p],n=-1;for(let o=0;o<s;o++)o<e.length&&(r[o]=e[o]??"",n=o);b(r),w(r),n>-1&&m(Math.min(n+1,s-1));},V=ce(l,M,N,$),J=K||D;return jsxRuntime.jsxs("div",{ref:B,id:u,className:a("flex flex-col gap-2 w-fit",L,k),children:[h!==void 0&&jsxRuntime.jsxs("label",{htmlFor:`${u}-0`,className:a("font-black leading-none text-text uppercase tracking-widest",ne[R],P),children:[h,A&&jsxRuntime.jsx("span",{"aria-hidden":"true",className:"ml-1 text-error",children:"*"})]}),jsxRuntime.jsxs("div",{className:a("flex items-center gap-2",z),children:[p.map((t,e)=>jsxRuntime.jsx("input",{id:`${u}-${String(e)}`,ref:r=>{y.current[e]=r;},type:F?"password":"text",inputMode:g?"text":"numeric",autoComplete:"one-time-code",maxLength:1,disabled:J,value:t,onChange:r=>{j(r,e);},onKeyDown:r=>{q(r,e);},onPaste:G,"aria-invalid":l==="error"?true:void 0,"aria-describedby":[E,S].filter(Boolean).join(" ")||void 0,className:a("text-center transition-colors duration-150",se[R],oe[v],ae[l][v],ue,H)},`${u}-${String(e)}`)),D&&jsxRuntime.jsx("div",{className:"ml-2",children:jsxRuntime.jsx(outline.ArrowPathIcon,{className:"animate-spin h-5 w-5 text-gray-400"})})]}),O!==void 0&&jsxRuntime.jsx("p",{id:E,className:a("text-xs leading-tight text-text-muted font-medium",C),children:O}),V!==void 0&&jsxRuntime.jsx("p",{id:S,role:l==="error"?"alert":void 0,className:a("text-xs leading-tight font-medium",ie[l],C),children:V})]})});fe.displayName="OtpInput";exports.OtpInput=fe;

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

@@ -0,0 +1,57 @@
+type OtpVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type OtpSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type OtpState = 'default' | 'error' | 'success' | 'warning';
+interface OtpInputProps {
+    /** The total number of input boxes (defaults to 4 or 6 depending on your preference, normally 4 or 6. We default to 4). */
+    length?: number;
+    /** The current value of the OTP input. */
+    value?: string;
+    /** Fired when the value changes. */
+    onChange?: (value: string) => void;
+    /** Fired when all the input boxes are filled. */
+    onComplete?: (value: string) => void;
+    /** Optional label text shown above the inputs. */
+    label?: string;
+    /** Whether the field is explicitly required. */
+    required?: boolean;
+    /** Helper text displayed below the inputs. */
+    helperText?: string;
+    /** Error message displayed when state is 'error'. */
+    errorMessage?: string;
+    /** Success message displayed when state is 'success'. */
+    successMessage?: string;
+    /** Warning message displayed when state is 'warning'. */
+    warningMessage?: string;
+    /** The visual style variant of the input boxes. */
+    variant?: OtpVariant;
+    /** The size of each input box. */
+    size?: OtpSize;
+    /** The interaction state of the component. */
+    state?: OtpState;
+    /** Custom classname applied to the root wrapper. */
+    className?: string;
+    /** Alias for className to match other components. */
+    wrapperClassName?: string;
+    /** Custom classname applied to the inputs wrapper flex container. */
+    inputGroupClassName?: string;
+    /** Custom classname applied to each individual input box. */
+    inputClassName?: string;
+    /** Custom classname applied to the label. */
+    labelClassName?: string;
+    /** Custom classname applied to the helper/state messages. */
+    helperClassName?: string;
+    /** Explicit accessibility ID. Generated automatically if omitted. */
+    id?: string;
+    /** Whether the component is completely disabled. */
+    disabled?: boolean;
+    /** Whether to show a loading state indicator. */
+    isLoading?: boolean;
+    /** Only mask inputs with generic dots like a password if truthy. */
+    mask?: boolean;
+    /** Allow alphanumeric? Defaults to numeric-only if false or omitted. */
+    alphanumeric?: boolean;
+}
+
+declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLDivElement>>;
+
+export { OtpInput, type OtpInputProps, type OtpSize, type OtpState, type OtpVariant };

package/dist/otp-input/index.d.ts

@@ -0,0 +1,57 @@
+type OtpVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type OtpSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type OtpState = 'default' | 'error' | 'success' | 'warning';
+interface OtpInputProps {
+    /** The total number of input boxes (defaults to 4 or 6 depending on your preference, normally 4 or 6. We default to 4). */
+    length?: number;
+    /** The current value of the OTP input. */
+    value?: string;
+    /** Fired when the value changes. */
+    onChange?: (value: string) => void;
+    /** Fired when all the input boxes are filled. */
+    onComplete?: (value: string) => void;
+    /** Optional label text shown above the inputs. */
+    label?: string;
+    /** Whether the field is explicitly required. */
+    required?: boolean;
+    /** Helper text displayed below the inputs. */
+    helperText?: string;
+    /** Error message displayed when state is 'error'. */
+    errorMessage?: string;
+    /** Success message displayed when state is 'success'. */
+    successMessage?: string;
+    /** Warning message displayed when state is 'warning'. */
+    warningMessage?: string;
+    /** The visual style variant of the input boxes. */
+    variant?: OtpVariant;
+    /** The size of each input box. */
+    size?: OtpSize;
+    /** The interaction state of the component. */
+    state?: OtpState;
+    /** Custom classname applied to the root wrapper. */
+    className?: string;
+    /** Alias for className to match other components. */
+    wrapperClassName?: string;
+    /** Custom classname applied to the inputs wrapper flex container. */
+    inputGroupClassName?: string;
+    /** Custom classname applied to each individual input box. */
+    inputClassName?: string;
+    /** Custom classname applied to the label. */
+    labelClassName?: string;
+    /** Custom classname applied to the helper/state messages. */
+    helperClassName?: string;
+    /** Explicit accessibility ID. Generated automatically if omitted. */
+    id?: string;
+    /** Whether the component is completely disabled. */
+    disabled?: boolean;
+    /** Whether to show a loading state indicator. */
+    isLoading?: boolean;
+    /** Only mask inputs with generic dots like a password if truthy. */
+    mask?: boolean;
+    /** Allow alphanumeric? Defaults to numeric-only if false or omitted. */
+    alphanumeric?: boolean;
+}
+
+declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLDivElement>>;
+
+export { OtpInput, type OtpInputProps, type OtpSize, type OtpState, type OtpVariant };

package/dist/otp-input/index.mjs

@@ -0,0 +1 @@
+import {forwardRef,useId,useState,useRef,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {ArrowPathIcon}from'@heroicons/react/24/outline';import {jsxs,jsx}from'react/jsx-runtime';function a(...i){return twMerge(clsx(i))}var se={xs:"w-8 h-8 text-sm",sm:"w-10 h-10 text-base",md:"w-12 h-12 text-lg",lg:"w-14 h-14 text-xl",xl:"w-16 h-16 text-2xl"},ne={xs:"text-xs",sm:"text-xs",md:"text-sm",lg:"text-sm",xl:"text-base"},oe={default:"rounded-md border border-border bg-surface shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",filled:"rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",flushed:"rounded-none border-0 border-b border-border bg-transparent focus:outline-none focus:ring-0",unstyled:"border-0 bg-transparent p-0 focus:outline-none focus:ring-0"},ae={default:{default:"border-border focus:border-primary focus:ring-primary/40",filled:"focus:border-primary focus:ring-primary/40",flushed:"border-border focus:border-primary",unstyled:""},error:{default:"border-error focus:border-error focus:ring-error/20",filled:"bg-error/5 focus:border-error focus:ring-error/20",flushed:"border-error focus:border-error",unstyled:""},success:{default:"border-success focus:border-success focus:ring-success/20",filled:"bg-success/5 focus:border-success focus:ring-success/20",flushed:"border-success focus:border-success",unstyled:""},warning:{default:"border-warning focus:border-warning focus:ring-warning/20",filled:"bg-warning/5 focus:border-warning focus:ring-warning/20",flushed:"border-warning focus:border-warning",unstyled:""}},ie={default:"text-text-muted",error:"text-error font-medium",success:"text-success font-medium",warning:"text-warning font-medium"},ue="disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";function ce(i,s,f,d){if(i==="error"&&s)return s;if(i==="success"&&f)return f;if(i==="warning"&&d)return d}var fe=forwardRef(function({length:s=4,value:f="",onChange:d,onComplete:I,label:h,required:A=false,helperText:O,errorMessage:M,successMessage:N,warningMessage:$,variant:v="default",size:R="md",state:l="default",className:k,wrapperClassName:L,inputGroupClassName:z,inputClassName:H,labelClassName:P,helperClassName:C,id:T,disabled:K=false,isLoading:D=false,mask:F=false,alphanumeric:g=false},B){let Z=useId(),u=T??Z,E=`${u}-helper`,S=`${u}-state`,[p,b]=useState(Array.from({length:s},()=>"")),y=useRef([]);useEffect(()=>{let t=f.split("").slice(0,s),e=Array.from({length:s},()=>"");for(let r=0;r<t.length;r++)e[r]=t[r]??"";requestAnimationFrame(()=>{b(r=>e.some((o,Q)=>o!==r[Q])?e:r);});},[f,s]);let w=t=>{let e=t.join("");d&&d(e),I&&e.length===s&&!t.includes("")&&I(e);},m=t=>{t>=0&&t<s&&(y.current[t]?.focus(),setTimeout(()=>{y.current[t]?.setSelectionRange(1,1);},0));},j=(t,e)=>{let r=t.target.value;if(r.length>1&&(r=r.slice(-1)),!g&&r&&!/^\d+$/.test(r)||g&&r&&!/^[a-zA-Z0-9]+$/.test(r))return;let n=[...p];n[e]=r,b(n),w(n),r&&e<s-1&&m(e+1);},q=(t,e)=>{if(t.key==="Backspace"){if(!p[e]&&e>0){t.preventDefault();let r=[...p];r[e-1]="",b(r),w(r),m(e-1);}}else t.key==="ArrowLeft"&&e>0?(t.preventDefault(),m(e-1)):t.key==="ArrowRight"&&e<s-1&&(t.preventDefault(),m(e+1));},G=t=>{t.preventDefault();let e=t.clipboardData.getData("text/plain").trim();if(g?e=e.replace(/[^a-zA-Z0-9]/g,""):e=e.replace(/[^\d]/g,""),!e)return;let r=[...p],n=-1;for(let o=0;o<s;o++)o<e.length&&(r[o]=e[o]??"",n=o);b(r),w(r),n>-1&&m(Math.min(n+1,s-1));},V=ce(l,M,N,$),J=K||D;return jsxs("div",{ref:B,id:u,className:a("flex flex-col gap-2 w-fit",L,k),children:[h!==void 0&&jsxs("label",{htmlFor:`${u}-0`,className:a("font-black leading-none text-text uppercase tracking-widest",ne[R],P),children:[h,A&&jsx("span",{"aria-hidden":"true",className:"ml-1 text-error",children:"*"})]}),jsxs("div",{className:a("flex items-center gap-2",z),children:[p.map((t,e)=>jsx("input",{id:`${u}-${String(e)}`,ref:r=>{y.current[e]=r;},type:F?"password":"text",inputMode:g?"text":"numeric",autoComplete:"one-time-code",maxLength:1,disabled:J,value:t,onChange:r=>{j(r,e);},onKeyDown:r=>{q(r,e);},onPaste:G,"aria-invalid":l==="error"?true:void 0,"aria-describedby":[E,S].filter(Boolean).join(" ")||void 0,className:a("text-center transition-colors duration-150",se[R],oe[v],ae[l][v],ue,H)},`${u}-${String(e)}`)),D&&jsx("div",{className:"ml-2",children:jsx(ArrowPathIcon,{className:"animate-spin h-5 w-5 text-gray-400"})})]}),O!==void 0&&jsx("p",{id:E,className:a("text-xs leading-tight text-text-muted font-medium",C),children:O}),V!==void 0&&jsx("p",{id:S,role:l==="error"?"alert":void 0,className:a("text-xs leading-tight font-medium",ie[l],C),children:V})]})});fe.displayName="OtpInput";export{fe as OtpInput};

package/dist/password-input/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var react=require('react'),outline=require('@heroicons/react/24/outline'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function t(...r){return tailwindMerge.twMerge(clsx.clsx(r))}var oe={xs:"h-6 px-2 text-xs",sm:"h-8 px-3 text-sm",md:"h-10 px-3 text-sm",lg:"h-11 px-4 text-base",xl:"h-12 px-4 text-lg"},de={xs:"text-xs",sm:"text-xs",md:"text-sm",lg:"text-sm",xl:"text-base"},ae={default:"rounded-md border bg-surface shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",filled:"rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",flushed:"rounded-none border-0 border-b border-border bg-transparent focus:outline-none focus:ring-0",unstyled:"border-0 bg-transparent p-0 focus:outline-none focus:ring-0"},ie={default:{default:"border-border focus:border-primary focus:ring-primary/40",filled:"focus:border-primary focus:ring-primary/40",flushed:"border-border focus:border-primary",unstyled:""},error:{default:"border-error focus:border-error focus:ring-error/20",filled:"bg-error/5 focus:border-error focus:ring-error/20",flushed:"border-error focus:border-error",unstyled:""},success:{default:"border-success focus:border-success focus:ring-success/20",filled:"bg-success/5 focus:border-success focus:ring-success/20",flushed:"border-success focus:border-success",unstyled:""},warning:{default:"border-warning focus:border-warning focus:ring-warning/20",filled:"bg-warning/5 focus:border-warning focus:ring-warning/20",flushed:"border-warning focus:border-warning",unstyled:""}},ce={default:"text-text-muted",error:"text-error",success:"text-success",warning:"text-warning"};function ue(r,s,d,o){if(r==="error"&&s)return s;if(r==="success"&&d)return d;if(r==="warning"&&o)return o}function V({children:r,side:s}){return jsxRuntime.jsx("span",{"aria-hidden":"true",className:t("inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none",s==="left"?"rounded-l-md border-r-0":"rounded-r-md border-l-0"),children:r})}var le=react.forwardRef(function({label:s,required:d=false,helperText:o,errorMessage:z,successMessage:B,warningMessage:H,variant:p="default",size:m="md",state:a="default",fullWidth:g=true,leftElement:b,rightElement:x,prefix:w,suffix:y,wrapperClassName:K,inputGroupClassName:j,inputClassName:$,labelClassName:F,helperClassName:h,id:D,disabled:I,className:T,isLoading:u,showPasswordToggle:v=true,value:U,onChange:q,onKeyUp:P,onKeyDown:N,...G},J){let O=react.useId(),i=D??O,R=`${i}-helper`,k=`${i}-state`,C=`${i}-capslock`,[l,Q]=react.useState(false),[S,E]=react.useState(false),W=n=>{E(n.getModifierState("CapsLock")),P&&P(n);},X=n=>{E(n.getModifierState("CapsLock")),N&&N(n);},L=b!==void 0,A=x!==void 0||!!u||v,f=ue(a,z,B,H),Y=[o?R:null,f?k:null,S?C:null].filter(Boolean).join(" ")||void 0,Z=()=>u?jsxRuntime.jsxs("svg",{className:"animate-spin h-5 w-5 text-text-muted",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsxRuntime.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}):v?jsxRuntime.jsx("button",{type:"button",tabIndex:-1,onClick:()=>{Q(n=>!n);},className:"flex items-center justify-center rounded-full text-text-muted hover:text-text transition focus:outline-none w-6 h-6","aria-label":l?"Hide password":"Show password",children:l?jsxRuntime.jsx(outline.EyeSlashIcon,{className:"w-5 h-5"}):jsxRuntime.jsx(outline.EyeIcon,{className:"w-5 h-5"})}):x;return jsxRuntime.jsxs("div",{className:t("flex flex-col gap-1",g?"w-full":"w-fit",K,T),children:[s!==void 0&&jsxRuntime.jsxs("label",{htmlFor:i,className:t("font-black leading-none mb-2 text-text uppercase tracking-widest",de[m],F),children:[s,d&&jsxRuntime.jsx("span",{"aria-hidden":"true",className:"ml-1 text-error",children:"*"})]}),jsxRuntime.jsxs("div",{className:t("flex items-stretch transition-all duration-150 overflow-hidden",ae[p],ie[a][p],g?"w-full":"w-fit","focus-within:ring-4 focus-within:ring-primary/20 focus-within:border-primary",I&&"opacity-50 cursor-not-allowed bg-surface-secondary",j),children:[w!==void 0&&jsxRuntime.jsx(V,{side:"left",children:w}),jsxRuntime.jsxs("div",{className:"flex flex-1 items-center min-w-0",children:[L&&jsxRuntime.jsx("div",{className:"pl-3 flex-shrink-0 flex items-center justify-center",children:b}),jsxRuntime.jsx("div",{className:"flex-1 min-w-0 h-full",children:jsxRuntime.jsx("input",{ref:J,...G,id:i,disabled:!!I||!!u,type:l?"text":"password",value:U,onChange:q,onKeyUp:W,onKeyDown:X,"aria-invalid":a==="error"?true:void 0,"aria-describedby":Y,"aria-required":d,className:t("w-full bg-transparent border-0 focus:outline-none focus:ring-0 outline-none h-full",oe[m],$),style:{paddingLeft:L?"0.5rem":void 0,paddingRight:A?"0.5rem":void 0}})}),A&&jsxRuntime.jsx("div",{className:"pr-3 flex-shrink-0 flex items-center justify-center text-text-secondary",style:{width:"2.5rem"},children:Z()})]}),y!==void 0&&jsxRuntime.jsx(V,{side:"right",children:y})]}),o!==void 0&&jsxRuntime.jsx("p",{id:R,className:t("text-xs leading-tight text-text-muted",h),children:o}),S&&jsxRuntime.jsx("p",{id:C,className:"text-xs leading-tight text-warning font-black uppercase tracking-widest",children:"Caps Lock is on"}),f!==void 0&&jsxRuntime.jsx("p",{id:k,role:a==="error"?"alert":void 0,className:t("text-xs leading-tight mt-1",ce[a],h),children:f})]})});le.displayName="PasswordInput";
+exports.PasswordInput=le;

package/dist/password-input/index.d.mts

@@ -0,0 +1,32 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type PasswordInputVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type PasswordInputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type PasswordInputState = 'default' | 'error' | 'success' | 'warning';
+interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    warningMessage?: string;
+    variant?: PasswordInputVariant;
+    size?: PasswordInputSize;
+    state?: PasswordInputState;
+    fullWidth?: boolean;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    wrapperClassName?: string;
+    inputGroupClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    helperClassName?: string;
+    isLoading?: boolean;
+    showPasswordToggle?: boolean;
+}
+
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { PasswordInput, type PasswordInputProps, type PasswordInputSize, type PasswordInputState, type PasswordInputVariant };

package/dist/password-input/index.d.ts

@@ -0,0 +1,32 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type PasswordInputVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type PasswordInputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type PasswordInputState = 'default' | 'error' | 'success' | 'warning';
+interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    warningMessage?: string;
+    variant?: PasswordInputVariant;
+    size?: PasswordInputSize;
+    state?: PasswordInputState;
+    fullWidth?: boolean;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    wrapperClassName?: string;
+    inputGroupClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    helperClassName?: string;
+    isLoading?: boolean;
+    showPasswordToggle?: boolean;
+}
+
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { PasswordInput, type PasswordInputProps, type PasswordInputSize, type PasswordInputState, type PasswordInputVariant };