@mohasinac/appkit 3.3.3 → 3.3.5

package/dist/features/seller/components/SellerPayoutMethodsView.js

@@ -121,5 +121,5 @@ export function SellerPayoutMethodsView({ onCreateClick, onEditClick, onDelete,
             window.location.href = String(ROUTES.STORE.PAYOUT_METHODS_EDIT(id));
         }
     }, [onEditClick]);
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search payout methods...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { gap: "sm", size: "sm", onClick: handleCreate, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "New Method" })] }) }), _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 })), isLoading ? (_jsx(Stack, { gap: "3", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-20 animate-pulse", border: "subtle", surface: "muted", rounded: "xl" }, i))) })) : rows.length === 0 ? (_jsxs(Div, { className: "text-center", padding: "y-4xl", children: [_jsx(Text, { color: "faint", children: "No payout methods yet \u2014 add a UPI VPA or bank account to receive payouts" }), _jsx(Div, { className: "mt-4", children: _jsx(Button, { size: "sm", onClick: handleCreate, children: "Add payout method" }) })] })) : (_jsx(Stack, { gap: "3", children: rows.map((row) => (_jsx("div", { className: "rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-4 py-3", children: _jsxs(Row, { align: "start", justify: "between", gap: "md", children: [_jsx(Row, { className: "min-w-0", align: "start", gap: "3", children: _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: row.label }), _jsx(TypeBadge, { type: row.type }), row.isDefault && (_jsx(Span, { layout: "inline-flex", color: "success", surface: "success-surface", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "Default" })), _jsx(Badge, { variant: row.isActive ? "active" : "inactive", size: "xs", children: row.isActive ? "Active" : "Inactive" })] }), _jsx(Text, { className: "mt-1 font-mono", color: "muted", size: "xs", children: row.maskedIdentifier })] }) }), _jsxs(Row, { className: "shrink-0", align: "center", gap: "sm", children: [!row.isDefault && (_jsx(Button, { size: "sm", variant: "ghost", isLoading: settingDefaultId === row.id, onClick: () => handleSetDefault(row.id), children: "Set Default" })), _jsx(Button, { size: "sm", variant: "outline", onClick: () => handleEdit(row.id), children: "Edit" }), _jsx(Button, { size: "sm", variant: "danger", disabled: deletingId === row.id, onClick: () => setDeleteTargetId(row.id), children: "Delete" })] })] }) }, row.id))) }))] }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Payout Method", message: "Are you sure you want to delete this payout method? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search payout methods...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { gap: "sm", size: "sm", onClick: handleCreate, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "New Method" })] }) }), _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 })), isLoading ? (_jsx(Stack, { gap: "3", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-20 animate-pulse", border: "subtle", surface: "muted", rounded: "xl" }, i))) })) : rows.length === 0 ? (_jsxs(Div, { className: "text-center", padding: "y-4xl", children: [_jsx(Text, { color: "faint", children: "No payout methods yet \u2014 add a UPI VPA or bank account to receive payouts" }), _jsx(Div, { className: "mt-4", children: _jsx(Button, { size: "sm", onClick: handleCreate, children: "Add payout method" }) })] })) : (_jsx(Stack, { gap: "3", children: rows.map((row) => (_jsx(Div, { className: "rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-4 py-3", children: _jsxs(Row, { align: "start", justify: "between", gap: "md", children: [_jsx(Row, { className: "min-w-0", align: "start", gap: "3", children: _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: row.label }), _jsx(TypeBadge, { type: row.type }), row.isDefault && (_jsx(Span, { layout: "inline-flex", color: "success", surface: "success-surface", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "Default" })), _jsx(Badge, { variant: row.isActive ? "active" : "inactive", size: "xs", children: row.isActive ? "Active" : "Inactive" })] }), _jsx(Text, { className: "mt-1 font-mono", color: "muted", size: "xs", children: row.maskedIdentifier })] }) }), _jsxs(Row, { className: "shrink-0", align: "center", gap: "sm", children: [!row.isDefault && (_jsx(Button, { size: "sm", variant: "ghost", isLoading: settingDefaultId === row.id, onClick: () => handleSetDefault(row.id), children: "Set Default" })), _jsx(Button, { size: "sm", variant: "outline", onClick: () => handleEdit(row.id), children: "Edit" }), _jsx(Button, { size: "sm", variant: "danger", disabled: deletingId === row.id, onClick: () => setDeleteTargetId(row.id), children: "Delete" })] })] }) }, row.id))) }))] }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Payout Method", message: "Are you sure you want to delete this payout method? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }

package/dist/features/seller/components/SellerProductsView.js

