robobyte-front-builder 1.0.0

package/src/@core/theme/overrides/alerts.js

@@ -0,0 +1,110 @@
+import { lighten, darken } from '@mui/material/styles'
+
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Alert = theme => {
+  const getColor = theme.palette.mode === 'light' ? darken : lighten
+
+  return {
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          '& .MuiAlertTitle-root': {
+            marginBottom: theme.spacing(1)
+          },
+          '& a': {
+            fontWeight: 500,
+            color: 'inherit'
+          }
+        },
+        standardSuccess: {
+          color: getColor(theme.palette.success.main, 0.1),
+          backgroundColor: hexToRGBA(theme.palette.success.main, 0.12),
+          '& .MuiAlertTitle-root': {
+            color: getColor(theme.palette.success.main, 0.1)
+          },
+          '& .MuiAlert-icon': {
+            color: getColor(theme.palette.success.main, 0.1)
+          }
+        },
+        standardInfo: {
+          color: getColor(theme.palette.info.main, 0.1),
+          backgroundColor: hexToRGBA(theme.palette.info.main, 0.12),
+          '& .MuiAlertTitle-root': {
+            color: getColor(theme.palette.info.main, 0.1)
+          },
+          '& .MuiAlert-icon': {
+            color: getColor(theme.palette.info.main, 0.1)
+          }
+        },
+        standardWarning: {
+          color: getColor(theme.palette.warning.main, 0.1),
+          backgroundColor: hexToRGBA(theme.palette.warning.main, 0.12),
+          '& .MuiAlertTitle-root': {
+            color: getColor(theme.palette.warning.main, 0.1)
+          },
+          '& .MuiAlert-icon': {
+            color: getColor(theme.palette.warning.main, 0.1)
+          }
+        },
+        standardError: {
+          color: getColor(theme.palette.error.main, 0.1),
+          backgroundColor: hexToRGBA(theme.palette.error.main, 0.12),
+          '& .MuiAlertTitle-root': {
+            color: getColor(theme.palette.error.main, 0.1)
+          },
+          '& .MuiAlert-icon': {
+            color: getColor(theme.palette.error.main, 0.1)
+          }
+        },
+        outlinedSuccess: {
+          borderColor: theme.palette.success.main,
+          color: getColor(theme.palette.success.main, 0.1),
+          '& .MuiAlertTitle-root': {
+            color: getColor(theme.palette.success.main, 0.1)
+          },
+          '& .MuiAlert-icon': {
+            color: theme.palette.success.main
+          }
+        },
+        outlinedInfo: {
+          borderColor: theme.palette.info.main,
+          color: getColor(theme.palette.info.main, 0.1),
+          '& .MuiAlertTitle-root': {
+            color: getColor(theme.palette.info.main, 0.1)
+          },
+          '& .MuiAlert-icon': {
+            color: theme.palette.info.main
+          }
+        },
+        outlinedWarning: {
+          borderColor: theme.palette.warning.main,
+          color: getColor(theme.palette.warning.main, 0.1),
+          '& .MuiAlertTitle-root': {
+            color: getColor(theme.palette.warning.main, 0.1)
+          },
+          '& .MuiAlert-icon': {
+            color: theme.palette.warning.main
+          }
+        },
+        outlinedError: {
+          borderColor: theme.palette.error.main,
+          color: getColor(theme.palette.error.main, 0.1),
+          '& .MuiAlertTitle-root': {
+            color: getColor(theme.palette.error.main, 0.1)
+          },
+          '& .MuiAlert-icon': {
+            color: theme.palette.error.main
+          }
+        },
+        filled: {
+          fontWeight: 400
+        }
+      }
+    }
+  }
+}
+
+export default Alert

package/src/@core/theme/overrides/alerts.jsx

