@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/checkbox/index.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var checkbox_1 = require("./checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
 Object.defineProperty(exports, "StatefulCheckbox", { enumerable: true, get: function () { return checkbox_1.StatefulCheckbox; } });
-var checkbox_2 = require("baseui/checkbox");
+var checkbox_2 = require("../baseui/checkbox");
 Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return checkbox_2.StatefulContainer; } });
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return checkbox_2.StyledRoot; } });
 Object.defineProperty(exports, "StyledCheckmark", { enumerable: true, get: function () { return checkbox_2.StyledCheckmark; } });
@@ -13,7 +13,7 @@ Object.defineProperty(exports, "StyledLabel", { enumerable: true, get: function
 Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function () { return checkbox_2.StyledInput; } });
 Object.defineProperty(exports, "StyledToggle", { enumerable: true, get: function () { return checkbox_2.StyledToggle; } });
 Object.defineProperty(exports, "StyledToggleTrack", { enumerable: true, get: function () { return checkbox_2.StyledToggleTrack; } });
-var checkbox_3 = require("baseui/checkbox");
+var checkbox_3 = require("../baseui/checkbox");
 Object.defineProperty(exports, "STATE_TYPE", { enumerable: true, get: function () { return checkbox_3.STATE_TYPE; } });
 Object.defineProperty(exports, "STYLE_TYPE", { enumerable: true, get: function () { return checkbox_3.STYLE_TYPE; } });
 (0, tslib_1.__exportStar)(require("./types"), exports);

package/checkbox/styled-components.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var commonStyles_1 = require("../helpers/commonStyles");
 var helpers_1 = require("../helpers");
