infinity-ui-elements 1.8.62 → 1.8.63

package/dist/index.esm.js

@@ -3251,9 +3251,9 @@ 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: "",
@@ -3378,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];
@@ -3398,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 }))] }));
 });
@@ -4184,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: "bg-action-fill-primary-default hover:bg-action-fill-primary-hover",
+        },
+        // Checked state - error validation
         {
             isChecked: true,
+            validationState: "error",
             isDisabled: false,
-            class: "hover:bg-action-fill-primary-hover ",
+            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", {
@@ -4263,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);
@@ -4277,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: {
@@ -4304,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";