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

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 " +
@@ -55,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",
 };
 

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 };

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { TimelineTheme } from "./Timeline.theme";
 /**
  * Layout orientation for the Timeline
  */
@@ -18,12 +19,44 @@ export interface TimelineThemeOverrides {
     baseStyleHorizontal?: string;
     itemStyle?: string;
     itemStyleHorizontal?: string;
-    lineStyle?: string;
-    lineStyleHorizontal?: string;
+    connectorStyle?: string;
+    connectorStyleHorizontal?: string;
+    connectorCompletedStyle?: string;
     markerStyle?: string;
     markerStatuses?: Partial<Record<TimelineItemStatus, string>>;
     contentStyle?: string;
     contentStyleHorizontal?: string;
+    titleStyle?: string;
+    descriptionStyle?: string;
+    timestampStyle?: string;
+}
+/**
+ * A single timeline item for the data-driven (`items`) API.
+ * Maps internally to `Timeline.Item` → `Timeline.Marker` + `Timeline.Content`,
+ * so it stays fully serializable (no JSX composition required). This is the
+ * generative-UI / model-friendly entry path; the compound API remains for
+ * hand-authored timelines that need full control.
+ */
+export interface TimelineItemData {
+    /** @default 'pending' */
+    status?: TimelineItemStatus;
+    /** Heading line (rendered with the theme's `titleStyle`) */
+    title?: React.ReactNode;
+    /** Body line (rendered with the theme's `descriptionStyle`) */
+    description?: React.ReactNode;
+    /** Trailing meta line, e.g. a date (rendered with the theme's `timestampStyle`) */
+    timestamp?: React.ReactNode;
+    /** Icon element shown inside the marker. Pass a ReactNode (resolve name→icon upstream). */
+    icon?: React.ReactNode;
+    /**
+     * Escape hatch — when provided, replaces the default title/description/timestamp
+     * rendering with arbitrary content (matches the compound `Timeline.Content` body).
+     */
+    content?: React.ReactNode;
+    /** Optional className forwarded to the item wrapper */
+    className?: string;
+    /** Stable React key (falls back to the array index) */
+    key?: string | number;
 }
 /**
  * Timeline root component props
@@ -34,32 +67,26 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default 'vertical'
      */
     layout?: TimelineLayout;
+    /**
+     * Data-driven items. When provided, the timeline renders from this array and
+     * any `children` are ignored (dev-warns). Omit it to use the compound API.
+     */
+    items?: TimelineItemData[];
     /**
      * Theme overrides for customizing styles
      */
     theme?: TimelineThemeOverrides;
     /**
-     * Children - should be Timeline.Item components
+     * Children — `Timeline.Item` components (compound API). Optional when `items` is used.
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 /**
  * Context value shared between Timeline compound components
  */
 export interface TimelineContextValue {
     layout: TimelineLayout;
-    theme: TimelineThemeOverrides & {
-        baseStyle: string;
-        baseStyleHorizontal: string;
-        itemStyle: string;
-        itemStyleHorizontal: string;
-        lineStyle: string;
-        lineStyleHorizontal: string;
-        markerStyle: string;
-        markerStatuses: Record<TimelineItemStatus, string>;
-        contentStyle: string;
-        contentStyleHorizontal: string;
-    };
+    theme: TimelineTheme;
     totalItems: number;
 }
 /**
@@ -79,6 +106,11 @@ export interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement>
      * Item content - should include Timeline.Marker and Timeline.Content
      */
     children: React.ReactNode;
+    /**
+     * @internal Index within the timeline, injected by the root via cloneElement.
+     * Do not set this manually.
+     */
+    _index?: number;
 }
 /**
  * Context value for individual Timeline items

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

@@ -0,0 +1,6 @@
+/**
+ * Strip the DOM drag/animation handlers that collide with `motion.*` element
+ * props, so the remaining `...rest` can be safely spread onto a motion element.
+ * Shared by TimelineItem and TimelineMarker (both render a `motion.div`).
+ */
+export declare function stripMotionConflicts<T extends Record<string, unknown>>(props: T): Omit<T, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd">;

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

@@ -0,0 +1,11 @@
+/**
+ * Strip the DOM drag/animation handlers that collide with `motion.*` element
+ * props, so the remaining `...rest` can be safely spread onto a motion element.
+ * Shared by TimelineItem and TimelineMarker (both render a `motion.div`).
+ */
+function stripMotionConflicts(props) {
+    const { onDrag: _onDrag, onDragEnd: _onDragEnd, onDragStart: _onDragStart, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, ...rest } = props;
+    return rest;
+}
+
+export { stripMotionConflicts };

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

