sevatech-library 1.0.2 → 1.0.4

package/dist/cjs/index.js

@@ -227,7 +227,7 @@ const TEXT_FIELD = {
     FONT_SIZE_TITLE: 18,
     FONT_SIZE_CAPTION: 10,
 };
-const FONT_SIZE_ICON = {
+const FONT_SIZE_ICON$1 = {
     large: '22px',
     xl: '20px',
     medium: '19px',
@@ -273,7 +273,7 @@ var style_constant = /*#__PURE__*/Object.freeze({
     BORDER_RADIUS_ELEMENT_SMALL: BORDER_RADIUS_ELEMENT_SMALL,
     BORDER_RADIUS_ELEMENT_TAG: BORDER_RADIUS_ELEMENT_TAG,
     BORDER_RADIUS_ELEMENT_WRAPPER: BORDER_RADIUS_ELEMENT_WRAPPER,
-    FONT_SIZE_ICON: FONT_SIZE_ICON,
+    FONT_SIZE_ICON: FONT_SIZE_ICON$1,
     FONT_SIZE_LOADING: FONT_SIZE_LOADING$1,
     GAP_ICON_CONTENT_BY_SIZE: GAP_ICON_CONTENT_BY_SIZE,
     HEIGHT_DEFAULT_TEXT_FIELD_BUTTON: HEIGHT_DEFAULT_TEXT_FIELD_BUTTON,
@@ -1122,7 +1122,7 @@ const IconElement = ({ icon, size = 'medium', color, disabled, onClick, sx, fill
         };
     return (jsxRuntime.jsx(material.Icon, { onClick: onClick, color: color, sx: {
             cursor: 'inherit',
-            fontSize: FONT_SIZE_ICON[size],
+            fontSize: FONT_SIZE_ICON$1[size],
             fontVariationSettings: `'FILL' ${fill}, 'wght' 100, 'GRAD' 200, 'opsz' 24`,
             ...sx,
         }, component: 'span', className: "material-symbols-rounded", children: icon }));
@@ -1570,6 +1570,11 @@ const CheckboxContentComponent = ({ checked = false, disabled = false, title, co
                         }, children: content }))] })] }));
 };
 
+const CHIP_ICON_SIZE = {
+    small: '16px',
+    medium: '18px',
+    large: '22px',
+};
 const CHIP_LABEL_PADDING = {
     WITH_ICON_LEFT: '4px 8px 4px 4px',
     WITH_ICON_RIGHT: '4px 4px 4px 8px',
@@ -1922,26 +1927,26 @@ const GridComponent = ({ sx = {}, sxContainer = {}, content = 'Grids', children,
                 }, children: children })] }));
 };
 
