mui-design-system 0.0.21 → 0.0.22

package/dist/components/custom-mobile-date-picker/DatePickerBottomSheet.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Box } from '@mui/material';
-import BottomSheet from './CustomBottomSheet';
-import ItemPicker from './ItemPicker';
-import { DateObject } from 'react-multi-date-picker';
-import { PERSIAN_CALENDARS } from './CustomMobileDatePicker';
-const MAX_YEAR = 3000;
-const DatePickerBottomSheet = ({ open, handleClose, label, dayOptions, handleChange, monthOptions, value, handleSubmit, defaultValue, }) => {
-    const lang = document.documentElement.lang;
-    const currentDate = new DateObject({
-        ...(lang.includes('fa') && PERSIAN_CALENDARS),
-        date: new Date(Date.now()),
-    });
-    return (_jsxs(BottomSheet, { open: open, handleClose: handleClose, title: String(label), children: [_jsxs(Box, { display: 'flex', position: 'relative', children: [_jsx(ItemPicker, { getSelectedItem: (selectedDay) => handleChange((prev) => ({
-                            month: prev?.month || null,
-                            day: selectedDay,
-                            year: prev?.year || null,
-                        })), open: open, totalItems: dayOptions + 2, getRowItem: (idx) => idx === 0 || idx === dayOptions + 1 ? '' : String(idx), defaultValue: value?.day || defaultValue?.day || currentDate.day }, 'day-picker'), _jsx(ItemPicker, { getSelectedItem: (selectedMonth) => handleChange((prev) => ({
-                            month: selectedMonth || null,
-                            day: prev?.day || null,
-                            year: prev?.year || null,
-                        })), open: open, totalItems: monthOptions.length, getRowItem: (idx) => String(monthOptions[idx]?.name), defaultValue: value?.month ||
-                            defaultValue?.month.number ||
-                            currentDate.month.number }, 'month-picker'), _jsx(ItemPicker, { getSelectedItem: (selectedYear) => handleChange((prev) => ({
-                            month: prev?.month || null,
-                            day: prev?.day || null,
-                            year: selectedYear ? selectedYear : null,
-                        })), open: open, totalItems: MAX_YEAR, getRowItem: (idx) => String(idx), defaultValue: value?.year || defaultValue?.year || currentDate.year }, 'year-picker'), _jsx(Box, { sx: {
-                            position: 'absolute',
-                            top: 'calc(50% - 20px)',
-                            left: 0,
-                            width: '100%',
-                            height: 40,
-                            backgroundColor: 'primary.main',
-                            borderRadius: '8px',
-                            opacity: 0.1,
-                            zIndex: -1,
-                        } })] }), _jsx(Button, { fullWidth: true, onClick: handleSubmit, children: lang.includes('fa') ? 'تایید' : 'OK' })] }));
-};
-export default DatePickerBottomSheet;

package/dist/components/custom-mobile-date-picker/ItemPicker.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-type TItemPickerProps = {
-    getSelectedItem: (item: number) => void;
-    totalItems: number;
-    getRowItem: (idx: number) => string;
-    defaultValue?: number | null;
-    open: boolean;
-};
-declare const ItemPicker: FC<TItemPickerProps>;
-export default ItemPicker;