@@ -4,6 +4,7 @@ import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTimelineContext } from './Timeline.js';
 import { timelineHorizontalItemVariants, timelineItemVariants } from './Timeline.animations.js';
+import { stripMotionConflicts } from './Timeline.utils.js';
 
 // Create context for TimelineItem
 const TimelineItemContext = createContext(undefined);
@@ -14,26 +15,22 @@ const useTimelineItemContext = () => {
         throw new Error("Timeline.Marker and Timeline.Content must be used within Timeline.Item");
     return ctx;
 };
-const TimelineItem = React__default.forwardRef(({ children, className, status = "pending", ...props }, ref) => {
+const TimelineItem = React__default.forwardRef(({ children, className, status = "pending", _index = 0, ...props }, ref) => {
     const { layout, theme, totalItems } = useTimelineContext();
     const shouldReduceMotion = useReducedMotion();
     const itemRef = useRef(null);
     const [isVisible, setIsVisible] = useState(false);
-    // Determine item index from parent
+    // Index/first/last come from the root (single source of truth), not the DOM.
+    const index = _index;
+    const isFirst = index === 0;
+    const isLast = index === totalItems - 1;
+    const isHorizontal = layout === "horizontal";
     const resolvedRef = ref || itemRef;
-    // Find index among siblings for alternate layout
-    const [index, setIndex] = useState(0);
-    useEffect(() => {
-        const element = resolvedRef && "current" in resolvedRef ? resolvedRef.current : itemRef.current;
-        if (element === null || element === void 0 ? void 0 : element.parentElement) {
-            const siblings = Array.from(element.parentElement.children);
-            const idx = siblings.indexOf(element);
-            setIndex(idx);
-        }
-    }, [resolvedRef]);
-    // IntersectionObserver for scroll-triggered animation
+    // IntersectionObserver for scroll-triggered entry animation
     useEffect(() => {
-        const element = resolvedRef && "current" in resolvedRef ? resolvedRef.current : itemRef.current;
+        const element = resolvedRef && "current" in resolvedRef
+            ? resolvedRef.current
+            : itemRef.current;
         if (!element)
             return;
         const observer = new IntersectionObserver(([entry]) => {
@@ -45,9 +42,6 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
         observer.observe(element);
         return () => observer.disconnect();
     }, [resolvedRef]);
-    const isFirst = index === 0;
-    const isLast = index === totalItems - 1;
-    const isHorizontal = layout === "horizontal";
     // Select animation variants based on layout
     const getVariants = () => {
         if (shouldReduceMotion)
@@ -63,10 +57,9 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
         isFirst,
         isLast,
     };
-    // Filter out conflicting motion props from rest
-    const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
+    const safeProps = stripMotionConflicts(props);
     const variants = getVariants();
-    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, className), "data-status": status, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
+    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, className), "data-status": status, "data-layout": layout, role: "listitem", "aria-current": status === "active" ? "step" : undefined, initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
 });
 TimelineItem.displayName = "TimelineItem";
 

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

@@ -6,7 +6,14 @@ import { cn } from '../../../utils/cn.js';
 import { useTimelineContext } from './Timeline.js';
 import { useTimelineItemContext } from './TimelineItem.js';
 import { timelineMarkerVariants } from './Timeline.animations.js';
+import { stripMotionConflicts } from './Timeline.utils.js';
 
+// Screen-reader status text so status isn't conveyed by color/icon alone.
+const STATUS_LABEL = {
+    completed: "Completed",
+    active: "In progress",
+    pending: "Pending",
+};
 const TimelineMarker = React__default.forwardRef(({ icon, className, ...props }, ref) => {
     const { theme, layout } = useTimelineContext();
     const { status, isLast } = useTimelineItemContext();
@@ -19,20 +26,15 @@ const TimelineMarker = React__default.forwardRef(({ icon, className, ...props },
             return jsx(CheckIcon, { className: "w-4 h-4" });
         }
         if (status === "active") {
-            return jsx("span", { className: "w-2 h-2 rounded-full bg-white" });
+            return (jsx("span", { className: "w-2 h-2 rounded-full bg-[var(--color-primary)]" }));
         }
         // Pending: small neutral dot
         return (jsx("span", { className: "w-2 h-2 rounded-full bg-[var(--color-text-muted)]" }));
     };
     const isHorizontal = layout === "horizontal";
     const variants = shouldReduceMotion ? undefined : timelineMarkerVariants;
-    // Filter out conflicting motion props
-    const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
-    return (jsxs("div", { className: cn("relative flex flex-col items-center", isHorizontal && "w-full"), children: [jsx(motion.div, { ref: ref, className: cn(theme.markerStyle, theme.markerStatuses[status], className), "data-status": status, "aria-label": `${status} step`, initial: variants ? "hidden" : undefined, animate: variants ? "visible" : undefined, variants: variants, ...safeProps, children: renderIcon() }), !isLast && !isHorizontal && (jsx("div", { className: cn("w-0.5 flex-1 min-h-4", status === "completed"
-                    ? "bg-[var(--color-success)]"
-                    : "bg-[var(--color-border)]"), "aria-hidden": "true" })), !isLast && isHorizontal && (jsx("div", { className: cn("absolute top-1/2 -translate-y-1/2 left-1/2 h-0.5 w-full", status === "completed"
-                    ? "bg-[var(--color-success)]"
-                    : "bg-[var(--color-border)]"), "aria-hidden": "true" }))] }));
+    const safeProps = stripMotionConflicts(props);
+    return (jsxs("div", { className: cn("relative flex flex-col items-center", isHorizontal && "w-full"), children: [jsxs(motion.div, { ref: ref, className: cn(theme.markerStyle, theme.markerStatuses[status], className), "data-status": status, initial: variants ? "hidden" : undefined, animate: variants ? "visible" : undefined, variants: variants, ...safeProps, children: [jsx("span", { className: "sr-only", children: STATUS_LABEL[status] }), jsx("span", { "aria-hidden": "true", className: "flex items-center justify-center", children: renderIcon() })] }), !isLast && !isHorizontal && (jsx("div", { className: cn(theme.connectorStyle, status === "completed" && theme.connectorCompletedStyle), "aria-hidden": "true" })), !isLast && isHorizontal && (jsx("div", { className: cn(theme.connectorStyleHorizontal, status === "completed" && theme.connectorCompletedStyle), "aria-hidden": "true" }))] }));
 });
 TimelineMarker.displayName = "TimelineMarker";
 

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

@@ -1,4 +1,4 @@
 import { Timeline } from "./Timeline";
-import { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineItemStatus } from "./Timeline.types";
+import { TimelineProps, TimelineItemProps, TimelineItemData, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineItemStatus } from "./Timeline.types";
 export { Timeline };
-export type { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineItemStatus, };
+export type { TimelineProps, TimelineItemProps, TimelineItemData, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineItemStatus, };

package/dist/components/effects/3d/index.d.ts

@@ -2,5 +2,3 @@ export { AIOrb } from "../AIOrb";
 export type { AIOrbProps, OrbState, DotSphereProps, LiquidProps, AuraProps } from "../AIOrb";
 export { Particles } from "../Particles";
 export type { ParticlesProps } from "../Particles";
-export { SpotlightBorder } from "../SpotlightBorder";
-export type { SpotlightBorderProps, SpotlightBorderVariation, } from "../SpotlightBorder";

package/dist/components/effects/3d/index.js

@@ -1,3 +1,2 @@
 export { AIOrb } from '../AIOrb/AIOrb.js';
 export { Particles } from '../Particles/Particles.js';
-export { SpotlightBorder } from '../SpotlightBorder/SpotlightBorder.js';

package/dist/components/effects/Aurora/Aurora.d.ts

@@ -1,24 +1,13 @@
 import React from 'react';
 import type { AuroraProps } from './Aurora.types';
 /**
- * Aurora creates an animated multi-color gradient background effect.
+ * Aurora creates a highly vibrant, WebGL-powered multi-color gradient background effect.
  *
- * Renders several large, blurred, semi-transparent blobs that slowly drift
- * and morph, producing an organic aurora-like glow. Ideal for hero sections
- * and decorative backgrounds.
+ * It uses a hardware-accelerated domain-warping Simplex Noise shader executing 100% on
+ * the GPU, achieving absolute 60/120 FPS butter-smooth rendering on all high-DPI screens.
+ * Features full support for custom blend modes and built-in stardust texture.
  *
- * The component renders as an absolutely-positioned layer with
- * `pointer-events-none`, so it will not interfere with interactive content.
- * The parent element should have `position: relative` and `overflow: hidden`.
- *
- * @example
- * ```tsx
- * <div className="relative overflow-hidden h-96 bg-gray-950">
- *   <Aurora />
- *   <div className="relative z-10 text-white p-8">
- *     <h1>Hero Content</h1>
- *   </div>
- * </div>
- * ```
+ * If WebGL is unavailable or reduced motion is preferred, the component gracefully falls back
+ * to a gorgeous static CSS gradient layout to preserve SEO, styling, and accessibility.
  */
 export declare const Aurora: React.FC<AuroraProps>;