@mohasinac/appkit 2.8.2 → 2.8.4

package/dist/ui/DataTable.js

@@ -5,10 +5,11 @@ const CLS_CHECKBOX = "rounded border-zinc-300";
 import { Button } from "./components/Button";
 import { Spinner } from "./components/Spinner";
 import { Pagination } from "./components/Pagination";
-import { Text } from "./components/Typography";
+import { Span, Text } from "./components/Typography";
 import { AnimatedList } from "./components/Motion";
 import { GRID_MAP } from "./components/Layout";
 import { Row } from "./components/Layout";
+import { Div } from "./components/Div";
 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
@@ -93,18 +94,18 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
     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 }) }) }));
+        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", "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 dark: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 })] }) }) }));
+        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 dark: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" }) }) })] }));
+        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) => {
@@ -117,11 +118,11 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                     : 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" &&
+    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", "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
+                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", "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: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
+                        : 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: CLS_CHECKBOX, "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
@@ -133,7 +134,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                                         ? "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 dark: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: [
+                                                : 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 dark: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"
@@ -141,15 +142,15 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                         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: CLS_CHECKBOX, "aria-label": "Select row", checked: selectedIds.includes(keyExtractor(item)), onChange: (e) => handleRowSelectionChange(item, e.target.checked) }) })), 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 }) }))] }));
+                                                : (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 DataTableViewToggle({ showViewToggle, showTableView, activeViewMode, labels, onViewModeChange, }) {
     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: () => onViewModeChange("table"), "aria-label": labels.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: () => onViewModeChange("grid"), "aria-label": labels.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: () => onViewModeChange("list"), "aria-label": labels.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" }) }) })] }));
+    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: () => onViewModeChange("table"), "aria-label": labels.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: () => onViewModeChange("grid"), "aria-label": labels.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: () => onViewModeChange("list"), "aria-label": labels.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" }) }) })] }));
 }
 function DataTableTableView({ columns, paginatedData, keyExtractor, selectable, selectedIds, stickyHeader, striped, sortKey, sortDirection, actions, labelActions, onRowClick, onSelectionChange, onSort, onRowSelectionChange, }) {
-    return (_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: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 && paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
+    return (_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: CLS_CHECKBOX, "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])]
@@ -158,7 +159,7 @@ function DataTableTableView({ columns, paginatedData, keyExtractor, selectable,
                                         ? 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 && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx("span", { className: "text-zinc-400 dark: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: [
+                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark: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" : "",
@@ -166,14 +167,14 @@ function DataTableTableView({ columns, paginatedData, keyExtractor, selectable,
 }
 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: [
+        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", "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: [
+                ].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] }));
+                                ].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-[var(--appkit-z-raised)] rounded-xl ring-2 ring-primary ring-offset-0 pointer-events-none", "aria-hidden": "true" })), children] }));
 }

package/dist/ui/components/DateInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Label, Text } from "./Typography";
+import { Label, Span, Text } from "./Typography";
 export const DateInput = React.forwardRef(function DateInput({ label, error, helperText, value, onChange, disabled, required, id, className = "", ...props }, ref) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
     return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, className: "appkit-form-field__label mb-1.5", children: label })), _jsx("input", { ...props, ref: ref, id: inputId, type: "date", value: value, disabled: disabled, required: required, "aria-invalid": error ? "true" : undefined, onChange: (e) => onChange?.(e.target.value), className: ["appkit-input", error ? "appkit-input--error" : "", className].filter(Boolean).join(" ") }), error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", className: "mt-1.5", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
 });
 export function DateRangeInput({ label, startLabel = "From", endLabel = "To", startValue, endValue, onStartChange, onEndChange, error, helperText, disabled, required, startMin, startMax, endMin, endMax, }) {
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Text, { size: "sm", className: "appkit-form-field__label mb-1.5 block font-medium", children: label })), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx(DateInput, { label: startLabel, value: startValue, onChange: onStartChange, disabled: disabled, required: required, min: startMin, max: startMax ?? endValue }), _jsx("span", { className: "mb-2.5 shrink-0 text-sm text-[var(--appkit-color-text-muted)]", children: "\u2013" }), _jsx(DateInput, { label: endLabel, value: endValue, onChange: onEndChange, disabled: disabled, min: endMin ?? startValue, max: endMax })] }), error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", className: "mt-1.5", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Text, { size: "sm", className: "appkit-form-field__label mb-1.5 block font-medium", children: label })), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx(DateInput, { label: startLabel, value: startValue, onChange: onStartChange, disabled: disabled, required: required, min: startMin, max: startMax ?? endValue }), _jsx(Span, { size: "sm", className: "mb-2.5 shrink-0 text-[var(--appkit-color-text-muted)]", children: "\u2013" }), _jsx(DateInput, { label: endLabel, value: endValue, onChange: onEndChange, disabled: disabled, min: endMin ?? startValue, max: endMax })] }), error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", className: "mt-1.5", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
 }

