robobyte-front-builder 1.0.0

package/src/@core/styles/libs/recharts/index.js

@@ -0,0 +1,47 @@
+// ** MUI imports
+import { styled } from '@mui/material/styles'
+
+const RechartsWrapper = styled('div')(({ theme }) => ({
+  '& .recharts-cartesian-grid-vertical, & .recharts-cartesian-grid-horizontal, & .recharts-polar-grid-angle, & .recharts-polar-radius-axis, & .recharts-cartesian-axis':
+    {
+      '& line': {
+        stroke: theme.palette.divider
+      }
+    },
+  '& .recharts-polar-grid-concentric-polygon': {
+    stroke: theme.palette.divider
+  },
+  '& .recharts-cartesian-axis-tick-value, & .recharts-polar-radius-axis-tick-value': {
+    fill: theme.palette.text.primary
+  },
+  '& .recharts-default-tooltip': {
+    border: 'none !important',
+    boxShadow: theme.shadows[2],
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: `${theme.palette.background.paper} !important`
+  },
+  '& .recharts-custom-tooltip': {
+    padding: theme.spacing(2.5),
+    boxShadow: theme.shadows[2],
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.background.paper
+  },
+  '& .recharts-tooltip-cursor': {
+    fill: theme.palette.action.hover
+  },
+  '& .recharts-yAxis .recharts-cartesian-axis-ticks .recharts-cartesian-axis-tick .recharts-cartesian-axis-tick-value':
+    {
+      textAnchor: theme.direction === 'rtl' ? 'end' : undefined
+    },
+  '& .recharts-active-dot .recharts-dot': {
+    fill: theme.palette.secondary.main
+  },
+  '& .recharts-polar-angle-axis-tick-value': {
+    fill: theme.palette.text.primary
+  },
+  '& .recharts-tooltip-item': {
+    color: `${theme.palette.text.primary} !important`
+  }
+}))
+
+export default RechartsWrapper

package/src/@core/styles/stepper.js

@@ -0,0 +1,103 @@
+// MUI imports
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+
+const StepperWrapper = styled(Box)(({ theme }) => {
+  return {
+    [theme.breakpoints.down('md')]: {
+      '& .MuiStepper-horizontal:not(.MuiStepper-alternativeLabel)': {
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+      }
+    },
+    '& .MuiStep-root': {
+      '& .MuiStepLabel-iconContainer:empty': {
+        display: 'none'
+      },
+      '& .step-label': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      '& .step-number': {
+        ...theme.typography.h4,
+        marginInlineEnd: theme.spacing(2),
+        color: 'var(--mui-palette-text-primary)'
+      },
+      '&:not(:has(.step-subtitle)) .step-number': {
+        ...theme.typography.h6
+      },
+      '& .step-title': {
+        ...theme.typography.body1,
+        fontWeight: 500,
+        color: 'var(--mui-palette-text-primary)'
+      },
+      '& .step-subtitle': {
+        ...theme.typography.body2,
+        color: 'var(--mui-palette-text-secondary)'
+      },
+      '& .MuiStepLabel-root.Mui-disabled': {
+        '& .step-number': {
+          color: 'var(--mui-palette-text-disabled)'
+        }
+      },
+      '& .Mui-error': {
+        '& .MuiStepLabel-labelContainer, & .step-number, & .step-title, & .step-subtitle': {
+          color: 'var(--mui-palette-error-main) !important'
+        }
+      }
+    },
+    '& .MuiStepConnector-root': {
+      '& .MuiStepConnector-line': {
+        borderBlockStartWidth: 3,
+        borderRadius: 3
+      },
+      '&.Mui-active, &.Mui-completed': {
+        '& .MuiStepConnector-line': {
+          borderColor: 'var(--mui-palette-primary-main)'
+        }
+      },
+      '&.Mui-disabled .MuiStepConnector-line': {
+        borderColor: 'var(--mui-palette-primary-lightOpacity)'
+      }
+    },
+    '& .MuiStepper-alternativeLabel': {
+      '& .MuiStepConnector-root': {
+        top: 9
+      },
+      '& .MuiStepLabel-labelContainer': {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column'
+      }
+    },
+    '& .MuiStepper-vertical': {
+      '& .MuiStep-root': {
+        '& .step-label': {
+          justifyContent: 'flex-start'
+        },
+        '& .MuiStepContent-root': {
+          borderInlineStartWidth: 3,
+          marginInlineStart: theme.spacing(2.25),
+          borderColor: 'var(--mui-palette-primary-main)'
+        },
+        '& .button-wrapper': {
+          marginTop: theme.spacing(4)
+        },
+        '&.active + .MuiStepConnector-root .MuiStepConnector-line': {
+          borderColor: 'var(--mui-palette-primary-main)'
+        }
+      },
+      '& .MuiStepConnector-root': {
+        marginInlineStart: theme.spacing(2.25),
+        '& .MuiStepConnector-line': {
+          borderBlockStartWidth: 0,
+          borderInlineStartWidth: 3,
+          borderRadius: 0
+        }
+      }
+    }
+  }
+})
+
+export default StepperWrapper

