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

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

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

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

@@ -1,7 +1,8 @@
 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 MetricVariant = 'filled' | 'glass';
+export type MetricColor = SemanticColor;
+export type MetricVariant = 'filled' | 'ghost';
 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 subtitle or secondary text
      */
-    subtitle?: 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'
@@ -57,16 +58,14 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface MetricTheme {
     baseStyle: string;
     variants: Record<MetricVariant, string>;
-    variantColors: Record<MetricVariant, string>;
-    iconContainerVariantColors: Record<MetricVariant, Record<MetricColor, string>>;
-    sizes: Record<MetricSize, {
-        container: string;
-        contentPadding: string;
-        iconContainer: string;
-        label: string;
-        value: string;
-        subtitle: string;
-    }>;
+    iconContainerVariants: Record<MetricVariant, string>;
+    iconColors: Record<MetricColor, string>;
+    contentPaddingSizes: Record<MetricSize, string>;
+    iconContainerSizes: Record<MetricSize, string>;
+    labelSizes: Record<MetricSize, string>;
+    labelIconAlignSizes: Record<MetricSize, string>;
+    valueSizes: Record<MetricSize, string>;
+    subtitleSizes: Record<MetricSize, string>;
     labelStyle: string;
     valueStyle: string;
     subtitleStyle: string;
@@ -75,16 +74,14 @@ export interface MetricTheme {
 export interface MetricThemeOverrides {
     baseStyle?: string;
     variants?: Partial<Record<MetricVariant, string>>;
-    variantColors?: Partial<Record<MetricVariant, string>>;
-    iconContainerVariantColors?: Partial<Record<MetricVariant, Partial<Record<MetricColor, string>>>>;
-    sizes?: Partial<Record<MetricSize, Partial<{
-        container: string;
-        contentPadding: string;
-        iconContainer: string;
-        label: string;
-        value: string;
-        subtitle: string;
-    }>>>;
+    iconContainerVariants?: Partial<Record<MetricVariant, string>>;
+    iconColors?: Partial<Record<MetricColor, string>>;
+    contentPaddingSizes?: Partial<Record<MetricSize, string>>;
+    iconContainerSizes?: Partial<Record<MetricSize, string>>;
+    labelSizes?: Partial<Record<MetricSize, string>>;
+    labelIconAlignSizes?: Partial<Record<MetricSize, string>>;
+    valueSizes?: Partial<Record<MetricSize, string>>;
+    subtitleSizes?: Partial<Record<MetricSize, string>>;
     labelStyle?: string;
     valueStyle?: string;
     subtitleStyle?: string;

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

@@ -1,3 +1,10 @@
+"use client";
+const EASE = [0.04, 0.62, 0.23, 0.98];
+// Expand is slightly slower than collapse — feels more intentional
+const EXPAND_DURATION = 0.32;
+const COLLAPSE_DURATION = 0.25;
+const CONTENT_DURATION = 0.22;
+const CONTENT_EXPAND_DELAY = 0.08;
 /**
  * Container animation for row expansion (height: 0 -> auto with opacity)
  * Uses the same easing curve pattern as Accordion for consistency
@@ -7,16 +14,16 @@ const tableExpandAnimations = {
         height: 0,
         opacity: 0,
         transition: {
-            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
-            opacity: { duration: 0.25 },
+            height: { duration: COLLAPSE_DURATION, ease: EASE },
+            opacity: { duration: COLLAPSE_DURATION },
         },
     },
     expanded: {
         height: 'auto',
         opacity: 1,
         transition: {
-            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
-            opacity: { duration: 0.3, delay: 0.1 },
+            height: { duration: EXPAND_DURATION, ease: EASE },
+            opacity: { duration: EXPAND_DURATION, delay: CONTENT_EXPAND_DELAY },
         },
     },
 };
@@ -26,19 +33,19 @@ const tableExpandAnimations = {
 const tableExpandContentAnimations = {
     collapsed: {
         opacity: 0,
-        y: -10,
+        y: -8,
         transition: {
-            y: { duration: 0.2 },
-            opacity: { duration: 0.2 },
+            y: { duration: CONTENT_DURATION },
+            opacity: { duration: CONTENT_DURATION },
         },
     },
     expanded: {
         opacity: 1,
         y: 0,
         transition: {
-            delay: 0.15,
-            y: { duration: 0.3 },
-            opacity: { duration: 0.3 },
+            delay: CONTENT_EXPAND_DELAY,
+            y: { duration: CONTENT_DURATION },
+            opacity: { duration: CONTENT_DURATION },
         },
     },
 };

package/dist/components/data-display/Table/Table.d.ts

@@ -1,10 +1,5 @@
 import React from "react";
-import { TableProps, TableContextType } from "./Table.types";
-/**
- * Context for sharing table state across all table components
- * Provides theme, configuration, and callback functions to child components
- */
-declare const TableContext: React.Context<TableContextType>;
+import { TableProps } from "./Table.types";
 /**
  * Enhanced Table component with dual API support (declarative and data-driven)
  *
@@ -24,4 +19,4 @@ declare namespace TableComponent {
 }
 declare const Table: typeof TableComponent;
 export { Table };
-export { TableContext };
+export { TableContext } from "./TableContext";

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

@@ -242,13 +242,20 @@ function filterData(data, columns, filters, logic = 'and') {
         return data;
     // Build a column lookup for quick access
     const columnMap = new Map(columns.map((col) => [col.id, col]));
+    // Pre-compute filter type per filter — inferFilterType samples the full dataset,
+    // so calling it inside the row loop is O(n × filters × n). Hoist it out.
+    const filterTypeMap = new Map(activeFilters.map((filter) => {
+        const column = columnMap.get(filter.columnId);
+        return [filter.columnId, column ? inferFilterType(column, data) : 'text'];
+    }));
     return data.filter((row) => {
         const results = activeFilters.map((filter) => {
+            var _a;
             const column = columnMap.get(filter.columnId);
             if (!column)
                 return true;
             const cellValue = getCellValue(row, column);
-            const filterType = inferFilterType(column, data);
+            const filterType = (_a = filterTypeMap.get(filter.columnId)) !== null && _a !== void 0 ? _a : 'text';
             return evaluateFilter(cellValue, filter, filterType);
         });
         return logic === 'and'

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

@@ -1,6 +1,8 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { tableTheme } from './Table.theme.js';
+import { TableContext } from './TableContext.js';
 import { cn } from '../../../utils/cn.js';
 import { TableHeader } from './TableHeader.js';
 import { TableBody } from './TableBody.js';
@@ -12,17 +14,6 @@ import { useTableSelection } from './hooks/useTableSelection.js';
 import { useTablePagination } from './hooks/useTablePagination.js';
 import { useTableFilter } from './hooks/useTableFilter.js';
 
-/**
- * Context for sharing table state across all table components
- * Provides theme, configuration, and callback functions to child components
- */
-const TableContext = createContext({
-    theme: tableTheme,
-    variant: "default",
-    freezeHeader: false,
-    freezeFirstColumn: false,
-    freezeLastColumn: false,
-});
 /**
  * Enhanced Table component with dual API support (declarative and data-driven)
  *
@@ -37,8 +28,8 @@ const TableContext = createContext({
  * - Theme customization with className overrides
  */
 function TableComponent(props) {
-    var _a;
-    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
+    var _a, _b;
+    const { data, columns, rowKey, onRowClick, variant = "default", padding = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
     // Column management hook
     const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
         columns,
@@ -76,8 +67,17 @@ function TableComponent(props) {
         selectedRows,
         onSelectionChange,
     });
-    // Determine which API is being used (declarative vs data-driven)
-    const isDeclarativeAPI = !!children;
+    // Determine which API is being used (declarative vs data-driven).
+    // Per docs/COMPONENT_API_PATTERNS.md, the data-driven `data`/`columns` API
+    // wins over `children` when both are provided (mirroring Timeline/
+    // DescriptionList/Feed/Accordion), with a dev-only warning.
+    const hasDataDrivenProps = !!(data && columns);
+    const isDeclarativeAPI = !!children && !hasDataDrivenProps;
+    if (process.env.NODE_ENV !== "production" &&
+        children &&
+        hasDataDrivenProps) {
+        console.warn("[Table]: Both `data`/`columns` and `children` were provided. `data`/`columns` will be used and `children` will be ignored.");
+    }
     // Detect horizontal overflow to conditionally apply frozen column backdrop styles
     const scrollContainerRef = useRef(null);
     const [isOverflowing, setIsOverflowing] = useState(false);
@@ -93,26 +93,22 @@ function TableComponent(props) {
         observer.observe(container);
         return () => observer.disconnect();
     }, []);
-    // Merge global theme with component-specific overrides
-    // When the table overflows, add backdrop-blur + shadow to frozen columns
-    const theme = useMemo(() => {
-        const merged = {
-            ...tableTheme,
-            ...(themeOverrides || {}),
-        };
-        if (isOverflowing) {
-            const overflowBg = "backdrop-blur-sm bg-black/5 dark:bg-white/5";
-            merged.frozenColumnStyle = cn(merged.frozenColumnStyle, overflowBg, "shadow-l-xl");
-            merged.lastFrozenColumnStyle = cn(merged.lastFrozenColumnStyle, overflowBg, "shadow-r-xl");
-        }
-        return merged;
-    }, [themeOverrides, isOverflowing]);
+    // Merge global theme with component-specific overrides.
+    // isOverflowing is intentionally excluded — it changes on every resize event and
+    // would invalidate the context memo, causing all cells to re-render. Instead,
+    // isOverflowing is passed separately in context and applied in TableCell.
+    const theme = useMemo(() => ({
+        ...tableTheme,
+        ...(themeOverrides || {}),
+    }), [themeOverrides]);
     // Get base classes from theme
     const baseClasses = theme.baseStyle || "";
     const variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
+    const paddingClasses = ((_b = theme.paddingStyles) === null || _b === void 0 ? void 0 : _b[padding]) || "";
     // Memoize context value to prevent unnecessary re-renders in consumers
     const contextValue = useMemo(() => ({
         theme,
+        isOverflowing,
         variant,
         freezeHeader,
         freezeFirstColumn,
@@ -133,6 +129,7 @@ function TableComponent(props) {
         onSelectionChange,
     }), [
         theme,
+        isOverflowing,
         variant,
         freezeHeader,
         freezeFirstColumn,
@@ -152,7 +149,7 @@ function TableComponent(props) {
         selectedRows,
         onSelectionChange,
     ]);
-    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsx("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] })) }) })] }) }));
+    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("table", { className: cn(baseClasses, variantClasses, paddingClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, onRowClick: onRowClick, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] }))] }) })] }) }));
 }
 TableComponent.displayName = "Table";
 const Table = TableComponent;

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

