@mohasinac/appkit 2.8.2 → 2.8.4

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

@@ -1,11 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
+const __O = {
+    hidden: "overflow-hidden",
+};
 const SVG_PATH_SEARCH = "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z";
 const CLS_HOVER_ROW = "hover:bg-zinc-100 dark:hover:bg-slate-800";
 const CLS_ICON_ROW = "w-4 h-4 flex-shrink-0 text-zinc-500 dark:text-zinc-400";
 const CLS_TRUNCATE = "font-medium truncate";
-import { Button, Input, Li, Row, Span, Text, Ul } from "../../../ui";
+import { Button, Div, Input, Li, Row, Span, Text, Ul } from "../../../ui";
 import { useNavSuggestions } from "../hooks/useNavSuggestions";
 const DEFAULT_TYPE_ICONS = {
     page: "📄",
@@ -23,7 +26,7 @@ const DEFAULT_TYPE_BADGES = {
 };
 function SuggestionItem({ suggestion, itemIndex, activeIndex, onSelect, onHover, typeIcons, typeBadges, }) {
     const isActive = activeIndex === itemIndex;
-    return (_jsx(Li, { children: _jsxs(Button, { type: "button", variant: "ghost", onClick: () => onSelect(suggestion), onMouseEnter: () => onHover(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" : CLS_HOVER_ROW}`, 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: CLS_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 })] }) }));
+    return (_jsx(Li, { children: _jsxs(Button, { type: "button", variant: "ghost", onClick: () => onSelect(suggestion), onMouseEnter: () => onHover(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" : CLS_HOVER_ROW}`, children: [_jsx(Span, { size: "sm", children: typeIcons[suggestion.type] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", className: CLS_TRUNCATE, children: suggestion.title }), suggestion.subtitle && (_jsx(Text, { variant: "secondary", size: "xs", className: "truncate", children: suggestion.subtitle }))] }), _jsx(Span, { size: "xs", className: `px-2 py-0.5 rounded-full ${typeBadges[suggestion.type]}`, children: suggestion.type })] }) }));
 }
 export function Search({ isOpen, onClose, onSearch, onOpen, value, onChange, placeholder, deferred = true, debounceMs = 300, onClear, className, router, quickLinks = [], labels, suggestionTypeIcons, suggestionTypeBadges, resourceTypes, defaultResourceType = "products", storageKey = "letitrip_search_type", }) {
     const isInlineMode = value !== undefined;
@@ -202,11 +205,11 @@ export function Search({ isOpen, onClose, onSearch, onOpen, value, onChange, pla
                                 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" }) }) }))] }), resourceTypes && resourceTypes.length > 0 && (_jsx("select", { value: selectedType, onChange: (e) => handleTypeChange(e.target.value), "aria-label": labels.resourceTypeLabel ?? "Search in", className: "flex-shrink-0 rounded-lg border border-zinc-300 bg-white px-2 py-2 text-sm text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300 cursor-pointer", children: resourceTypes.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })), deferred && (_jsx(Button, { type: "button", variant: "primary", onClick: handleDeferredSubmit, "aria-label": labels.ariaLabel, className: "flex-shrink-0 px-3 py-2 rounded-lg", 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: SVG_PATH_SEARCH }) }) })), 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", style: { zIndex: "var(--appkit-z-dropdown)" }, onMouseDown: (event) => event.preventDefault(), children: [filteredQuickLinks.length > 0 && (_jsx(Ul, { children: filteredQuickLinks.map((link, index) => renderInlineQuickLink(link, index)) })), 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 &&
+                            }, 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" }) }) }))] }), resourceTypes && resourceTypes.length > 0 && (_jsx("select", { value: selectedType, onChange: (e) => handleTypeChange(e.target.value), "aria-label": labels.resourceTypeLabel ?? "Search in", className: "flex-shrink-0 rounded-lg border border-zinc-300 bg-white px-2 py-2 text-sm text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300 cursor-pointer", children: resourceTypes.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })), deferred && (_jsx(Button, { type: "button", variant: "primary", onClick: handleDeferredSubmit, "aria-label": labels.ariaLabel, className: "flex-shrink-0 px-3 py-2 rounded-lg", 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: SVG_PATH_SEARCH }) }) })), 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", style: { zIndex: "var(--appkit-z-dropdown)" }, onMouseDown: (event) => event.preventDefault(), children: [filteredQuickLinks.length > 0 && (_jsx(Ul, { children: filteredQuickLinks.map((link, index) => renderInlineQuickLink(link, index)) })), query && suggestionsLoading && (_jsx(Div, { className: "px-4 py-3", 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" : CLS_HOVER_ROW}`, 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: CLS_TRUNCATE, children: suggestion.title }), suggestion.subtitle && (_jsx(Text, { variant: "secondary", size: "xs", className: "truncate", children: suggestion.subtitle }))] })] }, `inline-suggestion-${suggestion.objectID}`));
+                                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" : CLS_HOVER_ROW}`, children: [_jsx(Span, { size: "sm", children: typeIcons[suggestion.type] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", className: CLS_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);
@@ -278,7 +281,7 @@ export function Search({ isOpen, onClose, onSearch, onOpen, value, onChange, pla
     };
     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" }) }), resourceTypes && resourceTypes.length > 0 && (_jsx("select", { value: selectedType, onChange: (e) => handleTypeChange(e.target.value), "aria-label": labels.resourceTypeLabel ?? "Search in", className: "flex-shrink-0 rounded-lg border border-zinc-300 bg-white px-2 py-2 text-sm text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300 cursor-pointer", children: resourceTypes.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })), _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: SVG_PATH_SEARCH }) }), 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) => {
+    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]", children: _jsxs(Div, { className: "container mx-auto px-4 py-3 md:py-4 relative", children: [_jsxs(Row, { gap: "sm", className: "md:gap-3", children: [_jsx(Div, { className: "flex-1 relative", 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" }) }), resourceTypes && resourceTypes.length > 0 && (_jsx("select", { value: selectedType, onChange: (e) => handleTypeChange(e.target.value), "aria-label": labels.resourceTypeLabel ?? "Search in", className: "flex-shrink-0 rounded-lg border border-zinc-300 bg-white px-2 py-2 text-sm text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300 cursor-pointer", children: resourceTypes.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })), _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: SVG_PATH_SEARCH }) }), 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", children: [filteredSiteLinks.length > 0 && !suggestionsLoading && (_jsxs(Div, { className: `rounded-xl ${__O.hidden} border border-zinc-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900`, children: [_jsx(Div, { className: "px-4 py-2 border-b border-zinc-200 dark:border-slate-700", 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;
@@ -286,5 +289,5 @@ export function Search({ isOpen, onClose, onSearch, onOpen, value, onChange, pla
                                                     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" : CLS_HOVER_ROW}`, children: [_jsx(Icon, { className: CLS_ICON_ROW }), _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) => (_jsx(SuggestionItem, { suggestion: suggestion, itemIndex: getOverlaySuggestionIndex(suggestionIndex), activeIndex: activeIndex, onSelect: handleSuggestionClick, onHover: setActiveIndex, typeIcons: typeIcons, typeBadges: typeBadges }, 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" : CLS_HOVER_ROW}${suggestions.length > 0 ? " border-t border-zinc-200 dark:border-slate-700" : ""}`, children: [_jsx("svg", { className: CLS_ICON_ROW, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: SVG_PATH_SEARCH }) }), _jsx(Text, { size: "sm", className: "font-medium", children: labels.browseProducts(query) })] })] }))] }))] }) }));
+                                    }) })] })), query && (_jsxs(Div, { className: `rounded-xl ${__O.hidden} border border-zinc-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900`, children: [suggestionsLoading ? (_jsx(Div, { className: "px-4 py-3", children: _jsx(Text, { variant: "secondary", size: "sm", children: labels.searching }) })) : suggestions.length > 0 ? (_jsx(Ul, { children: suggestions.map((suggestion, suggestionIndex) => (_jsx(SuggestionItem, { suggestion: suggestion, itemIndex: getOverlaySuggestionIndex(suggestionIndex), activeIndex: activeIndex, onSelect: handleSuggestionClick, onHover: setActiveIndex, typeIcons: typeIcons, typeBadges: typeBadges }, 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" : CLS_HOVER_ROW}${suggestions.length > 0 ? " border-t border-zinc-200 dark:border-slate-700" : ""}`, children: [_jsx("svg", { className: CLS_ICON_ROW, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: SVG_PATH_SEARCH }) }), _jsx(Text, { size: "sm", className: "font-medium", children: labels.browseProducts(query) })] })] }))] }))] }) }));
 }

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