-var intentColor = function (_a, _b, defaultColor) {
+var getBackgroundIntentColor = function (_a, _b, defaultColor) {
     var theme = _a.theme;
     var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c;
     if (defaultColor === void 0) { defaultColor = theme.spr.focus01; }
@@ -20,6 +20,26 @@ var intentColor = function (_a, _b, defaultColor) {
             return theme.spr.supportWarning;
         case 'error':
             return theme.spr.supportError;
+        case 'ai':
+            return theme.spr.clrViolet;
+    }
+};
+var getBorderIntentColor = function (_a, _b, defaultColor) {
+    var theme = _a.theme;
+    var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c;
+    if (defaultColor === void 0) { defaultColor = theme.spr.focus01; }
+    switch ($intent) {
+        case 'default':
+        case 'ai':
+        default: {
+            return defaultColor;
+        }
+        case 'success':
+            return theme.spr.supportSuccess;
+        case 'warning':
+            return theme.spr.supportWarning;
+        case 'error':
+            return theme.spr.supportError;
     }
 };
 var getBorderColor = function (utils, props) {
@@ -29,40 +49,57 @@ var getBorderColor = function (utils, props) {
         return 'transparent';
     }
     if ($disabled) {
-        return (0, helpers_1.hex2rgb)(intentColor(utils, props, theme.spr.iconDisable), '0.5');
+        return (0, helpers_1.hex2rgb)(getBorderIntentColor(utils, props, theme.spr.iconDisable), '0.5');
     }
     if ($isHovered || $isFocusVisible) {
-        return intentColor(utils, props, theme.spr.border06);
+        return getBorderIntentColor(utils, props, theme.spr.border06);
     }
-    return intentColor(utils, props, theme.spr.border04);
+    return getBorderIntentColor(utils, props, theme.spr.border04);
 };
 var getBackgroundColor = function (utils, props) {
     var $disabled = props.$disabled, $checked = props.$checked, $isIndeterminate = props.$isIndeterminate;
     if ($disabled) {
         if ($checked || $isIndeterminate) {
-            return (0, helpers_1.hex2rgb)(intentColor(utils, props), '0.5');
+            return (0, helpers_1.hex2rgb)(getBackgroundIntentColor(utils, props), '0.5');
         }
         return 'transparent';
     }
     if ($checked || $isIndeterminate) {
-        return intentColor(utils, props);
+        return getBackgroundIntentColor(utils, props);
     }
     return 'transparent';
 };
+function getLabelPadding(_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;
+    }
+    return _c = {},
+        _c["padding".concat(paddingDirection)] = $size === 'lg' ? px2rem(10) : px2rem(8),
+        _c;
+}
 var getLabelOverrides = function (_a, _b) {
     var px2rem = _a.px2rem, theme = _a.theme;
-    var $disabled = _b.$disabled, $size = _b.$size;
-    var styles = {
-        fontSize: theme.typography.bs2.fontSize,
-        lineHeight: theme.typography.bs2.lineHeight,
-        color: $disabled ? theme.spr.text02 : theme.spr.text01,
-        paddingLeft: px2rem(8),
-        wordBreak: 'break-word',
-    };
+    var $disabled = _b.$disabled, $size = _b.$size, $labelPlacement = _b.$labelPlacement;
+    var styles = (0, tslib_1.__assign)({ fontSize: theme.typography.bs2.fontSize, lineHeight: theme.typography.bs2.lineHeight, color: $disabled ? theme.spr.text02 : theme.spr.text01, wordBreak: 'break-word' }, getLabelPadding({ px2rem: px2rem }, { $labelPlacement: $labelPlacement, $size: $size }));
     if ($size === 'lg') {
         styles.fontSize = theme.typography.bs1.fontSize;
         styles.lineHeight = theme.typography.bs1.lineHeight;
-        styles.paddingLeft = px2rem(10);
     }
     if ($size === 'sm') {
         styles.fontSize = theme.typography.bs3.fontSize;

package/checkbox/types.d.ts

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import { CheckboxProps as BaseCheckboxProps, StatefulCheckboxProps as BaseStatefulCheckboxProps } from 'baseui/checkbox';
-import { SharedProps as BaseSharedProps } from 'baseui/input';
+import { CheckboxProps as BaseCheckboxProps, StatefulCheckboxProps as BaseStatefulCheckboxProps, LabelPlacement } from '../baseui/checkbox';
+import { SharedProps as BaseSharedProps } from '../baseui/input';
 import { OutlineProps } from '../helpers/commonStyles';
 import { Override } from '../overrides';
 import { Intent, SpacewebComponentProps } from '../types';
 export declare type CheckboxSize = 'sm' | 'md' | 'lg';
 export declare type SharedProps = BaseSharedProps & {
     $checked: boolean;
-    $intent: boolean;
+    $intent: Intent;
     $isFocusVisible: boolean;
     $isHovered: boolean;
     $isIndeterminate: boolean;
     $size: CheckboxSize;
+    $labelPlacement: LabelPlacement;
 };
 declare type CommonProps = {
     onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;

package/color-picker/ColorPalette.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement } from 'react';
+/// <reference types="react" />
 import { ColorPickerOverrides } from './types';
 declare type ContentProps = {
     color?: string;
     overrides?: ColorPickerOverrides;
     onChange: (color?: string) => void;
 };
-export declare const ColorPalette: ({ color: selectedColor, overrides, onChange }: ContentProps) => ReactElement;
+export declare const ColorPalette: import("react").NamedExoticComponent<ContentProps>;
 export {};

package/color-picker/ColorPalette.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPalette = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 // import { Typography } from '../typography';
 var box_1 = require("../box");
 var grid_1 = require("../grid");
@@ -10,7 +11,8 @@ var Swatch_1 = require("./Swatch");
 // import { useTheme } from '../theme';
 var overrides_1 = require("../overrides");
 var colors_1 = require("./colors");
-var ColorPalette = function (_a) {
+var typography_1 = require("../typography");
+exports.ColorPalette = (0, react_1.memo)(function (_a) {
     // const { theme } = useTheme();
     var selectedColor = _a.color, overrides = _a.overrides, onChange = _a.onChange;
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Swatches, grid_1.Grid), 2), Swatches = _b[0], swatchesProps = _b[1];
@@ -19,8 +21,7 @@ var ColorPalette = function (_a) {
     //   () => Object.keys(theme.spr).filter((token: string): boolean => token.startsWith('clr')),
     //   [theme]
     // );
-    return ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(Swatches, (0, tslib_1.__assign)({ cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: colors_1.COLOR_PALETTE.map(function (row) {
-                return row.map(function (color) { return ((0, jsx_runtime_1.jsx)(Swatch, (0, tslib_1.__assign)({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); });
-            }) }), void 0) }, void 0));
-};
-exports.ColorPalette = ColorPalette;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ className: "spr-text-02" }, { children: "Spinklr Presets" }), void 0), (0, jsx_runtime_1.jsx)(Swatches, (0, tslib_1.__assign)({ className: "mb-3 mt-2", cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: colors_1.SPRINKLR_PRESET_COLORS.map(function (color) { return ((0, jsx_runtime_1.jsx)(Swatch, (0, tslib_1.__assign)({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); }) }), void 0), (0, jsx_runtime_1.jsx)(Swatches, (0, tslib_1.__assign)({ cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: colors_1.COLOR_PALETTE.map(function (row) {
+                    return row.map(function (color) { return ((0, jsx_runtime_1.jsx)(Swatch, (0, tslib_1.__assign)({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); });
+                }) }), void 0)] }, void 0));
+});

