@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

package/es/components/molecules/FontFamilySelect/constants.js

@@ -0,0 +1,257 @@
+export const OPTION_FONT_FAMILY = [
+    {
+        label: 'Arial',
+        value: 'Arial',
+        style: { fontFamily: 'Arial' },
+    },
+    {
+        label: 'Sacramento',
+        value: 'Sacramento',
+        style: { fontFamily: 'Sacramento' },
+    },
+    {
+        label: 'PT Serif',
+        value: 'PT Serif',
+        style: { fontFamily: 'PT Serif' },
+    },
+    {
+        label: 'Georgia',
+        value: 'Georgia',
+        style: { fontFamily: 'Georgia' },
+    },
+    {
+        label: 'Helvetica',
+        value: 'Helvetica',
+        style: { fontFamily: 'Helvetica' },
+    },
+    {
+        label: 'Helvetica Neue',
+        value: 'Helvetica Neue',
+        style: { fontFamily: 'Helvetica Neue' },
+    },
+    {
+        label: 'Lucida Grande',
+        value: 'Lucida Grande',
+        style: { fontFamily: 'Lucida Grande' },
+    },
+    {
+        label: 'Tahoma',
+        value: 'Tahoma',
+        style: { fontFamily: 'Tahoma' },
+    },
+    {
+        label: 'Times New Roman',
+        value: 'Times New Roman',
+        style: { fontFamily: 'Times New Roman' },
+    },
+    {
+        label: 'Verdana',
+        value: 'Verdana',
+        style: { fontFamily: 'Verdana' },
+    },
+    {
+        label: 'Abril Fatface',
+        value: 'Abril Fatface',
+        style: { fontFamily: 'Abril Fatface' },
+    },
+    {
+        label: 'Aleo',
+        value: 'Aleo',
+        style: { fontFamily: 'Aleo' },
+    },
+    {
+        label: 'Arvo',
+        value: 'arvo',
+        style: { fontFamily: 'Arvo' },
+    },
+    {
+        label: 'Bitter',
+        value: 'bitter',
+        style: { fontFamily: 'Bitter' },
+    },
+    {
+        label: 'Bree Serif',
+        value: 'Bree Serif',
+        style: { fontFamily: 'Bree Serif' },
+    },
+    {
+        label: 'Cabin',
+        value: 'Cabin',
+        style: { fontFamily: 'Cabin' },
+    },
+    {
+        label: 'Cookie',
+        value: 'Cookie',
+        style: { fontFamily: 'Cookie' },
+    },
+    {
+        label: 'Delius Swash Caps',
+        value: 'Delius Swash Caps',
+        style: { fontFamily: 'Delius Swash Caps' },
+    },
+    {
+        label: 'Dosis',
+        value: 'Dosis',
+        style: { fontFamily: 'Dosis' },
+    },
+    {
+        label: 'Droid Sans',
+        value: 'Droid Sans',
+        style: { fontFamily: 'Droid Sans' },
+    },
+    {
+        label: 'Droid Serif',
+        value: 'Droid Serif',
+        style: { fontFamily: 'Droid Serif' },
+    },
+    {
+        label: 'EB Garamond',
+        value: 'EB Garamond',
+        style: { fontFamily: 'EB Garamond' },
+    },
+    {
+        label: 'Josefin Slab',
+        value: 'Josefin Slab',
+        style: { fontFamily: 'Josefin Slab' },
+    },
+    {
+        label: 'Just Another Hand',
+        value: 'Just Another Hand',
+        style: { fontFamily: 'Just Another Hand' },
+    },
+    {
+        label: 'Lakki Reddy',
+        value: 'Lakki Reddy',
+        style: { fontFamily: 'Lakki Reddy' },
+    },
+    {
+        label: 'Lato',
+        value: 'Lato',
+        style: { fontFamily: 'Lato' },
+    },
+    {
+        label: 'Libre Baskerville',
+        value: 'Libre Baskerville',
+        style: { fontFamily: 'Libre Baskerville' },
+    },
+    {
+        label: 'Lobster',
+        value: 'Lobster',
+        style: { fontFamily: 'Lobster' },
+    },
+    {
+        label: 'Lora',
+        value: 'Lora',
+        style: { fontFamily: 'Lora' },
+    },
+    {
+        label: 'Mali',
+        value: 'Mali',
+        style: { fontFamily: 'Mali' },
+    },
+    {
+        label: 'Merriweather',
+        value: 'Merriweather',
+        style: { fontFamily: 'Merriweather' },
+    },
+    {
+        label: 'Montserrat',
+        value: 'Montserrat',
+        style: { fontFamily: 'Montserrat' },
+    },
+    {
+        label: 'Noto Sans',
+        value: 'Noto Sans',
+        style: { fontFamily: 'Noto Sans' },
+    },
+    {
+        label: 'Noto Serif',
+        value: 'Noto Serif',
+        style: { fontFamily: 'Noto Serif' },
+    },
+    {
+        label: 'Nunito',
+        value: 'Nunito',
+        style: { fontFamily: 'Nunito' },
+    },
+    {
+        label: 'Open Sans',
+        value: 'Open Sans',
+        style: { fontFamily: 'Open Sans' },
+    },
+    {
+        label: 'Oswald',
+        value: 'Oswald',
+        style: { fontFamily: 'Oswald' },
+    },
+    {
+        label: 'Poppins',
+        value: 'Poppins',
+        style: { fontFamily: 'Poppins' },
+    },
+    {
+        label: 'PT Sans',
+        value: 'PT Sans',
+        style: { fontFamily: 'PT Sans' },
+    },
+    {
+        label: 'Pinyon Script',
+        value: 'Pinyon Script',
+        style: { fontFamily: 'Pinyon Script' },
+    },
+    {
+        label: 'Playfair Display',
+        value: 'Playfair Display',
+        style: { fontFamily: 'Playfair Display' },
+    },
+    {
+        label: 'Quicksand',
+        value: 'Quicksand',
+        style: { fontFamily: 'Quicksand' },
+    },
+    {
+        label: 'Raleway',
+        value: 'Raleway',
+        style: { fontFamily: 'Raleway' },
+    },
+    {
+        label: 'Righteous',
+        value: 'Righteous',
+        style: { fontFamily: 'Righteous' },
+    },
+    {
+        label: 'Roboto Slab',
+        value: 'Roboto Slab',
+        style: { fontFamily: 'Roboto Slab' },
+    },
+    {
+        label: 'Roboto',
+        value: 'Roboto',
+        style: { fontFamily: 'Roboto' },
+    },
+    {
+        label: 'Rubik',
+        value: 'Rubik',
+        style: { fontFamily: 'Rubik' },
+    },
+    {
+        label: 'Sarabun',
+        value: 'Sarabun',
+        style: { fontFamily: 'Sarabun' },
+    },
+    {
+        label: 'Source Sans Pro',
+        value: 'Source Sans Pro',
+        style: { fontFamily: 'Source Sans Pro' },
+    },
+    {
+        label: 'Ubuntu',
+        value: 'Ubuntu',
+        style: { fontFamily: 'Ubuntu' },
+    },
+    {
+        label: 'Vollkorn',
+        value: 'Vollkorn',
+        style: { fontFamily: 'Vollkorn' },
+    },
+];

