@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/data-display/GanttChart/GanttTaskBar.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useCallback, useMemo } from 'react';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { getDayOffset, calculateExpectedProgress, formatDateShort, formatDuration } from './GanttChart.utils.js';
 import { ChartTooltip } from '../../charts/shared/ChartTooltip/ChartTooltip.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
@@ -11,10 +12,10 @@ import { taskBarVariants } from './GanttChart.animations.js';
 import { useGanttDrag } from './hooks/useGanttDrag.js';
 import { getDaysBetween, addDays, toDate } from '../../../utils/dateUtils.js';
 
-const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
+const GanttTaskBar = React__default.memo(({ task, group, top }) => {
     var _a;
-    const { theme, dayWidth, rangeStart, rowHeight, readonly, readonlyDates, readonlyProgress, onTaskUpdate, onTaskClick, tasks, } = useGanttContext();
-    const { hoveredTaskId, setHoveredTaskId, focusedTaskId, setActiveDrag, } = useGanttInteraction();
+    const { theme, dayWidth, rangeStart, rowHeight, readonly, readonlyDates, readonlyProgress, onTaskUpdate, onTaskClick, tasks, showTaskLabels, } = useGanttContext();
+    const { hoveredTaskId, setHoveredTaskId, focusedTaskId, setFocusedTaskId, setActiveDrag, } = useGanttInteraction();
     const [tooltipPos, setTooltipPos] = useState(null);
     const offset = getDayOffset(task.startDate, rangeStart);
     const span = getDaysBetween(task.startDate, task.endDate);
@@ -26,6 +27,13 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
     const canDragProgress = !readonly && !readonlyProgress && !!onTaskUpdate;
     const expectedProgress = calculateExpectedProgress(task.startDate, task.endDate);
     const isBehindSchedule = !task.completed && task.progress < expectedProgress;
+    const updateActiveDrag = useCallback((isDragging, deltaX, mode) => {
+        if (isDragging) {
+            setTooltipPos(null);
+            setHoveredTaskId(null);
+        }
+        setActiveDrag(isDragging ? { taskId: task.id, mode, deltaX } : null);
+    }, [setActiveDrag, setHoveredTaskId, task.id]);
     // ----- Drag: Move -----
     const handleMoveDragEnd = useCallback((result) => {
         if (!onTaskUpdate || result.daysDelta === 0)
@@ -45,8 +53,8 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         disabled: !canDragDates,
         onDragEnd: handleMoveDragEnd,
         onDragStateChange: useCallback((isDragging, deltaX) => {
-            setActiveDrag(isDragging ? { taskId: task.id, mode: "move", deltaX } : null);
-        }, [setActiveDrag, task.id]),
+            updateActiveDrag(isDragging, deltaX, "move");
+        }, [updateActiveDrag]),
     });
     // ----- Drag: Resize left -----
     const handleResizeLeftEnd = useCallback((result) => {
@@ -66,8 +74,8 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         disabled: !canDragDates,
         onDragEnd: handleResizeLeftEnd,
         onDragStateChange: useCallback((isDragging, deltaX) => {
-            setActiveDrag(isDragging ? { taskId: task.id, mode: "resize-left", deltaX } : null);
-        }, [setActiveDrag, task.id]),
+            updateActiveDrag(isDragging, deltaX, "resize-left");
+        }, [updateActiveDrag]),
     });
     // ----- Drag: Resize right -----
     const handleResizeRightEnd = useCallback((result) => {
@@ -87,18 +95,20 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         disabled: !canDragDates,
         onDragEnd: handleResizeRightEnd,
         onDragStateChange: useCallback((isDragging, deltaX) => {
-            setActiveDrag(isDragging ? { taskId: task.id, mode: "resize-right", deltaX } : null);
-        }, [setActiveDrag, task.id]),
+            updateActiveDrag(isDragging, deltaX, "resize-right");
+        }, [updateActiveDrag]),
     });
     // ----- Drag: Progress -----
     const handleProgressDragEnd = useCallback((result) => {
         if (!onTaskUpdate)
             return;
+        if (result.newProgress === task.progress)
+            return;
         onTaskUpdate(task.id, {
             progress: result.newProgress,
             completed: result.newProgress === 100,
         });
-    }, [onTaskUpdate, task.id]);
+    }, [onTaskUpdate, task.id, task.progress]);
     const progressDrag = useGanttDrag({
         dayWidth,
         mode: "progress",
@@ -106,6 +116,12 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         originalProgress: task.progress,
         disabled: !canDragProgress,
         onDragEnd: handleProgressDragEnd,
+        onDragStateChange: useCallback((isDragging) => {
+            if (isDragging) {
+                setTooltipPos(null);
+                setHoveredTaskId(null);
+            }
+        }, [setHoveredTaskId]),
     });
     const anyDragging = moveDrag.isDragging ||
         resizeLeftDrag.isDragging ||
