@stfrigerio/sito-template 0.1.86 → 0.1.89

package/dist/index.js

@@ -2721,7 +2721,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light', storageKey = 'app-the
     return (jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children }));
 };
 
-var styles$h = {"button":"ThemeSwitcher-module_button__VfRjU","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
+var styles$h = {"button":"ThemeSwitcher-module_button__VfRjU","iconButton":"ThemeSwitcher-module_iconButton__NKYBc","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
 
 const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
     // Use safe version that returns null when outside a ThemeProvider
@@ -2744,6 +2744,12 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
         const isDark = theme.includes('dark');
         return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$h.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(lucideReact.Moon, { size: 14 }) : jsxRuntime.jsx(lucideReact.Sun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$h.label, children: isDark ? 'Dark' : 'Light' })] }));
     }
+    if (variant === 'icon') {
+        return (jsxRuntime.jsxs("button", { type: "button", className: `${styles$h.iconButton} ${className}`, onClick: () => {
+                const nextIndex = (currentThemeIndex + 1) % themes.length;
+                setTheme(themes[nextIndex].value);
+            }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, title: currentThemeData.label, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$h.label, children: currentThemeData.label })] }));
+    }
     if (variant === 'dropdown') {
         return (jsxRuntime.jsxs("div", { className: `${styles$h.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$h.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$h.label, children: currentThemeData.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$h.dropdownItem} ${theme === t.value ? styles$h.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$h.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$h.text, children: t.label })] }, t.value))) })] }));
     }
@@ -4236,13 +4242,16 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
     };
     // View type icons and labels
     const viewTypeConfig = {
-        daily: { icon: '📅', label: 'Daily' },
-        weekly: { icon: '📆', label: 'Weekly' },
-        monthly: { icon: '🗓️', label: 'Monthly' },
-        quarterly: { icon: '📊', label: 'Quarterly' }
+        daily: { Icon: lucideReact.Calendar, label: 'Daily' },
+        weekly: { Icon: lucideReact.CalendarDays, label: 'Weekly' },
+        monthly: { Icon: lucideReact.CalendarRange, label: 'Monthly' },
+        quarterly: { Icon: lucideReact.BarChart3, label: 'Quarterly' }
     };
     const shouldShowAggregationToggle = viewType !== 'daily';
-    return (jsxRuntime.jsxs("div", { className: styles$8.container, children: [!hideControls && (jsxRuntime.jsxs("div", { className: styles$8.controls, children: [jsxRuntime.jsx("div", { className: styles$8.viewToggle, children: availableViewTypes.map(type => (jsxRuntime.jsxs("button", { className: `${styles$8.viewButton} ${viewType === type ? styles$8.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$8.viewIcon, children: viewTypeConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$8.viewLabel, children: viewTypeConfig[type].label })] }, type))) }), shouldShowAggregationToggle && (jsxRuntime.jsxs("div", { className: styles$8.aggregationToggle, children: [jsxRuntime.jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'average' ? styles$8.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsxRuntime.jsx("span", { className: styles$8.aggregationIcon, children: jsxRuntime.jsx(lucideReact.Divide, { size: 16 }) }), jsxRuntime.jsx("span", { className: styles$8.aggregationLabel, children: "Average" })] }), jsxRuntime.jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'sum' ? styles$8.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsxRuntime.jsx("span", { className: styles$8.aggregationIcon, children: jsxRuntime.jsx(lucideReact.Sigma, { size: 16 }) }), jsxRuntime.jsx("span", { className: styles$8.aggregationLabel, children: "Sum" })] })] }))] })), jsxRuntime.jsx("div", { className: `${styles$8.legend}${compactLegend ? ` ${styles$8.compactLegend}` : ''}`, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$8.legendItem} ${!activeHabits.includes(habit) ? styles$8.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$8.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$8.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$8.legendLabel, children: habit })] }, habit))) }), jsxRuntime.jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$8.chart }), tooltipData && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: `${styles$8.tooltip} ${tooltipData ? styles$8.visible : ''}`, style: {
+    return (jsxRuntime.jsxs("div", { className: styles$8.container, children: [!hideControls && (jsxRuntime.jsxs("div", { className: styles$8.controls, children: [jsxRuntime.jsx("div", { className: styles$8.viewToggle, children: availableViewTypes.map(type => {
+                            const { Icon, label } = viewTypeConfig[type];
+                            return (jsxRuntime.jsxs("button", { className: `${styles$8.viewButton} ${viewType === type ? styles$8.active : ''}`, onClick: () => setViewType(type), title: label, children: [jsxRuntime.jsx("span", { className: styles$8.viewIcon, children: jsxRuntime.jsx(Icon, { size: 16 }) }), jsxRuntime.jsx("span", { className: styles$8.viewLabel, children: label })] }, type));
+                        }) }), shouldShowAggregationToggle && (jsxRuntime.jsxs("div", { className: styles$8.aggregationToggle, children: [jsxRuntime.jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'average' ? styles$8.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsxRuntime.jsx("span", { className: styles$8.aggregationIcon, children: jsxRuntime.jsx(lucideReact.Divide, { size: 16 }) }), jsxRuntime.jsx("span", { className: styles$8.aggregationLabel, children: "Average" })] }), jsxRuntime.jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'sum' ? styles$8.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsxRuntime.jsx("span", { className: styles$8.aggregationIcon, children: jsxRuntime.jsx(lucideReact.Sigma, { size: 16 }) }), jsxRuntime.jsx("span", { className: styles$8.aggregationLabel, children: "Sum" })] })] }))] })), jsxRuntime.jsx("div", { className: `${styles$8.legend}${compactLegend ? ` ${styles$8.compactLegend}` : ''}`, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$8.legendItem} ${!activeHabits.includes(habit) ? styles$8.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$8.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$8.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$8.legendLabel, children: habit })] }, habit))) }), jsxRuntime.jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$8.chart }), tooltipData && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: `${styles$8.tooltip} ${tooltipData ? styles$8.visible : ''}`, style: {
                     left: `${tooltipData.x}px`,
                     top: `${tooltipData.y - 80}px`
                 }, children: [jsxRuntime.jsxs("div", { className: styles$8.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$8.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$8.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxRuntime.jsx("span", { children: tooltipData.habit })] }), jsxRuntime.jsxs("div", { className: styles$8.tooltipInfo, children: [jsxRuntime.jsx("div", { className: styles$8.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxRuntime.jsxs("div", { className: styles$8.tooltipValue, children: [jsxRuntime.jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsxRuntime.jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));