flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/core/Stepper/StepperItem.js

@@ -0,0 +1,112 @@
+import React__default, { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import '../../../icons/core/PlusIcon.js';
+import '../../../icons/core/MinusIcon.js';
+import '../../../icons/core/SearchIcon.js';
+import '../../../icons/core/LockIcon.js';
+import '../../../icons/core/DollarIcon.js';
+import { TickIcon } from '../../../icons/core/TickIcon.js';
+import { LockClosedIcon } from '@heroicons/react/16/solid';
+import { stepperTheme } from './Stepper.theme.js';
+
+/** Convert status to theme key (handles hyphenated values) */
+const getStatusKey = (status) => {
+    if (status === "active-complete")
+        return "activeComplete";
+    return status;
+};
+/**
+ * StepperItem component for rendering an individual step with consolidated rendering logic
+ */
+const StepperItem = ({ step, status, nextStepStatus, isLast, stepNumber, lockCompletedSteps = false, className = "", }) => {
+    // Animation states - consolidated from separate components
+    const [visualIconStatus, setVisualIconStatus] = useState(status);
+    const [visualContentStatus, setVisualContentStatus] = useState(status);
+    // Consolidated animation logic from IconCircle and StepContent
+    useEffect(() => {
+        const shouldAnimateIcon = status === "current" || status === "active-complete";
+        if (shouldAnimateIcon) {
+            // Icon animation delay: 0.5 seconds
+            const iconTimer = setTimeout(() => {
+                setVisualIconStatus(status);
+            }, 500);
+            return () => clearTimeout(iconTimer);
+        }
+        else {
+            setVisualIconStatus(status);
+        }
+    }, [status]);
+    useEffect(() => {
+        const shouldAnimateContent = status === "current" || status === "active-complete";
+        if (shouldAnimateContent) {
+            // Content animation delay: 1 second
+            const contentTimer = setTimeout(() => {
+                setVisualContentStatus(status);
+            }, 1000);
+            return () => clearTimeout(contentTimer);
+        }
+        else {
+            setVisualContentStatus(status);
+        }
+    }, [status]);
+    // Helper function to render icon circle (consolidated from IconCircle.tsx)
+    const renderIcon = () => {
+        const statusKey = getStatusKey(visualIconStatus);
+        return (React__default.createElement("div", { className: cn(stepperTheme.iconBaseStyle, stepperTheme.statusStyles[statusKey]) }, visualIconStatus === "complete" ||
+            visualIconStatus === "active-complete" ? (React__default.createElement(TickIcon, { size: "sm", className: "text-white", "aria-hidden": "true", strokeWidth: 3 })) : (React__default.createElement("div", { className: stepperTheme.iconNumberStyle }, stepNumber))));
+    };
+    // Helper function to render content (consolidated from StepContent.tsx)
+    const renderContent = () => {
+        const statusKey = getStatusKey(visualContentStatus);
+        return (React__default.createElement("div", { className: stepperTheme.contentStyle },
+            React__default.createElement("div", { className: cn(stepperTheme.labelBaseStyle, stepperTheme.labelStatusStyles[statusKey]) }, step.label),
+            step.description && (React__default.createElement("div", { className: stepperTheme.descriptionStyle }, step.description))));
+    };
+    // Helper function to render connector line (consolidated from ConnectorLine.tsx)
+    const renderConnector = () => {
+        // If this is the last item, don't render a connector
+        if (isLast)
+            return null;
+        // Determine if gradient should be used (connecting completed step to current step)
+        const isGradient = (status === "complete" || status === "active-complete") &&
+            nextStepStatus === "current";
+        // Get the appropriate connector styles
+        const getConnectorStyles = (forStatus, useGradient) => {
+            const key = getStatusKey(forStatus);
+            if (useGradient) {
+                return cn(stepperTheme.connectorBaseStyle, stepperTheme.connectorStatusStyles.gradient);
+            }
+            return cn(stepperTheme.connectorBaseStyle, stepperTheme.connectorStatusStyles[key]);
+        };
+        // Only animate the connector line when it's a completed step connecting to the current step
+        const shouldAnimate = status === "complete" && nextStepStatus === "current";
+        if (shouldAnimate) {
+            return (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { "aria-hidden": "true", className: getConnectorStyles("upcoming", false) }),
+                React__default.createElement(motion.div, { "aria-hidden": "true", className: cn(getConnectorStyles(status, isGradient), "origin-top"), initial: { scaleY: 0, opacity: 0 }, animate: { scaleY: 1, opacity: 1 }, transition: { duration: 0.8 } })));
+        }
+        // Non-animated connector - immediately show at full height
+        return (React__default.createElement("div", { "aria-hidden": "true", className: getConnectorStyles(status, isGradient) }));
+    };
+    // Content that goes inside either the <a> or <div> wrapper
+    const innerContent = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "flex h-9 items-center", "aria-hidden": "true" },
+            React__default.createElement("div", { className: "relative" },
+                renderIcon(),
+                lockCompletedSteps &&
+                    (visualIconStatus === "complete" ||
+                        visualIconStatus === "active-complete") && (React__default.createElement(motion.div, { className: "absolute -right-1 -bottom-1 bg-[var(--color-background)]/70 backdrop-blur-sm rounded-full p-0.5 z-10", initial: { opacity: 0, translateY: 4 }, animate: { opacity: 1, translateY: 0 }, transition: {
+                        type: "spring",
+                        stiffness: 400,
+                        damping: 17,
+                        duration: 0.5,
+                    } },
+                    React__default.createElement(LockClosedIcon, { className: "size-3 text-[var(--color-text-secondary)] shadow-sm", "aria-hidden": "true" }))))),
+        renderContent()));
+    return (React__default.createElement(React__default.Fragment, null,
+        renderConnector(),
+        step.href ? (React__default.createElement("a", { href: step.href, className: cn("group relative flex", step.description ? "items-start" : "items-center", className), "aria-current": status === "current" ? "step" : undefined }, innerContent)) : (React__default.createElement("div", { className: cn("group relative flex", step.description ? "items-start" : "items-center", className), "aria-current": status === "current" ? "step" : undefined }, innerContent))));
+};
+
+export { StepperItem };

