@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/radio/radio.js

@@ -1,29 +1,107 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroup = exports.Radio = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var radio_1 = require("../baseui/radio");
 var react_1 = require("react");
-var basewebAdapters_1 = require("./basewebAdapters");
-var context_1 = require("../form-control/context");
-// @ts-ignore
-radio_1.Radio.displayName = 'BaseUIRadio';
-// @ts-ignore
-radio_1.RadioGroup.displayName = 'BaseUIRadioGroup';
-var Radio = function (props) {
-    var adaptedProps = (0, basewebAdapters_1.useRadioAdapter)(props);
-    return (0, jsx_runtime_1.jsx)(radio_1.Radio, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+var styled_components_1 = require("./styled-components");
+var overrides_1 = require("../overrides");
+var space_radio_context_1 = require("./space-radio-context");
+var useCombinedRef_1 = tslib_1.__importDefault(require("../hooks/useCombinedRef"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var style_1 = require("../style");
+var tick_1 = tslib_1.__importDefault(require("../icon/components/tick"));
+function isLabelTopLeft(labelPlacement) {
+    return labelPlacement === 'top' || labelPlacement === 'left';
+}
+function isLabelBottomRight(labelPlacement) {
+    return labelPlacement === 'bottom' || labelPlacement === 'right';
+}
+var stopPropagation = function (e) { return e.stopPropagation(); };
+var Radio = function (_a) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, className = _a.className, style = _a.style, autoFocus = _a.autoFocus, inputRef = _a.inputRef, checked = _a.checked, error = _a.error, disabled = _a.disabled, isFocusVisible = _a.isFocusVisible, isFocused = _a.isFocused, _c = _a.onMouseEnter, onMouseEnter = _c === void 0 ? noop_1.default : _c, _d = _a.onMouseLeave, onMouseLeave = _d === void 0 ? noop_1.default : _d, _e = _a.onMouseDown, onMouseDown = _e === void 0 ? noop_1.default : _e, _f = _a.onMouseUp, onMouseUp = _f === void 0 ? noop_1.default : _f, _g = _a.onBlur, onBlur = _g === void 0 ? noop_1.default : _g, _h = _a.onFocus, onFocus = _h === void 0 ? noop_1.default : _h, labelPlacement = _a.labelPlacement, tabIndex = _a.tabIndex, _j = _a.onChange, onChange = _j === void 0 ? noop_1.default : _j, description = _a.description, _k = _a.containsInteractiveElement, containsInteractiveElement = _k === void 0 ? false : _k, value = _a.value, required = _a.required, align = _a.align, name = _a.name, _l = _a.variant, variant = _l === void 0 ? 'default' : _l, props = tslib_1.__rest(_a, ["overrides", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth", "className", "style", "autoFocus", "inputRef", "checked", "error", "disabled", "isFocusVisible", "isFocused", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onBlur", "onFocus", "labelPlacement", "tabIndex", "onChange", "description", "containsInteractiveElement", "value", "required", "align", "name", "variant"]);
+    var _m = tslib_1.__read((0, react_1.useState)({
+        isActive: false,
+        isHovered: false,
+    }), 2), state = _m[0], setState = _m[1];
+    var _inputRef = (0, react_1.useRef)(null);
+    var mergedRef = (0, useCombinedRef_1.default)(_inputRef, inputRef);
+    var utils = (0, style_1.useStyle)();
+    var _o = (0, react_1.useContext)(space_radio_context_1.SpaceRadioContext), _p = _o.size, size = _p === void 0 ? 'md' : _p, intent = _o.intent;
+    (0, react_1.useEffect)(function () {
+        if (autoFocus && _inputRef.current) {
+            _inputRef.current.focus();
+        }
+    }, [autoFocus]);
+    var handleMouseEnter = (0, react_1.useCallback)(function (e) {
+        setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { isHovered: true })); });
+        onMouseEnter(e);
+    }, [setState, onMouseEnter]);
+    var handleMouseLeave = (0, react_1.useCallback)(function (e) {
+        setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { isHovered: false })); });
+        onMouseLeave(e);
+    }, [setState, onMouseLeave]);
+    var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { isActive: true })); });
+        onMouseDown(e);
+    }, [setState, onMouseDown]);
+    var handleMouseUp = (0, react_1.useCallback)(function (e) {
+        setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { isActive: false })); });
+        onMouseUp(e);
+    }, [setState, onMouseUp]);
+    var _q = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledRoot), 2), Root = _q[0], rootProps = _q[1];
+    var _r = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_components_1.StyledLabel), 2), Label = _r[0], labelProps = _r[1];
+    var _s = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Input, styled_components_1.StyledInput), 2), Input = _s[0], inputProps = _s[1];
+    var _t = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Description, styled_components_1.StyledDescription), 2), Description = _t[0], descriptionProps = _t[1];
+    var _u = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RadioMarkChecked, styled_components_1.StyledRadioMarkChecked), 2), RadioMarkChecked = _u[0], radioMarkCheckedProps = _u[1];
+    var _v = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RadioMarkInner, styled_components_1.StyledRadioMarkInner), 2), RadioMarkInner = _v[0], radioMarkInnerProps = _v[1];
+    var _w = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RadioMarkOuter, styled_components_1.StyledRadioMarkOuter), 2), RadioMarkOuter = _w[0], radioMarkOuterProps = _w[1];
+    var sharedProps = {
+        $align: align,
+        $checked: checked,
+        $disabled: disabled,
+        $hasDescription: !!description,
+        $isActive: state.isActive,
+        $error: error,
+        $isFocused: isFocused,
+        $isFocusVisible: isFocused && isFocusVisible,
+        $isHovered: state.isHovered,
+        $labelPlacement: labelPlacement,
+        $required: required,
+        $value: value,
+        $size: size,
+        $intent: intent,
+        $outlineStyle: $outlineStyle,
+        $outlineColor: $outlineColor,
+        $outlineOffset: $outlineOffset,
+        $outlineWidth: $outlineWidth,
+    };
+    var label = ((0, jsx_runtime_1.jsx)(Label, tslib_1.__assign({}, sharedProps, labelProps, { children: containsInteractiveElement ? (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Prevents the event from bubbling up to the label and moving focus to the radio button
+        (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ onClick: function (e) { return e.preventDefault(); } }, { children: props.children }))) : (props.children) })));
+    var radioMark;
+    if (variant === 'checked') {
+        if (checked) {
+            radioMark = ((0, jsx_runtime_1.jsx)(RadioMarkChecked, tslib_1.__assign({}, sharedProps, radioMarkCheckedProps, { children: (0, jsx_runtime_1.jsx)(tick_1.default, { size: size === 'large' ? 10 : 8 }) })));
+        }
+        else {
+            radioMark = (0, jsx_runtime_1.jsx)(RadioMarkOuter, tslib_1.__assign({}, sharedProps, radioMarkOuterProps));
+        }
+    }
+    else {
+        radioMark = ((0, jsx_runtime_1.jsx)(RadioMarkOuter, tslib_1.__assign({}, sharedProps, radioMarkOuterProps, { children: (0, jsx_runtime_1.jsx)(RadioMarkInner, tslib_1.__assign({}, sharedProps, radioMarkInnerProps)) })));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "radio", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp }, sharedProps, rootProps, { className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], style: [
+                    {
+                        '--sw-bg-color': (0, styled_components_1.getInnerColor)(utils, sharedProps),
+                        '--sw-border-color': (0, styled_components_1.getBorderColor)(utils, sharedProps),
+                    },
+                    style,
+                    rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
+                ] }, { children: [isLabelTopLeft(labelPlacement) && label, radioMark, (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ "aria-invalid": error || null, checked: checked, disabled: disabled, name: name, onBlur: onBlur, onFocus: onFocus, 
+                        // Prevent a second click event from firing when label is clicked.
+                        // See https://github.com/uber/baseweb/issues/3847 & https://github.com/uber/baseweb/issues/4033
+                        onClick: stopPropagation, onChange: onChange, ref: mergedRef, required: required, tabIndex: tabIndex, type: "radio", value: value }, sharedProps, inputProps)), isLabelBottomRight(labelPlacement) && label] })), !!description && ((0, jsx_runtime_1.jsx)(Description, tslib_1.__assign({}, sharedProps, descriptionProps, { children: description })))] }));
 };
