ece-docs-components 1.0.5 → 1.0.6

package/dist/ThemeProvider.d.ts

@@ -22,6 +22,10 @@ declare const themeConfigs: {
             markedRead: {
                 main: string;
             };
+            text: {
+                primary: string;
+                secondary: string;
+            };
             custom: {
                 iconColor: string;
                 primaryButtonTextColor: string;
@@ -53,6 +57,10 @@ declare const themeConfigs: {
             markedRead: {
                 main: string;
             };
+            text: {
+                primary: string;
+                secondary: string;
+            };
             custom: {
                 primaryButtonTextColor: string;
                 stepIndicatorTextColor: string;
@@ -80,6 +88,10 @@ declare const themeConfigs: {
             markedRead: {
                 main: string;
             };
+            text: {
+                primary: string;
+                secondary: string;
+            };
             custom: {
                 iconColor: string;
                 primaryButtonTextColor: string;

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAqC,MAAM,sBAAsB,CAAC;AAEtF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,eAAe,CAAC;AAgCvB,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAC;AAOjD,UAAU,gBAAgB;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;CACvC;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAajE,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAqC,MAAM,sBAAsB,CAAC;AAEtF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,eAAe,CAAC;AAgDvB,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEjB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAC;AAMjD,UAAU,gBAAgB;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;CACvC;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAYjE,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}

package/dist/cjs/ThemeProvider.js

@@ -0,0 +1,158 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@mui/material/styles');
+var utils = require('@mui/utils');
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const baseTheme = styles.createTheme({
+    palette: {
+        text: {
+            primary: '#4D3019',
+            secondary: '#826E5C',
+        }
+    },
+    typography: {
+        fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),
+        allVariants: {
+            color: '#4D3019'
+        }
+    },
+    components: {
+        MuiTypography: {
+            styleOverrides: {
+                root: {
+                    color: '#4D3019',
+                },
+            },
+        },
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    WebkitFontSmoothing: 'antialiased',
+                    MozOsxFontSmoothing: 'grayscale',
+                    backgroundColor: '#FDFCEE',
+                    color: '#4D3019',
+                },
+                'input[type="checkbox"], input[type="radio"]': {
+                    accentColor: '#D79AFC',
+                },
+            },
+        },
+    },
+    breakpoints: {
+        values: {
+            xs: 320,
+            sm: 640,
+            md: 768,
+            lg: 1024,
+            xl: 1280,
+        },
+    },
+});
+const themeConfigs = {
+    default: {
+        palette: {
+            primary: { main: '#AD46FF' },
+            secondary: { main: '#D79AFC' },
+            accent: { main: '#FFEDD1' },
+            dark: { main: '#4D3019' },
+            light: { main: '#FEFDF7' },
+            markedRead: { main: '#A3D977' },
+            text: {
+                primary: '#4D3019',
+                secondary: '#826E5C',
+            },
+            custom: {
+                iconColor: '#ebc7ff',
+                primaryButtonTextColor: '#FFFFFF',
+                readByBackgroundColor: '#ebc7ff',
+                stepIndicatorTextColor: '#FFFFFF',
+                markAsReadBackgroundColor: '#ebc7ff',
+                tabBackgroundColor: '#F8F0FC',
+            },
+        },
+        appName: 'ECE Docs',
+    },
+    school: {
+        palette: {
+            primary: { main: '#386e41' },
+            secondary: { main: '#8fc790' },
+            accent: { main: '#d5ebde' },
+            dark: { main: '#4D3019' },
+            light: { main: '#FEFDF7' },
+            markedRead: { main: '#A3D977' },
+            text: {
+                primary: '#4D3019',
+                secondary: '#826E5C',
+            },
+            custom: {
+                primaryButtonTextColor: '#FFFFFF',
+                stepIndicatorTextColor: '#FFFFFF',
+            },
+        },
+        appName: 'School Docs',
+    },
+    health: {
+        palette: {
+            primary: { main: '#4871cf' },
+            secondary: { main: '#a4d6ff' },
+            accent: { main: '#FF9ecb' },
+            dark: { main: '#4D3019' },
+            light: { main: '#FEFDF7' },
+            markedRead: { main: '#A3D977' },
+            text: {
+                primary: '#4D3019',
+                secondary: '#826E5C',
+            },
+            custom: {
+                iconColor: '#a4d6ff',
+                primaryButtonTextColor: '#FFFFFF',
+                markAsReadBorderColor: '#FF9ecb',
+                readByBackgroundColor: '#a4d6ff',
+                stepIndicatorTextColor: '#FFFFFF',
+                tabBackgroundColor: '#a4d6ff',
+            },
+        },
+        appName: 'GP Docs',
+    },
+};
+const createMuiTheme = (key) => {
+    return styles.createTheme(utils.deepmerge(baseTheme, themeConfigs[key]));
+};
+const ThemeContext = React__namespace.createContext(undefined);
+const ThemeProvider = ({ children }) => {
+    const [currentTheme, setCurrentTheme] = React__namespace.useState('default');
+    const theme = React__namespace.useMemo(() => createMuiTheme(currentTheme), [currentTheme]);
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { currentTheme, setTheme: setCurrentTheme, theme }, children: jsxRuntime.jsx(styles.ThemeProvider, { theme: theme, children: children }) }));
+};
+const useTheme = () => {
+    const context = React__namespace.useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};
+
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/cjs/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/ThemeProvider.tsx"],"sourcesContent":["import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';\r\nimport { deepmerge } from '@mui/utils';\r\nimport * as React from 'react';\r\nimport './theme-types';\r\n\r\nconst baseTheme = createTheme({\r\n  palette: {\r\n    text: {\r\n      primary: '#4D3019',\r\n      secondary: '#826E5C',\r\n    }\r\n  },\r\n  typography: {\r\n    fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),\r\n    allVariants: {\r\n      color: '#4D3019'\r\n    }\r\n  },\r\n  components: {\r\n    MuiTypography: {\r\n      styleOverrides: {\r\n        root: {\r\n          color: '#4D3019',\r\n        },\r\n      },\r\n    },\r\n    MuiCssBaseline: {\r\n      styleOverrides: {\r\n        body: {\r\n          WebkitFontSmoothing: 'antialiased',\r\n          MozOsxFontSmoothing: 'grayscale',\r\n          backgroundColor: '#FDFCEE',\r\n          color: '#4D3019',\r\n        },\r\n        'input[type=\"checkbox\"], input[type=\"radio\"]': {\r\n          accentColor: '#D79AFC',\r\n        },\r\n      },\r\n    },\r\n  },\r\n  breakpoints: {\r\n    values: {\r\n      xs: 320,\r\n      sm: 640,\r\n      md: 768,\r\n      lg: 1024,\r\n      xl: 1280,\r\n    },\r\n  },\r\n});\r\n\r\nconst themeConfigs = {\r\n  default: {\r\n    palette: {\r\n      primary: { main: '#AD46FF' },\r\n      secondary: { main: '#D79AFC' },\r\n      accent: { main: '#FFEDD1' },\r\n      dark: { main: '#4D3019' },\r\n      light: { main: '#FEFDF7' },\r\n      markedRead: { main: '#A3D977' },\r\n      text: {\r\n        primary: '#4D3019',\r\n        secondary: '#826E5C',\r\n      },\r\n      custom: {\r\n        iconColor: '#ebc7ff',\r\n        primaryButtonTextColor: '#FFFFFF',\r\n        readByBackgroundColor: '#ebc7ff',\r\n        stepIndicatorTextColor: '#FFFFFF',\r\n        markAsReadBackgroundColor: '#ebc7ff',\r\n        tabBackgroundColor: '#F8F0FC',\r\n      },\r\n    },\r\n    appName: 'ECE Docs',\r\n  },\r\n  school: {\r\n    palette: {\r\n      primary: { main: '#386e41' },\r\n      secondary: { main: '#8fc790' },\r\n      accent: { main: '#d5ebde' },\r\n      dark: { main: '#4D3019' },\r\n      light: { main: '#FEFDF7' },\r\n      markedRead: { main: '#A3D977' },\r\n      text: {\r\n        primary: '#4D3019',\r\n        secondary: '#826E5C',\r\n      },\r\n      custom: {\r\n        primaryButtonTextColor: '#FFFFFF',\r\n        stepIndicatorTextColor: '#FFFFFF',\r\n      },\r\n    },\r\n    appName: 'School Docs',\r\n  },\r\n  health: {\r\n    palette: {\r\n      primary: { main: '#4871cf' },\r\n      secondary: { main: '#a4d6ff' },\r\n      accent: { main: '#FF9ecb' },\r\n      dark: { main: '#4D3019' },\r\n      light: { main: '#FEFDF7' },\r\n      markedRead: { main: '#A3D977' },\r\n      text: {\r\n        primary: '#4D3019',\r\n        secondary: '#826E5C',\r\n      },\r\n      custom: {\r\n        iconColor: '#a4d6ff',\r\n        primaryButtonTextColor: '#FFFFFF',\r\n        markAsReadBorderColor: '#FF9ecb',\r\n        readByBackgroundColor: '#a4d6ff',\r\n        stepIndicatorTextColor: '#FFFFFF',\r\n        tabBackgroundColor: '#a4d6ff',\r\n      },\r\n    },\r\n    appName: 'GP Docs',\r\n  },\r\n};\r\n\r\nexport type ThemeKey = keyof typeof themeConfigs;\r\n\r\nconst createMuiTheme = (key: ThemeKey) => {\r\n  return createTheme(deepmerge(baseTheme, themeConfigs[key]));\r\n};\r\n\r\ninterface ThemeContextType {\r\n  currentTheme: ThemeKey;\r\n  setTheme: (theme: ThemeKey) => void;\r\n  theme: ReturnType<typeof createTheme>;\r\n}\r\n\r\nconst ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  const [currentTheme, setCurrentTheme] = React.useState<ThemeKey>('default');\r\n  \r\n  const theme = React.useMemo(() => createMuiTheme(currentTheme), [currentTheme]);\r\n\r\n  return (\r\n    <ThemeContext.Provider value={{ currentTheme, setTheme: setCurrentTheme, theme }}>\r\n      <MuiThemeProvider theme={theme}>\r\n        {children}\r\n      </MuiThemeProvider>\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n\r\nexport const useTheme = () => {\r\n  const context = React.useContext(ThemeContext);\r\n  if (context === undefined) {\r\n    throw new Error('useTheme must be used within a ThemeProvider');\r\n  }\r\n  return context;\r\n};\r\n"],"names":["createTheme","deepmerge","React","_jsx","MuiThemeProvider"],"mappings":"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"}

