@sprinklrjs/spaceweb 10.1.0

package/popover/overrides.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInnerStyles = exports.arrowStyles = exports.getBodyStyles = exports.getPseudoElementPosition = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("./utils");
+var constants_1 = require("./constants");
+var arrowPositionStyle = function (_a, _b) {
+    var theme = _a.theme;
+    var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c;
+    var _d = (0, tslib_1.__read)((0, utils_1.splitPlacement)($placement), 1), primaryPos = _d[0];
+    if (primaryPos === 'top')
+        return { transform: 'rotate(135deg)' };
+    else if (primaryPos === 'right')
+        return { transform: 'rotate(225deg)' };
+    else if (primaryPos === 'bottom')
+        return { transform: 'rotate(315deg)' };
+    else
+        return { transform: 'rotate(45deg)' };
+};
+var getPseudoElementPosition = function (placement, popoverMargin) {
+    var _a;
+    var _b = (0, tslib_1.__read)((0, utils_1.splitPlacement)(placement), 1), primaryPos = _b[0], oppositePos = (0, utils_1.getOppositePosition)(primaryPos);
+    var isPositionedVertically = primaryPos === 'top' || primaryPos === 'bottom';
+    var fullSpaceDimension = isPositionedVertically ? 'width' : 'height', marginDimension = isPositionedVertically ? 'height' : 'width', zeroOffset = isPositionedVertically ? 'left' : 'top';
+    return _a = {},
+        _a[fullSpaceDimension] = '100%',
+        _a[marginDimension] = "".concat(popoverMargin, "px"),
+        _a[zeroOffset] = 0,
+        _a[oppositePos] = "".concat(-1 * popoverMargin, "px"),
+        _a;
+};
+exports.getPseudoElementPosition = getPseudoElementPosition;
+var getBodyStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c, _d = _b.$popoverMargin, $popoverMargin = _d === void 0 ? 0 : _d, $showArrow = _b.$showArrow, rest = (0, tslib_1.__rest)(_b, ["$placement", "$popoverMargin", "$showArrow"]);
+    return ({
+        backgroundColor: theme.spr.popup,
+        color: theme.spr.text01,
+        boxShadow: 'none',
+        borderTopLeftRadius: theme.popover.borderRadius,
+        borderTopRightRadius: theme.popover.borderRadius,
+        borderBottomRightRadius: theme.popover.borderRadius,
+        borderBottomLeftRadius: theme.popover.borderRadius,
+        '::before': (0, tslib_1.__assign)({ content: '" "', position: 'absolute' }, (0, exports.getPseudoElementPosition)($placement, $showArrow ? $popoverMargin + constants_1.ARROW_WIDTH : $popoverMargin)),
+    });
+};
+exports.getBodyStyles = getBodyStyles;
+exports.arrowStyles = [
+    function (utils) {
+        var theme = utils.theme;
+        return {
+            backgroundColor: 'transparent',
+            boxShadow: 'none',
+            zIndex: 1,
+            borderTopWidth: theme.borderWidth.default,
+            borderTopStyle: 'solid',
+            borderTopColor: theme.spr.popupBorder,
+            borderRightWidth: theme.borderWidth.default,
+            borderRightStyle: 'solid',
+            borderRightColor: theme.spr.popupBorder,
+        };
+    },
+    arrowPositionStyle,
+];
+exports.getInnerStyles = ['border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup', function (_a) {
+        var theme = _a.theme;
+        return ({
+            borderTopLeftRadius: theme.popover.borderRadius,
+            borderTopRightRadius: theme.popover.borderRadius,
+            borderBottomRightRadius: theme.popover.borderRadius,
+            borderBottomLeftRadius: theme.popover.borderRadius,
+            fontFamily: theme.fontFamily.sans,
+        });
+    }];

package/popover/package.json

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

package/popover/popover.d.ts

