mui-design-system 0.0.8 → 0.0.11

package/dist/components/{form/checkbox-list → checkbox-list}/CheckboxList.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { CheckboxProps, StackProps } from '@mui/material';
 import { FormControlLabelProps } from '@mui/material/FormControlLabel';
-import { IFormOption } from '../type';
+import { IFormOption } from '../input-list/type';
 export interface ICheckboxValue {
     label: string;
     value: string | number;
@@ -9,8 +9,10 @@ export interface ICheckboxValue {
 export interface CheckboxListProps {
     options: IFormOption[];
     value?: ICheckboxValue[];
+    defaultValue?: ICheckboxValue[];
     onChange: (values: ICheckboxValue[]) => void;
     multiple?: boolean;
+    readonly?: boolean;
     stackProps?: StackProps;
     checkboxProps?: CheckboxProps;
     formControlLabelProps?: Omit<FormControlLabelProps, 'label' | 'control'>;

package/dist/components/{form/checkbox-list → checkbox-list}/CheckboxList.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormControlLabel, Stack, } from '@mui/material';
 import Checkbox from '@mui/material/Checkbox';
-const CheckboxList = ({ options = [], value = [], onChange, multiple, checkboxProps, stackProps, formControlLabelProps, }) => {
-    // console.log('values', values)
+const CheckboxList = ({ options = [], value = [], onChange, multiple, readonly, checkboxProps, stackProps, formControlLabelProps, }) => {
     const handleChange = (event, changedValue) => {
         const newValues = [...value];
         if (multiple) {
@@ -25,6 +24,8 @@ const CheckboxList = ({ options = [], value = [], onChange, multiple, checkboxPr
             }
         }
     };
-    return (_jsx(Stack, { ...stackProps, children: options.map((option) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { ...checkboxProps, checked: value?.findIndex((v) => v.value === option.value) > -1, onChange: (e) => handleChange(e, option) }), label: option.label, slotProps: { typography: option?.labelProp }, ...formControlLabelProps }, option.value))) }));
+    return (_jsx(Stack, { ...stackProps, children: options.map((option) => (_jsx(FormControlLabel, { "aria-readonly": readonly, ...(readonly && {
+                sx: { pointerEvents: 'none', userSelect: 'none' },
+            }), control: _jsx(Checkbox, { ...checkboxProps, readOnly: readonly, checked: value?.findIndex((v) => v?.value === option?.value) > -1, onChange: (e) => handleChange(e, option) }), label: option.label, slotProps: { typography: option?.labelProp }, ...formControlLabelProps }, option.value))) }));
 };
 export default CheckboxList;

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

@@ -2,7 +2,7 @@ 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';
+import { TInputLabelMode } from '../input-list/type';
 export interface CustomAutocompleteProps extends Omit<AutocompleteProps<any, boolean, boolean, undefined>, 'renderInput'> {
     label?: string | ReactNode;
     width?: number | string;

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

@@ -6,7 +6,7 @@ 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 CustomChip from '../custom-chip/CustomChip';
 import { ListBox } from './components/ListBox';
 import AutoCompleteInput from './components/AutoCompleteInput';
 const AutoCompletePaper = styled(Paper)(({ theme }) => ({
@@ -25,7 +25,7 @@ const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, va
     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, 
+                }, children: inputLabelMode === 'static' && !hideLabel && (_jsx(Typography, { variant: 'caption2', 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;
@@ -35,7 +35,7 @@ const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, va
                     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: {
+                }), ListboxProps: { onReachEnd }, ListboxComponent: ListBox, renderGroup: (params) => params, noOptionsText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: "\u0646\u062A\u06CC\u062C\u0647 \u0627\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F" }), loadingText: _jsx(Typography, { variant: 'caption2', 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' }),
@@ -43,7 +43,21 @@ const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, va
                     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 }));
+                            return (_createElement(CustomChip, { ...getTagProps({ index }), key: index, label: option.label, labelProps: { sx: {} }, chipProps: {
+                                    sx: {
+                                        height: 24,
+                                        px: 1,
+                                        '& .MuiChip-deleteIcon': { width: 12 },
+                                        '& .MuiChip-label': {
+                                            px: 0,
+                                            '& .MuiTypography-root': { fontSize: 10 },
+                                        },
+                                        ...rest.ChipProps?.sx,
+                                    },
+                                    rounded: true,
+                                    size: 'small',
+                                    ...rest.ChipProps,
+                                } }));
                         }
                         else {
                             return null; // Handle invalid cases gracefully
@@ -55,7 +69,7 @@ const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, va
                     justifyContent: 'space-between',
                 }, children: multiple &&
                     selectedOptions &&
-                    selectedOptions.length > 0 &&
-                    showSelectedCount && (_jsxs(Typography, { sx: { mt: 1 }, children: [selectedOptions?.length, " item", selectedOptions?.length > 1 && "'s", " selected"] })) })] }));
+                    selectedOptions?.length > 0 &&
+                    showSelectedCount && (_jsxs(Typography, { variant: 'caption3', sx: { color: 'text.4', mt: 1 }, children: [selectedOptions?.length, " item", selectedOptions?.length > 1 && "'s", " selected"] })) })] }));
 };
 export default CustomAutoComplete;

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

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { AutocompleteRenderInputParams, TextFieldVariants } from '@mui/material';
 import { TextFieldProps } from '@mui/material/TextField';
