@stfrigerio/sito-template 0.1.94 → 0.1.95

package/dist/index.js

@@ -1725,7 +1725,7 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
         }, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$p.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$p.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$p.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
 };
 
-var styles$o = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","dragging":"Slider-module_dragging__rynPv","fill":"Slider-module_fill__AYR4-","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
+var styles$o = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","dragging":"Slider-module_dragging__rynPv","fill":"Slider-module_fill__AYR4-","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","dotsContainer":"Slider-module_dotsContainer__zpcZe","dot":"Slider-module_dot__TkGh5","dotFilled":"Slider-module_dotFilled__n779E","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
 
 /**
  * Slider component — responsive, accessible range input with a styled track, fill, and thumb.
@@ -1733,7 +1733,7 @@ var styles$o = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_la
  * The thumb is inset at the track endpoints so it never overflows. Drag state is tracked
  * via pointer events (works on mouse, touch, and pen).
  */
-function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValue = false, valueFormatter, labels = [], config = {}, disabled = false, className = '', style = {}, loading = false, colorFunction, showTooltip = false, tooltipContent, soundConfig, }) {
+function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValue = false, valueFormatter, labels = [], config = {}, disabled = false, className = '', style = {}, loading = false, colorFunction, showTooltip = false, tooltipContent, soundConfig, variant = 'track', }) {
     const { handlers, playSound } = useComponentSound(soundConfig);
     const [isDragging, setIsDragging] = React.useState(false);
     const { colors = {}, size = 'md' } = config;
@@ -1770,6 +1770,28 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
     if (loading) {
         return (jsxRuntime.jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${styles$o.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsx("div", { className: styles$o.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: { repeat: Infinity, duration: 1.5, ease: 'easeInOut' } }) })] }));
     }