@@ -0,0 +1,16 @@
+import { Popover as BasePopover } from 'baseui/popover';
+import * as React from 'react';
+declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popover").PopoverProps, "overrides" | "children"> & {
+    overrides?: ({
+        Body?: import("../overrides").Override<any> | undefined;
+        Arrow?: import("../overrides").Override<any> | undefined;
+        Inner?: import("../overrides").Override<any> | undefined;
+    } & {
+        ArrowTriangle?: import("../overrides").Override<any> | undefined;
+    }) | undefined;
+    children?: React.ReactNode | ((args: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+    targetElement?: HTMLElement | null | undefined;
+} & React.RefAttributes<BasePopover>>;
+export default Popover;

package/popover/popover.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 popover_1 = require("baseui/popover");
+var React = (0, tslib_1.__importStar)(require("react"));
+var overrides_1 = require("../overrides");
+var hooks_1 = require("./hooks");
+var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
+var PopoverEnahncer_1 = require("./PopoverEnahncer");
+var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var layer_1 = require("../layer");
+var adapter_1 = require("./adapter");
+var overrides_2 = require("./overrides");
+var styled_components_1 = require("./styled-components");
+// @ts-ignore
+popover_1.Popover.displayName = 'BaseUIPopover';
+var Popover = React.forwardRef(function (_a, ref) {
+    var overrides = _a.overrides, children = _a.children, placement = _a.placement, accessibilityType = _a.accessibilityType, _b = _a.triggerType, triggerType = _b === void 0 ? 'click' : _b, _c = _a.showArrow, showArrow = _c === void 0 ? false : _c, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.focusLock, focusLock = _d === void 0 ? false : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, content = _a.content, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content"]);
+    var _f = (0, hooks_1.useContent)({ content: content }), setContentHost = _f.setContentHost, wrappedContent = _f.wrappedContent;
+    var focusLockProps = (0, hooks_1.useFocusLock)({ returnFocus: returnFocus, focusLock: focusLock });
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, styled_components_1.StyledArrowTriangle), 2), ArrowTriangle = _g[0], arrowTriangleProps = _g[1];
+    var _overrides = (0, useConvertOverrides_1.useConvertOverrides)({
+        Body: { style: overrides_2.getBodyStyles },
+        Arrow: { style: overrides_2.arrowStyles, props: { children: (0, jsx_runtime_1.jsx)(ArrowTriangle, (0, tslib_1.__assign)({}, arrowTriangleProps), void 0) } },
+        Inner: { style: overrides_2.getInnerStyles, props: { ref: setContentHost } },
+    }, overrides, [overrides, setContentHost]);
+    var mappedProps = {
+        placement: placement && adapter_1.placementMap[placement],
+        accessibilityType: accessibilityType && adapter_1.accessibilityMap[accessibilityType],
+        triggerType: triggerType && adapter_1.triggerTypeMap[triggerType],
+    };
+    var childNode = children;
+    if (typeof children === 'function') {
+        childNode = children({ isOpen: isOpen });
+    }
+    var id = (0, useUniqueId_1.default)();
+    return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_1.Z_INDEX.POPOVER }, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover, (0, tslib_1.__assign)({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, ref: ref, content: wrappedContent }, focusLockProps, { children: (0, jsx_runtime_1.jsx)(PopoverEnahncer_1.PopoverChildEnhancer, (0, tslib_1.__assign)({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+});
+Popover.displayName = 'Popover';
+exports.default = Popover;

package/popover/stateful-popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StatefulPopoverProps } from './types';
+declare function StatefulPopover(props: StatefulPopoverProps): React.ReactElement;
+declare namespace StatefulPopover {
+    var defaultProps: Partial<StatefulPopoverProps>;
+}
+export default StatefulPopover;

package/popover/stateful-popover.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 popover_1 = require("baseui/popover");
+var popover_2 = (0, tslib_1.__importDefault)(require("./popover"));
+var constants_1 = require("./constants");
+function StatefulPopover(props) {
+    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, restProps = (0, tslib_1.__rest)(props, ["children", "overrides"]);
+    return ((0, jsx_runtime_1.jsx)(popover_1.StatefulContainer, (0, tslib_1.__assign)({}, restProps, { children: function (popoverProps) { return ((0, jsx_runtime_1.jsx)(popover_2.default, (0, tslib_1.__assign)({}, popoverProps, { overrides: overrides }, { children: children }), void 0)); } }), void 0));
+}
+StatefulPopover.defaultProps = {
+    accessibilityType: 'menu',
+    ignoreBoundary: false,
+    overrides: {},
+    onMouseEnterDelay: 200,
+    onMouseLeaveDelay: constants_1.ON_MOUSE_LEAVE_DELAY,
+    placement: 'auto',
+    showArrow: false,
+    triggerType: 'click',
+    dismissOnClickOutside: true,
+    dismissOnEsc: true,
+    stateReducer: function (_, nextState) { return nextState; },
+};
+exports.default = StatefulPopover;

package/popover/styled-components.d.ts

@@ -0,0 +1,2 @@
+export { StyledInner, StyledArrow, StyledBody, StyledPadding } from 'baseui/popover';
+export declare const StyledArrowTriangle: import("../style/styled").StyledComponent;

package/popover/styled-components.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledArrowTriangle = exports.StyledPadding = exports.StyledBody = exports.StyledArrow = exports.StyledInner = void 0;
+var tslib_1 = require("tslib");
+var constants_1 = require("./constants");
+var popover_1 = require("baseui/popover");
+Object.defineProperty(exports, "StyledInner", { enumerable: true, get: function () { return popover_1.StyledInner; } });
+Object.defineProperty(exports, "StyledArrow", { enumerable: true, get: function () { return popover_1.StyledArrow; } });
+Object.defineProperty(exports, "StyledBody", { enumerable: true, get: function () { return popover_1.StyledBody; } });
+Object.defineProperty(exports, "StyledPadding", { enumerable: true, get: function () { return popover_1.StyledPadding; } });
+var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+exports.StyledArrowTriangle = (0, styled_1.default)('div', function (_a) {
+    var theme = _a.theme;
+    return ({
+        boxSizing: 'border-box',
+        borderWidth: "".concat(constants_1.ARROW_SIZE, "px"),
+        borderTopColor: theme.spr.popup,
+        borderRightColor: theme.spr.popup,
+        borderLeftColor: theme.borderColor.transparent,
+        borderBottomColor: theme.borderColor.transparent,
+        borderStyle: 'solid',
+    });
+});

package/popover/types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { PopoverProps as BasePopoverProps, StatefulPopoverProps as BaseStatefulPopoverProps, StatefulPopoverContainerProps as BaseStatefulPopoverContainerProps, PopoverOverrides as BasePopoverOverrides } from 'baseui/popover';
+import { Override } from '../overrides';
+export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children'> & {
+    overrides?: {
+        [key in keyof BasePopoverOverrides]?: Override<any>;
+    } & {
+        ArrowTriangle?: Override<any>;
+    };
+    children?: React.ReactNode | ((args: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+    targetElement?: HTMLElement | null;
+};
+export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
+    overrides?: {
+        [key in keyof BasePopoverOverrides]?: Override<any>;
+    };
+    children?: React.ReactNode | ((args: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+};
+export declare type StatefulPopoverContainerProps = Omit<BaseStatefulPopoverContainerProps, 'overrides'> & {
+    overrides?: {
+        [key in keyof BasePopoverOverrides]?: Override<any>;
+    };
+};
+export declare type AccessibilityType = 'none' | 'menu' | 'tooltip';
+export declare type TriggerType = 'click' | 'hover';
+export declare type Placement = 'auto' | 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
+export type { Offset, SharedStylePropsArg as SharedProps, StateReducer, } from 'baseui/popover';
+export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN, STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME, } from 'baseui/popover';

package/popover/types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ANIMATE_OUT_TIME = exports.ANIMATE_IN_TIME = exports.STATE_CHANGE_TYPE = exports.POPOVER_MARGIN = exports.ARROW_WIDTH = exports.ARROW_SIZE = void 0;
+var popover_1 = require("baseui/popover");
+Object.defineProperty(exports, "ARROW_SIZE", { enumerable: true, get: function () { return popover_1.ARROW_SIZE; } });
+Object.defineProperty(exports, "ARROW_WIDTH", { enumerable: true, get: function () { return popover_1.ARROW_WIDTH; } });
+Object.defineProperty(exports, "POPOVER_MARGIN", { enumerable: true, get: function () { return popover_1.POPOVER_MARGIN; } });
+Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return popover_1.STATE_CHANGE_TYPE; } });
+Object.defineProperty(exports, "ANIMATE_IN_TIME", { enumerable: true, get: function () { return popover_1.ANIMATE_IN_TIME; } });
+Object.defineProperty(exports, "ANIMATE_OUT_TIME", { enumerable: true, get: function () { return popover_1.ANIMATE_OUT_TIME; } });

