@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -1,38 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Users, Search, Edit, Monitor, UserCog, AlertTriangle } from "lucide-react";
-import { Div, Heading, Span, Text, Section, Alert, Table, Thead, Tbody, Tr, Th, Td } from "../../../ui";
+import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Tr, Ul } from "../../../ui";
 import { GC } from "../../_guide-cls";
 export function AdminUsersGuideView() {
-    return (_jsxs(Div, { className: "space-y-8 pb-10 max-w-3xl mx-auto", children: [_jsxs(Section, { children: [_jsxs(Div, { className: "flex items-center gap-3 mb-2", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center", style: { background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 100%)" }, children: _jsx(Users, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text-muted)] uppercase tracking-widest", children: "Admin Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-[var(--appkit-color-text)] mb-2", children: "Users & Accounts" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Managing users, roles, sessions, and employee accounts on LetItRip." })] }), [
+    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", align: "center", justify: "center", rounded: "xl", style: { background: "linear-gradient(135deg,var(--appkit-color-primary-700) 0%,var(--appkit-color-cobalt) 100%)" }, children: _jsx(Users, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Users & Accounts" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Managing users, roles, sessions, and employee accounts on LetItRip." })] }), [
                 {
                     Icon: Users, title: "User Roles Overview",
-                    content: (_jsx(Div, { className: "overflow-x-auto", children: _jsxs(Table, { className: "w-full text-sm border-collapse", children: [_jsx(Thead, { children: _jsx(Tr, { className: "border-b border-[var(--appkit-color-border)]", children: ["Role", "What they can do", "How assigned"].map((h) => (_jsx(Th, { className: "text-left py-2 pr-4 font-semibold text-[var(--appkit-color-text)]", children: h }, h))) }) }), _jsx(Tbody, { className: "text-[var(--appkit-color-text-muted)]", children: [
+                    content: (_jsx(Div, { className: "overflow-x-auto", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { children: _jsx(Tr, { className: "border-b border-[var(--appkit-color-border)]", children: ["Role", "What they can do", "How assigned"].map((h) => (_jsx(Th, { align: "left", paddingSide: "pr-md", className: "text-[var(--appkit-color-text)]", padding: "xs-tall", weight: "semibold", children: h }, h))) }) }), _jsx(Tbody, { className: "text-[var(--appkit-color-text-muted)]", children: [
                                         ["user", "Browse, buy, bid, wishlist, reviews, support tickets", "Auto on registration"],
                                         ["seller", "Everything above + store management + listings", "Auto when store is created"],
                                         ["moderator", "Review content, manage scam reports, FAQ moderation", "Admin team invite"],
                                         ["employee", "Assigned permission-group access to admin sections", "Admin team invite"],
                                         ["admin", "Full access to all admin sections, bypasses RBAC checks", "Manual via Firebase console"],
-                                    ].map(([role, can, how]) => (_jsxs(Tr, { className: "border-b border-[var(--appkit-color-border)]/50", children: [_jsx(Td, { className: "py-2 pr-4 font-mono text-xs text-[var(--appkit-color-primary)]", children: role }), _jsx(Td, { className: "py-2 pr-4", children: can }), _jsx(Td, { className: "py-2", children: how })] }, role))) })] }) })),
+                                    ].map(([role, can, how]) => (_jsxs(Tr, { className: "border-b border-[var(--appkit-color-border)]/50", children: [_jsx(Td, { paddingSide: "pr-md", className: "font-mono text-[var(--appkit-color-primary)]", padding: "xs-tall", size: "xs", children: role }), _jsx(Td, { paddingSide: "pr-md", padding: "xs-tall", children: can }), _jsx(Td, { padding: "xs-tall", children: how })] }, role))) })] }) })),
                 },
                 {
                     Icon: Search, title: "User List & Search",
-                    content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Columns" }), ": display name, email, role badge, emailVerified, createdAt, last login."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Filter chips" }), ": All, by role, verified only, banned."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Search" }), ": by email or displayName. Email matches use the HMAC blind index \u2014 searching partial emails returns no results."] })] })),
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Columns" }), ": display name, email, role badge, emailVerified, createdAt, last login."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Filter chips" }), ": All, by role, verified only, banned."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Search" }), ": by email or displayName. Email matches use the HMAC blind index \u2014 searching partial emails returns no results."] })] })),
                 },
                 {
                     Icon: Edit, title: "Editing a User",
-                    content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] mb-3", children: "The AdminUserEditorView opens in a side drawer. Fields:" }), _jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "role Select" }), " \u2014 changing to ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "admin" }), " bypasses all RBAC checks. Only do this with explicit senior approval."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "emailVerified toggle" }), " \u2014 manually mark an email as verified (e.g. after manual ID check)."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "isDisabled" }), " \u2014 disables Firebase Auth login without a full hard ban. User sees \"account suspended\" on login."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "PII note" }), " \u2014 email and phone are HMAC-indexed. The UI shows the hashed index, not the plaintext value. Never store plaintext in Firestore."] })] })] })),
+                    content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-3", size: "sm", children: "The AdminUserEditorView opens in a side drawer. Fields:" }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "role Select" }), " \u2014 changing to ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "admin" }), " bypasses all RBAC checks. Only do this with explicit senior approval."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "emailVerified toggle" }), " \u2014 manually mark an email as verified (e.g. after manual ID check)."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "isDisabled" }), " \u2014 disables Firebase Auth login without a full hard ban. User sees \"account suspended\" on login."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "PII note" }), " \u2014 email and phone are HMAC-indexed. The UI shows the hashed index, not the plaintext value. Never store plaintext in Firestore."] })] })] })),
                 },
                 {
                     Icon: Monitor, title: "Sessions Management",
-                    content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Session table" }), " shows: browser, OS, device type, masked IP (last octet zeroed), last activity, and estimated location."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Force expire" }), " a session if you suspect account takeover \u2014 the user will be signed out on their next request."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Hard ban cascade" }), " \u2014 issuing a hard ban automatically expires all active sessions for that user."] })] })),
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Session table" }), " shows: browser, OS, device type, masked IP (last octet zeroed), last activity, and estimated location."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Force expire" }), " a session if you suspect account takeover \u2014 the user will be signed out on their next request."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Hard ban cascade" }), " \u2014 issuing a hard ban automatically expires all active sessions for that user."] })] })),
                 },
                 {
                     Icon: UserCog, title: "Employee Accounts",
-                    content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: ["Create employee accounts via ", _jsx(Span, { weight: "bold", children: "Admin \u2192 Team" }), ", not by manually writing to Firestore."] }), _jsxs("li", { children: [_jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "role: \"employee\"" }), " has no elevated Firestore rules by default \u2014 access is governed entirely by the permission group assigned to them."] }), _jsxs("li", { children: [_jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "role: \"admin\"" }), " bypasses all RBAC \u2014 use sparingly. One admin account per real person maximum."] })] })),
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: ["Create employee accounts via ", _jsx(Span, { weight: "bold", children: "Admin \u2192 Team" }), ", not by manually writing to Firestore."] }), _jsxs(Li, { children: [_jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "role: \"employee\"" }), " has no elevated Firestore rules by default \u2014 access is governed entirely by the permission group assigned to them."] }), _jsxs(Li, { children: [_jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "role: \"admin\"" }), " bypasses all RBAC \u2014 use sparingly. One admin account per real person maximum."] })] })),
                 },
                 {
                     Icon: AlertTriangle, title: "PII Handling Notice",
                     content: (_jsx(Alert, { variant: "warning", children: "Email and phone are encrypted at rest and indexed via HMAC blind index. Never export raw user data outside of the admin panel. Any CSV export (future) de-identifies PII before download. If you encounter plaintext email or phone data in Firestore directly \u2014 report it to the engineering team immediately." })),
                 },
