@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/core/shared/interaction.animations.js

@@ -0,0 +1,59 @@
+"use client";
+/**
+ * Shared press/hover interaction physics for clickable core components
+ * (Button, Pill, Badge dismiss). One source of truth so every pressable
+ * surface in the library reacts with the same speed and character.
+ *
+ * Press-down is a fast tween — feedback must land within ~1 frame of the
+ * pointer, so no spring ramp-up on the way in. Release is a stiff spring
+ * with a hint of overshoot for tactile character on the way out.
+ *
+ * NOTE: pair with CSS transitions that do NOT include `transform`
+ * (no `transition-all`) — motion drives transform directly every frame,
+ * and a CSS transition on transform re-interpolates those per-frame
+ * values and makes the press feel mushy.
+ */
+const PRESS_TRANSITION = {
+    duration: 0.08,
+    ease: "easeOut",
+};
+const RELEASE_TRANSITION = {
+    type: "spring",
+    stiffness: 600,
+    damping: 25,
+    mass: 0.6,
+};
+const HOVER_TRANSITION = {
+    duration: 0.15,
+    ease: "easeOut",
+};
+/**
+ * Build press variants for a pressable component.
+ * Use with `animate="rest"` (so release uses RELEASE_TRANSITION) and
+ * `whileTap="press"`; pass `hoverScale` and `whileHover="hover"` for
+ * components that should also lift on hover.
+ */
+const createPressVariants = (pressScale = 0.97, hoverScale) => ({
+    rest: { scale: 1, transition: RELEASE_TRANSITION },
+    ...(hoverScale !== undefined
+        ? { hover: { scale: hoverScale, transition: HOVER_TRANSITION } }
+        : {}),
+    press: { scale: pressScale, transition: PRESS_TRANSITION },
+});
+/**
+ * Selection ripple for choice controls (Checkbox, Radio): a soft primary
+ * pulse that expands out of the control when it becomes checked.
+ *
+ * Spread onto a `motion.div` rendered inside `<AnimatePresence initial={false}>`
+ * gated on the checked state — `initial={false}` is required so a control
+ * that MOUNTS already checked (controlled/defaultChecked) doesn't fire the
+ * burst; only user-visible state changes do.
+ */
+const CHECK_RIPPLE_MOTION = {
+    initial: { scale: 0.5, opacity: 0.8 },
+    animate: { scale: 2.0, opacity: 0 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.35, ease: "easeOut" },
+};
+
+export { CHECK_RIPPLE_MOTION, HOVER_TRANSITION, PRESS_TRANSITION, RELEASE_TRANSITION, createPressVariants };

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

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { createContext, useMemo, useState, useCallback, useContext } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
-import { ChevronUpDownIcon } from '@heroicons/react/16/solid';
+import { CaretUpDown } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { feedTheme } from './Feed.theme.js';
 import { collapseLayerExitTiming, collapseLayerEnterTiming, EASE, expandLayerEnterTiming, expandLayerExitTiming, STAGGER_BASE_DELAY, STAGGER_IN, STAGGER_OUT } from './Feed.animations.js';
@@ -106,7 +106,7 @@ const FeedCollapse = ({ label = "Show {count} more", icon, defaultExpanded = fal
         }
         return child;
     });