package/popover/useFoucsLock.d.ts

@@ -0,0 +1,6 @@
+declare type Params = {
+    focusLock: boolean;
+    returnFocus: boolean;
+};
+export declare const useFocusLock: ({ focusLock, returnFocus }: Params) => Params;
+export {};

package/popover/useFoucsLock.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusLock = void 0;
+var useFocusLock = function (_a) {
+    var focusLock = _a.focusLock, returnFocus = _a.returnFocus;
+    var _focusLock = focusLock;
+    if (returnFocus) {
+        // according to baseui - focusLock should be true for returnFocus to work
+        _focusLock = true;
+    }
+    return { focusLock: _focusLock, returnFocus: returnFocus };
+};
+exports.useFocusLock = useFocusLock;

package/popover/utils.d.ts

@@ -0,0 +1,14 @@
+import { Placement } from './types';
+/**
+ * Splits something like 'topLeft' to ['top', 'left'] for easier usage
+ * https://github.com/uber/baseweb/blob/master/src/popover/utils.js#L58
+ */
+export declare function splitPlacement(placement: Placement): string[];
+/**
+ * Returns the opposite of the specified position. Useful for tooltip
+ * positioning logic.
+ * Examples:
+ * top -> bottom
+ * left -> right
+ */
+export declare function getOppositePosition(position: string): string;