@@ -214,6 +214,41 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
         .filter((r) => !deletedIds.has(r.id))
         .map((r) => statusOverrides.has(r.id) ? { ...r, status: statusOverrides.get(r.id) } : r);
     const selection = useBulkSelection({ items: visibleRows, keyExtractor: (r) => r.id });
+    // handleBulkPrintLabels/handleSetLocation (useCallback) and useBottomActions
+    // must run unconditionally on every render — they were previously declared
+    // after the `hasChildren` early return below, which skips these hook calls
+    // in passthrough mode, violating the Rules of Hooks.
+    const handleBulkPrintLabels = useCallback(() => {
+        const ids = selection.selectedIds.join(",");
+        void dispatch({
+            type: "NAVIGATE",
+            href: `${String(ROUTES.STORE.INVENTORY_PRINT)}?type=product&ids=${ids}&autoprint=1`,
+        });
+    }, [selection.selectedIds, dispatch]);
+    const handleSetLocation = useCallback(async (loc) => {
+        try {
+            const res = await fetch(SELLER_ENDPOINTS.PRODUCTS_BULK_LOCATION, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ productIds: selection.selectedIds, physicalLocation: loc }),
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => null);
+                throw new Error(body?.error ?? "Failed to update location");
+            }
+            showToast("Location updated.", "success");
+            setSetLocationOpen(false);
+        }
+        catch (err) {
+            void normalizeError(err);
+            showToast(err instanceof Error ? err.message : "Failed to update location.", "error");
+        }
+    }, [selection.selectedIds, showToast]);
+    const bulkActions = [
+        buildBulkAction(ACTIONS.STORE["print-labels"], handleBulkPrintLabels, { icon: _jsx(Printer, { className: "w-4 h-4" }) }),
+        buildBulkAction(ACTIONS.STORE["set-location"], () => setSetLocationOpen(true), { icon: _jsx(MapPin, { className: "w-4 h-4" }) }),
+    ];
+    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
     if (hasChildren) {
         return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
     }
@@ -262,37 +297,6 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
             setPublishingId(null);
         }
     };
