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

package/dist/components/charts/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/data-table/column-filters.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ColumnFilters Component
+ * Renders filter controls for filterable columns in DataTable
+ */
+import type { FilterableColumn, FilterConfig } from "./data-table.types";
+interface ColumnFiltersProps<TData> {
+    filterableColumns: FilterableColumn<TData>[];
+    activeFilters: FilterConfig<TData>[];
+    onFilterChange: (filter: FilterConfig<TData>) => void;
+    onFilterRemove: (key: keyof TData) => void;
+    onClearAll: () => void;
+}
+export declare function ColumnFilters<TData>({ filterableColumns, activeFilters, onFilterChange, onFilterRemove, onClearAll, }: ColumnFiltersProps<TData>): import("react").JSX.Element | null;
+export {};

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

@@ -0,0 +1,51 @@
+"use client";
+/**
+ * ColumnFilters Component
+ * Renders filter controls for filterable columns in DataTable
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@kala-ui/react/button";
+import { Input } from "@kala-ui/react/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@kala-ui/react/select";
+import { X } from "lucide-react";
+export function ColumnFilters({ filterableColumns, activeFilters, onFilterChange, onFilterRemove, onClearAll, }) {
+    if (filterableColumns.length === 0) {
+        return null;
+    }
+    const hasActiveFilters = activeFilters.length > 0;
+    return (_jsxs("div", { 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) {
+                    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-foreground", children: [column.label, ":"] }), _jsxs(Select, { ...(filterValue ? { value: String(filterValue) } : {}), onValueChange: (value) => {
+                                    if (value === "__clear__") {
+                                        onFilterRemove(column.key);
+                                    }
+                                    else {
+                                        onFilterChange({
+                                            key: column.key,
+                                            operator: column.operator || "equals",
+                                            value,
+                                        });
+                                    }
+                                }, children: [_jsx(SelectTrigger, { className: "w-[180px] h-9", children: _jsx(SelectValue, { placeholder: `All ${column.label}` }) }), _jsxs(SelectContent, { children: [_jsxs(SelectItem, { value: "__clear__", children: ["All ", column.label] }), column.options.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] })] }, String(column.key)));
+                }
+                if (column.type === "text") {
+                    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-foreground", children: [column.label, ":"] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { type: "text", placeholder: column.placeholder || `Filter by ${column.label}`, value: filterValue ? String(filterValue) : "", onChange: (e) => {
+                                            const value = e.target.value;
+                                            if (value) {
+                                                onFilterChange({
+                                                    key: column.key,
+                                                    operator: column.operator || "contains",
+                                                    value,
+                                                });
+                                            }
+                                            else {
+                                                onFilterRemove(column.key);
+                                            }
+                                        }, className: "w-[200px] h-9 pr-8" }), filterValue ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onFilterRemove(column.key), className: "absolute right-0 top-1/2 -translate-y-1/2 h-7 w-7 p-0", "aria-label": `Clear ${String(column.label)} filter`, children: _jsx(X, { className: "h-3 w-3" }) })) : null] })] }, String(column.key)));
+                }
+                return null;
+            }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: onClearAll, className: "h-9 text-muted-foreground hover:text-foreground", children: [_jsx(X, { className: "h-4 w-4 mr-1.5" }), "Clear filters"] }))] }));
+}

package/dist/components/data-table/column-header-filter.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Column Header Filter Component
+ * Inline filter for DataTable columns with funnel icon and multi-select popover
+ */
+import * as React from "react";
+import type { FilterableColumn, FilterConfig } from "./data-table.types";
+interface ColumnHeaderFilterProps<TData> {
+    column: FilterableColumn<TData>;
+    activeFilters: FilterConfig<TData>[];
+    onFilterChange: (filter: FilterConfig<TData>) => void;
+    onFilterRemove: (key: keyof TData) => void;
+}
+export declare function ColumnHeaderFilter<TData>({ column, activeFilters, onFilterChange, onFilterRemove, }: ColumnHeaderFilterProps<TData>): React.JSX.Element;
+export {};

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