+    if (variant === 'dots') {
+        const dotCount = Math.max(0, Math.floor((max - min) / step));
+        const dotValues = Array.from({ length: dotCount }, (_, i) => min + (i + 1) * step);
+        const handleDotClick = (dotValue) => {
+            if (disabled || loading)
+                return;
+            playSound('click');
+            const next = value === dotValue ? dotValue - step : dotValue;
+            onChange(Math.max(min, next));
+        };
+        return (jsxRuntime.jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${stateClass} ${className}`, style: style, ...handlers, children: [label && jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsx("div", { className: styles$o.dotsContainer, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-label": label, children: dotValues.map((dotValue) => {
+                        const filled = dotValue <= value;
+                        return (jsxRuntime.jsx("button", { type: "button", className: `${styles$o.dot} ${filled ? styles$o.dotFilled : ''}`, style: filled
+                                ? {
+                                    backgroundColor: dynamicColor,
+                                    borderColor: dynamicColor,
+                                }
+                                : undefined, onClick: () => handleDotClick(dotValue), disabled: disabled, "aria-label": valueFormatter
+                                ? valueFormatter(dotValue)
+                                : `Set to ${dotValue}` }, dotValue));
+                    }) }), showValue && (jsxRuntime.jsx("div", { className: styles$o.valueDisplay, style: { color: dynamicColor }, children: formatValue(value) }))] }));
+    }
     // Inset the thumb so its bounding box stays inside the track at 0/100%.
     // At percentage=0: marginLeft=0 → thumb flush-left. At 100%: marginLeft=-thumbSize → flush-right.
     const insetStyle = {
@@ -4594,7 +4616,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                                             : ''] }), tooltipData.count > 1 && (jsxRuntime.jsxs("div", { className: styles$7.tooltipValue, children: [jsxRuntime.jsx("strong", { children: tooltipData.count }), jsxRuntime.jsx("span", { className: styles$7.tooltipUnits, children: "events" })] }))] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$7.tooltipHeader, children: jsxRuntime.jsx("span", { children: formatHour(tooltipData.hour) }) }), jsxRuntime.jsxs("div", { className: styles$7.tooltipInfo, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipValue, children: [jsxRuntime.jsx("strong", { children: tooltipData.count }), jsxRuntime.jsxs("span", { className: styles$7.tooltipUnits, children: ["event", tooltipData.count === 1 ? '' : 's'] })] }), tooltipData.breakdown && tooltipData.breakdown.length > 1 && (jsxRuntime.jsx("div", { className: styles$7.tooltipBreakdown, children: tooltipData.breakdown.map(({ habit, count }) => (jsxRuntime.jsxs("div", { className: styles$7.tooltipBreakdownRow, children: [jsxRuntime.jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsxs("span", { children: [customHabitEmojis[habit] || '', " ", habit] }), jsxRuntime.jsx("span", { className: styles$7.tooltipCount, children: count })] }, habit))) }))] })] })) }))] }));
 };
 
-var styles$6 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","title":"SleepChart-module_title__6-QII","legend":"SleepChart-module_legend__VsqQj","legendItem":"SleepChart-module_legendItem__2c1nd","sleepDot":"SleepChart-module_sleepDot__qCY6O","wakeDot":"SleepChart-module_wakeDot__-RcrT","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","sleepBar":"SleepChart-module_sleepBar__Hk76f","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipHeader":"SleepChart-module_tooltipHeader__5BdPL","tooltipEmoji":"SleepChart-module_tooltipEmoji__c5vtz","tooltipInfo":"SleepChart-module_tooltipInfo__9Yrno","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipLabel":"SleepChart-module_tooltipLabel__7SNzQ","tooltipValue":"SleepChart-module_tooltipValue__FoAVy","tooltipDuration":"SleepChart-module_tooltipDuration__d2wBW"};
+var styles$6 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","eyebrow":"SleepChart-module_eyebrow__KH0ox","title":"SleepChart-module_title__6-QII","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","gridLineAccent":"SleepChart-module_gridLineAccent__Sk-l6","sleepBar":"SleepChart-module_sleepBar__Hk76f","sleepBarHover":"SleepChart-module_sleepBarHover__cBTca","squiggle":"SleepChart-module_squiggle__Hxfjx","endpoint":"SleepChart-module_endpoint__vB4WD","endpointSleep":"SleepChart-module_endpointSleep__FA1vK","endpointWake":"SleepChart-module_endpointWake__CWEOB","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipDate":"SleepChart-module_tooltipDate__g2kOA","tooltipBody":"SleepChart-module_tooltipBody__RamWJ","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipTotal":"SleepChart-module_tooltipTotal__5v3dE"};
 
 const parseTimeToDecimal = (time) => {
     const [hours, minutes] = time.split(':').map(Number);
@@ -4602,288 +4624,217 @@ const parseTimeToDecimal = (time) => {
 };
 const formatTime = (hour) => {
     const h24 = Math.floor(hour % 24);
-    const h12 = h24 === 0 ? 12 : h24 > 12 ? h24 - 12 : h24;
-    const ampm = h24 >= 12 ? 'PM' : 'AM';
     const minutes = Math.round((hour % 1) * 60);
-    return `${Math.floor(h12)}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+    return `${h24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+};
+const formatDuration = (decimal) => {
+    const h = Math.floor(decimal);
+    const m = Math.round((decimal % 1) * 60);
+    return `${h}h ${m.toString().padStart(2, '0')}m`;
 };
-const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
+// Build an SVG sine-wave path between two x-coordinates at a given baseline y.
+// Two quadratic curves per cycle keep the curve smooth without needing cubic control points.
+const buildSquigglePath = (x1, x2, y, amplitude, wavelength) => {
+    const distance = Math.max(0, x2 - x1);
+    if (distance === 0)
+        return `M ${x1} ${y}`;
+    const cycles = Math.max(1, Math.round(distance / wavelength));
+    const halfStep = distance / (cycles * 2);
+    let path = `M ${x1} ${y}`;
+    for (let i = 0; i < cycles * 2; i++) {
+        const cx = x1 + (i + 0.5) * halfStep;
+        const cy = y + (i % 2 === 0 ? -amplitude : amplitude);
+        const ex = x1 + (i + 1) * halfStep;
+        path += ` Q ${cx} ${cy} ${ex} ${y}`;
+    }
+    return path;
+};
+const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
     const svgRef = React.useRef(null);
     const [tooltipData, setTooltipData] = React.useState(null);
-    const margin = React.useMemo(() => ({ top: 30, right: 30, bottom: 50, left: 80 }), []);
+    const margin = React.useMemo(() => ({ top: 12, right: 16, bottom: 32, left: 64 }), []);
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
-    // Hide tooltip on scroll
     React.useEffect(() => {
-        const handleScroll = () => {
-            setTooltipData(null);
-        };
+        const handleScroll = () => setTooltipData(null);
         window.addEventListener('scroll', handleScroll, true);
-        return () => {
-            window.removeEventListener('scroll', handleScroll, true);
-        };
+        return () => window.removeEventListener('scroll', handleScroll, true);
     }, []);
     React.useEffect(() => {
         if (!svgRef.current || sleepData.length === 0)
             return;
         const svg = d3__namespace.select(svgRef.current);
         svg.selectAll('*').remove();
-        // Add invisible rect to detect mouse leave events
         svg.append('rect')
             .attr('width', width)
             .attr('height', height)
             .attr('fill', 'transparent')
             .style('pointer-events', 'all')
-            .on('mouseleave', () => {
-            setTooltipData(null);
-        });
-        const g = svg.append('g')
+            .on('mouseleave', () => setTooltipData(null));
+        const g = svg
+            .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        const xScale = d3__namespace.scaleLinear()
-            .domain([18, 42])
-            .range([0, chartWidth]);
-        const yDomain = sleepData.map(d => d.date);
-        const yScale = d3__namespace.scaleBand()
+        const xScale = d3__namespace.scaleLinear().domain([18, 42]).range([0, chartWidth]);
+        const yDomain = sleepData.map((d) => d.date);
+        const yScale = d3__namespace
+            .scaleBand()
             .domain(yDomain)
             .range([0, chartHeight])
-            .paddingInner(0.2)
+            .paddingInner(0.35)
             .paddingOuter(0.1);
-        // Add vertical grid lines with midnight/noon highlights
+        // Dotted vertical gridlines; midnight/noon are slightly more present.
         g.selectAll('.grid-line-x')
-            .data(d3__namespace.range(18, 43, 1))
-            .enter().append('line')
+            .data(d3__namespace.range(18, 43, 3))
+            .enter()
+            .append('line')
             .attr('class', styles$6.gridLine)
-            .attr('x1', d => xScale(d))
+            .attr('x1', (d) => xScale(d))
             .attr('y1', 0)
-            .attr('x2', d => xScale(d))
+            .attr('x2', (d) => xScale(d))
             .attr('y2', chartHeight)
-            .style('stroke', d => {
-            const hour = d % 24;
-            if (hour === 0)
-                return 'var(--color-border)'; // Midnight
-            if (hour === 12)
-                return 'var(--color-border)'; // Noon
-            return 'var(--color-border)';
-        })
-            .style('stroke-opacity', d => {
-            const hour = d % 24;
-            if (hour === 0 || hour === 12)
-                return 0.3;
-            if (hour % 3 === 0)
-                return 0.15;
-            return 0.05;
-        })
-            .style('stroke-width', d => {
+            .classed(styles$6.gridLineAccent, (d) => {
             const hour = d % 24;
-            if (hour === 0 || hour === 12)
-                return 2;
-            return 1;
+            return hour === 0 || hour === 12;
         });
         sleepData.forEach((dayData) => {
             const yValue = yScale(dayData.date);
             if (yValue === undefined)
                 return;
             const barHeight = yScale.bandwidth();
-            const sleepGroup = g.append('g')
+            const sleepGroup = g
+                .append('g')
                 .attr('class', styles$6.sleepBar)
-                .style('cursor', 'pointer')
+                .style('cursor', onDateClick ? 'pointer' : 'default')
                 .on('click', () => onDateClick?.(dayData.date));
-            // Handle sleep time and wake hour separately
             let sleepHour = null;
             let wakeHour = null;
             if (dayData.sleep_time) {
                 sleepHour = parseTimeToDecimal(dayData.sleep_time);
-                // Convert evening hours to 24+ scale (e.g., 22:00 stays 22, but early morning like 02:00 becomes 26)
-                if (sleepHour < 18) {
+                if (sleepHour < 18)
                     sleepHour += 24;
-                }
             }
             if (dayData.wake_hour) {
                 wakeHour = parseTimeToDecimal(dayData.wake_hour);
-                // If we have sleep time, wake time should be after sleep time
                 if (sleepHour !== null) {
-                    // If wake hour is before sleep hour or very early, it's next day
                     if (wakeHour < sleepHour || (sleepHour >= 18 && wakeHour < 18)) {
                         wakeHour += 24;
                     }
                 }
-                else {
-                    // No sleep time - if wake time is early morning, assume next day
-                    if (wakeHour < 12) {
-                        wakeHour += 24;
-                    }
+                else if (wakeHour < 12) {
+                    wakeHour += 24;
                 }
             }
-            // Draw the bar only if both values exist
             if (sleepHour !== null && wakeHour !== null) {
-                const rect = sleepGroup.append('rect')
-                    .attr('x', xScale(sleepHour))
-                    .attr('y', yValue)
-                    .attr('width', 0) // Start with 0 width for animation
-                    .attr('height', barHeight)
-                    .attr('rx', barHeight / 2)
-                    .attr('fill', 'url(#sleepGradient)')
-                    .attr('opacity', 0) // Start invisible
-                    .attr('stroke', 'rgba(255,255,255,0.3)')
-                    .attr('stroke-width', 1)
-                    .style('filter', 'drop-shadow(0 2px 8px rgba(155, 89, 182, 0.3))');
-                // Animate the bar
-                rect.transition()
-                    .duration(800)
-                    .delay(Math.random() * 200) // Stagger the animations
+                const x1 = xScale(sleepHour);
+                const x2 = xScale(wakeHour);
+                const y = yValue + barHeight / 2;
+                const amplitude = Math.min(barHeight / 2.2, 7);
+                const wavelength = 14;
+                const d = buildSquigglePath(x1, x2, y, amplitude, wavelength);
+                const path = sleepGroup
+                    .append('path')
+                    .attr('class', styles$6.squiggle)
+                    .attr('d', d)
+                    .attr('fill', 'none');
+                const node = path.node();
+                const length = typeof node.getTotalLength === 'function'
+                    ? node.getTotalLength()
+                    : (x2 - x1) * 1.8;
+                path.attr('stroke-dasharray', length)
+                    .attr('stroke-dashoffset', length)
+                    .transition()
+                    .duration(540)
                     .ease(d3__namespace.easeCubicOut)
-                    .attr('width', Math.max(0, xScale(wakeHour) - xScale(sleepHour)))
-                    .attr('opacity', 0.85);
+                    .attr('stroke-dashoffset', 0);
             }
-            // Draw sleep dot if sleep time exists
             if (sleepHour !== null) {
-                const sleepDot = sleepGroup.append('circle')
+                sleepGroup
+                    .append('circle')
+                    .attr('class', `${styles$6.endpoint} ${styles$6.endpointSleep}`)
                     .attr('cx', xScale(sleepHour))
                     .attr('cy', yValue + barHeight / 2)
-                    .attr('r', 0) // Start with 0 radius
-                    .attr('fill', '#9B59B6')
-                    .attr('stroke', '#ffffff')
-                    .attr('stroke-width', 2)
-                    .style('filter', 'drop-shadow(0 3px 6px rgba(155, 89, 182, 0.4))')
-                    .style('transition', 'all 0.3s ease');
-                // Animate the dot
-                sleepDot.transition()
-                    .duration(400)
-                    .delay(300 + Math.random() * 100)
-                    .ease(d3__namespace.easeBackOut)
-                    .attr('r', 6);
+                    .attr('r', 0)
+                    .transition()
+                    .duration(280)
+                    .delay(160)
+                    .ease(d3__namespace.easeCubicOut)
+                    .attr('r', 3.5);
             }
-            // Draw wake dot if wake hour exists
             if (wakeHour !== null) {
-                const wakeDot = sleepGroup.append('circle')
+                sleepGroup
+                    .append('circle')
+                    .attr('class', `${styles$6.endpoint} ${styles$6.endpointWake}`)
                     .attr('cx', xScale(wakeHour))
                     .attr('cy', yValue + barHeight / 2)
-                    .attr('r', 0) // Start with 0 radius
-                    .attr('fill', '#3498DB')
-                    .attr('stroke', '#ffffff')
-                    .attr('stroke-width', 2)
-                    .style('filter', 'drop-shadow(0 3px 6px rgba(52, 152, 219, 0.4))')
-                    .style('transition', 'all 0.3s ease');
-                // Animate the dot
-                wakeDot.transition()
-                    .duration(400)
-                    .delay(500 + Math.random() * 100)
-                    .ease(d3__namespace.easeBackOut)
-                    .attr('r', 6);
+                    .attr('r', 0)
+                    .transition()
+                    .duration(280)
+                    .delay(220)
+                    .ease(d3__namespace.easeCubicOut)
+                    .attr('r', 3.5);
             }
-            // Add hover interactions with tooltip
             sleepGroup
                 .on('mouseenter', function (event) {
-                // Highlight the bar
-                d3__namespace.select(this).select('rect')
-                    .transition()
-                    .duration(200)
-                    .attr('opacity', 1)
-                    .style('filter', 'drop-shadow(0 4px 12px rgba(155, 89, 182, 0.5)) brightness(1.1)');
-                // Scale up the dots
-                d3__namespace.select(this).selectAll('circle')
-                    .transition()
-                    .duration(200)
-                    .attr('r', 8);
-                // Calculate tooltip data
-                const rect = svgRef.current?.getBoundingClientRect();
-                if (rect) {
-                    const duration = (sleepHour !== null && wakeHour !== null)
-                        ? wakeHour - sleepHour
-                        : null;
-                    setTooltipData({
-                        date: dayData.date,
-                        sleepTime: sleepHour !== null ? formatTime(sleepHour) : null,
-                        wakeTime: wakeHour !== null ? formatTime(wakeHour) : null,
-                        duration: duration !== null ? Math.round(duration * 100) / 100 : null,
-                        x: event.pageX,
-                        y: event.pageY - 80
-                    });
-                }
+                d3__namespace.select(this).classed(styles$6.sleepBarHover, true);
+                const duration = sleepHour !== null && wakeHour !== null ? wakeHour - sleepHour : null;
+                setTooltipData({
+                    date: dayData.date,
+                    sleepTime: sleepHour !== null ? formatTime(sleepHour) : null,
+                    wakeTime: wakeHour !== null ? formatTime(wakeHour) : null,
+                    duration: duration !== null ? Math.round(duration * 100) / 100 : null,
+                    x: event.pageX,
+                    y: event.pageY - 12,
+                });
             })
                 .on('mouseleave', function () {
-                // Reset bar appearance
-                d3__namespace.select(this).select('rect')
-                    .transition()
-                    .duration(200)
-                    .attr('opacity', 0.85)
-                    .style('filter', 'drop-shadow(0 2px 8px rgba(155, 89, 182, 0.3))');
-                // Reset dots
-                d3__namespace.select(this).selectAll('circle')
-                    .transition()
-                    .duration(200)
-                    .attr('r', 6);
-                // Hide tooltip
+                d3__namespace.select(this).classed(styles$6.sleepBarHover, false);
                 setTooltipData(null);
             })
                 .on('mousemove', function (event) {
-                // Update tooltip position
-                setTooltipData(prev => prev ? {
-                    ...prev,
-                    x: event.pageX,
-                    y: event.pageY - 80
-                } : null);
+                setTooltipData((prev) => prev ? { ...prev, x: event.pageX, y: event.pageY - 12 } : null);
             });
         });
-        // Create gradient definition
-        const defs = svg.append('defs');
-        const gradient = defs.append('linearGradient')
-            .attr('id', 'sleepGradient')
-            .attr('x1', '0%')
-            .attr('x2', '100%');
-        gradient.append('stop')
-            .attr('offset', '0%')
-            .attr('stop-color', '#9B59B6')
-            .attr('stop-opacity', 1);
-        gradient.append('stop')
-            .attr('offset', '50%')
-            .attr('stop-color', '#7B68A6')
-            .attr('stop-opacity', 1);
-        gradient.append('stop')
-            .attr('offset', '100%')
-            .attr('stop-color', '#3498DB')
-            .attr('stop-opacity', 1);
-        const xAxisTicks = d3__namespace.range(18, 43, 3).map(hour => ({
+        const xAxisTicks = d3__namespace.range(18, 43, 3).map((hour) => ({
             value: hour,
-            label: hour === 24 ? '12 AM' : hour === 36 ? '12 PM' :
-                (hour % 24) === 0 ? '12 AM' :
-                    (hour % 24) < 12 ? `${hour % 24} AM` :
-                        (hour % 24) === 12 ? '12 PM' : `${(hour % 24) - 12} PM`
+            label: `${(hour % 24).toString().padStart(2, '0')}:00`,
         }));
-        const xAxis = g.append('g')
+        const xAxis = g
+            .append('g')
             .attr('class', styles$6.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
-            .call(d3__namespace.axisBottom(xScale)
-            .tickValues(xAxisTicks.map(t => t.value))
+            .call(d3__namespace
+            .axisBottom(xScale)
+            .tickValues(xAxisTicks.map((t) => t.value))
             .tickFormat((d) => {
-            const tick = xAxisTicks.find(t => t.value === d);
+            const tick = xAxisTicks.find((t) => t.value === d);
             return tick ? tick.label : '';
         })
-            .tickSizeOuter(0));
-        // Style axis ticks
-        xAxis.selectAll('text')
-            .style('font-weight', d => {
-            const hour = d % 24;
-            return hour === 0 || hour === 12 ? '600' : '400';
-        });
-        const yAxisTicks = yDomain.filter((_, i) => i % Math.ceil(yDomain.length / 10) === 0);
-        g.append('g')
+            .tickSize(0)
+            .tickPadding(10));
+        xAxis.select('.domain').remove();
+        const tickEvery = Math.max(1, Math.ceil(yDomain.length / 8));
+        const yAxisTicks = yDomain.filter((_, i) => i % tickEvery === 0);
+        const yAxis = g
+            .append('g')
             .attr('class', styles$6.yAxis)
-            .call(d3__namespace.axisLeft(yScale)
+            .call(d3__namespace
+            .axisLeft(yScale)
             .tickValues(yAxisTicks)
-            .tickFormat(d => {
+            .tickFormat((d) => {
             const date = new Date(d);
-            return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
-        }));
+            return `${(date.getMonth() + 1)
+                .toString()
+                .padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
+        })
+            .tickSize(0)
+            .tickPadding(12));
+        yAxis.select('.domain').remove();
     }, [sleepData, chartWidth, chartHeight, margin, onDateClick, height, width]);
