@sprinklrjs/spaceweb 10.1.0

package/button/styled-components.js

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLoadingSpinnerContainer = exports.getButtonStyles = exports.createButtonStyles = void 0;
+var tslib_1 = require("tslib");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var style_1 = require("../style");
+var getButtonSizeTheme = function (theme, size) { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'button', size, 'lg'); };
+var getIntentTextColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'default':
+        default:
+            return theme.spr.text04;
+        case 'success':
+            return theme.spr.supportSuccessText;
+        case 'warning':
+            return theme.spr.supportWarning;
+        case 'error':
+            return theme.spr.supportErrorText;
+    }
+};
+var getIntentColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'default':
+        default:
+            return theme.spr.interactive01;
+        case 'success':
+            return theme.spr.supportSuccess;
+        case 'warning':
+            return theme.spr.supportWarning;
+        case 'error':
+            return theme.spr.supportError;
+    }
+};
+var getIntentHighlightColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'default':
+        default:
+            return theme.spr.interactiveFocus;
+        case 'success':
+            return theme.spr.supportSuccessHighlight;
+        case 'warning':
+            return theme.spr.supportWarningHighlight;
+        case 'error':
+            return theme.spr.supportErrorHighlight;
+    }
+};
+var getPrimaryHighlightColor = function (utils, props) { return ({
+    backgroundColor: getIntentHighlightColor(utils, props),
+    borderColor: getIntentHighlightColor(utils, props),
+}); };
+var getPrimaryHoverColor = function (_a) {
+    var theme = _a.theme;
+    return ({
+        backgroundColor: theme.spr.interactiveHover,
+        borderColor: theme.spr.interactiveHover,
+    });
+};
+var getBorderRadiiStyles = function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $shape = _b.$shape;
+    switch ($shape) {
+        case 'round':
+            return (0, longHandHelpers_1.borderRadius)(theme.borderRadius.full);
+        case 'square':
+            return (0, longHandHelpers_1.borderRadius)(theme.borderRadius['0']);
+        case 'pill':
+            return (0, longHandHelpers_1.borderRadius)(px2rem(theme.borderRadius['16']));
+        default:
+    }
+    return (0, longHandHelpers_1.borderRadius)(theme.button.borderRadius);
+};
+var getDimension = function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $size = _b.$size, $fullWidth = _b.$fullWidth;
+    if ($fullWidth) {
+        return { width: '100%' };
+    }
+    return {
+        minWidth: getButtonSizeTheme(theme, $size).minWidth,
+    };
+};
+var getFontStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var $size = _b.$size;
+    return getButtonSizeTheme(theme, $size).fontStyles;
+};
+var getPaddingStyles = function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $size = _b.$size, $shape = _b.$shape;
+    if ($shape === 'round') {
+        return {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+        };
+    }
+    var buttonPadding = getButtonSizeTheme(theme, $size);
+    return {
+        paddingTop: buttonPadding.paddingY,
+        paddingBottom: buttonPadding.paddingY,
+        paddingLeft: buttonPadding.paddingX,
+        paddingRight: buttonPadding.paddingX,
+    };
+};
+var createButtonStyles = function (_a, _b) {
+    var color = _a.color, hoverColor = _a.hoverColor, activeColor = _a.activeColor, disabledColor = _a.disabledColor, backgroundColor = _a.backgroundColor, disabledBackgroundColor = _a.disabledBackgroundColor, hoverBackgroundColor = _a.hoverBackgroundColor, activeBackgroundColor = _a.activeBackgroundColor, borderColor = _a.borderColor, hoverBorderColor = _a.hoverBorderColor, activeBorderColor = _a.activeBorderColor, disabledBorderColor = _a.disabledBorderColor;
+    var $disabled = _b.$disabled, $isSelected = _b.$isSelected, $isFocusVisible = _b.$isFocusVisible;
+    if ($disabled) {
+        return {
+            ':disabled': (0, tslib_1.__assign)({ color: disabledColor !== null && disabledColor !== void 0 ? disabledColor : color, backgroundColor: disabledBackgroundColor !== null && disabledBackgroundColor !== void 0 ? disabledBackgroundColor : backgroundColor }, (0, longHandHelpers_1.borderColor)(disabledBorderColor !== null && disabledBorderColor !== void 0 ? disabledBorderColor : borderColor)),
+        };
+    }
+    var hoverStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (hoverColor && { color: hoverColor })), (hoverBackgroundColor && { backgroundColor: hoverBackgroundColor })), (hoverBorderColor && (0, longHandHelpers_1.borderColor)(hoverBorderColor)));
+    var activeStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (activeColor && { color: activeColor })), (activeBackgroundColor && { backgroundColor: activeBackgroundColor })), (activeBorderColor && (0, longHandHelpers_1.borderColor)(activeBorderColor)));
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ color: color, backgroundColor: backgroundColor }, (0, longHandHelpers_1.borderColor)(borderColor)), ($isSelected && activeStyles)), { ':hover': hoverStyles }), ($isFocusVisible
+        ? {
+            ':focus': hoverStyles,
+        }
+        : {})), { ':active': activeStyles });
+};
+exports.createButtonStyles = createButtonStyles;
+var getVariantStyles = function (utils, props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+    var theme = utils.theme;
+    var $variant = props.$variant, $isFocusVisible = props.$isFocusVisible, $intent = props.$intent, $isSelected = props.$isSelected;
+    switch ($variant) {
+        case 'primary':
+        default: {
+            var _4 = getPrimaryHighlightColor(utils, props), activeBackgroundColor = _4.backgroundColor, activeBorderColor = _4.borderColor, _5 = getPrimaryHoverColor(utils), hoverBackgroundColor = _5.backgroundColor, hoverBorderColor = _5.borderColor;
+            var backgroundColor = getIntentColor(utils, props), color = theme.spr.text05, borderColor = getIntentColor(utils, props);
+            var primaryButtonTheme = ((_a = theme.button) === null || _a === void 0 ? void 0 : _a.primary) || {};
+            var defaultIntentStyles = (0, exports.createButtonStyles)({
+                color: (_b = primaryButtonTheme.color) !== null && _b !== void 0 ? _b : color,
+                backgroundColor: (_c = primaryButtonTheme.backgroundColor) !== null && _c !== void 0 ? _c : backgroundColor,
+                hoverBackgroundColor: (_d = primaryButtonTheme.hoverBackgroundColor) !== null && _d !== void 0 ? _d : hoverBackgroundColor,
+                activeBackgroundColor: (_e = primaryButtonTheme.activeBackgroundColor) !== null && _e !== void 0 ? _e : activeBackgroundColor,
+                borderColor: (_f = primaryButtonTheme.borderColor) !== null && _f !== void 0 ? _f : borderColor,
+                hoverBorderColor: (_g = primaryButtonTheme.hoverBorderColor) !== null && _g !== void 0 ? _g : hoverBorderColor,
+                activeBorderColor: (_h = primaryButtonTheme.activeBorderColor) !== null && _h !== void 0 ? _h : activeBorderColor,
+            }, props);
+            var intentStyles = (0, exports.createButtonStyles)({
+                color: color,
+                backgroundColor: backgroundColor,
+                borderColor: borderColor,
+                hoverBorderColor: hoverBorderColor,
+                activeBorderColor: activeBorderColor,
+            }, props);
+            return $intent === 'default'
+                ? defaultIntentStyles
+                : (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, intentStyles), { ':hover': { opacity: '0.8' }, ':active': { opacity: '0.8' } }), ($isFocusVisible && { ':focus': { opacity: '0.8' } }));
+        }
+        case 'secondary': {
+            var _6 = theme.button.variantSecondary, color = _6.color, hoverBackgroundColor = _6.hoverBackgroundColor, activeBackgroundColor = _6.activeBackgroundColor;
+            var secondaryButtonTheme = ((_j = theme.button) === null || _j === void 0 ? void 0 : _j.secondary) || {};
+            return (0, exports.createButtonStyles)({
+                color: (_k = secondaryButtonTheme.color) !== null && _k !== void 0 ? _k : color,
+                backgroundColor: (_l = secondaryButtonTheme.backgroundColor) !== null && _l !== void 0 ? _l : theme.spr.ui01,
+                hoverBackgroundColor: (_m = secondaryButtonTheme.hoverBackgroundColor) !== null && _m !== void 0 ? _m : hoverBackgroundColor,
+                activeBackgroundColor: (_o = secondaryButtonTheme.activeBackgroundColor) !== null && _o !== void 0 ? _o : activeBackgroundColor,
+                borderColor: (_p = secondaryButtonTheme.borderColor) !== null && _p !== void 0 ? _p : theme.spr.interactive02,
+                hoverBorderColor: (_q = secondaryButtonTheme.hoverBorderColor) !== null && _q !== void 0 ? _q : theme.spr.border06,
+                activeBorderColor: (_r = secondaryButtonTheme.activeBorderColor) !== null && _r !== void 0 ? _r : theme.spr.interactive01,
+            }, props);
+        }
+        case 'tertiary': {
+            var tertiaryButtonTheme = ((_s = theme.button) === null || _s === void 0 ? void 0 : _s.tertiary) || {};
+            return (0, exports.createButtonStyles)({
+                color: (_t = tertiaryButtonTheme.color) !== null && _t !== void 0 ? _t : getIntentTextColor(utils, props),
+                backgroundColor: (_u = tertiaryButtonTheme.backgroundColor) !== null && _u !== void 0 ? _u : theme.spr.ui01,
+                hoverBackgroundColor: (_v = tertiaryButtonTheme.hoverBackgroundColor) !== null && _v !== void 0 ? _v : theme.spr.uiHover,
+                activeBackgroundColor: (_w = tertiaryButtonTheme.activeBackgroundColor) !== null && _w !== void 0 ? _w : theme.spr.uiFocus,
+                borderColor: (_x = tertiaryButtonTheme.borderColor) !== null && _x !== void 0 ? _x : getIntentColor(utils, props),
+            }, props);
+        }
+        case 'minimal': {
+            var minimalButtonTheme = ((_y = theme.button) === null || _y === void 0 ? void 0 : _y.minimal) || {};
+            var styles = (0, exports.createButtonStyles)({
+                color: (_z = minimalButtonTheme.color) !== null && _z !== void 0 ? _z : getIntentTextColor(utils, props),
+                backgroundColor: (_0 = minimalButtonTheme.backgroundColor) !== null && _0 !== void 0 ? _0 : 'transparent',
+                hoverBackgroundColor: (_1 = minimalButtonTheme.hoverBackgroundColor) !== null && _1 !== void 0 ? _1 : theme.spr.uiHover,
+                activeBackgroundColor: (_2 = minimalButtonTheme.activeBackgroundColor) !== null && _2 !== void 0 ? _2 : theme.spr.uiFocus,
+                borderColor: (_3 = minimalButtonTheme.borderColor) !== null && _3 !== void 0 ? _3 : 'transparent',
+            }, props);
+            styles.fontWeight = theme.fontWeight.normal;
+            return styles;
+        }
+    }
+};
+var getBaseStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var _c = _b.$isLoading, $isLoading = _c === void 0 ? false : _c;
+    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderWidth)(theme.borderWidth.default)), { borderStyle: 'solid', flexDirection: $isLoading ? 'column' : 'row' }));
+};
+exports.getButtonStyles = [
+    function (utils, props) {
+        var $disabled = props.$disabled;
+        var theme = utils.theme;
+        return {
+            cursor: $disabled ? 'not-allowed' : 'pointer',
+            opacity: $disabled ? '0.6' : '1',
+            boxSizing: 'border-box',
+            outlineWidth: theme.borderWidth['0'],
+        };
+    },
+    getBaseStyles,
+    getDimension,
+    getFontStyles,
+    getPaddingStyles,
+    getVariantStyles,
+    getBorderRadiiStyles,
+];
+exports.StyledLoadingSpinnerContainer = (0, style_1.styled)('div', function (utils, props) {
+    var lineHeight = getFontStyles(utils, props).lineHeight;
+    return {
+        height: lineHeight,
+        width: lineHeight,
+    };
+});