package/popover/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOppositePosition = exports.splitPlacement = void 0;
+/**
+ * Splits something like 'topLeft' to ['top', 'left'] for easier usage
+ * https://github.com/uber/baseweb/blob/master/src/popover/utils.js#L58
+ */
+function splitPlacement(placement) {
+    var matches = placement.match(/^([a-z]+)([A-Z][a-z]+)?/) || [];
+    return matches
+        .slice(1, 3)
+        .filter(Boolean)
+        .map(function (s) { return s.toLowerCase(); });
+}
+exports.splitPlacement = splitPlacement;
+var OPPOSITE_POSITIONS = {
+    top: 'bottom',
+    bottom: 'top',
+    right: 'left',
+    left: 'right',
+};
+/**
+ * Returns the opposite of the specified position. Useful for tooltip
+ * positioning logic.
+ * Examples:
+ * top -> bottom
+ * left -> right
+ */
+function getOppositePosition(position) {
+    return OPPOSITE_POSITIONS[position];
+}
+exports.getOppositePosition = getOppositePosition;

package/progress/circular/CircularProgress.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { CircularProgressProps } from './types';
+declare const CircularProgress: ({ intent, infinite, label, backgroundColor, value, className, color, size, thickness, overrides, }: CircularProgressProps) => ReactElement;
+export default CircularProgress;

