@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/esm/checkbox/styled-components.js

@@ -1,30 +1,30 @@
 import { __assign } from "tslib";
-import { borderColor, borderWidth } from '../helpers/longHandHelpers';
-import { getOutlineStyles } from '../helpers/commonStyles';
-import { hex2rgb } from '../helpers';
+import { getNeutral400Hex } from '../input/neutral400Hex';
+import { styled, styledWithCssVariables } from '../style';
+import cx from 'classnames';
 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; }
+    if (defaultColor === void 0) { defaultColor = theme.spr.interactive; }
     switch ($intent) {
         case 'default':
         default: {
             return defaultColor;
         }
         case 'success':
-            return theme.spr.supportSuccess;
+            return theme.spr.bgSuccess;
         case 'warning':
-            return theme.spr.supportWarning;
+            return theme.spr.bgWarning;
         case 'error':
-            return theme.spr.supportError;
+            return theme.spr.bgError;
         case 'ai':
-            return theme.spr.clrViolet;
+            return theme.ai.ui04;
     }
 };
 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; }
+    if (defaultColor === void 0) { defaultColor = theme.spr.borderQuinary; }
     switch ($intent) {
         case 'default':
         case 'ai':
@@ -32,98 +32,172 @@ var getBorderIntentColor = function (_a, _b, defaultColor) {
             return defaultColor;
         }
         case 'success':
-            return theme.spr.supportSuccess;
+            return theme.spr.borderSuccess;
         case 'warning':
-            return theme.spr.supportWarning;
+            return theme.spr.borderWarning;
         case 'error':
-            return theme.spr.supportError;
+            return theme.spr.borderError;
     }
 };