package/color-picker/ColorPicker.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { ColorPickerProps } from './types';
-export declare const ColorPicker: ({ value, overrides, heading, onChange, resetButtonLabel, }: ColorPickerProps) => ReactElement;
+export declare const ColorPicker: ({ value, overrides, heading, onChange, onChangeComplete, resetButtonLabel, enableGradientSelector, }: ColorPickerProps) => ReactElement;

package/color-picker/ColorPicker.js

@@ -3,14 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPicker = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+// Components
 var typography_1 = require("../typography");
 var box_1 = require("../box");
-var ColorPalette_1 = require("./ColorPalette");
 var reset_color_1 = (0, tslib_1.__importDefault)(require("../icon/components/reset-color"));
 var button_1 = require("../button");
+var ColorSelector_1 = (0, tslib_1.__importDefault)(require("./ColorSelector"));
+var select_1 = require("../select");
+var styled_component_1 = require("./styled-component");
+//Utils and Constants
 var overrides_1 = require("../overrides");
 var locale_1 = require("../locale");
-var styled_component_1 = require("./styled-component");
+var colors_1 = require("./colors");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var utils_1 = require("./utils");
 var RESET_CLASSNAME = [
     'spr-text-01 hover:spr-text-04',
     function (_a) {
@@ -26,10 +33,38 @@ var RESET_CLASSNAME = [
     },
 ];
 var ColorPicker = function (_a) {
-    var value = _a.value, overrides = _a.overrides, heading = _a.heading, onChange = _a.onChange, resetButtonLabel = _a.resetButtonLabel;
+    var _b;
+    var value = _a.value, overrides = _a.overrides, heading = _a.heading, _c = _a.onChange, onChange = _c === void 0 ? noop_1.default : _c, _d = _a.onChangeComplete, onChangeComplete = _d === void 0 ? noop_1.default : _d, resetButtonLabel = _a.resetButtonLabel, _e = _a.enableGradientSelector, enableGradientSelector = _e === void 0 ? false : _e;
+    var colorSet = (0, react_1.useMemo)(function () { return (0, colors_1.getColorSet)(); }, []);
     var locale = (0, locale_1.useLocale)();
-    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, typography_1.Typography), 2), Heading = _b[0], headingProps = _b[1];
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _c[0], rootProps = _c[1];
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({}, rootProps, { children: [heading ? ((0, jsx_runtime_1.jsx)(Heading, (0, tslib_1.__assign)({ "$as": "div", className: "spr-text-03", weight: "bold", variant: "bs3" }, headingProps, { children: heading }), void 0)) : null, (0, jsx_runtime_1.jsx)(ColorPalette_1.ColorPalette, { color: value, onChange: onChange, overrides: overrides }, void 0), (0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-start -ml-1.5" }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ startEnhancer: (0, jsx_runtime_1.jsx)(reset_color_1.default, { size: 12 }, void 0), variant: "minimal", size: "xxxs", className: RESET_CLASSNAME, disabled: !value, onClick: function () { return onChange(undefined); } }, { children: resetButtonLabel !== null && resetButtonLabel !== void 0 ? resetButtonLabel : locale.colorPicker.resetButtonLabel }), void 0) }), void 0)] }), void 0));
+    var _f = (0, utils_1.getColorSelectorOptions)(locale), COLOR_PALETTE_OPTION = _f.COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION = _f.SOLID_COLOR_OPTION, GRADIENT_COLOR_OPTION = _f.GRADIENT_COLOR_OPTION;
+    var _g = (0, tslib_1.__read)((0, react_1.useState)(value), 2), color = _g[0], setColor = _g[1];
+    var _h = (0, tslib_1.__read)((0, react_1.useState)(value), 2), prevValue = _h[0], setPrevValue = _h[1];
+    if (prevValue !== value) {
+        setPrevValue(value);
+        setColor(value);
+    }
+    var _j = (0, tslib_1.__read)((0, react_1.useState)(function () {
+        if (colorSet.has(value) || value === undefined)
+            return [COLOR_PALETTE_OPTION];
+        else if (enableGradientSelector && (value === null || value === void 0 ? void 0 : value.toLowerCase().includes('gradient')))
+            return [GRADIENT_COLOR_OPTION];
+        else
+            return [SOLID_COLOR_OPTION];
+    }), 2), selectedTab = _j[0], setSelectedTab = _j[1];
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, typography_1.Typography), 2), Heading = _k[0], headingProps = _k[1];
+    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _l[0], rootProps = _l[1];
+    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Select, select_1.Select), 2), SelectOverride = _m[0], selectProps = _m[1];
+    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ResetButton, button_1.Button), 2), ResetButtonOverride = _o[0], resetButtonProps = _o[1];
+    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ColorSelectorContainer, box_1.Box), 2), ColorSelectorContainer = _p[0], colorSelectorContainerProps = _p[1];
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({}, rootProps, { children: [heading ? ((0, jsx_runtime_1.jsx)(Heading, (0, tslib_1.__assign)({ "$as": "div", className: "spr-text-03", weight: "bold", variant: "bs3" }, headingProps, { children: heading }), void 0)) : null, (0, jsx_runtime_1.jsx)(SelectOverride
+            // autoFocus
+            , (0, tslib_1.__assign)({ 
+                // autoFocus
+                clearable: false, virtual: false, options: (0, tslib_1.__spreadArray)([COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION], (0, tslib_1.__read)((enableGradientSelector ? [GRADIENT_COLOR_OPTION] : [])), false), value: selectedTab, required: true, searchable: false, type: "select", placeholder: locale.colorPicker.selectColorLabel, onChange: function (e) { return setSelectedTab(e.value); } }, selectProps), void 0), (0, jsx_runtime_1.jsx)(ColorSelectorContainer, (0, tslib_1.__assign)({ className: "w-64" }, colorSelectorContainerProps, { children: (0, jsx_runtime_1.jsx)(ColorSelector_1.default, { selectedTab: (_b = selectedTab[0].id) !== null && _b !== void 0 ? _b : 1, color: color, setColor: function (color) { return setColor(color); }, overrides: overrides, onChange: onChange, onChangeComplete: onChangeComplete }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-start " }, { children: (0, jsx_runtime_1.jsx)(ResetButtonOverride, (0, tslib_1.__assign)({ startEnhancer: (0, jsx_runtime_1.jsx)(reset_color_1.default, { size: 12 }, void 0), variant: "minimal", size: "xxxs", className: RESET_CLASSNAME, disabled: !value, onClick: function () {
+                        setColor(undefined);
+                        onChange(undefined);
+                        onChangeComplete(undefined);
+                    } }, resetButtonProps, { children: resetButtonLabel !== null && resetButtonLabel !== void 0 ? resetButtonLabel : locale.colorPicker.resetButtonLabel }), void 0) }), void 0)] }), void 0));
 };
 exports.ColorPicker = ColorPicker;