-import { TInputLabelMode } from '../../form/type';
+import { TInputLabelMode } from '../../input-list/type';
 interface Props {
     params: AutocompleteRenderInputParams;
     variant?: TextFieldVariants;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InputAdornment, useTheme, } from '@mui/material';
+import InfoCircle from '../../../icons/InfoCircle';
 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

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

@@ -5,7 +5,7 @@ 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";
+import { debounce } from "lodash";
 export const LISTBOX_PADDING = 8; // px
 export const ListBox = React.forwardRef(function ListBox(props, ref) {
     const { children, onReachEnd, ...other } = props;
@@ -46,7 +46,7 @@ export const ListBox = React.forwardRef(function ListBox(props, ref) {
             onReachEnd();
         }
     };
-    const debouncedReachEnd = debounce(handleReachEnd, 100);
+    const debouncedReachEnd = debounce(handleReachEnd, 10);
     const handleScroll = ({ scrollDirection, scrollOffset, scrollUpdateWasRequested, }) => {
         if (!scrollUpdateWasRequested &&
             scrollDirection === 'forward' &&
@@ -58,5 +58,5 @@ export const ListBox = React.forwardRef(function ListBox(props, ref) {
             }
         }
     };
-    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 }) }) }));
+    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: (index) => itemSize, overscanCount: 5, itemCount: itemCount, style: { direction: 'inherit' }, onScroll: handleScroll, children: ListRow }) }) }));
 });

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

@@ -13,7 +13,7 @@ export function ListRow(props) {
     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 }))
+        _jsx(Typography, { variant: 'caption3', children: option?.label }))
     // <Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
     //   {option?.label}
     // </Typography>

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

@@ -0,0 +1,28 @@
+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 '../input-list/type';
+export interface CustomAutocompleteAdvancedProps extends Omit<AutocompleteProps<any, boolean, boolean, boolean>, '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;
+    onSearch?: (e: any) => void;
+}
+declare const CustomAutoCompleteAdvanced: FC<CustomAutocompleteAdvancedProps>;
+export default CustomAutoCompleteAdvanced;

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