@@ -0,0 +1,180 @@
+// React Imports
+import React from 'react'
+
+const alerts = {
+  MuiAlert: {
+    defaultProps: {
+      iconMapping: {
+        error: <i className='ri-error-warning-line' />,
+        warning: <i className='ri-alert-line' />,
+        info: <i className='ri-information-line' />,
+        success: <i className='ri-checkbox-circle-line' />
+      }
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        variants: [
+          {
+            props: { variant: 'standard', severity: 'error' },
+            style: {
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-error-main)',
+                color: 'var(--mui-palette-error-contrastText)'
+              }
+            }
+          },
+          {
+            props: { variant: 'standard', severity: 'warning' },
+            style: {
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-warning-main)',
+                color: 'var(--mui-palette-warning-contrastText)'
+              }
+            }
+          },
+          {
+            props: { variant: 'standard', severity: 'info' },
+            style: {
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-info-main)',
+                color: 'var(--mui-palette-info-contrastText)'
+              }
+            }
+          },
+          {
+            props: { variant: 'standard', severity: 'success' },
+            style: {
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-success-main)',
+                color: 'var(--mui-palette-success-contrastText)'
+              }
+            }
+          },
+          {
+            props: { variant: 'outlined', severity: 'error' },
+            style: {
+              borderColor: 'var(--mui-palette-error-main)',
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-error-lightOpacity)',
+                color: 'var(--mui-palette-error-main)'
+              }
+            }
+          },
+          {
+            props: { variant: 'outlined', severity: 'warning' },
+            style: {
+              borderColor: 'var(--mui-palette-warning-main)',
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-warning-lightOpacity)',
+                color: 'var(--mui-palette-warning-main)'
+              }
+            }
+          },
+          {
+            props: { variant: 'outlined', severity: 'info' },
+            style: {
+              borderColor: 'var(--mui-palette-info-main)',
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-info-lightOpacity)',
+                color: 'var(--mui-palette-info-main)'
+              }
+            }
+          },
+          {
+            props: { variant: 'outlined', severity: 'success' },
+            style: {
+              borderColor: 'var(--mui-palette-success-main)',
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-success-lightOpacity)',
+                color: 'var(--mui-palette-success-main)'
+              }
+            }
+          },
+          {
+            props: { variant: 'filled', severity: 'error' },
+            style: {
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-common-white)',
+                color: 'var(--mui-palette-error-main)',
+                boxShadow: 'var(--mui-customShadows-xs)'
+              }
+            }
+          },
+          {
+            props: { variant: 'filled', severity: 'warning' },
+            style: {
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-common-white)',
+                color: 'var(--mui-palette-warning-main)',
+                boxShadow: 'var(--mui-customShadows-xs)'
+              }
+            }
+          },
+          {
+            props: { variant: 'filled', severity: 'info' },
+            style: {
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-common-white)',
+                color: 'var(--mui-palette-info-main)',
+                boxShadow: 'var(--mui-customShadows-xs)'
+              }
+            }
+          },
+          {
+            props: { variant: 'filled', severity: 'success' },
+            style: {
+              '& .MuiAlert-icon': {
+                backgroundColor: 'var(--mui-palette-common-white)',
+                color: 'var(--mui-palette-success-main)',
+                boxShadow: 'var(--mui-customShadows-xs)'
+              }
+            }
+          }
+        ],
+        borderRadius: 'var(--mui-shape-customBorderRadius-lg)',
+        padding: theme.spacing(3, 4),
+        gap: theme.spacing(4),
+        ...theme.typography.body1,
+        '&:not(:has(.MuiAlertTitle-root))': {
+          '& .MuiAlert-icon + .MuiAlert-message': {
+            alignSelf: 'center'
+          },
+          '&:has(.MuiAlert-action) .MuiAlert-icon': {
+            marginBlockStart: 2
+          }
+        }
+      }),
+      icon: {
+        padding: 0,
+        margin: 0,
+        minInlineSize: 30,
+        blockSize: 30,
+        borderRadius: 'var(--mui-shape-customBorderRadius-lg)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& i, & svg': {
+          fontSize: 'inherit'
+        }
+      },
+      message: {
+        padding: 0
+      },
+      action: {
+        padding: 0,
+        marginInlineEnd: 0
+      }
+    }
+  },
+  MuiAlertTitle: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        ...theme.typography.h5,
+        marginBlockStart: 0,
+        marginBlockEnd: theme.spacing(1),
+        color: 'inherit'
+      })
+    }
+  }
+}
+
+export default alerts

