@kala-ui/react-app 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/components/charts/chart-utils.js

@@ -0,0 +1,135 @@
+"use client";
+/**
+ * Chart Utilities
+ * Helper functions and default configurations for charts
+ */
+import { getChartColors, getThemeAwareChartOptions } from "./theme-utils.js";
+/**
+ * Get default chart options that match our design system
+ * @param theme - Optional theme override, otherwise detects from DOM
+ */
+export function getDefaultChartOptions(theme) {
+    const themeColors = getChartColors(theme);
+    const themeOptions = getThemeAwareChartOptions(theme);
+    return {
+        chart: {
+            fontFamily: "inherit",
+            foreColor: "var(--muted-foreground)",
+            background: "transparent",
+            toolbar: {
+                show: false,
+            },
+            zoom: {
+                enabled: false,
+            },
+        },
+        grid: {
+            borderColor: themeColors.grid,
+            strokeDashArray: 3,
+            xaxis: {
+                lines: {
+                    show: false,
+                },
+            },
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        tooltip: {
+            theme: themeOptions.tooltip.theme,
+        },
+        legend: {
+            labels: {
+                colors: themeOptions.legend.labels.colors,
+            },
+        },
+    };
+}
+/**
+ * Default color palette matching design tokens
+ * @param theme - Optional theme override, otherwise detects from DOM
+ * @deprecated Use getChartColors() instead for theme-aware colors
+ */
+export function defaultColors(theme) {
+    const colors = getChartColors(theme);
+    return {
+        primary: colors.primary,
+        success: colors.success,
+        warning: colors.warning,
+        destructive: colors.destructive,
+        info: colors.info,
+        mixed: colors.mixed,
+    };
+}
+/**
+ * Format number with appropriate units
+ */
+export function formatNumber(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(1)}K`;
+    }
+    return value.toFixed(0);
+}
+/**
+ * Format currency values
+ */
+export function formatCurrency(value, currency = "USD") {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+    }).format(value);
+}
+/**
+ * Format percentage values
+ */
+export function formatPercentage(value, decimals = 1) {
+    return `${value.toFixed(decimals)}%`;
+}
+/**
+ * Generate gradient colors for area charts
+ */
+export function createGradient(_color, opacity = 0.7) {
+    return {
+        type: "gradient",
+        gradient: {
+            shadeIntensity: 1,
+            opacityFrom: opacity,
+            opacityTo: opacity * 0.3,
+            stops: [0, 90, 100],
+        },
+    };
+}
+/**
+ * Get responsive breakpoints for charts
+ */
+export function getResponsiveOptions() {
+    return [
+        {
+            breakpoint: 768,
+            options: {
+                chart: {
+                    height: 300,
+                },
+                legend: {
+                    position: "bottom",
+                },
+            },
+        },
+        {
+            breakpoint: 480,
+            options: {
+                chart: {
+                    height: 250,
+                },
+                legend: {
+                    show: false,
+                },
+            },
+        },
+    ];
+}

package/dist/components/charts/chart.d.ts

@@ -11,6 +11,8 @@ export interface ChartProps extends Props {
     emptyMessage?: string;
     skeletonConfig?: ChartSkeletonConfig;
     skeleton?: React.ReactNode;
+    /** Per-part overrides: root, empty, emptyIcon, emptyText. */
+    slotStyles?: import("@kala-ui/react/lib/slot-styles").SlotStyles;
 }
 /**
  * Get tooltip theme from DOM safely (SSR-compatible)
@@ -20,6 +22,6 @@ declare function getTooltipTheme(): "dark" | "light";
  * Base Chart Component - use this as the foundation for all charts
  * Provides consistent styling, loading skeleton, and empty state
  */
-export declare function Chart({ className, isLoading, isEmpty, emptyMessage, skeletonConfig, skeleton, ...props }: ChartProps): import("react").JSX.Element;
+export declare function Chart({ className, isLoading, isEmpty, emptyMessage, skeletonConfig, skeleton, slotStyles: slotStylesRaw, ...props }: ChartProps): import("react").JSX.Element;
 export { ChartSkeleton } from "./chart-skeleton";
 export { getTooltipTheme };

package/dist/components/charts/chart.js

@@ -4,8 +4,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Base Chart Component
  * React component for ApexCharts with built-in loading and empty states
  */
+import { useSlotStyles } from "@kala-ui/react/kala-provider";
+import { applySlot } from "@kala-ui/react/lib/slot-styles";
 import { cn } from "@kala-ui/react/lib/utils";
 import { lazy, Suspense } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { ChartSkeleton } from "./chart-skeleton.js";
 // apexcharts touches `window` at module scope, so importing it statically
 // crashes any SSR framework on the first render — and the root barrel
@@ -24,14 +27,20 @@ function getTooltipTheme() {
  * Base Chart Component - use this as the foundation for all charts
  * Provides consistent styling, loading skeleton, and empty state
  */
-export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data available", skeletonConfig, skeleton, ...props }) {
+export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data available", skeletonConfig, skeleton, slotStyles: slotStylesRaw, ...props }) {
+    const slotStyles = useSlotStyles("charts", slotStylesRaw);
+    const { "data-kala-component": _marker, ...chartProps } = props;
+    const markerProps = { "data-kala-component": _marker };
     // Render skeleton if loading
     if (isLoading) {
         if (skeleton) {
             return _jsx(_Fragment, { children: skeleton });
         }
-        return _jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className });
+        return (_jsx(ChartSkeleton, { "data-kala-component": "charts-chart", ...(skeletonConfig || {}), className: className }));
     }
+    const emptyPart = applySlot(chartStyles.empty, slotStyles?.empty);
+    const emptyIcon = applySlot(chartStyles.emptyIcon, slotStyles?.emptyIcon);
+    const emptyText = applySlot(chartStyles.emptyText, slotStyles?.emptyText);
     // Render empty state when no data
     if (isEmpty) {
         // Height may arrive as a number (px) or a CSS length string ("20rem",
@@ -40,9 +49,10 @@ export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data a
         const height = typeof configuredHeight === "number"
             ? `${configuredHeight}px`
             : configuredHeight;
-        return (_jsxs("div", { className: cn("w-full flex flex-col items-center justify-center text-center rounded-lg border bg-card text-muted-foreground", className), style: { height }, children: [_jsxs("svg", { className: "mb-3 h-10 w-10 opacity-40", fill: "none", role: "img", "aria-label": "Chart empty state", stroke: "currentColor", viewBox: "0 0 24 24", children: [_jsx("title", { children: "No chart data" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 13h2v8H3zM9 9h2v12H9zM15 5h2v16h-2zM21 1h2v20h-2z" })] }), _jsx("p", { className: "text-sm", children: emptyMessage })] }));
+        return (_jsxs("div", { "data-kala-component": "charts-chart", className: cn(emptyPart.className, className), style: { height, ...emptyPart.style }, children: [_jsxs("svg", { className: emptyIcon.className, fill: "none", role: "img", "aria-label": "Chart empty state", stroke: "currentColor", viewBox: "0 0 24 24", children: [_jsx("title", { children: "No chart data" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 13h2v8H3zM9 9h2v12H9zM15 5h2v16h-2zM21 1h2v20h-2z" })] }), _jsx("p", { className: emptyText.className, children: emptyMessage })] }));
     }
-    return (_jsx("div", { className: cn("w-full", className), children: _jsx(Suspense, { fallback: skeleton ?? (_jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className })), children: _jsx(ReactApexChart, { ...props }) }) }));
+    const root = applySlot(cn(chartStyles.root, className), slotStyles?.root);
+    return (_jsx("div", { "data-kala-component": _marker ?? "charts-chart", className: root.className, style: root.style, children: _jsx(Suspense, { fallback: skeleton ?? (_jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className })), children: _jsx(ReactApexChart, { ...chartProps }) }) }));
 }
 export { ChartSkeleton } from "./chart-skeleton.js";
 export { getTooltipTheme };

package/dist/components/charts/chart.types.d.ts

@@ -2,6 +2,7 @@
  * Chart Component Types
  * Type definitions for ApexCharts-based chart components
  */
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
 import type { ApexOptions } from "apexcharts";
 /**
  * Base chart props shared across all chart types
@@ -27,6 +28,8 @@ export interface BaseChartProps {
     isLoading?: boolean;
     /** Message shown when data is empty (default: "No data available") */
     emptyMessage?: string;
+    /** Per-part overrides: root, empty, emptyIcon, emptyText, titleBlock, title, subtitle. */
+    slotStyles?: SlotStyles;
 }
 /**
  * Series data point for single value charts

package/dist/components/charts/donut-chart.d.ts

@@ -3,5 +3,5 @@
  * Circular charts for showing proportions and percentages
  */
 import type { DonutChartProps } from "./chart.types";
-export declare function DonutChart({ series, labels, colors, height, width, className, title, subtitle, animations, donut, donutSize, dataLabels, legend, isLoading, emptyMessage, options: customOptions, }: DonutChartProps): import("react").JSX.Element;
+export declare function DonutChart({ series, labels, colors, height, width, className, title, subtitle, animations, donut, donutSize, dataLabels, legend, slotStyles, isLoading, emptyMessage, options: customOptions, }: DonutChartProps): import("react").JSX.Element;
 export declare function PieChart(props: DonutChartProps): import("react").JSX.Element;

package/dist/components/charts/donut-chart.js

@@ -7,10 +7,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@kala-ui/react/lib/utils";
 import { useMemo } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { Chart, getTooltipTheme } from "./chart.js";
 import { useThemeAwareChart } from "./use-theme-aware-chart.js";
-import { getDefaultChartOptions } from "./utils.js";
-export function DonutChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, donut = true, donutSize = 65, dataLabels = true, legend = true, isLoading, emptyMessage, options: customOptions, }) {
+import { getDefaultChartOptions } from "./chart-utils.js";
+export function DonutChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, donut = true, donutSize = 65, dataLabels = true, legend = true, slotStyles, isLoading, emptyMessage, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const isEmpty = !isLoading && (series.length === 0 || labels.length === 0);
     const chartOptions = useMemo(() => {
@@ -138,9 +139,9 @@ export function DonutChart({ series, labels, colors, height = 350, width = "100%
         subtitle,
         customOptions,
     ]);
-    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: donut ? "donut" : "pie", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-donut-chart", className: cn(chartStyles.root, className), slotStyles: slotStyles, options: chartOptions, series: series, type: donut ? "donut" : "pie", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }
 // Convenience alias for Pie charts
 export function PieChart(props) {
-    return _jsx(DonutChart, { ...props, donut: false });
+    return (_jsx(DonutChart, { "data-kala-component": "charts-pie-chart", ...props, donut: false }));
 }

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

@@ -11,4 +11,4 @@ export { LineChart } from "./line-chart";
 export { RadialBarChart } from "./radial-bar-chart";
 export * from "./theme-utils";
 export { useThemeAwareChart } from "./use-theme-aware-chart";
-export * from "./utils";
+export * from "./chart-utils";

package/dist/components/charts/index.js

@@ -12,4 +12,4 @@ export { LineChart } from "./line-chart.js";
 export { RadialBarChart } from "./radial-bar-chart.js";
 export * from "./theme-utils.js";
 export { useThemeAwareChart } from "./use-theme-aware-chart.js";
-export * from "./utils.js";
+export * from "./chart-utils.js";

package/dist/components/charts/line-chart.d.ts

@@ -3,4 +3,4 @@
  * Clean line charts for trends and time series data
  */
 import type { LineChartProps } from "./chart.types";
-export declare function LineChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, curve, strokeWidth, markers, yAxisLabel, isLoading, emptyMessage, options: customOptions, }: LineChartProps): import("react").JSX.Element;
+export declare function LineChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, curve, strokeWidth, markers, yAxisLabel, slotStyles, isLoading, emptyMessage, options: customOptions, }: LineChartProps): import("react").JSX.Element;

package/dist/components/charts/line-chart.js

@@ -7,9 +7,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@kala-ui/react/lib/utils";
 import { useMemo } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { Chart, getTooltipTheme } from "./chart.js";
 import { useThemeAwareChart } from "./use-theme-aware-chart.js";
-import { getDefaultChartOptions } from "./utils.js";
+import { getDefaultChartOptions } from "./chart-utils.js";
 /**
  * Check if series data is empty (no series or all series have empty data arrays)
  */
@@ -18,7 +19,7 @@ function isSeriesEmpty(series) {
         return true;
     return series.every((s) => !s.data || (Array.isArray(s.data) && s.data.length === 0));
 }
-export function LineChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", strokeWidth = 2, markers = true, yAxisLabel, isLoading, emptyMessage, options: customOptions, }) {
+export function LineChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", strokeWidth = 2, markers = true, yAxisLabel, slotStyles, isLoading, emptyMessage, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const isEmpty = !isLoading && isSeriesEmpty(series);
     const chartOptions = useMemo(() => {
@@ -154,5 +155,5 @@ export function LineChart({ series, categories, colors, height = 350, width = "1
         subtitle,
         customOptions,
     ]);
-    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: "line", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-line-chart", className: cn(chartStyles.root, className), slotStyles: slotStyles, options: chartOptions, series: series, type: "line", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }

package/dist/components/charts/radial-bar-chart.d.ts

@@ -3,4 +3,4 @@
  * Circular progress bars for showing percentages and completion rates
  */
 import type { RadialBarChartProps } from "./chart.types";
-export declare function RadialBarChart({ series, labels, colors, height, width, className, title, subtitle, animations, dataLabels, hollowSize, isLoading, emptyMessage, options: customOptions, }: RadialBarChartProps): import("react").JSX.Element;
+export declare function RadialBarChart({ series, labels, colors, height, width, className, title, subtitle, animations, dataLabels, hollowSize, slotStyles, isLoading, emptyMessage, options: customOptions, }: RadialBarChartProps): import("react").JSX.Element;

package/dist/components/charts/radial-bar-chart.js

@@ -7,10 +7,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@kala-ui/react/lib/utils";
 import { useMemo } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { Chart, getTooltipTheme } from "./chart.js";
 import { useThemeAwareChart } from "./use-theme-aware-chart.js";
-import { getDefaultChartOptions } from "./utils.js";
-export function RadialBarChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, dataLabels = true, hollowSize = "50%", isLoading, emptyMessage, options: customOptions, }) {
+import { getDefaultChartOptions } from "./chart-utils.js";
+export function RadialBarChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, dataLabels = true, hollowSize = "50%", slotStyles, isLoading, emptyMessage, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const isEmpty = !isLoading && (series.length === 0 || labels.length === 0);
     const chartOptions = useMemo(() => {
@@ -111,5 +112,5 @@ export function RadialBarChart({ series, labels, colors, height = 350, width = "
         subtitle,
         customOptions,
     ]);
-    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: "radialBar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-radial-bar-chart", className: cn(chartStyles.root, className), slotStyles: slotStyles, options: chartOptions, series: series, type: "radialBar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }

package/dist/components/data-table/column-filters.js

@@ -14,7 +14,7 @@ export function ColumnFilters({ filterableColumns, activeFilters, onFilterChange
         return null;
     }
     const hasActiveFilters = activeFilters.length > 0;
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [filterableColumns.map((column) => {
+    return (_jsxs("div", { "data-kala-component": "data-table-column-filters", className: "flex flex-wrap items-center gap-2", children: [filterableColumns.map((column) => {
                 const activeFilter = activeFilters.find((f) => f.key === column.key);
                 const filterValue = activeFilter?.value;
                 if (column.type === "select" && column.options) {

package/dist/components/data-table/column-header-filter.js

@@ -64,7 +64,7 @@ export function ColumnHeaderFilter({ column, activeFilters, onFilterChange, onFi
         onFilterRemove(column.key);
         setTextValue("");
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0 hover:bg-muted relative", "aria-label": `Filter by ${column.label}`, children: [_jsx(Filter, { className: `h-4 w-4 ${hasActiveFilter ? "text-primary" : "text-muted-foreground"}` }), hasActiveFilter ? (_jsx(Badge, { className: "absolute -top-1 -right-1 h-4 w-4 p-0 flex items-center justify-center text-[10px]", children: _jsx(Text, { size: "xs", weight: "bold", className: "text-primary-foreground", children: column.type === "text" ? "1" : activeCount }) })) : null] }) }), _jsx(PopoverContent, { className: "w-64 p-3", align: "start", children: _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", justify: "between", children: [_jsxs(Heading, { size: "h6", weight: "medium", className: "text-sm", children: ["Filter by ", column.label] }), hasActiveFilter ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleClear, className: "h-7 px-2 text-xs text-muted-foreground", children: [_jsx(X, { className: "h-3 w-3 mr-1" }), "Clear"] })) : null] }), column.type === "select" && column.options ? (_jsx(Stack, { gap: 2, className: "max-h-[300px] overflow-y-auto", children: column.options.map((option) => {
+    return (_jsxs(Popover, { "data-kala-component": "data-table-column-header-filter", open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0 hover:bg-muted relative", "aria-label": `Filter by ${column.label}`, children: [_jsx(Filter, { className: `h-4 w-4 ${hasActiveFilter ? "text-primary" : "text-muted-foreground"}` }), hasActiveFilter ? (_jsx(Badge, { className: "absolute -top-1 -right-1 h-4 w-4 p-0 flex items-center justify-center text-[10px]", children: _jsx(Text, { size: "xs", weight: "bold", className: "text-primary-foreground", children: column.type === "text" ? "1" : activeCount }) })) : null] }) }), _jsx(PopoverContent, { className: "w-64 p-3", align: "start", children: _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", justify: "between", children: [_jsxs(Heading, { size: "h6", weight: "medium", className: "text-sm", children: ["Filter by ", column.label] }), hasActiveFilter ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleClear, className: "h-7 px-2 text-xs text-muted-foreground", children: [_jsx(X, { className: "h-3 w-3 mr-1" }), "Clear"] })) : null] }), column.type === "select" && column.options ? (_jsx(Stack, { gap: 2, className: "max-h-[300px] overflow-y-auto", children: column.options.map((option) => {
                                 const isChecked = selectedValues.includes(option.value);
                                 return (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: `${String(column.key)}-${option.value}`, checked: isChecked, onCheckedChange: (checked) => handleCheckboxChange(option.value, checked === true) }), _jsx(Label, { htmlFor: `${String(column.key)}-${option.value}`, className: "text-sm font-normal cursor-pointer flex-1 text-foreground", children: option.label })] }, option.value));
                             }) })) : (_jsxs(Stack, { gap: 2, children: [_jsx(Input, { type: "text", placeholder: column.placeholder || `Filter by ${column.label}`, value: textValue, onChange: (e) => setTextValue(e.target.value), onKeyDown: (e) => {

package/dist/components/data-table/data-table-body-rows.js

@@ -9,7 +9,7 @@ import { Checkbox } from "@kala-ui/react/checkbox";
 import { cn } from "@kala-ui/react/lib/utils";
 import { TableBody, TableCell, TableRow } from "@kala-ui/react/table";
 export function DataTableBodyRows({ displayData, columns, selection, selectedIds, onSelectRow, onRowClick, compact, striped, hoverable, getRowClassName, getRowAttributes, hasPagination, hasFooter, }) {
-    return (_jsx(TableBody, { children: displayData.map((row, rowIndex) => {
+    return (_jsx(TableBody, { "data-kala-component": "data-table-body-rows", children: displayData.map((row, rowIndex) => {
             const isSelectable = !selection?.isRowSelectable || selection.isRowSelectable(row);
             const rowId = selection?.getRowId(row);
             const isSelected = rowId ? selectedIds.has(rowId) : false;

package/dist/components/data-table/data-table-filter-chips.js

@@ -13,7 +13,7 @@ import { X } from "lucide-react";
 export function DataTableFilterChips({ filterConfigs, filterableColumns, onSetFilter, onRemoveFilter, onClearFilters, }) {
     if (filterConfigs.length === 0)
         return null;
-    return (_jsxs(Flex, { align: "center", gap: 2, className: "mb-4 flex-wrap", children: [_jsx(Text, { size: "sm", className: "text-muted-foreground", children: "Active filters:" }), filterConfigs.map((filter) => {
+    return (_jsxs(Flex, { "data-kala-component": "data-table-filter-chips", align: "center", gap: 2, className: "mb-4 flex-wrap", children: [_jsx(Text, { size: "sm", className: "text-muted-foreground", children: "Active filters:" }), filterConfigs.map((filter) => {
                 const column = filterableColumns.find((fc) => fc.key === filter.key);
                 if (!column)
                     return null;

package/dist/components/data-table/data-table-header-row.js

@@ -13,7 +13,7 @@ import { TableHead, TableHeader, TableRow } from "@kala-ui/react/table";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { ColumnHeaderFilter } from "./column-header-filter.js";
 export function DataTableHeaderRow({ columns, selection, sortConfig, onToggleSort, filterableColumns, filterConfigs, onSetFilter, onRemoveFilter, isAllSelected, isSomeSelected, onSelectAll, stickyHeader, }) {
-    return (_jsx(TableHeader, { className: stickyHeader
+    return (_jsx(TableHeader, { "data-kala-component": "data-table-header-row", className: stickyHeader
             ? "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm [&_tr]:border-0"
             : "[&_tr]:border-0", children: _jsxs(TableRow, { className: "border-0", children: [selection?.enabled && (_jsx(TableHead, { className: stickyHeader
                         ? "w-12 rounded-tl-lg border-b border-border-strong/50"

package/dist/components/data-table/data-table-skeleton.js

@@ -15,7 +15,7 @@ import { Select, SelectTrigger, SelectValue } from "@kala-ui/react/select";
 import { Skeleton } from "@kala-ui/react/skeleton";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@kala-ui/react/table";
 export function DataTableSkeleton({ rows = 5, columns, showSearch = false, showFilters = false, filterCount = 3, showPagination = false, showSelection = false, showBulkActions = false, stickyHeader = true, stickyFooter = false, }) {
-    return (_jsxs("div", { className: "flex flex-col", children: [showSearch && (_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4 shrink-0", children: [_jsx("div", { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "search", placeholder: "Search...", disabled: true, className: "opacity-50" }) }), showBulkActions && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap min-h-[36px]", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "0 selected" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Edit" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Delete" })] }))] })), showFilters && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4 shrink-0", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Active filters:" }), Array.from({ length: filterCount }).map((_, i) => (_jsxs(Badge, { color: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsx("span", { className: "text-xs font-medium", children: "Filter: Value" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-sm", children: _jsx(Skeleton, { className: "h-3 w-3" }) })] }, `filter-${i}`))), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] })), _jsx("div", { className: cn("border relative overflow-hidden kala-surface-card", showPagination ? "rounded-t-lg border-b-0" : "rounded-lg", stickyFooter ? "flex-1 min-h-0" : ""), children: _jsx("div", { className: cn("overflow-auto relative", showPagination ? "rounded-t-lg" : "rounded-lg", stickyFooter ? "flex-1 min-h-0 max-h-[70vh]" : "max-h-[600px]"), children: _jsxs("table", { className: "w-full border-separate border-spacing-0 caption-bottom text-sm", children: [_jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm", "[&_tr]:border-0"), children: _jsxs(TableRow, { className: "border-0", children: [showSelection && (_jsx(TableHead, { className: cn("w-12 rounded-tl-lg", stickyHeader
+    return (_jsxs("div", { "data-kala-component": "data-table-skeleton", className: "flex flex-col", children: [showSearch && (_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4 shrink-0", children: [_jsx("div", { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "search", placeholder: "Search...", disabled: true, className: "opacity-50" }) }), showBulkActions && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap min-h-[36px]", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "0 selected" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Edit" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Delete" })] }))] })), showFilters && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4 shrink-0", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Active filters:" }), Array.from({ length: filterCount }).map((_, i) => (_jsxs(Badge, { color: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsx("span", { className: "text-xs font-medium", children: "Filter: Value" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-sm", children: _jsx(Skeleton, { className: "h-3 w-3" }) })] }, `filter-${i}`))), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] })), _jsx("div", { className: cn("border relative overflow-hidden kala-surface-card", showPagination ? "rounded-t-lg border-b-0" : "rounded-lg", stickyFooter ? "flex-1 min-h-0" : ""), children: _jsx("div", { className: cn("overflow-auto relative", showPagination ? "rounded-t-lg" : "rounded-lg", stickyFooter ? "flex-1 min-h-0 max-h-[70vh]" : "max-h-[600px]"), children: _jsxs("table", { className: "w-full border-separate border-spacing-0 caption-bottom text-sm", children: [_jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm", "[&_tr]:border-0"), children: _jsxs(TableRow, { className: "border-0", children: [showSelection && (_jsx(TableHead, { className: cn("w-12 rounded-tl-lg", stickyHeader
                                                 ? "border-b border-border-strong/50"
                                                 : "border-b"), children: _jsx(Checkbox, { disabled: true }) })), columns.map((column, index) => {
                                             const isFirst = !showSelection && index === 0;

package/dist/components/data-table/data-table-toolbar.js

@@ -17,7 +17,7 @@ export function DataTableToolbar({ searchConfig, searchQuery, onSearchChange, bu
     const showRight = toolbarContent || bulkActions;
     if (!showSearch && !showRight)
         return null;
-    return (_jsxs(Flex, { align: "center", justify: "between", gap: 4, className: cn("mb-4 flex-wrap", className), children: [showSearch && (_jsx(Box, { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "text", placeholder: searchConfig?.placeholder, value: searchQuery, onChange: (e) => onSearchChange(e.target.value), prefixIcon: _jsx(Search, { className: "h-4 w-4" }), suffixIcon: searchQuery ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onSearchChange(""), className: "p-1 text-muted-foreground hover:text-foreground h-auto", "aria-label": "Clear search", children: _jsx(X, { className: "h-4 w-4" }) })) : null, "aria-label": searchConfig?.ariaLabel }) })), showRight && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap", children: [toolbarContent, bulkActions && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap min-h-[36px]", children: [_jsxs(Text, { size: "sm", className: "text-muted-foreground", children: [selectedIdsCount, " selected"] }), bulkActions.map((action) => (_jsxs(Button, { variant: action.variant === "destructive"
+    return (_jsxs(Flex, { "data-kala-component": "data-table-toolbar", align: "center", justify: "between", gap: 4, className: cn("mb-4 flex-wrap", className), children: [showSearch && (_jsx(Box, { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "text", placeholder: searchConfig?.placeholder, value: searchQuery, onChange: (e) => onSearchChange(e.target.value), prefixIcon: _jsx(Search, { className: "h-4 w-4" }), suffixIcon: searchQuery ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onSearchChange(""), className: "p-1 text-muted-foreground hover:text-foreground h-auto", "aria-label": "Clear search", children: _jsx(X, { className: "h-4 w-4" }) })) : null, "aria-label": searchConfig?.ariaLabel }) })), showRight && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap", children: [toolbarContent, bulkActions && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap min-h-[36px]", children: [_jsxs(Text, { size: "sm", className: "text-muted-foreground", children: [selectedIdsCount, " selected"] }), bulkActions.map((action) => (_jsxs(Button, { variant: action.variant === "destructive"
                                     ? "solid"
                                     : (action.variant ?? "outline"), color: action.variant === "destructive" ? "destructive" : undefined, size: "sm", onClick: () => action.onClick(selectedRows), disabled: selectedIdsCount === 0 || action.disabled, className: selectedIdsCount === 0
                                     ? "opacity-50 cursor-not-allowed"

package/dist/components/data-table/data-table.js

@@ -37,7 +37,7 @@ import { DataTableHeaderRow } from "./data-table-header-row.js";
 import { DataTableSkeleton } from "./data-table-skeleton.js";
 import { DataTableToolbar } from "./data-table-toolbar.js";
 import { PaginationNav } from "./pagination-nav.js";
-import { useTableState } from "./useTableState.js";
+import { useTableState } from "./use-table-state.js";
 /**
  * DataTable Component
  */
@@ -212,7 +212,7 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
     // Render loading state
     if (isLoading) {
         if (skeleton) {
-            return (_jsx(Stack, { gap: 4, className: className, children: skeleton }));
+            return (_jsx(Stack, { "data-kala-component": "data-table", gap: 4, className: className, children: skeleton }));
         }
         const showSearch = !!searchConfig;
         const showFilters = !!filterableColumns;
@@ -220,7 +220,7 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
         const showSelection = !!selection?.enabled;
         const showBulkActions = !!bulkActions;
         const skeletonRows = skeletonConfig?.rows ?? loadingConfig?.rows ?? 5;
-        return (_jsx(Stack, { gap: 4, className: className, children: _jsx(DataTableSkeleton, { rows: skeletonRows, columns: columns, showSearch: showSearch, showFilters: showFilters, showPagination: showPagination, showSelection: showSelection, showBulkActions: showBulkActions, stickyHeader: stickyHeader, stickyFooter: stickyFooter }) }));
+        return (_jsx(Stack, { "data-kala-component": "data-table", gap: 4, className: className, children: _jsx(DataTableSkeleton, { rows: skeletonRows, columns: columns, showSearch: showSearch, showFilters: showFilters, showPagination: showPagination, showSelection: showSelection, showBulkActions: showBulkActions, stickyHeader: stickyHeader, stickyFooter: stickyFooter }) }));
     }
     // Compute empty state config
     const emptyConfig = {
@@ -230,7 +230,9 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
             : "There is no data to display at the moment.",
         ...emptyState,
     };
-    return (_jsxs(Stack, { className: cn(stickyFooter ? "h-full min-h-0" : "", className), "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, gap: 0, children: [_jsx(DataTableToolbar, { searchConfig: searchConfig, searchQuery: searchQuery, onSearchChange: setSearchQuery, bulkActions: bulkActions, selectedRows: selectedRows, selectedIdsCount: selectedIds.size, toolbarContent: toolbarContent, hasData: data.length > 0, className: stickyFooter ? "shrink-0" : undefined }), filterableColumns && (_jsx("div", { className: stickyFooter ? "shrink-0" : undefined, children: _jsx(DataTableFilterChips, { filterConfigs: filterConfigs, filterableColumns: filterableColumns, onSetFilter: setFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters }) })), displayData.length === 0 && !filterConfigs.length && !searchQuery ? (_jsx(EmptyState, { title: emptyConfig.title, description: emptyConfig.description, ...(emptyState?.icon && { icon: emptyState.icon }), ...(emptyState?.action && { action: emptyState.action }) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { className: cn("border relative overflow-hidden kala-surface-card", stickyFooter && paginationConfig && displayData.length > 0
+    return (_jsxs(Stack, { "data-kala-component": "data-table", className: cn(stickyFooter ? "h-full min-h-0" : "", className), "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, gap: 0, children: [_jsx(DataTableToolbar, { searchConfig: searchConfig, searchQuery: searchQuery, onSearchChange: setSearchQuery, bulkActions: bulkActions, selectedRows: selectedRows, selectedIdsCount: selectedIds.size, toolbarContent: toolbarContent, hasData: data.length > 0, className: stickyFooter ? "shrink-0" : undefined }), filterableColumns && (_jsx("div", { className: stickyFooter ? "shrink-0" : undefined, children: _jsx(DataTableFilterChips, { filterConfigs: filterConfigs, filterableColumns: filterableColumns, onSetFilter: setFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters }) })), displayData.length === 0 && !filterConfigs.length && !searchQuery ? (_jsx(EmptyState, { title: emptyConfig.title, description: emptyConfig.description, ...(emptyState?.icon && { icon: emptyState.icon }), ...(emptyState?.action && { action: emptyState.action }), ...(emptyState?.slotStyles && {
+                    slotStyles: emptyState.slotStyles,
+                }) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { className: cn("border relative overflow-hidden kala-surface-card", stickyFooter && paginationConfig && displayData.length > 0
                             ? "flex-1 min-h-0"
                             : "", bordered && "border-2", paginationConfig && displayData.length > 0
                             ? "rounded-t-lg border-b-0"

package/dist/components/data-table/data-table.types.d.ts

@@ -121,6 +121,8 @@ export interface EmptyStateConfig {
         label: string;
         onClick: () => void;
     };
+    /** Per-part overrides forwarded to the embedded EmptyState */
+    slotStyles?: EmptyStateProps["slotStyles"];
 }
 /**
  * Loading state configuration - DEPRECATED: Use DataTableSkeletonConfig

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

@@ -3,4 +3,4 @@
  */
 export { DataTable, DataTableSkeleton } from "./data-table";
 export type { BulkAction, ColumnDef, DataTableProps, DataTableSkeletonConfig, EmptyStateConfig, FilterableColumn, FilterConfig, FilterOperator, LoadingConfig, PaginationConfig, SearchConfig, SelectionConfig, SortConfig, SortDirection, TableState, } from "./data-table.types";
-export { useTableState } from "./useTableState";
+export { useTableState } from "./use-table-state";

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

@@ -3,4 +3,4 @@
  * DataTable Component Exports
  */
 export { DataTable, DataTableSkeleton } from "./data-table.js";
-export { useTableState } from "./useTableState.js";
+export { useTableState } from "./use-table-state.js";

package/dist/components/data-table/pagination-nav.js

@@ -19,5 +19,5 @@ export function PaginationNav({ currentPage, totalPages, hasPreviousPage, hasNex
         boundaries: 1,
         onPageChange,
     });
-    return (_jsxs(Flex, { align: "center", justify: "center", wrap: "wrap", gap: 1, children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: onPreviousPage, disabled: !hasPreviousPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Previous page" })] }), range.map((item, index) => item === DOTS ? (_jsx(Flex, { align: "center", justify: "center", className: "h-8 w-8", "aria-hidden": true, children: _jsx(MoreHorizontal, { className: "h-4 w-4 text-muted-foreground" }) }, `dots-${index}`)) : (_jsx(Button, { variant: item === currentPage ? "solid" : "outline", size: "sm", onClick: () => onPageChange(item), className: "h-8 w-8 p-0 text-xs", "aria-label": `Page ${item}`, "aria-current": item === currentPage ? "page" : undefined, children: item }, item))), _jsxs(Button, { variant: "outline", size: "sm", onClick: onNextPage, disabled: !hasNextPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronRight, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Next page" })] })] }));
+    return (_jsxs(Flex, { "data-kala-component": "data-table-pagination-nav", align: "center", justify: "center", wrap: "wrap", gap: 1, children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: onPreviousPage, disabled: !hasPreviousPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Previous page" })] }), range.map((item, index) => item === DOTS ? (_jsx(Flex, { align: "center", justify: "center", className: "h-8 w-8", "aria-hidden": true, children: _jsx(MoreHorizontal, { className: "h-4 w-4 text-muted-foreground" }) }, `dots-${index}`)) : (_jsx(Button, { variant: item === currentPage ? "solid" : "outline", size: "sm", onClick: () => onPageChange(item), className: "h-8 w-8 p-0 text-xs", "aria-label": `Page ${item}`, "aria-current": item === currentPage ? "page" : undefined, children: item }, item))), _jsxs(Button, { variant: "outline", size: "sm", onClick: onNextPage, disabled: !hasNextPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronRight, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Next page" })] })] }));
 }

package/dist/components/data-table/use-table-state.d.ts

@@ -0,0 +1,29 @@
+/**
+ * useTableState Hook
+ * Manages table state including sorting, filtering, pagination, and search
+ */
+import type { ColumnDef, FilterConfig, SearchConfig, SortConfig, TableState } from "./data-table.types";
+interface UseTableStateOptions<TData> {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    defaultSort?: SortConfig<TData>;
+    defaultFilters?: FilterConfig<TData>[];
+    searchConfig?: SearchConfig<TData> | boolean;
+    pageSize?: number;
+    total?: number;
+    /** Controlled page number (1-indexed); omitted = uncontrolled */
+    page?: number;
+    /** Callback when sort changes */
+    onSortChange?: (sort: SortConfig<TData> | null) => void;
+    /** Callback when filters change */
+    onFilterChange?: (filters: FilterConfig<TData>[]) => void;
+    /** Callback when search query changes */
+    onSearchChange?: (query: string) => void;
+    /** Callback when pagination changes */
+    onPaginationChange?: (page: number, pageSize: number) => void;
+}
+/**
+ * Hook to manage table state (sorting, filtering, search, pagination)
+ */
+export declare function useTableState<TData>({ data, columns, defaultSort, defaultFilters, searchConfig, pageSize: initialPageSize, total: manualTotal, page, onSortChange, onFilterChange, onSearchChange, onPaginationChange, }: UseTableStateOptions<TData>): TableState<TData>;
+export {};