infinity-ui-elements 1.8.28 → 1.8.30

package/dist/index.js

@@ -2098,7 +2098,7 @@ const formatDateDefault = (date) => {
         day: "numeric",
     });
 };
-const DatePicker = React__namespace.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
+const DatePicker = React__namespace.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = true, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(parseDate(defaultValue));
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const datePickerRef = React__namespace.useRef(null);
@@ -2251,7 +2251,7 @@ const DatePicker = React__namespace.forwardRef(({ className, value: controlledVa
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted") }), jsxRuntime.jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: hasValue && value ? formatDate(value) : placeholder }), showClearButton && hasValue && !isDisabled && (jsxRuntime.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: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), isOpen && !isDisabled && (jsxRuntime.jsx("div", { ref: calendarRef, className: cn("absolute z-50 left-0 bg-surface-fill-neutral-intense rounded-large shadow-lg p-4", dropdownPlacement === "bottom"
+                                    : "text-surface-ink-neutral-muted") }), jsxRuntime.jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: hasValue && value ? formatDate(value) : placeholder }), showClearButton && hasValue && !isDisabled && (jsxRuntime.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, "aria-label": "Clear date", children: jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }) })), isOpen && !isDisabled && (jsxRuntime.jsx("div", { ref: calendarRef, className: cn("absolute z-50 left-0 bg-surface-fill-neutral-intense rounded-large shadow-lg p-4", dropdownPlacement === "bottom"
                             ? "top-full mt-1"
                             : "bottom-full mb-1", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx("div", { className: "react-calendar-wrapper w-fit", children: jsxRuntime.jsx(Calendar, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
                                     const weekdayNames = [
@@ -2618,7 +2618,7 @@ const selectVariants = classVarianceAuthority.cva("relative flex items-center ga
         isDisabled: false,
     },
 });
-const Select = React__namespace.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
+const Select = React__namespace.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, showLeadingIcon = false, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React__namespace.useState("bottom");
@@ -2797,13 +2797,19 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
                     size,
                     validationState: currentValidationState,
                     isDisabled,
-                }), "relative w-full cursor-pointer", className), onClick: !isDisabled && !isLoading ? toggleOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [prefix && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                }), "relative w-full cursor-pointer", className), onClick: !isDisabled && !isLoading ? toggleOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [prefix ? (jsxRuntime.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 })), jsxRuntime.jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading ? "Loading..." : selectedOption?.label || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsxRuntime.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: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                                    : "text-surface-ink-neutral-muted"), children: prefix })) : showLeadingIcon && selectedOption?.leadingIcon ? (jsxRuntime.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: selectedOption.leadingIcon })) : null, jsxRuntime.jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading ? "Loading..." : selectedOption?.label || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsxRuntime.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: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
@@ -3113,6 +3119,132 @@ const Radio = React__namespace.forwardRef(({ label, errorText, size = "medium",
 });
 Radio.displayName = "Radio";
 
+const RadioGroup = React__namespace.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 [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
+    const groupId = React__namespace.useId();
+    const name = nameProp || `radio-group-${groupId}`;
+    const groupRef = React__namespace.useRef(null);
+    const radioRefs = React__namespace.useRef([]);
+    const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText;
+    const currentValidationState = errorText ? "error" : validationState;
+    const handleChange = (optionValue) => {
+        if (onChange) {
+            onChange(optionValue);
+        }
+        else {
+            setUncontrolledValue(optionValue);
+        }
+    };
+    // Keyboard navigation
+    const handleKeyDown = (e) => {
+        if (isDisabled)
+            return;
+        const currentIndex = radioRefs.current.findIndex((ref) => ref === document.activeElement);
+        if (currentIndex === -1)
+            return;
+        const direction = orientation === "horizontal"
+            ? (e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0)
+            : (e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0);
+        if (direction === 0)
+            return;
+        e.preventDefault();
+        // Find next enabled radio
+        let nextIndex = currentIndex;
+        const total = radioRefs.current.length;
+        let attempts = 0;
+        while (attempts < total) {
+            nextIndex = (nextIndex + direction + total) % total;
+            const nextRadio = radioRefs.current[nextIndex];
+            if (nextRadio && !nextRadio.disabled) {
+                nextRadio.focus();
+                nextRadio.click();
+                return;
+            }
+            attempts++;
+        }
+    };
+    // Spacing configuration
+    const spacingConfig = {
+        tight: orientation === "horizontal" ? "gap-3" : "gap-2",
+        normal: orientation === "horizontal" ? "gap-4" : "gap-3",
+        loose: orientation === "horizontal" ? "gap-6" : "gap-4",
+    };
+    // Size configuration
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+        },
+        medium: {
+            gap: "gap-2",
+        },
+        large: {
+            gap: "gap-3",
+        },
+    };
+    // Render options from array
+    const renderOptions = () => {
+        if (!options)
+            return null;
+        return options.map((option, index) => {
+            const isChecked = value === option.value;
+            const optionDisabled = isDisabled || option.isDisabled;
+            return (jsxRuntime.jsx(Radio, { ref: (el) => {
+                    radioRefs.current[index] = el;
+                }, name: name, value: option.value, label: option.label, checked: isChecked, onChange: (e) => {
+                    if (e.target.checked) {
+                        handleChange(option.value);
+                    }
+                }, size: size, validationState: currentValidationState, isDisabled: optionDisabled, showErrorText: false, containerClassName: option.containerClassName, labelClassName: option.labelClassName }, option.value));
+        });
+    };
+    // Clone children and inject props
+    const renderChildren = () => {
+        if (!children)
+            return null;
+        return React__namespace.Children.map(children, (child, index) => {
+            if (!React__namespace.isValidElement(child)) {
+                return child;
+            }
+            const childValue = child.props.value;
+            const isChecked = value === childValue;
+            const childDisabled = isDisabled || child.props.isDisabled;
+            return React__namespace.cloneElement(child, {
+                ...child.props,
+                ref: (el) => {
+                    radioRefs.current[index] = el;
+                    // Preserve original ref if it exists
+                    const originalRef = child.ref;
+                    if (typeof originalRef === "function") {
+                        originalRef(el);
+                    }
+                    else if (originalRef && "current" in originalRef) {
+                        originalRef.current = el;
+                    }
+                },
+                name,
+                checked: isChecked,
+                onChange: (e) => {
+                    if (e.target.checked) {
+                        handleChange(childValue || "");
+                    }
+                    // Call original onChange if it exists
+                    if (child.props.onChange) {
+                        child.props.onChange(e);
+                    }
+                },
+                size: child.props.size || size,
+                validationState: child.props.validationState || currentValidationState,
+                isDisabled: childDisabled,
+                showErrorText: false,
+            });
+        });
+    };
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), ...props, children: [label && (jsxRuntime.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 })), jsxRuntime.jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": label, "aria-required": isRequired, "aria-invalid": currentValidationState === "error", "aria-disabled": isDisabled, className: cn("flex", orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start", spacingConfig[spacing], groupClassName, className), onKeyDown: handleKeyDown, id: id, children: options ? renderOptions() : renderChildren() }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none" ? "default" : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+RadioGroup.displayName = "RadioGroup";
+
 const textFieldVariants = classVarianceAuthority.cva("relative flex items-center gap-2 border rounded-large transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
@@ -4731,6 +4863,7 @@ exports.Modal = Modal;
 exports.NumberCell = NumberCell;
 exports.Pagination = Pagination;
 exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
 exports.SearchableDropdown = SearchableDropdown;
 exports.Select = Select;
 exports.SelectTextField = SelectTextField;