@mohasinac/appkit 2.1.3 → 2.2.0

package/dist/ui/DataTable.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from "react";
+import type { GridCols } from "./components/Layout";
+import type { TableColumn, TableConfig, PaginationConfig } from "../contracts";
+/**
+ * DataTable — generic sortable + paginated table promoted to @mohasinac/ui.
+ *
+ * Accepts `tableConfig` and `paginationConfig` for composable configuration.
+ * Apps can spread-merge DEFAULT_TABLE_CONFIG / DEFAULT_PAGINATION_CONFIG and
+ * override only the values they need, then pass the result once.
+ *
+ * Individual flat props (pageSize, stickyHeader, striped, …) still work and
+ * take precedence over anything in tableConfig when explicitly provided.
+ */
+type ViewMode = "table" | "grid" | "list";
+/**
+ * Column descriptor for the DataTable component.
+ * Narrows `render` to return `ReactNode` (TableColumn uses `unknown` so
+ * contracts stays React-free). Fully compatible with `TableColumn<T>`.
+ */
+export type DataTableColumn<T> = Omit<TableColumn<T>, "render"> & {
+    render?: (item: T) => ReactNode;
+};
+export interface DataTableProps<T> {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    /** Derives a stable key per row. Defaults to `(item) => (item as Record<string,string>).id`. */
+    keyExtractor?: (item: T) => string;
+    onRowClick?: (item: T) => void;
+    loading?: boolean;
+    emptyMessage?: string;
+    actions?: (item: T) => ReactNode;
+    /** When true, disables internal pagination — render your own externally. Default: false */
+    externalPagination?: boolean;
+    /**
+     * Composable table configuration.
+     * Deep-merged with DEFAULT_TABLE_CONFIG. Individual flat props (pageSize,
+     * stickyHeader, etc.) override this when explicitly provided.
+     */
+    tableConfig?: Partial<TableConfig>;
+    /**
+     * Composable pagination configuration.
+     * Merged with DEFAULT_PAGINATION_CONFIG. Individual flat props override this.
+     */
+    paginationConfig?: Partial<PaginationConfig>;
+    /** Items per page. Explicit value overrides tableConfig.pageSize. Default: 20 */
+    pageSize?: number;
+    mobileCardRender?: (item: T) => ReactNode;
+    emptyState?: ReactNode;
+    emptyIcon?: ReactNode;
+    emptyTitle?: string;
+    stickyHeader?: boolean;
+    striped?: boolean;
+    showViewToggle?: boolean;
+    showTableView?: boolean;
+    viewMode?: ViewMode;
+    defaultViewMode?: ViewMode;
+    onViewModeChange?: (mode: ViewMode) => void;
+    selectable?: boolean;
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    /**
+     * Number of grid columns for card grid view.
+     * Matches Layout GRID_MAP keys: 1–6, "autoSm", "autoMd", "autoLg".
+     * Default: 6 (2→3→4→5→6 across breakpoints).
+     */
+    gridCols?: GridCols;
+    labels?: {
+        loading?: string;
+        noDataTitle?: string;
+        noDataDescription?: string;
+        actions?: string;
+        tableView?: string;
+        gridView?: string;
+        listView?: string;
+    };
+}
+export declare function DataTable<T extends object>({ data, columns, keyExtractor: keyExtractorProp, onRowClick, loading, emptyMessage, actions, mobileCardRender, emptyState, emptyIcon, emptyTitle, tableConfig, paginationConfig, externalPagination, pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, showViewToggle: showViewToggleProp, showTableView, viewMode: controlledViewMode, defaultViewMode: defaultViewModeProp, onViewModeChange, selectable: selectableProp, selectedIds, onSelectionChange, gridCols, labels, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/DataTable.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Button } from "./components/Button";
+import { Spinner } from "./components/Spinner";
+import { Pagination } from "./components/Pagination";
+import { Text } from "./components/Typography";
+import { GRID_MAP } from "./components/Layout";
+import { Row } from "./components/Layout";
+import { mergeTableConfig, DEFAULT_PAGINATION_CONFIG } from "../contracts";
+export function DataTable({ data, columns, keyExtractor: keyExtractorProp, onRowClick, loading = false, emptyMessage, actions, mobileCardRender, emptyState, emptyIcon, emptyTitle, tableConfig, paginationConfig, externalPagination = false, 
+// Explicit flat props — override tableConfig when provided
+pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, showViewToggle: showViewToggleProp, showTableView = true, viewMode: controlledViewMode, defaultViewMode: defaultViewModeProp, onViewModeChange, selectable: selectableProp, selectedIds = [], onSelectionChange, gridCols = "cards", labels = {}, }) {
+    // Merge tableConfig + paginationConfig with defaults; explicit flat props win
+    const resolvedTable = mergeTableConfig(tableConfig);
+    const resolvedPag = {
+        ...DEFAULT_PAGINATION_CONFIG,
+        ...tableConfig?.pagination,
+        ...paginationConfig,
+    };
+    const keyExtractor = keyExtractorProp ??
+        ((item) => item.id ?? JSON.stringify(item));
+    const pageSize = pageSizeProp ?? resolvedTable.pageSize;
+    const stickyHeader = stickyHeaderProp ?? resolvedTable.sticky.enabled;
+    const striped = stripedProp ?? resolvedTable.striped;
+    const showViewToggle = showViewToggleProp ?? resolvedTable.showViewToggle;
+    const selectable = selectableProp ?? resolvedTable.selectable;
+    const defaultViewMode = defaultViewModeProp ?? resolvedTable.defaultViewMode;
+    const [sortKey, setSortKey] = useState(null);
+    const [sortDirection, setSortDirection] = useState(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [internalViewMode, setInternalViewMode] = useState(defaultViewMode);
+    const activeViewMode = controlledViewMode ?? internalViewMode;
+    const { loading: labelLoading = "Loading…", noDataTitle = "No data found", noDataDescription = "There are no items to display.", actions: labelActions = "Actions", tableView = "Table view", gridView = "Grid view", listView = "List view", } = labels;
+    const handleViewModeChange = (mode) => {
+        if (controlledViewMode === undefined)
+            setInternalViewMode(mode);
+        onViewModeChange?.(mode);
+    };
+    const handleSort = (key) => {
+        const col = columns.find((c) => c.key === key);
+        if (!col?.sortable)
+            return;
+        if (sortKey === key) {
+            if (sortDirection === "asc")
+                setSortDirection("desc");
+            else {
+                setSortKey(null);
+                setSortDirection(null);
+            }
+        }
+        else {
+            setSortKey(key);
+            setSortDirection("asc");
+        }
+    };
+    const sortedData = useMemo(() => {
+        const sorted = [...data];
+        if (sortKey && sortDirection) {
+            sorted.sort((a, b) => {
+                const aVal = a[sortKey];
+                const bVal = b[sortKey];
+                if (aVal == null)
+                    return 1;
+                if (bVal == null)
+                    return -1;
+                if (typeof aVal === "string" && typeof bVal === "string") {
+                    return sortDirection === "asc"
+                        ? aVal.localeCompare(bVal)
+                        : bVal.localeCompare(aVal);
+                }
+                if (aVal < bVal)
+                    return sortDirection === "asc" ? -1 : 1;
+                if (aVal > bVal)
+                    return sortDirection === "asc" ? 1 : -1;
+                return 0;
+            });
+        }
+        return sorted;
+    }, [data, sortKey, sortDirection]);
+    const paginatedData = useMemo(() => {
+        if (externalPagination)
+            return sortedData;
+        const start = (currentPage - 1) * pageSize;
+        return sortedData.slice(start, start + pageSize);
+    }, [sortedData, currentPage, externalPagination, pageSize]);
+    const totalPages = Math.ceil(sortedData.length / pageSize);
+    // ─── Loading state ──────────────────────────────────────────────────────────
+    if (loading) {
+        return (_jsx("div", { className: "appkit-data-table__wrapper", children: _jsx("div", { className: "appkit-data-table__loading", children: _jsx(Spinner, { size: "lg", label: labelLoading }) }) }));
+    }
+    // ─── Empty state ────────────────────────────────────────────────────────────
+    if (data.length === 0) {
+        if (emptyState)
+            return _jsx(_Fragment, { children: emptyState });
+        return (_jsx("div", { className: "appkit-data-table__wrapper", children: _jsx("div", { className: "appkit-data-table__empty", children: _jsxs("div", { className: "text-center px-4", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
+    }
+    const renderViewToggle = () => {
+        if (!showViewToggle)
+            return null;
+        return (_jsxs("div", { className: "appkit-data-table__view-toggle", role: "toolbar", "aria-label": "View mode", children: [showTableView && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("table"), "aria-label": tableView, "aria-pressed": activeViewMode === "table", className: `appkit-data-table__view-btn ${activeViewMode === "table" ? "appkit-data-table__view-btn--active" : ""} hidden sm:flex`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 10h18M3 6h18M3 14h18M3 18h18" }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("grid"), "aria-label": gridView, "aria-pressed": activeViewMode === "grid", className: `appkit-data-table__view-btn ${activeViewMode === "grid" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" }) }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleViewModeChange("list"), "aria-label": listView, "aria-pressed": activeViewMode === "list", className: `appkit-data-table__view-btn ${activeViewMode === "list" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" }) }) })] }));
+    };
+    // ─── Card views (grid / list) ────────────────────────────────────────────────
+    const renderCardGrid = (mode) => {
+        if (!mobileCardRender)
+            return null;
+        return (_jsx("div", { className: mode === "grid"
+                ? `${GRID_MAP[gridCols]} gap-6`
+                : "flex flex-col gap-4", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), listMode: mode === "list", onToggle: (id, checked) => onSelectionChange?.(checked
+                    ? [...selectedIds, id]
+                    : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) }));
+    };
+    // ─── Main render ─────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "appkit-data-table", children: [renderViewToggle(), activeViewMode !== "table" &&
+                mobileCardRender &&
+                renderCardGrid(activeViewMode), activeViewMode === "table" && mobileCardRender && (_jsx("div", { className: "appkit-data-table__mobile-cards", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), onToggle: (id, checked) => onSelectionChange?.(checked
+                        ? [...selectedIds, id]
+                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx("div", { className: "appkit-data-table__wrapper", children: _jsx("div", { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx("input", { type: "checkbox", className: "rounded border-zinc-300", "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
+                                                    paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
+                                                    const pageIds = paginatedData.map(keyExtractor);
+                                                    onSelectionChange?.(e.target.checked
+                                                        ? [...new Set([...selectedIds, ...pageIds])]
+                                                        : selectedIds.filter((id) => !pageIds.includes(id)));
+                                                } }) })), columns.map((col) => (_jsx("th", { scope: "col", "aria-sort": col.sortable
+                                                ? sortKey === col.key
+                                                    ? sortDirection === "asc"
+                                                        ? "ascending"
+                                                        : "descending"
+                                                    : "none"
+                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx("span", { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                        "appkit-data-table__row",
+                                        striped && index % 2 === 1
+                                            ? "appkit-data-table__row--striped"
+                                            : "",
+                                        onRowClick ? "appkit-data-table__row--clickable" : "",
+                                    ].join(" "), onClick: () => onRowClick?.(item), children: [selectable && (_jsx("td", { className: "px-4 py-4 w-8", onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", className: "rounded border-zinc-300", "aria-label": "Select row", checked: selectedIds.includes(keyExtractor(item)), onChange: (e) => {
+                                                    const id = keyExtractor(item);
+                                                    onSelectionChange?.(e.target.checked
+                                                        ? [...selectedIds, id]
+                                                        : selectedIds.filter((s) => s !== id));
+                                                } }) })), columns.map((col) => (_jsx("td", { className: "appkit-data-table__td", children: col.render
+                                                ? col.render(item)
+                                                : (item[col.key] ?? "-") }, col.key))), actions && (_jsx("td", { className: "appkit-data-table__td appkit-data-table__td--actions", onClick: (e) => e.stopPropagation(), children: actions(item) }))] }, keyExtractor(item)))) })] }) }) })), !externalPagination && totalPages > 1 && (_jsx("div", { className: "appkit-data-table__pagination", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, maxVisible: resolvedPag.maxVisible, showFirstLast: resolvedPag.showFirstLast, showPrevNext: resolvedPag.showPrevNext, size: resolvedPag.size }) }))] }));
+}
+function SelectableCard({ id, selectable, selected, onToggle, children, listMode = false, }) {
+    if (!selectable)
+        return _jsx("div", { className: "h-full", children: children });
+    return (_jsxs("div", { className: "relative group h-full", children: [_jsx("div", { className: [
+                    "absolute z-10",
+                    listMode ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-2",
+                ].join(" "), onClick: (e) => e.stopPropagation(), children: _jsx("div", { className: "w-6 h-6 rounded-md bg-white/95 dark:bg-slate-800/95 shadow-md flex items-center justify-center", children: _jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx("input", { type: "checkbox", className: [
+                                    "w-4 h-4 rounded cursor-pointer transition-all appearance-none",
+                                    selected
+                                        ? "border-2 border-primary bg-primary"
+                                        : "border-2 border-zinc-500 dark:border-slate-400 bg-transparent group-hover:border-primary",
+                                ].join(" "), checked: selected, onChange: (e) => onToggle(id, e.target.checked), "aria-label": "Select item" }), selected && (_jsx("svg", { className: "absolute inset-0 m-auto w-2.5 h-2.5 text-white pointer-events-none", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }))] }) }) }), selected && (_jsx("div", { className: "absolute inset-0 z-[5] rounded-xl ring-2 ring-primary ring-offset-0 pointer-events-none", "aria-hidden": "true" })), children] }));
+}

package/dist/ui/DataTable.style.css

@@ -0,0 +1,190 @@
+/* DataTable — sortable, paginated, multi-view data table */
+
+.appkit-data-table {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.appkit-data-table__wrapper {
+  border-radius: 1rem;
+  border: 1px solid #e4e4e7;
+  overflow: hidden;
+}
+
+:is(.dark) .appkit-data-table__wrapper {
+  border-color: #334155;
+}
+
+.appkit-data-table__scroll {
+  overflow-x: auto;
+}
+
+.appkit-data-table__scroll--sticky {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.appkit-data-table__table {
+  min-width: 100%;
+}
+
+.appkit-data-table__thead {
+  background: #fafafa;
+}
+
+:is(.dark) .appkit-data-table__thead {
+  background: #1e293b;
+}
+
+.appkit-data-table__thead--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.appkit-data-table__th {
+  padding: 0.75rem 1.5rem;
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #71717a;
+}
+
+:is(.dark) .appkit-data-table__th {
+  color: #a1a1aa;
+}
+
+.appkit-data-table__th--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.appkit-data-table__th--sortable:hover {
+  background: #f4f4f5;
+}
+
+:is(.dark) .appkit-data-table__th--sortable:hover {
+  background: #334155;
+}
+
+.appkit-data-table__tbody {
+  background: white;
+}
+
+:is(.dark) .appkit-data-table__tbody {
+  background: #0f172a;
+}
+
+.appkit-data-table__row {
+  transition: background-color 0.15s ease;
+}
+
+.appkit-data-table__row--striped {
+  background: #fafafa;
+}
+
+:is(.dark) .appkit-data-table__row--striped {
+  background: #1e293b;
+}
+
+.appkit-data-table__row--clickable {
+  cursor: pointer;
+}
+
+.appkit-data-table__row--clickable:hover {
+  background: #fafafa;
+}
+
+:is(.dark) .appkit-data-table__row--clickable:hover {
+  background: rgba(30, 41, 59, 0.6);
+}
+
+.appkit-data-table__td {
+  padding: 1rem 1.5rem;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  color: #18181b;
+}
+
+:is(.dark) .appkit-data-table__td {
+  color: #f4f4f5;
+}
+
+.appkit-data-table__td--actions {
+  text-align: right;
+  font-weight: 500;
+}
+
+.appkit-data-table__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 16rem;
+}
+
+.appkit-data-table__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 16rem;
+}
+
+.appkit-data-table__pagination {
+  display: flex;
+  justify-content: center;
+}
+
+.appkit-data-table__view-toggle {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.appkit-data-table__view-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 1px #e4e4e7;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  color: #71717a;
+}
+
+:is(.dark) .appkit-data-table__view-btn {
+  color: #a1a1aa;
+  box-shadow: inset 0 0 0 1px #334155;
+}
+
+.appkit-data-table__view-btn:hover {
+  background: #f4f4f5;
+}
+
+:is(.dark) .appkit-data-table__view-btn:hover {
+  background: #1e293b;
+}
+
+.appkit-data-table__view-btn--active {
+  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.05);
+  color: var(--color-primary, #6366f1);
+  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb, 99, 102, 241), 0.3);
+}
+
+:is(.dark) .appkit-data-table__view-btn--active {
+  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.1);
+}
+
+.appkit-data-table__mobile-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-data-table__mobile-cards {
+    display: none;
+  }
+}

package/dist/ui/animation.helper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Animation Helpers
+ *
+ * Easing functions for animations and transitions.
+ */
+export declare const easings: {
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+    easeInOutCubic: (t: number) => number;
+    easeInQuart: (t: number) => number;
+    easeOutQuart: (t: number) => number;
+    easeInOutQuart: (t: number) => number;
+};

package/dist/ui/animation.helper.js

@@ -0,0 +1,17 @@
+/**
+ * Animation Helpers
+ *
+ * Easing functions for animations and transitions.
+ */
+export const easings = {
+    linear: (t) => t,
+    easeInQuad: (t) => t * t,
+    easeOutQuad: (t) => t * (2 - t),
+    easeInOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    easeInCubic: (t) => t * t * t,
+    easeOutCubic: (t) => --t * t * t + 1,
+    easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+    easeInQuart: (t) => t * t * t * t,
+    easeOutQuart: (t) => 1 - --t * t * t * t,
+    easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+};

package/dist/ui/color.helper.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Color Helpers
+ *
+ * UI helpers for color manipulation and utilities.
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function getContrastColor(hex: string): "#000000" | "#ffffff";

package/dist/ui/color.helper.js

@@ -0,0 +1,31 @@
+/**
+ * Color Helpers
+ *
+ * UI helpers for color manipulation and utilities.
+ */
+export function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+export function rgbToHex(r, g, b) {
+    return ("#" +
+        [r, g, b]
+            .map((x) => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? "0" + hex : hex;
+        })
+            .join(""));
+}
+export function getContrastColor(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return "#000000";
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    return luminance > 0.5 ? "#000000" : "#ffffff";
+}

package/dist/ui/columns/build-columns.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Generic column builder — replaces the copy-pasted `build*Columns()` factory
+ * found in every feature's `columns/index.ts`.
+ *
+ * @example
+ * export const buildOrderColumns = createColumnBuilder(orderAdminColumns);
+ */
+import type { TableColumn, ColumnExtensionOpts } from "../../contracts";
+/**
+ * Build a merged column list from base columns + extension opts.
+ * Handles omit, overrides, and extras in one pass.
+ */
+export declare function buildColumns<T>(base: TableColumn<T>[], opts?: ColumnExtensionOpts<T>): TableColumn<T>[];
+/**
+ * Factory that binds a base column set, returning a single-arg builder.
+ *
+ * @example
+ * export const buildOrderColumns = createColumnBuilder(orderAdminColumns);
+ * // usage: buildOrderColumns({ omit: ["trackingNumber"] })
+ */
+export declare function createColumnBuilder<T>(base: TableColumn<T>[]): (opts?: ColumnExtensionOpts<T>) => TableColumn<T>[];

package/dist/ui/columns/build-columns.js

@@ -0,0 +1,33 @@
+/**
+ * Generic column builder — replaces the copy-pasted `build*Columns()` factory
+ * found in every feature's `columns/index.ts`.
+ *
+ * @example
+ * export const buildOrderColumns = createColumnBuilder(orderAdminColumns);
+ */
+/**
+ * Build a merged column list from base columns + extension opts.
+ * Handles omit, overrides, and extras in one pass.
+ */
+export function buildColumns(base, opts) {
+    if (!opts)
+        return base;
+    const omit = opts.omit?.length ? new Set(opts.omit) : undefined;
+    const cols = base
+        .filter((col) => !omit?.has(col.key))
+        .map((col) => {
+        const ovr = opts.overrides?.[col.key];
+        return ovr ? { ...col, ...ovr } : col;
+    });
+    return opts.extras ? [...cols, ...opts.extras] : cols;
+}
+/**
+ * Factory that binds a base column set, returning a single-arg builder.
+ *
+ * @example
+ * export const buildOrderColumns = createColumnBuilder(orderAdminColumns);
+ * // usage: buildOrderColumns({ omit: ["trackingNumber"] })
+ */
+export function createColumnBuilder(base) {
+    return (opts) => buildColumns(base, opts);
+}

package/dist/ui/columns/column-renderers.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Shared, React-free column cell renderers.
+ *
+ * Every renderer returns a `string` (not ReactNode) so it works with
+ * `TableColumn<T>.render` in both server and client contexts.
+ *
+ * For JSX renderers (badge, thumbnail, action buttons) see `column-renderers.tsx`.
+ */
+export interface BooleanRenderOpts {
+    trueLabel?: string;
+    falseLabel?: string;
+}
+/** Render a boolean as "Yes" / "No" (or custom labels). */
+export declare function renderBoolean(value: boolean | null | undefined, opts?: BooleanRenderOpts): string;
+/** Render a monetary amount through the shared `formatCurrency` pipeline. */
+export declare function renderCurrency(amount: number | null | undefined, currency?: string, locale?: string, fallback?: string): string;
+/**
+ * Render a monetary amount as `CURRENCY AMOUNT` (e.g. `INR 1,200`).
+ * This matches the existing inline pattern across column modules.
+ */
+export declare function renderCurrencyCompact(amount: number | null | undefined, currency?: string, fallback?: string): string;
+/** Render a numeric value with locale separators, with an optional fallback. */
+export declare function renderCount(value: number | null | undefined, fallback?: string): string;
+/** Render a nullable value through an optional formatter, with em-dash fallback. */
+export declare function renderNullable<T>(value: T | null | undefined, format?: (v: T) => string, fallback?: string): string;
+export type RatingMode = "numeric" | "stars";
+export interface RatingRenderOpts {
+    mode?: RatingMode;
+    maxStars?: number;
+    showCount?: boolean;
+}
+/** Render a rating value as "4.2 (31)" or "★★★★☆". */
+export declare function renderRating(rating: number | null | undefined, reviewCount?: number | null, opts?: RatingRenderOpts): string;