@seekora-ai/ui-sdk-react 1.0.0

package/dist/components/RangeSlider.d.ts

@@ -0,0 +1,51 @@
+/**
+ * RangeSlider Component
+ *
+ * Visual slider for numeric range filtering
+ * Alternative to RangeInput for a more interactive UX
+ */
+import React from 'react';
+export interface RangeSliderTheme {
+    root?: string;
+    label?: string;
+    slider?: string;
+    track?: string;
+    trackFilled?: string;
+    thumb?: string;
+    values?: string;
+    value?: string;
+}
+export interface RangeSliderProps {
+    /** Field name for the range filter */
+    field: string;
+    /** Label for the slider */
+    label?: string;
+    /** Minimum value */
+    min: number;
+    /** Maximum value */
+    max: number;
+    /** Step value (default: 1) */
+    step?: number;
+    /** Current minimum value */
+    currentMin?: number;
+    /** Current maximum value */
+    currentMax?: number;
+    /** Callback when range changes */
+    onRangeChange?: (min: number, max: number) => void;
+    /** Format value for display (default: (v) => v.toString()) */
+    formatValue?: (value: number) => string;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: RangeSliderTheme;
+    /** Show current values (default: true) */
+    showValues?: boolean;
+    /** Whether to sync with SearchStateManager (default: true) */
+    syncWithState?: boolean;
+    /** Debounce delay for updates (default: 300ms) */
+    debounceMs?: number;
+}
+export declare const RangeSlider: React.FC<RangeSliderProps>;
+//# sourceMappingURL=RangeSlider.d.ts.map

package/dist/components/RangeSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4QlD,CAAC"}

package/dist/components/RangeSlider.js

