@mohasinac/appkit 2.3.0 → 2.3.2

package/dist/tokens/tokens.css

@@ -0,0 +1,221 @@
+/*
+ * @mohasinac/tokens — Design tokens as CSS custom properties
+ *
+ * All values are prefixed --appkit-* for the @mohasinac/* package system.
+ * Consumer projects override only what they need to rebrand:
+ *
+ *   /* my-brand/globals.css * /
+ *   @import "@mohasinac/tokens/tokens.css";
+ *   :root {
+ *     --appkit-color-primary:   #your-primary;
+ *     --appkit-color-secondary: #your-secondary;
+ *   }
+ *
+ * Default values reflect a lime + magenta palette (override --appkit-color-primary etc. to rebrand).
+ */
+
+/* --- Colour — Brand ------------------------------------------------------- */
+:root {
+  /* Primary — Lime Green (Beyblade green blades) */
+  --appkit-color-primary:          #84e122;
+  --appkit-color-primary-50:       #f3ffe3;
+  --appkit-color-primary-100:      #e4ffc5;
+  --appkit-color-primary-200:      #c8ff90;
+  --appkit-color-primary-300:      #a3f550;
+  --appkit-color-primary-400:      #84e122;
+  --appkit-color-primary-500:      #65c408;
+  --appkit-color-primary-600:      #509c02;
+  --appkit-color-primary-700:      #3e7708;
+  --appkit-color-primary-800:      #345e0d;
+  --appkit-color-primary-900:      #2c5011;
+  --appkit-color-primary-950:      #142d03;
+
+  /* Secondary — Hot Pink / Magenta (dark mode accent, pink Beyblade blades) */
+  --appkit-color-secondary:        #e91e8c;
+  --appkit-color-secondary-50:     #fdf0f8;
+  --appkit-color-secondary-100:    #fce2f2;
+  --appkit-color-secondary-200:    #fac6e6;
+  --appkit-color-secondary-300:    #f79dd2;
+  --appkit-color-secondary-400:    #f063b9;
+  --appkit-color-secondary-500:    #e91e8c;
+  --appkit-color-secondary-600:    #d4107a;
+  --appkit-color-secondary-700:    #b00d66;
+  --appkit-color-secondary-800:    #900f56;
+  --appkit-color-secondary-900:    #771249;
+  --appkit-color-secondary-950:    #480525;
+
+  /* Cobalt — Blue accent (links, nav) */
+  --appkit-color-cobalt:           #3570fc;
+  --appkit-color-cobalt-50:        #eef5ff;
+  --appkit-color-cobalt-100:       #d9e8ff;
+  --appkit-color-cobalt-200:       #bcd4ff;
+  --appkit-color-cobalt-300:       #8eb9ff;
+  --appkit-color-cobalt-400:       #5992ff;
+  --appkit-color-cobalt-500:       #3570fc;
+  --appkit-color-cobalt-600:       #1a55f2;
+  --appkit-color-cobalt-700:       #1343de;
+  --appkit-color-cobalt-800:       #1536b4;
+  --appkit-color-cobalt-900:       #18318e;
+  --appkit-color-cobalt-950:       #111e58;
+
+  /* Accent — Metallic Steel (frame silver) */
+  --appkit-color-accent:           #8393b2;
+  --appkit-color-accent-50:        #f5f7fa;
+  --appkit-color-accent-100:       #eaeef4;
+  --appkit-color-accent-200:       #d1dae6;
+  --appkit-color-accent-300:       #adb9cf;
+  --appkit-color-accent-400:       #8393b2;
+  --appkit-color-accent-500:       #657599;
+  --appkit-color-accent-600:       #505f7f;
+  --appkit-color-accent-700:       #424d67;
+  --appkit-color-accent-800:       #394257;
+  --appkit-color-accent-900:       #333b4b;
+  --appkit-color-accent-950:       #222730;
+}
+
+/* --- Colour — Semantic (light mode defaults) ------------------------------ */
+:root {
+  --appkit-color-bg:               #fafafa;    /* zinc-50 */
+  --appkit-color-surface:          #ffffff;    /* white */
+  --appkit-color-surface-elevated: #ffffff;
+  --appkit-color-surface-input:    #ffffff;
+
+  --appkit-color-border:           #e4e4e7;    /* zinc-200 */
+  --appkit-color-border-subtle:    #f4f4f5;    /* zinc-100 */
+
+  --appkit-color-text:             #18181b;    /* zinc-900 */
+  --appkit-color-text-muted:       #71717a;    /* zinc-500 */
+  --appkit-color-text-faint:       #a1a1aa;    /* zinc-400 */
+  --appkit-color-text-on-primary:  #ffffff;
+  --appkit-color-text-on-dark:     #ffffff;
+
+  --appkit-color-success:          #059669;    /* emerald-600 */
+  --appkit-color-warning:          #d97706;    /* amber-600 */
+  --appkit-color-error:            #dc2626;    /* red-600 */
+  --appkit-color-info:             #0284c7;    /* sky-600 */
+
+  --appkit-color-focus-ring:       #65c408;    /* primary-500 */
+}
+
+/* --- Colour — Semantic (dark mode overrides) ------------------------------ */
+.dark {
+  --appkit-color-bg:               #020617;    /* slate-950 */
+  --appkit-color-surface:          #0f172a;    /* slate-900 */
+  --appkit-color-surface-elevated: rgba(15, 23, 42, 0.9);
+  --appkit-color-surface-input:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
+
+  --appkit-color-border:           #334155;    /* slate-700 */
+  --appkit-color-border-subtle:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
+
+  --appkit-color-text:             #fafafa;    /* zinc-50 */
+  --appkit-color-text-muted:       #a1a1aa;    /* zinc-400 */
+  --appkit-color-text-faint:       #71717a;    /* zinc-500 */
+
+  --appkit-color-success:          #34d399;    /* emerald-400 */
+  --appkit-color-warning:          #fbbf24;    /* amber-400 */
+  --appkit-color-error:            #f87171;    /* red-400 */
+  --appkit-color-info:             #38bdf8;    /* sky-400 */
+
+  --appkit-color-focus-ring:       #f063b9;    /* secondary-400 */
+}
+
+/* --- Typography ----------------------------------------------------------- */
+:root {
+  --appkit-font-sans:      var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --appkit-font-display:   var(--font-display), "Poppins", ui-sans-serif, system-ui, sans-serif;
+  --appkit-font-editorial: var(--font-editorial), "Georgia", serif;
+  --appkit-font-mono:      ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
+
+  --appkit-text-2xs:       0.625rem;   /* 10px */
+  --appkit-text-xs:        0.75rem;    /* 12px */
+  --appkit-text-sm:        0.875rem;   /* 14px */
+  --appkit-text-base:      1rem;       /* 16px */
+  --appkit-text-lg:        1.125rem;   /* 18px */
+  --appkit-text-xl:        1.25rem;    /* 20px */
+  --appkit-text-2xl:       1.5rem;     /* 24px */
+  --appkit-text-3xl:       1.875rem;   /* 30px */
+  --appkit-text-4xl:       2.25rem;    /* 36px */
+  --appkit-text-5xl:       3rem;       /* 48px */
+
+  --appkit-leading-tight:  1.15;
+  --appkit-leading-snug:   1.375;
+  --appkit-leading-normal: 1.5;
+  --appkit-leading-relaxed: 1.7;
+
+  --appkit-tracking-tighter: -0.02em;
+  --appkit-tracking-tight:   -0.011em;
+  --appkit-tracking-normal:  0em;
+  --appkit-tracking-wide:    0.025em;
+  --appkit-tracking-wider:   0.05em;
+}
+
+/* --- Spacing -------------------------------------------------------------- */
+:root {
+  --appkit-space-1:    0.25rem;    /*  4px */
+  --appkit-space-2:    0.5rem;     /*  8px */
+  --appkit-space-3:    0.75rem;    /* 12px */
+  --appkit-space-4:    1rem;       /* 16px */
+  --appkit-space-5:    1.25rem;    /* 20px */
+  --appkit-space-6:    1.5rem;     /* 24px */
+  --appkit-space-8:    2rem;       /* 32px */
+  --appkit-space-10:   2.5rem;     /* 40px */
+  --appkit-space-12:   3rem;       /* 48px */
+  --appkit-space-16:   4rem;       /* 64px */
+  --appkit-space-20:   5rem;       /* 80px */
+  --appkit-space-18:   4.5rem;     /* 72px — custom */
+  --appkit-space-24:   6rem;       /* 96px */
+}
+
+/* --- Border Radius -------------------------------------------------------- */
+:root {
+  --appkit-radius-sm:   0.25rem;    /*  4px */
+  --appkit-radius-md:   0.375rem;   /*  6px */
+  --appkit-radius-lg:   0.5rem;     /*  8px */
+  --appkit-radius-xl:   0.75rem;    /* 12px */
+  --appkit-radius-2xl:  1rem;       /* 16px */
+  --appkit-radius-3xl:  1.5rem;     /* 24px */
+  --appkit-radius-card: 1rem;       /* 16px — alias */
+  --appkit-radius-btn:  0.75rem;    /* 12px — rounded-xl */
+  --appkit-radius-full: 9999px;
+}
+
+/* --- Shadow --------------------------------------------------------------- */
+:root {
+  --appkit-shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
+  --appkit-shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+  --appkit-shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  --appkit-shadow-xl:      0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
+  --appkit-shadow-soft:    0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
+  --appkit-shadow-glow:    0 0 20px rgba(80, 156, 2, 0.45);
+  --appkit-shadow-glow-pink: 0 0 20px rgba(233, 30, 140, 0.5);
+}
+
+/* --- Z-index -------------------------------------------------------------- */
+:root {
+  --appkit-z-dropdown: 30;
+  --appkit-z-search-backdrop: 35;
+  --appkit-z-navbar:   40;
+  --appkit-z-bottom-nav: 40;
+  --appkit-z-sidebar:  50;
+  --appkit-z-title-bar: 50;
+  --appkit-z-overlay:  45;
+  --appkit-z-modal:    60;
+  --appkit-z-toast:    70;
+
+  /* Layout dimensions */
+  --appkit-navbar-height:    2.5rem;  /* h-10 = 40px (mobile), h-12 = 48px (md) */
+  --appkit-sidebar-width:    20rem;   /* w-80 = 320px */
+  --appkit-bottom-nav-height: 3.5rem; /* h-14 = 56px */
+  --appkit-title-bar-height: 3rem;    /* h-12 = 48px */
+}
+
+/* --- Transition ----------------------------------------------------------- */
+:root {
+  --appkit-duration-fast:   150ms;
+  --appkit-duration-base:   200ms;
+  --appkit-duration-slow:   300ms;
+  --appkit-duration-slower: 400ms;
+  --appkit-ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
+  --appkit-ease-in:         cubic-bezier(0.4, 0, 1, 1);
+  --appkit-ease-out:        cubic-bezier(0, 0, 0.2, 1);
+}

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", "data-section": "datatable-div-630", children: _jsx("div", { className: "appkit-data-table__loading", "data-section": "datatable-div-631", 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", "data-section": "datatable-div-632", children: _jsx("div", { className: "appkit-data-table__empty", "data-section": "datatable-div-633", children: _jsxs("div", { className: "text-center px-4", "data-section": "datatable-div-634", 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", "data-section": "datatable-div-635", 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", "data-section": "datatable-div-636", 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", "data-section": "datatable-div-637", children: [renderViewToggle(), activeViewMode !== "table" &&
+                mobileCardRender &&
+                renderCardGrid(activeViewMode), activeViewMode === "table" && mobileCardRender && (_jsx("div", { className: "appkit-data-table__mobile-cards", "data-section": "datatable-div-638", 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", "data-section": "datatable-div-639", children: _jsx("div", { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, "data-section": "datatable-div-640", 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", "data-section": "datatable-div-641", 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", "data-section": "datatable-div-642", children: children });
+    return (_jsxs("div", { className: "relative group h-full", "data-section": "datatable-div-643", 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", "data-section": "datatable-div-645", children: _jsxs("div", { className: "relative flex items-center justify-center", "data-section": "datatable-div-646", 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;
+};