mui-design-system 0.0.1

package/dist/assets/icons/AlertCircle.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+interface Props extends SVGProps<SVGSVGElement> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgAlertCircle: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgAlertCircle;

package/dist/assets/icons/AlertCircle.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgAlertCircle = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', ...props, children: _jsx("path", { fill: primarycolor || '#D03430', fillRule: 'evenodd', d: 'M2 12C2 6.48 6.48 2 12 2c5.53 0 10 4.48 10 10s-4.47 10-10 10C6.48 22 2 17.52 2 12Zm9.12-3.79c0-.48.4-.88.88-.88s.87.4.87.88v4.42a.87.87 0 0 1-.87.87.879.879 0 0 1-.88-.87V8.21Zm.89 8.47c-.49 0-.88-.4-.88-.88s.39-.87.87-.87c.49 0 .88.39.88.87s-.39.88-.87.88Z', clipRule: 'evenodd' }) }));
+export default SvgAlertCircle;

package/dist/assets/icons/Calendar.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+interface Props extends SVGProps<any> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgCalendar: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgCalendar;

package/dist/assets/icons/Calendar.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgCalendar = ({ primarycolor, secondarycolor, ...props }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: 10, strokeWidth: 1.5, d: "M8 2v3M16 2v3M3.5 9.09h17M21 8.5V17c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5" }), _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.695 13.7h.009M15.695 16.7h.009M11.996 13.7h.008M11.996 16.7h.008M8.294 13.7h.01M8.294 16.7h.01" })] }));
+export default SvgCalendar;

package/dist/assets/icons/ChevronDown.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+interface Props extends SVGProps<any> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgChevronDown: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgChevronDown;

package/dist/assets/icons/ChevronDown.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgChevronDown = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 18, height: 18, fill: secondarycolor || 'none', viewBox: '0 0 24 24', ...props, children: _jsx("path", { fill: '#6A6A6A', d: 'M2.92 5.878a.586.586 0 0 1 .756-.056l.065.056 5.01 4.947 5.008-4.947a.586.586 0 0 1 .756-.056l.065.056a.569.569 0 0 1 .056.746l-.056.065-5.42 5.353a.586.586 0 0 1-.755.055l-.065-.055-5.42-5.353a.569.569 0 0 1 0-.811Z' }) }));
+export default SvgChevronDown;

package/dist/assets/icons/DocumentDownload.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+interface Props extends SVGProps<any> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgDocumentDownload: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgDocumentDownload;

package/dist/assets/icons/DocumentDownload.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgDocumentDownload = ({ primarycolor, secondarycolor, ...props }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 11v6l2-2M9 17l-2-2" }), _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M22 10v5c0 5-2 7-7 7H9c-5 0-7-2-7-7V9c0-5 2-7 7-7h5" }), _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M22 10h-4c-3 0-4-1-4-4V2z" })] }));
+export default SvgDocumentDownload;

package/dist/assets/icons/FolderAdd.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+interface Props extends SVGProps<any> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgFolderAdd: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgFolderAdd;

package/dist/assets/icons/FolderAdd.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgFolderAdd = ({ primarycolor, secondarycolor, ...props }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: 10, strokeWidth: 1.5, d: "M12.06 16.5v-5M14.5 14h-5" }), _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeMiterlimit: 10, strokeWidth: 1.5, d: "M22 11v6c0 4-1 5-5 5H7c-4 0-5-1-5-5V7c0-4 1-5 5-5h1.5c1.5 0 1.83.44 2.4 1.2l1.5 2c.38.5.6.8 1.6.8h3c4 0 5 1 5 5Z" })] }));
+export default SvgFolderAdd;

package/dist/assets/icons/InfoCircle.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+interface Props extends SVGProps<any> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgInfoCircle: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgInfoCircle;

package/dist/assets/icons/InfoCircle.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgInfoCircle = ({ primarycolor, secondarycolor, ...props }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10M12 8v5" }), _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.995 16h.009" })] }));
+export default SvgInfoCircle;

package/dist/assets/icons/InfoSquare.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+interface Props extends SVGProps<SVGSVGElement> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgInfoSquare: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgInfoSquare;

