@antscorp/antsomi-ui 1.3.6-beta.13 → 1.3.6-beta.131

package/es/components/atoms/Input/Input.d.ts

@@ -1,22 +1,8 @@
-import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, InputRef } from 'antd';
-export interface InputProps extends AntdInputProps {
-    noborder?: 'true' | 'false' | boolean;
-    debounce?: number;
-    label?: ReactNode;
-    onAfterChange?: (value: string) => void;
-    errorArchive?: string;
-    required?: boolean;
-    isReverseMask?: boolean;
-    labelColor?: string;
-    isHideErrMessage?: boolean;
-    focused?: boolean;
-    errorMsg?: string;
-    disableUndo?: boolean;
-    withWrapper?: boolean;
-}
+import React from 'react';
+import { InputRef } from 'antd';
+import { InputProps } from './types';
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
-    readonly DefaultInput: React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
+    readonly DefaultInput: React.ForwardRefExoticComponent<import("antd").InputProps & React.RefAttributes<InputRef>> & {
         Group: React.FC<import("antd/es/input").GroupProps>;
         Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
         TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;

package/es/components/atoms/Input/Input.js

@@ -8,7 +8,7 @@ import { Input as AntdInput } from 'antd';
 // Components
 import { Icon, RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Utils
-import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { handleError } from '@antscorp/antsomi-ui/es/utils/handleError';
 import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { StyledIconWrapper, StyledInput } from './styled';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';

package/es/components/atoms/Input/index.d.ts

@@ -1,2 +1,2 @@
 export { Input, TextArea } from './Input';
-export type { InputProps } from './Input';
+export type { InputProps } from './types';

package/es/components/atoms/Input/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputProps } from './Input';
+import { InputProps } from './types';
 export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef>> & {
     Group: import("react").FC<import("antd/es/input").GroupProps>;
     Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>;

package/es/components/atoms/Input/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { InputProps as AntdInputProps } from 'antd';
+export interface InputProps extends AntdInputProps {
+    noborder?: 'true' | 'false' | boolean;
+    debounce?: number;
+    label?: ReactNode;
+    onAfterChange?: (value: string) => void;
+    errorArchive?: string;
+    required?: boolean;
+    isReverseMask?: boolean;
+    labelColor?: string;
+    isHideErrMessage?: boolean;
+    focused?: boolean;
+    errorMsg?: string;
+    disableUndo?: boolean;
+    withWrapper?: boolean;
+}

package/es/components/atoms/Input/types.js

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

package/es/components/atoms/MobileBrandingBar/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface MobileBrandingBarProps {
+    showBadge?: boolean;
+    brandingName: string;
+    logo: string;
+}
+declare const _default: import("react").MemoExoticComponent<(props: MobileBrandingBarProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/components/atoms/MobileBrandingBar/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { memo } from 'react';
+// Assets
+import AntLogo from '@antscorp/antsomi-ui/es/assets/images/logo/sub-logo-antsomi.png';
+// Components
+import { Flex } from 'antd';
+import { BadgeContainer, BoxImage, BrandingName } from './styled';
+import { CheckSlimIcon } from '../../icons';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export default memo((props) => {
+    const { logo, brandingName, showBadge } = props;
+    return (_jsxs(Flex, { align: "center", gap: 6, style: { height: 30 }, children: [_jsx(BoxImage, { children: _jsx("img", { src: logo || AntLogo, alt: "branding logo", width: 15 }) }), _jsx(BrandingName, { ellipsis: { tooltip: true }, style: { flex: 1 }, children: brandingName }), showBadge ? (_jsx(BadgeContainer, { children: _jsx(CheckSlimIcon, { style: { color: globalToken?.bw0, width: 12, height: 12 } }) })) : null] }));
+});

package/es/components/atoms/MobileBrandingBar/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const BoxImage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BrandingName: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileBrandingBar/styled.js

@@ -0,0 +1,32 @@
+// Libraries
+import styled from 'styled-components';
+// Assets
+import BadgeBackground from '@antscorp/antsomi-ui/es/assets/images/background/badge-background.png';
+// Components
+import { Typography } from 'antd';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const BoxImage = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  padding: 5px;
+  border-radius: 50%;
+  background-color: ${globalToken?.bw0};
+`;
+export const BrandingName = styled(Typography.Text) `
+  font-weight: 600;
+  font-size: 14px;
+  color: #171717;
+`;
+export const BadgeContainer = styled.div `
+  background: url(${BadgeBackground}) no-repeat center center;
+  background-size: contain;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

package/es/components/atoms/MobileFrameV3/MobileFrame.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MobileBrandingBarProps } from '../MobileBrandingBar';
+export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    size?: 'large' | 'medium';
+    backgroundColor?: string;
+    branding: MobileBrandingBarProps;
+}
+export declare const MobileFrameV3: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrameV3/MobileFrame.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useEffect, useRef, useState } from 'react';
+// Styled
+import MobileBrandingBar from '../MobileBrandingBar';
+import { Scrollbars } from '../Scrollbars';
+import { MobileWrapper, MobileInner, MobileBottomLine, ScreenContainer, BrandPosition, } from './styled';
+// Constants
+import { DEFAULT_DIMENSIONS } from './constants';
+const { MEDIUM, LARGE } = DEFAULT_DIMENSIONS;
+export const MobileFrameV3 = ({ children, ...restOfProps }) => {
+    const containerRef = useRef(null);
+    const screenRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ top: 0, left: 0, width: 0, height: 0 });
+    const [brandDimensions, setBrandDimensions] = useState({ top: 0, left: 0 });
+    const { top: brandTop, left: brandLeft } = brandDimensions;
+    const { top, left, width, height } = dimensions;
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (!containerRef.current)
+                return;
+            const isMedium = restOfProps.size === 'medium';
+            const offsetStatic = {
+                top: isMedium ? 71 : 85,
+                bottom: isMedium ? 60 : 70.2,
+                padding: isMedium ? 12.5 : 14.2,
+            };
+            const offsetBrandStatic = {
+                top: isMedium ? -28 : -34,
+                left: isMedium ? 40 : 50,
+            };
+            const bothPadding = offsetStatic.padding * 2;
+            const { width, height } = containerRef.current.getBoundingClientRect();
+            // Base dimensions
+            const maxWidth = isMedium ? MEDIUM.WIDTH : LARGE.WIDTH;
+            const maxHeight = isMedium ? MEDIUM.HEIGHT : LARGE.HEIGHT;
+            // Scaling factor
+            const scale = Math.min(width / maxWidth, height / maxHeight);
+            // Offsets
+            const offsetTop = offsetStatic.top * scale;
+            const offsetBottom = offsetStatic.bottom * scale;
+            const verticalAdjustment = (height - height * scale) / 2;
+            const horizontalAdjustment = offsetStatic.padding - offsetStatic.padding * scale;
+            setDimensions({
+                top: offsetTop + verticalAdjustment,
+                left: (offsetStatic.padding + horizontalAdjustment) * scale,
+                width: (maxWidth - (bothPadding + (bothPadding - bothPadding * scale))) * scale,
+                height: height - offsetTop - offsetBottom - 2 * verticalAdjustment,
+            });
+            setBrandDimensions({
+                top: offsetBrandStatic.top * scale,
+                left: offsetBrandStatic.left * scale,
+            });
+        };
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        // Cleanup observer on unmount
+        return () => resizeObserver.disconnect();
+    }, [restOfProps.size]);
+    return (_jsx(MobileWrapper, { ...restOfProps, children: _jsxs(MobileInner, { ref: containerRef, backgroundColor: restOfProps.backgroundColor, size: restOfProps.size, children: [_jsxs(ScreenContainer, { ref: screenRef, style: {
+                        top: `${top}px`,
+                        left: `${left}px`,
+                        width: `${width}px`,
+                        height: `${height}px`,
+                    }, children: [_jsx(BrandPosition, { style: {
+                                top: `${brandTop}px`,
+                                left: `${brandLeft}px`,
+                                maxWidth: `calc(${width}px - 120px)`,
+                            }, children: _jsx(MobileBrandingBar, { ...restOfProps.branding }) }), _jsx(Scrollbars, { autoHeight: true, autoHeightMax: height, children: children })] }), _jsx(MobileBottomLine, {})] }) }));
+};

