flikkui 0.1.0-beta.11

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

@@ -0,0 +1,9 @@
+import { Variants } from "motion/react";
+/**
+ * Animation variants for the connector line
+ */
+export declare const connectorLineVariants: Variants;
+/**
+ * Animation variants for the step circle
+ */
+export declare const stepCircleVariants: Variants;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StepperProps } from './Stepper.types';
+/**
+ * Stepper component for displaying multi-step vertical progress
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   activeStep={1}
+ *   steps={[
+ *     { label: "Create account", completed: true },
+ *     { label: "Profile information", active: true },
+ *     { label: "Business information" },
+ *     { label: "Theme" },
+ *     { label: "Preview" }
+ *   ]}
+ * />
+ * ```
+ */
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;
+export { Stepper };

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

@@ -0,0 +1,60 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { stepperTheme } from './Stepper.theme.js';
+import { StepperItem } from './StepperItem.js';
+
+/**
+ * Stepper component for displaying multi-step vertical progress
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   activeStep={1}
+ *   steps={[
+ *     { label: "Create account", completed: true },
+ *     { label: "Profile information", active: true },
+ *     { label: "Business information" },
+ *     { label: "Theme" },
+ *     { label: "Preview" }
+ *   ]}
+ * />
+ * ```
+ */
+var Stepper = React__default.forwardRef(function (_a, ref) {
+    var activeStep = _a.activeStep, steps = _a.steps, _b = _a.lockCompletedSteps, lockCompletedSteps = _b === void 0 ? false : _b, className = _a.className, props = __rest(_a, ["activeStep", "steps", "lockCompletedSteps", "className"]);
+    // Helper function to determine step status
+    var getStepStatus = function (index, step) {
+        if (step.completed && (step.active || index === activeStep))
+            return 'active-complete';
+        if (step.completed || index < activeStep)
+            return 'complete';
+        if (step.active || index === activeStep)
+            return 'current';
+        return 'upcoming';
+    };
+    return (
+    // Main navigation wrapper with ARIA label for accessibility
+    React__default.createElement("nav", __assign({ ref: ref, "aria-label": "Progress", className: cn(stepperTheme.baseStyle, className) }, props),
+        React__default.createElement("ol", { role: "list", className: "" }, steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
+            var status = getStepStatus(stepIdx, step);
+            var isLast = stepIdx === steps.length - 1;
+            // Get the status of the next step (if there is one)
+            var nextStepStatus = !isLast
+                ? getStepStatus(stepIdx + 1, steps[stepIdx + 1])
+                : undefined;
+            return (
+            // Individual step container
+            React__default.createElement("li", { key: step.label, className: cn(stepperTheme.itemStyle, !isLast ? 'pb-10' : '') },
+                React__default.createElement(StepperItem, { step: step, status: status, nextStepStatus: nextStepStatus, isLast: isLast, stepNumber: stepIdx + 1, lockCompletedSteps: lockCompletedSteps })));
+        })),
+        React__default.createElement("div", { className: "text-xs text-[var(--color-text-placeholder)] font-medium mt-4" },
+            "Step ",
+            activeStep + 1,
+            " of ",
+            steps.length)));
+});
+// Set display name for dev tools and Storybook
+Stepper.displayName = "Stepper";
+
+export { Stepper };

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

@@ -0,0 +1,19 @@
+/**
+ * Simplified theme structure for the Stepper component following optimal patterns
+ */
+interface StepperTheme {
+    baseStyle: string;
+    itemStyle: string;
+    iconStyle: string;
+    iconNumberStyle: string;
+    connectorStyle: string;
+    contentStyle: string;
+    labelStyle: string;
+    descriptionStyle: string;
+}
+/**
+ * Default theme for the Stepper component
+ * Using data-attribute selectors for status-based styling (optimal shadcn approach)
+ */
+export declare const stepperTheme: StepperTheme;
+export {};

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