package/dist/assets/icons/InfoSquare.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgInfoSquare = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', ...props, children: _jsx("path", { fill: '#1B7CD0', fillRule: 'evenodd', d: 'M7.67 2h8.67C19.73 2 22 4.38 22 7.92v8.17c0 3.53-2.27 5.91-5.66 5.91H7.67C4.28 22 2 19.62 2 16.09V7.92C2 4.38 4.28 2 7.67 2Zm4.32 7.06a.87.87 0 0 1-.86-.87.875.875 0 1 1 .86.87Zm.88 6.72c0 .48-.39.87-.88.87a.87.87 0 0 1-.87-.87v-4.42c0-.48.39-.88.87-.88.49 0 .88.4.88.88v4.42Z', clipRule: 'evenodd' }) }));
+export default SvgInfoSquare;

package/dist/assets/icons/SuccessSquare.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+interface Props extends SVGProps<SVGSVGElement> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgSuccessSquare: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgSuccessSquare;

package/dist/assets/icons/SuccessSquare.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgSuccessSquare = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: secondarycolor || 'none', ...props, children: _jsx("path", { fill: primarycolor || '#307232', fillRule: 'evenodd', d: 'M7.67 2h8.67C19.73 2 22 4.38 22 7.92v8.171C22 19.62 19.73 22 16.34 22H7.67C4.28 22 2 19.62 2 16.091V7.92C2 4.38 4.28 2 7.67 2Zm3.76 12.99 4.75-4.75c.34-.34.34-.89 0-1.24a.881.881 0 0 0-1.24 0l-4.13 4.13-1.75-1.75a.881.881 0 0 0-1.24 0c-.34.34-.34.89 0 1.24l2.38 2.37c.17.17.39.25.61.25.23 0 .45-.08.62-.25Z', clipRule: 'evenodd' }) }));
+export default SvgSuccessSquare;

package/dist/assets/icons/Trash.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+interface Props extends SVGProps<any> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgTrash: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgTrash;

package/dist/assets/icons/Trash.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgTrash = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 5.98c-3.33-.33-6.68-.5-10.02-.5-1.98 0-3.96.1-5.94.3L3 5.98M8.5 4.97l.22-1.31C8.88 2.71 9 2 10.69 2h2.62c1.69 0 1.82.75 1.97 1.67l.22 1.3M18.85 9.14l-.65 10.07C18.09 20.78 18 22 15.21 22H8.79C6 22 5.91 20.78 5.8 19.21L5.15 9.14M10.33 16.5h3.33M9.5 12.5h5" }) }));
+export default SvgTrash;

package/dist/assets/icons/Union.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+interface Props extends SVGProps<any> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgUnion: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgUnion;

package/dist/assets/icons/Union.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgUnion = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 19, fill: secondarycolor || "none", viewBox: "0 0 16 24", ...props, children: _jsx("path", { fill: primarycolor || "#1A1A1A", fillRule: "evenodd", d: "M8.534 2.106a.75.75 0 0 0-1.07-1.052l-6.407 6.52a2.76 2.76 0 0 0 0 3.852l6.407 6.52a.75.75 0 0 0 1.07-1.052l-6.407-6.52a1.26 1.26 0 0 1 0-1.748zm4.977 0a.75.75 0 1 0-1.07-1.052l-6.408 6.52a2.76 2.76 0 0 0 0 3.852l6.408 6.52a.75.75 0 0 0 1.07-1.052l-6.408-6.52a1.26 1.26 0 0 1 0-1.748z", clipRule: "evenodd" }) }));
+export default SvgUnion;

package/dist/assets/icons/Warning.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+interface Props extends SVGProps<SVGSVGElement> {
+    primarycolor?: string;
+    secondarycolor?: string;
+}
+declare const SvgWarning: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SvgWarning;