package/dist/components/custom-mobile-date-picker/ItemPicker.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Typography } from '@mui/material';
-import { createRef, useEffect, useRef, useState, } from 'react';
-import { FixedSizeList as List } from 'react-window';
-const ITEM_HEIGHT = 40;
-const ItemPicker = ({ getSelectedItem, totalItems, getRowItem, defaultValue, open, }) => {
-    const listRef = createRef();
-    const [isScrolling, setIsScrolling] = useState(false);
-    const selectedItemRef = useRef(defaultValue || 0);
-    const handleScrollToItem = (isScrolling) => {
-        if (!isScrolling) {
-            if (selectedItemRef.current !== 2) {
-                listRef.current?.scrollToItem(selectedItemRef.current, selectedItemRef.current >= totalItems - 2 ? 'auto' : 'center');
-            }
-            else {
-                //Because of react window bug for index "2"
-                listRef.current?.scrollTo(ITEM_HEIGHT);
-            }
-            setIsScrolling(false);
-        }
-        else {
-            setIsScrolling(true);
-        }
-    };
-    useEffect(() => {
-        if (!isScrolling && selectedItemRef.current > 0 && open) {
-            getSelectedItem(selectedItemRef.current);
-        }
-    }, [isScrolling, open]);
-    const Row = ({ index, isScrolling = false, style, }) => {
-        handleScrollToItem(isScrolling);
-        return (_jsx(Typography, { textAlign: 'inherit', sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '100%',
-                height: '100%',
-                userSelect: 'none',
-                transition: '0.3s ease all',
-                filter: selectedItemRef.current === index ? 'none' : 'blur(0.5px)',
-                fontSize: selectedItemRef.current === index ? 16 : 14,
-                ...style,
-            }, variant: selectedItemRef.current === index ? 'caption2.bold' : 'caption2', children: getRowItem(index) }));
-    };
-    return (_jsxs(Stack, { sx: {
-            overflowY: 'hidden',
-            height: 120,
-            flexBasis: '33%',
-        }, children: [_jsx(Stack, { sx: {
-                    width: '100%',
-                }, children: _jsx(List, { className: 'item-picker', height: ITEM_HEIGHT * 3, itemCount: totalItems, itemSize: ITEM_HEIGHT, width: '100%', 
-                    // -1 is because options array is zero based index
-                    initialScrollOffset: (selectedItemRef.current - 1) * ITEM_HEIGHT, onScroll: (e) => {
-                        // +1 is because item being in center of selector
-                        selectedItemRef.current =
-                            Math.round(e.scrollOffset / ITEM_HEIGHT) + 1;
-                    }, style: {
-                        textAlign: 'center',
-                        transition: 'all ease 1s',
-                    }, ref: listRef, useIsScrolling: true, children: Row }) }), _jsx("style", { children: css })] }));
-};
-export default ItemPicker;
-const css = `
-  .item-picker::-webkit-scrollbar {
-      display: none;
-  }
-  .item-picker {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    }
-  `;

package/dist/components/custom-modal/CustomModal.d.ts

@@ -1,21 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { BoxProps, ModalProps } from "@mui/material";
-export interface CustomModalProps {
-    open: boolean;
-    onClose?: () => void;
-    title?: string;
-    children?: ReactNode;
-    modalProps: Omit<ModalProps, "open">;
-    boxProps?: BoxProps;
-    leftTitle?: React.ReactNode;
-    withoutDivider?: boolean;
-    withoutHeader?: boolean;
-    scrollableProps?: BoxProps;
-    preventClose?: boolean;
-    onClickTopLeftBtn?: () => void;
-    topLeftBtnTitle?: string;
-    maxHeight?: string | number;
-    height?: string | number;
-}
-declare const CustomModal: FC<CustomModalProps>;
-export default CustomModal;

package/dist/components/custom-modal/CustomModal.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-//@Mui
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Modal from "@mui/material/Modal";
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-const CustomModal = ({ modalProps, open, children, boxProps, onClose, title, leftTitle, withoutDivider, withoutHeader, scrollableProps, preventClose, onClickTopLeftBtn, topLeftBtnTitle, maxHeight, height, }) => {
-    return (_jsx(Modal, { "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", open: open, sx: {
-            direction: "ltr",
-            backdropFilter: "blur(5px)",
-            "& .MuiBackdrop-root ": {
-                backgroundColor: "rgba(27, 38, 44, 0.1)",
-            },
-        }, onClose: () => {
-            if (onClose && !preventClose) {
-                onClose();
-            }
-        }, ...modalProps, children: _jsxs(Stack, { sx: {
-                width: { xs: "90%", md: "auto" },
-                minWidth: 300,
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                backgroundColor: "background.4",
-                borderRadius: "10px",
-                py: 5,
-                px: { xs: 2, lg: 7 },
-                outline: "none",
-                ...boxProps,
-            }, children: [!withoutHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", gap: 3, alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsxs(Box, { display: "flex", gap: 3, alignItems: "center", children: [_jsx(IconButton, { onClick: () => (onClose ? onClose() : ""), "data-cy": "close-modal", children: "x" }), _jsx(Typography, { fontWeight: 500, fontSize: 12, children: title })] }), _jsx(Box, { children: leftTitle }), topLeftBtnTitle && (_jsx(Box, { sx: { color: "primary.main", cursor: "pointer" }, onClick: onClickTopLeftBtn, children: topLeftBtnTitle }))] }), !withoutDivider && (_jsx(Divider, { sx: {
-                                mb: 4,
-                                borderColor: "background.1",
-                            } }))] })), _jsx(Stack, { height: height || "100%", maxHeight: maxHeight || "73vh", children: children })] }) }));
-};
-export default CustomModal;

