ece-docs-components 1.0.5 → 1.0.7

package/dist/esm/components/Button.js

@@ -0,0 +1,107 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button as Button$1 } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const StyledButton = styled(Button$1, {
+    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 (jsx(StyledButton, { customVariant: variant, customSize: size, fullWidth: fullWidth, disableRipple: true, ...props, children: children }));
+};
+
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/esm/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":["MuiButton","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'bordered' | 'elevated';
+    sx?: SxProps<Theme>;
+}
+export declare const Card: React.FC<CardProps>;
+export {};

package/dist/esm/components/Card.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { styled, Box } from '@mui/material';
+
+const StyledCard = styled(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 (jsx(StyledCard, { className: className, customPadding: padding, customVariant: variant, sx: sx, children: children }));
+};
+
+export { Card };
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, styled, SxProps, Theme } from '@mui/material';\n\ninterface CardProps {\n  children: React.ReactNode;\n  className?: string;\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n  variant?: 'default' | 'bordered' | 'elevated';\n  sx?: SxProps<Theme>; // Add sx prop to support Material-UI styling\n}\n\nconst StyledCard = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'customPadding' && prop !== 'customVariant',\n})<{ customPadding: string; customVariant: string }>(({ theme, customPadding, customVariant }) => {\n  const paddingStyles = {\n    none: { padding: 0 },\n    sm: { padding: theme.spacing(2) }, // 16px\n    md: { padding: theme.spacing(3) }, // 24px\n    lg: { padding: theme.spacing(4) }, // 32px\n  };\n\n  const variantStyles = {\n    default: {\n      border: `1px solid ${theme.palette.dark.main}10`, // dark.main with 10% opacity\n    },\n    bordered: {\n      border: `2px solid ${theme.palette.dark.main}20`, // dark.main with 20% opacity\n    },\n    elevated: {\n      border: `1px solid ${theme.palette.dark.main}05`, // dark.main with 5% opacity\n      boxShadow: theme.shadows[4], // MUI shadow level 4 for \"elevated\"\n    },\n  };\n\n  const borderRadiusValue = typeof theme.shape.borderRadius === 'string'\n    ? parseInt(theme.shape.borderRadius, 10)\n    : theme.shape.borderRadius || 4;\n\n  return {\n    borderRadius: borderRadiusValue * 2, // Matches rounded-xl (approx 12px)\n    overflow: 'visible',\n    backgroundColor: theme.palette.light.main, // Matches #FEFDF7\n    ...paddingStyles[customPadding as keyof typeof paddingStyles],\n    ...variantStyles[customVariant as keyof typeof variantStyles],\n  };\n});\n\nexport const Card: React.FC<CardProps> = ({\n  children,\n  className = '',\n  padding = 'md',\n  variant = 'default',\n  sx, // Destructure sx prop\n}) => {\n  return (\n    <StyledCard\n      className={className}\n      customPadding={padding}\n      customVariant={variant}\n      sx={sx} // Pass sx prop to StyledCard\n    >\n      {children}\n    </StyledCard>\n  );\n};"],"names":[],"mappings":";;;;AAaA;AACE;;AAEA;AACE;AACA;AACA;AACA;;AAGF;AACE;;AAEC;AACD;;AAEC;AACD;;;AAGC;;;;;;AAQD;AACA;;;;;AAKJ;;AAQC;;AAWD;;"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CheckboxProps } from '@mui/material';
+interface CustomCheckboxProps extends CheckboxProps {
+    label: string;
+    description?: string;
+}
+export declare const Checkbox: React.FC<CustomCheckboxProps>;
+export {};

package/dist/esm/components/Checkbox.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { styled, Box, Checkbox as Checkbox$1, Typography, FormControlLabel } from '@mui/material';
+
+const StyledWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+}));
+const StyledCheckbox = styled(Checkbox$1)(({ theme }) => ({
+    width: 16, // Matches Tailwind's w-4 (16px)
+    height: 16, // Matches Tailwind's h-4 (16px)
+    color: theme.palette.dark.main + '33', // dark.main with 20% opacity (border-dark/20)
+    '&.Mui-checked': {
+        color: theme.palette.primary.main, // text-primary
+    },
+    '&:focus': {
+        outline: `2px solid ${theme.palette.primary.main}`, // focus:ring-2 focus:ring-primary
+        outlineOffset: 2,
+    },
+    borderRadius: theme.shape.borderRadius, // Matches rounded
+    cursor: 'pointer',
+}));
+const StyledLabel = styled(Typography)(({ theme }) => ({
+    fontSize: '1rem', // text-base (16px)
+    fontWeight: 500, // font-medium
+    color: theme.palette.dark.main, // text-dark
+    cursor: 'pointer',
+}));
+const StyledDescription = styled(Typography)(({ theme }) => ({
+    fontSize: '0.875rem', // text-sm (14px)
+    color: theme.palette.dark.main + '99', // dark.main with 60% opacity (text-dark/60)
+    marginTop: theme.spacing(0.5), // mt-0.5
+}));
+const Checkbox = ({ label, description, className = '', id, ...props }) => {
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    return (jsx(StyledWrapper, { className: className, children: jsx(FormControlLabel, { control: jsx(StyledCheckbox, { id: checkboxId, ...props }), label: jsxs(Box, { sx: { ml: 1.5, display: 'flex', flexDirection: 'column' }, children: [jsx(StyledLabel, { children: label }), description && jsx(StyledDescription, { children: description })] }) }) }));
+};
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, Checkbox as MuiCheckbox, CheckboxProps, FormControlLabel, styled, Typography } from '@mui/material';\n\ninterface CustomCheckboxProps extends CheckboxProps {\n  label: string;\n  description?: string;\n}\n\nconst StyledWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'flex-start',\n}));\n\nconst StyledCheckbox = styled(MuiCheckbox)(({ theme }) => ({\n  width: 16, // Matches Tailwind's w-4 (16px)\n  height: 16, // Matches Tailwind's h-4 (16px)\n  color: theme.palette.dark.main + '33', // dark.main with 20% opacity (border-dark/20)\n  '&.Mui-checked': {\n    color: theme.palette.primary.main, // text-primary\n  },\n  '&:focus': {\n    outline: `2px solid ${theme.palette.primary.main}`, // focus:ring-2 focus:ring-primary\n    outlineOffset: 2,\n  },\n  borderRadius: theme.shape.borderRadius, // Matches rounded\n  cursor: 'pointer',\n}));\n\nconst StyledLabel = styled(Typography)(({ theme }) => ({\n  fontSize: '1rem', // text-base (16px)\n  fontWeight: 500, // font-medium\n  color: theme.palette.dark.main, // text-dark\n  cursor: 'pointer',\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  fontSize: '0.875rem', // text-sm (14px)\n  color: theme.palette.dark.main + '99', // dark.main with 60% opacity (text-dark/60)\n  marginTop: theme.spacing(0.5), // mt-0.5\n}));\n\nexport const Checkbox: React.FC<CustomCheckboxProps> = ({\n  label,\n  description,\n  className = '',\n  id,\n  ...props\n}) => {\n  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;\n\n  return (\n    <StyledWrapper className={className}>\n      <FormControlLabel\n        control={\n          <StyledCheckbox\n            id={checkboxId}\n            {...props}\n          />\n        }\n        label={\n          <Box sx={{ ml: 1.5, display: 'flex', flexDirection: 'column' }}>\n            <StyledLabel>{label}</StyledLabel>\n            {description && <StyledDescription>{description}</StyledDescription>}\n          </Box>\n        }\n      />\n    </StyledWrapper>\n  );\n};"],"names":[],"mappings":";;;;AAUA;AACE;AACA;AACD;AAED;;;;AAIE;;AAEC;AACD;;AAEE;AACD;AACD;AACA;AACD;AAED;;;;AAIE;AACD;AAED;;;;AAIC;;;AAWC;AAkBF;;"}

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

@@ -0,0 +1,10 @@
+interface ConcertinaSection {
+    id: string;
+    title: string;
+    content: string;
+}
+interface ConcertinaProps {
+    sections: ConcertinaSection[];
+}
+export declare function Concertina({ sections }: ConcertinaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Concertina.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { styled, Box, Typography, IconButton, Collapse } from '@mui/material';
+import { ExpandMoreRounded, LinkRounded } from '@mui/icons-material';
+
+const StyledConcertina = styled(Box)(({ theme }) => ({
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1), // space-y-2
+}));
+const StyledSection = styled(Box)(({ theme }) => ({
+    border: `1px solid ${theme.palette.grey[200]}`, // border-gray-200
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2, // rounded-lg
+    overflow: 'hidden',
+}));
+const StyledHeader = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(3), // p-3 sm:p-4 md:p-6
+    cursor: 'pointer',
+    transition: 'background-color 0.2s',
+    gap: theme.spacing(2), // gap-2
+    '&:hover': {
+        backgroundColor: theme.palette.light.main, // hover:bg-[#FDFCEE]
+    },
+    [theme.breakpoints.up('sm')]: {
+        padding: theme.spacing(4),
+    },
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(6),
+    },
+}));
+const StyledTitleWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(3), // sm:gap-3
+    flex: 1,
+    minWidth: 0,
+    [theme.breakpoints.down('sm')]: {
+        gap: theme.spacing(2), // gap-2
+    },
+}));
+const StyledTitle = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'isHovered',
+})(({ theme, isHovered }) => ({
+    fontWeight: 700, // font-bold
+    fontSize: '1.5rem', // text-2xl
+    lineHeight: 1.2, // leading-tight
+    color: theme.palette.dark.main, // text-[#4D3019]
+    wordBreak: 'break-word', // break-words
+    position: 'relative',
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: 1,
+        backgroundColor: theme.palette.accent.main, // bg-orange-500
+        display: isHovered ? 'block' : 'none',
+    },
+    [theme.breakpoints.down('lg')]: {
+        fontSize: '1.25rem', // lg:text-[28px]
+    },
+    [theme.breakpoints.down('md')]: {
+        fontSize: '1.125rem', // md:text-xl
+    },
+    [theme.breakpoints.down('sm')]: {
+        fontSize: '1rem', // sm:text-lg
+    },
+}));
+const StyledLinkButton = styled(IconButton)(({ theme }) => ({
+    color: theme.palette.accent.main, // text-orange-500
+    '&:hover': {
+        color: theme.palette.accent.dark || theme.palette.accent.main, // hover:text-orange-600
+    },
+    padding: 0,
+}));
+const StyledTooltip = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    top: -40, // -top-10
+    left: '50%',
+    transform: 'translateX(-50%)',
+    backgroundColor: theme.palette.grey[900], // bg-gray-900
+    color: theme.palette.common.white, // text-white
+    fontSize: '0.75rem', // text-xs
+    padding: theme.spacing(1, 2), // px-2 py-1
+    borderRadius: theme.shape.borderRadius, // rounded
+    whiteSpace: 'nowrap',
+    zIndex: 10,
+    [theme.breakpoints.up('sm')]: {
+        fontSize: '0.875rem', // sm:text-sm
+        padding: theme.spacing(1.5, 3), // sm:px-3 sm:py-1.5
+    },
+}));
+const StyledChevron = styled(ExpandMoreRounded)(({ theme }) => ({
+    color: theme.palette.grey[500], // text-gray-500
+    transition: 'transform 0.2s', // transition-transform duration-200
+    width: 24, // sm:w-6
+    height: 24, // sm:h-6
+    [theme.breakpoints.down('sm')]: {
+        width: 20,
+        height: 20,
+    },
+}));
+const StyledContent = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(2, 3, 3), // px-3 pb-3 pt-2
+    [theme.breakpoints.up('sm')]: {
+        padding: theme.spacing(2, 4, 4), // sm:px-4 sm:pb-4
+    },
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(2, 6, 6), // md:px-6 md:pb-6
+    },
+}));
+const StyledContentText = styled(Typography)(({ theme }) => ({
+    color: theme.palette.dark.main, // text-[#4D3019]
+    lineHeight: 1.5, // leading-relaxed
+    wordBreak: 'break-word', // break-words
+    fontSize: 13, // style={{ fontSize: '13px' }}
+}));
+function Concertina({ sections }) {
+    const [openSections, setOpenSections] = useState(new Set());
+    const [hoveredTitle, setHoveredTitle] = useState(null);
+    const [copiedId, setCopiedId] = useState(null);
+    const toggleSection = (id) => {
+        const newOpenSections = new Set(openSections);
+        if (newOpenSections.has(id)) {
+            newOpenSections.delete(id);
+        }
+        else {
+            newOpenSections.add(id);
+        }
+        setOpenSections(newOpenSections);
+    };
+    const copyJumpLink = (id, e) => {
+        e.stopPropagation();
+        const url = `${window.location.origin}${window.location.pathname}#${id}`;
+        navigator.clipboard.writeText(url);
+        setCopiedId(id);
+        setTimeout(() => setCopiedId(null), 2000);
+    };
+    return (jsx(StyledConcertina, { children: sections.map((section) => (jsxs(StyledSection, { id: section.id, children: [jsxs(StyledHeader, { onClick: () => toggleSection(section.id), onMouseEnter: () => setHoveredTitle(section.id), onMouseLeave: () => setHoveredTitle(null), children: [jsxs(StyledTitleWrapper, { children: [jsx(StyledTitle, { isHovered: hoveredTitle === section.id, variant: "h3", children: section.title }), hoveredTitle === section.id && (jsxs(Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsx(StyledLinkButton, { onClick: (e) => copyJumpLink(section.id, e), "aria-label": "Copy link", children: jsx(LinkRounded, { sx: { fontSize: 20 } }) }), copiedId === section.id && (jsx(StyledTooltip, { children: "Link copied" }))] }))] }), jsx(StyledChevron, { sx: { fontSize: 20, transform: openSections.has(section.id) ? 'rotate(180deg)' : 'none' } })] }), jsx(Collapse, { in: openSections.has(section.id), children: jsx(StyledContent, { children: jsx(StyledContentText, { children: section.content }) }) })] }, section.id))) }));
+}
+
+export { Concertina };
+//# sourceMappingURL=Concertina.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Concertina.js","sources":["../../../../src/components/Concertina.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, styled, Typography, IconButton, Collapse } from '@mui/material';\nimport { ExpandMoreRounded, LinkRounded } from '@mui/icons-material';\n\ninterface ConcertinaSection {\n  id: string;\n  title: string;\n  content: string;\n}\n\ninterface ConcertinaProps {\n  sections: ConcertinaSection[];\n}\n\nconst StyledConcertina = styled(Box)(({ theme }) => ({\n  width: '100%',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1), // space-y-2\n}));\n\nconst StyledSection = styled(Box)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[200]}`, // border-gray-200\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2, // rounded-lg\n  overflow: 'hidden',\n}));\n\nconst StyledHeader = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(3), // p-3 sm:p-4 md:p-6\n  cursor: 'pointer',\n  transition: 'background-color 0.2s',\n  gap: theme.spacing(2), // gap-2\n  '&:hover': {\n    backgroundColor: theme.palette.light.main, // hover:bg-[#FDFCEE]\n  },\n  [theme.breakpoints.up('sm')]: {\n    padding: theme.spacing(4),\n  },\n  [theme.breakpoints.up('md')]: {\n    padding: theme.spacing(6),\n  },\n}));\n\nconst StyledTitleWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(3), // sm:gap-3\n  flex: 1,\n  minWidth: 0,\n  [theme.breakpoints.down('sm')]: {\n    gap: theme.spacing(2), // gap-2\n  },\n}));\n\nconst StyledTitle = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'isHovered',\n})<{ isHovered: boolean }>(({ theme, isHovered }) => ({\n  fontWeight: 700, // font-bold\n  fontSize: '1.5rem', // text-2xl\n  lineHeight: 1.2, // leading-tight\n  color: theme.palette.dark.main, // text-[#4D3019]\n  wordBreak: 'break-word', // break-words\n  position: 'relative',\n  '&:after': {\n    content: '\"\"',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    width: '100%',\n    height: 1,\n    backgroundColor: theme.palette.accent.main, // bg-orange-500\n    display: isHovered ? 'block' : 'none',\n  },\n  [theme.breakpoints.down('lg')]: {\n    fontSize: '1.25rem', // lg:text-[28px]\n  },\n  [theme.breakpoints.down('md')]: {\n    fontSize: '1.125rem', // md:text-xl\n  },\n  [theme.breakpoints.down('sm')]: {\n    fontSize: '1rem', // sm:text-lg\n  },\n}));\n\nconst StyledLinkButton = styled(IconButton)(({ theme }) => ({\n  color: theme.palette.accent.main, // text-orange-500\n  '&:hover': {\n    color: theme.palette.accent.dark || theme.palette.accent.main, // hover:text-orange-600\n  },\n  padding: 0,\n}));\n\nconst StyledTooltip = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: -40, // -top-10\n  left: '50%',\n  transform: 'translateX(-50%)',\n  backgroundColor: theme.palette.grey[900], // bg-gray-900\n  color: theme.palette.common.white, // text-white\n  fontSize: '0.75rem', // text-xs\n  padding: theme.spacing(1, 2), // px-2 py-1\n  borderRadius: theme.shape.borderRadius, // rounded\n  whiteSpace: 'nowrap',\n  zIndex: 10,\n  [theme.breakpoints.up('sm')]: {\n    fontSize: '0.875rem', // sm:text-sm\n    padding: theme.spacing(1.5, 3), // sm:px-3 sm:py-1.5\n  },\n}));\n\nconst StyledChevron = styled(ExpandMoreRounded)(({ theme }) => ({\n  color: theme.palette.grey[500], // text-gray-500\n  transition: 'transform 0.2s', // transition-transform duration-200\n  width: 24, // sm:w-6\n  height: 24, // sm:h-6\n  [theme.breakpoints.down('sm')]: {\n    width: 20,\n    height: 20,\n  },\n}));\n\nconst StyledContent = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(2, 3, 3), // px-3 pb-3 pt-2\n  [theme.breakpoints.up('sm')]: {\n    padding: theme.spacing(2, 4, 4), // sm:px-4 sm:pb-4\n  },\n  [theme.breakpoints.up('md')]: {\n    padding: theme.spacing(2, 6, 6), // md:px-6 md:pb-6\n  },\n}));\n\nconst StyledContentText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.dark.main, // text-[#4D3019]\n  lineHeight: 1.5, // leading-relaxed\n  wordBreak: 'break-word', // break-words\n  fontSize: 13, // style={{ fontSize: '13px' }}\n}));\n\nexport function Concertina({ sections }: ConcertinaProps) {\n  const [openSections, setOpenSections] = useState<Set<string>>(new Set());\n  const [hoveredTitle, setHoveredTitle] = useState<string | null>(null);\n  const [copiedId, setCopiedId] = useState<string | null>(null);\n\n  const toggleSection = (id: string) => {\n    const newOpenSections = new Set(openSections);\n    if (newOpenSections.has(id)) {\n      newOpenSections.delete(id);\n    } else {\n      newOpenSections.add(id);\n    }\n    setOpenSections(newOpenSections);\n  };\n\n  const copyJumpLink = (id: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    const url = `${window.location.origin}${window.location.pathname}#${id}`;\n    navigator.clipboard.writeText(url);\n    setCopiedId(id);\n    setTimeout(() => setCopiedId(null), 2000);\n  };\n\n  return (\n    <StyledConcertina>\n      {sections.map((section) => (\n        <StyledSection key={section.id} id={section.id}>\n          <StyledHeader\n            onClick={() => toggleSection(section.id)}\n            onMouseEnter={() => setHoveredTitle(section.id)}\n            onMouseLeave={() => setHoveredTitle(null)}\n          >\n            <StyledTitleWrapper>\n              <StyledTitle isHovered={hoveredTitle === section.id} variant=\"h3\">\n                {section.title}\n              </StyledTitle>\n              {hoveredTitle === section.id && (\n                <Box sx={{ position: 'relative', flexShrink: 0 }}>\n                  <StyledLinkButton\n                    onClick={(e) => copyJumpLink(section.id, e)}\n                    aria-label=\"Copy link\"\n                  >\n                    <LinkRounded sx={{fontSize: 20}} />\n                  </StyledLinkButton>\n                  {copiedId === section.id && (\n                    <StyledTooltip>\n                      Link copied\n                    </StyledTooltip>\n                  )}\n                </Box>\n              )}\n            </StyledTitleWrapper>\n            <StyledChevron\n              sx={{ fontSize:20, transform: openSections.has(section.id) ? 'rotate(180deg)' : 'none' }}\n            />\n          </StyledHeader>\n          <Collapse in={openSections.has(section.id)}>\n            <StyledContent>\n              <StyledContentText>{section.content}</StyledContentText>\n            </StyledContent>\n          </Collapse>\n        </StyledSection>\n      ))}\n    </StyledConcertina>\n  );\n}"],"names":[],"mappings":";;;;;;AAgBA;AACE;AACA;AACA;;AAED;AAED;AACE;;;AAGA;AACA;AACD;AAED;AACE;AACA;AACA;;AAEA;AACA;;AAEA;;AAEC;;AAEC;AACD;;AAEC;AACD;AACF;AAED;AACE;AACA;;AAEA;AACA;;;AAGC;AACF;AAED;;;;;;;;AAQE;AACA;AACE;AACA;AACA;AACA;AACA;AACA;;;AAGD;;;AAGA;;;AAGA;;;AAGA;AACF;AAED;;AAEE;AACE;AACD;AACD;AACD;AAED;AACE;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;;;;AAIC;AACF;AAED;;;;;;AAMI;AACA;AACD;AACF;AAED;AACE;;AAEE;AACD;;AAEC;AACD;AACF;AAED;;;;;AAKC;AAEK;AACJ;;;AAIA;AACE;AACA;AACE;;;AAEA;;;AAGJ;AAEA;;AAEE;AACA;;;AAGF;;AA4CF;;"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface DefinitionBoxProps {
+    term: string;
+    definition: string;
+    children: React.ReactNode;
+}
+export declare function DefinitionBox({ term, definition, children }: DefinitionBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/DefinitionBox.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { styled, Box, Typography } from '@mui/material';
+import { useTheme } from '../ThemeProvider.js';
+import { CloseRounded, AddRounded } from '@mui/icons-material';
+
+const StyledWrapper = styled(Box)(({ theme }) => ({
+// No specific wrapper styles needed, just a container
+}));
+const StyledParagraph = styled(Typography)(({ theme }) => ({
+    fontSize: '14px', // text-[14px]
+    color: theme.palette.dark.main, // text-[#4D3019]
+    display: 'inline-flex',
+    alignItems: 'center',
+}));
+const StyledTermWrapper = styled(Box)(({ theme }) => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    marginLeft: theme.spacing(0.5), // ml-1
+}));
+const StyledTerm = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'isOpen',
+})(({ theme, isOpen }) => ({
+    paddingBottom: '1px', // style={{ paddingBottom: '1px' }}
+    borderBottom: `2px solid ${isOpen ? theme.palette.secondary.main : theme.palette.dark.main}`, // border-b-2
+    transition: 'border-bottom-color 0.2s', // transition-colors
+    '&:hover': {
+        borderBottomColor: theme.palette.secondary.main, // hover effect
+    },
+}));
+const StyledIconWrapper = styled(Box)(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: theme.spacing(0.5), // ml-1
+    transition: 'color 0.2s', // transition-colors
+}));
+const StyledDefinitionBox = styled(Box)(({ theme }) => ({
+    marginTop: theme.spacing(2), // mt-4
+    padding: theme.spacing(2), // p-4
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2, // rounded-lg
+    border: `1px solid ${theme.palette.dark.main}33`, // border-[#4D3019]/20
+    borderRight: `4px solid ${theme.palette.dark.main}33`, // border-r-4
+    backgroundColor: theme.palette.light.main, // style={{ backgroundColor: '#FDFCEE' }}
+}));
+const StyledDefinitionText = styled(Typography)(({ theme }) => ({
+    fontSize: '14px', // text-[14px]
+    color: theme.palette.dark.main, // text-[#4D3019]
+    lineHeight: 1.5, // leading-relaxed
+}));
+function DefinitionBox({ term, definition, children }) {
+    const { theme } = useTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    return (jsxs(StyledWrapper, { children: [jsxs(StyledParagraph, { children: [children, jsxs(StyledTermWrapper, { onClick: () => setIsOpen(!isOpen), children: [jsx(StyledTerm, { isOpen: isOpen, onMouseEnter: (e) => (e.currentTarget.style.borderBottomColor = theme.palette.secondary.main), onMouseLeave: (e) => (e.currentTarget.style.borderBottomColor = isOpen ? theme.palette.secondary.main : theme.palette.dark.main), children: term }), jsx(StyledIconWrapper, { children: isOpen ? (jsx(CloseRounded, { sx: {
+                                        fontSize: 16,
+                                        color: isOpen ? theme.palette.secondary.main : theme.palette.dark.main,
+                                        '&:hover': {
+                                            color: theme.palette.secondary.main
+                                        }
+                                    } })) : (jsx(AddRounded, { sx: {
+                                        fontSize: 16,
+                                        color: theme.palette.dark.main,
+                                        '&:hover': {
+                                            color: theme.palette.secondary.main
+                                        }
+                                    } })) })] })] }), isOpen && (jsx(StyledDefinitionBox, { children: jsx(StyledDefinitionText, { children: definition }) }))] }));
+}
+
+export { DefinitionBox };
+//# sourceMappingURL=DefinitionBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefinitionBox.js","sources":["../../../../src/components/DefinitionBox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, styled, Typography } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { AddRounded, CloseRounded } from '@mui/icons-material';\n\ninterface DefinitionBoxProps {\n  term: string;\n  definition: string;\n  children: React.ReactNode;\n}\n\nconst StyledWrapper = styled(Box)(({ theme }) => ({\n  // No specific wrapper styles needed, just a container\n}));\n\nconst StyledParagraph = styled(Typography)(({ theme }) => ({\n  fontSize: '14px', // text-[14px]\n  color: theme.palette.dark.main, // text-[#4D3019]\n  display: 'inline-flex',\n  alignItems: 'center',\n}));\n\nconst StyledTermWrapper = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  display: 'inline-flex',\n  alignItems: 'center',\n  cursor: 'pointer',\n  marginLeft: theme.spacing(0.5), // ml-1\n}));\n\nconst StyledTerm = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'isOpen',\n})<{ isOpen: boolean }>(({ theme, isOpen }) => ({\n  paddingBottom: '1px', // style={{ paddingBottom: '1px' }}\n  borderBottom: `2px solid ${isOpen ? theme.palette.secondary.main : theme.palette.dark.main}`, // border-b-2\n  transition: 'border-bottom-color 0.2s', // transition-colors\n  '&:hover': {\n    borderBottomColor: theme.palette.secondary.main, // hover effect\n  },\n}));\n\nconst StyledIconWrapper = styled(Box)(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginLeft: theme.spacing(0.5), // ml-1\n  transition: 'color 0.2s', // transition-colors\n}));\n\nconst StyledDefinitionBox = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(2), // mt-4\n  padding: theme.spacing(2), // p-4\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2, // rounded-lg\n  border: `1px solid ${theme.palette.dark.main}33`, // border-[#4D3019]/20\n  borderRight: `4px solid ${theme.palette.dark.main}33`, // border-r-4\n  backgroundColor: theme.palette.light.main, // style={{ backgroundColor: '#FDFCEE' }}\n}));\n\nconst StyledDefinitionText = styled(Typography)(({ theme }) => ({\n  fontSize: '14px', // text-[14px]\n  color: theme.palette.dark.main, // text-[#4D3019]\n  lineHeight: 1.5, // leading-relaxed\n}));\n\nexport function DefinitionBox({ term, definition, children }: DefinitionBoxProps) {\n  const { theme } = useTheme();\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <StyledWrapper>\n      <StyledParagraph>\n        {children}\n        <StyledTermWrapper onClick={() => setIsOpen(!isOpen)}>\n          <StyledTerm\n            isOpen={isOpen}\n            onMouseEnter={(e) => (e.currentTarget.style.borderBottomColor = theme.palette.secondary.main)}\n            onMouseLeave={(e) => (e.currentTarget.style.borderBottomColor = isOpen ? theme.palette.secondary.main : theme.palette.dark.main)}\n          >\n            {term}\n          </StyledTerm>\n          <StyledIconWrapper>\n            {isOpen ? (\n              <CloseRounded\n                sx={{\n                  fontSize: 16,\n                  color: isOpen ? theme.palette.secondary.main : theme.palette.dark.main,\n                  '&:hover': {\n                    color: theme.palette.secondary.main\n                  }\n                }}\n              />\n            ) : (\n              <AddRounded\n                sx={{\n                  fontSize: 16,\n                  color: theme.palette.dark.main,\n                  '&:hover': {\n                    color: theme.palette.secondary.main\n                  }\n                }}\n              />\n            )}\n          </StyledIconWrapper>\n        </StyledTermWrapper>\n      </StyledParagraph>\n      {isOpen && (\n        <StyledDefinitionBox>\n          <StyledDefinitionText>{definition}</StyledDefinitionText>\n        </StyledDefinitionBox>\n      )}\n    </StyledWrapper>\n  );\n}"],"names":[],"mappings":";;;;;;;AAaA;AACE;AACD;AAED;;;AAGE;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAED;AAED;;;;;;AAME;;AAEC;AACF;AAED;AACE;AACA;AACA;;;AAGD;AAED;;;;;AAKE;;;;AAID;AAED;;;;AAIC;AAEK;AACJ;;;AAmBgB;;AAEA;AACE;AACD;;AAMD;AACA;AACA;AACE;AACD;;AAcnB;;"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface HeaderProps {
+    userName?: string;
+    userInitials?: string;
+}
+export declare const Header: React.FC<HeaderProps>;
+export {};