package/dist/assets/icons/Warning.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgWarning = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', ...props, children: _jsx("path", { fill: '#E6C530', fillRule: 'evenodd', d: 'm14.477 4.442 7.269 12.615c.16.377.23.683.25 1.001a2.76 2.76 0 0 1-.73 2.022c-.51.554-1.2.88-1.95.92H4.68c-.31-.019-.62-.09-.91-.198-1.45-.585-2.15-2.23-1.56-3.655L9.53 4.432a2.73 2.73 0 0 1 1.099-1.08 2.85 2.85 0 0 1 3.85 1.09Zm-1.61 8.314c0 .476-.39.873-.87.873a.885.885 0 0 1-.88-.873V9.953c0-.477.4-.862.88-.862s.87.385.87.862v2.803Zm-.87 4.262a.884.884 0 0 1-.88-.872c0-.477.4-.873.88-.873s.87.387.87.862c0 .485-.39.883-.87.883Z', clipRule: 'evenodd' }) }));
+export default SvgWarning;

package/dist/colors/index.d.ts

@@ -0,0 +1,4 @@
+import { IColor, TColors } from './type';
+export declare const colors: {
+    [key in TColors]: IColor;
+};

package/dist/colors/index.js

@@ -0,0 +1,93 @@
+const yellow = {
+    50: "#fffbeb",
+    100: "#fef3c0",
+    200: "#feeda2",
+    300: "#fee578",
+    400: "#fde05d",
+    500: "#fdd835",
+    600: "#e6c530",
+    700: "#b49926",
+    800: "#8b771d",
+    900: "#6a5b16"
+};
+const blue = {
+    50: "#e9f3fc",
+    100: "#b9daf7",
+    200: "#98c8f3",
+    300: "#68afee",
+    400: "#4ba0ea",
+    500: "#1e88e5",
+    600: "#1b7cd0",
+    700: "#1561a3",
+    800: "#114b7e",
+    900: "#0d3960"
+};
+const green = {
+    50: "#ecf6ed",
+    100: "#c5e2c6",
+    200: "#a9d3aa",
+    300: "#81bf84",
+    400: "#69b36c",
+    500: "#43a047",
+    600: "#3d9241",
+    700: "#307232",
+    800: "#255827",
+    900: "#1c431e"
+};
+const orange = {
+    50: "#fff4e6",
+    100: "#fedbb0",
+    200: "#fdca8a",
+    300: "#fcb254",
+    400: "#fca333",
+    500: "#fb8c00",
+    600: "#e47f00",
+    700: "#b26300",
+    800: "#8a4d00",
+    900: "#693b00"
+};
+const red = {
+    50: "#fcebeb",
+    100: "#f7c2c0",
+    200: "#f3a4a2",
+    300: "#ee7a78",
+    400: "#ea615d",
+    500: "#e53935",
+    600: "#d03430",
+    700: "#a32826",
+    800: "#7e1f1d",
+    900: "#601816"
+};
+const purple = {
+    50: "#f4e9f7",
+    100: "#dcbbe5",
+    200: "#cb9ad8",
+    300: "#b36cc6",
+    400: "#a550bb",
+    500: "#8e24aa",
+    600: "#81219b",
+    700: "#651a79",
+    800: "#4e145e",
+    900: "#3c0f47"
+};
+const grey = {
+    50: "#f1f1f1",
+    100: "#d4d4d4",
+    200: "#c0c0c0",
+    300: "#a3a3a3",
+    400: "#919191",
+    500: "#757575",
+    600: "#6a6a6a",
+    700: "#535353",
+    800: "#404040",
+    900: "#313131"
+};
+export const colors = {
+    yellow,
+    blue,
+    green,
+    orange,
+    red,
+    purple,
+    grey
+};

package/dist/colors/type.d.ts

@@ -0,0 +1,5 @@
+export type ColorScale = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+export type TColors = "yellow" | "blue" | "green" | "orange" | "red" | "purple" | "grey";
+export type IColor = {
+    [key in ColorScale]: string;
+};

package/dist/colors/type.js

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

package/dist/components/custom-auto-complete/CustomAutoComplete.d.ts