package/dist/components/custom-pagination/custom-pagination-1/CustomPagination1.d.ts

@@ -1,9 +0,0 @@
-import { FC } from "react";
-import { BoxProps } from "@mui/material/Box";
-import { ITablePagination } from "../../custom-table/CustomTable";
-export interface CustomPagination1Props {
-    pagination: ITablePagination;
-    boxProps?: BoxProps;
-}
-declare const CustomPagination1: FC<CustomPagination1Props>;
-export default CustomPagination1;

package/dist/components/custom-pagination/custom-pagination-1/CustomPagination1.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Box from "@mui/material/Box";
-import Pagination from "@mui/material/Pagination";
-import PaginationItem from "@mui/material/PaginationItem";
-const CustomPagination1 = ({ boxProps, pagination }) => {
-    const handleChangePage = (event, value) => {
-        if (pagination && pagination.onChangePage) {
-            pagination.onChangePage(value);
-        }
-    };
-    return (_jsx(Box, { style: { direction: "ltr" }, display: "flex", justifyContent: "center", alignItems: "center", gap: 1, mt: 3, ...boxProps, children: _jsx(Pagination, { sx: { mb: 0.5, px: 2 }, size: "small", renderItem: (item) => _jsx(PaginationItem, { ...item }), count: pagination?.pageCounts, page: pagination?.pageIndex, onChange: handleChangePage, shape: "rounded" }) }));
-};
-export default CustomPagination1;

package/dist/components/custom-pagination/custom-pagination-2/CustomPagination2.d.ts

@@ -1,20 +0,0 @@
-import { FC } from "react";
-import { BoxProps, SelectProps } from "@mui/material";
-import { ITablePagination } from "../../custom-table/CustomTable";
-export interface ITableFooterProps {
-    pagination: ITablePagination;
-    boxProps?: BoxProps;
-    selectProps?: SelectProps;
-    paginationBoxProps?: BoxProps;
-    iconBoxProps?: BoxProps;
-    withoutEndPageButton?: boolean;
-    dictionary?: {
-        pageSizeTitle?: string;
-        pageIndexTitle?: string;
-    };
-}
-export interface IIconBoxProps extends BoxProps {
-    disabled?: boolean;
-}
-declare const CustomPagination2: FC<ITableFooterProps>;
-export default CustomPagination2;