package/button/types.d.ts

@@ -0,0 +1,49 @@
+import { ButtonOverrides as BaseUIButtonOverrides, KIND } from 'baseui/button';
+import * as React from 'react';
+import { Override, StyleOverride } from '../overrides';
+import { StatefulTooltipProps } from '../tooltip';
+import { ClassName, Intent, Variant, SpacewebComponentProps, Size } from '../types';
+import { ValueOf } from '../utility-types';
+export declare type Shape = 'default' | 'round' | 'square' | 'pill';
+export type { Size };
+export declare type ButtonOverrides = {
+    [key in keyof BaseUIButtonOverrides]?: Override<ButtonSharedProps & Record<string, any>>;
+} & {
+    StatefulTooltip?: Override<Record<string, any>>;
+};
+export declare type ButtonSharedProps = {
+    $disabled?: boolean;
+    $intent?: Intent;
+    $isLoading?: boolean;
+    $isSelected?: boolean;
+    $shape?: Shape;
+    $size?: Size;
+    $variant?: Variant;
+    $fullWidth?: boolean;
+    $isFocusVisible?: boolean;
+};
+export declare type ButtonProps = SpacewebComponentProps<{
+    $as?: React.ElementType;
+    className?: ClassName;
+    style?: StyleOverride<ButtonSharedProps>;
+    size?: Size;
+    shape?: Shape;
+    variant?: Variant;
+    intent?: Intent;
+    isLoading?: boolean;
+    isSelected?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    autoFocus?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    children?: React.ReactNode;
+    endEnhancer?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => any;
+    overrides?: ButtonOverrides;
+    startEnhancer?: React.ReactNode;
+    type?: 'submit' | 'reset' | 'button';
+    tooltipContent?: StatefulTooltipProps['content'];
+}>;
+export declare type VariantAdapterProps = Record<Variant, ValueOf<KIND>>;