@@ -17,5 +17,5 @@ export function SearchFiltersRow({ urlCategory, categories, urlMinPrice, urlMaxP
     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 }))] }));
+                        ], 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, { size: "sm", className: "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.js

@@ -31,5 +31,5 @@ export function SearchResultsSection({ products, total, totalPages, urlQ, urlSor
                     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 })] })))] }));
+                })) : (_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, { size: "sm", className: "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/seller/components/CouponInlineSelect.d.ts

@@ -0,0 +1,22 @@
+type Scope = "admin" | "store";
+interface BaseProps {
+    /** Which API to query. "store" hits the seller's own coupons; "admin" hits the admin pool. */
+    scope: Scope;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Show the "+ Create new coupon" quick-create (store scope only — admin coupons are too complex for inline create). Defaults to scope === "store". */
+    allowCreate?: boolean;
+}
+interface SingleProps extends BaseProps {
+    multiple?: false;
+    value: string;
+    onChange: (v: string) => void;
+}
+interface MultiProps extends BaseProps {
+    multiple: true;
+    value: string[];
+    onChange: (v: string[]) => void;
+}
+export type CouponInlineSelectProps = SingleProps | MultiProps;
+export declare function CouponInlineSelect(props: CouponInlineSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sortBy } from "@mohasinac/appkit";
+import React from "react";
+import { PaginatedSelect } from "../../../ui/components/PaginatedSelect";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS, SELLER_ENDPOINTS, } from "../../../constants/api-endpoints";
+function makeLoader(scope) {
+    const endpoint = scope === "admin" ? ADMIN_ENDPOINTS.COUPONS : SELLER_ENDPOINTS.COUPONS;
+    return async (query, page) => {
+        const params = new URLSearchParams({
+            page: String(page),
+            pageSize: "25",
+            sorts: sortBy("createdAt", "DESC"),
+        });
+        if (query.trim())
+            params.set("q", query.trim());
+        const res = await apiClient.get(`${endpoint}?${params.toString()}`);
+        const raw = res.data ?? res.coupons ?? res.items ?? [];
+        const items = raw.map((c) => ({
+            value: String(c.id ?? c.code ?? ""),
+            label: c.code
+                ? `${c.code}${c.name && c.name !== c.code ? ` — ${c.name}` : ""}`
+                : String(c.name ?? c.id ?? ""),
+        }));
+        const total = res.total ?? items.length;
+        return { items, hasMore: page * 25 < total, nextPage: page + 1 };
+    };
+}
+const TODAY_ISO = () => new Date().toISOString().slice(0, 10);
+const NEXT_YEAR_ISO = () => {
+    const d = new Date();
+    d.setFullYear(d.getFullYear() + 1);
+    return d.toISOString().slice(0, 10);
+};
+async function quickCreateStoreCoupon(values) {
+    const code = String(values.code ?? "")
+        .toUpperCase()
+        .replace(/\s+/g, "");
+    const valueNum = Number(values.value ?? 0);
+    const type = String(values.type ?? "percentage");
+    if (!code)
+        throw new Error("Code is required");
+    if (type === "percentage" && (valueNum < 1 || valueNum > 100)) {
+        throw new Error("Percentage must be between 1 and 100");
+    }
+    const res = await apiClient.post(SELLER_ENDPOINTS.COUPONS, {
+        code,
+        type,
+        value: valueNum,
+        totalLimit: 0,
+        perUserLimit: 0,
+        startDate: TODAY_ISO(),
+        endDate: NEXT_YEAR_ISO(),
+        isActive: true,
+    });
+    const id = String(res.data?.id ?? res.id ?? "");
+    if (!id)
+        throw new Error("Created coupon returned no id");
+    return { value: id, label: code };
+}
+export function CouponInlineSelect(props) {
+    const { scope, placeholder = "Search coupons…", disabled, allowCreate = scope === "store", } = props;
+    const loader = React.useMemo(() => makeLoader(scope), [scope]);
+    const sharedCreate = allowCreate && scope === "store"
+        ? {
+            createLabel: "coupon",
+            drawerTitle: "Create coupon",
+            createFields: [
+                {
+                    name: "code",
+                    label: "Code",
+                    type: "text",
+                    required: true,
+                    placeholder: "e.g. SAVE10",
+                },
+                {
+                    name: "type",
+                    label: "Type",
+                    type: "select",
+                    required: true,
+                    options: [
+                        { value: "percentage", label: "Percentage off" },
+                        { value: "fixed", label: "Flat amount off (₹)" },
+                        { value: "free_shipping", label: "Free shipping" },
+                    ],
+                },
+                {
+                    name: "value",
+                    label: "Value (% for percentage, ₹ for flat)",
+                    type: "number",
+                    required: true,
+                    placeholder: "10",
+                },
+            ],
+            onCreateSubmit: quickCreateStoreCoupon,
+            createSubmitLabel: "Create coupon",
+        }
+        : {};
+    if (props.multiple) {
+        return (_jsx(PaginatedSelect, { multiple: true, value: props.value, onChange: (v) => props.onChange(v), loadOptions: loader, placeholder: placeholder, disabled: disabled, ...sharedCreate }));
+    }
+    return (_jsx(PaginatedSelect, { value: props.value || null, onChange: (v) => props.onChange(v ?? ""), loadOptions: loader, placeholder: placeholder, disabled: disabled, ...sharedCreate }));
+}

package/dist/features/seller/components/GroupInlineSelect.d.ts

@@ -0,0 +1,23 @@
+interface BaseProps {
+    placeholder?: string;
+    disabled?: boolean;
+    /** Show the "+ Create new group" quick-create. Defaults to true. */
+    allowCreate?: boolean;
+    /** "store" hits /api/store/grouped-listings; "admin" hits /api/admin/grouped-listings. Defaults to "store". */
+    scope?: "store" | "admin";
+    /** Optional label rendered above the selector. */
+    label?: string;
+}
+interface SingleProps extends BaseProps {
+    multiple?: false;
+    value: string;
+    onChange: (v: string) => void;
+}
+interface MultiProps extends BaseProps {
+    multiple: true;
+    value: string[];
+    onChange: (v: string[]) => void;
+}
+export type GroupInlineSelectProps = SingleProps | MultiProps;
+export declare function GroupInlineSelect(props: GroupInlineSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { PaginatedSelect } from "../../../ui/components/PaginatedSelect";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS, SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { Text } from "../../../ui";
+function makeLoadOptions(scope) {
+    const endpoint = scope === "admin"
+        ? ADMIN_ENDPOINTS.GROUPED_LISTINGS
+        : SELLER_ENDPOINTS.GROUPED_LISTINGS;
+    return async function loadGroupOptions(query, _page) {
+        const res = await apiClient.get(endpoint);
+        const raw = res.data?.items ?? res.items ?? [];
+        const all = raw.map((g) => {
+            const count = Array.isArray(g.productIds) ? g.productIds.length : 0;
+            const label = g.title ?? g.name ?? g.slug ?? String(g.id ?? "");
+            return {
+                value: String(g.id ?? ""),
+                label: count > 0 ? `${label} (${count})` : label,
+            };
+        });
+        const q = query.trim().toLowerCase();
+        const items = q ? all.filter((g) => g.label.toLowerCase().includes(q)) : all;
+        return { items, hasMore: false };
+    };
+}
+function toGroupSlug(name) {
+    const base = name
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    return base.startsWith("group-") ? base : `group-${base}`;
+}
+async function quickCreateGroup(values, scope) {
+    const title = String(values.title ?? "").trim();
+    if (!title)
+        throw new Error("Title is required");
+    const endpoint = scope === "admin"
+        ? ADMIN_ENDPOINTS.GROUPED_LISTINGS
+        : SELLER_ENDPOINTS.GROUPED_LISTINGS;
+    const res = await apiClient.post(endpoint, {
+        title,
+        slug: toGroupSlug(title),
+        productIds: [],
+        isActive: true,
+        groupTheme: "generic",
+    });
+    const id = String(res.data?.id ?? res.id ?? "");
+    if (!id)
+        throw new Error("Created group returned no id");
+    return { value: id, label: title };
+}
+export function GroupInlineSelect(props) {
+    const { placeholder = "Search groups…", disabled, allowCreate = true, scope = "store", label, } = props;
+    const loadOptions = React.useMemo(() => makeLoadOptions(scope), [scope]);
+    const sharedCreate = allowCreate
+        ? {
+            createLabel: "group",
+            drawerTitle: "Create group",
+            createFields: [
+                {
+                    name: "title",
+                    label: "Group title",
+                    type: "text",
+                    required: true,
+                    placeholder: "e.g. Pokémon Starter Bundle",
+                },
+            ],
+            onCreateSubmit: (values) => quickCreateGroup(values, scope),
+            createSubmitLabel: "Create group",
+        }
+        : {};
+    const labelEl = label ? (_jsx(Text, { size: "sm", weight: "medium", className: "mb-1", children: label })) : null;
+    if (props.multiple) {
+        return (_jsxs(_Fragment, { children: [labelEl, _jsx(PaginatedSelect, { multiple: true, value: props.value, onChange: (v) => props.onChange(v), loadOptions: loadOptions, placeholder: placeholder, disabled: disabled, ...sharedCreate })] }));
+    }
+    return (_jsxs(_Fragment, { children: [labelEl, _jsx(PaginatedSelect, { value: props.value || null, onChange: (v) => props.onChange(v ?? ""), loadOptions: loadOptions, placeholder: placeholder, disabled: disabled, ...sharedCreate })] }));
+}

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

@@ -5,6 +5,7 @@ import { Modal } from "../../../ui/components/Modal";
 import { Input } from "../../../ui/components/Input";
 import { Button } from "../../../ui/components/Button";
 import { Row } from "../../../ui/components/Layout";
+import { Div } from "../../../ui/components/Div";
 import { Text } from "../../../ui/components/Typography";
 export function PhysicalLocationModal({ count, onSave, onClose }) {
     const [zone, setZone] = useState("");
@@ -26,5 +27,5 @@ export function PhysicalLocationModal({ count, onSave, onClose }) {
             setSaving(false);
         }
     };
-    return (_jsx(Modal, { isOpen: true, onClose: onClose, title: `Set Location — ${count} item${count !== 1 ? "s" : ""}`, size: "sm", actions: _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: onClose, disabled: saving, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleSave, disabled: saving, children: saving ? "Saving..." : "Save" })] }), children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [_jsx(Text, { variant: "muted", children: "Assign a physical storage location to the selected items. All fields are optional." }), _jsx(Input, { label: "Zone (e.g. A, B, Storage-1)", value: zone, onChange: e => setZone(e.target.value), placeholder: "A" }), _jsx(Input, { label: "Shelf (e.g. 3, Top, Middle)", value: shelf, onChange: e => setShelf(e.target.value), placeholder: "3" }), _jsx(Input, { label: "Bin (e.g. Blue, Box-12)", value: bin, onChange: e => setBin(e.target.value), placeholder: "Blue" }), error && _jsx(Text, { variant: "error", children: error })] }) }));
+    return (_jsx(Modal, { isOpen: true, onClose: onClose, title: `Set Location — ${count} item${count !== 1 ? "s" : ""}`, size: "sm", actions: _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: onClose, disabled: saving, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleSave, disabled: saving, children: saving ? "Saving..." : "Save" })] }), children: _jsxs(Div, { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [_jsx(Text, { variant: "muted", children: "Assign a physical storage location to the selected items. All fields are optional." }), _jsx(Input, { label: "Zone (e.g. A, B, Storage-1)", value: zone, onChange: e => setZone(e.target.value), placeholder: "A" }), _jsx(Input, { label: "Shelf (e.g. 3, Top, Middle)", value: shelf, onChange: e => setShelf(e.target.value), placeholder: "3" }), _jsx(Input, { label: "Bin (e.g. Blue, Box-12)", value: bin, onChange: e => setBin(e.target.value), placeholder: "Blue" }), error && _jsx(Text, { variant: "error", children: error })] }) }));
 }

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Heading, Text } from "../../../ui/components/Typography";
+import { Div } from "../../../ui/components/Div";
 export function PrintCenterView({ store, brandName = "LetItRip" }) {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-24 text-center gap-4", children: [_jsxs(Heading, { level: 2, children: [brandName, " Print Center"] }), store && _jsx(Text, { size: "sm", variant: "muted", children: store.storeName }), _jsx(Text, { size: "sm", variant: "muted", children: "Print center features are coming soon." })] }));
+    return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-24 text-center gap-4", children: [_jsxs(Heading, { level: 2, children: [brandName, " Print Center"] }), store && _jsx(Text, { size: "sm", variant: "muted", children: store.storeName }), _jsx(Text, { size: "sm", variant: "muted", children: "Print center features are coming soon." })] }));
 }