package/dist/cjs/components/ActionButton.js

@@ -0,0 +1,31 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+const StyledIconButton = material.styled(material.IconButton)(({ theme }) => ({
+    width: 48,
+    height: 48,
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2,
+    backgroundColor: '#fff',
+    border: `1px solid ${theme.palette.dark.main}1A`,
+    '&:hover': {
+        backgroundColor: '#f9fafb',
+    },
+    '& svg': {
+        color: '#4D3019',
+        transition: 'color 0.2s',
+    },
+    '&:hover svg': {
+        color: theme.palette.primary.main,
+    },
+}));
+const ActionButton = ({ icon: Icon, onClick, label, sx, }) => {
+    return (jsxRuntime.jsx(StyledIconButton, { onClick: onClick, "aria-label": label, sx: sx, children: jsxRuntime.jsx(Icon, {}) }));
+};
+
+exports.ActionButton = ActionButton;
+//# sourceMappingURL=ActionButton.js.map

package/dist/cjs/components/ActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.js","sources":["../../../../src/components/ActionButton.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { IconButton, styled, SxProps, Theme } from '@mui/material';\nimport { SvgIconComponent } from '@mui/icons-material';\n\ninterface ActionButtonProps {\n  icon: SvgIconComponent;\n  onClick?: () => void;\n  label?: string;\n  sx?: SxProps<Theme>;\n}\n\nconst StyledIconButton = styled(IconButton)(({ theme }) => ({\n  width: 48,\n  height: 48,\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n    ? parseInt(theme.shape.borderRadius, 10)\n    : theme.shape.borderRadius || 4) * 2,\n  backgroundColor: '#fff',\n  border: `1px solid ${theme.palette.dark.main}1A`,\n  '&:hover': {\n    backgroundColor: '#f9fafb',\n  },\n  '& svg': {\n    color: '#4D3019',\n    transition: 'color 0.2s',\n  },\n  '&:hover svg': {\n    color: theme.palette.primary.main,\n  },\n}));\n\nexport const ActionButton: React.FC<ActionButtonProps> = ({\n  icon: Icon,\n  onClick,\n  label,\n  sx,\n}) => {\n  return (\n    <StyledIconButton\n      onClick={onClick}\n      aria-label={label}\n      sx={sx}\n    >\n      <Icon />\n    </StyledIconButton>\n  );\n};"],"names":[],"mappings":";;;;;;AAaA;AACE;AACA;;;;AAIA;;AAEA;AACE;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACD;AACF;AAEM;AAML;AASF;;"}