-exports.Radio = Radio;
-exports.Radio.displayName = 'Radio';
-var RadioGroup = function (props) {
-    var adaptedProps = (0, basewebAdapters_1.useRadioGroupAdapter)(props);
-    var _a = (0, context_1.useContextualFormProps)(props, {
-        intent: 'default',
-    }), formIntent = _a.intent, _b = _a.size, formSize = _b === void 0 ? 'md' : _b;
-    var memoizedProviderValue = (0, react_1.useMemo)(function () { return ({ size: formSize, intent: formIntent }); }, [formSize, formIntent]);
-    return ((0, jsx_runtime_1.jsx)(basewebAdapters_1.SpaceRadioContext.Provider, (0, tslib_1.__assign)({ value: memoizedProviderValue }, { children: (0, jsx_runtime_1.jsx)(radio_1.RadioGroup, (0, tslib_1.__assign)({}, adaptedProps), void 0) }), void 0));
-};
-exports.RadioGroup = RadioGroup;
-exports.RadioGroup.displayName = 'RadioGroup';
+Radio.displayName = 'Radio';
+Radio.__standard = 'Component';
+exports.default = Radio;

package/radio/radiogroup.d.ts

@@ -0,0 +1,7 @@
+import type { RadioGroupProps } from './types';
+declare const StatelessRadioGroup: {
+    ({ name, value, disabled, autoFocus, labelPlacement, align, error, required, onChange, onMouseEnter, onMouseLeave, onFocus, onBlur, overrides, id, className, style, variant, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    __standard: string;
+};
+export default StatelessRadioGroup;

package/radio/radiogroup.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = require("./styled-components");
+var focusVisible_1 = require("../baseui/utils/focusVisible");
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var overrides_1 = require("../overrides");
+var space_radio_context_1 = require("./space-radio-context");
+var context_1 = require("../form-control/context");
+var StatelessRadioGroup = function (_a) {
+    var _b = _a.name, name = _b === void 0 ? '' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, _f = _a.labelPlacement, labelPlacement = _f === void 0 ? 'right' : _f, _g = _a.align, align = _g === void 0 ? 'vertical' : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.onChange, onChange = _k === void 0 ? noop_1.default : _k, _l = _a.onMouseEnter, onMouseEnter = _l === void 0 ? noop_1.default : _l, _m = _a.onMouseLeave, onMouseLeave = _m === void 0 ? noop_1.default : _m, _o = _a.onFocus, onFocus = _o === void 0 ? noop_1.default : _o, _p = _a.onBlur, onBlur = _p === void 0 ? noop_1.default : _p, _q = _a.overrides, overrides = _q === void 0 ? {} : _q, id = _a.id, className = _a.className, style = _a.style, _r = _a.variant, variant = _r === void 0 ? 'default' : _r, props = tslib_1.__rest(_a, ["name", "value", "disabled", "autoFocus", "labelPlacement", "align", "error", "required", "onChange", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "overrides", "id", "className", "style", "variant"]);
+    var _s = tslib_1.__read((0, react_1.useState)({
+        isFocusVisible: false,
+        focusedRadioIndex: -1,
+    }), 2), state = _s[0], setState = _s[1];
+    // intent is needed in props
+    var _t = (0, context_1.useContextualFormProps)(props, {
+        intent: 'default',
+    }), formIntent = _t.intent, _u = _t.size, formSize = _u === void 0 ? 'md' : _u;
+    var handleFocus = function (event, index) {
+        if ((0, focusVisible_1.isFocusVisible)(event)) {
+            setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { isFocusVisible: true })); });
+        }
+        setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { focusedRadioIndex: index })); });
+        onFocus && onFocus(event);
+    };
+    var handleBlur = function (event, index) {
+        if (state.isFocusVisible !== false) {
+            setState(tslib_1.__assign(tslib_1.__assign({}, state), { isFocusVisible: false }));
+        }
+        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focusedRadioIndex: -1 }));
+        onBlur && onBlur(event);
+    };
+    var _v = tslib_1.__read((0, overrides_1.useOverrides)(overrides.RadioGroupRoot, styled_components_1.StyledRadioGroupRoot), 2), RadioGroupRoot = _v[0], radioGroupRootProps = _v[1];
+    var memoizedProviderValue = (0, react_1.useMemo)(function () { return ({ size: formSize, intent: formIntent }); }, [formSize, formIntent]);
+    return ((0, jsx_runtime_1.jsx)(space_radio_context_1.SpaceRadioContext.Provider, tslib_1.__assign({ value: memoizedProviderValue }, { children: (0, jsx_runtime_1.jsx)(RadioGroupRoot, tslib_1.__assign({ id: id, role: "radiogroup", "aria-describedby": props['aria-describedby'], "aria-errormessage": props['aria-errormessage'], "aria-invalid": error || null, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "$align": align, "$disabled": disabled, "$error": error, "$required": required }, radioGroupRootProps, { style: [style, radioGroupRootProps === null || radioGroupRootProps === void 0 ? void 0 : radioGroupRootProps.style], className: [className, radioGroupRootProps === null || radioGroupRootProps === void 0 ? void 0 : radioGroupRootProps.className] }, { children: react_1.Children.map(props.children, function (child, index) {
+                if (!(0, react_1.isValidElement)(child)) {
+                    return null;
+                }
+                var checked = value === child.props.value;
+                return (0, react_1.cloneElement)(child, {
+                    align: align,
+                    autoFocus: autoFocus,
+                    checked: checked,
+                    disabled: disabled || child.props.disabled,
+                    variant: variant || child.props.variant,
+                    error: error,
+                    isFocused: state.focusedRadioIndex === index,
+                    isFocusVisible: state.isFocusVisible,
+                    tabIndex: (index === 0 && !value) || checked ? '0' : '-1',
+                    labelPlacement: labelPlacement,
+                    name: name,
+                    required: required,
+                    onBlur: function (e) { return handleBlur(e, index); },
+                    onFocus: function (e) { return handleFocus(e, index); },
+                    onChange: onChange,
+                    onMouseEnter: onMouseEnter,
+                    onMouseLeave: onMouseLeave,
+                });
+            }) })) })));
+};
+StatelessRadioGroup.displayName = 'StatelessRadioGroup';
+StatelessRadioGroup.__standard = 'Component';
+exports.default = StatelessRadioGroup;