package/src/@core/theme/overrides/autocomplete.js

@@ -0,0 +1,14 @@
+const Autocomplete = (theme, skin) => {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.shadows[6],
+          ...(skin === 'bordered' && { boxShadow: 'none', border: `1px solid ${theme.palette.divider}` })
+        }
+      }
+    }
+  }
+}
+
+export default Autocomplete

package/src/@core/theme/overrides/autocomplete.jsx

@@ -0,0 +1,68 @@
+// React Imports
+import React from 'react'
+
+const autocomplete = skin => ({
+  MuiAutocomplete: {
+    defaultProps: {
+      ...(skin === 'bordered' && {
+        slotProps: {
+          paper: {
+            variant: 'outlined'
+          }
+        }
+      }),
+      ChipProps: {
+        size: 'small'
+      },
+      popupIcon: <i className='ri-arrow-down-s-line' />
+    },
+    styleOverrides: {
+      root: {
+        '& .MuiButtonBase-root.Mui-disabled i, & .MuiButtonBase-root.Mui-disabled svg': {
+          color: 'var(--mui-palette-action-disabled)'
+        },
+        '& .MuiOutlinedInput-input': {
+          blockSize: '1.534em'
+        }
+      },
+      input: {
+        '& + .MuiAutocomplete-endAdornment': {
+          right: '1rem',
+          '& i, & svg': {
+            fontSize: '1.25rem',
+            color: 'var(--mui-palette-text-primary)'
+          },
+          '& .MuiAutocomplete-clearIndicator': {
+            padding: 2
+          }
+        },
+        '&.MuiOutlinedInput-input, &.MuiFilledInput-input': {
+          paddingInline: '0 !important'
+        }
+      },
+      paper: {
+        ...(skin !== 'bordered' && {
+          boxShadow: 'var(--mui-customShadows-lg)',
+          marginBlockStart: '0.125rem'
+        })
+      },
+      listbox: ({ theme }) => ({
+        '& .MuiAutocomplete-option': {
+          padding: theme.spacing(2, 5),
+          '&[aria-selected="true"]': {
+            backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
+            color: 'var(--mui-palette-primary-main)',
+            '&.Mui-focused, &.Mui-focusVisible': {
+              backgroundColor: 'var(--mui-palette-primary-mainOpacity)'
+            }
+          }
+        },
+        '& .MuiAutocomplete-option.Mui-focusVisible': {
+          backgroundColor: 'var(--mui-palette-action-hover)'
+        }
+      })
+    }
+  }
+})
+
+export default autocomplete

package/src/@core/theme/overrides/avatar.js

@@ -0,0 +1,38 @@
+const avatar = {
+  MuiAvatarGroup: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        justifyContent: 'flex-end',
+        '& .MuiAvatar-root': {
+          borderColor: 'var(--mui-palette-background-paper)'
+        },
+        '&.pull-up .MuiAvatar-root': {
+          cursor: 'pointer',
+          transition: theme.transitions.create(['box-shadow', 'transform'], {
+            easing: 'ease',
+            duration: theme.transitions.duration.shorter
+          }),
+          '&:hover': {
+            zIndex: 2,
+            boxShadow: 'var(--mui-customShadows-md)',
+            transform: 'translateY(-5px)'
+          }
+        }
+      })
+    }
+  },
+  MuiAvatar: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        color: 'var(--mui-palette-text-primary)',
+        fontSize: theme.typography.body1.fontSize,
+        lineHeight: 1.2
+      }),
+      rounded: {
+        borderRadius: 'var(--mui-shape-customBorderRadius-lg)'
+      }
+    }
+  }
+}
+
+export default avatar