package/dist/cjs/components/Alert.js

@@ -0,0 +1,79 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var iconsMaterial = require('@mui/icons-material');
+
+const StyledAlert = material.styled(material.Alert)(({ theme, customvariant }) => {
+    const variants = {
+        info: {
+            backgroundColor: '#eff6ff',
+            borderColor: '#bfdbfe',
+            color: '#1e3a8a',
+        },
+        success: {
+            backgroundColor: '#f0fdf4',
+            borderColor: '#bbf7d0',
+            color: '#14532d',
+        },
+        warning: {
+            backgroundColor: '#fefce8',
+            borderColor: '#fef08a',
+            color: '#713f12',
+        },
+        error: {
+            backgroundColor: '#fef2f2',
+            borderColor: '#fecaca',
+            color: '#7f1d1d',
+        },
+        custom: {
+            backgroundColor: theme.palette.light.main,
+            borderColor: `${theme.palette.dark.main}33`,
+            color: theme.palette.dark.main,
+        },
+    };
+    const variantKey = customvariant || 'info';
+    const style = variants[variantKey];
+    return {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: theme.spacing(1.5),
+        padding: theme.spacing(2),
+        border: `1px solid ${style.borderColor}`,
+        borderRadius: (typeof theme.shape.borderRadius === 'string'
+            ? parseInt(theme.shape.borderRadius, 10)
+            : theme.shape.borderRadius || 4) * 2,
+        backgroundColor: style.backgroundColor,
+        color: style.color,
+        '& .MuiAlert-icon': {
+            marginRight: 0,
+            padding: 0,
+            marginTop: '2px',
+        },
+        '& .MuiAlert-message': {
+            padding: 0,
+            flex: 1,
+        },
+    };
+});
+const Alert = ({ variant = 'info', children, className = '', icon = true, sx, }) => {
+    const iconMap = {
+        info: jsxRuntime.jsx(iconsMaterial.InfoOutlineRounded, { sx: { fontSize: 20 } }),
+        success: jsxRuntime.jsx(iconsMaterial.TaskAltRounded, { sx: { fontSize: 20 } }),
+        warning: jsxRuntime.jsx(iconsMaterial.ErrorOutlineRounded, { sx: { fontSize: 20 } }),
+        error: jsxRuntime.jsx(iconsMaterial.HighlightOffRounded, { sx: { fontSize: 20 } }),
+        custom: jsxRuntime.jsx(iconsMaterial.InfoOutlineRounded, { sx: { fontSize: 20 } }),
+    };
+    const severityMap = {
+        info: 'info',
+        success: 'success',
+        warning: 'warning',
+        error: 'error',
+        custom: 'info',
+    };
+    return (jsxRuntime.jsx(StyledAlert, { customvariant: variant, severity: severityMap[variant], icon: icon ? iconMap[variant] : false, className: className, sx: sx, children: children }));
+};
+
+exports.Alert = Alert;
+//# sourceMappingURL=Alert.js.map