package/radio/space-radio-context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Size } from './types';
+import { Intent } from '../types';
+export declare const SpaceRadioContext: import("react").Context<{
+    size?: Size | undefined;
+    intent?: Intent | undefined;
+}>;

package/radio/space-radio-context.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpaceRadioContext = void 0;
+var createSingletonContext_1 = require("@sprinklrjs/spaceweb/singleton/createSingletonContext");
+exports.SpaceRadioContext = (0, createSingletonContext_1.createSingletonContext)({
+    size: 'md',
+    intent: 'default',
+}, 'RadioContext');

package/radio/stateful-radiogroup.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var radiogroup_1 = tslib_1.__importDefault(require("./radiogroup"));
+var useStatefulRadioGroup_1 = tslib_1.__importDefault(require("./hooks/useStatefulRadioGroup"));
+var StatefulRadioGroup = function (props) {
+    var adaptedProps = (0, useStatefulRadioGroup_1.default)(props);
+    return (0, jsx_runtime_1.jsx)(radiogroup_1.default, tslib_1.__assign({}, adaptedProps));
+};
+StatefulRadioGroup.displayName = 'StatefulRadioGroup';
+exports.default = StatefulRadioGroup;

package/radio/styled-components.d.ts

@@ -1,7 +1,12 @@
-import { StyleFn } from '../types';
+import { StyleUtils } from '../types';
 import { SharedProps } from './types';
