@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

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

@@ -13,8 +13,8 @@ import { getDaysBetween, addDays, toDate } from '../../../utils/dateUtils.js';
 
 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 +26,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 +52,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,10 +73,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) => {
@@ -89,20 +94,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",
@@ -110,6 +115,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 ||
@@ -143,6 +154,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;
@@ -163,6 +178,12 @@ 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-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}%`,
@@ -183,12 +204,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: {
@@ -197,7 +218,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, name: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-sm text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-sm 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/GanttTimelineGrid.js

@@ -9,6 +9,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 +24,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

@@ -2,38 +2,62 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChart.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

@@ -15,7 +15,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)
@@ -23,7 +23,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: "soft", 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: "neutral", size: "sm", onClick: handleScrollToToday, children: [jsx(CalendarIcon, { 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(PlusIcon, { className: "size-3.5" }), "Add group"] })) })] }));
 };
 
 export { GanttToolbar };

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

@@ -34,7 +34,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 +52,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/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/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 { Badge } from '../../core/Badge/Badge.js';
+import { Card } from '../../core/Card/Card.js';
 import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
 
 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(ArrowTrendingUpIcon, { className: "size-3", strokeWidth: 2 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3", strokeWidth: 2 }));
     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: [typeof label === 'string' ? (jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label })) : label, jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (typeof trendValue === 'string' ? (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-base font-medium", trendDirection === "up"
-                                                ? "text-[var(--color-success)]"
-                                                : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] })) : trendValue)] }), subtitle && (typeof subtitle === 'string' ? (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle })) : 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/glass keep their size-based content padding.
+    const contentPadding = variant === "ghost" ? "p-0" : metricTheme.contentPaddingSizes[size];
+    const iconStyles = cn(metricTheme.iconColors[color], variant === "glass" && metricTheme.iconGlassShadows[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;

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

@@ -1,82 +1,64 @@
 /**
- * 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.
  */
 const metricTheme = {
-    // Base container styles (shared across all variants)
-    baseStyle: "rounded-[var(--metric-radius)] transition-colors duration-200 overflow-hidden",
-    // Visual style variants (structure only, no colors)
+    // Base container (shared across all variants). Radius + overflow + resting
+    // surface come from the Card shell Metric renders into (see Metric.tsx).
+    baseStyle: "transition-colors duration-200",
+    // Visual style variants — container surface + structure.
+    // `filled` adds nothing: it inherits the Card shell's --color-surface-raised.
+    // `ghost`/`glass` clear that fill (`!` beats Card's bg utility regardless of
+    // source order) so they sit transparent / let the glass gradient read.
     variants: {
+        filled: "",
+        ghost: "!bg-transparent overflow-visible",
+        glass: "glass-effect !bg-transparent",
+    },
+    // Icon chip base per variant — classes shared across all colors of that variant
+    iconContainerVariants: {
         filled: "border border-[var(--color-border)]",
-        glass: "glass-effect",
+        ghost: "border border-[var(--color-border)] bg-[var(--color-surface-raised)]/50 shadow-real-lg",
+        glass: "glass-effect-2 !ring-0",
     },
-    // Container background styles per variant (color only applies to icon)
-    variantColors: {
-        filled: "bg-white dark:bg-[var(--color-background-secondary)]",
-        glass: "",
+    // Icon tint per semantic color — shared by every variant (the one thing color drives)
+    iconColors: {
+        neutral: "text-[var(--color-text-primary)]",
+        primary: "text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
+        secondary: "text-[var(--color-secondary)] dark:text-[var(--color-secondary-400)]",
+        success: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
+        warning: "text-[var(--color-warning)] dark:text-[var(--color-warning-400)]",
+        danger: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
     },
-    // Icon container styles organized PER VARIANT (color applies to icon)
-    iconContainerVariantColors: {
-        filled: {
-            neutral: "bg-white text-[var(--color-text-primary)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)]",
-            primary: "bg-white text-[var(--color-primary)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)]",
-            secondary: "bg-white text-[var(--color-secondary)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)]",
-            success: "bg-white text-[var(--color-success)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)]",
-            warning: "bg-white text-[var(--color-warning)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)]",
-            danger: "bg-white text-[var(--color-danger)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)]",
-        },
-        glass: {
-            neutral: "glass-effect-1 !ring-0 text-[var(--color-text-primary)]",
-            primary: "glass-effect-2 !ring-0 shadow-lg shadow-blue-500/10 text-[var(--color-primary)] " +
-                "dark:text-[var(--color-primary-400)]",
-            secondary: "glass-effect-2 !ring-0 shadow-lg shadow-gray-500/10 text-[var(--color-secondary)] " +
-                "dark:text-[var(--color-secondary-400)]",
-            success: "glass-effect-2 !ring-0 shadow-lg shadow-green-500/10 text-[var(--color-success)] " +
-                "dark:text-[var(--color-success-400)]",
-            warning: "glass-effect-2 !ring-0 shadow-lg shadow-yellow-500/10 text-[var(--color-warning)] " +
-                "dark:text-[var(--color-warning-400)]",
-            danger: "glass-effect-2 !ring-0 shadow-lg shadow-rose-500/10 text-[var(--color-danger)] " +
-                "dark:text-[var(--color-danger-400)]",
-        },
+    // Glass-only colored glow per semantic color (neutral stays shadowless)
+    iconGlassShadows: {
+        neutral: "",
+        primary: "shadow-lg shadow-blue-500/10",
+        secondary: "shadow-lg shadow-gray-500/10",
+        success: "shadow-lg shadow-green-500/10",
+        warning: "shadow-lg shadow-yellow-500/10",
+        danger: "shadow-lg shadow-rose-500/10",
     },
-    // Size variants for container and sub-elements
-    sizes: {
-        sm: {
-            container: "", // Padding moved to content section
-            contentPadding: "p-3",
-            iconContainer: "size-10",
-            label: "text-xs",
-            value: "text-xl",
-            subtitle: "text-xs mt-1",
-        },
-        md: {
-            container: "", // Padding moved to content section
-            contentPadding: "p-4",
-            iconContainer: "size-14",
-            label: "text-sm",
-            value: "text-2xl",
-            subtitle: "text-xs mt-0.5",
-        },
-        lg: {
-            container: "", // Padding moved to content section
-            contentPadding: "p-5",
-            iconContainer: "size-16",
-            label: "text-base",
-            value: "text-3xl",
-            subtitle: "text-sm mt-1",
-        },
+    // Size variants — one Record<Size, string> per sub-element
+    contentPaddingSizes: { sm: "p-3", md: "p-4", lg: "p-5" },
+    iconContainerSizes: { sm: "size-8", md: "size-10", lg: "size-12" },
+    // Heights mirror iconContainerSizes — with an icon, the label box spans the
+    // chip's height and centers its text against it (mb-3 spacing is dropped;
+    // the centered box provides the gap to the value instead)
+    labelIconAlignSizes: { sm: "h-8", md: "h-10", lg: "h-10" },
+    labelSizes: {
+        sm: "text-xs font-medium tracking-tight",
+        md: "text-sm font-medium tracking-tight",
+        lg: "text-sm font-medium tracking-tight",
     },
+    valueSizes: { sm: "text-xl", md: "text-3xl", lg: "text-3xl" },
+    subtitleSizes: { sm: "text-xs mt-1", md: "text-xs mt-0.5", lg: "text-sm mt-1" },
     // Common element styles
-    labelStyle: "font-semibold text-[var(--color-text-primary)] mb-1",
-    valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
+    labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-2",
+    valueStyle: "font-semibold text-[var(--color-text-primary)] tracking-tighter",
     subtitleStyle: "text-[var(--color-text-secondary)]/80",
-    iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5",
+    iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-2.5",
 };
 
 export { metricTheme };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { SemanticColor } from '../../../utils/colorUtils';
 export type MetricSize = 'sm' | 'md' | 'lg';
 export type MetricColor = SemanticColor;
-export type MetricVariant = 'filled' | 'glass';
+export type MetricVariant = 'filled' | 'ghost' | 'glass';
 export type TrendDirection = 'up' | 'down';
 export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -58,16 +58,15 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface MetricTheme {
     baseStyle: string;
     variants: Record<MetricVariant, string>;
-    variantColors: Record<MetricVariant, string>;
-    iconContainerVariantColors: Record<MetricVariant, Record<MetricColor, string>>;
-    sizes: Record<MetricSize, {
-        container: string;
-        contentPadding: string;
-        iconContainer: string;
-        label: string;
-        value: string;
-        subtitle: string;
-    }>;
+    iconContainerVariants: Record<MetricVariant, string>;
+    iconColors: Record<MetricColor, string>;
+    iconGlassShadows: Record<MetricColor, string>;
+    contentPaddingSizes: Record<MetricSize, string>;
+    iconContainerSizes: Record<MetricSize, string>;
+    labelSizes: Record<MetricSize, string>;
+    labelIconAlignSizes: Record<MetricSize, string>;
+    valueSizes: Record<MetricSize, string>;
+    subtitleSizes: Record<MetricSize, string>;
     labelStyle: string;
     valueStyle: string;
     subtitleStyle: string;
@@ -76,16 +75,15 @@ export interface MetricTheme {
 export interface MetricThemeOverrides {
     baseStyle?: string;
     variants?: Partial<Record<MetricVariant, string>>;
-    variantColors?: Partial<Record<MetricVariant, string>>;
-    iconContainerVariantColors?: Partial<Record<MetricVariant, Partial<Record<MetricColor, string>>>>;
-    sizes?: Partial<Record<MetricSize, Partial<{
-        container: string;
-        contentPadding: string;
-        iconContainer: string;
-        label: string;
-        value: string;
-        subtitle: string;
-    }>>>;
+    iconContainerVariants?: Partial<Record<MetricVariant, string>>;
+    iconColors?: Partial<Record<MetricColor, string>>;
+    iconGlassShadows?: Partial<Record<MetricColor, string>>;
+    contentPaddingSizes?: Partial<Record<MetricSize, string>>;
+    iconContainerSizes?: Partial<Record<MetricSize, string>>;
+    labelSizes?: Partial<Record<MetricSize, string>>;
+    labelIconAlignSizes?: Partial<Record<MetricSize, string>>;
+    valueSizes?: Partial<Record<MetricSize, string>>;
+    subtitleSizes?: Partial<Record<MetricSize, string>>;
     labelStyle?: string;
     valueStyle?: string;
     subtitleStyle?: string;

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

@@ -38,7 +38,7 @@ const TableContext = createContext({
  */
 function TableComponent(props) {
     var _a, _b;
-    const { data, columns, rowKey, variant = "default", padding = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
+    const { data, columns, rowKey, onRowClick, variant = "default", padding = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
     // Column management hook
     const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
         columns,
@@ -149,7 +149,7 @@ function TableComponent(props) {
         selectedRows,
         onSelectionChange,
     ]);
-    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("table", { className: cn(baseClasses, variantClasses, paddingClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] }))] }) })] }) }));
+    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("table", { className: cn(baseClasses, variantClasses, paddingClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, onRowClick: onRowClick, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] }))] }) })] }) }));
 }
 TableComponent.displayName = "Table";
 const Table = TableComponent;