@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

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.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { ClassName } from '../types';
+import { ColorPickerOverrides } from './types';
+declare type SwatchProps = {
+    color: string;
+    isSelected: boolean;
+    onChange: (color?: string) => void;
+    className?: ClassName;
+    overrides?: ColorPickerOverrides;
+};
+export declare const Swatch: import("react").MemoExoticComponent<({ color, isSelected, onChange, className, overrides, ...props }: SwatchProps) => ReactElement>;
+export {};

package/color-picker/Swatch.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Swatch = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var helpers_1 = require("../helpers");
+var base_button_1 = require("../base-button");
+var tick_1 = (0, tslib_1.__importDefault)(require("../icon/components/tick"));
+var colors_1 = require("../helpers/colors");
+var theme_1 = require("../theme");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+exports.Swatch = (0, react_1.memo)(function (_a) {
+    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["color", "isSelected", "onChange", "className", "overrides"]);
+    var theme = (0, theme_1.useTheme)().theme;
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.TickIcon, tick_1.default), 2), TickIcon = _b[0], tickIconProps = _b[1];
+    var contrastRatioWithTickIcon = (0, react_1.useMemo)(function () { return (isSelected ? (0, colors_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.icon05)) : 0); }, [theme, isSelected, color]);
+    var contrastRatioWithBgColor = (0, react_1.useMemo)(function () { return (0, colors_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 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-visible': {
+                    transform: 'scale(1.2)',
+                    outlineWidth: '1px',
+                    outlineOffset: '1px',
+                },
+            },
+            className,
+        ], tabIndex: 0 }, props, { children: isSelected ? ((0, jsx_runtime_1.jsx)(TickIcon, (0, tslib_1.__assign)({ className: contrastRatioWithTickIcon < 4.5 ? 'spr-icon-01' : 'spr-icon-05', size: 10 }, tickIconProps), void 0)) : null }), void 0));
+});

package/color-picker/adaptiveThemeColor.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Inverts colors to have a similar contrast ratio on the opposite theme. Maintains H/S values from the HSL colorspace.
+ * @param inputColor Input color, as hex
+ * @param lightTheme Hex of background in light theme
+ * @param darkTheme Hex of background in dark theme
+ */
+export declare function invertColor(inputColor: string, { light: lightTheme, dark: darkTheme }?: {
+    dark?: string;
+    light?: string;
+}): string;
+declare type THEME = 'dark' | 'light' | undefined;
+/**
+ * Generates an 'adaptive' themed color hex (a color with appropriate contrast) based on given parameters.
+ * @param inputColor Input color, as hex
+ * @param adaptiveTheme Theme that the adaptive themed color was set in
+ * @param currentTheme Current theme
+ * @example
+ * const adaptedColor = adaptiveThemeColor('#0000ff', 'light', 'dark');
+ * // Returns a light blue hex from a dark blue hex input
+ */
+export declare function adaptiveThemeColor(inputColor: string | undefined, adaptiveTheme: THEME, currentTheme?: THEME): string | undefined;
+/**
+ * Generates an adaptiveThemeColor function for a custom theme
+ * @param lightHex Hex of the light-theme background
+ * @param darkHex Hex of the dark-theme background
+ * @example
+ * const adaptiveThemeColor = customAdaptiveThemeColor('#ffffff', '#1c1c1f');
+ * const adaptedThemeColor = adaptiveThemeColor('#0000ff', 'light', 'dark');
+ */
+export declare function customAdaptiveThemeColor(lightHex: string, darkHex: string): typeof adaptiveThemeColor;
+export {};

