@mohasinac/appkit 2.1.3 → 2.2.0

package/dist/features/layout/BottomActionsContext.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BottomActionsContext
+ *
+ * Provides a context for registering page-level mobile action bars.
+ * Features call `useBottomActions` to push actions; the `<BottomActions>`
+ * layout component reads this context and renders the bar above BottomNavbar.
+ *
+ * Supports two modes:
+ *  - Page mode: primary page actions (Add to Cart, Buy Now, Place Bid, etc.)
+ *  - Bulk mode: activated when `bulk.selectedCount > 0` — shows selection
+ *    count + custom bulk action buttons (Delete, Archive, Export, etc.)
+ *
+ * @example — product detail page
+ * ```tsx
+ * useBottomActions({
+ *   actions: [
+ *     { id: "wishlist", icon: <Heart className="w-4 h-4" />, label: t("wishlist"), variant: "ghost", grow: false, onClick: handleWishlist },
+ *     { id: "cart",    label: t("addToCart"), variant: "outline", onClick: handleAddToCart },
+ *     { id: "buy",     label: t("buyNow"),    variant: "primary", onClick: handleBuyNow },
+ *   ],
+ * });
+ * ```
+ *
+ * @example — admin listing with bulk select
+ * ```tsx
+ * useBottomActions({
+ *   bulk: {
+ *     selectedCount: selectedIds.length,
+ *     onClearSelection: () => setSelectedIds([]),
+ *     actions: [
+ *       { id: "delete", label: t("bulkDelete", { count: selectedIds.length }), variant: "danger", onClick: handleBulkDelete },
+ *     ],
+ *   },
+ * });
+ * ```
+ */
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
+const EMPTY = { actions: [] };
+const BottomActionsContext = createContext(null);
+// ─── Provider ─────────────────────────────────────────────────────────────────
+export function BottomActionsProvider({ children, }) {
+    const [state, setState] = useState(EMPTY);
+    // Callback refs — updated on every setActions call, so the component always
+    // dispatches the latest onClick regardless of when the state last diffed.
+    const actionCallbacksRef = useRef(new Map());
+    const bulkCallbacksRef = useRef(new Map());
+    const bulkClearRef = useRef(undefined);
+    const setActions = useCallback((actions) => {
+        // Update callback map (always latest)
+        actionCallbacksRef.current = new Map(actions.map((a) => [a.id, a.onClick]));
+        // Update display state (strip onClick to avoid referential churn on stable data)
+        setState((prev) => ({
+            ...prev,
+            actions: actions.map(({ onClick: _onClick, ...rest }) => ({
+                ...rest,
+                onClick: _onClick, // kept for type compat, actual dispatch uses ref
+            })),
+        }));
+    }, []);
+    const setBulkConfig = useCallback((config) => {
+        if (config) {
+            bulkCallbacksRef.current = new Map(config.actions.map((a) => [a.id, a.onClick]));
+            bulkClearRef.current = config.onClearSelection;
+        }
+        else {
+            bulkCallbacksRef.current = new Map();
+            bulkClearRef.current = undefined;
+        }
+        setState((prev) => ({
+            ...prev,
+            bulk: config
+                ? {
+                    ...config,
+                    actions: config.actions.map(({ onClick: _onClick, ...rest }) => ({
+                        ...rest,
+                        onClick: _onClick,
+                    })),
+                }
+                : undefined,
+        }));
+    }, []);
+    const setInfoLabel = useCallback((infoLabel) => {
+        setState((prev) => ({ ...prev, infoLabel }));
+    }, []);
+    const clearAll = useCallback(() => {
+        actionCallbacksRef.current = new Map();
+        bulkCallbacksRef.current = new Map();
+        bulkClearRef.current = undefined;
+        setState(EMPTY);
+    }, []);
+    const value = useMemo(() => ({
+        state,
+        setActions,
+        actionCallbacksRef,
+        setBulkConfig,
+        bulkCallbacksRef,
+        bulkClearRef,
+        setInfoLabel,
+        clearAll,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, setActions, setBulkConfig, setInfoLabel, clearAll]);
+    return (_jsx(BottomActionsContext.Provider, { value: value, children: children }));
+}
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+export function useBottomActionsContext() {
+    const ctx = useContext(BottomActionsContext);
+    if (!ctx) {
+        throw new Error("useBottomActionsContext must be used within <BottomActionsProvider>");
+    }
+    return ctx;
+}

package/dist/features/layout/BottomNavItem.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface BottomNavItemProps {
+    href: string;
+    label: string;
+    icon: React.ReactNode;
+    badge?: number | null;
+    isActive?: boolean;
+    className?: string;
+}
+/**
+ * BottomNavItem — a single tap target inside `<BottomNavLayout>`.
+ *
+ * Renders as `<a>` via Next.js `<Link>`. The consumer project wires
+ * `isActive` by comparing the current pathname against `href`.
+ *
+ * @example
+ * ```tsx
+ * <BottomNavLayout ariaLabel="Main navigation">
+ *   <BottomNavItem
+ *     href="/products"
+ *     icon={<ShoppingBagIcon className="w-6 h-6" />}
+ *     label="Shop"
+ *     isActive={pathname === "/products"}
+ *   />
+ * </BottomNavLayout>
+ * ```
+ */
+export declare function BottomNavItem({ href, label, icon, badge, isActive, className, }: BottomNavItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/BottomNavItem.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Li, Span } from "../../ui";
+/**
+ * BottomNavItem — a single tap target inside `<BottomNavLayout>`.
+ *
+ * Renders as `<a>` via Next.js `<Link>`. The consumer project wires
+ * `isActive` by comparing the current pathname against `href`.
+ *
+ * @example
+ * ```tsx
+ * <BottomNavLayout ariaLabel="Main navigation">
+ *   <BottomNavItem
+ *     href="/products"
+ *     icon={<ShoppingBagIcon className="w-6 h-6" />}
+ *     label="Shop"
+ *     isActive={pathname === "/products"}
+ *   />
+ * </BottomNavLayout>
+ * ```
+ */
+export function BottomNavItem({ href, label, icon, badge, isActive = false, className, }) {
+    // Use a plain anchor so this component stays framework-agnostic.
+    // Consumer projects may swap for next/link if preferred.
+    return (_jsx(Li, { className: "flex-1", children: _jsxs("a", { href: href, "aria-label": label, "aria-current": isActive ? "page" : undefined, className: `relative flex flex-col items-center justify-center gap-0.5 h-full w-full min-h-[44px] transition-colors ${isActive
+                ? "text-primary-600 dark:text-secondary-400"
+                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"}${className ? ` ${className}` : ""}`, children: [_jsxs(Span, { className: "relative", children: [icon, badge != null && badge > 0 && (_jsx(Span, { "aria-label": `${badge} items`, className: "absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold bg-secondary-500 text-white flex items-center justify-center leading-none", children: badge > 99 ? "99+" : badge }))] }), _jsx(Span, { className: "text-[10px] font-medium leading-none", children: label })] }) }));
+}

package/dist/features/layout/BottomNavLayout.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface BottomNavLayoutProps {
+    ariaLabel: string;
+    children: React.ReactNode;
+    id?: string;
+    className?: string;
+}
+/**
+ * BottomNavLayout — generic fixed-bottom navigation shell.
+ *
+ * Provides the `nav + ul` container with correct z-index, background, height,
+ * and safe-area inset. Pass `li`-wrapped items as children.
+ */
+export declare function BottomNavLayout({ ariaLabel, children, id, className, }: BottomNavLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/BottomNavLayout.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Nav, Ul } from "../../ui";
+/**
+ * BottomNavLayout — generic fixed-bottom navigation shell.
+ *
+ * Provides the `nav + ul` container with correct z-index, background, height,
+ * and safe-area inset. Pass `li`-wrapped items as children.
+ */
+export function BottomNavLayout({ ariaLabel, children, id = "bottom-navbar", className, }) {
+    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, className: `fixed bottom-0 left-0 right-0 md:hidden z-40 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80 shadow-2xl pb-safe${className ? ` ${className}` : ""}`, children: _jsx(Ul, { className: "flex items-stretch h-14", children: children }) }));
+}

