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

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -43,13 +44,13 @@ const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
             var _a;
             const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
             const Icon = action.icon;
-            return (jsx(Button, { color: "primary", variant: "link", iconOnly: true, onClick: () => action.onClick(row), disabled: isDisabled, "aria-label": action.label, className: cn(action.variant === "danger"
+            return (jsx(Button, { color: "primary", variant: "ghost", iconOnly: true, onClick: () => action.onClick(row), disabled: isDisabled, "aria-label": action.label, className: cn(action.variant === "danger"
                     ? "text-[var(--color-danger-400)] hover:text-[var(--color-danger)] dark:text-[var(--color-danger-400)] dark:hover:text-[var(--color-danger-300)]"
                     : "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] dark:text-[var(--color-text-muted)] dark:hover:text-[var(--color-text-secondary)]"), children: jsx(Icon, { className: "size-4" }) }, action.id));
         });
     };
     const renderOverflowMenu = () => {
-        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "neutral", variant: "link", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(EllipsisHorizontalIcon, { className: "size-4" }) }) }), jsx(Dropdown.Menu, { "aria-label": "Row actions", children: sortedActions.map((action) => {
+        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "neutral", variant: "ghost", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(EllipsisHorizontalIcon, { className: "size-4" }) }) }), jsx(Dropdown.Menu, { "aria-label": "Row actions", children: sortedActions.map((action) => {
                         const Icon = action.icon;
                         return (jsx(Dropdown.Item, { itemKey: action.id, isDanger: action.variant === "danger", startContent: jsx(Icon, { className: "size-4" }), children: action.label }, action.id));
                     }) })] }));

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { TableRow } from './TableRow.js';
 import { getRowId } from './Table.utils.js';

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

@@ -6,7 +6,7 @@ import { InternalTableCellProps } from './Table.types';
  *
  * @internal This component is used internally by the Table component
  */
-declare function TableCellComponent<T extends Record<string, any>>({ column, row, rowId, isHeader, isFrozen, isLastFrozen, isSelected, theme, children, }: InternalTableCellProps<T>): React.ReactElement;
+declare function TableCellComponent<T extends Record<string, any>>({ column, row, rowId, isHeader, isFrozen, isLastFrozen, isSelected, sortDirection, theme, children, }: InternalTableCellProps<T>): React.ReactElement;
 declare namespace TableCellComponent {
     var displayName: string;
 }

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { UTILITY_COLUMN_ID, alignmentClasses } from './Table.utils.js';
-import { TableContext } from './Table.js';
+import { TableContext } from './TableContext.js';
 
 /**
  * Internal TableCell component used by the data-driven API
@@ -10,7 +11,7 @@ import { TableContext } from './Table.js';
  *
  * @internal This component is used internally by the Table component
  */
-function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = false, isLastFrozen = false, isSelected = false, theme, children, }) {
+function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = false, isLastFrozen = false, isSelected = false, sortDirection, theme, children, }) {
     const { isOverflowing } = useContext(TableContext);
     const overflowFrozenStyle = isOverflowing ? "backdrop-blur-md" : undefined;
     const Cell = isHeader ? 'th' : 'td';
@@ -18,7 +19,11 @@ function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = f
     // For header cells, render the column header content
     if (isHeader) {
         const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isFrozen && overflowFrozenStyle, isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), isLastFrozen && overflowFrozenStyle, column.align && alignmentClasses[column.align], isUtilityColumn && 'whitespace-nowrap');
-        return (jsx(Cell, { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: column.width }, role: "columnheader", "aria-label": typeof column.header === 'string' ? column.header : column.id, children: children || column.header }));
+        return (jsx(Cell, { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: column.width }, role: "columnheader", scope: "col", "aria-label": typeof column.header === 'string' ? column.header : column.id, "aria-sort": sortDirection
+                ? sortDirection === 'asc'
+                    ? 'ascending'
+                    : 'descending'
+                : undefined, children: children || column.header }));
     }
     // For data cells, extract value using accessor (string key or function)
     const value = typeof column.accessor === 'function'

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';

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

@@ -0,0 +1,11 @@
+import { TableContextType } from "./Table.types";
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ *
+ * Lives in its own module (not Table.tsx) so sub-components (TableCell,
+ * TableDeclarative) can consume the context without importing Table.tsx,
+ * which imports them back (circular dep). Table.tsx re-exports `TableContext`,
+ * so `from "./Table"` keeps working.
+ */
+export declare const TableContext: import("react").Context<TableContextType>;

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

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+import { tableTheme } from './Table.theme.js';
+
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ *
+ * Lives in its own module (not Table.tsx) so sub-components (TableCell,
+ * TableDeclarative) can consume the context without importing Table.tsx,
+ * which imports them back (circular dep). Table.tsx re-exports `TableContext`,
+ * so `from "./Table"` keeps working.
+ */
+const TableContext = createContext({
+    theme: tableTheme,
+    variant: "default",
+    freezeHeader: false,
+    freezeFirstColumn: false,
+    freezeLastColumn: false,
+});
+
+export { TableContext };

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

