@mohasinac/appkit 2.3.0 → 2.3.1

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

@@ -0,0 +1,49 @@
+import { buildColumns, renderCurrencyCompact, renderBoolean, } from "../../../ui/columns";
+/**
+ * Default admin columns for search result product items.
+ * Use `buildSearchResultColumns()` to customise via overrides / extras / omit.
+ */
+export const searchResultAdminColumns = [
+    {
+        key: "title",
+        header: "Title",
+        sortable: true,
+    },
+    {
+        key: "price",
+        header: "Price",
+        sortable: true,
+        render: (item) => item.price != null
+            ? renderCurrencyCompact(item.price, item.currency)
+            : "—",
+    },
+    {
+        key: "status",
+        header: "Status",
+        sortable: false,
+    },
+    {
+        key: "featured",
+        header: "Featured",
+        sortable: false,
+        render: (item) => renderBoolean(item.featured),
+    },
+    {
+        key: "isAuction",
+        header: "Auction",
+        sortable: false,
+        render: (item) => renderBoolean(item.isAuction),
+    },
+];
+/**
+ * Factory that returns columns for the search results admin table.
+ *
+ * @example
+ * const cols = buildSearchResultColumns<MySearchItem>({
+ *   extras: [{ key: "brandTag", header: "Brand", render: (s) => s.brandTag }],
+ *   omit: ["isAuction"],
+ * });
+ */
+export function buildSearchResultColumns(opts) {
+    return buildColumns(searchResultAdminColumns, opts);
+}

package/dist/features/search/components/Search.d.ts

