@flikk/ui 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/components/core/NavItem/NavItem.theme.js

@@ -1,5 +1,5 @@
 const navItemTheme = {
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
     icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {

package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.js

@@ -15,8 +15,8 @@ const offlineIndicatorTheme = {
     offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-white",
     online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
     icon: "size-4 flex-shrink-0",
-    message: "text-xs font-medium",
-    queueCount: "text-xs opacity-80 ml-1",
+    message: "text-sm font-medium",
+    queueCount: "text-sm opacity-80 ml-1",
 };
 
 export { offlineIndicatorTheme };

package/dist/components/core/PageHeading/PageHeading.theme.js

@@ -2,7 +2,7 @@ const pageHeadingTheme = {
     baseStyle: "flex flex-col pb-6 mb-6",
     headerStyle: "flex items-center gap-4",
     titleStyle: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1",
     actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
     iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",
     separatorStyle: "border-b border-[var(--color-border)] mt-4",

package/dist/components/core/Pagination/Pagination.theme.js

@@ -26,8 +26,8 @@ const paginationTheme = {
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
     // Unified item sizes
     itemSizes: {
-        sm: "size-8 min-w-[2rem] text-sm",
-        md: "size-10 min-w-[2.5rem] text-sm",
+        sm: "size-8 min-w-[2rem] text-base",
+        md: "size-10 min-w-[2.5rem] text-base",
     },
     // Ellipsis styles
     ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",

package/dist/components/core/Pill/Pill.theme.js

@@ -27,9 +27,9 @@ const pillTheme = {
      * Size variants
      */
     sizes: {
-        sm: "text-xs px-2 py-0.5 gap-0.5",
-        md: "text-sm px-2.5 py-1 gap-1",
-        lg: "text-sm px-3 py-1 gap-1.5",
+        sm: "text-sm px-2 py-0.5 gap-0.5",
+        md: "text-base px-2.5 py-1 gap-1",
+        lg: "text-base px-3 py-1 gap-1.5",
     },
     /**
      * Icon sizes for iconStart and CheckIcon

package/dist/components/core/Popover/PopoverContent.js

@@ -61,6 +61,8 @@ const PopoverContent = React__default.forwardRef(({ children, className, animati
         placement: placement,
         offset: offset || 8,
         autoWidth: true,
+        onClose: () => { if (!preventClose)
+            onOpenChange(false); },
     });
     // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
     useClickOutside(localRef, (e) => {

package/dist/components/core/Progress/Progress.theme.js

@@ -1,3 +1,5 @@
+import { semanticBgColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme configuration for Progress component
  */
@@ -9,9 +11,9 @@ const progressTheme = {
     // Fill (progress bar) styles
     fillStyle: "h-full rounded-full",
     // Label text styles
-    labelStyle: "text-sm font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
+    labelStyle: "text-base font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
     // Inside label styles (when label is positioned inside the bar)
-    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--color-primary-contrast)] tabular-nums",
+    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-sm font-medium text-[var(--color-primary-contrast)] tabular-nums",
     // Size variants for track height
     sizes: {
         sm: "h-1.5",
@@ -20,11 +22,12 @@ const progressTheme = {
     },
     // Color variants for the fill
     colors: {
-        neutral: "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-500)]",
-        primary: "bg-[var(--color-primary)] dark:bg-[var(--color-primary-400)]",
-        success: "bg-[var(--color-success)] dark:bg-[var(--color-success-400)]",
-        warning: "bg-[var(--color-warning)] dark:bg-[var(--color-warning-400)]",
-        danger: "bg-[var(--color-danger)] dark:bg-[var(--color-danger-400)]",
+        neutral: semanticBgColors.neutral + " dark:bg-[var(--color-neutral-500)]",
+        primary: semanticBgColors.primary + " dark:bg-[var(--color-primary-400)]",
+        secondary: semanticBgColors.secondary + " dark:bg-[var(--color-secondary-400)]",
+        success: semanticBgColors.success + " dark:bg-[var(--color-success-400)]",
+        warning: semanticBgColors.warning + " dark:bg-[var(--color-warning-400)]",
+        danger: semanticBgColors.danger + " dark:bg-[var(--color-danger-400)]",
     },
     // Indeterminate animation styles
     indeterminateStyle: "animate-[progress-indeterminate_1.5s_ease-in-out_infinite]",

package/dist/components/core/Progress/Progress.types.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 export type ProgressSize = "sm" | "md" | "lg";
-export type ProgressColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type ProgressColor = SemanticColor;
 export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
 /**
  * Theme configuration for Progress component

package/dist/components/core/Segmented/Segmented.theme.js

@@ -25,9 +25,9 @@ const segmentedItemTheme = {
     baseStyle: "relative flex min-h-full min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-1.5px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
     // Size variants using CSS variables
     sizes: {
-        sm: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-sm)]",
-        md: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-md)]",
-        lg: "text-[length:var(--segmented-text-size-lg)] px-[var(--segmented-px-lg)]",
+        sm: "text-base px-[var(--segmented-px-sm)]",
+        md: "text-base px-[var(--segmented-px-md)]",
+        lg: "text-base px-[var(--segmented-px-lg)]",
     },
     // Selected state
     selectedStyle: "text-[var(--color-text-primary)] z-10",

package/dist/components/core/Sidebar/SidebarNavGroup.js

@@ -7,7 +7,7 @@ const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollaps
     const sidebarContext = useSidebarContext();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
     const showTitle = title && (!collapsed || showTitleWhenCollapsed);
-    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
+    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

package/dist/components/core/Spinner/Spinner.theme.js

@@ -1,3 +1,5 @@
+import { semanticSpinnerColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme for the Spinner component
  */
@@ -12,12 +14,8 @@ const spinnerTheme = {
     },
     // Color variants
     colors: {
-        neutral: "border-[var(--color-border)] border-t-transparent",
+        ...semanticSpinnerColors,
         dark: "border-[var(--color-background-quinary)] border-t-transparent",
-        primary: "border-[var(--color-primary)] border-t-transparent",
-        success: "border-[var(--color-success)] border-t-transparent",
-        warning: "border-[var(--color-warning)] border-t-transparent",
-        danger: "border-[var(--color-danger)] border-t-transparent",
     },
     // Animation class with drop shadow
     animation: "animate-[spin_1s_linear_infinite] rounded-full",

package/dist/components/core/Spinner/Spinner.types.d.ts

@@ -21,8 +21,9 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     theme?: SpinnerThemeOverrides;
 }
+import { SemanticColor } from "../../../utils/colorUtils";
 export type SpinnerSize = "sm" | "md" | "lg";
-export type SpinnerColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export type SpinnerColor = SemanticColor | "dark";
 export interface SpinnerThemeOverrides {
     baseStyle?: string;
     sizes?: Partial<Record<SpinnerSize, string>>;

package/dist/components/core/Tabs/Tabs.theme.js

@@ -10,8 +10,8 @@ const tabsTheme = {
     triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
     // TabsTrigger size variants using CSS variables where applicable
     triggerSizes: {
-        sm: "px-2 py-1.5 text-sm gap-1",
-        md: "px-2 py-2 text-sm gap-1",
+        sm: "px-2 py-1.5 text-base gap-1",
+        md: "px-2 py-2 text-base gap-1",
     },
     // TabsContent styles with proper CSS variables
     contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",

package/dist/components/core/Tag/Tag.theme.js

@@ -3,8 +3,8 @@ const tagTheme = {
         "bg-white dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)] " +
         "text-[var(--color-text-primary)]",
     sizes: {
-        sm: "text-xs px-2.5 py-0.5",
-        md: "text-sm px-2.5 py-0.5",
+        sm: "text-sm px-2.5 py-0.5",
+        md: "text-base px-2.5 py-0.5",
     },
     disabledStyle: "opacity-50 cursor-not-allowed",
     removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +

package/dist/components/core/Toast/Toast.theme.js

@@ -8,10 +8,10 @@ const toastTheme = {
     },
     iconStyle: "flex-shrink-0 size-5 mt-0.5",
     iconCenteredStyle: "flex-shrink-0 size-5",
-    titleStyle: "font-semibold text-sm",
-    textOnlyStyle: "text-sm",
-    subtitleStyle: "text-sm mt-0.5 opacity-60",
-    actionStyle: "text-xs font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer " +
+    titleStyle: "font-semibold text-base",
+    textOnlyStyle: "text-base",
+    subtitleStyle: "text-base mt-0.5 opacity-60",
+    actionStyle: "text-sm font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer " +
         "dark:bg-white/10 dark:border-white/20 dark:hover:bg-white/20 dark:text-white",
     closeButtonStyle: "absolute top-2 right-2 flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
     closeButtonCenteredStyle: "flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",

package/dist/components/core/Tooltip/Tooltip.theme.js

@@ -1,6 +1,6 @@
 const tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
-    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
+    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
         "dark:bg-neutral-800/80 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
 };
 

package/dist/components/core/Tree/Tree.theme.js

@@ -1,7 +1,7 @@
 const treeTheme = {
     baseStyle: 'flex flex-col w-full',
     nodeStyle: 'flex items-center py-1 pr-1 rounded-[calc(var(--radius-base)*0.75)] hover:bg-[var(--color-background-secondary)] cursor-pointer transition-colors select-none gap-2',
-    labelStyle: 'flex-1 text-base text-[var(--color-text-primary)] truncate',
+    labelStyle: 'flex-1 text-lg text-[var(--color-text-primary)] truncate',
     iconStyle: 'flex-shrink-0 text-[var(--color-text-muted)]',
     expandIconStyle: 'flex-shrink-0 mr-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer size-4 flex items-center justify-center',
     indentSize: '1rem',

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

@@ -1,8 +1,8 @@
 const descriptionListTheme = {
     baseStyle: "divide-y divide-[var(--color-border)] min-w-0",
     itemStyle: "px-4 py-3",
-    termStyle: "text-sm/6 font-medium text-[var(--color-text-primary)]",
-    detailStyle: "mt-1 text-sm/6 text-[var(--color-text-secondary)]",
+    termStyle: "text-base/6 font-medium text-[var(--color-text-primary)]",
+    detailStyle: "mt-1 text-base/6 text-[var(--color-text-secondary)]",
 };
 
 export { descriptionListTheme };

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

@@ -54,7 +54,7 @@ const FeedItem = React__default.forwardRef(({ variant = "default", title, timest
             case "icon":
                 return (jsxs("div", { className: cn(theme.contentStyle, "py-1.5"), children: [jsxs("p", { className: theme.actionTextStyle, children: [title && jsxs("span", { className: theme.titleStyle, children: [title, " "] }), children] }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
             case "avatar":
-                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-sm"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
+                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
             case "comment-input": {
                 const handleSubmit = () => {
                     const trimmed = inputValue.trim();

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

@@ -12,8 +12,8 @@ const feedTheme = {
     // Content
     contentStyle: "min-w-0 flex-1",
     titleStyle: "font-medium text-[var(--color-text-primary)]",
-    actionTextStyle: "text-sm text-[var(--color-text-secondary)]",
-    timestampStyle: "mt-1 text-xs text-[var(--color-text-muted)]/80 whitespace-nowrap font-medium",
+    actionTextStyle: "text-base text-[var(--color-text-secondary)]",
+    timestampStyle: "mt-1 text-sm text-[var(--color-text-muted)]/80 whitespace-nowrap font-medium",
     // Comment input
     commentInputWrapperStyle: "min-w-0 flex-1 space-y-2",
     commentInputFooterStyle: "flex justify-end",

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

@@ -1,5 +1,5 @@
 const ganttChartTheme = {
-    baseStyle: "flex flex-col w-full overflow-hidden text-sm",
+    baseStyle: "flex flex-col w-full overflow-hidden text-base",
     toolbarStyle: "flex flex-wrap items-center justify-between gap-3 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
     tablePanelStyle: "hidden sm:flex flex-col shrink-0 overflow-hidden",
     chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",
@@ -9,7 +9,7 @@ const ganttChartTheme = {
     tableTaskRowStyle: "flex items-center hover:bg-[var(--color-background-secondary)] transition-colors",
     tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
     timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)]",
-    timelineMonthStyle: "text-xs font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
+    timelineMonthStyle: "text-sm font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
     timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center",
     gridLineStyle: "border-r border-[var(--color-border)]/30",
     weekendStyle: "bg-[var(--color-background-secondary)]/50",

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

@@ -64,7 +64,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: jsxs("div", { className: "flex flex-col items-center gap-2 text-[var(--color-text-muted)]", children: [jsx(CalendarDaysIcon, { className: "size-10 opacity-40" }), jsx("div", { className: "text-sm font-medium", children: "No tasks to display" }), jsx("div", { className: "text-xs opacity-70", children: "Add tasks to see them on the timeline" })] }) }));
+        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: jsxs("div", { className: "flex flex-col items-center gap-2 text-[var(--color-text-muted)]", children: [jsx(CalendarDaysIcon, { className: "size-10 opacity-40" }), jsx("div", { className: "text-base font-medium", 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 }), jsx(GanttDependencyArrows, {}), rows.map((row, i) => {
                                 const top = i * rowHeight;

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

@@ -13,7 +13,7 @@ const GanttMilestone = React__default.memo(({ task, group, top, }) => {
     const left = offset * dayWidth + dayWidth / 2;
     const size = 14;
     const barColor = (_a = task.color) !== null && _a !== void 0 ? _a : group.color;
-    const tooltipContent = (jsxs("div", { className: "text-xs space-y-1", children: [jsx("div", { className: "font-semibold", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 text-[var(--color-text-placeholder)]", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsx("div", { children: formatDateShort(task.endDate) })] }));
+    const tooltipContent = (jsxs("div", { className: "text-sm space-y-1", children: [jsx("div", { className: "font-semibold", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 text-[var(--color-text-placeholder)]", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsx("div", { children: formatDateShort(task.endDate) })] }));
     const handleClick = (e) => {
         onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task, e);
     };
@@ -33,7 +33,7 @@ const GanttMilestone = React__default.memo(({ task, group, top, }) => {
                             border: "2px solid var(--color-background, white)",
                             transform: "rotate(45deg)",
                             boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
-                        } }), jsx("span", { className: "absolute text-xs font-medium whitespace-nowrap pointer-events-none", style: {
+                        } }), jsx("span", { className: "absolute text-sm font-medium whitespace-nowrap pointer-events-none", style: {
                             left: size + 4,
                             top: size / 2,
                             transform: "translateY(-50%)",

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

@@ -14,7 +14,7 @@ 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-xs 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-background-tertiary)] 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(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-background-tertiary)] 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" }) }))] }));

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

@@ -162,7 +162,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task, e);
     };
     // ----- Tooltip -----
-    const tooltipContent = (jsxs("div", { className: "text-xs space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-sm", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
+    const tooltipContent = (jsxs("div", { className: "text-sm space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-base", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
                                 width: `${task.progress}%`,
                                 backgroundColor: barColor,
                             } }) })] }), task.assignee && (jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" }), jsx("span", { children: task.assignee.name })] })), isBehindSchedule && (jsxs("div", { className: "text-[var(--color-warning)] text-[10px]", children: ["Behind schedule (expected ", expectedProgress, "%)"] }))] }));
@@ -195,7 +195,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
                                     } }), isBehindSchedule && (jsx("div", { className: "absolute top-0 bottom-0 w-px", style: {
                                         left: `${expectedProgress}%`,
                                         borderLeft: "2px dashed rgba(255,255,255,0.5)",
-                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-xs text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-xs font-medium whitespace-nowrap pointer-events-none", style: {
+                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-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: {
                                 left: visualWidth + 6,
                                 top: barHeight / 2,
                                 transform: "translateY(-50%)",

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

@@ -43,7 +43,7 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
                                 ease: "easeOut",
                                 delay: i * 0.03,
                             } })) }, i));
-                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-xs" : "text-sm"), children: subtitle }))] }));
+                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle }))] }));
 });
 KPI.displayName = "KPI";
 

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

@@ -1,29 +1,28 @@
+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)]",

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

@@ -1,6 +1,7 @@
 import { ReactNode, HTMLAttributes } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 export type KPISize = "sm" | "md" | "lg";
-export type KPIColor = "primary" | "success" | "warning" | "danger" | "neutral";
+export type KPIColor = SemanticColor;
 export interface KPITheme {
     baseStyle: string;
     valueSizes: Record<KPISize, string>;

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

@@ -11,7 +11,7 @@ const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue,
     const variantStyles = metricTheme.variants[variant];
     const variantColorStyles = metricTheme.variantColors[variant] || "";
     const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
-    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-sm font-medium", trendDirection === "up"
+    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 }))] }) }));
 });

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

@@ -22,6 +22,8 @@ const metricTheme = {
                 "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)] " +
@@ -33,6 +35,8 @@ const metricTheme = {
             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,25 +51,25 @@ const metricTheme = {
             container: "", // Padding moved to content section
             contentPadding: "p-3",
             iconContainer: "size-10",
-            label: "text-xs",
-            value: "text-xl",
-            subtitle: "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",
-            subtitle: "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",
-            subtitle: "text-sm mt-1",
+            subtitle: "text-base mt-1",
         },
     },
     // Common element styles

package/dist/components/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> {

package/dist/components/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: {
@@ -23,7 +23,7 @@ const tableTheme = {
     // Header styles
     // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
     headerStyle: "text-left font-semibold sticky top-0 border-b first:pl-4 last:pr-4 " +
-        "text-[var(--color-text-secondary)]/80 text-sm border-[var(--color-border)] ",
+        "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)] " +

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

@@ -17,7 +17,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", { onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-left transition-all duration-300", "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
+            return (jsxs("button", { onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-base font-medium text-left transition-all duration-300", "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
                     ? "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)] focus:bg-[var(--color-danger-50)]"
                     : "text-[var(--color-text-primary)]", isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent"), 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

@@ -16,7 +16,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.Content, { 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-xs 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-background-tertiary)] 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-background-tertiary)] 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: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Content, { 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-background-tertiary)] 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-background-tertiary)] 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" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

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

@@ -23,7 +23,7 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
     if (isBetweenOperator(filter.operator)) {
         const betweenValue = Array.isArray(filter.value) ? filter.value : ["", ""];
         const inputType = filterType === "date" ? "date" : "number";
-        return (jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [jsx(Input, { value: (_a = betweenValue[0]) !== null && _a !== void 0 ? _a : "", onChange: (e) => onValueChange([e.target.value, betweenValue[1]]), placeholder: "Min", size: "sm", type: inputType, className: "flex-1 min-w-0" }), jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "\u2013" }), jsx(Input, { value: (_b = betweenValue[1]) !== null && _b !== void 0 ? _b : "", onChange: (e) => onValueChange([betweenValue[0], e.target.value]), placeholder: "Max", size: "sm", type: inputType, className: "flex-1 min-w-0" })] }));
+        return (jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [jsx(Input, { value: (_a = betweenValue[0]) !== null && _a !== void 0 ? _a : "", onChange: (e) => onValueChange([e.target.value, betweenValue[1]]), placeholder: "Min", size: "sm", type: inputType, className: "flex-1 min-w-0" }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "\u2013" }), jsx(Input, { value: (_b = betweenValue[1]) !== null && _b !== void 0 ? _b : "", onChange: (e) => onValueChange([betweenValue[0], e.target.value]), placeholder: "Max", size: "sm", type: inputType, className: "flex-1 min-w-0" })] }));
     }
     // Select filter type
     if (filterType === "select" && (column === null || column === void 0 ? void 0 : column.filterOptions)) {
@@ -206,9 +206,9 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return true;
         return f.value != null && f.value !== "";
     }).length;
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-xs font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-xs uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "and"
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
-                                                : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "or"
+                                                : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "or"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
                                                 : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("or"), children: "OR" })] }))] }), jsx("div", { className: "-m-1 p-1 space-y-2 max-h-[300px] overflow-y-auto", children: activeFilters.map((filter) => {
                                 const selectedColumn = getSelectedColumn(filter.columnId);