package/dist/components/custom-pagination/custom-pagination-2/CustomPagination2.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { MenuItem, Select } from "@mui/material";
-import SvgArrowLeft1 from "../../../icons/ArrowLeft1";
-import SvgUnion from "../../../icons/Union";
-import SvgArrowRight1 from "../../../icons/ArrowRight1";
-const pageSizes = [5, 10, 20, 30, 50];
-const CustomPagination2 = ({ pagination, boxProps, selectProps, paginationBoxProps, iconBoxProps, withoutEndPageButton, dictionary }) => {
-    const IconBox = ({ children, sx, disabled, ...rest }) => (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: "primary.1", width: 32, height: 32, borderRadius: 1, sx: {
-            transition: "0.2s ease transform",
-            ":active": { transform: "scale(90%)" },
-            ...sx,
-            opacity: disabled ? 0.5 : 1,
-            cursor: disabled ? "default" : "pointer",
-            pointerEvents: disabled ? "none" : "auto",
-        }, ...iconBoxProps, ...rest, children: children }));
-    return (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 4, bgcolor: "#EAEDFF", borderRadius: "0 0 8px 8px", ...boxProps, children: [_jsxs(Box, { display: "flex", gap: 2, dir: "rtl", children: [!withoutEndPageButton && (_jsx(IconBox, { onClick: () => pagination?.onChangePage
-                            ? pagination?.onChangePage(pagination?.pageCounts)
-                            : {}, disabled: pagination && pagination?.pageIndex === pagination.pageCounts, children: _jsx(SvgUnion, { width: 18, height: 18, style: { transform: "scaleX(-1)" } }) })), _jsxs(Box, { display: "flex", gap: 2, justifyContent: "center", alignItems: "center", bgcolor: "background.1", borderRadius: 1, ...paginationBoxProps, children: [_jsx(IconBox, { onClick: () => pagination?.onChangePage(pagination?.pageIndex + 1), disabled: pagination && pagination?.pageIndex === pagination.pageCounts, children: _jsx(SvgArrowRight1, { width: 18, height: 18 }) }), _jsx(Typography, { dir: "ltr", variant: "caption2.medium", color: "text.13", width: 'auto', minWidth: 75, textAlign: "center", children: dictionary?.pageIndexTitle || `صفحه ${pagination?.pageIndex} از ${pagination?.pageCounts}` }), _jsx(IconBox, { onClick: () => pagination && pagination?.pageIndex > 1
-                                    ? pagination?.onChangePage(pagination?.pageIndex - 1)
-                                    : {}, disabled: pagination && pagination?.pageIndex <= 1, children: _jsx(SvgArrowLeft1, { width: 18, height: 18 }) })] }), !withoutEndPageButton && (_jsx(IconBox, { onClick: () => pagination?.onChangePage(1), disabled: pagination && pagination?.pageIndex <= 1, children: _jsx(SvgUnion, { width: 18, height: 18 }) }))] }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", justifyContent: "flex-end", flexGrow: 1, maxWidth: 240, children: [_jsx(Box, { width: "max-content", children: _jsx(Typography, { display: "block", width: "max-content", variant: "caption3", children: dictionary?.pageSizeTitle || "تعداد در هر صفحه" }) }), _jsx(Box, { children: _jsx(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", value: pagination?.pageSize || pageSizes[0], onChange: (e, v) => pagination?.onChangePageSize?.(e.target.value), sx: {
-                                minHeight: 32,
-                                height: 32,
-                                "& > div": {
-                                    py: 2,
-                                    pr: '4px !important',
-                                },
-                                fontSize: "14px !important",
-                                color: "text.primary",
-                            }, variant: "filled", ...selectProps, children: pageSizes.map((pageSize) => (_jsx(MenuItem, { value: pageSize, sx: { fontSize: "14px !important" }, children: pageSize }, pageSize))) }) })] })] }));
-};
-export default CustomPagination2;

package/dist/components/custom-progress/LinearBufferProgress.d.ts

@@ -1,6 +0,0 @@
-import { FC } from "react";
-interface Props {
-    progress: number;
-}
-declare const LinearBufferProgress: FC<Props>;
-export default LinearBufferProgress;

package/dist/components/custom-progress/LinearBufferProgress.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import Box from "@mui/material/Box";
-import LinearProgress from "@mui/material/LinearProgress";
-const LinearBufferProgress = ({ progress }) => {
-    const [buffer, setBuffer] = React.useState(10);
-    React.useEffect(() => {
-        const diff = Math.random() * 10;
-        const diff2 = Math.random() * 10;
-        setBuffer(progress + diff + diff2);
-    }, [progress]);
-    return (_jsx(Box, { sx: { width: "100%" }, children: _jsx(LinearProgress, { variant: "buffer", value: progress, valueBuffer: buffer }) }));
-};
-export default LinearBufferProgress;

package/dist/components/custom-stepper/CustomStepper.d.ts

