@mohasinac/appkit 2.3.0 → 2.3.2

package/dist/features/layout/BottomActions.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * BottomActions Component
+ *
+ * A fixed-bottom mobile action bar rendered **above** BottomNavbar (bottom-14).
+ * Reads from `BottomActionsContext` — features register their actions via the
+ * `useBottomActions` hook; this component just renders whatever is registered.
+ *
+ * Two modes:
+ *  - **Page mode** — shows registered page-level actions inline (Add to Cart,
+ *    Buy Now, Place Bid, Proceed to Checkout, etc.) with an optional info label.
+ *  - **Bulk mode** — activates when `bulk.selectedCount > 0`; shows:
+ *      • Selection count pill on the left (tap to deselect all)
+ *      • An upward-opening type-picker dropdown (middle, flex-1) — tap to
+ *        choose WHICH action to run; the chosen label is always visible.
+ *      • An "Apply" submit button on the right — executes the selected action,
+ *        styled with the selected action's variant (danger = red, etc.).
+ *
+ * Layout rules:
+ *  - Hidden on lg+ screens (`lg:hidden`) — desktop shows inline action panels.
+ *  - The bar slides up with a 300 ms ease-out transition; `pointer-events-none`
+ *    while off-screen.
+ *
+ * @component
+ * @example
+ * // Automatically rendered by LayoutClient — no manual usage required.
+ * // Features use `useBottomActions` to register their actions.
+ */
+import { useState, useRef, useEffect } from "react";
+import { X, ChevronUp, ChevronDown, Check } from "lucide-react";
+import { useBottomActionsContext } from "./BottomActionsContext";
+import { useClickOutside } from "../../react";
+import { Row, Span, Text, Button } from "../../ui";
+// Token values inlined from @mohasinac/appkit/tokens
+const BOTTOM_NAV_BG = "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80";
+const Z_BOTTOM_ACTIONS = "z-40";
+const BOTTOM_NAV_HEIGHT = "h-14";
+const FLEX_CENTER = "flex items-center justify-center";
+export default function BottomActions() {
+    const { state, actionCallbacksRef, bulkCallbacksRef, bulkClearRef } = useBottomActionsContext();
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [selectedActionId, setSelectedActionId] = useState(null);
+    const containerRef = useRef(null);
+    useClickOutside(containerRef, () => setPickerOpen(false));
+    const { actions, bulk, infoLabel } = state;
+    const isBulkMode = !!(bulk && bulk.selectedCount > 0);
+    const bulkActions = bulk?.actions ?? [];
+    const pageActions = actions;
+    const isVisible = (isBulkMode ? bulkActions.length > 0 || !!bulk : pageActions.length > 0) ||
+        !!infoLabel;
+    // Keep selectedActionId in sync with available bulk actions
+    useEffect(() => {
+        if (!isBulkMode) {
+            setPickerOpen(false);
+            setSelectedActionId(null);
+            return;
+        }
+        setSelectedActionId((prev) => {
+            const ids = bulkActions.map((a) => a.id);
+            if (prev && ids.includes(prev))
+                return prev;
+            return ids[0] ?? null;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isBulkMode, bulkActions.map((a) => a.id).join(",")]);
+    const selectedAction = bulkActions.find((a) => a.id === selectedActionId);
+    const dispatchAction = (id) => actionCallbacksRef.current.get(id)?.();
+    const dispatchBulkClear = () => {
+        bulkClearRef.current?.();
+        setPickerOpen(false);
+    };
+    const handleApply = () => {
+        if (!selectedActionId)
+            return;
+        bulkCallbacksRef.current.get(selectedActionId)?.();
+        setPickerOpen(false);
+    };
+    return (_jsxs("div", { ref: containerRef, role: "toolbar", "aria-label": isBulkMode ? "Bulk actions" : "Page actions", "aria-hidden": !isVisible, className: [
+            "fixed bottom-14 left-0 right-0 lg:hidden",
+            Z_BOTTOM_ACTIONS,
+            BOTTOM_NAV_BG,
+            "shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:shadow-[0_-4px_20px_rgba(0,0,0,0.30)]",
+            "will-change-transform transition-transform duration-300 ease-out",
+            isVisible ? "translate-y-0" : "translate-y-full pointer-events-none",
+        ]
+            .filter(Boolean)
+            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx("div", { role: "listbox", "aria-label": "Bulk actions", className: [
+                    "absolute bottom-full left-0 right-0 overflow-hidden",
+                    BOTTOM_NAV_BG,
+                    "border-t border-zinc-200/80 dark:border-slate-700/80",
+                    "shadow-[0_-8px_24px_rgba(0,0,0,0.10)] dark:shadow-[0_-8px_24px_rgba(0,0,0,0.35)]",
+                    "transition-[max-height,opacity] duration-200 ease-out",
+                    pickerOpen
+                        ? "max-h-64 opacity-100"
+                        : "max-h-0 opacity-0 pointer-events-none",
+                ]
+                    .filter(Boolean)
+                    .join(" "), "data-section": "bottomactions-div-402", children: bulkActions.map((action, i) => {
+                    const isSelected = action.id === selectedActionId;
+                    return (_jsxs(Button, { role: "option", "aria-selected": isSelected, type: "button", variant: "ghost", disabled: action.disabled || action.loading, onClick: () => {
+                            setSelectedActionId(action.id);
+                            setPickerOpen(false);
+                        }, className: [
+                            "w-full flex items-center gap-3 px-5 py-3.5 text-left text-sm font-medium transition-colors rounded-none",
+                            i > 0
+                                ? "border-t border-zinc-100/80 dark:border-slate-800/80"
+                                : "",
+                            isSelected ? "bg-zinc-50 dark:bg-slate-800/60" : "",
+                            action.variant === "danger"
+                                ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30"
+                                : "text-zinc-800 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-slate-800/60",
+                            action.disabled || action.loading
+                                ? "opacity-50 cursor-not-allowed"
+                                : "",
+                        ]
+                            .filter(Boolean)
+                            .join(" "), children: [action.icon && (_jsx(Span, { className: `flex-shrink-0 w-5 h-5 ${FLEX_CENTER}`, "aria-hidden": "true", children: action.icon })), _jsx(Span, { className: "flex-1 truncate", children: action.label }), isSelected && (_jsx(Check, { className: "w-4 h-4 flex-shrink-0 text-primary-600 dark:text-primary-400", "aria-hidden": "true" }))] }, action.id));
+                }) })), isBulkMode && (_jsx("div", { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-primary-400 to-primary-600 dark:from-secondary-600 dark:via-secondary-400 dark:to-secondary-600" })), infoLabel && !isBulkMode && (_jsx("div", { className: "px-4 pt-2 pb-0 border-b border-zinc-100/80 dark:border-slate-800/80", "data-section": "bottomactions-div-403", children: _jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 leading-5 truncate", children: infoLabel }) })), _jsx(Row, { className: `gap-2 px-3 ${BOTTOM_NAV_HEIGHT}`, children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { className: "text-xs font-semibold tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+                                        ? `${bulk.selectedCount} ${bulk.noun}`
+                                        : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
+                                "flex-1 min-w-0 h-10 flex items-center gap-2 px-3 rounded-lg border text-sm font-medium transition-colors",
+                                "bg-zinc-50 hover:bg-zinc-100 active:bg-zinc-200 dark:bg-slate-800/60 dark:hover:bg-slate-700/60",
+                                "border-zinc-200 dark:border-slate-700",
+                                selectedAction?.variant === "danger"
+                                    ? "text-red-600 dark:text-red-400"
+                                    : "text-zinc-800 dark:text-zinc-100",
+                            ]
+                                .filter(Boolean)
+                                .join(" "), children: [selectedAction?.icon && (_jsx(Span, { className: `flex-shrink-0 w-4 h-4 ${FLEX_CENTER}`, "aria-hidden": "true", children: selectedAction.icon })), _jsx(Span, { className: "flex-1 truncate text-left leading-none", children: selectedAction?.label ?? "Bulk actions" }), pickerOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 flex-shrink-0 text-zinc-400", "aria-hidden": "true" }))] })), bulkActions.length > 0 && (_jsx(Button, { type: "button", variant: selectedAction?.variant ?? "primary", size: "sm", isLoading: selectedAction?.loading, disabled: !selectedActionId ||
+                                selectedAction?.disabled ||
+                                selectedAction?.loading, onClick: handleApply, className: "h-10 flex-shrink-0", children: _jsx(Span, { className: "leading-none", children: "Apply" }) }))] })) : (
+                /* Page mode — action buttons inline ------------------------------ */
+                pageActions.map((action) => {
+                    const isIconOnly = !action.label;
+                    const growClass = isIconOnly || action.grow === false
+                        ? "flex-shrink-0 w-11"
+                        : "flex-1 min-w-0";
+                    return (_jsxs(Button, { type: "button", variant: action.variant ?? "primary", size: "sm", isLoading: action.loading, disabled: action.disabled, onClick: () => dispatchAction(action.id), className: [
+                            "h-10 relative",
+                            growClass,
+                            isIconOnly ? "px-0 justify-center" : "",
+                        ]
+                            .filter(Boolean)
+                            .join(" "), children: [action.icon && (_jsx(Span, { className: [
+                                    "flex-shrink-0",
+                                    action.label ? "mr-1.5" : "",
+                                ].join(" "), "aria-hidden": "true", children: action.icon })), action.label && (_jsx(Span, { className: "truncate leading-none", children: action.label })), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] bg-red-500 text-white text-[10px] font-bold rounded-full ${FLEX_CENTER} px-1 pointer-events-none select-none`, "aria-hidden": "true", children: action.badge }))] }, action.id));
+                })) })] }));
+}

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

@@ -0,0 +1,107 @@
+/**
+ * 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 React from "react";
+import type { ButtonProps } from "../../ui";
+export interface BottomAction {
+    /** Stable unique key (used as React key). */
+    id: string;
+    /** Button label — use `useTranslations()` output. */
+    label?: string;
+    /** Optional leading icon (e.g., `<Heart className="w-4 h-4" />`). */
+    icon?: React.ReactNode;
+    /** Button variant — defaults to "primary". */
+    variant?: ButtonProps["variant"];
+    /** Small count/badge overlay rendered in the top-right corner of the button. */
+    badge?: string | number;
+    /** Called when the user taps the action. */
+    onClick: () => void;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Show spinner inside the button. */
+    loading?: boolean;
+    /**
+     * When true (default) the button grows to fill remaining space.
+     * Set to false for compact icon-only buttons.
+     */
+    grow?: boolean;
+}
+export interface BottomBulkConfig {
+    /** Number of currently selected items. Bar activates when > 0. */
+    selectedCount: number;
+    /** Optional noun shown next to count, e.g. "products". Defaults to "selected". */
+    noun?: string;
+    /** Called when the user taps the ✕ pill to deselect all. */
+    onClearSelection: () => void;
+    /** Bulk action buttons, rendered right of the selection pill. */
+    actions: BottomAction[];
+}
+export interface BottomActionsState {
+    /** Page-level primary actions. */
+    actions: BottomAction[];
+    /** Bulk-selection config. Bulk mode activates when selectedCount > 0. */
+    bulk?: BottomBulkConfig;
+    /**
+     * Optional single-line info label rendered above the action row.
+     * Useful for contextual data like "Current bid: ₹1,200" on auction pages.
+     */
+    infoLabel?: string;
+}
+interface BottomActionsContextValue {
+    state: BottomActionsState;
+    /** Replace the page-level actions. Pass empty array to clear. */
+    setActions: (actions: BottomAction[]) => void;
+    /**
+     * Store current onClick handlers for actions without triggering a re-render.
+     * The component dispatches clicks via this ref to avoid stale closures.
+     */
+    actionCallbacksRef: React.MutableRefObject<Map<string, () => void>>;
+    /** Set or clear the bulk config. */
+    setBulkConfig: (config: BottomBulkConfig | undefined) => void;
+    /** Ref mirror for bulk callbacks. */
+    bulkCallbacksRef: React.MutableRefObject<Map<string, () => void>>;
+    /** Set or clear the bulk clear handler. */
+    bulkClearRef: React.MutableRefObject<(() => void) | undefined>;
+    /** Set or clear the contextual info label. */
+    setInfoLabel: (label: string | undefined) => void;
+    /** Clear all state (called on feature unmount). */
+    clearAll: () => void;
+}
+export declare function BottomActionsProvider({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useBottomActionsContext(): BottomActionsContextValue;
+export {};

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,27 @@
+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,11 @@
+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 lg: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-16", children: children }) }));
+}

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

@@ -0,0 +1,53 @@
+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;
+    stats?: {
+        totalOrders?: number;
+        auctionsWon?: number;
+        itemsSold?: number;
+        reviewsCount?: number;
+        rating?: 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,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import { AvatarDisplay, 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-[11px] leading-tight font-medium", getRoleBadgeClass, }) {
+    const pathname = usePathname();
+    const labels = {
+        mobileNav: "Mobile navigation",
+        home: "Home",
+        products: "Products",
+        search: "Search",
+        cart: "Cart",
+        profile: "Profile",
+    };
+    const itemStyle = { width: "20%" };
+    const slotClassName = "relative flex h-full w-full flex-col items-center justify-center gap-1 transition-colors duration-200";
+    return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: homeHref, label: labels.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: labels.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", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.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: labels.search })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": labels.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: labels.cart })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.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: labels.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,28 @@
+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,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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;