@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CalendarIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.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 = [
+    { value: "day", label: "Day" },
+    { value: "week", label: "Week" },
+    { value: "quarter", label: "Quarter" },
+    { value: "month", label: "Month" },
+    { value: "year", label: "Year" },
+];
+const GanttToolbar = () => {
+    const { theme, zoom, setZoom, hideCompleted, setHideCompleted, onGroupAdd, todayOffset, dayWidth, readonly, } = useGanttContext();
+    const handleScrollToToday = () => {
+        const container = document.querySelector("[data-gantt-chart-scroll]");
+        if (!container || todayOffset === null)
+            return;
+        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"] })) })] }));
+};
+
+export { GanttToolbar };

package/dist/components/data-display/GanttChart/hooks/useGanttDates.d.ts

@@ -0,0 +1,12 @@
+import type { GanttTask, GanttZoom } from "../GanttChart.types";
+import type { MonthSpan } from "../GanttChart.utils";
+export interface UseGanttDatesResult {
+    rangeStart: Date;
+    rangeEnd: Date;
+    days: Date[];
+    monthSpans: MonthSpan[];
+    totalDays: number;
+    dayWidth: number;
+    todayOffset: number | null;
+}
+export declare function useGanttDates(tasks: GanttTask[], zoom: GanttZoom, startDate?: Date | string, endDate?: Date | string): UseGanttDatesResult;

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

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { DAY_WIDTHS } from '../GanttChart.types.js';
+import { autoDateRange, generateDayColumns, generateMonthSpans, getDayOffset } from '../GanttChart.utils.js';
+import { toDate, isSameDay } from '../../../../utils/dateUtils.js';
+
+function useGanttDates(tasks, zoom, startDate, endDate) {
+    return useMemo(() => {
+        const auto = autoDateRange(tasks);
+        const rangeStart = startDate ? toDate(startDate) : auto.start;
+        const rangeEnd = endDate ? toDate(endDate) : auto.end;
+        const days = generateDayColumns(rangeStart, rangeEnd);
+        const monthSpans = generateMonthSpans(days);
+        const totalDays = days.length;
+        const dayWidth = DAY_WIDTHS[zoom];
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const todayInRange = days.some((d) => isSameDay(d, today));
+        const todayOffset = todayInRange
+            ? getDayOffset(today, rangeStart)
+            : null;
+        return { rangeStart, rangeEnd, days, monthSpans, totalDays, dayWidth, todayOffset };
+    }, [tasks, zoom, startDate, endDate]);
+}
+
+export { useGanttDates };

package/dist/components/data-display/GanttChart/hooks/useGanttDrag.d.ts

@@ -0,0 +1,25 @@
+import type React from "react";
+export type DragMode = "move" | "resize-left" | "resize-right" | "progress";
+export interface DragResult {
+    mode: DragMode;
+    daysDelta: number;
+    newProgress: number;
+}
+interface UseGanttDragOptions {
+    dayWidth: number;
+    mode: DragMode;
+    barWidthPx: number;
+    originalProgress: number;
+    disabled?: boolean;
+    onDragEnd: (result: DragResult) => void;
+    onDragStateChange?: (isDragging: boolean, deltaX: number) => void;
+}
+interface UseGanttDragReturn {
+    isDragging: boolean;
+    didDrag: boolean;
+    dragDeltaX: number;
+    dragProgress: number;
+    handlePointerDown: (e: React.PointerEvent) => void;
+}
+export declare function useGanttDrag({ dayWidth, mode, barWidthPx, originalProgress, disabled, onDragEnd, onDragStateChange, }: UseGanttDragOptions): UseGanttDragReturn;
+export {};

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

@@ -0,0 +1,144 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const DRAG_THRESHOLD = 3; // px dead zone before drag activates
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+function useGanttDrag({ dayWidth, mode, barWidthPx, originalProgress, disabled = false, onDragEnd, onDragStateChange, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragDeltaX, setDragDeltaX] = useState(0);
+    const [dragProgress, setDragProgress] = useState(originalProgress);
+    const didDragRef = useRef(false);
+    const startXRef = useRef(0);
+    const activatedRef = useRef(false);
+    const cancelledRef = useRef(false);
+    const cleanupRef = useRef(null);
+    // Reset didDrag after a tick so click handler can read it
+    const [didDrag, setDidDrag] = useState(false);
+    useEffect(() => {
+        if (didDrag) {
+            const timer = setTimeout(() => setDidDrag(false), 0);
+            return () => clearTimeout(timer);
+        }
+    }, [didDrag]);
+    const handlePointerDown = useCallback((e) => {
+        if (disabled || e.button !== 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        startXRef.current = e.clientX;
+        activatedRef.current = false;
+        cancelledRef.current = false;
+        didDragRef.current = false;
+        const onPointerMove = (ev) => {
+            var _a;
+            if (cancelledRef.current)
+                return;
+            const rawDelta = ev.clientX - startXRef.current;
+            // Dead zone: don't activate drag until threshold crossed
+            if (!activatedRef.current) {
+                if (Math.abs(rawDelta) < DRAG_THRESHOLD)
+                    return;
+                activatedRef.current = true;
+                didDragRef.current = true;
+                setIsDragging(true);
+            }
+            if (mode === "progress") {
+                // Progress: map delta to 0-100 range
+                const progressDelta = barWidthPx > 0 ? (rawDelta / barWidthPx) * 100 : 0;
+                const newProgress = Math.round(Math.max(0, Math.min(100, originalProgress + progressDelta)));
+                setDragProgress(newProgress);
+                setDragDeltaX(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);
+            }
+        };
+        const onPointerUp = () => {
+            var _a, _b;
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+            document.removeEventListener("keydown", onKeyDown);
+            cleanupRef.current = null;
+            if (cancelledRef.current) {
+                setIsDragging(false);
+                setDragDeltaX(0);
+                setDragProgress(originalProgress);
+                (_a = onDragStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragStateChangeRef, false, 0);
+                return;
+            }
+            if (activatedRef.current) {
+                setDidDrag(true);
+                const finalDelta = dragDeltaXRef.current;
+                const daysDelta = Math.round(finalDelta / dayWidth);
+                if (mode === "progress") {
+                    onDragEnd({
+                        mode,
+                        daysDelta: 0,
+                        newProgress: dragProgressRef.current,
+                    });
+                }
+                else if (daysDelta !== 0) {
+                    onDragEnd({ mode, daysDelta, newProgress: originalProgress });
+                }
+            }
+            (_b = onDragStateChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onDragStateChangeRef, false, 0);
+            setIsDragging(false);
+            setDragDeltaX(0);
+            setDragProgress(originalProgress);
+        };
+        const onKeyDown = (ev) => {
+            var _a;
+            if (ev.key === "Escape") {
+                cancelledRef.current = true;
+                setIsDragging(false);
+                setDragDeltaX(0);
+                setDragProgress(originalProgress);
+                (_a = onDragStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragStateChangeRef, false, 0);
+                document.removeEventListener("pointermove", onPointerMove);
+                document.removeEventListener("pointerup", onPointerUp);
+                document.removeEventListener("keydown", onKeyDown);
+                cleanupRef.current = null;
+            }
+        };
+        document.addEventListener("pointermove", onPointerMove);
+        document.addEventListener("pointerup", onPointerUp);
+        document.addEventListener("keydown", onKeyDown);
+        // Store cleanup so useEffect can remove listeners if component unmounts mid-drag
+        cleanupRef.current = () => {
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+            document.removeEventListener("keydown", onKeyDown);
+            cleanupRef.current = null;
+        };
+    }, [disabled, dayWidth, mode, barWidthPx, originalProgress, onDragEnd]);
+    // Remove dangling listeners on unmount
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+        };
+    }, []);
+    // Keep refs in sync with state/callbacks so closures read current values
+    const dragDeltaXRef = useRef(dragDeltaX);
+    dragDeltaXRef.current = dragDeltaX;
+    const dragProgressRef = useRef(dragProgress);
+    dragProgressRef.current = dragProgress;
+    const onDragStateChangeRef = useRef(onDragStateChange);
+    onDragStateChangeRef.current = onDragStateChange;
+    return {
+        isDragging,
+        didDrag,
+        dragDeltaX,
+        dragProgress,
+        handlePointerDown,
+    };
+}
+
+export { useGanttDrag };