package/dist/features/layout/BottomNavbar.d.ts

@@ -0,0 +1,46 @@
+export interface BottomNavbarUser {
+    displayName: string | null;
+    email: string | null;
+    photoURL: string | null;
+    role?: string;
+    avatarMetadata?: {
+        url: string;
+        position: {
+            x: number;
+            y: number;
+        };
+        zoom: number;
+    } | null;
+}
+export interface BottomNavbarProps {
+    /** Authenticated user � if provided, shows profile slot with avatar */
+    user?: BottomNavbarUser | null;
+    /** href for the Home nav item */
+    homeHref: string;
+    /** href for the Shop/Products nav item */
+    shopHref: string;
+    /** href for the Cart link */
+    cartHref: string;
+    /** href for authenticated user Profile page */
+    profileHref: string;
+    /** href for the Login page (shown when unauthenticated) */
+    loginHref: string;
+    /** Called when the Search slot is tapped */
+    onSearchToggle?: () => void;
+    /** CSS class applied to the active nav item. Default: "text-primary-600 dark:text-primary-400" */
+    activeClassName?: string;
+    /** CSS class applied to inactive nav items. Default: "text-zinc-500 dark:text-slate-400" */
+    inactiveClassName?: string;
+    /** CSS class applied to nav icons */
+    iconClassName?: string;
+    /** CSS class applied to nav labels */
+    labelClassName?: string;
+    /** Maps a user role string to a CSS badge class */
+    getRoleBadgeClass?: (role: string) => string;
+}
+/**
+ * BottomNavbar � mobile bottom navigation bar (5 slots: home, shop, search, cart, profile).
+ *
+ * Pass `user` from your auth context to render the profile slot with avatar.
+ */
+export declare function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref, loginHref, onSearchToggle, activeClassName, inactiveClassName, iconClassName, labelClassName, getRoleBadgeClass, }: BottomNavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/BottomNavbar.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { AvatarDisplay, Button, Li, Span, TextLink } from "../../ui";
+import { BottomNavLayout } from "./BottomNavLayout";
+import { NavItem } from "./NavItem";
+/**
+ * BottomNavbar � mobile bottom navigation bar (5 slots: home, shop, search, cart, profile).
+ *
+ * Pass `user` from your auth context to render the profile slot with avatar.
+ */
+export function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref, loginHref, onSearchToggle, activeClassName = "text-primary-600 dark:text-primary-400", inactiveClassName = "text-zinc-500 dark:text-slate-400", iconClassName, labelClassName = "text-[10px] leading-none", getRoleBadgeClass, }) {
+    const pathname = usePathname();
+    const t = useTranslations("nav");
+    const itemStyle = { width: "20%" };
+    return (_jsxs(BottomNavLayout, { ariaLabel: t("mobileNav"), children: [_jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: homeHref, label: t("home"), icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: shopHref, label: t("products"), icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs(Button, { variant: "ghost", onClick: onSearchToggle, className: `flex flex-col items-center justify-center gap-1 w-full h-full transition-colors duration-200 ${inactiveClassName}`, "aria-label": t("search"), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: t("search") })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `flex flex-col items-center justify-center gap-1 w-full h-full transition-colors duration-200 relative ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": t("cart"), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), _jsx(Span, { className: labelClassName, children: t("cart") })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `flex flex-col items-center justify-center gap-1 w-full h-full transition-colors duration-200 ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": t("profile"), children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
+                                (user.photoURL ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 } : null), size: "sm", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Span, { className: `text-[7px] font-semibold uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-zinc-500 dark:text-slate-400"}`, children: user.role }))] })) : (_jsx(NavItem, { href: loginHref, label: t("profile"), icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), isActive: pathname === loginHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName })) })] }));
+}