@@ -3,14 +3,20 @@ 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-sm",
     // Variant styles
-    // Each variant gets dark mode border colors and alternate row colors
+    // Each variant gets dark mode border colors and alternate row colors.
+    // Non-grid variants (default/striped/compact) drop the bottom border on the
+    // last body row — the closing line is then carried by the surrounding card
+    // border, or by the pagination footer's `border-t` when pagination is shown.
+    // `bordered` is a full grid and keeps its closing edge.
     variants: {
         default: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
         striped: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
             "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-800)] " +
+            "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
         bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
             "[&_td]:border-b [&_td]:border-r [&_th]:border-b [&_th]:border-r " +
@@ -18,12 +24,36 @@ const tableTheme = {
             "dark:[&_td]:border-[var(--color-neutral-700)] dark:[&_th]:border-[var(--color-neutral-700)] " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
         compact: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
     },
+    // Edge-padding modes — applied at the table root via descendant selectors so they
+    // work for both the data-driven and declarative APIs. `flush` zeroes the
+    // first/last cell side padding (overrides the default `first:pl-4 last:pr-4`).
+    // Descendant selectors (.table th:first-child) outrank per-cell first:pl-4 by
+    // one specificity point so this wins without !important.
+    paddingStyles: {
+        default: "",
+        flush: "[&_th:first-child]:pl-0 [&_th:last-child]:pr-0 " +
+            "[&_td:first-child]:pl-0 [&_td:last-child]:pr-0 " +
+            // Hover inset on ONLY the hovered row's edge cells, with NO column reflow.
+            // Padding can't do this (a table shares one width per column across all
+            // rows, so padding one cell widens the whole column). Instead we shift the
+            // cell's content with `transform`, which is layout-free — it can't resize a
+            // column, so auto table-layout / responsive sizing is fully preserved and
+            // no other row moves. The row divider is moved from the cells onto the
+            // <tr> (inset shadow) so a shifted cell can't drag a notch into it.
+            "[&>tbody>tr>td]:border-b-0 " +
+            "[&>tbody>tr]:shadow-[inset_0_-1px_0_0_var(--color-border)] [&>tbody>tr:last-child]:shadow-none " +
+            "[&>tbody>tr>td]:transition-transform [&>tbody>tr>td]:duration-300 " +
+            // first cell eases right (its left padding); last cell eases left only when
+            // right-aligned (matches `pr-4` — invisible on left-aligned content).
+            "[&>tbody>tr:hover>td:first-child]:translate-x-2 " +
+            "[&>tbody>tr:hover>td:last-child.text-right]:-translate-x-2",
+    },
     // 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)] ",
+    headerStyle: "text-left sticky top-0 border-b first:pl-4 last:pr-4 text-[var(--color-text-primary)]/60 text-xs font-semibold 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 " +
@@ -32,7 +62,7 @@ const tableTheme = {
     // Light: neutral-50 hover | Dark: neutral-800 hover
     rowStyle: "group transition-all duration-300 relative " +
         "hover:bg-[var(--color-neutral-50)] " +
-        "dark:hover:bg-[var(--color-background-tertiary)]",
+        "dark:hover:bg-[var(--color-surface-hover)]",
     // Selected row styles — background is applied per-cell (in TableCell) so that
     // sticky/frozen columns repaint correctly. The row only carries the left indicator.
     selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)]",
@@ -45,12 +75,10 @@ const tableTheme = {
         "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
         "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
+    // Surface-like control; surface/border/hover tokens flip automatically between light/dark
     columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-sm font-medium " +
-        "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)] " +
-        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-600)] dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-700)]",
+        "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface)] " +
+        "bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]",
     columnManagerContainer: "mb-4 flex items-center justify-end gap-2",
 };