package/button/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/button-group/ButtonGroup.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<Omit<{
+    children?: import("react").ReactNode;
+    className?: import("..").Styles;
+    disabled?: boolean | undefined;
+    mode?: ("checkbox" | "radio") | undefined;
+    onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, index: number) => void) | undefined;
+    overrides?: {
+        Root?: import("../overrides").Override<any> | undefined;
+    } | undefined;
+    selected?: number | number[] | undefined;
+    shape?: import("../button").Shape | undefined;
+    size?: import("..").Size | undefined;
+    intent?: import("..").Intent | undefined;
+    variant?: import("..").Variant | import("../button/IconTextButton").Variant | undefined;
+    activateOnFocus?: boolean | undefined;
+}, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & import("react").RefAttributes<HTMLElement>>;
+export default ButtonGroup;

package/button-group/ButtonGroup.js

@@ -0,0 +1,25 @@
+"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 pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
+var helpers_1 = require("../helpers");
+var overrides_1 = require("../overrides");
+var styled_components_1 = require("./styled-components");
+var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
+var useTabsKeyboardNavigation_1 = require("../hooks/useTabsKeyboardNavigation");
+var ButtonGroup = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, style = _a.style, activateOnFocus = _a.activateOnFocus, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, props = (0, tslib_1.__rest)(_a, ["className", "style", "activateOnFocus", "overrides"]);
+    var _c = (0, useTabsKeyboardNavigation_1.useTabsKeyboardNavigation)({ activateOnFocus: activateOnFocus }), parentElementRef = _c.parentElementRef, onKeyDown = _c.onKeyDown;
+    var combinedRef = (0, useCombinedRef_1.default)(ref, parentElementRef);
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _d[0], rootProps = _d[1];
+    var renderChild = (0, react_1.useMemo)(function () { return styled_components_1.renderButtonGroupChild.bind(null, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { onKeyDown: onKeyDown })); }, [props, onKeyDown]);
+    var sharedProps = (0, helpers_1.add$props)((0, pick_1.default)(props, ['intent', 'size', 'variant', 'shape', 'mode']));
+    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "button-group", className: className, style: style, ref: combinedRef }, sharedProps, rootProps, { children: react_1.Children.map(props.children, renderChild) }), void 0));
+});
+ButtonGroup.defaultProps = {
+    mode: 'radio',
+};
+ButtonGroup.displayName = 'ButtonGroup';
+exports.default = ButtonGroup;