-import { OutlineProps } from '../helpers/commonStyles';
-export declare const getRadioMarkInnerStyles: StyleFn<SharedProps>;
-export declare const getRadioMarkOuterStyles: StyleFn<SharedProps & OutlineProps>;
-export declare const getRadioLabelStyles: StyleFn<SharedProps>;
-export declare const getRootStyles: StyleFn<SharedProps>;
+export declare const getBorderColor: (utils: StyleUtils, props: SharedProps) => string;
+export declare const getInnerColor: (utils: StyleUtils, props: SharedProps) => string;
+export declare const StyledRadioGroupRoot: import("../style").StyledComponent;
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledRadioMarkChecked: import("../style").StyledComponent;
+export declare const StyledRadioMarkInner: import("../style").StyledComponent;
+export declare const StyledRadioMarkOuter: import("../style").StyledComponent;
+export declare const StyledLabel: import("../style").StyledComponent;
+export declare const StyledInput: import("../style").StyledComponent;
+export declare const StyledDescription: import("../style").StyledComponent;

package/radio/styled-components.js

@@ -1,143 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRootStyles = exports.getRadioLabelStyles = exports.getRadioMarkOuterStyles = exports.getRadioMarkInnerStyles = void 0;
-var tslib_1 = require("tslib");
+exports.StyledDescription = exports.StyledInput = exports.StyledLabel = exports.StyledRadioMarkOuter = exports.StyledRadioMarkInner = exports.StyledRadioMarkChecked = exports.StyledRoot = exports.StyledRadioGroupRoot = exports.getInnerColor = exports.getBorderColor = void 0;
+var neutral400Hex_1 = require("../input/neutral400Hex");
 var intentHelper_1 = require("../helpers/intentHelper");