package/dist/cjs/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Alert as MuiAlert, AlertProps as MuiAlertProps, styled, SxProps, Theme } from '@mui/material';\nimport InfoOutlineIcon from '@mui/icons-material/InfoOutline';\nimport { ErrorOutlineRounded, HighlightOffRounded, InfoOutlineRounded, TaskAltRounded } from '@mui/icons-material';\n\ninterface AlertProps {\n  variant?: 'info' | 'success' | 'warning' | 'error' | 'custom';\n  children: React.ReactNode;\n  className?: string;\n  icon?: boolean;\n  sx?: SxProps<Theme>; \n}\n\nconst StyledAlert = styled(MuiAlert)<{ customvariant?: string }>(({ theme, customvariant }) => {\n  const variants = {\n    info: {\n      backgroundColor: '#eff6ff',\n      borderColor: '#bfdbfe',\n      color: '#1e3a8a',\n    },\n    success: {\n      backgroundColor: '#f0fdf4',\n      borderColor: '#bbf7d0',\n      color: '#14532d',\n    },\n    warning: {\n      backgroundColor: '#fefce8',\n      borderColor: '#fef08a',\n      color: '#713f12',\n    },\n    error: {\n      backgroundColor: '#fef2f2',\n      borderColor: '#fecaca',\n      color: '#7f1d1d',\n    },\n    custom: {\n      backgroundColor: theme.palette.light.main,\n      borderColor: `${theme.palette.dark.main}33`,\n      color: theme.palette.dark.main,\n    },\n  };\n\n  const variantKey = customvariant as keyof typeof variants || 'info';\n  const style = variants[variantKey];\n\n  return {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: theme.spacing(1.5),\n    padding: theme.spacing(2),\n    border: `1px solid ${style.borderColor}`,\n    borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n    backgroundColor: style.backgroundColor,\n    color: style.color,\n    '& .MuiAlert-icon': {\n      marginRight: 0,\n      padding: 0,\n      marginTop: '2px',\n    },\n    '& .MuiAlert-message': {\n      padding: 0,\n      flex: 1,\n    },\n  };\n});\n\nexport const Alert: React.FC<AlertProps> = ({\n  variant = 'info',\n  children,\n  className = '',\n  icon = true,\n  sx,\n}) => {\n  const iconMap = {\n    info: <InfoOutlineRounded sx={{fontSize: 20}} />,\n    success: <TaskAltRounded sx={{fontSize: 20}} />,\n    warning: <ErrorOutlineRounded sx={{fontSize: 20}} />,\n    error: <HighlightOffRounded  sx={{fontSize: 20}} />,\n    custom: <InfoOutlineRounded sx={{fontSize: 20}} />,\n  };\n\n  const severityMap: Record<string, MuiAlertProps['severity']> = {\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n    error: 'error',\n    custom: 'info',\n  };\n\n  return (\n    <StyledAlert\n      customvariant={variant}\n      severity={severityMap[variant]}\n      icon={icon ? iconMap[variant] : false}\n      className={className}\n      sx={sx}\n    >\n      {children}\n    </StyledAlert>\n  );\n};"],"names":[],"mappings":";;;;;;;AAeA;AACE;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;;AAEA;AACD;;AAGH;AACA;;AAGE;AACA;AACA;AACA;AACA;;;;;;AAMA;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACD;;AAEL;;AASE;;;;;;;AAQA;AACE;AACA;AACA;AACA;AACA;;AAGF;AAWF;;"}