@@ -0,0 +1,92 @@
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+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 { ListBox } from './components/ListBox';
+import RenderInput from './components/RenderInput';
+import RenderTags from './components/RenderTags';
+import SvgAdd from '../../icons/Add';
+const AutoCompletePaper = styled(Paper)(({ theme }) => ({
+    direction: 'ltr',
+    boxShadow: '0px 0px 10px rgba(94, 129, 233, 0.2)',
+    marginTop: 8,
+    backgroundColor: theme.palette.background.paper,
+    '.MuiAutocomplete-option': {
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+        paddingLeft: '0 !important',
+        '&:last-child': {
+            borderBottom: 'none',
+        },
+    },
+}));
+const LimitedTagsCount = (more, size) => {
+    return (_jsxs(Typography, { variant: 'caption2.medium', sx: {
+            position: 'absolute',
+            right: 64,
+            top: size === 'medium' ? 12 : 8,
+            backgroundColor: 'background.default',
+            borderRadius: '100%',
+            minWidth: 24,
+            textAlign: 'center',
+        }, children: [String(more), "+"] }));
+};
+const CustomAutoCompleteAdvanced = ({ label, helperText, options, multiple, disabled, limitTags, validation, selectedOptions, showSelectedCount, isLoading, inputMaxHeight, placeholder, variant, hideLabel = false, inputLabelMode = 'static', textFieldProps, onReachEnd, onSearch, sx, ...rest }) => {
+    //Keeping the value controlled by state helps to track free solo stage for search
+    const [value, setValue] = useState('');
+    const onChangeValue = (newValue) => {
+        setValue(newValue || '');
+    };
+    //_______________________________________________________________________________
+    //Cache result options for search and integration across the pages
+    const cachedOptionsRef = useRef([]);
+    const cachedOptions = useMemo(() => {
+        options.forEach((option) => {
+            if (!cachedOptionsRef.current.find((opt) => opt.value === option?.value)
+                ?.value) {
+                cachedOptionsRef.current.push(option);
+            }
+        });
+        return cachedOptionsRef.current;
+    }, [options.length]);
+    //_______________________________________________________________________________
+    const lang = document.documentElement.lang;
+    return (_jsxs(_Fragment, { children: [_jsx(InputLabel, { sx: {
+                    fontSize: 12,
+                    color: disabled ? 'text.1' : 'text.primary',
+                }, children: inputLabelMode === 'static' && !hideLabel && (_jsx(Typography, { variant: 'caption2', children: label })) }), _jsx(Autocomplete, { loading: isLoading, limitTags: limitTags, multiple: multiple, id: 'ideep-auto-complete', options: cachedOptions || [], disabled: disabled, "aria-disabled": disabled, disableCloseOnSelect: multiple, value: rest.value, disableListWrap: true, isOptionEqualToValue: (option, value) => {
+                    return option?.value === value?.value;
+                }, freeSolo: Boolean(onSearch) && Boolean(value), renderOption: (props, option, state) => ({
+                    props,
+                    option,
+                    index: state.index,
+                    multiple,
+                    selected: state.selected,
+                }), ListboxProps: { onReachEnd, isLoading }, ListboxComponent: ListBox, noOptionsText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: lang.includes('fa') ? 'نتیجه ای یافت نشد' : 'No results found.' }), loadingText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: lang.includes('fa') ? 'در حال بارگزاری...' : 'Loading...' }), renderTags: (value, getTagProps) => RenderTags(value, getTagProps, variant !== 'standard' ? variant : 'filled', rest.size), getOptionDisabled: (option) => !!option?.disabled, renderInput: (params) => (_createElement(RenderInput, { params: params, ...(inputLabelMode === 'relative' && {
+                        label,
+                    }), loading: isLoading, key: 'render-input-' + label, helperText: helperText, variant: variant, placeholder: (selectedOptions?.length || 0) < 0 ? placeholder : undefined, inputMaxHeight: inputMaxHeight, disabled: disabled, label: label, textFieldProps: textFieldProps, validation: validation, handleSearch: onSearch, handleChange: onChangeValue, value: value })), clearIcon: _jsx(SvgAdd, { style: { transform: 'rotate(45deg)' }, primarycolor: 'inherit' }), getLimitTagsText: (more) => LimitedTagsCount(more, rest.size), sx: [
+                    ...(Array.isArray(sx) ? sx : [sx]),
+                    {
+                        padding: 0,
+                        width: '100%',
+                        '& .MuiAutocomplete-popupIndicator': {
+                            width: '100%',
+                            maxWidth: 27,
+                        },
+                        ...(disabled && { cursor: 'not-allowed' }),
+                    },
+                ], PaperComponent: (props) => (_jsx(AutoCompletePaper, { elevation: 0, ...props })), ...rest }), _jsx(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, children: multiple &&
+                    selectedOptions &&
+                    selectedOptions?.length > 0 &&
+                    showSelectedCount && (_jsxs(Typography, { variant: 'caption3', sx: { mt: 1 }, children: [selectedOptions?.length, " ", lang.includes('fa') ? 'گزینه' : 'item', selectedOptions?.length > 1 && !lang.includes('fa') && 's', ' ', lang.includes('fa') ? 'انتخاب شده' : ' selected'] })) })] }));
+};
+export default CustomAutoCompleteAdvanced;

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

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

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Adapter for react-window
+import { LinearProgress, 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 { useRef } from 'react';
+import debounce from '../../../methods/debounce';
+export const LISTBOX_PADDING = 8; // px
+export const ListBox = React.forwardRef(function ListBox(props, ref) {
+    const { children, onReachEnd, isLoading, ...other } = props;
+    const itemData = [];
+    children.forEach((item) => {
+        itemData.push(item);
+        itemData.push(...(item.children || []));
+    });
+    const prevItemCount = useRef(undefined);
+    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 });
+    });
+    OuterElementType.displayName = 'OuterElementType';
+    function useResetCache(data) {
+        const ref = React.useRef(null);
+        React.useEffect(() => {
+            if (ref.current != null) {
+                ref.current.resetAfterIndex(itemCount, true);
+                gridRef.current?.scrollToItem(prevItemCount.current || 0, 'start');
+                prevItemCount.current = itemCount;
+            }
+        }, [data]);
+        return ref;
+    }
+    const gridRef = useResetCache(itemCount);
+    const handleReachEnd = () => {
+        if (onReachEnd) {
+            onReachEnd();
+        }
+    };
+    const debouncedReachEnd = debounce(handleReachEnd, 10);
+    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 (_jsxs("div", { ref: ref, style: { position: 'relative', width: '100%', height: '100%' }, children: [isLoading && (_jsx(_Fragment, { children: _jsx(LinearProgress, { sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                    } }) })), _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: '100%', ref: gridRef, outerElementType: OuterElementType, innerElementType: 'ul', itemSize: (index) => itemSize, overscanCount: 5, itemCount: itemCount, style: {
+                        direction: 'inherit',
+                        transition: '0.3s ease all',
+                        filter: isLoading ? 'brightness(92%) blur(2px)' : 'none',
+                    }, onScroll: handleScroll, initialScrollOffset: (itemCount - itemSize) * itemSize, children: ListRow }) })] }));
+});