-var commonStyles_1 = require("../helpers/commonStyles");
 var helpers_1 = require("../helpers");
+var style_1 = require("../style");
+var cvaConfigs_1 = require("./cvaConfigs");
 var getBorderColor = function (utils, props) {
     var theme = utils.theme;
     var $disabled = props.$disabled, $intent = props.$intent, $checked = props.$checked, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
-    if ($disabled && $intent !== 'default')
-        return (0, helpers_1.hex2rgb)((0, intentHelper_1.intentColor)(utils, props), '0.5');
+    var isDefaultIntent = $intent === 'default';
+    var isUserInteracting = $isHovered || $isFocusVisible;
     if (!$checked) {
         if ($disabled)
-            return theme.spr.icon03;
-        if ($intent !== 'default')
-            return (0, intentHelper_1.intentColor)(utils, props);
-        if ($isHovered || $isFocusVisible)
-            return theme.spr.border06;
-        return theme.spr.border04;
-    }
-    if ($disabled) {
-        return (0, helpers_1.hex2rgb)(theme.spr.focus01, '0.5');
-    }
+            return (0, neutral400Hex_1.getNeutral400Hex)(theme);
+        if (isDefaultIntent) {
+            if (isUserInteracting)
+                return theme.spr.borderQuaternary;
+            return (0, neutral400Hex_1.getNeutral400Hex)(theme);
+        }
+        return (0, intentHelper_1.intentColor)(utils, props);
+    }
+    if ($disabled)
+        return (0, helpers_1.hex2rgb)((0, intentHelper_1.intentColor)(utils, props), '0.33');
+    if (isDefaultIntent && isUserInteracting)
+        return theme.spr.interactiveHover;
     return (0, intentHelper_1.intentColor)(utils, props);
 };