package/src/@core/theme/overrides/avatars.js

@@ -0,0 +1,27 @@
+const Avatar = theme => {
+  return {
+    MuiAvatar: {
+      styleOverrides: {
+        colorDefault: {
+          color: theme.palette.text.secondary,
+          backgroundColor: theme.palette.action.selected
+        },
+        rounded: {
+          borderRadius: 8
+        }
+      }
+    },
+    MuiAvatarGroup: {
+      styleOverrides: {
+        root: {
+          justifyContent: 'flex-end',
+          '.MuiCard-root & .MuiAvatar-root': {
+            borderColor: theme.palette.background.paper
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Avatar

package/src/@core/theme/overrides/backdrop.js

@@ -0,0 +1,22 @@
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Backdrop = theme => {
+  return {
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor:
+            theme.palette.mode === 'light'
+              ? `rgba(${theme.palette.customColors.main}, 0.5)`
+              : hexToRGBA('#101121', 0.87)
+        },
+        invisible: {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  }
+}
+
+export default Backdrop

package/src/@core/theme/overrides/badges.js

@@ -0,0 +1,16 @@
+const badges = {
+  MuiBadge: {
+    styleOverrides: {
+      standard: ({ theme }) => ({
+        height: 22,
+        minWidth: 22,
+        fontSize: theme.typography.subtitle2.fontSize,
+        lineHeight: 1.07692,
+        padding: theme.spacing(1, 2),
+        borderRadius: 11
+      })
+    }
+  }
+}
+
+export default badges

package/src/@core/theme/overrides/breadcrumbs.js

@@ -0,0 +1,11 @@
+export default {
+  MuiBreadcrumbs: {
+    styleOverrides: {
+      li: {
+        '& > .MuiLink-root': {
+          textDecoration: 'none'
+        }
+      }
+    }
+  }
+}

package/src/@core/theme/overrides/button-group.js

@@ -0,0 +1,84 @@
+// Config Imports
+import themeConfig from 'src/configs/themeConfig'
+
+const buttonGroup = {
+  MuiButtonGroup: {
+    defaultProps: {
+      disableRipple: themeConfig.disableRipple
+    },
+    styleOverrides: {
+      root: {
+        variants: [
+          {
+            props: { variant: 'text', color: 'primary' },
+            style: {
+              '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
+                '&, &.Mui-disabled': {
+                  borderColor: 'var(--mui-palette-primary-main)'
+                }
+              }
+            }
+          },
+          {
+            props: { variant: 'text', color: 'secondary' },
+            style: {
+              '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
+                '&, &.Mui-disabled': {
+                  borderColor: 'var(--mui-palette-secondary-main)'
+                }
+              }
+            }
+          },
+          {
+            props: { variant: 'text', color: 'error' },
+            style: {
+              '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
+                '&, &.Mui-disabled': {
+                  borderColor: 'var(--mui-palette-error-main)'
+                }
+              }
+            }
+          },
+          {
+            props: { variant: 'text', color: 'warning' },
+            style: {
+              '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
+                '&, &.Mui-disabled': {
+                  borderColor: 'var(--mui-palette-warning-main)'
+                }
+              }
+            }
+          },
+          {
+            props: { variant: 'text', color: 'info' },
+            style: {
+              '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
+                '&, &.Mui-disabled': {
+                  borderColor: 'var(--mui-palette-info-main)'
+                }
+              }
+            }
+          },
+          {
+            props: { variant: 'text', color: 'success' },
+            style: {
+              '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
+                '&, &.Mui-disabled': {
+                  borderColor: 'var(--mui-palette-success-main)'
+                }
+              }
+            }
+          }
+        ]
+      },
+      contained: ({ ownerState }) => ({
+        boxShadow: 'var(--mui-customShadows-xs)',
+        ...(ownerState.disabled && {
+          boxShadow: 'none'
+        })
+      })
+    }
+  }
+}
+
+export default buttonGroup