package/button-group/StatefulButtonGroup.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+declare const StatefulButtonGroup: import("react").ForwardRefExoticComponent<Omit<{
+    children?: import("react").ReactNode;
+    className?: import("..").Styles;
+    disabled?: boolean | undefined;
+    mode?: ("checkbox" | "radio") | undefined;
+    onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, index: number) => void) | undefined;
+    overrides?: {
+        Root?: import("../overrides").Override<any> | undefined;
+    } | undefined;
+    selected?: number | number[] | undefined;
+    shape?: import("../button").Shape | undefined;
+    size?: import("..").Size | undefined;
+    intent?: import("..").Intent | undefined;
+    variant?: import("..").Variant | import("../button/IconTextButton").Variant | undefined;
+    activateOnFocus?: boolean | undefined;
+}, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    initialState?: number[] | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export default StatefulButtonGroup;

package/button-group/StatefulButtonGroup.js

@@ -0,0 +1,41 @@
+"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 ButtonGroup_1 = (0, tslib_1.__importDefault)(require("./ButtonGroup"));
+var StatefulButtonGroup = (0, react_1.forwardRef)(function (props, ref) {
+    var initialState = props.initialState, restProps = (0, tslib_1.__rest)(props, ["initialState"]);
+    var _a = (0, tslib_1.__read)((0, react_1.useState)(initialState), 2), _b = _a[0], selected = _b === void 0 ? [] : _b, setSelected = _a[1];
+    var onClick = (0, react_1.useCallback)(function (event, index) {
+        switch (props.mode) {
+            case 'checkbox':
+                if (selected.includes(index)) {
+                    setSelected(selected.filter(function (selectedIndex) { return selectedIndex !== index; }));
+                }
+                else {
+                    setSelected(selected.concat(index));
+                }
+                break;
+            case 'radio':
+                if (selected.length === 0 || !selected.includes(index)) {
+                    setSelected([index]);
+                }
+                else {
+                    setSelected([]);
+                }
+                break;
+            default:
+        }
+        if (props.onClick) {
+            props.onClick(event, index);
+        }
+    }, [props.mode, props.onClick, selected]);
+    return (0, jsx_runtime_1.jsx)(ButtonGroup_1.default, (0, tslib_1.__assign)({}, restProps, { selected: selected, onClick: onClick, ref: ref }), void 0);
+});
+StatefulButtonGroup.defaultProps = {
+    initialState: [],
+    mode: 'radio',
+};
+StatefulButtonGroup.displayName = 'StatefulButtonGroup';
+exports.default = StatefulButtonGroup;