-            ].map(({ Icon, title, content }) => (_jsxs(Section, { className: "rounded-2xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden", children: [_jsxs(Div, { className: "flex items-center gap-3 px-6 py-4 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-2,var(--appkit-color-border))]/20", children: [_jsx(Icon, { className: "w-5 h-5 text-[var(--appkit-color-primary)]" }), _jsx(Heading, { level: 2, className: "text-base font-semibold text-[var(--appkit-color-text)]", children: title })] }), _jsx(Div, { className: "px-6 py-5", children: content })] }, title)))] }));
+            ].map(({ Icon, title, content }) => (_jsxs(Section, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden", rounded: "2xl", children: [_jsxs(Row, { className: "border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-2,var(--appkit-color-border))]/20", padding: "inlineLg", align: "center", gap: "3", children: [_jsx(Icon, { className: "w-5 h-5 text-[var(--appkit-color-primary)]" }), _jsx(Heading, { level: 2, size: "base", weight: "semibold", children: title })] }), _jsx(Div, { paddingY: "y-md-lg", padding: "x-lg", children: content })] }, title)))] }));
 }

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { Button, FilterChipGroup, Form, FormActions, Input, ListingLayout, Modal, RowActionMenu, Text as AppText, useToast, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
@@ -20,7 +21,7 @@ export function AdminUsersView({ children, ...props }) {
     const [banModalOpen, setBanModalOpen] = useState(false);
     const [banTargetId, setBanTargetId] = useState(null);
     const [banReason, setBanReason] = useState("");
-    const banUser = useMutation({
+    const banUser = useApiMutation({
         mutationFn: () => {
             if (!banTargetId)
                 throw new Error("No user selected");
@@ -37,7 +38,7 @@ export function AdminUsersView({ children, ...props }) {
             toast.showToast("Failed to ban user.", "error");
         },
     });
-    const unbanUser = useMutation({
+    const unbanUser = useApiMutation({
         mutationFn: (uid) => apiClient.post(ADMIN_ENDPOINTS.USER_UNBAN(uid), {}),
         onSuccess: () => {
             toast.showToast("Ban lifted.", "success");

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

@@ -8,19 +8,19 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const FLAG_BADGES = [
-    { key: "featured", label: "Featured", color: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300" },
+    { key: "featured", label: "Featured", color: "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning" },
     { key: "isPromoted", label: "Promoted", color: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300" },
     { key: "isOnSale", label: "Sale", color: "bg-success-surface text-success" },
     { key: "isSold", label: "Sold", color: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400" },
 ];
 function StatusBadge({ status }) {
-    return (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex rounded-full bg-primary-50 px-2 py-0.5 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300 truncate max-w-[120px]", children: status }));
+    return (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex bg-primary-50 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300 truncate max-w-[120px]", rounded: "full", padding: "pill-xs", children: status }));
 }
 function SkeletonCard({ view }) {
     if (view === "list") {
-        return (_jsxs(Row, { gap: "sm", className: "px-4 py-3 animate-pulse", children: [_jsx(Div, { className: "h-4 w-4 rounded bg-zinc-200 dark:bg-slate-700 shrink-0" }), _jsxs(Stack, { gap: "xs", className: "flex-1", children: [_jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _jsx(Div, { className: "h-2.5 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] }), _jsx(Div, { className: "h-5 w-16 bg-zinc-200 dark:bg-slate-700 rounded-full shrink-0" }), _jsx(Div, { className: "h-3 w-20 bg-zinc-200 dark:bg-slate-700 rounded shrink-0" })] }));
+        return (_jsxs(Row, { gap: "sm", className: "animate-pulse", padding: "inline", children: [_jsx(Div, { className: "h-4 w-4 shrink-0", surface: "subtle", rounded: "default" }), _jsxs(Stack, { gap: "xs", className: "flex-1", children: [_jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-2.5 w-1/3", surface: "subtle", rounded: "default" })] }), _jsx(Div, { className: "h-5 w-16 shrink-0", surface: "subtle", rounded: "full" }), _jsx(Div, { className: "h-3 w-20 shrink-0", surface: "subtle", rounded: "default" })] }));
     }
-    return (_jsx(Div, { rounded: "xl", border: "subtle", className: `${__O.hidden} animate-pulse`, children: _jsxs(Stack, { gap: "xs", padding: "md", children: [_jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx(Div, { className: "h-5 bg-zinc-200 dark:bg-slate-700 rounded-full w-20 mt-1" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] }) }));
+    return (_jsx(Div, { rounded: "xl", border: "subtle", className: `${__O.hidden} animate-pulse`, children: _jsxs(Stack, { gap: "xs", padding: "md", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-5 w-20 mt-1", surface: "subtle", rounded: "full" }), _jsx(Div, { className: "h-3 w-1/3", surface: "subtle", rounded: "default" })] }) }));
 }
 function AdminCardItem({ row, view, selected, onToggleSelect, onRowClick, }) {
     const flags = FLAG_BADGES.filter(({ key }) => Boolean(row[key]));
@@ -33,14 +33,14 @@ function AdminCardItem({ row, view, selected, onToggleSelect, onRowClick, }) {
         return (_jsxs(Row, { gap: "sm", className: [
                 "px-4 py-3 cursor-pointer transition-colors hover:bg-zinc-50 dark:hover:bg-slate-800/50",
                 selected ? "bg-primary-50/40 dark:bg-primary-900/10" : "",
-            ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsx(Div, { "data-checkbox": true, className: "shrink-0", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: _jsx("input", { type: "checkbox", checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }) })), _jsxs(Stack, { gap: "none", className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "truncate text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary })] }), flags.length > 0 && (_jsx(Row, { gap: "xs", className: "hidden sm:flex shrink-0", children: flags.map(({ key, label, color }) => (_jsx(Span, { weight: "medium", className: `inline-flex rounded-full px-1.5 py-0.5 text-[10px] ${color}`, children: label }, key))) })), _jsx(StatusBadge, { status: row.status }), _jsx(Span, { size: "xs", color: "muted", className: "hidden sm:block shrink-0 w-24 text-right", children: row.updatedAt })] }));
+            ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsx(Div, { "data-checkbox": true, className: "shrink-0", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: _jsx("input", { type: "checkbox", checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }) })), _jsxs(Stack, { gap: "none", className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "truncate", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary })] }), flags.length > 0 && (_jsx(Row, { gap: "xs", className: "hidden sm:flex shrink-0", children: flags.map(({ key, label, color }) => (_jsx(Span, { padding: "pill-2xs", weight: "medium", className: `inline-flex text-[10px] ${color}`, rounded: "full", children: label }, key))) })), _jsx(StatusBadge, { status: row.status }), _jsx(Span, { size: "xs", color: "muted", className: "hidden sm:block shrink-0 w-24", align: "end", children: row.updatedAt })] }));
     }
     return (_jsxs(Div, { rounded: "xl", className: [
             "border overflow-hidden cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5",
             selected
                 ? "border-primary ring-1 ring-primary/20 bg-primary-50/30 dark:bg-primary-900/10"
                 : "border-zinc-100 dark:border-slate-700 bg-white dark:bg-slate-900",
-        ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsxs(Row, { gap: "xs", "data-checkbox": true, className: "px-3 pt-3", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }), flags.length > 0 && (_jsx(Row, { gap: "xs", wrap: true, children: flags.map(({ key, label, color }) => (_jsx(Span, { weight: "medium", className: `inline-flex rounded-full px-1.5 py-0.5 text-[10px] ${color}`, children: label }, key))) }))] })), _jsxs(Stack, { gap: "xs", className: `${__P.p3}.5`, children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "line-clamp-2 leading-snug text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary })] }), _jsxs(Row, { justify: "between", gap: "xs", children: [_jsx(StatusBadge, { status: row.status }), _jsx(Span, { color: "muted", className: "text-[11px] shrink-0", children: row.updatedAt })] })] })] }));
+        ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsxs(Row, { gap: "xs", "data-checkbox": true, paddingY: "t-sm", padding: "x-sm", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }), flags.length > 0 && (_jsx(Row, { gap: "xs", wrap: true, children: flags.map(({ key, label, color }) => (_jsx(Span, { padding: "pill-2xs", weight: "medium", className: `inline-flex text-[10px] ${color}`, rounded: "full", children: label }, key))) }))] })), _jsxs(Stack, { gap: "xs", className: `${__P.p3}.5`, children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "line-clamp-2 leading-snug", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary })] }), _jsxs(Row, { justify: "between", gap: "xs", children: [_jsx(StatusBadge, { status: row.status }), _jsx(Span, { color: "muted", className: "text-[11px] shrink-0", children: row.updatedAt })] })] })] }));
 }
 export function AdminViewCards({ rows, view, isLoading, emptyLabel = "No items found", onRowClick, selectedIdSet, onToggleSelect, }) {
     if (isLoading) {
@@ -51,7 +51,7 @@ export function AdminViewCards({ rows, view, isLoading, emptyLabel = "No items f
         return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: count }).map((_, i) => _jsx(SkeletonCard, { view: "grid" }, i)) }));
     }
     if (rows.length === 0) {
-        return (_jsx(Text, { size: "sm", color: "muted", className: "py-12 text-center", children: emptyLabel }));
+        return (_jsx(Text, { paddingY: "3xl", size: "sm", color: "muted", align: "center", children: emptyLabel }));
     }
     if (view === "list") {
         return (_jsx(Div, { rounded: "xl", border: "subtle", className: `${__O.hidden} divide-y divide-zinc-100 dark:divide-slate-700`, children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "list", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick }, row.id))) }));

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row } from "@mohasinac/appkit/ui";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
-import { useMutation } from "@tanstack/react-query";
-import { Button, Div, Form, Input, Toggle, useToast } from "../../../ui";
+import { Button, Form, Input, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 function toBrandSlug(str) {
@@ -14,7 +15,7 @@ export function BrandQuickCreateForm({ onSaved, onCancel }) {
     const [description, setDescription] = React.useState("");
     const [isActive, setIsActive] = React.useState(true);
     const { showToast } = useToast();
-    const mutation = useMutation({
+    const mutation = useApiMutation({
         mutationFn: async () => apiClient.post(ADMIN_ENDPOINTS.BRANDS, {
             name,
             slug: toBrandSlug(name),
@@ -32,5 +33,5 @@ export function BrandQuickCreateForm({ onSaved, onCancel }) {
     return (_jsxs(Form, { onSubmit: (e) => {
             e.preventDefault();
             mutation.mutate();
-        }, className: "space-y-4", children: [_jsx(Input, { label: "Brand name", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Hot Wheels", autoFocus: true }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional brief description" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Div, { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: mutation.isPending, disabled: !name || mutation.isPending, children: "Create brand" }), _jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: "Cancel" })] })] }));
+        }, spacing: "md", children: [_jsx(Input, { label: "Brand name", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Hot Wheels", autoFocus: true }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional brief description" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: mutation.isPending, disabled: !name || mutation.isPending, children: "Create brand" }), _jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: "Cancel" })] })] }));
 }

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row } from "@mohasinac/appkit/ui";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
-import { useMutation } from "@tanstack/react-query";
-import { Button, Div, Form, Input, Toggle, useToast } from "../../../ui";
+import { Button, Form, Input, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 function toCategorySlug(str) {
@@ -13,7 +14,7 @@ export function CategoryQuickCreateForm({ onSaved, onCancel }) {
     const [description, setDescription] = React.useState("");
     const [isActive, setIsActive] = React.useState(true);
     const { showToast } = useToast();
-    const mutation = useMutation({
+    const mutation = useApiMutation({
         mutationFn: async () => apiClient.post(ADMIN_ENDPOINTS.CATEGORIES, {
             name,
             slug: toCategorySlug(name),
@@ -31,5 +32,5 @@ export function CategoryQuickCreateForm({ onSaved, onCancel }) {
     return (_jsxs(Form, { onSubmit: (e) => {
             e.preventDefault();
             mutation.mutate();
-        }, className: "space-y-4", children: [_jsx(Input, { label: "Category name", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Trading Cards", autoFocus: true }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional brief description" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Div, { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: mutation.isPending, disabled: !name || mutation.isPending, children: "Create category" }), _jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: "Cancel" })] })] }));
+        }, spacing: "md", children: [_jsx(Input, { label: "Category name", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Trading Cards", autoFocus: true }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional brief description" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: mutation.isPending, disabled: !name || mutation.isPending, children: "Create category" }), _jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: "Cancel" })] })] }));
 }

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrendingUp, ShoppingBag, Users, Package, Clock, Star } from "lucide-react";
-import { Div, Grid, Text } from "../../../ui";
+import { Div, Grid, Row, Stack, Text } from "../../../ui";
 import { formatCurrency } from "../../../utils/number.formatter";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
 const __P = {
@@ -11,18 +11,20 @@ const __O = {
     hidden: "overflow-hidden",
 };
 // Brand gradient stop colors (mirrors SiteLogo wordmark gradient)
-const BRAND_FROM = "var(--appkit-color-primary-700, #1343de)";
-const BRAND_MID = "var(--appkit-color-cobalt, #3570fc)";
-const BRAND_TO = "var(--appkit-color-secondary-400, #84e122)";
+const BRAND_FROM = "var(--appkit-color-primary-700)";
+const BRAND_MID = "var(--appkit-color-cobalt)";
+const BRAND_TO = "var(--appkit-color-secondary-400)";
 function StatCard({ label, value, sub, icon: Icon, gradient, iconColor }) {
-    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden} shadow-sm hover:shadow-md transition-shadow`, children: [_jsx(Div, { className: "absolute top-0 left-0 right-0 h-[3px]", 
+    return (
+    // audit-variant-ok: stat card — static shadow-sm + hover-shadow-md transition combo; Div.shadow accepts only one value
+    _jsxs(Div, { className: `relative border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden} hover:shadow-md transition-shadow`, rounded: "xl", shadow: "sm", children: [_jsx(Div, { className: "absolute top-0 left-0 right-0 h-[3px]", 
                 // audit-inline-style-ok: runtime theme gradient
-                style: { background: gradient }, "aria-hidden": "true" }), _jsxs(Div, { className: "px-5 pb-5 pt-6 flex items-start justify-between gap-3", children: [_jsxs(Div, { className: `min-w-0 flex-1 ${__O.hidden}`, children: [_jsx(Text, { className: "text-[11px] font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)] truncate", children: label }), _jsx(Text, { className: "mt-2 text-xl font-bold text-[var(--appkit-color-text)] tabular-nums leading-tight break-words", children: value }), sub && (_jsx(Text, { className: "mt-1.5 text-xs text-[var(--appkit-color-text-muted)]", children: sub }))] }), _jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center", 
+                style: { background: gradient }, "aria-hidden": "true" }), _jsxs(Row, { paddingX: "x-5", paddingY: "b-md-lg", padding: "t-lg", align: "start", justify: "between", gap: "3", children: [_jsxs(Div, { className: `min-w-0 flex-1 ${__O.hidden}`, children: [_jsx(Text, { className: "text-[11px] tracking-widest text-[var(--appkit-color-text-muted)] truncate", weight: "semibold", transform: "uppercase", children: label }), _jsx(Text, { className: "mt-2 text-[var(--appkit-color-text)] tabular-nums leading-tight break-words", size: "xl", weight: "bold", children: value }), sub && (_jsx(Text, { className: "mt-1.5 text-[var(--appkit-color-text-muted)]", size: "xs", children: sub }))] }), _jsx(Row, { className: "flex-shrink-0 w-10 h-10", align: "center", justify: "center", rounded: "lg", 
                         // audit-inline-style-ok: runtime theme gradient
                         style: { background: gradient, opacity: 0.92 }, children: _jsx(Icon, { className: "w-5 h-5 text-white drop-shadow-sm" }) })] })] }));
 }
 function SkeletonCard() {
-    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden} ${__P.p5} animate-pulse`, children: [_jsx(Div, { className: "absolute top-0 left-0 right-0 h-[3px] bg-[var(--appkit-color-border)]" }), _jsxs(Div, { className: "flex items-start justify-between gap-3 pt-1", children: [_jsxs(Div, { className: "flex-1 space-y-2", children: [_jsx(Div, { className: "h-2.5 w-20 rounded bg-[var(--appkit-color-border)]" }), _jsx(Div, { className: "h-7 w-24 rounded bg-[var(--appkit-color-border)]" })] }), _jsx(Div, { className: "w-10 h-10 rounded-lg bg-[var(--appkit-color-border)]" })] })] }));
+    return (_jsxs(Div, { className: `relative border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden} ${__P.p5} animate-pulse`, rounded: "xl", children: [_jsx(Div, { className: "absolute top-0 left-0 right-0 h-[3px] bg-[var(--appkit-color-border)]" }), _jsxs(Row, { align: "start", justify: "between", gap: "3", padding: "t-2xs", children: [_jsxs(Stack, { className: "flex-1", gap: "sm", children: [_jsx(Div, { className: "h-2.5 w-20 bg-[var(--appkit-color-border)]", rounded: "default" }), _jsx(Div, { className: "h-7 w-24 bg-[var(--appkit-color-border)]", rounded: "default" })] }), _jsx(Div, { className: "w-10 h-10 bg-[var(--appkit-color-border)]", rounded: "lg" })] })] }));
 }
 export function DashboardStatsGrid({ stats, isLoading, labels = {}, }) {
     if (isLoading) {

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Plus } from "lucide-react";
-import { BulkActionBar, Button, Div, ListingFilterDrawer, ListingToolbar, Pagination, SideDrawer, } from "../../../ui";
+import { BulkActionBar, Button, Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, SideDrawer } from "../../../ui";
 import { useBottomActions } from "../../layout";
 import { useAdminListing } from "../hooks/useAdminListing";
 import { AdminViewCards } from "./AdminViewCards";
@@ -42,9 +42,9 @@ export function DataListingView({ config, }) {
             ? `Add ${config.title.replace(/s$/, "")}`
             : `Edit ${config.title.replace(/s$/, "")}`;
     const isEditorOpen = panel.isCreateOpen || panel.isEditOpen;
-    return (_jsxs(Div, { className: config.className ?? "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: config.searchPlaceholder, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || config.defaultSort, sortOptions: config.sortOptions, onSortChange: (v) => table.set("sort", v), showTableView: !config.hideTableView, toggles: config.toggles, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: config.primaryAction || config.toolbarExtra ? (_jsxs(Div, { className: "flex items-center gap-2", children: [config.toolbarExtra, config.primaryAction && (_jsxs(Button, { size: "sm", onClick: () => config.primaryAction.onClick({
+    return (_jsxs(Div, { className: config.className ?? "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: config.searchPlaceholder, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || config.defaultSort, sortOptions: config.sortOptions, onSortChange: (v) => table.set("sort", v), showTableView: !config.hideTableView, toggles: config.toggles, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: config.primaryAction || config.toolbarExtra ? (_jsxs(Row, { align: "center", gap: "sm", children: [config.toolbarExtra, config.primaryAction && (_jsxs(Button, { gap: "sm", size: "sm", onClick: () => config.primaryAction.onClick({
                                 openCreatePanel: panel.openCreatePanel,
-                            }), className: "flex items-center gap-1.5", children: [config.primaryAction.icon ?? _jsx(Plus, { className: "h-4 w-4" }), config.primaryAction.label] }))] })) : undefined }), config.renderAboveContent?.(), bulkActionItems && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActionItems })), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs(Div, { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), view === "table" ? (_jsx(DataTable, { columns: config.columns, rows: rows, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next
+                            }), children: [config.primaryAction.icon ?? _jsx(Plus, { className: "h-4 w-4" }), config.primaryAction.label] }))] })) : undefined }), config.renderAboveContent?.(), bulkActionItems && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActionItems })), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), view === "table" ? (_jsx(DataTable, { columns: config.columns, rows: rows, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next
                             ? selection.setSelectedIds(rows.map((r) => r.id))
                             : selection.clearSelection(), getRowHref: config.getRowHref, onRowClick: config.onRowClick
                             ? (row) => config.onRowClick(row, {
@@ -52,7 +52,11 @@ export function DataListingView({ config, }) {
                             })
                             : config.renderEditor
                                 ? (row) => panel.openEditPanel(row.id)
-                                : undefined, renderRowActions: config.renderRowActions })) : config.renderCards ? (config.renderCards(rows, view, selectionContext, isLoading)) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, onRowClick: (row) => panel.openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), config.renderFilterPanel && (_jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: config.renderFilterPanel({
+                                : undefined, renderRowActions: config.renderRowActions })) : config.renderCards ? (config.renderCards(rows, view, selectionContext, isLoading)) : (_jsx(AdminViewCards
+                    // audit-unknown-ok: TS structural escape — extracted function type
+                    , { 
+                        // audit-unknown-ok: TS structural escape — extracted function type
+                        rows: rows, view: view, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, onRowClick: (row) => panel.openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), config.renderFilterPanel && (_jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: config.renderFilterPanel({
                     pendingFilters,
                     setPendingFilters,
                     applyFilters,

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BaseListingCard, Button, Div, Span, Table, Thead, Tbody, Tr, Th, Td, Text } from "../../../ui";
+import { BaseListingCard, Button, Div, Row, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Tr } from "../../../ui";
 import { useLongPress } from "../../../react/hooks/useLongPress";
 const __O = {
     hidden: "overflow-hidden",
@@ -10,19 +10,19 @@ const DEFAULT_COLUMNS = [
     {
         key: "primary",
         header: "Name",
-        render: (row) => (_jsxs(Div, { className: "space-y-0.5", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: String(row.primary ?? "") }), row.secondary ? _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: String(row.secondary) }) : null] })),
+        render: (row) => (_jsxs(Stack, { gap: "none", className: "", children: [_jsx(Text, { weight: "medium", color: "primary", children: String(row.primary ?? "") }), row.secondary ? _jsx(Text, { size: "xs", color: "muted", children: String(row.secondary) }) : null] })),
     },
     {
         key: "status",
         header: "Status",
         className: "w-32",
-        render: (row) => (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex rounded-full bg-primary-50 px-2.5 py-1 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", children: String(row.status ?? "—") })),
+        render: (row) => (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex bg-primary-50 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", rounded: "full", padding: "pill-sm-tall", children: String(row.status ?? "—") })),
     },
     {
         key: "updatedAt",
         header: "Updated",
         className: "w-32",
-        render: (row) => _jsx(Span, { size: "sm", className: "text-zinc-500 dark:text-zinc-400", children: String(row.updatedAt ?? "") }),
+        render: (row) => _jsx(Span, { size: "sm", color: "muted", children: String(row.updatedAt ?? "") }),
     },
 ];
 function SelectableRow({ row, columns, isSelected, onToggle, renderRowActions, onRowClick, rowHref, selectionEnabled, }) {
@@ -39,13 +39,15 @@ function SelectableRow({ row, columns, isSelected, onToggle, renderRowActions, o
         }
         : undefined;
     const isInteractive = Boolean(onRowClick ?? rowHref);
-    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
+    return (
+    // audit-variant-ok: data-table row — hover + conditional selected-row tint; Tr lacks hover-state / selected-state variants
+    _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: `hover:bg-neutral-50 dark:hover:bg-slate-800 ${isInteractive ? "cursor-pointer" : ""} ${isSelected ? "bg-primary/5 dark:bg-primary/10" : ""}`, border: "default", children: [selectionEnabled && (_jsx(Td, { padding: "xs-3", className: "relative w-10", 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, { color: "muted", className: col.className ?? "", padding: "md", 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) }))] }));
+                    : String(row[col.key] ?? "") }, col.key))), renderRowActions && (_jsx(Td, { padding: "xs-3", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] }));
 }
 export function DataTable({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No records found", getRowHref, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }) {
     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, { surface: "card", className: `${__O.hidden}`, children: [_jsx(Div, { className: `${__O.xAuto}`, 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))) }))] }));
