@stfrigerio/sito-template 0.1.87 → 0.1.90

package/dist/index.js

@@ -31,7 +31,7 @@ function _interopNamespaceDefault(e) {
 
 var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
 
-var styles$B = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
+var styles$B = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","icon":"Button-module_icon__JNzlJ","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj"};
 
 const SOUND_PACKS = {
     digital: {
@@ -595,10 +595,11 @@ function useComponentSound(config, options) {
  */
 const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
     const { handlers } = useComponentSound(soundConfig);
+    const isIcon = variant === 'icon';
     const buttonClasses = [
         styles$B.button,
         styles$B[variant],
-        styles$B[size],
+        !isIcon && styles$B[size],
         fullWidth && styles$B.fullWidth,
         loading && styles$B.loading,
         className
@@ -611,7 +612,7 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
         handlers.onMouseEnter?.();
         onMouseEnter?.(e);
     };
-    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$B.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$B.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$B.iconRight, children: iconRight })] }));
+    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: isIcon ? undefined : { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : (isIcon ? 0.9 : 0.98) }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$B.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$B.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$B.iconRight, children: iconRight })] }));
 };
 
 var styles$A = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
@@ -2721,7 +2722,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 +2745,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 +4243,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" })] })] })] }))] }));