-var BorderRadius;
+exports.BorderRadius = void 0;
 (function (BorderRadius) {
     BorderRadius["SQUARE"] = "4px";
     BorderRadius["CIRCLE"] = "20px";
-})(BorderRadius || (BorderRadius = {}));
-var ShapeType;
+})(exports.BorderRadius || (exports.BorderRadius = {}));
+exports.ShapeType = void 0;
 (function (ShapeType) {
     ShapeType["SQUARE"] = "square";
     ShapeType["CIRCLE"] = "circle";
-})(ShapeType || (ShapeType = {}));
-var Orientation;
+})(exports.ShapeType || (exports.ShapeType = {}));
+exports.Orientation = void 0;
 (function (Orientation) {
     Orientation["HORIZONTAL"] = "horizontal";
     Orientation["VERTICAL"] = "vertical";
-})(Orientation || (Orientation = {}));
-var ButtonSize;
+})(exports.Orientation || (exports.Orientation = {}));
+exports.ButtonSize = void 0;
 (function (ButtonSize) {
     ButtonSize[ButtonSize["SMALL"] = 32] = "SMALL";
     ButtonSize[ButtonSize["MEDIUM"] = 40] = "MEDIUM";
-})(ButtonSize || (ButtonSize = {}));
+})(exports.ButtonSize || (exports.ButtonSize = {}));
 const Colors = {
     BORDER_COLOR_BUTTON: '#07554B',
     BORDER_COLOR_DISABLE: '#0000000D',
@@ -1953,22 +1958,26 @@ const FONT_SIZE_LOADING = {
     large: 40,
 };
 const BORDER_TEXT_FIELD_LOADING = 20;
+const FONT_SIZE_ICON = {
+    small: 12,
+    xl: 20,
+};
 
 const InputStepperSkeleton = ({ orientation, buttonShape }) => {
-    return (jsxRuntime.jsxs(material.Box, { display: "inline-flex", flexDirection: orientation === Orientation.HORIZONTAL ? 'row' : 'column', alignItems: "center", gap: 1, children: [jsxRuntime.jsx(material.Skeleton, { variant: buttonShape === ShapeType.CIRCLE ? 'circular' : 'rectangular', width: FONT_SIZE_LOADING.large, height: FONT_SIZE_LOADING.large, sx: {
-                    borderRadius: buttonShape === ShapeType.CIRCLE ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+    return (jsxRuntime.jsxs(material.Box, { display: "inline-flex", flexDirection: orientation === exports.Orientation.HORIZONTAL ? 'row' : 'column', alignItems: "center", gap: 1, children: [jsxRuntime.jsx(material.Skeleton, { variant: buttonShape === exports.ShapeType.CIRCLE ? 'circular' : 'rectangular', width: FONT_SIZE_LOADING.large, height: FONT_SIZE_LOADING.large, sx: {
+                    borderRadius: buttonShape === exports.ShapeType.CIRCLE ? exports.BorderRadius.CIRCLE : exports.BorderRadius.SQUARE,
                     maxHeight: FONT_SIZE_LOADING.large,
                 } }), jsxRuntime.jsx(material.Skeleton, { width: FONT_SIZE_LOADING.large, sx: {
                     borderRadius: `${BORDER_TEXT_FIELD_LOADING}px`,
-                } }), jsxRuntime.jsx(material.Skeleton, { variant: buttonShape === ShapeType.CIRCLE ? 'circular' : 'rectangular', width: FONT_SIZE_LOADING.large, height: FONT_SIZE_LOADING.large, sx: {
-                    borderRadius: buttonShape === ShapeType.CIRCLE ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                } }), jsxRuntime.jsx(material.Skeleton, { variant: buttonShape === exports.ShapeType.CIRCLE ? 'circular' : 'rectangular', width: FONT_SIZE_LOADING.large, height: FONT_SIZE_LOADING.large, sx: {
+                    borderRadius: buttonShape === exports.ShapeType.CIRCLE ? exports.BorderRadius.CIRCLE : exports.BorderRadius.SQUARE,
                     maxHeight: FONT_SIZE_LOADING.large,
                 } })] }));
 };
 
-const InputStepperComponent = ({ value: controlledValue, onChange, min, max, step = 1, disabled = false, readOnly = false, orientation = Orientation.HORIZONTAL, loading = false, sx = {}, sxTextField = {}, // style cho input chứa value
+const InputStepperComponent = ({ value: controlledValue, onChange, min, max, step = 1, disabled = false, readOnly = false, orientation = exports.Orientation.HORIZONTAL, loading = false, sx = {}, sxTextField = {}, // style cho input chứa value
 sxButton = {}, // style cho 2 button
-buttonShape = ShapeType.SQUARE, buttonColor, textFieldShape = ShapeType.SQUARE, decrementIcon = jsxRuntime.jsx(RemoveIcon, {}), incrementIcon = jsxRuntime.jsx(AddIcon, {}), }) => {
+buttonShape = exports.ShapeType.SQUARE, buttonColor, textFieldShape = exports.ShapeType.SQUARE, decrementIcon = jsxRuntime.jsx(RemoveIcon, {}), incrementIcon = jsxRuntime.jsx(AddIcon, {}), }) => {
     const [internalValue, setInternalValue] = React.useState(controlledValue ?? min ?? 0);
     const value = controlledValue !== undefined ? controlledValue : internalValue;
     const updateValue = (newValue) => {
@@ -1998,7 +2007,7 @@ buttonShape = ShapeType.SQUARE, buttonColor, textFieldShape = ShapeType.SQUARE,
     };
     const isDecrementDisabled = disabled || (min !== undefined && Number(value) <= min);
     const isIncrementDisabled = disabled || (max !== undefined && Number(value) >= max);
-    const buttonSize = ButtonSize.MEDIUM;
+    const buttonSize = exports.ButtonSize.MEDIUM;
     if (loading) {
         return jsxRuntime.jsx(InputStepperSkeleton, { orientation: orientation, buttonShape: buttonShape });
     }
@@ -2007,7 +2016,7 @@ buttonShape = ShapeType.SQUARE, buttonColor, textFieldShape = ShapeType.SQUARE,
             pointerEvents: disabled ? 'none' : 'auto',
             ...sx,
         }, children: [jsxRuntime.jsx(material.IconButton, { onClick: handleDecrement, disabled: isDecrementDisabled, sx: {
-                    borderRadius: buttonShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                    borderRadius: buttonShape === 'circle' ? exports.BorderRadius.CIRCLE : exports.BorderRadius.SQUARE,
                     width: buttonSize,
                     height: buttonSize,
                     padding: PADDING_GAP_ITEM,
@@ -2031,7 +2040,7 @@ buttonShape = ShapeType.SQUARE, buttonColor, textFieldShape = ShapeType.SQUARE,
                     minHeight: buttonSize,
                     height: sxTextField?.height || buttonSize,
                     overflow: 'hidden',
-                    borderRadius: textFieldShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                    borderRadius: textFieldShape === 'circle' ? exports.BorderRadius.CIRCLE : exports.BorderRadius.SQUARE,
                     color: readOnly ? Colors.TEXT_COLOR_READONLY : '',
                     backgroundColor: readOnly ? 'transparent !important' : sxTextField?.backgroundColor,
                     '& .MuiOutlinedInput-root': {
@@ -2041,7 +2050,7 @@ buttonShape = ShapeType.SQUARE, buttonColor, textFieldShape = ShapeType.SQUARE,
                         '& fieldset': {
                             borderColor: readOnly || disabled ? 'transparent' : sxTextField?.borderColor || Colors.BORDER_COLOR_BUTTON,
                             borderWidth: readOnly || disabled ? 0 : 1,
-                            borderRadius: textFieldShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                            borderRadius: textFieldShape === 'circle' ? exports.BorderRadius.CIRCLE : exports.BorderRadius.SQUARE,
                         },
                         '&:hover fieldset': readOnly || disabled
                             ? {}
@@ -2080,7 +2089,7 @@ buttonShape = ShapeType.SQUARE, buttonColor, textFieldShape = ShapeType.SQUARE,
                         fontWeight: sxTextField?.fontWeight || (readOnly ? 700 : 'normal'),
                     },
                 } }), jsxRuntime.jsx(material.IconButton, { onClick: handleIncrement, disabled: isIncrementDisabled, sx: {
-                    borderRadius: buttonShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                    borderRadius: buttonShape === 'circle' ? exports.BorderRadius.CIRCLE : exports.BorderRadius.SQUARE,
                     width: buttonSize,
                     height: buttonSize,
                     padding: PADDING_GAP_ITEM,
@@ -3065,6 +3074,26 @@ const SwitchComponent = ({ title, sx, ...switchProps }) => {
         }, children: [jsxRuntime.jsx(StyledSwitch, { disableRipple: true, ...switchProps }), title] }));
 };
 
+const SwitchContentComponent = ({ title, content, checked, disabled, size = 'medium', onChange, sx, }) => {
+    return (jsxRuntime.jsxs(StackRow, { sx: {
+            width: 'fit-content',
+            gap: '12px',
+            maxWidth: '345px',
+            ...sx,
+        }, children: [jsxRuntime.jsx(SwitchComponent, { checked: checked, disabled: disabled, size: size, onChange: onChange }), jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(material.Typography, { sx: {
+                            fontSize: 16,
+                            lineHeight: '24px',
+                            fontWeight: 500,
+                            color: '#344054',
+                        }, children: title }), content && (jsxRuntime.jsx(material.Typography, { sx: {
+                            mt: 0.5,
+                            fontSize: 16,
+                            lineHeight: '24px',
+                            fontWeight: 400,
+                            color: '#667085',
+                        }, children: content }))] })] }));
+};
+
 const TAB_STYLES = {
     position: 'relative',
     padding: '18px 16px',
@@ -3074,6 +3103,14 @@ const TAB_STYLES = {
         bgcolor: '#F3F4F6',
     },
 };
+const TAB_BACKGROUND_STYLES = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 1,
+};
 const TAB_UNDERLINE_STYLES = {
     width: '1px',
     alignSelf: 'stretch',
@@ -3108,13 +3145,13 @@ const TAB_ACTIVE_BACKGROUND_VERTICAL = {
     bgcolor: '#E6EEED',
     borderRadius: 1,
 };
-var TabColors;
+exports.TabColors = void 0;
 (function (TabColors) {
     TabColors["ACTIVE_TEXT"] = "#0F766E";
     TabColors["INACTIVE_TEXT"] = "#6B7280";
     TabColors["HOVER_BACKGROUND"] = "#F3F4F6";
     TabColors["MENU_ACTIVE_BACKGROUND"] = "#E0F2FE";
-})(TabColors || (TabColors = {}));
+})(exports.TabColors || (exports.TabColors = {}));
 
 const TabsComponent = ({ idSelect, tabs, size, direction = 'row', maxDisplay, onChange, sx, sxTabs, sxWrapper, }) => {
     // state
@@ -3147,7 +3184,7 @@ const TabsComponent = ({ idSelect, tabs, size, direction = 'row', maxDisplay, on
                     const isActive = tab.id === selected;
                     return (jsxRuntime.jsx(LinkElement, { href: tab.href, onClick: tab.onClick, id: tab.id, children: jsxRuntime.jsxs(material.Box, { sx: { position: 'relative' }, children: [jsxRuntime.jsx(material.Stack, { component: framerMotion.motion.div, sx: {
                                         ...TABS_CONTAINER_VERTICAL,
-                                        color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
+                                        color: isActive ? exports.TabColors.ACTIVE_TEXT : exports.TabColors.INACTIVE_TEXT,
                                     }, onTap: () => handleTabClick(tab), children: jsxRuntime.jsxs(material.Box, { sx: {
                                             ...TYPOGRAPHY_STYLES.textMd.medium,
                                             display: 'flex',
@@ -3160,13 +3197,13 @@ const TabsComponent = ({ idSelect, tabs, size, direction = 'row', maxDisplay, on
                 }) }) })) : (jsxRuntime.jsx(framerMotion.LayoutGroup, { id: layoutGroupId, children: jsxRuntime.jsxs(material.Box, { sx: { position: 'relative', display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs(material.Box, { sx: { ...TABS_CONTAINER_HORIZONTAL }, children: [visibleTabs.map((tab) => {
                                 const isActive = tab.id === selected;
                                 return (jsxRuntime.jsx(LinkElement, { href: tab.href, onClick: tab.onClick, id: tab.id, children: jsxRuntime.jsxs(material.Stack, { component: framerMotion.motion.div, sx: {
-                                            color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
+                                            color: isActive ? exports.TabColors.ACTIVE_TEXT : exports.TabColors.INACTIVE_TEXT,
                                             position: 'relative',
                                             padding: '18px 16px',
                                             cursor: 'pointer',
                                             minHeight: 40,
                                             '&:hover': {
-                                                bgcolor: TabColors.HOVER_BACKGROUND,
+                                                bgcolor: exports.TabColors.HOVER_BACKGROUND,
                                             },
                                             ...sxTabs,
                                         }, onTap: () => handleTabClick(tab), children: [jsxRuntime.jsxs(material.Box, { sx: {
@@ -3187,10 +3224,10 @@ const TabsComponent = ({ idSelect, tabs, size, direction = 'row', maxDisplay, on
                         }, children: overflowTabs.map((tab) => {
                             const isActive = tab.id === selected;
                             return (jsxRuntime.jsx(material.MenuItem, { onClick: () => handleOverflowItemClick(tab), sx: {
-                                    color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
-                                    bgcolor: isActive ? TabColors.MENU_ACTIVE_BACKGROUND : 'transparent',
+                                    color: isActive ? exports.TabColors.ACTIVE_TEXT : exports.TabColors.INACTIVE_TEXT,
+                                    bgcolor: isActive ? exports.TabColors.MENU_ACTIVE_BACKGROUND : 'transparent',
                                     '&:hover': {
-                                        bgcolor: isActive ? TabColors.MENU_ACTIVE_BACKGROUND : TabColors.HOVER_BACKGROUND,
+                                        bgcolor: isActive ? exports.TabColors.MENU_ACTIVE_BACKGROUND : exports.TabColors.HOVER_BACKGROUND,
                                     },
                                 }, children: jsxRuntime.jsxs(material.Box, { sx: {
                                         display: 'flex',
@@ -3538,6 +3575,7 @@ const UploaderComponent = ({ onFilesSelected, accept = '*', multiple = true, chi
                 }, onClick: (e) => e.stopPropagation(), children: displayFiles.map((item, index) => (jsxRuntime.jsx(UploaderItemComponent, { file: item.file, progress: item.progress, status: item.status, isProcess: item.isProcess ?? true, onDelete: () => handleDeleteFile(item.file), onRetry: () => onRetryFile?.(item.id), borderSuccess: appearance?.borderSuccess, borderError: borderError }, item.id || index))) }))] }));
 };
 
+exports.ACCESSIBILITY = ACCESSIBILITY;
 exports.AVATAR_SIZES = AVATAR_SIZES;
 exports.AvatarComponent = AvatarComponent;
 exports.AvatarGroupComponent = AvatarGroupComponent;
@@ -3546,6 +3584,8 @@ exports.AvatarProfileComponent = AvatarProfileComponent;
 exports.AvatarUserComponent = AvatarUserComponent;
 exports.BADGE_FONT_SIZES = BADGE_FONT_SIZES;
 exports.BADGE_SIZES = BADGE_SIZES;
+exports.BORDER_TEXT_FIELD_LOADING = BORDER_TEXT_FIELD_LOADING;
+exports.BUTTON_CONSTANTS = BUTTON_CONSTANTS;
 exports.BadgeImage = BadgeImage;
 exports.BadgeLive = BadgeLive;
 exports.BadgeNumber = BadgeNumber;
@@ -3553,6 +3593,12 @@ exports.BadgeOnline = BadgeOnline;
 exports.BreadcrumbsComponent = BreadcrumbsComponent;
 exports.ButtonBarComponent = ButtonBarComponent;
 exports.ButtonComponent = ButtonComponent;
+exports.CHECKBOX_COLORS = CHECKBOX_COLORS;
+exports.CHECKBOX_SIZE = CHECKBOX_SIZE;
+exports.CHIP_ICON_SIZE = CHIP_ICON_SIZE;
+exports.CHIP_LABEL_PADDING = CHIP_LABEL_PADDING;
+exports.CHIP_SIZE_CONFIG = CHIP_SIZE_CONFIG;
+exports.COLORS = COLORS;
 exports.COLOR_ACCENT = COLOR_ACCENT;
 exports.COLOR_BRAND = COLOR_BRAND;
 exports.COLOR_ERROR = COLOR_ERROR;
@@ -3564,18 +3610,22 @@ exports.COLOR_WARNING = COLOR_WARNING;
 exports.CheckboxComponent = CheckboxComponent;
 exports.CheckboxContentComponent = CheckboxContentComponent;
 exports.ChipComponent = ChipComponent;
+exports.Colors = Colors;
 exports.DateFieldComponent = DateFieldComponent;
 exports.DateRangePickerComponent = DateRangePickerComponent;
 exports.DialogWrapper = DialogWrapper;
 exports.DropdownFieldComponent = DropdownFieldComponent;
 exports.FONT_FAMILY = FONT_FAMILY;
 exports.FONT_SIZE = FONT_SIZE;
+exports.FONT_SIZE_ICON = FONT_SIZE_ICON;
+exports.FONT_SIZE_LOADING = FONT_SIZE_LOADING;
 exports.FONT_STYLE = FONT_STYLE;
 exports.FONT_WEIGHT = FONT_WEIGHT;
 exports.GridComponent = GridComponent;
 exports.IconElement = IconElement;
 exports.ImageElement = ImageElement;
 exports.InputStepperComponent = InputStepperComponent;
+exports.InputStepperSkeleton = InputStepperSkeleton;
 exports.LINE_HEIGHT = LINE_HEIGHT;
 exports.LinkElement = LinkElement;
 exports.LinkFieldComponent = LinkFieldComponent;
@@ -3588,12 +3638,24 @@ exports.ModalIcon = ModalIcon;
 exports.ModalTitle = ModalTitle;
 exports.MoneyFieldComponent = MoneyFieldComponent;
 exports.PINComponent = PINComponent;
+exports.PIN_SIZES = PIN_SIZES;
+exports.PIN_SPACING = PIN_SPACING;
 exports.PhoneNumberFieldComponent = PhoneNumberFieldComponent;
+exports.SHADE_VALUES = SHADE_VALUES;
+exports.SIZES = SIZES;
 exports.SIZE_EXTRA_LARGE = SIZE_EXTRA_LARGE;
 exports.STYLE = style_constant;
 exports.SearchDropdownComponent = SearchDropdownComponent;
 exports.SearchFieldComponent = SearchFieldComponent;
 exports.SwitchComponent = SwitchComponent;
+exports.SwitchContentComponent = SwitchContentComponent;
+exports.TABS_CONTAINER_HORIZONTAL = TABS_CONTAINER_HORIZONTAL;
+exports.TABS_CONTAINER_VERTICAL = TABS_CONTAINER_VERTICAL;
+exports.TAB_ACTIVE_BACKGROUND_HORIZONTAL = TAB_ACTIVE_BACKGROUND_HORIZONTAL;
+exports.TAB_ACTIVE_BACKGROUND_VERTICAL = TAB_ACTIVE_BACKGROUND_VERTICAL;
+exports.TAB_BACKGROUND_STYLES = TAB_BACKGROUND_STYLES;
+exports.TAB_STYLES = TAB_STYLES;
+exports.TAB_UNDERLINE_STYLES = TAB_UNDERLINE_STYLES;
 exports.TYPOGRAPHY = TYPOGRAPHY;
 exports.TYPOGRAPHY_STYLES = TYPOGRAPHY_STYLES;
 exports.TabsComponent = TabsComponent;
@@ -3601,6 +3663,7 @@ exports.TextAreaComponent = TextAreaComponent;
 exports.TextFieldComponent = TextFieldComponent;
 exports.TypographyOneLine = TypographyOneLine;
 exports.UploaderComponent = UploaderComponent;
+exports.UploaderItemComponent = UploaderItemComponent;
 exports.createTypography = createTypography;
 exports.getBadgePosition = getBadgePosition;
 //# sourceMappingURL=index.js.map