infinity-ui-elements 1.8.29 → 1.8.32

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 = [
@@ -3119,6 +3119,140 @@ 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;
+                },
+                name,
+                checked: isChecked,
+                onChange: (e) => {
+                    if (e.target.checked) {
+                        handleChange(typeof childValue === "string"
+                            ? childValue
+                            : String(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 === "error"
+                        ? "negative"
+                        : "default", 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: {
@@ -4737,6 +4871,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;