@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/components/data-display/GanttChart/hooks/useGanttLayout.js

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { computeGroupSummary } from '../GanttChart.utils.js';
+
+function useGanttLayout(groups, tasks, collapsedGroups, hideCompleted) {
+    return useMemo(() => {
+        const sorted = [...groups].sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); });
+        const rows = [];
+        for (const group of sorted) {
+            const groupTasks = tasks.filter((t) => t.groupId === group.id);
+            const visibleTasks = hideCompleted
+                ? groupTasks.filter((t) => !t.completed)
+                : groupTasks;
+            const summary = computeGroupSummary(group, groupTasks);
+            rows.push({
+                type: "group",
+                group,
+                taskCount: visibleTasks.length,
+                completedCount: summary.completedCount,
+                earliestStart: summary.earliestStart,
+                latestEnd: summary.latestEnd,
+            });
+            const isCollapsed = collapsedGroups.includes(group.id);
+            if (!isCollapsed) {
+                for (const task of visibleTasks) {
+                    rows.push({ type: "task", task, group });
+                }
+            }
+        }
+        return rows;
+    }, [groups, tasks, collapsedGroups, hideCompleted]);
+}
+
+export { useGanttLayout };

package/dist/components/data-display/GanttChart/hooks/useGanttScrollSync.d.ts

@@ -0,0 +1,6 @@
+export declare function useGanttScrollSync(): {
+    tableRef: import("react").RefObject<HTMLDivElement | null>;
+    chartRef: import("react").RefObject<HTMLDivElement | null>;
+    handleTableScroll: () => void;
+    handleChartScroll: () => void;
+};

package/dist/components/data-display/GanttChart/hooks/useGanttScrollSync.js

@@ -0,0 +1,32 @@
+import { useRef, useCallback } from 'react';
+
+function useGanttScrollSync() {
+    const tableRef = useRef(null);
+    const chartRef = useRef(null);
+    const isSyncing = useRef(false);
+    const handleTableScroll = useCallback(() => {
+        if (isSyncing.current)
+            return;
+        isSyncing.current = true;
+        requestAnimationFrame(() => {
+            if (tableRef.current && chartRef.current) {
+                chartRef.current.scrollTop = tableRef.current.scrollTop;
+            }
+            isSyncing.current = false;
+        });
+    }, []);
+    const handleChartScroll = useCallback(() => {
+        if (isSyncing.current)
+            return;
+        isSyncing.current = true;
+        requestAnimationFrame(() => {
+            if (chartRef.current && tableRef.current) {
+                tableRef.current.scrollTop = chartRef.current.scrollTop;
+            }
+            isSyncing.current = false;
+        });
+    }, []);
+    return { tableRef, chartRef, handleTableScroll, handleChartScroll };
+}
+
+export { useGanttScrollSync };

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

@@ -0,0 +1,3 @@
+export { GanttChart } from "./GanttChart";
+export type { GanttChartProps, GanttTask, GanttGroup, GanttColumn, GanttZoom, GanttHoliday, GanttChartThemeOverrides, } from "./GanttChart.types";
+export { ganttChartTheme } from "./GanttChart.theme";

package/dist/components/{core → data-display}/KPI/KPI.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
+import { motion } from 'motion/react';
 import { ArrowUpRightIcon, ArrowDownRightIcon } from '@heroicons/react/20/solid';
 import { cn } from '../../../utils/cn.js';
 import { kpiTheme } from './KPI.theme.js';
 
-const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, description, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
+const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, subtitle, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
     const theme = useMemo(() => ({
         ...kpiTheme,
         ...customTheme,
@@ -33,15 +34,16 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
     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 && (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] }))] }), formattedTrend && trendDirection && (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" })] }))] }), 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;
-                    // Fade the last 2-3 filled bars for a smooth transition
                     const fadeDistance = filledBars - i;
-                    const opacity = isFilled && fadeDistance <= 3
+                    const fillOpacity = isFilled && fadeDistance <= 3
                         ? 0.4 + (fadeDistance / 3) * 0.6
-                        : undefined;
-                    return (jsx("div", { className: cn("rounded-sm flex-1", barSize.height, isFilled
-                            ? theme.barFilledColors[color]
-                            : theme.barEmptyColor), style: isFilled && opacity !== undefined ? { opacity } : undefined }, i));
-                }) })), description && (jsx("span", { className: cn(theme.descriptionStyle, size === "sm" ? "text-xs" : "text-sm"), children: description }))] }));
+                        : 1;
+                    return (jsx("div", { className: cn("relative rounded-sm flex-1", barSize.height, theme.barEmptyColor), children: isFilled && (jsx(motion.div, { className: cn("absolute inset-0 rounded-sm", theme.barFilledColors[color]), initial: { opacity: 0 }, animate: { opacity: fillOpacity }, transition: {
+                                duration: 0.25,
+                                ease: "easeOut",
+                                delay: i * 0.03,
+                            } })) }, i));
+                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-xs" : "text-sm"), children: subtitle }))] }));
 });
 KPI.displayName = "KPI";
 