-    const collapseIcon = icon !== null && icon !== void 0 ? icon : (jsx(ChevronUpDownIcon, { className: "size-4 text-[var(--color-primary)]" }));
+    const collapseIcon = icon !== null && icon !== void 0 ? icon : (jsx(CaretUpDown, { className: "size-4 text-[var(--color-primary)]" }));
     /* ---- Reduced motion: instant toggle, no staged animations ---- */
     if (shouldReduceMotion) {
         return (jsxs("li", { className: cn(theme.collapseStyle, className), children: [expanded && (jsx("span", { "aria-hidden": "true", className: "absolute left-5 -translate-x-1/2 top-0 h-full w-0.5 bg-[var(--color-border)]/60" })), !expanded ? (jsxs("div", { className: "relative", style: { height: COLLAPSED_HEIGHT }, children: [jsx("svg", { "aria-hidden": "true", className: theme.collapseSvgStyle, style: { left: "calc(1.25rem - 1px)" }, width: SVG_WIDTH, height: COLLAPSED_HEIGHT, fill: "none", children: jsx("path", { d: CURVE_PATH, stroke: "var(--color-border)", strokeOpacity: "0.6", strokeWidth: STROKE_WIDTH }) }), jsxs("button", { type: "button", className: "absolute top-1/2 -translate-y-1/2 flex items-center gap-2.5 cursor-pointer bg-transparent border-none p-0", style: {

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

@@ -1,18 +1,18 @@
 const ganttChartTheme = {
-    baseStyle: "flex flex-col w-full overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] text-sm shadow-sm",
-    toolbarStyle: "flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]/80",
+    baseStyle: "flex flex-col w-full overflow-hidden rounded-[var(--gantt-chart-radius)] border border-[var(--color-border)] bg-[var(--color-background)] text-sm shadow-sm",
+    toolbarStyle: "flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-surface)]/80",
     tablePanelStyle: "flex flex-col shrink-0 overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-background)]",
     chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",
-    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]/80",
+    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-surface)]/80",
     tableHeaderCellStyle: "px-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-muted)] truncate",
-    tableGroupRowStyle: "flex items-center cursor-pointer select-none border-b border-[var(--color-border)]/30 bg-[var(--color-background-secondary)]/35 hover:bg-[var(--color-background-secondary)] transition-colors",
-    tableTaskRowStyle: "flex items-center border-b border-[var(--color-border)]/20 hover:bg-[var(--color-background-secondary)]/70 transition-colors",
+    tableGroupRowStyle: "flex items-center cursor-pointer select-none border-b border-[var(--color-border)]/30 bg-[var(--color-surface)]/35 hover:bg-[var(--color-surface)] transition-colors",
+    tableTaskRowStyle: "flex items-center border-b border-[var(--color-border)]/20 hover:bg-[var(--color-surface)]/70 transition-colors",
     tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
     timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)] shadow-[0_1px_0_var(--color-border)]",
-    timelineMonthStyle: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center bg-[var(--color-background-secondary)]/45",
+    timelineMonthStyle: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center bg-[var(--color-surface)]/45",
     timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center border-r border-[var(--color-border)]/20",
     gridLineStyle: "border-r border-[var(--color-border)]/20",
-    weekendStyle: "bg-[var(--color-background-secondary)]/35",
+    weekendStyle: "bg-[var(--color-surface)]/35",
     todayMarkerStyle: "bg-[var(--color-primary)] w-0.5",
     todayColumnStyle: "bg-[var(--color-primary)]/10",
     taskBarStyle: "absolute cursor-pointer flex items-center overflow-hidden shadow-sm ring-1 ring-black/10",

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useEffect, useCallback } from 'react';
-import { CalendarDaysIcon } from '@heroicons/react/24/outline';
+import { CalendarDots } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { GanttTimelineHeader } from './GanttTimelineHeader.js';
@@ -65,7 +65,7 @@ const GanttChartPanel = forwardRef(({ onScroll, days, monthSpans }, ref) => {
         }
     }, [rows, focusedTaskId, setFocusedTaskId, onTaskClick]);
     if (tasks.length === 0) {
-        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: emptyState !== null && emptyState !== void 0 ? emptyState : (jsxs("div", { className: cn(theme.emptyStateStyle), children: [jsx(CalendarDaysIcon, { className: "size-10 opacity-40" }), jsx("div", { className: "text-base font-medium text-[var(--color-text-secondary)]", children: "No tasks to display" }), jsx("div", { className: "text-sm opacity-70", children: "Add tasks to see them on the timeline" })] })) }));
+        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: emptyState !== null && emptyState !== void 0 ? emptyState : (jsxs("div", { className: cn(theme.emptyStateStyle), children: [jsx(CalendarDots, { className: "size-10 opacity-40" }), jsx("div", { className: "text-base font-medium text-[var(--color-text-secondary)]", children: "No tasks to display" }), jsx("div", { className: "text-sm opacity-70", children: "Add tasks to see them on the timeline" })] })) }));
     }
     return (jsx("div", { className: cn(theme.chartPanelStyle), children: jsx("div", { ref: ref, className: "overflow-auto flex-1 min-h-0 focus:outline-none", onScroll: onScroll, onKeyDown: handleKeyDown, tabIndex: 0, role: "grid", "aria-label": "Gantt chart timeline", "data-gantt-chart-scroll": true, children: jsxs("div", { style: { width: totalWidth }, children: [jsx("div", { className: "sticky top-0 z-10", children: jsx(GanttTimelineHeader, { days: days, monthSpans: monthSpans }) }), jsxs("div", { className: "relative", style: { height: bodyHeight }, children: [jsx(GanttTimelineGrid, { days: days, height: bodyHeight }), showDependencies && jsx(GanttDependencyArrows, {}), rows.map((row, i) => {
                                 const top = i * rowHeight;

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

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { motion } from 'motion/react';
-import { ChevronRightIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { CaretRight, Plus } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChartContext.js';
 import { chevronVariants } from './GanttChart.animations.js';
@@ -15,10 +15,10 @@ const GanttTableGroupRow = React__default.memo(({ row, }) => {
                 e.preventDefault();
                 toggleGroup(row.group.id);
             }
-        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-surface-hover)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
+        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(CaretRight, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-surface-hover)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
                     e.stopPropagation();
                     onTaskAdd(row.group.id);
-                }, children: jsx(PlusIcon, { className: "size-4" }) }))] }));
+                }, children: jsx(Plus, { className: "size-4" }) }))] }));
 });
 
 export { GanttTableGroupRow };

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