package/color-picker/adaptiveThemeColor.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customAdaptiveThemeColor = exports.adaptiveThemeColor = exports.invertColor = void 0;
+var colors_1 = require("../helpers/colors");
+/**
+ * Inverts colors to have a similar contrast ratio on the opposite theme. Maintains H/S values from the HSL colorspace.
+ * @param inputColor Input color, as hex
+ * @param lightTheme Hex of background in light theme
+ * @param darkTheme Hex of background in dark theme
+ */
+function invertColor(inputColor, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.light, lightTheme = _c === void 0 ? '#ffffff' : _c, _d = _b.dark, darkTheme = _d === void 0 ? '#1c1c1f' : _d;
+    // Generate a hex with a contrast ratio on black roughly
+    // equal to the given hex's contrast ratio on white.
+    // Is applicable for both light->dark and dark->light and
+    // maintains the same hue and saturation as the given color.
+    var inputRgb = (0, colors_1.hexToRgb)(inputColor);
+    var inputHsl = (0, colors_1.RgbToHsl)(inputRgb);
+    var lightLuminance = (0, colors_1.getRelativeLuminance)((0, colors_1.hexToRgb)(lightTheme));
+    var darkLuminance = (0, colors_1.getRelativeLuminance)((0, colors_1.hexToRgb)(darkTheme));
+    var targetLuminance = ((lightLuminance + 0.05) * (darkLuminance + 0.05)) / ((0, colors_1.getRelativeLuminance)(inputRgb) + 0.05) - 0.05;
+    var lowerLight = 0, upperLight = 100;
+    // Since yellow looks horrible on inversion, we make yellow hues redder while inverting
+    var oldHue = inputHsl[0];
+    var newHue = oldHue >= 70 ? oldHue : Math.min(oldHue, 30 + 100 / (70 - oldHue));
+    var currentRgb = inputRgb;
+    // Newton's method is used for lightness -> luminance inversion
+    // Luminance vs lightness is not a strictly monotonic relation
+    // but is invertible for fixed values of hue and saturation.
+    // Refer to the resources in helpers/colors.ts for explanations.
+    for (var i = 0; i < 10; i += 1) {
+        var currentHsl = [newHue, inputHsl[1], (lowerLight + upperLight) / 2];
+        currentRgb = (0, colors_1.HslToRgb)(currentHsl);
+        var newNode = { light: currentHsl[2], lum: (0, colors_1.getRelativeLuminance)(currentRgb) };
+        if (Math.abs(newNode.lum - targetLuminance) < 0.005)
+            break;
+        else if (newNode.lum > targetLuminance)
+            upperLight = newNode.light;
+        else if (newNode.lum < targetLuminance)
+            lowerLight = newNode.light;
+    }
+    return (0, colors_1.RgbToHex)(currentRgb);
+}
+exports.invertColor = invertColor;
+/**
+ * Generates an 'adaptive' themed color hex (a color with appropriate contrast) based on given parameters.
+ * @param inputColor Input color, as hex
+ * @param adaptiveTheme Theme that the adaptive themed color was set in
+ * @param currentTheme Current theme
+ * @example
+ * const adaptedColor = adaptiveThemeColor('#0000ff', 'light', 'dark');
+ * // Returns a light blue hex from a dark blue hex input
+ */
+function adaptiveThemeColor(inputColor, adaptiveTheme, currentTheme) {
+    if (currentTheme === void 0) { currentTheme = 'light'; }
+    if (!inputColor)
+        return inputColor;
+    if (!adaptiveTheme)
+        return inputColor;
+    if (adaptiveTheme === currentTheme)
+        return inputColor;
+    return invertColor(inputColor);
+}
+exports.adaptiveThemeColor = adaptiveThemeColor;
+/**
+ * Generates an adaptiveThemeColor function for a custom theme
+ * @param lightHex Hex of the light-theme background
+ * @param darkHex Hex of the dark-theme background
+ * @example
+ * const adaptiveThemeColor = customAdaptiveThemeColor('#ffffff', '#1c1c1f');
+ * const adaptedThemeColor = adaptiveThemeColor('#0000ff', 'light', 'dark');
+ */
+function customAdaptiveThemeColor(lightHex, darkHex) {
+    return function customAdaptiveColor(inputColor, adaptiveTheme, currentTheme) {
+        if (currentTheme === void 0) { currentTheme = 'light'; }
+        if (!inputColor)
+            return inputColor;
+        if (!adaptiveTheme)
+            return inputColor;
+        if (adaptiveTheme === currentTheme)
+            return inputColor;
+        return invertColor(inputColor, { light: lightHex, dark: darkHex });
+    };
+}
+exports.customAdaptiveThemeColor = customAdaptiveThemeColor;

package/color-picker/colors.d.ts