package/es/components/molecules/FontFamilySelect/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { OPTION_FONT_FAMILY } from './constants';
+import { SelectProps } from 'antd';
+export type FontFamilySelectProps = Omit<SelectProps, 'onChange'> & {
+    defaultValue?: string;
+    value?: string;
+    label?: string;
+    showOptions?: (typeof OPTION_FONT_FAMILY)[number]['label'][];
+    onChange?: (family: string) => void;
+};
+/**
+ * Renders a select input for font family options.
+ *
+ * @param {FontFamilySelectProps} props - The props for the component.
+ * @return {ReactNode} The rendered React node.
+ */
+export declare const FontFamilySelect: React.FC<FontFamilySelectProps>;

package/es/components/molecules/FontFamilySelect/index.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useEffect, useMemo, useState } from 'react';
+// Molecules
+import { Select } from '../Select';
+import { SettingWrapper } from '../SettingWrapper';
+// Constants
+import { OPTION_FONT_FAMILY } from './constants';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+/**
+ * Renders a select input for font family options.
+ *
+ * @param {FontFamilySelectProps} props - The props for the component.
+ * @return {ReactNode} The rendered React node.
+ */
+export const FontFamilySelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value);
+    }, [value]);
+    const { t } = i18nInstance;
+    const filteredFontFamilyOptions = useMemo(() => {
+        let filteredOptions = [...OPTION_FONT_FAMILY];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            filteredOptions = OPTION_FONT_FAMILY.filter(({ value }) => showOptions.some(font => font === value));
+        }
+        return filteredOptions;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...filteredFontFamilyOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};
+FontFamilySelect.defaultProps = {
+    showOptions: [],
+};

