@mohasinac/appkit 2.7.24 → 2.7.25

package/dist/features/admin/components/DataTable.js

@@ -35,7 +35,7 @@ function SelectableRow({ row, columns, isSelected, onToggle, renderRowActions, o
         }
         : undefined;
     const isInteractive = Boolean(onRowClick ?? rowHref);
-    return (_jsxs("tr", { onClick: handleClick, onKeyDown: handleKeyDown, role: isInteractive ? "link" : undefined, tabIndex: isInteractive ? 0 : undefined, onMouseDown: selectionEnabled && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: selectionEnabled && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: selectionEnabled && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: selectionEnabled && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: selectionEnabled && !isSelected ? longPress.onTouchEnd : undefined, className: `border-b border-neutral-100 dark:border-slate-700 hover:bg-neutral-50 dark:hover:bg-slate-800 ${isInteractive ? "cursor-pointer" : ""} ${isSelected ? "bg-primary/5 dark:bg-primary/10" : ""}`, children: [selectionEnabled && (_jsx("td", { className: "relative w-10 px-2 py-3", onClick: (e) => e.stopPropagation(), children: _jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onToggle?.(row.id, !isSelected); }, label: isSelected ? "Deselect row" : "Select row", position: "top-1/2 left-2 -translate-y-1/2" }) })), columns.map((col) => (_jsx("td", { className: `px-4 py-3 text-neutral-700 dark:text-zinc-300 ${col.className ?? ""}`, children: col.render
+    return (_jsxs("tr", { "data-testid": "data-table-row", onClick: handleClick, onKeyDown: handleKeyDown, role: isInteractive ? "link" : undefined, tabIndex: isInteractive ? 0 : undefined, onMouseDown: selectionEnabled && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: selectionEnabled && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: selectionEnabled && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: selectionEnabled && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: selectionEnabled && !isSelected ? longPress.onTouchEnd : undefined, className: `border-b border-neutral-100 dark:border-slate-700 hover:bg-neutral-50 dark:hover:bg-slate-800 ${isInteractive ? "cursor-pointer" : ""} ${isSelected ? "bg-primary/5 dark:bg-primary/10" : ""}`, children: [selectionEnabled && (_jsx("td", { className: "relative w-10 px-2 py-3", onClick: (e) => e.stopPropagation(), children: _jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onToggle?.(row.id, !isSelected); }, label: isSelected ? "Deselect row" : "Select row", position: "top-1/2 left-2 -translate-y-1/2", "data-testid": "row-checkbox" }) })), columns.map((col) => (_jsx("td", { className: `px-4 py-3 text-neutral-700 dark:text-zinc-300 ${col.className ?? ""}`, children: col.render
                     ? col.render(row)
                     : String(row[col.key] ?? "") }, col.key))), renderRowActions && (_jsx("td", { className: "px-2 py-3", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] }));
 }
@@ -43,5 +43,5 @@ export function DataTable({ columns: columnsProp, rows, isLoading, sortKey, sort
     const columns = (columnsProp ?? DEFAULT_COLUMNS);
     const selectionEnabled = Boolean(onToggleSelect);
     const allRowsSelected = selectionEnabled && rows.length > 0 && rows.every((r) => selectedIds?.has(r.id));
-    return (_jsxs(Div, { className: "overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900", children: [_jsx(Div, { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-neutral-200 dark:border-slate-700 bg-neutral-50 dark:bg-slate-800", children: [selectionEnabled && (_jsx("th", { scope: "col", className: "w-10 px-2 py-3", children: onToggleSelectAll && (_jsx("input", { type: "checkbox", "aria-label": allRowsSelected ? "Deselect all" : "Select all", checked: allRowsSelected, onChange: () => onToggleSelectAll(!allRowsSelected), className: "h-4 w-4 rounded border-zinc-300 dark:border-slate-600 accent-zinc-900 dark:accent-zinc-100" })) })), columns.map((col) => (_jsxs("th", { scope: "col", onClick: col.sortable && onSort ? () => onSort(col.key) : undefined, className: `px-4 py-3 text-left font-semibold text-neutral-900 dark:text-zinc-100 ${col.sortable && onSort ? "cursor-pointer select-none hover:text-primary" : ""} ${col.className ?? ""}`, children: [col.header, col.sortable && sortKey === col.key && (_jsx(Span, { className: "ml-1", children: sortDir === "asc" ? "↑" : "↓" }))] }, col.key))), renderRowActions && _jsx("th", { scope: "col", className: "w-12 px-2 py-3" })] }) }), _jsx("tbody", { children: isLoading ? (Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "border-b border-neutral-100 dark:border-slate-700", children: [selectionEnabled && _jsx("td", { className: "w-10 px-2 py-3" }), columns.map((col) => (_jsx("td", { className: "px-4 py-3", children: _jsx(Div, { className: "h-4 w-full animate-pulse rounded bg-neutral-200 dark:bg-slate-700" }) }, col.key)))] }, i)))) : rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectionEnabled ? 1 : 0) + (renderRowActions ? 1 : 0), className: "px-4 py-12 text-center text-neutral-500 dark:text-zinc-400", children: emptyLabel }) })) : (rows.map((row) => (_jsx(SelectableRow, { row: row, columns: columns, isSelected: selectedIds?.has(row.id) ?? false, onToggle: onToggleSelect, renderRowActions: renderRowActions, onRowClick: onRowClick, rowHref: getRowHref?.(row), selectionEnabled: selectionEnabled }, row.id)))) })] }) }), totalPages > 1 && onPageChange && (_jsx(Div, { className: "flex items-center justify-end gap-2 border-t border-neutral-200 dark:border-slate-700 px-4 py-3", children: Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (_jsx(Button, { onClick: () => onPageChange(p), variant: p === currentPage ? "primary" : "ghost", size: "sm", className: `h-8 w-8 rounded text-xs font-medium transition ${p === currentPage ? "bg-neutral-900 text-white" : "text-neutral-600 dark:text-zinc-300 hover:bg-neutral-100 dark:hover:bg-slate-800"}`, children: p }, p))) }))] }));
+    return (_jsxs(Div, { className: "overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900", children: [_jsx(Div, { className: "overflow-x-auto", children: _jsxs("table", { "data-testid": "data-table", className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-neutral-200 dark:border-slate-700 bg-neutral-50 dark:bg-slate-800", children: [selectionEnabled && (_jsx("th", { scope: "col", className: "w-10 px-2 py-3", children: onToggleSelectAll && (_jsx("input", { type: "checkbox", "data-testid": "select-all-checkbox", "aria-label": allRowsSelected ? "Deselect all" : "Select all", checked: allRowsSelected, onChange: () => onToggleSelectAll(!allRowsSelected), className: "h-4 w-4 rounded border-zinc-300 dark:border-slate-600 accent-zinc-900 dark:accent-zinc-100" })) })), columns.map((col) => (_jsxs("th", { scope: "col", onClick: col.sortable && onSort ? () => onSort(col.key) : undefined, className: `px-4 py-3 text-left font-semibold text-neutral-900 dark:text-zinc-100 ${col.sortable && onSort ? "cursor-pointer select-none hover:text-primary" : ""} ${col.className ?? ""}`, children: [col.header, col.sortable && sortKey === col.key && (_jsx(Span, { className: "ml-1", children: sortDir === "asc" ? "↑" : "↓" }))] }, col.key))), renderRowActions && _jsx("th", { scope: "col", className: "w-12 px-2 py-3" })] }) }), _jsx("tbody", { children: isLoading ? (Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "border-b border-neutral-100 dark:border-slate-700", children: [selectionEnabled && _jsx("td", { className: "w-10 px-2 py-3" }), columns.map((col) => (_jsx("td", { className: "px-4 py-3", children: _jsx(Div, { className: "h-4 w-full animate-pulse rounded bg-neutral-200 dark:bg-slate-700" }) }, col.key)))] }, i)))) : rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectionEnabled ? 1 : 0) + (renderRowActions ? 1 : 0), className: "px-4 py-12 text-center text-neutral-500 dark:text-zinc-400", children: emptyLabel }) })) : (rows.map((row) => (_jsx(SelectableRow, { row: row, columns: columns, isSelected: selectedIds?.has(row.id) ?? false, onToggle: onToggleSelect, renderRowActions: renderRowActions, onRowClick: onRowClick, rowHref: getRowHref?.(row), selectionEnabled: selectionEnabled }, row.id)))) })] }) }), totalPages > 1 && onPageChange && (_jsx(Div, { className: "flex items-center justify-end gap-2 border-t border-neutral-200 dark:border-slate-700 px-4 py-3", children: Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (_jsx(Button, { onClick: () => onPageChange(p), variant: p === currentPage ? "primary" : "ghost", size: "sm", className: `h-8 w-8 rounded text-xs font-medium transition ${p === currentPage ? "bg-neutral-900 text-white" : "text-neutral-600 dark:text-zinc-300 hover:bg-neutral-100 dark:hover:bg-slate-800"}`, children: p }, p))) }))] }));
 }

package/dist/ui/components/BulkActionBar.js

@@ -53,7 +53,7 @@ export function BulkActionBar({ selectedCount, onClearSelection, actions = [], l
         selectedAction?.onClick();
         setPickerOpen(false);
     };
-    return (_jsxs("div", { ref: containerRef, className: "appkit-bulk-bar", role: "region", "aria-live": "polite", "aria-label": l.bulkActions, "data-section": "bulkactionbar-div-460", children: [_jsx("div", { className: "appkit-bulk-bar__stripe" }), _jsxs("div", { className: "appkit-bulk-bar__row", "data-section": "bulkactionbar-div-461", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: onClearSelection, className: "appkit-bulk-bar__count-pill", "aria-label": l.clearSelection, children: [_jsx(X, { className: "appkit-bulk-bar__count-icon", "aria-hidden": "true" }), _jsxs(Span, { className: "appkit-bulk-bar__count-label", children: [selectedCount, " ", l.selected] })] }), actions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
+    return (_jsxs("div", { ref: containerRef, "data-testid": "bulk-action-bar", className: "appkit-bulk-bar", role: "region", "aria-live": "polite", "aria-label": l.bulkActions, "data-section": "bulkactionbar-div-460", children: [_jsx("div", { className: "appkit-bulk-bar__stripe" }), _jsxs("div", { className: "appkit-bulk-bar__row", "data-section": "bulkactionbar-div-461", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: onClearSelection, className: "appkit-bulk-bar__count-pill", "aria-label": l.clearSelection, children: [_jsx(X, { className: "appkit-bulk-bar__count-icon", "aria-hidden": "true" }), _jsxs(Span, { "data-testid": "bulk-selected-count", className: "appkit-bulk-bar__count-label", children: [selectedCount, " ", l.selected] })] }), actions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                             "appkit-bulk-bar__picker-trigger",
                             selectedAction?.variant === "danger"
                                 ? "appkit-bulk-bar__picker-trigger--danger"

package/dist/ui/components/CountdownDisplay.js

@@ -45,5 +45,5 @@ export function CountdownDisplay({ targetDate, format = "auto", expiredLabel = "
     }, []);
     const remaining = useMemo(() => getRemaining(targetDate), [targetDate, tick]);
     const label = remaining ? formatLabel(remaining, format) : expiredLabel;
-    return (_jsx(Span, { variant: "inherit", className: classNames("appkit-countdown", className), children: label }));
+    return (_jsx(Span, { variant: "inherit", "data-testid": "countdown", className: classNames("appkit-countdown", className), children: label }));
 }

package/dist/ui/components/EmptyState.js

@@ -12,5 +12,5 @@ const UI_EMPTY = {
 export function EmptyState({ icon, title, description, action, actionLabel, onAction, actionHref, className = "", }) {
     const resolvedAction = action ??
         (actionLabel && actionHref ? (_jsx(TextLink, { href: actionHref, children: actionLabel })) : actionLabel && onAction ? (_jsx(Button, { type: "button", variant: "primary", onClick: onAction, children: actionLabel })) : null);
-    return (_jsxs(Card, { variant: "outlined", className: [UI_EMPTY.base, className].filter(Boolean).join(" "), children: [icon ? _jsx("div", { className: UI_EMPTY.icon, "data-section": "emptystate-div-492", children: icon }) : null, _jsx(Heading, { level: 3, children: title }), description ? (_jsx(Text, { variant: "secondary", className: UI_EMPTY.description, children: description })) : null, resolvedAction ? (_jsx("div", { className: UI_EMPTY.action, "data-section": "emptystate-div-493", children: resolvedAction })) : null] }));
+    return (_jsxs(Card, { variant: "outlined", "data-testid": "empty-state", className: [UI_EMPTY.base, className].filter(Boolean).join(" "), children: [icon ? _jsx("div", { className: UI_EMPTY.icon, "data-section": "emptystate-div-492", children: icon }) : null, _jsx(Heading, { level: 3, children: title }), description ? (_jsx(Text, { variant: "secondary", className: UI_EMPTY.description, children: description })) : null, resolvedAction ? (_jsx("div", { className: UI_EMPTY.action, "data-section": "emptystate-div-493", children: resolvedAction })) : null] }));
 }

package/dist/ui/components/ListingToolbar.js

@@ -29,7 +29,7 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
         }
     };
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
-    return (_jsx("div", { 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
+    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-500 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" }) })), extra] })] }) }));
 }

package/dist/ui/components/SiteLogo.js

@@ -11,8 +11,8 @@ export function SiteLogo({ className = "h-7", title = "LetItRip.in", variant = "
     if (src) {
         return (
         // eslint-disable-next-line @next/next/no-img-element
-        _jsx("img", { src: src, alt: title, className: `block w-auto object-contain ${className}` }));
+        _jsx("img", { src: src, alt: title, "data-testid": "site-logo", className: `block w-auto object-contain ${className}` }));
     }
     const fill = variant === "gradient" ? `url(#${GRADIENT_ID})` : "currentColor";
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
 }

package/dist/ui/components/TablePagination.js

@@ -13,7 +13,7 @@ export function TablePagination({ currentPage, totalPages, pageSize, total, onPa
         perPage: labels?.perPage ?? "Per page",
     };
     if (compact) {
-        return (_jsx(Div, { role: "navigation", "aria-label": l.paginationLabel, className: [
+        return (_jsx(Div, { role: "navigation", "aria-label": l.paginationLabel, "data-testid": "pagination", className: [
                 "appkit-table-pagination appkit-table-pagination--compact",
                 className,
             ]
@@ -22,7 +22,7 @@ export function TablePagination({ currentPage, totalPages, pageSize, total, onPa
     }
     const from = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
     const to = Math.min(currentPage * pageSize, total);
-    return (_jsxs(Div, { role: "navigation", "aria-label": l.paginationLabel, className: ["appkit-table-pagination", className]
+    return (_jsxs(Div, { role: "navigation", "aria-label": l.paginationLabel, "data-testid": "pagination", className: ["appkit-table-pagination", className]
             .filter(Boolean)
             .join(" "), children: [_jsxs(Text, { size: "xs", variant: "none", className: "appkit-table-pagination__summary", children: [l.showing, " ", _jsxs(Span, { className: "appkit-table-pagination__summary-value", children: [from, "\u2013", to] }), " ", l.of, " ", _jsx(Span, { className: "appkit-table-pagination__summary-value", children: new Intl.NumberFormat().format(total) }), " ", l.results] }), _jsx(Div, { className: "appkit-table-pagination__controls", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, disabled: isLoading }) }), onPageSizeChange && (_jsxs(Div, { className: "appkit-table-pagination__size", children: [_jsx("label", { htmlFor: "page-size-select", className: "appkit-table-pagination__size-label", children: l.perPage }), _jsx(Select, { id: "page-size-select", value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), disabled: isLoading, "aria-label": l.perPage, className: "appkit-table-pagination__size-select", options: pageSizeOptions.map((s) => ({
                             value: String(s),

package/dist/ui/components/Toast.js

@@ -45,7 +45,7 @@ export function ToastProvider({ children, position = "top-right", }) {
             window.setTimeout(() => hideToast(id), duration);
         }
     }, [hideToast]);
-    return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [children, _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: [UI_TOAST.container, UI_TOAST.positions[position]]
+    return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [children, _jsx("div", { "aria-live": "polite", "aria-atomic": "true", "data-testid": "toast-container", className: [UI_TOAST.container, UI_TOAST.positions[position]]
                     .filter(Boolean)
                     .join(" "), "data-section": "toast-div-623", children: toasts.map((toast) => (_jsx(ToastRow, { toast: toast, onClose: hideToast }, toast.id))) })] }));
 }
@@ -56,5 +56,5 @@ function ToastRow({ toast, onClose, }) {
         warning: _jsx("span", { "aria-hidden": "true", children: "!" }),
         info: _jsx("span", { "aria-hidden": "true", children: "i" }),
     };
-    return (_jsxs("div", { role: "alert", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
+    return (_jsxs("div", { role: "alert", "data-testid": "toast", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.24",
+  "version": "2.7.25",
   "license": "MIT",
   "publishConfig": {
     "access": "public"