package/dist/components/custom-auto-complete-advanced/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-advanced/components/ListRow.js

@@ -0,0 +1,17 @@
+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, { variant: 'caption3', children: option?.label })));
+}

package/dist/components/custom-auto-complete-advanced/components/RenderInput.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { AutocompleteRenderInputParams, TextFieldVariants } from '@mui/material';
+import { TextFieldProps } from '@mui/material';
+import { TInputLabelMode } from '../../input-list/type';
+interface IRenderInputProps extends Omit<TextFieldProps, 'label'> {
+    params: AutocompleteRenderInputParams;
+    label?: ReactNode;
+    loading: boolean | undefined;
+    inputMaxHeight?: string | number;
+    variant?: TextFieldVariants;
+    placeholder?: string;
+    validation?: {
+        isInvalid: boolean;
+        message: string;
+    };
+    inputLabelMode?: TInputLabelMode;
+    helperText?: string;
+    textFieldProps?: TextFieldProps;
+    handleSearch?: (e: any) => void;
+    handleChange?: (e: string) => void;
+}
+declare const RenderInput: FC<IRenderInputProps>;
+export default RenderInput;

package/dist/components/custom-auto-complete-advanced/components/RenderInput.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { CircularProgress, InputAdornment, TextField, } from '@mui/material';
+import debounce from '../../../methods/debounce';
+import InfoCircle from '../../../icons/InfoCircle';
+const RenderInput = (props) => {
+    const { params, inputMaxHeight, sx, label, loading, helperText, variant, placeholder, disabled, validation, inputLabelMode, textFieldProps, handleSearch, handleChange, } = props;
+    const debouncedSearch = useCallback(debounce((e) => {
+        if (handleSearch) {
+            handleSearch(e);
+        }
+    }, 500), [handleSearch]);
+    return (_jsx(TextField, { ...params, variant: variant, ...(inputLabelMode === 'relative' && { label: label }), helperText: validation?.message
+            ? validation?.message ?? helperText ?? ' '
+            : undefined, error: validation?.isInvalid, placeholder: placeholder, disabled: disabled, InputProps: {
+            ...params.InputProps,
+            ...(validation?.isInvalid && {
+                startAdornment: (_jsx(InputAdornment, { sx: { pl: 2, stroke: ({ palette }) => palette.error.main }, position: 'start', children: _jsx(InfoCircle, { primarycolor: 'inherit' }) })),
+            }),
+            endAdornment: (_jsxs(InputAdornment, { position: 'end', children: [loading ? _jsx(CircularProgress, { color: 'inherit', size: 20 }) : null, params.InputProps.endAdornment] })),
+        }, ...textFieldProps, onChange: (e) => {
+            debouncedSearch(e.target.value);
+            handleChange?.(e.target.value);
+        }, sx: [
+            ...(Array.isArray(sx) ? sx : [sx]),
+            {
+                ...(inputMaxHeight && {
+                    minHeight: 0,
+                    maxHeight: inputMaxHeight ?? 'unset',
+                }),
+                minWidth: 0,
+                height: '100%',
+                overflow: 'auto',
+                '& .MuiFilledInput-root': {
+                    ...(inputLabelMode === 'relative' && {
+                        alignItems: 'flex-end',
+                    }),
+                },
+                '.MuiAutocomplete-input': {
+                    padding: '0',
+                },
+                '.MuiOutlinedInput-root': {
+                    paddingY: '4px !important',
+                },
+                '.MuiAutocomplete-popupIndicator': {
+                    transition: '0.3s ease all',
+                },
+            },
+        ] }));
+};
+export default RenderInput;