@@ -0,0 +1,193 @@
+/**
+ * RangeSlider Component
+ *
+ * Visual slider for numeric range filtering
+ * Alternative to RangeInput for a more interactive UX
+ */
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: currentMinProp, currentMax: currentMaxProp, onRangeChange, formatValue = (v) => v.toString(), className, style, theme: customTheme, showValues = true, syncWithState = true, debounceMs = 300, }) => {
+    const { theme } = useSearchContext();
+    const { refinements, addRefinement, removeRefinement } = useSearchState();
+    const rangeSliderTheme = customTheme || {};
+    // Parse current range from StateManager
+    const stateRange = useMemo(() => {
+        if (!syncWithState)
+            return { min: undefined, max: undefined };
+        let minVal;
+        let maxVal;
+        refinements.forEach(r => {
+            if (r.field === field) {
+                const minMatch = r.value.match(/^>=(\d+(?:\.\d+)?)$/);
+                if (minMatch)
+                    minVal = parseFloat(minMatch[1]);
+                const maxMatch = r.value.match(/^<=(\d+(?:\.\d+)?)$/);
+                if (maxMatch)
+                    maxVal = parseFloat(maxMatch[1]);
+            }
+        });
+        return { min: minVal, max: maxVal };
+    }, [syncWithState, refinements, field]);
+    const [internalMin, setInternalMin] = useState(currentMinProp ?? stateRange.min ?? min);
+    const [internalMax, setInternalMax] = useState(currentMaxProp ?? stateRange.max ?? max);
+    const [isDragging, setIsDragging] = useState(false);
+    const debounceRef = useRef(null);
+    // Sync with StateManager changes
+    useEffect(() => {
+        if (syncWithState && !isDragging) {
+            if (stateRange.min !== undefined)
+                setInternalMin(stateRange.min);
+            else
+                setInternalMin(min);
+            if (stateRange.max !== undefined)
+                setInternalMax(stateRange.max);
+            else
+                setInternalMax(max);
+        }
+    }, [syncWithState, stateRange.min, stateRange.max, isDragging, min, max]);
+    // Update StateManager with range refinements
+    const updateStateManager = useCallback((minVal, maxVal) => {
+        if (!syncWithState)
+            return;
+        // Remove existing range refinements for this field
+        refinements.forEach(r => {
+            if (r.field === field) {
+                removeRefinement(field, r.value, false);
+            }
+        });
+        // Add new range refinements
+        if (minVal > min) {
+            addRefinement(field, `>=${minVal}`, false);
+        }
+        if (maxVal < max) {
+            addRefinement(field, `<=${maxVal}`, minVal <= min); // Trigger search if only max is set
+        }
+        if (minVal > min && maxVal >= max) {
+            // Trigger search after setting min
+            addRefinement(field, `>=${minVal}`, true);
+        }
+        else if (minVal > min || maxVal < max) {
+            // If both are set, we need to trigger search
+            // already triggered above
+        }
+    }, [syncWithState, field, refinements, addRefinement, removeRefinement, min, max]);
+    // Debounced update
+    const debouncedUpdate = useCallback((minVal, maxVal) => {
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        debounceRef.current = setTimeout(() => {
+            updateStateManager(minVal, maxVal);
+            if (onRangeChange) {
+                onRangeChange(minVal, maxVal);
+            }
+        }, debounceMs);
+    }, [updateStateManager, onRangeChange, debounceMs]);
+    // Handle min slider change
+    const handleMinChange = (e) => {
+        const value = Math.min(Number(e.target.value), internalMax - step);
+        setInternalMin(value);
+        setIsDragging(true);
+        debouncedUpdate(value, internalMax);
+    };
+    // Handle max slider change
+    const handleMaxChange = (e) => {
+        const value = Math.max(Number(e.target.value), internalMin + step);
+        setInternalMax(value);
+        setIsDragging(true);
+        debouncedUpdate(internalMin, value);
+    };
+    // Handle drag end
+    const handleDragEnd = () => {
+        setIsDragging(false);
+    };
+    // Calculate filled track position
+    const minPercent = ((internalMin - min) / (max - min)) * 100;
+    const maxPercent = ((internalMax - min) / (max - min)) * 100;
+    return (React.createElement("div", { className: clsx(rangeSliderTheme.root, className), style: {
+            fontFamily: 'inherit',
+            ...style,
+        } },
+        label && (React.createElement("label", { className: rangeSliderTheme.label, style: {
+                display: 'block',
+                marginBottom: theme.spacing.small,
+                fontSize: theme.typography.fontSize.medium,
+                fontWeight: theme.typography.fontWeight?.medium || 500,
+                color: theme.colors.text,
+            } }, label)),
+        React.createElement("div", { className: rangeSliderTheme.slider, style: {
+                position: 'relative',
+                height: '40px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement("div", { className: rangeSliderTheme.track, style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '4px',
+                    backgroundColor: theme.colors.border,
+                    borderRadius: '2px',
+                } }),
+            React.createElement("div", { className: rangeSliderTheme.trackFilled, style: {
+                    position: 'absolute',
+                    left: `${minPercent}%`,
+                    width: `${maxPercent - minPercent}%`,
+                    height: '4px',
+                    backgroundColor: theme.colors.primary,
+                    borderRadius: '2px',
+                } }),
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, className: rangeSliderTheme.thumb, style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '4px',
+                    background: 'transparent',
+                    WebkitAppearance: 'none',
+                    appearance: 'none',
+                    cursor: 'pointer',
+                    pointerEvents: 'none',
+                }, "aria-label": `Minimum ${label || field}` }),
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, className: rangeSliderTheme.thumb, style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '4px',
+                    background: 'transparent',
+                    WebkitAppearance: 'none',
+                    appearance: 'none',
+                    cursor: 'pointer',
+                    pointerEvents: 'none',
+                }, "aria-label": `Maximum ${label || field}` })),
+        showValues && (React.createElement("div", { className: rangeSliderTheme.values, style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginTop: theme.spacing.small,
+                fontSize: theme.typography.fontSize.small,
+                color: theme.colors.textSecondary,
+            } },
+            React.createElement("span", { className: rangeSliderTheme.value }, formatValue(internalMin)),
+            React.createElement("span", { className: rangeSliderTheme.value }, formatValue(internalMax)))),
+        React.createElement("style", null, `
+        .${rangeSliderTheme.thumb || 'seekora-range-slider__thumb'}::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 20px;
+          height: 20px;
+          background: ${theme.colors.primary};
+          border-radius: 50%;
+          cursor: pointer;
+          pointer-events: all;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+        .${rangeSliderTheme.thumb || 'seekora-range-slider__thumb'}::-moz-range-thumb {
+          width: 20px;
+          height: 20px;
+          background: ${theme.colors.primary};
+          border-radius: 50%;
+          cursor: pointer;
+          pointer-events: all;
+          border: none;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+      `)));
+};