package/color-picker/ColorSelector.d.ts

@@ -0,0 +1,6 @@
+import { ColorSelectorProps } from './types';
+declare const ColorSelector: {
+    ({ selectedTab, color, onChange, onChangeComplete, overrides, setColor, }: ColorSelectorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ColorSelector;

package/color-picker/ColorSelector.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ColorPalette_1 = require("./ColorPalette");
+var CustomColorSelector_1 = require("./CustomColorSelector");
+var GradientColorPicker_1 = (0, tslib_1.__importDefault)(require("./GradientColorPicker"));
+var constants_1 = require("./constants");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var ColorSelector = function (_a) {
+    var selectedTab = _a.selectedTab, color = _a.color, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _b, _c = _a.onChangeComplete, onChangeComplete = _c === void 0 ? noop_1.default : _c, overrides = _a.overrides, setColor = _a.setColor;
+    var COLOR_PALETTE = constants_1.TAB_IDS.COLOR_PALETTE, GRADIENT_COLOR = constants_1.TAB_IDS.GRADIENT_COLOR;
+    if (selectedTab === COLOR_PALETTE) {
+        return ((0, jsx_runtime_1.jsx)(ColorPalette_1.ColorPalette, { color: color, onChange: function (colorHex) {
+                setColor(colorHex);
+                onChange(colorHex, { type: constants_1.COLOR_TYPE.SOLID });
+                onChangeComplete(colorHex, { type: constants_1.COLOR_TYPE.SOLID });
+            }, overrides: overrides }, void 0));
+    }
+    else if (selectedTab === GRADIENT_COLOR) {
+        return (0, jsx_runtime_1.jsx)(GradientColorPicker_1.default, { color: color, onChange: onChange, onChangeComplete: onChangeComplete }, void 0);
+    }
+    else {
+        return ((0, jsx_runtime_1.jsx)(CustomColorSelector_1.CustomColorSelector, { color: color, onChange: function (colorObject) {
+                setColor(colorObject.hex);
+                onChange(colorObject.hex, { type: constants_1.COLOR_TYPE.SOLID, colorResultObj: colorObject });
+            }, onChangeComplete: function (colorObject) {
+                return onChangeComplete(colorObject.hex, { type: constants_1.COLOR_TYPE.SOLID, colorResultObj: colorObject });
+            } }, void 0));
+    }
+};
+ColorSelector.displayName = 'ColorSelector';
+exports.default = ColorSelector;

package/color-picker/CustomColorSelector.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { CustomColorSelectorProps } from './types';
+export declare const CustomColorSelector: React.ComponentClass<CustomColorSelectorProps & import("react-color/lib/components/common/ColorWrap").ExportedColorProps, any>;

package/color-picker/CustomColorSelector.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomColorSelector = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_color_1 = require("react-color");
+var common_1 = require("react-color/lib/components/common");
+var style_1 = require("../style");
+var stack_1 = require("../stack");
+var box_1 = require("../box");
+var CustomPointer = function () { return ((0, jsx_runtime_1.jsx)(box_1.Box, { style: { transform: 'translate(-50%, -1px)' }, className: "absolute spr-shadow-03 cursor-pointer w-3 h-3 rounded-full spr-ui-01" }, void 0)); };
+var ColorPickerComponent = function (props) {
+    var getStyle = (0, style_1.useStyle)().getStyle;
+    var inputStyles = {
+        input: getStyle('w-full text-center border-1 spr-border-03 spr-ui-01 mb-1 rounded-4'),
+        label: getStyle(' w-full text-center block'),
+    };
+    var hex = props.hex, rgb = props.rgb, onChange = props.onChange, onChangeComplete = props.onChangeComplete;
+    // Bug in the react-color lib
+    // https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/hue.js#L33
+    // when left === containerWidth it return 360 which return 0 in hsl value the pointer shifts to the left most
+    // color which cause a flikering issue
+    //https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/components/sketch/SketchFields.js#L51
+    var handleChange = (0, react_1.useCallback)(function (data) {
+        if (data.HEX) {
+            onChange({ hex: data.HEX });
+            onChangeComplete({ hex: data.HEX });
+        }
+        else if (data.R || data.G || data.B || data.A) {
+            onChange({ r: data.R || (rgb === null || rgb === void 0 ? void 0 : rgb.r), g: data.G || (rgb === null || rgb === void 0 ? void 0 : rgb.g), b: data.B || (rgb === null || rgb === void 0 ? void 0 : rgb.b), a: data.A || (rgb === null || rgb === void 0 ? void 0 : rgb.a) });
+            onChangeComplete({ r: data.R || (rgb === null || rgb === void 0 ? void 0 : rgb.r), g: data.G || (rgb === null || rgb === void 0 ? void 0 : rgb.g), b: data.B || (rgb === null || rgb === void 0 ? void 0 : rgb.b), a: data.A || (rgb === null || rgb === void 0 ? void 0 : rgb.a) });
+        }
+    }, [onChange, onChangeComplete, rgb]);
+    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "vertical", gap: 3 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "relative w-full h-40 rounded-8 overflow-hidden" }, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, (0, tslib_1.__assign)({}, props), void 0) }), void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: ['p-2 flex items-center ', { gap: '16px' }] }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['rounded-8 relative', { width: '190px', height: '10px' }] }, { children: (0, jsx_runtime_1.jsx)(common_1.Hue, (0, tslib_1.__assign)({ pointer: CustomPointer }, props), void 0) }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, { className: [{ backgroundColor: "rgba(".concat(rgb === null || rgb === void 0 ? void 0 : rgb.r, ",").concat(rgb === null || rgb === void 0 ? void 0 : rgb.g, ",").concat(rgb === null || rgb === void 0 ? void 0 : rgb.b, ",").concat(rgb === null || rgb === void 0 ? void 0 : rgb.a, ")") }, 'w-9 h-9 rounded-full'] }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: [
+                    'text-center spr-text-01 text-13 grid space-between w-full gap-2',
+                    { gridTemplateColumns: '1.5fr 1fr 1fr 1fr' },
+                ] }, { children: [(0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: inputStyles, label: "HEX", value: hex, onChange: handleChange }, void 0), (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: inputStyles, label: "R", value: rgb === null || rgb === void 0 ? void 0 : rgb.r, onChange: handleChange }, void 0), (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: inputStyles, label: "G", value: rgb === null || rgb === void 0 ? void 0 : rgb.g, onChange: handleChange }, void 0), (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: inputStyles, label: "B", value: rgb === null || rgb === void 0 ? void 0 : rgb.b, onChange: handleChange }, void 0)] }), void 0)] }), void 0));
+};
+ColorPickerComponent.displayName = 'ColorPickerComponent';
+exports.CustomColorSelector = (0, react_color_1.CustomPicker)(ColorPickerComponent);