@@ -139,6 +155,10 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         displayProgress = progressDrag.dragProgress;
     }
     const isNarrow = visualWidth <= 80;
+    const showInsideLabel = showTaskLabels === "inside" ||
+        (showTaskLabels === "auto" && !isNarrow);
+    const showOutsideLabel = showTaskLabels === "outside" ||
+        (showTaskLabels === "auto" && isNarrow);
     // ----- Hover highlighting (dependency connections) -----
     const isHighlighted = useMemo(() => {
         var _a, _b, _c;
@@ -151,9 +171,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         const hoveredTask = tasks.find((t) => t.id === hoveredTaskId);
         return (_c = (_b = hoveredTask === null || hoveredTask === void 0 ? void 0 : hoveredTask.dependencies) === null || _b === void 0 ? void 0 : _b.includes(task.id)) !== null && _c !== void 0 ? _c : false;
     }, [hoveredTaskId, task.id, task.dependencies, tasks]);
-    const isFaded = hoveredTaskId !== null &&
-        hoveredTaskId !== task.id &&
-        !isHighlighted;
+    const isFaded = hoveredTaskId !== null && hoveredTaskId !== task.id && !isHighlighted;
     const isFocused = focusedTaskId === task.id;
     // ----- Click handler -----
     const handleClick = (e) => {
@@ -161,11 +179,17 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
             return;
         onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task, e);
     };
+    const handleKeyDown = (e) => {
+        if ((e.key === "Enter" || e.key === " ") && onTaskClick) {
+            e.preventDefault();
+            onTaskClick(task, e);
+        }
+    };
     // ----- Tooltip -----