@@ -1,31 +0,0 @@
-import { ButtonProps, StepConnectorProps, StepIconProps, StepLabelProps, StepperProps, TypographyProps } from "@mui/material";
-import { MouseEvent } from "react";
-type step = {
-    label?: string;
-    error?: {
-        hasError?: boolean;
-        errorMessage?: string;
-    };
-    canSkipping?: boolean;
-    completed?: boolean;
-};
-export interface ICustomStepper {
-    steps: step[];
-    activeStep: number;
-    orientation?: "vertical" | "horizontal";
-    alternativeLabel?: boolean;
-    stepperProps?: StepperProps;
-    stepConnectorProps?: StepConnectorProps;
-    stepLabelProps?: StepLabelProps;
-    errorTypographyProps?: TypographyProps;
-    stepButtonProps?: ButtonProps;
-    nonLinear?: boolean;
-    clickableItem?: boolean;
-    onClickItem?: (index: number, e?: MouseEvent<HTMLButtonElement>) => void;
-    completedIconComponent?: (props: StepIconProps) => JSX.Element;
-    activeIconComponent?: (props: StepIconProps) => JSX.Element;
-    errorIconComponent?: (props: StepIconProps) => JSX.Element;
-    defaultIconComponent?: (props: StepIconProps) => JSX.Element;
-}
-declare const CustomStepper: ({ steps, activeStep, orientation, alternativeLabel, nonLinear, clickableItem, errorTypographyProps, completedIconComponent, activeIconComponent, errorIconComponent, defaultIconComponent, stepperProps, stepConnectorProps, stepLabelProps, stepButtonProps, onClickItem, }: ICustomStepper) => import("react/jsx-runtime").JSX.Element;
-export default CustomStepper;

package/dist/components/custom-stepper/CustomStepper.js