package/dist/features/seller/components/ProductInlineSelect.d.ts

@@ -0,0 +1,24 @@
+type Scope = "admin" | "store";
+interface BaseProps {
+    /** Which API to query. "store" lists the seller's own products; "admin" lists all. */
+    scope: Scope;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Filter expression appended to the request, e.g. "listingType==standard". */
+    filters?: string;
+    /** Override the endpoint (for store-products with a custom path, e.g. `/api/store/products`). */
+    endpoint?: string;
+}
+interface SingleProps extends BaseProps {
+    multiple?: false;
+    value: string | null;
+    onChange: (v: string | null) => void;
+}
+interface MultiProps extends BaseProps {
+    multiple: true;
+    value: string[];
+    onChange: (v: string[]) => void;
+}
+export type ProductInlineSelectProps = SingleProps | MultiProps;
+export declare function ProductInlineSelect(props: ProductInlineSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { PaginatedSelect } from "../../../ui/components/PaginatedSelect";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS, SELLER_ENDPOINTS, } from "../../../constants/api-endpoints";
+function endpointFor(scope, override) {
+    if (override)
+        return override;
+    return scope === "admin"
+        ? ADMIN_ENDPOINTS.PRODUCTS
+        : SELLER_ENDPOINTS.PRODUCTS;
+}
+function makeLoader(scope, filters, endpoint) {
+    const base = endpointFor(scope, endpoint);
+    return async (query, page) => {
+        const params = new URLSearchParams({
+            page: String(page),
+            pageSize: "25",
+        });
+        if (query.trim())
+            params.set("q", query.trim());
+        if (filters)
+            params.set("filters", filters);
+        const res = await apiClient.get(`${base}?${params.toString()}`);
+        const raw = res.data ?? res.products ?? res.items ?? [];
+        const items = raw.map((p) => ({
+            value: String(p.id ?? p.slug ?? ""),
+            label: String(p.title ?? p.name ?? p.slug ?? p.id ?? ""),
+        }));
+        const total = res.total ?? items.length;
+        return { items, hasMore: page * 25 < total, nextPage: page + 1 };
+    };
+}
+export function ProductInlineSelect(props) {
+    const { scope, placeholder = "Search products…", disabled, filters, endpoint, } = props;
+    const loader = React.useMemo(() => makeLoader(scope, filters, endpoint), [scope, filters, endpoint]);
+    if (props.multiple) {
+        return (_jsx(PaginatedSelect, { multiple: true, value: props.value, onChange: (v) => props.onChange(v), loadOptions: loader, placeholder: placeholder, disabled: disabled, searchPlaceholder: "Type title or slug\u2026" }));
+    }
+    return (_jsx(PaginatedSelect, { value: props.value, onChange: (v) => props.onChange(v), loadOptions: loader, placeholder: placeholder, disabled: disabled, searchPlaceholder: "Type title or slug\u2026" }));
+}

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