package/dist/features/layout/BottomSheet.d.ts

@@ -0,0 +1,29 @@
+import "client-only";
+import React from "react";
+export interface BottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    /** Extra classes on the drawer panel */
+    className?: string;
+    /** Max height of the sheet. Defaults to "max-h-[85dvh]" */
+    maxHeight?: string;
+}
+/**
+ * BottomSheet — mobile-first drawer that slides up from the bottom.
+ *
+ * - Slides up from the bottom on mobile.
+ * - Accessible: focuses trap not implemented (add `focus-trap-react` if needed),
+ *   but `role="dialog"`, `aria-modal`, and `aria-label` are set.
+ * - Closes on backdrop click or Escape key.
+ * - Hidden on `lg:` and above (use a sidebar instead).
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet open={isOpen} onClose={() => setIsOpen(false)} title="Filters">
+ *   <FilterPanel />
+ * </BottomSheet>
+ * ```
+ */
+export declare function BottomSheet({ open, onClose, title, children, className, maxHeight, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/layout/BottomSheet.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "client-only";
+import { useEffect, useCallback } from "react";
+import { Button, Div, Row, Span } from "../../ui";
+/**
+ * BottomSheet — mobile-first drawer that slides up from the bottom.
+ *
+ * - Slides up from the bottom on mobile.
+ * - Accessible: focuses trap not implemented (add `focus-trap-react` if needed),
+ *   but `role="dialog"`, `aria-modal`, and `aria-label` are set.
+ * - Closes on backdrop click or Escape key.
+ * - Hidden on `lg:` and above (use a sidebar instead).
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet open={isOpen} onClose={() => setIsOpen(false)} title="Filters">
+ *   <FilterPanel />
+ * </BottomSheet>
+ * ```
+ */
+export function BottomSheet({ open, onClose, title, children, className, maxHeight = "max-h-[85dvh]", }) {
+    const handleEscape = useCallback((e) => {
+        if (e.key === "Escape")
+            onClose();
+    }, [onClose]);
+    useEffect(() => {
+        if (open) {
+            document.addEventListener("keydown", handleEscape);
+            document.body.style.overflow = "hidden";
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+            document.body.style.overflow = "";
+        };
+    }, [open, handleEscape]);
+    if (!open)
+        return null;
+    return (_jsxs(Div, { className: "fixed inset-0 z-50 lg:hidden", role: "presentation", children: [_jsx(Div, { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", "aria-hidden": "true", onClick: onClose }), _jsxs(Div, { role: "dialog", "aria-modal": "true", "aria-label": title, className: `absolute bottom-0 inset-x-0 flex flex-col rounded-t-2xl bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 shadow-2xl ${maxHeight} animate-slide-up${className ? ` ${className}` : ""}`, children: [_jsxs(Row, { justify: "between", className: "px-4 py-3 border-b border-zinc-100 dark:border-zinc-800 shrink-0", children: [_jsx(Div, { className: "absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-600" }), title && (_jsx(Span, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-100 mt-2", children: title })), _jsx(Button, { type: "button", onClick: onClose, "aria-label": "Close", className: "ml-auto mt-2 p-1.5 rounded-lg text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx(Div, { className: "flex-1 overflow-y-auto overscroll-contain pb-[env(safe-area-inset-bottom)]", children: children })] })] }));
+}

package/dist/features/layout/Breadcrumbs.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+export interface BreadcrumbsProps {
+    children: React.ReactNode;
+    separator?: React.ReactNode;
+    className?: string;
+}
+export interface BreadcrumbItemProps {
+    href?: string;
+    children: React.ReactNode;
+    /** Marks this item as the current page — renders as plain text, not link. */
+    current?: boolean;
+    className?: string;
+}
+/**
+ * Breadcrumbs — navigation hierarchy showing the user's location.
+ * Automatically adds separators between items.
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem current>Detail</BreadcrumbItem>
+ * </Breadcrumbs>
+ */
+export declare function Breadcrumbs({ children, separator, className, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbItem({ href, children, current, className, }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/Breadcrumbs.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Link from "next/link";
+import { Li, Nav, Ol, Span } from "../../ui";
+/**
+ * Breadcrumbs — navigation hierarchy showing the user's location.
+ * Automatically adds separators between items.
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem current>Detail</BreadcrumbItem>
+ * </Breadcrumbs>
+ */
+export function Breadcrumbs({ children, separator = "/", className = "", }) {
+    const items = React.Children.toArray(children);
+    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-2 text-sm flex-wrap", children: items.map((item, index) => (_jsxs(Li, { className: "flex items-center gap-2", children: [item, index < items.length - 1 && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-500 select-none", "aria-hidden": "true", children: separator }))] }, index))) }) }));
+}
+export function BreadcrumbItem({ href, children, current = false, className = "", }) {
+    if (current || !href) {
+        return (_jsx(Span, { "aria-current": current ? "page" : undefined, className: `text-zinc-500 dark:text-zinc-400 ${className}`, children: children }));
+    }
+    return (_jsx(Link, { href: href, className: `text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors ${className}`, children: children }));
+}