package/es/components/atoms/MobileFrameV3/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const DEFAULT_DIMENSIONS: {
+    MEDIUM: {
+        WIDTH: number;
+        HEIGHT: number;
+    };
+    LARGE: {
+        WIDTH: number;
+        HEIGHT: number;
+    };
+};

package/es/components/atoms/MobileFrameV3/constants.js

@@ -0,0 +1,10 @@
+export const DEFAULT_DIMENSIONS = {
+    MEDIUM: {
+        WIDTH: 290,
+        HEIGHT: 600,
+    },
+    LARGE: {
+        WIDTH: 336,
+        HEIGHT: 695,
+    },
+};

package/es/components/atoms/MobileFrameV3/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileFrameV3 } from './MobileFrame';
+export type { MobileFrameProps } from './MobileFrame';

package/es/components/atoms/MobileFrameV3/index.js

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

package/es/components/atoms/MobileFrameV3/styled.d.ts

@@ -0,0 +1,6 @@
+import type { MobileFrameProps } from './MobileFrame';
+export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, Pick<MobileFrameProps, "size" | "backgroundColor">, never>;
+export declare const ScreenContainer: import("styled-components").StyledComponent<"main", any, {}, never>;
+export declare const BrandPosition: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrameV3/styled.js

@@ -0,0 +1,44 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Assets
+import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/previews/iphonev2.png';
+// Constants
+import { DEFAULT_DIMENSIONS } from './constants';
+const { MEDIUM, LARGE } = DEFAULT_DIMENSIONS;
+export const MobileWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background: url(${MobileFrame}) no-repeat center center;
+  background-size: contain;
+`;
+export const MobileInner = styled.div `
+  position: relative;
+  width: 100%;
+  max-width: ${props => (props.size === 'medium' ? MEDIUM.WIDTH : LARGE.WIDTH)}px;
+  height: ${props => (props.size === 'medium' ? MEDIUM.HEIGHT : LARGE.HEIGHT)}px;
+  overflow: hidden;
+
+  ${props => props.backgroundColor &&
+    css `
+      background-color: ${props.backgroundColor};
+    `}
+`;
+export const ScreenContainer = styled.main `
+  position: absolute;
+`;
+export const BrandPosition = styled.div `
+  position: absolute;
+`;
+export const MobileBottomLine = styled.div `
+  width: 145px;
+  height: 5px;
+  background-color: #000000;
+  border-radius: 20px;
+  position: absolute;
+  margin: auto;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+`;

package/es/components/atoms/SelectAssociatedTag/SelectAssociatedTag.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Components
 import { StyledSpace } from './styled';
 import { Divider } from 'antd';
-import { Select } from '../../molecules';
+import { Select } from '../../molecules/Select';
 import SelectTag from './SelectTag';
 // Constants
 import { defaultProps } from './constants';

package/es/components/atoms/SelectAssociatedTag/constants.d.ts

@@ -4,7 +4,7 @@ export declare const DEFAULT_TAGS: {
     readonly md5: "md5";
     readonly sha_256: "sha_256";
     readonly MD5: "MD5";
-    readonly SHA_265: "SHA_265";
+    readonly SHA_256: "SHA_256";
 };
 export declare const DEFAULT_TAGS_OPTS: Record<string, TagItem>;
 export declare const DEFAULT_TAGS_LIST: TagItem[];

package/es/components/atoms/SelectAssociatedTag/constants.js

@@ -7,7 +7,7 @@ export const DEFAULT_TAGS = {
     md5: 'md5',
     sha_256: 'sha_256',
     MD5: 'MD5',
-    SHA_265: 'SHA_265',
+    SHA_256: 'SHA_256',
 };
 export const DEFAULT_TAGS_OPTS = {
     RAW: { label: 'RAW', value: DEFAULT_TAGS.RAW, color: globalToken?.bw0, background: '#4CB4C9' },
@@ -20,8 +20,8 @@ export const DEFAULT_TAGS_OPTS = {
     },
     MD5: { label: 'MD5', value: DEFAULT_TAGS.MD5, color: globalToken?.bw0, background: '#3B8FDE' },
     SHA_265: {
-        label: 'SHA265',
-        value: DEFAULT_TAGS.SHA_265,
+        label: 'SHA-256',
+        value: DEFAULT_TAGS.SHA_256,
         color: globalToken?.bw0,
         background: '#12B800',
     },
@@ -35,7 +35,7 @@ export const defaultProps = {
     },
     selected: {
         tag: DEFAULT_TAGS.RAW,
-        value: DEFAULT_TAGS.SHA_265,
+        value: DEFAULT_TAGS.SHA_256,
     },
     options: DEFAULT_TAGS_LIST,
     onSelect: () => { },

package/es/components/atoms/SlideBar/SlideBar.d.ts

@@ -19,6 +19,10 @@ export type SlideBarState = {
     notiUpdateScroll: number;
 };
 export interface SlideBarProps {
+    size?: 'small' | 'medium';
+    isMore?: boolean;
+    borderless?: boolean;
+    badgeNumber?: boolean;
     isViewMode?: boolean;
     isShowLabelSequentially?: boolean;
     isShowAdd?: boolean;

package/es/components/atoms/SlideBar/SlideBar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { useRef, useEffect, useState, useMemo } from 'react';
+import classNames from 'classnames';
 import _ from 'lodash';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 // Components
@@ -11,9 +12,11 @@ import { ContainerSlideBar, MainContent, MenuItem, MenuList, SlideItem, SliderWr
 import { PlusCircleFilled } from '@ant-design/icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { BTN_ADD_SIZE, slideActionType, WIDTH_SLIDE_ITEM } from './constants';
+import { slideActionType, WIDTH_SLIDE_ITEM } from './constants';
+import { EditFilledIcon } from '../../icons';
 // Utils
 import { getObjectPropSafely, handleError } from '@antscorp/antsomi-ui/es/utils';
+import { getOffsetSizeAdd } from './utils';
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -26,7 +29,7 @@ const getItemStyle = (isDragging, draggableStyle) => ({
 });
 const PATH = 'src/components/atoms/SlideBar/SlideBar.tsx';
 export const SlideBar = props => {
-    const { isViewMode, isShowLabelSequentially, isDragDisabled, isShowAdd, disabled, prefix, options, activeId, limit, errors, callback, } = props;
+    const { size, borderless, isMore, badgeNumber, isViewMode, isShowLabelSequentially, isDragDisabled, isShowAdd, disabled, prefix, options, activeId, limit, errors, callback, } = props;
     // States
     const [state, setState] = useState({
         cacheInfoClicked: {
@@ -240,14 +243,24 @@ export const SlideBar = props => {
         }
     }, [options, state.notiUpdateScroll]);
     const renderMainContent = () => options.map((item, index) => {
+        const isActive = activeId === item.value;
         let { label } = _.cloneDeep(item);
         if (isShowLabelSequentially) {
             label = `${prefix} ${index + 1}`;
         }
-        return (_jsx(Draggable, { isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index, children: (providedDraggable, snapshotDraggable) => (_jsxs(SlideItem, { id: `template-slide-${item.value}`, isActive: activeId === item.value, className: "slide-item", ref: providedDraggable.innerRef, ...providedDraggable.draggableProps, ...providedDraggable.dragHandleProps, isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
+        if (badgeNumber) {
+            label = [isActive ? prefix : undefined, index + 1].join(' ');
+        }
+        return (_jsx(Draggable, { isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index, children: (providedDraggable, snapshotDraggable) => (_jsxs(SlideItem, { id: `template-slide-${item.value}`, isActive: isActive, className: classNames('slide-item', {
+                    'slide-item--badge-number': badgeNumber,
+                    'slide-item--active': isActive,
+                }), ref: providedDraggable.innerRef, ...providedDraggable.draggableProps, ...providedDraggable.dragHandleProps, size: size, isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
                     e.stopPropagation();
                     handleActiveSlide(e, item);
-                }, children: [_jsx(SlideText, { isActive: activeId === item.value, children: label }), !isViewMode && (_jsx(Popover, { placement: "bottomLeft", trigger: "click", open: state.openPopover[item.value], onOpenChange: newOpen => handleOpenChange(newOpen, item.value), content: _jsxs(MenuList, { children: [_jsx(WrapperDisable, { disabled: disabledDuplicate, children: _jsx(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
+                }, children: [_jsxs(SlideText, { size: size, isActive: isActive, className: classNames('slide-item__text', {
+                            'slide-item__text--circle': badgeNumber && !isActive,
+                            'slide-item__text--active': isActive,
+                        }), children: [badgeNumber && isActive ? (_jsx("span", { className: "slide-item__text--icon", children: _jsx(EditFilledIcon, { size: 16 }) })) : null, label] }), !isViewMode && isMore && (_jsx(Popover, { placement: "bottomLeft", trigger: "click", open: state.openPopover[item.value], onOpenChange: newOpen => handleOpenChange(newOpen, item.value), content: _jsxs(MenuList, { children: [_jsx(WrapperDisable, { disabled: disabledDuplicate, children: _jsx(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
                                             e.stopPropagation();
                                             if (!disabledDuplicate) {
                                                 handleDuplicateSlide(state.cacheInfoClicked);
@@ -260,14 +273,14 @@ export const SlideBar = props => {
                                         }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: 20, onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
     });
     const renderSliderDragDrop = () => (_jsx(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow", children: _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: (providedDroppable, _snapshotDroppable) => (_jsx(MainContent, { ref: providedDroppable.innerRef, ...providedDroppable.droppableProps, children: renderMainContent() })) }) }) }));
-    return (_jsxs(ContainerSlideBar, { children: [_jsxs(SliderWrapper, { isViewMode: isViewMode, children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
+    return (_jsxs(ContainerSlideBar, { children: [_jsxs(SliderWrapper, { size: size, isViewMode: isViewMode, className: classNames({ 'slider-wrapper--borderless': borderless }), children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
                             e.stopPropagation();
                             handleChangeScrollDirection('PREVIOUS');
                         } }), renderSliderDragDrop(), _jsx(Icon, { type: "icon-ants-angle-right", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-right btn-action-slide-template", disabled: state.disabledNext, onClick: (e) => {
                             e.stopPropagation();
                             handleChangeScrollDirection('NEXT');
                         } })] }), isShowAdd && (_jsx(PlusCircleFilled, { style: {
-                    fontSize: `${BTN_ADD_SIZE}px`,
+                    fontSize: `${getOffsetSizeAdd(size)}px`,
                     cursor: disabledAdd ? 'not-allowed' : 'pointer',
                     color: disabledAdd ? THEME.token?.colorTextDisabled : THEME.token?.colorPrimary,
                 }, onClick: (e) => {
@@ -280,6 +293,10 @@ export const SlideBar = props => {
 SlideBar.defaultProps = {
     isViewMode: false,
     disabled: false,
+    size: 'small',
+    borderless: false,
+    isMore: true,
+    badgeNumber: false,
     isShowLabelSequentially: true,
     isShowAdd: true,
     isDragDisabled: false,

package/es/components/atoms/SlideBar/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const OFFSET_SIZE_SLIDE = 32;
+export declare const OFFSET_SIZE_SLIDE_MD = 40;
 export declare const BTN_ADD_SIZE = 32;
+export declare const BTN_ADD_SIZE_MD = 40;
 export declare const WIDTH_SLIDE_ITEM = 105;
 export declare const slideActionType: {
     readonly ADD: "ADD_SLIDE";

package/es/components/atoms/SlideBar/constants.js

@@ -1,5 +1,7 @@
 export const OFFSET_SIZE_SLIDE = 32;
+export const OFFSET_SIZE_SLIDE_MD = 40;
 export const BTN_ADD_SIZE = 32;
+export const BTN_ADD_SIZE_MD = 40;
 export const WIDTH_SLIDE_ITEM = 105;
 export const slideActionType = {
     ADD: 'ADD_SLIDE',

package/es/components/atoms/SlideBar/styled.d.ts

@@ -1,14 +1,18 @@
+import type { SlideBarProps } from './SlideBar';
 export declare const SliderWrapper: import("styled-components").StyledComponent<"div", any, {
     isViewMode?: boolean | undefined;
+    size?: SlideBarProps['size'];
 }, never>;
 export declare const WrapperOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MainContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SlideItem: import("styled-components").StyledComponent<"div", any, {
     isActive?: boolean | undefined;
     isSlideError?: boolean | undefined;
+    size?: SlideBarProps['size'];
 }, never>;
 export declare const SlideText: import("styled-components").StyledComponent<"div", any, {
     isActive?: boolean | undefined;
+    size?: SlideBarProps['size'];
 }, never>;
 export declare const MenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {

package/es/components/atoms/SlideBar/styled.js

@@ -3,7 +3,9 @@
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { BTN_ADD_SIZE, OFFSET_SIZE_SLIDE, WIDTH_SLIDE_ITEM } from './constants';
+import { WIDTH_SLIDE_ITEM } from './constants';
+// Utils
+import { getOffsetSize, getOffsetSizeAdd } from './utils';
 export const SliderWrapper = styled.div `
   position: relative;
   display: flex;