-var getBorderColor = function (utils, props) {
+export var getCheckmarkBorderColor = function (utils, props) {
     var theme = utils.theme;
-    var $disabled = props.$disabled, $checked = props.$checked, $isIndeterminate = props.$isIndeterminate, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
-    if ($checked || $isIndeterminate) {
+    var $checked = props.$checked, $isIndeterminate = props.$isIndeterminate, $disabled = props.$disabled, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
+    if ($checked || $isIndeterminate)
         return 'transparent';
-    }
-    if ($disabled) {
-        return hex2rgb(getBorderIntentColor(utils, props, theme.spr.iconDisable), '0.5');
-    }
-    if ($isHovered || $isFocusVisible) {
-        return getBorderIntentColor(utils, props, theme.spr.border06);
-    }
-    return getBorderIntentColor(utils, props, theme.spr.border04);
+    if ($disabled)
+        return getNeutral400Hex(theme);
+    if ($isHovered || $isFocusVisible)
+        return getBorderIntentColor(utils, props, theme.spr.borderQuaternary);
+    return getBorderIntentColor(utils, props, getNeutral400Hex(theme));
 };
-var getBackgroundColor = function (utils, props) {
-    var $disabled = props.$disabled, $checked = props.$checked, $isIndeterminate = props.$isIndeterminate;
-    if ($disabled) {
-        if ($checked || $isIndeterminate) {
-            return hex2rgb(getBackgroundIntentColor(utils, props), '0.5');
-        }
-        return 'transparent';
-    }
+export var getCheckmarkBackgroundColor = function (utils, props) {
+    var theme = utils.theme;
+    var $checked = props.$checked, $isIndeterminate = props.$isIndeterminate, $disabled = props.$disabled, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
     if ($checked || $isIndeterminate) {
+        if (!$disabled && ($isHovered || $isFocusVisible)) {
+            return getBackgroundIntentColor(utils, props, theme.spr.interactiveHover);
+        }
         return getBackgroundIntentColor(utils, props);
     }
+    if ($disabled)
+        return theme.spr.bgTertiary;
+    return theme.spr.bgPrimary;
+};
+//// Styled components //////
+export var StyledRoot = styled('label', 'flex select-none w-fit relative', function (_, _a) {
+    var $disabled = _a.$disabled, $labelPlacement = _a.$labelPlacement;
+    return cx($disabled ? 'cursor-not-allowed' : 'cursor-pointer', $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'items-start' : 'items-center', $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'flex-col' : 'flex-row');
+});
+StyledRoot.displayName = 'Root';
+var checkMarkDimension = {
+    sm: 'h-3 w-3',
+    md: 'h-3.5 w-3.5',
+    lg: 'h-4 w-4',
+    medium: 'h-3.5 w-3.5',
+    large: 'h-4.5 w-4.5',
+};
+var checkMarkMargin = {
+    sm: 'mt-0.5 mb-0.5',
+    md: 'mt-0.5 mb-0.5',
+    lg: 'mt-0.5 mb-0.5',
+    medium: 'mt-[--sw-margin-block-start] mb-[--sw-margin-block-end]',
+    large: 'mt-0.75 mb-0.75',
+};
+export var StyledCheckmark = styledWithCssVariables('span', function (_, props) { return (__assign({}, (props.$size === 'medium' ? { '--sw-margin-block-start': '0.35rem', '--sw-margin-block-end': '0.35rem' } : {}))); }, 'box-border border self-start mx-0 border-solid inline-block' +
+    ' align-middle flex-none rounded-2 bg-no-repeat bg-center bg-contain', 'border-[--sw-border-color] bg-[--sw-bg-color] bg-[--sw-bg-size] spr-text-white flex justify-center items-center ', function (_, _a) {
+    var $size = _a.$size;
+    return "".concat(checkMarkDimension[$size], " ").concat(checkMarkMargin[$size]);
+}, function (_, _a) {
+    var $checked = _a.$checked, $isIndeterminate = _a.$isIndeterminate, $disabled = _a.$disabled;
+    return cx([
+        ($checked || $isIndeterminate) && $disabled ? 'opacity-33 forced-colors:opacity-100' : '',
+        $disabled ? 'forced-colors:border-disabled forced-colors:text-disabled' : '',
+    ]);
+}, function (_, _a) {
+    var $isFocusVisible = _a.$isFocusVisible;
+    return ($isFocusVisible ? 'outline outline-2 outline-offset-2 outline-[--spr-focus-01]' : '');
+});
+StyledCheckmark.displayName = 'Checkmark';
+var paddingDirections = { top: 'b', bottom: 't', left: 'r', right: 'l' };
+export var StyledLabel = styled('div', 'break-words align-middle', function (_, _a) {
+    var _b = _a.$size, $size = _b === void 0 ? 'md' : _b, $disabled = _a.$disabled, $labelPlacement = _a.$labelPlacement;
+    var fonts = {
+        sm: 'text-12 leading-4 font-500',
+        md: 'text-13 leading-4.5 font-500',
+        lg: 'text-14 leading-5 font-500',
+        medium: 'text-14 leading-150 font-400',
+        large: 'text-16 leading-150 font-400',
+    };
+    return cx(fonts[$size], $disabled ? 'spr-text-tertiary forced-colors:text-disabled' : 'spr-text-primary', "p".concat(paddingDirections[$labelPlacement] || 'l', "-").concat($size === 'lg' ? '2.5' : '2'));
+}, function (_, _a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 'forced-colors:text-disabled' : '');
+});
+StyledLabel.displayName = 'Label';
+export var StyledInput = styled('input', 'sr-only');
+StyledInput.displayName = 'Input';
+var getToggleBackgroundColor = function (utils, props) {
+    var theme = utils.theme;
+    var $checked = props.$checked, $disabled = props.$disabled;
+    if (!$checked && $disabled)
+        return getNeutral400Hex(theme);
+    return theme.spr.bgPrimary;
+};
+var getToggleBorderColor = function (utils, props) {
+    var theme = utils.theme;
+    var $checked = props.$checked, $disabled = props.$disabled, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
+    if (!$checked && !$disabled && ($isHovered || $isFocusVisible))
+        return theme.spr.borderQuaternary;
     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;
-}
-export var getLabelOverrides = function (_a, _b) {
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $disabled = _b.$disabled, $size = _b.$size, $labelPlacement = _b.$labelPlacement;
-    var styles = __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;
-    }
-    if ($size === 'sm') {
-        styles.fontSize = theme.typography.bs3.fontSize;
-        styles.lineHeight = theme.typography.bs3.lineHeight;
-    }
-    return styles;
+var toggleDimension = {
+    sm: 'h-2.5 w-2.5',
+    md: 'h-3 w-3',
+    lg: 'h-4 w-4',
+    medium: 'h-3 w-3',
+    large: 'h-3.75 w-3.75',
 };
-export var getCheckmarkOverrides = function (utils, props) {
-    var px2rem = utils.px2rem;
-    var $size = props.$size, $isFocusVisible = props.$isFocusVisible, $outlineStyle = props.$outlineStyle, $outlineColor = props.$outlineColor, $outlineOffset = props.$outlineOffset, $outlineWidth = props.$outlineWidth;
-    var styles = __assign(__assign(__assign(__assign({ boxSizing: 'border-box', backgroundColor: getBackgroundColor(utils, props) }, borderColor(getBorderColor(utils, props))), borderWidth(px2rem(1))), { height: px2rem(14), width: px2rem(14), marginTop: px2rem(2), marginBottom: px2rem(2), marginLeft: '0', marginRight: '0', borderTopLeftRadius: px2rem(2), borderBottomLeftRadius: px2rem(2), borderBottomRightRadius: px2rem(2), borderTopRightRadius: px2rem(2), backgroundSize: "".concat(px2rem(8), " ").concat(px2rem(6)), alignSelf: 'flex-start' }), ($isFocusVisible
-        ? getOutlineStyles(utils, { $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth })
-        : {}));
-    switch ($size) {
-        case 'lg':
-            styles.height = styles.width = px2rem(16);
-            styles.backgroundSize = "".concat(px2rem(9), " ").concat(px2rem(7));
-            break;
-        case 'sm':
-            styles.height = styles.width = px2rem(12);
-            break;
-        default:
-            break;
-    }
-    return styles;
+export var StyledToggle = styledWithCssVariables('div', function (utils, props) { return ({
+    '--sw-bg-color': getToggleBackgroundColor(utils, props),
+    '--sw-border-color': getToggleBorderColor(utils, props),
+}); }, 'm-px outline-none flex items-center box-border rounded-full duration-200 box-shadow-none' +
+    ' bg-[--sw-bg-color] border-[--sw-border-color]', function (_, _a) {
+    var _b = _a.$size, $size = _b === void 0 ? 'md' : _b;
+    return toggleDimension[$size];
+}, function (_, _a) {
+    var $checked = _a.$checked, $disabled = _a.$disabled;
+    return cx([
+        !$checked && $disabled ? 'forced-colors:border-1 forced-colors:border-disabled' : '',
+        !$checked && !$disabled ? 'forced-colors:border-1' : '',
+    ]);
+}, function (_a, _b) {
+    var isRTL = _a.isRTL;
+    var $checked = _b.$checked;
+    if ($checked)
+        return isRTL ? '-translate-x-full' : 'translate-x-full';
+    return '';
+});
+StyledToggle.displayName = 'Toggle';
+export var getTrackBackgroundColor = function (utils, props) {
+    var theme = utils.theme;
+    var $checked = props.$checked, $disabled = props.$disabled;
+    if ($checked)
+        return getBackgroundIntentColor(utils, props);
+    if ($disabled)
+        return theme.spr.bgQuinary;
+    return getNeutral400Hex(theme);
+};
+export var getTrackBorderColor = function (utils, props) {
+    var theme = utils.theme;
+    var $checked = props.$checked, $disabled = props.$disabled, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
+    if (!$checked && !$disabled && ($isHovered || $isFocusVisible))
+        return theme.spr.borderQuaternary;
+    return 'transparent';
+};
+var toggleTrackDimension = {
+    sm: 'h-3.5 w-6',
+    md: 'h-4 w-7',
+    lg: 'h-5 w-9',
+    medium: 'h-4 w-7',
+    large: 'h-5 w-[--sw-width]',
 };
-export var getRootOverrides = function () { return ({
-    alignItems: 'center',
-    userSelect: undefined,
-}); };
+export var StyledToggleTrack = styledWithCssVariables('div', function (_, props) { return ({
+    '--sw-width': props.$size === 'large' ? '3.5rem' : '',
+}); }, 'items-center flex rounded-max box-border border-1 m-0 border-solid flex-none box-shadow-none' +
+    ' bg-[--sw-bg-color] border-[--sw-border-color]', function (_, _a) {
+    var _b = _a.$size, $size = _b === void 0 ? 'md' : _b;
+    return toggleTrackDimension[$size];
+}, function (_, _a) {
+    var $checked = _a.$checked, $disabled = _a.$disabled;
+    return cx([
+        $checked && $disabled
+            ? 'opacity-33 forced-colors:opacity-100 forced-colors:bg-disabled forced-colors:border-disabled'
+            : '',
+        $checked && !$disabled ? 'forced-colors:bg-highlight' : '',
+        !$checked && $disabled ? 'forced-colors:border-disabled' : '',
+    ]);
+}, function (_, _a) {
+    var $isFocusVisible = _a.$isFocusVisible;
+    return ($isFocusVisible ? 'outline outline-2 outline-offset-2 outline-[--spr-focus-01]' : '');
+});
+StyledToggleTrack.displayName = 'ToggleTrack';

package/esm/checkbox/types.d.ts

@@ -1,36 +1,88 @@
 import * as React from 'react';
-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 & {
+import { STYLE_TYPE } from './constants';
+export type StyleType = keyof typeof STYLE_TYPE;
+export type LabelPlacement = 'top' | 'right' | 'bottom' | 'left';
+/** @deprecated */
+type DeprecatedCheckboxSize = 'sm' | 'md' | 'lg';
+export type CheckboxSize = 'medium' | 'large' | DeprecatedCheckboxSize;
+/** @deprecated */
+type DeprecatedIntent = 'success' | 'warning' | 'ai';
+export type CheckboxIntent = Exclude<Intent, DeprecatedIntent> | DeprecatedIntent;
+export type CheckboxReducerState = {
+    checked?: boolean;
+    isIndeterminate?: boolean;
+};
+export type StateReducer = (stateType: string, nextState: CheckboxReducerState, currentState: CheckboxReducerState, event: React.ChangeEvent<HTMLInputElement>) => CheckboxReducerState;
+export type SharedProps = Omit<BaseSharedProps, '$size' | '$adjoined'> & {
     $checked: boolean;
-    $intent: Intent;
+    $intent?: CheckboxIntent;
     $isFocusVisible: boolean;
     $isHovered: boolean;
     $isIndeterminate: boolean;
     $size: CheckboxSize;
+    /** @deprecated */
     $labelPlacement: LabelPlacement;
 };
-declare type CommonProps = {
+export type CheckboxOverrides = {
+    Checkmark?: Override<SharedProps & Record<string, any>>;
+    Label?: Override<SharedProps & Record<string, any>>;
+    Root?: Override<SharedProps & Record<string, any>>;
+    Input?: Override<SharedProps & Record<string, any>>;
+    Toggle?: Override<SharedProps & Record<string, any>>;
+    ToggleInner?: Override<SharedProps & Record<string, any>>;
+    ToggleTrack?: Override<SharedProps & Record<string, any>>;
+};
+type BaseCheckboxProps = {
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    ariaLabel?: string;
+    'aria-label'?: string;
+    children?: React.ReactNode;
+    containsInteractiveElement?: boolean;
+    overrides?: CheckboxOverrides;
+    size?: CheckboxSize;
+    intent?: CheckboxIntent;
+    inputRef?: React.Ref<HTMLInputElement>;
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    checkmarkType?: StyleType;
+    autoFocus?: boolean;
+    id?: string;
+    name?: string;
+    value?: string;
+    isIndeterminate?: boolean;
+    /** @deprecated */
+    labelPlacement?: LabelPlacement;
+    title?: string | null;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseDown?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseUp?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
     onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
-    size?: CheckboxSize;
-    intent?: Intent;
-    inputRef?: React.Ref<HTMLInputElement>;
 };
-export declare type CheckboxProps = SpacewebComponentProps<Omit<BaseCheckboxProps, 'overrides' | keyof CommonProps>> & {
-    overrides?: {
-        [key in keyof Required<BaseCheckboxProps>['overrides']]?: Override<SharedProps>;
-    };
-} & OutlineProps & CommonProps;
-export declare type StatefulCheckboxProps = SpacewebComponentProps<Omit<BaseStatefulCheckboxProps, 'overrides' | keyof CommonProps>> & {
-    overrides?: {
-        [key in keyof Required<BaseStatefulCheckboxProps>['overrides']]?: Override<SharedProps>;
-    };
-} & OutlineProps & CommonProps;
+export type CheckboxProps = SpacewebComponentProps<BaseCheckboxProps> & OutlineProps & {
+    'data-spaceweb'?: string;
+};
+export type StatefulCheckboxProps = SpacewebComponentProps<Omit<CheckboxProps, 'value'>> & {
+    initialState?: CheckboxReducerState;
+};
+export type StatefulContainerProps = {
+    overrides?: CheckboxOverrides;
+    initialState?: CheckboxReducerState;
+    stateReducer?: StateReducer;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    autoFocus?: boolean;
+};
 export {};

package/esm/color-picker/ColorPalette.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { ColorPickerOverrides } from './types';
-declare type ContentProps = {
+import { ColorPickerOverrides, ColorPickerProps } from './types';
+type ContentProps = {
     color?: string;
+    noReset?: boolean;
     overrides?: ColorPickerOverrides;
     onChange: (color?: string) => void;
-};
+} & Pick<ColorPickerProps, 'enableAlphaSelector' | 'colorPalette' | 'presets'>;
 export declare const ColorPalette: import("react").NamedExoticComponent<ContentProps>;
 export {};

package/esm/color-picker/ColorPalette.js

@@ -1,24 +1,30 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-// import { Typography } from '../typography';
+import { memo, Fragment, useMemo } from 'react';
 import { Box } from '../box';
 import { Grid } from '../grid';
 import { Swatch as DefaultSwatch } from './Swatch';
-// import { useTheme } from '../theme';
+import { useLocale } from '../locale';
 import { useOverrides } from '../overrides';
-import { COLOR_PALETTE, SPRINKLR_PRESET_COLORS } from './colors';
+import { COLOR_PALETTE, SPRINKLR_PRESET_COLORS, RESET_COLOR } from './colors';
+import { SWATCHES_PER_ROW } from './constants';
 import { Typography } from '../typography';
+var defaultColorPalette = COLOR_PALETTE.flat();
 export var ColorPalette = memo(function (_a) {
-    // const { theme } = useTheme();
-    var selectedColor = _a.color, overrides = _a.overrides, onChange = _a.onChange;
+    var selectedColor = _a.color, overrides = _a.overrides, onChange = _a.onChange, _colorPalette = _a.colorPalette, _presets = _a.presets, noReset = _a.noReset;
+    var locale = useLocale();
+    var presets = useMemo(function () {
+        var defaultPreset = {
+            label: locale.colorPicker.sprinklrPresets,
+            colors: noReset ? SPRINKLR_PRESET_COLORS : __spreadArray([RESET_COLOR], __read(SPRINKLR_PRESET_COLORS), false),
+        };
+        return typeof _presets === 'function' ? _presets(defaultPreset) : _presets !== null && _presets !== void 0 ? _presets : [defaultPreset];
+    }, [_presets, noReset, locale.colorPicker]);
+    var colorPalette = _colorPalette !== null && _colorPalette !== void 0 ? _colorPalette : defaultColorPalette;
     var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Swatches, Grid), 2), Swatches = _b[0], swatchesProps = _b[1];
     var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Swatch, DefaultSwatch), 2), Swatch = _c[0], swatchProps = _c[1];
-    // const sprinklrClrTokens = useMemo(
-    //   () => Object.keys(theme.spr).filter((token: string): boolean => token.startsWith('clr')),
-    //   [theme]
-    // );
-    return (_jsxs(Box, { children: [_jsx(Typography, __assign({ className: "spr-text-02" }, { children: "Spinklr Presets" }), void 0), _jsx(Swatches, __assign({ className: "mb-3 mt-2", cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: SPRINKLR_PRESET_COLORS.map(function (color) { return (_jsx(Swatch, __assign({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); }) }), void 0), _jsx(Swatches, __assign({ cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: COLOR_PALETTE.map(function (row) {
-                    return row.map(function (color) { return (_jsx(Swatch, __assign({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); });
-                }) }), void 0)] }, void 0));
+    return (_jsxs(Box, __assign({ className: "min-h-40" }, { children: [presets.map(function (preset, index) {
+                var _a;
+                return ((_a = preset.colors) === null || _a === void 0 ? void 0 : _a.length) ? (_jsxs(Fragment, { children: [_jsx(Typography, __assign({ className: "spr-text-primary", variant: "body-md", weight: "semibold" }, { children: preset.label })), _jsx(Swatches, __assign({ className: "mb-4 mt-2", cols: SWATCHES_PER_ROW, colGap: 1, rowGap: 1 }, swatchesProps, { children: preset.colors.map(function (color) { return (_jsx(Swatch, __assign({ color: color, onChange: onChange, isSelected: selectedColor === color || (!selectedColor && color === RESET_COLOR) }, swatchProps, { className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }), color)); }) }))] }, preset.label)) : null;
+            }), (colorPalette === null || colorPalette === void 0 ? void 0 : colorPalette.length) ? (_jsx(Swatches, __assign({ cols: SWATCHES_PER_ROW, colGap: 1, rowGap: 1 }, swatchesProps, { children: colorPalette.map(function (color) { return (_jsx(Swatch, __assign({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps, { className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }), color)); }) }))) : null] })));
 });

package/esm/color-picker/ColorPicker.d.ts

@@ -1,3 +1,11 @@
-import { ReactElement } from 'react';
-import { ColorPickerProps } from './types';
-export declare const ColorPicker: ({ value, overrides, heading, onChange, onChangeComplete, resetButtonLabel, enableGradientSelector, }: ColorPickerProps) => ReactElement;
+import { type ReactElement } from 'react';
+import type { ColorPickerProps, OnChange } from './types';
+/**
+ * Attach appropriate adaptive theme color values to the data being passed in changeCallbacks
+ */
+export declare function getOnChangeWithTheme(changeCallback: OnChange, isDarkMode: boolean): OnChange;
+export declare const ColorPicker: {
+    ({ value: _value, overrides, heading, onChange: onChangeProp, onChangeComplete, enableGradientSelector, enableAlphaSelector, colorPalette, presets, noReset, renderColorSuggestionPanel, }: ColorPickerProps): ReactElement;
+    displayName: string;
+    __standard: string;
+};

package/esm/color-picker/ColorPicker.js

@@ -4,63 +4,82 @@ import { useMemo, useState } from 'react';
 // Components
 import { Typography } from '../typography';
 import { Box } from '../box';
-import ResetColorIcon from '../icon/components/reset-color';
-import { Button } from '../button';
 import ColorSelector from './ColorSelector';
 import { Select } from '../select';
 import { StyledRoot } from './styled-component';
-//Utils and Constants
+// Utils and Constants
 import { useOverrides } from '../overrides';
 import { useLocale } from '../locale';
 import { getColorSet } from './colors';
+import { useTheme } from '../theme';
+import { isDarkTheme } from '../helpers/themeHelpers';
 import _noop from 'lodash/noop';
-import { getColorSelectorOptions } from './utils';
-var RESET_CLASSNAME = [
-    'spr-text-01 hover:spr-text-04',
-    function (_a) {
-        var theme = _a.theme;
-        return ({
-            ':disabled': {
-                color: theme.spr.text01,
-                ':hover': {
-                    color: theme.spr.text01,
-                },
-            },
-        });
-    },
-];
+import { getColorSelectorOptions, getHexFromInput } from './utils';
+import { invertColor } from './adaptiveThemeColor';
+import { RgbToHex } from '../helpers/colors';
+/**
+ * Attach appropriate adaptive theme color values to the data being passed in changeCallbacks
+ */
+export function getOnChangeWithTheme(changeCallback, isDarkMode) {
+    return function (colorValue, colorObj) {
+        if (!colorValue)
+            return changeCallback(colorValue, colorObj);
+        var colorString = typeof colorValue === 'string' ? colorValue : RgbToHex(colorValue);
+        var currentTheme = isDarkMode ? 'dark' : 'light';
+        var lightHex = !isDarkMode ? colorString : invertColor(colorString);
+        var darkHex = isDarkMode ? colorString : invertColor(colorString);
+        var adaptiveThemeColors = {
+            light: lightHex,
+            dark: darkHex,
+            mergedStringColor: "".concat(lightHex, ";").concat(darkHex),
+            sourceTheme: currentTheme,
+        };
+        var newColorObj = !colorObj || colorObj.type === 'gradient' ? colorObj : __assign(__assign({}, colorObj), { adaptiveThemeColors: adaptiveThemeColors });
+        return changeCallback(colorString, newColorObj);
+    };
+}
 export var ColorPicker = function (_a) {
     var _b;
-    var value = _a.value, overrides = _a.overrides, heading = _a.heading, _c = _a.onChange, onChange = _c === void 0 ? _noop : _c, _d = _a.onChangeComplete, onChangeComplete = _d === void 0 ? _noop : _d, resetButtonLabel = _a.resetButtonLabel, _e = _a.enableGradientSelector, enableGradientSelector = _e === void 0 ? false : _e;
+    var _value = _a.value, overrides = _a.overrides, heading = _a.heading, _c = _a.onChange, onChangeProp = _c === void 0 ? _noop : _c, _d = _a.onChangeComplete, onChangeComplete = _d === void 0 ? _noop : _d, _e = _a.enableGradientSelector, enableGradientSelector = _e === void 0 ? false : _e, _f = _a.enableAlphaSelector, enableAlphaSelector = _f === void 0 ? false : _f, colorPalette = _a.colorPalette, presets = _a.presets, noReset = _a.noReset, renderColorSuggestionPanel = _a.renderColorSuggestionPanel;
+    var theme = useTheme().theme;
+    var isDarkMode = isDarkTheme(theme);
+    // support extracting the correct hex if a mergedStringColor is provided
+    var value = getHexFromInput(_value, isDarkMode, enableAlphaSelector);
     var colorSet = useMemo(function () { return getColorSet(); }, []);
     var locale = useLocale();
-    var _f = 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 = __read(useState(value), 2), color = _g[0], setColor = _g[1];
-    var _h = __read(useState(value), 2), prevValue = _h[0], setPrevValue = _h[1];
-    if (prevValue !== value) {
+    var _g = getColorSelectorOptions(locale), COLOR_PALETTE_OPTION = _g.COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION = _g.SOLID_COLOR_OPTION, GRADIENT_COLOR_OPTION = _g.GRADIENT_COLOR_OPTION;
+    var _h = __read(useState(value), 2), color = _h[0], setColor = _h[1];
+    var _j = __read(useState(value), 2), prevValue = _j[0], setPrevValue = _j[1];
+    if (value !== prevValue) {
         setPrevValue(value);
         setColor(value);
     }
-    var _j = __read(useState(function () {
-        if (colorSet.has(value) || value === undefined)
+    var _k = __read(useState(function () {
+        if (value === undefined || colorSet.has(value))
             return [COLOR_PALETTE_OPTION];
-        else if (enableGradientSelector && (value === null || value === void 0 ? void 0 : value.toLowerCase().includes('gradient')))
+        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 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, Typography), 2), Heading = _k[0], headingProps = _k[1];
-    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _l[0], rootProps = _l[1];
-    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Select, Select), 2), SelectOverride = _m[0], selectProps = _m[1];
-    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ResetButton, Button), 2), ResetButtonOverride = _o[0], resetButtonProps = _o[1];
+        return [SOLID_COLOR_OPTION];
+    }), 2), selectedTab = _k[0], setSelectedTab = _k[1];
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, Typography), 2), Heading = _l[0], headingProps = _l[1];
+    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _m[0], rootProps = _m[1];
+    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Select, Select), 2), SelectOverride = _o[0], selectProps = _o[1];
     var _p = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ColorSelectorContainer, Box), 2), ColorSelectorContainer = _p[0], colorSelectorContainerProps = _p[1];