package/dist/ui/components/DetailPageGallery.js

@@ -2,6 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Div } from "./Div";
+const __O = {
+    xAuto: "overflow-x-auto",
+};
 const ASPECT_CLASS = {
     square: "aspect-square",
     video: "aspect-video",
@@ -38,7 +41,7 @@ export function DetailPageGallery({ images, title, aspect = "square", fallback,
             .join(" "), children: [_jsx(Div, { className: [
                     "w-full overflow-hidden rounded-2xl bg-zinc-100 dark:bg-zinc-800",
                     ASPECT_CLASS[aspect],
-                ].join(" "), children: _jsx("img", { src: active.url, alt: active.alt ?? title ?? "", className: "h-full w-full object-cover" }) }), images.length > 1 ? (_jsx(Div, { className: "flex gap-2 overflow-x-auto pb-1", children: images.map((img, idx) => (_jsx("button", { type: "button", "aria-label": `View image ${idx + 1}`, onClick: () => setActiveIndex(idx), className: [
+                ].join(" "), children: _jsx("img", { src: active.url, alt: active.alt ?? title ?? "", className: "h-full w-full object-cover" }) }), images.length > 1 ? (_jsx(Div, { className: `flex gap-2 ${__O.xAuto} pb-1`, children: images.map((img, idx) => (_jsx("button", { type: "button", "aria-label": `View image ${idx + 1}`, onClick: () => setActiveIndex(idx), className: [
                         "flex-shrink-0 h-16 w-16 overflow-hidden rounded-md border-2 transition-colors",
                         idx === activeIndex
                             ? "border-[var(--appkit-color-primary)]"

package/dist/ui/components/DetailPageTabs.js

@@ -2,6 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Div } from "./Div";
+import { Span } from "./Typography";
+const __O = {
+    xAuto: "overflow-x-auto",
+};
 /**
  * `DetailPageTabs` — tab shell used by Product, Auction and Event detail
  * pages. Renders an accessible trigger strip + a single visible panel.
@@ -25,7 +29,7 @@ export function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onT
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx(Div, { role: "tablist", "aria-orientation": "horizontal", className: "flex gap-2 border-b border-zinc-200 dark:border-zinc-700 overflow-x-auto", children: tabs.map((tab) => {
+            .join(" "), children: [_jsx(Div, { role: "tablist", "aria-orientation": "horizontal", className: `flex gap-2 border-b border-zinc-200 dark:border-zinc-700 ${__O.xAuto}`, children: tabs.map((tab) => {
                     const isActive = tab.id === active?.id;
                     return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-controls": `detail-tab-panel-${tab.id}`, id: `detail-tab-trigger-${tab.id}`, disabled: tab.disabled, onClick: () => handleChange(tab.id), className: [
                             "flex-shrink-0 px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
@@ -33,6 +37,6 @@ export function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onT
                                 ? "border-[var(--appkit-color-primary)] text-zinc-900 dark:text-zinc-100"
                                 : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200",
                             tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-                        ].join(" "), children: [tab.label, typeof tab.count === "number" ? (_jsx("span", { className: "ml-2 inline-flex items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 text-xs", children: tab.count })) : null] }, tab.id));
+                        ].join(" "), children: [tab.label, typeof tab.count === "number" ? (_jsx(Span, { size: "xs", className: "ml-2 inline-flex items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5", children: tab.count })) : null] }, tab.id));
                 }) }), active ? (_jsx(Div, { role: "tabpanel", id: `detail-tab-panel-${active.id}`, "aria-labelledby": `detail-tab-trigger-${active.id}`, children: active.content })) : null] }));
 }

package/dist/ui/components/ImageLightbox.js

@@ -4,7 +4,9 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut, RotateCw, Maximize2 } from "lucide-react";
 import { Button } from "./Button";
+import { Div } from "./Div";
 import { Text, Span } from "./Typography";
+const CLS_CLOSE_BTN = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/60 text-white flex items-center justify-center";
 const MIN_ZOOM = 10;
 const MAX_ZOOM = 300;
 const ZOOM_STEP = 20;
@@ -87,10 +89,10 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;
     const iconBtnClass = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white flex items-center justify-center";
-    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { className: "text-white/70 text-sm font-medium", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/60 text-white flex items-center justify-center", "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, style: {
+    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, style: {
                             transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
                             transition: "transform 0.2s ease",
-                        } }), image.badge && (_jsx("div", { className: "absolute left-3 top-3 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white pointer-events-none", children: image.badge }))] }), (image.caption || image.sub) && (_jsxs("div", { className: "flex-shrink-0 text-center px-8 pb-2", children: [image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/80", children: image.caption })), image.sub && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/50", children: image.sub }))] })), showThumbnails && images.length > 1 && (_jsx("div", { className: "flex-shrink-0 flex gap-2 overflow-x-auto px-4 pb-3 justify-center", children: images.map((thumb, i) => (_jsx("button", { type: "button", onClick: () => {
+                        } }), image.badge && (_jsx(Div, { className: "absolute left-3 top-3 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white pointer-events-none", children: image.badge }))] }), (image.caption || image.sub) && (_jsxs("div", { className: "flex-shrink-0 text-center px-8 pb-2", children: [image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/80", children: image.caption })), image.sub && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/50", children: image.sub }))] })), showThumbnails && images.length > 1 && (_jsx("div", { className: "flex-shrink-0 flex gap-2 overflow-x-auto px-4 pb-3 justify-center", children: images.map((thumb, i) => (_jsx("button", { type: "button", onClick: () => {
                         setCurrentIndex(i);
                         setZoom(100);
                         setRotation(0);
@@ -100,5 +102,5 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
                         i === currentIndex
                             ? "scale-110 border-white"
                             : "border-transparent opacity-50 hover:opacity-90",
-                    ].join(" "), "aria-label": `Go to image ${i + 1}`, children: _jsx("img", { src: thumb.src, alt: thumb.alt ?? `Image ${i + 1}`, className: "h-full w-full object-cover" }) }, i))) })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(1), className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Next image", children: _jsx(ChevronRight, { className: "w-7 h-7" }) })), _jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-white/30 text-[11px] flex gap-4", children: [_jsx("span", { children: "\u2190 \u2192 navigate" }), _jsx("span", { children: "scroll to zoom" }), _jsx("span", { children: "R to rotate" }), _jsx("span", { children: "0 to reset" })] })] }), document.body);
+                    ].join(" "), "aria-label": `Go to image ${i + 1}`, children: _jsx("img", { src: thumb.src, alt: thumb.alt ?? `Image ${i + 1}`, className: "h-full w-full object-cover" }) }, i))) })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(1), className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Next image", children: _jsx(ChevronRight, { className: "w-7 h-7" }) })), _jsxs(Div, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-white/30 text-[11px] flex gap-4", children: [_jsx(Span, { children: "\u2190 \u2192 navigate" }), _jsx(Span, { children: "scroll to zoom" }), _jsx(Span, { children: "R to rotate" }), _jsx(Span, { children: "0 to reset" })] })] }), document.body);
 }

package/dist/ui/components/Input.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Div } from "./Div";
 import { Label, Text } from "./Typography";
+const CLS_INPUT_ERROR = "border-red-400 focus-visible:border-red-500 focus-visible:ring-red-500/20 dark:border-red-500";
+const CLS_INPUT_SUCCESS_ICON = "h-4 w-4 text-green-600 dark:text-green-400";
 export const Input = React.forwardRef(function Input({ label, error, helperText, icon, rightIcon, success = false, bare = false, variant = "default", className = "", disabled, required, id, ...props }, ref) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
     const variantClass = error || variant === "error"
-        ? "border-red-400 focus-visible:border-red-500 focus-visible:ring-red-500/20 dark:border-red-500"
+        ? CLS_INPUT_ERROR
         : variant === "ghost"
             ? "border-transparent bg-transparent shadow-none"
             : "";
@@ -23,7 +26,7 @@ export const Input = React.forwardRef(function Input({ label, error, helperText,
         return (_jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }));
     }
     const adornment = rightIcon ??
-        (success && !error ? (_jsx("svg", { className: "h-4 w-4 text-green-600 dark:text-green-400", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.414-1.42l2.493 2.494 6.493-6.494a1 1 0 011.415 0z", clipRule: "evenodd" }) })) : null);
-    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+        (success && !error ? (_jsx("svg", { className: CLS_INPUT_SUCCESS_ICON, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.414-1.42l2.493 2.494 6.493-6.494a1 1 0 011.415 0z", clipRule: "evenodd" }) })) : null);
+    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx(Div, { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx(Div, { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
 });
 Input.displayName = "Input";

package/dist/ui/components/Layout.d.ts

@@ -232,6 +232,10 @@ export interface RowProps extends React.HTMLAttributes<HTMLElement>, SurfaceProp
     wrap?: boolean;
     /** Render as a different element. Defaults to `"div"`. */
     as?: React.ElementType;
+    /** Forwarded to the underlying element when `as="button"`. */
+    type?: "button" | "submit" | "reset";
+    /** Forwarded to the underlying element when `as="button"` or similar. */
+    disabled?: boolean;
     children?: React.ReactNode;
 }
 export declare function Row({ gap, centered, align, justify, wrap, as, surface, padding, rounded, border, shadow, className, children, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Layout.js

@@ -167,7 +167,7 @@ export function Row({ gap = "md", centered = false, align = "center", justify =
     const Tag = (as ?? "div");
     const classes = [
         "appkit-row",
-        centered ? "appkit-row--centered" : ITEMS_MAP[align],
+        centered ? "appkit-row--centered" : align !== "center" ? ITEMS_MAP[align] : "",
         !centered && justify !== "start" ? JUSTIFY_MAP[justify] : "",
         GAP_MAP[gap],
         wrap ? "appkit-row--wrap" : "",

package/dist/ui/components/Layout.style.css

@@ -43,6 +43,7 @@
 .appkit-row {
   display: flex;
   flex-direction: row;
+  align-items: center;
 }
 
 .appkit-grid {

package/dist/ui/components/ListingFilterDrawer.js

@@ -1,8 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { X } from "lucide-react";
+import { Button } from "./Button";
+import { Span } from "./Typography";
+const CLS_CLEAR_BTN = "text-xs text-zinc-500 hover:text-error dark:text-zinc-400 transition-colors min-h-0 h-auto p-0";
 export function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, }) {
     if (!open)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx("button", { type: "button", onClick: onClear, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: onApply, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx(Span, { size: "base", weight: "semibold", className: "text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx(Button, { variant: "ghost", type: "button", onClick: onClear, className: CLS_CLEAR_BTN, children: "Clear all" })), _jsx(Button, { variant: "ghost", type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors min-h-0 h-auto", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs(Button, { type: "button", onClick: onApply, className: "w-full", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
 }

package/dist/ui/components/ListingLayout.js

@@ -25,6 +25,7 @@ import { Text, Span } from "./Typography";
 import { Button } from "./Button";
 import { Drawer } from "./Drawer";
 import { BulkActionBar } from "./BulkActionBar";
+import { Div } from "./Div";
 const DEFAULT_LABELS = {
     filtersTitle: "Filters",
     clearAll: "Clear all",
@@ -60,24 +61,24 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [headerSlot, statusTabsSlot && (_jsx("div", { className: "appkit-listing-layout__status-tabs", "data-section": "listinglayout-div-539", children: statusTabsSlot })), _jsxs("div", { className: [
+            .join(" "), children: [headerSlot, statusTabsSlot && (_jsx(Div, { className: "appkit-listing-layout__status-tabs", children: statusTabsSlot })), _jsxs(Div, { className: [
                     "appkit-listing-layout__toolbar",
                     effectiveIsDashboard
                         ? "appkit-listing-layout__toolbar--dashboard"
                         : "appkit-listing-layout__toolbar--page",
-                ].join(" "), "data-section": "listinglayout-div-540", children: [_jsxs("div", { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--desktop", "data-section": "listinglayout-div-541", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, className: [
+                ].join(" "), children: [_jsxs(Div, { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--desktop", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, className: [
                                     "appkit-listing-layout__filter-btn",
                                     sidebarOpen ? "appkit-listing-layout__filter-btn--active" : "",
-                                ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx("div", { className: "appkit-listing-layout__search", "data-section": "listinglayout-div-542", children: searchSlot })), _jsxs("div", { className: "appkit-listing-layout__toolbar-actions", "data-section": "listinglayout-div-543", children: [sortSlot, viewToggleSlot && (_jsx("div", { className: "appkit-listing-layout__view-toggle-wrap", "data-section": "listinglayout-div-544", children: viewToggleSlot })), actionsSlot] }), toolbarPaginationSlot && (_jsx("div", { className: "appkit-listing-layout__toolbar-pagination", "data-section": "listinglayout-div-545", children: toolbarPaginationSlot }))] }), _jsxs("div", { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--mobile", "data-section": "listinglayout-div-546", children: [_jsxs("div", { className: "appkit-listing-layout__mobile-row-1", "data-section": "listinglayout-div-547", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setMobileFilterOpen(true), "aria-label": l.filtersTitle, className: [
+                                ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx(Div, { className: "appkit-listing-layout__search", children: searchSlot })), _jsxs(Div, { className: "appkit-listing-layout__toolbar-actions", children: [sortSlot, viewToggleSlot && (_jsx(Div, { className: "appkit-listing-layout__view-toggle-wrap", children: viewToggleSlot })), actionsSlot] }), toolbarPaginationSlot && (_jsx(Div, { className: "appkit-listing-layout__toolbar-pagination", children: toolbarPaginationSlot }))] }), _jsxs(Div, { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--mobile", children: [_jsxs(Div, { className: "appkit-listing-layout__mobile-row-1", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setMobileFilterOpen(true), "aria-label": l.filtersTitle, className: [
                                             "appkit-listing-layout__filter-btn",
                                             filterActiveCount > 0
                                                 ? "appkit-listing-layout__filter-btn--active"
                                                 : "",
-                                        ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx("div", { className: "appkit-listing-layout__search", "data-section": "listinglayout-div-548", children: searchSlot }))] }), (sortSlot || viewToggleSlot || actionsSlot) && (_jsx("div", { className: "appkit-listing-layout__mobile-row-2", "data-section": "listinglayout-div-549", children: _jsxs("div", { className: "appkit-listing-layout__mobile-row-2__inner", "data-section": "listinglayout-div-550", children: [sortSlot, viewToggleSlot, actionsSlot] }) }))] }), selectedCount > 0 && (_jsx("div", { className: "appkit-listing-layout__bulk-bar", "data-section": "listinglayout-div-551", children: _jsx(BulkActionBar, { selectedCount: selectedCount, onClearSelection: onClearSelection, actions: bulkActionItems, labels: {
+                                        ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx(Div, { className: "appkit-listing-layout__search", children: searchSlot }))] }), (sortSlot || viewToggleSlot || actionsSlot) && (_jsx(Div, { className: "appkit-listing-layout__mobile-row-2", children: _jsxs(Div, { className: "appkit-listing-layout__mobile-row-2__inner", children: [sortSlot, viewToggleSlot, actionsSlot] }) }))] }), selectedCount > 0 && (_jsx(Div, { className: "appkit-listing-layout__bulk-bar", children: _jsx(BulkActionBar, { selectedCount: selectedCount, onClearSelection: onClearSelection, actions: bulkActionItems, labels: {
                                 selected: l.filtersTitle, // placeholder — callers provide proper labels
                                 apply: l.applyFilters,
                                 clearSelection: l.clearAll,
-                            } }) }))] }), _jsxs("div", { className: "appkit-listing-layout__body", "data-section": "listinglayout-div-552", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
+                            } }) }))] }), _jsxs(Div, { className: "appkit-listing-layout__body", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
                             "appkit-listing-layout__sidebar",
                             effectiveIsDashboard
                                 ? "appkit-listing-layout__sidebar--dashboard"
@@ -85,9 +86,9 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                             sidebarOpen
                                 ? "appkit-listing-layout__sidebar--open"
                                 : "appkit-listing-layout__sidebar--collapsed",
-                        ].join(" "), children: _jsxs("div", { className: "appkit-listing-layout__sidebar-panel", "data-section": "listinglayout-div-553", children: [_jsxs("div", { className: "appkit-listing-layout__sidebar-header", "data-section": "listinglayout-div-554", children: [_jsx(Text, { weight: "semibold", size: "sm", children: panelTitle }), filterActiveCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onFilterClear, className: "text-xs text-primary hover:text-primary/80 hover:underline p-0 h-auto leading-none font-medium", children: l.clearAll }))] }), _jsx("div", { className: "appkit-listing-layout__sidebar-facets", "data-section": "listinglayout-div-555", children: filterContent }), _jsx("div", { className: "appkit-listing-layout__sidebar-footer", "data-section": "listinglayout-div-556", children: _jsx(Button, { type: "button", variant: "primary", className: "w-full rounded-xl", size: "sm", onClick: onFilterApply, children: filterPendingCount != null && filterPendingCount > 0
+                        ].join(" "), children: _jsxs(Div, { className: "appkit-listing-layout__sidebar-panel", children: [_jsxs(Div, { className: "appkit-listing-layout__sidebar-header", children: [_jsx(Text, { weight: "semibold", size: "sm", children: panelTitle }), filterActiveCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onFilterClear, className: "text-xs text-primary hover:text-primary/80 hover:underline p-0 h-auto leading-none font-medium", children: l.clearAll }))] }), _jsx(Div, { className: "appkit-listing-layout__sidebar-facets", children: filterContent }), _jsx(Div, { className: "appkit-listing-layout__sidebar-footer", children: _jsx(Button, { type: "button", variant: "primary", className: "w-full rounded-xl", size: "sm", onClick: onFilterApply, children: filterPendingCount != null && filterPendingCount > 0
                                             ? `${l.applyFilters} (${filterPendingCount})`
-                                            : l.applyFilters }) })] }) })), _jsxs("div", { className: "appkit-listing-layout__content", "data-section": "listinglayout-div-557", children: [activeFiltersSlot, resultCountSlot && (_jsx("div", { className: "appkit-listing-layout__result-count", "data-section": "listinglayout-div-558", children: resultCountSlot })), errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && (_jsx("div", { className: "appkit-listing-layout__pagination", "data-section": "listinglayout-div-559", children: paginationSlot }))] }))] })] }), toolbarPaginationSlot && (_jsx(Nav, { "aria-label": "Pagination", className: [
+                                            : l.applyFilters }) })] }) })), _jsxs(Div, { className: "appkit-listing-layout__content", children: [activeFiltersSlot, resultCountSlot && (_jsx(Div, { className: "appkit-listing-layout__result-count", children: resultCountSlot })), errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && (_jsx(Div, { className: "appkit-listing-layout__pagination", children: paginationSlot }))] }))] })] }), toolbarPaginationSlot && (_jsx(Nav, { "aria-label": "Pagination", className: [
                     "appkit-listing-layout__mobile-pagination",
                     effectiveIsDashboard
                         ? "appkit-listing-layout__mobile-pagination--dashboard"
@@ -96,7 +97,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                             : "appkit-listing-layout__mobile-pagination--default",
                 ].join(" "), children: toolbarPaginationSlot })), hasFilter && (_jsx(Drawer, { isOpen: mobileFilterOpen, onClose: () => setMobileFilterOpen(false), side: "bottom", title: filterActiveCount > 0
                     ? `${panelTitle} (${filterActiveCount})`
-                    : panelTitle, footer: _jsxs("div", { className: "appkit-listing-layout__mobile-overlay-footer", "data-section": "listinglayout-div-560", children: [_jsx(Button, { type: "button", variant: "secondary", className: "flex-1 rounded-xl", onClick: () => onFilterClear?.(), children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "flex-1 rounded-xl", onClick: handleMobileApply, children: filterPendingCount != null && filterPendingCount > 0
+                    : panelTitle, footer: _jsxs(Div, { className: "appkit-listing-layout__mobile-overlay-footer", children: [_jsx(Button, { type: "button", variant: "secondary", className: "flex-1 rounded-xl", onClick: () => onFilterClear?.(), children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "flex-1 rounded-xl", onClick: handleMobileApply, children: filterPendingCount != null && filterPendingCount > 0
                                 ? `${l.applyFilters} (${filterPendingCount})`
                                 : l.applyFilters })] }), children: filterContent })), overlays] }));
 }

