@mohasinac/appkit 2.3.0 → 2.3.1

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-500 dark:text-zinc-400/90 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-700 dark:text-zinc-200 ${className}`, children: children }));
+    }
+    return (_jsx(Link, { href: href, className: `text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-colors ${className}`, children: children }));
+}

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

@@ -0,0 +1,27 @@
+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;
+    /** Close the registered dashboard navigation drawer. */
+    closeNav: () => void;
+    /** Toggle the registered dashboard navigation drawer. */
+    toggleNav: () => void;
+    /** Register dashboard navigation handlers. */
+    registerNav: (handlers: (() => void) | {
+        open: () => void;
+        close?: () => void;
+        toggle?: () => 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,68 @@
+"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 closerRef = useRef(null);
+    const togglerRef = useRef(null);
+    const [hasNav, setHasNav] = useState(false);
+    const registerNav = useCallback((handlers) => {
+        if (typeof handlers === "function") {
+            openerRef.current = handlers;
+            closerRef.current = null;
+            togglerRef.current = null;
+            setHasNav(true);
+            return;
+        }
+        openerRef.current = handlers.open;
+        closerRef.current = handlers.close ?? null;
+        togglerRef.current = handlers.toggle ?? null;
+        setHasNav(true);
+    }, []);
+    const unregisterNav = useCallback(() => {
+        openerRef.current = null;
+        closerRef.current = null;
+        togglerRef.current = null;
+        setHasNav(false);
+    }, []);
+    const openNav = useCallback(() => {
+        openerRef.current?.();
+    }, []);
+    const closeNav = useCallback(() => {
+        closerRef.current?.();
+    }, []);
+    const toggleNav = useCallback(() => {
+        if (togglerRef.current) {
+            togglerRef.current();
+            return;
+        }
+        openerRef.current?.();
+    }, []);
+    return (_jsx(DashboardNavContext.Provider, { value: {
+            hasNav,
+            openNav,
+            closeNav,
+            toggleNav,
+            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: () => { },
+            closeNav: () => { },
+            toggleNav: () => { },
+            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,14 @@
+"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, 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-950 border-t border-zinc-200 dark:border-slate-800", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { className: "border-b border-zinc-100 dark:border-slate-800 py-8", 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 w-5 h-5", children: item.icon }), _jsxs(Span, { children: [_jsx(Span, { className: "font-bold text-zinc-900 dark:text-zinc-100 block text-sm", children: item.label }), item.subtitle && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400 text-xs block", 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-50 font-bold text-xl", 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-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary hover:border-primary/40 dark:hover:border-secondary/40 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 gap-0 lg:gap-8 ${linkGroups.length <= 3 ? "lg:grid-cols-3" :
+                                    linkGroups.length === 4 ? "lg:grid-cols-4" :
+                                        "lg:grid-cols-5"}`, children: linkGroups.map((group, idx) => (_jsxs(Div, { children: [_jsxs("button", { type: "button", onClick: () => toggleGroup(idx), className: "flex w-full items-center justify-between border-b border-zinc-200 py-3 text-left text-sm font-semibold text-zinc-800 transition-colors hover:text-zinc-950 dark:border-slate-800 dark:text-zinc-100 dark:hover:text-white lg:hidden", "aria-expanded": !!openGroups[idx], children: [group.heading, _jsx(ChevronDown, { className: `w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}` })] }), _jsx(Ul, { className: `lg: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-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden lg: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-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary 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,6 @@
+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,34 @@
+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;

package/dist/features/layout/ListingLayout.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Aside, Button, Div, Nav, Row, Span } from "../../ui";
+export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, toolbarPaginationSlot, paginationSlot, children, defaultSidebarOpen = false, className = "", errorSlot, isDashboard = false, labels, bulkActionBarSlot, }) {
+    const [sidebarOpen, setSidebarOpen] = useState(defaultSidebarOpen);
+    const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
+    const mobileOverlayRef = useRef(null);
+    const hasFilter = Boolean(filterContent);
+    const l = {
+        filtersTitle: labels?.filtersTitle ?? "Filters",
+        showFilters: labels?.showFilters ?? "Show filters",
+        hideFilters: labels?.hideFilters ?? "Hide filters",
+        clearAll: labels?.clearAll ?? "Clear all",
+        applyFilters: labels?.applyFilters ?? "Apply filters",
+        close: labels?.close ?? "Close",
+    };
+    const panelTitle = filterTitle ?? l.filtersTitle;
+    useEffect(() => {
+        if (!mobileFilterOpen)
+            return;
+        const handle = (e) => {
+            if (e.key === "Escape")
+                setMobileFilterOpen(false);
+        };
+        document.addEventListener("keydown", handle);
+        return () => document.removeEventListener("keydown", handle);
+    }, [mobileFilterOpen]);
+    useEffect(() => {
+        if (mobileFilterOpen) {
+            const w = window.innerWidth - document.documentElement.clientWidth;
+            document.body.style.overflow = "hidden";
+            document.body.style.paddingRight = `${w}px`;
+        }
+        else {
+            document.body.style.overflow = "";
+            document.body.style.paddingRight = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+            document.body.style.paddingRight = "";
+        };
+    }, [mobileFilterOpen]);
+    const handleMobileApply = () => {
+        onFilterApply?.();
+        setMobileFilterOpen(false);
+    };
+    return (_jsxs(Div, { className: [
+            "w-full space-y-4",
+            toolbarPaginationSlot
+                ? selectedCount > 0
+                    ? "pb-28 md:pb-0"
+                    : "pb-12 md:pb-0"
+                : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [headerSlot, statusTabsSlot && (_jsx(Div, { className: "overflow-x-auto touch-pan-x -mx-4 px-4 md:-mx-6 md:px-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: statusTabsSlot })), _jsxs(Div, { className: [
+                    "sticky z-20 -mx-4 px-4 md:-mx-6 md:px-6",
+                    isDashboard ? "top-0" : "top-14 md:top-[120px]",
+                    "bg-white/80 dark:bg-slate-950/80 backdrop-blur-md",
+                    "border-b border-zinc-200/70 dark:border-slate-800/70",
+                    "shadow-[0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
+                    "py-2.5",
+                ].join(" "), children: [_jsxs(Row, { className: "hidden md:flex gap-2 min-w-0", children: [hasFilter && (_jsxs(Button, { type: "button", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, variant: "ghost", size: "sm", className: [
+                                    "hidden lg:flex flex-shrink-0 items-center gap-1.5",
+                                    "rounded-full h-8 px-3 text-sm font-medium",
+                                    "border transition-all duration-150",
+                                    sidebarOpen
+                                        ? "bg-primary/10 border-primary/30 text-primary dark:bg-primary/15 dark:border-primary/40"
+                                        : "border-zinc-200 dark:border-slate-700 text-zinc-600 dark:text-slate-300 hover:border-zinc-300 dark:hover:border-slate-600 hover:bg-zinc-50 dark:hover:bg-slate-800/60",
+                                ].join(" "), children: [l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white", children: filterActiveCount }))] })), searchSlot && _jsx(Div, { className: "flex-1 min-w-0", children: searchSlot }), _jsxs(Row, { className: "gap-1.5 flex-shrink-0", children: [sortSlot, viewToggleSlot && (_jsx(Row, { className: "gap-0.5 rounded-full border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-0.5 shadow-sm", children: viewToggleSlot })), actionsSlot] }), toolbarPaginationSlot && (_jsx(Div, { className: "ml-auto flex-shrink-0 pl-3 border-l border-zinc-200/70 dark:border-slate-700/70", children: toolbarPaginationSlot }))] }), _jsxs(Div, { className: "flex flex-col gap-2 md:hidden", children: [_jsxs(Row, { className: "gap-2", children: [hasFilter && (_jsxs(Button, { type: "button", onClick: () => setMobileFilterOpen(true), "aria-label": l.filtersTitle, variant: "ghost", size: "sm", className: [
+                                            "flex-shrink-0 flex items-center gap-1.5",
+                                            "rounded-full h-9 px-3 text-sm font-medium",
+                                            "border border-zinc-200 dark:border-slate-700",
+                                            "text-zinc-600 dark:text-slate-300",
+                                            "hover:bg-zinc-50 dark:hover:bg-slate-800/60 transition-colors",
+                                            filterActiveCount > 0
+                                                ? "border-primary/40 bg-primary/5 text-primary"
+                                                : "",
+                                        ].join(" "), children: [l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white", children: filterActiveCount }))] })), searchSlot && _jsx(Div, { className: "flex-1 min-w-0", children: searchSlot })] }), (sortSlot || viewToggleSlot || actionsSlot) && (_jsx(Div, { className: "flex items-stretch min-h-[44px] gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsxs(Row, { className: "gap-2 flex-shrink-0 pb-px", children: [sortSlot, viewToggleSlot, actionsSlot] }) }))] }), selectedCount > 0 && bulkActionBarSlot && (_jsx(Div, { className: "hidden md:block pt-2 mt-2 border-t border-zinc-100 dark:border-slate-800", children: bulkActionBarSlot }))] }), _jsxs(Div, { className: "flex gap-4 lg:gap-6 items-start", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
+                            "hidden lg:block flex-shrink-0 self-start",
+                            isDashboard ? "sticky top-16" : "sticky top-[176px]",
+                            "transition-all duration-200 ease-in-out overflow-hidden",
+                            sidebarOpen
+                                ? "w-60 xl:w-64 2xl:w-72 opacity-100"
+                                : "w-0 opacity-0 pointer-events-none",
+                        ].join(" "), children: _jsxs(Div, { className: "w-60 xl:w-64 2xl:w-72 rounded-2xl overflow-hidden border border-zinc-200/80 dark:border-slate-700/60 bg-white dark:bg-slate-900 shadow-sm", children: [_jsxs(Row, { justify: "between", className: "px-4 py-3 border-b border-zinc-100 dark:border-slate-800", children: [_jsx(Div, { className: "font-semibold text-sm", children: panelTitle }), filterActiveCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onFilterClear, className: "text-xs text-primary hover:text-primary/80 hover:underline p-0 h-auto leading-none font-medium", children: l.clearAll }))] }), _jsx(Div, { className: "px-3 pt-5 pb-3 max-h-[calc(100vh-15rem)] overflow-y-auto space-y-4", children: filterContent }), _jsx(Div, { className: "px-3 pb-3 pt-2 border-t border-zinc-100 dark:border-slate-800", children: _jsx(Button, { type: "button", variant: "primary", className: "w-full rounded-xl bg-primary text-white py-2 px-3", onClick: onFilterApply, children: l.applyFilters }) })] }) })), _jsxs(Div, { className: "flex-1 min-w-0 space-y-3", children: [activeFiltersSlot, errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && _jsx(Div, { className: "pt-2", children: paginationSlot })] }))] })] }), toolbarPaginationSlot && (_jsx(Nav, { "aria-label": "Pagination", className: [
+                    "fixed left-0 right-0 md:hidden",
+                    isDashboard
+                        ? "bottom-0"
+                        : selectedCount > 0
+                            ? "bottom-28"
+                            : "bottom-14",
+                    "z-[39]",
+                    "bg-white/95 dark:bg-slate-950/95 backdrop-blur-md",
+                    "shadow-[0_-2px_8px_rgba(0,0,0,0.06)] dark:shadow-[0_-2px_8px_rgba(0,0,0,0.20)]",
+                    "h-10 flex items-center justify-center px-3 overflow-x-auto pb-px",
+                    "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                ].join(" "), children: toolbarPaginationSlot })), hasFilter && mobileFilterOpen && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 z-40 bg-black/40 lg:hidden", onClick: () => setMobileFilterOpen(false), "aria-hidden": "true" }), _jsxs(Div, { ref: mobileOverlayRef, className: "fixed inset-0 z-50 flex flex-col lg:hidden bg-white dark:bg-slate-950", role: "dialog", "aria-modal": "true", "aria-label": panelTitle, children: [_jsxs(Row, { justify: "between", className: "px-4 py-3 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0", children: [_jsxs(Div, { className: "font-semibold", children: [panelTitle, filterActiveCount > 0 && (_jsx(Span, { className: "ml-2 inline-flex items-center justify-center w-5 h-5 text-[11px] font-bold rounded-full bg-primary text-white", children: filterActiveCount }))] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setMobileFilterOpen(false), "aria-label": l.close, className: "rounded-full w-8 h-8 p-0 flex items-center justify-center hover:bg-zinc-100 dark:hover:bg-slate-800", children: "x" })] }), _jsx(Div, { className: "flex-1 overflow-y-auto px-4 pt-6 pb-4 space-y-4", children: filterContent }), _jsxs(Div, { className: "flex-shrink-0 flex gap-3 px-4 py-4 border-t border-zinc-100 dark:border-slate-800 bg-white dark:bg-slate-950", children: [_jsx(Button, { type: "button", variant: "outline", className: "flex-1 rounded-xl bg-zinc-200 dark:bg-slate-700 py-2 px-3", onClick: () => {
+                                            onFilterClear?.();
+                                        }, children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "flex-1 rounded-xl bg-primary text-white py-2 px-3", onClick: handleMobileApply, children: l.applyFilters })] })] })] }))] }));
+}

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

@@ -0,0 +1,22 @@
+export interface LocaleSwitcherOption {
+    value: string;
+    label: string;
+}
+export interface LocaleSwitcherProps {
+    /** Currently active locale. */
+    locale: string;
+    /** Available locale options. */
+    options: LocaleSwitcherOption[];
+    /** Called when the user selects a different locale. */
+    onChange: (locale: string) => void;
+    /** ARIA label for the select element. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * LocaleSwitcher — generic locale selector.
+ *
+ * Renders a minimal `<select>` element. The parent is responsible for
+ * calling `router.replace` with the chosen locale (project-specific routing).
+ */
+export declare function LocaleSwitcher({ locale, options, onChange, ariaLabel, className, }: LocaleSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/LocaleSwitcher.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select } from "../../ui";
+/**
+ * LocaleSwitcher — generic locale selector.
+ *
+ * Renders a minimal `<select>` element. The parent is responsible for
+ * calling `router.replace` with the chosen locale (project-specific routing).
+ */
+export function LocaleSwitcher({ locale, options, onChange, ariaLabel = "Switch language", className = "", }) {
+    return (_jsx(Select, { value: locale, onValueChange: onChange, options: options, "aria-label": ariaLabel, className: className }));
+}

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

@@ -0,0 +1,32 @@
+export interface MainNavbarItem {
+    /** Unique key used for filtering */
+    key: string;
+    /** Route href */
+    href: string;
+    /** Translated label */
+    label: string;
+    icon?: React.ReactNode;
+    highlighted?: boolean;
+}
+export interface MainNavbarProps {
+    /** Pre-translated nav items to display */
+    navItems: MainNavbarItem[];
+    /** Keys of items to hide (e.g. when shown in a sub-layout) */
+    hiddenNavItems?: string[];
+    /** When true, renders the navbar inline instead of sticky */
+    inline?: boolean;
+}
+/**
+ * MainNavbar — horizontal desktop navigation bar.
+ *
+ * Accepts pre-translated nav items from the consumer config and delegates
+ * rendering to the generic NavbarLayout primitive.
+ *
+ * @example
+ * ```tsx
+ * const t = useTranslations("nav");
+ * const items = MAIN_NAV_ITEMS.map(item => ({ ...item, label: t(item.key) }));
+ * <MainNavbar navItems={items} />
+ * ```
+ */
+export declare function MainNavbar({ navItems, hiddenNavItems, inline, }: MainNavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/MainNavbar.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import { NavbarLayout } from "./NavbarLayout";
+/**
+ * MainNavbar — horizontal desktop navigation bar.
+ *
+ * Accepts pre-translated nav items from the consumer config and delegates
+ * rendering to the generic NavbarLayout primitive.
+ *
+ * @example
+ * ```tsx
+ * const t = useTranslations("nav");
+ * const items = MAIN_NAV_ITEMS.map(item => ({ ...item, label: t(item.key) }));
+ * <MainNavbar navItems={items} />
+ * ```
+ */
+export function MainNavbar({ navItems, hiddenNavItems = [], inline = false, }) {
+    const pathname = usePathname();
+    const items = navItems
+        .filter((item) => !hiddenNavItems.includes(item.key))
+        .map((item) => ({
+        href: item.href,
+        label: item.label,
+        icon: item.icon,
+        highlighted: item.highlighted,
+    }));
+    return _jsx(NavbarLayout, { items: items, activeHref: pathname, inline: inline });
+}

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

@@ -0,0 +1,19 @@
+import React from "react";
+export interface NavItemProps {
+    href: string;
+    label: string;
+    icon: React.ReactNode;
+    isActive?: boolean;
+    variant?: "horizontal" | "vertical";
+    highlighted?: boolean;
+    className?: string;
+    activeClassName?: string;
+    inactiveClassName?: string;
+    iconClassName?: string;
+    labelClassName?: string;
+}
+/**
+ * NavItem — reusable navigation link with horizontal and vertical variants.
+ * Color and typography are controlled via className props from the consumer.
+ */
+export declare function NavItem({ href, label, icon, isActive, variant, highlighted, className, activeClassName, inactiveClassName, iconClassName, labelClassName, }: NavItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/NavItem.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Row, Span } from "../../ui";
+/**
+ * NavItem — reusable navigation link with horizontal and vertical variants.
+ * Color and typography are controlled via className props from the consumer.
+ */
+export function NavItem({ href, label, icon, isActive = false, variant = "horizontal", highlighted = false, className = "", activeClassName = "", inactiveClassName = "", iconClassName = "", labelClassName = "", }) {
+    const stateClass = isActive ? activeClassName : inactiveClassName;
+    if (variant === "vertical") {
+        return (_jsxs(Link, { href: href, className: [
+                "relative flex h-full w-full flex-col items-center justify-center gap-1 py-1 text-center transition-colors",
+                stateClass,
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), children: [isActive && (_jsx(Span, { className: "absolute inset-0 rounded-t-xl bg-gradient-to-b from-primary/10 to-transparent pointer-events-none", "aria-hidden": true })), _jsx(Row, { className: ["relative", iconClassName].join(" "), children: icon }), _jsx(Span, { className: ["relative whitespace-nowrap", labelClassName].join(" "), children: label })] }));
+    }
+    if (highlighted) {
+        return (_jsxs(Link, { href: href, className: [
+                "flex items-center gap-2 px-3 py-1 rounded-full border border-primary-700/30 dark:border-primary/30 bg-primary-700/5 dark:bg-primary/5 text-primary-700 dark:text-primary text-sm font-medium transition-all hover:bg-primary-700/10 dark:hover:bg-primary/10",
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), children: [_jsx(Row, { className: "flex-shrink-0", children: icon }), _jsx(Span, { className: "whitespace-nowrap", children: label })] }));
+    }
+    return (_jsxs(Link, { href: href, className: [
+            "flex items-center gap-2 px-3 py-2 md:px-4 md:py-2.5 lg:px-5 lg:py-3 rounded-lg text-sm md:text-base font-medium transition-all duration-200",
+            stateClass,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsx(Row, { className: ["flex-shrink-0", iconClassName].join(" "), children: icon }), _jsx(Span, { className: ["whitespace-nowrap", labelClassName].join(" "), children: label })] }));
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+export interface NavbarLayoutItem {
+    href: string;
+    label: string;
+    icon: React.ReactNode;
+    highlighted?: boolean;
+}
+export interface NavbarLayoutProps {
+    items: NavbarLayoutItem[];
+    activeHref: string;
+    id?: string;
+    ariaLabel?: string;
+    /**
+     * When true, renders as an inline flex row without an outer Nav wrapper or sticky bg.
+     * Used when slotted inside TitleBarLayout for the slim double-nav pattern.
+     */
+    inline?: boolean;
+    /** Render a custom nav item — defaults to an <a> anchor link. */
+    renderItem?: (item: NavbarLayoutItem, isActive: boolean) => React.ReactNode;
+}
+/**
+ * NavbarLayout — generic horizontal navigation bar shell.
+ *
+ * Zero domain imports. Receives all navigation items and the current
+ * active href as props. Hidden on mobile (visible md+).
+ */
+export declare function NavbarLayout({ items, activeHref, id, ariaLabel, inline, renderItem, }: NavbarLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/NavbarLayout.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Div, Li, Nav, Span, Ul } from "../../ui";
+function DefaultNavItem({ item, isActive, }) {
+    const activeClasses = item.highlighted
+        ? "border border-primary-400/40 dark:border-secondary-400/30 text-primary-700 dark:text-secondary-400 bg-primary-50/80 dark:bg-secondary-900/30 px-3"
+        : isActive
+            ? "bg-primary-50 dark:bg-secondary-900/20 text-primary-800 dark:text-secondary-300 font-semibold px-3 border-b-2 border-primary dark:border-secondary rounded-none pb-[6px]"
+            : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-950 dark:hover:text-white transition-colors px-3";
+    return (_jsxs(Link, { href: item.href, "aria-current": isActive ? "page" : undefined, className: `flex items-center gap-1.5 py-2 text-sm rounded-lg font-medium transition-colors duration-150 ${activeClasses}`, children: [item.icon, _jsx(Span, { children: item.label })] }));
+}
+/**
+ * NavbarLayout — generic horizontal navigation bar shell.
+ *
+ * Zero domain imports. Receives all navigation items and the current
+ * active href as props. Hidden on mobile (visible md+).
+ */
+export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel = "Main navigation", inline = false, renderItem, }) {
+    if (inline) {
+        return (_jsx(Ul, { "aria-label": ariaLabel, className: "hidden xl:flex items-center gap-0.5 xl:gap-1", children: items.map((item) => (_jsx(Li, { children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }));
+    }
+    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, className: "hidden lg:block bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800", children: _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsx(Ul, { className: "flex items-center gap-0.5 lg:gap-1 h-10", children: items.map((item) => (_jsx(Li, { children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }) }) }));
+}

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

@@ -0,0 +1,24 @@
+import React from "react";
+export interface SidebarLayoutProps {
+    isOpen: boolean;
+    ariaLabel: string;
+    onClose: () => void;
+    /** Content pinned inside a fixed (non-scrolling) header strip */
+    header: React.ReactNode;
+    /** Scrollable body content */
+    children: React.ReactNode;
+    id?: string;
+}
+/**
+ * SidebarLayout — generic slide-out sidebar shell.
+ *
+ * Renders:
+ *  - Backdrop overlay when open (closes on click)
+ *  - Aside container with transform animation (right-side slide)
+ *  - Fixed header slot (no-scroll, pinned at top)
+ *  - Scrollable body slot (fills remaining height)
+ *
+ * Uses `forwardRef` so the parent can attach a swipe-detection ref
+ * to the rendered `aside` element.
+ */
+export declare const SidebarLayout: React.ForwardRefExoticComponent<SidebarLayoutProps & React.RefAttributes<HTMLElement>>;

package/dist/features/layout/SidebarLayout.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Aside, Div } from "../../ui";
+/**
+ * SidebarLayout — generic slide-out sidebar shell.
+ *
+ * Renders:
+ *  - Backdrop overlay when open (closes on click)
+ *  - Aside container with transform animation (right-side slide)
+ *  - Fixed header slot (no-scroll, pinned at top)
+ *  - Scrollable body slot (fills remaining height)
+ *
+ * Uses `forwardRef` so the parent can attach a swipe-detection ref
+ * to the rendered `aside` element.
+ */
+export const SidebarLayout = forwardRef(function SidebarLayout({ isOpen, ariaLabel, onClose, header, children, id = "secondary-sidebar" }, ref) {
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(Div, { className: "fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[45] transition-opacity duration-300", onClick: onClose, "aria-hidden": "true" })), _jsxs(Aside, { ref: ref, id: id, "aria-label": ariaLabel, className: `
+            fixed inset-y-0 right-0
+            w-80
+            bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800
+            shadow-2xl
+            transform duration-300 ease-in-out
+            z-50
+            ${isOpen ? "translate-x-0" : "translate-x-full"}
+            flex flex-col
+          `, children: [_jsx(Div, { className: "flex-shrink-0 px-6 py-5 border-b border-zinc-200 dark:border-slate-800 bg-zinc-50 dark:bg-slate-900/80", children: header }), _jsx(Div, { className: "flex-1 overflow-y-auto scrollbar-thin px-6 py-4", children: children })] })] }));
+});
+SidebarLayout.displayName = "SidebarLayout";

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

@@ -0,0 +1,20 @@
+import type { TitleBarLayoutProps } from "./TitleBarLayout";
+export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "hasDashboardNav" | "onToggleDashboardNav"> {
+    /**
+     * When true, hides the dashboard nav PanelLeft button so that nested
+     * admin/seller/user layouts can own their sidebar controls exclusively.
+     */
+    suppressDashboardNav?: boolean;
+    /** Optional hook invoked immediately before toggling the dashboard nav drawer. */
+    onBeforeToggleDashboardNav?: () => void;
+}
+/**
+ * TitleBar � domain shell over TitleBarLayout.
+ *
+ * Reads `useCartCount` and `useDashboardNav` from appkit.
+ * Pass `user` from your consumer`s auth context.
+ *
+ * Wrap with `DashboardNavProvider` at the app root to enable the
+ * dashboard nav button in nested admin/seller/user routes.
+ */
+export declare function TitleBar({ suppressDashboardNav, onBeforeToggleDashboardNav, ...rest }: TitleBarProps): import("react/jsx-runtime").JSX.Element;