package/dist/cjs/components/Breadcrumb.js

@@ -0,0 +1,120 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var ThemeProvider = require('../ThemeProvider.js');
+var iconsMaterial = require('@mui/icons-material');
+
+const HomeButton = material.styled(material.IconButton)(({ theme }) => ({
+    width: 40,
+    height: 40,
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2,
+    backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,
+    flexShrink: 0,
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+        display: 'flex',
+    },
+    '&:hover': {
+        backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,
+        opacity: 0.8,
+    },
+}));
+const DropdownButton = material.styled('button')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    padding: theme.spacing(0.75, 2),
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2,
+    border: `1px solid ${theme.palette.dark.main}33`,
+    backgroundColor: '#fff',
+    color: theme.palette.dark.main,
+    fontWeight: 500,
+    whiteSpace: 'nowrap',
+    cursor: 'pointer',
+    transition: 'border-color 0.2s',
+    fontSize: '0.875rem',
+    '&:hover': {
+        borderColor: `${theme.palette.dark.main}4D`,
+    },
+    [theme.breakpoints.down('sm')]: {
+        padding: theme.spacing(0.75, 1),
+        gap: theme.spacing(0.5),
+    },
+}));
+const StyledMenu = material.styled(material.Menu)(({ theme }) => ({
+    '& .MuiPaper-root': {
+        marginTop: theme.spacing(1),
+        width: '256px',
+        borderRadius: (typeof theme.shape.borderRadius === 'string'
+            ? parseInt(theme.shape.borderRadius, 10)
+            : theme.shape.borderRadius || 4) * 2,
+        border: `1px solid ${theme.palette.dark.main}33`,
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    },
+}));
+const StyledMenuItem = material.styled(material.MenuItem)(({ theme, isActive }) => ({
+    padding: theme.spacing(1.25, 2),
+    fontSize: '0.875rem',
+    color: isActive ? theme.palette.primary.main : '#4D3019',
+    fontWeight: isActive ? 500 : 400,
+    backgroundColor: isActive ? '#F5F1ED' : 'transparent',
+    '&:hover': {
+        backgroundColor: '#F5F1ED',
+    },
+}));
+const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, }) => {
+    const { theme } = ThemeProvider.useTheme();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const isDropdownOpen = Boolean(anchorEl);
+    const handleDropdownToggle = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleItemClick = (item) => {
+        onItemSelect?.(item);
+        handleClose();
+    };
+    return (jsxRuntime.jsxs(material.Box, { component: "nav", sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: { xs: 0.5, sm: 1 },
+            fontSize: { xs: '0.75rem', sm: '0.875rem' },
+            overflow: 'visible',
+        }, children: [jsxRuntime.jsx(HomeButton, { "aria-label": "Home", children: jsxRuntime.jsx(iconsMaterial.HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }) }), jsxRuntime.jsx(material.Breadcrumbs, { separator: "/", sx: {
+                    display: { xs: 'none', md: 'flex' },
+                    '& .MuiBreadcrumbs-separator': {
+                        color: `${theme.palette.dark.main}66`,
+                    },
+                }, children: items.map((item, index) => (jsxRuntime.jsx(material.Typography, { sx: {
+                        color: theme.palette.dark.main,
+                        fontWeight: 500,
+                        px: { xs: 0.5, sm: 1 },
+                        whiteSpace: 'nowrap',
+                        fontSize: 'inherit',
+                    }, children: item.label }, index))) }), jsxRuntime.jsx(material.Typography, { sx: {
+                    display: { xs: 'none', md: 'inline' },
+                    color: `${theme.palette.dark.main}66`,
+                }, children: "/" }), jsxRuntime.jsxs(material.Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsxRuntime.jsxs(DropdownButton, { type: "button", onClick: handleDropdownToggle, children: [jsxRuntime.jsx("span", { children: currentItem }), jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: {
+                                    fontSize: 20,
+                                    transition: 'transform 0.2s',
+                                    transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                                } })] }), dropdownItems.length > 0 && (jsxRuntime.jsx(StyledMenu, { anchorEl: anchorEl, open: isDropdownOpen, onClose: handleClose, anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'left',
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'left',
+                        }, children: dropdownItems.map((item, index) => (jsxRuntime.jsx(StyledMenuItem, { onClick: () => handleItemClick(item), isActive: item === currentItem, children: item }, index))) }))] })] }));
+};
+
+exports.Breadcrumb = Breadcrumb;
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/cjs/components/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../../src/components/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, Breadcrumbs as MuiBreadcrumbs, Typography, IconButton, Menu, MenuItem, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { HomeRounded, ExpandMoreRounded } from '@mui/icons-material';\n\ninterface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\ninterface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  currentItem: string;\n  dropdownItems?: string[];\n  onItemSelect?: (item: string) => void;\n}\n\nconst HomeButton = styled(IconButton)(({ theme }) => ({\n  width: 40,\n  height: 40,\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n  backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,\n  flexShrink: 0,\n  display: 'none',\n  [theme.breakpoints.up('md')]: {\n    display: 'flex',\n  },\n  '&:hover': {\n    backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,\n    opacity: 0.8,\n  },\n}));\n\nconst DropdownButton = styled('button')(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  padding: theme.spacing(0.75, 2),\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n  border: `1px solid ${theme.palette.dark.main}33`,\n  backgroundColor: '#fff',\n  color: theme.palette.dark.main,\n  fontWeight: 500,\n  whiteSpace: 'nowrap',\n  cursor: 'pointer',\n  transition: 'border-color 0.2s',\n  fontSize: '0.875rem',\n  '&:hover': {\n    borderColor: `${theme.palette.dark.main}4D`,\n  },\n  [theme.breakpoints.down('sm')]: {\n    padding: theme.spacing(0.75, 1),\n    gap: theme.spacing(0.5),\n  },\n}));\n\nconst StyledMenu = styled(Menu)(({ theme }) => ({\n  '& .MuiPaper-root': {\n    marginTop: theme.spacing(1),\n    width: '256px',\n    borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n    border: `1px solid ${theme.palette.dark.main}33`,\n    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n  },\n}));\n\nconst StyledMenuItem = styled(MenuItem)<{ isActive?: boolean }>(({ theme, isActive }) => ({\n  padding: theme.spacing(1.25, 2),\n  fontSize: '0.875rem',\n  color: isActive ? theme.palette.primary.main : '#4D3019',\n  fontWeight: isActive ? 500 : 400,\n  backgroundColor: isActive ? '#F5F1ED' : 'transparent',\n  '&:hover': {\n    backgroundColor: '#F5F1ED',\n  },\n}));\n\nexport const Breadcrumb: React.FC<BreadcrumbProps> = ({\n  items,\n  currentItem,\n  dropdownItems = [],\n  onItemSelect,\n}) => {\n  const { theme } = useTheme();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isDropdownOpen = Boolean(anchorEl);\n\n  const handleDropdownToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handleItemClick = (item: string) => {\n    onItemSelect?.(item);\n    handleClose();\n  };\n\n  return (\n    <Box\n      component=\"nav\"\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: { xs: 0.5, sm: 1 },\n        fontSize: { xs: '0.75rem', sm: '0.875rem' },\n        overflow: 'visible',\n      }}\n    >\n      <HomeButton aria-label=\"Home\">\n        <HomeRounded sx={{ fontSize: 20, color:\"#4D3019\"}} />\n      </HomeButton>\n\n      <MuiBreadcrumbs\n        separator=\"/\"\n        sx={{\n          display: { xs: 'none', md: 'flex' },\n          '& .MuiBreadcrumbs-separator': {\n            color: `${theme.palette.dark.main}66`,\n          },\n        }}\n      >\n        {items.map((item, index) => (\n          <Typography\n            key={index}\n            sx={{\n              color: theme.palette.dark.main,\n              fontWeight: 500,\n              px: { xs: 0.5, sm: 1 },\n              whiteSpace: 'nowrap',\n              fontSize: 'inherit',\n            }}\n          >\n            {item.label}\n          </Typography>\n        ))}\n      </MuiBreadcrumbs>\n\n      <Typography\n        sx={{\n          display: { xs: 'none', md: 'inline' },\n          color: `${theme.palette.dark.main}66`,\n        }}\n      >\n        /\n      </Typography>\n\n      <Box sx={{ position: 'relative', flexShrink: 0 }}>\n        <DropdownButton\n          type=\"button\"\n          onClick={handleDropdownToggle}\n        >\n          <span>{currentItem}</span>\n          <ExpandMoreRounded\n            sx={{\n              fontSize: 20,\n              transition: 'transform 0.2s',\n              transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n            }}\n          />\n        </DropdownButton>\n\n        {dropdownItems.length > 0 && (\n          <StyledMenu\n            anchorEl={anchorEl}\n            open={isDropdownOpen}\n            onClose={handleClose}\n            anchorOrigin={{\n              vertical: 'bottom',\n              horizontal: 'left',\n            }}\n            transformOrigin={{\n              vertical: 'top',\n              horizontal: 'left',\n            }}\n          >\n            {dropdownItems.map((item, index) => (\n              <StyledMenuItem\n                key={index}\n                onClick={() => handleItemClick(item)}\n                isActive={item === currentItem}\n              >\n                {item}\n              </StyledMenuItem>\n            ))}\n          </StyledMenu>\n        )}\n      </Box>\n    </Box>\n  );\n};"],"names":[],"mappings":";;;;;;;;;AAmBA;AACE;AACA;;;;AAIA;AACA;AACA;;AAEE;AACD;AACD;AACE;AACA;AACD;AACF;AAED;AACE;AACA;AACA;;;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEC;;;AAGC;AACD;AACF;AAED;AACE;AACE;AACA;;;;;AAKA;AACD;AACF;AAED;;AAEE;AACA;;;AAGA;AACE;AACD;AACF;AAEM;AAML;;AAEA;AAEA;AACE;AACF;;;AAIA;AAEA;AACE;AACA;AACF;;AAMM;AACA;;;AAGA;AACD;;AAUG;;AAEC;AACF;AAMK;AACA;;AAEA;AACA;AACD;;;AAWJ;AAaK;AACA;;;AAYA;AACA;AACD;AAEC;AACA;AACD;AAgBb;;"}

