mui-design-system 0.0.34 → 0.0.36

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+- JSDoc for `UFTextField` component for better IDE support.

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

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

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

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import "../../styles/datePicker.css";
 import { CalendarProps } from "react-multi-date-picker";
-import { BaseTextFieldProps } from "@mui/material/TextField/TextField";
+import type { BaseTextFieldProps } from "@mui/material/TextField";
 import { TInputLabelMode } from "../form/type";
 export interface ICustomDatePickerProps extends CalendarProps {
     error: any;

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

@@ -16,10 +16,10 @@ const CustomTableBody = ({ table, onClickRow, renderSubComponent, withSelect, wi
             '& tr:last-child': {
                 '& > td > div': { border: 'unset' },
                 '& > td:first-child > div': {
-                    borderEndStartRadius: borderRadius * theme.shape.borderRadius,
+                    borderEndStartRadius: borderRadius * Number(theme.shape.borderRadius),
                 },
                 '& > td:last-child > div': {
-                    borderEndEndRadius: borderRadius * theme.shape.borderRadius,
+                    borderEndEndRadius: borderRadius * Number(theme.shape.borderRadius),
                 },
             },
         }, children: table?.getRowModel()?.rows?.map((row, i) => {

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

@@ -23,10 +23,10 @@ const CustomTableHead = ({ table, variant, withSelect, withRadio, withIndex, hea
             bgcolor: 'surface.secondary',
             borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
             '& th:first-of-type': {
-                borderRadius: `${borderRadius * theme?.shape.borderRadius}px 0 0 ${rowBorderRadius * theme?.shape.borderRadius}px`,
+                borderRadius: `${borderRadius * Number(theme.shape.borderRadius)}px 0 0 ${rowBorderRadius * Number(theme.shape.borderRadius)}px`,
             },
             '& th:last-child': {
-                borderRadius: `0 ${borderRadius * theme?.shape.borderRadius}px  ${rowBorderRadius * theme?.shape.borderRadius}px 0`,
+                borderRadius: `0 ${borderRadius * Number(theme.shape.borderRadius)}px  ${rowBorderRadius * Number(theme.shape.borderRadius)}px 0`,
             },
             '& th': {
                 border: variant === 'linear' ? 0 : '',

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

@@ -20,12 +20,12 @@ const CustomTableRow = ({ row, onClickRow, renderSubComponent, withSelect, withI
                     height: { xs: 44, md: 56 },
                     cursor: onClickRow ? 'pointer' : '',
                     '& td:first-of-type > div': {
-                        borderEndStartRadius: rowBorderRadius * theme?.shape.borderRadius,
-                        borderStartStartRadius: rowBorderRadius * theme?.shape.borderRadius,
+                        borderEndStartRadius: rowBorderRadius * Number(theme.shape.borderRadius),
+                        borderStartStartRadius: rowBorderRadius * Number(theme.shape.borderRadius),
                     },
                     '& td:last-child > div': {
-                        borderEndEndRadius: rowBorderRadius * theme?.shape.borderRadius,
-                        borderStartEndRadius: rowBorderRadius * theme?.shape.borderRadius,
+                        borderEndEndRadius: rowBorderRadius * Number(theme.shape.borderRadius),
+                        borderStartEndRadius: rowBorderRadius * Number(theme.shape.borderRadius),
                     },
                     ...(rowStyle ? rowStyle({ row }) : {}),
                     '& td > div': {

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

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { UseFormReturn } from "react-hook-form";
-import { GridProps } from "@mui/material/Grid";
+import { GridLegacyProps as GridProps } from "@mui/material/GridLegacy";
 import { TypographyProps } from "@mui/material/Typography";
 import { TFormSchema, TInputLabelMode } from "./type";
 import { TextFieldProps } from "@mui/material/TextField";

package/dist/components/form/Form.js

@@ -3,7 +3,7 @@ import { isValidElement } from "react";
 //------------------------------------------------------------------------
 //@Mui
 import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/GridLegacy";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import UseFormInput from "./UseFormInput";

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

@@ -2,10 +2,9 @@ import { FC } from "react";
 import { ICheckboxForm } from "../type";
 import { CheckboxProps } from "@mui/material";
 import { UseFormReturn } from "react-hook-form";
-import { SwitchBaseProps } from "@mui/material/internal/SwitchBase";
 import { TypographyProps } from "@mui/material/Typography";
 export interface ICustomCheckboxProps {
-    inputProps: SwitchBaseProps["inputProps"];
+    inputProps: CheckboxProps["inputProps"];
     slotProps: {
         typography?: TypographyProps;
     };

package/dist/components/form/components/UFCheckbox.js

@@ -3,6 +3,7 @@ import Checkbox from "@mui/material/Checkbox";
 import FormControl from "@mui/material/FormControl";
 import { Controller } from "react-hook-form";
 import FormControlLabel from "@mui/material/FormControlLabel";
+// inputProps matches Checkbox's underlying input; avoid MUI internal SwitchBase (not in public API in MUI 7)
 import Typography from "@mui/material/Typography";
 import { useFormContext } from "../../../context/FormContext";
 import { deepMerge } from "../../../methods/general";

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

@@ -7,5 +7,6 @@ type Props = ITextFieldForm & {
 };
 export declare const p2e: (s: string) => boolean;
 export declare const checkIfNumber: (value: string) => boolean;
+/** Form-integrated text field with theme support and numeric validation. */
 declare const UFTextField: FC<Props>;
 export default UFTextField;

package/dist/components/form/components/UFTextField.js

@@ -8,6 +8,7 @@ export const checkIfNumber = (value) => {
     const charLength = value.length;
     return !charLength || p2e(value);
 };
+/** Form-integrated text field with theme support and numeric validation. */
 const UFTextField = ({ form, name, type = 'text', defaultValue, label, rules, readonly, disabled, placeholder, error, itemProps, props, helperText, variant = "outlined", withoutHelperText, inputLabelMode, }) => {
     const { theme } = useFormContext();
     const themeProp = theme?.[type];

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

@@ -1,4 +1,4 @@
-import { GridProps } from '@mui/material/Grid';
+import { GridLegacyProps as GridProps } from '@mui/material/GridLegacy';
 import React, { ReactNode } from 'react';
 import { RegisterOptions } from 'react-hook-form';
 import { TypographyProps } from '@mui/material/Typography';

package/dist/mui/AutoComplete/MuiAutoComplete.js

@@ -7,7 +7,7 @@ export const MuiAutoComplete = {
     styleOverrides: {
         root: ({ ownerState, theme }) => ({
             position: 'relative',
-            borderRadius: theme.shape.borderRadius * 2,
+            borderRadius: Number(theme.shape.borderRadius) * 2,
             '& .Mui-focused': {
                 height: 'auto !important',
             },

package/dist/mui/Button/MuiButton.d.ts

@@ -1,5 +1,5 @@
 import { Components, Theme } from "@mui/material/styles";
-declare module "@mui/material/Button/Button" {
+declare module "@mui/material/Button" {
     interface ButtonOwnProps {
         isLoading?: boolean;
     }

package/dist/mui/Button/MuiButton.js

@@ -10,7 +10,7 @@ export const MuiButton = {
         root: ({ ownerState, theme }) => ({
             fontWeight: 500,
             outline: "0px solid",
-            borderRadius: theme.shape.borderRadius * 2,
+            borderRadius: Number(theme.shape.borderRadius) * 2,
             minHeight: ownerState.size === "small" ? "36px" : "48px",
             fontSize: ownerState.size === "small" ? 15 : 17,
             width: ownerState.fullWidth ? "100%" : "max-content",
@@ -113,7 +113,7 @@ export const MuiButton = {
                 backgroundColor: theme.palette.background.default,
                 content: "''",
                 position: "absolute",
-                borderRadius: theme.shape.borderRadius * 2,
+                borderRadius: Number(theme.shape.borderRadius) * 2,
                 opacity: 0,
                 transition: "all 0.3s",
             },
@@ -160,7 +160,7 @@ export const MuiButton = {
                 backgroundColor: theme.palette.background.default,
                 content: "''",
                 position: "absolute",
-                borderRadius: theme.shape.borderRadius * 2,
+                borderRadius: Number(theme.shape.borderRadius) * 2,
                 opacity: 0,
                 transition: "all 0.3s",
             },

package/dist/mui/Dialog/MuiDialog.js

@@ -12,7 +12,7 @@ export const MuiDialog = {
                 ...(ownerState.withoutBoxShadow && {
                     boxShadow: "none",
                 }),
-                borderRadius: theme.shape.borderRadius * 2,
+                borderRadius: Number(theme.shape.borderRadius) * 2,
                 minHeight: "340px",
                 minWidth: "500px",
                 padding: "16px 24px",

package/dist/mui/Tabs/Tab/MuiTab.js

@@ -18,7 +18,7 @@ export const MuiTab = {
                 backgroundColor: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.text.primary,
                 color: theme.palette.mode === 'light' ? theme.palette.text.secondary : theme.palette.primary.main,
                 stroke: theme.palette.mode === 'light' ? theme.palette.text.secondary : theme.palette.primary.main,
-                borderRadius: theme.shape.borderRadius * 2,
+                borderRadius: Number(theme.shape.borderRadius) * 2,
                 fontWeight: 500,
             },
         }),

package/dist/mui/TextField/MuiFilledInput.js

@@ -35,7 +35,7 @@ export const MuiFilledInput = {
             //Temporary Added
             paddingRight: 10,
             border: `1px solid ${theme.palette.background[4]}`,
-            borderRadius: theme.shape.borderRadius * 2,
+            borderRadius: Number(theme.shape.borderRadius) * 2,
             transition: 'all 0.2s ease',
             color: theme.palette.mode === 'light'
                 ? theme.palette.text.primary

package/dist/mui/TextField/TextField.js

@@ -36,7 +36,7 @@ export const MuiTextField = {
                 },
                 //Base Input & Text area components
                 '& .MuiInputBase-input': {
-                    borderRadius: theme.shape.borderRadius / 2,
+                    borderRadius: Number(theme.shape.borderRadius) / 2,
                     '&:-webkit-autofill': {
                         WebkitTextFillColor: theme.palette.text.primary,
                         transition: 'background-color 5000s ease-in-out 0s',

package/dist/mui/Typography/index.d.ts

@@ -1,2 +1,2 @@
-import { TypographyOptions } from '@mui/material/styles/createTypography';
-export declare const typography: TypographyOptions;
+import type { TypographyVariantsOptions } from '@mui/material/styles';
+export declare const typography: TypographyVariantsOptions;

package/dist/mui/palette/dark/darkPalette.d.ts

@@ -1,2 +1,2 @@
-import { PaletteOptions } from '@mui/material/styles/createPalette';
+import type { PaletteOptions } from '@mui/material/styles';
 export declare const darkPalette: PaletteOptions;

package/dist/mui/palette/light/lightPalette.d.ts

@@ -1,2 +1,2 @@
-import { PaletteOptions } from '@mui/material/styles/createPalette';
+import type { PaletteOptions } from '@mui/material/styles';
 export declare const lightPalette: PaletteOptions;

package/dist/types/palette.d.ts

@@ -1,4 +1,4 @@
-import { PaletteColor } from '@mui/material/styles/createPalette';
+import type { PaletteColor } from '@mui/material/styles';
 interface ICustomColor {
     main?: string;
     16?: string;
@@ -22,19 +22,17 @@ declare module '@mui/material' {
     interface Color extends ICustomColor {
     }
 }
-declare module '@mui/material/styles/createPalette' {
+interface IPalette {
+    default: PaletteColor;
+    inherit: PaletteColor;
+}
+declare module '@mui/material/styles' {
     interface PaletteColor extends ICustomColor {
     }
     interface SimplePaletteColorOptions extends ICustomColor {
     }
     interface TypeText extends ICustomColor {
     }
-}
-interface IPalette {
-    default: PaletteColor;
-    inherit: PaletteColor;
-}
-declare module '@mui/material/styles' {
     interface Palette extends IPalette {
     }
     interface PaletteOptions extends IPalette {
@@ -48,8 +46,6 @@ declare module '@mui/material/styles' {
         3?: string;
         4?: string;
     }
-}
-declare module '@mui/material/styles/createPalette' {
     interface PaletteColor {
         main: string;
     }

package/dist/types/typography.js

@@ -1 +1,2 @@
+// Typography variants are augmented via module declaration below; no createTypography import needed for v7.
 export {};

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "mui-design-system",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "MUI-based design system with theme, form components, and utilities",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && node copy-files.js",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish": "npm publish"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -19,14 +25,9 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
-  "scripts": {
-    "build": "tsc && node copy-files.js",
-    "prepublishOnly": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "publish": "npm publish"
-  },
   "dependencies": {
     "react-window": "^1.8.10",
     "react-multi-date-picker": "^4.4.1",
@@ -35,11 +36,11 @@
     "react-hook-form": "^7.51.2"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@mui/material": "^6.1.9",
-    "@mui/material-nextjs": "^6.1.9",
-    "@mui/styled-engine-sc": "^6.0.0-alpha.17",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.9",
+    "@mui/material-nextjs": "^7.3.9",
+    "@mui/styled-engine-sc": "^7.3.9",
     "styled-components": "^6.1.8",
     "stylis-plugin-rtl": "^2.1.1",
     "react": "^18.2.0",