@bigmath-ui-library/core 2.0.4

package/src/theme/BMButtonGroup.ts

@@ -0,0 +1,49 @@
+import { buttonClasses, type Components } from "@mui/material";
+
+export const BMButtonGroup: Components["MuiButtonGroup"] = {
+    defaultProps: {
+        disableRipple: true,
+        disableElevation: true,
+    },
+    styleOverrides: {
+        root: ({ theme }: { theme: any, }) => ({
+            backgroundColor: theme.palette.primary[100],
+            border: `1px solid ${theme.palette.grey[300]}`,
+            [`.${buttonClasses.root}`]: {
+                backgroundColor: 'transparent',
+                border: 'none',
+                height: '40px',
+                fontSize: '13px',
+                fontWeight: 400,
+                color: theme.palette.grey[900],
+                padding: '8px 10px',
+                "&.bm-active": {
+                    border: `1px solid ${theme.palette.primary[600]} !important`,
+                    backgroundColor: `${theme.palette.common.white} !important`,
+                    color: `${theme.palette.primary[600]} !important`,
+                    borderRadius: '8px',
+                    zIndex: 1,
+                    fontWeight: 600,
+                },
+                "&:hover": {
+                    backgroundColor: `${theme.palette.common.white} !important`,
+                    // border: `1px solid ${theme.palette.primary[600]} !important`,
+                    color: `${theme.palette.primary[600]} !important`,
+                    borderRadius: '8px',
+                    '& .bm-divider': {
+                        display: 'none'
+                    }
+                },
+                "& .bm-divider": {
+                    width: '1px',
+                    height: '14px',
+                    backgroundColor: theme.palette.grey[300],
+                    position: 'absolute',
+                    right: 0
+                }
+            },
+
+        })
+    }
+
+}

package/src/theme/BMCheckbox.ts

@@ -0,0 +1,16 @@
+import type { Components } from "@mui/material";
+
+export const BMCheckbox: Components["MuiCheckbox"] = {
+	defaultProps: {
+		disableRipple: true,
+		disableFocusRipple: true,
+		disableTouchRipple: true,
+		color: "primary",
+	},
+	styleOverrides: {
+		root: {
+			padding: 0,
+			paddingRight: 8,
+		}
+	}
+};

package/src/theme/BMFormHelperText.ts

@@ -0,0 +1,19 @@
+import { Components } from "@mui/material";
+
+export const BMFormHelperText: Components["MuiFormHelperText"] = {
+    styleOverrides: {
+        root: ({ theme }: { theme: any }) => ({
+            fontSize: 11.5,
+            lineHeight: '16px',
+            fontWeight: 400,
+            textTransform: 'none',
+            color: theme.palette.grey[600],
+            marginTop: 8,
+            '&$error': {
+                '&$disabled': {
+                    color: theme.palette.grey[600]
+                }
+            }
+        })
+    }
+}

package/src/theme/BMInput.ts