package/dist/components/core/Stepper/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Stepper';
+export { Stepper } from './Stepper';
 export type { StepperProps, StepData } from './Stepper.types';

package/dist/components/core/Table/Table.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+import { TableProps, TableContextType } from "./Table.types";
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ */
+declare const TableContext: React.Context<TableContextType>;
+/**
+ * Enhanced Table component with dual API support (declarative and data-driven)
+ *
+ * Features:
+ * - Dual API: Use with data/columns props OR declarative Table.Header/Body/Row/Cell components
+ * - Stable row identification using rowKey prop for consistent React reconciliation
+ * - Column management with visibility controls
+ * - Sorting, filtering, row selection, and expansion
+ * - Frozen columns and headers
+ * - Pagination support
+ * - Full accessibility compliance (WCAG 2.1 AA)
+ * - Theme customization with className overrides
+ *
+ * @example
+ * // Data-driven API with stable row keys
+ * <Table data={data} columns={columns} rowKey="id" sortable selectable />
+ *
+ * // Using a function for complex row keys
+ * <Table
+ *   data={data}
+ *   columns={columns}
+ *   rowKey={(row, index) => `${row.category}-${row.id}`}
+ *   sortable
+ *   selectable
+ * />
+ *
+ * // Declarative API
+ * <Table>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John Doe</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ */
+declare function TableComponent<T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
+declare namespace TableComponent {
+    var displayName: string;
+}
+declare const Table: typeof TableComponent;
+export { Table };
+export { TableContext };

package/dist/components/core/Table/Table.js