package/dist/components/data-display/GanttChart/hooks/useGanttLayout.d.ts

@@ -0,0 +1,2 @@
+import type { GanttTask, GanttGroup, GanttRow } from "../GanttChart.types";
+export declare function useGanttLayout(groups: GanttGroup[], tasks: GanttTask[], collapsedGroups: string[], hideCompleted: boolean): GanttRow[];

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

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { computeGroupSummary } from '../GanttChart.utils.js';
+
+function useGanttLayout(groups, tasks, collapsedGroups, hideCompleted) {
+    return useMemo(() => {
+        const sorted = [...groups].sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); });
+        const rows = [];
+        for (const group of sorted) {
+            const groupTasks = tasks.filter((t) => t.groupId === group.id);
+            const visibleTasks = hideCompleted
+                ? groupTasks.filter((t) => !t.completed)
+                : groupTasks;
+            const summary = computeGroupSummary(group, groupTasks);
+            rows.push({
+                type: "group",
+                group,
+                taskCount: visibleTasks.length,
+                completedCount: summary.completedCount,
+                earliestStart: summary.earliestStart,
+                latestEnd: summary.latestEnd,
+            });
+            const isCollapsed = collapsedGroups.includes(group.id);
+            if (!isCollapsed) {
+                for (const task of visibleTasks) {
+                    rows.push({ type: "task", task, group });
+                }
+            }
+        }
+        return rows;
+    }, [groups, tasks, collapsedGroups, hideCompleted]);
+}
+
+export { useGanttLayout };