@@ -1,6 +1,7 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useContext } from 'react';
-import { TableContext } from './Table.js';
+import { TableContext } from './TableContext.js';
 import { cn } from '../../../utils/cn.js';
 import { alignmentClasses } from './Table.utils.js';
 import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/16/solid';
@@ -53,7 +54,7 @@ const Cell = React__default.memo(CellComponent);
 const HeaderCellComponent = ({ children, isFrozen = false, isLastFrozen = false, isSortable = false, sortDirection, onSort, align = 'left', width, className = '', }) => {
     const { theme } = useContext(TableContext);
     const headerCellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), align && alignmentClasses[align], isSortable && 'cursor-pointer', className);
-    return (jsx("th", { className: headerCellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, onClick: isSortable && onSort ? onSort : undefined, style: { width }, role: "columnheader", "aria-sort": sortDirection ? (sortDirection === 'asc' ? 'ascending' : 'descending') : undefined, children: jsxs("div", { className: cn("flex items-center", {
+    return (jsx("th", { className: headerCellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, onClick: isSortable && onSort ? onSort : undefined, style: { width }, role: "columnheader", scope: "col", "aria-sort": sortDirection ? (sortDirection === 'asc' ? 'ascending' : 'descending') : undefined, children: jsxs("div", { className: cn("flex items-center", {
                 'justify-end': align === 'right',
                 'justify-center': align === 'center',
             }), children: [children, isSortable && sortDirection && (jsx("span", { className: "ml-1", children: sortDirection === 'asc'

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

@@ -1,7 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useCallback } from 'react';
 import { inferFilterType, getDefaultOperator, isUnaryOperator, isBetweenOperator, getOperatorsForFilterType } from './Table.filterUtils.js';
 import { Button } from '../../core/Button/Button.js';
+import { Link } from '../../core/Link/Link.js';
 import { Input } from '../../forms/Input/Input.js';
 import '../../forms/Input/Input.theme.js';
 import { Select } from '../../forms/Select/Select.js';
@@ -95,8 +97,6 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             },
         ];
     });
-    if (filterableColumns.length === 0)
-        return null;
     const columnOptions = filterableColumns.map((col) => ({
         id: col.id,
         label: typeof col.header === "string" ? col.header : col.id,
@@ -203,6 +203,10 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
         setActiveFilters([]);
         onFilterChange([]);
     }, [onFilterChange]);
+    // Nothing to filter — bail AFTER all hooks so the hook count stays stable
+    // when columns arrive asynchronously (empty → populated must not throw).
+    if (filterableColumns.length === 0)
+        return null;
     const appliedFilterCount = activeFilters.filter((f) => {
         if (!f.columnId)
             return false;
@@ -210,7 +214,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return true;
         return f.value != null && f.value !== "";
     }).length;
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Body, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Body, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-surface-sunken)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
                                                 : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "or"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
@@ -218,8 +222,8 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
                                 const selectedColumn = getSelectedColumn(filter.columnId);
                                 const resolvedType = getResolvedFilterType(selectedColumn);
                                 const operatorOptions = getOperatorsForFilterType(resolvedType);
-                                return (jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Select, { value: filter.columnId, onChange: (value) => handleFilterColumnChange(filter.id, value), options: columnOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(Select, { value: filter.operator, onChange: (value) => handleFilterOperatorChange(filter.id, value), options: operatorOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(FilterValueInput, { filter: filter, column: selectedColumn, filterType: resolvedType, onValueChange: (value) => handleFilterValueChange(filter.id, value) }), jsx(Button, { color: "neutral", variant: "link", size: "sm", iconOnly: true, onClick: () => handleRemoveFilter(filter.id), "aria-label": "Remove filter", className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2.5 }) })] }, filter.id));
-                            }) }), jsxs("div", { className: "mt-3 flex items-center gap-4", children: [jsxs(Button, { color: "neutral", variant: "link", size: "sm", onClick: handleAddFilter, children: [jsx(PlusIcon, { className: "size-4" }), "Add Filter"] }), activeFilters.length > 0 && (jsx(Button, { color: "neutral", variant: "link", size: "sm", onClick: handleClearAll, children: "Clear All" }))] })] }) })] }));
+                                return (jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Select, { value: filter.columnId, onChange: (value) => handleFilterColumnChange(filter.id, value), options: columnOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(Select, { value: filter.operator, onChange: (value) => handleFilterOperatorChange(filter.id, value), options: operatorOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(FilterValueInput, { filter: filter, column: selectedColumn, filterType: resolvedType, onValueChange: (value) => handleFilterValueChange(filter.id, value) }), jsx(Button, { color: "neutral", variant: "ghost", size: "sm", iconOnly: true, onClick: () => handleRemoveFilter(filter.id), "aria-label": "Remove filter", className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2.5 }) })] }, filter.id));
+                            }) }), jsxs("div", { className: "mt-3 flex items-center gap-4", children: [jsxs(Link, { color: "neutral", size: "sm", onClick: handleAddFilter, children: [jsx(PlusIcon, { className: "size-4" }), "Add Filter"] }), activeFilters.length > 0 && (jsx(Link, { color: "neutral", size: "sm", onClick: handleClearAll, children: "Clear All" }))] })] }) })] }));
 }
 
 export { TableFilter };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { TableCell } from './TableCell.js';
