ece-docs-components 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/components/Header.js +56 -48
  2. package/dist/cjs/components/Header.js.map +1 -1
  3. package/dist/cjs/components/PopoverMenu.js +25 -0
  4. package/dist/cjs/components/PopoverMenu.js.map +1 -0
  5. package/dist/esm/components/Header.d.ts +3 -0
  6. package/dist/esm/components/Header.js +58 -50
  7. package/dist/esm/components/Header.js.map +1 -1
  8. package/dist/esm/components/PopoverMenu.d.ts +7 -0
  9. package/dist/esm/components/PopoverMenu.js +21 -0
  10. package/dist/esm/components/PopoverMenu.js.map +1 -0
  11. package/package.json +1 -1
package/dist/cjs/components/Header.js CHANGED
@@ -1,28 +1,29 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
+ var React = require('react');
4
5
  var material = require('@mui/material');
5
6
  var ThemeProvider = require('../ThemeProvider.js');
6
7
  var iconsMaterial = require('@mui/icons-material');
8
+ var PopoverMenu = require('./PopoverMenu.js');
7
9
 
8
10
  const StyledHeader = material.styled(material.Box)(({ theme }) => ({
9
- padding: theme.spacing(1.5, 4), // px-4 py-3
10
11
  display: 'flex',
11
12
  alignItems: 'center',
12
13
  justifyContent: 'space-between',
13
- gap: theme.spacing(2), // gap-2
14
14
  backgroundColor: theme.palette.primary.main, // var(--color-primary)
15
- [theme.breakpoints.up('sm')]: {
16
- padding: theme.spacing(2, 6), // sm:px-6
17
- },
18
15
  [theme.breakpoints.up('md')]: {
19
- padding: theme.spacing(2, 8), // md:px-8
20
16
  gap: theme.spacing(4), // md:gap-4
17
+ padding: theme.spacing(1.5, 1.5), // px-4 py-3
18
+ },
19
+ [theme.breakpoints.down('md')]: {
20
+ padding: 0, // px-4 py-3
21
21
  },
22
22
  }));