+exports.getBorderColor = getBorderColor;
 var getInnerColor = function (utils, props) {
-    var $disabled = props.$disabled, $checked = props.$checked;
+    var theme = utils.theme;
+    var $disabled = props.$disabled, $intent = props.$intent, $checked = props.$checked, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
+    var isDefaultIntent = $intent === 'default';
+    var isUserInteracting = $isHovered || $isFocusVisible;
     if (!$checked)
         return 'transparent';
-    if ($disabled) {
-        if ($checked)
-            return (0, helpers_1.hex2rgb)((0, intentHelper_1.intentColor)(utils, props), '0.5');
-        return 'transparent';
-    }
+    if ($disabled)
+        return (0, helpers_1.hex2rgb)((0, intentHelper_1.intentColor)(utils, props), '0.33');
+    if (isDefaultIntent && isUserInteracting)
+        return theme.spr.interactiveHover;
     return (0, intentHelper_1.intentColor)(utils, props);
 };
-var getRadioMarkInnerStyles = function (utils, props) {
-    var px2rem = utils.px2rem;
-    var $size = props.$size;
-    var styles = {
-        backgroundColor: getInnerColor(utils, props),
-        height: px2rem(8),
-        width: px2rem(8),
-    };
-    switch ($size) {
-        case 'sm':
-            styles.height = styles.width = px2rem(6);
-            break;
-        case 'lg':
-            styles.height = styles.width = px2rem(10);
-            break;
-        default:
-            break;
-    }
-    return styles;
-};
-exports.getRadioMarkInnerStyles = getRadioMarkInnerStyles;
-var getRadioMarkOuterStyles = function (utils, props) {
-    var px2rem = utils.px2rem, theme = utils.theme;
-    var $checked = props.$checked, $size = props.$size, $isFocusVisible = props.$isFocusVisible, $outlineStyle = props.$outlineStyle, $outlineColor = props.$outlineColor, $outlineOffset = props.$outlineOffset, $outlineWidth = props.$outlineWidth;
-    var styles = (0, tslib_1.__assign)({ boxSizing: 'border-box', borderWidth: $checked ? px2rem(2) : px2rem(1), borderStyle: 'solid', backgroundColor: 'transparent', borderColor: getBorderColor(utils, props), height: px2rem(16), width: px2rem(16) }, ($isFocusVisible
-        ? (0, tslib_1.__assign)({ boxShadow: 'none', transitionDuration: '0ms' }, (0, commonStyles_1.getOutlineStyles)(utils, { $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth })) : {}));
-    switch ($size) {
-        case 'sm':
-            styles.height = styles.width = px2rem(14);
-            break;
-        case 'lg':
-            styles.height = styles.width = px2rem(18);
-            break;
-        default:
-            break;
-    }
-    return styles;
-};
-exports.getRadioMarkOuterStyles = getRadioMarkOuterStyles;
-var getRadioLabelStyles = function (_a, _b) {
-    var _c;
-    var px2rem = _a.px2rem;
-    var $labelPlacement = _b.$labelPlacement, $size = _b.$size;
-    var paddingDirection;
-    switch ($labelPlacement) {
-        case 'top':
-            paddingDirection = 'Bottom';
-            break;
-        case 'bottom':
-            paddingDirection = 'Top';
-            break;
-        case 'left':
-            paddingDirection = 'Right';
-            break;
-        default:
-        case 'right':
-            paddingDirection = 'Left';
-            break;
-    }
-    var styles = (_c = {
-            fontSize: px2rem(13)
-        },
-        _c["padding".concat(paddingDirection)] = px2rem(6),
-        _c.wordBreak = 'break-word',
-        _c);
-    switch ($size) {
-        case 'sm':
-            styles.fontSize = px2rem(12);
-            styles["padding".concat(paddingDirection)] = px2rem(6);
-            break;
-        case 'lg':
-            styles.fontSize = px2rem(14);
-            styles["padding".concat(paddingDirection)] = px2rem(8);
-            break;
-        default:
-            break;
-    }
-    return styles;
-};
-exports.getRadioLabelStyles = getRadioLabelStyles;
-var getRootStyles = function (_a, _b) {
-    var _c;
-    var px2rem = _a.px2rem;
-    var $align = _b.$align, $hasDescription = _b.$hasDescription, $size = _b.$size;
-    var isHorizontal = $align === 'horizontal';
-    var directionMargin = 'Right';
-    var styles = (_c = {},
-        _c["margin".concat(directionMargin)] = isHorizontal ? px2rem(30) : undefined,
-        _c.marginTop = '0px',
-        _c.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(6),
-        _c);
-    switch ($size) {
-        case 'md':
-            styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(38) : undefined;
-            styles.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(8);
-            break;
-        case 'lg':
-            styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(46) : undefined;
-            styles.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(10);
-            break;
-        default:
-            break;
-    }
-    return styles;
-};
-exports.getRootStyles = getRootStyles;
+exports.getInnerColor = getInnerColor;
+exports.StyledRadioGroupRoot = (0, style_1.styled)('div', cvaConfigs_1.radioGroupRootCVA);
+exports.StyledRadioGroupRoot.displayName = 'RadioGroupRoot';
+exports.StyledRoot = (0, style_1.styled)('label', cvaConfigs_1.radioRootCVA);
+exports.StyledRoot.displayName = 'Root';
+exports.StyledRadioMarkChecked = (0, style_1.styled)('span', cvaConfigs_1.radioMarkerCheckedCVA);
+exports.StyledRadioMarkChecked.displayName = 'RadioMarkChecked';
+exports.StyledRadioMarkInner = (0, style_1.styled)('div', cvaConfigs_1.radioMarkerInnerCVA);
+exports.StyledRadioMarkInner.displayName = 'RadioMarkInner';
+exports.StyledRadioMarkOuter = (0, style_1.styled)('div', cvaConfigs_1.radioMarkerOuterCVA);
+exports.StyledRadioMarkOuter.displayName = 'RadioMarkOuter';
+exports.StyledLabel = (0, style_1.styled)('div', cvaConfigs_1.radioLabelCVA);
+exports.StyledLabel.displayName = 'Label';
+exports.StyledInput = (0, style_1.styled)('input', 'sr-only');
+exports.StyledInput.displayName = 'Input';
+exports.StyledDescription = (0, style_1.styled)('div', 'cursor-auto max-w-sm');
+exports.StyledDescription.displayName = 'Description';

