@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/esm/radio/radio.d.ts

@@ -1,10 +1,7 @@
-import { ReactElement } from 'react';
-import { RadioGroupProps, RadioProps } from './types';
-export declare const Radio: {
-    (props: RadioProps): ReactElement;
-    displayName: string;
-};
-export declare const RadioGroup: {
-    (props: RadioGroupProps): ReactElement;
+import type { RadioProps } from './types';
+declare const Radio: {
+    ({ 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, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
+    __standard: string;
 };
+export default Radio;

package/esm/radio/radio.js

@@ -1,24 +1,105 @@
-import { __assign } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Radio as BaseRadio, RadioGroup as BaseRadioGroup } from '../baseui/radio';
-import { useMemo } from 'react';
-import { useRadioGroupAdapter, useRadioAdapter, SpaceRadioContext } from './basewebAdapters';
-import { useContextualFormProps } from '../form-control/context';
-// @ts-ignore
-BaseRadio.displayName = 'BaseUIRadio';
-// @ts-ignore
-BaseRadioGroup.displayName = 'BaseUIRadioGroup';
-export var Radio = function (props) {
-    var adaptedProps = useRadioAdapter(props);
-    return _jsx(BaseRadio, __assign({}, adaptedProps), void 0);
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { StyledRoot, StyledLabel, StyledInput, StyledRadioMarkChecked, StyledRadioMarkInner, StyledRadioMarkOuter, StyledDescription, getInnerColor, getBorderColor, } from './styled-components';
+import { useOverrides } from '../overrides';
+import { SpaceRadioContext } from './space-radio-context';
+import useCombinedRefs from '../hooks/useCombinedRef';
+import _noop from 'lodash/noop';
+import { useStyle } from '../style';
+import TickIcon from '../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 : _c, _d = _a.onMouseLeave, onMouseLeave = _d === void 0 ? _noop : _d, _e = _a.onMouseDown, onMouseDown = _e === void 0 ? _noop : _e, _f = _a.onMouseUp, onMouseUp = _f === void 0 ? _noop : _f, _g = _a.onBlur, onBlur = _g === void 0 ? _noop : _g, _h = _a.onFocus, onFocus = _h === void 0 ? _noop : _h, labelPlacement = _a.labelPlacement, tabIndex = _a.tabIndex, _j = _a.onChange, onChange = _j === void 0 ? _noop : _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 = __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 = __read(useState({
+        isActive: false,
+        isHovered: false,
+    }), 2), state = _m[0], setState = _m[1];
+    var _inputRef = useRef(null);
+    var mergedRef = useCombinedRefs(_inputRef, inputRef);
+    var utils = useStyle();
+    var _o = useContext(SpaceRadioContext), _p = _o.size, size = _p === void 0 ? 'md' : _p, intent = _o.intent;
+    useEffect(function () {
+        if (autoFocus && _inputRef.current) {
+            _inputRef.current.focus();
+        }
+    }, [autoFocus]);
+    var handleMouseEnter = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isHovered: true })); });
+        onMouseEnter(e);
+    }, [setState, onMouseEnter]);
+    var handleMouseLeave = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isHovered: false })); });
+        onMouseLeave(e);
+    }, [setState, onMouseLeave]);
+    var handleMouseDown = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isActive: true })); });
+        onMouseDown(e);
+    }, [setState, onMouseDown]);
+    var handleMouseUp = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isActive: false })); });
+        onMouseUp(e);
+    }, [setState, onMouseUp]);
+    var _q = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _q[0], rootProps = _q[1];
+    var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _r[0], labelProps = _r[1];
+    var _s = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Input, StyledInput), 2), Input = _s[0], inputProps = _s[1];
+    var _t = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Description, StyledDescription), 2), Description = _t[0], descriptionProps = _t[1];
+    var _u = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.RadioMarkChecked, StyledRadioMarkChecked), 2), RadioMarkChecked = _u[0], radioMarkCheckedProps = _u[1];
+    var _v = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.RadioMarkInner, StyledRadioMarkInner), 2), RadioMarkInner = _v[0], radioMarkInnerProps = _v[1];
+    var _w = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.RadioMarkOuter, 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 = (_jsx(Label, __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
+        _jsx("div", __assign({ onClick: function (e) { return e.preventDefault(); } }, { children: props.children }))) : (props.children) })));
+    var radioMark;
+    if (variant === 'checked') {
+        if (checked) {
+            radioMark = (_jsx(RadioMarkChecked, __assign({}, sharedProps, radioMarkCheckedProps, { children: _jsx(TickIcon, { size: size === 'large' ? 10 : 8 }) })));
+        }
+        else {
+            radioMark = _jsx(RadioMarkOuter, __assign({}, sharedProps, radioMarkOuterProps));
+        }
+    }
+    else {
+        radioMark = (_jsx(RadioMarkOuter, __assign({}, sharedProps, radioMarkOuterProps, { children: _jsx(RadioMarkInner, __assign({}, sharedProps, radioMarkInnerProps)) })));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, __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': getInnerColor(utils, sharedProps),
+                        '--sw-border-color': getBorderColor(utils, sharedProps),
+                    },
+                    style,
+                    rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
+                ] }, { children: [isLabelTopLeft(labelPlacement) && label, radioMark, _jsx(Input, __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 && (_jsx(Description, __assign({}, sharedProps, descriptionProps, { children: description })))] }));
 };
 Radio.displayName = 'Radio';
