ece-docs-components 1.0.5 → 1.0.7

package/dist/esm/components/SimpleModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SimpleModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+}
+export declare const SimpleModal: React.FC<SimpleModalProps>;
+export {};

package/dist/esm/components/SimpleModal.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { styled, Dialog, DialogTitle, IconButton, DialogContent } from '@mui/material';
+import { useTheme } from '../ThemeProvider.js';
+import { CloseRounded } from '@mui/icons-material';
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        borderRadius: (typeof theme.shape.borderRadius === 'string'
+            ? parseInt(theme.shape.borderRadius, 10)
+            : theme.shape.borderRadius || 4) * 2,
+        maxWidth: '448px',
+        width: '100%',
+    },
+}));
+const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(3),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    fontSize: '1.125rem',
+    fontWeight: 600,
+    color: theme.palette.dark.main,
+}));
+const CloseButton = styled(IconButton)(({ theme }) => ({
+    padding: theme.spacing(0.5),
+    '&:hover': {
+        backgroundColor: `${theme.palette.dark.main}0D`,
+    },
+}));
+const SimpleModal = ({ isOpen, onClose, title, children, }) => {
+    const { theme } = useTheme();
+    return (jsxs(StyledDialog, { open: isOpen, onClose: onClose, maxWidth: "sm", fullWidth: true, children: [jsxs(StyledDialogTitle, { children: [title, jsx(CloseButton, { onClick: onClose, "aria-label": "Close", children: jsx(CloseRounded, { sx: { fontSize: 20, color: theme.palette.dark.main } }) })] }), jsx(DialogContent, { sx: { p: 3 }, children: children })] }));
+};
+
+export { SimpleModal };
+//# sourceMappingURL=SimpleModal.js.map

package/dist/esm/components/SimpleModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleModal.js","sources":["../../../../src/components/SimpleModal.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Dialog, DialogTitle, DialogContent, IconButton, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { CloseRounded } from '@mui/icons-material';\n\ninterface SimpleModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title: string;\n  children: React.ReactNode;\n}\n\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n  '& .MuiDialog-paper': {\n    borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n    maxWidth: '448px',\n    width: '100%',\n  },\n}));\n\nconst StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(3),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  fontSize: '1.125rem',\n  fontWeight: 600,\n  color: theme.palette.dark.main,\n}));\n\nconst CloseButton = styled(IconButton)(({ theme }) => ({\n  padding: theme.spacing(0.5),\n  '&:hover': {\n    backgroundColor: `${theme.palette.dark.main}0D`,\n  },\n}));\n\nexport const SimpleModal: React.FC<SimpleModalProps> = ({\n  isOpen,\n  onClose,\n  title,\n  children,\n}) => {\n  const { theme } = useTheme();\n\n  return (\n    <StyledDialog \n      open={isOpen} \n      onClose={onClose}\n      maxWidth=\"sm\"\n      fullWidth\n    >\n      <StyledDialogTitle>\n        {title}\n        <CloseButton onClick={onClose} aria-label=\"Close\">\n          <CloseRounded sx={{fontSize:20, color:theme.palette.dark.main}} />\n        </CloseButton>\n      </StyledDialogTitle>\n\n      <DialogContent sx={{ p: 3 }}>\n        {children}\n      </DialogContent>\n    </StyledDialog>\n  );\n};"],"names":[],"mappings":";;;;;;AAcA;AACE;;;;AAIE;AACA;AACD;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AACE;AACA;;AAEC;AACF;AAEM;AAML;AAEA;AAmBF;;"}

package/dist/esm/components/StatusBar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface StatusBarProps {
+    itemCount: number;
+    variant: 'actionstarted' | 'noaction';
+    onTailorClick?: () => void;
+    onNextClick?: () => void;
+}
+export declare const StatusBar: React.FC<StatusBarProps>;
+export {};

