@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.27

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

@@ -24,7 +24,13 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         const sign = trend > 0 ? "+" : "";
         return `${sign}${trend}%`;
     }, [trend, trendLabel]);
-    const trendDirection = trend === undefined ? null : trend > 0 ? "up" : trend < 0 ? "down" : "neutral";
+    const trendDirection = trend === undefined
+        ? null
+        : trend > 0
+            ? "up"
+            : trend < 0
+                ? "down"
+                : "neutral";
     // Calculate filled bar count from progress
     const filledBars = useMemo(() => {
         if (progress === undefined)
@@ -32,7 +38,10 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
     }, [progress, barCount]);
     const barSize = kpiTheme.barSizes[size];
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (typeof label === 'string' ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : label)] }), formattedTrend && trendDirection && (typeof formattedTrend === 'string' ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] })) : formattedTrend)] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label &&
+                                (typeof label === "string" ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : (label))] }), formattedTrend &&
+                        trendDirection &&
+                        (typeof formattedTrend === "string" ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && (jsx(ArrowUpRightIcon, { className: "size-4" })), trendDirection === "down" && (jsx(ArrowDownRightIcon, { className: "size-4" }))] })) : (formattedTrend))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
                     const isFilled = i < filledBars;
                     const fadeDistance = filledBars - i;
                     const fillOpacity = isFilled && fadeDistance <= 3
@@ -43,7 +52,8 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
                                 ease: "easeOut",
                                 delay: i * 0.03,
                             } })) }, i));
-                }) })), subtitle && (typeof subtitle === 'string' ? (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle })) : subtitle)] }));
+                }) })), subtitle &&
+                (typeof subtitle === "string" ? (jsx("span", { className: cn(theme.subtitleStyle), children: subtitle })) : (subtitle))] }));
 });
 KPI.displayName = "KPI";
 

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

@@ -7,7 +7,7 @@ const kpiTheme = {
         md: "text-2xl font-bold text-[var(--color-text-primary)]",
         lg: "text-3xl font-bold text-[var(--color-text-primary)]",
     },
-    labelStyle: "text-[var(--color-text-muted)]",
+    labelStyle: "text-[var(--color-text-primary)] font-medium",
     labelSizes: {
         sm: "text-xs",
         md: "text-sm",
@@ -25,13 +25,13 @@ const kpiTheme = {
         ...semanticBgColors,
         neutral: "bg-[var(--color-text-secondary)]",
     },
-    barEmptyColor: "bg-[var(--color-background-tertiary)]",
+    barEmptyColor: "bg-[var(--color-surface-sunken)]",
     barSizes: {
         sm: { height: "h-4", width: "w-[3px]", gap: "gap-[2px]" },
         md: { height: "h-6", width: "w-[3px]", gap: "gap-[3px]" },
         lg: { height: "h-8", width: "w-1", gap: "gap-1" },
     },
-    subtitleStyle: "text-[var(--color-text-muted)]",
+    subtitleStyle: "text-[var(--color-text-secondary)] text-sm",
 };
 
 export { kpiTheme };

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

@@ -60,7 +60,7 @@ const metricTheme = {
             contentPadding: "p-4",
             iconContainer: "size-14",
             label: "text-sm",
-            value: "text-xl",
+            value: "text-2xl",
             subtitle: "text-xs mt-0.5",
         },
         lg: {
@@ -68,12 +68,12 @@ const metricTheme = {
             contentPadding: "p-5",
             iconContainer: "size-16",
             label: "text-base",
-            value: "text-2xl",
+            value: "text-3xl",
             subtitle: "text-sm mt-1",
         },
     },
     // Common element styles
-    labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-1",
+    labelStyle: "font-semibold text-[var(--color-text-primary)] mb-1",
     valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
     subtitleStyle: "text-[var(--color-text-secondary)]/80",
     iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5",

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

@@ -37,8 +37,8 @@ const TableContext = createContext({
  * - Theme customization with className overrides
  */
 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, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
+    var _a, _b;
+    const { data, columns, rowKey, variant = "default", padding = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
     // Column management hook
     const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
         columns,
@@ -104,6 +104,7 @@ function TableComponent(props) {
     // Get base classes from theme
     const baseClasses = theme.baseStyle || "";
     const variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
+    const paddingClasses = ((_b = theme.paddingStyles) === null || _b === void 0 ? void 0 : _b[padding]) || "";
     // Memoize context value to prevent unnecessary re-renders in consumers
     const contextValue = useMemo(() => ({
         theme,
@@ -148,7 +149,7 @@ function TableComponent(props) {
         selectedRows,
         onSelectionChange,
     ]);
-    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("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, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(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 }), jsx(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 })] }))] }) })] }) }));
+    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("table", { className: cn(baseClasses, variantClasses, paddingClasses, 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, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(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 }), jsx(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 })] }))] }) })] }) }));
 }
 TableComponent.displayName = "Table";
 const Table = TableComponent;

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