@@ -0,0 +1,75 @@
+"use client";
+/**
+ * Column Header Filter Component
+ * Inline filter for DataTable columns with funnel icon and multi-select popover
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@kala-ui/react/badge";
+import { Button } from "@kala-ui/react/button";
+import { Checkbox } from "@kala-ui/react/checkbox";
+import { Flex } from "@kala-ui/react/flex";
+import { Heading } from "@kala-ui/react/heading";
+import { Input } from "@kala-ui/react/input";
+import { Label } from "@kala-ui/react/label";
+import { Popover, PopoverContent, PopoverTrigger, } from "@kala-ui/react/popover";
+import { Stack } from "@kala-ui/react/stack";
+import { Text } from "@kala-ui/react/text";
+import { useDisclosure } from "@kala-ui/react-hooks";
+import { Filter, X } from "lucide-react";
+import * as React from "react";
+export function ColumnHeaderFilter({ column, activeFilters, onFilterChange, onFilterRemove, }) {
+    const [open, { set: setOpen }] = useDisclosure(false);
+    const [textValue, setTextValue] = React.useState("");
+    const activeFilter = activeFilters.find((f) => f.key === column.key);
+    const filterValue = activeFilter?.value;
+    // For multi-select, track selected values
+    const selectedValues = filterValue
+        ? Array.isArray(filterValue)
+            ? filterValue
+            : [filterValue]
+        : [];
+    const activeCount = selectedValues.length;
+    const hasActiveFilter = activeCount > 0 || (column.type === "text" && filterValue);
+    const handleCheckboxChange = (optionValue, checked) => {
+        let newValues;
+        if (checked) {
+            newValues = [...selectedValues, optionValue];
+        }
+        else {
+            newValues = selectedValues.filter((v) => v !== optionValue);
+        }
+        if (newValues.length === 0) {
+            onFilterRemove(column.key);
+        }
+        else {
+            onFilterChange({
+                key: column.key,
+                operator: "in",
+                value: newValues,
+            });
+        }
+    };
+    const handleTextApply = () => {
+        if (textValue.trim()) {
+            onFilterChange({
+                key: column.key,
+                operator: column.operator || "contains",
+                value: textValue.trim(),
+            });
+            setOpen(false);
+        }
+    };
+    const handleClear = () => {
+        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) => {
+                                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) => {
+                                        if (e.key === "Enter") {
+                                            handleTextApply();
+                                        }
+                                    }, className: "h-9" }), _jsx(Button, { onClick: handleTextApply, className: "w-full", size: "sm", children: "Apply" })] }))] }) })] }));
+}

package/dist/components/data-table/data-table-body-rows.d.ts

@@ -0,0 +1,23 @@
+/**
+ * DataTableBodyRows Component
+ * Table body rows with selection, cell rendering, and row interaction for DataTable
+ */
+import type { HTMLAttributes } from "react";
+import type { ColumnDef, SelectionConfig } from "./data-table.types";
+interface DataTableBodyRowsProps<TData> {
+    displayData: TData[];
+    columns: ColumnDef<TData>[];
+    selection?: SelectionConfig<TData>;
+    selectedIds: Set<string>;
+    onSelectRow: (row: TData) => void;
+    onRowClick?: (row: TData) => void;
+    compact: boolean;
+    striped: boolean;
+    hoverable: boolean;
+    getRowClassName?: (row: TData) => string;
+    getRowAttributes?: (row: TData) => HTMLAttributes<HTMLTableRowElement>;
+    hasPagination: boolean;
+    hasFooter: boolean;
+}
+export declare function DataTableBodyRows<TData>({ displayData, columns, selection, selectedIds, onSelectRow, onRowClick, compact, striped, hoverable, getRowClassName, getRowAttributes, hasPagination, hasFooter, }: DataTableBodyRowsProps<TData>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+"use client";
+/**
+ * DataTableBodyRows Component
+ * Table body rows with selection, cell rendering, and row interaction for DataTable
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) => {
+            const isSelectable = !selection?.isRowSelectable || selection.isRowSelectable(row);
+            const rowId = selection?.getRowId(row);
+            const isSelected = rowId ? selectedIds.has(rowId) : false;
+            const isClickable = !!onRowClick;
+            const isLastRow = rowIndex === displayData.length - 1;
+            const rowClassNames = cn(isSelected && "bg-accent/50", striped && rowIndex % 2 === 0 && "bg-muted/50", hoverable && "hover:bg-muted/50", isClickable &&
+                "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", compact && "h-10", getRowClassName?.(row), "border-0");
+            return (_jsxs(TableRow, { ...getRowAttributes?.(row), "data-state": isSelected ? "selected" : undefined, onClick: () => isClickable && onRowClick(row), className: rowClassNames, 
+                // clickable rows stay real <tr>s: focusable + Enter/Space
+                // activation keeps table semantics intact for screen readers
+                tabIndex: isClickable ? 0 : undefined, onKeyDown: (e) => {
+                    if (isClickable && (e.key === "Enter" || e.key === " ")) {
+                        e.preventDefault();
+                        onRowClick(row);
+                    }
+                }, children: [selection?.enabled && (_jsx(TableCell, { className: cn(!isLastRow || (hasPagination && !hasFooter)) && "border-b", children: _jsx(Checkbox, { checked: isSelected, disabled: !isSelectable, "aria-label": `Select row ${rowIndex + 1}`, onCheckedChange: () => {
+                                if (isSelectable)
+                                    onSelectRow(row);
+                            }, onClick: (e) => e.stopPropagation() }) })), columns.map((column) => {
+                        const cellValue = column.accessorKey
+                            ? row[column.accessorKey]
+                            : undefined;
+                        const cellClassNames = cn(column.align === "center" && "text-center", column.align === "right" && "text-right", column.hideOnMobile && "hidden md:table-cell", compact && "py-2", (!isLastRow || (hasPagination && !hasFooter)) && "border-b");
+                        return (_jsx(TableCell, { className: cellClassNames, children: column.cell
+                                ? column.cell(row)
+                                : cellValue !== null && cellValue !== undefined
+                                    ? String(cellValue)
+                                    : "—" }, column.id));
+                    })] }, rowId ?? rowIndex));
+        }) }));
+}

package/dist/components/data-table/data-table-filter-chips.d.ts

@@ -0,0 +1,14 @@
+/**
+ * DataTableFilterChips Component
+ * Active filter badges with remove/clear actions for DataTable
+ */
+import type { FilterableColumn, FilterConfig } from "./data-table.types";
+interface DataTableFilterChipsProps<TData> {
+    filterConfigs: FilterConfig<TData>[];
+    filterableColumns: FilterableColumn<TData>[];
+    onSetFilter: (filter: FilterConfig<TData>) => void;
+    onRemoveFilter: (key: keyof TData) => void;
+    onClearFilters: () => void;
+}
+export declare function DataTableFilterChips<TData>({ filterConfigs, filterableColumns, onSetFilter, onRemoveFilter, onClearFilters, }: DataTableFilterChipsProps<TData>): import("react").JSX.Element | null;
+export {};

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

@@ -0,0 +1,42 @@
+"use client";
+/**
+ * DataTableFilterChips Component
+ * Active filter badges with remove/clear actions for DataTable
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@kala-ui/react/badge";
+import { Button } from "@kala-ui/react/button";
+import { Flex } from "@kala-ui/react/flex";
+import { Text } from "@kala-ui/react/text";
+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) => {
+                const column = filterableColumns.find((fc) => fc.key === filter.key);
+                if (!column)
+                    return null;
+                const filterValueArray = Array.isArray(filter.value)
+                    ? filter.value
+                    : [filter.value];
+                const findLabel = (val) => {
+                    const strVal = String(val);
+                    const option = column.options?.find((o) => o.value === strVal);
+                    return option?.label ?? strVal;
+                };
+                return filterValueArray.map((value, idx) => (_jsxs(Badge, { color: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsxs(Text, { size: "xs", weight: "medium", children: [column.label, ": ", findLabel(value)] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                if (filterValueArray.length === 1) {
+                                    onRemoveFilter(filter.key);
+                                }
+                                else {
+                                    const newValues = filterValueArray.filter((v) => v !== value);
+                                    onSetFilter({
+                                        key: filter.key,
+                                        operator: filter.operator,
+                                        value: newValues,
+                                    });
+                                }
+                            }, className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-sm", "aria-label": `Remove ${findLabel(value)}`, children: _jsx(X, { className: "h-3 w-3" }) })] }, `${String(filter.key)}-${value}-${idx}`)));
+            }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClearFilters, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] }));
+}

package/dist/components/data-table/data-table-header-row.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DataTableHeaderRow Component
+ * Column headers with sort indicators and filter popovers for DataTable
+ */
+import type { ColumnDef, FilterableColumn, FilterConfig, SelectionConfig, SortConfig } from "./data-table.types";
+interface DataTableHeaderRowProps<TData> {
+    columns: ColumnDef<TData>[];
+    selection?: SelectionConfig<TData>;
+    sortConfig: SortConfig<TData> | null;
+    onToggleSort: (key: keyof TData) => void;
+    filterableColumns?: FilterableColumn<TData>[];
+    filterConfigs: FilterConfig<TData>[];
+    onSetFilter: (filter: FilterConfig<TData>) => void;
+    onRemoveFilter: (key: keyof TData) => void;
+    isAllSelected: boolean;
+    isSomeSelected: boolean;
+    onSelectAll: () => void;
+    stickyHeader: boolean;
+}
+export declare function DataTableHeaderRow<TData>({ columns, selection, sortConfig, onToggleSort, filterableColumns, filterConfigs, onSetFilter, onRemoveFilter, isAllSelected, isSomeSelected, onSelectAll, stickyHeader, }: DataTableHeaderRowProps<TData>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,35 @@
+"use client";
+/**
+ * DataTableHeaderRow Component
+ * Column headers with sort indicators and filter popovers for DataTable
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@kala-ui/react/button";
+import { Checkbox } from "@kala-ui/react/checkbox";
+import { Flex } from "@kala-ui/react/flex";
+import { cn } from "@kala-ui/react/lib/utils";
+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
+            ? "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"
+                        : "w-12 rounded-tl-lg border-b", children: _jsx(Checkbox, { checked: isAllSelected ? true : isSomeSelected ? "indeterminate" : false, onCheckedChange: onSelectAll, "aria-label": "Select all rows" }) })), columns.map((column, index) => {
+                    const isSorted = column.accessorKey && sortConfig?.key === column.accessorKey;
+                    const sortDirection = isSorted ? sortConfig.direction : null;
+                    const canSort = column.enableSorting !== false && column.accessorKey;
+                    const filterColumn = filterableColumns?.find((fc) => fc.key === column.accessorKey);
+                    const isFirst = !selection?.enabled && index === 0;
+                    const isLast = index === columns.length - 1;
+                    return (_jsx(TableHead, { style: { width: column.width }, className: cn(column.align === "center" && "text-center", column.align === "right" && "text-right", column.hideOnMobile && "hidden md:table-cell", stickyHeader ? "border-b border-border-strong/50" : "border-b", isFirst && "rounded-tl-lg", isLast && "rounded-tr-lg"), "aria-sort": isSorted && sortDirection
+                            ? sortDirection === "asc"
+                                ? "ascending"
+                                : "descending"
+                            : "none", children: _jsxs(Flex, { align: "center", gap: 1, className: cn(column.align === "center" && "justify-center", column.align === "right" && "justify-end"), children: [canSort && column.accessorKey ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onToggleSort(column.accessorKey), className: "-ml-3 h-8 data-[state=open]:bg-accent hover:bg-accent text-foreground hover:text-accent-foreground", "aria-label": column.ariaLabel
+                                        ? `Sort by ${column.ariaLabel}`
+                                        : `Sort by ${column.header}`, children: [column.header, isSorted ? (sortDirection === "asc" ? (_jsx(ChevronUp, { className: "ml-2 h-4 w-4", "aria-hidden": "true" })) : (_jsx(ChevronDown, { className: "ml-2 h-4 w-4", "aria-hidden": "true" }))) : (_jsx(ChevronDown, { className: "ml-2 h-4 w-4 opacity-40", "aria-hidden": "true" }))] })) : (_jsx("span", { className: "text-xs normal-case tracking-normal text-muted-foreground", children: column.header })), filterColumn && (_jsx(ColumnHeaderFilter, { column: filterColumn, activeFilters: filterConfigs, onFilterChange: onSetFilter, onFilterRemove: onRemoveFilter }))] }) }, column.id));
+                })] }) }));
+}

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

@@ -0,0 +1,49 @@
+/**
+ * DataTable Skeleton Component
+ * Provides a full-featured loading placeholder that matches the DataTable component structure
+ * including search bar, filters, table with selections, and pagination
+ */
+import type { ColumnDef } from "./data-table.types";
+export interface DataTableSkeletonConfig<TData = unknown> {
+    /**
+     * Number of skeleton rows to show (default: 5)
+     */
+    rows?: number;
+    /**
+     * Column definitions for accurate layout matching
+     */
+    columns: ColumnDef<TData>[];
+    /**
+     * Show search bar skeleton (default: true if searchable)
+     */
+    showSearch?: boolean;
+    /**
+     * Show filter pills skeleton (default: true if filterable)
+     */
+    showFilters?: boolean;
+    /**
+     * Number of filter pills to show (default: 3)
+     */
+    filterCount?: number;
+    /**
+     * Show pagination skeleton (default: true if pagination)
+     */
+    showPagination?: boolean;
+    /**
+     * Show selection checkboxes (default: false)
+     */
+    showSelection?: boolean;
+    /**
+     * Show bulk actions bar (default: false)
+     */
+    showBulkActions?: boolean;
+    /**
+     * Enable sticky header
+     */
+    stickyHeader?: boolean;
+    /**
+     * Enable sticky footer (for pagination)
+     */
+    stickyFooter?: boolean;
+}
+export declare function DataTableSkeleton<TData = unknown>({ rows, columns, showSearch, showFilters, filterCount, showPagination, showSelection, showBulkActions, stickyHeader, stickyFooter, }: DataTableSkeletonConfig<TData>): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable Skeleton Component
+ * Provides a full-featured loading placeholder that matches the DataTable component structure
+ * including search bar, filters, table with selections, and pagination
+ */
+import { Badge } from "@kala-ui/react/badge";
+import { Button } from "@kala-ui/react/button";
+import { Checkbox } from "@kala-ui/react/checkbox";
+import { FieldLabel } from "@kala-ui/react/field";
+import { Input } from "@kala-ui/react/input";
+import { cn } from "@kala-ui/react/lib/utils";
+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
+                                                ? "border-b border-border-strong/50"
+                                                : "border-b"), children: _jsx(Checkbox, { disabled: true }) })), columns.map((column, index) => {
+                                            const isFirst = !showSelection && index === 0;
+                                            const isLast = index === columns.length - 1;
+                                            return (_jsx(TableHead, { style: { width: column.width }, className: cn(column.align === "center" && "text-center", column.align === "right" && "text-right", column.hideOnMobile && "hidden md:table-cell", stickyHeader
+                                                    ? "border-b border-border-strong/50"
+                                                    : "border-b", isFirst && "rounded-tl-lg", isLast && "rounded-tr-lg"), children: _jsx("div", { className: cn("flex items-center gap-1", column.align === "center" && "justify-center", column.align === "right" && "justify-end"), children: column.enableFiltering ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 flex-1" }), _jsx(Skeleton, { className: "h-4 w-4" })] })) : (_jsx(Skeleton, { className: "h-4 w-24" })) }) }, column.id));
+                                        })] }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => {
+                                    const isLastRow = rowIndex === rows - 1;
+                                    return (_jsxs(TableRow, { className: cn("border-0"), children: [showSelection && (_jsx(TableCell, { children: _jsx(Checkbox, { disabled: true, "aria-label": `Select row ${rowIndex + 1}` }) })), columns.map((column) => {
+                                                return (_jsx(TableCell, { className: cn(column.align === "center" && "text-center", column.align === "right" && "text-right", column.hideOnMobile && "hidden md:table-cell", !isLastRow && "border-b"), children: _jsx(Skeleton, { className: "h-4 w-32" }) }, column.id));
+                                            })] }, rowIndex));
+                                }) })] }) }) }), showPagination && (_jsxs("div", { className: cn("flex flex-col gap-3 sm:flex-row sm:gap-0 items-center sm:justify-between bg-background px-4 py-3 rounded-b-lg kala-surface-card border-x border-b", stickyFooter && "sticky bottom-0 z-1 shadow-xl bg-background"), children: [_jsxs("div", { className: "flex items-center justify-between gap-4 w-full sm:w-auto", children: [_jsx("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FieldLabel, { htmlFor: "page-size", className: "text-sm text-muted-foreground mb-0", children: "Rows per page:" }), _jsx(Select, { disabled: true, children: _jsx(SelectTrigger, { className: "w-20 h-9 text-foreground opacity-50", children: _jsx(SelectValue, {}) }) })] })] }), _jsxs("div", { className: "flex items-center justify-center gap-1 flex-wrap", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: _jsx(Skeleton, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm text-muted-foreground px-2", children: _jsx(Skeleton, { className: "h-4 w-16 inline-block" }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: _jsx(Skeleton, { className: "h-4 w-4" }) })] })] }))] }));
+}

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