package/dist/features/layout/DashboardNavContext.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export interface DashboardNavState {
+    /** Whether a dashboard section has registered its nav handler. */
+    hasNav: boolean;
+    /** Open the registered dashboard navigation drawer. */
+    openNav: () => void;
+    /** Register a callback that opens the dashboard nav drawer. */
+    registerNav: (opener: () => void) => void;
+    /** Unregister the dashboard nav (on unmount). */
+    unregisterNav: () => void;
+}
+export declare function DashboardNavProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * useDashboardNav — read the dashboard navigation context.
+ * Returns a no-op state when rendered outside a DashboardNavProvider.
+ */
+export declare function useDashboardNav(): DashboardNavState;

package/dist/features/layout/DashboardNavContext.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef, useState, } from "react";
+const DashboardNavContext = createContext(null);
+export function DashboardNavProvider({ children }) {
+    const openerRef = useRef(null);
+    const [hasNav, setHasNav] = useState(false);
+    const registerNav = useCallback((opener) => {
+        openerRef.current = opener;
+        setHasNav(true);
+    }, []);
+    const unregisterNav = useCallback(() => {
+        openerRef.current = null;
+        setHasNav(false);
+    }, []);
+    const openNav = useCallback(() => {
+        openerRef.current?.();
+    }, []);
+    return (_jsx(DashboardNavContext.Provider, { value: { hasNav, openNav, registerNav, unregisterNav }, children: children }));
+}
+/**
+ * useDashboardNav — read the dashboard navigation context.
+ * Returns a no-op state when rendered outside a DashboardNavProvider.
+ */
+export function useDashboardNav() {
+    const ctx = useContext(DashboardNavContext);
+    if (!ctx) {
+        return {
+            hasNav: false,
+            openNav: () => { },
+            registerNav: () => { },
+            unregisterNav: () => { },
+        };
+    }
+    return ctx;
+}