@@ -49,7 +50,7 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHe
                     }, row: null, rowId: "", isHeader: true, theme: theme, children: jsx("div", { className: "flex items-center gap-2", children: selectable && selectionType === 'checkbox' && (jsx(Checkbox, { id: "table-select-all", name: "table-select-all", value: "select-all", checked: isAllSelected, indeterminate: isIndeterminate, onChange: handleSelectAll, "aria-label": "Select all rows" })) }) })), columns.map((column, index) => {
                     const currentSort = sortConfig.find(sort => sort.columnId === column.id);
                     const isSortable = column.sortable && onSortChange;
-                    return (jsx(TableCell, { column: column, row: null, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-sm", children: currentSort.direction === 'asc'
+                    return (jsx(TableCell, { column: column, row: null, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, sortDirection: currentSort === null || currentSort === void 0 ? void 0 : currentSort.direction, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-sm", children: currentSort.direction === 'asc'
                                         ? jsx(ChevronUpIcon, { className: "size-3.5" })
                                         : jsx(ChevronDownIcon, { className: "size-3.5" }) }))] })) : (column.header) }, column.id));
                 })] }) }));

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { Pagination } from '../../core/Pagination/Pagination.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { AnimatePresence, motion } from 'motion/react';

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

@@ -1,7 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { Button } from '../../core/Button/Button.js';
 import 'react';
