@seekora-ai/ui-sdk-react 1.0.0

package/dist/components/SearchLayout.js

@@ -0,0 +1,56 @@
+/**
+ * SearchLayout Component
+ *
+ * Provides a layout structure for search interfaces with sidebar and main content
+ */
+import React, { useEffect, useState } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { clsx } from 'clsx';
+export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px', className, style, theme: customTheme, showSidebarOnMobile = false, }) => {
+    const { theme } = useSearchContext();
+    const layoutTheme = customTheme || {};
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    return (React.createElement("div", { className: clsx(layoutTheme.container, className), style: {
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh',
+            backgroundColor: theme.colors.background,
+            ...style,
+        } },
+        header && (React.createElement("header", { className: layoutTheme.header, style: {
+                padding: theme.spacing.medium,
+                borderBottom: `1px solid ${theme.colors.border}`,
+                backgroundColor: theme.colors.background,
+            } }, header)),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flex: 1,
+                gap: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: theme.colors.background,
+                color: theme.colors.text,
+            } },
+            sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: layoutTheme.sidebar, style: {
+                    width: sidebarWidth,
+                    minWidth: sidebarWidth,
+                } }, sidebar)),
+            React.createElement("main", { className: layoutTheme.main, style: {
+                    flex: 1,
+                    minWidth: 0, // Prevents flex item from overflowing
+                    backgroundColor: theme.colors.background,
+                    color: theme.colors.text,
+                } }, children)),
+        footer && (React.createElement("footer", { className: layoutTheme.footer, style: {
+                padding: theme.spacing.medium,
+                borderTop: `1px solid ${theme.colors.border}`,
+                backgroundColor: theme.colors.background,
+            } }, footer))));
+};

package/dist/components/SearchProvider.d.ts

@@ -0,0 +1,28 @@
+/**
+ * SearchProvider Component
+ *
+ * Provides Seekora client and context to child components
+ */
+import React, { ReactNode } from 'react';
+import type { SeekoraClient } from '@seekora-ai/search-sdk';
+import { SearchStateManager, type SearchStateManagerConfig } from '@seekora-ai/ui-sdk-core';
+import type { Theme, ThemeConfig } from '../themes/types';
+interface SearchContextValue {
+    client: SeekoraClient;
+    theme: Theme;
+    enableAnalytics: boolean;
+    autoTrackSearch: boolean;
+    stateManager: SearchStateManager;
+}
+export interface SearchProviderProps {
+    client: SeekoraClient;
+    theme?: ThemeConfig;
+    enableAnalytics?: boolean;
+    autoTrackSearch?: boolean;
+    stateManager?: SearchStateManagerConfig;
+    children: ReactNode;
+}
+export declare const SearchProvider: React.FC<SearchProviderProps>;
+export declare const useSearchContext: () => SearchContextValue;
+export {};
+//# sourceMappingURL=SearchProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchProvider.d.ts","sourceRoot":"","sources":["../../src/components/SearchProvider.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAW,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAO,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI1D,UAAU,kBAAkB;IAC1B,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,kBAAkB,CAAC;CAClC;AAID,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqCxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,kBAQnC,CAAC"}

package/dist/components/SearchProvider.js

@@ -0,0 +1,43 @@
+/**
+ * SearchProvider Component
+ *
+ * Provides Seekora client and context to child components
+ */
+import React, { createContext, useContext, useMemo } from 'react';
+import { log, SearchStateManager } from '@seekora-ai/ui-sdk-core';
+import { defaultTheme } from '../themes/default';
+import { createTheme } from '../themes/createTheme';
+const SearchContext = createContext(null);
+export const SearchProvider = ({ client, theme: themeConfig, enableAnalytics = true, autoTrackSearch = true, stateManager: stateManagerConfig, children, }) => {
+    const theme = useMemo(() => {
+        return themeConfig ? createTheme(themeConfig) : defaultTheme;
+    }, [themeConfig]);
+    // Create state manager instance (memoized to avoid recreating on every render)
+    const stateManager = useMemo(() => {
+        return new SearchStateManager({
+            client,
+            autoSearch: true,
+            debounceMs: 300,
+            itemsPerPage: 10,
+            defaultSearchOptions: { widget_mode: true },
+            ...stateManagerConfig,
+        });
+    }, [client, stateManagerConfig]);
+    const value = useMemo(() => ({
+        client,
+        theme,
+        enableAnalytics,
+        autoTrackSearch,
+        stateManager,
+    }), [client, theme, enableAnalytics, autoTrackSearch, stateManager]);
+    return (React.createElement(SearchContext.Provider, { value: value }, children));
+};
+export const useSearchContext = () => {
+    const context = useContext(SearchContext);
+    if (!context) {
+        const error = new Error('useSearchContext must be used within a SearchProvider');
+        log.error('SearchProvider: Context not available', { error: error.message });
+        throw error;
+    }
+    return context;
+};