package/dist/cjs/components/Button.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var styles = require('@mui/material/styles');
+
+const StyledButton = styles.styled(material.Button, {
+    shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',
+})(({ theme, customVariant, customSize }) => {
+    const currentTheme = theme.palette;
+    // Size styles
+    const sizeStyles = {
+        sm: {
+            padding: '6px 12px',
+            fontSize: '0.875rem',
+        },
+        md: {
+            padding: '10px 16px',
+            fontSize: '1rem',
+        },
+        lg: {
+            padding: '12px 24px',
+            fontSize: '1.125rem',
+        },
+    };
+    // Base styles
+    const baseStyles = {
+        fontWeight: 500,
+        borderRadius: '8px',
+        textTransform: 'none',
+        transition: 'all 0.2s',
+        boxShadow: 'none',
+        '&:hover': {
+            boxShadow: 'none',
+        },
+        '&.Mui-disabled': {
+            opacity: 0.5,
+            cursor: 'not-allowed',
+        },
+        ...sizeStyles[customSize],
+    };
+    // Variant styles
+    const variantStyles = {
+        primary: {
+            backgroundColor: currentTheme.primary.main,
+            color: currentTheme.custom?.primaryButtonTextColor || '#FFFFFF',
+            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            '&:hover': {
+                backgroundColor: currentTheme.primary.main,
+                opacity: 0.9,
+            },
+        },
+        secondary: {
+            backgroundColor: currentTheme.secondary.main,
+            color: currentTheme.dark.main,
+            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            '&:hover': {
+                backgroundColor: currentTheme.secondary.main,
+                opacity: 0.9,
+            },
+        },
+        outline: {
+            backgroundColor: currentTheme.light.main,
+            border: `2px solid rgba(77, 48, 25, 0.2)`,
+            color: currentTheme.dark.main,
+            '&:hover': {
+                backgroundColor: 'rgba(77, 48, 25, 0.05)',
+                borderColor: 'rgba(77, 48, 25, 0.3)',
+            },
+        },
+        'marked-read': {
+            backgroundColor: 'rgba(163, 217, 119, 0.1)',
+            border: `2px solid ${currentTheme.markedRead.main}`,
+            color: currentTheme.dark.main,
+            isDisabled: true,
+            '&:hover': {
+                backgroundColor: 'rgba(163, 217, 119, 0.2)',
+                cursor: 'not-allowed',
+            },
+        },
+        'mark-read': {
+            backgroundColor: currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,
+            border: `2px solid ${currentTheme.custom?.markAsReadBorderColor || currentTheme.secondary.main}`,
+            color: currentTheme.dark.main,
+            '&:hover': {
+                opacity: 0.9,
+            },
+        },
+        danger: {
+            backgroundColor: '#D32F2F', // Material-UI red
+            color: '#FFFFFF',
+            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            '&:hover': {
+                backgroundColor: '#B71C1C',
+                opacity: 0.9,
+            },
+        },
+    };
+    return {
+        ...baseStyles,
+        ...variantStyles[customVariant],
+    };
+});
+const Button = ({ variant = 'primary', size = 'md', children, fullWidth = false, ...props }) => {
+    return (jsxRuntime.jsx(StyledButton, { customVariant: variant, customSize: size, fullWidth: fullWidth, disableRipple: true, ...props, children: children }));
+};
+
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/dist/cjs/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';\nimport { styled } from '@mui/material/styles';\n\ninterface CustomButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {\n  variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger'; // Add 'danger'\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst StyledButton = styled(MuiButton, {\n  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',\n})<{ customVariant: string; customSize: string }>(({ theme, customVariant, customSize }) => {\n  const currentTheme = theme.palette;\n\n  // Size styles\n  const sizeStyles = {\n    sm: {\n      padding: '6px 12px',\n      fontSize: '0.875rem',\n    },\n    md: {\n      padding: '10px 16px',\n      fontSize: '1rem',\n    },\n    lg: {\n      padding: '12px 24px',\n      fontSize: '1.125rem',\n    },\n  };\n\n  // Base styles\n  const baseStyles = {\n    fontWeight: 500,\n    borderRadius: '8px',\n    textTransform: 'none' as const,\n    transition: 'all 0.2s',\n    boxShadow: 'none',\n    '&:hover': {\n      boxShadow: 'none',\n    },\n    '&.Mui-disabled': {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    },\n    ...sizeStyles[customSize as keyof typeof sizeStyles],\n  };\n\n  // Variant styles\n  const variantStyles = {\n    primary: {\n      backgroundColor: currentTheme.primary.main,\n      color: currentTheme.custom?.primaryButtonTextColor || '#FFFFFF',\n      boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      '&:hover': {\n        backgroundColor: currentTheme.primary.main,\n        opacity: 0.9,\n      },\n    },\n    secondary: {\n      backgroundColor: currentTheme.secondary.main,\n      color: currentTheme.dark.main,\n      boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      '&:hover': {\n        backgroundColor: currentTheme.secondary.main,\n        opacity: 0.9,\n      },\n    },\n    outline: {\n      backgroundColor: currentTheme.light.main,\n      border: `2px solid rgba(77, 48, 25, 0.2)`,\n      color: currentTheme.dark.main,\n      '&:hover': {\n        backgroundColor: 'rgba(77, 48, 25, 0.05)',\n        borderColor: 'rgba(77, 48, 25, 0.3)',\n      },\n    },\n    'marked-read': {\n      backgroundColor: 'rgba(163, 217, 119, 0.1)',\n      border: `2px solid ${currentTheme.markedRead.main}`,\n      color: currentTheme.dark.main,\n      isDisabled: true,\n      '&:hover': {\n        backgroundColor: 'rgba(163, 217, 119, 0.2)',\n        cursor: 'not-allowed',\n      },\n    },\n    'mark-read': {\n      backgroundColor: currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,\n      border: `2px solid ${currentTheme.custom?.markAsReadBorderColor || currentTheme.secondary.main}`,\n      color: currentTheme.dark.main,\n      '&:hover': {\n        opacity: 0.9,\n      },\n    },\n    danger: { // New danger variant\n      backgroundColor: '#D32F2F', // Material-UI red\n      color: '#FFFFFF',\n      boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      '&:hover': {\n        backgroundColor: '#B71C1C',\n        opacity: 0.9,\n      },\n    },\n  };\n\n  return {\n    ...baseStyles,\n    ...variantStyles[customVariant as keyof typeof variantStyles],\n  };\n});\n\nexport const Button: React.FC<CustomButtonProps> = ({\n  variant = 'primary',\n  size = 'md',\n  children,\n  fullWidth = false,\n  ...props\n}) => {\n\n  return (\n    <StyledButton\n      customVariant={variant}\n      customSize={size}\n      fullWidth={fullWidth}\n      disableRipple\n      {...props}\n    >\n      {children}\n    </StyledButton>\n  );\n};"],"names":["styled","MuiButton","_jsx"],"mappings":"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"}