@@ -0,0 +1,223 @@
+import React__default, { createContext, useState, useEffect } from 'react';
+import { tableTheme } from './Table.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { TableHeader } from './components/core/TableHeader.js';
+import { TableBody } from './components/core/TableBody.js';
+import { TableSelectionHeader } from './components/TableSelectionHeader/TableSelectionHeader.js';
+import { Popover } from '../Popover/Popover.js';
+import '../Popover/PopoverContext.js';
+import { Cog6ToothIcon } from '@heroicons/react/24/outline';
+import { Button } from '../Button/Button.js';
+import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
+import { Sortable, SortableItem } from '../Sortable/Sortable.js';
+
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ */
+const TableContext = createContext({
+    theme: tableTheme,
+    variant: "default",
+    freezeHeader: false,
+    freezeFirstColumn: false,
+    freezeLastColumn: false,
+});
+/**
+ * Enhanced Table component with dual API support (declarative and data-driven)
+ *
+ * Features:
+ * - Dual API: Use with data/columns props OR declarative Table.Header/Body/Row/Cell components
+ * - Stable row identification using rowKey prop for consistent React reconciliation
+ * - Column management with visibility controls
+ * - Sorting, filtering, row selection, and expansion
+ * - Frozen columns and headers
+ * - Pagination support
+ * - Full accessibility compliance (WCAG 2.1 AA)
+ * - Theme customization with className overrides
+ *
+ * @example
+ * // Data-driven API with stable row keys
+ * <Table data={data} columns={columns} rowKey="id" sortable selectable />
+ *
+ * // Using a function for complex row keys
+ * <Table
+ *   data={data}
+ *   columns={columns}
+ *   rowKey={(row, index) => `${row.category}-${row.id}`}
+ *   sortable
+ *   selectable
+ * />
+ *
+ * // Declarative API
+ * <Table>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John Doe</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ */
+function TableComponent(props) {
+    var _a;
+    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
+    // Store the initial state for reset functionality
+    const defaultVisibleColumns = initialVisibleColumns || (columns ? columns.map((col) => col.id) : []);
+    const defaultColumnOrder = columns ? columns.map((col) => col.id) : [];
+    const [visibleColumns, setVisibleColumns] = useState(defaultVisibleColumns);
+    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
+    // Sync column order when columns prop changes
+    useEffect(() => {
+        if (columns) {
+            setColumnOrder(columns.map((col) => col.id));
+        }
+    }, [columns]);
+    // Determine which API is being used (declarative vs data-driven)
+    const isDeclarativeAPI = !!children;
+    // Merge global theme with component-specific overrides
+    const theme = {
+        ...tableTheme,
+        ...(themeOverrides || {}),
+    };
+    // Get base classes from theme
+    const baseClasses = theme.baseStyle || "";
+    const variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
+    /**
+     * Handle column visibility changes from the column manager
+     * Updates both internal state and calls the external callback
+     */
+    const handleVisibleColumnsChange = (newVisibleColumns) => {
+        setVisibleColumns(newVisibleColumns);
+        onVisibleColumnsChange === null || onVisibleColumnsChange === void 0 ? void 0 : onVisibleColumnsChange(newVisibleColumns);
+    };
+    /**
+     * Handle column reordering from the column manager
+     * Updates column order and calls the external callback
+     */
+    const handleColumnReorder = (fromIndex, toIndex) => {
+        const newColumnOrder = [...columnOrder];
+        const [movedColumn] = newColumnOrder.splice(fromIndex, 1);
+        newColumnOrder.splice(toIndex, 0, movedColumn);
+        setColumnOrder(newColumnOrder);
+        onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(fromIndex, toIndex);
+    };
+    /**
+     * Handle column order reset from the column manager
+     * Resets column order back to the original columns order
+     */
+    const handleColumnOrderReset = () => {
+        if (columns) {
+            const originalOrder = columns.map((col) => col.id);
+            setColumnOrder(originalOrder);
+        }
+    };
+    /**
+     * Handle clearing all row selections
+     */
+    const handleClearSelection = () => {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
+    };
+    /**
+     * Handle toggling column visibility
+     * Prevents toggling locked columns
+     */
+    const handleToggleColumn = (columnId) => {
+        const column = columns === null || columns === void 0 ? void 0 : columns.find(col => col.id === columnId);
+        if (column === null || column === void 0 ? void 0 : column.locked)
+            return; // Prevent toggling locked columns
+        const newVisibleColumns = visibleColumns.includes(columnId)
+            ? visibleColumns.filter((id) => id !== columnId)
+            : [...visibleColumns, columnId];
+        handleVisibleColumnsChange(newVisibleColumns);
+    };
+    /**
+     * Handle resetting columns to default visibility and order
+     */
+    const handleResetToDefault = () => {
+        // Get all locked column IDs to ensure they remain visible
+        const lockedColumnIds = (columns === null || columns === void 0 ? void 0 : columns.filter(col => col.locked).map(col => col.id)) || [];
+        // Combine initial visible columns with locked columns (remove duplicates)
+        const resetVisibleColumns = Array.from(new Set([...defaultVisibleColumns, ...lockedColumnIds]));
+        // Reset to initial visible columns with locked columns guaranteed to be visible
+        handleVisibleColumnsChange(resetVisibleColumns);
+        // Reset column order to default
+        handleColumnOrderReset();
+    };
+    // Filter and order columns based on column order and visibility settings
+    const visibleColumnsList = columns && columnOrder.length > 0
+        ? columnOrder
+            .map(colId => columns.find(col => col.id === colId))
+            .filter((col) => col !== undefined && visibleColumns.includes(col.id))
+        : (columns ? columns.filter((col) => visibleColumns.includes(col.id)) : []);
+    // Calculate paginated data slice based on current page and page size
+    const paginatedData = pagination && data
+        ? data.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
+        : data || [];
+    // Create context value with all table configuration and callbacks
+    const contextValue = {
+        theme,
+        variant,
+        freezeHeader,
+        freezeFirstColumn,
+        freezeLastColumn,
+        sortable,
+        sortConfig,
+        onSortChange,
+        filterable,
+        filterConfig,
+        onFilterChange,
+        expandable,
+        expandedRows,
+        onExpandedRowsChange,
+        selectable,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    };
+    return (React__default.createElement(TableContext.Provider, { value: contextValue },
+        React__default.createElement("div", { className: "relative" },
+            !isDeclarativeAPI && columns && (React__default.createElement("div", { className: theme.columnManagerContainer },
+                React__default.createElement(Popover, { placement: "bottom-end", offset: 8 },
+                    React__default.createElement(Popover.Trigger, null,
+                        React__default.createElement(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility" },
+                            React__default.createElement(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }),
+                            "Manage Columns")),
+                    React__default.createElement(Popover.Content, { className: "p-0" },
+                        React__default.createElement("div", { className: "w-64 p-3 overflow-hidden bg-white", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true" },
+                            React__default.createElement("div", { id: "column-manager-title", className: "text-xs uppercase font-bold mb-3 text-[var(--color-text-placeholder)]" }, "Manage Columns"),
+                            React__default.createElement("div", { id: "column-manager-description", className: "sr-only" }, "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden."),
+                            React__default.createElement("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options" }, onColumnReorder ? (React__default.createElement(Sortable, { onReorder: handleColumnReorder, showDragHandle: true, className: "space-y-0.5" }, (columnOrder.length > 0
+                                ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
+                                : columns).map((column) => {
+                                const isVisible = visibleColumns.includes(column.id);
+                                const isLocked = column.locked === true;
+                                const displayName = typeof column.header === "string" ? column.header : column.id;
+                                return (React__default.createElement(SortableItem, { key: column.id, id: column.id, disabled: isLocked, className: `bg-white hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${isLocked ? "bg-gray-50" : ""}` },
+                                    React__default.createElement(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => handleToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? "disabled" : "default" })));
+                            }))) : ((columnOrder.length > 0
+                                ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
+                                : columns).map((column) => {
+                                const isVisible = visibleColumns.includes(column.id);
+                                const isLocked = column.locked === true;
+                                const displayName = typeof column.header === "string" ? column.header : column.id;
+                                return (React__default.createElement("div", { key: column.id, className: `bg-white hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${isLocked ? "bg-gray-50" : ""}` },
+                                    React__default.createElement(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => handleToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? "disabled" : "default" })));
+                            }))),
+                            React__default.createElement("div", { className: "mt-3 flex justify-end" },
+                                React__default.createElement(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: handleResetToDefault }, "Reset to Default"))))))),
+            !isDeclarativeAPI && selectable && selectedRows.length > 0 && (React__default.createElement(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })),
+            React__default.createElement("div", { className: "overflow-x-auto" },
+                React__default.createElement("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length }, isDeclarativeAPI ? (children) : (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(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 }),
+                    React__default.createElement(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 }))))))));
+}
+// Set display name for dev tools and Storybook
+TableComponent.displayName = "Table";
+// Export as default
+const Table = TableComponent;
+
+export { Table, TableContext };