@@ -2,6 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Alert, Button, Div, FormField, Stack, Text } from "../../../ui";
+const __P = {
+    p5: "p-5",
+};
 function toRupees(paise) {
     return paise != null && paise > 0 ? String(Math.round(paise / 100)) : "";
 }
@@ -43,7 +46,7 @@ export function QuickProductForm({ values, onChange, onPublish, onSave, onSwitch
         }
         onSave();
     };
-    return (_jsxs(Stack, { gap: "lg", className: "p-5", children: [_jsx(Div, { children: _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Quick add \u2014 fill the essentials and publish. You can add more details later." }) }), touched && Object.keys(errors).length > 0 && (_jsx(Alert, { variant: "error", children: "Please fix the highlighted fields before publishing." })), _jsx(FormField, { name: "title", label: "Product Name", type: "text", value: values.title ?? "", onChange: (v) => onChange({ title: v }), placeholder: "e.g. Charizard Base Set PSA 9", required: true, error: touched ? errors.title : undefined }), renderCategorySelector ? (_jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Category" }), renderCategorySelector({
+    return (_jsxs(Stack, { gap: "lg", className: `${__P.p5}`, children: [_jsx(Div, { children: _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Quick add \u2014 fill the essentials and publish. You can add more details later." }) }), touched && Object.keys(errors).length > 0 && (_jsx(Alert, { variant: "error", children: "Please fix the highlighted fields before publishing." })), _jsx(FormField, { name: "title", label: "Product Name", type: "text", value: values.title ?? "", onChange: (v) => onChange({ title: v }), placeholder: "e.g. Charizard Base Set PSA 9", required: true, error: touched ? errors.title : undefined }), renderCategorySelector ? (_jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Category" }), renderCategorySelector({
                         value: values.category ?? "",
                         onChange: (v) => onChange({ category: v }),
                     }), touched && errors.category && (_jsx(Text, { className: "text-xs text-[var(--appkit-color-error)] mt-1", children: errors.category }))] })) : (_jsx(FormField, { name: "category", label: "Category", type: "text", value: values.category ?? "", onChange: (v) => onChange({ category: v }), placeholder: "e.g. Trading Cards", error: touched ? errors.category : undefined })), _jsx(FormField, { name: "price", label: "Price (\u20B9)", type: "number", value: toRupees(values.price), onChange: (v) => onChange({ price: toPaise(v) }), placeholder: "e.g. 499", required: true, error: touched ? errors.price : undefined }), _jsx(FormField, { name: "mainImage", label: "Product Image", type: "image", value: values.mainImage ?? "", onChange: (v) => onChange({ mainImage: v }), onUpload: onUploadImage, required: true, error: touched ? errors.mainImage : undefined }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: values.description ?? "", onChange: (v) => onChange({ description: v }), placeholder: "Brief description (optional)", rows: 3 }), _jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? 1), onChange: (v) => onChange({ stockQuantity: Math.max(0, parseInt(v, 10) || 0) }), placeholder: "1", hint: "How many units are available" }), _jsxs(Div, { className: "flex flex-col gap-3 pt-2", children: [_jsxs(Div, { className: "flex gap-3", children: [_jsx(Button, { variant: "primary", onClick: handlePublish, disabled: isLoading, className: "flex-1", children: isLoading ? "Publishing..." : "Publish" }), _jsx(Button, { variant: "secondary", onClick: handleSave, disabled: isLoading, children: "Save Draft" })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onSwitchToFull, className: "self-center text-xs", children: "Show all fields (advanced)" })] })] }));

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