package/dist/esm/components/StatusBar.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { styled, Box, IconButton, Typography } from '@mui/material';
+import { Button } from './Button.js';
+import { PieChartRounded, ChevronRightRounded } from '@mui/icons-material';
+
+const StatusBarContainer = styled(Box)(({ theme }) => ({
+    width: '100%',
+    backgroundColor: '#F5C98E',
+    padding: theme.spacing(1.5, 3),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.spacing(3),
+    flexDirection: 'row',
+    [theme.breakpoints.down('sm')]: {
+        flexDirection: 'column',
+        padding: theme.spacing(1.25, 2),
+    },
+}));
+const ContentWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+    flex: 1,
+    minWidth: 0,
+    justifyContent: 'flex-start',
+    [theme.breakpoints.down('sm')]: {
+        justifyContent: 'center',
+        gap: theme.spacing(1),
+    },
+}));
+const NextButton = styled(IconButton)(({ theme }) => ({
+    width: 40,
+    height: 40,
+    border: `2px solid rgba(77, 48, 25, 0.25)`,
+    backgroundColor: '#fff',
+    '&:hover': {
+        backgroundColor: '#4D3019',
+        color: '#fff',
+    },
+    [theme.breakpoints.down('sm')]: {
+        width: 36,
+        height: 36,
+    },
+}));
+const StatusBar = ({ itemCount, variant = 'actionstarted', onTailorClick, onNextClick }) => {
+    const message = `There are ${itemCount} items that need attention.`;
+    return (jsxs(StatusBarContainer, { children: [jsxs(ContentWrapper, { children: [jsx(PieChartRounded, { sx: {
+                            fontSize: 24,
+                            color: "#4D3019",
+                            flexShrink: 0,
+                        } }), jsx(Typography, { sx: {
+                            fontSize: { xs: '14px', sm: '15px', md: '16px' },
+                            color: '#4D3019',
+                            wordBreak: 'break-word',
+                            textAlign: { xs: 'center', sm: 'left' },
+                        }, children: variant === 'actionstarted' ? (jsxs(Fragment, { children: [jsx(Box, { component: "span", sx: { fontWeight: 700 }, children: "Incomplete." }), " ", message] })) : (jsxs(Fragment, { children: [jsx(Box, { component: "span", sx: { fontWeight: 700 }, children: "Not started." }), " ", message] })) })] }), variant === 'actionstarted' ? (jsx(Box, { sx: { display: 'flex', gap: 1.5, flexShrink: 0 }, children: jsx(NextButton, { onClick: onNextClick, "aria-label": "Next", children: jsx(ChevronRightRounded, { sx: { fontSize: 20 } }) }) })) : (jsx(Box, { sx: { flexShrink: 0 }, children: jsx(Button, { variant: "outline", size: "sm", onClick: onTailorClick, children: "Tailor policies" }) }))] }));
+};
+
+export { StatusBar };
+//# sourceMappingURL=StatusBar.js.map