package/button-group/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ButtonGroup } from './ButtonGroup';
+export { default as StatefulButtonGroup } from './StatefulButtonGroup';
+export type { StatefulContainer, ButtonGroupOverrides, ButtonGroupProps, InitialState, State, StatefulButtonGroupProps, } from 'baseui/button-group';
+export { StyledRoot, MODE, STATE_CHANGE_TYPE } from 'baseui/button-group';

package/button-group/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATE_CHANGE_TYPE = exports.MODE = exports.StyledRoot = exports.StatefulButtonGroup = exports.ButtonGroup = void 0;
+var ButtonGroup_1 = require("./ButtonGroup");
+Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return __importDefault(ButtonGroup_1).default; } });
+var StatefulButtonGroup_1 = require("./StatefulButtonGroup");
+Object.defineProperty(exports, "StatefulButtonGroup", { enumerable: true, get: function () { return __importDefault(StatefulButtonGroup_1).default; } });
+var button_group_1 = require("baseui/button-group");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return button_group_1.StyledRoot; } });
+Object.defineProperty(exports, "MODE", { enumerable: true, get: function () { return button_group_1.MODE; } });
+Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return button_group_1.STATE_CHANGE_TYPE; } });

package/button-group/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/button-group/index.js"
+}

package/button-group/styled-components.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { StyleObject, StyleUtils } from '../types';
+import { ButtonGroupChildProps, ButtonGroupProps } from './types';
+export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const hyperspaceButtonOverrides: (utils: StyleUtils, props: any) => StyleObject;
+export declare const renderButtonGroupChild: (props: Omit<{
+    children?: React.ReactNode;
+    className?: import("../types").Styles;
+    disabled?: boolean | undefined;
+    mode?: ("checkbox" | "radio") | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>, index: number) => void) | undefined;
+    overrides?: {
+        Root?: import("../overrides").Override<any> | undefined;
+    } | undefined;
+    selected?: number | number[] | undefined;
+    shape?: import("../button").Shape | undefined;
+    size?: import("../types").Size | undefined;
+    intent?: import("../types").Intent | undefined;
+    variant?: import("../types").Variant | import("../button/IconTextButton").Variant | undefined;
+    activateOnFocus?: boolean | undefined;
+}, "style" | "className"> & {
+    $as?: React.ElementType<any> | undefined;
+    className?: import("../types").Styles;
+    style?: import("../types").Styles;
+} & {
+    children?: React.ReactNode;
+} & {
+    onKeyDown: (event: KeyboardEvent) => void;
+}, child: {
+    props: ButtonGroupChildProps;
+}, index: number) => React.ReactElement<ButtonGroupChildProps, string | React.JSXElementConstructor<any>> | null;