package/color-picker/GradientColorPicker.d.ts

@@ -0,0 +1,6 @@
+import { GradientColorPickerProps } from './types';
+declare const GradientColorPicker: {
+    ({ color, onChange, onChangeComplete }: GradientColorPickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default GradientColorPicker;

package/color-picker/GradientColorPicker.js

@@ -0,0 +1,68 @@
+"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 CustomColorSelector_1 = require("./CustomColorSelector");
+var box_1 = require("../box");
+var button_1 = require("../button");
+var form_control_1 = require("../form-control");
+var radio_1 = require("../radio");
+var slider_1 = require("../slider");
+var constants_1 = require("./constants");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var utils_1 = require("./utils");
+var LabelOverrides = { LabelContainer: { style: 'w-24' } };
+var RadioOverrides = { Root: { style: 'mr-2' } };
+var GradientColorPicker = function (_a) {
+    var color = _a.color, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _b, _c = _a.onChangeComplete, onChangeComplete = _c === void 0 ? noop_1.default : _c;
+    var _d = (0, tslib_1.__read)((0, react_1.useState)(function () {
+        var gradientColorData = (0, utils_1.extractColorsFromGradient)(color);
+        return (gradientColorData !== null && gradientColorData !== void 0 ? gradientColorData : {
+            gradientType: 'linear',
+            firstColor: color !== null && color !== void 0 ? color : '#000000',
+            secondColor: '#ffffff',
+            degree: [0],
+            endPoints: [0, 100],
+        });
+    }), 2), gradientColorObj = _d[0], setGradientColorObj = _d[1];
+    var gradientType = gradientColorObj.gradientType, firstColor = gradientColorObj.firstColor, secondColor = gradientColorObj.secondColor, degree = gradientColorObj.degree, endPoints = gradientColorObj.endPoints;
+    var _e = (0, tslib_1.__read)((0, react_1.useState)(1), 2), currentColorSelected = _e[0], setCurrentSelectedColor = _e[1];
+    var handleGradientTypeChange = (0, react_1.useCallback)(function (e) {
+        var newGradientColorObj = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, gradientColorObj), { gradientType: e.target.value });
+        var gradientColorString = (0, utils_1.getGradientColorString)(newGradientColorObj);
+        setGradientColorObj(newGradientColorObj);
+        onChange(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+        onChangeComplete(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+    }, [degree, firstColor, secondColor, endPoints[0], endPoints[1]]);
+    var handleDegreeChange = (0, react_1.useCallback)(function (_a, isChangeCompleted) {
+        var value = _a.value;
+        var newGradientColorObj = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, gradientColorObj), { degree: value });
+        setGradientColorObj(newGradientColorObj);
+        var gradientColorString = (0, utils_1.getGradientColorString)(newGradientColorObj);
+        isChangeCompleted
+            ? onChangeComplete(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj })
+            : onChange(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+    }, [gradientType, firstColor, secondColor, endPoints[0], endPoints[1]]);
+    var handleEndPointsChange = (0, react_1.useCallback)(function (_a, isChangeCompleted) {
+        var value = _a.value;
+        var newGradientColorObj = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, gradientColorObj), { endPoints: value });
+        setGradientColorObj(newGradientColorObj);
+        var gradientColorString = (0, utils_1.getGradientColorString)(newGradientColorObj);
+        isChangeCompleted
+            ? onChangeComplete(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj })
+            : onChange(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+    }, [gradientType, degree, firstColor, secondColor]);
+    var handleCustomColorOnChange = (0, react_1.useCallback)(function (colorObj, isChangeCompleted) {
+        var _a;
+        var newGradientColorObj = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, gradientColorObj), (_a = {}, _a[currentColorSelected === 1 ? 'firstColor' : 'secondColor'] = colorObj.hex, _a));
+        setGradientColorObj(newGradientColorObj);
+        var gradientColorString = (0, utils_1.getGradientColorString)(newGradientColorObj);
+        isChangeCompleted
+            ? onChangeComplete(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj })
+            : onChange(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+    }, [gradientType, degree, firstColor, secondColor, endPoints[0], endPoints[1], currentColorSelected]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_control_1.FormControl, (0, tslib_1.__assign)({ overrides: LabelOverrides, label: 'Direction', layout: "horizontal" }, { children: (0, jsx_runtime_1.jsxs)(radio_1.RadioGroup, (0, tslib_1.__assign)({ className: "m-2", value: gradientType, onChange: handleGradientTypeChange, align: "horizontal" }, { children: [(0, jsx_runtime_1.jsx)(radio_1.Radio, (0, tslib_1.__assign)({ overrides: RadioOverrides, value: constants_1.GRADIENT_TYPE.LINEAR }, { children: constants_1.GRADIENT_TYPE.LINEAR }), void 0), (0, jsx_runtime_1.jsx)(radio_1.Radio, (0, tslib_1.__assign)({ overrides: RadioOverrides, value: constants_1.GRADIENT_TYPE.RADIAL }, { children: constants_1.GRADIENT_TYPE.RADIAL }), void 0)] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, (0, tslib_1.__assign)({ overrides: LabelOverrides, label: function () { return 'Degree'; }, layout: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { disabled: gradientType === constants_1.GRADIENT_TYPE.RADIAL, value: degree, max: 360, onChange: function (data) { return handleDegreeChange(data, false); }, onFinalChange: function (data) { return handleDegreeChange(data, true); } }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, (0, tslib_1.__assign)({ overrides: LabelOverrides, label: 'End Points', layout: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: endPoints, max: 100, onChange: function (data) { return handleEndPointsChange(data, false); }, onFinalChange: function (data) { return handleEndPointsChange(data, true); } }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-between items-center" }, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-center items-center" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { className: "w-7 border-1 h-7 rounded-full", style: { background: "".concat(firstColor) } }, void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ isSelected: currentColorSelected === 1, shape: "pill", variant: "tertiary", size: "xxs", className: "m-1", onClick: function () { return setCurrentSelectedColor(1); } }, { children: "Color 1" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-center items-center" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ isSelected: currentColorSelected === 2, shape: "pill", variant: "tertiary", size: "xxs", className: "m-1", onClick: function () { return setCurrentSelectedColor(2); } }, { children: "Color 2" }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, { className: "w-7 border-1 h-7 rounded-full", style: { background: "".concat(secondColor) } }, void 0)] }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, { style: { background: (0, utils_1.getGradientColorString)(gradientColorObj) }, className: "my-2 w-full h-10 rounded-8" }, void 0), (0, jsx_runtime_1.jsx)(CustomColorSelector_1.CustomColorSelector, { color: currentColorSelected === 1 ? firstColor : secondColor, onChange: function (data) { return handleCustomColorOnChange(data, false); }, onChangeComplete: function (data) { return handleCustomColorOnChange(data, true); } }, void 0)] }, void 0));
+};
+GradientColorPicker.displayName = 'GradientColorPicker';
+exports.default = GradientColorPicker;

package/color-picker/Swatch.js

@@ -18,17 +18,15 @@ exports.Swatch = (0, react_1.memo)(function (_a) {
     var contrastRatioWithBgColor = (0, react_1.useMemo)(function () { return (0, getContrastRatio_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.popup)); }, [theme, color]);
     var handleChange = (0, react_1.useCallback)(function () { return onChange(color); }, [color, onChange]);
     return ((0, jsx_runtime_1.jsx)(base_button_1.BaseButton, (0, tslib_1.__assign)({ onClick: handleChange, className: [
-            'cursor-pointer h-5 w-5 rounded-full flex justify-center items-center',
-            contrastRatioWithBgColor < 1.1 ? 'border-1 border-solid spr-border-03' : '',
+            'cursor-pointer h-5 w-5 rounded-full flex justify-center items-center scale-0',
+            isSelected ? { transform: 'scale(1.2)' } : {},
+            contrastRatioWithBgColor < 3 ? 'border-1 border-solid spr-border-03' : '',
             {
                 backgroundColor: color,
                 transition: '0.15s ease-in-out',
                 ':hover': {
                     transform: 'scale(1.2)',
                 },
-                ':focus': {
-                    transform: 'scale(1.2)',
-                },
                 ':focus-visible': {
                     transform: 'scale(1.2)',
                     outlineWidth: '1px',

package/color-picker/colors.d.ts

@@ -1 +1,3 @@
+export declare const SPRINKLR_PRESET_COLORS: string[];
 export declare const COLOR_PALETTE: string[][];
+export declare const getColorSet: () => Set<string | undefined>;

package/color-picker/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLOR_PALETTE = void 0;
+exports.getColorSet = exports.COLOR_PALETTE = exports.SPRINKLR_PRESET_COLORS = void 0;
 var SLATE_COLORS = [
     '#FFFFFE',
     '#F3F3F3',
@@ -97,6 +97,24 @@ var ROSE_COLORS = [
     '#881337',
     '#4c0519',
 ];
+exports.SPRINKLR_PRESET_COLORS = [
+    '#54BEEE',
+    '#1DA4DD',
+    '#2E6DB8',
+    '#518EDD',
+    '#5CC8C3',
+    '#38A5A0',
+    '#C579BE',
+    '#A7469D',
+    '#8A3C8B',
+    '#723B86',
+    '#9785FE',
+    '#483A98',
+    '#F86CAE',
+    '#B1306C',
+    '#FFA371',
+    '#FD7D34',
+];
 exports.COLOR_PALETTE = [
     SLATE_COLORS,
     RED_COLORS,
@@ -107,3 +125,10 @@ exports.COLOR_PALETTE = [
     FUCHSIA_COLORS,
     ROSE_COLORS,
 ];
+var getColorSet = function () {
+    var set = new Set();
+    exports.COLOR_PALETTE.forEach(function (arr) { return arr.forEach(function (element) { return set.add(element); }); });
+    exports.SPRINKLR_PRESET_COLORS.forEach(function (element) { return set.add(element); });
+    return set;
+};
+exports.getColorSet = getColorSet;

package/color-picker/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const GRADIENT_TYPE: {
+    LINEAR: string;
+    RADIAL: string;
+};
+export declare const TAB_IDS: {
+    COLOR_PALETTE: number;
+    SOLID_COLOR: number;
+    GRADIENT_COLOR: number;
+};
+export declare const COLOR_TYPE: {
+    readonly SOLID: "solid";
+    readonly GRADIENT: "gradient";
+};

package/color-picker/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
+exports.GRADIENT_TYPE = {
+    LINEAR: 'linear',
+    RADIAL: 'radial',
+};
+exports.TAB_IDS = { COLOR_PALETTE: 1, SOLID_COLOR: 2, GRADIENT_COLOR: 3 };
+exports.COLOR_TYPE = {
+    SOLID: 'solid',
+    GRADIENT: 'gradient',
+};

package/color-picker/locale.d.ts

@@ -1,3 +1,7 @@
 export declare type ColorPickerLocale = {
     resetButtonLabel: string;
+    colorLibraryLabel: string;
+    solidColorLabel: string;
+    gradientColorLabel: string;
+    selectColorLabel: string;
 };

package/color-picker/types.d.ts

@@ -1,15 +1,64 @@
 import { Override } from '../overrides';
+import { Color, ColorResult } from 'react-color';
+import { GRADIENT_TYPE } from './constants';
+import { SelectProps } from '../select';
+import { ButtonProps } from '../button';
+import { BoxProps } from '../box';
 export declare type ColorPickerOverrides = {
     Root?: Override<Record<string, any>>;
     Heading?: Override<Record<string, any>>;
     Swatches?: Override<Record<string, any>>;
     Swatch?: Override<Record<string, any>>;
     TickIcon?: Override<Record<string, any>>;
+    Select?: Override<SelectProps & Record<string, any>>;
+    ResetButton?: Override<ButtonProps & Record<string, any>>;
+    ColorSelectorContainer?: Override<BoxProps & Record<string, any>>;
 };
 export declare type ColorPickerProps = {
     overrides?: ColorPickerOverrides;
     value?: string;
-    onChange: (value?: string) => void;
+    onChange?: onChangeCallback;
+    onChangeComplete?: onChangeCallback;
     heading?: string;
     resetButtonLabel?: string;
+    enableGradientSelector?: boolean;
 };
+export declare type GradientColorResult = {
+    gradientType: (typeof GRADIENT_TYPE)[keyof typeof GRADIENT_TYPE];
+    firstColor: string;
+    secondColor: string;
+    degree: [number];
+    endPoints: [number, number];
+};
+declare type onChangeCallback = (colorString?: string, colorObj?: {
+    type: 'solid';
+    colorResultObj?: ColorResult;
+} | {
+    type: 'gradient';
+    colorResultObj?: GradientColorResult;
+}) => void;
+export declare type GradientColorPickerProps = {
+    color?: string;
+    onChange?: onChangeCallback;
+    onChangeComplete?: onChangeCallback;
+};
+export declare type ColorSelectorProps = {
+    selectedTab: number;
+    color?: string;
+    onChange?: onChangeCallback;
+    onChangeComplete?: onChangeCallback;
+    overrides?: ColorPickerOverrides;
+    setColor: (color: string | undefined) => void;
+};
+export declare type CustomColorSelectorProps = {
+    color?: string;
+    onChange: (color: Color | {
+        hex: string;
+    }) => void;
+    hex?: ColorResult['hex'];
+    rgb?: ColorResult['rgb'];
+    onChangeComplete: (color: Color | {
+        hex: string;
+    }) => void;
+};
+export {};