@@ -0,0 +1,120 @@
+import type { Components } from "@mui/material";
+import { colors, themeVariables } from "./variables";
+
+declare module "@mui/material/TextField" {
+  interface TextFieldPropsSizeOverrides {
+    large: true;
+  }
+}
+
+export const BMInput: Components["MuiInput"] = {
+  defaultProps: {
+    disableUnderline: true,
+  },
+  styleOverrides: {
+    root: {
+      overflow: "hidden",
+      height: themeVariables.inputHeight,
+      color: colors.grey[900],
+      backgroundColor: colors.background.paper,
+      borderRadius: themeVariables.borderRadius,
+      border: `1px solid ${colors.grey[300]}`,
+      ":hover": {
+        borderColor: colors.primary[300],
+      },
+      "&.Mui-focused": {
+        borderColor: colors.primary[300],
+        boxShadow: `0 0 0 2px ${colors.primary[200]}`,
+      },
+      "&.Mui-error": {
+        color: `${colors.error[500]} !important`,
+        backgroundColor: `${colors.error[100]} !important`,
+        borderColor: `${colors.error[500]} !important`,
+        "&:hover": {
+          borderColor: colors.error[500],
+        },
+        "&.Mui-focused": {
+          boxShadow: `0 0 0 2px ${colors.error[100]}`,
+        },
+        "&.Mui-disabled": {
+          borderColor: colors.grey[300],
+          cursor: "not-allowed",
+        },
+      },
+      "&.Mui-disabled": {
+        color: colors.grey[600],
+        backgroundColor: colors.grey[200],
+        borderColor: colors.grey[300],
+        cursor: "not-allowed",
+      },
+      variants: [
+        {
+          props: { multiline: true },
+          style: {
+            height: "auto",
+            padding: 0,
+          },
+        },
+        {
+          props: { size: "large", multiline: false },
+          style: {
+            height: 40,
+            textTransform: "none",
+          },
+        },
+      ],
+    },
+    // biome-ignore lint: TODO for any
+    input: ({ theme, ownerState }: { theme: any; ownerState: any }) => ({
+      padding: 8,
+      fontWeight: 400,
+      fontSize: 13,
+      "&::placeholder": {
+        color: ownerState?.error ? theme.palette.error[500] : colors.grey[600],
+      },
+      '&.Mui-disabled': {
+        pointerEvents: 'none',
+        cursor: 'not-allowed',
+      }
+    }),
+    formControl: {
+      "label + &": {
+        marginTop: 0,
+      },
+    },
+  },
+};
+
+export const BMInputLabel: Components["MuiInputLabel"] = {
+  defaultProps: {
+    shrink: true,
+  },
+  styleOverrides: {
+    // biome-ignore lint: TODO for any
+    root: ({ theme }: { theme: any }) => ({
+      display: "flex",
+      alignItems: "center",
+      color: colors.grey[600],
+      fontSize: theme.typography.subtitle2.fontSize,
+      lineHeight: "16px",
+      fontWeight: 500,
+      textTransform: "none",
+      "&.Mui-focused": {
+        color: colors.grey[600],
+      },
+      "&.Mui-error": {
+        color: colors.error[500],
+      },
+      "&.Mui-disabled": {
+        color: colors.grey[600],
+      },
+    }),
+    formControl: {
+      position: "relative",
+      marginBottom: 4,
+    },
+    shrink: {
+      transform: "translate(0, 1.5px)",
+    },
+  },
+};

package/src/theme/BMMaps.ts

@@ -0,0 +1,9 @@
+
+export const BMMaps = {
+    styleOverrides: {
+        root: {
+        },
+        tooltip: {
+        },
+    }
+};

package/src/theme/BMRadio.ts

@@ -0,0 +1,10 @@
+import type { Components } from "@mui/material";
+
+export const BMRadio: Components["MuiRadio"] = {
+	defaultProps: {
+		disableRipple: true,
+		disableFocusRipple: true,
+		disableTouchRipple: true,
+		color: "primary",
+	},
+};

package/src/theme/BMTabs.ts

@@ -0,0 +1,79 @@
+import { tabClasses, tabsClasses, type Components } from "@mui/material";
+import { colors } from "./variables";
+
+export const BMTabs: Components["MuiTabs"] = {
+    styleOverrides: {
+        indicator: {
+            background: colors.secondary[900],
+            height: 3,
+            '&:hover': {
+                backgroundColor: colors.secondary[400]
+            }
+        },
+        fixed: {
+            boxShadow: `inset 0 -1px ${colors.grey[300] ?? ''}`
+        },
+        root: {
+            // custom "pill" style for vertical tabs
+            [`&.${tabsClasses.vertical}`]: {
+                [`& .${tabsClasses.fixed}`]: {
+                    boxShadow: 'none',
+                    [`& .${tabsClasses.indicator}`]: {
+                        display: 'none'
+                    }
+                },
+                [`& .${tabClasses.root}`]: {
+                    justifyContent: 'center',
+                    minHeight: 32,
+                    padding: '0 16px',
+                    margin: '0 0 4px 0',
+                    borderRadius: 8,
+                    boxShadow: 'none',
+                    '&:hover': {
+                        background: colors.grey[200]
+                    },
+                    '&.Mui-selected': {
+                        background: colors.grey[300]
+                    },
+                    '&.MuiTab-wrapper': {
+                        alignItems: 'flex-start'
+                    }
+                }
+            }
+        },
+    }
+
+}
+
+export const BMTab: Components["MuiTab"] = {
+    defaultProps: {
+        disableRipple: true,
+        disableTouchRipple: true,
+        disableFocusRipple: true
+    },
+    styleOverrides: {
+        root: {
+            fontSize: 13,
+            fontWeight: 400,
+            textTransform: 'none',
+            minHeight: '56px',
+
+            '&:hover': {
+                boxShadow: `inset 0px -3px 0px 0px ${colors.secondary[400]}`
+            },
+
+            ['@media (min-width:600px)']: {
+                minWidth: 'fit-content',
+                marginRight: 32,
+                paddingRight: 0,
+                paddingLeft: 0
+            }
+        },
+        textColorPrimary: {
+            color: colors.grey[900],
+            '&.Mui-selected': {
+                color: colors.grey[900]
+            }
+        }
+    }
+}