package/dist/components/data-display/GanttChart/hooks/useGanttScrollSync.d.ts

@@ -0,0 +1,6 @@
+export declare function useGanttScrollSync(): {
+    tableRef: import("react").RefObject<HTMLDivElement | null>;
+    chartRef: import("react").RefObject<HTMLDivElement | null>;
+    handleTableScroll: () => void;
+    handleChartScroll: () => void;
+};

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

@@ -0,0 +1,32 @@
+import { useRef, useCallback } from 'react';
+
+function useGanttScrollSync() {
+    const tableRef = useRef(null);
+    const chartRef = useRef(null);
+    const isSyncing = useRef(false);
+    const handleTableScroll = useCallback(() => {
+        if (isSyncing.current)
+            return;
+        isSyncing.current = true;
+        requestAnimationFrame(() => {
+            if (tableRef.current && chartRef.current) {
+                chartRef.current.scrollTop = tableRef.current.scrollTop;
+            }
+            isSyncing.current = false;
+        });
+    }, []);
+    const handleChartScroll = useCallback(() => {
+        if (isSyncing.current)
+            return;
+        isSyncing.current = true;
+        requestAnimationFrame(() => {
+            if (chartRef.current && tableRef.current) {
+                tableRef.current.scrollTop = chartRef.current.scrollTop;
+            }
+            isSyncing.current = false;
+        });
+    }, []);
+    return { tableRef, chartRef, handleTableScroll, handleChartScroll };
+}
+
+export { useGanttScrollSync };

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

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

package/dist/components/{core → data-display}/KPI/KPI.js

@@ -1,10 +1,11 @@
 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 { cn } from '../../../utils/cn.js';
 import { kpiTheme } from './KPI.theme.js';
 
-const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, description, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
+const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, subtitle, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
     const theme = useMemo(() => ({
         ...kpiTheme,
         ...customTheme,
@@ -33,15 +34,16 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
     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) => {
                     const isFilled = i < filledBars;
-                    // Fade the last 2-3 filled bars for a smooth transition
                     const fadeDistance = filledBars - i;
-                    const opacity = isFilled && fadeDistance <= 3
+                    const fillOpacity = isFilled && fadeDistance <= 3
                         ? 0.4 + (fadeDistance / 3) * 0.6
-                        : undefined;
-                    return (jsx("div", { className: cn("rounded-sm flex-1", barSize.height, isFilled
-                            ? theme.barFilledColors[color]
-                            : theme.barEmptyColor), style: isFilled && opacity !== undefined ? { opacity } : undefined }, i));
-                }) })), description && (jsx("span", { className: cn(theme.descriptionStyle, size === "sm" ? "text-xs" : "text-sm"), children: description }))] }));
+                        : 1;
+                    return (jsx("div", { className: cn("relative rounded-sm flex-1", barSize.height, theme.barEmptyColor), children: isFilled && (jsx(motion.div, { className: cn("absolute inset-0 rounded-sm", theme.barFilledColors[color]), initial: { opacity: 0 }, animate: { opacity: fillOpacity }, transition: {
+                                duration: 0.25,
+                                ease: "easeOut",
+                                delay: i * 0.03,
+                            } })) }, i));
+                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle }))] }));
 });
 KPI.displayName = "KPI";
 