-    const tooltipContent = (jsxs("div", { className: "text-xs space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-sm", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
+    const tooltipContent = (jsxs("div", { className: "text-sm space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-base", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
                                 width: `${task.progress}%`,
                                 backgroundColor: barColor,
-                            } }) })] }), task.assignee && (jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" }), jsx("span", { children: task.assignee.name })] })), isBehindSchedule && (jsxs("div", { className: "text-[var(--color-warning)] text-[10px]", children: ["Behind schedule (expected ", expectedProgress, "%)"] }))] }));
+                            } }) })] }), task.assignee && (jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [jsx(Avatar, { src: task.assignee.avatar, name: task.assignee.name, size: "xs" }), jsx("span", { children: task.assignee.name })] })), isBehindSchedule && (jsxs("div", { className: "text-[var(--color-warning)] text-[10px]", children: ["Behind schedule (expected ", expectedProgress, "%)"] }))] }));
     return (jsxs(Fragment, { children: [jsx(GanttTaskContextMenu, { task: task, children: jsxs("div", { className: "absolute", style: {
                         left: visualLeft,
                         top: top + (rowHeight - barHeight) / 2,
@@ -181,12 +205,12 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
                     }, onMouseLeave: () => {
                         setTooltipPos(null);
                         setHoveredTaskId(null);
-                    }, onClick: onTaskClick ? handleClick : undefined, onPointerDown: canDragDates ? moveDrag.handlePointerDown : undefined, role: "button", "aria-label": task.title, children: [jsxs(motion.div, { className: cn(theme.taskBarStyle, "group", task.completed && "opacity-60", canDragDates && !anyDragging && "cursor-grab", anyDragging && "cursor-grabbing", !canDragDates && "cursor-default", isHighlighted && "ring-2 ring-white/60", isFaded && "opacity-40", isFocused && "ring-2 ring-[var(--color-primary)] ring-offset-1"), style: {
+                    }, onClick: onTaskClick ? handleClick : undefined, onPointerDown: canDragDates ? moveDrag.handlePointerDown : undefined, onFocus: () => setFocusedTaskId(task.id), onBlur: () => setFocusedTaskId(null), onKeyDown: handleKeyDown, role: onTaskClick ? "button" : "img", tabIndex: onTaskClick ? 0 : undefined, "aria-label": task.title, children: [jsxs(motion.div, { className: cn(theme.taskBarStyle, "group", task.completed && "opacity-60", canDragDates && !anyDragging && "cursor-grab", anyDragging && "cursor-grabbing", !canDragDates && "cursor-default", isHighlighted && "ring-2 ring-white/60", isFaded && "opacity-40", isFocused && "ring-2 ring-[var(--color-primary)] ring-offset-2 ring-offset-[var(--color-background)]"), style: {
                                 width: visualWidth,
                                 height: barHeight,
                                 backgroundColor: barColor,
                                 border: "1px solid rgba(0,0,0,0.12)",
-                                borderRadius: "2rem",
+                                borderRadius: 999,
                                 transformOrigin: "left center",
                                 transition: anyDragging ? "none" : undefined,
                             }, variants: taskBarVariants, initial: "hidden", animate: "visible", whileHover: anyDragging ? undefined : { filter: "brightness(0.96)" }, children: [jsx("div", { className: "absolute inset-0 rounded-full", style: {
@@ -195,7 +219,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
                                     } }), isBehindSchedule && (jsx("div", { className: "absolute top-0 bottom-0 w-px", style: {
                                         left: `${expectedProgress}%`,
                                         borderLeft: "2px dashed rgba(255,255,255,0.5)",
-                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-xs text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-xs font-medium whitespace-nowrap pointer-events-none", style: {
+                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 z-20 w-3 cursor-ew-resize rounded-l-full opacity-0 transition-opacity hover:bg-black/15 group-hover:opacity-100", onPointerDown: resizeLeftDrag.handlePointerDown, "aria-hidden": "true" })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 z-20 w-3 cursor-ew-resize rounded-r-full opacity-0 transition-opacity hover:bg-black/15 group-hover:opacity-100", onPointerDown: resizeRightDrag.handlePointerDown, "aria-hidden": "true" })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 z-20 flex w-4 cursor-ew-resize items-center justify-center opacity-0 transition-opacity group-hover:opacity-100", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, "aria-hidden": "true", children: jsx("div", { className: "h-3.5 w-0.5 rounded-full bg-white/90 shadow" }) })), showInsideLabel && (jsxs("div", { className: "relative z-10 flex min-w-0 items-center gap-1.5 px-1.5 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, name: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-sm text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), showOutsideLabel && (jsx("span", { className: cn(theme.taskLabelOutsideStyle), style: {
                                 left: visualWidth + 6,
                                 top: barHeight / 2,
                                 transform: "translateY(-50%)",

package/dist/components/data-display/GanttChart/GanttTaskContextMenu.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { CheckCircleIcon, DocumentDuplicateIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { CheckCircle, Copy, Trash } from '@phosphor-icons/react';
 import { ContextMenu } from '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 
 const PROGRESS_STEPS = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
 const GanttTaskContextMenu = ({ task, children, }) => {
@@ -11,7 +12,7 @@ const GanttTaskContextMenu = ({ task, children, }) => {
     if (readonly || (!onTaskUpdate && !onTaskDuplicate && !onTaskDelete)) {
         return jsx(Fragment, { children: children });
     }
-    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Content, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubContent, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
+    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Body, { children: [onTaskUpdate && (jsx(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), startContent: jsx(CheckCircle, { className: "size-4" }), children: task.completed ? "Mark as incomplete" : "Mark as done" })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubBody, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsx(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), startContent: jsx(Copy, { className: "size-4" }), children: "Duplicate" })), onTaskDelete && (jsx(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", startContent: jsx(Trash, { className: "size-4" }), children: "Delete" }))] })] }));
 };
 
 export { GanttTaskContextMenu };

package/dist/components/data-display/GanttChart/GanttTimelineGrid.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { toDate, isWeekend } from '../../../utils/dateUtils.js';
 
 const GanttTimelineGrid = ({ days, height, }) => {
@@ -9,6 +10,7 @@ const GanttTimelineGrid = ({ days, height, }) => {
     const totalWidth = days.length * dayWidth;
     const showVertical = gridLines === "both" || gridLines === "vertical";
     const showHorizontal = gridLines === "both" || gridLines === "horizontal";
+    const shouldDrawVerticalLine = (day) => dayWidth >= 12 || day.getDate() === 1 || day.getDay() === 1;
     // Build a dateKey -> holiday lookup
     const holidayMap = useMemo(() => {
         const map = new Map();
@@ -23,7 +25,7 @@ const GanttTimelineGrid = ({ days, height, }) => {
                 var _a, _b;
                 const key = `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`;
                 const holiday = holidayMap.get(key);
-                return (jsx("div", { className: cn("absolute top-0 bottom-0", showVertical && theme.gridLineStyle, isWeekend(day) && theme.weekendStyle), style: { left: i * dayWidth, width: dayWidth }, children: holiday && (jsxs(Fragment, { children: [jsx("div", { className: "absolute inset-0", style: {
+                return (jsx("div", { className: cn("absolute top-0 bottom-0", showVertical && shouldDrawVerticalLine(day) && theme.gridLineStyle, isWeekend(day) && theme.weekendStyle), style: { left: i * dayWidth, width: dayWidth }, children: holiday && (jsxs(Fragment, { children: [jsx("div", { className: "absolute inset-0", style: {
                                     backgroundColor: (_a = holiday.color) !== null && _a !== void 0 ? _a : "var(--color-warning-100, rgba(245, 158, 11, 0.08))",
                                 } }), jsx("span", { className: "absolute bottom-1 left-1/2 -translate-x-1/2 text-[8px] whitespace-nowrap opacity-60", style: { color: (_b = holiday.color) !== null && _b !== void 0 ? _b : "var(--color-warning, #F59E0B)" }, children: holiday.label })] })) }, i));
             }), showHorizontal &&

package/dist/components/data-display/GanttChart/GanttTimelineHeader.js

@@ -1,39 +1,64 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { formatDayLabel } from './GanttChart.utils.js';
-import { isSameDay, isWeekend } from '../../../utils/dateUtils.js';
+import { isSameDay, isWeekend, getWeekNumber } from '../../../utils/dateUtils.js';
 
 function getDayLabel(day, zoom) {
     switch (zoom) {
         case "day":
             return formatDayLabel(day, zoom);
         case "week":
-            // Show day number only on Mondays
-            return day.getDay() === 1 ? `${day.getDate()}` : "";
+            return day.getDay() === 1 ? `W${getWeekNumber(day)}` : "";
         case "quarter":
-            // Show day number on 1st, 8th, 15th, 22nd
             return [1, 8, 15, 22].includes(day.getDate())
                 ? `${day.getDate()}`
                 : "";
         case "month":
-            // Show day number on 1st and 15th
-            return day.getDate() === 1 || day.getDate() === 15
-                ? `${day.getDate()}`
-                : "";
-        case "year":
-            // Show only on 1st of each month
             return day.getDate() === 1
                 ? day.toLocaleDateString("en-US", { month: "short" })
                 : "";
+        case "year":
+            return day.getDate() === 1 && day.getMonth() === 0
+                ? `${day.getFullYear()}`
+                : "";
+    }
+}
+function getHeaderSpans(days, monthSpans, zoom) {
+    if (zoom !== "month" && zoom !== "year") {
+        return monthSpans;
+    }
+    const spans = [];
+    let currentLabel = "";
+    let startIndex = 0;
+    days.forEach((day, index) => {
+        const label = zoom === "year"
+            ? `${day.getFullYear()}`
+            : day.toLocaleDateString("en-US", { year: "numeric" });
+        if (index === 0) {
+            currentLabel = label;
+            startIndex = 0;
+            return;
+        }
+        if (label !== currentLabel) {
+            spans.push({ label: currentLabel, startIndex, span: index - startIndex });
+            currentLabel = label;
+            startIndex = index;
+        }
+    });
+    if (days.length > 0) {
+        spans.push({ label: currentLabel, startIndex, span: days.length - startIndex });
     }
+    return spans;
 }
 const GanttTimelineHeader = ({ days, monthSpans, }) => {
     const { theme, dayWidth, zoom } = useGanttContext();
     const totalWidth = days.length * dayWidth;
+    const headerSpans = getHeaderSpans(days, monthSpans, zoom);
     const today = new Date();
     today.setHours(0, 0, 0, 0);
-    return (jsxs("div", { className: cn(theme.timelineHeaderStyle), style: { width: totalWidth }, children: [jsx("div", { className: "flex", style: { height: 28 }, children: monthSpans.map((span) => (jsx("div", { className: cn(theme.timelineMonthStyle), style: { width: span.span * dayWidth }, children: span.label }, `${span.label}-${span.startIndex}`))) }), jsx("div", { className: "flex", style: { height: 28 }, children: days.map((day, i) => {
+    return (jsxs("div", { className: cn(theme.timelineHeaderStyle), style: { width: totalWidth }, children: [jsx("div", { className: "flex", style: { height: 28 }, children: headerSpans.map((span) => (jsx("div", { className: cn(theme.timelineMonthStyle), style: { width: span.span * dayWidth }, children: span.label }, `${span.label}-${span.startIndex}`))) }), jsx("div", { className: "flex", style: { height: 28 }, children: days.map((day, i) => {
                     const isToday = isSameDay(day, today);
                     const weekend = isWeekend(day);
                     return (jsx("div", { className: cn(theme.timelineDayStyle, weekend && "bg-[var(--color-background-secondary)]/50", isToday && "font-semibold text-[var(--color-primary)]"), style: { width: dayWidth }, children: getDayLabel(day, zoom) }, i));

package/dist/components/data-display/GanttChart/GanttToolbar.js

@@ -1,9 +1,11 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { CalendarIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { Calendar, Plus } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { Segmented } from '../../core/Segmented/Segmented.js';
 import { Button } from '../../core/Button/Button.js';
+import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 
 const ZOOM_OPTIONS = [
@@ -14,7 +16,7 @@ const ZOOM_OPTIONS = [
     { value: "year", label: "Year" },
 ];
 const GanttToolbar = () => {
-    const { theme, zoom, setZoom, hideCompleted, setHideCompleted, onGroupAdd, todayOffset, dayWidth, readonly, } = useGanttContext();
+    const { theme, zoom, setZoom, hideCompleted, setHideCompleted, onGroupAdd, todayOffset, dayWidth, readonly, toolbar, } = useGanttContext();
     const handleScrollToToday = () => {
         const container = document.querySelector("[data-gantt-chart-scroll]");
         if (!container || todayOffset === null)
@@ -22,7 +24,7 @@ const GanttToolbar = () => {
         const targetScroll = todayOffset * dayWidth - container.clientWidth / 2;
         container.scrollTo({ left: targetScroll, behavior: "smooth" });
     };
-    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex items-center gap-3", children: [todayOffset !== null && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleScrollToToday, children: [jsx(CalendarIcon, { className: "size-4" }), "Today"] })), jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) }), jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" })] }), jsx("div", { className: "flex items-center gap-2", children: onGroupAdd && !readonly && (jsxs(Button, { variant: "ghost", size: "sm", onClick: onGroupAdd, children: [jsx(PlusIcon, { className: "size-3.5" }), "Add group"] })) })] }));
+    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [toolbar.today && todayOffset !== null && (jsxs(Button, { variant: "outline", color: "mono", size: "sm", onClick: handleScrollToToday, children: [jsx(Calendar, { className: "size-4" }), "Today"] })), toolbar.zoom && (jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", "aria-label": "Gantt zoom", className: "max-w-full overflow-x-auto", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) })), toolbar.hideCompleted && (jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" }))] }), jsx("div", { className: "flex items-center gap-2", children: toolbar.addGroup && onGroupAdd && !readonly && (jsxs(Button, { variant: "soft", size: "sm", onClick: onGroupAdd, children: [jsx(Plus, { className: "size-3.5" }), "Add group"] })) })] }));
 };
 
 export { GanttToolbar };

package/dist/components/data-display/GanttChart/hooks/useGanttDates.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { DAY_WIDTHS } from '../GanttChart.types.js';
 import { autoDateRange, generateDayColumns, generateMonthSpans, getDayOffset } from '../GanttChart.utils.js';

package/dist/components/data-display/GanttChart/hooks/useGanttDrag.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 // ---------------------------------------------------------------------------
@@ -34,7 +35,7 @@ function useGanttDrag({ dayWidth, mode, barWidthPx, originalProgress, disabled =
         cancelledRef.current = false;
         didDragRef.current = false;
         const onPointerMove = (ev) => {
-            var _a;
+            var _a, _b;
             if (cancelledRef.current)
                 return;
             const rawDelta = ev.clientX - startXRef.current;
@@ -52,12 +53,13 @@ function useGanttDrag({ dayWidth, mode, barWidthPx, originalProgress, disabled =
                 const newProgress = Math.round(Math.max(0, Math.min(100, originalProgress + progressDelta)));
                 setDragProgress(newProgress);
                 setDragDeltaX(rawDelta);
+                (_a = onDragStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragStateChangeRef, true, rawDelta);
             }
             else {
                 // Move/resize: snap to day grid
                 const snappedDelta = Math.round(rawDelta / dayWidth) * dayWidth;
                 setDragDeltaX(snappedDelta);
-                (_a = onDragStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragStateChangeRef, true, snappedDelta);
+                (_b = onDragStateChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onDragStateChangeRef, true, snappedDelta);
             }
         };
         const onPointerUp = () => {

package/dist/components/data-display/GanttChart/hooks/useGanttLayout.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { computeGroupSummary } from '../GanttChart.utils.js';
 

package/dist/components/data-display/GanttChart/hooks/useGanttScrollSync.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useCallback } from 'react';
 
 function useGanttScrollSync() {

package/dist/components/data-display/GanttChart/index.d.ts

@@ -1,3 +1,3 @@
 export { GanttChart } from "./GanttChart";
-export type { GanttChartProps, GanttTask, GanttGroup, GanttColumn, GanttZoom, GanttHoliday, GanttChartThemeOverrides, } from "./GanttChart.types";
+export type { GanttChartProps, GanttTask, GanttGroup, GanttColumn, GanttZoom, GanttTaskLabelMode, GanttToolbarOptions, GanttHoliday, GanttChartThemeOverrides, } from "./GanttChart.types";
 export { ganttChartTheme } from "./GanttChart.theme";

package/dist/components/data-display/KPI/KPI.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { motion } from 'motion/react';
-import { ArrowUpRightIcon, ArrowDownRightIcon } from '@heroicons/react/20/solid';
+import { ArrowUpRight, ArrowDownRight } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { kpiTheme } from './KPI.theme.js';
 
@@ -24,7 +25,13 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         const sign = trend > 0 ? "+" : "";
         return `${sign}${trend}%`;
     }, [trend, trendLabel]);
-    const trendDirection = trend === undefined ? null : trend > 0 ? "up" : trend < 0 ? "down" : "neutral";
+    const trendDirection = trend === undefined
+        ? null
+        : trend > 0
+            ? "up"
+            : trend < 0
+                ? "down"
+                : "neutral";
     // Calculate filled bar count from progress
     const filledBars = useMemo(() => {
         if (progress === undefined)
@@ -32,7 +39,10 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
     }, [progress, barCount]);
     const barSize = kpiTheme.barSizes[size];
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] }))] }), formattedTrend && trendDirection && (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] }))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label &&
+                                (typeof label === "string" ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : (label))] }), formattedTrend &&
+                        trendDirection &&
+                        (typeof formattedTrend === "string" ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && (jsx(ArrowUpRight, { className: "size-4" })), trendDirection === "down" && (jsx(ArrowDownRight, { className: "size-4" }))] })) : (formattedTrend))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
                     const isFilled = i < filledBars;
                     const fadeDistance = filledBars - i;
                     const fillOpacity = isFilled && fadeDistance <= 3
@@ -43,7 +53,8 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
                                 ease: "easeOut",
                                 delay: i * 0.03,
                             } })) }, i));
-                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-xs" : "text-sm"), children: subtitle }))] }));
+                }) })), subtitle &&
+                (typeof subtitle === "string" ? (jsx("span", { className: cn(theme.subtitleStyle), children: subtitle })) : (subtitle))] }));
 });
 KPI.displayName = "KPI";
 

package/dist/components/data-display/KPI/KPI.theme.js

@@ -1,11 +1,13 @@
+import { semanticBgColors } from '../../../utils/colorUtils.js';
+
 const kpiTheme = {
     baseStyle: "flex flex-col gap-3",
     valueSizes: {
-        sm: "text-xl font-bold text-[var(--color-text-primary)]",
-        md: "text-3xl font-bold text-[var(--color-text-primary)]",
-        lg: "text-4xl font-bold text-[var(--color-text-primary)]",
+        sm: "text-[length:var(--kpi-value-size-sm)] leading-[1.4] font-bold text-[var(--color-text-primary)]",
+        md: "text-[length:var(--kpi-value-size-md)] leading-[1.333] font-bold text-[var(--color-text-primary)]",
+        lg: "text-[length:var(--kpi-value-size-lg)] leading-[1.2] font-bold text-[var(--color-text-primary)]",
     },
-    labelStyle: "text-[var(--color-text-muted)]",
+    labelStyle: "text-[var(--color-text-primary)] font-medium",
     labelSizes: {
         sm: "text-xs",
         md: "text-sm",
@@ -20,19 +22,16 @@ const kpiTheme = {
         lg: "text-base",
     },
     barFilledColors: {
-        primary: "bg-[var(--color-primary)]",
-        success: "bg-[var(--color-success)]",
-        warning: "bg-[var(--color-warning)]",
-        danger: "bg-[var(--color-danger)]",
-        neutral: "bg-[var(--color-text-secondary)]",
+        ...semanticBgColors,
+        mono: "bg-[var(--color-text-secondary)]",
     },
-    barEmptyColor: "bg-[var(--color-background-tertiary)]",
+    barEmptyColor: "bg-[var(--color-surface-sunken)]",
     barSizes: {
         sm: { height: "h-4", width: "w-[3px]", gap: "gap-[2px]" },
         md: { height: "h-6", width: "w-[3px]", gap: "gap-[3px]" },
         lg: { height: "h-8", width: "w-1", gap: "gap-1" },
     },
-    subtitleStyle: "text-[var(--color-text-muted)]",
+    subtitleStyle: "text-[var(--color-text-secondary)] text-sm",
 };
 
 export { kpiTheme };

package/dist/components/data-display/KPI/KPI.types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, HTMLAttributes } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 export type KPISize = "sm" | "md" | "lg";
-export type KPIColor = "primary" | "success" | "warning" | "danger" | "neutral";
+export type KPIColor = SemanticColor;
 export interface KPITheme {
     baseStyle: string;
     valueSizes: Record<KPISize, string>;
@@ -37,7 +38,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Label describing the metric (e.g. "Fund raised", "Total Revenue")
      */
-    label?: string;
+    label?: ReactNode;
     /**
      * Percentage change value (e.g. 20, -5.3). Determines trend direction & color.
      */
@@ -45,7 +46,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Custom trend label override (default: auto-formats as "+20%" or "-5.3%")
      */
-    trendLabel?: string;
+    trendLabel?: ReactNode;
     /**
      * Progress value from 0-100. Controls how many bars are filled.
      */
@@ -58,7 +59,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Subtitle text below the bars (e.g. "Compared to last month")
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Icon to display before the label.
      */

package/dist/components/data-display/Metric/Metric.js

@@ -2,18 +2,18 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { metricTheme } from './Metric.theme.js';
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
+import { Badge } from '../../core/Badge/Badge.js';
+import { Card } from '../../core/Card/Card.js';
+import { TrendUp, TrendDown } from '@phosphor-icons/react';
 
 const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
-    var _a;
-    const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
-    const sizeStyles = metricTheme.sizes[size];
+    const trendIcon = trendDirection === "up" ? (jsx(TrendUp, { className: "size-3", weight: "bold" })) : (jsx(TrendDown, { className: "size-3", weight: "bold" }));
     const variantStyles = metricTheme.variants[variant];
-    const variantColorStyles = metricTheme.variantColors[variant] || "";
-    const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
-    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-sm font-medium", trendDirection === "up"
-                                                ? "text-[var(--color-success)]"
-                                                : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] }))] }), subtitle && (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle }))] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
+    // Ghost has no surface, so it renders flush (no inset) to align with
+    // surrounding content; filled keeps its size-based content padding.
+    const contentPadding = variant === "ghost" ? "p-0" : metricTheme.contentPaddingSizes[size];
+    const iconStyles = metricTheme.iconColors[color];
+    return (jsx(Card, { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, metricTheme.iconContainerVariants[variant], iconStyles, metricTheme.iconContainerSizes[size]), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [typeof label === 'string' ? (jsx("div", { className: cn(metricTheme.labelStyle, metricTheme.labelSizes[size], icon && cn("mb-0 flex items-center", metricTheme.labelIconAlignSizes[size])), children: label })) : label, jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, metricTheme.valueSizes[size]), children: value }), trendValue && (typeof trendValue === 'string' ? (jsx(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "soft", size: size === "lg" ? "md" : "sm", iconStart: trendIcon, pill: true, children: trendValue })) : trendValue)] }), subtitle && (typeof subtitle === 'string' ? (jsx("div", { className: cn(metricTheme.subtitleStyle, metricTheme.subtitleSizes[size]), children: subtitle })) : subtitle)] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
 });
 Metric.displayName = "Metric";
 

package/dist/components/data-display/Metric/Metric.theme.d.ts

@@ -1,6 +1,7 @@
 import { MetricTheme } from "./Metric.types";
 /**
- * Default theme for the Metric component
- * Uses variant-first color organization for reliable dark mode support
+ * Default theme for the Metric component.
+ * Flat, sub-component-organized structure (Tabs gold standard): one
+ * Record<Size, string> per sub-element, CSS variables for all theming.
  */
 export declare const metricTheme: MetricTheme;