mui-design-system 0.0.39 → 0.0.40

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

@@ -3,7 +3,7 @@ import { InputAdornment, TextField } from '@mui/material';
 import SvgCalendar from '../../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: {
+    return (_jsx(TextField, { placeholder: 'انتخاب کنید', error: Boolean(error), ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), fullWidth: true, variant: variant, sx: {
             // ...(inputLabelMode === "static" && {
             //   ".MuiFilledInput-input": {
             //     py: "16px !important",
@@ -31,6 +31,6 @@ const CustomComponent = ({ openCalendar, value, handleValueChange, disabled, err
                         ? `${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 }));
+        }, 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.js

@@ -13,12 +13,10 @@ const CustomDatePicker = ({ onChange, value, disabled, error, readOnly, textFiel
             onChange(convertDate);
         }
     };
-    let lang = document.documentElement.lang;
     const { palette } = useTheme();
     const [portalTarget, setPortalTarget] = useState();
     useEffect(() => {
         setColors(palette);
-        lang = document.documentElement.lang;
     }, [palette.mode, document.documentElement.lang]);
     useEffect(() => {
         const portalDiv = document.createElement("div");
@@ -32,11 +30,7 @@ const CustomDatePicker = ({ onChange, value, disabled, error, readOnly, textFiel
         };
     }, []);
     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 }) }));
+    return (_jsx(DatePicker, { className: 'custom-calender', value: value ? new Date(value) : null, portal: true, portalTarget: portalTarget, hideOnScroll: true, onChange: handleChange, weekDays: defaultWeekDays, calendar: persian, locale: persian_fa, calendarPosition: 'bottom-left', editable: false, disabled: disabled, containerStyle: { width: '100%' }, ...rest, render: _jsx(CustomComponent, { lang: 'fa', error: error, disabled: disabled, readonly: readOnly, label: label, inputLabelMode: inputLabelMode, openCalendar: undefined, value: value, handleValueChange: undefined, withoutHelperText: withoutHelperText, ...textFieldProps }) }));
 };
 export default CustomDatePicker;
 const setColors = (colors) => {

package/dist/components/form/Form.d.ts

@@ -5,17 +5,17 @@ import { TypographyProps } from "@mui/material/Typography";
 import { TFormSchema, TInputLabelMode } from "./type";
 import { TextFieldProps } from "@mui/material/TextField";
 export interface FormProps {
+    itemProps?: any;
+    disabled?: boolean;
     schema: TFormSchema;
-    form: UseFormReturn<any, any, any>;
-    gridContainerProps?: GridProps;
     gridItemProps?: GridProps;
-    itemProps?: any;
-    labelsProps?: Partial<TypographyProps<"label", {}>> | undefined;
     hideRequiredStar?: boolean;
+    withoutHelperText?: boolean;
+    gridContainerProps?: GridProps;
     inputLabelMode?: TInputLabelMode;
+    form: UseFormReturn<any, any, any>;
     inputVariants?: TextFieldProps["variant"];
-    withoutHelperText?: boolean;
-    disabled?: boolean;
+    labelsProps?: Partial<TypographyProps<"label", {}>> | undefined;
 }
 declare const Form: FC<FormProps>;
 export default Form;

package/dist/components/form/Form.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from "react";
+//@3rd Party
+import { get } from "react-hook-form";
 //------------------------------------------------------------------------
 //@Mui
 import Box from "@mui/material/Box";
@@ -9,10 +11,10 @@ import Typography from "@mui/material/Typography";
 import UseFormInput from "./UseFormInput";
 import { deepMerge, result } from "../../methods/general";
 const Form = ({ schema, form, gridItemProps, gridContainerProps, labelsProps, itemProps, hideRequiredStar = false, inputLabelMode = "static", inputVariants = "outlined", withoutHelperText, disabled, }) => {
-    return (_jsx(Grid, { container: true, columnSpacing: 4, rowSpacing: 0, rowGap: 2, alignItems: "flex-start", ...gridContainerProps, children: schema?.map((inputProp) => (_jsxs(Grid, { item: true, xs: 4, width: "100%", height: "auto", position: "relative", ...deepMerge(gridItemProps, inputProp.gridItemProp), children: [inputLabelMode === "static" && inputProp.type !== "checkbox" && (_jsx(Box, { display: "flex", children: _jsx(Typography, { variant: "body-s-semibold", flexGrow: 1, width: 0, component: "label", display: "inline-block", mb: 2, htmlFor: inputProp.name, color: result(form?.formState?.errors, `${inputProp.name}`)
-                            ? "error"
-                            : "text.16", noWrap: true, title: !isValidElement(inputProp?.label)
-                            ? inputProp?.label?.toString() || ""
-                            : "", ...deepMerge(labelsProps, inputProp.labelProps), children: _jsxs(Stack, { direction: "row", children: [inputProp.label, inputProp.rules?.required && !hideRequiredStar && (_jsx(Typography, { component: "span", color: "error", fontSize: 12, children: "*" }))] }) }) })), _jsx(UseFormInput, { form: form, itemProps: itemProps, error: result(form?.formState?.errors, `${inputProp.name}`), inputLabelMode: inputLabelMode, inputVariants: inputVariants, withoutHelperText: withoutHelperText, disabled: disabled, ...inputProp })] }, inputProp.name))) }));
+    return (_jsx(Grid, { container: true, columnSpacing: 4, rowSpacing: 0, rowGap: 2, alignItems: 'flex-start', ...gridContainerProps, children: schema?.map((inputProp) => (_jsxs(Grid, { item: true, xs: 4, width: '100%', height: 'auto', position: 'relative', ...deepMerge(gridItemProps, inputProp.gridItemProp), children: [inputLabelMode === 'static' && inputProp.type !== 'checkbox' && (_jsx(Box, { display: 'flex', children: _jsx(Typography, { variant: 'body-s-semibold', flexGrow: 1, width: 0, component: 'label', display: 'inline-block', mb: 2, htmlFor: inputProp.name, color: result(form?.formState?.errors, `${inputProp.name}`)
+                            ? 'error'
+                            : 'text.16', noWrap: true, title: !isValidElement(inputProp?.label)
+                            ? inputProp?.label?.toString() || ''
+                            : '', ...deepMerge(labelsProps, inputProp.labelProps), children: _jsxs(Stack, { direction: 'row', children: [inputProp.label, inputProp.rules?.required && !hideRequiredStar && (_jsx(Typography, { component: 'span', color: 'error', fontSize: 12, children: "*" }))] }) }) })), _jsx(UseFormInput, { form: form, itemProps: itemProps, error: get(form?.formState?.errors, `${inputProp.name}`), inputLabelMode: inputLabelMode, inputVariants: inputVariants, withoutHelperText: withoutHelperText, disabled: disabled, ...inputProp })] }, inputProp.name))) }));
 };
 export default Form;

package/dist/mui/Select/MuiSelect.js

@@ -34,11 +34,7 @@ export const MuiSelect = {
                 pointerEvents: 'none',
                 backgroundColor: theme.palette.background[3],
             }),
-            '&.Mui-disabled': {
-                stroke: theme.palette.background['1'],
-                color: theme.palette.text.disabled,
-                backgroundColor: theme.palette.background['1'],
-            },
+            '&.Mui-disabled': {},
             '&.Mui-error': {
                 stroke: theme.palette.error[3],
             },

package/dist/mui/TextField/MuiOutlinedInput.js

@@ -1,64 +1,53 @@
 export const MuiOutlinedInput = {
     styleOverrides: {
         root: ({ ownerState, theme }) => ({
-            stroke: theme.palette.text.primary,
             borderRadius: theme.spacing(2),
             minWidth: 80,
-            ...theme.typography?.["body-s-medium"],
+            height: ownerState.size === 'small' ? 40 : ownerState.multiline ? 'auto' : 48,
+            ...theme.typography['body-s-medium'],
             lineHeight: '100%',
-            height: ownerState.size === 'small'
-                ? '40px'
-                : ownerState.multiline
-                    ? 'auto'
-                    : '48px',
+            paddingRight: 10,
+            // Input text
             '& .MuiOutlinedInput-input': {
                 display: 'flex',
                 alignItems: 'center',
-                color: `${theme.palette.text.primary} !important`,
+                color: theme.palette.text.primary + ' !important',
                 ...(ownerState.readOnly && {
                     pointerEvents: 'none',
-                    backgroundColor: 'shadow.2',
-                    color: 'text.disabled',
+                    color: theme.palette.text.disabled,
                 }),
             },
-            //Temporary Added
-            paddingRight: 10,
-            //Disable state
+            // Disabled state
             '&.Mui-disabled': {
                 pointerEvents: 'none',
+                backgroundColor: theme.palette.text[4],
                 '& .MuiInputAdornment-root': {
                     stroke: theme.palette.text[8],
                 },
-                backgroundColor: theme.palette.text[4],
             },
-            //Label that goes on the border of component
+            // Normal outline
             '& .MuiOutlinedInput-notchedOutline': {
                 transition: 'border-color 0.2s ease',
-                ...theme.typography?.["body-s-medium"],
-                ...(ownerState.disabled && {
-                    border: 'none',
-                }),
             },
-            //Main border color on hover
+            // ❗ FIX: Prevent hover border color change
             '&:hover .MuiOutlinedInput-notchedOutline': {
-                borderColor: theme.palette.text.primary,
+                borderColor: theme.palette.text[6],
             },
-            //Focused State
-            '&.Mui-focused ': {
-                '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette[ownerState.color ?? 'primary'].main,
-                    borderWidth: 1,
-                },
+            // Focused
+            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.palette[ownerState.color ?? 'primary'].main,
+                borderWidth: 1,
             },
-            //Error State
-            '&.Mui-error ': {
-                stroke: theme.palette.error[3],
+        }),
+        error: ({ theme }) => ({
+            // Error
+            '&.Mui-error': {
                 '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error['3'],
+                    borderColor: theme.palette.error.main,
                     borderWidth: 1,
                 },
                 '& .MuiInputAdornment-root': {
-                    stroke: theme.palette.error['2'],
+                    stroke: theme.palette.error.dark,
                 },
             },
         }),

package/dist/mui/menu/MuiMenuItem.js

@@ -8,7 +8,6 @@ export const MuiMenuItem = {
                 backgroundColor: theme.palette.primary[1]
             },
             color: theme.palette.text.primary,
-            ...theme.typography['body-2xs'],
         })
     },
 };

package/dist/mui/palette/dark/darkPalette.js

@@ -1,11 +1,11 @@
 export const darkPalette = {
     primary: {
         main: '#6950f3',
-        contrastText: "#fff"
+        contrastText: '#fff',
     },
     secondary: {
         main: '#0d1619',
-        contrastText: "#fff"
+        contrastText: '#fff',
     },
     divider: '#D4D4D4',
     background: {
@@ -32,50 +32,34 @@ export const darkPalette = {
         primary: '#FFFFFF',
         secondary: '#FDFDFD',
         disabled: '#F7F7F7',
-        "16": "rgb(255,255,255)",
-        "15": "rgb(238,238,238)",
-        "14": "rgb(221,221,221)",
-        "13": "rgb(204,204,204)",
-        "12": "rgb(187,187,187)",
-        "11": "rgb(170,170,170)",
-        "10": "rgb(153,153,153)",
-        "8": "rgb(119,119,119)",
-        "9": "rgb(136,136,136)",
-        "7": "rgb(102,102,102)",
-        "6": "rgb(85,85,85)",
-        "5": "rgb(68,68,68)",
-        "4": "rgb(51,51,51)",
-        "3": "rgb(34,34,34)",
-        "2": "rgb(17,17,17)",
-        "1": "#0d1619",
+        '16': 'rgb(255,255,255)',
+        '15': 'rgb(238,238,238)',
+        '14': 'rgb(221,221,221)',
+        '13': 'rgb(204,204,204)',
+        '12': 'rgb(187,187,187)',
+        '11': 'rgb(170,170,170)',
+        '10': 'rgb(153,153,153)',
+        '8': 'rgb(119,119,119)',
+        '9': 'rgb(136,136,136)',
+        '7': 'rgb(102,102,102)',
+        '6': 'rgb(85,85,85)',
+        '5': 'rgb(68,68,68)',
+        '4': 'rgb(51,51,51)',
+        '3': 'rgb(34,34,34)',
+        '2': 'rgb(17,17,17)',
+        '1': '#0d1619',
     },
     inherit: {
-        light: "inherit",
-        dark: "inherit",
-        contrastText: "inherit",
-        main: "#1A1A1A",
-        16: 'inherit',
-        15: 'inherit',
-        14: 'inherit',
-        13: 'inherit',
-        12: 'inherit',
-        11: 'inherit',
-        10: 'inherit',
-        9: 'inherit',
-        8: 'inherit',
-        7: 'inherit',
-        6: 'inherit',
-        5: 'inherit',
-        4: 'inherit',
-        3: 'inherit',
-        2: 'inherit',
-        1: 'inherit',
+        light: 'rgb(51,51,51)',
+        dark: 'rgb(17,17,17)',
+        contrastText: '#0d1619',
+        main: '#FDFDFD',
     },
     default: {
-        light: "#616161",
-        dark: "#616161",
-        contrastText: "#616161",
-        main: "#1A1A1A",
+        light: '#616161',
+        dark: '#616161',
+        contrastText: '#616161',
+        main: '#1A1A1A',
         16: '#1A1A1A',
         15: '#303030',
         14: '#4A4A4A',
@@ -92,5 +76,5 @@ export const darkPalette = {
         3: '#FAFAFA',
         2: '#FDFDFD',
         1: '#FFFFFF',
-    }
+    },
 };

package/dist/mui/palette/light/lightPalette.js

@@ -1,11 +1,11 @@
 export const lightPalette = {
     primary: {
         main: '#6950f3',
-        contrastText: "#fff"
+        contrastText: '#fff',
     },
     secondary: {
         main: '#0d1619',
-        contrastText: "#fff"
+        contrastText: '#fff',
     },
     divider: '#D4D4D4',
     background: {
@@ -23,7 +23,9 @@ export const lightPalette = {
         main: '#E1CB00',
     },
     error: {
-        main: '#B5260B',
+        main: '#d4163a',
+        light: '#f81a43',
+        dark: '#9a112c',
     },
     info: {
         main: '#007CB4',
@@ -32,50 +34,34 @@ export const lightPalette = {
         primary: '#0d1619',
         secondary: '#141414',
         disabled: '#303030',
-        "16": "#0d1619",
-        "15": "rgb(17,17,17)",
-        "14": "rgb(34,34,34)",
-        "13": "rgb(51,51,51)",
-        "12": "rgb(68,68,68)",
-        "11": "rgb(85,85,85)",
-        "10": "rgb(102,102,102)",
-        "9": "rgb(119,119,119)",
-        "8": "rgb(136,136,136)",
-        "7": "rgb(153,153,153)",
-        "6": "rgb(170,170,170)",
-        "5": "rgb(187,187,187)",
-        "4": "rgb(204,204,204)",
-        "3": "rgb(221,221,221)",
-        "2": "rgb(238,238,238)",
-        "1": "rgb(255,255,255)",
+        '16': '#0d1619',
+        '15': 'rgb(17,17,17)',
+        '14': 'rgb(34,34,34)',
+        '13': 'rgb(51,51,51)',
+        '12': 'rgb(68,68,68)',
+        '11': 'rgb(85,85,85)',
+        '10': 'rgb(102,102,102)',
+        '9': 'rgb(119,119,119)',
+        '8': 'rgb(136,136,136)',
+        '7': 'rgb(153,153,153)',
+        '6': 'rgb(170,170,170)',
+        '5': 'rgb(187,187,187)',
+        '4': 'rgb(204,204,204)',
+        '3': 'rgb(221,221,221)',
+        '2': 'rgb(238,238,238)',
+        '1': 'rgb(255,255,255)',
     },
     inherit: {
-        light: "inherit",
-        dark: "inherit",
-        contrastText: "inherit",
-        main: "#1A1A1A",
-        16: 'inherit',
-        15: 'inherit',
-        14: 'inherit',
-        13: 'inherit',
-        12: 'inherit',
-        11: 'inherit',
-        10: 'inherit',
-        9: 'inherit',
-        8: 'inherit',
-        7: 'inherit',
-        6: 'inherit',
-        5: 'inherit',
-        4: 'inherit',
-        3: 'inherit',
-        2: 'inherit',
-        1: 'inherit',
+        light: 'rgb(238,238,238)',
+        dark: 'rgb(204,204,204)',
+        contrastText: '#FDFDFD',
+        main: '#0d1619',
     },
     default: {
-        light: "#616161",
-        dark: "#616161",
-        contrastText: "#616161",
-        main: "#1A1A1A",
+        light: '#616161',
+        dark: '#616161',
+        contrastText: '#616161',
+        main: '#1A1A1A',
         16: '#1A1A1A',
         15: '#303030',
         14: '#4A4A4A',
@@ -92,5 +78,5 @@ export const lightPalette = {
         3: '#FAFAFA',
         2: '#FDFDFD',
         1: '#FFFFFF',
-    }
+    },
 };

package/dist/theme/theme.js

@@ -38,30 +38,30 @@ export const themeOptions = (mode, isRtl) => ({
     typography,
     breakpoints,
     components: {
-        MuiCssBaseline,
-        MuiAccordion,
-        MuiAlert,
         MuiChip,
-        MuiPagination,
-        MuiPaginationItem,
-        MuiSelect,
-        MuiIconButton,
         MuiMenu,
         MuiCard,
-        MuiTypography,
-        MuiInputLabel,
-        MuiTooltip,
-        MuiFormControlLabel,
-        MuiInputAdornment,
-        MuiAutocomplete,
-        MuiBreadcrumbs,
+        MuiRadio,
+        MuiAlert,
         MuiDialog,
+        MuiSelect,
+        MuiButton,
+        MuiSwitch,
+        MuiTooltip,
         MuiMenuItem,
         MuiTextField,
-        MuiOutlinedInput,
+        MuiAccordion,
+        MuiInputLabel,
+        MuiIconButton,
+        MuiTypography,
+        MuiPagination,
+        MuiCssBaseline,
         MuiFilledInput,
-        MuiButton,
-        MuiSwitch,
-        MuiRadio,
+        MuiBreadcrumbs,
+        MuiAutocomplete,
+        MuiOutlinedInput,
+        MuiPaginationItem,
+        MuiInputAdornment,
+        MuiFormControlLabel,
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-design-system",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "MUI-based design system with theme, form components, and utilities",
   "main": "dist/index.js",
   "module": "dist/index.js",