package/dist/components/{core → data-display}/KPI/KPI.theme.js

@@ -1,29 +1,29 @@
+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)]",
+        sm: "text-2xl 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)]",
     },
     labelStyle: "text-[var(--color-text-muted)]",
     labelSizes: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
     },
     trendPositive: "text-[var(--color-success)]",
     trendNegative: "text-[var(--color-danger)]",
     trendNeutral: "text-[var(--color-text-muted)]",
     trendSizes: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
     },
     barFilledColors: {
-        primary: "bg-[var(--color-primary)]",
-        success: "bg-[var(--color-success)]",
-        warning: "bg-[var(--color-warning)]",
-        danger: "bg-[var(--color-danger)]",
+        ...semanticBgColors,
+        neutral: "bg-[var(--color-text-secondary)]",
     },
     barEmptyColor: "bg-[var(--color-background-tertiary)]",
     barSizes: {
@@ -31,7 +31,7 @@ const kpiTheme = {
         md: { height: "h-6", width: "w-[3px]", gap: "gap-[3px]" },
         lg: { height: "h-8", width: "w-1", gap: "gap-1" },
     },
-    descriptionStyle: "text-[var(--color-text-muted)]",
+    subtitleStyle: "text-[var(--color-text-muted)]",
 };
 
 export { kpiTheme };

package/dist/components/{core → 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";
+export type KPIColor = SemanticColor;
 export interface KPITheme {
     baseStyle: string;
     valueSizes: Record<KPISize, string>;
@@ -17,7 +18,7 @@ export interface KPITheme {
         width: string;
         gap: string;
     }>;
-    descriptionStyle: string;
+    subtitleStyle: string;
 }
 export interface KPIThemeOverrides {
     baseStyle?: string;
@@ -27,7 +28,7 @@ export interface KPIThemeOverrides {
     trendNegative?: string;
     barFilledColors?: Partial<Record<KPIColor, string>>;
     barEmptyColor?: string;
-    descriptionStyle?: string;
+    subtitleStyle?: string;
 }
 export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /**
@@ -56,9 +57,9 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
      */
     barCount?: number;
     /**
-     * Description text below the bars (e.g. "Compared to last month")
+     * Subtitle text below the bars (e.g. "Compared to last month")
      */
-    description?: string;
+    subtitle?: string;
     /**
      * Icon to display before the label.
      */

package/dist/components/{core → data-display}/KPI/index.d.ts

@@ -1,2 +1,3 @@
 export { KPI } from "./KPI";
+export { kpiTheme } from "./KPI.theme";
 export type { KPIProps, KPISize, KPIColor, KPITheme, KPIThemeOverrides, } from "./KPI.types";

package/dist/components/{core → data-display}/Metric/Metric.js

@@ -2,21 +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 '../Badge/Badge.js';
 import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
 
-const Metric = React__default.forwardRef(({ value, label, description, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
+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 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: "flex items-center gap-1", children: [jsx("div", { className: cn("rounded-full p-1 flex flex-shrink-0 w-fit h-fit", trendDirection === "up"
-                                                        ? "bg-[var(--color-success-100)] text-[var(--color-success)] dark:bg-[var(--color-success-100)]/20"
-                                                        : "bg-[var(--color-danger-100)] text-[var(--color-danger)] dark:bg-[var(--color-danger-100)]/20"), children: trendIcon }), jsx(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "ghost", className: cn("bg-transparent p-0 font-semibold gap-1 ring-0", trendDirection === "up"
-                                                        ? "text-[var(--color-success)]"
-                                                        : "text-[var(--color-danger)]"), children: trendValue })] }))] }), description && (jsx("div", { className: cn(metricTheme.descriptionStyle, sizeStyles.description), children: description }))] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
+    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-base 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 }))] }) }));
 });
 Metric.displayName = "Metric";
 

package/dist/components/{core → data-display}/Metric/Metric.theme.js

@@ -19,20 +19,24 @@ const metricTheme = {
     iconContainerVariantColors: {
         filled: {
             neutral: "bg-white text-[var(--color-text-primary)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "dark:bg-[var(--color-background-secondary)]",
             primary: "bg-white text-[var(--color-primary)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "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)] dark:border-0",
+                "dark:bg-[var(--color-background-secondary)]",
             warning: "bg-white text-[var(--color-warning)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "dark:bg-[var(--color-background-secondary)]",
             danger: "bg-white text-[var(--color-danger)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "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)] " +