@@ -12,14 +14,16 @@ export const SliderWrapper = styled.div `
   border: 1px solid ${THEME.token?.accent1};
   box-sizing: border-box;
   // max-width: ${props => (props.isViewMode ? '100%' : 'calc(100% - 40px)')};
-  width: calc(100% - ${BTN_ADD_SIZE}px - ${OFFSET_SIZE_SLIDE * 2}px);
+  width: calc(
+    100% - ${({ size }) => getOffsetSizeAdd(size)}px - ${({ size }) => getOffsetSize(size) * 2}px
+  );
   flex: 1;
-  height: ${OFFSET_SIZE_SLIDE}px;
-  padding: 0px ${OFFSET_SIZE_SLIDE}px;
+  height: ${({ size }) => getOffsetSize(size)}px;
+  padding: 0px ${({ size }) => getOffsetSize(size)}px;
 
   .btn-action-slide-template {
-    width: ${OFFSET_SIZE_SLIDE}px !important;
-    height: ${OFFSET_SIZE_SLIDE - 2}px !important;
+    width: ${({ size }) => getOffsetSize(size)}px !important;
+    height: ${({ size }) => getOffsetSize(size) - 2}px !important;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -39,6 +43,84 @@ export const SliderWrapper = styled.div `
       border-left: 1px solid ${THEME.token?.accent1};
     }
   }
