@flikk/ui 1.0.0-beta.24 → 1.0.0-beta.26

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

@@ -4,10 +4,9 @@ export { SidebarContent } from "./SidebarContent";
 export { SidebarFooter } from "./SidebarFooter";
 export { SidebarNav } from "./SidebarNav";
 export { SidebarNavGroup } from "./SidebarNavGroup";
-export { SidebarSubmenu } from "./SidebarSubmenu";
 export { SidebarToggle } from "./SidebarToggle";
 export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
 export { SidebarUserProfile } from "./SidebarUserProfile";
 export { SidebarLogo } from "./SidebarLogo";
-export { useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, SidebarLogoProps, } from "./Sidebar.types";
+export { SidebarProvider, useSidebarContext } from "./SidebarContext";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarDensity, SidebarContextValue, SidebarProviderProps, SidebarTheme, SidebarThemeOverrides, SidebarLogoProps, } from "./Sidebar.types";

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

@@ -4,7 +4,7 @@
  */
 const skeletonTheme = {
     // Base styles with background color and animation
-    baseStyle: "bg-[var(--color-background-tertiary)] overflow-hidden",
+    baseStyle: "bg-[var(--color-surface-sunken)] overflow-hidden",
     // Shape variants
     variants: {
         text: "h-4 rounded",

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

@@ -15,7 +15,7 @@ const spinnerTheme = {
     // Color variants
     colors: {
         ...semanticSpinnerColors,
-        dark: "border-[var(--color-background-quinary)] border-t-transparent",
+        dark: "border-[var(--color-surface-sunken)] border-t-transparent",
     },
     // Animation class with drop shadow
     animation: "animate-[spin_1s_linear_infinite] rounded-full",

package/dist/components/core/Tabs/Tabs.js

@@ -14,6 +14,9 @@ import { TabsBody } from './TabsBody.js';
  */
 const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
     const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
+    // Track whether the user has switched tabs yet, so content only animates
+    // on an actual tab change and not on mount / page load.
+    const [hasSwitched, setHasSwitched] = useState(false);
     // Unique instance prefix to scope all DOM IDs to this Tabs instance
     const instanceId = useId();
     // Track trigger elements for underline positioning
@@ -42,6 +45,7 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
     // Safe value change handler with error handling
     const handleValueChange = useCallback((newValue) => {
         try {
+            setHasSwitched(true);
             if (!isControlled) {
                 setCurrentValue(newValue);
             }
@@ -71,7 +75,8 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
         registerTrigger,
         unregisterTrigger,
         instanceId,
-    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger, instanceId]);
+        hasSwitched,
+    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger, instanceId, hasSwitched]);
     // Memoize theme classes for performance
     const themeClasses = useMemo(() => ({
         baseStyle: tabsTheme.baseStyle,

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

@@ -141,4 +141,6 @@ export interface TabsContextValue {
     unregisterTrigger: (value: string) => void;
     /** Unique prefix scoping DOM IDs to this Tabs instance */
     instanceId: string;
+    /** Whether the user has switched tabs yet (false until the first change). Used to suppress content animation on mount. */
+    hasSwitched: boolean;
 }

package/dist/components/core/Tabs/TabsBody.js

@@ -10,7 +10,7 @@ import { getTabsBodyVariants } from './Tabs.animations.js';
  * TabsBody component displays content panels for tabs with directional fade animations
  */
 const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
-    const { value: selectedValue, orientation, instanceId } = useTabsContext();
+    const { value: selectedValue, orientation, instanceId, hasSwitched } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
@@ -32,9 +32,11 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
     if (!shouldRender) {
         return null;
     }
-    // Determine animation props (user props will override due to spread order)
+    // Determine animation props (user props will override due to spread order).
+    // Until the user switches tabs, the panel snaps in (initial=false) so it does
+    // not animate on mount / page load — only actual tab changes animate.
     const animationProps = shouldDisableAnimations ? {} : {
-        initial: "initial",
+        initial: hasSwitched ? "initial" : false,
         animate: "animate",
         exit: "exit",
         variants: contentVariants,

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

@@ -16,7 +16,7 @@ const tagTheme = {
     },
     disabledStyle: "opacity-50 cursor-not-allowed",
     removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +
-        "hover:bg-[var(--color-background-quaternary)] " +
+        "hover:bg-[var(--color-surface-hover)] " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] " +
         "transition-all duration-300 cursor-pointer focus:outline-none " +
         "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",

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

@@ -47,3 +47,4 @@ export * from "./OfflineIndicator";
 export * from "./ContextMenu";
 export * from "./Pill";
 export * from "./Icon";
+export * from "./ImagePlaceholder";

package/dist/components/core/index.js

@@ -96,12 +96,11 @@ export { SidebarContent } from './Sidebar/SidebarContent.js';
 export { SidebarFooter } from './Sidebar/SidebarFooter.js';
 export { SidebarNav } from './Sidebar/SidebarNav.js';
 export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
-export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './Sidebar/SidebarToggle.js';
 export { SidebarMobileTrigger } from './Sidebar/SidebarMobileTrigger.js';
 export { SidebarUserProfile } from './Sidebar/SidebarUserProfile.js';
 export { SidebarLogo } from './Sidebar/SidebarLogo.js';
-export { useSidebarContext } from './Sidebar/SidebarContext.js';
+export { SidebarProvider, useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
 export { ContextMenu } from './ContextMenu/ContextMenu.js';
@@ -110,6 +109,7 @@ export { Pill } from './Pill/Pill.js';
 export { pillTheme } from './Pill/Pill.theme.js';
 export { Icon } from './Icon/Icon.js';
 export { fileTypes } from './Icon/data/fileTypes.js';
+export { ImagePlaceholder } from './ImagePlaceholder/ImagePlaceholder.js';
 export { AnimatePresence } from 'motion/react';
 export { CardBody } from './Card/CardBody.js';
 export { CardFooter } from './Card/CardFooter.js';

package/dist/components/data-display/GanttChart/GanttTableGroupRow.js

@@ -14,7 +14,7 @@ const GanttTableGroupRow = React__default.memo(({ row, }) => {
                 e.preventDefault();
                 toggleGroup(row.group.id);
             }
-        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-background-tertiary)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
+        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-surface-hover)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
                     e.stopPropagation();
                     onTaskAdd(row.group.id);
                 }, children: jsx(PlusIcon, { className: "size-4" }) }))] }));

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)]",

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/data-display/Timeline/Timeline.animations.d.ts