package/src/@core/styles/vertical/menuItemStyles.js

@@ -0,0 +1,138 @@
+// Util Imports
+import { menuClasses } from '@menu/utils/menuClasses'
+
+const menuItemStyles = (verticalNavOptions, theme) => {
+  // Vars
+  const { isCollapsed, collapsedWidth, isHovered, isPopoutWhenCollapsed, transitionDuration } = verticalNavOptions
+  const popoutCollapsed = isPopoutWhenCollapsed && isCollapsed
+  const popoutExpanded = isPopoutWhenCollapsed && !isCollapsed
+  const collapsedNotHovered = isCollapsed && !isHovered
+
+  return {
+    root: ({ level }) => ({
+      ...(!isPopoutWhenCollapsed || popoutExpanded || (popoutCollapsed && level === 0)
+        ? {
+            marginBlockStart: theme.spacing(1)
+          }
+        : {
+            marginBlockStart: 0
+          }),
+      [`&.${menuClasses.subMenuRoot}.${menuClasses.open} > .${menuClasses.button}, &.${menuClasses.subMenuRoot} > .${menuClasses.button}.${menuClasses.active}`]:
+        {
+          backgroundColor: 'var(--mui-palette-action-selected) !important'
+        },
+      [`&.${menuClasses.disabled} > .${menuClasses.button}`]: {
+        color: 'var(--mui-palette-text-disabled)'
+      },
+      [`&:not(.${menuClasses.subMenuRoot}) > .${menuClasses.button}.${menuClasses.active}`]: {
+        ...(popoutCollapsed && level > 0
+          ? {
+              backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
+              color: 'var(--mui-palette-primary-main)',
+              [`& .${menuClasses.icon}`]: {
+                color: 'var(--mui-palette-primary-main)'
+              }
+            }
+          : {
+              color: 'var(--mui-palette-primary-contrastText)',
+              backgroundColor: 'var(--mui-palette-primary-main)',
+              boxShadow: 'var(--mui-customShadows-xs)',
+              [`& .${menuClasses.icon}`]: {
+                color: 'inherit'
+              }
+            })
+      }
+    }),
+    button: ({ level, active }) => ({
+      paddingBlock: '8px',
+      ...(!(isCollapsed && !isHovered) && {
+        '&:has(.MuiChip-root)': {
+          paddingBlock: theme.spacing(1.75)
+        }
+      }),
+      ...((!isPopoutWhenCollapsed || popoutExpanded || (popoutCollapsed && level === 0)) && {
+        borderRadius: 'var(--mui-shape-customBorderRadius-lg)',
+        transition: `padding-inline-start ${transitionDuration}ms ease-in-out`,
+        paddingInlineStart: theme.spacing(collapsedNotHovered ? (collapsedWidth - 47) / 8 : 3),
+        paddingInlineEnd: theme.spacing(collapsedNotHovered ? (collapsedWidth - 47) / 8 : 3)
+      }),
+      ...(!active && {
+        '&:hover, &:focus-visible': {
+          backgroundColor: 'var(--mui-palette-action-hover)'
+        },
+        '&[aria-expanded="true"]': {
+          backgroundColor: 'var(--mui-palette-action-selected)'
+        }
+      })
+    }),
+    icon: ({ level }) => ({
+      transition: `margin-inline-end ${transitionDuration}ms ease-in-out`,
+      ...(level === 0 && {
+        fontSize: '1.375rem',
+        marginInlineEnd: theme.spacing(2)
+      }),
+      ...(level > 0 && {
+        fontSize: '0.5rem',
+        color: 'var(--mui-palette-text-disabled)',
+        marginInlineEnd: theme.spacing(4)
+      }),
+      ...(level === 1 &&
+        !popoutCollapsed && {
+          marginInlineStart: theme.spacing(1.5)
+        }),
+      ...(level > 1 && {
+        marginInlineStart: theme.spacing((popoutCollapsed ? 0 : 1.5) + 2.5 * (level - 1))
+      }),
+      ...(collapsedNotHovered && {
+        marginInlineEnd: 0
+      }),
+      ...(popoutCollapsed &&
+        level > 0 && {
+          marginInlineEnd: theme.spacing(2)
+        }),
+      '& > i, & > svg': {
+        fontSize: 'inherit'
+      }
+    }),
+    prefix: {
+      marginInlineEnd: theme.spacing(2)
+    },
+    label: ({ level }) => ({
+      ...((!isPopoutWhenCollapsed || popoutExpanded || (popoutCollapsed && level === 0)) && {
+        transition: `opacity ${transitionDuration}ms ease-in-out`,
+        ...(collapsedNotHovered && {
+          opacity: 0
+        })
+      })
+    }),
+    suffix: {
+      marginInlineStart: theme.spacing(2)
+    },
+    subMenuExpandIcon: {
+      fontSize: '1.375rem',
+      marginInlineStart: theme.spacing(2),
+      '& i, & svg': {
+        fontSize: 'inherit'
+      }
+    },
+    subMenuContent: ({ level }) => ({
+      zIndex: 'calc(var(--drawer-z-index) + 1)',
+      backgroundColor: popoutCollapsed ? 'var(--mui-palette-background-paper)' : 'transparent',
+      ...(popoutCollapsed &&
+        level === 0 && {
+          paddingBlock: theme.spacing(2),
+          borderRadius: 'var(--mui-shape-borderRadius)',
+          boxShadow: 'var(--mui-customShadows-lg)',
+          '[data-skin="bordered"] ~ [data-floating-ui-portal] &': {
+            boxShadow: 'none',
+            border: '1px solid var(--mui-palette-divider)'
+          },
+          [`& .${menuClasses.button}`]: {
+            paddingInline: theme.spacing(4)
+          }
+        })
+    })
+  }
+}
+
+export default menuItemStyles

