@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
+import { motion } from 'motion/react';
 import { ArrowUpRightIcon, ArrowDownRightIcon } from '@heroicons/react/20/solid';
 import { cn } from '../../../utils/cn.js';
 import { kpiTheme } from './KPI.theme.js';
 
-const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, description, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
+const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, subtitle, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
     const theme = useMemo(() => ({
         ...kpiTheme,
         ...customTheme,
@@ -31,17 +32,18 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
     }, [progress, barCount]);
     const barSize = kpiTheme.barSizes[size];
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] }))] }), formattedTrend && trendDirection && (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] }))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (typeof label === 'string' ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : label)] }), formattedTrend && trendDirection && (typeof formattedTrend === 'string' ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(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;
-                    // Fade the last 2-3 filled bars for a smooth transition
                     const fadeDistance = filledBars - i;
-                    const opacity = isFilled && fadeDistance <= 3
+                    const fillOpacity = isFilled && fadeDistance <= 3
                         ? 0.4 + (fadeDistance / 3) * 0.6
-                        : undefined;
-                    return (jsx("div", { className: cn("rounded-sm flex-1", barSize.height, isFilled
-                            ? theme.barFilledColors[color]
-                            : theme.barEmptyColor), style: isFilled && opacity !== undefined ? { opacity } : undefined }, i));
-                }) })), description && (jsx("span", { className: cn(theme.descriptionStyle, size === "sm" ? "text-xs" : "text-sm"), children: description }))] }));
+                        : 1;
+                    return (jsx("div", { className: cn("relative rounded-sm flex-1", barSize.height, theme.barEmptyColor), children: isFilled && (jsx(motion.div, { className: cn("absolute inset-0 rounded-sm", theme.barFilledColors[color]), initial: { opacity: 0 }, animate: { opacity: fillOpacity }, transition: {
+                                duration: 0.25,
+                                ease: "easeOut",
+                                delay: i * 0.03,
+                            } })) }, i));
+                }) })), subtitle && (typeof subtitle === 'string' ? (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle })) : subtitle)] }));
 });
 KPI.displayName = "KPI";
 

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

@@ -1,29 +1,29 @@
+import { semanticBgColors } from '../../../utils/colorUtils.js';
+
 const kpiTheme = {
     baseStyle: "flex flex-col gap-3",
     valueSizes: {
-        sm: "text-xl font-bold text-[var(--color-text-primary)]",
+        sm: "text-2xl font-bold text-[var(--color-text-primary)]",
         md: "text-3xl font-bold text-[var(--color-text-primary)]",
         lg: "text-4xl font-bold text-[var(--color-text-primary)]",
     },
     labelStyle: "text-[var(--color-text-muted)]",
     labelSizes: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
     },
     trendPositive: "text-[var(--color-success)]",
     trendNegative: "text-[var(--color-danger)]",
     trendNeutral: "text-[var(--color-text-muted)]",
     trendSizes: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
     },
     barFilledColors: {
-        primary: "bg-[var(--color-primary)]",
-        success: "bg-[var(--color-success)]",
-        warning: "bg-[var(--color-warning)]",
-        danger: "bg-[var(--color-danger)]",
+        ...semanticBgColors,
+        neutral: "bg-[var(--color-text-secondary)]",
     },
     barEmptyColor: "bg-[var(--color-background-tertiary)]",
     barSizes: {
@@ -31,7 +31,7 @@ const kpiTheme = {
         md: { height: "h-6", width: "w-[3px]", gap: "gap-[3px]" },
         lg: { height: "h-8", width: "w-1", gap: "gap-1" },
     },
-    descriptionStyle: "text-[var(--color-text-muted)]",
+    subtitleStyle: "text-[var(--color-text-muted)]",
 };
 
 export { kpiTheme };

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { metricTheme } from './Metric.theme.js';
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
+
+const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
+    var _a;
+    const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
+    const sizeStyles = metricTheme.sizes[size];
+    const variantStyles = metricTheme.variants[variant];
+    const variantColorStyles = metricTheme.variantColors[variant] || "";
+    const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
+    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [typeof label === 'string' ? (jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label })) : label, jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (typeof trendValue === 'string' ? (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-base font-medium", trendDirection === "up"
+                                                ? "text-[var(--color-success)]"
+                                                : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] })) : trendValue)] }), subtitle && (typeof subtitle === 'string' ? (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle })) : subtitle)] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
+});
+Metric.displayName = "Metric";
+
+export { Metric };

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

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

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

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

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

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

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