@@ -0,0 +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

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorSet = exports.COLOR_PALETTE = exports.SPRINKLR_PRESET_COLORS = void 0;
+var SLATE_COLORS = [
+    '#FFFFFE',
+    '#F3F3F3',
+    '#EFEFEF',
+    '#DADAD9',
+    '#CCCCCC',
+    '#B7B7B7',
+    '#999999',
+    '#676666',
+    '#444343',
+    '#000000',
+];
+var RED_COLORS = [
+    '#fef2f2',
+    '#fee2e2',
+    '#fecaca',
+    '#fca5a5',
+    '#f87171',
+    '#dc2626',
+    '#b91c1c',
+    '#991b1b',
+    '#7f1d1d',
+    '#450a0a',
+];
+var AMBER_COLORS = [
+    '#fffbeb',
+    '#fef3c7',
+    '#fde68a',
+    '#fcd34d',
+    '#fbbf24',
+    '#d97706',
+    '#b45309',
+    '#92400e',
+    '#78350f',
+    '#451a03',
+];
+var GREEN_COLORS = [
+    '#f0fdf4',
+    '#dcfce7',
+    '#bbf7d0',
+    '#86efac',
+    '#4ade80',
+    '#16a34a',
+    '#15803d',
+    '#166534',
+    '#14532d',
+    '#052e16',
+];
+var BLUE_COLORS = [
+    '#eff6ff',
+    '#dbeafe',
+    '#bfdbfe',
+    '#93c5fd',
+    '#60a5fa',
+    '#2563eb',
+    '#1d4ed8',
+    '#1e40af',
+    '#1e3a8a',
+    '#172554',
+];
+var VIOLET_COLORS = [
+    '#f5f3ff',
+    '#ede9fe',
+    '#ddd6fe',
+    '#c4b5fd',
+    '#a78bfa',
+    '#7c3aed',
+    '#6d28d9',
+    '#5b21b6',
+    '#4c1d95',
+    '#2e1065',
+];
+var FUCHSIA_COLORS = [
+    '#fdf4ff',
+    '#fae8ff',
+    '#f5d0fe',
+    '#f0abfc',
+    '#e879f9',
+    '#c026d3',
+    '#a21caf',
+    '#86198f',
+    '#701a75',
+    '#4a044e',
+];
+var ROSE_COLORS = [
+    '#fff1f2',
+    '#ffe4e6',
+    '#fecdd3',
+    '#fda4af',
+    '#fb7185',
+    '#e11d48',
+    '#be123c',
+    '#9f1239',
+    '#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,
+    AMBER_COLORS,
+    GREEN_COLORS,
+    BLUE_COLORS,
+    VIOLET_COLORS,
+    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/index.d.ts

@@ -0,0 +1,4 @@
+export { ColorPicker } from './ColorPicker';
+export type { ColorPickerProps, ColorPickerOverrides } from './types';
+export { adaptiveThemeColor, invertColor, customAdaptiveThemeColor } from './adaptiveThemeColor';
+export { COLOR_PALETTE } from './colors';

package/color-picker/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_PALETTE = exports.customAdaptiveThemeColor = exports.invertColor = exports.adaptiveThemeColor = exports.ColorPicker = void 0;
+var ColorPicker_1 = require("./ColorPicker");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });
+var adaptiveThemeColor_1 = require("./adaptiveThemeColor");
+Object.defineProperty(exports, "adaptiveThemeColor", { enumerable: true, get: function () { return adaptiveThemeColor_1.adaptiveThemeColor; } });
+Object.defineProperty(exports, "invertColor", { enumerable: true, get: function () { return adaptiveThemeColor_1.invertColor; } });
+Object.defineProperty(exports, "customAdaptiveThemeColor", { enumerable: true, get: function () { return adaptiveThemeColor_1.customAdaptiveThemeColor; } });
+var colors_1 = require("./colors");
+Object.defineProperty(exports, "COLOR_PALETTE", { enumerable: true, get: function () { return colors_1.COLOR_PALETTE; } });

package/color-picker/locale.d.ts

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

package/color-picker/locale.js

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

package/color-picker/package.json

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

package/color-picker/styled-component.d.ts

@@ -0,0 +1 @@
+export declare const StyledRoot: import("../style/styled").StyledComponent;

package/color-picker/styled-component.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRoot = void 0;
+var style_1 = require("../style");
+exports.StyledRoot = (0, style_1.styled)('div', 'flex flex-col gap-3');

package/color-picker/types.d.ts

@@ -0,0 +1,83 @@
+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?: OnChange;
+    onChangeComplete?: OnChange;
+    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];
+};
+export declare type AdaptiveThemeColors = {
+    /**
+     * Hex for the color in light theme
+     */
+    light: string;
+    /**
+     * Hex for the color in dark theme
+     */
+    dark: string;
+    /**
+     * String with both light and dark theme hexes, separated by a comma
+     * @example '#ffffff,#1c1c1f'
+     */
+    mergedStringColor: string;
+    /** The theme the color was set on
+     */
+    sourceTheme?: 'light' | 'dark';
+};
+export declare type OnChange = (colorString?: string, colorObj?: {
+    type: 'solid';
+    colorResultObj?: ColorResult;
+    adaptiveThemeColors?: AdaptiveThemeColors;
+} | {
+    type: 'gradient';
+    colorResultObj?: GradientColorResult;
+    adaptiveThemeColors?: undefined;
+}) => void;
+export declare type GradientColorPickerProps = {
+    color?: string;
+    onChange?: OnChange;
+    onChangeComplete?: OnChange;
+};
+export declare type ColorSelectorProps = {
+    selectedTab: number;
+    color?: string;
+    onChange?: OnChange;
+    onChangeComplete?: OnChange;
+    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;
+};

package/color-picker/types.js

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

package/color-picker/utils.d.ts