-    const handleBulkPrintLabels = useCallback(() => {
-        const ids = selection.selectedIds.join(",");
-        void dispatch({
-            type: "NAVIGATE",
-            href: `${String(ROUTES.STORE.INVENTORY_PRINT)}?type=product&ids=${ids}&autoprint=1`,
-        });
-    }, [selection.selectedIds, dispatch]);
-    const handleSetLocation = useCallback(async (loc) => {
-        try {
-            const res = await fetch(SELLER_ENDPOINTS.PRODUCTS_BULK_LOCATION, {
-                method: "PATCH",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ productIds: selection.selectedIds, physicalLocation: loc }),
-            });
-            if (!res.ok) {
-                const body = await res.json().catch(() => null);
-                throw new Error(body?.error ?? "Failed to update location");
-            }
-            showToast("Location updated.", "success");
-            setSetLocationOpen(false);
-        }
-        catch (err) {
-            void normalizeError(err);
-            showToast(err instanceof Error ? err.message : "Failed to update location.", "error");
-        }
-    }, [selection.selectedIds, showToast]);
-    const bulkActions = [
-        buildBulkAction(ACTIONS.STORE["print-labels"], handleBulkPrintLabels, { icon: _jsx(Printer, { className: "w-4 h-4" }) }),
-        buildBulkAction(ACTIONS.STORE["set-location"], () => setSetLocationOpen(true), { icon: _jsx(MapPin, { className: "w-4 h-4" }) }),
-    ];
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
     return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search products by name\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
                             { label: "Show sold", active: showSold, onChange: (next) => table.set("showSold", next ? "true" : "") },
                         ], extra: onCreateClick ? (_jsx(Button, { variant: "primary", size: "sm", onClick: onCreateClick, children: "+ New Listing" })) : null }), _jsx(TypeDropdown, { active: listingKind, onChange: handleKindChange }), totalPages > 1 && (_jsx(Row, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm border-b border-[var(--appkit-color-border)] py-[0.375rem]", padding: "x-sm", justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedIds.length > 0 && (_jsx(Div, { paddingX: "x-sm-lg-md", className: "sticky top-[calc(var(--header-height,0px)+88px)] z-20 bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm border-b border-[var(--appkit-color-border)]", padding: "y-xs", children: _jsx(BulkActionBar, { selectedCount: selection.selectedIds.length, onClearSelection: selection.clearSelection, actions: bulkActions }) })), _jsxs(Div, { paddingX: "x-sm-lg-md", padding: "y-md", children: [errorMessage && (_jsx(Alert, { variant: "error", className: "mb-4", children: errorMessage })), view !== "table" && (_jsx(SellerProductsCards, { view: view, rows: visibleRows, isLoading: isLoading, listingKind: listingKind, selectedIds: selection.selectedIdSet, toggle: selection.toggle, onEdit: handleEdit, onDuplicate: (row) => void handleDuplicate(row), onDelete: onDeleteProduct ? (row) => void handleDelete(row) : undefined })), view === "table" && (_jsx(DataTable, { columns: PRODUCT_COLUMNS, rows: visibleRows, isLoading: isLoading, emptyLabel: listingKind !== "all"

package/dist/features/seller/components/SellerReviewsView.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Alert, Badge, BulkActionBar, Button, Checkbox, Div, Modal, Row, Select, SideDrawer, Span, Stack, Text, Textarea, } from "../../../ui";
+import { Alert, Badge, BulkActionBar, Button, Checkbox, Div, Modal, Row, Select, SideDrawer, Span, Stack, Text, Textarea } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
 import { useBottomActions } from "../../layout";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";

package/dist/features/seller/schemas/index.d.ts

@@ -167,8 +167,8 @@ export declare const payoutRecordSchema: z.ZodObject<{
     createdAt: z.ZodString;
     updatedAt: z.ZodString;
 }, "strip", z.ZodTypeAny, {
-    status: "pending" | "paid" | "failed" | "processing";
     currency: string;
+    status: "pending" | "paid" | "failed" | "processing";
     createdAt: string;
     id: string;
     updatedAt: string;
@@ -184,8 +184,8 @@ export declare const payoutRecordSchema: z.ZodObject<{
     sellerId: string;
     processedAt?: string | undefined;
 }, {
-    status: "pending" | "paid" | "failed" | "processing";
     currency: string;
+    status: "pending" | "paid" | "failed" | "processing";
     createdAt: string;
     id: string;
     updatedAt: string;

package/dist/features/shell/QuickFormDrawer.js

@@ -121,7 +121,7 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
     if (!isOpen)
         return null;
     const busy = submitting || isLoading;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs("div", { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed inset-y-0 right-0 flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]", children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed inset-y-0 right-0 flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]", children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
                                 const value = values[field.name];
                                 if (field.type === "toggle") {
                                     return (_jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));

package/dist/features/stores/columns/index.js

@@ -1,4 +1,4 @@
-import { buildColumns, renderBoolean, renderNullable, renderRating, } from "../../../ui/columns";
+import { buildColumns, renderBoolean, renderNullable, renderRating } from "../../../ui/columns";
 /**
  * Default admin column definitions for a store table.
  *

package/dist/features/stores/components/StoresIndexListing.js

@@ -121,6 +121,26 @@ export function StoresIndexListing({ initialData }) {
         filters: filterParts.length > 0 ? filterParts.join(",") : undefined,
     }, { initialData });
     const selection = useBulkSelection({ items: stores, keyExtractor: (s) => s.id ?? s.storeSlug });
+    // useBottomActions must run unconditionally on every render, once per
+    // component — it was previously mis-placed inside the grid view's
+    // `stores.map(...)` callback below, which fired it once per store in the
+    // list (a severe Rules-of-Hooks violation) instead of once for the whole
+    // bulk-selection bar.
+    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
+                {
+                    id: ACTION_ID.COMPARE,
+                    label: "Compare",
+                    variant: "secondary",
+                    onClick: () => { selection.clearSelection(); },
+                },
+                {
+                    id: "visit",
+                    label: "Visit Store",
+                    variant: "primary",
+                    disabled: selection.selectedCount !== 1,
+                    onClick: () => { selection.clearSelection(); },
+                },
+            ] } } : {});
     return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search stores...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: STORE_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: stores.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                     {
                         id: ACTION_ID.COMPARE,
@@ -140,21 +160,6 @@ export function StoresIndexListing({ initialData }) {
                         return (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(storeKey)), selectable: selection.isSelecting, isSelected: selection.isSelected(store.id ?? store.storeSlug), onSelect: (id, sel) => { void sel; selection.toggle(id); } }, storeKey));
                     }) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: stores.map((store) => {
                         const storeKey = store.storeSlug ?? store.id;
-                        useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                                    {
-                                        id: ACTION_ID.COMPARE,
-                                        label: "Compare",
-                                        variant: "secondary",
-                                        onClick: () => { selection.clearSelection(); },
-                                    },
-                                    {
-                                        id: "visit",
-                                        label: "Visit Store",
-                                        variant: "primary",
-                                        disabled: selection.selectedCount !== 1,
-                                        onClick: () => { selection.clearSelection(); },
-                                    },
-                                ] } } : {});
                         return (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(storeKey)), selectable: selection.isSelecting, isSelected: selection.isSelected(store.id ?? store.storeSlug), onSelect: (id, sel) => { void sel; selection.toggle(id); } }, storeKey));
                     }) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: pendingFilterCount, children: _jsx(StoreFilters, { table: pendingTable }) })] }));
 }

package/dist/features/wishlist/actions/wishlist-actions.js

@@ -5,7 +5,7 @@
  * Auth, rate-limiting, and Next.js specifics are handled by the consumer.
  */
 import { ValidationError } from "../../../errors";
-import { wishlistRepository, } from "../repository/user-wishlist.repository";
+import { wishlistRepository } from "../repository/user-wishlist.repository";
 import { productRepository } from "../../products/repository/products.repository";
 export { WishlistFullError } from "../repository/user-wishlist.repository";
 export async function addToWishlist(userSlug, productId, extras) {

package/dist/next/ErrorBoundary.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from "react";
 import { Button } from "../ui/components/Button";
+import { Div } from "../ui/components/Div";
 import { Heading, Text } from "../ui/components/Typography";
 function DefaultFallback({ error, onReset, }) {
-    return (_jsxs("div", { className: "flex min-h-[40vh] flex-col items-center justify-center gap-4 rounded-xl border border-zinc-200 bg-[var(--appkit-color-surface)] p-6 text-center border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", "data-section": "errorboundary-div-445", children: [_jsx(Heading, { level: 2, children: "Something went wrong" }), _jsx(Text, { variant: "secondary", children: "An unexpected error occurred. Please try again." }), process.env.NODE_ENV === "development" && error ? (_jsx("pre", { className: "max-w-full overflow-auto rounded-md bg-[var(--appkit-color-surface)] p-3 text-left text-xs bg-[var(--appkit-color-surface-elevated)]", children: error.message })) : null, _jsx(Button, { type: "button", onClick: onReset, children: "Try again" })] }));
+    return (_jsxs(Div, { className: "flex min-h-[40vh] flex-col items-center justify-center gap-4 rounded-xl border border-zinc-200 bg-[var(--appkit-color-surface)] p-6 text-center border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", "data-section": "errorboundary-div-445", children: [_jsx(Heading, { level: 2, children: "Something went wrong" }), _jsx(Text, { variant: "secondary", children: "An unexpected error occurred. Please try again." }), process.env.NODE_ENV === "development" && error ? (_jsx("pre", { className: "max-w-full overflow-auto rounded-md bg-[var(--appkit-color-surface)] p-3 text-left text-xs bg-[var(--appkit-color-surface-elevated)]", children: error.message })) : null, _jsx(Button, { type: "button", onClick: onReset, children: "Try again" })] }));
 }
 export class ErrorBoundary extends Component {
     constructor(props) {

package/dist/next/components/NotFoundView.js

@@ -1,4 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * NotFoundView — Next.js not-found.tsx template.
+ *
+ * Rendered when `notFound()` is called inside a route segment, or when a
+ * route is not matched.
+ * @see https://nextjs.org/docs/app/api-reference/file-conventions/not-found
+ *
+ * Usage in your app:
+ *   // app/[locale]/not-found.tsx
+ *   export { NotFoundView as default } from "@mohasinac/appkit/next";
+ *
+ *   // Or with customisation:
+ *   import { NotFoundView } from "@mohasinac/appkit/next";
+ *   export default function NotFound() {
+ *     return <NotFoundView heading="Page not found" homeHref="/en" />;
+ *   }
+ */
 import { Heading, Text } from "../../ui/components/Typography";
 import { TextLink } from "../../ui/components/TextLink";
 import { DEFAULT_ROUTE_MAP } from "../routing/route-map";

package/dist/next/components/UnauthorizedView.js

@@ -1,4 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * UnauthorizedView — 401 page template.
+ *
+ * Render this when a user tries to access a resource they are not
+ * authenticated for. Wire up the `loginHref` prop to your sign-in route.
+ *
+ * Usage in your app:
+ *   // app/[locale]/unauthorized/page.tsx
+ *   import { UnauthorizedView } from "@mohasinac/appkit/next";
+ *   export default function UnauthorizedPage() {
+ *     return <UnauthorizedView loginHref="/en/auth/login" />;
+ *   }
+ */
 import { Row } from "../../ui/components/Layout";
 import { Heading, Text } from "../../ui/components/Typography";
 import { TextLink } from "../../ui/components/TextLink";