package/es/components/molecules/FontSetting/constants.d.ts

@@ -0,0 +1,3 @@
+import { TFontSettings, TFontStyles } from './types';
+export declare const FONT_SETTING_DEFAULT: TFontSettings;
+export declare const FONT_STYLE_DEFAULT: TFontStyles;

package/es/components/molecules/FontSetting/constants.js

@@ -0,0 +1,22 @@
+export const FONT_SETTING_DEFAULT = {
+    fontColor: '#000000',
+    fontFamily: 'Roboto',
+    fontItalic: false,
+    fontSize: 14,
+    fontWeight: '400',
+    letterSpacing: 2,
+    lineHeight: 1.5,
+    textTransform: 'none',
+    textDecoration: 'none',
+};
+export const FONT_STYLE_DEFAULT = {
+    color: '#000000',
+    fontFamily: 'Roboto',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 1.5,
+    letterSpacing: 2,
+    textTransform: 'none',
+    textDecoration: 'none',
+    fontStyle: 'normal',
+};

package/es/components/molecules/FontSetting/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PopoverProps } from 'antd';
+import { SettingWrapperProps } from '../SettingWrapper';
+import { TFontSettings, TFontStyles } from './types';
+type TFontSettingOptions = 'fontFamily' | 'color' | 'fontSize' | 'fontWeight' | 'textTransform' | 'textDecoration' | 'italic' | 'lineHeight' | 'letterSpacing';
+export type TFontSettingProps = {
+    label?: string;
+    settings: Partial<TFontSettings>;
+    styles: Partial<TFontStyles>;
+    showSettings?: TFontSettingOptions[];
+    wrapperProps?: Omit<SettingWrapperProps, 'label'>;
+    popoverProps?: Omit<PopoverProps, 'content'>;
+    childrenProps?: Omit<TFontSettingEditProps, 'settings' | 'styles' | 'onChange'>;
+    onChange?: (settings: Partial<TFontSettings>, styles: Partial<TFontStyles>) => void;
+};
+export type TFontSettingEditProps = {
+    settings: Partial<TFontSettings>;
+    styles: Partial<TFontStyles>;
+    showSettings?: TFontSettingOptions[];
+    onChange?: (settings: Partial<TFontSettings>, styles: Partial<TFontStyles>) => void;
+};
+export declare const FontSettingEdit: React.FC<TFontSettingEditProps>;
+export declare const FontSetting: React.FC<TFontSettingProps>;
+export {};

