@mohasinac/appkit 2.8.2 → 2.8.3

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from "@mohasinac/appkit/ui";
+import { Button, Div } from "@mohasinac/appkit/ui";
 export function AdminFilterBar({ children, columns = 3, className = "", withCard = true, deferred = false, onApply, onReset, pendingCount = 0, labels = { apply: "Apply", reset: "Reset" }, themeConfig = { cardPadding: "p-4", flexEnd: "flex justify-end" }, }) {
     const gridCols = {
         1: "grid-cols-1",
@@ -7,7 +7,7 @@ export function AdminFilterBar({ children, columns = 3, className = "", withCard
         3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
         4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4",
     };
-    const innerContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: `grid ${gridCols[columns]} gap-4`, "data-section": "adminfilterbar-div-249", children: children }), deferred && (_jsxs("div", { className: `${themeConfig.flexEnd} gap-2 mt-3`, "data-section": "adminfilterbar-div-250", children: [pendingCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, children: labels.reset })), _jsx(Button, { variant: "primary", size: "sm", onClick: onApply, children: pendingCount > 0
+    const innerContent = (_jsxs(_Fragment, { children: [_jsx(Div, { className: `grid ${gridCols[columns]} gap-4`, children: children }), deferred && (_jsxs(Div, { className: `${themeConfig.flexEnd} gap-2 mt-3`, children: [pendingCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, children: labels.reset })), _jsx(Button, { variant: "primary", size: "sm", onClick: onApply, children: pendingCount > 0
                             ? `${labels.applyCount || labels.apply} (${pendingCount})`
                             : labels.apply })] }))] }));
     // If Card component is provided in config, use it; otherwise wrap in plain div
@@ -15,7 +15,7 @@ export function AdminFilterBar({ children, columns = 3, className = "", withCard
         return (_jsx(themeConfig.Card, { className: `${themeConfig.cardPadding} ${className}`, children: innerContent }));
     }
     if (!withCard)
-        return _jsx("div", { className: className, "data-section": "adminfilterbar-div-251", children: innerContent });
+        return _jsx(Div, { className: className, children: innerContent });
     // Fallback: render as plain div if no Card provided but withCard=true
-    return (_jsx("div", { className: `${themeConfig.cardPadding} ${className}`, "data-section": "adminfilterbar-div-252", children: innerContent }));
+    return (_jsx(Div, { className: `${themeConfig.cardPadding} ${className}`, children: innerContent }));
 }

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

@@ -1,43 +1,78 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * AdminGroupedListingsView — admin moderation view for grouped product listings.
  * W1-29 — pairs with the new GET /api/admin/grouped-listings endpoint.
  */
-import React from "react";
+import React, { useState } from "react";
 import { ListingLayout } from "../../../ui";
+import { Button, Row, SideDrawer, Stack, Text, useToast, } from "../../../ui";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
-const ADMIN_GROUPED_LISTINGS_CONFIG = {
-    portal: "admin",
-    title: "Grouped Listings",
-    searchPlaceholder: "Search grouped listings by title or seller",
-    emptyLabel: "No grouped listings",
-    filterKeys: [],
-    defaultSort: "-createdAt",
-    queryKey: ["admin", "grouped-listings"],
-    endpoint: "/api/admin/grouped-listings",
-    sortOptions: [
-        { value: "-createdAt", label: "Newest" },
-        { value: "createdAt", label: "Oldest" },
-        { value: "title", label: "Title A–Z" },
-    ],
-    mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
-        id: toStringValue(item.id, `grouped-listing-${index}`),
-        primary: toStringValue(item.title ?? item.name, "Untitled group"),
-        secondary: [
-            toStringValue(item.storeName ?? item.storeId, "Unknown store"),
-            `${Array.isArray(item.productIds) ? item.productIds.length : 0} items`,
-        ].join(" · "),
-        status: toStringValue(item.isActive === false ? "inactive" : "active", "active"),
-        updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-    })),
-    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    buildFilters: () => "",
-};
+import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+function ReassignProductsDrawer({ state, onClose, onSaved, }) {
+    const [productIds, setProductIds] = useState(state.currentProductIds);
+    const [saving, setSaving] = useState(false);
+    const { showToast } = useToast();
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            await apiClient.patch(ADMIN_ENDPOINTS.GROUPED_LISTING_BY_ID(state.groupId), { productIds });
+            showToast("Products reassigned.", "success");
+            onSaved();
+            onClose();
+        }
+        catch {
+            showToast("Failed to save changes.", "error");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Stack, { gap: "md", padding: "md", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Select products to include in \u201C", state.groupTitle, "\u201D. Changes replace the current list."] }), _jsx(ProductInlineSelect, { scope: "admin", multiple: true, value: productIds, onChange: setProductIds, placeholder: "Search products to add\u2026" }), _jsxs(Row, { justify: "end", gap: "sm", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: saving, children: "Cancel" }), _jsxs(Button, { variant: "primary", onClick: handleSave, disabled: saving, isLoading: saving, children: ["Save (", productIds.length, " product", productIds.length !== 1 ? "s" : "", ")"] })] })] }));
+}
 export function AdminGroupedListingsView({ children, ...props }) {
+    const [reassign, setReassign] = useState(null);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const config = React.useMemo(() => ({
+        portal: "admin",
+        title: "Grouped Listings",
+        searchPlaceholder: "Search grouped listings by title or seller",
+        emptyLabel: "No grouped listings",
+        filterKeys: [],
+        defaultSort: "-createdAt",
+        queryKey: ["admin", "grouped-listings", refreshKey],
+        endpoint: ADMIN_ENDPOINTS.GROUPED_LISTINGS,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+            { value: "title", label: "Title A–Z" },
+        ],
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `grouped-listing-${index}`),
+            primary: toStringValue(item.title ?? item.name, "Untitled group"),
+            secondary: [
+                toStringValue(item.storeName ?? item.storeId, "Unknown store"),
+                `${Array.isArray(item.productIds) ? item.productIds.length : 0} items`,
+            ].join(" · "),
+            status: toStringValue(item.isActive === false ? "inactive" : "active", "active"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            _raw: item,
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        buildFilters: () => "",
+        renderRowActions: (row) => (_jsx(Button, { size: "sm", variant: "outline", onClick: () => setReassign({
+                groupId: row.id,
+                groupTitle: row.primary,
+                currentProductIds: Array.isArray(row._raw?.productIds)
+                    ? (row._raw?.productIds ?? []).map(String)
+                    : [],
+            }), children: "Reassign products" })),
+    }), [refreshKey]);
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    return _jsx(DataListingView, { config: ADMIN_GROUPED_LISTINGS_CONFIG });
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: reassign !== null, onClose: () => setReassign(null), title: reassign ? `Reassign products — ${reassign.groupTitle}` : "Reassign products", children: reassign && (_jsx(ReassignProductsDrawer, { state: reassign, onClose: () => setReassign(null), onSaved: () => setRefreshKey((k) => k + 1) })) })] }));
 }

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

