@flikk/ui 1.0.0-beta.21 → 1.0.0-beta.22

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

@@ -1,3 +1,9 @@
+const EASE = [0.04, 0.62, 0.23, 0.98];
+// Expand is slightly slower than collapse — feels more intentional
+const EXPAND_DURATION = 0.32;
+const COLLAPSE_DURATION = 0.25;
+const CONTENT_DURATION = 0.22;
+const CONTENT_EXPAND_DELAY = 0.08;
 /**
  * Container animation for row expansion (height: 0 -> auto with opacity)
  * Uses the same easing curve pattern as Accordion for consistency
@@ -7,16 +13,16 @@ const tableExpandAnimations = {
         height: 0,
         opacity: 0,
         transition: {
-            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
-            opacity: { duration: 0.25 },
+            height: { duration: COLLAPSE_DURATION, ease: EASE },
+            opacity: { duration: COLLAPSE_DURATION },
         },
     },
     expanded: {
         height: 'auto',
         opacity: 1,
         transition: {
-            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
-            opacity: { duration: 0.3, delay: 0.1 },
+            height: { duration: EXPAND_DURATION, ease: EASE },
+            opacity: { duration: EXPAND_DURATION, delay: CONTENT_EXPAND_DELAY },
         },
     },
 };
@@ -26,19 +32,19 @@ const tableExpandAnimations = {
 const tableExpandContentAnimations = {
     collapsed: {
         opacity: 0,
-        y: -10,
+        y: -8,
         transition: {
-            y: { duration: 0.2 },
-            opacity: { duration: 0.2 },
+            y: { duration: CONTENT_DURATION },
+            opacity: { duration: CONTENT_DURATION },
         },
     },
     expanded: {
         opacity: 1,
         y: 0,
         transition: {
-            delay: 0.15,
-            y: { duration: 0.3 },
-            opacity: { duration: 0.3 },
+            delay: CONTENT_EXPAND_DELAY,
+            y: { duration: CONTENT_DURATION },
+            opacity: { duration: CONTENT_DURATION },
         },
     },
 };

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

@@ -242,13 +242,20 @@ function filterData(data, columns, filters, logic = 'and') {
         return data;
     // Build a column lookup for quick access
     const columnMap = new Map(columns.map((col) => [col.id, col]));
+    // Pre-compute filter type per filter — inferFilterType samples the full dataset,
+    // so calling it inside the row loop is O(n × filters × n). Hoist it out.
+    const filterTypeMap = new Map(activeFilters.map((filter) => {
+        const column = columnMap.get(filter.columnId);
+        return [filter.columnId, column ? inferFilterType(column, data) : 'text'];
+    }));
     return data.filter((row) => {
         const results = activeFilters.map((filter) => {
+            var _a;
             const column = columnMap.get(filter.columnId);
             if (!column)
                 return true;
             const cellValue = getCellValue(row, column);
-            const filterType = inferFilterType(column, data);
+            const filterType = (_a = filterTypeMap.get(filter.columnId)) !== null && _a !== void 0 ? _a : 'text';
             return evaluateFilter(cellValue, filter, filterType);
         });
         return logic === 'and'

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

@@ -93,26 +93,21 @@ function TableComponent(props) {
         observer.observe(container);
         return () => observer.disconnect();
     }, []);
-    // Merge global theme with component-specific overrides
-    // When the table overflows, add backdrop-blur + shadow to frozen columns
-    const theme = useMemo(() => {
-        const merged = {
-            ...tableTheme,
-            ...(themeOverrides || {}),
-        };
-        if (isOverflowing) {
-            const overflowBg = "backdrop-blur-sm bg-black/5 dark:bg-white/5";
-            merged.frozenColumnStyle = cn(merged.frozenColumnStyle, overflowBg, "shadow-l-xl");
-            merged.lastFrozenColumnStyle = cn(merged.lastFrozenColumnStyle, overflowBg, "shadow-r-xl");
-        }
-        return merged;
-    }, [themeOverrides, isOverflowing]);
+    // Merge global theme with component-specific overrides.
+    // isOverflowing is intentionally excluded — it changes on every resize event and
+    // would invalidate the context memo, causing all cells to re-render. Instead,
+    // isOverflowing is passed separately in context and applied in TableCell.
+    const theme = useMemo(() => ({
+        ...tableTheme,
+        ...(themeOverrides || {}),
+    }), [themeOverrides]);
     // Get base classes from theme
     const baseClasses = theme.baseStyle || "";
     const variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
     // Memoize context value to prevent unnecessary re-renders in consumers
     const contextValue = useMemo(() => ({
         theme,
+        isOverflowing,
         variant,
         freezeHeader,
         freezeFirstColumn,
@@ -133,6 +128,7 @@ function TableComponent(props) {
         onSelectionChange,
     }), [
         theme,
+        isOverflowing,
         variant,
         freezeHeader,
         freezeFirstColumn,

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

@@ -3,7 +3,7 @@ const tableTheme = {
     // Uses border-separate so sticky cells keep their borders (border-collapse
     // paints borders on the table grid, which sticky cells float above)
     // Light: white background | Dark: neutral-900 background
-    baseStyle: "w-full border-separate border-spacing-0 text-base " + "",
+    baseStyle: "w-full border-separate border-spacing-0 text-sm",
     // Variant styles
     // Each variant gets dark mode border colors and alternate row colors
     variants: {
@@ -23,7 +23,7 @@ const tableTheme = {
     // Header styles
     // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
     headerStyle: "text-left font-semibold sticky top-0 border-b first:pl-4 last:pr-4 " +
-        "text-[var(--color-text-secondary)]/80 text-base border-[var(--color-border)] ",
+        "text-[var(--color-text-secondary)]/80 text-sm border-[var(--color-border)] ",
     // Cell styles — borders on cells (not rows) so sticky columns keep them
     // Light: primary text | Dark: neutral-300 text
     cellStyle: "border-b border-b-[var(--color-border)] first:pl-4 last:pr-4 " +
@@ -46,7 +46,7 @@ const tableTheme = {
         "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-[calc(var(--radius-base)*0.75)] px-3 py-2 text-base font-medium " +
+    columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-sm font-medium " +
         "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 " +
         "dark:focus:ring-offset-[var(--color-neutral-900)] " +
         "bg-white border border-[var(--color-neutral-300)] text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] " +

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

@@ -111,6 +111,8 @@ export interface TableThemeOverrides {
 export interface TableContextType {
     theme: TableThemeOverrides;
     variant: TableVariant;
+    /** Whether the scroll container is horizontally overflowing — used to apply frozen column backdrop styles */
+    isOverflowing?: boolean;
     freezeHeader?: boolean;
     freezeFirstColumn?: boolean;
     freezeLastColumn?: boolean;

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
@@ -31,13 +31,13 @@ const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
             .filter((action) => { var _a; return (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row); })
             .map((action) => action.id);
     }, [sortedActions, row]);