@@ -1,170 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, Step, StepConnector, StepLabel, Stepper, Typography, } from "@mui/material";
-import SvgTick from "../../icons/Tick";
-import SvgWarning2 from "../../icons/Warning2";
-const CustomStepper = ({ steps, activeStep, orientation = "horizontal", alternativeLabel = false, nonLinear, clickableItem, errorTypographyProps, completedIconComponent, activeIconComponent, errorIconComponent, defaultIconComponent, stepperProps, stepConnectorProps, stepLabelProps, stepButtonProps, onClickItem, }) => {
-    const defaultStylesStepperConnectorHorizontal = {
-        backgroundColor: "text.5",
-        left: "calc(-50% + 10px)",
-        right: "calc(50% + 10px)",
-        "& .MuiStepConnector-line": {
-            borderColor: "text.9",
-            borderWidth: 2,
-            borderTopStyle: "dashed",
-        },
-        "&.Mui-completed": {
-            "& .MuiStepConnector-line": {
-                borderColor: "primary.5",
-                borderTopStyle: "solid",
-            },
-        },
-        "&.Mui-active": {
-            "& .MuiStepConnector-line": {
-                borderColor: "primary.5",
-                borderTopStyle: "solid",
-            },
-        },
-    };
-    const defaultStylesStepperConnectorVertical = {
-        backgroundColor: "text.5",
-        width: 2,
-        "& .MuiStepConnector-line": {
-            borderColor: "text.9",
-            borderWidth: 2,
-            borderLeftStyle: "dashed",
-        },
-        "&.Mui-completed": {
-            "& .MuiStepConnector-line": {
-                borderColor: "primary.5",
-                borderLeftStyle: "solid",
-            },
-        },
-        "&.Mui-active": {
-            "& .MuiStepConnector-line": {
-                borderColor: "primary.5",
-                borderLeftStyle: "solid",
-            },
-        },
-    };
-    const defaultLabelStylesAlternative = {
-        "& .MuiStepLabel-label": {
-            fontSize: "12px",
-            fontWeight: "400 !important",
-            lineHeight: "21px",
-            marginTop: "8px !important",
-            color: "text.12",
-        },
-        "& .Mui-active": {
-            color: "gray.16",
-        },
-        "& .Mui-completed": {
-            color: "gray.16",
-        },
-    };
-    const defaultLabelStyles = {
-        "& .MuiStepLabel-label": {
-            fontSize: "12px",
-            fontWeight: "400 !important",
-            lineHeight: "21px",
-            color: "text.12",
-        },
-        "& .Mui-active": {
-            color: "gray.16",
-        },
-        "& .Mui-completed": {
-            color: "gray.16",
-        },
-    };
-    function StepIcons(props) {
-        const { completed, active, error, icon } = props;
-        return (_jsx(_Fragment, { children: completed ? (completedIconComponent ? (completedIconComponent(props)) : (_jsx(Box, { sx: {
-                    width: 24,
-                    height: 24,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    backgroundColor: "primary.5",
-                    borderRadius: "100%",
-                    zIndex: 2,
-                }, children: _jsx(SvgTick, { primarycolor: "#fff", width: 24, height: 24 }) }))) : error ? (errorIconComponent ? (errorIconComponent(props)) : (_jsx(SvgWarning2, { primarycolor: "red", width: 24, height: 24 }))) : active ? (activeIconComponent ? (activeIconComponent(props)) : (_jsxs(Box, { sx: {
-                    width: 24,
-                    height: 24,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    position: "relative",
-                    backgroundColor: "text.5",
-                    borderRadius: "100%",
-                    zIndex: 2,
-                }, children: [_jsx(Typography, { variant: "caption2", color: "text.11", children: icon }), _jsx(Box, { sx: {
-                            width: 34,
-                            height: 34,
-                            position: "absolute",
-                            top: "50%",
-                            left: "50%",
-                            transform: "translate(-50%,-50%)",
-                            borderRadius: "100%",
-                            opacity: 0.3,
-                            backgroundColor: "primary.3",
-                        }, children: _jsx(Box, { sx: {
-                                width: 12,
-                                height: 12,
-                                position: "absolute",
-                                top: "50%",
-                                left: "50%",
-                                transform: "translate(-50%,-50%)",
-                                backgroundColor: "primary.1",
-                                borderRadius: "100%",
-                            } }) })] }))) : defaultIconComponent ? (defaultIconComponent(props)) : (_jsx(Box, { sx: {
-                    width: 24,
-                    height: 24,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    backgroundColor: "text.5",
-                    borderRadius: "100%",
-                    zIndex: 2,
-                }, children: _jsx(Typography, { variant: "caption2", color: "text.11", children: icon }) })) }));
-    }
-    return (_jsx(Stepper, { alternativeLabel: alternativeLabel, activeStep: activeStep, orientation: orientation, nonLinear: nonLinear, connector: _jsx(StepConnector, { ...stepConnectorProps, sx: [
-                orientation === "horizontal"
-                    ? defaultStylesStepperConnectorHorizontal
-                    : defaultStylesStepperConnectorVertical,
-                ...(Array.isArray(stepConnectorProps?.sx)
-                    ? stepConnectorProps.sx
-                    : [stepConnectorProps?.sx]),
-            ] }), ...stepperProps, children: steps.map((item, index) => {
-            return (_jsx(Step, { ...(nonLinear && {
-                    completed: item.completed,
-                }), sx: {
-                    display: "flex",
-                    justifyContent: orientation === "horizontal" ? "center" : "flex-start",
-                }, children: nonLinear && clickableItem ? (_jsx(Button, { ...stepButtonProps, sx: [
-                        {
-                            width: "fit-content",
-                            backgroundColor: "transparent",
-                            "&:hover": {
-                                backgroundColor: "transparent",
-                            },
-                        },
-                        ...(Array.isArray(stepButtonProps?.sx)
-                            ? stepButtonProps.sx
-                            : [stepButtonProps?.sx]),
-                    ], onClick: (e) => onClickItem?.(index, e), children: _jsx(StepLabel, { StepIconComponent: StepIcons, error: item.error?.hasError, optional: item.error && (_jsx(Typography, { variant: "caption3", color: "error", ...errorTypographyProps, children: item.error?.errorMessage })), ...stepLabelProps, sx: [
-                            alternativeLabel
-                                ? defaultLabelStylesAlternative
-                                : defaultLabelStyles,
-                            ...(Array.isArray(stepLabelProps?.sx)
-                                ? stepLabelProps.sx
-                                : [stepLabelProps?.sx]),
-                        ], children: item?.label }) })) : (_jsx(StepLabel, { StepIconComponent: StepIcons, error: item.error?.hasError, optional: item.error && (_jsx(Typography, { variant: "caption3", color: "error", ...errorTypographyProps, children: item.error.errorMessage })), ...stepLabelProps, sx: [
-                        alternativeLabel
-                            ? defaultLabelStylesAlternative
-                            : defaultLabelStyles,
-                        ...(Array.isArray(stepLabelProps?.sx)
-                            ? stepLabelProps.sx
-                            : [stepLabelProps?.sx]),
-                    ], children: item?.label })) }, item.label));
-        }) }));
-};
-export default CustomStepper;

package/dist/components/custom-table/CustomTable.d.ts