@@ -0,0 +1,40 @@
+import type { LucideIcon } from "lucide-react";
+import type { NavSuggestionRecord } from "../hooks/useNavSuggestions";
+export interface SearchQuickLink {
+    href: string;
+    label: string;
+    icon: LucideIcon;
+    keywords: string[];
+}
+export interface SearchRouterAdapter {
+    push: (href: string) => void;
+}
+export interface SearchLabels {
+    placeholder: string;
+    title: string;
+    closeAriaLabel: string;
+    quickLinks: string;
+    searching: string;
+    clearAriaLabel: string;
+    ariaLabel: string;
+    browseProducts: (query: string) => string;
+}
+export interface SearchProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+    onSearch?: (query: string) => void;
+    onOpen?: () => void;
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    deferred?: boolean;
+    debounceMs?: number;
+    onClear?: () => void;
+    className?: string;
+    router: SearchRouterAdapter;
+    quickLinks?: SearchQuickLink[];
+    labels: SearchLabels;
+    suggestionTypeIcons?: Partial<Record<NavSuggestionRecord["type"], string>>;
+    suggestionTypeBadges?: Partial<Record<NavSuggestionRecord["type"], string>>;
+}
+export declare function Search({ isOpen, onClose, onSearch, onOpen, value, onChange, placeholder, deferred, debounceMs, onClear, className, router, quickLinks, labels, suggestionTypeIcons, suggestionTypeBadges, }: SearchProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/search/components/Search.js

@@ -0,0 +1,262 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button, Input, Li, Row, Span, Text, Ul } from "../../../ui";
+import { useNavSuggestions } from "../hooks/useNavSuggestions";
+const DEFAULT_TYPE_ICONS = {
+    page: "📄",
+    category: "🗂️",
+    blog: "✍️",
+    event: "🎉",
+};
+const DEFAULT_TYPE_BADGES = {
+    page: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300",
+    category: "bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300",
+    blog: "bg-fuchsia-100 text-fuchsia-600 dark:bg-fuchsia-900/40 dark:text-fuchsia-300",
+    event: "bg-amber-100 text-amber-600 dark:bg-amber-900/40 dark:text-amber-300",
+};
+export function Search({ isOpen, onClose, onSearch, onOpen, value, onChange, placeholder, deferred = true, debounceMs = 300, onClear, className, router, quickLinks = [], labels, suggestionTypeIcons, suggestionTypeBadges, }) {
+    const isInlineMode = value !== undefined;
+    const [query, setQuery] = useState(isInlineMode ? value : "");
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const [isInlineOpen, setIsInlineOpen] = useState(false);
+    const inputRef = useRef(null);
+    const debounceRef = useRef(null);
+    const inlineBlurRef = useRef(null);
+    const { suggestions, isLoading: suggestionsLoading } = useNavSuggestions(query);
+    const typeIcons = { ...DEFAULT_TYPE_ICONS, ...suggestionTypeIcons };
+    const typeBadges = { ...DEFAULT_TYPE_BADGES, ...suggestionTypeBadges };
+    useEffect(() => {
+        if (isInlineMode || !onOpen)
+            return;
+        const handleCmdK = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+                event.preventDefault();
+                onOpen();
+            }
+        };
+        document.addEventListener("keydown", handleCmdK);
+        return () => document.removeEventListener("keydown", handleCmdK);
+    }, [isInlineMode, onOpen]);
+    useEffect(() => {
+        if (!isInlineMode && isOpen && inputRef.current) {
+            setTimeout(() => inputRef.current?.focus(), 100);
+        }
+    }, [isInlineMode, isOpen]);
+    useEffect(() => {
+        if (isInlineMode)
+            return;
+        const handleEscape = (event) => {
+            if (event.key === "Escape")
+                onClose?.();
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+            return () => document.removeEventListener("keydown", handleEscape);
+        }
+    }, [isInlineMode, isOpen, onClose]);
+    useEffect(() => {
+        if (isInlineMode)
+            setQuery(value ?? "");
+    }, [isInlineMode, value]);
+    useEffect(() => {
+        setActiveIndex(-1);
+    }, [isOpen, isInlineMode, query, suggestions.length]);
+    const handleInlineChange = (nextValue) => {
+        setQuery(nextValue);
+        if (!deferred) {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+            debounceRef.current = setTimeout(() => onChange?.(nextValue), debounceMs);
+        }
+    };
+    const handleDeferredSubmit = () => {
+        onChange?.(query);
+    };
+    const handleClear = () => {
+        setQuery("");
+        setActiveIndex(-1);
+        onChange?.("");
+        onClear?.();
+    };
+    const handleSuggestionClick = (record) => {
+        setIsInlineOpen(false);
+        onClose?.();
+        router.push(record.url);
+    };
+    const handleOverlaySearch = () => {
+        if (query.trim() && onSearch)
+            onSearch(query);
+    };
+    if (isInlineMode) {
+        const inlineQuery = query.toLowerCase();
+        const filteredQuickLinks = query
+            ? quickLinks
+                .filter((link) => link.label.toLowerCase().includes(inlineQuery) ||
+                link.keywords.some((keyword) => keyword.includes(inlineQuery)))
+                .slice(0, 5)
+            : quickLinks.slice(0, 5);
+        const inlineQuickLinkItems = filteredQuickLinks.map((link) => ({
+            kind: "quick-link",
+            link,
+        }));
+        const inlineSuggestionItems = suggestions.slice(0, 5).map((suggestion) => ({
+            kind: "suggestion",
+            suggestion,
+        }));
+        const inlineItems = [
+            ...inlineQuickLinkItems,
+            ...inlineSuggestionItems,
+            ...(query.trim() ? [{ kind: "search" }] : []),
+        ];
+        const handleInlineActiveItem = (index) => {
+            const item = inlineItems[index];
+            if (!item)
+                return;
+            if (item.kind === "quick-link") {
+                setIsInlineOpen(false);
+                router.push(item.link.href);
+                return;
+            }
+            if (item.kind === "suggestion") {
+                handleSuggestionClick(item.suggestion);
+                return;
+            }
+            handleDeferredSubmit();
+            setIsInlineOpen(false);
+        };
+        return (_jsxs(Row, { className: `relative gap-2 ${className ?? ""}`, children: [_jsxs(Row, { className: "relative flex-1", children: [_jsx("svg", { className: "absolute left-3 w-4 h-4 text-zinc-400 pointer-events-none", "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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(Input, { ref: inputRef, bare: true, type: "search", value: query, onChange: (event) => handleInlineChange(event.target.value), onKeyDown: (event) => {
+                                if (event.key === "ArrowDown") {
+                                    if (inlineItems.length === 0)
+                                        return;
+                                    event.preventDefault();
+                                    setIsInlineOpen(true);
+                                    setActiveIndex((current) => current < inlineItems.length - 1 ? current + 1 : 0);
+                                    return;
+                                }
+                                if (event.key === "ArrowUp") {
+                                    if (inlineItems.length === 0)
+                                        return;
+                                    event.preventDefault();
+                                    setIsInlineOpen(true);
+                                    setActiveIndex((current) => current <= 0 ? inlineItems.length - 1 : current - 1);
+                                    return;
+                                }
+                                if (event.key === "Enter") {
+                                    if (activeIndex >= 0) {
+                                        event.preventDefault();
+                                        handleInlineActiveItem(activeIndex);
+                                        return;
+                                    }
+                                    if (deferred) {
+                                        handleDeferredSubmit();
+                                    }
+                                    return;
+                                }
+                                if (event.key === "Escape") {
+                                    setIsInlineOpen(false);
+                                }
+                            }, onFocus: () => {
+                                if (inlineBlurRef.current)
+                                    clearTimeout(inlineBlurRef.current);
+                                setIsInlineOpen(true);
+                            }, onBlur: () => {
+                                if (inlineBlurRef.current)
+                                    clearTimeout(inlineBlurRef.current);
+                                inlineBlurRef.current = setTimeout(() => setIsInlineOpen(false), 120);
+                            }, placeholder: placeholder ?? labels.placeholder, className: "w-full rounded-lg border border-zinc-300 bg-white pl-9 text-zinc-900 placeholder:text-zinc-400 focus:border-primary focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:placeholder:text-slate-500" }), query && (_jsx(Button, { type: "button", variant: "ghost", onClick: handleClear, className: "absolute right-3 p-0.5 rounded-full text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors", "aria-label": labels.clearAriaLabel, children: _jsx("svg", { className: "w-4 h-4", "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] }), deferred && (_jsx(Button, { type: "button", variant: "ghost", onClick: handleDeferredSubmit, "aria-label": labels.ariaLabel, className: "flex-shrink-0 px-3 py-2 rounded-lg border border-zinc-300 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:border-slate-700 dark:hover:bg-slate-800 dark:hover:text-zinc-200 transition-colors", children: _jsx("svg", { className: "w-4 h-4", "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" }) }) })), isInlineOpen && (filteredQuickLinks.length > 0 || query) && (_jsxs("div", { className: "absolute top-full left-0 right-0 mt-2 rounded-xl overflow-hidden border border-zinc-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900", onMouseDown: (event) => event.preventDefault(), children: [filteredQuickLinks.length > 0 && (_jsx(Ul, { children: filteredQuickLinks.map((link, index) => {
+                                const Icon = link.icon;
+                                const isActive = activeIndex === index;
+                                return (_jsx(Li, { children: _jsxs(Button, { type: "button", variant: "ghost", onClick: () => {
+                                            setIsInlineOpen(false);
+                                            router.push(link.href);
+                                        }, onMouseEnter: () => setActiveIndex(index), className: `w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors border-b border-zinc-200 dark:border-slate-700 ${isActive ? "bg-zinc-100 dark:bg-slate-800" : "hover:bg-zinc-50 dark:hover:bg-slate-800/70"}`, children: [_jsx(Icon, { className: "w-4 h-4 flex-shrink-0 text-zinc-500 dark:text-zinc-400" }), _jsx(Text, { size: "sm", className: "font-medium truncate", children: link.label })] }) }, `inline-link-${link.href}`));
+                            }) })), query && suggestionsLoading && (_jsx("div", { className: "px-4 py-3", "data-section": "search-div-431", children: _jsx(Text, { variant: "secondary", size: "sm", children: labels.searching }) })), query &&
+                            suggestions.slice(0, 5).map((suggestion, suggestionIndex) => {
+                                const itemIndex = inlineQuickLinkItems.length + suggestionIndex;
+                                const isActive = activeIndex === itemIndex;
+                                return (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => handleSuggestionClick(suggestion), onMouseEnter: () => setActiveIndex(itemIndex), className: `w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors border-b border-zinc-200 dark:border-slate-700 ${isActive ? "bg-zinc-100 dark:bg-slate-800" : "hover:bg-zinc-50 dark:hover:bg-slate-800/70"}`, children: [_jsx(Span, { className: "text-sm", children: typeIcons[suggestion.type] }), _jsxs("div", { className: "flex-1 min-w-0", "data-section": "search-div-432", children: [_jsx(Text, { size: "sm", className: "font-medium truncate", children: suggestion.title }), suggestion.subtitle && (_jsx(Text, { variant: "secondary", size: "xs", className: "truncate", children: suggestion.subtitle }))] })] }, `inline-suggestion-${suggestion.objectID}`));
+                            }), query.trim() && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => {
+                                handleDeferredSubmit();
+                                setIsInlineOpen(false);
+                            }, onMouseEnter: () => setActiveIndex(inlineItems.length - 1), className: `w-full flex items-center gap-2 px-4 py-3 text-left transition-colors ${activeIndex === inlineItems.length - 1 ? "bg-zinc-100 dark:bg-slate-800" : "hover:bg-zinc-50 dark:hover:bg-slate-800/70"}`, children: [_jsx("svg", { className: "w-4 h-4 flex-shrink-0 text-zinc-500 dark:text-zinc-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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(Text, { size: "sm", className: "font-medium truncate", children: labels.browseProducts(query) })] }))] }))] }));
+    }
+    const overlayQuery = query.toLowerCase();
+    const filteredSiteLinks = query
+        ? quickLinks
+            .filter((link) => link.label.toLowerCase().includes(overlayQuery) ||
+            link.keywords.some((keyword) => keyword.includes(overlayQuery)))
+            .slice(0, 6)
+        : quickLinks.slice(0, 6);
+    const quickLinkItems = filteredSiteLinks.map((link) => ({
+        kind: "quick-link",
+        link,
+    }));
+    const suggestionItems = suggestions.map((suggestion) => ({
+        kind: "suggestion",
+        suggestion,
+    }));
+    const overlayItems = [
+        ...quickLinkItems,
+        ...suggestionItems,
+        ...(query.trim() ? [{ kind: "search" }] : []),
+    ];
+    const handleActiveItem = (index) => {
+        const item = overlayItems[index];
+        if (!item)
+            return;
+        if (item.kind === "quick-link") {
+            onClose?.();
+            router.push(item.link.href);
+            return;
+        }
+        if (item.kind === "suggestion") {
+            handleSuggestionClick(item.suggestion);
+            return;
+        }
+        handleOverlaySearch();
+    };
+    const handleOverlayKeyDown = (event) => {
+        if (event.key === "ArrowDown") {
+            if (overlayItems.length === 0)
+                return;
+            event.preventDefault();
+            setActiveIndex((current) => current < overlayItems.length - 1 ? current + 1 : 0);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            if (overlayItems.length === 0)
+                return;
+            event.preventDefault();
+            setActiveIndex((current) => current <= 0 ? overlayItems.length - 1 : current - 1);
+            return;
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            if (activeIndex >= 0) {
+                handleActiveItem(activeIndex);
+                return;
+            }
+            handleOverlaySearch();
+            return;
+        }
+        if (event.key === "Escape") {
+            onClose?.();
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "border-b border-zinc-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-950 animate-[fadeIn_150ms_ease-out]", "data-section": "search-div-433", children: _jsxs("div", { className: "container mx-auto px-4 py-3 md:py-4 relative", "data-section": "search-div-434", children: [_jsxs(Row, { gap: "sm", className: "md:gap-3", children: [_jsx("div", { className: "flex-1 relative", "data-section": "search-div-435", children: _jsx(Input, { ref: inputRef, bare: true, type: "search", placeholder: placeholder ?? labels.placeholder, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: handleOverlayKeyDown, className: "w-full rounded-lg border border-zinc-300 bg-white text-zinc-900 placeholder:text-zinc-400 focus:border-primary focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:placeholder:text-slate-500" }) }), _jsxs(Button, { onClick: handleOverlaySearch, variant: "primary", size: "md", className: "hidden sm:flex gap-2", children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" }) }), labels.title] }), _jsx(Button, { variant: "ghost", onClick: () => onClose?.(), className: "p-2.5 md:p-3 rounded-xl transition-colors text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-slate-800 dark:hover:text-zinc-200 flex-shrink-0", "aria-label": labels.closeAriaLabel, children: _jsx("svg", { className: "w-6 h-6 md:w-7 md:h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), (filteredSiteLinks.length > 0 || query) && (_jsxs("div", { className: "absolute top-full left-0 right-0 px-4 pt-2 pb-4 space-y-2 z-50", "data-section": "search-div-436", children: [filteredSiteLinks.length > 0 && !suggestionsLoading && (_jsxs("div", { className: "rounded-xl overflow-hidden border border-zinc-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900", "data-section": "search-div-437", children: [_jsx("div", { className: "px-4 py-2 border-b border-zinc-200 dark:border-slate-700", "data-section": "search-div-438", children: _jsx(Text, { variant: "secondary", size: "xs", className: "uppercase tracking-wider font-semibold", children: labels.quickLinks }) }), _jsx(Ul, { children: filteredSiteLinks.map((link) => {
+                                        const Icon = link.icon;
+                                        const itemIndex = quickLinkItems.findIndex((item) => item.link.href === link.href);
+                                        const isActive = activeIndex === itemIndex;
+                                        return (_jsx(Li, { children: _jsxs(Button, { type: "button", variant: "ghost", onClick: () => {
+                                                    onClose?.();
+                                                    router.push(link.href);
+                                                }, onMouseEnter: () => setActiveIndex(itemIndex), className: `w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors border-b border-zinc-200 dark:border-slate-700 last:border-b-0 ${isActive ? "bg-zinc-100 dark:bg-slate-800" : "hover:bg-zinc-50 dark:hover:bg-slate-800/70"}`, children: [_jsx(Icon, { className: "w-4 h-4 flex-shrink-0 text-zinc-500 dark:text-zinc-400" }), _jsx(Text, { size: "sm", className: "font-medium", children: link.label })] }) }, link.href));
+                                    }) })] })), query && (_jsxs("div", { className: "rounded-xl overflow-hidden border border-zinc-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900", "data-section": "search-div-439", children: [suggestionsLoading ? (_jsx("div", { className: "px-4 py-3", "data-section": "search-div-440", children: _jsx(Text, { variant: "secondary", size: "sm", children: labels.searching }) })) : suggestions.length > 0 ? (_jsx(Ul, { children: suggestions.map((suggestion, suggestionIndex) => {
+                                        const itemIndex = quickLinkItems.length + suggestionIndex;
+                                        const isActive = activeIndex === itemIndex;
+                                        return (_jsx(Li, { children: _jsxs(Button, { type: "button", variant: "ghost", onClick: () => handleSuggestionClick(suggestion), onMouseEnter: () => setActiveIndex(itemIndex), className: `w-full flex items-center gap-3 px-4 py-3 text-left transition-colors border-b border-zinc-200 dark:border-slate-700 last:border-b-0 ${isActive ? "bg-zinc-100 dark:bg-slate-800" : "hover:bg-zinc-50 dark:hover:bg-slate-800/70"}`, children: [_jsx(Span, { className: "text-sm", children: typeIcons[suggestion.type] }), _jsxs("div", { className: "flex-1 min-w-0", "data-section": "search-div-441", children: [_jsx(Text, { size: "sm", className: "font-medium truncate", children: suggestion.title }), suggestion.subtitle && (_jsx(Text, { variant: "secondary", size: "xs", className: "truncate", children: suggestion.subtitle }))] }), _jsx(Span, { className: `text-xs px-2 py-0.5 rounded-full ${typeBadges[suggestion.type]}`, children: suggestion.type })] }) }, suggestion.objectID));
+                                    }) })) : null, _jsxs(Button, { type: "button", variant: "ghost", onClick: handleOverlaySearch, onMouseEnter: () => setActiveIndex(overlayItems.length - 1), className: `w-full flex items-center gap-2 px-4 py-3 text-left transition-colors ${activeIndex === overlayItems.length - 1 ? "bg-zinc-100 dark:bg-slate-800" : "hover:bg-zinc-50 dark:hover:bg-slate-800/70"}${suggestions.length > 0 ? " border-t border-zinc-200 dark:border-slate-700" : ""}`, children: [_jsx("svg", { className: "w-4 h-4 flex-shrink-0 text-zinc-500 dark:text-zinc-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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(Text, { size: "sm", className: "font-medium", children: labels.browseProducts(query) })] })] }))] }))] }) }));
+}

package/dist/features/search/components/SearchFiltersRow.d.ts

@@ -0,0 +1,22 @@
+import type { SearchCategoryOption } from "../types";
+interface SearchFiltersRowProps {
+    urlCategory: string;
+    categories: SearchCategoryOption[];
+    urlMinPrice: string;
+    urlMaxPrice: string;
+    showClear: boolean;
+    onCategoryChange: (value: string) => void;
+    onPriceFilter: (min: string, max: string) => void;
+    onClearFilters: () => void;
+    labels?: {
+        categoryFilter?: string;
+        allCategories?: string;
+        priceRange?: string;
+        minPrice?: string;
+        maxPrice?: string;
+        apply?: string;
+        clearFilters?: string;
+    };
+}
+export declare function SearchFiltersRow({ urlCategory, categories, urlMinPrice, urlMaxPrice, showClear, onCategoryChange, onPriceFilter, onClearFilters, labels, }: SearchFiltersRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/search/components/SearchFiltersRow.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Div, Input, Label, Row, Select, Span } from "../../../ui";
+export function SearchFiltersRow({ urlCategory, categories, urlMinPrice, urlMaxPrice, showClear, onCategoryChange, onPriceFilter, onClearFilters, labels = {}, }) {
+    const [minPrice, setMinPrice] = useState(urlMinPrice);
+    const [maxPrice, setMaxPrice] = useState(urlMaxPrice);
+    const L = {
+        categoryFilter: labels.categoryFilter ?? "Category",
+        allCategories: labels.allCategories ?? "All Categories",
+        priceRange: labels.priceRange ?? "Price Range",
+        minPrice: labels.minPrice ?? "Min",
+        maxPrice: labels.maxPrice ?? "Max",
+        apply: labels.apply ?? "Apply",
+        clearFilters: labels.clearFilters ?? "Clear Filters",
+    };
+    return (_jsxs(Row, { wrap: true, gap: "md", align: "end", children: [_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-600 dark:text-zinc-400", children: L.categoryFilter }), _jsx(Select, { value: urlCategory, onValueChange: (value) => onCategoryChange(value), options: [
+                            { value: "", label: L.allCategories },
+                            ...categories.map((cat) => ({ value: cat.id, label: cat.name })),
+                        ], className: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-600 dark:text-zinc-400", children: L.priceRange }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, value: minPrice, onChange: (e) => setMinPrice(e.target.value), placeholder: L.minPrice, className: "w-28 rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" }), _jsx(Span, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "\u2013" }), _jsx(Input, { type: "number", min: 0, value: maxPrice, onChange: (e) => setMaxPrice(e.target.value), placeholder: L.maxPrice, className: "w-28 rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => onPriceFilter(minPrice, maxPrice), className: "h-10 px-4 rounded-lg bg-primary-600 hover:bg-primary-700 text-white text-sm font-medium transition-colors", children: L.apply })] })] }), showClear && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClearFilters, className: "h-10 px-4 rounded-lg border border-zinc-200 dark:border-slate-700 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.clearFilters }))] }));
+}

package/dist/features/search/components/SearchResultsSection.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import type { SearchProductItem } from "../types";
+export interface SearchResultsSectionProps {
+    products: SearchProductItem[];
+    total: number;
+    totalPages: number;
+    urlQ: string;
+    urlSort: string;
+    urlPage: number;
+    isLoading: boolean;
+    /** Called with new sort value */
+    onSortChange: (sort: string) => void;
+    /** Called with new page number */
+    onPageChange: (page: number) => void;
+    /** Slot for rendering a single product card */
+    renderItem: (product: SearchProductItem) => React.ReactNode;
+    /** Optional custom loading renderer. */
+    renderLoading?: (opts: {
+        skeletonCount: number;
+    }) => React.ReactNode;
+    /** Optional custom empty-state renderer. */
+    renderEmpty?: (opts: {
+        query: string;
+    }) => React.ReactNode;
+    /** Optional custom products renderer. */
+    renderProducts?: (products: SearchProductItem[]) => React.ReactNode;
+    /** Optional custom sort/count toolbar renderer. */
+    renderSortBar?: (opts: {
+        total: number;
+        showing: number;
+        urlSort: string;
+        onSortChange: (sort: string) => void;
+    }) => React.ReactNode;
+    /** Optional custom pagination renderer. */
+    renderPagination?: (opts: {
+        urlPage: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+    }) => React.ReactNode;
+    sortOptions?: Array<{
+        value: string;
+        label: string;
+    }>;
+    labels?: {
+        sortLabel?: string;
+        noResultsTitle?: string;
+        noResultsSubtitle?: string;
+        showing?: (count: number, total: number) => string;
+        prevPage?: string;
+        nextPage?: string;
+    };
+}
+export declare function SearchResultsSection({ products, total, totalPages, urlQ, urlSort, urlPage, isLoading, onSortChange, onPageChange, renderItem, renderLoading, renderEmpty, renderProducts, renderSortBar, renderPagination, sortOptions, labels, }: SearchResultsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/search/components/SearchResultsSection.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Div, Grid, Row, Select, Span, Text } from "../../../ui";
+const PAGE_SIZE = 24;
+export function SearchResultsSection({ products, total, totalPages, urlQ, urlSort, urlPage, isLoading, onSortChange, onPageChange, renderItem, renderLoading, renderEmpty, renderProducts, renderSortBar, renderPagination, sortOptions = [], labels = {}, }) {
+    const L = {
+        noResultsTitle: labels.noResultsTitle ?? "No results found",
+        noResultsSubtitle: labels.noResultsSubtitle,
+        showing: labels.showing ?? ((c, t) => `Showing ${c} of ${t}`),
+        prevPage: labels.prevPage ?? "Previous",
+        nextPage: labels.nextPage ?? "Next",
+    };
+    if (isLoading) {
+        if (renderLoading) {
+            return _jsx(_Fragment, { children: renderLoading({ skeletonCount: PAGE_SIZE }) });
+        }
+        return (_jsx(Grid, { cols: "statTiles", children: Array.from({ length: PAGE_SIZE }).map((_, i) => (_jsx(Div, { className: "aspect-square rounded-xl bg-zinc-100 dark:bg-slate-800 animate-pulse" }, i))) }));
+    }
+    if (products.length === 0) {
+        if (renderEmpty) {
+            return _jsx(_Fragment, { children: renderEmpty({ query: urlQ }) });
+        }
+        return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-20 text-center gap-3", children: [_jsx(Span, { className: "text-5xl", "aria-hidden": "true", children: "\uD83D\uDD0D" }), _jsx(Text, { className: "text-lg font-semibold text-zinc-800 dark:text-zinc-100", children: L.noResultsTitle }), urlQ && L.noResultsSubtitle && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: L.noResultsSubtitle }))] }));
+    }
+    return (_jsxs(Div, { className: "space-y-5", children: [renderSortBar ? (renderSortBar({
+                total,
+                showing: products.length,
+                urlSort,
+                onSortChange,
+            })) : (_jsxs(Row, { justify: "between", children: [_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: L.showing(products.length, total) }), sortOptions.length > 0 && (_jsx(Select, { value: urlSort, onValueChange: onSortChange, options: sortOptions, className: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none" }))] })), renderProducts ? (renderProducts(products)) : (_jsx(Grid, { cols: "statTiles", children: products.map((p) => (_jsx(Div, { children: renderItem(p) }, p.id))) })), totalPages > 1 &&
+                (renderPagination ? (renderPagination({
+                    urlPage,
+                    totalPages,
+                    onPageChange,
+                })) : (_jsxs(Div, { className: "flex items-center justify-center gap-2 pt-4", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onPageChange(urlPage - 1), disabled: urlPage <= 1, className: "px-4 py-2 rounded-lg border border-zinc-200 dark:border-slate-700 text-sm text-zinc-700 dark:text-zinc-300 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.prevPage }), _jsxs(Span, { className: "text-sm text-zinc-600 dark:text-zinc-400 tabular-nums", children: [urlPage, " / ", totalPages] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onPageChange(urlPage + 1), disabled: urlPage >= totalPages, className: "px-4 py-2 rounded-lg border border-zinc-200 dark:border-slate-700 text-sm text-zinc-700 dark:text-zinc-300 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.nextPage })] })))] }));
+}

package/dist/features/search/components/SearchView.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export interface SearchViewProps {
+    /** Current search query string */
+    query?: string;
+    /** Total result count */
+    total: number;
+    /** Whether data is loading */
+    isLoading: boolean;
+    labels?: {
+        searchTitle?: string;
+        resultsCount?: (count: number, query: string) => string;
+        noQuery?: string;
+        noQueryDescription?: string;
+    };
+    /** Render the search input */
+    renderSearchInput: () => React.ReactNode;
+    /** Render the filters panel (drawer/sidebar) */
+    renderFilters?: () => React.ReactNode;
+    /** Render active filter chips */
+    renderActiveFilters?: () => React.ReactNode;
+    /** Render the sort + view-mode toolbar  */
+    renderToolbar?: () => React.ReactNode;
+    /** Render results grid / list */
+    renderResults: () => React.ReactNode;
+    /** Render pagination */
+    renderPagination?: () => React.ReactNode;
+    className?: string;
+}
+export declare function SearchView({ query, total, isLoading, labels, renderSearchInput, renderFilters, renderActiveFilters, renderToolbar, renderResults, renderPagination, className, }: SearchViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/search/components/SearchView.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Div, Heading, Main, Row, Span, Text } from "../../../ui";
+export function SearchView({ query, total, isLoading, labels = {}, renderSearchInput, renderFilters, renderActiveFilters, renderToolbar, renderResults, renderPagination, className = "", }) {
+    const hasQuery = !!query?.trim();
+    return (_jsx(Main, { className: `min-h-screen ${className}`, children: _jsxs(Div, { className: "py-6 space-y-4", children: [_jsx(Div, { children: renderSearchInput() }), hasQuery && (_jsx(Div, { children: _jsx(Heading, { level: 1, className: "text-xl font-semibold", children: labels.resultsCount
+                            ? labels.resultsCount(total, query)
+                            : `${total} results for "${query}"` }) })), !hasQuery && (_jsxs(Div, { className: "py-16 text-center", children: [_jsx(Span, { className: "text-4xl mb-4 block", children: "\uD83D\uDD0D" }), _jsx(Heading, { level: 2, className: "mb-2", children: labels.searchTitle ?? "Search" }), _jsx(Text, { variant: "secondary", children: labels.noQueryDescription ?? "Start typing to find products" })] })), hasQuery && (_jsxs(_Fragment, { children: [renderActiveFilters?.(), _jsxs(Row, { wrap: true, justify: "between", gap: "3", children: [renderFilters?.(), renderToolbar?.()] }), renderResults(), renderPagination?.()] }))] }) }));
+}

package/dist/features/search/components/index.d.ts

@@ -0,0 +1,8 @@
+export { Search } from "./Search";
+export type { SearchLabels, SearchProps, SearchQuickLink, SearchRouterAdapter, } from "./Search";
+export { SearchFiltersRow } from "./SearchFiltersRow";
+export type {} from "./SearchFiltersRow";
+export { SearchResultsSection } from "./SearchResultsSection";
+export type { SearchResultsSectionProps } from "./SearchResultsSection";
+export { SearchView } from "./SearchView";
+export type { SearchViewProps } from "./SearchView";

package/dist/features/search/components/index.js

@@ -0,0 +1,4 @@
+export { Search } from "./Search";
+export { SearchFiltersRow } from "./SearchFiltersRow";
+export { SearchResultsSection } from "./SearchResultsSection";
+export { SearchView } from "./SearchView";

package/dist/features/search/hooks/useNavSuggestions.d.ts

@@ -0,0 +1,11 @@
+export interface NavSuggestionRecord {
+    objectID: string;
+    type: "page" | "category" | "blog" | "event";
+    title: string;
+    subtitle?: string;
+    url: string;
+}
+export declare function useNavSuggestions(query: string, debounceMs?: number): {
+    suggestions: NavSuggestionRecord[];
+    isLoading: boolean;
+};

package/dist/features/search/hooks/useNavSuggestions.js

@@ -0,0 +1,32 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+export function useNavSuggestions(query, debounceMs = 250) {
+    const [suggestions, setSuggestions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        if (!query.trim()) {
+            setSuggestions([]);
+            return;
+        }
+        timerRef.current = setTimeout(async () => {
+            setIsLoading(true);
+            try {
+                setSuggestions([]);
+            }
+            catch {
+                setSuggestions([]);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        }, debounceMs);
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, [query, debounceMs]);
+    return { suggestions, isLoading };
+}

package/dist/features/search/hooks/useSearch.d.ts

@@ -0,0 +1,21 @@
+import type { SearchResponse, SearchCategoryOption } from "../types";
+interface UseSearchOptions {
+    initialCategories?: SearchCategoryOption[];
+    categoriesEndpoint?: string;
+    searchEndpoint?: string;
+}
+/**
+ * useSearch
+ * Fetches search results via GET /api/search.
+ * `searchParams` is a pre-built URLSearchParams string produced by the component.
+ * `options.initialCategories` — server-prefetched category list for filter facets.
+ */
+export declare function useSearch(searchParams: string, options?: UseSearchOptions): {
+    results: SearchResponse | null;
+    items: import("..").SearchProductItem[];
+    total: number;
+    totalPages: number;
+    isLoading: boolean;
+    categories: SearchCategoryOption[];
+};
+export {};