-    const handleAction = (key) => {
+    const handleAction = useCallback((key) => {
         var _a;
         const action = sortedActions.find((a) => a.id === key);
         if (action && !((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))) {
             action.onClick(row);
         }
-    };
+    }, [sortedActions, row]);
     const renderInlineActions = (actionsToRender) => {
         return actionsToRender.map((action) => {
             var _a;

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
+import { Button } from '../../core/Button/Button.js';
 
 /**
  * TableActionsMenu component for displaying actions in an overflow menu
@@ -17,9 +18,7 @@ const TableActionsMenu = ({ actions, row, onClose, className, }) => {
             var _a;
             const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
             const Icon = action.icon;
-            return (jsxs("button", { onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-base font-medium text-left transition-all duration-300", "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
-                    ? "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)] focus:bg-[var(--color-danger-50)]"
-                    : "text-[var(--color-text-primary)]", isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent"), role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
+            return (jsxs(Button, { variant: "ghost", color: action.variant === 'danger' ? 'danger' : 'neutral', size: "sm", onClick: () => handleActionClick(action), disabled: isDisabled, className: "w-full justify-start gap-3", role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
         }) }));
 };
 

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

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+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';
 
 /**
  * Internal TableCell component used by the data-driven API
@@ -10,11 +11,13 @@ import { UTILITY_COLUMN_ID, alignmentClasses } from './Table.utils.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, }) {
+    const { isOverflowing } = useContext(TableContext);
+    const overflowFrozenStyle = isOverflowing ? "backdrop-blur-sm bg-black/5 dark:bg-white/5" : undefined;
     const Cell = isHeader ? 'th' : 'td';
     const isUtilityColumn = column.id === UTILITY_COLUMN_ID;
     // 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), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), column.align && alignmentClasses[column.align], isUtilityColumn && 'whitespace-nowrap');
+        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 }));
     }
     // For data cells, extract value using accessor (string key or function)
@@ -29,7 +32,7 @@ function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = f
         : column.tooltip
             ? String(value)
             : undefined;
-    const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.cellStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), isSelected && "bg-[var(--color-primary-50)]/50 dark:bg-[var(--color-primary-500)]/20", column.align && alignmentClasses[column.align], column.ellipsis && 'truncate', isUtilityColumn && 'whitespace-nowrap');
+    const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.cellStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isFrozen && overflowFrozenStyle, isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), isLastFrozen && overflowFrozenStyle, isSelected && "bg-[var(--color-primary-50)]/50 dark:bg-[var(--color-primary-500)]/20", column.align && alignmentClasses[column.align], column.ellipsis && 'truncate', isUtilityColumn && 'whitespace-nowrap');
     return (jsx(Cell, { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: column.width }, title: tooltipContent, role: "cell", children: children || content }));
 }
 TableCellComponent.displayName = 'TableCell';

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

@@ -3,6 +3,7 @@ import React__default, { useContext } from 'react';
 import { TableContext } from './Table.js';
 import { cn } from '../../../utils/cn.js';
 import { alignmentClasses } from './Table.utils.js';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/16/solid';
 
 /**
  * Declarative Table Header component
@@ -32,12 +33,7 @@ const Body = React__default.memo(BodyComponent);
 const RowComponent = ({ children, isExpandable = false, isExpanded = false, onExpandToggle, isSelected = false, onSelectToggle, className = '', }) => {
     const { theme } = useContext(TableContext);
     const rowClasses = cn(theme === null || theme === void 0 ? void 0 : theme.rowStyle, isSelected && (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle), theme === null || theme === void 0 ? void 0 : theme.hoverRowStyle, className);
-    const handleRowClick = () => {
-        if (onSelectToggle) {
-            onSelectToggle();
-        }
-    };
-    return (jsx("tr", { className: rowClasses, "data-selected": isSelected ? 'true' : undefined, "data-expanded": isExpandable && isExpanded ? 'true' : undefined, onClick: onSelectToggle ? handleRowClick : undefined, role: "row", "aria-selected": isSelected, "aria-expanded": isExpandable ? isExpanded : undefined, children: children }));
+    return (jsx("tr", { className: rowClasses, "data-selected": isSelected ? 'true' : undefined, "data-expanded": isExpandable && isExpanded ? 'true' : undefined, onClick: onSelectToggle, role: "row", "aria-selected": isSelected, "aria-expanded": isExpandable ? isExpanded : undefined, children: children }));
 };
 RowComponent.displayName = 'Table.Row';
 const Row = React__default.memo(RowComponent);
@@ -60,7 +56,9 @@ const HeaderCellComponent = ({ children, isFrozen = false, isLastFrozen = false,
     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", {
                 'justify-end': align === 'right',
                 'justify-center': align === 'center',
-            }), children: [children, isSortable && sortDirection && (jsx("span", { className: "ml-1", children: sortDirection === 'asc' ? '\u2191' : '\u2193' }))] }) }));
+            }), children: [children, isSortable && sortDirection && (jsx("span", { className: "ml-1", children: sortDirection === 'asc'
+                        ? jsx(ChevronUpIcon, { className: "size-3.5" })
+                        : jsx(ChevronDownIcon, { className: "size-3.5" }) }))] }) }));
 };
 HeaderCellComponent.displayName = 'Table.HeaderCell';
 const HeaderCell = React__default.memo(HeaderCellComponent);

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

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { TableCell } from './TableCell.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { getRowId, UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/16/solid';
 
 function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHeader, freezeFirstColumn, freezeLastColumn, expandable, expandedRowRender, selectable, selectionType, selectedRows = [], onSelectionChange, theme, data = [], rowKey, }) {
     const handleSort = useCallback((columnId) => {
@@ -45,10 +46,12 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHe
                         header: '',
                         accessor: () => '',
                         width: UTILITY_COLUMN_WIDTH,
-                    }, row: {}, 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) => {
+                    }, 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: {}, 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' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
+                    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'
+                                        ? jsx(ChevronUpIcon, { className: "size-3.5" })
+                                        : jsx(ChevronDownIcon, { className: "size-3.5" }) }))] })) : (column.header) }, column.id));
                 })] }) }));
 }
 const TableHeader = TableHeaderComponent;

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { Pagination } from '../../core/Pagination/Pagination.js';
 import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
@@ -13,11 +13,7 @@ const TablePagination = React__default.forwardRef(({ currentPage, totalItems, pa
     const totalPages = Math.ceil(totalItems / pageSize);
     const startItem = (currentPage - 1) * pageSize + 1;
     const endItem = Math.min(currentPage * pageSize, totalItems);
-    const pageSizeSelectOptions = pageSizeOptions.map((option) => ({
-        id: option,
-        label: option.toString(),
-        value: option,
-    }));
+    const pageSizeSelectOptions = useMemo(() => pageSizeOptions.map((option) => ({ id: option, label: option.toString(), value: option })), [pageSizeOptions]);
     return (jsxs("div", { ref: ref, className: cn("flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 px-4 py-3 border-t border-[var(--color-border)] bg-[var(--color-background)]", className), children: [jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-base text-[var(--color-text-muted)]", children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (value) => onPageSizeChange(value), options: pageSizeSelectOptions, size: "sm", className: "w-20" })] })), jsx("div", { className: "text-base text-[var(--color-text-muted)]", children: totalItems > 0 ? (jsxs(Fragment, { children: ["Showing ", startItem.toLocaleString(), " to ", endItem.toLocaleString(), " of", " ", totalItems.toLocaleString(), " results"] })) : ("No results") })] }), totalPages > 1 && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, showPrevNext: true, showFirstLast: false, siblingCount: 1 }))] }));
 });
 TablePagination.displayName = "Table.Pagination";

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

@@ -7,15 +7,11 @@ import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Radio } from '../../forms/Radio/Radio.js';
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
+import { cn } from '../../../utils/cn.js';
 import { tableExpandAnimations, tableExpandContentAnimations } from './Table.animations.js';
 
 function TableRowComponent({ row, rowId, columns, expandedRowRender, isExpanded = false, onExpandChange, selectable, selectionType, isSelected = false, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
-    const rowClasses = [
-        (theme === null || theme === void 0 ? void 0 : theme.rowStyle) || "",
-        isSelected ? (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle) || "" : "",
-    ]
-        .filter(Boolean)
-        .join(" ");
+    const rowClasses = cn(theme === null || theme === void 0 ? void 0 : theme.rowStyle, isSelected && (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle));
     const handleExpandClick = (e) => {
         e.stopPropagation();
         onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(!isExpanded);

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

@@ -5,6 +5,7 @@ import 'react/jsx-runtime';
 import 'clsx';
 import 'tailwind-merge';
 import 'react';
+import '../../core/Button/Button.js';
 import { TablePagination } from './TablePagination.js';
 import { TableFilter } from './TableFilter.js';
 

package/dist/components/effects/CustomCursor/CustomCursor.theme.js

@@ -6,7 +6,7 @@ const customCursorTheme = {
     baseStyle: "pointer-events-none z-[9999] absolute transform-[translate(-50%,-50%)]",
     cursorStyle: "transition-transform duration-150",
     cursorFollowVariants: {
-        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-base text-[var(--color-text-primary)]",
+        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]",
         user: "flex items-center gap-2 rounded-full pl-1 pr-3 py-1 shadow-xl",
     },
     cursorFollowColors: {

package/dist/components/effects/Overlay/Overlay.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef } from 'react';
+import React__default, { useRef, useCallback, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { useOverlay } from '../../../hooks/useOverlay.js';
+import { useOverlay, lockScroll, unlockScroll } from '../../../hooks/useOverlay.js';
 import { useFocusTrap } from '../../../hooks/useFocusTrap.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { overlayTheme, overlayPositionVariants } from './Overlay.theme.js';
@@ -81,14 +81,41 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
     // Ref for focus trap container
     const focusTrapRef = useRef(null);
     useFocusTrap(focusTrapRef, enableFocusTrap && isOpen);
-    // Use overlay hook for behavior (escape key, scroll lock, click handling)
+    // Memoized ref callback to avoid recreation on every animation frame
+    const mergedRef = useCallback((node) => {
+        focusTrapRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    // Use overlay hook for behavior (escape key, click handling)
+    // Scroll lock is managed separately below so we can tie unlock to animation completion
     const { handleOverlayClick } = useOverlay({
         isOpen,
         onClose,
         closeOnEsc,
         closeOnOverlayClick,
-        enableScrollLock,
+        enableScrollLock: false, // managed below via lockScroll/unlockScroll
     });
+    // Lock scroll immediately on open; track via ref so we can unlock in onExitComplete
+    const hasLockedScroll = useRef(false);
+    useEffect(() => {
+        if (isOpen && enableScrollLock) {
+            lockScroll();
+            hasLockedScroll.current = true;
+        }
+        // No unlock here — onExitComplete handles it after the exit animation finishes
+    }, [isOpen, enableScrollLock]);
+    // Safety: unlock on unmount (e.g. parent unmounts while overlay is still open)
+    useEffect(() => {
+        return () => {
+            if (hasLockedScroll.current) {
+                unlockScroll();
+                hasLockedScroll.current = false;
+            }
+        };
+    }, []);
     // Merge custom animations with defaults
     const overlayAnimations = (animations === null || animations === void 0 ? void 0 : animations.overlay) || defaultOverlayAnimations;
     const contentAnimations = (animations === null || animations === void 0 ? void 0 : animations.content) || defaultContentAnimations;
@@ -111,6 +138,14 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
             };
         }
     }
+    // Detect dark mode from document (memoized to avoid DOM traversal on every animation frame)
+    const isDarkMode = useMemo(() => {
+        if (!isClient)
+            return false;
+        return (document.documentElement.classList.contains("dark") ||
+            document.body.classList.contains("dark") ||
+            document.querySelector(".dark") !== null);
+    }, [isClient]);
     // Determine portal target
     const target = portalTarget !== undefined
         ? portalTarget
@@ -121,23 +156,17 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
     if (!target) {
         return null;
     }
-    // Detect dark mode from document
-    const isDarkMode = isClient &&
-        (document.documentElement.classList.contains("dark") ||
-            document.body.classList.contains("dark") ||
-            document.querySelector(".dark") !== null);
-    const content = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { className: cn(isDarkMode && "dark", overlayTheme.backdrop, overlayPositionVariants[position], overlayClassName), onClick: handleOverlayClick, variants: finalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, children: [jsx("div", { className: overlayTheme.pattern, style: {
-                        backgroundImage: "url(/overlay-dots.svg)",
-                        backgroundRepeat: "repeat",
-                        backgroundSize: "540px 540px",
-                    } }), jsx(motion.div, { ref: (node) => {
-                        // Merge external ref and focus trap ref
-                        focusTrapRef.current = node;
-                        if (typeof ref === "function")
-                            ref(node);
-                        else if (ref)
-                            ref.current = node;
-                    }, className: cn(overlayTheme.content, contentClassName), style: contentStyle, variants: finalContentAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, onClick: (e) => e.stopPropagation(), ...(role ? { role } : {}), ...(ariaModal ? { "aria-modal": true } : {}), ...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}), ...(ariaDescribedBy
+    const content = (jsx(AnimatePresence, { mode: "wait", onExitComplete: () => {
+            if (hasLockedScroll.current) {
+                unlockScroll();
+                hasLockedScroll.current = false;
+            }
+        }, children: isOpen && (jsxs(motion.div, { className: cn(isDarkMode && "dark", overlayTheme.backdrop, overlayPositionVariants[position], overlayClassName), onClick: handleOverlayClick, variants: finalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, children: [jsx("div", { className: overlayTheme.pattern, style: {
+                        backgroundImage: "radial-gradient(circle, rgba(250,250,250,0.08) 1.5px, transparent 1.5px)",
+                        backgroundSize: "30px 30px",
+                        maskImage: "radial-gradient(ellipse at center, black 0%, transparent 70%)",
+                        WebkitMaskImage: "radial-gradient(ellipse at center, black 0%, transparent 70%)",
+                    } }), jsx(motion.div, { ref: mergedRef, className: cn(overlayTheme.content, contentClassName), style: contentStyle, variants: finalContentAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, onClick: (e) => e.stopPropagation(), ...(role ? { role } : {}), ...(ariaModal ? { "aria-modal": true } : {}), ...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}), ...(ariaDescribedBy
                         ? { "aria-describedby": ariaDescribedBy }
                         : {}), children: children })] })) }));
     return createPortal(content, target);

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -26,7 +26,7 @@ const checkboxTheme = {
         "dark:disabled:bg-[var(--color-neutral-800)] dark:disabled:border-[var(--color-neutral-600)] " +
         "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
     // Description text - light and dark
-    descriptionStyle: "text-base mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
+    descriptionStyle: "text-sm mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
     sizes: {
         sm: "size-5 mt-0.25",
         md: "size-6",
@@ -34,8 +34,8 @@ const checkboxTheme = {
     // Group styles
     groupStyle: "flex flex-col gap-1.5",
     groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
-    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)] -mt-0.5 mb-1",
-    groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
+    groupDescriptionStyle: "text-sm text-[var(--color-text-secondary)] -mt-0.5 mb-1",
+    groupErrorStyle: "text-sm text-[var(--color-danger)] mt-1.5",
     groupItemsStyle: "flex flex-col gap-3",
 };
 

package/dist/components/forms/ColorPicker/ColorPicker.d.ts

@@ -1,19 +1,12 @@
 import React from 'react';
-import type { ColorPickerContextValue, ColorPickerProps } from './ColorPicker.types';
-/**
- * ColorPicker Context
- */
-export declare const ColorPickerContext: React.Context<ColorPickerContextValue | undefined>;
-/**
- * Hook to access ColorPicker context
- */
-export declare const useColorPicker: () => ColorPickerContextValue;
+import type { ColorPickerProps } from './ColorPicker.types';
 /**
  * Export compound component with sub-components
  * Following Flikkui pattern (like Accordion, Tabs, Table)
  */
 export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>> & {
     Trigger: React.FC<import("./ColorPicker.types").ColorPickerTriggerProps>;
+    Header: React.FC<import("./ColorPickerHeader").ColorPickerHeaderProps>;
     Body: React.FC<import("./ColorPicker.types").ColorPickerBodyProps>;
     Canvas: React.FC<{
         className?: string;
@@ -24,4 +17,7 @@ export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerPro
     FormatSelector: React.FC<import("./ColorPicker.types").ColorPickerFormatSelectorProps>;
     EyeDropper: React.FC<import("./ColorPicker.types").ColorPickerEyeDropperProps>;
     Presets: React.FC<import("./ColorPicker.types").ColorPickerPresetsProps>;
+    SavedColors: React.FC<import("./ColorPicker.types").ColorPickerSavedColorsProps>;
+    Gradient: React.FC<import("./ColorPicker.types").ColorPickerGradientProps>;
+    ImagePicker: React.FC<import("./ColorPicker.types").ColorPickerImageProps>;
 };