@flikk/ui 1.0.0-beta.27 → 1.0.0-beta.29

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

@@ -28,10 +28,41 @@ export interface FeedThemeOverrides {
     collapseSvgStyle?: string;
 }
 export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
+    /** `Feed.Item` / `Feed.Collapse` children (compound API). Optional when `items` is used. */
+    children?: ReactNode;
+    /**
+     * Data-driven items. When provided, the feed renders from this array and any
+     * `children` are ignored (dev-warns). Omit it to use the compound API.
+     * Fully serializable (resolve icon NAMES upstream) — ideal for generative UI.
+     */
+    items?: FeedItemData[];
+    /**
+     * When set with `items`, items beyond this count are wrapped in a
+     * `Feed.Collapse` (shown behind a "Show N more" toggle). Ignored for the
+     * compound API.
+     */
+    collapseAfter?: number;
     theme?: FeedThemeOverrides;
     className?: string;
 }
+/**
+ * A single feed entry for the data-driven (`items`) API. Maps internally to
+ * `Feed.Item`.
+ */
+export interface FeedItemData {
+    /** Icon or avatar element rendered as the indicator */
+    icon?: ReactNode;
+    /** Timestamp label (e.g. "6d ago") */
+    timestamp?: ReactNode;
+    /** Body content (maps to the Feed.Item children) */
+    content?: ReactNode;
+    /** Custom className for the indicator wrapper (icon background circle) */
+    indicatorClassName?: string;
+    /** Optional className forwarded to the item wrapper */
+    className?: string;
+    /** Stable React key (falls back to the array index) */
+    key?: string | number;
+}
 /** @internal Injected by Feed.Collapse via cloneElement */
 export interface FeedItemInternalProps {
     _as?: "li" | "div";

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

@@ -1,2 +1,2 @@
 export { Feed } from "./Feed";
-export type { FeedProps, FeedItemProps, FeedCollapseProps, FeedItemInternalProps, FeedTheme, FeedThemeOverrides, } from "./Feed.types";
+export type { FeedProps, FeedItemProps, FeedItemData, FeedCollapseProps, FeedItemInternalProps, FeedTheme, FeedThemeOverrides, } from "./Feed.types";

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

@@ -2,18 +2,18 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { metricTheme } from './Metric.theme.js';
+import { Badge } from '../../core/Badge/Badge.js';
+import { Card } from '../../core/Card/Card.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 trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3", strokeWidth: 2 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3", strokeWidth: 2 }));
     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 }))] }) }));
+    // Ghost has no surface, so it renders flush (no inset) to align with
+    // surrounding content; filled/glass keep their size-based content padding.
+    const contentPadding = variant === "ghost" ? "p-0" : metricTheme.contentPaddingSizes[size];
+    const iconStyles = cn(metricTheme.iconColors[color], variant === "glass" && metricTheme.iconGlassShadows[color]);
+    return (jsx(Card, { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, metricTheme.iconContainerVariants[variant], iconStyles, metricTheme.iconContainerSizes[size]), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [typeof label === 'string' ? (jsx("div", { className: cn(metricTheme.labelStyle, metricTheme.labelSizes[size], icon && cn("mb-0 flex items-center", metricTheme.labelIconAlignSizes[size])), children: label })) : label, jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, metricTheme.valueSizes[size]), children: value }), trendValue && (typeof trendValue === 'string' ? (jsx(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "soft", size: size === "lg" ? "md" : "sm", iconStart: trendIcon, pill: true, children: trendValue })) : trendValue)] }), subtitle && (typeof subtitle === 'string' ? (jsx("div", { className: cn(metricTheme.subtitleStyle, metricTheme.subtitleSizes[size]), children: subtitle })) : subtitle)] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
 });
 Metric.displayName = "Metric";
 

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

@@ -1,6 +1,7 @@
 import { MetricTheme } from "./Metric.types";
 /**
- * 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.
  */
 export declare const metricTheme: MetricTheme;

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