@@ -0,0 +1,27 @@
+import { FC, ReactNode } from 'react';
+import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { TextFieldProps } from '@mui/material/TextField';
+import { TextFieldVariants } from '@mui/material';
+import { TInputLabelMode } from '../form/type';
+export interface CustomAutocompleteProps extends Omit<AutocompleteProps<any, boolean, boolean, undefined>, 'renderInput'> {
+    label?: string | ReactNode;
+    width?: number | string;
+    renderInput?: (params: TextFieldProps) => ReactNode;
+    isLoading?: boolean;
+    variant?: TextFieldVariants;
+    showSelectedCount?: boolean;
+    selectedOptions?: any[];
+    helperText?: string;
+    inputMaxHeight?: string;
+    placeholder?: string;
+    inputLabelMode?: TInputLabelMode;
+    hideLabel?: boolean;
+    textFieldProps?: TextFieldProps;
+    validation?: {
+        isInvalid: boolean;
+        message: string;
+    };
+    onReachEnd?: () => void;
+}
+declare const CustomAutoComplete: FC<CustomAutocompleteProps>;
+export default CustomAutoComplete;

package/dist/components/custom-auto-complete/CustomAutoComplete.js

@@ -0,0 +1,61 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Autocomplete from '@mui/material/Autocomplete';
+import { styled } from '@mui/material/styles';
+import { Chip } from '@mui/material';
+import { ListBox } from './components/ListBox';
+import AutoCompleteInput from './components/AutoCompleteInput';
+const AutoCompletePaper = styled(Paper)(({ theme }) => ({
+    direction: 'ltr',
+    backgroundColor: theme.palette.background.paper,
+    '.MuiAutocomplete-option': {
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+        '&:last-child': {
+            borderBottom: 'none',
+        },
+    },
+}));
+const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, validation, selectedOptions, showSelectedCount, isLoading, inputMaxHeight, width, placeholder, variant, hideLabel = false, inputLabelMode, textFieldProps, onReachEnd, ...rest }) => {
+    const loading = isLoading;
+    return (_jsxs(Box, { sx: { width }, children: [_jsx(InputLabel, { sx: {
+                    fontSize: 12,
+                    color: disabled ? 'text.1' : 'text.primary',
+                }, children: inputLabelMode === 'static' && !hideLabel && (_jsx(Typography, { children: label })) }), _jsx(Autocomplete, { loading: loading, limitTags: 2, multiple: multiple, disabled: disabled, options: options || [], disableCloseOnSelect: multiple, disablePortal: Boolean(rest.limitTags), value: rest.value, 
+                // defaultValue={rest?.defaultValue}
+                id: 'virtualize-demo', disableListWrap: true, isOptionEqualToValue: (option, value) => {
+                    return option?.value === value?.value;
+                }, renderOption: (props, option, state) => ({
+                    props,
+                    option,
+                    index: state.index,
+                    multiple,
+                    selected: state.selected,
+                }), ListboxProps: { onReachEnd }, ListboxComponent: ListBox, renderGroup: (params) => params, noOptionsText: _jsx(Typography, { sx: { color: 'text.primary' }, children: "\u0646\u062A\u06CC\u062C\u0647 \u0627\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F" }), loadingText: _jsx(Typography, { sx: { color: 'text.primary' }, children: "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0632\u0627\u0631\u06CC..." }), sx: {
+                    padding: 0,
+                    width: '100%',
+                    ...(disabled && { opacity: 0.7, cursor: 'not-allowed' }),
+                }, renderTags: (tagValue, getTagProps) => {
+                    return tagValue.map((option, index) => {
+                        // Ensure that the option is an object with both label and value properties
+                        if (typeof option === 'object' && option.label && option.value) {
+                            return (_createElement(Chip, { ...getTagProps({ index }), key: index, label: option.label, sx: { height: 26 }, size: 'small', rounded: true }));
+                        }
+                        else {
+                            return null; // Handle invalid cases gracefully
+                        }
+                    });
+                }, getOptionDisabled: (option) => !!option?.disabled, renderInput: (params) => (_jsx(AutoCompleteInput, { params: params, helperText: helperText, variant: variant, placeholder: placeholder, label: label, isLoading: loading, inputLabelMode: inputLabelMode, inputMaxHeight: inputMaxHeight, textFieldProps: textFieldProps, validation: validation })), PaperComponent: (props) => (_jsx(AutoCompletePaper, { elevation: 1, ...props })), ...rest }), _jsx(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, children: multiple &&
+                    selectedOptions &&
+                    selectedOptions.length > 0 &&
+                    showSelectedCount && (_jsxs(Typography, { sx: { mt: 1 }, children: [selectedOptions?.length, " item", selectedOptions?.length > 1 && "'s", " selected"] })) })] }));
+};
+export default CustomAutoComplete;

