@heymantle/litho 0.0.14 → 0.0.16

package/dist/esm/components/RadioButtonCard.js

@@ -2,8 +2,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import Text from "./Text.js";
 import Label from "./Label.js";
-var styles = tv({
-    base: "Litho-RadioButtonCardContainer border border-transparent rounded-lg p-3 pl-4 flex justify-between gap-2",
+/**
+ * @component RadioButtonCard
+ *
+ * @description A card-styled radio input that displays a title and description within a selectable card container.
+ *
+ * @usage
+ * - DO: Use for visually prominent single-choice selections with descriptive content.
+ * - DON'T: Use for simple inline radio inputs (use RadioButton).
+ *
+ * @accessibility
+ * - The entire card is clickable and keyboard accessible; ensure title clearly describes the option.
+ *
+ * @alternative
+ * - If you need a simple inline radio button, use `RadioButton`. If you need a checkbox-style card, use `CheckboxCard`.
+ *
+ * @param {Object} props - Props for the RadioButtonCard component.
+ * @param {string} [props.label] - The text label for the radio button.
+ * @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
+ * @param {string} [props.id] - The unique identifier for the radio input.
+ * @param {string} [props.name] - The name attribute for the radio input (must be the same for grouped buttons).
+ * @param {string} [props.description] - A description of the radio button.
+ * @param {string} [props.value] - The value attribute for the radio input.
+ * @param {string} [props.error] - An error message associated with the radio button, if any.
+ * @param {boolean} [props.checked=false] - Indicates whether the radio button is checked.
+ * @param {boolean} [props.disabled=false] - Indicates whether the radio button is disabled.
+ * @param {string} [props.helpText] - Additional descriptive text for the radio button.
+ * @param {function} [props.onChange] - Callback function called when the radio button state changes.
+ * @param {function} [props.onFocus] - Callback function called when the radio button gains focus.
+ * @param {function} [props.onBlur] - Callback function called when the radio button loses focus.
+ * @param {boolean} [props.hideRadioButton=false] - When true, hides the visual radio button control.
+ * @param {React.ReactNode} [props.icon=null] - Optional icon JSX to display in the card.
+ * @param {boolean} [props.allowDeselect=true] - When true, clicking an already-selected card deselects it by calling onChange with a synthetic event where target.value is null.
+ *
+ * @returns {JSX.Element} The rendered RadioButton component.
+ */ var styles = tv({
+    base: "Litho-RadioButtonCardContainer border border-transparent rounded-lg p-3 pl-4 flex justify-between gap-2 hover:border-form-border-focus hover:ring hover:ring-form-focus",
     variants: {
         disabled: {
             true: "bg-tint-1",
@@ -18,12 +52,12 @@ var styles = tv({
         {
             disabled: false,
             checked: true,
-            class: "border-form-border-focus ring-1 ring-inset ring-form-border-focus"
+            class: "border-form-border-focus bg-surface-selected"
         },
         {
             disabled: false,
             checked: false,
-            class: "hover:border-edge-default"
+            class: ""
         }
     ]
 });
@@ -61,32 +95,9 @@ var radioStyles = tv({
         }
     ]
 });
-/**
- * RadioButton Component
- * 
- * A custom radio button component with support for labels, help text, and extensive styling using Tailwind Variants (tv).
- * 
- * @component
- * 
- * @param {Object} props - Props for the RadioButton component.
- * @param {string} [props.label] - The text label for the radio button.
- * @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
- * @param {string} [props.id] - The unique identifier for the radio input.
- * @param {string} [props.name] - The name attribute for the radio input (must be the same for grouped buttons).
- * @param {string} [props.description] - A description of the radio button.
- * @param {string} [props.value] - The value attribute for the radio input.
- * @param {string} [props.error] - An error message associated with the radio button, if any.
- * @param {boolean} [props.checked=false] - Indicates whether the radio button is checked.
- * @param {boolean} [props.disabled=false] - Indicates whether the radio button is disabled.
- * @param {string} [props.helpText] - Additional descriptive text for the radio button.
- * @param {function} [props.onChange] - Callback function called when the radio button state changes.
- * @param {function} [props.onFocus] - Callback function called when the radio button gains focus.
- * @param {function} [props.onBlur] - Callback function called when the radio button loses focus.
- * 
- * @returns {JSX.Element} The rendered RadioButton component.
- */ function RadioButtonCard() {
+function RadioButtonCard() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var label = props.label, tooltip = props.tooltip, labelHidden = props.labelHidden, id = props.id, name = props.name, description = props.description, value = props.value, error = props.error, _props_checked = props.checked, checked = _props_checked === void 0 ? false : _props_checked, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur;
+    var label = props.label, tooltip = props.tooltip, labelHidden = props.labelHidden, id = props.id, name = props.name, description = props.description, value = props.value, error = props.error, _props_checked = props.checked, checked = _props_checked === void 0 ? false : _props_checked, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, _props_hideRadioButton = props.hideRadioButton, hideRadioButton = _props_hideRadioButton === void 0 ? false : _props_hideRadioButton, _props_icon = props.icon, icon = _props_icon === void 0 ? null : _props_icon, _props_allowDeselect = props.allowDeselect, allowDeselect = _props_allowDeselect === void 0 ? true : _props_allowDeselect, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, _props_labelFontWeight = props.labelFontWeight, labelFontWeight = _props_labelFontWeight === void 0 ? "semibold" : _props_labelFontWeight;
     var hasError = !!error;
     var classes = styles({
         checked: checked,
@@ -113,57 +124,71 @@ var radioStyles = tv({
             onBlur(event);
         }
     };
+    var handleLabelClick = function() {
+        if (allowDeselect && checked && !disabled) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                target: {
+                    value: null
+                }
+            });
+        }
+    };
     return /*#__PURE__*/ _jsxs("div", {
         className: "flex flex-col gap-1",
         children: [
             /*#__PURE__*/ _jsxs("label", {
                 className: classes,
+                onClick: handleLabelClick,
                 children: [
                     /*#__PURE__*/ _jsxs("div", {
-                        className: "flex flex-col gap-1",
+                        className: "flex items-center gap-4",
                         children: [
-                            label && !labelHidden && /*#__PURE__*/ _jsx(Label, {
-                                tooltip: tooltip,
-                                disabled: disabled,
-                                fontWeight: "semibold",
-                                as: "p",
-                                children: label
+                            icon && /*#__PURE__*/ _jsx("div", {
+                                className: "flex-shrink-0",
+                                children: icon
                             }),
-                            description && /*#__PURE__*/ _jsx(Text, {
-                                color: disabled ? "disabled" : "subdued",
-                                children: description
+                            /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    label && !labelHidden && /*#__PURE__*/ _jsx(Label, {
+                                        tooltip: tooltip,
+                                        disabled: disabled,
+                                        fontWeight: labelFontWeight,
+                                        as: "p",
+                                        children: label
+                                    }),
+                                    description && /*#__PURE__*/ _jsx(Text, {
+                                        color: disabled ? "disabled" : "subdued",
+                                        children: description
+                                    })
+                                ]
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ _jsx("input", {
-                                type: "radio",
-                                id: id,
-                                name: name,
-                                value: value,
-                                checked: checked,
-                                disabled: disabled,
-                                onChange: handleChange,
-                                onFocus: handleFocus,
-                                onBlur: handleBlur,
-                                className: "sr-only"
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                className: "Litho-RadioButton__ControlContainer w-5 h-5 flex items-center",
-                                children: /*#__PURE__*/ _jsxs("div", {
-                                    className: radioClasses,
-                                    children: [
-                                        checked && !hasError && /*#__PURE__*/ _jsx("div", {
-                                            className: "rounded-full w-1.5 h-1.5 ".concat(disabled ? "bg-form-input-fg-disabled" : "bg-form-input-fg-light")
-                                        }),
-                                        checked && hasError && /*#__PURE__*/ _jsx("div", {
-                                            className: "rounded-full w-1.5 h-1.5 ".concat(disabled ? "bg-form-input-fg-disabled" : "bg-form-bg")
-                                        })
-                                    ]
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "radio",
+                        id: id,
+                        name: name,
+                        value: value,
+                        checked: checked,
+                        disabled: disabled,
+                        onChange: handleChange,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        className: "sr-only"
+                    }),
+                    !hideRadioButton && /*#__PURE__*/ _jsx("div", {
+                        className: "Litho-RadioButton__ControlContainer w-5 h-5 flex items-center",
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: radioClasses,
+                            children: [
+                                checked && !hasError && /*#__PURE__*/ _jsx("div", {
+                                    className: "rounded-full w-1.5 h-1.5 ".concat(disabled ? "bg-form-input-fg-disabled" : "bg-form-input-fg-light")
+                                }),
+                                checked && hasError && /*#__PURE__*/ _jsx("div", {
+                                    className: "rounded-full w-1.5 h-1.5 ".concat(disabled ? "bg-form-input-fg-disabled" : "bg-form-bg")
                                 })
-                            })
-                        ]
+                            ]
+                        })
                     })
                 ]
             }),

package/dist/esm/components/RadioButtonCardGroup.js

@@ -0,0 +1,364 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import Text from "./Text.js";
+import Label from "./Label.js";
+import Icon from "./Icon.js";
+import { CircleAlertMajor } from "@shopify/polaris-icons";
+/**
+ * @component RadioButtonCardGroup
+ *
+ * @description A grouped radio selection component that renders options in a single bordered container with dividers between items, using card-styled radio inputs.
+ *
+ * @usage
+ * - DO: Use for single-select options that benefit from a compact grouped list layout with descriptions and icons.
+ * - DON'T: Use when each option needs its own standalone card appearance (use RadioButtonCard individually).
+ *
+ * @accessibility
+ * - Each option uses a native radio input (sr-only) wrapped in a label for keyboard accessibility and screen reader support.
+ * - All radio inputs share the same `name` attribute for native radio group behavior.
+ * - Focus-visible ring appears on keyboard navigation.
+ *
+ * @alternative
+ * - If you need standalone card-styled radio inputs, use `RadioButtonCard`.
+ * - If you need a simple inline radio/checkbox list, use `ChoiceList`.
+ *
+ * @param {Object} [props={}] - Component props.
+ * @param {string} [props.title] - Optional title rendered above the group.
+ * @param {React.ReactNode} [props.tooltip] - Tooltip content for the title.
+ * @param {boolean} [props.titleHidden=false] - Visually hides the title while keeping it accessible to screen readers.
+ * @param {Array<RadioButtonCardGroupOption>} [props.options=[]] - Array of option objects to render.
+ * @param {string} props.options[].value - The value of the option.
+ * @param {string} props.options[].label - The display label of the option.
+ * @param {string} [props.options[].description] - A description displayed below the label.
+ * @param {React.ReactNode} [props.options[].icon] - Optional icon JSX displayed on the left.
+ * @param {boolean} [props.options[].disabled=false] - Whether this specific option is disabled.
+ * @param {string|React.ReactNode} [props.options[].helpText] - Additional descriptive text for the option.
+ * @param {React.ReactNode} [props.options[].tooltip] - Tooltip content for this option's label.
+ * @param {Array<string>} [props.selected=[]] - Currently selected values. Array for API consistency with ChoiceList.
+ * @param {Function} [props.onChange] - Callback when selection changes. Receives updated array of selected values.
+ * @param {string} [props.name] - The name attribute for the radio inputs (groups them together).
+ * @param {string} [props.error] - Error message displayed below the group.
+ * @param {boolean} [props.disabled=false] - Disables all options.
+ * @param {boolean} [props.hideRadioButton=false] - Hides the radio button controls.
+ * @param {boolean} [props.allowDeselect=false] - When true, clicking a selected option deselects it.
+ * @param {"left"|"right"} [props.radioPosition="right"] - Position of the radio button control relative to the content.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered RadioButtonCardGroup component.
+ *
+ * @example
+ * <RadioButtonCardGroup
+ *   title="Select a plan"
+ *   name="plan"
+ *   options={[
+ *     { value: "basic", label: "Basic", description: "For individuals" },
+ *     { value: "pro", label: "Pro", description: "For teams" },
+ *     { value: "enterprise", label: "Enterprise", description: "For organizations" },
+ *   ]}
+ *   selected={["basic"]}
+ *   onChange={(selected) => setSelected(selected)}
+ * />
+ */ var containerStyles = tv({
+    base: "Litho-RadioButtonCardGroup border rounded-lg overflow-hidden",
+    variants: {
+        hasError: {
+            true: "border-form-border-error",
+            false: "border-edge-light"
+        }
+    },
+    defaultVariants: {
+        hasError: false
+    }
+});
+var itemStyles = tv({
+    base: "Litho-RadioButtonCardGroup__Item p-3 pl-4 flex items-center gap-3 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-form-focus has-[:focus-visible]:ring-inset",
+    variants: {
+        checked: {
+            true: "",
+            false: ""
+        },
+        disabled: {
+            true: "bg-tint-1",
+            false: "cursor-pointer hover"
+        },
+        isLast: {
+            true: "",
+            false: "border-b border-edge-subdued"
+        },
+        radioPosition: {
+            right: "justify-between",
+            left: ""
+        }
+    },
+    defaultVariants: {
+        radioPosition: "right"
+    }
+});
+// Replicated from RadioButtonCard — the radio circle control styles
+var radioStyles = tv({
+    base: "Litho-RadioButton__Control w-4.5 h-4.5 rounded-full border border-form-border flex items-center justify-center",
+    variants: {
+        disabled: {
+            true: "bg-form-bg-disabled border-form-border"
+        }
+    },
+    compoundVariants: [
+        {
+            hasError: true,
+            disabled: false,
+            checked: false,
+            class: "bg-form-bg-error border-form-border-error hover:bg-form-bg-error-low hover:ring hover:ring-form-focus-error"
+        },
+        {
+            hasError: true,
+            disabled: false,
+            checked: true,
+            class: "bg-critical border-form-border-error hover:ring hover:ring-form-focus-error"
+        },
+        {
+            hasError: false,
+            disabled: false,
+            checked: false,
+            class: "bg-form-bg border-form-border hover:border-form-border-focus hover:ring hover:ring-form-focus"
+        },
+        {
+            hasError: false,
+            disabled: false,
+            checked: true,
+            class: "bg-form-accent border-form-border-focus hover:border-form-border-focus hover:ring hover:ring-form-focus"
+        }
+    ]
+});
+function RadioButtonCardGroup() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var title = props.title, tooltip = props.tooltip, _props_titleHidden = props.titleHidden, titleHidden = _props_titleHidden === void 0 ? false : _props_titleHidden, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_selected = props.selected, selected = _props_selected === void 0 ? [] : _props_selected, onChange = props.onChange, name = props.name, error = props.error, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_hideRadioButton = props.hideRadioButton, hideRadioButton = _props_hideRadioButton === void 0 ? false : _props_hideRadioButton, _props_allowDeselect = props.allowDeselect, allowDeselect = _props_allowDeselect === void 0 ? false : _props_allowDeselect, _props_radioPosition = props.radioPosition, radioPosition = _props_radioPosition === void 0 ? "left" : _props_radioPosition, _props_labelFontWeight = props.labelFontWeight, labelFontWeight = _props_labelFontWeight === void 0 ? "semibold" : _props_labelFontWeight, restProps = _object_without_properties(props, [
+        "title",
+        "tooltip",
+        "titleHidden",
+        "options",
+        "selected",
+        "onChange",
+        "name",
+        "error",
+        "disabled",
+        "hideRadioButton",
+        "allowDeselect",
+        "radioPosition",
+        "labelFontWeight"
+    ]);
+    var hasError = !!error;
+    var containerClasses = containerStyles({
+        hasError: hasError
+    });
+    var handleOptionChange = function(optionValue) {
+        if (allowDeselect && selected.includes(optionValue)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange([]);
+        } else {
+            onChange === null || onChange === void 0 ? void 0 : onChange([
+                optionValue
+            ]);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
+        className: "Litho-RadioButtonCardGroupContainer flex flex-col gap-1"
+    }, restProps), {
+        children: [
+            title && !titleHidden && /*#__PURE__*/ _jsx(Label, {
+                as: "p",
+                tooltip: tooltip,
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: containerClasses,
+                children: options.map(function(option, index) {
+                    var isChecked = selected.includes(option.value);
+                    var isDisabled = disabled || option.disabled;
+                    var isLast = index === options.length - 1;
+                    var itemClasses = itemStyles({
+                        checked: isChecked,
+                        disabled: isDisabled,
+                        isLast: isLast,
+                        radioPosition: radioPosition
+                    });
+                    var radioClasses = radioStyles({
+                        checked: isChecked,
+                        disabled: isDisabled,
+                        hasError: hasError
+                    });
+                    return /*#__PURE__*/ _jsxs("label", {
+                        className: itemClasses,
+                        onClick: function() {
+                            if (allowDeselect && isChecked && !isDisabled) {
+                                onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                            }
+                        },
+                        children: [
+                            !hideRadioButton && radioPosition === "left" && /*#__PURE__*/ _jsx("div", {
+                                className: "Litho-RadioButton__ControlContainer w-5 h-5 flex items-center flex-shrink-0",
+                                children: /*#__PURE__*/ _jsxs("div", {
+                                    className: radioClasses,
+                                    children: [
+                                        isChecked && !hasError && /*#__PURE__*/ _jsx("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(isDisabled ? "bg-form-input-fg-disabled" : "bg-form-input-fg-light")
+                                        }),
+                                        isChecked && hasError && /*#__PURE__*/ _jsx("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(isDisabled ? "bg-form-input-fg-disabled" : "bg-form-bg")
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-4",
+                                children: [
+                                    option.icon && /*#__PURE__*/ _jsx("div", {
+                                        className: "flex-shrink-0",
+                                        children: option.icon
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            option.label && /*#__PURE__*/ _jsx(Label, {
+                                                tooltip: option.tooltip,
+                                                disabled: isDisabled,
+                                                fontWeight: labelFontWeight,
+                                                as: "p",
+                                                children: option.label
+                                            }),
+                                            option.description && /*#__PURE__*/ _jsx(Text, {
+                                                color: isDisabled ? "disabled" : "subdued",
+                                                children: option.description
+                                            }),
+                                            option.helpText && typeof option.helpText === "string" && /*#__PURE__*/ _jsx(Text, {
+                                                color: isDisabled ? "disabled" : "subdued",
+                                                variant: "bodySm",
+                                                children: option.helpText
+                                            }),
+                                            option.helpText && typeof option.helpText !== "string" && option.helpText
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "radio",
+                                name: name,
+                                value: option.value,
+                                checked: isChecked,
+                                disabled: isDisabled,
+                                onChange: function() {
+                                    return handleOptionChange(option.value);
+                                },
+                                className: "sr-only"
+                            }),
+                            !hideRadioButton && radioPosition === "right" && /*#__PURE__*/ _jsx("div", {
+                                className: "Litho-RadioButton__ControlContainer w-5 h-5 flex items-center",
+                                children: /*#__PURE__*/ _jsxs("div", {
+                                    className: radioClasses,
+                                    children: [
+                                        isChecked && !hasError && /*#__PURE__*/ _jsx("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(isDisabled ? "bg-form-input-fg-disabled" : "bg-form-input-fg-light")
+                                        }),
+                                        isChecked && hasError && /*#__PURE__*/ _jsx("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(isDisabled ? "bg-form-input-fg-disabled" : "bg-form-bg")
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }, option.value);
+                })
+            }),
+            error && /*#__PURE__*/ _jsxs("div", {
+                className: "flex gap-2 items-center",
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        source: CircleAlertMajor,
+                        color: "critical"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        color: "critical",
+                        children: error
+                    })
+                ]
+            })
+        ]
+    }));
+}
+export default RadioButtonCardGroup;

package/dist/esm/components/RangeSlider.js

@@ -51,7 +51,39 @@ import Label from "./Label.js";
 import Text from "./Text.js";
 import TextField from "./TextField.js";
 import { tv } from "tailwind-variants";
-var rangeStyles = tv({
+/**
+ * @component RangeSlider
+ *
+ * @description A slider input for selecting a numeric value within a defined range, with optional label, prefix, suffix, and numeric text field output.
+ *
+ * @usage
+ * - DO: Use for selecting a numeric value within a continuous range (e.g., volume, price, percentage).
+ * - DON'T: Use for discrete option selection (use Select or Listbox).
+ *
+ * @accessibility
+ * - Renders a native `<input type="range">` element; ensure a descriptive label is provided via the `label` prop.
+ *
+ * @alternative
+ * - If you need a text-only numeric input, use `TextField` with `type="number"`.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - The ID for the range input element.
+ * @param {string} [props.label] - Label displayed above the slider.
+ * @param {boolean} [props.labelHidden] - Whether the label is visually hidden.
+ * @param {string} [props.labelVariant] - Typography variant for the label.
+ * @param {string} [props.tooltip] - Tooltip content for the label.
+ * @param {boolean} [props.disabled] - Whether the slider is disabled.
+ * @param {number} [props.step=1] - Step increment for the slider.
+ * @param {React.ReactNode} [props.prefix] - Content displayed before the slider.
+ * @param {string} [props.prefixClasses=""] - Additional CSS classes for the prefix.
+ * @param {React.ReactNode} [props.suffix] - Content displayed in the output text field suffix.
+ * @param {number} [props.value] - The current value of the slider.
+ * @param {number} [props.min=0] - Minimum value of the slider.
+ * @param {number} [props.max=100] - Maximum value of the slider.
+ * @param {boolean} [props.output=true] - Whether to show the numeric output text field.
+ * @param {Function} [props.onChange] - Callback fired when the value changes.
+ * @returns {JSX.Element} The rendered RangeSlider component.
+ */ var rangeStyles = tv({
     base: "Litho-RangeSlider__ActiveRange absolute left-0 top-1/2 -translate-y-1/2 rounded-l-full h-1 pointer-events-none",
     variants: {
         disabled: {
@@ -87,31 +119,7 @@ function useSyncedState(externalValue) {
         setValue
     ];
 }
-/**
- * RangeSlider Component
- *
- * A range slider component that allows users to select a numeric value within a defined range.
- *
- * @component
- * @param {Object} props - The properties for the RangeSlider component.
- * @param {string} [props.id] - The unique ID for the slider. If not provided, a UUID will be generated.
- * @param {string} [props.label] - The label text displayed for the slider.
- * @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it accessible for screen readers.
- * @param {string} [props.labelVariant] - Variant of the label style.
- * @param {string} [props.tooltip] - Tooltip text for the label.
- * @param {boolean} [props.disabled=false] - Disables the slider if true.
- * @param {number} [props.step=1] - Step value for the slider increments.
- * @param {string} [props.prefix] - Text to display before the slider input.
- * @param {string} [props.prefixClasses=""] - Additional classes for the prefix text.
- * @param {string} [props.suffix] - Text to display after the slider value input.
- * @param {number} [props.value] - Initial value for the slider. Defaults to the minimum value.
- * @param {number} [props.min=0] - Minimum value of the slider.
- * @param {number} [props.max=100] - Maximum value of the slider.
- * @param {boolean} [props.output=true] - Whether to display an output field for the slider value.
- * @param {function} [props.onChange] - Callback function triggered when the slider value changes.
- *
- * @returns {JSX.Element} The rendered RangeSlider component.
- */ function RangeSlider() {
+function RangeSlider() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _id = props.id, label = props.label, labelHidden = props.labelHidden, labelVariant = props.labelVariant, tooltip = props.tooltip, disabled = props.disabled, _props_step = props.step, step = _props_step === void 0 ? 1 : _props_step, prefix = props.prefix, _props_prefixClasses = props.prefixClasses, prefixClasses = _props_prefixClasses === void 0 ? "" : _props_prefixClasses, suffix = props.suffix, initialValue = props.value, _props_min = props.min, min = _props_min === void 0 ? 0 : _props_min, _props_max = props.max, max = _props_max === void 0 ? 100 : _props_max, _props_output = props.output, output = _props_output === void 0 ? true : _props_output, onChange = props.onChange;
     var idValue = useId();