-export var RadioGroup = function (props) {
-    var adaptedProps = useRadioGroupAdapter(props);
-    var _a = useContextualFormProps(props, {
-        intent: 'default',
-    }), formIntent = _a.intent, _b = _a.size, formSize = _b === void 0 ? 'md' : _b;
-    var memoizedProviderValue = useMemo(function () { return ({ size: formSize, intent: formIntent }); }, [formSize, formIntent]);
-    return (_jsx(SpaceRadioContext.Provider, __assign({ value: memoizedProviderValue }, { children: _jsx(BaseRadioGroup, __assign({}, adaptedProps), void 0) }), void 0));
-};
-RadioGroup.displayName = 'RadioGroup';
+Radio.__standard = 'Component';
+export default Radio;

package/esm/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/esm/radio/radiogroup.js

@@ -0,0 +1,64 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useMemo, useState } from 'react';
+import { StyledRadioGroupRoot } from './styled-components';
+import { isFocusVisible } from '../baseui/utils/focusVisible';
+import _noop from 'lodash/noop';
+import { useOverrides } from '../overrides';
+import { SpaceRadioContext } from './space-radio-context';
+import { useContextualFormProps } from '../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 : _k, _l = _a.onMouseEnter, onMouseEnter = _l === void 0 ? _noop : _l, _m = _a.onMouseLeave, onMouseLeave = _m === void 0 ? _noop : _m, _o = _a.onFocus, onFocus = _o === void 0 ? _noop : _o, _p = _a.onBlur, onBlur = _p === void 0 ? _noop : _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 = __rest(_a, ["name", "value", "disabled", "autoFocus", "labelPlacement", "align", "error", "required", "onChange", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "overrides", "id", "className", "style", "variant"]);
+    var _s = __read(useState({
+        isFocusVisible: false,
+        focusedRadioIndex: -1,
+    }), 2), state = _s[0], setState = _s[1];
+    // intent is needed in props
+    var _t = useContextualFormProps(props, {
+        intent: 'default',
+    }), formIntent = _t.intent, _u = _t.size, formSize = _u === void 0 ? 'md' : _u;
+    var handleFocus = function (event, index) {
+        if (isFocusVisible(event)) {
+            setState(function (prevState) { return (__assign(__assign({}, prevState), { isFocusVisible: true })); });
+        }
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { focusedRadioIndex: index })); });
+        onFocus && onFocus(event);
+    };
+    var handleBlur = function (event, index) {
+        if (state.isFocusVisible !== false) {
+            setState(__assign(__assign({}, state), { isFocusVisible: false }));
+        }
+        setState(__assign(__assign({}, state), { focusedRadioIndex: -1 }));
+        onBlur && onBlur(event);
+    };
+    var _v = __read(useOverrides(overrides.RadioGroupRoot, StyledRadioGroupRoot), 2), RadioGroupRoot = _v[0], radioGroupRootProps = _v[1];
+    var memoizedProviderValue = useMemo(function () { return ({ size: formSize, intent: formIntent }); }, [formSize, formIntent]);
+    return (_jsx(SpaceRadioContext.Provider, __assign({ value: memoizedProviderValue }, { children: _jsx(RadioGroupRoot, __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: Children.map(props.children, function (child, index) {
+                if (!isValidElement(child)) {
+                    return null;
+                }
+                var checked = value === child.props.value;
+                return 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';
+export default StatelessRadioGroup;

package/esm/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/esm/radio/space-radio-context.js

@@ -0,0 +1,5 @@
+import { createSingletonContext } from '@sprinklrjs/spaceweb/singleton/createSingletonContext';
+export var SpaceRadioContext = createSingletonContext({
+    size: 'md',
+    intent: 'default',
+}, 'RadioContext');

package/esm/radio/stateful-radiogroup.js

@@ -0,0 +1,10 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import RadioGroup from './radiogroup';
+import useStatefulRadioGroup from './hooks/useStatefulRadioGroup';
+var StatefulRadioGroup = function (props) {
+    var adaptedProps = useStatefulRadioGroup(props);
+    return _jsx(RadioGroup, __assign({}, adaptedProps));
+};
+StatefulRadioGroup.displayName = 'StatefulRadioGroup';
+export default StatefulRadioGroup;

package/esm/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/esm/radio/styled-components.js

@@ -1,136 +1,55 @@
-import { __assign } from "tslib";
+import { getNeutral400Hex } from '../input/neutral400Hex';
 import { intentColor } from '../helpers/intentHelper';
-import { getOutlineStyles } from '../helpers/commonStyles';
 import { hex2rgb } from '../helpers';
-var getBorderColor = function (utils, props) {
+import { styled } from '../style';
+import { radioGroupRootCVA, radioLabelCVA, radioMarkerCheckedCVA, radioMarkerInnerCVA, radioMarkerOuterCVA, radioRootCVA, } from './cvaConfigs';
+export 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 hex2rgb(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 intentColor(utils, props);
-        if ($isHovered || $isFocusVisible)
-            return theme.spr.border06;
-        return theme.spr.border04;
-    }
-    if ($disabled) {
-        return hex2rgb(theme.spr.focus01, '0.5');
-    }
+            return getNeutral400Hex(theme);
+        if (isDefaultIntent) {
+            if (isUserInteracting)
+                return theme.spr.borderQuaternary;
+            return getNeutral400Hex(theme);
+        }
+        return intentColor(utils, props);
+    }
+    if ($disabled)
+        return hex2rgb(intentColor(utils, props), '0.33');
+    if (isDefaultIntent && isUserInteracting)
+        return theme.spr.interactiveHover;
     return intentColor(utils, props);
 };
-var getInnerColor = function (utils, props) {
-    var $disabled = props.$disabled, $checked = props.$checked;
+export var getInnerColor = function (utils, props) {
+    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 hex2rgb(intentColor(utils, props), '0.5');
-        return 'transparent';
-    }
+    if ($disabled)
+        return hex2rgb(intentColor(utils, props), '0.33');
+    if (isDefaultIntent && isUserInteracting)
+        return theme.spr.interactiveHover;
     return intentColor(utils, props);
 };
-export 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;
-};
-export 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 = __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
-        ? __assign({ boxShadow: 'none', transitionDuration: '0ms' }, 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;
-};
-export 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;
-};
-export 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;
-};
+export var StyledRadioGroupRoot = styled('div', radioGroupRootCVA);
+StyledRadioGroupRoot.displayName = 'RadioGroupRoot';
+export var StyledRoot = styled('label', radioRootCVA);
+StyledRoot.displayName = 'Root';
+export var StyledRadioMarkChecked = styled('span', radioMarkerCheckedCVA);
+StyledRadioMarkChecked.displayName = 'RadioMarkChecked';
+export var StyledRadioMarkInner = styled('div', radioMarkerInnerCVA);
+StyledRadioMarkInner.displayName = 'RadioMarkInner';
+export var StyledRadioMarkOuter = styled('div', radioMarkerOuterCVA);
+StyledRadioMarkOuter.displayName = 'RadioMarkOuter';
+export var StyledLabel = styled('div', radioLabelCVA);
+StyledLabel.displayName = 'Label';
+export var StyledInput = styled('input', 'sr-only');
+StyledInput.displayName = 'Input';
+export var StyledDescription = styled('div', 'cursor-auto max-w-sm');
+StyledDescription.displayName = 'Description';

package/esm/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/esm/search/cvaConfigs.d.ts

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