package/src/@core/styles/vertical/menuSectionStyles.js

@@ -0,0 +1,54 @@
+// Util Imports
+import { menuClasses } from '@menu/utils/menuClasses'
+
+const menuSectionStyles = (verticalNavOptions, theme) => {
+  // Vars
+  const { isCollapsed, isHovered, collapsedWidth } = verticalNavOptions
+  const collapsedNotHovered = isCollapsed && !isHovered
+
+  return {
+    root: {
+      marginBlockStart: theme.spacing(6.75),
+      [`& .${menuClasses.menuSectionContent}`]: {
+        color: 'var(--mui-palette-text-disabled)',
+        paddingInline: '0 !important',
+        paddingBlock: `${theme.spacing(collapsedNotHovered ? 3.825 : 1.75)} !important`,
+        marginBlockEnd: theme.spacing(2),
+        gap: theme.spacing(2.5),
+        ...(collapsedNotHovered && {
+          paddingInlineStart: `${theme.spacing(collapsedNotHovered ? (collapsedWidth - 47) / 8 : 3)} !important`,
+          paddingInlineEnd: `${theme.spacing(collapsedNotHovered ? (collapsedWidth - 47) / 8 : 3)} !important`
+        }),
+        '&:before': {
+          content: '""',
+          blockSize: 1,
+          inlineSize: collapsedNotHovered ? '1.375rem' : '0.875rem',
+          backgroundColor: 'var(--mui-palette-divider)'
+        },
+        ...(collapsedNotHovered && {
+          paddingInline: '12px !important'
+        }),
+        ...(!collapsedNotHovered && {
+          '&:after': {
+            content: '""',
+            blockSize: 1,
+            flexGrow: 1,
+            backgroundColor: 'var(--mui-palette-divider)'
+          }
+        }),
+        [`& .${menuClasses.menuSectionLabel}`]: {
+          flexGrow: 0,
+          textTransform: 'uppercase',
+          fontSize: '13px',
+          lineHeight: 1.38462,
+          letterSpacing: '0.4px',
+          ...(collapsedNotHovered && {
+            display: 'none'
+          })
+        }
+      }
+    }
+  }
+}
+
+export default menuSectionStyles

package/src/@core/styles/vertical/navigationCustomStyles.js

