@seekora-ai/ui-sdk-react 0.2.14 → 0.2.16

package/dist/components/suggestions/MobileSheetDropdown.js

@@ -30,7 +30,7 @@ const createStyles = () => ({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: 'var(--seekora-bg-surface, #fff)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
         borderRadius: '16px 16px 0 0',
         boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)',
         fontFamily: 'var(--seekora-font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif)',
@@ -54,17 +54,17 @@ const createStyles = () => ({
     dragBar: {
         width: '36px',
         height: '5px',
-        backgroundColor: 'var(--seekora-border-color, #e0e0e0)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
         borderRadius: '3px',
     },
     header: {
         padding: '0 16px 16px',
-        borderBottom: '1px solid var(--seekora-border-color, #f0f0f0)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     searchContainer: {
         display: 'flex',
         alignItems: 'center',
-        backgroundColor: 'var(--seekora-bg-secondary, #f5f5f5)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         borderRadius: '12px',
         padding: '12px 16px',
         gap: '12px',
@@ -80,7 +80,7 @@ const createStyles = () => ({
         border: 'none',
         background: 'transparent',
         fontSize: '17px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         outline: 'none',
     },
     cancelBtn: {
@@ -128,11 +128,11 @@ const createStyles = () => ({
         cursor: 'pointer',
         transition: 'background-color 100ms',
         minHeight: '56px', // Touch-friendly
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     itemActive: {
-        backgroundColor: 'var(--seekora-bg-hover, #f2f2f7)',
-        color: 'var(--seekora-text-primary, #000)',
+        backgroundColor: 'var(--seekora-bg-hover, rgba(255, 255, 255, 0.1))',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     itemIcon: {
         width: '24px',
@@ -154,14 +154,14 @@ const createStyles = () => ({
     },
     itemTitle: {
         fontSize: '17px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
     itemSubtitle: {
         fontSize: '15px',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
         marginTop: '2px',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -194,7 +194,7 @@ const createStyles = () => ({
     },
     productTitle: {
         fontSize: '15px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '4px',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -203,19 +203,19 @@ const createStyles = () => ({
     productPrice: {
         fontSize: '15px',
         fontWeight: 600,
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     footer: {
         padding: '12px 16px',
         paddingBottom: 'calc(12px + env(safe-area-inset-bottom, 0px))',
-        borderTop: '1px solid var(--seekora-border-color, #f0f0f0)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f8f8f8)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
     },
     footerBtn: {
         width: '100%',
         padding: '16px',
         backgroundColor: 'var(--seekora-primary, #007aff)',
-        color: 'var(--seekora-text-inverse, #ffffff)',
+        color: 'var(--seekora-text-inverse, transparent)',
         border: 'none',
         borderRadius: '12px',
         fontSize: '17px',
@@ -227,12 +227,12 @@ const createStyles = () => ({
         alignItems: 'center',
         justifyContent: 'center',
         padding: '60px',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     spinner: {
         width: '28px',
         height: '28px',
-        border: '3px solid var(--seekora-border-color, #e5e5ea)',
+        border: '3px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         borderTopColor: 'var(--seekora-primary, #007aff)',
         borderRadius: '50%',
         animation: 'seekora-spin 0.8s linear infinite',
@@ -240,7 +240,7 @@ const createStyles = () => ({
     empty: {
         padding: '60px 20px',
         textAlign: 'center',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
         fontSize: '17px',
     },
     emptyIcon: {
@@ -267,7 +267,7 @@ const ChevronIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fi
 const ArrowUpIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "20", height: "20" },
     React.createElement("path", { d: "M7 17l5-5-5-5M13 17l5-5-5-5" })));
 export const MobileSheetDropdown = forwardRef(function MobileSheetDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showSearchInput = true, showCancel = true, cancelText = 'Cancel', showDragHandle = true, swipeToDismiss = true, footerButtonText = 'Search', showFooterButton = true, width = '100%', maxHeight = '85vh', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onRecentClearAll, onSearchSubmit, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showSearchInput = true, showCancel = true, cancelText = 'Cancel', showDragHandle = true, swipeToDismiss = true, footerButtonText = 'Search', showFooterButton = true, width = '100%', maxHeight = '85vh', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onRecentClearAll, onSearchSubmit, onClose, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     const styles = useMemo(() => createStyles(), []);
@@ -386,7 +386,7 @@ export const MobileSheetDropdown = forwardRef(function MobileSheetDropdown(props
                 React.createElement("div", { style: styles.searchContainer },
                     React.createElement("div", { style: styles.searchIcon },
                         React.createElement(SearchIcon, null)),
-                    React.createElement("input", { ref: inputRef, type: "text", placeholder: "Search...", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: (e) => {
+                    React.createElement("input", { ref: inputRef, type: "text", placeholder: "Powered by Seekora", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 e.preventDefault();
                                 if (activeIndex >= 0) {
@@ -409,70 +409,70 @@ export const MobileSheetDropdown = forwardRef(function MobileSheetDropdown(props
                             }
                         }, style: styles.searchInput, autoFocus: true })),
                 showCancel && (React.createElement("button", { style: styles.cancelBtn, onClick: onClose }, cancelText)))))),
-            React.createElement("div", { style: styles.content }, (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
-                React.createElement("div", { style: styles.spinner })))) : (React.createElement(React.Fragment, null,
-                showRecent && (React.createElement("div", { style: styles.section },
-                    React.createElement("div", { style: styles.sectionHeader },
-                        React.createElement("span", { style: styles.sectionTitle }, "Recent"),
-                        React.createElement("button", { style: styles.clearBtn, onClick: onRecentClearAll }, "Clear")),
-                    recentQueries.map((q, idx) => (React.createElement("div", { key: `recent-${q}`, "data-index": idx, style: mergeStyles(styles.item, activeIndex === idx ? styles.itemActive : undefined), onClick: () => {
-                            onRecentClick?.(q);
-                            setInputValue(q);
-                        }, onMouseEnter: () => setActiveIndex(idx) },
-                        React.createElement("div", { style: styles.itemIcon },
-                            React.createElement(ClockIcon, null)),
-                        React.createElement("div", { style: styles.itemContent },
-                            React.createElement("div", { style: styles.itemTitle }, q)),
-                        React.createElement("div", { style: styles.itemAction },
-                            React.createElement(ArrowUpIcon, null))))))),
-                showTrending && (React.createElement("div", { style: styles.section },
-                    React.createElement("div", { style: styles.sectionHeader },
-                        React.createElement("span", { style: styles.sectionTitle }, "Trending")),
-                    trendingQueries.map((q, idx) => {
-                        const globalIdx = recentQueries.length + idx;
-                        return (React.createElement("div", { key: `trending-${q}`, "data-index": globalIdx, style: mergeStyles(styles.item, activeIndex === globalIdx ? styles.itemActive : undefined), onClick: () => {
+            React.createElement("div", { style: styles.content },
+                React.createElement(React.Fragment, null,
+                    showRecent && (React.createElement("div", { style: styles.section },
+                        React.createElement("div", { style: styles.sectionHeader },
+                            React.createElement("span", { style: styles.sectionTitle }, "Recent"),
+                            React.createElement("button", { style: styles.clearBtn, onClick: onRecentClearAll }, "Clear")),
+                        recentQueries.map((q, idx) => (React.createElement("div", { key: `recent-${q}`, "data-index": idx, style: mergeStyles(styles.item, activeIndex === idx ? styles.itemActive : undefined), onClick: () => {
                                 onRecentClick?.(q);
                                 setInputValue(q);
-                            }, onMouseEnter: () => setActiveIndex(globalIdx) },
+                            }, onMouseEnter: () => setActiveIndex(idx) },
                             React.createElement("div", { style: styles.itemIcon },
-                                React.createElement(TrendingIcon, null)),
+                                React.createElement(ClockIcon, null)),
                             React.createElement("div", { style: styles.itemContent },
                                 React.createElement("div", { style: styles.itemTitle }, q)),
                             React.createElement("div", { style: styles.itemAction },
-                                React.createElement(ChevronIcon, null))));
-                    }))),
-                inputValue && processedSuggestions.length > 0 && (React.createElement("div", { style: styles.section },
-                    React.createElement("div", { style: styles.sectionHeader },
-                        React.createElement("span", { style: styles.sectionTitle }, "Suggestions")),
-                    processedSuggestions.map((s, idx) => {
-                        const globalIdx = recentQueries.length + trendingQueries.length + idx;
-                        return (React.createElement("div", { key: s.id || idx, "data-index": globalIdx, style: mergeStyles(styles.item, activeIndex === globalIdx ? styles.itemActive : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => setActiveIndex(globalIdx) },
-                            React.createElement("div", { style: styles.itemIcon },
-                                React.createElement(SearchIcon, null)),
-                            React.createElement("div", { style: styles.itemContent },
-                                React.createElement("div", { style: styles.itemTitle }, highlightTextReact(s.query, inputValue, { tag: 'strong' })),
-                                s.count && (React.createElement("div", { style: styles.itemSubtitle },
-                                    s.count,
-                                    " results"))),
-                            React.createElement("div", { style: styles.itemAction },
-                                React.createElement(ChevronIcon, null))));
-                    }))),
-                showProducts && (React.createElement("div", { style: styles.section },
-                    React.createElement("div", { style: styles.sectionHeader },
-                        React.createElement("span", { style: styles.sectionTitle }, "Products")),
-                    React.createElement("div", { style: styles.productsScroll }, processedProducts.slice(0, 8).map((p, idx) => (React.createElement("div", { key: p.id, style: styles.productCard, onClick: () => onProductClick?.(p._raw, idx) },
-                        p.image ? (React.createElement("img", { src: p.image, alt: p.title, style: styles.productImage, loading: "lazy" })) : (React.createElement("div", { style: styles.productImage })),
-                        React.createElement("div", { style: styles.productTitle }, p.title),
-                        p.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(p.price, {
-                            currency: productDisplay.currency || p.currency || '$'
-                        }))))))))),
-                inputValue && processedSuggestions.length === 0 && !loading && (renderEmpty ? renderEmpty(inputValue) : (React.createElement("div", { style: styles.empty },
-                    React.createElement("div", { style: styles.emptyIcon },
-                        React.createElement(SearchIcon, null)),
-                    React.createElement("p", null,
-                        "No results for \"",
-                        inputValue,
-                        "\""))))))),
+                                React.createElement(ArrowUpIcon, null))))))),
+                    showTrending && (React.createElement("div", { style: styles.section },
+                        React.createElement("div", { style: styles.sectionHeader },
+                            React.createElement("span", { style: styles.sectionTitle }, "Trending")),
+                        trendingQueries.map((q, idx) => {
+                            const globalIdx = recentQueries.length + idx;
+                            return (React.createElement("div", { key: `trending-${q}`, "data-index": globalIdx, style: mergeStyles(styles.item, activeIndex === globalIdx ? styles.itemActive : undefined), onClick: () => {
+                                    onRecentClick?.(q);
+                                    setInputValue(q);
+                                }, onMouseEnter: () => setActiveIndex(globalIdx) },
+                                React.createElement("div", { style: styles.itemIcon },
+                                    React.createElement(TrendingIcon, null)),
+                                React.createElement("div", { style: styles.itemContent },
+                                    React.createElement("div", { style: styles.itemTitle }, q)),
+                                React.createElement("div", { style: styles.itemAction },
+                                    React.createElement(ChevronIcon, null))));
+                        }))),
+                    inputValue && processedSuggestions.length > 0 && (React.createElement("div", { style: styles.section },
+                        React.createElement("div", { style: styles.sectionHeader },
+                            React.createElement("span", { style: styles.sectionTitle }, "Suggestions")),
+                        processedSuggestions.map((s, idx) => {
+                            const globalIdx = recentQueries.length + trendingQueries.length + idx;
+                            return (React.createElement("div", { key: s.id || idx, "data-index": globalIdx, style: mergeStyles(styles.item, activeIndex === globalIdx ? styles.itemActive : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => setActiveIndex(globalIdx) },
+                                React.createElement("div", { style: styles.itemIcon },
+                                    React.createElement(SearchIcon, null)),
+                                React.createElement("div", { style: styles.itemContent },
+                                    React.createElement("div", { style: styles.itemTitle }, highlightTextReact(s.query, inputValue, { tag: 'strong' })),
+                                    s.count && (React.createElement("div", { style: styles.itemSubtitle },
+                                        s.count,
+                                        " results"))),
+                                React.createElement("div", { style: styles.itemAction },
+                                    React.createElement(ChevronIcon, null))));
+                        }))),
+                    showProducts && (React.createElement("div", { style: styles.section },
+                        React.createElement("div", { style: styles.sectionHeader },
+                            React.createElement("span", { style: styles.sectionTitle }, "Products")),
+                        React.createElement("div", { style: styles.productsScroll }, processedProducts.slice(0, 8).map((p, idx) => (React.createElement("div", { key: p.id, style: styles.productCard, onClick: () => onProductClick?.(p._raw, idx) },
+                            p.image ? (React.createElement("img", { src: p.image, alt: p.title, style: styles.productImage, loading: "lazy" })) : (React.createElement("div", { style: styles.productImage })),
+                            React.createElement("div", { style: styles.productTitle }, p.title),
+                            p.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(p.price, {
+                                currency: productDisplay.currency || p.currency || '$'
+                            }))))))))),
+                    inputValue && processedSuggestions.length === 0 && !loading && (renderEmpty ? renderEmpty(inputValue) : (React.createElement("div", { style: styles.empty },
+                        React.createElement("div", { style: styles.emptyIcon },
+                            React.createElement(SearchIcon, null)),
+                        React.createElement("p", null,
+                            "No results for \"",
+                            inputValue,
+                            "\"")))))),
             footer !== undefined ? footer : (showFooterButton && inputValue && (React.createElement("div", { style: styles.footer },
                 React.createElement("button", { style: styles.footerBtn, onClick: () => onSearchSubmit?.(inputValue) },
                     footerButtonText,

package/dist/components/suggestions/PinterestDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinterestDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/PinterestDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;CACvD;AAED,eAAO,MAAM,iBAAiB,4FAsX7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PinterestDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/PinterestDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;CACvD;AAED,eAAO,MAAM,iBAAiB,4FA4W7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/suggestions/PinterestDropdown.js

@@ -302,7 +302,7 @@ const ImageIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill
     React.createElement("polyline", { points: "21 15 16 10 5 21" })));
 export const PinterestDropdown = forwardRef(function PinterestDropdown(props, ref) {
     const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showSaveButton = true, activeCategory: initialActiveCategory, activeTab, // From BaseDropdownProps
-    showPriceOverlay = true, gridColumns = 4, width = '800px', maxHeight = '600px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onSaveProduct, onViewAll, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    showPriceOverlay = true, gridColumns = 4, width = '800px', maxHeight = '600px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onSaveProduct, onViewAll, onClose, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -396,47 +396,47 @@ export const PinterestDropdown = forwardRef(function PinterestDropdown(props, re
                         "(",
                         cat.count,
                         ")"))))))))),
-        React.createElement("div", { style: { ...styles.content, maxHeight } }, (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
-            React.createElement("div", { style: styles.spinner })))) : (React.createElement(React.Fragment, null,
-            processedSuggestions.length > 0 && (React.createElement("div", { style: styles.suggestionsRow }, processedSuggestions.slice(0, 8).map((s, idx) => (React.createElement("button", { key: s.id || idx, "data-index": idx, style: mergeStyles(styles.suggestionPill, activeIndex === idx ? styles.suggestionPillActive : undefined, hoveredSuggestion === idx && activeIndex !== idx ? styles.suggestionPillHover : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => {
-                    setHoveredSuggestion(idx);
-                    setActiveIndex(idx);
-                }, onMouseLeave: () => setHoveredSuggestion(-1) },
-                React.createElement("span", { style: styles.suggestionIcon }, query ? highlightTextReact(s.query, query, { tag: 'strong' }) : s.query)))))),
-            displayProducts.length > 0 && (React.createElement(React.Fragment, null,
-                React.createElement("div", { style: styles.sectionTitle },
-                    React.createElement(TrendingIcon, null),
-                    "Ideas for you"),
-                React.createElement("div", { style: {
-                        ...styles.productsGrid,
-                        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
-                    } }, displayProducts.slice(0, 12).map((product, idx) => (React.createElement("div", { key: product.id, style: mergeStyles(styles.productCard, hoveredProduct === product.id ? styles.productCardHover : undefined), onClick: () => onProductClick?.(product._raw, idx), onMouseEnter: () => setHoveredProduct(product.id), onMouseLeave: () => setHoveredProduct(null) },
-                    React.createElement("div", { style: styles.productImageContainer },
-                        product.image ? (React.createElement("img", { src: product.image, alt: product.title, style: styles.productImage, loading: "lazy" })) : (React.createElement("div", { style: styles.productImagePlaceholder },
-                            React.createElement(ImageIcon, null))),
-                        showSaveButton && (React.createElement("button", { style: mergeStyles(styles.productSaveBtn, hoveredProduct === product.id ? styles.productSaveBtnVisible : undefined), onClick: (e) => {
-                                e.stopPropagation();
-                                onSaveProduct?.(product._raw);
-                            }, "aria-label": "Save" },
-                            React.createElement(HeartIcon, null))),
-                        showPriceOverlay && product.price !== undefined && (React.createElement("div", { style: mergeStyles(styles.productOverlay, hoveredProduct === product.id ? styles.productOverlayVisible : undefined) },
-                            React.createElement("div", { style: styles.productTitleOverlay }, product.title),
-                            React.createElement("div", { style: styles.productPriceOverlay }, formatPrice(product.price, {
+        React.createElement("div", { style: { ...styles.content, maxHeight } },
+            React.createElement(React.Fragment, null,
+                processedSuggestions.length > 0 && (React.createElement("div", { style: styles.suggestionsRow }, processedSuggestions.slice(0, 8).map((s, idx) => (React.createElement("button", { key: s.id || idx, "data-index": idx, style: mergeStyles(styles.suggestionPill, activeIndex === idx ? styles.suggestionPillActive : undefined, hoveredSuggestion === idx && activeIndex !== idx ? styles.suggestionPillHover : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => {
+                        setHoveredSuggestion(idx);
+                        setActiveIndex(idx);
+                    }, onMouseLeave: () => setHoveredSuggestion(-1) },
+                    React.createElement("span", { style: styles.suggestionIcon }, query ? highlightTextReact(s.query, query, { tag: 'strong' }) : s.query)))))),
+                displayProducts.length > 0 && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: styles.sectionTitle },
+                        React.createElement(TrendingIcon, null),
+                        "Ideas for you"),
+                    React.createElement("div", { style: {
+                            ...styles.productsGrid,
+                            gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+                        } }, displayProducts.slice(0, 12).map((product, idx) => (React.createElement("div", { key: product.id, style: mergeStyles(styles.productCard, hoveredProduct === product.id ? styles.productCardHover : undefined), onClick: () => onProductClick?.(product._raw, idx), onMouseEnter: () => setHoveredProduct(product.id), onMouseLeave: () => setHoveredProduct(null) },
+                        React.createElement("div", { style: styles.productImageContainer },
+                            product.image ? (React.createElement("img", { src: product.image, alt: product.title, style: styles.productImage, loading: "lazy" })) : (React.createElement("div", { style: styles.productImagePlaceholder },
+                                React.createElement(ImageIcon, null))),
+                            showSaveButton && (React.createElement("button", { style: mergeStyles(styles.productSaveBtn, hoveredProduct === product.id ? styles.productSaveBtnVisible : undefined), onClick: (e) => {
+                                    e.stopPropagation();
+                                    onSaveProduct?.(product._raw);
+                                }, "aria-label": "Save" },
+                                React.createElement(HeartIcon, null))),
+                            showPriceOverlay && product.price !== undefined && (React.createElement("div", { style: mergeStyles(styles.productOverlay, hoveredProduct === product.id ? styles.productOverlayVisible : undefined) },
+                                React.createElement("div", { style: styles.productTitleOverlay }, product.title),
+                                React.createElement("div", { style: styles.productPriceOverlay }, formatPrice(product.price, {
+                                    currency: productDisplay.currency || product.currency || '$'
+                                }))))),
+                        !showPriceOverlay && (React.createElement("div", { style: styles.productInfo },
+                            React.createElement("div", { style: styles.productTitle }, product.title),
+                            product.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(product.price, {
                                 currency: productDisplay.currency || product.currency || '$'
-                            }))))),
-                    !showPriceOverlay && (React.createElement("div", { style: styles.productInfo },
-                        React.createElement("div", { style: styles.productTitle }, product.title),
-                        product.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(product.price, {
-                            currency: productDisplay.currency || product.currency || '$'
-                        }))))))))))),
-            !loading && displayProducts.length === 0 && processedSuggestions.length === 0 && (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty },
-                React.createElement("div", { style: styles.emptyIcon },
-                    React.createElement(SearchIcon, null)),
-                React.createElement("p", null,
-                    "No ideas found for \"",
-                    query,
-                    "\""),
-                React.createElement("p", { style: { fontSize: '14px', marginTop: '8px' } }, "Try searching for something else"))))))),
+                            }))))))))))),
+                !loading && displayProducts.length === 0 && processedSuggestions.length === 0 && (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty },
+                    React.createElement("div", { style: styles.emptyIcon },
+                        React.createElement(SearchIcon, null)),
+                    React.createElement("p", null,
+                        "No ideas found for \"",
+                        query,
+                        "\""),
+                    React.createElement("p", { style: { fontSize: '14px', marginTop: '8px' } }, "Try searching for something else")))))),
         footer !== undefined ? footer : (displayProducts.length > 0 && (React.createElement("div", { style: styles.footer },
             React.createElement("span", { style: { color: 'var(--seekora-text-secondary, #767676)', fontSize: '14px' } },
                 displayProducts.length,

package/dist/components/suggestions/ShopifyDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShopifyDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/ShopifyDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,0FA2W3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ShopifyDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/ShopifyDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,0FAiW3B,CAAC;AAEF,eAAe,eAAe,CAAC"}