package/dist/components/SearchResults.d.ts

@@ -0,0 +1,51 @@
+/**
+ * SearchResults Component
+ *
+ * Displays search results with customizable rendering
+ * Includes keyboard navigation support (arrow keys, Enter to select)
+ */
+import React from 'react';
+import type { SearchResponse } from '@seekora-ai/search-sdk';
+import type { ResultItem, FieldMapping, ViewMode } from '@seekora-ai/ui-sdk-types';
+export interface SearchResultsTheme {
+    container?: string;
+    header?: string;
+    resultsList?: string;
+    resultItem?: string;
+    resultItemHover?: string;
+    resultTitle?: string;
+    resultDescription?: string;
+    resultImage?: string;
+    resultPrice?: string;
+    emptyState?: string;
+    loadingState?: string;
+    errorState?: string;
+    pagination?: string;
+}
+export interface SearchResultsProps {
+    results?: SearchResponse | null;
+    loading?: boolean;
+    error?: Error | null;
+    onResultClick?: (result: ResultItem, index: number) => void;
+    renderResult?: (result: ResultItem, index: number, isActive?: boolean) => React.ReactNode;
+    renderEmpty?: () => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    renderError?: (error: Error) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: SearchResultsTheme;
+    itemsPerPage?: number;
+    showPagination?: boolean;
+    /** Display mode: 'list' (default), 'card', or 'grid' */
+    viewMode?: ViewMode;
+    /** Field mapping configuration for extracting data from results */
+    fieldMapping?: FieldMapping;
+    /** Function to extract results array from the response (if custom structure) */
+    extractResults?: (response: any) => any[];
+    /** Enable keyboard navigation (arrow keys, Enter to select) */
+    enableKeyboardNavigation?: boolean;
+    /** Auto-focus the results container */
+    autoFocus?: boolean;
+}
+export declare const SearchResults: React.FC<SearchResultsProps>;
+//# sourceMappingURL=SearchResults.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../src/components/SearchResults.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEnF,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1F,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gFAAgF;IAChF,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAoBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+oBtD,CAAC"}

package/dist/components/SearchResults.js