@@ -0,0 +1,18 @@
+/**
+ * DataTableToolbar Component
+ * Search input, bulk actions, and custom toolbar content for DataTable
+ */
+import type { BulkAction, SearchConfig } from "./data-table.types";
+interface DataTableToolbarProps<TData> {
+    searchConfig: SearchConfig<TData> | null;
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    bulkActions?: BulkAction<TData>[];
+    selectedRows: TData[];
+    selectedIdsCount: number;
+    toolbarContent?: React.ReactNode;
+    hasData: boolean;
+    className?: string;
+}
+export declare function DataTableToolbar<TData>({ searchConfig, searchQuery, onSearchChange, bulkActions, selectedRows, selectedIdsCount, toolbarContent, hasData, className, }: DataTableToolbarProps<TData>): import("react").JSX.Element | null;
+export {};

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

@@ -0,0 +1,25 @@
+"use client";
+/**
+ * DataTableToolbar Component
+ * Search input, bulk actions, and custom toolbar content for DataTable
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@kala-ui/react/box";
+import { Button } from "@kala-ui/react/button";
+import { Flex } from "@kala-ui/react/flex";
+import { Input } from "@kala-ui/react/input";
+import { cn } from "@kala-ui/react/lib/utils";
+import { Text } from "@kala-ui/react/text";
+import { Search, X } from "lucide-react";
+export function DataTableToolbar({ searchConfig, searchQuery, onSearchChange, bulkActions, selectedRows, selectedIdsCount, toolbarContent, hasData, className, }) {
+    const showSearch = searchConfig && (hasData || searchQuery);
+    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"
+                                    ? "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"
+                                    : undefined, children: [action.icon, action.label] }, action.id)))] }))] }))] }));
+}