@@ -2,6 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Users, Package, Store, ShoppingBag, FileText, Settings, Shield, BarChart2, AlertTriangle, BookOpen, } from "lucide-react";
 import { Div, Heading, Text, Section, Alert } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
+const CLS_WARN_PANEL = "rounded-2xl border border-amber-200 bg-warning-surface dark:border-amber-800 p-6";
+const CLS_WARN_HEAD = "font-semibold text-amber-800 dark:text-amber-300 mb-1";
+const CLS_WARN_BODY = "text-sm text-amber-700 dark:text-amber-400";
 const GUIDE_CARDS = [
     {
         Icon: Users,
@@ -75,5 +78,5 @@ export function AdminGuideHubView({ permissions = [], isFullAdmin = false }) {
                         background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 60%,var(--appkit-color-secondary-400,#7c3aed) 100%)",
                     }, children: [_jsxs(Div, { className: "flex items-center gap-3 mb-3", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-white/80 uppercase tracking-widest", children: "Admin & Employee Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-white mb-2", children: "LetItRip Internal Guide" }), _jsx(Text, { className: "text-white/80 text-base", children: "Everything you need to operate and manage LetItRip \u2014 India's largest collectibles marketplace." })] }) }), _jsx(Alert, { variant: "info", compact: true, children: "These guides describe expected platform behaviour. Real access to each section is enforced independently by the permission system \u2014 this page is reference only." }), !hasAny && (_jsx(Alert, { variant: "info", title: "Limited access", children: "Your permission set doesn't include read access to any admin sections yet. Contact your admin to request the permissions you need." })), hasAny && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold text-[var(--appkit-color-text)] mb-4", children: "Guides" }), _jsx(Div, { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: visibleCards.map(({ Icon, title, description, href }) => (_jsxs("a", { href: href, className: "group flex flex-col gap-3 rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-5 hover:border-[var(--appkit-color-primary)] hover:shadow-md transition-all", children: [_jsxs(Div, { className: "flex items-center gap-3", children: [_jsx(Div, { className: "flex-shrink-0 w-9 h-9 rounded-lg 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(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", children: title })] }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: description }), _jsx(Text, { className: "text-xs font-medium text-[var(--appkit-color-primary)] mt-auto", children: "Read guide \u2192" })] }, title))) })] })), _jsx(Section, { className: "rounded-2xl border border-amber-200 bg-warning-surface dark:border-amber-800 p-6", children: _jsxs(Div, { className: "flex items-start gap-3", children: [_jsx(AlertTriangle, { className: "w-5 h-5 text-warning flex-shrink-0 mt-0.5" }), _jsxs(Div, { children: [_jsx(Text, { className: "font-semibold text-amber-800 dark:text-amber-300 mb-1", children: "Remember: with great access comes responsibility" }), _jsx(Text, { className: "text-sm text-amber-700 dark:text-amber-400", children: "Admin actions are logged. Never access user PII (email, phone) without a legitimate support reason. Never grant capabilities or permissions without documented approval. When in doubt, escalate to a senior admin." })] })] }) })] }));