package/dist/components/custom-auto-complete-advanced/components/RenderTags.d.ts

@@ -0,0 +1,9 @@
+import { TextFieldProps, AutocompleteRenderGetTagProps } from '@mui/material';
+interface IRenderTagsProps extends Omit<TextFieldProps, 'label'> {
+    getTagProps: AutocompleteRenderGetTagProps;
+    value: any[];
+    variant: 'filled' | 'outlined';
+    size: 'small' | 'medium';
+}
+declare const RenderTags: (value: IRenderTagsProps['value'], getTagProps: IRenderTagsProps['getTagProps'], variant?: IRenderTagsProps['variant'], size?: IRenderTagsProps['size']) => import("react/jsx-runtime").JSX.Element[];
+export default RenderTags;

package/dist/components/custom-auto-complete-advanced/components/RenderTags.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, } from '@mui/material';
+import SvgAdd from '../../../icons/Add';
+const RenderTags = (value, getTagProps, variant = 'filled', size = 'medium') => value.map((option, index) => {
+    const { key, ...tagProps } = getTagProps({ index });
+    return (_jsx(Chip, { variant: variant, label: option.label, size: size, ...tagProps, deleteIcon: _jsx(SvgAdd, { style: { transform: 'rotate(45deg)' }, primarycolor: 'inherit' }), sx: {
+            border: 'none',
+            backgroundColor: 'primary.3',
+            ':hover': {
+                backgroundColor: 'primary.4',
+                cursor: 'default',
+            },
+            py: '0 !important',
+            maxHeight: size === 'small' ? 28 : 32,
+            color: 'text.primary',
+            stroke: ({ palette }) => palette.text.primary,
+            borderRadius: '999px',
+            fontSize: ({ typography }) => typography['caption3.medium'].fontSize,
+            fontWeight: ({ typography }) => typography['caption3.medium'].fontWeight,
+        } }, key));
+});
+export default RenderTags;

package/dist/components/custom-breadcrumbs/CustomBreadcrumbs.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BreadcrumbsProps, LinkOwnProps } from '@mui/material';
+export interface ICustomBreadcrumbsProps {
+    separator?: ReactNode | string;
+    collapse?: boolean;
+    items: {
+        title: ReactNode | string;
+        href: string;
+    }[];
+    itemProps?: {
+        linkProps?: LinkOwnProps;
+        textProps?: HTMLAttributes<HTMLDivElement>;
+    };
+    breadCrumbProps?: BreadcrumbsProps;
+}
+declare const CustomBreadcrumbs: ({ separator, collapse, items, itemProps, breadCrumbProps, }: ICustomBreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomBreadcrumbs;

package/dist/components/custom-breadcrumbs/CustomBreadcrumbs.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumbs, Link, } from '@mui/material';
+const CustomBreadcrumbs = ({ separator, collapse, items, itemProps, breadCrumbProps, }) => {
+    return (_jsx(Breadcrumbs, { maxItems: collapse ? 2 : undefined, separator: separator, ...breadCrumbProps, children: items.map((item, index) => (_jsx(Link, { underline: 'none', color: 'inherit', href: item.href, ...itemProps?.linkProps, children: _jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    fontSize: 14,
+                    fontWeight: 400,
+                }, ...itemProps?.textProps, children: item.title }) }, index))) }));
+};
+export default CustomBreadcrumbs;