@@ -0,0 +1,485 @@
+/**
+ * SearchResults Component
+ *
+ * Displays search results with customizable rendering
+ * Includes keyboard navigation support (arrow keys, Enter to select)
+ */
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { log } from '@seekora-ai/ui-sdk-core';
+import { clsx } from 'clsx';
+// Helper function to get nested value from object using dot notation
+const getNestedValue = (obj, path) => {
+    if (!path)
+        return undefined;
+    return path.split('.').reduce((current, key) => current?.[key], obj);
+};
+// Helper function to format price
+const formatPrice = (value, currency = '₹') => {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === 'number')
+        return `${currency}${value}`;
+    if (typeof value === 'string') {
+        const num = parseFloat(value);
+        if (!isNaN(num))
+            return `${currency}${num}`;
+        return value;
+    }
+    return String(value);
+};
+export const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, }) => {
+    const { theme, client, enableAnalytics } = useSearchContext();
+    const { results: stateResults, loading: stateLoading, error: stateError, currentPage, itemsPerPage: stateItemsPerPage } = useSearchState();
+    const searchResultsTheme = customTheme || {};
+    // Keyboard navigation state
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const containerRef = useRef(null);
+    // Use props if provided, otherwise use state from state manager
+    const results = resultsProp !== undefined ? resultsProp : stateResults;
+    const loading = loadingProp !== undefined ? loadingProp : stateLoading;
+    const error = errorProp !== undefined ? errorProp : stateError;
+    // Reset active index when results change
+    useEffect(() => {
+        setActiveIndex(-1);
+    }, [results]);
+    // Scroll active item into view
+    useEffect(() => {
+        if (activeIndex >= 0 && containerRef.current && enableKeyboardNavigation) {
+            const activeEl = containerRef.current.querySelector(`[data-result-index="${activeIndex}"]`);
+            if (activeEl) {
+                activeEl.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }
+    }, [activeIndex, enableKeyboardNavigation]);
+    // Keyboard navigation handler
+    const handleKeyDown = useCallback((e) => {
+        if (!enableKeyboardNavigation)
+            return;
+        // We need to get the result count dynamically
+        const resultElements = containerRef.current?.querySelectorAll('[data-result-index]');
+        const maxIndex = resultElements ? resultElements.length - 1 : -1;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setActiveIndex(prev => Math.min(prev + 1, maxIndex));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setActiveIndex(prev => Math.max(prev - 1, -1));
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (activeIndex >= 0) {
+                    // Trigger click on active item
+                    const activeEl = containerRef.current?.querySelector(`[data-result-index="${activeIndex}"]`);
+                    if (activeEl) {
+                        activeEl.click();
+                    }
+                }
+                break;
+            case 'Escape':
+                setActiveIndex(-1);
+                containerRef.current?.blur();
+                break;
+            case 'Home':
+                e.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                setActiveIndex(maxIndex);
+                break;
+        }
+    }, [enableKeyboardNavigation, activeIndex]);
+    const defaultRenderResultList = (result, index, isActive = false) => {
+        const handleClick = async () => {
+            // Track analytics event if enabled
+            if (enableAnalytics && result.id) {
+                try {
+                    const results = resultsProp || stateResults;
+                    const state = { currentPage, itemsPerPage: stateItemsPerPage };
+                    // Calculate absolute position (1-based) accounting for pagination
+                    const absolutePosition = (state.currentPage - 1) * state.itemsPerPage + index + 1;
+                    // Build search context from current state and response
+                    const searchContext = results?.context || (results ? {
+                        query: '', // Will be filled from state if needed
+                        page: state.currentPage,
+                    } : undefined);
+                    console.log('🔵 SearchResults: Tracking analytics event', {
+                        resultId: result.id,
+                        resultIndex: index,
+                        absolutePosition,
+                        currentPage: state.currentPage,
+                        itemsPerPage: state.itemsPerPage,
+                        hasContext: !!searchContext,
+                    });
+                    await client.trackEvent?.({
+                        event_name: 'product_click',
+                        clicked_item_id: result.id,
+                        metadata: {
+                            result: result,
+                            position: absolutePosition,
+                        },
+                    }, searchContext);
+                    console.log('🟢 SearchResults: Analytics event tracked successfully', {
+                        resultId: result.id,
+                        position: absolutePosition,
+                    });
+                }
+                catch (err) {
+                    const error = err instanceof Error ? err : new Error(String(err));
+                    console.error('SearchResults: Error tracking analytics event', {
+                        resultId: result.id,
+                        error: error.message,
+                    });
+                }
+            }
+            // Call user-provided callback
+            if (onResultClick) {
+                onResultClick(result, index);
+            }
+        };
+        return (React.createElement("div", { key: result.id || index, "data-result-index": index, className: clsx(searchResultsTheme.resultItem, isActive && searchResultsTheme.resultItemHover), onClick: handleClick, onMouseEnter: () => enableKeyboardNavigation && setActiveIndex(index), style: {
+                padding: theme.spacing.medium,
+                border: `1px solid ${theme.colors.border}`,
+                borderBottom: `1px solid ${theme.colors.border}`,
+                borderRadius: 0,
+                marginBottom: 0,
+                cursor: onResultClick ? 'pointer' : 'default',
+                transition: theme.transitions?.normal || '250ms ease-in-out',
+                backgroundColor: isActive ? theme.colors.hover : theme.colors.background,
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: theme.spacing.medium,
+                outline: isActive ? `2px solid ${theme.colors.primary}` : 'none',
+                outlineOffset: '-2px',
+            } },
+            result.image && (React.createElement("img", { src: result.image, alt: result.title, className: searchResultsTheme.resultImage, style: {
+                    width: '100px',
+                    height: '100px',
+                    objectFit: 'cover',
+                    borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                    flexShrink: 0,
+                } })),
+            React.createElement("div", { style: { flex: 1, minWidth: 0 } },
+                React.createElement("h3", { className: searchResultsTheme.resultTitle, style: {
+                        fontSize: theme.typography.fontSize.large,
+                        fontWeight: 'bold',
+                        margin: 0,
+                        marginBottom: theme.spacing.small,
+                        color: theme.colors.text,
+                    } }, result.title),
+                result.description && (React.createElement("p", { className: searchResultsTheme.resultDescription, style: {
+                        fontSize: theme.typography.fontSize.medium,
+                        color: theme.colors.text,
+                        margin: 0,
+                        marginBottom: theme.spacing.small,
+                        opacity: 0.8,
+                    } }, result.description)),
+                result.price && (React.createElement("div", { className: searchResultsTheme.resultPrice, style: {
+                        fontSize: theme.typography.fontSize.medium,
+                        fontWeight: 'bold',
+                        color: theme.colors.primary,
+                    } }, result.price)))));
+    };
+    const defaultRenderResultCard = (result, index, isActive = false) => {
+        const handleClick = async () => {
+            // Track analytics event if enabled
+            if (enableAnalytics && result.id) {
+                try {
+                    const results = resultsProp || stateResults;
+                    const state = { currentPage, itemsPerPage: stateItemsPerPage };
+                    // Calculate absolute position (1-based) accounting for pagination
+                    const absolutePosition = (state.currentPage - 1) * state.itemsPerPage + index + 1;
+                    // Build search context from current state and response
+                    const searchContext = results?.context || (results ? {
+                        query: '', // Will be filled from state if needed
+                        page: state.currentPage,
+                    } : undefined);
+                    console.log('🔵 SearchResults: Tracking analytics event', {
+                        resultId: result.id,
+                        resultIndex: index,
+                        absolutePosition,
+                        currentPage: state.currentPage,
+                        itemsPerPage: state.itemsPerPage,
+                        hasContext: !!searchContext,
+                    });
+                    await client.trackEvent?.({
+                        event_name: 'product_click',
+                        clicked_item_id: result.id,
+                        metadata: {
+                            result: result,
+                            position: absolutePosition,
+                        },
+                    }, searchContext);
+                    console.log('🟢 SearchResults: Analytics event tracked successfully', {
+                        resultId: result.id,
+                        position: absolutePosition,
+                    });
+                }
+                catch (err) {
+                    const error = err instanceof Error ? err : new Error(String(err));
+                    console.error('SearchResults: Error tracking analytics event', {
+                        resultId: result.id,
+                        error: error.message,
+                    });
+                }
+            }
+            // Call user-provided callback
+            if (onResultClick) {
+                onResultClick(result, index);
+            }
+        };
+        // Use widget view fields if available, otherwise fall back to regular fields
+        const primaryText = result.primaryText || result.title;
+        const secondaryText = result.secondaryText || result.description;
+        const tertiaryText = result.tertiaryText || result.price;
+        const imageUrl = result.imageUrl || result.image;
+        return (React.createElement("div", { key: result.id || index, "data-result-index": index, className: clsx(searchResultsTheme.resultItem, isActive && searchResultsTheme.resultItemHover), onClick: handleClick, onMouseEnter: () => enableKeyboardNavigation && setActiveIndex(index), style: {
+                border: `1px solid ${isActive ? theme.colors.primary : theme.colors.border}`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                overflow: 'hidden',
+                cursor: onResultClick ? 'pointer' : 'default',
+                transition: theme.transitions?.normal || '250ms ease-in-out',
+                backgroundColor: isActive ? theme.colors.hover : theme.colors.background,
+                display: 'flex',
+                flexDirection: 'column',
+                padding: theme.spacing.medium,
+                boxShadow: isActive ? theme.shadows.medium : theme.shadows.small,
+                outline: isActive ? `2px solid ${theme.colors.primary}` : 'none',
+                outlineOffset: '-2px',
+            } },
+            imageUrl && (React.createElement("div", { style: {
+                    width: '100%',
+                    aspectRatio: '16/9',
+                    overflow: 'hidden',
+                    backgroundColor: theme.colors.hover,
+                } },
+                React.createElement("img", { src: imageUrl, alt: primaryText, style: {
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                    } }))),
+            React.createElement("div", { style: { padding: theme.spacing.medium } },
+                primaryText && (React.createElement("h3", { className: searchResultsTheme.resultTitle, style: {
+                        fontSize: theme.typography.fontSize.large,
+                        fontWeight: 'bold',
+                        margin: 0,
+                        marginBottom: theme.spacing.small,
+                        color: theme.colors.text,
+                    } }, primaryText)),
+                secondaryText && (React.createElement("p", { className: searchResultsTheme.resultDescription, style: {
+                        fontSize: theme.typography.fontSize.medium,
+                        color: theme.colors.text,
+                        margin: 0,
+                        marginBottom: theme.spacing.small,
+                        opacity: 0.8,
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                    } }, secondaryText)),
+                tertiaryText && (React.createElement("div", { className: searchResultsTheme.resultPrice, style: {
+                        fontSize: theme.typography.fontSize.medium,
+                        fontWeight: 'bold',
+                        color: theme.colors.primary,
+                        marginTop: 'auto',
+                    } }, tertiaryText)))));
+    };
+    const defaultRenderResult = viewMode === 'card' || viewMode === 'grid'
+        ? defaultRenderResultCard
+        : defaultRenderResultList;
+    const defaultRenderEmpty = () => (React.createElement("div", { className: searchResultsTheme.emptyState, style: {
+            padding: theme.spacing.large,
+            textAlign: 'center',
+            color: theme.colors.text,
+        } }, "No results found"));
+    const defaultRenderLoading = () => (React.createElement("div", { className: searchResultsTheme.loadingState, style: {
+            padding: theme.spacing.large,
+            textAlign: 'center',
+            color: theme.colors.text,
+        } }, "Loading results..."));
+    const defaultRenderError = (err) => (React.createElement("div", { className: searchResultsTheme.errorState, style: {
+            padding: theme.spacing.large,
+            textAlign: 'center',
+            color: theme.colors.error,
+        } },
+        "Error: ",
+        err.message));
+    // Extract results array from response
+    let rawResults = [];
+    if (extractResults) {
+        // Use custom extraction function if provided
+        rawResults = extractResults(results) || [];
+    }
+    else if (results) {
+        const res = results;
+        if (Array.isArray(res.results) && res.results.length > 0) {
+            rawResults = res.results;
+        }
+        else if (res.data && Array.isArray(res.data.results) && res.data.results.length > 0) {
+            rawResults = res.data.results;
+        }
+        else if (res.data?.data && Array.isArray(res.data.data.results) && res.data.data.results.length > 0) {
+            rawResults = res.data.data.results;
+        }
+        else if (Array.isArray(results)) {
+            rawResults = results;
+        }
+        else if (Array.isArray(res.results)) {
+            rawResults = res.results;
+        }
+    }
+    // Default field mapping (can be overridden via props)
+    const defaultFieldMapping = {
+        title: 'document.productName',
+        description: 'document.brandDesc',
+        image: 'document.image',
+        price: 'document.mrp',
+        url: 'document.url',
+        id: 'id',
+        ...fieldMapping,
+    };
+    // Extract field value using dot notation path
+    const extractField = (item, path) => {
+        if (!path)
+            return undefined;
+        return getNestedValue(item, path);
+    };
+    const resultItems = rawResults.map((item, index) => {
+        try {
+            // Widget view fields (when widget_mode is enabled) - check these first
+            const primaryText = extractField(item, defaultFieldMapping.primaryText);
+            const secondaryText = extractField(item, defaultFieldMapping.secondaryText);
+            const tertiaryText = extractField(item, defaultFieldMapping.tertiaryText);
+            const imageUrl = extractField(item, defaultFieldMapping.imageUrl);
+            // Use primaryText as fallback for title if title is not found
+            const title = extractField(item, defaultFieldMapping.title) || primaryText || 'Untitled';
+            const description = extractField(item, defaultFieldMapping.description) || secondaryText;
+            const image = extractField(item, defaultFieldMapping.image) || imageUrl;
+            const priceValue = extractField(item, defaultFieldMapping.price) || tertiaryText;
+            const url = extractField(item, defaultFieldMapping.url);
+            const id = extractField(item, defaultFieldMapping.id) || String(index);
+            // Format price if it's a number
+            const price = priceValue !== undefined ? formatPrice(priceValue) : undefined;
+            // Extract custom fields if configured
+            const customFields = {};
+            if (defaultFieldMapping.custom) {
+                Object.entries(defaultFieldMapping.custom).forEach(([key, path]) => {
+                    customFields[key] = extractField(item, path);
+                });
+            }
+            const resultItem = {
+                id,
+                title,
+                description,
+                url,
+                image,
+                price,
+                metadata: item,
+                ...customFields,
+                // Widget view fields
+                ...(primaryText && { primaryText }),
+                ...(secondaryText && { secondaryText }),
+                ...(tertiaryText && { tertiaryText }),
+                ...(imageUrl && { imageUrl }),
+                // Include original item for full access
+                _raw: item,
+            };
+            return resultItem;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            log.warn('SearchResults: Error extracting result item', {
+                index,
+                error: error.message,
+                item: item?.id || 'unknown',
+            });
+            // Return a fallback result item
+            return {
+                id: String(index),
+                title: 'Error loading result',
+                metadata: item,
+            };
+        }
+    });
+    // Determine container style based on view mode
+    const containerStyle = {
+        ...style,
+    };
+    // Determine results list style based on view mode
+    const resultsListStyle = {
+        ...(viewMode === 'grid' && {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+            gap: theme.spacing.medium,
+        }),
+        ...(viewMode === 'card' && {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+            gap: theme.spacing.medium,
+        }),
+    };
+    // Log results extraction
+    log.verbose('SearchResults: Extracted results', {
+        rawResultsCount: rawResults.length,
+        resultItemsCount: resultItems.length,
+        viewMode,
+        hasError: !!error,
+        isLoading: loading,
+    });
+    if (loading) {
+        log.verbose('SearchResults: Rendering loading state');
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderLoading ? renderLoading() : defaultRenderLoading()));
+    }
+    if (error) {
+        log.error('SearchResults: Rendering error state', {
+            error: error.message,
+            stack: error.stack,
+        });
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderError ? renderError(error) : defaultRenderError(error)));
+    }
+    if (!results || resultItems.length === 0) {
+        log.verbose('SearchResults: No results to display');
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderEmpty ? renderEmpty() : defaultRenderEmpty()));
+    }
+    const renderFn = renderResult || defaultRenderResult;
+    return (React.createElement("div", { ref: containerRef, className: clsx(searchResultsTheme.container, className), style: containerStyle, tabIndex: enableKeyboardNavigation ? 0 : undefined, onKeyDown: handleKeyDown, role: "listbox", "aria-label": "Search results", "aria-activedescendant": activeIndex >= 0 ? `result-${activeIndex}` : undefined },
+        (results?.totalResults !== undefined || results?.data?.total_results !== undefined) && resultItems.length > 0 && (React.createElement("div", { className: searchResultsTheme.header, style: {
+                marginBottom: theme.spacing.medium,
+                fontSize: theme.typography.fontSize.medium,
+                color: theme.colors.text,
+            } },
+            "Found ",
+            results?.totalResults || results?.data?.total_results || 0,
+            " result",
+            (results?.totalResults || results?.data?.total_results || 0) !== 1 ? 's' : '')),
+        enableKeyboardNavigation && resultItems.length > 0 && (React.createElement("div", { style: {
+                fontSize: '12px',
+                color: theme.colors.text,
+                opacity: 0.6,
+                marginBottom: theme.spacing.small,
+                display: 'flex',
+                gap: '8px',
+                alignItems: 'center',
+            } },
+            React.createElement("span", { style: {
+                    display: 'inline-flex',
+                    gap: '4px',
+                    padding: '2px 6px',
+                    backgroundColor: theme.colors.hover,
+                    borderRadius: '4px',
+                    fontSize: '11px',
+                } }, "\u2191\u2193 navigate"),
+            React.createElement("span", { style: {
+                    display: 'inline-flex',
+                    gap: '4px',
+                    padding: '2px 6px',
+                    backgroundColor: theme.colors.hover,
+                    borderRadius: '4px',
+                    fontSize: '11px',
+                } }, "\u21B5 select"))),
+        React.createElement("div", { className: searchResultsTheme.resultsList, style: resultsListStyle }, resultItems.map((result, index) => renderFn(result, index, index === activeIndex)))));
+};