+                                            }, children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", children: title })] }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: description }), _jsx(Text, { className: "text-xs font-medium text-[var(--appkit-color-primary)] mt-auto", children: "Read guide \u2192" })] }, title))) })] })), _jsx(Section, { className: CLS_WARN_PANEL, children: _jsxs(Div, { className: "flex items-start gap-3", children: [_jsx(AlertTriangle, { className: "w-5 h-5 text-warning flex-shrink-0 mt-0.5" }), _jsxs(Div, { children: [_jsx(Text, { className: CLS_WARN_HEAD, children: "Remember: with great access comes responsibility" }), _jsx(Text, { className: CLS_WARN_BODY, children: "Admin actions are logged. Never access user PII (email, phone) without a legitimate support reason. Never grant capabilities or permissions without documented approval. When in doubt, escalate to a senior admin." })] })] }) })] }));
 }

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

@@ -4,6 +4,9 @@ import React from "react";
 import { Alert, Button, Div, Input, Select, StackedViewShell, Text, useToast, } from "../../../ui";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { MediaUploadField, MediaUploadList, useMediaCleanup, useMediaUpload, } from "../../media";
+const __P = {
+    p4: "p-4",
+};
 const PREFIX_OPTIONS = [
     { value: "", label: "All" },
     { value: "products/", label: "Products" },
@@ -58,7 +61,7 @@ function MediaBrowser({ onCopy }) {
             return files;
         return files.filter((f) => f.name.toLowerCase().includes(q));
     }, [files, search]);