package/dist/cjs/components/Card.js

@@ -0,0 +1,45 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+const StyledCard = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'customPadding' && prop !== 'customVariant',
+})(({ theme, customPadding, customVariant }) => {
+    const paddingStyles = {
+        none: { padding: 0 },
+        sm: { padding: theme.spacing(2) }, // 16px
+        md: { padding: theme.spacing(3) }, // 24px
+        lg: { padding: theme.spacing(4) }, // 32px
+    };
+    const variantStyles = {
+        default: {
+            border: `1px solid ${theme.palette.dark.main}10`, // dark.main with 10% opacity
+        },
+        bordered: {
+            border: `2px solid ${theme.palette.dark.main}20`, // dark.main with 20% opacity
+        },
+        elevated: {
+            border: `1px solid ${theme.palette.dark.main}05`, // dark.main with 5% opacity
+            boxShadow: theme.shadows[4], // MUI shadow level 4 for "elevated"
+        },
+    };
+    const borderRadiusValue = typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4;
+    return {
+        borderRadius: borderRadiusValue * 2, // Matches rounded-xl (approx 12px)
+        overflow: 'visible',
+        backgroundColor: theme.palette.light.main, // Matches #FEFDF7
+        ...paddingStyles[customPadding],
+        ...variantStyles[customVariant],
+    };
+});
+const Card = ({ children, className = '', padding = 'md', variant = 'default', sx, // Destructure sx prop
+ }) => {
+    return (jsxRuntime.jsx(StyledCard, { className: className, customPadding: padding, customVariant: variant, sx: sx, children: children }));
+};
+
+exports.Card = Card;
+//# sourceMappingURL=Card.js.map