infinity-ui-elements 1.8.61 → 1.8.63

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ExternalLink, Calendar, X, Loader2, Search, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
+import { ExternalLink, Calendar, X, Loader2, Search, ChevronDown } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import Calendar$1 from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
@@ -77,6 +77,14 @@ const iconRegistry = {
     chevronUp: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 11.2727L6.55555 17L5 15.3637L12 8L19 15.3637L17.4445 17L12 11.2727Z" fill="#081416"/>
 </svg>
+`,
+    chevronLeft: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2727 12L17 17.4445L15.3637 19L8 12L15.3637 5L17 6.55555L11.2727 12Z" fill="#081416"/>
+</svg>
+`,
+    chevronRight: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7272 12L8 6.55555L9.63635 5L17 12L9.63635 19L8 17.4445L13.7272 12Z" fill="#081416"/>
+</svg>
 `,
 };
 const Icon = ({ name, size = 24, className = "", style = {}, ...props }) => {
@@ -2843,8 +2851,6 @@ const textFieldVariants = cva("relative flex items-center gap-3 border rounded-l
         validationState: {
             none: `
         border-action-outline-neutral-faded 
-        hover:border-action-outline-neutral-faded-hover 
-        hover:bg-action-fill-neutral-faded-hover
         focus-within:border-action-outline-primary-default 
         focus-within:bg-white!
         focus-within:ring-2 
@@ -2869,11 +2875,16 @@ const textFieldVariants = cva("relative flex items-center gap-3 border rounded-l
         cursor-not-allowed`,
             false: "",
         },
+        isReadOnly: {
+            true: "",
+            false: "hover:border-action-outline-neutral-faded-hover hover:bg-action-fill-neutral-faded-hover",
+        },
     },
     defaultVariants: {
         size: "medium",
         validationState: "none",
         isDisabled: false,
+        isReadOnly: false,
     },
 });
 const TextField = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isLoading = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, LinkComponent, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
@@ -2923,13 +2934,14 @@ const TextField = React.forwardRef(({ label, helperText, errorText, successText,
                     size,
                     validationState: currentValidationState,
                     isDisabled,
+                    isReadOnly: props.readOnly,
                 }), isLoading && "text-field-loading", className), children: [prefix && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsx("input", { ref: ref, value: inputValue, onChange: handleChange, disabled: isDisabled, required: isRequired, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled", inputClassName), ...props }), showClearButton && hasValue && !isDisabled && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsx("input", { ref: ref, value: inputValue, onChange: handleChange, disabled: isDisabled, required: isRequired, className: cn("w-full bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled", inputClassName), ...props }), showClearButton && hasValue && !isDisabled && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
@@ -3105,7 +3117,7 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
     // Build the suffix: include both the optional suffix and the chevron icon
     const chevronIcon = (jsx(Icon, { name: isOpen ? "chevronUp" : "chevronDown", size: 16, className: "shrink-0 transition-colors" }));
     const displaySuffix = suffix ? (jsxs(Fragment, { children: [suffix, chevronIcon] })) : (chevronIcon);
-    return (jsxs("div", { ref: containerRef, className: "relative", children: [jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: containerClassName, labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: toggleOpen, onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
+    return (jsxs("div", { ref: containerRef, className: "relative w-full", children: [jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: cn("w-full", containerClassName), labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: toggleOpen, onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
                     ? "top-full mt-1"
                     : "bottom-full mb-1"), children: jsx(DropdownMenu, { items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: widthStyle }) }))] }));
 });
@@ -3227,21 +3239,21 @@ const Pagination = React.forwardRef(({ className, currentPage: controlledCurrent
         return [];
     };
     const pageNumbers = getPageNumbers();
-    return (jsxs("div", { ref: ref, className: cn(paginationVariants({ size }), className), ...props, children: [showRowsPerPage && (jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: rowsPerPageLabel }), jsx("div", { className: "w-[80px]", children: jsx(Select, { value: rowsPerPage.toString(), options: rowsPerPageSelectOptions, onChange: handleRowsPerPageChange, size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) })] })), jsxs("div", { className: "flex items-center gap-3 ml-auto", children: [showPrevNext && (jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handlePrevPage, isDisabled: isPrevDisabled, leadingIcon: jsx(ChevronLeft, { className: "w-4 h-4" }), "aria-label": "Previous page", children: prevLabel })), showPageJumper ? (
+    return (jsxs("div", { ref: ref, className: cn(paginationVariants({ size }), className), ...props, children: [showRowsPerPage && (jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: rowsPerPageLabel }), jsx("div", { className: "w-[80px]", children: jsx(Select, { value: rowsPerPage.toString(), options: rowsPerPageSelectOptions, onChange: handleRowsPerPageChange, size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) })] })), jsxs("div", { className: "flex items-center gap-3 ml-auto", children: [showPrevNext && (jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handlePrevPage, isDisabled: isPrevDisabled, leadingIcon: jsx(Icon, { name: "chevronLeft", size: 16 }), "aria-label": "Previous page", children: prevLabel })), showPageJumper ? (
                     // Show page dropdown selector
                     jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "w-[80px]", children: jsx(Select, { value: currentPage.toString(), options: pageOptions, onChange: (value) => handlePageChange(typeof value === "string" ? parseInt(value) : value), size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) }), jsxs("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: [ofLabel, " ", totalPages] })] })) : (
                     // Show numbered page buttons
                     showPageNumber &&
-                        pageNumbers.length > 0 && (jsx(ButtonGroup, { variant: "separated", size: buttonSize, isDisabled: isDisabled, value: currentPage, onChange: (value) => handlePageChange(value), children: pageNumbers.map((pageNum) => (jsx(Button, { value: pageNum, variant: "tertiary", color: "primary", "aria-label": `Page ${pageNum}`, "aria-current": pageNum === currentPage ? "page" : undefined, children: pageNum }, pageNum))) }))), showPrevNext && (jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handleNextPage, isDisabled: isNextDisabled, trailingIcon: jsx(ChevronRight, { className: "w-4 h-4" }), "aria-label": "Next page", children: nextLabel }))] })] }));
+                        pageNumbers.length > 0 && (jsx(ButtonGroup, { variant: "separated", size: buttonSize, isDisabled: isDisabled, value: currentPage, onChange: (value) => handlePageChange(value), children: pageNumbers.map((pageNum) => (jsx(Button, { value: pageNum, variant: "tertiary", color: "primary", "aria-label": `Page ${pageNum}`, "aria-current": pageNum === currentPage ? "page" : undefined, children: pageNum }, pageNum))) }))), showPrevNext && (jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handleNextPage, isDisabled: isNextDisabled, trailingIcon: jsx(Icon, { name: "chevronRight", size: 16 }), "aria-label": "Next page", children: nextLabel }))] })] }));
 });
 Pagination.displayName = "Pagination";
 
 const radioVariants = cva("relative inline-flex items-center justify-center shrink-0 border transition-all cursor-pointer rounded-full", {
     variants: {
         size: {
-            small: "w-[14px] h-[14px] border-[1.5px]",
-            medium: "w-[16px] h-[16px] border-[1.5px]",
-            large: "w-[20px] h-[20px] border-[2px]",
+            small: "w-[10px] h-[10px] border-[1.5px]",
+            medium: "w-[12px] h-[12px] border-[1.5px]",
+            large: "w-[16px] h-[16px] border-[2px]",
         },
         validationState: {
             none: "",
@@ -3366,17 +3378,20 @@ const Radio = React.forwardRef(({ label, errorText, size = "medium", validationS
         small: {
             gap: "gap-2",
             labelSize: "text-body-small-regular",
-            innerCircleSize: 6,
+            innerCircleSize: 4,
+            boundingBoxSize: "w-[14px] h-[14px] p-1",
         },
         medium: {
             gap: "gap-2.5",
             labelSize: "text-body-medium-regular",
-            innerCircleSize: 7,
+            innerCircleSize: 5,
+            boundingBoxSize: "w-[16px] h-[16px] p-1",
         },
         large: {
             gap: "gap-3",
             labelSize: "text-body-large-regular",
-            innerCircleSize: 8,
+            innerCircleSize: 7,
+            boundingBoxSize: "w-[20px] h-[20px] p-1",
         },
     };
     const config = sizeConfig[size];
@@ -3386,16 +3401,16 @@ const Radio = React.forwardRef(({ label, errorText, size = "medium", validationS
                                     ? "bg-action-outline-negative-faded"
                                     : "bg-action-outline-primary-faded"), style: {
                                     animation: "var(--animate-checkbox-ripple)",
-                                } })), jsx("div", { className: cn(radioVariants({
-                                    size,
-                                    validationState,
-                                    isChecked,
-                                    isDisabled,
-                                    isFocused,
-                                }), className), children: isChecked && (jsx("div", { className: "rounded-full bg-white transition-all", style: {
-                                        width: `${config.innerCircleSize}px`,
-                                        height: `${config.innerCircleSize}px`,
-                                    } })) })] }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
+                                } })), jsx("div", { className: cn("inline-flex items-center justify-center shrink-0 box-border", config.boundingBoxSize), children: jsx("div", { className: cn(radioVariants({
+                                        size,
+                                        validationState,
+                                        isChecked,
+                                        isDisabled,
+                                        isFocused,
+                                    }), className), children: isChecked && (jsx("div", { className: "rounded-full bg-white transition-all box-border", style: {
+                                            width: `${config.innerCircleSize}px`,
+                                            height: `${config.innerCircleSize}px`,
+                                        } })) }) })] }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : "text-surface-ink-neutral-normal", labelClassName), children: label }))] }), shouldShowError && (jsx(FormFooter, { helperText: errorText, validationState: "negative", size: size, isDisabled: isDisabled }))] }));
 });
@@ -4172,31 +4187,73 @@ const switchVariants = cva("relative inline-flex items-center shrink-0 cursor-po
             medium: "w-[28px] h-[16px]",
             large: "w-[36px] h-[20px]",
         },
+        validationState: {
+            none: "",
+            error: "",
+        },
         isChecked: {
-            true: "bg-action-fill-primary-default ",
-            false: "bg-surface-fill-neutral-subtle",
+            true: "",
+            false: "",
         },
         isDisabled: {
             true: "cursor-not-allowed opacity-60",
             false: "",
         },
+        isFocused: {
+            true: "",
+            false: "",
+        },
     },
     compoundVariants: [
+        // Unchecked state - none validation
+        {
+            isChecked: false,
+            validationState: "none",
+            isDisabled: false,
+            class: "bg-surface-fill-neutral-subtle hover:bg-action-fill-neutral-faded",
+        },
+        // Checked state - none validation
         {
             isChecked: true,
+            validationState: "none",
             isDisabled: false,
-            class: "hover:bg-action-fill-primary-hover ",
+            class: "bg-action-fill-primary-default hover:bg-action-fill-primary-hover",
         },
+        // Checked state - error validation
+        {
+            isChecked: true,
+            validationState: "error",
+            isDisabled: false,
+            class: "bg-action-fill-negative-default hover:bg-action-fill-negative-hover",
+        },
+        // Unchecked state - error validation
         {
             isChecked: false,
+            validationState: "error",
             isDisabled: false,
-            class: "hover:bg-action-fill-neutral-faded",
+            class: "bg-surface-fill-neutral-subtle hover:bg-action-fill-neutral-faded",
+        },
+        // Focused state - none validation
+        {
+            isFocused: true,
+            validationState: "none",
+            isDisabled: false,
+            class: "ring-2 ring-action-outline-primary-faded",
+        },
+        // Focused state - error validation
+        {
+            isFocused: true,
+            validationState: "error",
+            isDisabled: false,
+            class: "ring-2 ring-action-outline-negative-faded",
         },
     ],
     defaultVariants: {
         size: "medium",
+        validationState: "none",
         isChecked: false,
         isDisabled: false,
+        isFocused: false,
     },
 });
 const switchThumbVariants = cva("inline-block rounded-full bg-white shadow-sm transition-transform duration-200", {
@@ -4251,8 +4308,10 @@ const switchThumbVariants = cva("inline-block rounded-full bg-white shadow-sm tr
         isChecked: false,
     },
 });
-const Switch = React.forwardRef(({ label, size = "medium", isDisabled = false, containerClassName, labelClassName, trackClassName, thumbClassName, className, checked, onChange, ...props }, ref) => {
+const Switch = React.forwardRef(({ label, errorText, size = "medium", validationState = "none", isDisabled = false, showErrorText = true, containerClassName, labelClassName, trackClassName, thumbClassName, className, checked, onChange, ...props }, ref) => {
     const [internalChecked, setInternalChecked] = React.useState(false);
+    const [showRipple, setShowRipple] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
     const inputRef = React.useRef(null);
     // Use forwarded ref or internal ref
     React.useImperativeHandle(ref, () => inputRef.current);
@@ -4265,17 +4324,35 @@ const Switch = React.forwardRef(({ label, size = "medium", isDisabled = false, c
             setInternalChecked(e.target.checked);
         }
     };
+    const triggerRipple = () => {
+        if (!isDisabled) {
+            setShowRipple(true);
+            setTimeout(() => {
+                setShowRipple(false);
+            }, 360); // Match animation duration (0.36s)
+        }
+    };
     const handleContainerClick = () => {
         if (!isDisabled && inputRef.current) {
+            triggerRipple();
             inputRef.current.click();
         }
     };
     const handleKeyDown = (e) => {
         if ((e.key === " " || e.key === "Enter") && !isDisabled) {
             e.preventDefault();
+            triggerRipple();
             inputRef.current?.click();
         }
     };
+    const handleFocus = () => {
+        if (!isDisabled) {
+            setIsFocused(true);
+        }
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+    };
     // Size-based configurations
     const sizeConfig = {
         small: {
@@ -4292,16 +4369,24 @@ const Switch = React.forwardRef(({ label, size = "medium", isDisabled = false, c
         },
     };
     const config = sizeConfig[size];
-    return (jsx("div", { className: cn("inline-flex flex-col", containerClassName), children: jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "switch", "aria-checked": isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", role: "switch", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsx("div", { className: "relative inline-flex shrink-0", children: jsx("div", { className: cn(switchVariants({
-                            size,
-                            isChecked,
-                            isDisabled,
-                        }), trackClassName, className, "focus-visible:ring-2 focus-visible:ring-action-outline-primary-faded focus-visible:ring-offset-2"), children: jsx("span", { className: cn(switchThumbVariants({
-                                size,
-                                isChecked,
-                            }), thumbClassName) }) }) }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
-                        ? "text-surface-ink-neutral-disabled"
-                        : "text-surface-ink-neutral-normal", labelClassName), children: label }))] }) }));
+    // Determine if we should show the error text
+    const shouldShowError = errorText && showErrorText;
+    return (jsxs("div", { className: cn("inline-flex flex-col", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, role: "switch", "aria-checked": isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", role: "switch", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
+                                    ? "bg-action-outline-negative-faded"
+                                    : "bg-action-outline-primary-faded"), style: {
+                                    animation: "var(--animate-checkbox-ripple)",
+                                } })), jsx("div", { className: cn(switchVariants({
+                                    size,
+                                    validationState,
+                                    isChecked,
+                                    isDisabled,
+                                    isFocused,
+                                }), trackClassName, className), children: jsx("span", { className: cn(switchThumbVariants({
+                                        size,
+                                        isChecked,
+                                    }), thumbClassName) }) })] }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : "text-surface-ink-neutral-normal", labelClassName), children: label }))] }), shouldShowError && (jsx(FormFooter, { helperText: errorText, validationState: "negative", size: size, isDisabled: isDisabled }))] }));
 });
 Switch.displayName = "Switch";