package/button-group/styled-components.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderButtonGroupChild = exports.hyperspaceButtonOverrides = exports.StyledRoot = void 0;
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var isArray_1 = (0, tslib_1.__importDefault)(require("lodash/isArray"));
+var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
+var styled_components_1 = require("../button/styled-components");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var commonStyles_1 = require("../helpers/commonStyles");
+var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+// NOTE - This method is meant to be used by ButtonGroup only and not a generic one. This shouldn't be used to take style specific decisions.
+var isHyperSpaceUI = function (theme) { return theme.name.includes('hyperspace'); };
+exports.StyledRoot = (0, styled_1.default)('div', 'inline-flex items-center', function (_a) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    if (!isHyperSpaceUI(theme))
+        return {};
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: theme.spr.ui01 }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.spr.ui03)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(px2rem(8)));
+});
+var isSelected = function (selected, index) { return ((0, isArray_1.default)(selected) ? selected.includes(index) : selected === index); };
+var isAnyButtonSelected = function (selected) { return (typeof selected === 'number' && selected >= 0) || Boolean(selected === null || selected === void 0 ? void 0 : selected.length); };
+var hyperspaceButtonOverrides = function (utils, props) {
+    var theme = utils.theme, px2rem = utils.px2rem;
+    var $isIconButton = props.$isIconButton, $index = props.$index, $childrenCount = props.$childrenCount, $isSelected = props.$isSelected;
+    return (0, merge_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ marginTop: px2rem(2), marginBottom: px2rem(2), 
+        // To keep all the buttons equidistant remove marginLeft from all buttons except the first one
+        marginLeft: $index === 0 ? px2rem(3) : '0px', marginRight: $index === $childrenCount - 1 ? px2rem(3) : px2rem(2), fontSize: px2rem(12), lineHeight: px2rem(18) }, (0, longHandHelpers_1.borderRadius)(px2rem(5))), (!$isIconButton
+        ? {
+            paddingTop: px2rem(8),
+            paddingBottom: px2rem(8),
+            paddingLeft: px2rem(22),
+            paddingRight: px2rem(22),
+        }
+        : { height: px2rem(32), width: px2rem(32), marginTop: px2rem(3), marginBottom: px2rem(3) })), (0, styled_components_1.createButtonStyles)({
+        color: theme.spr.text01,
+        hoverColor: theme.spr.text01,
+        activeColor: theme.spr.text04,
+        disabledColor: $isIconButton ? theme.spr.iconDisable : theme.spr.text02,
+        borderColor: 'transparent',
+        backgroundColor: theme.spr.ui01,
+        hoverBackgroundColor: theme.spr.ui05,
+        activeBackgroundColor: theme.spr.ui05,
+    }, props)), (0, longHandHelpers_1.borderWidth)(0)), { fontWeight: $isSelected ? theme.fontWeight.bold : theme.fontWeight.regular }), (0, commonStyles_1.getFocusVisibleStyles)(utils, { $outlineOffset: '-2px' })));
+};
+exports.hyperspaceButtonOverrides = hyperspaceButtonOverrides;
+var baseButtonStyle = function (childrenCount, index, utils, props) {
+    var theme = utils.theme;
+    var $variant = props.$variant;
+    var baseStyles = { fontWeight: theme.fontWeight.normal };
+    if (isHyperSpaceUI(theme)) {
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseStyles), (0, exports.hyperspaceButtonOverrides)(utils, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { $index: index, $childrenCount: childrenCount })));
+    }
+    var borderLeftColor = $variant === 'primary'
+        ? {
+            borderLeftColor: theme.spr.border01,
+            ':hover': { borderLeftColor: theme.spr.border01 },
+            ':active': { borderLeftColor: theme.spr.border01 },
+        }
+        : { borderLeftWidth: 0 };
+    switch (index) {
+        case 0: //first button
+            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseStyles), { borderTopRightRadius: 0, borderBottomRightRadius: 0 });
+        case childrenCount - 1: //last button
+            return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseStyles), borderLeftColor), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
+        default:
+            //all middle buttons
+            return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseStyles), borderLeftColor), (0, longHandHelpers_1.borderRadius)(0));
+    }
+};
+var renderButtonGroupChild = function (props, child, index) {
+    var _a;
+    if (!React.isValidElement(child)) {
+        return null;
+    }
+    var disabled = props.disabled, onClick = props.onClick, variant = props.variant, size = props.size, children = props.children, shape = props.shape, selected = props.selected, intent = props.intent, onKeyDown = props.onKeyDown;
+    var childrenCount = React.Children.count(children);
+    var onChildClick = function (event) {
+        if (disabled) {
+            return;
+        }
+        if (child.props.onClick) {
+            child.props.onClick(event);
+        }
+        if (onClick) {
+            onClick(event, index);
+        }
+    };
+    var onChildKeyDown = function (event) {
+        var _a, _b;
+        if (disabled) {
+            return;
+        }
+        onKeyDown(event);
+        (_b = (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    };
+    return React.cloneElement(child, (0, tslib_1.__assign)({ disabled: child.props.disabled || disabled, variant: child.props.variant || variant, size: child.props.size || size, shape: child.props.shape || shape, intent: child.props.intent || intent, isSelected: isSelected(selected, index), className: [baseButtonStyle.bind(null, childrenCount, index), child.props.className], onClick: onChildClick, onKeyDown: onChildKeyDown }, (isAnyButtonSelected(selected)
+        ? { tabIndex: (_a = child.props.tabIndex) !== null && _a !== void 0 ? _a : (isSelected(selected, index) ? 0 : -1) }
+        : {})));
+};
+exports.renderButtonGroupChild = renderButtonGroupChild;

package/button-group/types.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Overrides, Override } from '../overrides';
+import { Variant, Size, ClassName, SpacewebComponentProps, Intent } from '../types';
+import { Variant as IconTextButtonVariant } from '../button/IconTextButton';
+import { Shape, ButtonSharedProps } from '../button';
+declare type ButtonGroupOverrides = {
+    Root?: Override<any>;
+};
+declare type Mode = 'checkbox' | 'radio';
+export declare type ButtonGroupProps = SpacewebComponentProps<{
+    children?: React.ReactNode;
+    className?: ClassName;
+    disabled?: boolean;
+    mode?: Mode;
+    onClick?: (event: React.MouseEvent<HTMLElement>, index: number) => void;
+    overrides?: ButtonGroupOverrides;
+    selected?: number | number[];
+    shape?: Shape;
+    size?: Size;
+    intent?: Intent;
+    variant?: Variant | IconTextButtonVariant;
+    activateOnFocus?: boolean;
+}>;
+export declare type ButtonGroupChildProps = {
+    className?: ClassName;
+    isSelected?: boolean;
+    disabled?: boolean;
+    variant?: Variant | IconTextButtonVariant;
+    size?: Size;
+    shape?: Shape;
+    intent?: Intent;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    overrides?: Overrides<ButtonSharedProps>;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    tabIndex?: number;
+};
+export declare type StatefulButtonGroupProps = ButtonGroupProps & {
+    initialState?: number[];
+};
+export {};

package/button-group/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/checkbox/basewebAdapters.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxProps, StatefulCheckboxProps } from './types';
+declare type AdaptProps = CheckboxProps | StatefulCheckboxProps;
+export default function useCheckboxAdapter(props: AdaptProps): Omit<AdaptProps, 'size' | 'className' | 'style'>;
+export {};