package/dist/features/layout/FooterLayout.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+export interface FooterLinkGroup {
+    heading: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+export interface FooterSocialLink {
+    platform: string;
+    href: string;
+    icon: React.ReactNode;
+    ariaLabel: string;
+}
+export interface TrustBarItem {
+    id?: string;
+    icon: React.ReactNode;
+    /** Primary label text. */
+    label: string;
+    /** Optional secondary text shown below the label. */
+    subtitle?: string;
+    visible?: boolean;
+}
+export interface FooterLayoutProps {
+    brandName: string;
+    brandDescription: string;
+    socialLinks: FooterSocialLink[];
+    linkGroups: FooterLinkGroup[];
+    copyrightText: string;
+    madeInText?: string;
+    /** Optional newsletter subscription slot. */
+    newsletterSlot?: React.ReactNode;
+    newsletterEnabled?: boolean;
+    /** When true, renders the trust bar above the main footer content. */
+    showTrustBar?: boolean;
+    trustBarItems?: TrustBarItem[];
+    id?: string;
+}
+export declare function FooterLayout({ brandName, brandDescription, socialLinks, linkGroups, copyrightText, madeInText, newsletterSlot, newsletterEnabled, showTrustBar, trustBarItems, id, }: FooterLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/FooterLayout.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { BlockFooter, Button, Div, Heading, Li, Row, Span, Text, Ul, } from "../../ui";
+export function FooterLayout({ brandName, brandDescription, socialLinks, linkGroups, copyrightText, madeInText, newsletterSlot, newsletterEnabled = true, showTrustBar = false, trustBarItems = [], id = "footer", }) {
+    const [openGroups, setOpenGroups] = useState({});
+    const toggleGroup = (idx) => setOpenGroups((prev) => ({ ...prev, [idx]: !prev[idx] }));
+    const visibleTrustItems = trustBarItems.filter((item) => item.visible !== false);
+    return (_jsxs(BlockFooter, { id: id, className: "bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { className: "border-b border-zinc-200 dark:border-slate-800 py-6", children: _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsx(Row, { as: "ul", wrap: true, justify: "center", gap: "lg", className: "lg:gap-10", children: visibleTrustItems.map((item, i) => (_jsx(Li, { children: _jsxs(Row, { gap: "sm", className: "text-sm min-w-[160px]", children: [_jsx(Span, { className: "flex-shrink-0 text-primary-600 dark:text-secondary-400", children: item.icon }), _jsxs(Span, { children: [_jsx(Span, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: item.label }), item.subtitle && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400 text-xs", children: item.subtitle }))] })] }) }, item.id ?? String(i)))) }) }) })), _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] py-10 lg:py-14", children: [_jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-16", children: [_jsxs(Div, { className: "lg:col-span-2 space-y-4", children: [_jsx(Heading, { level: 5, className: "text-zinc-900 dark:text-zinc-100", children: brandName }), _jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-sm", children: brandDescription }), socialLinks.length > 0 && (_jsx(Row, { as: Ul, gap: "sm", children: socialLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, "aria-label": link.ariaLabel, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-9 h-9 rounded-full border border-zinc-200 dark:border-slate-700 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:border-zinc-300 dark:hover:border-slate-600 transition-colors", children: link.icon }) }, link.platform))) })), newsletterEnabled && newsletterSlot && (_jsx(Div, { className: "pt-2", children: newsletterSlot }))] }), _jsx(Div, { className: "lg:col-span-3 grid grid-cols-1 sm:grid-cols-3 gap-0 sm:gap-8", children: linkGroups.map((group, idx) => (_jsxs(Div, { children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => toggleGroup(idx), className: "sm:hidden flex items-center justify-between w-full py-3 border-b border-zinc-200 dark:border-slate-800 text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: [group.heading, _jsx(ChevronDown, { className: `w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}` })] }), _jsx(Ul, { className: `sm:hidden overflow-hidden transition-all duration-200 ${openGroups[idx] ? "max-h-96 py-3" : "max-h-0"} space-y-2.5`, children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden sm:block", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-3", children: group.heading }), _jsx(Ul, { className: "space-y-2.5", children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors", children: link.label }) }, link.href))) })] })] }, idx))) })] }), _jsxs(Div, { className: "mt-10 pt-6 border-t border-zinc-200 dark:border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-zinc-600 dark:text-zinc-400", children: [_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: copyrightText }), madeInText && (_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: madeInText }))] })] })] }));
+}