+    return (_jsxs(Div, { surface: "card", className: `${__O.hidden}`, children: [_jsx(Div, { className: `${__O.xAuto}`, children: _jsxs(Table, { "data-testid": "data-table", size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "bg-neutral-50 dark:bg-slate-800", border: "default", children: [selectionEnabled && (_jsx(Th, { padding: "xs-3", scope: "col", className: "w-10", 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: `text-left text-neutral-900 dark:text-zinc-100 ${col.sortable && onSort ? "cursor-pointer select-none hover:text-primary" : ""} ${col.className ?? ""}`, padding: "md", weight: "semibold", children: [col.header, col.sortable && sortKey === col.key && (_jsx(Span, { className: "ml-1", children: sortDir === "asc" ? "↑" : "↓" }))] }, col.key))), renderRowActions && _jsx(Th, { padding: "xs-3", scope: "col", className: "w-12" })] }) }), _jsx(Tbody, { children: isLoading ? (Array.from({ length: 5 }).map((_, i) => (_jsxs(Tr, { border: "default", children: [selectionEnabled && _jsx(Td, { padding: "xs-3", className: "w-10" }), columns.map((col) => (_jsx(Td, { padding: "md", children: _jsx(Div, { className: "h-4 w-full animate-pulse bg-neutral-200", rounded: "default" }) }, col.key)))] }, i)))) : rows.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: columns.length + (selectionEnabled ? 1 : 0) + (renderRowActions ? 1 : 0), align: "center", color: "faint", paddingX: "md", paddingY: "md", 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(Row, { className: "border-t border-neutral-200", padding: "inline", align: "center", justify: "end", gap: "sm", 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:bg-neutral-800 dark:hover:bg-slate-800"}`, children: p }, p))) }))] }));
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Div } from "@mohasinac/appkit/ui";
+import { Button, Row } from "@mohasinac/appkit/ui";
 import { FORM_ACTION_META, FORM_ACTION_ID } from "../../products/constants/action-defs";
 const DEFAULT_LABELS = {
     submit: FORM_ACTION_META[FORM_ACTION_ID.SUBMIT].label,
@@ -9,5 +9,5 @@ const DEFAULT_LABELS = {
 };
 export function DrawerFormFooter({ onCancel, onSubmit, onDelete, isLoading = false, isSubmitDisabled = false, className = "", labels, variant = "footer", themeConfig = { borderClass: "border-t border-zinc-200 dark:border-zinc-700" }, }) {
     const l = { ...DEFAULT_LABELS, ...labels };
-    return (_jsxs("div", { className: `flex items-center gap-3${variant === "inline" ? ` pt-4 ${themeConfig.borderClass}` : ""} ${className}`, children: [onDelete && (_jsx(Button, { variant: FORM_ACTION_META[FORM_ACTION_ID.DELETE].variant, onClick: onDelete, disabled: isLoading, size: "md", children: l.delete })), _jsxs(Div, { className: `flex items-center gap-3${!onDelete ? " ml-auto" : ""}`, children: [_jsx(Button, { variant: FORM_ACTION_META[FORM_ACTION_ID.CANCEL].variant, onClick: onCancel, disabled: isLoading, size: "md", children: l.cancel }), _jsx(Button, { variant: FORM_ACTION_META[FORM_ACTION_ID.SUBMIT].variant, onClick: onSubmit, disabled: isLoading || isSubmitDisabled, size: "md", children: isLoading ? l.saving : l.submit })] })] }));
+    return (_jsxs("div", { className: `flex items-center gap-3${variant === "inline" ? ` pt-4 ${themeConfig.borderClass}` : ""} ${className}`, children: [onDelete && (_jsx(Button, { variant: FORM_ACTION_META[FORM_ACTION_ID.DELETE].variant, onClick: onDelete, disabled: isLoading, size: "md", children: l.delete })), _jsxs(Row, { className: `${!onDelete ? " ml-auto" : ""}`, align: "center", gap: "3", children: [_jsx(Button, { variant: FORM_ACTION_META[FORM_ACTION_ID.CANCEL].variant, onClick: onCancel, disabled: isLoading, size: "md", children: l.cancel }), _jsx(Button, { variant: FORM_ACTION_META[FORM_ACTION_ID.SUBMIT].variant, onClick: onSubmit, disabled: isLoading || isSubmitDisabled, size: "md", children: isLoading ? l.saving : l.submit })] })] }));
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading } from "../../../ui";
 export function QuickActionsPanel({ title, actions, renderAction, className = "", }) {
-    return (_jsxs(Div, { className: className, children: [title && (_jsx(Heading, { level: 3, className: "mb-4", children: title })), _jsx(Div, { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: actions.map((action) => (_jsx(Div, { children: renderAction ? (renderAction(action)) : action.onClick ? (_jsxs("button", { type: "button", onClick: action.onClick, className: "w-full inline-flex items-center justify-start gap-2 rounded-lg border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-zinc-900 dark:text-zinc-100 px-3 py-2 text-sm", children: [action.icon, action.label] })) : (_jsxs("a", { href: action.href ?? "#", className: "w-full inline-flex items-center justify-start gap-2 rounded-lg border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-zinc-900 dark:text-zinc-100 px-3 py-2 text-sm", children: [action.icon, action.label] })) }, action.id))) })] }));
+    return (_jsxs(Div, { className: className, children: [title && (_jsx(Heading, { level: 3, className: "mb-4", children: title })), _jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-1 md:grid-cols-3", children: actions.map((action) => (_jsx(Div, { children: renderAction ? (renderAction(action)) : action.onClick ? (_jsxs("button", { type: "button", onClick: action.onClick, className: "w-full inline-flex items-center justify-start gap-2 rounded-lg border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-zinc-900 dark:text-zinc-100 px-3 py-2 text-sm", children: [action.icon, action.label] })) : (_jsxs("a", { href: action.href ?? "#", className: "w-full inline-flex items-center justify-start gap-2 rounded-lg border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-zinc-900 dark:text-zinc-100 px-3 py-2 text-sm", children: [action.icon, action.label] })) }, action.id))) })] }));
 }

package/dist/features/admin/components/QuickEditMenu.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
+import type { ZodType } from "zod";
+import type { FormValues } from "../../../schemas/types";
 import type { QuickFieldDef } from "../../shell/QuickFormDrawer";
 export interface QuickEditAction {
     label: string;
@@ -8,8 +10,10 @@ export interface QuickEditAction {
     disabled?: boolean;
     formTitle?: string;
     fields?: QuickFieldDef[];
-    defaultValues?: Record<string, unknown>;
-    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+    /** Zod schema covering every field — required by audit-quick-form-drawer-schema. */
+    schema?: ZodType<FormValues> | ZodType<unknown>;
+    defaultValues?: FormValues;
+    onSubmit?: (values: FormValues) => void | Promise<void>;
     submitLabel?: string;
     onClick?: () => void;
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useState } from "react";
 import { MoreHorizontal } from "lucide-react";
 import { Button } from "../../../ui/components/Button";
-import { Div } from "../../../ui";
+import { Div, Span } from "../../../ui";
 import { useClickOutside, useKeyPress } from "../../../react";
 import { QuickFormDrawer } from "../../shell/QuickFormDrawer";
 export function QuickEditMenu({ actions, align = "right" }) {
@@ -25,7 +25,7 @@ export function QuickEditMenu({ actions, align = "right" }) {
         }
     };
     const activeAction = activeFormIndex !== null ? actions[activeFormIndex] : null;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: menuRef, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": menuOpen, onClick: () => setMenuOpen((v) => !v), className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), menuOpen && (_jsx("div", { role: "menu", className: `appkit-row-action-menu__dropdown ${align === "right" ? "appkit-row-action-menu__dropdown--right" : "appkit-row-action-menu__dropdown--left"}`, children: actions.map((action, idx) => (_jsxs(Div, { children: [action.separator && idx > 0 && (_jsx(Div, { className: "appkit-row-action-menu__separator" })), _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", disabled: action.disabled, onClick: () => handleActionClick(idx), className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""} ${action.disabled ? "opacity-40 cursor-not-allowed" : ""}`, children: [action.icon && (_jsx("span", { className: "appkit-row-action-menu__icon", children: action.icon })), action.label] })] }, `${action.label}-${idx}`))) }))] }), activeAction?.fields && (_jsx(QuickFormDrawer, { isOpen: activeFormIndex !== null, onClose: () => setActiveFormIndex(null), title: activeAction.formTitle ?? activeAction.label, fields: activeAction.fields, defaultValues: activeAction.defaultValues, onSubmit: async (vals) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: menuRef, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": menuOpen, onClick: () => setMenuOpen((v) => !v), className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), menuOpen && (_jsx("div", { role: "menu", className: `appkit-row-action-menu__dropdown ${align === "right" ? "appkit-row-action-menu__dropdown--right" : "appkit-row-action-menu__dropdown--left"}`, children: actions.map((action, idx) => (_jsxs(Div, { children: [action.separator && idx > 0 && (_jsx(Div, { className: "appkit-row-action-menu__separator" })), _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", disabled: action.disabled, onClick: () => handleActionClick(idx), className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""} ${action.disabled ? "opacity-40 cursor-not-allowed" : ""}`, children: [action.icon && (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })), action.label] })] }, `${action.label}-${idx}`))) }))] }), activeAction?.fields && (_jsx(QuickFormDrawer, { isOpen: activeFormIndex !== null, onClose: () => setActiveFormIndex(null), title: activeAction.formTitle ?? activeAction.label, fields: activeAction.fields, schema: activeAction.schema, defaultValues: activeAction.defaultValues, onSubmit: async (vals) => {
                     await activeAction.onSubmit?.(vals);
                     setActiveFormIndex(null);
                 }, submitLabel: activeAction.submitLabel ?? "Save" }))] }));