@@ -47,31 +51,31 @@ const metricTheme = {
             container: "", // Padding moved to content section
             contentPadding: "p-3",
             iconContainer: "size-10",
-            label: "text-xs",
-            value: "text-xl",
-            description: "text-xs mt-1",
+            label: "text-sm",
+            value: "text-2xl",
+            subtitle: "text-sm mt-1",
         },
         md: {
             container: "", // Padding moved to content section
             contentPadding: "p-4",
             iconContainer: "size-14",
-            label: "text-sm",
+            label: "text-base",
             value: "text-2xl",
-            description: "text-xs mt-0.5",
+            subtitle: "text-sm mt-0.5",
         },
         lg: {
             container: "", // Padding moved to content section
             contentPadding: "p-5",
             iconContainer: "size-16",
-            label: "text-base",
+            label: "text-lg",
             value: "text-3xl",
-            description: "text-sm mt-1",
+            subtitle: "text-base mt-1",
         },
     },
     // Common element styles
     labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-1",
     valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
-    descriptionStyle: "text-[var(--color-text-secondary)]/80",
+    subtitleStyle: "text-[var(--color-text-secondary)]/80",
     iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5",
 };
 

package/dist/components/{core → data-display}/Metric/Metric.types.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { SemanticColor } from '../../../utils/colorUtils';
 export type MetricSize = 'sm' | 'md' | 'lg';
-export type MetricColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+export type MetricColor = SemanticColor;
 export type MetricVariant = 'filled' | 'glass';
 export type TrendDirection = 'up' | 'down';
 export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -13,9 +14,9 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     label: string;
     /**
-     * Optional description or secondary text
+     * Optional subtitle or secondary text
      */
-    description?: string;
+    subtitle?: string;
     /**
      * Trend value to display (e.g., "+10.34%", "-5.2%")
      * Also acts as boolean - if provided, trend badge is shown
@@ -65,11 +66,11 @@ export interface MetricTheme {
         iconContainer: string;
         label: string;
         value: string;
-        description: string;
+        subtitle: string;
     }>;
     labelStyle: string;
     valueStyle: string;
-    descriptionStyle: string;
+    subtitleStyle: string;
     iconContainerStyle: string;
 }
 export interface MetricThemeOverrides {
@@ -83,10 +84,10 @@ export interface MetricThemeOverrides {
         iconContainer: string;
         label: string;
         value: string;
-        description: string;
+        subtitle: string;
     }>>>;
     labelStyle?: string;
     valueStyle?: string;
-    descriptionStyle?: string;
+    subtitleStyle?: string;
     iconContainerStyle?: string;
 }

package/dist/components/{core → data-display}/Table/Table.theme.js

@@ -3,7 +3,7 @@ const tableTheme = {
     // Uses border-separate so sticky cells keep their borders (border-collapse
     // paints borders on the table grid, which sticky cells float above)
     // Light: white background | Dark: neutral-900 background
-    baseStyle: "w-full border-separate border-spacing-0 text-sm " + "",
+    baseStyle: "w-full border-separate border-spacing-0 text-base " + "",
     // Variant styles
     // Each variant gets dark mode border colors and alternate row colors
     variants: {
@@ -22,8 +22,8 @@ const tableTheme = {
     },
     // Header styles
     // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
-    headerStyle: "text-left font-medium sticky top-0 border-b first:pl-4 last:pr-4 " +
-        "text-[var(--color-text-primary)] border-[var(--color-border)] ",
+    headerStyle: "text-left font-semibold sticky top-0 border-b first:pl-4 last:pr-4 " +
+        "text-[var(--color-text-secondary)]/80 text-base border-[var(--color-border)] ",
     // Cell styles — borders on cells (not rows) so sticky columns keep them
     // Light: primary text | Dark: neutral-300 text
     cellStyle: "border-b border-b-[var(--color-border)] first:pl-4 last:pr-4 " +
@@ -46,7 +46,7 @@ const tableTheme = {
         "dark:shadow-[var(--color-neutral-900)]/50",
     // Utility controls - Column manager button
     // Light: white bg with light border | Dark: neutral-800 bg with neutral-600 border
-    columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-sm font-medium " +
+    columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-base font-medium " +
         "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 " +
         "dark:focus:ring-offset-[var(--color-neutral-900)] " +
         "bg-white border border-[var(--color-neutral-300)] text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] " +