-    return (_jsxs(Root, __assign({}, rootProps, { children: [heading ? (_jsx(Heading, __assign({ "$as": "div", className: "spr-text-03", weight: "bold", variant: "bs3" }, headingProps, { children: heading }), void 0)) : null, _jsx(SelectOverride
+    var handleChange = useMemo(function () {
+        var onChange = function (colorString, colorObj) {
+            onChangeProp(colorString, colorObj);
+            setColor(colorString);
+        };
+        return enableGradientSelector ? onChange : getOnChangeWithTheme(onChange, isDarkMode);
+    }, [enableGradientSelector, isDarkMode, onChangeProp]);
+    var handleChangeComplete = enableGradientSelector
+        ? onChangeComplete
+        : getOnChangeWithTheme(onChangeComplete, isDarkMode);
+    return (_jsxs(Root, __assign({}, rootProps, { children: [heading ? (_jsx(Heading, __assign({ "$as": "div", className: "spr-text-secondary mb-1", weight: "semibold", variant: "body-md" }, headingProps, { children: heading }))) : null, _jsx(SelectOverride
             // autoFocus
             , __assign({ 
                 // autoFocus
-                clearable: false, virtual: false, options: __spreadArray([COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION], __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), _jsx(ColorSelectorContainer, __assign({ className: "w-64" }, colorSelectorContainerProps, { children: _jsx(ColorSelector, { 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), _jsx(Box, __assign({ className: "flex justify-start " }, { children: _jsx(ResetButtonOverride, __assign({ startEnhancer: _jsx(ResetColorIcon, { 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));
+                clearable: false, virtual: false, options: __spreadArray([COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION], __read((enableGradientSelector ? [GRADIENT_COLOR_OPTION] : [])), false), value: selectedTab, required: true, searchable: false, backspaceRemoves: false, type: "select", placeholder: locale.colorPicker.selectColorLabel, onChange: function (e) { return setSelectedTab(e.value); } }, selectProps)), _jsx(ColorSelectorContainer, __assign({ className: "mt-4", style: { width: selectedTab[0] !== COLOR_PALETTE_OPTION && enableAlphaSelector ? '309px' : '276px' } }, colorSelectorContainerProps, { children: _jsx(ColorSelector, { selectedTab: (_b = selectedTab[0].id) !== null && _b !== void 0 ? _b : 1, color: color, overrides: overrides, onChange: handleChange, onChangeComplete: handleChangeComplete, enableAlphaSelector: enableAlphaSelector, colorPalette: colorPalette, presets: presets, noReset: noReset, renderColorSuggestionPanel: renderColorSuggestionPanel }) }))] })));
 };
+ColorPicker.displayName = 'ColorPicker';
+ColorPicker.__standard = 'Component';

package/esm/color-picker/ColorSelector.d.ts

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