package/dist/features/admin/components/analytics/AdminAnalyticsCharts.js

@@ -19,11 +19,11 @@ const CartesianGrid = dynamic(() => import("recharts").then((m) => m.CartesianGr
 const Tooltip = dynamic(() => import("recharts").then((m) => m.Tooltip), { ssr: false });
 // Shared chart card wrapper
 function ChartCard({ title, children, className = "", }) {
-    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden shadow-sm ${className}`, children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", 
+    return (_jsxs(Div, { className: `relative border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden ${className}`, rounded: "xl", shadow: "sm", children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", 
                 // audit-inline-style-ok: dynamic CSS
                 style: {
-                    background: "linear-gradient(to right, var(--appkit-color-primary-700,#1343de) 0%, var(--appkit-color-cobalt,#3570fc) 55%, var(--appkit-color-secondary-400,#84e122) 100%)",
-                }, "aria-hidden": "true" }), _jsxs(Div, { className: `${__P.p4} sm:${__P.p6} pt-5 sm:pt-7`, children: [title && (_jsx(Heading, { level: 3, className: "text-sm font-semibold text-[var(--appkit-color-text)] mb-4", children: title })), children] })] }));
+                    background: "linear-gradient(to right, var(--appkit-color-primary-700) 0%, var(--appkit-color-cobalt) 55%, var(--appkit-color-secondary-400) 100%)",
+                }, "aria-hidden": "true" }), _jsxs(Div, { className: `${__P.p4} sm:${__P.p6} sm:pt-7`, padding: "t-md", children: [title && (_jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] mb-4", size: "sm", weight: "semibold", children: title })), children] })] }));
 }
 export function AdminRevenueChart({ data, labels = {}, className = "", }) {
     return (_jsx(ChartCard, { title: labels.title, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: 280, children: _jsxs(AreaChart, { data: data, margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "revenueGrad", x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: "#1343de" }), _jsx("stop", { offset: "55%", stopColor: "#3570fc" }), _jsx("stop", { offset: "100%", stopColor: "#84e122" })] }), _jsxs("linearGradient", { id: "revenueAreaGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "#3570fc", stopOpacity: 0.25 }), _jsx("stop", { offset: "95%", stopColor: "#3570fc", stopOpacity: 0 })] })] }), _jsx(CartesianGrid, { strokeDasharray: "4 4", stroke: "var(--appkit-color-border)", vertical: false }), _jsx(XAxis, { dataKey: "month", tick: { fontSize: 11, fill: "var(--appkit-color-text-muted)" }, axisLine: false, tickLine: false }), _jsx(YAxis, { tick: { fontSize: 11, fill: "var(--appkit-color-text-muted)" }, axisLine: false, tickLine: false, width: 48 }), _jsx(Tooltip, { contentStyle: {

package/dist/features/admin/components/analytics/AdminStatCard.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Text, Heading } from "../../../../ui";
-const BRAND_FROM = "var(--appkit-color-primary-700, #1343de)";
-const BRAND_MID = "var(--appkit-color-cobalt, #3570fc)";
-const BRAND_TO = "var(--appkit-color-secondary-400, #84e122)";
+import { Div, Heading, Row, Text } from "../../../../ui";
+const BRAND_FROM = "var(--appkit-color-primary-700)";
+const BRAND_MID = "var(--appkit-color-cobalt)";
+const BRAND_TO = "var(--appkit-color-secondary-400)";
 const GRADIENTS = {
     brand: `linear-gradient(135deg, ${BRAND_FROM} 0%, ${BRAND_MID} 55%, ${BRAND_TO} 100%)`,
     blue: `linear-gradient(135deg, ${BRAND_FROM} 0%, ${BRAND_MID} 100%)`,
@@ -12,9 +12,11 @@ const GRADIENTS = {
 };
 export function AdminStatCard({ label, value, sub, icon, gradient = "brand", className = "", }) {
     const resolvedGradient = GRADIENTS[gradient] ?? gradient;
-    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`, children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", 
+    return (
+    // audit-variant-ok: stat card — static shadow-sm + hover-shadow-md transition combo; Div.shadow accepts only one value, so the hover layer needs raw className
+    _jsxs(Div, { className: `relative border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden hover:shadow-md transition-shadow ${className}`, rounded: "xl", shadow: "sm", children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", 
                 // audit-inline-style-ok: dynamic CSS
-                style: { background: resolvedGradient }, "aria-hidden": "true" }), _jsxs(Div, { className: "px-5 pb-5 pt-6 flex items-start justify-between gap-3", children: [_jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "text-[11px] font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]", children: label }), _jsx(Heading, { level: 3, className: "mt-2 text-2xl font-bold tabular-nums leading-none text-[var(--appkit-color-text)]", children: value }), sub && (_jsx(Text, { className: "mt-1.5 text-xs text-[var(--appkit-color-text-muted)]", children: sub }))] }), icon && (_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-xl", 
+                style: { background: resolvedGradient }, "aria-hidden": "true" }), _jsxs(Row, { paddingX: "x-5", paddingY: "b-md-lg", padding: "t-lg", align: "start", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "text-[11px] tracking-widest text-[var(--appkit-color-text-muted)]", weight: "semibold", transform: "uppercase", children: label }), _jsx(Heading, { level: 3, className: "mt-2 tabular-nums leading-none text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: value }), sub && (_jsx(Text, { className: "mt-1.5 text-[var(--appkit-color-text-muted)]", size: "xs", children: sub }))] }), icon && (_jsx(Row, { textSize: "xl", className: "flex-shrink-0 w-10 h-10", align: "center", justify: "center", rounded: "lg", 
                         // audit-inline-style-ok: dynamic CSS
                         style: { background: resolvedGradient }, children: icon }))] })] }));
 }