package/src/@core/theme/overrides/button.js

@@ -0,0 +1,93 @@
+// ** Theme Config Imports
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Button = theme => {
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          fontWeight: 500,
+          borderRadius: 8,
+          lineHeight: 1.715,
+          padding: `${theme.spacing(1.75, 3)}`,
+          '&.MuiButton-textPrimary:hover': {
+            backgroundColor: hexToRGBA(theme.palette.primary.main, 0.08)
+          },
+          '&.MuiButton-textSecondary:hover': {
+            backgroundColor: hexToRGBA(theme.palette.secondary.main, 0.08)
+          },
+          '&.MuiButton-textSuccess:hover': {
+            backgroundColor: hexToRGBA(theme.palette.success.main, 0.08)
+          },
+          '&.MuiButton-textError:hover': {
+            backgroundColor: hexToRGBA(theme.palette.error.main, 0.08)
+          },
+          '&.MuiButton-textWarning:hover': {
+            backgroundColor: hexToRGBA(theme.palette.warning.main, 0.08)
+          },
+          '&.MuiButton-textInfo:hover': {
+            backgroundColor: hexToRGBA(theme.palette.info.main, 0.08)
+          }
+        },
+        contained: {
+          boxShadow: theme.shadows[3],
+          padding: `${theme.spacing(1.75, 5.5)}`
+        },
+        outlined: {
+          lineHeight: 1.572,
+          padding: `${theme.spacing(1.75, 5.25)}`,
+          '&.MuiButton-outlinedPrimary:hover': {
+            backgroundColor: hexToRGBA(theme.palette.primary.main, 0.08)
+          },
+          '&.MuiButton-outlinedSecondary:hover': {
+            backgroundColor: hexToRGBA(theme.palette.secondary.main, 0.08)
+          },
+          '&.MuiButton-outlinedSuccess:hover': {
+            backgroundColor: hexToRGBA(theme.palette.success.main, 0.08)
+          },
+          '&.MuiButton-outlinedError:hover': {
+            backgroundColor: hexToRGBA(theme.palette.error.main, 0.08)
+          },
+          '&.MuiButton-outlinedWarning:hover': {
+            backgroundColor: hexToRGBA(theme.palette.warning.main, 0.08)
+          },
+          '&.MuiButton-outlinedInfo:hover': {
+            backgroundColor: hexToRGBA(theme.palette.info.main, 0.08)
+          }
+        },
+        sizeSmall: {
+          lineHeight: 1.693,
+          padding: `${theme.spacing(1, 2.25)}`,
+          '&.MuiButton-contained': {
+            padding: `${theme.spacing(1, 3.25)}`
+          },
+          '&.MuiButton-outlined': {
+            lineHeight: 1.539,
+            padding: `${theme.spacing(1, 3)}`
+          }
+        },
+        sizeLarge: {
+          lineHeight: 1.734,
+          padding: `${theme.spacing(2, 5.5)}`,
+          '&.MuiButton-contained': {
+            padding: `${theme.spacing(2, 6.5)}`
+          },
+          '&.MuiButton-outlined': {
+            lineHeight: 1.6,
+            padding: `${theme.spacing(2, 6.25)}`
+          }
+        }
+      }
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: themeConfig.disableRipple
+      }
+    }
+  }
+}
+
+export default Button

package/src/@core/theme/overrides/buttonGroup.js

@@ -0,0 +1,9 @@
+export default {
+  MuiButtonGroup: {
+    styleOverrides: {
+      root: {
+        borderRadius: 8
+      }
+    }
+  }
+}