package/dist/components/Recommendations.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Recommendation Components
+ *
+ * Components for displaying product recommendations:
+ * - RelatedProducts: Show related items based on a product
+ * - TrendingItems: Display trending/popular products
+ * - FrequentlyBoughtTogether: Bundle recommendations
+ * - RecentlyViewed: User's recently viewed items
+ */
+import React from 'react';
+import type { ResultItem } from '@seekora-ai/ui-sdk-types';
+export interface RecommendationItem extends ResultItem {
+    [key: string]: any;
+}
+export interface RecommendationTheme {
+    root?: string;
+    title?: string;
+    list?: string;
+    item?: string;
+    image?: string;
+    content?: string;
+    name?: string;
+    price?: string;
+    loading?: string;
+    empty?: string;
+}
+interface BaseRecommendationProps {
+    /** Title for the section */
+    title?: string;
+    /** Maximum items to show */
+    maxItems?: number;
+    /** Custom render function for items */
+    renderItem?: (item: RecommendationItem, index: number) => React.ReactNode;
+    /** Callback when item is clicked */
+    onItemClick?: (item: RecommendationItem, index: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: RecommendationTheme;
+    /** Layout mode */
+    layout?: 'horizontal' | 'grid' | 'list';
+    /** Currency symbol for prices */
+    currencySymbol?: string;
+}
+export interface RelatedProductsProps extends BaseRecommendationProps {
+    /** Product ID to get related products for */
+    productId: string;
+    /** Custom items (if not using API) */
+    items?: RecommendationItem[];
+    /** Loading state */
+    loading?: boolean;
+}
+export declare const RelatedProducts: React.FC<RelatedProductsProps>;
+export interface TrendingItemsProps extends BaseRecommendationProps {
+    /** Custom items (if not using API) */
+    items?: RecommendationItem[];
+    /** Loading state */
+    loading?: boolean;
+    /** Facet name for trending (if using facet data) */
+    facetName?: string;
+}
+export declare const TrendingItems: React.FC<TrendingItemsProps>;
+export interface FrequentlyBoughtTogetherProps extends BaseRecommendationProps {
+    /** Product ID to get frequently bought together items for */
+    productId: string;
+    /** Custom items (if not using API) */
+    items?: RecommendationItem[];
+    /** Loading state */
+    loading?: boolean;
+    /** Show "Add all to cart" button */
+    showAddAllButton?: boolean;
+    /** Callback when "Add all" is clicked */
+    onAddAll?: (items: RecommendationItem[]) => void;
+}
+export declare const FrequentlyBoughtTogether: React.FC<FrequentlyBoughtTogetherProps>;
+export interface RecentlyViewedProps extends BaseRecommendationProps {
+    /** Storage key for localStorage */
+    storageKey?: string;
+    /** Custom items (overrides localStorage) */
+    items?: RecommendationItem[];
+}
+export declare const RecentlyViewed: React.FC<RecentlyViewedProps>;
+/**
+ * Add item to recently viewed (utility function)
+ */
+export declare function addToRecentlyViewed(item: RecommendationItem, storageKey?: string, maxItems?: number): void;
+export {};
+//# sourceMappingURL=Recommendations.d.ts.map

package/dist/components/Recommendations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Recommendations.d.ts","sourceRoot":"","sources":["../../src/components/Recommendations.tsx"],"names":[],"mappings":"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"}

package/dist/components/Recommendations.js

@@ -0,0 +1,270 @@
+/**
+ * Recommendation Components
+ *
+ * Components for displaying product recommendations:
+ * - RelatedProducts: Show related items based on a product
+ * - TrendingItems: Display trending/popular products
+ * - FrequentlyBoughtTogether: Bundle recommendations
+ * - RecentlyViewed: User's recently viewed items
+ */
+import React, { useEffect, useState, useMemo } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { clsx } from 'clsx';
+export const RelatedProducts = ({ productId, items: itemsProp, loading: loadingProp = false, title = 'Related Products', maxItems = 6, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
+    const { theme } = useSearchContext();
+    const recommendationTheme = customTheme || {};
+    // If items are provided, use them directly
+    const items = itemsProp?.slice(0, maxItems) || [];
+    const loading = loadingProp;
+    if (loading) {
+        return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
+            React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading related products...")));
+    }
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement(RecommendationSection, { title: title, items: items, renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
+};
+export const TrendingItems = ({ items: itemsProp, loading: loadingProp = false, title = 'Trending Now', maxItems = 8, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
+    const { theme } = useSearchContext();
+    const recommendationTheme = customTheme || {};
+    const items = itemsProp?.slice(0, maxItems) || [];
+    const loading = loadingProp;
+    if (loading) {
+        return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
+            React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading trending items...")));
+    }
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement(RecommendationSection, { title: title, items: items, renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
+};
+export const FrequentlyBoughtTogether = ({ productId, items: itemsProp, loading: loadingProp = false, title = 'Frequently Bought Together', maxItems = 4, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', showAddAllButton = true, onAddAll, }) => {
+    const { theme } = useSearchContext();
+    const recommendationTheme = customTheme || {};
+    const items = itemsProp?.slice(0, maxItems) || [];
+    const loading = loadingProp;
+    // Calculate total price
+    const totalPrice = useMemo(() => {
+        return items.reduce((sum, item) => {
+            const itemPrice = item.price;
+            const price = typeof itemPrice === 'number' ? itemPrice : parseFloat(String(itemPrice)) || 0;
+            return sum + price;
+        }, 0);
+    }, [items]);
+    if (loading) {
+        return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
+            React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading recommendations...")));
+    }
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
+        title && (React.createElement("h3", { className: recommendationTheme.title, style: {
+                margin: `0 0 ${theme.spacing.medium} 0`,
+                fontSize: theme.typography.fontSize.large,
+                fontWeight: theme.typography.fontWeight?.semibold || 600,
+                color: theme.colors.text,
+            } }, title)),
+        React.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing.medium,
+                flexWrap: 'wrap',
+            } },
+            items.map((item, index) => (React.createElement(React.Fragment, { key: item.id || index },
+                index > 0 && (React.createElement("span", { style: { fontSize: '1.5rem', color: theme.colors.textSecondary } }, "+")),
+                React.createElement("div", { onClick: () => onItemClick?.(item, index), style: {
+                        cursor: onItemClick ? 'pointer' : 'default',
+                        textAlign: 'center',
+                    } }, renderItem ? (renderItem(item, index)) : (React.createElement(React.Fragment, null,
+                    React.createElement("img", { src: item.image || item.imageUrl || '', alt: item.title || item.name || '', style: {
+                            width: '80px',
+                            height: '80px',
+                            objectFit: 'cover',
+                            borderRadius: typeof theme.borderRadius === 'string'
+                                ? theme.borderRadius
+                                : theme.borderRadius.small,
+                            border: `1px solid ${theme.colors.border}`,
+                        } }),
+                    React.createElement("div", { style: {
+                            marginTop: theme.spacing.small,
+                            fontSize: theme.typography.fontSize.small,
+                            color: theme.colors.text,
+                        } },
+                        currencySymbol,
+                        typeof item.price === 'number' ? item.price.toFixed(2) : item.price))))))),
+            showAddAllButton && items.length > 0 && (React.createElement("div", { style: {
+                    marginLeft: 'auto',
+                    textAlign: 'center',
+                } },
+                React.createElement("div", { style: {
+                        fontSize: theme.typography.fontSize.large,
+                        fontWeight: theme.typography.fontWeight?.bold || 700,
+                        color: theme.colors.text,
+                        marginBottom: theme.spacing.small,
+                    } },
+                    "Total: ",
+                    currencySymbol,
+                    totalPrice.toFixed(2)),
+                React.createElement("button", { type: "button", onClick: () => onAddAll?.(items), style: {
+                        padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+                        fontSize: theme.typography.fontSize.medium,
+                        fontWeight: theme.typography.fontWeight?.medium || 500,
+                        color: '#ffffff',
+                        backgroundColor: theme.colors.primary,
+                        border: 'none',
+                        borderRadius: typeof theme.borderRadius === 'string'
+                            ? theme.borderRadius
+                            : theme.borderRadius.medium,
+                        cursor: 'pointer',
+                    } }, "Add all to cart"))))));
+};
+export const RecentlyViewed = ({ storageKey = 'seekora_recently_viewed', items: itemsProp, title = 'Recently Viewed', maxItems = 6, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
+    const [storedItems, setStoredItems] = useState([]);
+    useEffect(() => {
+        if (itemsProp)
+            return;
+        try {
+            const stored = localStorage.getItem(storageKey);
+            if (stored) {
+                setStoredItems(JSON.parse(stored));
+            }
+        }
+        catch (e) {
+            // Ignore localStorage errors
+        }
+    }, [storageKey, itemsProp]);
+    const items = (itemsProp || storedItems).slice(0, maxItems);
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement(RecommendationSection, { title: title, items: items, renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
+};
+/**
+ * Add item to recently viewed (utility function)
+ */
+export function addToRecentlyViewed(item, storageKey = 'seekora_recently_viewed', maxItems = 20) {
+    if (typeof localStorage === 'undefined')
+        return;
+    try {
+        const stored = localStorage.getItem(storageKey);
+        let items = stored ? JSON.parse(stored) : [];
+        // Remove if already exists
+        items = items.filter(i => i.id !== item.id);
+        // Add to beginning
+        items.unshift(item);
+        // Limit
+        items = items.slice(0, maxItems);
+        localStorage.setItem(storageKey, JSON.stringify(items));
+    }
+    catch (e) {
+        // Ignore localStorage errors
+    }
+}
+const RecommendationSection = ({ title, items, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
+    const { theme } = useSearchContext();
+    const recommendationTheme = customTheme || {};
+    const getListStyle = () => {
+        switch (layout) {
+            case 'horizontal':
+                return {
+                    display: 'flex',
+                    gap: theme.spacing.medium,
+                    overflowX: 'auto',
+                    scrollSnapType: 'x mandatory',
+                    paddingBottom: theme.spacing.small,
+                };
+            case 'grid':
+                return {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+                    gap: theme.spacing.medium,
+                };
+            case 'list':
+                return {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: theme.spacing.small,
+                };
+            default:
+                return {};
+        }
+    };
+    const getItemStyle = () => {
+        switch (layout) {
+            case 'horizontal':
+                return {
+                    flexShrink: 0,
+                    width: '150px',
+                    scrollSnapAlign: 'start',
+                };
+            case 'grid':
+                return {};
+            case 'list':
+                return {
+                    display: 'flex',
+                    gap: theme.spacing.medium,
+                    padding: theme.spacing.small,
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                };
+            default:
+                return {};
+        }
+    };
+    return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
+        title && (React.createElement("h3", { className: recommendationTheme.title, style: {
+                margin: `0 0 ${theme.spacing.medium} 0`,
+                fontSize: theme.typography.fontSize.large,
+                fontWeight: theme.typography.fontWeight?.semibold || 600,
+                color: theme.colors.text,
+            } }, title)),
+        React.createElement("div", { className: recommendationTheme.list, style: getListStyle() }, items.map((item, index) => (React.createElement("div", { key: item.id || index, className: recommendationTheme.item, onClick: () => onItemClick?.(item, index), style: {
+                ...getItemStyle(),
+                cursor: onItemClick ? 'pointer' : 'default',
+            } }, renderItem ? (renderItem(item, index)) : (React.createElement(DefaultRecommendationItem, { item: item, theme: recommendationTheme, currencySymbol: currencySymbol, layout: layout }))))))));
+};
+const DefaultRecommendationItem = ({ item, theme: recommendationTheme, currencySymbol, layout, }) => {
+    const { theme } = useSearchContext();
+    const image = item.image || item.imageUrl || '';
+    const title = item.title || item.name || '';
+    const price = item.price;
+    const imageSize = layout === 'list' ? '60px' : '100%';
+    return (React.createElement(React.Fragment, null,
+        image && (React.createElement("img", { src: image, alt: title, className: recommendationTheme.image, style: {
+                width: imageSize,
+                height: layout === 'list' ? '60px' : '120px',
+                objectFit: 'cover',
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.small,
+            } })),
+        React.createElement("div", { className: recommendationTheme.content, style: { flex: layout === 'list' ? 1 : undefined } },
+            React.createElement("div", { className: recommendationTheme.name, style: {
+                    marginTop: layout === 'list' ? 0 : theme.spacing.small,
+                    fontSize: theme.typography.fontSize.small,
+                    fontWeight: theme.typography.fontWeight?.medium || 500,
+                    color: theme.colors.text,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                } }, title),
+            price !== undefined && (React.createElement("div", { className: recommendationTheme.price, style: {
+                    marginTop: theme.spacing.small,
+                    fontSize: theme.typography.fontSize.small,
+                    fontWeight: theme.typography.fontWeight?.bold || 700,
+                    color: theme.colors.primary,
+                } },
+                currencySymbol,
+                typeof price === 'number' ? price.toFixed(2) : price)))));
+};
+// Helper function
+function getLoadingStyle(theme) {
+    return {
+        padding: theme.spacing.large,
+        textAlign: 'center',
+        color: theme.colors.textSecondary,
+    };
+}