package/dist/components/core/Table/Table.theme.js

@@ -0,0 +1,63 @@
+const tableTheme = {
+    // Base styles for the table
+    // Light: white background | Dark: neutral-900 background
+    baseStyle: "w-full border-collapse text-sm " +
+        "bg-white dark:bg-[var(--color-neutral-900)]",
+    // Variant styles
+    // Each variant gets dark mode border colors and alternate row colors
+    variants: {
+        default: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_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)] " +
+            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        bordered: "border border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:border [&_th]:border " +
+            "[&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] " +
+            "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)] " +
+            "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
+    },
+    // Header styles
+    // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
+    headerStyle: "text-left font-medium sticky top-0 border-b " +
+        "text-[var(--color-text-primary)] border-[var(--color-border)] " +
+        "dark:text-[var(--color-neutral-200)] dark:border-[var(--color-neutral-700)]",
+    // Cell styles
+    // Light: primary text, light border | Dark: neutral-300 text, neutral-700 border
+    cellStyle: "border-t " +
+        "text-[var(--color-text-primary)] border-[var(--color-border)] " +
+        "dark:text-[var(--color-neutral-300)] dark:border-[var(--color-neutral-700)]",
+    // Row styles
+    // Light: neutral-50 hover | Dark: neutral-800 hover
+    rowStyle: "transition-all duration-300 relative " +
+        "hover:bg-[var(--color-neutral-50)] dark:hover:bg-[var(--color-neutral-800)]",
+    // Selected row styles
+    // Light: primary-50 background | Dark: primary-900/50 background with adjusted shadow
+    selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)] " +
+        "bg-[var(--color-primary-50)]/50 hover:bg-[var(--color-primary-50)] " +
+        "dark:bg-[var(--color-primary-900)]/30 dark:hover:bg-[var(--color-primary-900)]/50",
+    hoverRowStyle: "cursor-pointer",
+    // Frozen column styles
+    // Light: white/80 with light outline | Dark: neutral-900/80 with dark outline
+    frozenColumnStyle: "sticky left-0 z-10 backdrop-blur-sm shadow-l-xl outline outline-1 " +
+        "bg-white/80 outline-[var(--color-neutral-200)] " +
+        "dark:bg-[var(--color-neutral-900)]/80 dark:outline-[var(--color-neutral-700)]",
+    lastFrozenColumnStyle: "sticky right-0 z-10 backdrop-blur-sm shadow-r-xl outline outline-1 " +
+        "bg-white/80 outline-[var(--color-neutral-200)] " +
+        "dark:bg-[var(--color-neutral-900)]/80 dark:outline-[var(--color-neutral-700)]",
+    frozenHeaderStyle: "sticky top-0 z-20 " +
+        "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
+    columnManagerButton: "inline-flex items-center gap-2 rounded-md 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)]",
+    columnManagerContainer: "mb-4 flex justify-end",
+};
+
+export { tableTheme };