-    return (_jsxs(Div, { className: "space-y-3 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Browse existing media" }), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", className: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Div, { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6", children: [filtered.map((f) => {
+    return (_jsxs(Div, { className: `space-y-3 rounded-xl border border-zinc-200 bg-white ${__P.p4} dark:border-slate-700 dark:bg-slate-900`, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Browse existing media" }), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", className: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Div, { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6", children: [filtered.map((f) => {
                         const isImage = (f.contentType ?? "").startsWith("image/");
                         return (_jsxs(Div, { className: "group rounded-lg border border-zinc-200 dark:border-slate-700 overflow-hidden bg-zinc-50 dark:bg-slate-800", children: [_jsx(Div, { className: "aspect-square flex items-center justify-center bg-zinc-100 dark:bg-slate-700 text-xs text-zinc-500 dark:text-zinc-400", children: isImage ? (
                                     // eslint-disable-next-line @next/next/no-img-element

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

@@ -2,13 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Button, ConfirmDeleteModal, RowActionMenu, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
+import { Alert, Button, ConfirmDeleteModal, Div, RowActionMenu, Span, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { AdminNavEditorView } from "./AdminNavEditorView";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
+const __O = {
+    hidden: "overflow-hidden",
+};
 function NavItemRow({ item, idx, total, reorderPending, onMoveUp, onMoveDown, onVisibilityChange, onEdit, onDelete, }) {
-    return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 bg-white dark:bg-zinc-900", children: [_jsxs("div", { className: "flex flex-col gap-0.5 shrink-0", children: [_jsx("button", { type: "button", onClick: () => onMoveUp(idx), disabled: idx === 0 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs", "aria-label": "Move up", children: "\u25B2" }), _jsx("button", { type: "button", onClick: () => onMoveDown(idx), disabled: idx >= total - 1 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs", "aria-label": "Move down", children: "\u25BC" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs(Text, { className: "text-sm font-medium text-zinc-800 dark:text-zinc-100 truncate", children: [item.parentId ? _jsx("span", { className: "text-zinc-400 mr-1", children: "\u21B3" }) : null, item.label] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: item.href })] }), _jsx(Toggle, { checked: item.isVisible ?? true, onChange: (val) => onVisibilityChange(item.id, val), label: "" }), _jsx(RowActionMenu, { actions: [
+    return (_jsxs(Div, { surface: "default", className: "flex items-center gap-3 px-4 py-3", children: [_jsxs(Div, { className: "flex flex-col gap-0.5 shrink-0", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: () => onMoveUp(idx), disabled: idx === 0 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs p-0 min-h-0 h-auto rounded-none", "aria-label": "Move up", children: "\u25B2" }), _jsx(Button, { variant: "ghost", type: "button", onClick: () => onMoveDown(idx), disabled: idx >= total - 1 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs p-0 min-h-0 h-auto rounded-none", "aria-label": "Move down", children: "\u25BC" })] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Text, { className: "text-sm font-medium text-zinc-800 dark:text-zinc-100 truncate", children: [item.parentId ? _jsx(Span, { className: "text-zinc-400 mr-1", children: "\u21B3" }) : null, item.label] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: item.href })] }), _jsx(Toggle, { checked: item.isVisible ?? true, onChange: (val) => onVisibilityChange(item.id, val), label: "" }), _jsx(RowActionMenu, { actions: [
                     { label: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label, onClick: () => onEdit(item) },
                     { label: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label, destructive: true, onClick: () => onDelete(item) },
                 ] })] }));
@@ -78,11 +81,11 @@ export function AdminNavigationView({ labels = {}, ...rest }) {
     return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Navigation", sections: [
                     isLoading ? (_jsx(Alert, { variant: "info", title: "Loading", children: "Fetching nav items\u2026" }, "loading")) : null,
                     error ? (_jsx(Alert, { variant: "error", title: "Load failed", children: error instanceof Error ? error.message : "Unknown error" }, "error")) : null,
-                    _jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [sorted.length, " nav item", sorted.length !== 1 ? "s" : ""] }), _jsx(Button, { onClick: () => {
+                    _jsxs(Div, { className: "flex items-center justify-between mb-4", children: [_jsxs(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [sorted.length, " nav item", sorted.length !== 1 ? "s" : ""] }), _jsx(Button, { onClick: () => {
                                     setEditing(null);
                                     setDrawerOpen(true);
                                 }, children: "+ New item" })] }, "header"),
                     sorted.length === 0 && !isLoading ? (_jsx(Text, { className: "text-sm text-zinc-400 dark:text-zinc-400 py-8 text-center", children: "No nav items yet. Click \"New item\" to add one." }, "empty")) : null,
-                    _jsx("div", { className: "divide-y divide-zinc-200 dark:divide-zinc-700 rounded-lg border border-zinc-200 dark:border-zinc-700 overflow-hidden", children: sorted.map((item, idx) => (_jsx(NavItemRow, { item: item, idx: idx, total: sorted.length, reorderPending: reorderMutation.isPending, onMoveUp: handleMoveUp, onMoveDown: handleMoveDown, onVisibilityChange: (id, isVisible) => visibilityMutation.mutate({ id, isVisible }), onEdit: (i) => { setEditing(i); setDrawerOpen(true); }, onDelete: setDeleteTarget }, item.id))) }, "list"),
+                    _jsx(Div, { className: `divide-y divide-zinc-200 dark:divide-zinc-700 rounded-lg border border-zinc-200 dark:border-zinc-700 ${__O.hidden}`, children: sorted.map((item, idx) => (_jsx(NavItemRow, { item: item, idx: idx, total: sorted.length, reorderPending: reorderMutation.isPending, onMoveUp: handleMoveUp, onMoveDown: handleMoveDown, onVisibilityChange: (id, isVisible) => visibilityMutation.mutate({ id, isVisible }), onEdit: (i) => { setEditing(i); setDrawerOpen(true); }, onDelete: setDeleteTarget }, item.id))) }, "list"),
                 ] }), _jsx(AdminNavEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), onSaved: () => queryClient.invalidateQueries({ queryKey: ["admin", "navigation"] }), item: editing, parentOptions: parentOptions }), _jsx(ConfirmDeleteModal, { isOpen: Boolean(deleteTarget), onClose: () => setDeleteTarget(null), onConfirm: () => deleteMutation.mutate(deleteTarget.id), isDeleting: deleteMutation.isPending, title: "Delete nav item", message: `Remove "${deleteTarget?.label}" from navigation? This cannot be undone.` })] }));
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ConfirmDeleteModal, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
+import { ConfirmDeleteModal, Div, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
@@ -94,7 +94,7 @@ export function AdminNotificationsView({ children, ...props }) {
                     onClick: () => setDeleteTarget(row),
                 },
             ] })),
-        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Type" }), _jsx("div", { className: "flex flex-wrap gap-2", children: NOTIF_TYPES.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "All") === opt
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Type" }), _jsx(Div, { className: "flex flex-wrap gap-2", children: NOTIF_TYPES.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "All") === opt
                             ? "bg-primary text-white border-primary"
                             : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] })),
     };

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Form, FormActions, Input, Select, SideDrawer, useToast, } from "../../../ui";
+import { Button, Div, Form, FormActions, Input, Label, Select, SideDrawer, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const STATUS_OPTIONS = [
@@ -70,5 +70,5 @@ export function AdminOrderEditorView({ open, onClose, orderId, orderLabel, curre
     return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: orderLabel ? `Order: ${orderLabel}` : "Update Order", children: _jsxs(Form, { onSubmit: (e) => {
                 e.preventDefault();
                 saveMutation.mutate();
-            }, className: "space-y-4 p-4", children: [_jsx(Select, { label: "Order status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsx(Input, { label: "Tracking number (optional)", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. DEL1234567890IN" }), _jsx(Select, { label: "Carrier (optional)", options: CARRIER_OPTIONS, value: carrier, onValueChange: setCarrier }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Internal note (optional)" }), _jsx("textarea", { value: notes, onChange: (e) => setNotes(e.target.value), rows: 3, placeholder: "Reason for status change, escalation notes\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), (status === "refunded" || status === "return_requested") && (_jsx(Input, { label: "Refund amount \u20B9 (optional)", type: "number", min: "0", step: "0.01", value: refundAmount, onChange: (e) => setRefundAmount(e.target.value), placeholder: "e.g. 499.00" })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !orderId || saveMutation.isPending, children: "Save changes" })] })] }) }));
+            }, className: "space-y-4 p-4", children: [_jsx(Select, { label: "Order status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsx(Input, { label: "Tracking number (optional)", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. DEL1234567890IN" }), _jsx(Select, { label: "Carrier (optional)", options: CARRIER_OPTIONS, value: carrier, onValueChange: setCarrier }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Internal note (optional)" }), _jsx("textarea", { value: notes, onChange: (e) => setNotes(e.target.value), rows: 3, placeholder: "Reason for status change, escalation notes\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), (status === "refunded" || status === "return_requested") && (_jsx(Input, { label: "Refund amount \u20B9 (optional)", type: "number", min: "0", step: "0.01", value: refundAmount, onChange: (e) => setRefundAmount(e.target.value), placeholder: "e.g. 499.00" })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !orderId || saveMutation.isPending, children: "Save changes" })] })] }) }));
 }

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, Nav, Text, Span, Button, Row } from "@mohasinac/appkit/ui";
+import { Div, Heading, Nav, Text, Span, Button, Row } from "@mohasinac/appkit/ui";
 import { ChevronRight } from "lucide-react";