package/dist/features/layout/LayoutClient.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type LayoutProvider = React.ComponentType<{
+    children: React.ReactNode;
+}>;
+export interface LayoutClientProps {
+    children: React.ReactNode;
+    providers?: LayoutProvider[];
+    renderShell?: (children: React.ReactNode) => React.ReactNode;
+}
+export declare function LayoutClient({ children, providers, renderShell, }: LayoutClientProps): import("react/jsx-runtime").JSX.Element;
+export default LayoutClient;

package/dist/features/layout/LayoutClient.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export function LayoutClient({ children, providers = [], renderShell, }) {
+    const withProviders = providers.reduceRight((acc, Provider) => _jsx(Provider, { children: acc }), children);
+    return _jsx(_Fragment, { children: renderShell ? renderShell(withProviders) : withProviders });
+}
+export default LayoutClient;

package/dist/features/layout/ListingLayout.d.ts

@@ -0,0 +1,35 @@
+import "client-only";
+import { type ReactNode } from "react";
+export interface ListingLayoutLabels {
+    filtersTitle?: string;
+    showFilters?: string;
+    hideFilters?: string;
+    clearAll?: string;
+    applyFilters?: string;
+    close?: string;
+}
+export interface ListingLayoutProps {
+    headerSlot?: ReactNode;
+    statusTabsSlot?: ReactNode;
+    filterContent?: ReactNode;
+    filterActiveCount?: number;
+    onFilterApply?: () => void;
+    onFilterClear?: () => void;
+    filterTitle?: string;
+    activeFiltersSlot?: ReactNode;
+    searchSlot?: ReactNode;
+    sortSlot?: ReactNode;
+    viewToggleSlot?: ReactNode;
+    actionsSlot?: ReactNode;
+    selectedCount?: number;
+    toolbarPaginationSlot?: ReactNode;
+    paginationSlot?: ReactNode;
+    children: ReactNode;
+    defaultSidebarOpen?: boolean;
+    className?: string;
+    errorSlot?: ReactNode;
+    isDashboard?: boolean;
+    labels?: ListingLayoutLabels;
+    bulkActionBarSlot?: ReactNode;
+}
+export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, toolbarPaginationSlot, paginationSlot, children, defaultSidebarOpen, className, errorSlot, isDashboard, labels, bulkActionBarSlot, }: ListingLayoutProps): import("react/jsx-runtime").JSX.Element;