package/progress/circular/CircularProgress.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var helpers_1 = require("../../helpers");
+var overrides_1 = require("../../overrides");
+var styled_component_1 = require("./styled-component");
+var CircularProgress = function (_a) {
+    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.infinite, infinite = _c === void 0 ? false : _c, label = _a.label, backgroundColor = _a.backgroundColor, _d = _a.value, value = _d === void 0 ? 0 : _d, className = _a.className, color = _a.color, _e = _a.size, size = _e === void 0 ? 50 : _e, _f = _a.thickness, thickness = _f === void 0 ? 3 : _f, overrides = _a.overrides;
+    var strokeWidth = (styled_component_1.VIEWBOX_SIZE / size) * thickness;
+    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ intent: intent, infinite: infinite, backgroundColor: backgroundColor, value: value, color: color, size: size, thickness: thickness, strokeWidth: strokeWidth })), { $withLabel: !!label });
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _g[0], rootProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.BarContainer, styled_component_1.StyledBarContainer), 2), BarContainer = _h[0], barContainerProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Svg, styled_component_1.StyledSvg), 2), Svg = _j[0], svgProps = _j[1];
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, styled_component_1.StyledBar), 2), Bar = _k[0], barProps = _k[1];
+    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, styled_component_1.StyledProgress), 2), Progress = _l[0], progressProps = _l[1];
+    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _m[0], labelContainerProps = _m[1];
+    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _o[0], labelProps = _o[1];
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ className: className, role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, rootProps, { children: [(0, jsx_runtime_1.jsx)(BarContainer, (0, tslib_1.__assign)({ "data-testid": "bar-container" }, sharedProps, barContainerProps, { children: (0, jsx_runtime_1.jsxs)(Svg, (0, tslib_1.__assign)({ viewBox: "".concat(styled_component_1.VIEWBOX_SIZE / 2, " ").concat(styled_component_1.VIEWBOX_SIZE / 2, " ").concat(styled_component_1.VIEWBOX_SIZE, " ").concat(styled_component_1.VIEWBOX_SIZE) }, sharedProps, svgProps, { children: [(0, jsx_runtime_1.jsx)(Bar, (0, tslib_1.__assign)({ "data-testid": "bar" }, sharedProps, barProps), void 0), (0, jsx_runtime_1.jsx)(Progress, (0, tslib_1.__assign)({ inlineStyles: (0, styled_component_1.getProgressInlineStyles)({ value: value, infinite: infinite, strokeWidth: strokeWidth }) }, sharedProps, progressProps), void 0)] }), void 0) }), void 0), label ? ((0, jsx_runtime_1.jsx)(LabelContainer, (0, tslib_1.__assign)({}, sharedProps, labelContainerProps, { children: (0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0) }), void 0)) : null] }), void 0));
+};
+exports.default = CircularProgress;

package/progress/circular/index.d.ts

@@ -0,0 +1,3 @@
+import CircularProgress from './CircularProgress';
+export default CircularProgress;
+export type { CircularSharedProps, CircularProgressProps } from './types';

package/progress/circular/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var CircularProgress_1 = (0, tslib_1.__importDefault)(require("./CircularProgress"));
+exports.default = CircularProgress_1.default;

package/progress/circular/styled-component.d.ts

@@ -0,0 +1,15 @@
+export declare const getProgressInlineStyles: ({ strokeWidth, value, infinite, }: {
+    strokeWidth: number;
+    value: number;
+    infinite?: boolean | undefined;
+}) => {
+    strokeDashoffset: string;
+};
+export declare const VIEWBOX_SIZE = 44;
+export declare const StyledRoot: import("../../style/styled").StyledComponent;
+export declare const StyledBarContainer: import("../../style/styled").StyledComponent;
+export declare const StyledSvg: import("../../style/styled").StyledComponent;
+export declare const StyledBar: import("../../style/styled").StyledComponent;
+export declare const StyledProgress: import("../../style/styled").StyledComponent;
+export declare const StyledLabelContainer: import("../../style/styled").StyledComponent;
+export declare const StyledLabel: import("../../style/styled").StyledComponent;