-    return (jsxRuntime.jsxs("div", { className: styles$6.container, children: [jsxRuntime.jsxs("div", { className: styles$6.header, children: [jsxRuntime.jsx("h3", { className: styles$6.title, children: "Sleep Pattern" }), jsxRuntime.jsxs("div", { className: styles$6.legend, children: [jsxRuntime.jsxs("div", { className: styles$6.legendItem, children: [jsxRuntime.jsx("span", { className: styles$6.sleepDot }), jsxRuntime.jsx("span", { children: "Sleep Time" })] }), jsxRuntime.jsxs("div", { className: styles$6.legendItem, children: [jsxRuntime.jsx("span", { className: styles$6.wakeDot }), jsxRuntime.jsx("span", { children: "Wake Time" })] })] })] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxRuntime.jsxs("div", { className: `${styles$6.tooltip} ${tooltipData ? styles$6.visible : ''}`, style: {
-                    left: `${tooltipData.x}px`,
-                    top: `${tooltipData.y}px`
-                }, children: [jsxRuntime.jsxs("div", { className: styles$6.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$6.tooltipEmoji, children: "\uD83D\uDE34" }), jsxRuntime.jsx("span", { children: new Date(tooltipData.date).toLocaleDateString('en-US', {
-                                    weekday: 'short',
-                                    month: 'short',
-                                    day: 'numeric'
-                                }) })] }), jsxRuntime.jsxs("div", { className: styles$6.tooltipInfo, children: [tooltipData.sleepTime && (jsxRuntime.jsxs("div", { className: styles$6.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$6.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\uD83C\uDF19" }), jsxRuntime.jsx("span", { children: "Sleep:" })] }), jsxRuntime.jsx("span", { className: styles$6.tooltipValue, children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxRuntime.jsxs("div", { className: styles$6.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$6.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\u2600\uFE0F" }), jsxRuntime.jsx("span", { children: "Wake:" })] }), jsxRuntime.jsx("span", { className: styles$6.tooltipValue, children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxRuntime.jsxs("div", { className: styles$6.tooltipDuration, children: [jsxRuntime.jsx("span", { children: "\u23F1\uFE0F" }), jsxRuntime.jsxs("span", { children: [Math.floor(tooltipData.duration), "h ", Math.round((tooltipData.duration % 1) * 60), "m"] })] }))] })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: styles$6.container, children: [jsxRuntime.jsxs("header", { className: styles$6.header, children: [jsxRuntime.jsx("span", { className: styles$6.eyebrow, children: "the night" }), jsxRuntime.jsxs("h3", { className: styles$6.title, children: [jsxRuntime.jsx("em", { children: "Sleep" }), " pattern"] })] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxRuntime.jsxs("div", { className: `${styles$6.tooltip} ${styles$6.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y}px` }, children: [jsxRuntime.jsx("div", { className: styles$6.tooltipDate, children: new Date(tooltipData.date).toLocaleDateString('en-US', {
+                            weekday: 'short',
+                            month: 'short',
+                            day: 'numeric',
+                        }) }), jsxRuntime.jsxs("div", { className: styles$6.tooltipBody, children: [tooltipData.sleepTime && (jsxRuntime.jsxs("div", { className: styles$6.tooltipRow, children: [jsxRuntime.jsx("em", { children: "sleep" }), jsxRuntime.jsx("time", { children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxRuntime.jsxs("div", { className: styles$6.tooltipRow, children: [jsxRuntime.jsx("em", { children: "wake" }), jsxRuntime.jsx("time", { children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxRuntime.jsxs("div", { className: `${styles$6.tooltipRow} ${styles$6.tooltipTotal}`, children: [jsxRuntime.jsx("em", { children: "total" }), jsxRuntime.jsx("time", { children: formatDuration(tooltipData.duration) })] }))] })] }))] }));
 };
 
 var styles$5 = {"container":"BooleansHeatmap-module_container__IOyeU","title":"BooleansHeatmap-module_title__8DRRQ","habitEmoji":"BooleansHeatmap-module_habitEmoji__Mawv-","chart":"BooleansHeatmap-module_chart__-q0Pc","monthLabel":"BooleansHeatmap-module_monthLabel__MXbIg","dayLabel":"BooleansHeatmap-module_dayLabel__2RRtm","cell":"BooleansHeatmap-module_cell__WADVB","legend":"BooleansHeatmap-module_legend__WqGF8","legendItem":"BooleansHeatmap-module_legendItem__rDE2g","legendColor":"BooleansHeatmap-module_legendColor__Z34-d","tooltip":"BooleansHeatmap-module_tooltip__-fHl7"};