infinity-ui-elements 1.9.21 → 1.9.24

package/dist/index.esm.js

@@ -3854,7 +3854,7 @@ const radioVariants = cva("relative inline-flex items-center justify-center shri
         isFocused: false,
     },
 });
-const Radio = React.forwardRef(({ label, errorText, size = "medium", validationState = "none", isDisabled = false, showErrorText = true, containerClassName, labelClassName, className, checked, onChange, ...props }, ref) => {
+const Radio = React.forwardRef(({ label, errorText, size = "medium", validationState = "none", isDisabled = false, showErrorText = true, variant = "default", containerClassName, labelClassName, cardClassName, className, checked, onChange, ...props }, ref) => {
     const [internalChecked, setInternalChecked] = React.useState(false);
     const [showRipple, setShowRipple] = React.useState(false);
     const [isFocused, setIsFocused] = React.useState(false);
@@ -3931,26 +3931,42 @@ const Radio = React.forwardRef(({ label, errorText, size = "medium", validationS
     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", 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: "radio", "aria-checked": isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "radio", 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("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 }))] }));
+    const radioContent = (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: "radio", "aria-checked": isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "radio", 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("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 }))] }));
+    // Wrap in card container if variant is "card"
+    if (variant === "card") {
+        return (jsxs("div", { className: cn("inline-flex flex-col w-full", containerClassName), children: [jsx("div", { className: cn("w-full border rounded-xlarge p-5 transition-all", isChecked
+                        ? "border-action-outline-primary-default bg-action-fill-primary-faded"
+                        : "border-surface-outline-neutral-subtle hover:border-surface-outline-neutral-normal hover:bg-surface-fill-neutral-faded", isDisabled
+                        ? "opacity-60 cursor-not-allowed"
+                        : "cursor-pointer", cardClassName), onClick: (e) => {
+                        if (!isDisabled) {
+                            // Prevent double-click if already clicking on the radio itself
+                            if (e.target === inputRef.current)
+                                return;
+                            inputRef.current?.click();
+                        }
+                    }, children: radioContent }), shouldShowError && (jsx(FormFooter, { helperText: errorText, validationState: "negative", size: size, isDisabled: isDisabled }))] }));
+    }
+    return (jsxs("div", { className: cn("inline-flex flex-col w-full", containerClassName), children: [radioContent, shouldShowError && (jsx(FormFooter, { helperText: errorText, validationState: "negative", size: size, isDisabled: isDisabled }))] }));
 });
 Radio.displayName = "Radio";
 
-const RadioGroup = React.forwardRef(({ value: controlledValue, defaultValue, onChange, options, children, label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", name: nameProp, orientation = "vertical", spacing = "normal", containerClassName, labelClassName, groupClassName, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, className, id, ...props }, ref) => {
+const RadioGroup = React.forwardRef(({ value: controlledValue, defaultValue, onChange, options, children, label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", name: nameProp, orientation = "vertical", spacing = "normal", variant = "default", containerClassName, labelClassName, groupClassName, cardClassName, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, className, id, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
     const groupId = React.useId();
     const name = nameProp || `radio-group-${groupId}`;
@@ -4035,7 +4051,7 @@ const RadioGroup = React.forwardRef(({ value: controlledValue, defaultValue, onC
                     if (e.target.checked) {
                         handleChange(option.value);
                     }
-                }, size: size, validationState: currentValidationState, isDisabled: optionDisabled, showErrorText: false, containerClassName: option.containerClassName, labelClassName: option.labelClassName }, option.value));
+                }, size: size, variant: variant, validationState: currentValidationState, isDisabled: optionDisabled, showErrorText: false, containerClassName: option.containerClassName, labelClassName: option.labelClassName, cardClassName: cardClassName }, option.value));
         });
     };
     // Clone children and inject props
@@ -4068,13 +4084,15 @@ const RadioGroup = React.forwardRef(({ value: controlledValue, defaultValue, onC
                     }
                 },
                 size: child.props.size || size,
+                variant: child.props.variant || variant,
                 validationState: child.props.validationState || currentValidationState,
                 isDisabled: childDisabled,
                 showErrorText: false,
+                cardClassName: cardClassName,
             });
         });
     };
-    return (jsxs("div", { ref: ref, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), ...props, children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: id, className: "mb-2", labelClassName: labelClassName })), jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": label, "aria-required": isRequired, "aria-invalid": currentValidationState === "error", "aria-disabled": isDisabled, className: cn("flex", orientation === "horizontal"
+    return (jsxs("div", { ref: ref, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), ...props, children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: id, className: "mb-2", labelClassName: labelClassName })), jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": label, "aria-required": isRequired, "aria-invalid": currentValidationState === "error", "aria-disabled": isDisabled, className: cn("flex w-full", orientation === "horizontal"
                     ? "flex-row items-center"
                     : "flex-col items-start", spacingConfig[spacing], groupClassName, className), onKeyDown: handleKeyDown, id: id, children: options ? renderOptions() : renderChildren() }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
                     ? "default"