package/progress/circular/styled-component.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLabel = exports.StyledLabelContainer = exports.StyledProgress = exports.StyledBar = exports.StyledSvg = exports.StyledBarContainer = exports.StyledRoot = exports.VIEWBOX_SIZE = exports.getProgressInlineStyles = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
+var helper_1 = require("../helper");
+/**
+ * CircularProgress styles are inspired from material-ui
+ * https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CircularProgress/CircularProgress.js
+ */
+//Setting styles inline, in order prevent multiple styletron classes creation
+var BaseProgress = function (_a) {
+    var inlineStyles = _a.inlineStyles, props = (0, tslib_1.__rest)(_a, ["inlineStyles"]);
+    return ((0, jsx_runtime_1.jsx)("circle", (0, tslib_1.__assign)({ style: inlineStyles }, props), void 0));
+};
+var getProgressInlineStyles = function (_a) {
+    var strokeWidth = _a.strokeWidth, value = _a.value, infinite = _a.infinite;
+    var circumference = 2 * Math.PI * ((exports.VIEWBOX_SIZE - strokeWidth) / 2);
+    return {
+        strokeDashoffset: "".concat((((100 - value) / 100) * circumference).toFixed(3), "px"),
+    };
+};
+exports.getProgressInlineStyles = getProgressInlineStyles;
+exports.VIEWBOX_SIZE = 44;
+exports.StyledRoot = (0, style_1.styled)('span', 'relative inline-flex', function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $size = _b.$size;
+    return ({
+        height: px2rem($size),
+        width: px2rem($size),
+    });
+});
+exports.StyledBarContainer = (0, style_1.styled)('span', 'inline-block h-full w-full', function (_a, _b) {
+    var theme = _a.theme;
+    var $color = _b.$color, $intent = _b.$intent, $infinite = _b.$infinite;
+    return ((0, tslib_1.__assign)({ color: $color || (0, helper_1.getIntentColor)($intent, theme) }, (!$infinite
+        ? {
+            transform: 'rotate(-90deg)',
+        }
+        : {
+            animationDuration: '1.4s',
+            animationIterationCount: 'infinite',
+            animationTimingFunction: 'linear',
+            animationName: {
+                '0%': {
+                    transform: 'rotate(0deg)',
+                },
+                '100%': {
+                    transform: 'rotate(360deg)',
+                },
+            },
+        })));
+});
+exports.StyledSvg = (0, style_1.styled)('svg');
+exports.StyledBar = (0, style_1.styled)('circle', function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $backgroundColor = _b.$backgroundColor, $strokeWidth = _b.$strokeWidth;
+    return ({
+        stroke: $backgroundColor || theme.spr.tag02,
+        fill: 'none',
+        cx: px2rem(exports.VIEWBOX_SIZE),
+        cy: px2rem(exports.VIEWBOX_SIZE),
+        r: px2rem((exports.VIEWBOX_SIZE - $strokeWidth) / 2),
+        strokeWidth: $strokeWidth,
+    });
+});
+exports.StyledProgress = (0, style_1.styled)(BaseProgress, 'stroke-current', { fill: 'none' }, function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $infinite = _b.$infinite, $value = _b.$value, $strokeWidth = _b.$strokeWidth;
+    var circumference = 2 * Math.PI * ((exports.VIEWBOX_SIZE - $strokeWidth) / 2);
+    return (0, tslib_1.__assign)({ cx: px2rem(exports.VIEWBOX_SIZE), cy: px2rem(exports.VIEWBOX_SIZE), r: px2rem((exports.VIEWBOX_SIZE - $strokeWidth) / 2), strokeWidth: $strokeWidth }, (!$infinite
+        ? {
+            willChange: 'strokeDashoffset',
+            transitionTimingFunction: 'ease',
+            transitionDuration: '400ms',
+            strokeDasharray: circumference.toFixed(3),
+        }
+        : {
+            animationDuration: '1.4s',
+            animationIterationCount: 'infinite',
+            animationTimingFunction: 'ease-in-out',
+            strokeDasharray: '80px, 200px',
+            strokeDashoffset: '0px',
+            animationName: {
+                '0%': {
+                    strokeDasharray: '1px, 200px',
+                    strokeDashoffset: '0px',
+                },
+                '50%': {
+                    strokeDasharray: '100px, 200px',
+                    strokeDashoffset: '-15px',
+                },
+                '100%': {
+                    strokeDasharray: '100px, 200px',
+                    strokeDashoffset: '-125px',
+                },
+            },
+        }));
+});
+exports.StyledLabelContainer = (0, style_1.styled)('div', 'absolute flex items-center justify-center inset-0');
+exports.StyledLabel = (0, style_1.styled)('div', 'typography-h6', { fontVariantNumeric: 'tabular-nums' });