package/es/components/molecules/FontSetting/index.js

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+/* Components */
+import { Space, Switch } from '../../atoms';
+import { ColorSetting } from '../ColorSetting';
+import { SliderWithInputNumber } from '../SliderWithInputNumber';
+import { SettingWrapper } from '../SettingWrapper';
+import { SettingWrapperPopover } from '../SettingWrapperPopover';
+import { FontFamilySelect } from '../FontFamilySelect';
+import { FontWeightSelect } from '../FontWeightSelect';
+import { TextTransformSelect } from '../TextTransformSelect';
+import { TextDecorationSelect } from '../TextDecorationSelect';
+import { FONT_SETTING_DEFAULT, FONT_STYLE_DEFAULT } from './constants';
+export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) => {
+    const handleChange = (setting, style) => {
+        if (typeof onChange === 'function') {
+            const newSettings = Object.assign(Object.assign({}, settings), setting);
+            const newStyles = Object.assign(Object.assign({}, styles), style);
+            onChange(newSettings, newStyles);
+        }
+    };
+    const settingMap = useMemo(() => ({
+        fontFamily: (React.createElement(FontFamilySelect, { label: "Font Family", value: settings === null || settings === void 0 ? void 0 : settings.fontFamily, onChange: fontFamily => handleChange({ fontFamily }, { fontFamily }) })),
+        color: (React.createElement(ColorSetting, { label: "Font Color", color: settings === null || settings === void 0 ? void 0 : settings.fontColor, onChange: fontColor => handleChange({ fontColor }, { color: fontColor }) })),
+        fontSize: (React.createElement(SettingWrapper, { label: "Font Size", vertical: true },
+            React.createElement(SliderWithInputNumber, { value: typeof (settings === null || settings === void 0 ? void 0 : settings.fontSize) !== 'undefined' ? +settings.fontSize : 0, onAfterChange: fontSize => handleChange({ fontSize }, { fontSize }) }))),
+        fontWeight: (React.createElement(FontWeightSelect, { label: "Font Weight", value: settings === null || settings === void 0 ? void 0 : settings.fontWeight, onChange: fontWeight => handleChange({ fontWeight }, { fontWeight }) })),
+        lineHeight: (React.createElement(SettingWrapper, { label: "Line Height", vertical: true },
+            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.lineHeight) !== 'undefined' ? +settings.lineHeight : 0, min: 1, max: 5, step: 0.1, onAfterChange: lineHeight => handleChange({ lineHeight }, { lineHeight }) }))),
+        letterSpacing: (React.createElement(SettingWrapper, { label: "Letter Spacing", vertical: true },
+            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.letterSpacing) !== 'undefined' ? +settings.letterSpacing : 0, min: -10, max: 10, onAfterChange: letterSpacing => handleChange({ letterSpacing }, { letterSpacing }) }))),
+        textTransform: (React.createElement(TextTransformSelect, { label: "Text Transform", value: settings === null || settings === void 0 ? void 0 : settings.textTransform, onChange: textTransform => handleChange({ textTransform }, { textTransform }) })),
+        textDecoration: (React.createElement(TextDecorationSelect, { label: "Text Decoration", value: settings === null || settings === void 0 ? void 0 : settings.textDecoration, onChange: textDecoration => handleChange({ textDecoration }, { textDecoration }) })),
+        italic: (React.createElement(SettingWrapper, { label: "Font Style Italic" },
+            React.createElement(Switch, { checked: settings === null || settings === void 0 ? void 0 : settings.fontItalic, onChange: fontItalic => handleChange({ fontItalic }, { fontStyle: fontItalic ? 'italic' : 'normal' }) }))),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settings]);
+    const filteredSetting = useMemo(() => {
+        if (!showSettings || (showSettings === null || showSettings === void 0 ? void 0 : showSettings.length) === 0) {
+            return Object.keys(settingMap).map(keySetting => (React.createElement(React.Fragment, { key: keySetting }, settingMap[keySetting])));
+        }
+        return showSettings.map(keySetting => settingMap[keySetting]);
+    }, [showSettings, settingMap]);
+    return React.createElement(Space, { direction: "vertical" }, filteredSetting);
+};
+export const FontSetting = (props) => {
+    const { label, settings, styles, wrapperProps, popoverProps, childrenProps, showSettings, onChange, } = props;
+    return (React.createElement(SettingWrapperPopover, { label: label !== null && label !== void 0 ? label : 'Font Settings', popoverProps: Object.assign({ overlayStyle: { top: 0 }, placement: 'bottomRight' }, popoverProps), wrapperProps: Object.assign({ containerStyle: { minWidth: '288px' } }, wrapperProps) },
+        React.createElement(FontSettingEdit, Object.assign({ settings: settings, styles: styles, showSettings: showSettings, onChange: onChange }, childrenProps))));
+};
+FontSetting.defaultProps = {
+    settings: FONT_SETTING_DEFAULT,
+    styles: FONT_STYLE_DEFAULT,
+};

package/es/components/molecules/FontSetting/types.d.ts

