@mohasinac/appkit 3.9.1 → 4.0.0

package/dist/_internal/shared/actions/action-registry.js

@@ -310,6 +310,14 @@ export const ACTIONS = {
             kind: "ghost",
             permissions: ["seller", "admin"],
         },
+        "set-payout-reminder": {
+            id: "store.set-payout-reminder",
+            label: "Remind Me",
+            ariaLabel: "Toggle a follow-up reminder on this payout",
+            description: "Flag this payout for a personal follow-up reminder.",
+            kind: "ghost",
+            permissions: ["seller"],
+        },
         // ── Review management ───────────────────────────────────────────────
         "reply-review": {
             id: "store.reply-review",

package/dist/client.d.ts

@@ -32,7 +32,8 @@ export { Skeleton } from "./ui/components/Skeleton";
 export { Alert } from "./ui/components/Alert";
 export type { SkeletonProps } from "./ui/components/Skeleton";
 export { Divider } from "./ui/components/Divider";
-export { TabStrip } from "./ui/components/TabStrip";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/components/Tabs";
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from "./ui/components/Tabs";
 export { SellerProductsView } from "./features/seller/components/SellerProductsView";
 export { Drawer } from "./ui/components/Drawer";
 export { FilterDrawer } from "./ui/components/FilterDrawer";
@@ -69,7 +70,6 @@ export { useSwipe } from "./react/hooks/useSwipe";
 export { useInfiniteScroll } from "./react/hooks/useInfiniteScroll";
 export type { UseInfiniteScrollOptions, UseInfiniteScrollResult, } from "./react/hooks/useInfiniteScroll";
 export { useUnsavedChanges } from "./react/hooks/useUnsavedChanges";
-export { useVisibleItems } from "./react/hooks/useVisibleItems";
 export { FirebaseClientAuthProvider } from "./providers/firebase-client/index";
 export { FirebaseClientRealtimeProvider } from "./providers/firebase-client/index";
 export { EventFormDrawer, EventParticipateView, EventPollWidget } from "./features/events/index";

package/dist/client.js

@@ -41,7 +41,7 @@ export { EmptyState } from "./ui/components/EmptyState";
 export { Skeleton } from "./ui/components/Skeleton";
 export { Alert } from "./ui/components/Alert";
 export { Divider } from "./ui/components/Divider";
-export { TabStrip } from "./ui/components/TabStrip";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/components/Tabs";
 export { SellerProductsView } from "./features/seller/components/SellerProductsView";
 // [CLIENT-ONLY]-Cannot run in SSR mode â€" uses browser-only APIs (window, navigator, localStorage, matchMedia, DOM events) that do not exist in Node.js.
 // Drawer - Component for drawer.
@@ -113,9 +113,6 @@ export { useInfiniteScroll } from "./react/hooks/useInfiniteScroll";
 // useUnsavedChanges - React hook for use unsaved changes.
 export { useUnsavedChanges } from "./react/hooks/useUnsavedChanges";
 // [CLIENT-ONLY]-Cannot run in SSR mode â€" uses browser-only APIs (window, navigator, localStorage, matchMedia, DOM events) that do not exist in Node.js.
-// useVisibleItems - React hook for use visible items.
-export { useVisibleItems } from "./react/hooks/useVisibleItems";
-// [CLIENT-ONLY]-Cannot run in SSR mode â€" uses browser-only APIs (window, navigator, localStorage, matchMedia, DOM events) that do not exist in Node.js.
 // FirebaseClientAuthProvider - Component for firebase client auth provider.
 export { FirebaseClientAuthProvider } from "./providers/firebase-client/index";
 // [CLIENT-ONLY]-Cannot run in SSR mode â€" uses browser-only APIs (window, navigator, localStorage, matchMedia, DOM events) that do not exist in Node.js.

package/dist/constants/api-endpoints.d.ts

@@ -359,6 +359,7 @@ export declare const SELLER_ENDPOINTS: {
     readonly COUPON_BY_ID: (id: string) => string;
     readonly OFFERS: "/api/store/offers";
     readonly PAYOUTS: "/api/store/payouts";
+    readonly PAYOUT_BY_ID: (id: string) => string;
     readonly PAYOUT_SETTINGS: "/api/store/payout-settings";
     readonly PAYOUT_REQUEST: "/api/store/payouts/request";
     readonly REVIEWS: "/api/store/reviews";
@@ -805,6 +806,7 @@ export declare const API_ENDPOINTS: {
         readonly COUPON_BY_ID: (id: string) => string;
         readonly OFFERS: "/api/store/offers";
         readonly PAYOUTS: "/api/store/payouts";
+        readonly PAYOUT_BY_ID: (id: string) => string;
         readonly PAYOUT_SETTINGS: "/api/store/payout-settings";
         readonly PAYOUT_REQUEST: "/api/store/payouts/request";
         readonly REVIEWS: "/api/store/reviews";
@@ -1253,6 +1255,7 @@ export declare const API_ROUTES: {
         readonly COUPON_BY_ID: (id: string) => string;
         readonly OFFERS: "/api/store/offers";
         readonly PAYOUTS: "/api/store/payouts";
+        readonly PAYOUT_BY_ID: (id: string) => string;
         readonly PAYOUT_SETTINGS: "/api/store/payout-settings";
         readonly PAYOUT_REQUEST: "/api/store/payouts/request";
         readonly REVIEWS: "/api/store/reviews";

package/dist/constants/api-endpoints.js

@@ -477,6 +477,7 @@ export const SELLER_ENDPOINTS = {
     COUPON_BY_ID: (id) => `/api/store/coupons/${id}`,
     OFFERS: "/api/store/offers",
     PAYOUTS: "/api/store/payouts",
+    PAYOUT_BY_ID: (id) => `/api/store/payouts/${id}`,
     PAYOUT_SETTINGS: "/api/store/payout-settings",
     PAYOUT_REQUEST: "/api/store/payouts/request",
     REVIEWS: "/api/store/reviews",

package/dist/features/account/hooks/useDataViewMode.d.ts

@@ -0,0 +1,17 @@
+export type DataViewMode = "table" | "grid" | "list";
+/**
+ * Persisted, per-user "last saved" listing view-mode preference (table vs
+ * grid vs list) — a single global value shared across every listing page,
+ * not scoped per page. When the user has never explicitly chosen a view,
+ * defaults to "list" (AdminViewCards' one-full-width-card-per-row layout —
+ * easier to read than a compacted table) below the mobile breakpoint, and
+ * "table" at desktop widths.
+ *
+ * Only the view-mode toggle is persisted here. Filters, sort, search, and
+ * pagination already live in the URL via useUrlTable() and must never be
+ * added to this hook — see CLAUDE.md Phase 3 / user directive 2026-08-18.
+ */
+export declare function useDataViewMode(fallback?: DataViewMode): {
+    view: DataViewMode;
+    setView: (next: DataViewMode) => void;
+};

package/dist/features/account/hooks/useDataViewMode.js

@@ -0,0 +1,55 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useCurrentProfile, useUpdateCurrentProfile } from "./useProfile";
+const PERSIST_DEBOUNCE_MS = 600;
+const MOBILE_BREAKPOINT_PX = 768;
+/**
+ * Persisted, per-user "last saved" listing view-mode preference (table vs
+ * grid vs list) — a single global value shared across every listing page,
+ * not scoped per page. When the user has never explicitly chosen a view,
+ * defaults to "list" (AdminViewCards' one-full-width-card-per-row layout —
+ * easier to read than a compacted table) below the mobile breakpoint, and
+ * "table" at desktop widths.
+ *
+ * Only the view-mode toggle is persisted here. Filters, sort, search, and
+ * pagination already live in the URL via useUrlTable() and must never be
+ * added to this hook — see CLAUDE.md Phase 3 / user directive 2026-08-18.
+ */
+export function useDataViewMode(fallback = "table") {
+    const { data: profile } = useCurrentProfile();
+    const updateProfile = useUpdateCurrentProfile();
+    const debounceRef = useRef(null);
+    const [view, setViewState] = useState(fallback);
+    const hasAppliedDefault = useRef(false);
+    // Apply the persisted preference (or a viewport-based default when none
+    // exists yet) exactly once per mount, so a later profile refetch doesn't
+    // clobber a view the user has since changed locally.
+    useEffect(() => {
+        if (hasAppliedDefault.current)
+            return;
+        if (profile === undefined)
+            return; // still loading — wait rather than flash "table" then jump
+        hasAppliedDefault.current = true;
+        const saved = profile.uiPreferences?.dataViewMode;
+        if (saved) {
+            setViewState(saved);
+            return;
+        }
+        if (typeof window !== "undefined" && window.innerWidth < MOBILE_BREAKPOINT_PX) {
+            setViewState("list");
+        }
+    }, [profile]);
+    useEffect(() => () => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+    }, []);
+    const setView = useCallback((next) => {
+        setViewState(next);
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            updateProfile.mutate({ uiPreferences: { dataViewMode: next } });
+        }, PERSIST_DEBOUNCE_MS);
+    }, [updateProfile]);
+    return { view, setView };
+}

package/dist/features/account/hooks/useProfile.d.ts

@@ -13,6 +13,7 @@ export interface UserProfile {
     googleLinkedEmail?: string | null;
     uiPreferences?: {
         collapsedSections?: string[];
+        dataViewMode?: "table" | "grid" | "list";
     };
 }
 export interface UpdateCurrentProfileInput {
@@ -31,6 +32,7 @@ export interface UpdateCurrentProfileInput {
     profileIsPublic?: boolean;
     uiPreferences?: {
         collapsedSections?: string[];
+        dataViewMode?: "table" | "grid" | "list";
     };
 }
 export declare function useCurrentProfile(options?: {

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

@@ -1,8 +1,7 @@
 import React from "react";
 export interface AdminBundlesViewProps {
-    getEditHref: (row: {
-        id: string;
-    }) => string;
+    /** Plain string with an `{id}` placeholder — safe to build in a Server Component page.tsx. */
+    editHrefTemplate: string;
     newHref: string;
 }
-export declare function AdminBundlesView({ getEditHref, newHref }: AdminBundlesViewProps): React.JSX.Element;
+export declare function AdminBundlesView({ editHrefTemplate, newHref }: AdminBundlesViewProps): React.JSX.Element;

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

@@ -40,7 +40,7 @@ const COLUMNS = [
     },
     { key: "updatedAt", header: "Updated", className: "w-28" },
 ];
-export function AdminBundlesView({ getEditHref, newHref }) {
+export function AdminBundlesView({ editHrefTemplate, newHref }) {
     const [rebuildingId, setRebuildingId] = useState(null);
     const toast = useToast();
     const handleRebuild = useCallback(async (bundleId) => {
@@ -99,7 +99,7 @@ export function AdminBundlesView({ getEditHref, newHref }) {
                 parts.push(sieveFilter("bundleStockStatus", SIEVE_OP.EQ, filterState.bundleStockStatus));
             return parts.join(",") || undefined;
         },
-        getRowHref: getEditHref,
+        rowHrefTemplate: editHrefTemplate,
         toolbarExtra: (_jsx(Button, { asChild: true, size: "sm", variant: "primary", children: _jsxs(TextLink, { href: newHref, layout: "flex", align: "center", gap: "xs", children: ["+ ", BUNDLE_COPY.adminList.newButton] }) })),
         // Rule #7: bulk-action array sourced from the ADMIN_BULK_ACTIONS preset.
         buildBulkActions: (selection) => {

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

@@ -145,5 +145,5 @@ export function AdminCarouselView({ children, onBulkDelete, ...props }) {
                 ] })),
         },
     ];
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search slide titles", onSearchChange: setSearchInput, onSearchCommit: commitSearch, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedCount > 0 && bulkActions.length > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _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 })), _jsx(DataTable, { rows: displayRows, columns: columns, isLoading: isLoading, emptyLabel: "No carousel slides \u2014 use 'New slide' to add one", getRowHref: (row) => `/admin/carousel/${row.id}/edit` })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Row, { wrap: true, gap: "sm", children: [{ label: "All", value: "" }, { label: "Active", value: "true" }, { label: "Inactive", value: "false" }].map((opt) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => setPendingFilters((p) => ({ ...p, active: opt.value })), className: `rounded-full px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium border transition-colors min-h-0 h-auto ${(pendingFilters.active || "") === opt.value ? "bg-primary text-white border-primary" : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: opt.label }, opt.label))) })] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Carousel Slide", message: "Delete this carousel slide? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(deleteTargetId); setDeleteTargetId(null); }, onClose: () => setDeleteTargetId(null), isDeleting: deleteMutation.isPending }))] }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search slide titles", onSearchChange: setSearchInput, onSearchCommit: commitSearch, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedCount > 0 && bulkActions.length > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _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 })), _jsx(DataTable, { rows: displayRows, columns: columns, isLoading: isLoading, emptyLabel: "No carousel slides \u2014 use 'New slide' to add one", rowHrefTemplate: "/admin/carousel/{id}/edit" })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Row, { wrap: true, gap: "sm", children: [{ label: "All", value: "" }, { label: "Active", value: "true" }, { label: "Inactive", value: "false" }].map((opt) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => setPendingFilters((p) => ({ ...p, active: opt.value })), className: `rounded-full px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium border transition-colors min-h-0 h-auto ${(pendingFilters.active || "") === opt.value ? "bg-primary text-white border-primary" : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: opt.label }, opt.label))) })] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Carousel Slide", message: "Delete this carousel slide? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(deleteTargetId); setDeleteTargetId(null); }, onClose: () => setDeleteTargetId(null), isDeleting: deleteMutation.isPending }))] }));
 }

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

@@ -1,8 +1,4 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
-export interface AdminCategoriesViewProps extends ListingLayoutProps {
-    getRowHref?: (row: {
-        id: string;
-    }) => string;
-}
-export declare function AdminCategoriesView({ children, getRowHref: _getRowHref, ...props }: AdminCategoriesViewProps): React.JSX.Element;
+export type AdminCategoriesViewProps = ListingLayoutProps;
+export declare function AdminCategoriesView({ children, ...props }: AdminCategoriesViewProps): React.JSX.Element;

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

@@ -95,7 +95,7 @@ const ADMIN_CATEGORIES_CONFIG = {
     renderEditor: ({ editId, closePanel }) => (_jsx(AdminCategoryEditorView, { categoryId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
     resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Category" : "Edit Category"),
 };
-export function AdminCategoriesView({ children, getRowHref: _getRowHref, ...props }) {
+export function AdminCategoriesView({ children, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Categories" }), children] }));
     }

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

@@ -1,9 +1,7 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
-import type { AdminListingScaffoldRow } from "./DataListingView";
 export interface AdminFaqsViewProps extends ListingLayoutProps {
     actionHref?: string;
-    getRowHref?: (row: AdminListingScaffoldRow) => string;
     onBulkArchive?: (ids: string[]) => Promise<void>;
     onBulkDelete?: (ids: string[]) => Promise<void>;
 }

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

@@ -93,7 +93,7 @@ export function AdminPrizeDrawsView({ children, ...props }) {
             const status = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : null;
             return ["listingType==prize-draw", status].filter(Boolean).join(",");
         },
-        getRowHref: (row) => String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)),
+        rowHrefTemplate: String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT("{id}")),
         // Rule #7: bulk-action array sourced from the ADMIN_BULK_ACTIONS preset.
         buildBulkActions: (selection) => ADMIN_BULK_ACTIONS.prizeDraws.map((id) => ({
             id,

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

@@ -108,8 +108,14 @@ export interface ListingViewConfig<TResponse, TRow extends {
     onRowClick?: (row: TRow, panel: {
         openEditPanel: (id: string) => void;
     }) => void;
-    /** When set, the table renders rows as anchor links to this href. */
-    getRowHref?: (row: TRow) => string;
+    /**
+     * When set, the table renders rows as anchor links to this href. Prefer a
+     * plain string with an `{id}` placeholder (e.g. "/admin/x/{id}/edit") —
+     * it's the only form safe to build inside a Server Component page.tsx,
+     * since RSC cannot pass function values across the server/client boundary.
+     * A function is only safe when the config itself is assembled client-side.
+     */
+    rowHrefTemplate?: string | ((row: TRow) => string);
     /** Hide the table toggle in the toolbar; views with no table column set should use this. */
     hideTableView?: boolean;
     /** Initial view mode (defaults to "table" when not hidden, "grid" when hidden). */

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

@@ -44,15 +44,19 @@ export function DataListingView({ config, }) {
     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(Row, { align: "center", gap: "sm", children: [config.toolbarExtra, config.primaryAction && (_jsxs(Button, { gap: "sm", size: "sm", onClick: () => config.primaryAction.onClick({
                                 openCreatePanel: panel.openCreatePanel,
-                            }), 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(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p), pageSize: pageSize, onPageSizeChange: setPageSize, paginationConfig: { showPageSizeSelector: true, pageSizeOptions: [10, 25, 50, 100] } }) }) })), _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
+                            }), 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(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p), pageSize: pageSize, onPageSizeChange: setPageSize, paginationConfig: { showPageSizeSelector: true, pageSizeOptions: [10, 25, 50, 100] } }) }) })), _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" && !config.hideTableView ? (_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
+                            : selection.clearSelection(), rowHrefTemplate: config.rowHrefTemplate, onRowClick: config.onRowClick
                             ? (row) => config.onRowClick(row, {
                                 openEditPanel: panel.openEditPanel,
                             })
                             : 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 ? (
+                    // The persisted view-mode preference is global, so a "table"
+                    // value can still reach here on a hideTableView-only view (see
+                    // the DataTable branch's guard above) — fall back to "grid".
+                    config.renderCards(rows, view === "table" ? "grid" : view, selectionContext, isLoading)) : (_jsx(AdminViewCards, { rows: rows, view: view === "table" ? "grid" : 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.d.ts

@@ -6,7 +6,15 @@ interface DataTableProps<T extends {
     columns?: AdminTableColumn<T>[];
     rows: T[];
     isLoading?: boolean;
-    getRowHref?: (row: T) => string;
+    /**
+     * Row link target. Prefer a plain string containing an `{id}` placeholder
+     * (e.g. "/admin/products/{id}/edit") — it's the only form safe to construct
+     * inside a Server Component page.tsx, since React Server Components cannot
+     * pass function values to Client Components. A function is only safe when
+     * both the caller and DataTable are already client-side (e.g. conditional
+     * per-row routing inside an already-"use client" view).
+     */
+    rowHrefTemplate?: string | ((row: T) => string);
     onRowClick?: (row: T) => void;
     renderRowActions?: (row: T) => React.ReactNode;
     sortKey?: string;
@@ -23,5 +31,5 @@ interface DataTableProps<T extends {
 }
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages, currentPage, onPageChange, emptyLabel, getRowHref, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages, currentPage, onPageChange, emptyLabel, rowHrefTemplate, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }: DataTableProps<T>): React.JSX.Element;
 export {};

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

@@ -43,9 +43,11 @@ function SelectableRow({ row, columns, isSelected, onToggle, renderRowActions, o
                     ? col.render(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, }) {
+export function DataTable({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No records found", rowHrefTemplate, 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", size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "bg-[var(--appkit-color-bg)] dark:bg-[var(--appkit-color-surface-elevated)]", border: "default", children: [selectionEnabled && (_jsx(Th, { padding: "xs-3", scope: "col", className: "w-10", children: onToggleSelectAll && (_jsx(Checkbox, { bare: true, "data-testid": "select-all-checkbox", "aria-label": allRowsSelected ? "Deselect all" : "Select all", checked: allRowsSelected, onChange: () => onToggleSelectAll(!allRowsSelected), className: "h-4 w-4 rounded border-[var(--appkit-color-border)] 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-[var(--appkit-color-text)] text-[var(--appkit-color-text)] ${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-[length:var(--appkit-text-xs)] font-medium transition ${p === currentPage ? "bg-neutral-900 text-white" : "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)]"}`, 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-[var(--appkit-color-bg)] dark:bg-[var(--appkit-color-surface-elevated)]", border: "default", children: [selectionEnabled && (_jsx(Th, { padding: "xs-3", scope: "col", className: "w-10", children: onToggleSelectAll && (_jsx(Checkbox, { bare: true, "data-testid": "select-all-checkbox", "aria-label": allRowsSelected ? "Deselect all" : "Select all", checked: allRowsSelected, onChange: () => onToggleSelectAll(!allRowsSelected), className: "h-4 w-4 rounded border-[var(--appkit-color-border)] 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-[var(--appkit-color-text)] text-[var(--appkit-color-text)] ${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: typeof rowHrefTemplate === "function"
+                                    ? rowHrefTemplate(row)
+                                    : rowHrefTemplate?.replace("{id}", encodeURIComponent(row.id)), 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-[length:var(--appkit-text-xs)] font-medium transition ${p === currentPage ? "bg-neutral-900 text-white" : "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: p }, p))) }))] }));
 }

package/dist/features/admin/hooks/useAdminListing.d.ts

@@ -14,8 +14,8 @@ export interface AdminListingConfig<TResponse, TRow extends {
 export declare function useAdminListing<TResponse, TRow extends {
     id: string;
 }>(config: AdminListingConfig<TResponse, TRow>): {
-    view: "grid" | "list" | "table";
-    setView: import("react").Dispatch<import("react").SetStateAction<"grid" | "list" | "table">>;
+    view: import("../../account/hooks/useDataViewMode").DataViewMode;
+    setView: (next: import("../../account/hooks/useDataViewMode").DataViewMode) => void;
     table: {
         params: URLSearchParams;
         get: (key: string) => string;

package/dist/features/admin/hooks/useAdminListing.js

@@ -3,10 +3,15 @@ import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
 import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
+import { useDataViewMode } from "../../account/hooks/useDataViewMode";
 import { useAdminListingData } from "./useAdminListingData";
 export function useAdminListing(config) {
     const { filterKeys, defaultSort, pageSize: defaultPageSize = 25, queryKey, endpoint, mapRows, getTotal, buildFilters, } = config;
-    const [view, setView] = useState(config.initialView ?? "table");
+    // Persisted, viewport-aware view-mode: below 768px defaults to "list"
+    // (AdminViewCards' one-full-width-card-per-row layout) unless the caller
+    // explicitly pins hideTableView (grid-only views like coupons); the user's
+    // own explicit choice, once made, always wins and persists across visits.
+    const { view, setView } = useDataViewMode(config.initialView ?? "table");
     const table = useUrlTable({ defaults: { pageSize: String(defaultPageSize), sort: defaultSort } });
     // Reactive — table.getNumber reads the URL param, so a page-size selector
     // (Pagination's pageSize/onPageSizeChange) actually takes effect instead

package/dist/features/categories/components/BrandDetailTabs.js

@@ -1,21 +1,13 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div } from "../../../ui";
+import { Tabs, TabsList, TabsTrigger } from "../../../ui";
 import { CategoryProductsListing } from "./CategoryProductsListing";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
 import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsIndexListing";
 import { CategoryBundlesListing } from "./CategoryBundlesListing";
 import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs";
-const __O = {
-    xAuto: "overflow-x-auto",
-};
-function tabLabel(label, count) {
-    if (!count)
-        return label;
-    return `${label} (${count.toLocaleString()})`;
-}
 const TAB_TYPE_MAP = {
     products: { kind: "listing", type: "standard" },
     auctions: { kind: "listing", type: "auction" },
@@ -48,7 +40,5 @@ export function BrandDetailTabs({ brandName, initialProductsData, initialBundles
             default: return undefined;
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { layout: "flex", border: "default", className: `border-b mb-6 ${__O.xAuto}`, children: visibleTabs.map((t) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => setActiveTab(t.id), paddingX: "lg", paddingY: "y-xs-tall", textSize: "sm", weight: "medium", className: `whitespace-nowrap transition-colors -mb-px border-b-2 rounded-none ${activeTab === t.id
-                        ? "border-primary text-primary"
-                        : "border-transparent text-[var(--appkit-color-text-muted)] hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: tabLabel(t.label, countFor(t.id)) }, t.id))) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: "", brandName: brandName, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { brandName: brandName })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { brandName: brandName })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { brandName: brandName })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles, brandName: brandName }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: "", brandName: brandName, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { brandName: brandName })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { brandName: brandName })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { brandName: brandName })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles, brandName: brandName }))] }));
 }

package/dist/features/categories/components/CategoryDetailTabs.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div } from "../../../ui";
+import { Tabs, TabsList, TabsTrigger } from "../../../ui";
 import { CategoryProductsListing } from "./CategoryProductsListing";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
@@ -9,14 +9,6 @@ import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsInde
 import { CategoryBundlesListing } from "./CategoryBundlesListing";
 import { CategoryStoresListing } from "./CategoryStoresListing";
 import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs";
-const __O = {
-    xAuto: "overflow-x-auto",
-};
-function tabLabel(label, count) {
-    if (!count)
-        return label;
-    return `${label} (${count.toLocaleString()})`;
-}
 /** Maps CATEGORY_PAGE_TABS id → listing type / category type key for flag filtering. */
 const TAB_TYPE_MAP = {
     products: { kind: "listing", type: "standard" },
@@ -54,7 +46,5 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
             default: return undefined;
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { layout: "flex", border: "default", className: `border-b mb-6 ${__O.xAuto}`, children: visibleTabs.map((t) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => setActiveTab(t.id), paddingX: "lg", paddingY: "y-xs-tall", textSize: "sm", weight: "medium", className: `whitespace-nowrap transition-colors -mb-px border-b-2 rounded-none ${activeTab === t.id
-                        ? "border-primary text-primary"
-                        : "border-transparent text-[var(--appkit-color-text-muted)] hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: tabLabel(t.label, countFor(t.id)) }, t.id))) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
 }

package/dist/features/events/components/AdminEventsView.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
-export interface AdminEventsViewProps extends ListingLayoutProps {
-    getRowHref?: (row: {
-        id: string;
-    }) => string;
-}
+export type AdminEventsViewProps = ListingLayoutProps;
 export declare function AdminEventsView({ children, ...props }: AdminEventsViewProps): React.JSX.Element;

package/dist/features/faq/components/FAQAccordion.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div, RichText, Row, Span, Text } from "../../../ui";
+import { Button, Div, RichText, Row, Span, Tabs, TabsList, TabsTrigger, Text } from "../../../ui";
 function FAQAccordionItem({ faq, isOpen, onToggle, renderExpandedFooter, }) {
     return (_jsxs(Div, { className: "border-b border-neutral-200 last:border-0", children: [_jsxs(Button, { variant: "ghost", onClick: onToggle, "aria-expanded": isOpen, className: "w-full justify-[space-between] gap-[1rem] py-[1rem] text-left text-[0.875rem] font-[500] text-[var(--appkit-color-text)] dark:text-[var(--appkit-color-text)] transition hover:text-primary", children: [_jsx(Span, { children: faq.question }), _jsx(Span, { className: `flex-shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), isOpen && (_jsxs(Div, { textSize: "sm", className: "text-[var(--appkit-color-text-muted)]", padding: "b-md", children: [faq.tags && faq.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-3", children: faq.tags.map((tag) => (_jsx(Span, { className: "bg-[var(--appkit-color-surface)] py-[0.25rem] text-[var(--appkit-color-text-muted)]", rounded: "md", padding: "x-xs", size: "xs", children: tag }, tag))) })), faq.answer.format === "html" ? (_jsx(RichText, { html: faq.answer.text, className: "prose-sm" })) : (_jsx(Text, { className: "whitespace-pre-line", children: faq.answer.text })), renderExpandedFooter?.(faq)] }))] }));
 }
@@ -12,6 +12,7 @@ export function FAQAccordion({ faqs, className = "", renderExpandedFooter, label
     }
     return (_jsx(Div, { surface: "card", className: `divide-y divide-neutral-100 divide-[var(--appkit-color-border)] ${className}`, padding: "x-md", children: faqs.map((faq) => (_jsx(FAQAccordionItem, { faq: faq, isOpen: openId === faq.id, onToggle: () => setOpenId(openId === faq.id ? null : faq.id), renderExpandedFooter: renderExpandedFooter }, faq.id))) }));
 }
+const ALL_TAB_VALUE = "__all__";
 export function FAQCategoryTabs({ categories, active, onSelect, labels = {}, }) {
-    return (_jsxs(Row, { wrap: true, gap: "sm", className: "scrollbar-none", children: [_jsx(Button, { onClick: () => onSelect(null), className: `rounded-[9999px] px-[1rem] py-[0.375rem] text-[0.875rem] font-[500] transition ${!active ? "bg-neutral-900 text-white" : "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)] dark:text-[var(--appkit-color-text-faint)] hover:bg-neutral-200 dark:hover:bg-slate-700"}`, children: labels.all ?? "All" }), categories.map((cat) => (_jsx(Button, { onClick: () => onSelect(cat), className: `whitespace-nowrap rounded-[9999px] px-[1rem] py-[0.375rem] text-[0.875rem] font-[500] capitalize transition ${active === cat ? "bg-neutral-900 text-white" : "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)] dark:text-[var(--appkit-color-text-faint)] hover:bg-neutral-200 dark:hover:bg-slate-700"}`, children: labels[cat] ?? cat.replace(/_/g, " ") }, cat)))] }));
+    return (_jsx(Tabs, { value: active ?? ALL_TAB_VALUE, onChange: (next) => onSelect(next === ALL_TAB_VALUE ? null : next), children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: ALL_TAB_VALUE, children: labels.all ?? "All" }), categories.map((cat) => (_jsx(TabsTrigger, { value: cat, children: labels[cat] ?? cat.replace(/_/g, " ") }, cat)))] }) }));
 }

package/dist/features/faq/components/RelatedFAQs.js

@@ -4,5 +4,5 @@ export function RelatedFAQs({ relatedFAQs, hrefForFaq, labels, }) {
     if (!relatedFAQs || relatedFAQs.length === 0) {
         return null;
     }
-    return (_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Heading, { level: 3, className: "mb-4", size: "lg", weight: "semibold", children: labels?.title ?? "Related Questions" }), _jsx(Stack, { gap: "3", children: relatedFAQs.map((faq) => (_jsx(TextLink, { rounded: "lg", href: hrefForFaq ? hrefForFaq(faq) : `/faqs#${faq.id}`, className: "group block bg-[var(--appkit-color-surface-elevated)] p-[1rem] transition-colors hover:bg-[var(--appkit-color-border-subtle)]", children: _jsxs(Row, { align: "start", gap: "3", children: [_jsx("svg", { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-[var(--appkit-color-text-muted)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx(Text, { className: "transition-colors group-hover:text-primary", color: "primary", size: "sm", children: faq.question }), _jsx("svg", { className: "ml-auto mt-0.5 h-4 w-4 flex-shrink-0 text-[var(--appkit-color-text-muted)] opacity-0 transition-opacity group-hover:opacity-100 text-[var(--appkit-color-text-muted)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }) }, faq.id))) })] }));
+    return (_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Heading, { level: 3, className: "mb-4", size: "lg", weight: "semibold", children: labels?.title ?? "Related Questions" }), _jsx(Stack, { gap: "none", className: "divide-y divide-[var(--appkit-color-border)]", children: relatedFAQs.map((faq) => (_jsx(TextLink, { href: hrefForFaq ? hrefForFaq(faq) : `/faqs#${faq.id}`, className: "group block p-[1rem] transition-colors hover:bg-[var(--appkit-color-surface-elevated)]", children: _jsxs(Row, { align: "start", gap: "3", children: [_jsx("svg", { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-[var(--appkit-color-text-muted)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx(Text, { className: "transition-colors group-hover:text-primary", color: "primary", size: "sm", children: faq.question }), _jsx("svg", { className: "ml-auto mt-0.5 h-4 w-4 flex-shrink-0 text-[var(--appkit-color-text-muted)] opacity-0 transition-opacity group-hover:opacity-100 text-[var(--appkit-color-text-muted)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }) }, faq.id))) })] }));
 }

package/dist/features/homepage/components/FAQSection.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { THEMED_BG_PRIMARY, THEMED_BG_TERTIARY, THEMED_BORDER, THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY, FLEX_BETWEEN } from "../../../_internal/shared/styles/themed";
-import { Button, Div, Heading, RichText, Row, Section, Span, Stack, Text, TextLink } from "../../../ui";
+import { Button, Div, Heading, RichText, Section, Span, Stack, Tabs, TabsList, TabsTrigger, Text, TextLink } from "../../../ui";
 import { ChevronDown } from "lucide-react";
 const __O = {
     hidden: "overflow-hidden",
@@ -67,8 +67,8 @@ export function FAQSection({ title, subtitle, items, tabs: tabsProp, showCategor
             return items;
         return items.filter((i) => (i.category ?? "general") === activeTab);
     }, [items, showTabs, activeTab]);
-    return (_jsx(Section, { paddingX: "x-md-2xl", className: className, surface: "subtle", paddingY: "y-4xl", children: _jsxs(Div, { className: "w-full max-w-4xl mx-auto", children: [_jsxs(Div, { className: "text-left mb-10", children: [_jsx(Heading, { level: 2, variant: "none", gradient: "brand", className: "mb-3", mdSize: "4xl", size: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `max-w-xl ${themed.textSecondary}`, size: "base", children: subtitle }))] }), showTabs && (_jsxs(Row, { align: "center", justify: "start", gap: "sm", wrap: true, className: `mb-8`, children: [_jsx(Button, { rounded: "full", variant: activeTab === "all" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("all"), children: "All" }), derivedTabs.map((tab) => (_jsx(Button, { rounded: "full", variant: activeTab === tab.value ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab(tab.value), children: tab.label }, tab.value)))] })), _jsxs(Stack, { gap: "sm", children: [visibleItems.length === 0 && (_jsx(Text, { paddingY: "3xl", align: "start", className: themed.textSecondary, children: "No FAQs in this category yet." })), visibleItems.map((faq) => {
+    return (_jsx(Section, { paddingX: "x-md-2xl", className: className, surface: "subtle", paddingY: "y-4xl", children: _jsxs(Div, { className: "w-full max-w-4xl mx-auto", children: [_jsxs(Div, { className: "text-left mb-10", children: [_jsx(Heading, { level: 2, variant: "none", gradient: "brand", className: "mb-3", mdSize: "4xl", size: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `max-w-xl ${themed.textSecondary}`, size: "base", children: subtitle }))] }), showTabs && (_jsx(Tabs, { value: activeTab, onChange: setActiveTab, className: "mb-8", children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "all", children: "All" }), derivedTabs.map((tab) => (_jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)))] }) })), _jsxs(Stack, { gap: "none", rounded: "xl", className: `${themed.bgPrimary} ${__O.hidden} border ${themed.border}`, children: [visibleItems.length === 0 && (_jsx(Text, { paddingY: "3xl", align: "start", className: themed.textSecondary, children: "No FAQs in this category yet." })), visibleItems.map((faq, index) => {
                             const isOpen = openIds.has(faq.id);
-                            return (_jsxs(Div, { className: `${themed.bgPrimary} rounded-xl overflow-hidden border transition-all duration-200 ${isOpen ? "border-primary/40 shadow-sm" : `${themed.border}`}`, children: [_jsxs(Button, { variant: "ghost", rounded: "none", className: `w-full text-left px-[1.25rem] py-[1rem] ${flex.between} gap-[1rem] hover:${themed.bgTertiary} transition-colors`, onClick: () => toggle(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { size: "sm", weight: "medium", className: `flex-1 leading-snug ${isOpen ? "text-primary" : themed.textPrimary}`, children: faq.question }), _jsx(ChevronDown, { className: `w-4 h-4 flex-shrink-0 transition-transform duration-250 ${isOpen ? "rotate-180 text-primary" : themed.textSecondary}` })] }), _jsx(Div, { layout: "grid", className: `transition-all duration-300 ease-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`, children: _jsx(Div, { className: `${__O.hidden}`, children: _jsx(Div, { paddingY: "b-md-lg", padding: "x-md", children: isHtml(faq.answer) ? (_jsx(RichText, { html: faq.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" })) : (_jsx(Text, { className: `leading-relaxed ${themed.textSecondary}`, size: "sm", children: faq.answer })) }) }) })] }, faq.id));
+                            return (_jsxs(Div, { className: `transition-colors duration-200 ${index < visibleItems.length - 1 ? "border-b border-[var(--appkit-color-border)]" : ""} ${isOpen ? "bg-[var(--appkit-color-surface-elevated)]" : ""}`, children: [_jsxs(Button, { variant: "ghost", rounded: "none", className: `w-full text-left px-[1.25rem] py-[1rem] ${flex.between} gap-[1rem] hover:${themed.bgTertiary} transition-colors`, onClick: () => toggle(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { size: "sm", weight: "medium", className: `flex-1 leading-snug ${isOpen ? "text-primary" : themed.textPrimary}`, children: faq.question }), _jsx(ChevronDown, { className: `w-4 h-4 flex-shrink-0 transition-transform duration-250 ${isOpen ? "rotate-180 text-primary" : themed.textSecondary}` })] }), _jsx(Div, { layout: "grid", className: `transition-all duration-300 ease-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`, children: _jsx(Div, { className: `${__O.hidden}`, children: _jsx(Div, { paddingY: "b-md-lg", padding: "x-md", children: isHtml(faq.answer) ? (_jsx(RichText, { html: faq.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" })) : (_jsx(Text, { className: `leading-relaxed ${themed.textSecondary}`, size: "sm", children: faq.answer })) }) }) })] }, faq.id));
                         })] }), viewMoreHref && (_jsx(Div, { className: "text-left mt-10", children: _jsxs(TextLink, { rounded: "full", paddingX: "xl", paddingY: "sm", href: viewMoreHref, className: "inline-flex items-[center] gap-[0.5rem] bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 transition-colors", size: "sm", weight: "medium", children: [viewMoreLabel, hasMore && moreCount > 0 && (_jsxs(Span, { color: "inverse", size: "xs", className: "bg-primary", rounded: "full", padding: "pill-xs", children: ["+", moreCount] }))] }) }))] }) }));
 }