@@ -1,82 +1,64 @@
 /**
- * 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`/`glass` clear that fill (`!` beats Card's bg utility regardless of
+    // source order) so they sit transparent / let the glass gradient read.
     variants: {
+        filled: "",
+        ghost: "!bg-transparent overflow-visible",
+        glass: "glass-effect !bg-transparent",
+    },
+    // Icon chip base per variant — classes shared across all colors of that variant
+    iconContainerVariants: {
         filled: "border border-[var(--color-border)]",
-        glass: "glass-effect",
+        ghost: "border border-[var(--color-border)] bg-[var(--color-surface-raised)]/50 shadow-real-lg",
+        glass: "glass-effect-2 !ring-0",
     },
-    // Container background styles per variant (color only applies to icon)
-    variantColors: {
-        filled: "bg-white dark:bg-[var(--color-background-secondary)]",
-        glass: "",
+    // 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)]",
+        secondary: "text-[var(--color-secondary)] dark:text-[var(--color-secondary-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)]",
     },
-    // 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)]",
-            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)] " +
-                "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)]",
-            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)] " +
-                "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)]",
-        },
+    // Glass-only colored glow per semantic color (neutral stays shadowless)
+    iconGlassShadows: {
+        neutral: "",
+        primary: "shadow-lg shadow-blue-500/10",
+        secondary: "shadow-lg shadow-gray-500/10",
+        success: "shadow-lg shadow-green-500/10",
+        warning: "shadow-lg shadow-yellow-500/10",
+        danger: "shadow-lg shadow-rose-500/10",
     },
-    // 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-primary)] 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

@@ -2,7 +2,7 @@ import React from 'react';
 import { SemanticColor } from '../../../utils/colorUtils';
 export type MetricSize = 'sm' | 'md' | 'lg';
 export type MetricColor = SemanticColor;
-export type MetricVariant = 'filled' | 'glass';
+export type MetricVariant = 'filled' | 'ghost' | 'glass';
 export type TrendDirection = 'up' | 'down';
 export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -58,16 +58,15 @@ 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>;
+    iconGlassShadows: 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;
@@ -76,16 +75,15 @@ 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>>;
+    iconGlassShadows?: 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.js

@@ -38,7 +38,7 @@ const TableContext = createContext({
  */
 function TableComponent(props) {
     var _a, _b;
-    const { data, columns, rowKey, 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;
+    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,
@@ -149,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: 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, 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

@@ -5,12 +5,18 @@ const tableTheme = {
     // Light: white background | Dark: neutral-900 background
     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,6 +24,7 @@ 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
@@ -28,12 +35,25 @@ const tableTheme = {
     paddingStyles: {
         default: "",
         flush: "[&_th:first-child]:pl-0 [&_th:last-child]:pr-0 " +
-            "[&_td:first-child]:pl-0 [&_td: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 " +

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

@@ -155,6 +155,12 @@ export interface TableProps<T = unknown> {
      * Provides consistent component identity during row reordering or updates.
      */
     rowKey?: keyof T | ((row: T, index: number) => string | number);
+    /**
+     * Row-level click handler (data-driven API). When provided, body rows get a
+     * pointer cursor, keyboard focus (Enter/Space activates), and call back with
+     * the row record. Selection/expansion controls stop propagation as before.
+     */
+    onRowClick?: (row: T) => void;
     /** Visual variant for different table styles */
     variant?: TableVariant;
     /**
@@ -267,6 +273,7 @@ export interface InternalTableBodyProps<T> {
     data: T[];
     columns: Column<T>[];
     rowKey?: keyof T | ((row: T, index: number) => string | number);
+    onRowClick?: (row: T) => void;
     expandedRowRender?: (row: T) => ReactNode;
     expandedRows?: string[];
     onExpandedRowsChange?: (expandedRows: string[]) => void;
@@ -282,6 +289,7 @@ export interface InternalTableRowProps<T> {
     row: T;
     rowId: string;
     columns: Column<T>[];
+    onRowClick?: (row: T) => void;
     expandedRowRender?: (row: T) => ReactNode;
     isExpanded?: boolean;
     onExpandChange?: (expanded: boolean) => void;

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

@@ -4,7 +4,7 @@ import { getRowId } from './Table.utils.js';
 import { useTableExpansion } from './hooks/useTableExpansion.js';
 import { useTableSelection } from './hooks/useTableSelection.js';
 
-function TableBodyComponent({ data, columns, rowKey, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable, selectionType, selectedRows = [], onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
+function TableBodyComponent({ data, columns, rowKey, onRowClick, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable, selectionType, selectedRows = [], onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
     const { handleExpandChange } = useTableExpansion({
         expandedRows,
         onExpandedRowsChange,
@@ -18,7 +18,7 @@ function TableBodyComponent({ data, columns, rowKey, expandedRowRender, expanded
     });
     return (jsx("tbody", { children: data.map((row, index) => {
             const rowId = getRowId(row, index, rowKey);
-            return (jsx(TableRow, { row: row, rowId: rowId, columns: columns, expandedRowRender: expandedRowRender, isExpanded: expandedRows.includes(rowId), onExpandChange: (expanded) => handleExpandChange(rowId, expanded), selectable: selectable, selectionType: selectionType, isSelected: selectedRows.includes(rowId), onSelectionChange: (selected) => handleSelectionChange(rowId, selected), freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme }, rowId));
+            return (jsx(TableRow, { row: row, rowId: rowId, columns: columns, onRowClick: onRowClick, expandedRowRender: expandedRowRender, isExpanded: expandedRows.includes(rowId), onExpandChange: (expanded) => handleExpandChange(rowId, expanded), selectable: selectable, selectionType: selectionType, isSelected: selectedRows.includes(rowId), onSelectionChange: (selected) => handleSelectionChange(rowId, selected), freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme }, rowId));
         }) }));
 }
 const TableBody = TableBodyComponent;

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

@@ -12,7 +12,7 @@ import { TableContext } from './Table.js';
  */
 function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = false, isLastFrozen = false, isSelected = false, theme, children, }) {
     const { isOverflowing } = useContext(TableContext);
-    const overflowFrozenStyle = isOverflowing ? "backdrop-blur-sm bg-black/5 dark:bg-white/5" : undefined;
+    const overflowFrozenStyle = isOverflowing ? "backdrop-blur-md" : undefined;
     const Cell = isHeader ? 'th' : 'td';
     const isUtilityColumn = column.id === UTILITY_COLUMN_ID;
     // For header cells, render the column header content

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

@@ -1,5 +1,5 @@
 import { InternalTableRowProps } from "./Table.types";
-declare function TableRowComponent<T extends Record<string, any>>({ row, rowId, columns, expandedRowRender, isExpanded, onExpandChange, selectable, selectionType, isSelected, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }: InternalTableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function TableRowComponent<T extends Record<string, any>>({ row, rowId, columns, onRowClick, expandedRowRender, isExpanded, onExpandChange, selectable, selectionType, isSelected, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }: InternalTableRowProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace TableRowComponent {
     var displayName: string;
 }

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

@@ -10,14 +10,21 @@ import { UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
 import { cn } from '../../../utils/cn.js';
 import { tableExpandAnimations, tableExpandContentAnimations } from './Table.animations.js';
 
-function TableRowComponent({ row, rowId, columns, expandedRowRender, isExpanded = false, onExpandChange, selectable, selectionType, isSelected = false, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
+function TableRowComponent({ row, rowId, columns, onRowClick, expandedRowRender, isExpanded = false, onExpandChange, selectable, selectionType, isSelected = false, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
     const rowClasses = cn(theme === null || theme === void 0 ? void 0 : theme.rowStyle, isSelected && (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle));
     const handleExpandClick = (e) => {
         e.stopPropagation();
         onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(!isExpanded);
     };
     const colSpan = columns.length + (selectable || !!expandedRowRender ? 1 : 0);
-    return (jsxs(Fragment, { children: [jsxs("tr", { className: rowClasses, "data-selected": isSelected, role: "row", "aria-selected": selectable ? isSelected : undefined, "aria-expanded": Boolean(expandedRowRender) ? isExpanded : undefined, children: [(selectable || expandedRowRender) && (jsx(TableCell, { column: {
+    return (jsxs(Fragment, { children: [jsxs("tr", { className: cn(rowClasses, onRowClick && "cursor-pointer"), "data-selected": isSelected, role: "row", "aria-selected": selectable ? isSelected : undefined, "aria-expanded": Boolean(expandedRowRender) ? isExpanded : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, onKeyDown: onRowClick
+                    ? (e) => {
+                        if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                            e.preventDefault();
+                            onRowClick(row);
+                        }
+                    }
+                    : undefined, children: [(selectable || expandedRowRender) && (jsx(TableCell, { column: {
                             id: UTILITY_COLUMN_ID,
                             header: "",
                             accessor: () => "",

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useContext, createContext, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { timelineTheme } from './Timeline.theme.js';
@@ -14,7 +14,15 @@ const useTimelineContext = () => {
         throw new Error("Timeline compound components must be used within <Timeline>");
     return ctx;
 };
-const TimelineRoot = React__default.forwardRef(({ children, className, layout = "vertical", theme: themeOverrides, ...props }, ref) => {
+/**
+ * Render a single data-driven item to the compound primitives. Keeps one
+ * rendering path: `items` and the compound API both produce `Timeline.Item`s.
+ */
+function renderItemData(item, index, theme) {
+    var _a, _b;
+    return (jsxs(TimelineItem, { status: item.status, className: item.className, children: [jsx(TimelineMarker, { icon: item.icon }), jsx(TimelineContent, { children: (_a = item.content) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [item.title != null && (jsx("p", { className: theme.titleStyle, children: item.title })), item.description != null && (jsx("p", { className: theme.descriptionStyle, children: item.description })), item.timestamp != null && (jsx("p", { className: theme.timestampStyle, children: item.timestamp }))] })) })] }, (_b = item.key) !== null && _b !== void 0 ? _b : index));
+}
+const TimelineRoot = React__default.forwardRef(({ children, items, className, layout = "vertical", theme: themeOverrides, ...props }, ref) => {
     // Merge theme with any overrides
     const theme = useMemo(() => ({
         ...timelineTheme,
@@ -24,8 +32,22 @@ const TimelineRoot = React__default.forwardRef(({ children, className, layout =
             ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.markerStatuses) || {}),
         },
     }), [themeOverrides]);
-    // Count total children for index tracking
-    const totalItems = React__default.Children.count(children);
+    if (process.env.NODE_ENV !== "production" &&
+        items &&
+        React__default.Children.count(children) > 0) {
+        console.warn("[Timeline]: both `items` and children were provided — `items` takes precedence and children are ignored.");
+    }
+    // Data-driven path renders to the same compound primitives as the
+    // composition path, so everything downstream is identical.
+    const baseChildren = items
+        ? items.map((item, i) => renderItemData(item, i, theme))
+        : children;
+    // Inject each item's index from a single source of truth (the rendered
+    // children array) — no DOM measurement, no IntersectionObserver-derived order.
+    const indexedChildren = React__default.Children.map(baseChildren, (child, index) => React__default.isValidElement(child)
+        ? React__default.cloneElement(child, { _index: index })
+        : child);
+    const totalItems = React__default.Children.count(baseChildren);
     // Context value to be provided to children
     const contextValue = useMemo(() => ({
         layout,
@@ -33,7 +55,7 @@ const TimelineRoot = React__default.forwardRef(({ children, className, layout =
         totalItems,
     }), [layout, theme, totalItems]);
     const isHorizontal = layout === "horizontal";
-    return (jsx(TimelineContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(isHorizontal ? theme.baseStyleHorizontal : theme.baseStyle, className), "data-layout": layout, role: "list", "aria-label": "Timeline", ...props, children: children }) }));
+    return (jsx(TimelineContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(isHorizontal ? theme.baseStyleHorizontal : theme.baseStyle, className), "data-layout": layout, role: "list", "aria-label": "Timeline", ...props, children: indexedChildren }) }));
 });
 TimelineRoot.displayName = "Timeline";
 // Attach compound subcomponents

package/dist/components/data-display/Timeline/Timeline.theme.d.ts

@@ -7,12 +7,20 @@ export interface TimelineTheme {
     baseStyleHorizontal: string;
     itemStyle: string;
     itemStyleHorizontal: string;
-    lineStyle: string;
-    lineStyleHorizontal: string;
+    /** Connector line between markers — vertical layout */
+    connectorStyle: string;
+    /** Connector line between markers — horizontal layout */
+    connectorStyleHorizontal: string;
+    /** Color override applied to the connector when the item is completed */
+    connectorCompletedStyle: string;
     markerStyle: string;
     markerStatuses: Record<TimelineItemStatus, string>;
     contentStyle: string;
     contentStyleHorizontal: string;
+    /** Default typography for the data-driven (`items`) API content */
+    titleStyle: string;
+    descriptionStyle: string;
+    timestampStyle: string;
 }
 /**
  * Default theme for Timeline components

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

@@ -11,22 +11,28 @@ const timelineTheme = {
     itemStyle: "relative flex gap-4",
     // Individual timeline item - horizontal
     itemStyleHorizontal: "relative flex flex-col items-center flex-1 gap-3",
-    // Connector line - vertical (positioned on the marker column)
-    lineStyle: "absolute top-0 bottom-0 w-0.5 bg-[var(--color-border)]",
-    // Connector line - horizontal
-    lineStyleHorizontal: "absolute left-0 right-0 h-0.5 bg-[var(--color-border)]",
+    // Connector line - vertical (stretches down below the marker)
+    connectorStyle: "w-0.5 flex-1 min-h-4 bg-[var(--color-border)]",
+    // Connector line - horizontal (spans from this item's center to the next)
+    connectorStyleHorizontal: "absolute top-1/2 -translate-y-1/2 left-1/2 h-0.5 w-full bg-[var(--color-border)]",
+    // Completed connector color (overrides the base connector background)
+    connectorCompletedStyle: "bg-[var(--color-success)]",
     // Marker base styles (shared across statuses)
-    markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200",
+    markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200 ring-4 ring-[var(--color-surface)] backdrop-blur-sm",
     // Marker status-specific styles
     markerStatuses: {
-        completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-[var(--color-success-contrast)]",
-        active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-4 ring-[var(--color-primary-100)]",
-        pending: "w-8 h-8 bg-[var(--color-background)] border-[var(--color-border)]",
+        completed: "size-8 bg-[var(--color-success)] border-[var(--color-success)] text-[var(--color-success-contrast)]",
+        active: "size-8 bg-[var(--color-primary)]/0 border-[var(--color-primary)] text-[var(--color-primary)] ",
+        pending: "size-8 bg-[var(--color-background)] border-[var(--color-border)] text-[var(--color-text-muted)]",
     },
     // Content area - vertical
     contentStyle: "pb-8 pt-0.5 min-w-0",
     // Content area - horizontal
     contentStyleHorizontal: "text-center px-2 min-w-0",
+    // Data-driven (`items`) content typography
+    titleStyle: "text-sm font-medium text-[var(--color-text-primary)]",
+    descriptionStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
+    timestampStyle: "text-xs text-[var(--color-text-placeholder)] mt-1",
 };
 
 export { timelineTheme };