@@ -20,6 +20,16 @@ const tableTheme = {
         compact: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
             "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
     },
+    // Edge-padding modes — applied at the table root via descendant selectors so they
+    // work for both the data-driven and declarative APIs. `flush` zeroes the
+    // first/last cell side padding (overrides the default `first:pl-4 last:pr-4`).
+    // Descendant selectors (.table th:first-child) outrank per-cell first:pl-4 by
+    // one specificity point so this wins without !important.
+    paddingStyles: {
+        default: "",
+        flush: "[&_th:first-child]:pl-0 [&_th:last-child]:pr-0 " +
+            "[&_td:first-child]:pl-0 [&_td:last-child]:pr-0",
+    },
     // 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 " +
@@ -32,7 +42,7 @@ const tableTheme = {
     // Light: neutral-50 hover | Dark: neutral-800 hover
     rowStyle: "group transition-all duration-300 relative " +
         "hover:bg-[var(--color-neutral-50)] " +
-        "dark:hover:bg-[var(--color-background-tertiary)]",
+        "dark:hover:bg-[var(--color-surface-hover)]",
     // Selected row styles — background is applied per-cell (in TableCell) so that
     // sticky/frozen columns repaint correctly. The row only carries the left indicator.
     selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)]",
@@ -45,12 +55,10 @@ const tableTheme = {
         "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
         "dark:shadow-[var(--color-neutral-900)]/50",
     // Utility controls - Column manager button
-    // Light: white bg with light border | Dark: neutral-800 bg with neutral-600 border
+    // Surface-like control; surface/border/hover tokens flip automatically between light/dark
     columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-sm font-medium " +
-        "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 " +
-        "dark:focus:ring-offset-[var(--color-neutral-900)] " +
-        "bg-white border border-[var(--color-neutral-300)] text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] " +
-        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-600)] dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-700)]",
+        "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface)] " +
+        "bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]",
     columnManagerContainer: "mb-4 flex items-center justify-end gap-2",
 };
 

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

@@ -18,6 +18,13 @@ export interface BulkAction {
 }
 /** Table visual variants for different styling approaches */
 export type TableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+/**
+ * Edge padding behavior for table cells.
+ * - `default`: First/last cells receive extra side padding (matches inner cells).
+ * - `flush`: First/last cells have zero side padding so values align flush with the table's container edges.
+ *   Useful for invoice-style layouts where the table sits inside a padded card.
+ */
+export type TablePadding = 'default' | 'flush';
 /** Text alignment options for table cells and headers */
 export type TableAlignment = 'left' | 'center' | 'right';
 /** Selection control types for row selection */
@@ -95,6 +102,8 @@ export interface FilterConfig {
 export interface TableThemeOverrides {
     baseStyle?: string;
     variants?: Partial<Record<TableVariant, string>>;
+    /** Edge-padding mode classes applied at the table root via descendant selectors */
+    paddingStyles?: Partial<Record<TablePadding, string>>;
     headerStyle?: string;
     cellStyle?: string;
     rowStyle?: string;
@@ -148,6 +157,12 @@ export interface TableProps<T = unknown> {
     rowKey?: keyof T | ((row: T, index: number) => string | number);
     /** Visual variant for different table styles */
     variant?: TableVariant;
+    /**
+     * Edge padding behavior. `flush` removes left padding from the first cell and right padding
+     * from the last cell so column values align flush with the table's container edges.
+     * @default "default"
+     */
+    padding?: TablePadding;
     /** Theme overrides for custom styling */
     theme?: TableThemeOverrides;
     /** Additional CSS classes for customization */

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

@@ -18,7 +18,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         const displayName = typeof column.header === 'string' ? column.header : column.id;
         return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
     };
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

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

@@ -1,4 +1,4 @@
-import { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps } from './Table.types';
+import { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TablePadding, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps } from './Table.types';
 import { TableActions } from './TableActions';
 import { TableActionsMenu } from './TableActionsMenu';
 import { TablePagination } from './TablePagination';
@@ -16,7 +16,7 @@ interface TableCompound {
 }
 declare const Table: TableCompound;
 export { Table };
-export type { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps, };
+export type { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TablePadding, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps, };
 export { TableActions, TableActionsMenu, TablePagination, TableFilter };
 export { inferFilterType, getOperatorsForFilterType, getDefaultOperator, isUnaryOperator, isBetweenOperator, filterData, operatorLabels, } from './Table.filterUtils';
 export { useTableColumns, useTableSelection, useTableExpansion, useTablePagination, useTableFilter, } from './hooks';

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

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