+import { Link } from '../../core/Link/Link.js';
 import { cn } from '../../../utils/cn.js';
 
 /**
@@ -11,11 +13,11 @@ import { cn } from '../../../utils/cn.js';
 const TableSelectionHeader = ({ selectedCount, totalCount, selectedRows, bulkActions = [], onClearSelection, className, }) => {
     if (selectedCount === 0)
         return null;
-    return (jsxs("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-background-secondary)] z-10", className), children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-[var(--color-text-muted)] text-base border-r border-[var(--color-border)] pr-3", children: selectedCount === totalCount
+    return (jsxs("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-surface-raised)] z-10", className), children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-[var(--color-text-muted)] text-base border-r border-[var(--color-border)] pr-3", children: selectedCount === totalCount
                             ? `All ${selectedCount} selected`
                             : `${selectedCount} selected` }), bulkActions.length > 0 && (jsx("div", { className: "flex items-center gap-2", children: bulkActions.map((action) => {
                             return (jsx(Button, { color: "neutral", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm", children: action.label }, action.id));
-                        }) }))] }), jsxs(Button, { color: "primary", variant: "link", onClick: onClearSelection, "aria-label": "Clear selection", children: [jsx(XMarkIcon, { className: "size-4" }), "Clear"] })] }));
+                        }) }))] }), jsxs(Link, { color: "primary", onClick: onClearSelection, "aria-label": "Clear selection", children: [jsx(XMarkIcon, { className: "size-4" }), "Clear"] })] }));
 };
 
 export { TableSelectionHeader };

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

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect, useCallback, useMemo } from 'react';
 
 function useTableColumns({ columns, initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, }) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from 'react';
 
 function useTableExpansion({ expandedRows = [], onExpandedRowsChange, }) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useCallback, useMemo } from 'react';
 import { filterData } from '../Table.filterUtils.js';
 

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

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 
 function useTablePagination({ data, pagination, }) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo, useCallback } from 'react';
 import { getRowId } from '../Table.utils.js';
 

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

@@ -2,8 +2,7 @@ import { Table as Table$1 } from './Table.js';
 import { HeaderCell, Cell, Row, Body, Header } from './TableDeclarative.js';
 import { TableActions } from './TableActions.js';
 import 'react/jsx-runtime';
-import 'clsx';
-import 'tailwind-merge';
+import '../../../utils/cn.js';
 import 'react';
 import '../../core/Button/Button.js';
 import { TablePagination } from './TablePagination.js';

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Timeline item entry animation variants
  * Provides a fade + slide effect when items enter the viewport

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { TimelineProps, TimelineContextValue } from "./Timeline.types";
-export declare const useTimelineContext: () => TimelineContextValue;
+import { TimelineProps } from "./Timeline.types";
+export { useTimelineContext } from "./TimelineContext";
 export declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>> & {
     Item: React.ForwardRefExoticComponent<import("./Timeline.types").TimelineItemProps & React.RefAttributes<HTMLDivElement>>;
     Marker: React.ForwardRefExoticComponent<import("./Timeline.types").TimelineMarkerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,19 +1,14 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useContext, createContext, useMemo } from 'react';
+import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { timelineTheme } from './Timeline.theme.js';
+import { TimelineContext } from './TimelineContext.js';
+export { useTimelineContext } from './TimelineContext.js';
 import { TimelineItem } from './TimelineItem.js';
 import { TimelineMarker } from './TimelineMarker.js';
 import { TimelineContent } from './TimelineContent.js';
 
-// Create context for the main Timeline component
-const TimelineContext = createContext(undefined);
-const useTimelineContext = () => {
-    const ctx = useContext(TimelineContext);
-    if (!ctx)
-        throw new Error("Timeline compound components must be used within <Timeline>");
-    return ctx;
-};
 /**
  * Render a single data-driven item to the compound primitives. Keeps one
  * rendering path: `items` and the compound API both produce `Timeline.Item`s.
@@ -65,4 +60,4 @@ const Timeline = Object.assign(TimelineRoot, {
     Content: TimelineContent,
 });
 
-export { Timeline, useTimelineContext };
+export { Timeline };

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

@@ -1,27 +1,5 @@
-import { TimelineItemStatus } from "./Timeline.types";
-/**
- * Theme structure for the Timeline component
- */
-export interface TimelineTheme {
-    baseStyle: string;
-    baseStyleHorizontal: string;
-    itemStyle: string;
-    itemStyleHorizontal: 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;
-}
+import { TimelineTheme } from "./Timeline.types";
+export type { TimelineTheme } from "./Timeline.types";
 /**
  * Default theme for Timeline components
  * Uses CSS variables for design token integration

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

@@ -1,5 +1,4 @@
 import React from "react";
-import type { TimelineTheme } from "./Timeline.theme";
 /**
  * Layout orientation for the Timeline
  */
@@ -11,6 +10,31 @@ export type TimelineLayout = "vertical" | "horizontal";
  * - pending: item has not started yet (neutral/muted)
  */
 export type TimelineItemStatus = "completed" | "active" | "pending";
+/**
+ * Theme structure for the Timeline component
+ * (declared here, not in Timeline.theme.ts, so types→theme imports never
+ * happen — keeps the theme/types import graph one-directional)
+ */
+export interface TimelineTheme {
+    baseStyle: string;
+    baseStyleHorizontal: string;
+    itemStyle: string;
+    itemStyleHorizontal: 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;
+}
 /**
  * Theme overrides for Timeline
  */

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useTimelineContext } from './Timeline.js';
+import { useTimelineContext } from './TimelineContext.js';
 import { useTimelineItemContext } from './TimelineItem.js';
 
 const TimelineContent = React__default.forwardRef(({ children, className, ...props }, ref) => {

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

@@ -0,0 +1,3 @@
+import { TimelineContextValue } from "./Timeline.types";
+export declare const TimelineContext: import("react").Context<TimelineContextValue | undefined>;
+export declare const useTimelineContext: () => TimelineContextValue;

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

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+// Lives in its own module (not Timeline.tsx) so sub-components can consume the
+// context without importing Timeline.tsx, which imports them back (circular
+// dep). Timeline.tsx re-exports `useTimelineContext`, so existing import paths
+// keep working.
+const TimelineContext = createContext(undefined);
+const useTimelineContext = () => {
+    const ctx = useContext(TimelineContext);
+    if (!ctx)
+        throw new Error("Timeline compound components must be used within <Timeline>");
+    return ctx;
+};
+
+export { TimelineContext, useTimelineContext };

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { createContext, useRef, useState, useEffect, useContext } from 'react';
+import React__default, { createContext, useRef, useState, useEffect, useMemo, useContext } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { useTimelineContext } from './Timeline.js';
+import { useTimelineContext } from './TimelineContext.js';
 import { timelineHorizontalItemVariants, timelineItemVariants } from './Timeline.animations.js';
 import { stripMotionConflicts } from './Timeline.utils.js';
 
@@ -51,12 +52,12 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
         return timelineItemVariants;
     };
     // Context value for Marker and Content
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         status,
         index,
         isFirst,
         isLast,
-    };
+    }), [status, index, isFirst, isLast]);
     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", "aria-current": status === "active" ? "step" : undefined, initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));

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