@@ -0,0 +1,62 @@
+// Util Imports
+import { menuClasses, verticalNavClasses } from '@menu/utils/menuClasses'
+
+const navigationCustomStyles = (verticalNavOptions, theme) => {
+  // Vars
+  const { isCollapsed, isHovered, collapsedWidth, transitionDuration } = verticalNavOptions
+  const collapsedHovered = isCollapsed && isHovered
+  const collapsedNotHovered = isCollapsed && !isHovered
+
+  return {
+    color: 'var(--mui-palette-text-primary)',
+    zIndex: 'var(--drawer-z-index) !important',
+    [`& .${verticalNavClasses.header}`]: {
+      paddingBlock: theme.spacing(5),
+      paddingInline: theme.spacing(5.5, 4),
+      ...(collapsedNotHovered && {
+        paddingInline: theme.spacing((collapsedWidth - 42) / 8),
+        '& a': {
+          transform: `translateX(-${22 - (collapsedWidth - 42) / 2}px)`
+        }
+      }),
+      '& a': {
+        transition: `transform ${transitionDuration}ms ease`
+      }
+    },
+    [`& .${verticalNavClasses.container}`]: {
+      transition: theme.transitions.create(['inline-size', 'inset-inline-start', 'box-shadow'], {
+        duration: transitionDuration,
+        easing: 'ease-in-out'
+      }),
+      borderColor: 'transparent',
+      ...(collapsedHovered && {
+        boxShadow: 'var(--mui-customShadows-lg)'
+      }),
+      [`& .${verticalNavClasses.toggled}`]: {
+        boxShadow: 'var(--mui-customShadows-lg)'
+      },
+      '[data-skin="bordered"] &': {
+        borderColor: 'var(--mui-palette-divider)'
+      }
+    },
+    [`& .${verticalNavClasses.header} > span svg`]: {
+      transition: `transform ${transitionDuration}ms ease-in-out`,
+      transform: `rotate(${collapsedHovered ? '180deg' : '0deg'})`,
+      '[dir="rtl"] &': {
+        transform: `rotate(${collapsedHovered ? '0deg' : '180deg'})`
+      }
+    },
+    [`& .${menuClasses.menuSectionContent}`]: {
+      color: 'var(--mui-palette-text-disabled)'
+    },
+    [`& .${menuClasses.root}`]: {
+      paddingBlock: theme.spacing(1),
+      paddingInline: theme.spacing(3)
+    },
+    [`& .${verticalNavClasses.backdrop}`]: {
+      backgroundColor: 'var(--backdrop-color)'
+    }
+  }
+}
+
+export default navigationCustomStyles

package/src/@core/svg/ContentCompact.jsx

@@ -0,0 +1,17 @@
+const ContentCompact = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <rect x='19.4209' y='4.67169' width='64.7547' height='8.8' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='22.3447' y='6.87164' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='65.5146' y='6.87164' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='71.4014' y='6.87164' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='77.2881' y='6.87164' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='44.3525' y='19.6135' width='40.2264' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='19.4209' y='19.6135' width='19.0455' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='19.4209' y='42.4545' width='65.1591' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+    </svg>
+  )
+}
+
+export default ContentCompact

package/src/@core/svg/ContentWide.jsx

@@ -0,0 +1,17 @@
+const ContentWide = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <rect x='6.6875' y='4.67169' width='90.6244' height='8.8' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='10.165' y='6.87164' width='4.90566' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='75.2002' y='6.87164' width='4.90566' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='82.0674' y='6.87164' width='4.90566' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='88.9346' y='6.87164' width='4.90566' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='41.3652' y='19.6135' width='55.9476' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='6.6875' y='19.6135' width='26.4888' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='6.6875' y='42.4545' width='90.6244' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+    </svg>
+  )
+}
+
+export default ContentWide

package/src/@core/svg/DirectionLtr.jsx

@@ -0,0 +1,93 @@
+const DirectionLtr = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <rect x='5.20215' y='4.12146' width='24.0976' height='57.5885' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect
+        x='10.3232'
+        y='16.8697'
+        width='13.8545'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='10.3232'
+        y='25.5618'
+        width='9.87943'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='10.3232'
+        y='34.2538'
+        width='12.3826'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='10.3232' y='42.946' width='6.08818' height='2.0921' rx='1.04605' fill='currentColor' fillOpacity='0.3' />
+      <rect
+        x='10.3232'
+        y='51.6384'
+        width='8.09094'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='35.5137' y='4.12134' width='62.3885' height='57.5885' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect
+        x='43.7578'
+        y='14.1833'
+        width='13.8545'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='43.7578'
+        y='22.8753'
+        width='32.8013'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='43.7578'
+        y='31.5674'
+        width='41.2076'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='43.7578'
+        y='40.2593'
+        width='32.8013'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='43.7578'
+        y='48.9517'
+        width='5.77482'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+    </svg>
+  )
+}
+
+export default DirectionLtr

package/src/@core/svg/DirectionRtl.jsx

@@ -0,0 +1,93 @@
+const DirectionRtl = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <rect x='73.4756' y='4.12134' width='24.0976' height='57.5885' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect
+        x='78.5986'
+        y='16.8697'
+        width='13.8545'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='82.5713'
+        y='25.5618'
+        width='9.87943'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='80.0693'
+        y='34.2537'
+        width='12.3826'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='86.3633'
+        y='42.9459'
+        width='6.08818'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='84.3613'
+        y='51.6382'
+        width='8.09094'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='5.20215' y='4.12146' width='62.3885' height='57.5885' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='45.709' y='14.1833' width='13.8545' height='2.0921' rx='1.04605' fill='currentColor' fillOpacity='0.3' />
+      <rect
+        x='26.7617'
+        y='22.8754'
+        width='32.8013'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='18.3555'
+        y='31.5674'
+        width='41.2076'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='26.7617'
+        y='40.2594'
+        width='32.8013'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='53.7881'
+        y='48.9517'
+        width='5.77482'
+        height='2.0921'
+        rx='1.04605'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+    </svg>
+  )
+}
+
+export default DirectionRtl