@@ -38,13 +38,13 @@ export interface FilterOption {
 /**
  * Column definition for table data display and behavior
  */
-export interface Column<T = any> {
+export interface Column<T = unknown> {
     /** Unique identifier for the column */
     id: string;
     /** Header content - can be string or React element */
     header: string | ReactNode;
     /** Property key or function to extract cell data from row object */
-    accessor: keyof T | ((row: T) => any);
+    accessor: keyof T | ((row: T) => ReactNode | string | number | boolean | null | undefined);
     /** Optional custom renderer for cell content */
     cell?: (row: T) => ReactNode;
     /** Enable sorting for this column */
@@ -134,7 +134,7 @@ export interface TableContextType {
  *
  * @template T The type of data objects in each table row
  */
-export interface TableProps<T = any> {
+export interface TableProps<T = unknown> {
     /** Array of data objects to display - required for data-driven API */
     data?: T[];
     /** Column definitions for data display and behavior - required for data-driven API */
@@ -287,7 +287,7 @@ export interface InternalTableCellProps<T> {
 }
 export type ActionVariant = 'default' | 'danger';
 export type ActionPriority = 'high' | 'normal';
-export interface ActionItem<T = any> {
+export interface ActionItem<T = unknown> {
     /** Unique identifier for the action */
     id: string;
     /** Display label for the action */
@@ -305,7 +305,7 @@ export interface ActionItem<T = any> {
     /** Function to determine if action should be disabled */
     disabled?: (row: T) => boolean;
 }
-export interface TableActionsProps<T = any> {
+export interface TableActionsProps<T = unknown> {
     /** Array of action items to display */
     actions: ActionItem<T>[];
     /** Row data to pass to action handlers */
@@ -315,7 +315,7 @@ export interface TableActionsProps<T = any> {
     /** Additional CSS class name */
     className?: string;
 }
-export interface TableActionsMenuProps<T = any> {
+export interface TableActionsMenuProps<T = unknown> {
     /** Array of action items to display in menu */
     actions: ActionItem<T>[];
     /** Row data to pass to action handlers */
@@ -351,7 +351,7 @@ export interface TableSelectionHeaderProps {
     onClearSelection: () => void;
     className?: string;
 }
-export interface TableColumnManagerProps<T = any> {
+export interface TableColumnManagerProps<T = unknown> {
     columns: Column<T>[];
     visibleColumns: string[];
     columnOrder: string[];
@@ -359,7 +359,7 @@ export interface TableColumnManagerProps<T = any> {
     onResetToDefault: () => void;
     onColumnReorder?: (fromIndex: number, toIndex: number) => void;
 }
-export interface TableFilterProps<T = any> {
+export interface TableFilterProps<T = unknown> {
     columns: Column<T>[];
     filterConfig: FilterConfig[];
     onFilterChange: (filterConfig: FilterConfig[]) => void;

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

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { Dropdown } from '../Dropdown/Dropdown.js';
-import '../Dropdown/DropdownTrigger.js';
-import '../Dropdown/DropdownMenu.js';
-import '../Dropdown/DropdownItem.js';
-import '../Dropdown/DropdownSection.js';
-import '../Dropdown/DropdownSeparator.js';
-import '../Dropdown/Dropdown.theme.js';
-import { Button } from '../Button/Button.js';
+import { Dropdown } from '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+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';
 
 /**

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

@@ -0,0 +1,25 @@
+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 { Button } from '../../core/Button/Button.js';
+import 'react';
+import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
+import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
+
+function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onToggleColumn, onResetToDefault, onColumnReorder, }) {
+    const orderedColumns = columnOrder.length > 0
+        ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
+        : columns;
+    const renderColumnItem = (column) => {
+        const isVisible = visibleColumns.includes(column.id);
+        const isLocked = column.locked === true;
+        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-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;
+
+export { TableColumnManager };

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

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { inferFilterType, getDefaultOperator, isUnaryOperator, getOperatorsForFilterType, isBetweenOperator } from './Table.filterUtils.js';
-import { Button } from '../Button/Button.js';
+import { Button } from '../../core/Button/Button.js';
 import { Input } from '../../forms/Input/Input.js';
 import '../../forms/Input/Input.theme.js';
 import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
-import { Popover } from '../Popover/Popover.js';
-import '../Popover/PopoverContext.js';
+import { Popover } from '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
 import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 
@@ -23,7 +24,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 +207,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-white 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.Body, { 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);

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

@@ -48,7 +48,7 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHe
                     }, row: {}, rowId: "", isHeader: true, theme: theme, children: jsx("div", { className: "flex items-center gap-2", children: selectable && selectionType === 'checkbox' && (jsx(Checkbox, { id: "table-select-all", name: "table-select-all", value: "select-all", checked: isAllSelected, indeterminate: isIndeterminate, onChange: handleSelectAll, "aria-label": "Select all rows" })) }) })), columns.map((column, index) => {
                     const currentSort = sortConfig.find(sort => sort.columnId === column.id);
                     const isSortable = column.sortable && onSortChange;
-                    return (jsx(TableCell, { column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-xs", children: currentSort.direction === 'asc' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
+                    return (jsx(TableCell, { column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-sm", children: currentSort.direction === 'asc' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
                 })] }) }));
 }
 const TableHeader = TableHeaderComponent;