package/dist/components/{core → data-display}/KPI/KPI.theme.js

@@ -24,6 +24,7 @@ const kpiTheme = {
         success: "bg-[var(--color-success)]",
         warning: "bg-[var(--color-warning)]",
         danger: "bg-[var(--color-danger)]",
+        neutral: "bg-[var(--color-text-secondary)]",
     },
     barEmptyColor: "bg-[var(--color-background-tertiary)]",
     barSizes: {
@@ -31,7 +32,7 @@ const kpiTheme = {
         md: { height: "h-6", width: "w-[3px]", gap: "gap-[3px]" },
         lg: { height: "h-8", width: "w-1", gap: "gap-1" },
     },
-    descriptionStyle: "text-[var(--color-text-muted)]",
+    subtitleStyle: "text-[var(--color-text-muted)]",
 };
 
 export { kpiTheme };

package/dist/components/{core → data-display}/KPI/KPI.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, HTMLAttributes } from "react";
 export type KPISize = "sm" | "md" | "lg";
-export type KPIColor = "primary" | "success" | "warning" | "danger";
+export type KPIColor = "primary" | "success" | "warning" | "danger" | "neutral";
 export interface KPITheme {
     baseStyle: string;
     valueSizes: Record<KPISize, string>;
@@ -17,7 +17,7 @@ export interface KPITheme {
         width: string;
         gap: string;
     }>;
-    descriptionStyle: string;
+    subtitleStyle: string;
 }
 export interface KPIThemeOverrides {
     baseStyle?: string;
@@ -27,7 +27,7 @@ export interface KPIThemeOverrides {
     trendNegative?: string;
     barFilledColors?: Partial<Record<KPIColor, string>>;
     barEmptyColor?: string;
-    descriptionStyle?: string;
+    subtitleStyle?: string;
 }
 export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /**
@@ -56,9 +56,9 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
      */
     barCount?: number;
     /**
-     * Description text below the bars (e.g. "Compared to last month")
+     * Subtitle text below the bars (e.g. "Compared to last month")
      */
-    description?: string;
+    subtitle?: string;
     /**
      * Icon to display before the label.
      */

package/dist/components/{core → data-display}/KPI/index.d.ts

@@ -1,2 +1,3 @@
 export { KPI } from "./KPI";
+export { kpiTheme } from "./KPI.theme";
 export type { KPIProps, KPISize, KPIColor, KPITheme, KPIThemeOverrides, } from "./KPI.types";

package/dist/components/{core → data-display}/Metric/Metric.js

@@ -2,21 +2,18 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { metricTheme } from './Metric.theme.js';
-import { Badge } from '../Badge/Badge.js';
 import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
 
-const Metric = React__default.forwardRef(({ value, label, description, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
+const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
     var _a;
     const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
     const sizeStyles = metricTheme.sizes[size];
     const variantStyles = metricTheme.variants[variant];
     const variantColorStyles = metricTheme.variantColors[variant] || "";
     const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
-    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: cn("rounded-full p-1 flex flex-shrink-0 w-fit h-fit", trendDirection === "up"
-                                                        ? "bg-[var(--color-success-100)] text-[var(--color-success)] dark:bg-[var(--color-success-100)]/20"
-                                                        : "bg-[var(--color-danger-100)] text-[var(--color-danger)] dark:bg-[var(--color-danger-100)]/20"), children: trendIcon }), jsx(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "ghost", className: cn("bg-transparent p-0 font-semibold gap-1 ring-0", trendDirection === "up"
-                                                        ? "text-[var(--color-success)]"
-                                                        : "text-[var(--color-danger)]"), children: trendValue })] }))] }), description && (jsx("div", { className: cn(metricTheme.descriptionStyle, sizeStyles.description), children: description }))] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
+    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-sm font-medium", trendDirection === "up"
+                                                ? "text-[var(--color-success)]"
+                                                : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] }))] }), subtitle && (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle }))] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
 });
 Metric.displayName = "Metric";
 