package/dist/components/custom-card/CustomHorizontalCard.d.ts

@@ -0,0 +1,3 @@
+import { CustomCardProps } from "./types";
+declare function CustomHorizontalCard({ Image, Title, Subtitle, Date, Actions, ...restProps }: CustomCardProps): import("react/jsx-runtime").JSX.Element;
+export default CustomHorizontalCard;

package/dist/components/custom-card/CustomHorizontalCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material";
+function CustomHorizontalCard({ Image, Title, Subtitle, Date, Actions, ...restProps }) {
+    const theme = useTheme();
+    const { sx, ...props } = restProps;
+    return (_jsx(Box, { sx: { width: 350, border: `1px solid ${theme.palette.mode === "light" ? theme.palette.text[7] : theme.palette.grey[6]}`, borderRadius: 2, backgroundColor: theme.palette.background.default, overflow: 'hidden', ...restProps.sx }, ...props, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Box, { children: Image }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', width: '100%', padding: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [Title, Subtitle] }), Date] }), Actions] })] }) }));
+}
+export default CustomHorizontalCard;

package/dist/components/custom-card/CustomVerticalCard.d.ts

@@ -0,0 +1,3 @@
+import { CustomCardProps } from "./types";
+declare function CustomVerticalCard({ Image, Title, Subtitle, Date, Description, Chip, Actions, ...restProps }: CustomCardProps): import("react/jsx-runtime").JSX.Element;
+export default CustomVerticalCard;

package/dist/components/custom-card/CustomVerticalCard.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+function CustomVerticalCard({ Image, Title, Subtitle, Date, Description, Chip, Actions, ...restProps }) {
+    const theme = useTheme();
+    const { sx, ...props } = restProps;
+    return (_jsxs(Box, { sx: { width: 350, border: `1px solid ${theme.palette.mode === "light" ? theme.palette.text[7] : theme.palette.grey[6]}`, borderRadius: 2, backgroundColor: theme.palette.background.default, overflow: 'hidden', p: 2, ...restProps.sx }, ...props, children: [Image, _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [Title, Chip] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [Subtitle, Date] }), Description, Actions] }));
+}
+export default CustomVerticalCard;

package/dist/components/custom-chip/CustomChip.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+import { ChipProps } from "@mui/material";
+import { TypographyProps } from "@mui/material/Typography";
+export interface ICustomChipProps {
+    label: ReactNode;
+    endIcon?: ReactNode;
+    startIcon?: ReactNode;
+    labelProps?: TypographyProps;
+    chipProps?: ChipProps;
+}
+declare const CustomChip: FC<ICustomChipProps>;
+export default CustomChip;

package/dist/components/custom-chip/CustomChip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+const CustomChip = ({ label, endIcon, startIcon, labelProps, chipProps }) => {
+    const isLarge = chipProps?.size === 'large';
+    const { sx, ...props } = chipProps || {};
+    return (_jsx(Chip, { sx: { ...(chipProps?.rounded && { borderRadius: '9999px' }), ...sx }, color: props.color, label: _jsxs(Box, { display: "flex", gap: 2, alignItems: 'center', children: [_jsx(Box, { display: 'flex', id: "custom-chip__start-icon", children: startIcon }), _jsx(Typography, { id: "custom-chip__label", lineHeight: props.size === 'small' ? '24px' : 'normal', variant: isLarge ? 'caption2.medium' : 'caption3', color: "#ffffff", ...labelProps, children: label }), _jsx(Box, { display: 'flex', id: "custom-chip__start-icon", children: endIcon })] }), ...props }));
+};
+export default CustomChip;

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

@@ -1,7 +1,7 @@
-import { FC } from "react";
-import { TextFieldVariants } from "@mui/material";
-import { BaseTextFieldProps } from "@mui/material/TextField/TextField";
-import { TInputLabelMode } from "../form/type";
+import { FC } from 'react';
+import { TextFieldVariants } from '@mui/material';
+import { BaseTextFieldProps } from '@mui/material/TextField/TextField';
+import { TInputLabelMode } from '../input-list/type';
 interface Props extends BaseTextFieldProps {
     openCalendar: any;
     value?: any;