package/dist/esm/components/StatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sources":["../../../../src/components/StatusBar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, Typography, IconButton, styled } from '@mui/material';\nimport { Button } from './Button';\nimport { ChevronRightRounded, PieChartRounded } from '@mui/icons-material';\n\ninterface StatusBarProps {\n  itemCount: number;\n  variant: 'actionstarted' | 'noaction';\n  onTailorClick?: () => void;\n  onNextClick?: () => void;\n}\n\nconst StatusBarContainer = styled(Box)(({ theme }) => ({\n  width: '100%',\n  backgroundColor: '#F5C98E',\n  padding: theme.spacing(1.5, 3),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  flexDirection: 'row',\n  [theme.breakpoints.down('sm')]: {\n    flexDirection: 'column',\n    padding: theme.spacing(1.25, 2),\n  },\n}));\n\nconst ContentWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  flex: 1,\n  minWidth: 0,\n  justifyContent: 'flex-start',\n  [theme.breakpoints.down('sm')]: {\n    justifyContent: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nconst NextButton = styled(IconButton)(({ theme }) => ({\n  width: 40,\n  height: 40,\n  border: `2px solid rgba(77, 48, 25, 0.25)`,\n  backgroundColor: '#fff',\n  '&:hover': {\n    backgroundColor: '#4D3019',\n    color: '#fff',\n  },\n  [theme.breakpoints.down('sm')]: {\n    width: 36,\n    height: 36,\n  },\n}));\n\nexport const StatusBar: React.FC<StatusBarProps> = ({\n  itemCount,\n  variant = 'actionstarted',\n  onTailorClick,\n  onNextClick\n}) => {\n  const message = `There are ${itemCount} items that need attention.`;\n\n  return (\n    <StatusBarContainer>\n      <ContentWrapper>\n        <PieChartRounded \n          sx={{\n            fontSize: 24,\n            color:\"#4D3019\",\n            flexShrink: 0 ,\n        }}\n        />\n        <Typography\n          sx={{\n            fontSize: { xs: '14px', sm: '15px', md: '16px' },\n            color: '#4D3019',\n            wordBreak: 'break-word',\n            textAlign: { xs: 'center', sm: 'left' },\n          }}\n        >\n          {variant === 'actionstarted' ? (\n            <>\n              <Box component=\"span\" sx={{ fontWeight: 700 }}>Incomplete.</Box> {message}\n            </>\n          ) : (\n            <>\n              <Box component=\"span\" sx={{ fontWeight: 700 }}>Not started.</Box> {message}\n            </>\n          )}\n        </Typography>\n      </ContentWrapper>\n      {variant === 'actionstarted' ? (\n        <Box sx={{ display: 'flex', gap: 1.5, flexShrink: 0 }}>\n          <NextButton\n            onClick={onNextClick}\n            aria-label=\"Next\"\n          >\n            <ChevronRightRounded sx={{fontSize:20}} />\n          </NextButton>\n        </Box>\n      ) : (\n        <Box sx={{ flexShrink: 0 }}>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onTailorClick}\n          >\n            Tailor policies\n          </Button>\n        </Box>\n      )}\n    </StatusBarContainer>\n  );\n};"],"names":[],"mappings":";;;;;;AAcA;AACE;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEE;;AAED;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;;AAEE;AACA;AACD;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACE;AACA;AACD;;AAEC;AACA;AACD;AACF;AAEM;AAML;;AAOU;AACA;AACA;AACH;AAIG;AACA;AACA;;AAED;AAmCX;;"}

package/dist/esm/components/TableOfContents.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Section {
+    id: string;
+    title: string;
+}
+interface TableOfContentsProps {
+    sections: Section[];
+    activeSection?: string;
+}
+export declare const TableOfContents: React.FC<TableOfContentsProps>;
+export {};

package/dist/esm/components/TableOfContents.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { styled, Box, Link, Typography } from '@mui/material';
+
+const Container = styled(Box)(({ theme }) => ({
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+        position: 'sticky',
+        right: 0,
+        top: 0,
+        width: '224px',
+        float: 'right',
+        marginLeft: theme.spacing(1.5),
+        marginBottom: 0,
+    },
+    [theme.breakpoints.up('lg')]: {
+        width: '256px',
+        marginLeft: theme.spacing(2),
+    },
+    marginBottom: theme.spacing(2),
+}));
+const ContentBox = styled(Box)(({ theme }) => ({
+    backgroundColor: '#FEFDF7',
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2,
+    padding: theme.spacing(2.5),
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(3),
+    },
+}));
+const NavLink = styled(Link)(({ theme, isActive }) => ({
+    display: 'block',
+    padding: theme.spacing(1, 2),
+    fontSize: '0.875rem',
+    textDecoration: 'none',
+    color: '#4D3019',
+    transition: 'background-color 0.2s',
+    borderLeft: isActive ? '4px solid #FFC365' : '4px solid transparent',
+    backgroundColor: isActive ? '#FFEDD1' : 'transparent',
+    fontWeight: isActive ? 700 : 400,
+    '&:hover': {
+        backgroundColor: '#FFEDD1',
+    },
+}));
+const TableOfContents = ({ sections, activeSection = 'current-section', }) => {
+    return (jsx(Container, { children: jsxs(ContentBox, { children: [jsx(Typography, { variant: "h6", sx: {
+                        color: '#4D3019',
+                        fontWeight: 600,
+                        fontSize: '16px',
+                        mb: 3,
+                    }, children: "In this policy" }), jsx(Box, { component: "nav", sx: { display: 'flex', flexDirection: 'column', gap: 0.25 }, children: sections.map((section) => {
+                        const isActive = section.id === activeSection;
+                        return (jsx(NavLink, { href: `#${section.id}`, isActive: isActive, children: section.title }, section.id));
+                    }) })] }) }));
+};
+
+export { TableOfContents };
+//# sourceMappingURL=TableOfContents.js.map

package/dist/esm/components/TableOfContents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.js","sources":["../../../../src/components/TableOfContents.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, Typography, Link, styled } from '@mui/material';\n\ninterface Section {\n  id: string;\n  title: string;\n}\n\ninterface TableOfContentsProps {\n  sections: Section[];\n  activeSection?: string;\n}\n\nconst Container = styled(Box)(({ theme }) => ({\n  width: '100%',\n  [theme.breakpoints.up('md')]: {\n    position: 'sticky',\n    right: 0,\n    top: 0,\n    width: '224px',\n    float: 'right',\n    marginLeft: theme.spacing(1.5),\n    marginBottom: 0,\n  },\n  [theme.breakpoints.up('lg')]: {\n    width: '256px',\n    marginLeft: theme.spacing(2),\n  },\n  marginBottom: theme.spacing(2),\n}));\n\nconst ContentBox = styled(Box)(({ theme }) => ({\n  backgroundColor: '#FEFDF7',\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n  padding: theme.spacing(2.5),\n  boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',\n  [theme.breakpoints.up('md')]: {\n    padding: theme.spacing(3),\n  },\n}));\n\nconst NavLink = styled(Link)<{ isActive: boolean }>(({ theme, isActive }) => ({\n  display: 'block',\n  padding: theme.spacing(1, 2),\n  fontSize: '0.875rem',\n  textDecoration: 'none',\n  color: '#4D3019',\n  transition: 'background-color 0.2s',\n  borderLeft: isActive ? '4px solid #FFC365' : '4px solid transparent',\n  backgroundColor: isActive ? '#FFEDD1' : 'transparent',\n  fontWeight: isActive ? 700 : 400,\n  '&:hover': {\n    backgroundColor: '#FFEDD1',\n  },\n}));\n\nexport const TableOfContents: React.FC<TableOfContentsProps> = ({\n  sections,\n  activeSection = 'current-section',\n}) => {\n  return (\n    <Container>\n      <ContentBox>\n        <Typography\n          variant=\"h6\"\n          sx={{\n            color: '#4D3019',\n            fontWeight: 600,\n            fontSize: '16px',\n            mb: 3,\n          }}\n        >\n          In this policy\n        </Typography>\n        <Box component=\"nav\" sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n          {sections.map((section) => {\n            const isActive = section.id === activeSection;\n            return (\n              <NavLink\n                key={section.id}\n                href={`#${section.id}`}\n                isActive={isActive}\n              >\n                {section.title}\n              </NavLink>\n            );\n          })}\n        </Box>\n      </ContentBox>\n    </Container>\n  );\n};"],"names":[],"mappings":";;;;AAeA;AACE;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;AAEC;AACA;AACD;AACD;AACD;AAED;AACE;;;;AAIA;AACA;;AAEE;AACD;AACF;AAED;AACE;;AAEA;AACA;AACA;AACA;;;;AAIA;AACE;AACD;AACF;AAEM;AAIL;AAMU;AACA;AACA;AACA;AACD;AAMC;;AAUF;AAKV;;"}

package/dist/esm/components/Tabs.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Tab {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+interface TabsProps {
+    tabs: Tab[];
+    defaultTab?: string;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export {};

package/dist/esm/components/Tabs.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { styled, Box, Button, Collapse } from '@mui/material';
+import { ExpandMoreRounded } from '@mui/icons-material';
+
+const TabsContainer = styled(Box)({
+    display: 'none',
+    '@media (min-width: 900px)': {
+        display: 'block',
+    },
+});
+const TabButtonsWrapper = styled(Box)({
+    display: 'flex',
+    gap: '4px',
+    backgroundColor: '#FDFCEE',
+});
+const TabButton = styled(Button)(({ theme, isActive }) => ({
+    padding: theme.spacing(2, 3),
+    fontSize: '16px',
+    fontWeight: 500,
+    textTransform: 'none',
+    color: isActive ? '#4D3019' : '#826E5C',
+    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',
+    borderRadius: 0,
+    position: 'relative',
+    minWidth: 'auto',
+    '&:hover': {
+        backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',
+        color: '#4D3019',
+    },
+    '&::after': isActive ? {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '4px',
+        backgroundColor: theme.palette.primary.main,
+    } : {},
+}));
+const TabContent = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(3),
+    color: '#4D3019',
+    backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,
+}));
+const MobileContainer = styled(Box)({
+    backgroundColor: '#FDFCEE',
+    '@media (min-width: 900px)': {
+        display: 'none',
+    },
+});
+const MobileTabButton = styled(Button)(({ theme, isExpanded }) => ({
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(2, 2),
+    textAlign: 'left',
+    textTransform: 'none',
+    borderRadius: 0,
+    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',
+    '&:hover': {
+        backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',
+    },
+}));
+const MobileTabContent = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(2, 2, 3, 2),
+    color: '#4D3019',
+    backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,
+}));
+const Tabs = ({ tabs, defaultTab }) => {
+    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
+    const [mobileExpandedTab, setMobileExpandedTab] = useState(null);
+    const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;
+    const handleMobileTabClick = (tabId) => {
+        setActiveTab(tabId);
+        setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);
+    };
+    return (jsxs(Fragment, { children: [jsxs(TabsContainer, { children: [jsx(TabButtonsWrapper, { children: tabs.map((tab) => (jsx(TabButton, { onClick: () => setActiveTab(tab.id), isActive: activeTab === tab.id, children: tab.label }, tab.id))) }), jsx(TabContent, { children: activeTabContent })] }), jsx(MobileContainer, { children: tabs.map((tab, index) => (jsxs(Box, { sx: {
+                        borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',
+                    }, children: [jsxs(MobileTabButton, { onClick: () => handleMobileTabClick(tab.id), isExpanded: mobileExpandedTab === tab.id, children: [jsx(Box, { component: "span", sx: {
+                                        fontSize: '16px',
+                                        fontWeight: 500,
+                                        color: activeTab === tab.id ? '#4D3019' : '#826E5C',
+                                    }, children: tab.label }), jsx(ExpandMoreRounded, { sx: {
+                                        fontSize: 20,
+                                        color: activeTab === tab.id ? '#4D3019' : '#826E5C',
+                                        transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',
+                                        transition: 'transform 0.2s',
+                                    } })] }), jsx(Collapse, { in: mobileExpandedTab === tab.id, children: jsx(MobileTabContent, { children: tab.content }) })] }, tab.id))) })] }));
+};
+
+export { Tabs };
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/components/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, Button, Collapse, styled } from '@mui/material';\nimport { ExpandMoreRounded } from '@mui/icons-material';\n\ninterface Tab {\n  id: string;\n  label: string;\n  content: React.ReactNode;\n}\n\ninterface TabsProps {\n  tabs: Tab[];\n  defaultTab?: string;\n}\n\nconst TabsContainer = styled(Box)({\n  display: 'none',\n  '@media (min-width: 900px)': {\n    display: 'block',\n  },\n});\n\nconst TabButtonsWrapper = styled(Box)({\n  display: 'flex',\n  gap: '4px',\n  backgroundColor: '#FDFCEE',\n});\n\nconst TabButton = styled(Button)<{ isActive: boolean }>(({ theme, isActive }) => ({\n  padding: theme.spacing(2, 3),\n  fontSize: '16px',\n  fontWeight: 500,\n  textTransform: 'none',\n  color: isActive ? '#4D3019' : '#826E5C',\n  backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\n  borderRadius: 0,\n  position: 'relative',\n  minWidth: 'auto',\n  '&:hover': {\n    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\n    color: '#4D3019',\n  },\n  '&::after': isActive ? {\n    content: '\"\"',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: '4px',\n    backgroundColor: theme.palette.primary.main,\n  } : {},\n}));\n\nconst TabContent = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(3),\n  color: '#4D3019',\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\n}));\n\nconst MobileContainer = styled(Box)({\n  backgroundColor: '#FDFCEE',\n  '@media (min-width: 900px)': {\n    display: 'none',\n  },\n});\n\nconst MobileTabButton = styled(Button)<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({\n  width: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2),\n  textAlign: 'left',\n  textTransform: 'none',\n  borderRadius: 0,\n  backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\n  '&:hover': {\n    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\n  },\n}));\n\nconst MobileTabContent = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(2, 2, 3, 2),\n  color: '#4D3019',\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\n}));\n\nexport const Tabs: React.FC<TabsProps> = ({ tabs, defaultTab }) => {\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);\n  const [mobileExpandedTab, setMobileExpandedTab] = useState<string | null>(null);\n\n  const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;\n\n  const handleMobileTabClick = (tabId: string) => {\n    setActiveTab(tabId);\n    setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);\n  };\n\n  return (\n    <>\n      {/* Desktop View */}\n      <TabsContainer>\n        <TabButtonsWrapper>\n          {tabs.map((tab) => (\n            <TabButton\n              key={tab.id}\n              onClick={() => setActiveTab(tab.id)}\n              isActive={activeTab === tab.id}\n            >\n              {tab.label}\n            </TabButton>\n          ))}\n        </TabButtonsWrapper>\n        <TabContent>\n          {activeTabContent}\n        </TabContent>\n      </TabsContainer>\n\n      {/* Mobile View - Accordion */}\n      <MobileContainer>\n        {tabs.map((tab, index) => (\n          <Box\n            key={tab.id}\n            sx={{\n              borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',\n            }}\n          >\n            <MobileTabButton\n              onClick={() => handleMobileTabClick(tab.id)}\n              isExpanded={mobileExpandedTab === tab.id}\n            >\n              <Box\n                component=\"span\"\n                sx={{\n                  fontSize: '16px',\n                  fontWeight: 500,\n                  color: activeTab === tab.id ? '#4D3019' : '#826E5C',\n                }}\n              >\n                {tab.label}\n              </Box>\n              <ExpandMoreRounded\n                sx={{\n                  fontSize: 20,\n                  color: activeTab === tab.id ? '#4D3019' : '#826E5C',\n                  transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',\n                  transition: 'transform 0.2s',\n                }}\n              />\n            </MobileTabButton>\n            <Collapse in={mobileExpandedTab === tab.id}>\n              <MobileTabContent>\n                {tab.content}\n              </MobileTabContent>\n            </Collapse>\n          </Box>\n        ))}\n      </MobileContainer>\n    </>\n  );\n};"],"names":[],"mappings":";;;;;;AAiBA;AACE;AACA;AACE;AACD;AACF;AAED;AACE;AACA;AACA;AACD;AAED;;AAEE;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEE;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;;AAEH;AAED;AACE;AACA;AACA;AACD;AAED;AACE;AACA;AACE;AACD;AACF;AAED;AACE;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEC;AACF;AAED;AACE;AACA;AACA;AACD;AAEM;AACL;;AAGA;AAEA;;AAEE;AACF;AAEA;;AA2BW;AASK;AACA;AACA;;AAOA;AACA;AACA;AACA;AACD;AAajB;;"}

package/dist/esm/components/Toggle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ToggleProps {
+    label?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Toggle: React.FC<ToggleProps>;
+export {};

package/dist/esm/components/Toggle.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import { styled, Box, Typography } from '@mui/material';
+
+const ToggleButton = styled(Box)(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(0.75, 1.5),
+    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}33`,
+    cursor: 'pointer',
+    transition: 'border-color 0.2s',
+    '&:hover': {
+        borderColor: `${theme.palette.dark.main}4D`,
+    },
+}));
+const ToggleTrack = styled(Box)(({ theme, isChecked }) => ({
+    position: 'relative',
+    width: '56px',
+    height: '32px',
+    borderRadius: '9999px',
+    backgroundColor: isChecked ? theme.palette.secondary.main : '#e5e7eb',
+    transition: 'background-color 0.2s',
+}));
+const ToggleThumb = styled(Box)(({ isChecked }) => ({
+    position: 'absolute',
+    top: '4px',
+    width: '24px',
+    height: '24px',
+    backgroundColor: '#fff',
+    borderRadius: '9999px',
+    transition: 'transform 0.2s',
+    transform: isChecked ? 'translateX(28px)' : 'translateX(4px)',
+}));
+const Toggle = ({ label = 'Admin view', checked = false, onChange, }) => {
+    const [isChecked, setIsChecked] = useState(checked);
+    const handleToggle = () => {
+        const newValue = !isChecked;
+        setIsChecked(newValue);
+        onChange?.(newValue);
+    };
+    React__default.useEffect(() => {
+        setIsChecked(checked);
+    }, [checked]);
+    return (jsxs(ToggleButton, { onClick: handleToggle, children: [jsx(ToggleTrack, { isChecked: isChecked, children: jsx(ToggleThumb, { isChecked: isChecked }) }), jsx(Typography, { sx: {
+                    color: '#4D3019',
+                    fontWeight: 500,
+                    fontSize: '0.875rem',
+                }, children: label })] }));
+};
+
+export { Toggle };
+//# sourceMappingURL=Toggle.js.map

package/dist/esm/components/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, Typography, styled } from '@mui/material';\n\ninterface ToggleProps {\n  label?: string;\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n}\n\nconst ToggleButton = styled(Box)(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  padding: theme.spacing(0.75, 1.5),\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}33`,\n  cursor: 'pointer',\n  transition: 'border-color 0.2s',\n  '&:hover': {\n    borderColor: `${theme.palette.dark.main}4D`,\n  },\n}));\n\nconst ToggleTrack = styled(Box)<{ isChecked: boolean }>(({ theme, isChecked }) => ({\n  position: 'relative',\n  width: '56px',\n  height: '32px',\n  borderRadius: '9999px',\n  backgroundColor: isChecked ? theme.palette.secondary.main : '#e5e7eb',\n  transition: 'background-color 0.2s',\n}));\n\nconst ToggleThumb = styled(Box)<{ isChecked: boolean }>(({ isChecked }) => ({\n  position: 'absolute',\n  top: '4px',\n  width: '24px',\n  height: '24px',\n  backgroundColor: '#fff',\n  borderRadius: '9999px',\n  transition: 'transform 0.2s',\n  transform: isChecked ? 'translateX(28px)' : 'translateX(4px)',\n}));\n\nexport const Toggle: React.FC<ToggleProps> = ({\n  label = 'Admin view',\n  checked = false,\n  onChange,\n}) => {\n  const [isChecked, setIsChecked] = useState(checked);\n\n  const handleToggle = () => {\n    const newValue = !isChecked;\n    setIsChecked(newValue);\n    onChange?.(newValue);\n  };\n\n  React.useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <ToggleButton onClick={handleToggle}>\n      <ToggleTrack isChecked={isChecked}>\n        <ToggleThumb isChecked={isChecked} />\n      </ToggleTrack>\n      <Typography\n        sx={{\n          color: '#4D3019',\n          fontWeight: 500,\n          fontSize: '0.875rem',\n        }}\n      >\n        {label}\n      </Typography>\n    </ToggleButton>\n  );\n};"],"names":[],"mappings":";;;;;AAWA;AACE;AACA;AACA;;;;;AAKA;;AAEA;AACA;AACA;;AAEC;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACA;;AAED;AAEM;;;AAQH;;AAEA;AACF;AAEA;;AAEA;AAEA;AAOQ;AACA;AACA;AACD;AAMT;;"}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,22 @@
+export { Button } from './Button';
+export { Input } from './Input';
+export { Card } from './Card';
+export { Select } from './Select';
+export { Radio, RadioGroup } from './Radio';
+export { Checkbox } from './Checkbox';
+export { Progress, StepIndicator } from './Progress';
+export { Alert } from './Alert';
+export { NoteBox } from './NoteBox';
+export { Modal } from './Modal';
+export { Concertina } from './Concertina';
+export { ReadBy } from './ReadBy';
+export { StatusBar } from './StatusBar';
+export { Tabs } from './Tabs';
+export { Sidebar } from './Sidebar';
+export { Header } from './Header';
+export { TableOfContents } from './TableOfContents';
+export { Toggle } from './Toggle';
+export { SimpleModal } from './SimpleModal';
+export { ActionButton } from './ActionButton';
+export { DefinitionBox } from './DefinitionBox';
+export { Breadcrumb } from './Breadcrumb';

package/dist/esm/index.d.ts

@@ -0,0 +1,25 @@
+import './theme-types';
+export { ThemeProvider, useTheme } from './ThemeProvider';
+export type { ThemeKey } from './ThemeProvider';
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Card } from './components/Card';
+export { Select } from './components/Select';
+export { Radio, RadioGroup } from './components/Radio';
+export { Checkbox } from './components/Checkbox';
+export { Progress, StepIndicator } from './components/Progress';
+export { Alert } from './components/Alert';
+export { NoteBox } from './components/NoteBox';
+export { Modal } from './components/Modal';
+export { Concertina } from './components/Concertina';
+export { ReadBy } from './components/ReadBy';
+export { StatusBar } from './components/StatusBar';
+export { Tabs } from './components/Tabs';
+export { Sidebar } from './components/Sidebar';
+export { Header } from './components/Header';
+export { TableOfContents } from './components/TableOfContents';
+export { Toggle } from './components/Toggle';
+export { SimpleModal } from './components/SimpleModal';
+export { ActionButton } from './components/ActionButton';
+export { DefinitionBox } from './components/DefinitionBox';
+export { Breadcrumb } from './components/Breadcrumb';

package/dist/esm/index.js

@@ -0,0 +1,26 @@
+"use client";
+import '@mui/material/styles';
+export { ThemeProvider, useTheme } from './ThemeProvider.js';
+export { Button } from './components/Button.js';
+export { Input } from './components/Input.js';
+export { Card } from './components/Card.js';
+export { Select } from './components/Select.js';
+export { Radio, RadioGroup } from './components/Radio.js';
+export { Checkbox } from './components/Checkbox.js';
+export { Progress, StepIndicator } from './components/Progress.js';
+export { Alert } from './components/Alert.js';
+export { NoteBox } from './components/NoteBox.js';
+export { Modal } from './components/Modal.js';
+export { Concertina } from './components/Concertina.js';
+export { ReadBy } from './components/ReadBy.js';
+export { StatusBar } from './components/StatusBar.js';
+export { Tabs } from './components/Tabs.js';
+export { Sidebar } from './components/Sidebar.js';
+export { Header } from './components/Header.js';
+export { TableOfContents } from './components/TableOfContents.js';
+export { Toggle } from './components/Toggle.js';
+export { SimpleModal } from './components/SimpleModal.js';
+export { ActionButton } from './components/ActionButton.js';
+export { DefinitionBox } from './components/DefinitionBox.js';
+export { Breadcrumb } from './components/Breadcrumb.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/theme-types.d.ts

@@ -0,0 +1,39 @@
+import '@mui/material/styles';
+declare module '@mui/material/styles' {
+    interface Theme {
+        appName: string;
+    }
+    interface ThemeOptions {
+        appName?: string;
+    }
+    interface Palette {
+        accent: Palette['primary'];
+        dark: Palette['primary'];
+        light: Palette['primary'];
+        markedRead: Palette['primary'];
+        custom: {
+            iconColor?: string;
+            primaryButtonTextColor?: string;
+            markAsReadBorderColor?: string;
+            markAsReadBackgroundColor?: string;
+            readByBackgroundColor?: string;
+            stepIndicatorTextColor?: string;
+            tabBackgroundColor?: string;
+        };
+    }
+    interface PaletteOptions {
+        accent?: PaletteOptions['primary'];
+        dark?: PaletteOptions['primary'];
+        light?: PaletteOptions['primary'];
+        markedRead?: PaletteOptions['primary'];
+        custom?: {
+            iconColor?: string;
+            primaryButtonTextColor?: string;
+            markAsReadBorderColor?: string;
+            markAsReadBackgroundColor?: string;
+            readByBackgroundColor?: string;
+            stepIndicatorTextColor?: string;
+            tabBackgroundColor?: string;
+        };
+    }
+}