infinity-ui-elements 1.8.59 → 1.8.61

package/dist/index.esm.js

@@ -38,9 +38,10 @@ import { flexRender } from '@tanstack/react-table';
  */
 const iconRegistry = {
     // Tick/Check icon
-    tick: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.364 15.1924L19.5564 6L20.9706 7.41421L10.364 18.0208L4 11.6569L5.41422 10.2427L10.364 15.1924Z" fill="#081416"/>
-</svg>`,
+    tick: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99907 1.77063L8.63188 2.42981L8.69829 2.49915L8.63188 2.56848L3.88188 7.50891L3.80962 7.58411L3.73833 7.50891L0.887741 4.54504L0.821335 4.47571L0.887741 4.40637L1.52153 3.74719L1.5938 3.672L1.66508 3.74719L3.80962 5.97766L7.85454 1.77063L7.9268 1.69543L7.99907 1.77063Z" fill="white" stroke="white" stroke-width="0.2"/>
+</svg>
+`,
     // Alias: check points to the same icon as tick
     check: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.364 15.1924L19.5564 6L20.9706 7.41421L10.364 18.0208L4 11.6569L5.41422 10.2427L10.364 15.1924Z" fill="#081416"/>
@@ -1493,9 +1494,9 @@ FormFooter.displayName = "FormFooter";
 const checkboxVariants = cva("relative inline-flex items-center justify-center shrink-0 transition-all cursor-pointer box-border", {
     variants: {
         size: {
-            small: "w-[10px] h-[10px] rounded-small border-[1.5px]",
-            medium: "w-[12px] h-[12px] rounded-small border-[1.5px]",
-            large: "w-[16px] h-[16px] rounded-medium border-[2px]",
+            small: "w-[14px] h-[14px] rounded-small border-[1.5px]",
+            medium: "w-[16px] h-[16px] rounded-small border-[1.5px]",
+            large: "w-[20px] h-[20px] rounded-medium border-[2px]",
         },
         validationState: {
             none: "",
@@ -1563,7 +1564,6 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
     const [internalChecked, setInternalChecked] = React.useState(false);
     const [showRipple, setShowRipple] = React.useState(false);
     const inputRef = React.useRef(null);
-    const rippleTimeoutRef = React.useRef(null);
     // Use forwarded ref or internal ref
     React.useImperativeHandle(ref, () => inputRef.current);
     const isChecked = checked !== undefined ? checked : internalChecked;
@@ -1573,14 +1573,6 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
             inputRef.current.indeterminate = isIndeterminate;
         }
     }, [isIndeterminate]);
-    // Cleanup timeout on unmount
-    React.useEffect(() => {
-        return () => {
-            if (rippleTimeoutRef.current) {
-                clearTimeout(rippleTimeoutRef.current);
-            }
-        };
-    }, []);
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
@@ -1590,28 +1582,31 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
         }
     };
     const triggerRipple = () => {
-        if (!isDisabled && !showRipple) {
-            // Clear any existing timeout
-            if (rippleTimeoutRef.current) {
-                clearTimeout(rippleTimeoutRef.current);
-            }
+        if (!isDisabled) {
             setShowRipple(true);
-            rippleTimeoutRef.current = setTimeout(() => {
+            setTimeout(() => {
                 setShowRipple(false);
-                rippleTimeoutRef.current = null;
-            }, 400); // Match animation duration (0.4s)
+            }, 360); // Match animation duration (0.36s)
         }
     };
     const handleContainerClick = () => {
         if (!isDisabled && inputRef.current) {
-            triggerRipple();
+            // Only show ripple when checking or entering indeterminate state (not unchecking)
+            const willBeChecked = !isChecked || isIndeterminate;
+            if (willBeChecked) {
+                triggerRipple();
+            }
             inputRef.current.click();
         }
     };
     const handleKeyDown = (e) => {
         if ((e.key === " " || e.key === "Enter") && !isDisabled) {
             e.preventDefault();
-            triggerRipple();
+            // Only show ripple when checking or entering indeterminate state (not unchecking)
+            const willBeChecked = !isChecked || isIndeterminate;
+            if (willBeChecked) {
+                triggerRipple();
+            }
             inputRef.current?.click();
         }
     };
@@ -1620,23 +1615,23 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
         small: {
             gap: "gap-2",
             labelSize: "text-body-small-regular",
-            iconSize: 10,
+            iconSize: 7,
         },
         medium: {
             gap: "gap-2",
             labelSize: "text-body-small-regular",
-            iconSize: 12,
+            iconSize: 9.6,
         },
         large: {
             gap: "gap-3",
             labelSize: "text-body-medium-regular",
-            iconSize: 14,
+            iconSize: 13.33,
         },
     };
     const config = sizeConfig[size];
     // Determine if we should show the error text
     const shouldShowError = errorText && showErrorText;
-    return (jsxs("div", { className: cn("inline-flex flex-col px-2", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", 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"
+    return (jsxs("div", { className: cn("inline-flex flex-col py-0.5", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", 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)",
@@ -2851,6 +2846,7 @@ const textFieldVariants = cva("relative flex items-center gap-3 border rounded-l
         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 
         ring-surface-outline-primary-muted`,
             positive: `
@@ -4680,10 +4676,12 @@ const textAreaVariants = cva("relative flex flex-col border rounded-large transi
         validationState: {
             none: `
         border-action-outline-neutral-faded 
-        hover:border-action-outline-primary-hover 
-        focus-within:border-action-outline-primary-hover 
+        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 
-        ring-action-outline-primary-faded-hover`,
+        ring-surface-outline-primary-muted`,
             positive: `
           border-action-outline-positive-default 
           focus-within:border-action-outline-positive-hover
@@ -4696,11 +4694,13 @@ const textAreaVariants = cva("relative flex flex-col border rounded-large transi
         },
         isDisabled: {
             true: `
-        border-[var(--border-width-thinner)]
-        hover:border-action-outline-neutral-disabled
+        border
         border-action-outline-neutral-disabled
-        bg-surface-fill-neutral-intense cursor-not-allowed opacity-60`,
-            false: "bg-surface-fill-neutral-intense",
+        hover:border-action-outline-neutral-disabled
+        bg-surface-fill-neutral-intense 
+        hover:bg-surface-fill-neutral-intense 
+        cursor-not-allowed`,
+            false: "",
         },
     },
     defaultVariants: {