package/dist/components/custom-auto-complete/components/AutoCompleteInput.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import { AutocompleteRenderInputParams, TextFieldVariants } from '@mui/material';
+import { TextFieldProps } from '@mui/material/TextField';
+import { TInputLabelMode } from '../../form/type';
+interface Props {
+    params: AutocompleteRenderInputParams;
+    variant?: TextFieldVariants;
+    placeholder?: string;
+    validation?: {
+        isInvalid: boolean;
+        message: string;
+    };
+    inputLabelMode?: TInputLabelMode;
+    label?: string | ReactNode;
+    helperText?: string;
+    isLoading?: boolean;
+    textFieldProps?: TextFieldProps;
+    inputMaxHeight?: string;
+}
+declare const AutoCompleteInput: FC<Props>;
+export default AutoCompleteInput;

package/dist/components/custom-auto-complete/components/AutoCompleteInput.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputAdornment, useTheme, } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import TextField from '@mui/material/TextField';
+import InfoCircle from "../../../assets/icons/InfoCircle";
+const AutoCompleteInput = ({ params, variant, validation, placeholder, label, helperText, isLoading, inputLabelMode, textFieldProps, inputMaxHeight }) => {
+    const theme = useTheme();
+    return (_jsx(TextField, { variant: variant, placeholder: placeholder, error: validation?.isInvalid, ...(inputLabelMode === 'relative' && { label: label }), ...params, helperText: validation?.message
+            ? validation?.message ?? helperText ?? ' '
+            : undefined, InputProps: {
+            ...params.InputProps,
+            ...(validation?.isInvalid && {
+                startAdornment: (_jsx(InputAdornment, { sx: { pl: 2 }, position: 'start', children: _jsx(InfoCircle, { primarycolor: theme.palette.error.main }) })),
+            }),
+            endAdornment: (_jsxs(InputAdornment, { position: 'end', children: [isLoading && _jsx(CircularProgress, { color: 'inherit', size: 20 }), params.InputProps.endAdornment] })),
+        }, ...textFieldProps, sx: {
+            minWidth: 0,
+            height: '100%',
+            overflow: 'auto',
+            '& .MuiFilledInput-root': {
+                ...(inputLabelMode === 'relative' && {
+                    alignItems: 'flex-end',
+                }),
+            },
+            maxHeight: inputMaxHeight ?? 'unset',
+            ...textFieldProps?.sx,
+        } }));
+};
+export default AutoCompleteInput;