@@ -0,0 +1,17 @@
+import { GradientColorResult } from './types';
+export declare const getGradientColorString: (gradientColorObject: any) => string;
+export declare const extractColorsFromGradient: (gradientString: any) => GradientColorResult | null;
+export declare const getColorSelectorOptions: (locale: any) => {
+    COLOR_PALETTE_OPTION: {
+        label: any;
+        id: number;
+    };
+    SOLID_COLOR_OPTION: {
+        label: any;
+        id: number;
+    };
+    GRADIENT_COLOR_OPTION: {
+        label: any;
+        id: number;
+    };
+};

package/color-picker/utils.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorSelectorOptions = exports.extractColorsFromGradient = exports.getGradientColorString = void 0;
+var constants_1 = require("./constants");
+var getGradientColorString = function (gradientColorObject) {
+    var gradientType = gradientColorObject.gradientType, firstColor = gradientColorObject.firstColor, secondColor = gradientColorObject.secondColor, endPoints = gradientColorObject.endPoints, degree = gradientColorObject.degree;
+    return "".concat(gradientType, "-gradient(").concat(gradientType === constants_1.GRADIENT_TYPE.LINEAR ? "".concat(degree, "deg,") : '', " ").concat(firstColor, " ").concat(endPoints[0], "%, ").concat(secondColor, " ").concat(endPoints[1], "%)");
+};
+exports.getGradientColorString = getGradientColorString;
+var extractColorsFromGradient = function (gradientString) {
+    var gradientRegex = /^(linear|radial)-gradient\((\d+deg,)?\s*(#[0-9A-Fa-f]{6}|rgba?\(.*?\)|rgb\(.*?\)|[a-z]+)\s*(\d+%?)?\s*,\s*(#[0-9A-Fa-f]{6}|rgba?\(.*?\)|rgb\(.*?\)|[a-z]+)\s*(\d+%?)?\)$/i;
+    var match = gradientString && gradientString.match(gradientRegex);
+    if (match) {
+        var gradientType = match[1].toLowerCase();
+        var hasDegree = !!match[2];
+        var degree = hasDegree ? parseInt(match[2], 10) : 0;
+        var firstColor = match[3];
+        var firstColorPercentage = Number.isNaN(parseInt(match[4], 10)) ? 0 : parseInt(match[4], 10);
+        var secondColor = match[5];
+        var secondColorPercentage = Number.isNaN(parseInt(match[6], 10)) ? 100 : parseInt(match[6], 10);
+        return {
+            gradientType: gradientType,
+            degree: [degree],
+            firstColor: firstColor,
+            secondColor: secondColor,
+            endPoints: [firstColorPercentage, secondColorPercentage],
+        };
+    }
+    else {
+        return null;
+    }
+};
+exports.extractColorsFromGradient = extractColorsFromGradient;
+var getColorSelectorOptions = function (locale) { return ({
+    COLOR_PALETTE_OPTION: { label: locale.colorPicker.colorLibraryLabel, id: constants_1.TAB_IDS.COLOR_PALETTE },
+    SOLID_COLOR_OPTION: { label: locale.colorPicker.solidColorLabel, id: constants_1.TAB_IDS.SOLID_COLOR },
+    GRADIENT_COLOR_OPTION: { label: locale.colorPicker.gradientColorLabel, id: constants_1.TAB_IDS.GRADIENT_COLOR },
+}); };
+exports.getColorSelectorOptions = getColorSelectorOptions;

package/currency/Currency.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CurrencyProps } from './types';
+export declare const Currency: ({ value, variant, currency, currencyOptions, }: CurrencyProps) => JSX.Element;

package/currency/Currency.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Currency = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+//hooks
+var useCurrency_1 = require("./useCurrency");
+//constants
+var constants_1 = require("./constants");
+var Currency = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? constants_1.DEFAULT_VARIANT : _b, _c = _a.currency, currency = _c === void 0 ? constants_1.DEFAULT_CURRENCY : _c, currencyOptions = _a.currencyOptions;
+    var formattedCurrency = (0, useCurrency_1.useCurrency)({ value: value, variant: variant, currency: currency, currencyOptions: currencyOptions });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedCurrency }, void 0);
+};
+exports.Currency = Currency;

package/currency/constants.d.ts

@@ -0,0 +1,3 @@
+import { CompactAutoFormat } from '../utils/intlNumberFormatUtils/types';
+export declare const DEFAULT_VARIANT: CompactAutoFormat;
+export declare const DEFAULT_CURRENCY = "USD";

package/currency/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CURRENCY = exports.DEFAULT_VARIANT = void 0;
+var types_1 = require("../utils/intlNumberFormatUtils/types");
+exports.DEFAULT_VARIANT = {
+    type: types_1.NUMBER_VARIANTS.COMPACT_AUTO_FORMAT,
+};
+exports.DEFAULT_CURRENCY = 'USD';

package/currency/index.d.ts

@@ -0,0 +1,5 @@
+export { Currency } from './Currency';
+export { useCurrency } from './useCurrency';
+export { getFormattedCurrency } from './utils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';