@@ -1,9 +1,10 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { CheckIcon } from '@heroicons/react/24/solid';
 import { cn } from '../../../utils/cn.js';
-import { useTimelineContext } from './Timeline.js';
+import { useTimelineContext } from './TimelineContext.js';
 import { useTimelineItemContext } from './TimelineItem.js';
 import { timelineMarkerVariants } from './Timeline.animations.js';
 import { stripMotionConflicts } from './Timeline.utils.js';

package/dist/components/effects/AIOrb/hooks/useOrbState.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useCallback } from 'react';
 
 /**

package/dist/components/effects/AIOrb/variants/Aura/Aura.js

@@ -1,7 +1,10 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { useIsClient } from '../../../../../hooks/useIsClient.js';
 import { useOrbState } from '../../hooks/useOrbState.js';
-import { ShaderCanvas } from './ShaderCanvas.js';
+import { ShaderCanvas } from '../../../shared/ShaderCanvas/ShaderCanvas.js';
 import { auraFragmentShader } from './Aura.shaders.js';
 
 const STATE_CONFIG = {
@@ -18,6 +21,8 @@ function hexToRgb(hex) {
 }
 // ── Aura component ───────────────────────────────────────────────────────────
 const Aura = ({ color = "#1FD5F9", colorShift = 0.3, speed = 10, amplitude = 2.0, frequency = 0.5, scale = 0.2, blur = 1.0, brightness = 1.5, themeMode = "dark", state, }) => {
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
     const rgb = useMemo(() => hexToRgb(color), [color]);
     const propValues = useMemo(() => ({ speed, amplitude, frequency, brightness, scale }), [speed, amplitude, frequency, brightness, scale]);
     const { valuesRef, tick } = useOrbState(state, STATE_CONFIG, propValues);
@@ -56,7 +61,11 @@ const Aura = ({ color = "#1FD5F9", colorShift = 0.3, speed = 10, amplitude = 2.0
                 }
                 lastT = now;
                 const v = valuesRef.current;
-                uniforms.u_speed = v.speed;
+                // u_speed is the shader's sole gate on iTime-driven motion (see
+                // Aura.shaders.ts: animTime = t * 0.1 * u_speed, the only place iTime
+                // reaches the turbulence). Zeroing it freezes the wave motion outright
+                // while amplitude/frequency/brightness/scale keep reflecting state.
+                uniforms.u_speed = shouldReduceMotion ? 0 : v.speed;
                 uniforms.u_amplitude = v.amplitude;
                 uniforms.u_frequency = v.frequency;
                 uniforms.u_brightness = v.brightness;
@@ -68,8 +77,8 @@ const Aura = ({ color = "#1FD5F9", colorShift = 0.3, speed = 10, amplitude = 2.0
             },
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [tick]);
-    return (jsx("div", { className: "absolute inset-0", children: jsx(ShaderCanvas, { fragmentShader: auraFragmentShader, uniformsRef: tickingRef }) }));
+    }, [tick, shouldReduceMotion]);
+    return (jsx("div", { className: "absolute inset-0", "aria-hidden": "true", children: isClient && (jsx(ShaderCanvas, { fragmentShader: auraFragmentShader, uniformsRef: tickingRef })) }));
 };
 
 export { Aura };

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.d.ts

@@ -1,3 +1,10 @@
 import React from "react";
 import type { DotSphereProps } from "./DotSphere.types";
+/**
+ * Lazy-loading shell. The actual scene (`OrbScene` + `<Canvas>`) lives in
+ * `DotSphere.impl`, which imports `@react-three/fiber` and `three` — dynamically
+ * imported here on mount so that rendering a sibling AIOrb variant that doesn't
+ * need three (e.g. `AIOrb.Aura`, raw WebGL) never pulls that bundle in. Mirrors
+ * `TiltCard`'s `glow` lazy-load (see `TiltCard.tsx` / `TiltCard.glow.ts`).
+ */
 export declare const DotSphere: React.FC<DotSphereProps>;

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.impl.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DotSphereProps } from "./DotSphere.types";
+export declare const DotSphereImpl: React.FC<DotSphereProps>;