package/checkbox/basewebAdapters.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var helpers_1 = require("../helpers");
+var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var styled_components_1 = require("./styled-components");
+var context_1 = require("../form-control/context");
+function useCheckboxAdapter(props) {
+    var _a = (0, context_1.useContextualFormProps)(props), size = _a.size, className = _a.className, style = _a.style, overrides = _a.overrides, intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, restProps = (0, tslib_1.__rest)(_a, ["size", "className", "style", "overrides", "intent", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth"]);
+    var convertedOverrides = (0, useConvertOverrides_1.useConvertOverrides)({
+        Root: {
+            style: [className, style, styled_components_1.getRootOverrides],
+        },
+        Checkmark: {
+            style: styled_components_1.getCheckmarkOverrides,
+            props: (0, helpers_1.add$props)({ size: size, intent: intent, $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth }),
+        },
+        Label: {
+            style: styled_components_1.getLabelOverrides,
+            props: (0, helpers_1.add$props)({ size: size }),
+        },
+        // SharedProps for switch component
+        Toggle: {
+            props: (0, helpers_1.add$props)({ size: size, intent: intent }),
+        },
+        ToggleTrack: {
+            props: (0, helpers_1.add$props)({ size: size, intent: intent }),
+        },
+        // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/406 - baseui adds position absolute
+        Input: { style: { position: 'static' } },
+    }, overrides);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: convertedOverrides });
+}
+exports.default = useCheckboxAdapter;