package/dist/components/custom-auto-complete/components/ListBox.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const LISTBOX_PADDING = 8;
+export declare const ListBox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    onReachEnd?: (() => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/custom-auto-complete/components/ListBox.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Adapter for react-window
+import { useTheme } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import * as React from 'react';
+import { VariableSizeList } from 'react-window';
+import { ListRow } from './ListRow';
+import debounce from "../../../methods/debounce";
+export const LISTBOX_PADDING = 8; // px
+export const ListBox = React.forwardRef(function ListBox(props, ref) {
+    const { children, onReachEnd, ...other } = props;
+    const itemData = [];
+    children.forEach((item) => {
+        itemData.push(item);
+        itemData.push(...(item.children || []));
+    });
+    const theme = useTheme();
+    const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
+        noSsr: true,
+    });
+    const itemCount = itemData.length;
+    const itemSize = smUp ? 36 : 48;
+    const getHeight = () => {
+        if (itemCount > 8) {
+            return 8 * itemSize;
+        }
+        return itemData.map(() => itemSize).reduce((a, b) => a + b, 0);
+    };
+    const OuterElementContext = React.createContext({});
+    const OuterElementType = React.forwardRef((props, ref) => {
+        const outerProps = React.useContext(OuterElementContext);
+        return _jsx("div", { ref: ref, ...props, ...outerProps });
+    });
+    function useResetCache(data) {
+        const ref = React.useRef(null);
+        React.useEffect(() => {
+            if (ref.current != null) {
+                ref.current.resetAfterIndex(0, true);
+            }
+        }, [data]);
+        return ref;
+    }
+    const gridRef = useResetCache(itemCount);
+    const handleReachEnd = () => {
+        if (onReachEnd) {
+            onReachEnd();
+        }
+    };
+    const debouncedReachEnd = debounce(handleReachEnd, 100);
+    const handleScroll = ({ scrollDirection, scrollOffset, scrollUpdateWasRequested, }) => {
+        if (!scrollUpdateWasRequested &&
+            scrollDirection === 'forward' &&
+            gridRef?.current) {
+            const listHeight = +gridRef.current.props.height;
+            const totalHeight = gridRef.current.props?.itemSize(1) * itemCount;
+            if (scrollOffset + listHeight >= totalHeight) {
+                debouncedReachEnd();
+            }
+        }
+    };
+    return (_jsx("div", { ref: ref, children: _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: '100%', ref: gridRef, outerElementType: OuterElementType, innerElementType: 'ul', itemSize: () => itemSize, overscanCount: 5, itemCount: itemCount, style: { direction: 'inherit' }, onScroll: handleScroll, children: ListRow }) }) }));
+});

package/dist/components/custom-auto-complete/components/ListRow.d.ts

@@ -0,0 +1,2 @@
+import { ListChildComponentProps } from 'react-window';
+export declare function ListRow(props: ListChildComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom-auto-complete/components/ListRow.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import Typography from '@mui/material/Typography';
+import { LISTBOX_PADDING } from './ListBox';
+import { Checkbox } from '@mui/material';
+export function ListRow(props) {
+    const { data, index, style } = props;
+    const dataSet = data[index];
+    const inlineStyle = {
+        ...style,
+        top: style.top + LISTBOX_PADDING,
+    };
+    const { props: optionProps, option, multiple, selected } = dataSet || {};
+    return (_createElement("li", { ...optionProps, key: option.value, style: inlineStyle },
+        multiple && _jsx(Checkbox, { checked: selected, sx: { opacity: 'inherit' } }),
+        _jsx(Typography, { children: option?.label }))
+    // <Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
+    //   {option?.label}
+    // </Typography>
+    );
+}

package/dist/components/custom-date-picker/CustomComponent.d.ts

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { TextFieldVariants } from "@mui/material";
+import { BaseTextFieldProps } from "@mui/material/TextField/TextField";
+import { TInputLabelMode } from "../form/type";
+interface Props extends BaseTextFieldProps {
+    openCalendar: any;
+    value?: any;
+    handleValueChange?: () => void;
+    disabled?: boolean;
+    error?: any;
+    readonly?: boolean;
+    variant?: TextFieldVariants;
+    inputLabelMode: TInputLabelMode;
+    withoutHelperText?: boolean;
+}
+declare const CustomComponent: FC<Props>;
+export default CustomComponent;

package/dist/components/custom-date-picker/CustomComponent.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputAdornment, TextField } from "@mui/material";
+import SvgCalendar from "../../assets/icons/Calendar";
+const CustomComponent = ({ openCalendar, value, handleValueChange, disabled, error, readonly, variant, lang, placeholder, inputLabelMode, label, withoutHelperText, ...rest }) => {
+    const { sx, helperText, ...props } = rest;
+    return (_jsx(TextField, { placeholder: placeholder ?? lang === "fa" ? "انتخاب کنید" : "Pick a date", error: Boolean(error), ...(inputLabelMode === "static" && { hiddenLabel: true }), ...(inputLabelMode === "relative" && { label: label }), fullWidth: true, variant: variant, sx: {
+            borderRadius: "8px",
+            pointerEvents: readonly ? "none" : "unset",
+            "& .MuiOutlinedInput-input ,& .MuiOutlinedInput-root": {
+                borderRadius: "8px",
+            },
+            "& .MuiFormHelperText-root": {
+                position: "absolute",
+                top: 55,
+                left: 0,
+            },
+            ...sx,
+        }, InputProps: {
+            endAdornment: (_jsx(InputAdornment, { position: "end", sx: {
+                    stroke: (theme) => readonly
+                        ? `${theme.palette.text.disabled} !important`
+                        : "text.primary",
+                }, children: _jsx(SvgCalendar, { primarycolor: "inherit" }) })),
+        }, disabled: disabled, value: value, onFocus: openCalendar, onClick: openCalendar, onChange: handleValueChange, helperText: withoutHelperText ? undefined : error?.message ?? helperText ?? " ", ...props }));
+};
+export default CustomComponent;