@@ -1,55 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { StackProps } from '@mui/material/Stack';
-import { TypographyProps } from '@mui/material/Typography';
-import { Cell, Row, Table as TableType } from '@tanstack/react-table';
-import { ITableFooterProps } from '../custom-pagination/custom-pagination-2/CustomPagination2';
-import { SystemStyleObject } from '@mui/system';
-import { RadioProps } from '@mui/material/Radio';
-import { ICheckboxProps } from './components/CustomTableRow';
-export interface ITablePagination {
-    pageIndex: number;
-    pageSize: number;
-    pageCounts: number;
-    onChangePage: (pageIndex: number) => void;
-    onChangePageSize?: (pageSize: number) => void;
-}
-export interface ITableRowStyle {
-    row: Row<any>;
-    hover?: boolean;
-}
-export interface ITableCellsStyle {
-    row: Row<any>;
-    cell?: Cell<any, any>;
-    hover?: boolean;
-}
-export type TRowStyle = (props: ITableRowStyle) => SystemStyleObject;
-export type TCellsStyle = (props: ITableCellsStyle) => SystemStyleObject;
-export type TCheckboxProps = ((props: {
-    row?: Row<any>;
-    table: TableType<any>;
-}) => ICheckboxProps) | ICheckboxProps;
-export interface ICustomTable {
-    id?: string;
-    pagination?: ITablePagination;
-    table: TableType<any>;
-    variant?: 'fill' | 'standard';
-    wrapperStackProps?: StackProps;
-    footerProps?: Omit<ITableFooterProps, 'pagination'>;
-    onClickRow?: (row: Row<any>) => void;
-    renderSubComponent?: any;
-    isLoading?: boolean;
-    isError?: boolean;
-    withRadio?: boolean;
-    withSelect?: boolean;
-    withIndex?: boolean;
-    rowStyle?: TRowStyle;
-    cellsStyle?: TCellsStyle;
-    headerStyle?: SystemStyleObject;
-    headerTypoProps?: TypographyProps;
-    checkboxProps?: TCheckboxProps;
-    radioProps?: RadioProps;
-    emptyListComponent?: string | ReactNode;
-    rowBorderRadius?: number;
-}
-declare const CustomTable: FC<ICustomTable>;
-export default CustomTable;

package/dist/components/custom-table/CustomTable.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-//------------------------------------------------------------------------------------
-//@Mui
-import Box from '@mui/material/Box';
-import Skeleton from '@mui/material/Skeleton';
-import TableBody from '@mui/material/TableBody';
-import TableRow from '@mui/material/TableRow';
-import TableCell from '@mui/material/TableCell';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import TableContainer from '@mui/material/TableContainer';
-import Table from '@mui/material/Table';
-import CustomTableHead from '../custom-table/components/CustomTableHead';
-import CustomPagination2 from '../custom-pagination/custom-pagination-2/CustomPagination2';
-import CustomTableBody from '../custom-table/components/CustomTableBody';
-const CustomTable = ({ id, isLoading, variant, table, wrapperStackProps, footerProps, renderSubComponent, pagination, onClickRow, isError, withRadio, withSelect, withIndex, rowStyle, cellsStyle, headerStyle, headerTypoProps, checkboxProps, emptyListComponent, radioProps, rowBorderRadius, }) => {
-    const pageCounts = pagination?.pageCounts;
-    if (pagination && pageCounts && pagination?.pageIndex > pageCounts) {
-        pagination?.onChangePage(pageCounts);
-    }
-    return (_jsxs(Stack, { id: id, "data-cy": id, ...wrapperStackProps, sx: {
-            flexGrow: 1,
-            width: '100%',
-            borderRadius: 2,
-            ...wrapperStackProps?.sx,
-        }, children: [_jsx(TableContainer, { sx: {
-                    flexGrow: '1',
-                    overflowX: 'unset',
-                    overflowY: 'auto',
-                }, children: _jsxs(Table, { sx: { position: 'relative' }, children: [_jsx(CustomTableHead, { table: table, variant: variant, withRadio: withRadio, withSelect: withSelect, withIndex: withIndex, headerStyle: headerStyle, checkboxProps: checkboxProps, headerTypoProps: headerTypoProps }), isLoading ? (_jsx(TableBody, { sx: { height: '150px', width: '100%' }, children: _jsx(_Fragment, { children: Array.from({ length: 10 }).map((item, index) => (_jsx(TableRow, { children: table?.getHeaderGroups()[0]?.headers?.map((col, index) => (_jsx(TableCell, { children: _jsx(Box, { children: index === 0 ? (_jsx(Skeleton, { sx: { borderRadius: 1 }, animation: 'wave', width: '17px', height: '16px', variant: 'rectangular' })) : (_jsx(Skeleton, { sx: { borderRadius: 1 }, animation: 'wave', width: '100%', variant: 'rectangular' })) }) }, index))) }, index))) }) })) : isError ? (_jsx(TableBody, { sx: { height: '150px', width: '100%' }, children: _jsx(TableRow, { sx: {
-                                    position: 'absolute',
-                                    width: '100%',
-                                    top: '47px',
-                                    mt: '16px',
-                                    textAlign: 'center',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                }, children: _jsx(TableCell, { children: _jsx(Typography, { variant: 'h4', fontWeight: 400, children: "\u062E\u0637\u0627\u06CC \u062F\u0631\u06CC\u0627\u0641\u062A \u0627\u0637\u0644\u0627\u0639\u0627\u062A" }) }) }) })) : table?.getRowModel()?.rows.length == 0 ? (_jsx(TableBody, { sx: { height: '150px', width: '100%' }, children: _jsx(TableRow, { sx: {
-                                    position: 'absolute',
-                                    width: '100%',
-                                    top: '47px',
-                                    mt: '16px',
-                                    textAlign: 'center',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                }, children: _jsx(TableCell, { children: emptyListComponent ?? (_jsx(Typography, { variant: 'h4', fontWeight: 400, children: "\u0628\u062F\u0648\u0646 \u062F\u06CC\u062A\u0627" })) }) }) })) : (_jsx(CustomTableBody, { table: table, withIndex: withIndex, withSelect: withSelect, withRadio: withRadio, onClickRow: onClickRow, renderSubComponent: renderSubComponent, pagination: pagination, rowStyle: rowStyle, cellsStyle: cellsStyle, checkboxProps: checkboxProps, radioProps: radioProps, rowBorderRadius: rowBorderRadius }))] }) }), pagination && (_jsx(CustomPagination2, { pagination: pagination, ...footerProps }))] }));
-};
-export default CustomTable;