package/dist/features/admin/components/analytics/AdminTopProductsTable.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Text } from "../../../../ui";
+import { Div, Heading, Row, Text } from "../../../../ui";
 export function AdminTopProductsTable({ products, labels = {}, formatRevenue = (n) => String(n), renderProductLink, className = "", }) {
-    return (_jsxs(Div, { className: `bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 p-4 sm:p-6 ${className}`, children: [labels.title && (_jsx(Heading, { level: 3, className: "text-base font-semibold mb-4", children: labels.title })), _jsx(Div, { children: products.map((product) => (_jsxs(Div, { className: "flex items-center justify-between py-3 border-b last:border-b-0 border-neutral-100 dark:border-neutral-800", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "font-medium truncate", children: product.title }), _jsxs(Text, { className: "text-sm text-neutral-500 dark:text-zinc-400", children: [product.orders, " ", labels.orders ?? "orders"] })] }), _jsxs(Div, { className: "text-right ml-4", children: [_jsx(Text, { className: "font-semibold", children: formatRevenue(product.revenue) }), renderProductLink?.(product)] })] }, product.productId))) })] }));
+    return (
+    // audit-variant-ok: card container — border + sm:p-6 responsive bump (PADDING_MAP lacks responsive sm-up ladder)
+    _jsxs(Div, { className: `border border-neutral-200 dark:border-neutral-800 sm:p-6 ${className}`, rounded: "xl", padding: "md", surface: "default", children: [labels.title && (_jsx(Heading, { level: 3, className: "mb-4", size: "base", weight: "semibold", children: labels.title })), _jsx(Div, { children: products.map((product) => (_jsxs(Row, { className: "border-b last:border-b-0 border-neutral-100 dark:border-neutral-800", padding: "y-sm", align: "center", justify: "between", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate", weight: "medium", children: product.title }), _jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "sm", children: [product.orders, " ", labels.orders ?? "orders"] })] }), _jsxs(Div, { className: "text-right ml-4", children: [_jsx(Text, { weight: "semibold", children: formatRevenue(product.revenue) }), renderProductLink?.(product)] })] }, product.productId))) })] }));
 }