+
+  &.slider-wrapper--borderless {
+    border-radius: unset;
+    box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
+    border: none;
+    border-bottom: 1px solid ${THEME.token?.bw4};
+
+    #wrapper-overflow {
+      height: ${({ size }) => getOffsetSize(size) - 1}px;
+      background-color: ${THEME.token?.bw2};
+    }
+
+    .slide-item {
+      background-color: transparent;
+      border-top: none;
+      border-right-color: ${THEME.token?.bw3};
+
+      &.slide-item--active {
+        background-color: ${THEME.token?.bw0};
+      }
+
+      &.slide-item--badge-number {
+        justify-content: center;
+        padding: 0px;
+        width: ${({ size }) => getOffsetSize(size)}px;
+        height: ${({ size }) => getOffsetSize(size) - 1}px;
+        border-bottom: none;
+
+        &.slide-item--active {
+          width: 90px;
+        }
+
+        .slide-item__text {
+          &--active {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            color: ${THEME.token?.colorText};
+          }
+
+          &--circle {
+            font-size: 14px;
+            font-weight: 700;
+            color: ${THEME.token?.colorPrimary};
+            line-height: 22px;
+            text-align: center;
+            display: inline-block;
+            background-color: ${THEME.token?.bw0};
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: 1px solid ${THEME.token?.blue1};
+          }
+
+          &--icon {
+            color: ${THEME.token?.bw0};
+            background: ${THEME.token?.colorPrimary};
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+
+    .btn-action-slide-template {
+      height: ${({ size }) => getOffsetSize(size)}px !important;
+    }
+
+    .btn-action-slide-template.btn-arrow-left,
+    .btn-action-slide-template.btn-arrow-right {
+      border-right-color: ${THEME.token?.bw4};
+    }
+  }
 `;
 export const WrapperOverflow = styled.div `
   overflow-x: auto;
@@ -69,7 +151,7 @@ export const SlideItem = styled.div `
 
   border-top: 1px solid ${THEME.token?.accent1};
   border-bottom: 1px solid ${THEME.token?.accent1};
-  height: ${OFFSET_SIZE_SLIDE}px;
+  height: ${({ size }) => getOffsetSize(size)}px;
   width: ${WIDTH_SLIDE_ITEM}px;
   padding: 0px 10px;
   cursor: pointer;
@@ -87,7 +169,7 @@ export const SlideItem = styled.div `
 export const SlideText = styled.div `
   font-size: ${THEME.token?.fontSize}px;
   font-weight: 400;
-  line-height: ${OFFSET_SIZE_SLIDE}px;
+  line-height: ${({ size }) => getOffsetSize(size)}px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/es/components/atoms/SlideBar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { SlideBarProps } from './SlideBar';
+export declare const getOffsetSize: (size?: SlideBarProps['size']) => 32 | 40;
+export declare const getOffsetSizeAdd: (size?: SlideBarProps['size']) => 32 | 40;