@antscorp/antsomi-ui 1.3.4 → 1.3.5

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 => 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 {};

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

@@ -1,3 +1,14 @@
+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, useState } from 'react';
 // Components
@@ -11,13 +22,15 @@ import { cloneDeep } from 'lodash';
 import { GRADIENT_TYPE, POSITION } from '@antscorp/antsomi-ui/es/constants';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { GradientSettingWrapper } from './styled';
 const GRADIENT_MIN = 2;
 const GRADIENT_MAX = 5;
 const DEFAULT_GRADIENTS = [
     { gradientColor: '#D11A66', gradientColorLocation: 0 },
     { gradientColor: '#FFBD64', gradientColorLocation: 50 },
 ];
-export const GradientSetting = ({ onChange, defaultValue }) => {
+export const GradientSetting = props => {
+    const { defaultValue, customColors, className, onChange, getCSSProperty } = props, rest = __rest(props, ["defaultValue", "customColors", "className", "onChange", "getCSSProperty"]);
     const { gradientType: defaultGradientType, gradients: defaultGradients, linearAngle: defaultLinearAngle, radialPosition: defaultRadialPosition, } = defaultValue || {};
     // const { t } = useTranslation();
     const { t } = i18nInstance;
@@ -26,40 +39,49 @@ export const GradientSetting = ({ onChange, defaultValue }) => {
     const [radialPosition, setRadialPosition] = useState(defaultRadialPosition || 'center center');
     const [linearAngle, setLinearAngle] = useState(defaultLinearAngle || 90);
     useEffect(() => {
-        onChange && onChange({ gradients, gradientType, radialPosition, linearAngle });
+        if (onChange) {
+            onChange({ gradients, gradientType, radialPosition, linearAngle });
+        }
+        if (getCSSProperty) {
+            const prefixGradient = gradientType === 'linear-gradient'
+                ? `${linearAngle}deg`
+                : radialPosition !== 'center center'
+                    ? `circle at ${radialPosition}`
+                    : 'circle';
+            const gradientColor = gradients === null || gradients === void 0 ? void 0 : gradients.map(item => `${item.gradientColor} ${item.gradientColorLocation}%`).join(', ');
+            const gradientConfig = `${gradientType}(${prefixGradient}, ${gradientColor})`;
+            getCSSProperty(gradientConfig);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [JSON.stringify(gradients), gradientType, radialPosition, linearAngle]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.gradientStyle) },
-            React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) })),
-        gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "ants-mb-[15px]", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.position) },
-            React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }))),
+    return (React.createElement(GradientSettingWrapper, Object.assign({ className: className || '' }, rest),
+        React.createElement(SettingWrapper, { className: "setting-container", label: t(translations.gradientStyle) },
+            React.createElement(Select, { options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) })),
+        gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "setting-container", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "setting-container", label: t(translations.position) },
+            React.createElement(Select, { options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }))),
         Array.isArray(gradients) && gradients.length
             ? gradients.map((gradient, index) => {
                 const { gradientColor, gradientColorLocation } = gradient;
-                return (React.createElement("div", { className: "ants-flex ants-gap-x-2 ants-mb-[15px]", key: index },
-                    React.createElement("div", { className: "ants-grid md:ants-grid-cols-5 ants-grid-cols-1 ants-gap-y-5" },
-                        React.createElement("div", { className: "ants-col-span-2" },
-                            React.createElement(ColorSetting, { labelClassName: "!ants-text-cus-base", label: t(translations.gradientColor, {
-                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
-                                }), color: gradientColor, positionInput: "right", onChange: color => {
-                                    setGradients(prev => {
-                                        const clonePrev = cloneDeep(prev);
-                                        clonePrev[index].gradientColor = color;
-                                        return clonePrev;
-                                    });
-                                } })),
-                        React.createElement("div", { className: "ants-col-span-3" },
-                            React.createElement(SliderWithInputNumber, { label: t(translations.gradientLocation, {
-                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
-                                }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
-                                    setGradients(prev => {
-                                        const clonePrev = cloneDeep(prev);
-                                        clonePrev[index].gradientColorLocation = color;
-                                        return clonePrev;
-                                    });
-                                } }))),
-                    (gradients === null || gradients === void 0 ? void 0 : gradients.length) > GRADIENT_MIN && (React.createElement(Icon, { type: "icon-ants-outline-delete", className: "ants-text-primary ants-cursor-pointer", style: { alignSelf: 'flex-end', marginBottom: '10px', fontSize: '16px' }, onClick: () => {
+                return (React.createElement("div", { className: "color-setting__controller", key: index },
+                    React.createElement(ColorSetting, { labelClassName: "color-picker__label", label: t(translations.gradientColor, {
+                            name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                        }), color: gradientColor, positionInput: "right", onChange: color => {
+                            setGradients(prev => {
+                                const clonePrev = cloneDeep(prev);
+                                clonePrev[index].gradientColor = color;
+                                return clonePrev;
+                            });
+                        }, customColors: customColors }),
+                    React.createElement(SliderWithInputNumber, { label: t(translations.gradientLocation, {
+                            name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                        }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
+                            setGradients(prev => {
+                                const clonePrev = cloneDeep(prev);
+                                clonePrev[index].gradientColorLocation = color;
+                                return clonePrev;
+                            });
+                        } }),
+                    (gradients === null || gradients === void 0 ? void 0 : gradients.length) > GRADIENT_MIN && (React.createElement(Icon, { type: "icon-ants-outline-delete", onClick: () => {
                             const clonePrev = cloneDeep(gradients);
                             clonePrev.splice(index, 1);
                             setGradients(clonePrev);

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

@@ -0,0 +1 @@
+export declare const GradientSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/GradientSetting/styled.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+export const GradientSettingWrapper = styled.div `
+  .setting-container {
+    margin-top: 15px;
+
+    & .antsomi-select {
+      width: 112px;
+    }
+  }
+
+  & > button {
+    margin-top: 15px;
+  }
+
+  .color-setting__controller {
+    & > i {
+      align-self: flex-end;
+      margin-bottom: 10px;
+      font-size: 16px;
+      color: var(--primary-color);
+      cursor: pointer;
+    }
+
+    display: flex;
+    gap: 10px;
+
+    width: 100%;
+    margin-top: 15px;
+
+    /* Slider css selector */
+    & > div:first-child ~ div {
+      flex: 1;
+    }
+
+    /* Color picker select */
+    & > div:first-child {
+      flex-direction: column;
+      align-items: flex-start;
+
+      & .color-picker__label {
+        color: var(--text-base-color) !important;
+      }
+
+      & .antsomi-color-picker,
+      & .antsomi-popover-button {
+        margin: 0 !important;
+      }
+
+      & .antsomi-color-picker {
+        align-items: center;
+        gap: 10px;
+
+        input {
+          padding: 5px 6px;
+        }
+      }
+    }
+  }
+`;

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

@@ -19,7 +19,7 @@ import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = '@antscorp/antsomi-ui/es/app/components/molecules/InputNumber/index.tsx';
 export const InputNumber = props => {
-    const { label, required, focused, errorMsg, onChange } = props, restOf = __rest(props, ["label", "required", "focused", "errorMsg", "onChange"]);
+    const { label, required, focused, errorMsg, onChange, className } = props, restOf = __rest(props, ["label", "required", "focused", "errorMsg", "onChange", "className"]);
     const [isFocused, setFocused] = useState(false);
     const requiredMsg = useMemo(() => {
         let msg = '';
@@ -65,7 +65,7 @@ export const InputNumber = props => {
     if (props.disableUndo) {
         listDisableActions.push('undo');
     }
-    return (React.createElement("div", null,
+    return (React.createElement("div", { className: className },
         label && renderRequiredLabel(label),
         React.createElement(AntdInputNumber, Object.assign({}, restOf, { className: "--show-handler", required: required, onChange: onChangeInputNumber, onBlur: e => {
                 if (!focused) {

package/es/components/molecules/Modal/styled.d.ts

@@ -10,6 +10,6 @@ export declare const StyledModal: import("styled-components").StyledComponent<im
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
 }, any, CustomModalProps, never>;
 export declare const WrapperSpin: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,6 +1,9 @@
 import { SelectProps as AntdSelectProps } from 'antd';
 import React from 'react';
+import { TextProps } from '../../atoms/Text';
 export interface SelectProps extends AntdSelectProps {
+    label?: string | React.ReactNode;
+    labelProps?: TextProps;
 }
 declare const Select: (<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: AntdSelectProps<ValueType, OptionType> & {
     children?: React.ReactNode;

package/es/components/molecules/Select/Select.js

@@ -1,11 +1,26 @@
+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;
+};
 var _a;
 // Libraries
 import { Select as AntdSelect } from 'antd';
 import React from 'react';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Text } from '../../atoms/Text';
 // Icons
 import Icon from '@antscorp/icons';
 // Constants
-import { THEME } from '../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Styled
 import { StyledTag, TagCloseBtn } from './styled';
 const tagRender = (props) => {
     const { label, closable, onClose } = props;
@@ -18,11 +33,17 @@ const tagRender = (props) => {
                     fontSize: 10,
                 } })) }, label));
 };
-const CustomSelect = props => React.createElement(AntdSelect, Object.assign({}, props));
+const CustomSelect = props => {
+    const { label, labelProps } = props, rest = __rest(props, ["label", "labelProps"]);
+    return (React.createElement(Flex, { vertical: true, gap: 4 },
+        typeof label === 'string' ? React.createElement(Text, Object.assign({}, labelProps), label) : label,
+        React.createElement(AntdSelect, Object.assign({}, rest))));
+};
 const Select = CustomSelect;
 Select.OptGroup = AntdSelect.OptGroup;
 Select.Option = AntdSelect.Option;
 Select.defaultProps = {
+    labelProps: { color: '#66666' },
     suffixIcon: (React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 16, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw10 } })),
     tagRender,
 };

package/es/components/molecules/Select/Test.d.ts

@@ -1,2 +1,3 @@
-declare const SelectTest: () => JSX.Element;
+import React from 'react';
+declare const SelectTest: () => React.JSX.Element;
 export default SelectTest;

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

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-interface SettingWrapperProps {
+export interface SettingWrapperProps {
     label: string;
     className?: string;
     labelColor?: string;
@@ -10,4 +10,3 @@ interface SettingWrapperProps {
     children?: React.ReactNode;
 }
 export declare const SettingWrapper: React.FC<SettingWrapperProps>;
-export {};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SettingWrapperProps } from '../SettingWrapper';
+import { PopoverProps } from 'antd';
+export type SettingWrapperPopoverProps = {
+    label: string;
+    wrapperProps?: Omit<SettingWrapperProps, 'label'>;
+    popoverProps?: Omit<PopoverProps, 'content'>;
+    iconPopover?: React.ReactNode;
+};
+/**
+ * Renders a popover wrapper for a setting.
+ *
+ * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
+ * @returns {React.ReactElement} The rendered popover wrapper.
+ */
+export declare const SettingWrapperPopover: React.FC<React.PropsWithChildren<SettingWrapperPopoverProps>>;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SettingWrapper } from '../SettingWrapper';
+import { Button, Icon, Popover } from '../../atoms';
+/**
+ * Renders a popover wrapper for a setting.
+ *
+ * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
+ * @returns {React.ReactElement} The rendered popover wrapper.
+ */
+export const SettingWrapperPopover = ({ label, children, wrapperProps, popoverProps, iconPopover, }) => {
+    var _a, _b;
+    return (React.createElement(SettingWrapper, Object.assign({ label: label, labelStyle: Object.assign({ fontWeight: 'bold' }, ((_a = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.labelStyle) !== null && _a !== void 0 ? _a : {})) }, (wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {})),
+        React.createElement(Popover, Object.assign({ content: children, trigger: ['click'], overlayInnerStyle: Object.assign({ padding: '12px 16px', minWidth: 288, maxHeight: '90vh', overflow: 'auto' }, ((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.overlayInnerStyle) !== null && _b !== void 0 ? _b : {})) }, (popoverProps !== null && popoverProps !== void 0 ? popoverProps : {})), iconPopover)));
+};
+SettingWrapperPopover.defaultProps = {
+    iconPopover: React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-edit-2" }), type: "text" }),
+};

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

@@ -0,0 +1,19 @@
+export declare const OPTION_TEXT_DECORATION: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Underline";
+    readonly value: "underline";
+}, {
+    readonly label: "Overline";
+    readonly value: "overline";
+}, {
+    readonly label: "Line Through";
+    readonly value: "line-through";
+}, {
+    readonly label: "Underline - Overline";
+    readonly value: "underline overline";
+}, {
+    readonly label: "Underline - Line Through";
+    readonly value: "underline line-through";
+}];

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

@@ -0,0 +1,26 @@
+export const OPTION_TEXT_DECORATION = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Underline',
+        value: 'underline',
+    },
+    {
+        label: 'Overline',
+        value: 'overline',
+    },
+    {
+        label: 'Line Through',
+        value: 'line-through',
+    },
+    {
+        label: 'Underline - Overline',
+        value: 'underline overline',
+    },
+    {
+        label: 'Underline - Line Through',
+        value: 'underline line-through',
+    },
+];

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+export type TextDecorationSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_DECORATION)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_DECORATION)[number]['value']) => void;
+};
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export declare const TextDecorationSelect: React.FC<TextDecorationSelectProps>;