package/dist/ui/components/ListingToolbar.js

@@ -2,6 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckSquare, Search, SlidersHorizontal, LayoutGrid, List, Table2, RotateCcw, Square, } from "lucide-react";
 import { SortDropdown } from "./SortDropdown";
+import { Div } from "./Div";
+import { Span } from "./Typography";
+const CLS_CLEAR_LINK = "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-400 transition-colors";
+const CLS_CLEAR_ICON_BTN = "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors";
 const DEFAULT_LABELS = {
     search: "Search",
     filters: "Filters",
@@ -31,7 +35,7 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary,theme(colors.violet.600))]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] font-bold text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap text-xs", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors", children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", className: "text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-zinc-500 dark:text-zinc-400", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
                                     ? "border-transparent bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white"
                                     : "border-zinc-300 dark:border-slate-600 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/dist/ui/components/PaginatedSelect.d.ts

@@ -44,8 +44,7 @@ interface MultiProps<V> extends BaseProps<V> {
 export type PaginatedSelectProps<V = string> = SingleProps<V> | MultiProps<V>;
 /**
  * PaginatedSelect — searchable, async-paginated select with optional multi-mode
- * and optional inline create-new drawer. Replaces DynamicSelect, InlineCreateSelect,
- * and PaginatedMultiSelect.
+ * and optional inline create-new drawer.
  *
  * @example single-select
  * <PaginatedSelect value={storeId} onChange={setStoreId} loadOptions={loadStores} />

package/dist/ui/components/PaginatedSelect.js

@@ -32,8 +32,7 @@ const C = {
 const CREATE_SENTINEL = "__paginated_select_create__";
 /**
  * PaginatedSelect — searchable, async-paginated select with optional multi-mode
- * and optional inline create-new drawer. Replaces DynamicSelect, InlineCreateSelect,
- * and PaginatedMultiSelect.
+ * and optional inline create-new drawer.
  *
  * @example single-select
  * <PaginatedSelect value={storeId} onChange={setStoreId} loadOptions={loadStores} />

package/dist/ui/components/Radio.js

@@ -42,7 +42,7 @@ export function RadioGroup({ name, options, value, onChange, label, error, orien
                                             ].join(" ") }), _jsx("span", { className: [
                                                 UI_RADIO.classic.dot,
                                                 selected ? UI_RADIO.classic.dotSelected : "",
-                                            ].join(" ") })] }), _jsx(Span, { className: "text-sm text-zinc-700 dark:text-zinc-200", children: option.label })] }, option.value));
+                                            ].join(" ") })] }), _jsx(Span, { size: "sm", className: "text-zinc-700 dark:text-zinc-200", children: option.label })] }, option.value));
                     }
                     return (_jsxs("label", { className: [
                             UI_RADIO.toggle.base,

package/dist/ui/components/Select.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Div } from "./Div";
 import { Label, Text } from "./Typography";
 export function Select({ options, value, onChange, onValueChange, placeholder, label, error, helperText, disabled = false, required, className = "", id, variant = "default", ...props }) {
     const generatedId = React.useId();
@@ -23,5 +24,5 @@ export function Select({ options, value, onChange, onValueChange, placeholder, l
                             className,
                         ]
                             .filter(Boolean)
-                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
+                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx(Div, { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
 }

package/dist/ui/components/Slider.js

@@ -24,7 +24,7 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
     const handleChangeEnd = () => {
         onChangeEnd?.(value);
     };
-    return (_jsxs("div", { className: ["w-full", className].filter(Boolean).join(" "), "data-section": "slider-div-607", children: [(label || showValue) && (_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", "data-section": "slider-div-608", children: [label ? _jsx(Label, { htmlFor: inputId, children: label }) : _jsx("span", {}), showValue ? (_jsx(Span, { className: "text-sm tabular-nums text-zinc-600 dark:text-zinc-300", children: value })) : null] })), _jsxs("div", { className: "relative", "data-section": "slider-div-609", children: [_jsx("div", { "aria-hidden": "true", className: [
+    return (_jsxs("div", { className: ["w-full", className].filter(Boolean).join(" "), "data-section": "slider-div-607", children: [(label || showValue) && (_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", "data-section": "slider-div-608", children: [label ? _jsx(Label, { htmlFor: inputId, children: label }) : _jsx("span", {}), showValue ? (_jsx(Span, { size: "sm", className: "tabular-nums text-zinc-600 dark:text-zinc-300", children: value })) : null] })), _jsxs("div", { className: "relative", "data-section": "slider-div-609", children: [_jsx("div", { "aria-hidden": "true", className: [
                             "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-zinc-200 dark:bg-slate-700",
                             SIZE_CLASSES[size],
                         ].join(" "), "data-section": "slider-div-610", children: _jsx("div", { className: [

package/dist/ui/components/VacationBanner.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert } from "./Alert";
+import { Div } from "./Div";
 import { Span } from "./Typography";
 /**
  * S-STORE-6-A — Vacation-mode banner shown on product detail + checkout
@@ -13,5 +14,5 @@ export function VacationBanner({ storeName, message, returnDate, className, }) {
             month: "short",
             day: "numeric",
         });
-    return (_jsx(Alert, { variant: "warning", className: className, children: _jsxs("div", { className: "text-sm", children: [_jsx(Span, { weight: "bold", children: storeName ? `${storeName} is on vacation` : "Store is on vacation" }), message ? _jsxs("span", { children: [" \u2014 ", message] }) : null, formattedDate ? _jsxs("span", { children: [" Returns ", formattedDate, "."] }) : null, _jsx("div", { className: "text-xs opacity-80 mt-1", children: "New orders are paused; you can still wishlist items." })] }) }));
+    return (_jsx(Alert, { variant: "warning", className: className, children: _jsxs(Div, { className: "text-sm", children: [_jsx(Span, { weight: "bold", children: storeName ? `${storeName} is on vacation` : "Store is on vacation" }), message ? _jsxs(Span, { children: [" \u2014 ", message] }) : null, formattedDate ? _jsxs(Span, { children: [" Returns ", formattedDate, "."] }) : null, _jsx(Div, { className: "text-xs opacity-80 mt-1", children: "New orders are paused; you can still wishlist items." })] }) }));
 }

package/dist/ui/components/surface-tokens.d.ts

@@ -16,6 +16,7 @@ export declare const SURFACE_MAP: {
     readonly interactive: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all cursor-pointer";
     readonly glass: "backdrop-blur-md bg-white/85 dark:bg-slate-900/85 border border-zinc-200/60 dark:border-slate-700/40 rounded-2xl shadow-lg";
     readonly form: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-sm";
+    readonly sidePanel: "bg-white dark:bg-slate-950";
 };
 export type SurfaceKey = keyof typeof SURFACE_MAP;
 export declare const PADDING_MAP: {