package/dist/components/{core → data-display}/Metric/Metric.theme.js

@@ -19,15 +19,15 @@ const metricTheme = {
     iconContainerVariantColors: {
         filled: {
             neutral: "bg-white text-[var(--color-text-primary)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "dark:bg-[var(--color-background-secondary)]",
             primary: "bg-white text-[var(--color-primary)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "dark:bg-[var(--color-background-secondary)]",
             success: "bg-white text-[var(--color-success)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "dark:bg-[var(--color-background-secondary)]",
             warning: "bg-white text-[var(--color-warning)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "dark:bg-[var(--color-background-secondary)]",
             danger: "bg-white text-[var(--color-danger)] border border-[var(--color-border)] " +
-                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+                "dark:bg-[var(--color-background-secondary)]",
         },
         glass: {
             neutral: "glass-effect-1 !ring-0 text-[var(--color-text-primary)]",
@@ -49,7 +49,7 @@ const metricTheme = {
             iconContainer: "size-10",
             label: "text-xs",
             value: "text-xl",
-            description: "text-xs mt-1",
+            subtitle: "text-xs mt-1",
         },
         md: {
             container: "", // Padding moved to content section
@@ -57,7 +57,7 @@ const metricTheme = {
             iconContainer: "size-14",
             label: "text-sm",
             value: "text-2xl",
-            description: "text-xs mt-0.5",
+            subtitle: "text-xs mt-0.5",
         },
         lg: {
             container: "", // Padding moved to content section
@@ -65,13 +65,13 @@ const metricTheme = {
             iconContainer: "size-16",
             label: "text-base",
             value: "text-3xl",
-            description: "text-sm mt-1",
+            subtitle: "text-sm mt-1",
         },
     },
     // Common element styles
     labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-1",
     valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
-    descriptionStyle: "text-[var(--color-text-secondary)]/80",
+    subtitleStyle: "text-[var(--color-text-secondary)]/80",
     iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5",
 };
 

package/dist/components/{core → data-display}/Metric/Metric.types.d.ts

@@ -13,9 +13,9 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     label: string;
     /**
-     * Optional description or secondary text
+     * Optional subtitle or secondary text
      */
-    description?: string;
+    subtitle?: string;
     /**
      * Trend value to display (e.g., "+10.34%", "-5.2%")
      * Also acts as boolean - if provided, trend badge is shown
@@ -65,11 +65,11 @@ export interface MetricTheme {
         iconContainer: string;
         label: string;
         value: string;
-        description: string;
+        subtitle: string;
     }>;
     labelStyle: string;
     valueStyle: string;
-    descriptionStyle: string;
+    subtitleStyle: string;
     iconContainerStyle: string;
 }
 export interface MetricThemeOverrides {
@@ -83,10 +83,10 @@ export interface MetricThemeOverrides {
         iconContainer: string;
         label: string;
         value: string;
-        description: string;
+        subtitle: string;
     }>>>;
     labelStyle?: string;
     valueStyle?: string;
-    descriptionStyle?: string;
+    subtitleStyle?: string;
     iconContainerStyle?: string;
 }

package/dist/components/{core → data-display}/Table/Table.theme.js

@@ -22,8 +22,8 @@ const tableTheme = {
     },
     // Header styles
     // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
-    headerStyle: "text-left font-medium sticky top-0 border-b first:pl-4 last:pr-4 " +
-        "text-[var(--color-text-primary)] border-[var(--color-border)] ",
+    headerStyle: "text-left font-semibold sticky top-0 border-b first:pl-4 last:pr-4 " +
+        "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 " +

package/dist/components/{core → data-display}/Table/TableActions.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { Dropdown } from '../Dropdown/Dropdown.js';
-import '../Dropdown/DropdownTrigger.js';
-import '../Dropdown/DropdownMenu.js';
-import '../Dropdown/DropdownItem.js';
-import '../Dropdown/DropdownSection.js';
-import '../Dropdown/DropdownSeparator.js';
-import '../Dropdown/Dropdown.theme.js';
-import { Button } from '../Button/Button.js';
+import { Dropdown } from '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Dropdown/Dropdown.theme.js';
+import { Button } from '../../core/Button/Button.js';
 import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
 
 /**

package/dist/components/{core → data-display}/Table/TableColumnManager.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Popover } from '../Popover/Popover.js';
-import '../Popover/PopoverContext.js';
+import { Popover } from '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
 import { Cog6ToothIcon } from '@heroicons/react/24/outline';
-import { Button } from '../Button/Button.js';
+import { Button } from '../../core/Button/Button.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
-import { Sortable, SortableItem } from '../Sortable/Sortable.js';
+import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
 
 function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onToggleColumn, onResetToDefault, onColumnReorder, }) {
     const orderedColumns = columnOrder.length > 0

package/dist/components/{core → data-display}/Table/TableFilter.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { inferFilterType, getDefaultOperator, isUnaryOperator, getOperatorsForFilterType, isBetweenOperator } from './Table.filterUtils.js';
-import { Button } from '../Button/Button.js';
+import { Button } from '../../core/Button/Button.js';
 import { Input } from '../../forms/Input/Input.js';
 import '../../forms/Input/Input.theme.js';
 import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
-import { Popover } from '../Popover/Popover.js';
-import '../Popover/PopoverContext.js';
+import { Popover } from '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
 import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 

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

@@ -0,0 +1,25 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Pagination } from '../../core/Pagination/Pagination.js';
+import { Select } from '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * TablePagination provides a standardized pagination interface for tables
+ * Combines the core Pagination component with page size selection controls
+ */
+const TablePagination = React__default.forwardRef(({ currentPage, totalItems, pageSize, pageSizeOptions = [10, 25, 50, 100], onPageChange, onPageSizeChange, showPageSizeSelector = true, className, }, ref) => {
+    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,
+    }));
+    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-sm 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-sm 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";
+
+export { TablePagination };

package/dist/components/{core → data-display}/Table/TableRow.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { TableCell } from './TableCell.js';
-import { Button } from '../Button/Button.js';
+import { Button } from '../../core/Button/Button.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Radio } from '../../forms/Radio/Radio.js';
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';

package/dist/components/{core → data-display}/Table/TableSelectionHeader.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { Button } from '../Button/Button.js';
+import { Button } from '../../core/Button/Button.js';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 

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

@@ -0,0 +1,7 @@
+export * from "./Table";
+export * from "./KPI";
+export * from "./Metric";
+export * from "./DescriptionList";
+export * from "./Timeline";
+export * from "./Feed";
+export * from "./GanttChart";

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

@@ -0,0 +1,20 @@
+export { Table } from './Table/index.js';
+export { KPI } from './KPI/KPI.js';
+export { kpiTheme } from './KPI/KPI.theme.js';
+export { Metric } from './Metric/Metric.js';
+export { metricTheme } from './Metric/Metric.theme.js';
+export { DescriptionList } from './DescriptionList/DescriptionList.js';
+export { Timeline } from './Timeline/Timeline.js';
+export { Feed } from './Feed/Feed.js';
+export { GanttChart } from './GanttChart/GanttChart.js';
+export { ganttChartTheme } from './GanttChart/GanttChart.theme.js';
+export { TableActions } from './Table/TableActions.js';
+export { TableActionsMenu } from './Table/TableActionsMenu.js';
+export { TableFilter } from './Table/TableFilter.js';
+export { TablePagination } from './Table/TablePagination.js';
+export { filterData, getDefaultOperator, getOperatorsForFilterType, inferFilterType, isBetweenOperator, isUnaryOperator, operatorLabels } from './Table/Table.filterUtils.js';
+export { useTableColumns } from './Table/hooks/useTableColumns.js';
+export { useTableExpansion } from './Table/hooks/useTableExpansion.js';
+export { useTableFilter } from './Table/hooks/useTableFilter.js';
+export { useTablePagination } from './Table/hooks/useTablePagination.js';
+export { useTableSelection } from './Table/hooks/useTableSelection.js';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { AuroraProps } from './Aurora.types';
+/**
+ * Aurora creates an animated 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.
+ *
+ * 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>
+ * ```
+ */
+export declare const Aurora: React.FC<AuroraProps>;

package/dist/components/effects/Aurora/Aurora.js

@@ -0,0 +1,119 @@
+import { jsx } from 'react/jsx-runtime';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+const DEFAULT_COLORS = ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4'];
+/**
+ * Each blob follows a unique organic path using keyframed x/y translations
+ * and scale changes. The durations are intentionally varied so the blobs
+ * never synchronize, producing a natural morphing look.
+ */
+const blobAnimations = [
+    {
+        // Blob 0 -- slow horizontal drift with vertical bob
+        x: ['0%', '30%', '-20%', '10%', '0%'],
+        y: ['0%', '-25%', '15%', '-10%', '0%'],
+        scale: [1, 1.15, 0.9, 1.05, 1],
+        baseDuration: 20,
+    },
+    {
+        // Blob 1 -- figure-8-ish path, slightly faster
+        x: ['0%', '-35%', '25%', '-15%', '0%'],
+        y: ['0%', '20%', '-30%', '25%', '0%'],
+        scale: [1, 0.9, 1.2, 0.95, 1],
+        baseDuration: 23,
+    },
+    {
+        // Blob 2 -- wide circular sweep
+        x: ['0%', '25%', '0%', '-25%', '0%'],
+        y: ['0%', '-20%', '25%', '-15%', '0%'],
+        scale: [1, 1.1, 0.85, 1.15, 1],
+        baseDuration: 27,
+    },
+    {
+        // Blob 3 -- gentle diagonal drift
+        x: ['0%', '-20%', '30%', '-10%', '0%'],
+        y: ['0%', '30%', '-20%', '10%', '0%'],
+        scale: [1, 0.95, 1.1, 0.9, 1],
+        baseDuration: 31,
+    },
+];
+/**
+ * Positions each blob at a different quadrant of the container so they
+ * begin spread out. Additional blobs beyond 4 cycle through positions.
+ */
+const blobPositions = [
+    { top: '10%', left: '15%' },
+    { top: '5%', right: '10%' },
+    { bottom: '10%', left: '20%' },
+    { bottom: '5%', right: '15%' },
+];
+/**
+ * Aurora creates an animated 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.
+ *
+ * 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>
+ * ```
+ */
+const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3, size = 1, className, style, ...props }) => {
+    const shouldReduceMotion = useReducedMotion();
+    // Compute base blob dimension from the size multiplier.
+    // Using percentage-based sizing so it scales with the container.
+    const blobDimension = `${40 * size}%`;
+    return (jsx("div", { className: cn('absolute inset-0 overflow-hidden pointer-events-none', className), style: {
+            opacity,
+            filter: `blur(${blur}px)`,
+            ...style,
+        }, "aria-hidden": "true", ...props, children: colors.map((color, index) => {
+            const anim = blobAnimations[index % blobAnimations.length];
+            const position = blobPositions[index % blobPositions.length];
+            const duration = anim.baseDuration / speed;
+            // When reduced motion is preferred, render static blobs with no animation.
+            if (shouldReduceMotion) {
+                return (jsx("div", { style: {
+                        position: 'absolute',
+                        ...position,
+                        width: blobDimension,
+                        height: blobDimension,
+                        borderRadius: '50%',
+                        background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
+                        mixBlendMode: 'screen',
+                    } }, index));
+            }
+            return (jsx(motion.div, { animate: {
+                    x: anim.x,
+                    y: anim.y,
+                    scale: anim.scale,
+                }, transition: {
+                    duration,
+                    repeat: Infinity,
+                    repeatType: 'loop',
+                    ease: 'easeInOut',
+                }, style: {
+                    position: 'absolute',
+                    ...position,
+                    width: blobDimension,
+                    height: blobDimension,
+                    borderRadius: '50%',
+                    background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
+                    mixBlendMode: 'screen',
+                    willChange: 'transform',
+                } }, index));
+        }) }));
+};
+
+export { Aurora };

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

@@ -0,0 +1,15 @@
+import type React from 'react';
+export interface AuroraProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Array of CSS color values for the gradient blobs (default: ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4']) */
+    colors?: string[];
+    /** Blur amount in pixels applied to blobs (default: 80) */
+    blur?: number;
+    /** Animation speed multiplier. Higher values = faster movement (default: 1) */
+    speed?: number;
+    /** Overall opacity of the aurora layer, 0-1 (default: 0.3) */
+    opacity?: number;
+    /** Blob size multiplier. Higher values = larger blobs (default: 1) */
+    size?: number;
+    /** Additional className for the container */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Aurora } from './Aurora';
+export type { AuroraProps } from './Aurora.types';