package/dist/components/custom-table/components/CustomTableBody.d.ts

@@ -1,21 +0,0 @@
-import { FC } from 'react';
-import { Row } from '@tanstack/react-table';
-import { Table as TableType } from '@tanstack/table-core/build/lib/types';
-import { ITablePagination, TCellsStyle, TCheckboxProps, TRowStyle } from '../CustomTable';
-import { RadioProps } from '@mui/material/Radio';
-interface CustomTableBodyProps {
-    table: TableType<any>;
-    onClickRow?: (row: Row<any>) => void;
-    renderSubComponent?: () => any;
-    withSelect?: boolean;
-    withIndex?: boolean;
-    withRadio?: boolean;
-    pagination?: ITablePagination;
-    rowStyle?: TRowStyle;
-    cellsStyle?: TCellsStyle;
-    checkboxProps?: TCheckboxProps;
-    radioProps?: RadioProps;
-    rowBorderRadius?: number;
-}
-declare const CustomTableBody: FC<CustomTableBodyProps>;
-export default CustomTableBody;

package/dist/components/custom-table/components/CustomTableBody.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-//-----------------------------------------------------------------------------------------
-//@Mui
-import { TableBody } from '@mui/material';
-import CustomTableRow from '../../custom-table/components/CustomTableRow';
-const CustomTableBody = ({ table, onClickRow, renderSubComponent, withSelect, withRadio, withIndex, pagination, rowStyle, cellsStyle, checkboxProps, radioProps, rowBorderRadius, }) => {
-    return (_jsx(TableBody, { children: table?.getRowModel()?.rows?.map((row, i) => {
-            return (_jsx(CustomTableRow, { row: row, onClickRow: onClickRow, renderSubComponent: renderSubComponent, withSelect: withSelect, withRadio: withRadio, withIndex: withIndex, pagination: pagination, rowStyle: rowStyle, cellsStyle: cellsStyle, checkboxProps: checkboxProps, radioProps: radioProps, rowBorderRadius: rowBorderRadius, table: table }, row.id));
-        }) }));
-};
-export default CustomTableBody;