@@ -0,0 +1,22 @@
+export type TFontSettings = {
+    fontFamily: string;
+    fontColor: string;
+    fontSize: string | number;
+    fontWeight: string | number;
+    lineHeight: string | number;
+    letterSpacing: string | number;
+    textTransform: string | number;
+    textDecoration: string;
+    fontItalic: boolean;
+};
+export type TFontStyles = {
+    fontFamily: string;
+    color: string;
+    fontSize: string | number;
+    fontWeight: string | number;
+    lineHeight: string | number;
+    letterSpacing: string | number;
+    textTransform: string | number;
+    textDecoration: string;
+    fontStyle: string;
+};

package/es/components/molecules/FontSetting/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/FontWeightSelect/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const OPTION_FONT_WEIGHT: readonly [{
+    readonly label: "Thin";
+    readonly value: "100";
+}, {
+    readonly label: "Extra Light";
+    readonly value: "200";
+}, {
+    readonly label: "Light";
+    readonly value: "300";
+}, {
+    readonly label: "Regular";
+    readonly value: "400";
+}, {
+    readonly label: "Medium";
+    readonly value: "500";
+}, {
+    readonly label: "Semi Bold";
+    readonly value: "600";
+}, {
+    readonly label: "Bold";
+    readonly value: "700";
+}, {
+    readonly label: "Extra Bold";
+    readonly value: "800";
+}, {
+    readonly label: "Black";
+    readonly value: "900";
+}];

package/es/components/molecules/FontWeightSelect/constants.js

@@ -0,0 +1,11 @@
+export const OPTION_FONT_WEIGHT = [
+    { label: 'Thin', value: '100' },
+    { label: 'Extra Light', value: '200' },
+    { label: 'Light', value: '300' },
+    { label: 'Regular', value: '400' },
+    { label: 'Medium', value: '500' },
+    { label: 'Semi Bold', value: '600' },
+    { label: 'Bold', value: '700' },
+    { label: 'Extra Bold', value: '800' },
+    { label: 'Black', value: '900' },
+];

package/es/components/molecules/FontWeightSelect/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_FONT_WEIGHT } from './constants';
+export type FontWeightSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_FONT_WEIGHT)[number]['label'][];
+    onChange?: (family: string) => void;
+};
+export declare const FontWeightSelect: React.FC<FontWeightSelectProps>;

package/es/components/molecules/FontWeightSelect/index.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { SettingWrapper } from '../SettingWrapper';
+import { OPTION_FONT_WEIGHT } from './constants';
+export const FontWeightSelect = props => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    const fontWeightOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_FONT_WEIGHT];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_FONT_WEIGHT.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...fontWeightOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

package/es/components/molecules/Form/Form.d.ts

@@ -0,0 +1 @@
+export { Form } from 'antd';

package/es/components/molecules/Form/Form.js

@@ -0,0 +1 @@
+export { Form } from 'antd';

package/es/components/molecules/Form/index.d.ts

@@ -0,0 +1 @@
+export { Form } from './Form';

package/es/components/molecules/Form/index.js

@@ -0,0 +1 @@
+export { Form } from './Form';

package/es/components/molecules/GradientSetting/index.d.ts

@@ -5,15 +5,32 @@ interface GradientColor {
     gradientColorLocation: number;
 }
 type PositionValue = (typeof POSITION)[keyof typeof POSITION]['value'];
-interface GradientConfig {
+export interface GradientConfig {
     gradients: GradientColor[];
     gradientType: 'linear-gradient' | 'radial-gradient';
     radialPosition: PositionValue;
     linearAngle: number;
 }
-interface GradientSettingProps {
+interface GradientSettingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     onChange?: (gradientConfig: GradientConfig) => void;
+    /** Return full background css with gradient color
+     * * @example
+     * ```
+     * getCSSProperty={value => {
+     *    // format of value is something like that: linear-gradient(90deg, rgb(209, 26, 102) 0%, rgb(255, 189, 100) 50%)
+     *    setBackgroundProperty(value)
+     * }}
+     * ```
+     */
+    getCSSProperty?: (value: string) => void;
     defaultValue?: GradientConfig;
+    /** Use to store color settings, if customColors undefine => hide preset colors
+     * @example
+     * ```
+     * customColors={['#646EFFDB', '#D11AB2']}
+     * ```
+     */
+    customColors?: string[];
 }
 export declare const GradientSetting: React.FC<GradientSettingProps>;
 export {};