+const __P = {
+    p6: "p-6",
+};
 export function AdminPageHeader({ title, subtitle, description, badge, breadcrumb, actionLabel, onAction, actionIcon, actionDisabled = false, className = "", themeConfig = {
     gradient: "bg-blue-50",
     titleClass: "text-3xl font-bold",
     subtitleClass: "text-lg text-gray-700",
     spacingClass: "space-y-1",
 }, }) {
-    return (_jsxs("div", { className: `${themeConfig.gradient} p-6 ${className}`, "data-section": "adminpageheader-div-253", children: [breadcrumb && breadcrumb.length > 0 && (_jsx(Nav, { "aria-label": "Breadcrumb", className: "mb-3 flex items-center gap-1 text-sm text-zinc-500 dark:text-zinc-400", children: breadcrumb.map((crumb, index) => (_jsxs(Span, { className: "flex items-center gap-1", children: [index > 0 && _jsx(ChevronRight, { className: "w-3 h-3 flex-shrink-0" }), crumb.href && themeConfig.TextLink ? (_jsx(themeConfig.TextLink, { href: crumb.href, className: "hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: crumb.label })) : (_jsx(Span, { className: "text-zinc-700 dark:text-zinc-200 font-medium", children: crumb.label }))] }, index))) })), _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", "data-section": "adminpageheader-div-254", children: [_jsxs("div", { className: themeConfig.spacingClass, "data-section": "adminpageheader-div-255", children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, className: themeConfig.titleClass, children: title }), badge && _jsx(Span, { className: "flex-shrink-0", children: badge })] }), subtitle && (_jsx(Text, { className: themeConfig.subtitleClass, children: subtitle })), description && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400 mt-1", children: description }))] }), actionLabel && onAction && (_jsxs(Button, { variant: "primary", onClick: onAction, disabled: actionDisabled, className: "flex-shrink-0", children: [actionIcon, actionLabel] }))] })] }));
+    return (_jsxs(Div, { className: `${themeConfig.gradient} ${__P.p6} ${className}`, children: [breadcrumb && breadcrumb.length > 0 && (_jsx(Nav, { "aria-label": "Breadcrumb", className: "mb-3 flex items-center gap-1 text-sm text-zinc-500 dark:text-zinc-400", children: breadcrumb.map((crumb, index) => (_jsxs(Span, { className: "flex items-center gap-1", children: [index > 0 && _jsx(ChevronRight, { className: "w-3 h-3 flex-shrink-0" }), crumb.href && themeConfig.TextLink ? (_jsx(themeConfig.TextLink, { href: crumb.href, className: "hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: crumb.label })) : (_jsx(Span, { weight: "medium", className: "text-zinc-700 dark:text-zinc-200", children: crumb.label }))] }, index))) })), _jsxs(Div, { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [_jsxs(Div, { className: themeConfig.spacingClass, children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, className: themeConfig.titleClass, children: title }), badge && _jsx(Span, { className: "flex-shrink-0", children: badge })] }), subtitle && (_jsx(Text, { className: themeConfig.subtitleClass, children: subtitle })), description && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400 mt-1", children: description }))] }), actionLabel && onAction && (_jsxs(Button, { variant: "primary", onClick: onAction, disabled: actionDisabled, className: "flex-shrink-0", children: [actionIcon, actionLabel] }))] })] }));
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Pencil } from "lucide-react";
-import { Badge, Button, FilterChipGroup, ListingLayout, Text } from "../../../ui";
+import { Badge, Button, Div, FilterChipGroup, ListingLayout, Span, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_PRODUCT_STATUS_TABS } from "../constants/filter-tabs";
@@ -22,13 +22,13 @@ const PRIZE_DRAW_COLUMNS = [
     {
         key: "primary",
         header: "Prize Draw",
-        render: (row) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] line-clamp-1", children: row.primary }), _jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: row.storeName })] })),
+        render: (row) => (_jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] line-clamp-1", children: row.primary }), _jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: row.storeName })] })),
     },
     {
         key: "entryFee",
         header: "Entry Fee",
         className: "w-28 text-right",
-        render: (row) => (_jsx("span", { className: "text-sm font-medium text-[var(--appkit-color-text)]", children: row.entryFee })),
+        render: (row) => (_jsx(Span, { size: "sm", weight: "medium", className: "text-[var(--appkit-color-text)]", children: row.entryFee })),
     },
     {
         key: "status",
@@ -41,14 +41,14 @@ const PRIZE_DRAW_COLUMNS = [
         key: "drawDate",
         header: "Draw Date",
         className: "w-32",
-        render: (row) => (_jsx("span", { className: "text-sm text-[var(--appkit-color-text-muted)]", children: row.drawDate })),
+        render: (row) => (_jsx(Span, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: row.drawDate })),
     },
     {
         key: "updatedAt",
         header: "Updated",
         sortable: true,
         className: "w-32",
-        render: (row) => (_jsx("span", { className: "text-sm text-[var(--appkit-color-text-muted)]", children: row.updatedAt })),
+        render: (row) => (_jsx(Span, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: row.updatedAt })),
     },
 ];
 export function AdminPrizeDrawsView({ children, ...props }) {

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

@@ -2,14 +2,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Button, Card, CardBody, ConfirmDeleteModal, PaginatedSelect, Form, Stack, StackedViewShell, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast, } from "../../../ui";
+import { Button, Card, CardBody, ConfirmDeleteModal, Div, PaginatedSelect, Form, Stack, StackedViewShell, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ProductForm } from "../../products/components/ProductForm";
 import { normalizeListingType } from "../../products/utils/listing-type";
 import { GroupSettingsPanel } from "../../products/components/GroupSettingsPanel";
+import { GroupInlineSelect } from "../../seller/components/GroupInlineSelect";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
 import { BrandQuickCreateForm } from "./BrandQuickCreateForm";
+const __P = {
+    p4: "p-4",
+};
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 function modeFromProduct(product) {
     const lt = normalizeListingType(product);
     if (lt === "auction")
@@ -145,12 +152,12 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
     const formContent = (_jsxs(Form, { id: "product-editor-form", onSubmit: (e) => {
             e.preventDefault();
             saveMutation.mutate();
-        }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Listing Type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [(!enabledListingTypes || enabledListingTypes.includes("standard")) && (_jsx(TabsTrigger, { value: "standard", children: "Standard" })), (!enabledListingTypes || enabledListingTypes.includes("auction")) && (_jsx(TabsTrigger, { value: "auction", children: "Auction" })), (!enabledListingTypes || enabledListingTypes.includes("pre-order")) && (_jsx(TabsTrigger, { value: "preorder", children: "Pre-order" }))] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Classification" }), _jsxs("div", { className: "space-y-4", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(PaginatedSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderGroupSettings: isEdit && productId
+        }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Listing Type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [(!enabledListingTypes || enabledListingTypes.includes("standard")) && (_jsx(TabsTrigger, { value: "standard", children: "Standard" })), (!enabledListingTypes || enabledListingTypes.includes("auction")) && (_jsx(TabsTrigger, { value: "auction", children: "Auction" })), (!enabledListingTypes || enabledListingTypes.includes("pre-order")) && (_jsx(TabsTrigger, { value: "preorder", children: "Pre-order" }))] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Classification" }), _jsxs(Div, { className: "space-y-4", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(PaginatedSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderGroupSettings: isEdit && productId
                                     ? (p) => (_jsx(GroupSettingsPanel, { productId: productId, productSlug: p.slug ?? productId, groupId: p.groupId, isGroupParent: p.isGroupParent, groupParentSlug: p.groupParentSlug, groupChildSlugs: p.groupChildSlugs, groupTitle: p.groupTitle, isAuction: modeFromProduct(p) === "auction", storeProductsEndpoint: "/api/admin/products", onGroupChanged: () => productQuery.refetch() }))
-                                    : undefined, renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(PaginatedSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(PaginatedSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) })] })] }), _jsxs("div", { className: "flex gap-3 lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] })] }, "product-form"));
+                                    : undefined, renderGroupJoinField: ({ label, value, onChange, disabled }) => (_jsx(GroupInlineSelect, { scope: "admin", value: value ?? "", onChange: (id) => onChange(id || undefined), disabled: disabled, label: label, placeholder: "None (standalone product)", allowCreate: false })), renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(PaginatedSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(PaginatedSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) })] })] }), _jsxs(Div, { className: "flex gap-3 lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] })] }, "product-form"));
     if (embedded) {
-        return _jsx("div", { className: "overflow-y-auto p-4", children: formContent });
+        return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }
-    const twoPanel = (_jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_280px] lg:items-start", children: [_jsx(CardBody, { className: "min-w-0 space-y-6 p-0", children: formContent }), _jsx("div", { className: "hidden lg:block lg:sticky lg:top-[var(--header-height,0px)]", children: actionSidebar })] }));
+    const twoPanel = (_jsxs(Div, { className: "grid gap-6 lg:grid-cols-[1fr_280px] lg:items-start", children: [_jsx(CardBody, { className: "min-w-0 space-y-6 p-0", children: formContent }), _jsx(Div, { className: "hidden lg:block lg:sticky lg:top-[var(--header-height,0px)]", children: actionSidebar })] }));
     return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Product" : "Create Product", sections: [twoPanel] }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => setDeleteOpen(false), onConfirm: () => deleteMutation.mutate(), isDeleting: deleteMutation.isPending, title: "Delete this product?", message: "This product will be permanently removed. This action cannot be undone.", confirmText: "Delete product", variant: "danger" })] }));
 }

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
-import { ListingLayout, Text, Toggle, useToast } from "../../../ui";
+import { Div, ListingLayout, Span, Text, Toggle, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_PRODUCT_STATUS_TABS, ADMIN_PRODUCT_LISTING_TYPE_TABS, } from "../constants/filter-tabs";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
@@ -32,21 +32,21 @@ function buildBaseColumns() {
             key: "primary",
             header: "Item",
             sortable: true,
-            render: (row) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
+            render: (row) => (_jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
         },
         {
             key: "status",
             header: "Status",
             sortable: true,
             className: "w-36",
-            render: (row) => (_jsx("span", { className: "inline-flex rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", children: row.status })),
+            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: row.status })),
         },
         {
             key: "updatedAt",
             header: "Updated",
             sortable: true,
             className: "w-36",
-            render: (row) => (_jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-300", children: row.updatedAt })),
+            render: (row) => (_jsx(Span, { size: "sm", className: "text-zinc-600 dark:text-zinc-300", children: row.updatedAt })),
         },
     ];
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, FilterChipGroup, ListingLayout, Modal, RowActionMenu, useToast } from "../../../ui";
+import { Button, Div, FilterChipGroup, Label, ListingLayout, Modal, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
@@ -151,7 +151,7 @@ export function AdminReviewsView({ children, ...props }) {
                     setReplyOpen(false);
                     setReplyText("");
                     setReplyTarget(null);
-                }, title: "Reply to review", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Admin reply" }), _jsx("textarea", { value: replyText, onChange: (e) => setReplyText(e.target.value), rows: 4, placeholder: "Write a public reply to this review\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "secondary", onClick: () => {
+                }, title: "Reply to review", children: _jsxs(Div, { className: "space-y-4", children: [_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Admin reply" }), _jsx("textarea", { value: replyText, onChange: (e) => setReplyText(e.target.value), rows: 4, placeholder: "Write a public reply to this review\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), _jsxs(Div, { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "secondary", onClick: () => {
                                         setReplyOpen(false);
                                         setReplyText("");
                                         setReplyTarget(null);

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

@@ -2,9 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Div, FormActions, Select, SideDrawer, Text, useToast, } from "../../../ui";
+import { Button, Code, Div, FormActions, Label, Select, SideDrawer, Span, Text, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+const __P = {
+    p3: "p-3",
+    p4: "p-4",
+};
 const CLS_SECTION_LABEL = "text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide";
 const STATUS_OPTIONS = [
     { label: "Pending review", value: "pending_review" },
@@ -58,5 +62,5 @@ export function AdminScammerEditorView({ open, onClose, scammerId, displayNames
             showToast(err?.message ?? "Failed to delete profile.", "error");
         },
     });
-    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayNames.length > 0 ? displayNames[0] : "Scammer Profile", children: _jsxs(Div, { className: "flex flex-col gap-4 p-4", children: [_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx("span", { className: `inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${STATUS_COLOR[currentStatus ?? "pending_review"] ?? STATUS_COLOR.pending_review}`, children: (currentStatus ?? "pending_review").replace(/_/g, " ") }), scamType && (_jsx("span", { className: "rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: scamType.replace(/_/g, " ") }))] }), displayNames.length > 0 && (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Names / Aliases" }), _jsx("div", { className: "flex flex-wrap gap-1", children: displayNames.map((name, i) => (_jsx("span", { className: "rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs dark:bg-zinc-800", children: name }, i))) })] })), (phones.length > 0 || upiIds.length > 0) && (_jsxs(Div, { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900/40", children: [phones.length > 0 && (_jsxs("div", { className: "mb-2", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Phone numbers" }), _jsx("div", { className: "flex flex-wrap gap-1", children: phones.map((p, i) => (_jsx("code", { className: "rounded bg-zinc-200 px-1.5 py-0.5 text-xs dark:bg-zinc-700", children: p }, i))) })] })), upiIds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "UPI IDs" }), _jsx("div", { className: "flex flex-wrap gap-1", children: upiIds.map((u, i) => (_jsx("code", { className: "rounded bg-zinc-200 px-1.5 py-0.5 text-xs dark:bg-zinc-700", children: u }, i))) })] }))] })), description && (_jsxs(Div, { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900/40", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200", children: description })] })), _jsxs(Div, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: ["Reported by:", " ", _jsx("span", { className: "font-medium text-zinc-700 dark:text-zinc-300", children: reportedByAnon ? "Anonymous" : (reportedBy ?? "Unknown") })] }), _jsx("hr", { className: "border-zinc-200 dark:border-zinc-700" }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Verification note (internal)" }), _jsx("textarea", { value: note, onChange: (e) => setNote(e.target.value), rows: 3, placeholder: "e.g. Verified via 3 independent reports\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "danger", size: "sm", disabled: !scammerId, isLoading: deleteMutation.isPending, onClick: () => deleteMutation.mutate(), children: "Delete" }), _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", isLoading: updateMutation.isPending, disabled: !scammerId || updateMutation.isPending, onClick: () => updateMutation.mutate(), children: "Save changes" })] })] }) }));
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayNames.length > 0 ? displayNames[0] : "Scammer Profile", children: _jsxs(Div, { className: `flex flex-col gap-4 ${__P.p4}`, children: [_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex rounded-full px-2.5 py-1 ${STATUS_COLOR[currentStatus ?? "pending_review"] ?? STATUS_COLOR.pending_review}`, children: (currentStatus ?? "pending_review").replace(/_/g, " ") }), scamType && (_jsx(Span, { size: "xs", className: "rounded-full bg-zinc-100 px-2.5 py-1 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: scamType.replace(/_/g, " ") }))] }), displayNames.length > 0 && (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Names / Aliases" }), _jsx(Div, { className: "flex flex-wrap gap-1", children: displayNames.map((name, i) => (_jsx(Span, { size: "xs", className: "rounded-full bg-zinc-100 px-2.5 py-0.5 dark:bg-zinc-800", children: name }, i))) })] })), (phones.length > 0 || upiIds.length > 0) && (_jsxs(Div, { className: `rounded-lg border border-zinc-200 bg-zinc-50 ${__P.p3} dark:border-zinc-700 dark:bg-zinc-900/40`, children: [phones.length > 0 && (_jsxs(Div, { className: "mb-2", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Phone numbers" }), _jsx(Div, { className: "flex flex-wrap gap-1", children: phones.map((p, i) => (_jsx(Code, { className: "rounded bg-zinc-200 px-1.5 py-0.5 text-xs dark:bg-zinc-700", children: p }, i))) })] })), upiIds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "UPI IDs" }), _jsx(Div, { className: "flex flex-wrap gap-1", children: upiIds.map((u, i) => (_jsx(Code, { className: "rounded bg-zinc-200 px-1.5 py-0.5 text-xs dark:bg-zinc-700", children: u }, i))) })] }))] })), description && (_jsxs(Div, { className: `rounded-lg border border-zinc-200 bg-zinc-50 ${__P.p3} dark:border-zinc-700 dark:bg-zinc-900/40`, children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200", children: description })] })), _jsxs(Div, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: ["Reported by:", " ", _jsx(Span, { weight: "medium", className: "text-zinc-700 dark:text-zinc-300", children: reportedByAnon ? "Anonymous" : (reportedBy ?? "Unknown") })] }), _jsx("hr", { className: "border-zinc-200 dark:border-zinc-700" }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Verification note (internal)" }), _jsx("textarea", { value: note, onChange: (e) => setNote(e.target.value), rows: 3, placeholder: "e.g. Verified via 3 independent reports\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "danger", size: "sm", disabled: !scammerId, isLoading: deleteMutation.isPending, onClick: () => deleteMutation.mutate(), children: "Delete" }), _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", isLoading: updateMutation.isPending, disabled: !scammerId || updateMutation.isPending, onClick: () => updateMutation.mutate(), children: "Save changes" })] })] }) }));
 }

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from "react";
-import { FilterChipGroup, ListingLayout, RowActionMenu, Text } from "../../../ui";
+import { Div, FilterChipGroup, ListingLayout, RowActionMenu, Span, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_SCAMMER_STATUS_TABS } from "../constants/filter-tabs";
@@ -18,7 +18,7 @@ const SCAMMER_COLUMNS = [
     {
         key: "primary",
         header: "Name / Aliases",
-        render: (row) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: row.primary }), row.secondary ? (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })) : null] })),
+        render: (row) => (_jsxs(Div, { className: "space-y-0.5", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: row.primary }), row.secondary ? (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })) : null] })),
     },
     {
         key: "status",
@@ -30,7 +30,7 @@ const SCAMMER_COLUMNS = [
         key: "updatedAt",
         header: "Updated",
         className: "w-32",
-        render: (row) => (_jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: row.updatedAt })),
+        render: (row) => (_jsx(Span, { size: "sm", className: "text-zinc-500 dark:text-zinc-400", children: row.updatedAt })),
     },
 ];
 export function AdminScammersView({ children, ...props }) {