@@ -4,13 +4,6 @@ import { Variants } from "motion/react";
  * Provides a fade + slide effect when items enter the viewport
  */
 export declare const timelineItemVariants: Variants;
-/**
- * Get directional slide variants based on alignment side
- * Items slide in from the opposite direction of their placement
- *
- * @param side - 'left' slides from left, 'right' slides from right
- */
-export declare const getDirectionalVariants: (side: "left" | "right") => Variants;
 /**
  * Horizontal layout item entry animation
  * Items fade in from below

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

@@ -20,32 +20,6 @@ const timelineItemVariants = {
         },
     },
 };
-/**
- * Get directional slide variants based on alignment side
- * Items slide in from the opposite direction of their placement
- *
- * @param side - 'left' slides from left, 'right' slides from right
- */
-const getDirectionalVariants = (side) => ({
-    hidden: {
-        opacity: 0,
-        x: side === "left" ? -30 : 30,
-        y: 10,
-        transition: {
-            duration: 0.3,
-            ease: "easeOut",
-        },
-    },
-    visible: {
-        opacity: 1,
-        x: 0,
-        y: 0,
-        transition: {
-            duration: 0.5,
-            ease: [0.04, 0.62, 0.23, 0.98],
-        },
-    },
-});
 /**
  * Horizontal layout item entry animation
  * Items fade in from below
@@ -89,4 +63,4 @@ const timelineMarkerVariants = {
     },
 };
 
-export { getDirectionalVariants, timelineHorizontalItemVariants, timelineItemVariants, timelineMarkerVariants };
+export { timelineHorizontalItemVariants, timelineItemVariants, timelineMarkerVariants };

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

@@ -14,7 +14,7 @@ const useTimelineContext = () => {
         throw new Error("Timeline compound components must be used within <Timeline>");
     return ctx;
 };
-const TimelineRoot = React__default.forwardRef(({ children, className, layout = "vertical", align = "left", theme: themeOverrides, ...props }, ref) => {
+const TimelineRoot = React__default.forwardRef(({ children, className, layout = "vertical", theme: themeOverrides, ...props }, ref) => {
     // Merge theme with any overrides
     const theme = useMemo(() => ({
         ...timelineTheme,
@@ -29,12 +29,11 @@ const TimelineRoot = React__default.forwardRef(({ children, className, layout =
     // Context value to be provided to children
     const contextValue = useMemo(() => ({
         layout,
-        align,
         theme,
         totalItems,
-    }), [layout, align, theme, totalItems]);
+    }), [layout, theme, totalItems]);
     const isHorizontal = layout === "horizontal";
-    return (jsx(TimelineContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(isHorizontal ? theme.baseStyleHorizontal : theme.baseStyle, className), "data-layout": layout, "data-align": align, role: "list", "aria-label": "Timeline", ...props, children: children }) }));
+    return (jsx(TimelineContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(isHorizontal ? theme.baseStyleHorizontal : theme.baseStyle, className), "data-layout": layout, role: "list", "aria-label": "Timeline", ...props, children: children }) }));
 });
 TimelineRoot.displayName = "Timeline";
 // Attach compound subcomponents

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

@@ -3,13 +3,6 @@ import React from "react";
  * Layout orientation for the Timeline
  */
 export type TimelineLayout = "vertical" | "horizontal";