@@ -2,11 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { MapPin, Pencil, Plus, Trash2, Star } from "lucide-react";
-import { Button, ConfirmDeleteModal, Div, Grid, Heading, Label, Row, SideDrawer, Span, Stack, Text } from "../../../ui";
+import { Button, ConfirmDeleteModal, Div, Grid, Heading, Label, Row, SideDrawer, Span, Stack, Table, Thead, Tbody, Tr, Th, Td, Text } from "../../../ui";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
+const __O = {
+    xAuto: "overflow-x-auto",
+};
 const INPUT_CLS = "w-full rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]";
+const CLS_DEFAULT_PILL = "inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800 px-2 py-0.5";
+const CLS_DELETE_BTN = "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-red-50 dark:hover:bg-red-950/40 hover:text-red-600 dark:hover:text-red-400 transition-colors";
 function Field({ label, hint, children }) {
     return (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "block text-xs font-medium text-zinc-700 dark:text-zinc-300", children: label }), children, hint && _jsx(Text, { size: "xs", color: "muted", children: hint })] }));
 }
@@ -42,7 +47,7 @@ function fromDoc(doc) {
     };
 }
 function AddressCard({ address, onEdit, onDelete, }) {
-    return (_jsxs(Div, { surface: "card", padding: "sm", className: "flex flex-col gap-2", children: [_jsxs(Row, { align: "start", justify: "between", gap: "xs", children: [_jsxs(Row, { gap: "xs", className: "min-w-0", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-[var(--appkit-color-primary)]" }), _jsx(Span, { weight: "semibold", className: "text-sm text-zinc-900 dark:text-zinc-100 truncate", children: address.label }), address.isDefault && (_jsxs(Span, { className: "inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800 text-xs px-2 py-0.5 font-medium", children: [_jsx(Star, { className: "h-3 w-3" }), "Default"] }))] }), _jsxs(Row, { gap: "px", className: "shrink-0", children: [_jsx("button", { type: "button", onClick: onEdit, title: "Edit address", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: onDelete, title: "Delete address", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-red-50 dark:hover:bg-red-950/40 hover:text-red-600 dark:hover:text-red-400 transition-colors", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }), _jsxs(Text, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: [address.fullName, " \u00B7 ", address.phone] }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed", children: [address.addressLine1, address.addressLine2 ? `, ${address.addressLine2}` : "", address.landmark ? ` (near ${address.landmark})` : "", _jsx("br", {}), address.city, ", ", address.state, " ", address.postalCode, ", ", address.country] })] }));
+    return (_jsxs(Div, { surface: "card", padding: "sm", className: "flex flex-col gap-2", children: [_jsxs(Row, { align: "start", justify: "between", gap: "xs", children: [_jsxs(Row, { gap: "xs", className: "min-w-0", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", weight: "semibold", className: "text-zinc-900 dark:text-zinc-100 truncate", children: address.label }), address.isDefault && (_jsxs(Span, { size: "xs", weight: "medium", className: CLS_DEFAULT_PILL, children: [_jsx(Star, { className: "h-3 w-3" }), "Default"] }))] }), _jsxs(Row, { gap: "px", className: "shrink-0", children: [_jsx("button", { type: "button", onClick: onEdit, title: "Edit address", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: onDelete, title: "Delete address", className: CLS_DELETE_BTN, children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }), _jsxs(Text, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: [address.fullName, " \u00B7 ", address.phone] }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed", children: [address.addressLine1, address.addressLine2 ? `, ${address.addressLine2}` : "", address.landmark ? ` (near ${address.landmark})` : "", _jsx("br", {}), address.city, ", ", address.state, " ", address.postalCode, ", ", address.country] })] }));
 }
 // ---------------------------------------------------------------------------
 // Main Component
@@ -134,5 +139,5 @@ export function SellerAddressesView({ apiBase = SELLER_ENDPOINTS.STORE_ADDRESSES
     const handleDelete = (addr) => setDeleteTargetAddr(addr);
     const set = (key, value) => setDraft((p) => ({ ...p, [key]: value }));
     const handleTextField = (key) => (e) => set(key, e.target.value);
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsxs(Row, { justify: "between", className: "sticky z-10 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-4 py-3", style: { top: "var(--header-height, 0px)" }, children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Pickup Addresses" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: "Manage your store's pickup and return locations" })] }), _jsxs(Button, { size: "sm", onClick: openAdd, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "Add Address" })] })] }), _jsxs(Div, { className: "py-6 px-4 sm:px-6 max-w-2xl", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Row, { justify: "center", className: "py-16", children: _jsx(Div, { className: "h-6 w-6 animate-spin rounded-full border-2 border-[var(--appkit-color-primary)] border-t-transparent" }) })) : addresses.length === 0 ? (_jsxs(Div, { className: "rounded-xl border-2 border-dashed border-zinc-200 dark:border-slate-700 py-16 flex flex-col items-center gap-3", children: [_jsx(MapPin, { className: "h-8 w-8 text-zinc-300 dark:text-slate-600" }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No pickup addresses yet" }), _jsx(Button, { size: "sm", variant: "outline", onClick: openAdd, children: "Add your first address" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Row, { justify: "end", className: "mb-2", children: [_jsx(Button, { size: "sm", variant: listView === "table" ? "primary" : "ghost", onClick: () => setListView("table"), children: "Table" }), _jsx(Button, { size: "sm", variant: listView === "cards" ? "primary" : "ghost", onClick: () => setListView("cards"), children: "Cards" })] }), listView === "cards" ? (_jsx(Grid, { gap: "sm", children: addresses.map((addr) => (_jsx(Div, { className: deletingId === addr.id ? "opacity-50 pointer-events-none" : "", children: _jsx(AddressCard, { address: addr, onEdit: () => openEdit(addr), onDelete: () => handleDelete(addr) }) }, addr.id))) })) : (_jsx(Div, { className: "overflow-x-auto rounded-lg border border-zinc-200 dark:border-slate-700", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-zinc-50 dark:bg-slate-800", children: _jsxs("tr", { children: [_jsx("th", { className: "text-left px-3 py-2 font-semibold", children: "Label" }), _jsx("th", { className: "text-left px-3 py-2 font-semibold", children: "Name" }), _jsx("th", { className: "text-left px-3 py-2 font-semibold", children: "City" }), _jsx("th", { className: "text-left px-3 py-2 font-semibold", children: "Phone" }), _jsx("th", { className: "text-right px-3 py-2 font-semibold", children: "Actions" })] }) }), _jsx("tbody", { children: addresses.map((addr) => (_jsxs("tr", { className: `border-t border-zinc-100 dark:border-slate-700 ${deletingId === addr.id ? "opacity-50" : ""}`, children: [_jsx("td", { className: "px-3 py-2", children: addr.label }), _jsx("td", { className: "px-3 py-2", children: addr.fullName }), _jsxs("td", { className: "px-3 py-2", children: [addr.city, ", ", addr.state] }), _jsx("td", { className: "px-3 py-2 tabular-nums", children: addr.phone }), _jsx("td", { className: "px-3 py-2 text-right", children: _jsxs(Row, { justify: "end", className: "gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => openEdit(addr), children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleDelete(addr), children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label })] }) })] }, addr.id))) })] }) }))] }))] }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: editingId ? "Edit Address" : "Add Address", footer: _jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "outline", onClick: closeDrawer, className: "flex-1", children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: saving, className: "flex-1", children: saving ? "Saving…" : editingId ? "Save Changes" : "Add Address" })] }), children: _jsxs(Stack, { gap: "md", className: "py-1", children: [saveError && (_jsx(Div, { className: "rounded-lg border border-error/20 bg-error-surface px-3 py-2 text-sm text-error", children: saveError })), _jsx(Field, { label: "Label *", hint: "e.g. Warehouse, Shop, Home", children: _jsx("input", { type: "text", value: draft.label, onChange: handleTextField("label"), placeholder: "Warehouse", maxLength: 60, className: INPUT_CLS }) }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "Full Name *", children: _jsx("input", { type: "text", value: draft.fullName, onChange: handleTextField("fullName"), placeholder: "Ravi Kumar", maxLength: 100, className: INPUT_CLS }) }), _jsx(Field, { label: "Phone *", children: _jsx("input", { type: "tel", value: draft.phone, onChange: handleTextField("phone"), placeholder: "+91 98765 43210", maxLength: 20, className: INPUT_CLS }) })] }), _jsx(Field, { label: "Address Line 1 *", children: _jsx("input", { type: "text", value: draft.addressLine1, onChange: handleTextField("addressLine1"), placeholder: "Shop 12, Main Market", maxLength: 200, className: INPUT_CLS }) }), _jsx(Field, { label: "Address Line 2", children: _jsx("input", { type: "text", value: draft.addressLine2, onChange: handleTextField("addressLine2"), placeholder: "Building / Floor (optional)", maxLength: 200, className: INPUT_CLS }) }), _jsx(Field, { label: "Landmark", children: _jsx("input", { type: "text", value: draft.landmark, onChange: handleTextField("landmark"), placeholder: "Near metro station (optional)", maxLength: 100, className: INPUT_CLS }) }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "City *", children: _jsx("input", { type: "text", value: draft.city, onChange: handleTextField("city"), placeholder: "Mumbai", maxLength: 100, className: INPUT_CLS }) }), _jsx(Field, { label: "State *", children: _jsx("input", { type: "text", value: draft.state, onChange: handleTextField("state"), placeholder: "Maharashtra", maxLength: 100, className: INPUT_CLS }) })] }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "Postal Code *", children: _jsx("input", { type: "text", value: draft.postalCode, onChange: handleTextField("postalCode"), placeholder: "400001", maxLength: 10, className: INPUT_CLS }) }), _jsx(Field, { label: "Country *", children: _jsx("input", { type: "text", value: draft.country, onChange: handleTextField("country"), placeholder: "India", maxLength: 60, className: INPUT_CLS }) })] }), _jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: draft.isDefault, onChange: (e) => set("isDefault", e.target.checked), className: "h-4 w-4 rounded border-zinc-300 dark:border-slate-600 text-[var(--appkit-color-primary)] focus:ring-[var(--appkit-color-primary)]" }), _jsx(Span, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: "Set as default pickup address" })] })] }) }), deleteTargetAddr && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Address", message: `Delete address "${deleteTargetAddr.label}"? This cannot be undone.`, onConfirm: () => { deleteById(deleteTargetAddr.id); setDeleteTargetAddr(null); }, onClose: () => setDeleteTargetAddr(null), isDeleting: deletingId === deleteTargetAddr.id }))] }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsxs(Row, { justify: "between", className: "sticky z-10 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-4 py-3", style: { top: "var(--header-height, 0px)" }, children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Pickup Addresses" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: "Manage your store's pickup and return locations" })] }), _jsxs(Button, { size: "sm", onClick: openAdd, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "Add Address" })] })] }), _jsxs(Div, { className: "py-6 px-4 sm:px-6 max-w-2xl", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Row, { justify: "center", className: "py-16", children: _jsx(Div, { className: "h-6 w-6 animate-spin rounded-full border-2 border-[var(--appkit-color-primary)] border-t-transparent" }) })) : addresses.length === 0 ? (_jsxs(Div, { className: "rounded-xl border-2 border-dashed border-zinc-200 dark:border-slate-700 py-16 flex flex-col items-center gap-3", children: [_jsx(MapPin, { className: "h-8 w-8 text-zinc-300 dark:text-slate-600" }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No pickup addresses yet" }), _jsx(Button, { size: "sm", variant: "outline", onClick: openAdd, children: "Add your first address" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Row, { justify: "end", className: "mb-2", children: [_jsx(Button, { size: "sm", variant: listView === "table" ? "primary" : "ghost", onClick: () => setListView("table"), children: "Table" }), _jsx(Button, { size: "sm", variant: listView === "cards" ? "primary" : "ghost", onClick: () => setListView("cards"), children: "Cards" })] }), listView === "cards" ? (_jsx(Grid, { gap: "sm", children: addresses.map((addr) => (_jsx(Div, { className: deletingId === addr.id ? "opacity-50 pointer-events-none" : "", children: _jsx(AddressCard, { address: addr, onEdit: () => openEdit(addr), onDelete: () => handleDelete(addr) }) }, addr.id))) })) : (_jsx(Div, { className: `${__O.xAuto} rounded-lg border border-zinc-200 dark:border-slate-700`, children: _jsxs(Table, { className: "w-full text-sm", children: [_jsx(Thead, { className: "bg-zinc-50 dark:bg-slate-800", children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left px-3 py-2 font-semibold", children: "Label" }), _jsx(Th, { className: "text-left px-3 py-2 font-semibold", children: "Name" }), _jsx(Th, { className: "text-left px-3 py-2 font-semibold", children: "City" }), _jsx(Th, { className: "text-left px-3 py-2 font-semibold", children: "Phone" }), _jsx(Th, { className: "text-right px-3 py-2 font-semibold", children: "Actions" })] }) }), _jsx(Tbody, { children: addresses.map((addr) => (_jsxs(Tr, { className: `border-t border-zinc-100 dark:border-slate-700 ${deletingId === addr.id ? "opacity-50" : ""}`, children: [_jsx(Td, { className: "px-3 py-2", children: addr.label }), _jsx(Td, { className: "px-3 py-2", children: addr.fullName }), _jsxs(Td, { className: "px-3 py-2", children: [addr.city, ", ", addr.state] }), _jsx(Td, { className: "px-3 py-2 tabular-nums", children: addr.phone }), _jsx(Td, { className: "px-3 py-2 text-right", children: _jsxs(Row, { justify: "end", className: "gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => openEdit(addr), children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleDelete(addr), children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label })] }) })] }, addr.id))) })] }) }))] }))] }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: editingId ? "Edit Address" : "Add Address", footer: _jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "outline", onClick: closeDrawer, className: "flex-1", children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: saving, className: "flex-1", children: saving ? "Saving…" : editingId ? "Save Changes" : "Add Address" })] }), children: _jsxs(Stack, { gap: "md", className: "py-1", children: [saveError && (_jsx(Div, { className: "rounded-lg border border-error/20 bg-error-surface px-3 py-2 text-sm text-error", children: saveError })), _jsx(Field, { label: "Label *", hint: "e.g. Warehouse, Shop, Home", children: _jsx("input", { type: "text", value: draft.label, onChange: handleTextField("label"), placeholder: "Warehouse", maxLength: 60, className: INPUT_CLS }) }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "Full Name *", children: _jsx("input", { type: "text", value: draft.fullName, onChange: handleTextField("fullName"), placeholder: "Ravi Kumar", maxLength: 100, className: INPUT_CLS }) }), _jsx(Field, { label: "Phone *", children: _jsx("input", { type: "tel", value: draft.phone, onChange: handleTextField("phone"), placeholder: "+91 98765 43210", maxLength: 20, className: INPUT_CLS }) })] }), _jsx(Field, { label: "Address Line 1 *", children: _jsx("input", { type: "text", value: draft.addressLine1, onChange: handleTextField("addressLine1"), placeholder: "Shop 12, Main Market", maxLength: 200, className: INPUT_CLS }) }), _jsx(Field, { label: "Address Line 2", children: _jsx("input", { type: "text", value: draft.addressLine2, onChange: handleTextField("addressLine2"), placeholder: "Building / Floor (optional)", maxLength: 200, className: INPUT_CLS }) }), _jsx(Field, { label: "Landmark", children: _jsx("input", { type: "text", value: draft.landmark, onChange: handleTextField("landmark"), placeholder: "Near metro station (optional)", maxLength: 100, className: INPUT_CLS }) }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "City *", children: _jsx("input", { type: "text", value: draft.city, onChange: handleTextField("city"), placeholder: "Mumbai", maxLength: 100, className: INPUT_CLS }) }), _jsx(Field, { label: "State *", children: _jsx("input", { type: "text", value: draft.state, onChange: handleTextField("state"), placeholder: "Maharashtra", maxLength: 100, className: INPUT_CLS }) })] }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "Postal Code *", children: _jsx("input", { type: "text", value: draft.postalCode, onChange: handleTextField("postalCode"), placeholder: "400001", maxLength: 10, className: INPUT_CLS }) }), _jsx(Field, { label: "Country *", children: _jsx("input", { type: "text", value: draft.country, onChange: handleTextField("country"), placeholder: "India", maxLength: 60, className: INPUT_CLS }) })] }), _jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: draft.isDefault, onChange: (e) => set("isDefault", e.target.checked), className: "h-4 w-4 rounded border-zinc-300 dark:border-slate-600 text-[var(--appkit-color-primary)] focus:ring-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", className: "text-zinc-700 dark:text-zinc-300", children: "Set as default pickup address" })] })] }) }), deleteTargetAddr && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Address", message: `Delete address "${deleteTargetAddr.label}"? This cannot be undone.`, onConfirm: () => { deleteById(deleteTargetAddr.id); setDeleteTargetAddr(null); }, onClose: () => setDeleteTargetAddr(null), isDeleting: deletingId === deleteTargetAddr.id }))] }));
 }

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