@@ -0,0 +1,24 @@
+/**
+ * Default theme for the Stepper component
+ * Using data-attribute selectors for status-based styling (optimal shadcn approach)
+ */
+var stepperTheme = {
+    // Base stepper container styles
+    baseStyle: "",
+    // Individual step item styles
+    itemStyle: "relative",
+    // Icon circle styles with data-attribute status selectors
+    iconStyle: "relative z-10 flex size-8 items-center justify-center rounded-full transition-all duration-300 data-[status=complete]:bg-[var(--color-success)] data-[status=complete]:ring-2 data-[status=complete]:ring-white data-[status=current]:border data-[status=current]:border-[var(--color-primary)] data-[status=current]:bg-white data-[status=current]:shadow-xl data-[status=current]:shadow-[var(--color-primary)]/20 data-[status=current]:ring-4 data-[status=current]:ring-[var(--color-primary)]/20 data-[status=upcoming]:border data-[status=upcoming]:border-[var(--color-border)] data-[status=upcoming]:bg-white data-[status=upcoming]:text-[var(--color-text-secondary)]/70 data-[status=active-complete]:bg-[var(--color-success)] data-[status=active-complete]:ring-2 data-[status=active-complete]:ring-white data-[status=active-complete]:shadow-xl data-[status=active-complete]:shadow-[var(--color-success)]/20 data-[status=active-complete]:ring-4 data-[status=active-complete]:ring-[var(--color-success)]/20",
+    // Icon number text styles
+    iconNumberStyle: "font-bold text-sm data-[status=current]:text-[var(--color-text-primary)]",
+    // Connector line styles with status-based styling
+    connectorStyle: "absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5 data-[status=complete]:bg-[var(--color-success)] data-[status=active-complete]:bg-[var(--color-success)] data-[status=current]:border-l-2 data-[status=current]:border-dashed data-[status=current]:border-[var(--color-border)] data-[status=current]:w-auto data-[status=upcoming]:border-l-2 data-[status=upcoming]:border-dashed data-[status=upcoming]:border-[var(--color-border)] data-[status=upcoming]:w-auto data-[connector=gradient]:bg-gradient-to-b data-[connector=gradient]:from-[var(--color-success)] data-[connector=gradient]:to-[var(--color-primary)]",
+    // Step content container styles
+    contentStyle: "ml-4 flex min-w-0 flex-col justify-center",
+    // Label text styles with status-based colors
+    labelStyle: "text-base font-medium data-[status=complete]:text-[var(--color-text-primary)] data-[status=current]:text-[var(--color-primary)] data-[status=active-complete]:text-[var(--color-text-primary)] data-[status=upcoming]:text-[var(--color-text-secondary)]",
+    // Description text styles
+    descriptionStyle: "text-sm text-[var(--color-text-secondary)]",
+};
+
+export { stepperTheme };

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