package/progress/circular/types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Override } from '../../overrides';
+import { ProgressSharedProps, ProgressProps } from '../types';
+export declare type CircularSharedProps = ProgressSharedProps & {
+    $size: number;
+    $thickness: number;
+    $strokeWidth: number;
+};
+export declare type CircularProgressProps = ProgressProps & {
+    size?: number;
+    thickness?: number;
+    overrides?: {
+        Root?: Override<CircularSharedProps & Record<string, any>>;
+        LabelContainer?: Override<CircularSharedProps & Record<string, any>>;
+        Label?: Override<CircularSharedProps & Record<string, any>>;
+        Svg?: Override<CircularSharedProps & Record<string, any>>;
+        BarContainer?: Override<CircularSharedProps & Record<string, any>>;
+        Bar?: Override<CircularSharedProps & Record<string, any>>;
+        Progress?: Override<CircularSharedProps & Record<string, any>>;
+    };
+    label?: React.ReactNode | ((props: CircularSharedProps) => React.ReactNode);
+};

package/progress/circular/types.js

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

package/progress/helper.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+import { Intent } from '../types';
+export declare const getIntentColor: (intent: Intent, theme: Theme) => string;

package/progress/helper.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIntentColor = void 0;
+var getIntentColor = function (intent, theme) {
+    switch (intent) {
+        case 'error':
+            return theme.spr.supportError;
+        case 'warning':
+            return theme.spr.supportWarning;
+        case 'success':
+            return theme.spr.supportSuccess;
+        case 'default':
+        default:
+            return theme.spr.interactive01;
+    }
+};
+exports.getIntentColor = getIntentColor;

package/progress/index.d.ts

@@ -0,0 +1,6 @@
+export { default as LinearProgress } from './linear';
+export { default as CircularProgress } from './circular';
+export { ProgressSegment } from './linear';
+export * from './types';
+export * from './circular/types';
+export * from './linear/types';