@@ -5,6 +5,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Alert, Badge, Button, Div, Form, FormActions, Heading, Input, Row, Section, Select, Text, Toggle, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+const __P = {
+    p5: "p-5",
+};
 // ---------------------------------------------------------------------------
 // Config
 // ---------------------------------------------------------------------------
@@ -50,7 +53,7 @@ function AlertCard({ alert, onToggle, onDelete, }) {
     const metricLabel = METRIC_OPTIONS.find((m) => m.value === alert.metric)?.label ?? alert.metric;
     const opLabel = OPERATOR_OPTIONS.find((o) => o.value === alert.operator)?.label ?? alert.operator;
     const windowLabel = WINDOW_OPTIONS.find((w) => w.value === String(alert.windowHours))?.label ?? `${alert.windowHours}h`;
-    return (_jsxs(Div, { surface: "card", padding: "sm", className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "gap-2 mb-1 flex-wrap", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100 text-sm", children: alert.label }), _jsx(Badge, { variant: alert.isActive ? "success" : "default", children: alert.isActive ? "Active" : "Paused" })] }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mb-1", children: [metricLabel, " ", opLabel, " ", alert.threshold, " \u00B7 ", windowLabel] }), _jsx(Row, { className: "gap-1 flex-wrap", children: alert.notifyChannels.map((ch) => (_jsx(Badge, { variant: OPERATOR_BADGE[alert.operator] ?? "default", children: ch }, ch))) }), alert.lastTriggeredAt && (_jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 mt-1", children: ["Last triggered: ", new Date(alert.lastTriggeredAt).toLocaleString("en-IN")] }))] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsx(Toggle, { checked: alert.isActive, onChange: (v) => onToggle(alert.id, v), size: "sm" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDelete(alert.id), className: "text-error hover:text-error", children: "Delete" })] })] }));
+    return (_jsxs(Div, { surface: "card", padding: "sm", className: "flex items-start justify-between gap-4", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "gap-2 mb-1 flex-wrap", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100 text-sm", children: alert.label }), _jsx(Badge, { variant: alert.isActive ? "success" : "default", children: alert.isActive ? "Active" : "Paused" })] }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mb-1", children: [metricLabel, " ", opLabel, " ", alert.threshold, " \u00B7 ", windowLabel] }), _jsx(Row, { className: "gap-1 flex-wrap", children: alert.notifyChannels.map((ch) => (_jsx(Badge, { variant: OPERATOR_BADGE[alert.operator] ?? "default", children: ch }, ch))) }), alert.lastTriggeredAt && (_jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 mt-1", children: ["Last triggered: ", new Date(alert.lastTriggeredAt).toLocaleString("en-IN")] }))] }), _jsxs(Div, { className: "flex items-center gap-2 shrink-0", children: [_jsx(Toggle, { checked: alert.isActive, onChange: (v) => onToggle(alert.id, v), size: "sm" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDelete(alert.id), className: "text-error hover:text-error", children: "Delete" })] })] }));
 }
 const EMPTY_DRAFT = {
     label: "",
@@ -118,7 +121,7 @@ export function SellerAnalyticsAlertsView({ labels = {}, }) {
                 : [...d.notifyChannels, ch],
         }));
     }, []);
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: labels.title ?? "Analytics Alerts" }), _jsx(Button, { size: "sm", onClick: () => setShowForm((v) => !v), children: showForm ? "Cancel" : "+ New Alert" })] }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Get notified when a key metric crosses a threshold. Alerts check the metric over the selected window and fire through your chosen channels." }), showForm && (_jsxs(Section, { className: "border border-zinc-200 dark:border-zinc-700 rounded-xl p-5 space-y-4", children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Create Alert" }), _jsxs(Form, { onSubmit: (e) => { e.preventDefault(); createMutation.mutate(); }, children: [_jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Alert label", value: draft.label, onChange: (e) => setDraft((d) => ({ ...d, label: e.target.value })), placeholder: "e.g. Low daily orders", required: true }), _jsx(Select, { label: "Metric", value: draft.metric, onValueChange: (v) => setDraft((d) => ({ ...d, metric: v })), options: METRIC_OPTIONS }), _jsx(Select, { label: "Operator", value: draft.operator, onValueChange: (v) => setDraft((d) => ({ ...d, operator: v })), options: OPERATOR_OPTIONS }), _jsx(Input, { label: "Threshold", type: "number", value: draft.threshold, onChange: (e) => setDraft((d) => ({ ...d, threshold: e.target.value })), placeholder: "e.g. 10", required: true }), _jsx(Select, { label: "Check window", value: draft.windowHours, onValueChange: (v) => setDraft((d) => ({ ...d, windowHours: v })), options: WINDOW_OPTIONS })] }), _jsxs("div", { className: "mt-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-2", children: "Notify via" }), _jsx(Row, { className: "gap-2 flex-wrap", children: CHANNEL_OPTIONS.map((ch) => (_jsx("button", { type: "button", onClick: () => toggleChannel(ch.value), className: `px-3 py-1.5 rounded-full text-xs border transition-colors ${draft.notifyChannels.includes(ch.value)
+    return (_jsxs(Div, { className: "space-y-6", children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: labels.title ?? "Analytics Alerts" }), _jsx(Button, { size: "sm", onClick: () => setShowForm((v) => !v), children: showForm ? "Cancel" : "+ New Alert" })] }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Get notified when a key metric crosses a threshold. Alerts check the metric over the selected window and fire through your chosen channels." }), showForm && (_jsxs(Section, { className: `border border-zinc-200 dark:border-zinc-700 rounded-xl ${__P.p5} space-y-4`, children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Create Alert" }), _jsxs(Form, { onSubmit: (e) => { e.preventDefault(); createMutation.mutate(); }, children: [_jsxs(Div, { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Alert label", value: draft.label, onChange: (e) => setDraft((d) => ({ ...d, label: e.target.value })), placeholder: "e.g. Low daily orders", required: true }), _jsx(Select, { label: "Metric", value: draft.metric, onValueChange: (v) => setDraft((d) => ({ ...d, metric: v })), options: METRIC_OPTIONS }), _jsx(Select, { label: "Operator", value: draft.operator, onValueChange: (v) => setDraft((d) => ({ ...d, operator: v })), options: OPERATOR_OPTIONS }), _jsx(Input, { label: "Threshold", type: "number", value: draft.threshold, onChange: (e) => setDraft((d) => ({ ...d, threshold: e.target.value })), placeholder: "e.g. 10", required: true }), _jsx(Select, { label: "Check window", value: draft.windowHours, onValueChange: (v) => setDraft((d) => ({ ...d, windowHours: v })), options: WINDOW_OPTIONS })] }), _jsxs(Div, { className: "mt-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-2", children: "Notify via" }), _jsx(Row, { className: "gap-2 flex-wrap", children: CHANNEL_OPTIONS.map((ch) => (_jsx("button", { type: "button", onClick: () => toggleChannel(ch.value), className: `px-3 py-1.5 rounded-full text-xs border transition-colors ${draft.notifyChannels.includes(ch.value)
                                                 ? "bg-[var(--appkit-color-primary)] text-white border-transparent"
-                                                : "bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-zinc-700"}`, children: ch.label }, ch.value))) })] }), _jsx(FormActions, { align: "right", className: "mt-4", children: _jsx(Button, { type: "submit", isLoading: createMutation.isPending, children: createMutation.isPending ? "Creating…" : "Create Alert" }) })] })] })), isLoading && (_jsx("div", { className: "space-y-2", children: [1, 2, 3].map((i) => (_jsx("div", { className: "h-16 rounded-lg bg-zinc-100 dark:bg-zinc-800 animate-pulse" }, i))) })), !isLoading && alerts.length === 0 && !showForm && (_jsx(Alert, { variant: "info", children: "No alerts configured. Create an alert to get notified when a key metric crosses a threshold." })), !isLoading && alerts.length > 0 && (_jsx("div", { className: "space-y-3", children: alerts.map((alert) => (_jsx(AlertCard, { alert: alert, onToggle: (id, isActive) => toggleMutation.mutate({ id, isActive }), onDelete: (id) => deleteMutation.mutate(id) }, alert.id))) }))] }));
+                                                : "bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-zinc-700"}`, children: ch.label }, ch.value))) })] }), _jsx(FormActions, { align: "right", className: "mt-4", children: _jsx(Button, { type: "submit", isLoading: createMutation.isPending, children: createMutation.isPending ? "Creating…" : "Create Alert" }) })] })] })), isLoading && (_jsx(Div, { className: "space-y-2", children: [1, 2, 3].map((i) => (_jsx(Div, { className: "h-16 rounded-lg bg-zinc-100 dark:bg-zinc-800 animate-pulse" }, i))) })), !isLoading && alerts.length === 0 && !showForm && (_jsx(Alert, { variant: "info", children: "No alerts configured. Create an alert to get notified when a key metric crosses a threshold." })), !isLoading && alerts.length > 0 && (_jsx(Div, { className: "space-y-3", children: alerts.map((alert) => (_jsx(AlertCard, { alert: alert, onToggle: (id, isActive) => toggleMutation.mutate({ id, isActive }), onDelete: (id) => deleteMutation.mutate(id) }, alert.id))) }))] }));
 }