package/radio/types.d.ts

@@ -1,43 +1,131 @@
 import * as React from 'react';
-import { RadioGroupProps as BaseRadioGroupProps, RadioProps as BaseRadioProps, RadioOverrides, RadioGroupOverrides } from '../baseui/radio';
+import { ALIGN } from './constants';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
 import { OutlineProps } from '../helpers/commonStyles';
-export declare type Alignment = 'horizontal' | 'vertical';
-export declare type LabelPosition = 'top' | 'right' | 'bottom' | 'left';
-export declare type Size = 'sm' | 'md' | 'lg';
-export declare type SharedProps = {
+export type Alignment = 'horizontal' | 'vertical';
+export type LabelPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type Align = keyof typeof ALIGN;
+/** @deprecated */
+type DeprecatedSize = 'sm' | 'md' | 'lg';
+export type Size = 'medium' | 'large' | DeprecatedSize;
+/** @deprecated */
+type DeprecatedRadioIntent = 'success' | 'warning' | 'ai';
+export type RadioIntent = Exclude<Intent, DeprecatedRadioIntent> | DeprecatedRadioIntent;
+export type Variant = 'default' | 'checked';
+export type State = {
+    value?: string;
+};
+export type RadioState = {
+    isActive: boolean;
+    isHovered: boolean;
+};
+export type StateReducer = (stateType: string, nextState: State, currentState: State, event: React.ChangeEvent<HTMLInputElement>) => State;
+export type StatelessState = {
+    isFocusVisible: boolean;
+    focusedRadioIndex: number;
+};
+export type SharedProps = {
+    /** @deprecated */
     $align?: Alignment;
     $checked?: boolean;
     $disabled?: boolean;
     $hasDescription?: boolean;
     $isActive?: boolean;
-    $intent?: Intent;
+    $intent?: RadioIntent;
     $isFocused?: boolean;
     $isFocusVisible?: boolean;
     $isHovered?: boolean;
+    /** @deprecated */
     $labelPlacement?: string;
     $required?: boolean;
     $value?: string;
     $size?: Size;
 };
-declare type CommonProps = {
+export type RadioOverrides = {
+    RadioMarkChecked?: Override<SharedProps>;
+    RadioMarkInner?: Override<SharedProps>;
+    RadioMarkOuter?: Override<SharedProps>;
+    Label?: Override<SharedProps>;
+    Root?: Override<SharedProps>;
+    Input?: Override<SharedProps>;
+    Description?: Override<SharedProps>;
+};
+export type RadioGroupOverrides = {
+    RadioGroupRoot?: Override<SharedProps>;
+};
+export type BaseRadioProps = {
+    autoFocus?: boolean;
+    /** @deprecated */
+    align?: Align;
+    checked?: boolean;
+    children?: React.ReactNode;
+    size?: Size;
+    intent?: RadioIntent;
+    containsInteractiveElement?: boolean;
+    description?: string;
+    disabled?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+    error?: boolean;
+    isFocused?: boolean;
+    isFocusVisible?: boolean;
+    /** @deprecated */
+    labelPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    name?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
     onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    onMouseDown?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseUp?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    overrides?: RadioOverrides;
+    required?: boolean;
+    value?: string;
+    tabIndex?: string;
+    variant?: Variant;
+};
+export type RadioProps = SpacewebComponentProps<BaseRadioProps> & OutlineProps;
+export type BaseRadioGroupProps = {
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    overrides?: RadioGroupOverrides;
+    children?: Array<React.ReactNode>;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    autoFocus?: boolean;
+    /** @deprecated */
+    align?: Align;
+    name?: string;
+    /** @deprecated */
+    labelPlacement?: LabelPlacement;
+    id?: string;
     size?: Size;
-    intent?: Intent;
+    intent?: RadioIntent;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    variant?: Variant;
+};
+export type RadioGroupProps = SpacewebComponentProps<BaseRadioGroupProps>;
+export type StatefulContainerProps = {
+    overrides?: RadioGroupOverrides;
+    initialState?: State;
+    stateReducer?: StateReducer;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    autoFocus?: boolean;
+};
+export type StatefulRadioGroupProps = {
+    overrides?: RadioGroupOverrides;
+    children?: Array<React.ReactNode>;
+    initialState?: State;
+    autoFocus?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
 };
-export declare type RadioProps = SpacewebComponentProps<Omit<BaseRadioProps, 'overrides' | 'isError' | keyof CommonProps>> & {
-    overrides?: {
-        [key in keyof RadioOverrides]?: Override<SharedProps>;
-    };
-    inputRef?: React.Ref<HTMLInputElement>;
-} & OutlineProps & CommonProps;
-export declare type RadioGroupProps = SpacewebComponentProps<Omit<BaseRadioGroupProps, 'overrides' | keyof CommonProps>> & {
-    overrides?: {
-        [key in keyof RadioGroupOverrides]?: Override<SharedProps>;
-    };
-} & CommonProps;
 export {};

package/search/cvaConfigs.d.ts

@@ -0,0 +1 @@
+export declare const rootCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;