-/**
- * Alignment mode for vertical timeline items
- * - left: all items on the left side of the line
- * - right: all items on the right side of the line
- * - alternate: items alternate between left and right
- */
-export type TimelineAlign = "left" | "right" | "alternate";
 /**
  * Status of an individual timeline item
  * - completed: item is finished (success color)
@@ -41,11 +34,6 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default 'vertical'
      */
     layout?: TimelineLayout;
-    /**
-     * Alignment of items relative to the timeline line (vertical only)
-     * @default 'left'
-     */
-    align?: TimelineAlign;
     /**
      * Theme overrides for customizing styles
      */
@@ -60,7 +48,6 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export interface TimelineContextValue {
     layout: TimelineLayout;
-    align: TimelineAlign;
     theme: TimelineThemeOverrides & {
         baseStyle: string;
         baseStyleHorizontal: string;

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

@@ -5,16 +5,12 @@ import { useTimelineContext } from './Timeline.js';
 import { useTimelineItemContext } from './TimelineItem.js';
 
 const TimelineContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    const { theme, layout, align } = useTimelineContext();
-    const { isLast, index } = useTimelineItemContext();
+    const { theme, layout } = useTimelineContext();
+    const { isLast } = useTimelineItemContext();
     const isHorizontal = layout === "horizontal";
-    // For alternate layout, determine text alignment
-    const isAlternateRight = align === "alternate" && index % 2 !== 0;
     return (jsx("div", { ref: ref, className: cn(isHorizontal ? theme.contentStyleHorizontal : theme.contentStyle, 
         // Remove bottom padding on last item
-        !isHorizontal && isLast && "pb-0", 
-        // Align text based on side in alternate mode
-        !isHorizontal && isAlternateRight && "text-right", !isHorizontal && align === "right" && "text-right", className), ...props, children: children }));
+        !isHorizontal && isLast && "pb-0", className), ...props, children: children }));
 });
 TimelineContent.displayName = "TimelineContent";
 

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

@@ -3,7 +3,7 @@ import React__default, { createContext, useRef, useState, useEffect, useContext
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTimelineContext } from './Timeline.js';
-import { timelineHorizontalItemVariants, getDirectionalVariants, timelineItemVariants } from './Timeline.animations.js';
+import { timelineHorizontalItemVariants, timelineItemVariants } from './Timeline.animations.js';
 
 // Create context for TimelineItem
 const TimelineItemContext = createContext(undefined);
@@ -15,7 +15,7 @@ const useTimelineItemContext = () => {
     return ctx;
 };
 const TimelineItem = React__default.forwardRef(({ children, className, status = "pending", ...props }, ref) => {
-    const { layout, align, theme, totalItems } = useTimelineContext();
+    const { layout, theme, totalItems } = useTimelineContext();
     const shouldReduceMotion = useReducedMotion();
     const itemRef = useRef(null);
     const [isVisible, setIsVisible] = useState(false);
@@ -48,21 +48,12 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
     const isFirst = index === 0;
     const isLast = index === totalItems - 1;
     const isHorizontal = layout === "horizontal";
-    // Determine which side this item is on for alternate layout
-    const itemSide = align === "alternate"
-        ? index % 2 === 0
-            ? "left"
-            : "right"
-        : align;
-    // Select animation variants based on layout and alignment
+    // Select animation variants based on layout
     const getVariants = () => {
         if (shouldReduceMotion)
             return undefined;
         if (isHorizontal)
             return timelineHorizontalItemVariants;
-        if (align === "alternate") {
-            return getDirectionalVariants(itemSide);
-        }
         return timelineItemVariants;
     };
     // Context value for Marker and Content
@@ -72,14 +63,10 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
         isFirst,
         isLast,
     };
-    // Build className based on layout
-    const isAlternateRight = align === "alternate" && index % 2 !== 0;
     // Filter out conflicting motion props from rest
     const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
     const variants = getVariants();
-    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, 
-            // For right-aligned or alternate-right, reverse the flex direction
-            !isHorizontal && align === "right" && "flex-row-reverse", !isHorizontal && isAlternateRight && "flex-row-reverse", className), "data-status": status, "data-side": itemSide, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
+    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, className), "data-status": status, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
 });
 TimelineItem.displayName = "TimelineItem";
 

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

@@ -1,4 +1,4 @@
 import { Timeline } from "./Timeline";
-import { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineAlign, TimelineItemStatus } from "./Timeline.types";
+import { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineItemStatus } from "./Timeline.types";
 export { Timeline };
-export type { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineAlign, TimelineItemStatus, };
+export type { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineItemStatus, };