package/dist/components/custom-date-picker/CustomDatePicker.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { CalendarProps } from "react-multi-date-picker";
+import { BaseTextFieldProps } from "@mui/material/TextField/TextField";
+import { TInputLabelMode } from "../form/type";
+export interface ICustomDatePickerProps extends CalendarProps {
+    error: any;
+    textFieldProps?: BaseTextFieldProps;
+    inputLabelMode: TInputLabelMode;
+    label: string;
+    withoutHelperText?: boolean;
+}
+declare const CustomDatePicker: FC<ICustomDatePickerProps>;
+export default CustomDatePicker;

package/dist/components/custom-date-picker/CustomDatePicker.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import DatePicker from "react-multi-date-picker";
+import CustomComponent from "./CustomComponent";
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+const CustomDatePicker = ({ onChange, value, disabled, error, readOnly, textFieldProps, label, inputLabelMode, withoutHelperText, ...rest }) => {
+    const handleChange = (selectedDates) => {
+        if (onChange && selectedDates) {
+            const convertDate = new Date(selectedDates.toDate());
+            onChange(convertDate);
+        }
+    };
+    // let lang: string = document.documentElement.lang;
+    let lang = 'fa';
+    // const { palette } = useTheme();
+    const [portalTarget, setPortalTaget] = useState();
+    // useEffect(() => {
+    //   setColors(palette);
+    //   lang = document.documentElement.lang;
+    // }, [palette.mode, document.documentElement.lang]);
+    useEffect(() => {
+        const portalDiv = document.createElement("div");
+        portalDiv.id = "myPortalDiv";
+        portalDiv.style.zIndex = "1500";
+        portalDiv.style.position = "relative";
+        document.body.appendChild(portalDiv);
+        setPortalTaget(portalDiv);
+        return () => {
+            document.body.removeChild(portalDiv);
+        };
+    }, []);
+    const defaultWeekDays = ["ش", "ی", "د", "س", "چ", "پ", "ج"];
+    return (_jsx(DatePicker, { className: "custom-calender", value: value ? new Date(value) : null, portal: true, portalTarget: portalTarget, hideOnScroll: true, onChange: handleChange, ...(lang === "fa" && {
+            weekDays: defaultWeekDays,
+            calendar: persian,
+            locale: persian_fa,
+        }), calendarPosition: "bottom-left", editable: false, disabled: disabled, containerStyle: { width: "100%" }, ...rest, render: _jsx(CustomComponent, { lang: lang, error: error, disabled: disabled, readonly: readOnly, label: label, inputLabelMode: inputLabelMode, openCalendar: undefined, value: value, handleValueChange: undefined, withoutHelperText: withoutHelperText, ...textFieldProps }) }));
+};
+export default CustomDatePicker;

package/dist/components/custom-numeric-input/CustomNumericInput.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface ICustomNumericInputProps extends Omit<TextFieldProps, "onChange" | "value"> {
+    onChange?: (value: string | number) => void;
+    value?: string | number;
+    currencyIcon?: ReactNode;
+}
+declare const CustomNumericInput: FC<ICustomNumericInputProps>;
+export default CustomNumericInput;