@@ -0,0 +1,31 @@
+import React from "react";
+/**
+ * Step data interface for the stepper
+ */
+export interface StepData {
+    /** The step label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Whether this step is completed */
+    completed?: boolean;
+    /** Whether this step is active */
+    active?: boolean;
+    /** Optional href for clickable steps */
+    href?: string;
+    /** Whether the step is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for the Stepper component
+ */
+export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
+    /** Current active step index (0-based) */
+    activeStep: number;
+    /** Array of step data */
+    steps: StepData[];
+    /** Whether to show lock icons on completed steps */
+    lockCompletedSteps?: boolean;
+    /** Additional class name */
+    className?: string;
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { StepData } from "./Stepper.types";
+/**
+ * Props for the StepperItem component
+ */
+export interface StepperItemProps {
+    /** Step data */
+    step: StepData;
+    /** Status of the step: 'complete', 'current', 'upcoming', or 'active-complete' */
+    status: "complete" | "current" | "upcoming" | "active-complete";
+    /** Status of the next step (if any) */
+    nextStepStatus?: "complete" | "current" | "upcoming" | "active-complete";
+    /** Whether this is the last step in the sequence */
+    isLast: boolean;
+    /** Step number (1-based index) */
+    stepNumber: number;
+    /** Whether to show lock icons on completed steps */
+    lockCompletedSteps?: boolean;
+    /** Additional className to apply */
+    className?: string;
+}
+/**
+ * StepperItem component for rendering an individual step with consolidated rendering logic
+ */
+declare const StepperItem: React.FC<StepperItemProps>;
+export { StepperItem };

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

@@ -0,0 +1,90 @@
+import React__default, { useState, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import '../../../node_modules/tslib/tslib.es6.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 { stepperTheme } from './Stepper.theme.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/16/solid/esm/LockClosedIcon.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * StepperItem component for rendering an individual step with consolidated rendering logic
+ */
+var StepperItem = function (_a) {
+    var step = _a.step, status = _a.status, nextStepStatus = _a.nextStepStatus, isLast = _a.isLast, stepNumber = _a.stepNumber, _b = _a.lockCompletedSteps, lockCompletedSteps = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
+    // Animation states - consolidated from separate components
+    var _d = useState(status), visualIconStatus = _d[0], setVisualIconStatus = _d[1];
+    var _e = useState(status), visualContentStatus = _e[0], setVisualContentStatus = _e[1];
+    // Consolidated animation logic from IconCircle and StepContent
+    useEffect(function () {
+        var shouldAnimateIcon = status === "current" || status === "active-complete";
+        if (shouldAnimateIcon) {
+            // Icon animation delay: 0.5 seconds
+            var iconTimer_1 = setTimeout(function () {
+                setVisualIconStatus(status);
+            }, 500);
+            return function () { return clearTimeout(iconTimer_1); };
+        }
+        else {
+            setVisualIconStatus(status);
+        }
+    }, [status]);
+    useEffect(function () {
+        var shouldAnimateContent = status === "current" || status === "active-complete";
+        if (shouldAnimateContent) {
+            // Content animation delay: 1 second
+            var contentTimer_1 = setTimeout(function () {
+                setVisualContentStatus(status);
+            }, 1000);
+            return function () { return clearTimeout(contentTimer_1); };
+        }
+        else {
+            setVisualContentStatus(status);
+        }
+    }, [status]);
+    // Helper function to render icon circle (consolidated from IconCircle.tsx)
+    var renderIcon = function () { return (React__default.createElement("div", { className: cn(stepperTheme.iconStyle), "data-status": visualIconStatus }, 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, "data-status": visualIconStatus }, stepNumber)))); };
+    // Helper function to render content (consolidated from StepContent.tsx)
+    var renderContent = function () { return (React__default.createElement("div", { className: stepperTheme.contentStyle },
+        React__default.createElement("div", { className: stepperTheme.labelStyle, "data-status": visualContentStatus }, step.label),
+        step.description && (React__default.createElement("div", { className: stepperTheme.descriptionStyle }, step.description)))); };
+    // Helper function to render connector line (consolidated from ConnectorLine.tsx)
+    var renderConnector = function () {
+        // 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)
+        var isGradient = (status === "complete" || status === "active-complete") && nextStepStatus === "current";
+        // Only animate the connector line when it's a completed step connecting to the current step
+        var shouldAnimate = (status === "complete" && nextStepStatus === "current");
+        if (shouldAnimate) {
+            return (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { "aria-hidden": "true", className: stepperTheme.connectorStyle, "data-status": "upcoming" }),
+                React__default.createElement(motion.div, { "aria-hidden": "true", className: cn(stepperTheme.connectorStyle, "origin-top"), "data-status": status, "data-connector": isGradient ? "gradient" : "solid", 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: stepperTheme.connectorStyle, "data-status": status, "data-connector": isGradient ? "gradient" : "solid" }));
+    };
+    // Content that goes inside either the <a> or <div> wrapper
+    var 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-white/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(ForwardRef, { 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

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

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

@@ -0,0 +1,21 @@
+import { Variants } from "motion/react";
+/**
+ * Get table row animation variants for row transitions (selection, expansion, etc.)
+ */
+export declare const getTableRowVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+/**
+ * Get table expanded row animation variants for row expansion
+ */
+export declare const getTableExpandedRowVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+/**
+ * Get table column manager slide animation variants
+ */
+export declare const getTableColumnManagerVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+/**
+ * Get table loading state animation variants
+ */
+export declare const getTableLoadingVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+/**
+ * Get table sort indicator animation variants
+ */
+export declare const getTableSortVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;

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 { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+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 { Button } from '../Button/Button.js';
+import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
+import { Sortable, SortableItem } from '../Sortable/Sortable.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/Cog6ToothIcon.js';
+
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ */
+var 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;
+    var data = props.data, columns = props.columns, rowKey = props.rowKey, _b = props.variant, variant = _b === void 0 ? "default" : _b, themeOverrides = props.theme, _c = props.className, className = _c === void 0 ? "" : _c, _d = props.freezeHeader, freezeHeader = _d === void 0 ? false : _d, _e = props.freezeFirstColumn, freezeFirstColumn = _e === void 0 ? false : _e, _f = props.freezeLastColumn, freezeLastColumn = _f === void 0 ? false : _f, _g = props.sortable, sortable = _g === void 0 ? false : _g, _h = props.sortConfig, sortConfig = _h === void 0 ? [] : _h, onSortChange = props.onSortChange, _j = props.filterable, filterable = _j === void 0 ? false : _j, _k = props.filterConfig, filterConfig = _k === void 0 ? [] : _k, onFilterChange = props.onFilterChange, _l = props.expandable, expandable = _l === void 0 ? false : _l, expandedRowRender = props.expandedRowRender, _m = props.expandedRows, expandedRows = _m === void 0 ? [] : _m, onExpandedRowsChange = props.onExpandedRowsChange, _o = props.selectable, selectable = _o === void 0 ? false : _o, _p = props.selectionType, selectionType = _p === void 0 ? "checkbox" : _p, _q = props.selectedRows, selectedRows = _q === void 0 ? [] : _q, onSelectionChange = props.onSelectionChange, _r = props.bulkActions, bulkActions = _r === void 0 ? [] : _r, initialVisibleColumns = props.visibleColumns, onVisibleColumnsChange = props.onVisibleColumnsChange, onColumnReorder = props.onColumnReorder, pagination = props.pagination, children = props.children;
+    // Store the initial state for reset functionality
+    var defaultVisibleColumns = initialVisibleColumns || (columns ? columns.map(function (col) { return col.id; }) : []);
+    var defaultColumnOrder = columns ? columns.map(function (col) { return col.id; }) : [];
+    var _s = useState(defaultVisibleColumns), visibleColumns = _s[0], setVisibleColumns = _s[1];
+    var _t = useState(defaultColumnOrder), columnOrder = _t[0], setColumnOrder = _t[1];
+    // Sync column order when columns prop changes
+    useEffect(function () {
+        if (columns) {
+            setColumnOrder(columns.map(function (col) { return col.id; }));
+        }
+    }, [columns]);
+    // Determine which API is being used (declarative vs data-driven)
+    var isDeclarativeAPI = !!children;
+    // Merge global theme with component-specific overrides
+    var theme = __assign(__assign({}, tableTheme), (themeOverrides || {}));
+    // Get base classes from theme
+    var baseClasses = theme.baseStyle || "";
+    var 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
+     */
+    var handleVisibleColumnsChange = function (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
+     */
+    var handleColumnReorder = function (fromIndex, toIndex) {
+        var newColumnOrder = __spreadArray([], columnOrder, true);
+        var movedColumn = newColumnOrder.splice(fromIndex, 1)[0];
+        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
+     */
+    var handleColumnOrderReset = function () {
+        if (columns) {
+            var originalOrder = columns.map(function (col) { return col.id; });
+            setColumnOrder(originalOrder);
+        }
+    };
+    /**
+     * Handle clearing all row selections
+     */
+    var handleClearSelection = function () {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
+    };
+    /**
+     * Handle toggling column visibility
+     * Prevents toggling locked columns
+     */
+    var handleToggleColumn = function (columnId) {
+        var column = columns === null || columns === void 0 ? void 0 : columns.find(function (col) { return col.id === columnId; });
+        if (column === null || column === void 0 ? void 0 : column.locked)
+            return; // Prevent toggling locked columns
+        var newVisibleColumns = visibleColumns.includes(columnId)
+            ? visibleColumns.filter(function (id) { return id !== columnId; })
+            : __spreadArray(__spreadArray([], visibleColumns, true), [columnId], false);
+        handleVisibleColumnsChange(newVisibleColumns);
+    };
+    /**
+     * Handle resetting columns to default visibility and order
+     */
+    var handleResetToDefault = function () {
+        // Get all locked column IDs to ensure they remain visible
+        var lockedColumnIds = (columns === null || columns === void 0 ? void 0 : columns.filter(function (col) { return col.locked; }).map(function (col) { return col.id; })) || [];
+        // Combine initial visible columns with locked columns (remove duplicates)
+        var resetVisibleColumns = Array.from(new Set(__spreadArray(__spreadArray([], defaultVisibleColumns, true), lockedColumnIds, true)));
+        // 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
+    var visibleColumnsList = columns && columnOrder.length > 0
+        ? columnOrder
+            .map(function (colId) { return columns.find(function (col) { return col.id === colId; }); })
+            .filter(function (col) {
+            return col !== undefined && visibleColumns.includes(col.id);
+        })
+        : (columns ? columns.filter(function (col) { return visibleColumns.includes(col.id); }) : []);
+    // Calculate paginated data slice based on current page and page size
+    var paginatedData = pagination && data
+        ? data.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
+        : data || [];
+    // Create context value with all table configuration and callbacks
+    var contextValue = {
+        theme: theme,
+        variant: variant,
+        freezeHeader: freezeHeader,
+        freezeFirstColumn: freezeFirstColumn,
+        freezeLastColumn: freezeLastColumn,
+        sortable: sortable,
+        sortConfig: sortConfig,
+        onSortChange: onSortChange,
+        filterable: filterable,
+        filterConfig: filterConfig,
+        onFilterChange: onFilterChange,
+        expandable: expandable,
+        expandedRows: expandedRows,
+        onExpandedRowsChange: onExpandedRowsChange,
+        selectable: selectable,
+        selectionType: selectionType,
+        selectedRows: selectedRows,
+        onSelectionChange: 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(ForwardRef, { 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(function (colId) { return columns.find(function (col) { return col.id === colId; }); }).filter(Boolean)
+                                : columns).map(function (column) {
+                                var isVisible = visibleColumns.includes(column.id);
+                                var isLocked = column.locked === true;
+                                var 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 ".concat(isLocked ? "bg-gray-50" : "") },
+                                    React__default.createElement(Checkbox, { id: "column-checkbox-".concat(column.id), name: "column-".concat(column.id), value: column.id, checked: isVisible, onChange: function () { return handleToggleColumn(column.id); }, "aria-label": "Toggle visibility for ".concat(displayName, " column"), label: displayName, state: isLocked ? "disabled" : "default" })));
+                            }))) : ((columnOrder.length > 0
+                                ? columnOrder.map(function (colId) { return columns.find(function (col) { return col.id === colId; }); }).filter(Boolean)
+                                : columns).map(function (column) {
+                                var isVisible = visibleColumns.includes(column.id);
+                                var isLocked = column.locked === true;
+                                var 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 ".concat(isLocked ? "bg-gray-50" : "") },
+                                    React__default.createElement(Checkbox, { id: "column-checkbox-".concat(column.id), name: "column-".concat(column.id), value: column.id, checked: isVisible, onChange: function () { return handleToggleColumn(column.id); }, "aria-label": "Toggle visibility for ".concat(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 ".concat(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
+var Table = TableComponent;
+
+export { Table, TableContext };

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

@@ -0,0 +1,2 @@
+import { TableThemeOverrides } from "./Table.types";
+export declare const tableTheme: TableThemeOverrides;

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

@@ -0,0 +1,28 @@
+var tableTheme = {
+    // Base styles for the table
+    baseStyle: "w-full border-collapse bg-white text-sm",
+    // Variant styles
+    variants: {
+        default: "border-[var(--color-border)] [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        striped: "border-[var(--color-border)] [&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        bordered: "border border-[var(--color-border)] [&_td]:border [&_th]:border [&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        compact: "border-[var(--color-border)] [&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
+    },
+    // Header styles
+    headerStyle: "text-left font-medium text-[var(--color-text-primary)] sticky top-0 border-b border-[var(--color-border)]",
+    // Cell styles
+    cellStyle: "text-[var(--color-text-primary)] border-t border-[var(--color-border)]",
+    // Row styles
+    rowStyle: "hover:bg-[var(--color-neutral-50)]  transition-all duration-300 relative",
+    selectedRowStyle: "bg-[var(--color-primary-50)]/50 shadow-[inset_3px_0_0_0_theme(colors.primary.base),0_20px_15px_-5px_theme(colors.primary.base/0.02),0_10px_10px_-5px_theme(colors.primary.base/0.02)] hover:bg-[var(--color-primary-50)]",
+    hoverRowStyle: "cursor-pointer",
+    // Frozen column styles
+    frozenColumnStyle: "sticky left-0 z-10 bg-white/80 backdrop-blur-sm shadow-l-xl outline outline-1 outline-[var(--color-neutral-200)]",
+    lastFrozenColumnStyle: "sticky right-0 z-10 bg-white/80 backdrop-blur-sm shadow-r-xl outline outline-1 outline-[var(--color-neutral-200)]",
+    frozenHeaderStyle: "sticky top-0 z-20 shadow-lg shadow-[var(--color-neutral-200)]/50",
+    // Utility controls
+    columnManagerButton: "inline-flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 border border-[var(--color-neutral-300)]",
+    columnManagerContainer: "mb-4 flex justify-end",
+};
+
+export { tableTheme };