@@ -5,7 +5,7 @@ import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.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 { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
 import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';
 import { taskBarVariants } from './GanttChart.animations.js';

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

@@ -1,6 +1,6 @@
 "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 './GanttChartContext.js';
@@ -12,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.Body, { 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.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 && (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/GanttTimelineHeader.js

@@ -61,7 +61,7 @@ const GanttTimelineHeader = ({ days, monthSpans, }) => {
     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));
+                    return (jsx("div", { className: cn(theme.timelineDayStyle, weekend && "bg-[var(--color-surface)]/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,11 +1,10 @@
 "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 './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 = [
@@ -24,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 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"] })) })] }));
+    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/KPI/KPI.js

@@ -1,9 +1,9 @@
 "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 { Progress } from '../../core/Progress/Progress.js';
 import { kpiTheme } from './KPI.theme.js';
 
 const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, subtitle, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
@@ -32,28 +32,19 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
             : trend < 0
                 ? "down"
                 : "neutral";
-    // Calculate filled bar count from progress
-    const filledBars = useMemo(() => {
-        if (progress === undefined)
-            return 0;
-        return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
-    }, [progress, barCount]);
-    const barSize = kpiTheme.barSizes[size];
+    // KPI owns its own bar geometry; hand it to Progress as segment sizing.
+    // (`width` predates the flex-1 cells and is unused.)
+    const segmentSizes = useMemo(() => Object.fromEntries(Object.entries(kpiTheme.barSizes).map(([key, { height, gap }]) => [
+        key,
+        { height, gap },
+    ])), []);
     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(ArrowUpRightIcon, { className: "size-4" })), trendDirection === "down" && (jsx(ArrowDownRightIcon, { 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
-                        ? 0.4 + (fadeDistance / 3) * 0.6
-                        : 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 &&
+                        (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(Progress, { value: progress, segments: barCount, segmentFade: true, size: size, className: theme.barFilledColors[color], "aria-label": `Progress: ${progress}%`, theme: {
+                    segmentEmptyStyle: theme.barEmptyColor,
+                    segmentSizes,
+                } })), 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

@@ -3,9 +3,9 @@ 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-2xl font-bold text-[var(--color-text-primary)]",
-        lg: "text-3xl font-bold text-[var(--color-text-primary)]",
+        sm: "text-[length:var(--kpi-value-size-sm)]/[var(--kpi-value-line-height-sm)] font-bold text-[var(--color-text-primary)]",
+        md: "text-[length:var(--kpi-value-size-md)]/[var(--kpi-value-line-height-md)] font-bold text-[var(--color-text-primary)]",
+        lg: "text-[length:var(--kpi-value-size-lg)]/[var(--kpi-value-line-height-lg)] font-bold text-[var(--color-text-primary)]",
     },
     labelStyle: "text-[var(--color-text-primary)] font-medium",
     labelSizes: {
@@ -23,7 +23,11 @@ const kpiTheme = {
     },
     barFilledColors: {
         ...semanticBgColors,
-        neutral: "bg-[var(--color-text-secondary)]",
+        // The gray role, not a text token (§8: never paint a fill with --color-text-*).
+        // These bars carry no text, so they take the role's own weight rather than a
+        // -contrast pairing; --color-mono is the mono token that flips per mode
+        // (900 light / 200 dark), which a fixed ramp rung would not.
+        mono: "bg-[var(--color-mono)]",
     },
     barEmptyColor: "bg-[var(--color-surface-sunken)]",
     barSizes: {

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

@@ -4,10 +4,10 @@ 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';
+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) => {
-    const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3", strokeWidth: 2 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3", strokeWidth: 2 }));
+    const trendIcon = trendDirection === "up" ? (jsx(TrendUp, { className: "size-3", weight: "bold" })) : (jsx(TrendDown, { className: "size-3", weight: "bold" }));
     const variantStyles = metricTheme.variants[variant];
     // Ghost has no surface, so it renders flush (no inset) to align with
     // surrounding content; filled keeps its size-based content padding.

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

@@ -4,16 +4,22 @@
  * Record<Size, string> per sub-element, CSS variables for all theming.
  */
 const metricTheme = {
-    // 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",
+    // Base container (shared across all variants). Overflow + resting surface
+    // come from the Card shell Metric renders into (see Metric.tsx), but Metric
+    // is a compact stat tile, not a freeform Card — it overrides the shell's
+    // --card-radius with its own --metric-radius (same "rounded-[...]" utility
+    // group, so this wins via source order) rather than inheriting Card's
+    // radius verbatim.
+    baseStyle: "transition-colors duration-[var(--motion-duration-base)] rounded-[var(--metric-radius)]",
     // Visual style variants — container surface + structure.
     // `filled` adds nothing: it inherits the Card shell's --color-surface-raised.
     // `ghost` clears that fill (`!` beats Card's bg utility regardless of
-    // source order) so it sits transparent.
+    // source order) and cancels the Card shell's elevation shadow (`shadow-none`
+    // is registered in the same tailwind-merge `shadow` group as `shadow-surface-*`
+    // in cn.ts, so it reliably overrides it) so it sits fully flush/flat.
     variants: {
         filled: "",
-        ghost: "!bg-transparent overflow-visible",
+        ghost: "!bg-transparent overflow-visible shadow-none",
     },
     // Icon chip base per variant — classes shared across all colors of that variant
     iconContainerVariants: {
@@ -22,14 +28,18 @@ const metricTheme = {
     },
     // Icon tint per semantic color — shared by every variant (the one thing color drives)
     iconColors: {
-        neutral: "text-[var(--color-text-primary)]",
+        mono: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)] dark:text-[var(--color-primary-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)]",
     },
     // Size variants — one Record<Size, string> per sub-element
-    contentPaddingSizes: { sm: "p-3", md: "p-4", lg: "p-5" },
+    contentPaddingSizes: {
+        sm: "p-[var(--metric-content-p-sm)]",
+        md: "p-[var(--metric-content-p-md)]",
+        lg: "p-[var(--metric-content-p-lg)]",
+    },
     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;
@@ -40,7 +50,14 @@ const metricTheme = {
         md: "text-sm font-medium tracking-tight",
         lg: "text-sm font-medium tracking-tight",
     },
-    valueSizes: { sm: "text-xl", md: "text-3xl", lg: "text-3xl" },
+    // text-[length:...] (not bare text-[var(...)]) is required — Tailwind's
+    // arbitrary text-[...] syntax is ambiguous between color/font-size and a
+    // bare var() resolves to color, silently no-oping the size change.
+    valueSizes: {
+        sm: "text-[length:var(--metric-value-size-sm)]/[var(--metric-value-line-height-sm)]",
+        md: "text-[length:var(--metric-value-size-md)]/[var(--metric-value-line-height-md)]",
+        lg: "text-[length:var(--metric-value-size-lg)]/[var(--metric-value-line-height-lg)]",
+    },
     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-secondary)] mb-2",

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

@@ -12,7 +12,7 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Label describing the metric
      */
-    label: React.ReactNode;
+    label?: React.ReactNode;
     /**
      * Optional subtitle or secondary text
      */

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

@@ -11,19 +11,19 @@ const tableTheme = {
     // border, or by the pagination footer's `border-t` when pagination is shown.
     // `bordered` is a full grid and keeps its closing edge.
     variants: {
-        default: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+        default: "border-[var(--color-border)] dark:border-[var(--color-mono-700)] " +
             "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        striped: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
-            "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-800)] " +
+        striped: "border-[var(--color-border)] dark:border-[var(--color-mono-700)] " +
+            "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-mono-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-mono-800)] " +
             "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+        bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-mono-700)] " +
             "[&_td]:border-b [&_td]:border-r [&_th]:border-b [&_th]:border-r " +
             "[&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] " +
-            "dark:[&_td]:border-[var(--color-neutral-700)] dark:[&_th]:border-[var(--color-neutral-700)] " +
+            "dark:[&_td]:border-[var(--color-mono-700)] dark:[&_th]:border-[var(--color-mono-700)] " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        compact: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+        compact: "border-[var(--color-border)] dark:border-[var(--color-mono-700)] " +
             "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
     },
@@ -45,7 +45,7 @@ const tableTheme = {
             // <tr> (inset shadow) so a shifted cell can't drag a notch into it.
             "[&>tbody>tr>td]:border-b-0 " +
             "[&>tbody>tr]:shadow-[inset_0_-1px_0_0_var(--color-border)] [&>tbody>tr:last-child]:shadow-none " +
-            "[&>tbody>tr>td]:transition-transform [&>tbody>tr>td]:duration-300 " +
+            "[&>tbody>tr>td]:transition-transform [&>tbody>tr>td]:duration-[var(--motion-duration-slow)] " +
             // first cell eases right (its left padding); last cell eases left only when
             // right-aligned (matches `pr-4` — invisible on left-aligned content).
             "[&>tbody>tr:hover>td:first-child]:translate-x-2 " +
@@ -60,8 +60,8 @@ const tableTheme = {
         "text-[var(--color-text-primary)] ",
     // Row styles — hover and layout only (borders moved to cells)
     // Light: neutral-50 hover | Dark: neutral-800 hover
-    rowStyle: "group transition-all duration-300 relative " +
-        "hover:bg-[var(--color-neutral-50)] " +
+    rowStyle: "group transition-all duration-[var(--motion-duration-slow)] relative " +
+        "hover:bg-[var(--color-mono-50)] " +
         "dark:hover:bg-[var(--color-surface-hover)]",
     // Selected row styles — background is applied per-cell (in TableCell) so that
     // sticky/frozen columns repaint correctly. The row only carries the left indicator.
@@ -72,8 +72,8 @@ const tableTheme = {
     frozenColumnStyle: "sticky left-0 z-10",
     lastFrozenColumnStyle: "sticky right-0 z-10",
     frozenHeaderStyle: "sticky top-0 z-20 " +
-        "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
-        "dark:shadow-[var(--color-neutral-900)]/50",
+        "shadow-lg shadow-[var(--color-mono-200)]/50 " +
+        "dark:shadow-[var(--color-mono-900)]/50",
     // Utility controls - Column manager button
     // Surface-like control; surface/border/hover tokens flip automatically between light/dark
     columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-sm font-medium " +

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
+import { DotsThree } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
@@ -10,7 +11,6 @@ import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
 import { Button } from '../../core/Button/Button.js';
-import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
 
 /**
  * TableActions component with smart display logic
@@ -50,7 +50,7 @@ const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
         });
     };
     const renderOverflowMenu = () => {
-        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "neutral", variant: "ghost", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(EllipsisHorizontalIcon, { className: "size-4" }) }) }), jsx(Dropdown.Menu, { "aria-label": "Row actions", children: sortedActions.map((action) => {
+        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "mono", variant: "ghost", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(DotsThree, { className: "size-4" }) }) }), jsx(Dropdown.Menu, { "aria-label": "Row actions", children: sortedActions.map((action) => {
                         const Icon = action.icon;
                         return (jsx(Dropdown.Item, { itemKey: action.id, isDanger: action.variant === "danger", startContent: jsx(Icon, { className: "size-4" }), children: action.label }, action.id));
                     }) })] }));

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

@@ -19,7 +19,7 @@ const TableActionsMenu = ({ actions, row, onClose, className, }) => {
             var _a;
             const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
             const Icon = action.icon;
-            return (jsxs(Button, { variant: "ghost", color: action.variant === 'danger' ? 'danger' : 'neutral', size: "sm", onClick: () => handleActionClick(action), disabled: isDisabled, className: "w-full justify-start gap-3", role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
+            return (jsxs(Button, { variant: "ghost", color: action.variant === 'danger' ? 'danger' : 'mono', size: "sm", onClick: () => handleActionClick(action), disabled: isDisabled, className: "w-full justify-start gap-3", role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
         }) }));
 };
 

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

@@ -3,9 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
 import '../../core/Popover/PopoverBody.js';
-import { Cog6ToothIcon } from '@heroicons/react/24/outline';
+import { Gear } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
-import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
 
@@ -19,7 +18,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         const displayName = typeof column.header === 'string' ? column.header : column.id;
         return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
     };
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "mono", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Gear, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-surface)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-surface)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "mono", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 import { tableTheme } from './Table.theme.js';
 

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

@@ -4,7 +4,7 @@ import React__default, { useContext } from 'react';
 import { TableContext } from './TableContext.js';
 import { cn } from '../../../utils/cn.js';
 import { alignmentClasses } from './Table.utils.js';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/16/solid';
+import { CaretUp, CaretDown } from '@phosphor-icons/react';
 
 /**
  * Declarative Table Header component
@@ -58,8 +58,8 @@ const HeaderCellComponent = ({ children, isFrozen = false, isLastFrozen = false,
                 'justify-end': align === 'right',
                 'justify-center': align === 'center',
             }), children: [children, isSortable && sortDirection && (jsx("span", { className: "ml-1", children: sortDirection === 'asc'
-                        ? jsx(ChevronUpIcon, { className: "size-3.5" })
-                        : jsx(ChevronDownIcon, { className: "size-3.5" }) }))] }) }));
+                        ? jsx(CaretUp, { className: "size-3.5" })
+                        : jsx(CaretDown, { className: "size-3.5" }) }))] }) }));
 };
 HeaderCellComponent.displayName = 'Table.HeaderCell';
 const HeaderCell = React__default.memo(HeaderCellComponent);