package/progress/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressSegment = exports.CircularProgress = exports.LinearProgress = void 0;
+var tslib_1 = require("tslib");
+var linear_1 = require("./linear");
+Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(linear_1).default; } });
+var circular_1 = require("./circular");
+Object.defineProperty(exports, "CircularProgress", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(circular_1).default; } });
+var linear_2 = require("./linear");
+Object.defineProperty(exports, "ProgressSegment", { enumerable: true, get: function () { return linear_2.ProgressSegment; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);
+(0, tslib_1.__exportStar)(require("./circular/types"), exports);
+(0, tslib_1.__exportStar)(require("./linear/types"), exports);

package/progress/linear/LinearProgress.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement, PropsWithChildren } from 'react';
+import { LinearProgressProps } from './types';
+declare const LinearProgress: ({ intent, value, backgroundColor, color, label, className, infinite, overrides, children, }: PropsWithChildren<LinearProgressProps>) => ReactElement;
+export default LinearProgress;

package/progress/linear/LinearProgress.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var helpers_1 = require("../../helpers");
+var overrides_1 = require("../../overrides");
+var styled_component_1 = require("./styled-component");
+var LinearProgress = function (_a) {
+    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, backgroundColor = _a.backgroundColor, color = _a.color, label = _a.label, className = _a.className, _d = _a.infinite, infinite = _d === void 0 ? false : _d, overrides = _a.overrides, children = _a.children;
+    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ intent: intent, value: value, backgroundColor: backgroundColor, color: color, infinite: infinite })), { $withLabel: !!label });
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, styled_component_1.StyledBar), 2), Bar = _f[0], barProps = _f[1];
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, styled_component_1.StyledProgress), 2), Progress = _g[0], progressProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _h[0], labelProps = _h[1];
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "linear-progress", role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined, className: className }, sharedProps, rootProps, { children: [(0, jsx_runtime_1.jsx)(Bar, (0, tslib_1.__assign)({ "data-testid": "track" }, sharedProps, barProps, { children: children || ((0, jsx_runtime_1.jsx)(Progress, (0, tslib_1.__assign)({ "data-testid": "filled-track", inlineStyles: (0, styled_component_1.getProgressInlineStyles)({ value: value, infinite: infinite }) }, sharedProps, progressProps), void 0)) }), void 0), label ? ((0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0)) : null] }), void 0));
+};
+exports.default = LinearProgress;

package/progress/linear/ProgressSegment.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const ProgressSegment: import("react").ForwardRefExoticComponent<Pick<import("..").ProgressProps, "color" | "className" | "value" | "intent"> & {
+    overrides?: {
+        Progress?: import("../../overrides").Override<import("..").ProgressSharedProps & Record<string, any>> | undefined;
+    } | undefined;
+    first?: boolean | undefined;
+    last?: boolean | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export default ProgressSegment;

package/progress/linear/ProgressSegment.js

@@ -0,0 +1,16 @@
+"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 overrides_1 = require("../../overrides");
+var helpers_1 = require("../../helpers");
+var styled_component_1 = require("./styled-component");
+var ProgressSegment = (0, react_1.forwardRef)(function (_a, ref) {
+    var intent = _a.intent, color = _a.color, value = _a.value, overrides = _a.overrides, className = _a.className, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.last, last = _c === void 0 ? false : _c, props = (0, tslib_1.__rest)(_a, ["intent", "color", "value", "overrides", "className", "first", "last"]);
+    var sharedProps = (0, helpers_1.add$props)({ intent: intent, color: color, value: value, first: first, last: last });
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, styled_component_1.StyledProgress), 2), Progress = _d[0], progressProps = _d[1];
+    var mergedClassName = (0, react_1.useMemo)(function () { return [className, styled_component_1.progressSegmentStyles, progressProps.className]; }, [className, progressProps.className]);
+    return ((0, jsx_runtime_1.jsx)(Progress, (0, tslib_1.__assign)({ "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": "filled-track", ref: ref, inlineStyles: (0, styled_component_1.getProgressInlineStyles)({ value: value }) }, sharedProps, props, progressProps, { className: mergedClassName }), void 0));
+});
+exports.default = ProgressSegment;

package/progress/linear/index.d.ts

@@ -0,0 +1,4 @@
+import LinearProgress from './LinearProgress';
+export default LinearProgress;
+export { default as ProgressSegment } from './ProgressSegment';
+export * from './types';

package/progress/linear/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressSegment = void 0;
+var tslib_1 = require("tslib");
+var LinearProgress_1 = (0, tslib_1.__importDefault)(require("./LinearProgress"));
+exports.default = LinearProgress_1.default;
+var ProgressSegment_1 = require("./ProgressSegment");
+Object.defineProperty(exports, "ProgressSegment", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ProgressSegment_1).default; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);