package/src/theme/BMTag.ts

@@ -0,0 +1,28 @@
+import { Components, Theme } from '@mui/material';
+
+export const BMTag: Components<Theme>['MuiChip'] = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      borderRadius: theme.shape.borderRadius,
+      transition: theme.transitions.create(['background-color', 'box-shadow']),
+      '&:hover': {
+        boxShadow: 'none',
+      },
+      '&:active': {
+        boxShadow: 'none',
+      },
+      '&:focus': {
+        boxShadow: 'none',
+      },
+    }),
+    label: {
+      fontWeight: 500,
+    },
+    icon: {
+      color: 'inherit',
+    },
+    deleteIcon: {
+      color: 'inherit',
+    },
+  },
+}; 

package/src/theme/BMToggle.ts

@@ -0,0 +1,50 @@
+import type { Components } from "@mui/material";
+
+export const BMToggle: Components["MuiSwitch"] = {
+  defaultProps: {
+    disableRipple: true,
+    disableFocusRipple: true,
+    disableTouchRipple: true,
+  },
+  styleOverrides: {
+    root: {
+      width: 38,
+      height: 20,
+      padding: 0,
+      display: "flex",
+    },
+    // biome-ignore lint: TODO
+    switchBase: ({ theme }: { theme: any }) => ({
+      padding: theme.spacing(0.5),
+      color: theme.palette.common.white,
+      "&.Mui-checked": {
+        transform: "translateX(17px)",
+        color: theme.palette.common.white,
+      },
+    }),
+    // biome-ignore lint: TODO
+    thumb: ({ theme }: { theme: any }) => ({
+      width: 12,
+      height: 12,
+      boxShadow: "none",
+      color: theme.palette.common.white,
+    }),
+    // biome-ignore lint: TODO
+    track: ({ theme }: { theme: any }) => ({
+      border: `1px solid ${theme.palette.grey[400]}`,
+      borderRadius: 22 / 2,
+      opacity: "1 !important",
+      backgroundColor: theme.palette.grey[400],
+      ".Mui-checked + &": {
+        backgroundColor: theme.palette.primary.main,
+        border: `1px solid ${theme.palette.primary.main}`,
+      },
+      ".Mui-disabled + &": {
+        backgroundColor: theme.palette.primary[600],
+        border: `1px solid ${theme.palette.grey[400]}`,
+        opacity: "0.3 !important",
+      },
+    }),
+    checked: {},
+  },
+};

package/src/theme/BMTooltip.ts

@@ -0,0 +1,34 @@
+import type { Components } from "@mui/material";
+import { colors, themeVariables as variables } from "./variables";
+
+export const BMTooltip: Components["MuiTooltip"] = {
+  defaultProps: {
+    disableInteractive: false,
+  },
+  styleOverrides: {
+    tooltip: {
+      fontFamily: '"Inter", sans-serif',
+      maxWidth: 360,
+      backgroundColor: colors.background.paper,
+      color: colors.grey[700],
+      border: `1px solid ${colors.grey[300]}`,
+      padding: 10,
+      fontSize: 11.5,
+      fontWeight: 400,
+      boxShadow: variables.shadowThick,
+      lineHeight: "1.4em",
+      borderRadius: "8px",
+    },
+    arrow: {
+      "&:before": {
+        color: colors.background.paper,
+        border: `1px solid ${colors.grey[300]}`,
+      },
+    },
+    tooltipPlacementTop: {
+      ["@media (min-width: 600px)"]: {
+        margin: "8px -2px",
+      },
+    },
+  },
+};