23
23
  const StyledLogoWrapper = material.styled(material.Box)(({ theme }) => ({
24
24
  display: 'flex',
25
25
  alignItems: 'center',
26
+ padding: theme.spacing(1.5),
26
27
  gap: theme.spacing(2), // md:gap-2
27
28
  [theme.breakpoints.down('md')]: {
28
29
  gap: theme.spacing(1.5), // gap-1.5
@@ -32,10 +33,6 @@ const StyledLogoIcon = material.styled(material.Box)(({ theme }) => ({
32
33
  width: 32, // md:w-8 md:h-8
33
34
  height: 32,
34
35
  color: theme.palette.light.main, // text-[#FDFCEE]
35
- [theme.breakpoints.down('md')]: {
36
- width: 24, // w-6
37
- height: 24, // h-6
38
- },
39
36
  }));
40
37
  const StyledLogoText = material.styled(material.Typography)(({ theme }) => ({
41
38
  color: theme.palette.light.main, // text-[#FDFCEE]
@@ -52,21 +49,14 @@ const StyledLogoText = material.styled(material.Typography)(({ theme }) => ({
52
49
  const StyledSearchContainer = material.styled(material.Box)(({ theme }) => ({
53
50
  flex: 1,
54
51
  maxWidth: '32rem', // max-w-2xl
55
- margin: theme.spacing(0, 8), // mx-8
52
+ margin: theme.spacing(0, 2), // mx-8
56
53
  position: 'relative',
57
- [theme.breakpoints.down('md')]: {
58
- margin: theme.spacing(0, 4), // sm:mx-4
59
- },
60
- [theme.breakpoints.down('sm')]: {
61
- margin: theme.spacing(0, 2), // mx-2
62
- },
63
54
  }));
64
55
  const StyledTextField = material.styled(material.TextField)(({ theme }) => ({
65
56
  '& .MuiInputBase-root': {
66
57
  backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]
67
58
  color: theme.palette.dark.main, // text-[#4D3019]
68
59
  borderRadius: '9999px', // rounded-full
69
- paddingRight: theme.spacing(6), // pr-12
70
60
  fontSize: '1rem', // text-base
71
61
  [theme.breakpoints.down('md')]: {
72
62
  paddingRight: theme.spacing(5), // sm:pr-10
@@ -92,31 +82,39 @@ const StyledTextField = material.styled(material.TextField)(({ theme }) => ({
92
82
  },
93
83
  }));
94
84
  const StyledSearchButton = material.styled(material.IconButton)(({ theme }) => ({
95
- position: 'absolute',
96
- right: theme.spacing(2), // md:right-2
97
- top: '50%',
98
- transform: 'translateY(-50%)',
99
- width: theme.spacing(5), // md:w-10
100
- height: theme.spacing(5), // md:h-10
101
- borderRadius: '50%', // rounded-full
102
- backgroundColor: theme.palette.primary.main, // var(--color-primary)
85
+ display: 'flex',
86
+ alignItems: 'center',
87
+ justifyContent: 'center',
88
+ position: 'static',
89
+ borderRadius: '50%',
90
+ backgroundColor: theme.palette.primary.main,
91
+ width: theme.spacing(5),
92
+ height: theme.spacing(5),
93
+ [theme.breakpoints.down('md')]: {
94
+ width: theme.spacing(5),
95
+ height: theme.spacing(5),
96
+ marginRight: theme.spacing(1),
97
+ },
98
+ [theme.breakpoints.down('sm')]: {
99
+ marginRight: theme.spacing(0.5),
100
+ },
103
101
  '&:hover': {
104
- opacity: 0.9, // hover:opacity-90
102
+ opacity: 0.9,
105
103
  backgroundColor: theme.palette.primary.main,
106
104
  },
107
- [theme.breakpoints.down('md')]: {
108
- right: theme.spacing(1), // right-1
109
- width: theme.spacing(4), // w-8
110
- height: theme.spacing(4), // h-8
111
- },
112
105
  }));
113
106
  const StyledSearchIcon = material.styled(material.Box)(({ theme }) => ({
114
- width: 20, // md:w-5 md:h-5
115
- height: 20,
116
- color: theme.palette.light.main, // text-[#FDFCEE]
117
- [theme.breakpoints.down('md')]: {
118
- width: 16, // w-4
119
- height: 16, // h-4
107
+ display: 'flex',
108
+ alignItems: 'center',
109
+ justifyContent: 'center',
110
+ color: theme.palette.light.main,
111
+ width: '100%',
112
+ height: '100%',
113
+ '& svg': {
114
+ fontSize: '1.5rem',
115
+ [theme.breakpoints.down('sm')]: {
116
+ fontSize: '1.25rem',
117
+ },
120
118
  },
121
119
  }));
122
120
  const StyledUserContainer = material.styled(material.Box)(({ theme }) => ({
@@ -124,7 +122,7 @@ const StyledUserContainer = material.styled(material.Box)(({ theme }) => ({
124
122
  alignItems: 'center',
125
123
  gap: theme.spacing(3), // md:gap-3
126
124
  [theme.breakpoints.down('md')]: {
127
- gap: theme.spacing(2), // gap-2
125
+ gap: 0,
128
126
  },
129
127
  }));
130
128
  const StyledAvatar = material.styled(material.Box)(({ theme }) => ({
@@ -139,11 +137,7 @@ const StyledAvatar = material.styled(material.Box)(({ theme }) => ({
139
137
  [theme.breakpoints.down('md')]: {
140
138
  width: theme.spacing(5), // sm:w-10
141
139
  height: theme.spacing(5), // sm:h-10
142
- },
143
- [theme.breakpoints.down('sm')]: {
144
- width: theme.spacing(4), // w-8
145
- height: theme.spacing(4), // h-8
146
- },
140
+ }
147
141
  }));
148
142
  const StyledAvatarText = material.styled(material.Typography)(({ theme }) => ({
149
143
  color: theme.palette.dark.main, // text-[#4D3019]
@@ -156,6 +150,7 @@ const StyledAvatarText = material.styled(material.Typography)(({ theme }) => ({
156
150
  const StyledUserName = material.styled(material.Typography)(({ theme }) => ({
157
151
  color: theme.palette.light.main, // text-[#FDFCEE]
158
152
  fontWeight: 500, // font-medium
153
+ marginLeft: theme.spacing(1),
159
154
  fontSize: '1.125rem', // text-lg
160
155
  display: 'none', // hidden
161
156
  [theme.breakpoints.up('sm')]: {
@@ -163,13 +158,26 @@ const StyledUserName = material.styled(material.Typography)(({ theme }) => ({
163
158
  },
164
159
  [theme.breakpoints.down('md')]: {
165
160
  fontSize: '0.875rem', // text-sm
161
+ display: 'none'
166
162
  },
167
163
  }));
168
- const Header = ({ userName = 'John Doe', userInitials = 'JD', }) => {
164
+ const Header = ({ userName = 'John Doe', userInitials = 'JD', toggleMenu, signOut, search }) => {
169
165
  const theme = ThemeProvider.useTheme();
170
- return (jsxRuntime.jsxs(StyledHeader, { children: [jsxRuntime.jsxs(StyledLogoWrapper, { children: [jsxRuntime.jsx(StyledLogoIcon, { children: jsxRuntime.jsx(iconsMaterial.SchoolRounded, { sx: { fontSize: 32, color: 'currentColor' } }) }), jsxRuntime.jsx(StyledLogoText, { variant: "h1", children: theme.appName })] }), jsxRuntime.jsx(StyledSearchContainer, { children: jsxRuntime.jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, InputProps: {
171
- endAdornment: (jsxRuntime.jsx(StyledSearchButton, { children: jsxRuntime.jsx(StyledSearchIcon, { children: jsxRuntime.jsx(iconsMaterial.SearchRounded, { sx: { fontSize: 20 } }) }) })),
172
- } }) }), jsxRuntime.jsxs(StyledUserContainer, { children: [jsxRuntime.jsx(StyledAvatar, { children: jsxRuntime.jsx(StyledAvatarText, { children: userInitials }) }), jsxRuntime.jsx(StyledUserName, { children: userName })] })] }));
166
+ const [anchorEl, setAnchorEl] = React.useState(null);
167
+ const handleOpen = (event) => {
168
+ setAnchorEl(event.currentTarget);
169
+ };
170
+ const handleClose = () => {
171
+ setAnchorEl(null);
172
+ };
173
+ return (jsxRuntime.jsxs(StyledHeader, { children: [jsxRuntime.jsx(material.IconButton, { disableRipple: true, onClick: toggleMenu, sx: {
174
+ display: { xs: 'block', md: 'none' }
175
+ }, children: jsxRuntime.jsx(iconsMaterial.MenuRounded, { sx: { fontSize: 32, color: 'white' } }) }), jsxRuntime.jsx(material.Divider, { orientation: 'vertical', sx: { color: '#FFFFFF', borderRightWidth: 2, display: { xs: 'block', md: 'none' } } }), jsxRuntime.jsxs(StyledLogoWrapper, { children: [jsxRuntime.jsx(StyledLogoIcon, { children: jsxRuntime.jsx(iconsMaterial.SchoolRounded, { sx: { fontSize: 32, color: 'currentColor' } }) }), jsxRuntime.jsx(StyledLogoText, { variant: "h1", children: theme.appName })] }), jsxRuntime.jsx(StyledSearchContainer, { children: jsxRuntime.jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, sx: { display: { xs: 'none', sm: 'none', md: 'block' } }, InputProps: {
176
+ endAdornment: (jsxRuntime.jsx(StyledSearchButton, { children: jsxRuntime.jsx(StyledSearchIcon, { children: jsxRuntime.jsx(iconsMaterial.SearchRounded, {}) }) })),
177
+ } }) }), jsxRuntime.jsxs(StyledUserContainer, { children: [jsxRuntime.jsx(StyledSearchButton, { disableRipple: true, onClick: search, sx: {
178
+ display: { xs: 'flex', md: 'none' },
179
+ backgroundColor: '#ffffff83'
180
+ }, children: jsxRuntime.jsx(StyledSearchIcon, { children: jsxRuntime.jsx(iconsMaterial.SearchRounded, {}) }) }), jsxRuntime.jsxs(material.IconButton, { onClick: handleOpen, disableRipple: true, children: [jsxRuntime.jsx(StyledAvatar, { children: jsxRuntime.jsx(StyledAvatarText, { children: userInitials }) }), jsxRuntime.jsx(StyledUserName, { children: userName })] })] }), jsxRuntime.jsx(PopoverMenu.default, { anchorEl: anchorEl, onClose: handleClose, signOut: () => { signOut(); handleClose(); } })] }));
173
181
  };
174
182
 
175
183
  exports.Header = Header;
package/dist/cjs/components/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["\n\nimport React from 'react';\nimport { Box, styled, Typography, TextField, IconButton } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { SchoolRounded, SearchRounded } from '@mui/icons-material';\n\ninterface HeaderProps {\n userName?: string;\n userInitials?: string;\n}\n\nconst StyledHeader = styled(Box)(({ theme }) => ({\n padding: theme.spacing(1.5, 4), // px-4 py-3\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: theme.spacing(2), // gap-2\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\n [theme.breakpoints.up('sm')]: {\n padding: theme.spacing(2, 6), // sm:px-6\n },\n [theme.breakpoints.up('md')]: {\n padding: theme.spacing(2, 8), // md:px-8\n gap: theme.spacing(4), // md:gap-4\n },\n}));\n\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2), // md:gap-2\n [theme.breakpoints.down('md')]: {\n gap: theme.spacing(1.5), // gap-1.5\n },\n}));\n\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\n width: 32, // md:w-8 md:h-8\n height: 32,\n color: theme.palette.light.main, // text-[#FDFCEE]\n [theme.breakpoints.down('md')]: {\n width: 24, // w-6\n height: 24, // h-6\n },\n}));\n\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\n color: theme.palette.light.main, // text-[#FDFCEE]\n fontWeight: 700, // font-bold\n letterSpacing: '0.05em', // tracking-wide\n fontSize: '1.5rem', // text-2xl\n [theme.breakpoints.down('md')]: {\n fontSize: '1.25rem', // sm:text-xl\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: '1.125rem', // text-lg\n },\n}));\n\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\n flex: 1,\n maxWidth: '32rem', // max-w-2xl\n margin: theme.spacing(0, 8), // mx-8\n position: 'relative',\n [theme.breakpoints.down('md')]: {\n margin: theme.spacing(0, 4), // sm:mx-4\n },\n [theme.breakpoints.down('sm')]: {\n margin: theme.spacing(0, 2), // mx-2\n },\n}));\n\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n color: theme.palette.dark.main, // text-[#4D3019]\n borderRadius: '9999px', // rounded-full\n paddingRight: theme.spacing(6), // pr-12\n fontSize: '1rem', // text-base\n [theme.breakpoints.down('md')]: {\n paddingRight: theme.spacing(5), // sm:pr-10\n fontSize: '0.875rem', // text-sm\n },\n },\n '& .MuiInputBase-input': {\n padding: theme.spacing(1.5, 3), // px-4 py-2\n [theme.breakpoints.up('md')]: {\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\n },\n [theme.breakpoints.down('sm')]: {\n padding: theme.spacing(1.5, 2.5), // sm:px-5\n },\n },\n '& .MuiInputBase-input::placeholder': {\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\n opacity: 1,\n },\n '& .MuiInputBase-root:focus-within': {\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\n outlineOffset: 0,\n },\n}));\n\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n right: theme.spacing(2), // md:right-2\n top: '50%',\n transform: 'translateY(-50%)',\n width: theme.spacing(5), // md:w-10\n height: theme.spacing(5), // md:h-10\n borderRadius: '50%', // rounded-full\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\n '&:hover': {\n opacity: 0.9, // hover:opacity-90\n backgroundColor: theme.palette.primary.main,\n },\n [theme.breakpoints.down('md')]: {\n right: theme.spacing(1), // right-1\n width: theme.spacing(4), // w-8\n height: theme.spacing(4), // h-8\n },\n}));\n\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\n width: 20, // md:w-5 md:h-5\n height: 20,\n color: theme.palette.light.main, // text-[#FDFCEE]\n [theme.breakpoints.down('md')]: {\n width: 16, // w-4\n height: 16, // h-4\n },\n}));\n\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3), // md:gap-3\n [theme.breakpoints.down('md')]: {\n gap: theme.spacing(2), // gap-2\n },\n}));\n\nconst StyledAvatar = styled(Box)(({ theme }) => ({\n width: theme.spacing(6), // md:w-12\n height: theme.spacing(6), // md:h-12\n borderRadius: '50%', // rounded-full\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n [theme.breakpoints.down('md')]: {\n width: theme.spacing(5), // sm:w-10\n height: theme.spacing(5), // sm:h-10\n },\n [theme.breakpoints.down('sm')]: {\n width: theme.spacing(4), // w-8\n height: theme.spacing(4), // h-8\n },\n}));\n\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\n color: theme.palette.dark.main, // text-[#4D3019]\n fontWeight: 700, // font-bold\n fontSize: '1.125rem', // text-lg\n [theme.breakpoints.down('md')]: {\n fontSize: '0.875rem', // text-sm\n },\n}));\n\nconst StyledUserName = styled(Typography)(({ theme }) => ({\n color: theme.palette.light.main, // text-[#FDFCEE]\n fontWeight: 500, // font-medium\n fontSize: '1.125rem', // text-lg\n display: 'none', // hidden\n [theme.breakpoints.up('sm')]: {\n display: 'inline', // sm:inline\n },\n [theme.breakpoints.down('md')]: {\n fontSize: '0.875rem', // text-sm\n },\n}));\n\nexport const Header: React.FC<HeaderProps> = ({\n userName = 'John Doe',\n userInitials = 'JD',\n}) => {\n const theme = useTheme();\n\n return (\n <StyledHeader>\n <StyledLogoWrapper>\n <StyledLogoIcon>\n <SchoolRounded sx={{fontSize:32, color: 'currentColor'}} />\n </StyledLogoIcon>\n <StyledLogoText variant=\"h1\">{theme.appName}</StyledLogoText>\n </StyledLogoWrapper>\n\n <StyledSearchContainer>\n <StyledTextField\n placeholder=\"Search for a policy\"\n variant=\"outlined\"\n fullWidth\n InputProps={{\n endAdornment: (\n <StyledSearchButton>\n <StyledSearchIcon>\n <SearchRounded sx={{fontSize: 20}} />\n </StyledSearchIcon>\n </StyledSearchButton>\n ),\n }}\n />\n </StyledSearchContainer>\n\n <StyledUserContainer>\n <StyledAvatar>\n <StyledAvatarText>{userInitials}</StyledAvatarText>\n </StyledAvatar>\n <StyledUserName>{userName}</StyledUserName>\n </StyledUserContainer>\n </StyledHeader>\n );\n};"],"names":["styled","Box","Typography","TextField","IconButton","useTheme","_jsxs","_jsx","SchoolRounded","SearchRounded"],"mappings":"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"}
1
+ {"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["\n\nimport React from 'react';\nimport { Box, styled, Typography, TextField, IconButton, Divider } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { MenuRounded, SchoolRounded, SearchRounded } from '@mui/icons-material';\nimport PopoverMenu from './PopoverMenu';\n\ninterface HeaderProps {\n userName?: string;\n userInitials?: string;\n toggleMenu: () => void;\n signOut: () => void;\n search?: () => void;\n}\n\nconst StyledHeader = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\n [theme.breakpoints.up('md')]: {\n gap: theme.spacing(4), // md:gap-4\n padding: theme.spacing(1.5, 1.5), // px-4 py-3\n },\n [theme.breakpoints.down('md')]: {\n padding: 0, // px-4 py-3\n },\n}));\n\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(1.5),\n gap: theme.spacing(2), // md:gap-2\n [theme.breakpoints.down('md')]: {\n gap: theme.spacing(1.5), // gap-1.5\n },\n}));\n\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\n width: 32, // md:w-8 md:h-8\n height: 32,\n color: theme.palette.light.main, // text-[#FDFCEE]\n}));\n\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\n color: theme.palette.light.main, // text-[#FDFCEE]\n fontWeight: 700, // font-bold\n letterSpacing: '0.05em', // tracking-wide\n fontSize: '1.5rem', // text-2xl\n [theme.breakpoints.down('md')]: {\n fontSize: '1.25rem', // sm:text-xl\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: '1.125rem', // text-lg\n },\n}));\n\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\n flex: 1,\n maxWidth: '32rem', // max-w-2xl\n margin: theme.spacing(0, 2), // mx-8\n position: 'relative',\n}));\n\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n color: theme.palette.dark.main, // text-[#4D3019]\n borderRadius: '9999px', // rounded-full\n fontSize: '1rem', // text-base\n [theme.breakpoints.down('md')]: {\n paddingRight: theme.spacing(5), // sm:pr-10\n fontSize: '0.875rem', // text-sm\n },\n },\n '& .MuiInputBase-input': {\n padding: theme.spacing(1.5, 3), // px-4 py-2\n [theme.breakpoints.up('md')]: {\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\n },\n [theme.breakpoints.down('sm')]: {\n padding: theme.spacing(1.5, 2.5), // sm:px-5\n },\n },\n '& .MuiInputBase-input::placeholder': {\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\n opacity: 1,\n },\n '& .MuiInputBase-root:focus-within': {\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\n outlineOffset: 0,\n },\n}));\n\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'static',\n borderRadius: '50%',\n backgroundColor: theme.palette.primary.main,\n width: theme.spacing(5),\n height: theme.spacing(5),\n [theme.breakpoints.down('md')]: {\n width: theme.spacing(5),\n height: theme.spacing(5),\n marginRight: theme.spacing(1),\n },\n [theme.breakpoints.down('sm')]: {\n marginRight: theme.spacing(0.5),\n },\n '&:hover': {\n opacity: 0.9,\n backgroundColor: theme.palette.primary.main,\n },\n}));\n\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\n display: 'flex', \n alignItems: 'center',\n justifyContent: 'center',\n color: theme.palette.light.main,\n width: '100%',\n height: '100%',\n '& svg': {\n fontSize: '1.5rem',\n [theme.breakpoints.down('sm')]: {\n fontSize: '1.25rem',\n },\n },\n}));\n\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3), // md:gap-3\n [theme.breakpoints.down('md')]: {\n gap: 0,\n },\n}));\n\nconst StyledAvatar = styled(Box)(({ theme }) => ({\n width: theme.spacing(6), // md:w-12\n height: theme.spacing(6), // md:h-12\n borderRadius: '50%', // rounded-full\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n [theme.breakpoints.down('md')]: {\n width: theme.spacing(5), // sm:w-10\n height: theme.spacing(5), // sm:h-10\n }\n}));\n\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\n color: theme.palette.dark.main, // text-[#4D3019]\n fontWeight: 700, // font-bold\n fontSize: '1.125rem', // text-lg\n [theme.breakpoints.down('md')]: {\n fontSize: '0.875rem', // text-sm\n },\n}));\n\nconst StyledUserName = styled(Typography)(({ theme }) => ({\n color: theme.palette.light.main, // text-[#FDFCEE]\n fontWeight: 500, // font-medium\n marginLeft: theme.spacing(1),\n fontSize: '1.125rem', // text-lg\n display: 'none', // hidden\n [theme.breakpoints.up('sm')]: {\n display: 'inline', // sm:inline\n },\n [theme.breakpoints.down('md')]: {\n fontSize: '0.875rem', // text-sm\n display: 'none'\n },\n}));\n\nexport const Header: React.FC<HeaderProps> = ({\n userName = 'John Doe',\n userInitials = 'JD',\n toggleMenu,\n signOut,\n search\n}) => {\n const theme = useTheme();\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n\n return (\n <StyledHeader>\n <IconButton disableRipple onClick={toggleMenu} sx={{\n display: {xs: 'block', md: 'none'}\n }}>\n <MenuRounded sx={{fontSize: 32, color: 'white'}}/>\n </IconButton>\n <Divider orientation='vertical' sx={{color: '#FFFFFF',borderRightWidth: 2,display: {xs: 'block', md: 'none'}}}/>\n <StyledLogoWrapper>\n <StyledLogoIcon>\n <SchoolRounded sx={{fontSize:32, color: 'currentColor'}} />\n </StyledLogoIcon>\n <StyledLogoText variant=\"h1\">{theme.appName}</StyledLogoText>\n </StyledLogoWrapper>\n\n {/* Search input for md+ screens */}\n <StyledSearchContainer >\n <StyledTextField\n placeholder=\"Search for a policy\"\n variant=\"outlined\"\n fullWidth\n sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}\n InputProps={{\n endAdornment: (\n <StyledSearchButton>\n <StyledSearchIcon>\n <SearchRounded />\n </StyledSearchIcon>\n </StyledSearchButton>\n ),\n }}\n />\n </StyledSearchContainer>\n\n <StyledUserContainer>\n {/* Search button only visible on XS screens */}\n <StyledSearchButton\n disableRipple\n onClick={search}\n sx={{\n display: { xs: 'flex', md: 'none' },\n backgroundColor: '#ffffff83'\n }}\n >\n <StyledSearchIcon>\n <SearchRounded />\n </StyledSearchIcon>\n </StyledSearchButton>\n <IconButton onClick={handleOpen} disableRipple>\n <StyledAvatar>\n <StyledAvatarText>{userInitials}</StyledAvatarText>\n </StyledAvatar>\n <StyledUserName>{userName}</StyledUserName>\n </IconButton>\n </StyledUserContainer>\n\n <PopoverMenu\n anchorEl={anchorEl}\n onClose={handleClose}\n signOut={()=>{signOut(); handleClose();}}\n />\n </StyledHeader>\n );\n};"],"names":["styled","Box","Typography","TextField","IconButton","useTheme","_jsxs","_jsx","MenuRounded","Divider","SchoolRounded","SearchRounded","PopoverMenu"],"mappings":"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"}
package/dist/cjs/components/PopoverMenu.js ADDED
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var material = require('@mui/material');
7
+ var LogoutIcon = require('@mui/icons-material/Logout');
8
+ var ThemeProvider = require('../ThemeProvider.js');
9
+
10
+ function PopoverMenu({ anchorEl, onClose, signOut, }) {
11
+ const theme = ThemeProvider.useTheme();
12
+ return (jsxRuntime.jsx(material.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: onClose, PaperProps: {
13
+ sx: {
14
+ backgroundColor: theme.palette.background.paper,
15
+ color: theme.palette.text.primary,
16
+ },
17
+ }, children: jsxRuntime.jsxs(material.MenuItem, { onClick: signOut, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(LogoutIcon, { sx: { color: theme.palette.primary.main } }) }), jsxRuntime.jsx(material.ListItemText, { primary: "Logout", sx: {
18
+ color: theme.palette.primary.contrastText,
19
+ fontFamily: theme.typography.fontFamily,
20
+ fontWeight: theme.typography.button.fontWeight,
21
+ } })] }, "logout") }));
22
+ }
23
+
24
+ exports.default = PopoverMenu;
25
+ //# sourceMappingURL=PopoverMenu.js.map
package/dist/cjs/components/PopoverMenu.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PopoverMenu.js","sources":["../../../../src/components/PopoverMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';\nimport LogoutIcon from '@mui/icons-material/Logout';\nimport { useTheme } from '../ThemeProvider';\n\ninterface PopoverMenuProps {\n anchorEl: HTMLElement | null;\n onClose: () => void;\n signOut: () => void;\n}\n\nexport default function PopoverMenu({\n anchorEl,\n onClose,\n signOut,\n}: PopoverMenuProps) {\n const theme = useTheme();\n\n return (\n <Menu\n anchorEl={anchorEl}\n open={Boolean(anchorEl)}\n onClose={onClose}\n PaperProps={{\n sx: {\n backgroundColor: theme.palette.background.paper,\n color: theme.palette.text.primary,\n },\n }}\n >\n <MenuItem key=\"logout\" onClick={signOut}>\n <ListItemIcon>\n <LogoutIcon sx={{ color: theme.palette.primary.main }} />\n </ListItemIcon>\n <ListItemText\n primary=\"Logout\"\n sx={{\n color: theme.palette.primary.contrastText,\n fontFamily: theme.typography.fontFamily,\n fontWeight: theme.typography.button.fontWeight,\n }}\n />\n </MenuItem>\n </Menu>\n );\n}\n"],"names":["useTheme","_jsx","Menu","_jsxs","MenuItem","ListItemIcon","ListItemText"],"mappings":";;;;;;;;;AAWc,SAAU,WAAW,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,OAAO,GACU,EAAA;AACjB,IAAA,MAAM,KAAK,GAAGA,sBAAQ,EAAE;IAExB,QACEC,eAACC,aAAI,EAAA,EACH,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC,EACvB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE;AACV,YAAA,EAAE,EAAE;AACF,gBAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;AAC/C,gBAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;AAClC,aAAA;AACF,SAAA,EAAA,QAAA,EAEDC,gBAACC,iBAAQ,EAAA,EAAc,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,CACrCH,cAAA,CAACI,qBAAY,EAAA,EAAA,QAAA,EACXJ,eAAC,UAAU,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,CAAI,EAAA,CAC5C,EACfA,cAAA,CAACK,qBAAY,EAAA,EACX,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE;AACF,wBAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY;AACzC,wBAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;AACvC,wBAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU;AAC/C,qBAAA,EAAA,CACD,CAAA,EAAA,EAXU,QAAQ,CAYX,EAAA,CACN;AAEX;;;;"}
package/dist/esm/components/Header.d.ts CHANGED
@@ -2,6 +2,9 @@ import React from 'react';
2
2
  interface HeaderProps {
3
3
  userName?: string;
4
4
  userInitials?: string;
5
+ toggleMenu: () => void;
6
+ signOut: () => void;
7
+ search?: () => void;
5
8
  }
6
9
  export declare const Header: React.FC<HeaderProps>;
7
10
  export {};
package/dist/esm/components/Header.js CHANGED
@@ -1,26 +1,27 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { styled, Box, Typography, TextField, IconButton } from '@mui/material';
2
+ import React from 'react';
3
+ import { styled, Box, Typography, TextField, IconButton, Divider } from '@mui/material';
3
4
  import { useTheme } from '../ThemeProvider.js';
4
- import { SchoolRounded, SearchRounded } from '@mui/icons-material';
5
+ import { MenuRounded, SchoolRounded, SearchRounded } from '@mui/icons-material';
6
+ import PopoverMenu from './PopoverMenu.js';
5
7
 
6
8
  const StyledHeader = styled(Box)(({ theme }) => ({
7
- padding: theme.spacing(1.5, 4), // px-4 py-3
8
9
  display: 'flex',
9
10
  alignItems: 'center',
10
11
  justifyContent: 'space-between',
11
- gap: theme.spacing(2), // gap-2
12
12
  backgroundColor: theme.palette.primary.main, // var(--color-primary)
13
- [theme.breakpoints.up('sm')]: {
14
- padding: theme.spacing(2, 6), // sm:px-6
15
- },
16
13
  [theme.breakpoints.up('md')]: {
17
- padding: theme.spacing(2, 8), // md:px-8
18
14
  gap: theme.spacing(4), // md:gap-4
15
+ padding: theme.spacing(1.5, 1.5), // px-4 py-3
16
+ },
17
+ [theme.breakpoints.down('md')]: {
18
+ padding: 0, // px-4 py-3
19
19
  },
20
20
  }));
21
21
  const StyledLogoWrapper = styled(Box)(({ theme }) => ({
22
22
  display: 'flex',
23
23
  alignItems: 'center',
24
+ padding: theme.spacing(1.5),
24
25
  gap: theme.spacing(2), // md:gap-2
25
26
  [theme.breakpoints.down('md')]: {
26
27
  gap: theme.spacing(1.5), // gap-1.5
@@ -30,10 +31,6 @@ const StyledLogoIcon = styled(Box)(({ theme }) => ({
30
31
  width: 32, // md:w-8 md:h-8
31
32
  height: 32,
32
33
  color: theme.palette.light.main, // text-[#FDFCEE]
33
- [theme.breakpoints.down('md')]: {
34
- width: 24, // w-6
35
- height: 24, // h-6
36
- },
37
34
  }));
38
35
  const StyledLogoText = styled(Typography)(({ theme }) => ({
39
36
  color: theme.palette.light.main, // text-[#FDFCEE]
@@ -50,21 +47,14 @@ const StyledLogoText = styled(Typography)(({ theme }) => ({
50
47
  const StyledSearchContainer = styled(Box)(({ theme }) => ({
51
48
  flex: 1,
52
49
  maxWidth: '32rem', // max-w-2xl
53
- margin: theme.spacing(0, 8), // mx-8
50
+ margin: theme.spacing(0, 2), // mx-8
54
51
  position: 'relative',
55
- [theme.breakpoints.down('md')]: {
56
- margin: theme.spacing(0, 4), // sm:mx-4
57
- },
58
- [theme.breakpoints.down('sm')]: {
59
- margin: theme.spacing(0, 2), // mx-2
60
- },
61
52
  }));
62
53
  const StyledTextField = styled(TextField)(({ theme }) => ({
63
54
  '& .MuiInputBase-root': {
64
55
  backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]
65
56
  color: theme.palette.dark.main, // text-[#4D3019]
66
57
  borderRadius: '9999px', // rounded-full
67
- paddingRight: theme.spacing(6), // pr-12
68
58
  fontSize: '1rem', // text-base
69
59
  [theme.breakpoints.down('md')]: {
70
60
  paddingRight: theme.spacing(5), // sm:pr-10
@@ -90,31 +80,39 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
90
80
  },
91
81
  }));
92
82
  const StyledSearchButton = styled(IconButton)(({ theme }) => ({
93
- position: 'absolute',
94
- right: theme.spacing(2), // md:right-2
95
- top: '50%',
96
- transform: 'translateY(-50%)',
97
- width: theme.spacing(5), // md:w-10
98
- height: theme.spacing(5), // md:h-10
99
- borderRadius: '50%', // rounded-full
100
- backgroundColor: theme.palette.primary.main, // var(--color-primary)
83
+ display: 'flex',
84
+ alignItems: 'center',
85
+ justifyContent: 'center',
86
+ position: 'static',
87
+ borderRadius: '50%',
88
+ backgroundColor: theme.palette.primary.main,
89
+ width: theme.spacing(5),
90
+ height: theme.spacing(5),
91
+ [theme.breakpoints.down('md')]: {
92
+ width: theme.spacing(5),
93
+ height: theme.spacing(5),
94
+ marginRight: theme.spacing(1),
95
+ },
96
+ [theme.breakpoints.down('sm')]: {
97
+ marginRight: theme.spacing(0.5),
98
+ },
101
99
  '&:hover': {
102
- opacity: 0.9, // hover:opacity-90
100
+ opacity: 0.9,
103
101
  backgroundColor: theme.palette.primary.main,
104
102
  },
105
- [theme.breakpoints.down('md')]: {
106
- right: theme.spacing(1), // right-1
107
- width: theme.spacing(4), // w-8
108
- height: theme.spacing(4), // h-8
109
- },
110
103
  }));
111
104
  const StyledSearchIcon = styled(Box)(({ theme }) => ({
112
- width: 20, // md:w-5 md:h-5
113
- height: 20,
114
- color: theme.palette.light.main, // text-[#FDFCEE]
115
- [theme.breakpoints.down('md')]: {
116
- width: 16, // w-4
117
- height: 16, // h-4
105
+ display: 'flex',
106
+ alignItems: 'center',
107
+ justifyContent: 'center',
108
+ color: theme.palette.light.main,
109
+ width: '100%',
110
+ height: '100%',
111
+ '& svg': {
112
+ fontSize: '1.5rem',
113
+ [theme.breakpoints.down('sm')]: {
114
+ fontSize: '1.25rem',
115
+ },
118
116
  },
119
117
  }));
120
118
  const StyledUserContainer = styled(Box)(({ theme }) => ({
@@ -122,7 +120,7 @@ const StyledUserContainer = styled(Box)(({ theme }) => ({
122
120
  alignItems: 'center',
123
121
  gap: theme.spacing(3), // md:gap-3
124
122
  [theme.breakpoints.down('md')]: {
125
- gap: theme.spacing(2), // gap-2
123
+ gap: 0,
126
124
  },
127
125
  }));
128
126
  const StyledAvatar = styled(Box)(({ theme }) => ({
@@ -137,11 +135,7 @@ const StyledAvatar = styled(Box)(({ theme }) => ({
137
135
  [theme.breakpoints.down('md')]: {
138
136
  width: theme.spacing(5), // sm:w-10
139
137
  height: theme.spacing(5), // sm:h-10
140
- },
141
- [theme.breakpoints.down('sm')]: {
142
- width: theme.spacing(4), // w-8
143
- height: theme.spacing(4), // h-8
144
- },
138
+ }
145
139
  }));
146
140
  const StyledAvatarText = styled(Typography)(({ theme }) => ({
147
141
  color: theme.palette.dark.main, // text-[#4D3019]
@@ -154,6 +148,7 @@ const StyledAvatarText = styled(Typography)(({ theme }) => ({
154
148
  const StyledUserName = styled(Typography)(({ theme }) => ({
155
149
  color: theme.palette.light.main, // text-[#FDFCEE]
156
150
  fontWeight: 500, // font-medium
151
+ marginLeft: theme.spacing(1),
157
152
  fontSize: '1.125rem', // text-lg
158
153
  display: 'none', // hidden
159
154
  [theme.breakpoints.up('sm')]: {
@@ -161,13 +156,26 @@ const StyledUserName = styled(Typography)(({ theme }) => ({
161
156
  },
162
157
  [theme.breakpoints.down('md')]: {
163
158
  fontSize: '0.875rem', // text-sm
159
+ display: 'none'
164
160
  },
165
161
  }));
166
- const Header = ({ userName = 'John Doe', userInitials = 'JD', }) => {
162
+ const Header = ({ userName = 'John Doe', userInitials = 'JD', toggleMenu, signOut, search }) => {
167
163
  const theme = useTheme();
168
- return (jsxs(StyledHeader, { children: [jsxs(StyledLogoWrapper, { children: [jsx(StyledLogoIcon, { children: jsx(SchoolRounded, { sx: { fontSize: 32, color: 'currentColor' } }) }), jsx(StyledLogoText, { variant: "h1", children: theme.appName })] }), jsx(StyledSearchContainer, { children: jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, InputProps: {
169
- endAdornment: (jsx(StyledSearchButton, { children: jsx(StyledSearchIcon, { children: jsx(SearchRounded, { sx: { fontSize: 20 } }) }) })),
170
- } }) }), jsxs(StyledUserContainer, { children: [jsx(StyledAvatar, { children: jsx(StyledAvatarText, { children: userInitials }) }), jsx(StyledUserName, { children: userName })] })] }));
164
+ const [anchorEl, setAnchorEl] = React.useState(null);
165
+ const handleOpen = (event) => {
166
+ setAnchorEl(event.currentTarget);
167
+ };
168
+ const handleClose = () => {
169
+ setAnchorEl(null);
170
+ };
171
+ return (jsxs(StyledHeader, { children: [jsx(IconButton, { disableRipple: true, onClick: toggleMenu, sx: {
172
+ display: { xs: 'block', md: 'none' }
173
+ }, children: jsx(MenuRounded, { sx: { fontSize: 32, color: 'white' } }) }), jsx(Divider, { orientation: 'vertical', sx: { color: '#FFFFFF', borderRightWidth: 2, display: { xs: 'block', md: 'none' } } }), jsxs(StyledLogoWrapper, { children: [jsx(StyledLogoIcon, { children: jsx(SchoolRounded, { sx: { fontSize: 32, color: 'currentColor' } }) }), jsx(StyledLogoText, { variant: "h1", children: theme.appName })] }), jsx(StyledSearchContainer, { children: jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, sx: { display: { xs: 'none', sm: 'none', md: 'block' } }, InputProps: {
174
+ endAdornment: (jsx(StyledSearchButton, { children: jsx(StyledSearchIcon, { children: jsx(SearchRounded, {}) }) })),
175
+ } }) }), jsxs(StyledUserContainer, { children: [jsx(StyledSearchButton, { disableRipple: true, onClick: search, sx: {
176
+ display: { xs: 'flex', md: 'none' },
177
+ backgroundColor: '#ffffff83'
178
+ }, children: jsx(StyledSearchIcon, { children: jsx(SearchRounded, {}) }) }), jsxs(IconButton, { onClick: handleOpen, disableRipple: true, children: [jsx(StyledAvatar, { children: jsx(StyledAvatarText, { children: userInitials }) }), jsx(StyledUserName, { children: userName })] })] }), jsx(PopoverMenu, { anchorEl: anchorEl, onClose: handleClose, signOut: () => { signOut(); handleClose(); } })] }));
171
179
  };
172
180
 
173
181
  export { Header };
package/dist/esm/components/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["\n\nimport React from 'react';\nimport { Box, styled, Typography, TextField, IconButton } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { SchoolRounded, SearchRounded } from '@mui/icons-material';\n\ninterface HeaderProps {\n userName?: string;\n userInitials?: string;\n}\n\nconst StyledHeader = styled(Box)(({ theme }) => ({\n padding: theme.spacing(1.5, 4), // px-4 py-3\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: theme.spacing(2), // gap-2\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\n [theme.breakpoints.up('sm')]: {\n padding: theme.spacing(2, 6), // sm:px-6\n },\n [theme.breakpoints.up('md')]: {\n padding: theme.spacing(2, 8), // md:px-8\n gap: theme.spacing(4), // md:gap-4\n },\n}));\n\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2), // md:gap-2\n [theme.breakpoints.down('md')]: {\n gap: theme.spacing(1.5), // gap-1.5\n },\n}));\n\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\n width: 32, // md:w-8 md:h-8\n height: 32,\n color: theme.palette.light.main, // text-[#FDFCEE]\n [theme.breakpoints.down('md')]: {\n width: 24, // w-6\n height: 24, // h-6\n },\n}));\n\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\n color: theme.palette.light.main, // text-[#FDFCEE]\n fontWeight: 700, // font-bold\n letterSpacing: '0.05em', // tracking-wide\n fontSize: '1.5rem', // text-2xl\n [theme.breakpoints.down('md')]: {\n fontSize: '1.25rem', // sm:text-xl\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: '1.125rem', // text-lg\n },\n}));\n\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\n flex: 1,\n maxWidth: '32rem', // max-w-2xl\n margin: theme.spacing(0, 8), // mx-8\n position: 'relative',\n [theme.breakpoints.down('md')]: {\n margin: theme.spacing(0, 4), // sm:mx-4\n },\n [theme.breakpoints.down('sm')]: {\n margin: theme.spacing(0, 2), // mx-2\n },\n}));\n\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n color: theme.palette.dark.main, // text-[#4D3019]\n borderRadius: '9999px', // rounded-full\n paddingRight: theme.spacing(6), // pr-12\n fontSize: '1rem', // text-base\n [theme.breakpoints.down('md')]: {\n paddingRight: theme.spacing(5), // sm:pr-10\n fontSize: '0.875rem', // text-sm\n },\n },\n '& .MuiInputBase-input': {\n padding: theme.spacing(1.5, 3), // px-4 py-2\n [theme.breakpoints.up('md')]: {\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\n },\n [theme.breakpoints.down('sm')]: {\n padding: theme.spacing(1.5, 2.5), // sm:px-5\n },\n },\n '& .MuiInputBase-input::placeholder': {\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\n opacity: 1,\n },\n '& .MuiInputBase-root:focus-within': {\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\n outlineOffset: 0,\n },\n}));\n\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n right: theme.spacing(2), // md:right-2\n top: '50%',\n transform: 'translateY(-50%)',\n width: theme.spacing(5), // md:w-10\n height: theme.spacing(5), // md:h-10\n borderRadius: '50%', // rounded-full\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\n '&:hover': {\n opacity: 0.9, // hover:opacity-90\n backgroundColor: theme.palette.primary.main,\n },\n [theme.breakpoints.down('md')]: {\n right: theme.spacing(1), // right-1\n width: theme.spacing(4), // w-8\n height: theme.spacing(4), // h-8\n },\n}));\n\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\n width: 20, // md:w-5 md:h-5\n height: 20,\n color: theme.palette.light.main, // text-[#FDFCEE]\n [theme.breakpoints.down('md')]: {\n width: 16, // w-4\n height: 16, // h-4\n },\n}));\n\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3), // md:gap-3\n [theme.breakpoints.down('md')]: {\n gap: theme.spacing(2), // gap-2\n },\n}));\n\nconst StyledAvatar = styled(Box)(({ theme }) => ({\n width: theme.spacing(6), // md:w-12\n height: theme.spacing(6), // md:h-12\n borderRadius: '50%', // rounded-full\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n [theme.breakpoints.down('md')]: {\n width: theme.spacing(5), // sm:w-10\n height: theme.spacing(5), // sm:h-10\n },\n [theme.breakpoints.down('sm')]: {\n width: theme.spacing(4), // w-8\n height: theme.spacing(4), // h-8\n },\n}));\n\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\n color: theme.palette.dark.main, // text-[#4D3019]\n fontWeight: 700, // font-bold\n fontSize: '1.125rem', // text-lg\n [theme.breakpoints.down('md')]: {\n fontSize: '0.875rem', // text-sm\n },\n}));\n\nconst StyledUserName = styled(Typography)(({ theme }) => ({\n color: theme.palette.light.main, // text-[#FDFCEE]\n fontWeight: 500, // font-medium\n fontSize: '1.125rem', // text-lg\n display: 'none', // hidden\n [theme.breakpoints.up('sm')]: {\n display: 'inline', // sm:inline\n },\n [theme.breakpoints.down('md')]: {\n fontSize: '0.875rem', // text-sm\n },\n}));\n\nexport const Header: React.FC<HeaderProps> = ({\n userName = 'John Doe',\n userInitials = 'JD',\n}) => {\n const theme = useTheme();\n\n return (\n <StyledHeader>\n <StyledLogoWrapper>\n <StyledLogoIcon>\n <SchoolRounded sx={{fontSize:32, color: 'currentColor'}} />\n </StyledLogoIcon>\n <StyledLogoText variant=\"h1\">{theme.appName}</StyledLogoText>\n </StyledLogoWrapper>\n\n <StyledSearchContainer>\n <StyledTextField\n placeholder=\"Search for a policy\"\n variant=\"outlined\"\n fullWidth\n InputProps={{\n endAdornment: (\n <StyledSearchButton>\n <StyledSearchIcon>\n <SearchRounded sx={{fontSize: 20}} />\n </StyledSearchIcon>\n </StyledSearchButton>\n ),\n }}\n />\n </StyledSearchContainer>\n\n <StyledUserContainer>\n <StyledAvatar>\n <StyledAvatarText>{userInitials}</StyledAvatarText>\n </StyledAvatar>\n <StyledUserName>{userName}</StyledUserName>\n </StyledUserContainer>\n </StyledHeader>\n );\n};"],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["\n\nimport React from 'react';\nimport { Box, styled, Typography, TextField, IconButton, Divider } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { MenuRounded, SchoolRounded, SearchRounded } from '@mui/icons-material';\nimport PopoverMenu from './PopoverMenu';\n\ninterface HeaderProps {\n userName?: string;\n userInitials?: string;\n toggleMenu: () => void;\n signOut: () => void;\n search?: () => void;\n}\n\nconst StyledHeader = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\n [theme.breakpoints.up('md')]: {\n gap: theme.spacing(4), // md:gap-4\n padding: theme.spacing(1.5, 1.5), // px-4 py-3\n },\n [theme.breakpoints.down('md')]: {\n padding: 0, // px-4 py-3\n },\n}));\n\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(1.5),\n gap: theme.spacing(2), // md:gap-2\n [theme.breakpoints.down('md')]: {\n gap: theme.spacing(1.5), // gap-1.5\n },\n}));\n\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\n width: 32, // md:w-8 md:h-8\n height: 32,\n color: theme.palette.light.main, // text-[#FDFCEE]\n}));\n\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\n color: theme.palette.light.main, // text-[#FDFCEE]\n fontWeight: 700, // font-bold\n letterSpacing: '0.05em', // tracking-wide\n fontSize: '1.5rem', // text-2xl\n [theme.breakpoints.down('md')]: {\n fontSize: '1.25rem', // sm:text-xl\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: '1.125rem', // text-lg\n },\n}));\n\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\n flex: 1,\n maxWidth: '32rem', // max-w-2xl\n margin: theme.spacing(0, 2), // mx-8\n position: 'relative',\n}));\n\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n color: theme.palette.dark.main, // text-[#4D3019]\n borderRadius: '9999px', // rounded-full\n fontSize: '1rem', // text-base\n [theme.breakpoints.down('md')]: {\n paddingRight: theme.spacing(5), // sm:pr-10\n fontSize: '0.875rem', // text-sm\n },\n },\n '& .MuiInputBase-input': {\n padding: theme.spacing(1.5, 3), // px-4 py-2\n [theme.breakpoints.up('md')]: {\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\n },\n [theme.breakpoints.down('sm')]: {\n padding: theme.spacing(1.5, 2.5), // sm:px-5\n },\n },\n '& .MuiInputBase-input::placeholder': {\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\n opacity: 1,\n },\n '& .MuiInputBase-root:focus-within': {\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\n outlineOffset: 0,\n },\n}));\n\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'static',\n borderRadius: '50%',\n backgroundColor: theme.palette.primary.main,\n width: theme.spacing(5),\n height: theme.spacing(5),\n [theme.breakpoints.down('md')]: {\n width: theme.spacing(5),\n height: theme.spacing(5),\n marginRight: theme.spacing(1),\n },\n [theme.breakpoints.down('sm')]: {\n marginRight: theme.spacing(0.5),\n },\n '&:hover': {\n opacity: 0.9,\n backgroundColor: theme.palette.primary.main,\n },\n}));\n\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\n display: 'flex', \n alignItems: 'center',\n justifyContent: 'center',\n color: theme.palette.light.main,\n width: '100%',\n height: '100%',\n '& svg': {\n fontSize: '1.5rem',\n [theme.breakpoints.down('sm')]: {\n fontSize: '1.25rem',\n },\n },\n}));\n\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3), // md:gap-3\n [theme.breakpoints.down('md')]: {\n gap: 0,\n },\n}));\n\nconst StyledAvatar = styled(Box)(({ theme }) => ({\n width: theme.spacing(6), // md:w-12\n height: theme.spacing(6), // md:h-12\n borderRadius: '50%', // rounded-full\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n [theme.breakpoints.down('md')]: {\n width: theme.spacing(5), // sm:w-10\n height: theme.spacing(5), // sm:h-10\n }\n}));\n\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\n color: theme.palette.dark.main, // text-[#4D3019]\n fontWeight: 700, // font-bold\n fontSize: '1.125rem', // text-lg\n [theme.breakpoints.down('md')]: {\n fontSize: '0.875rem', // text-sm\n },\n}));\n\nconst StyledUserName = styled(Typography)(({ theme }) => ({\n color: theme.palette.light.main, // text-[#FDFCEE]\n fontWeight: 500, // font-medium\n marginLeft: theme.spacing(1),\n fontSize: '1.125rem', // text-lg\n display: 'none', // hidden\n [theme.breakpoints.up('sm')]: {\n display: 'inline', // sm:inline\n },\n [theme.breakpoints.down('md')]: {\n fontSize: '0.875rem', // text-sm\n display: 'none'\n },\n}));\n\nexport const Header: React.FC<HeaderProps> = ({\n userName = 'John Doe',\n userInitials = 'JD',\n toggleMenu,\n signOut,\n search\n}) => {\n const theme = useTheme();\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n\n return (\n <StyledHeader>\n <IconButton disableRipple onClick={toggleMenu} sx={{\n display: {xs: 'block', md: 'none'}\n }}>\n <MenuRounded sx={{fontSize: 32, color: 'white'}}/>\n </IconButton>\n <Divider orientation='vertical' sx={{color: '#FFFFFF',borderRightWidth: 2,display: {xs: 'block', md: 'none'}}}/>\n <StyledLogoWrapper>\n <StyledLogoIcon>\n <SchoolRounded sx={{fontSize:32, color: 'currentColor'}} />\n </StyledLogoIcon>\n <StyledLogoText variant=\"h1\">{theme.appName}</StyledLogoText>\n </StyledLogoWrapper>\n\n {/* Search input for md+ screens */}\n <StyledSearchContainer >\n <StyledTextField\n placeholder=\"Search for a policy\"\n variant=\"outlined\"\n fullWidth\n sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}\n InputProps={{\n endAdornment: (\n <StyledSearchButton>\n <StyledSearchIcon>\n <SearchRounded />\n </StyledSearchIcon>\n </StyledSearchButton>\n ),\n }}\n />\n </StyledSearchContainer>\n\n <StyledUserContainer>\n {/* Search button only visible on XS screens */}\n <StyledSearchButton\n disableRipple\n onClick={search}\n sx={{\n display: { xs: 'flex', md: 'none' },\n backgroundColor: '#ffffff83'\n }}\n >\n <StyledSearchIcon>\n <SearchRounded />\n </StyledSearchIcon>\n </StyledSearchButton>\n <IconButton onClick={handleOpen} disableRipple>\n <StyledAvatar>\n <StyledAvatarText>{userInitials}</StyledAvatarText>\n </StyledAvatar>\n <StyledUserName>{userName}</StyledUserName>\n </IconButton>\n </StyledUserContainer>\n\n <PopoverMenu\n anchorEl={anchorEl}\n onClose={handleClose}\n signOut={()=>{signOut(); handleClose();}}\n />\n </StyledHeader>\n );\n};"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/dist/esm/components/PopoverMenu.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ interface PopoverMenuProps {
2
+ anchorEl: HTMLElement | null;
3
+ onClose: () => void;
4
+ signOut: () => void;
5
+ }
6
+ export default function PopoverMenu({ anchorEl, onClose, signOut, }: PopoverMenuProps): import("react/jsx-runtime").JSX.Element;
7
+ export {};
package/dist/esm/components/PopoverMenu.js ADDED
@@ -0,0 +1,21 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
3
+ import LogoutIcon from '@mui/icons-material/Logout';
4
+ import { useTheme } from '../ThemeProvider.js';
5
+
6
+ function PopoverMenu({ anchorEl, onClose, signOut, }) {
7
+ const theme = useTheme();
8
+ return (jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: onClose, PaperProps: {
9
+ sx: {
10
+ backgroundColor: theme.palette.background.paper,
11
+ color: theme.palette.text.primary,
12
+ },
13
+ }, children: jsxs(MenuItem, { onClick: signOut, children: [jsx(ListItemIcon, { children: jsx(LogoutIcon, { sx: { color: theme.palette.primary.main } }) }), jsx(ListItemText, { primary: "Logout", sx: {
14
+ color: theme.palette.primary.contrastText,
15
+ fontFamily: theme.typography.fontFamily,
16
+ fontWeight: theme.typography.button.fontWeight,
17
+ } })] }, "logout") }));
18
+ }
19
+
20
+ export { PopoverMenu as default };
21
+ //# sourceMappingURL=PopoverMenu.js.map
package/dist/esm/components/PopoverMenu.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PopoverMenu.js","sources":["../../../../src/components/PopoverMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';\nimport LogoutIcon from '@mui/icons-material/Logout';\nimport { useTheme } from '../ThemeProvider';\n\ninterface PopoverMenuProps {\n anchorEl: HTMLElement | null;\n onClose: () => void;\n signOut: () => void;\n}\n\nexport default function PopoverMenu({\n anchorEl,\n onClose,\n signOut,\n}: PopoverMenuProps) {\n const theme = useTheme();\n\n return (\n <Menu\n anchorEl={anchorEl}\n open={Boolean(anchorEl)}\n onClose={onClose}\n PaperProps={{\n sx: {\n backgroundColor: theme.palette.background.paper,\n color: theme.palette.text.primary,\n },\n }}\n >\n <MenuItem key=\"logout\" onClick={signOut}>\n <ListItemIcon>\n <LogoutIcon sx={{ color: theme.palette.primary.main }} />\n </ListItemIcon>\n <ListItemText\n primary=\"Logout\"\n sx={{\n color: theme.palette.primary.contrastText,\n fontFamily: theme.typography.fontFamily,\n fontWeight: theme.typography.button.fontWeight,\n }}\n />\n </MenuItem>\n </Menu>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAWc,SAAU,WAAW,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,OAAO,GACU,EAAA;AACjB,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IAExB,QACEA,IAAC,IAAI,EAAA,EACH,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC,EACvB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE;AACV,YAAA,EAAE,EAAE;AACF,gBAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;AAC/C,gBAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;AAClC,aAAA;AACF,SAAA,EAAA,QAAA,EAEDC,KAAC,QAAQ,EAAA,EAAc,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,CACrCD,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,IAAC,UAAU,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,CAAI,EAAA,CAC5C,EACfA,GAAA,CAAC,YAAY,EAAA,EACX,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE;AACF,wBAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY;AACzC,wBAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;AACvC,wBAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU;AAC/C,qBAAA,EAAA,CACD,CAAA,EAAA,EAXU,QAAQ,CAYX,EAAA,CACN;AAEX;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ece-docs-components",
3
- "version": "1.0.16",
3
+ "version": "1.0.17",
4
4
  "type": "module",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",