@seekora-ai/ui-sdk-react 0.0.0-stage-20260517092419

package/dist/components/SearchBarWithSuggestions.js

@@ -0,0 +1,275 @@
+/**
+ * SearchBarWithSuggestions Component
+ *
+ * Integrated search bar with query suggestions dropdown.
+ * Combines SearchBar with any of the suggestion dropdown variants.
+ */
+import React, { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle, } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { QuerySuggestionsDropdown } from './QuerySuggestionsDropdown';
+import { RichQuerySuggestions } from './RichQuerySuggestions';
+import { FederatedDropdown } from './FederatedDropdown';
+import { useSuggestionsAnalytics } from '../hooks/useSuggestionsAnalytics';
+import { clsx } from 'clsx';
+// ============================================================================
+// Styles
+// ============================================================================
+const styles = {
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+    },
+    inputWrapper: {
+        display: 'flex',
+        alignItems: 'center',
+        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
+        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRadius: 'var(--seekora-border-radius-lg, 8px)',
+        overflow: 'hidden',
+        transition: 'border-color 150ms ease, box-shadow 150ms ease',
+    },
+    inputWrapperFocused: {
+        borderColor: 'var(--seekora-border-focus, var(--seekora-primary, #3b82f6))',
+        boxShadow: '0 0 0 3px var(--seekora-border-focus-alpha, var(--seekora-primary-light, rgba(59, 130, 246, 0.1)))',
+    },
+    input: {
+        flex: 1,
+        padding: '12px 16px',
+        fontSize: '16px',
+        border: 'none',
+        outline: 'none',
+        backgroundColor: 'transparent',
+        color: 'var(--seekora-text-primary, #111827)',
+        fontFamily: 'inherit',
+    },
+    searchIcon: {
+        width: '20px',
+        height: '20px',
+        color: 'var(--seekora-text-secondary, #9ca3af)',
+        marginLeft: '12px',
+        flexShrink: 0,
+    },
+    clearButton: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '32px',
+        height: '32px',
+        marginRight: '4px',
+        padding: 0,
+        border: 'none',
+        backgroundColor: 'transparent',
+        color: 'var(--seekora-text-secondary, #9ca3af)',
+        borderRadius: '50%',
+        cursor: 'pointer',
+        transition: 'background-color 150ms ease, color 150ms ease',
+    },
+    searchButton: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '8px',
+        padding: '12px 20px',
+        margin: '4px',
+        border: 'none',
+        backgroundColor: 'var(--seekora-primary, #3b82f6)',
+        color: 'var(--seekora-primary-text, white)',
+        borderRadius: 'var(--seekora-border-radius, 6px)',
+        fontSize: '14px',
+        fontWeight: 600,
+        cursor: 'pointer',
+        transition: 'background-color 150ms ease',
+    },
+};
+// ============================================================================
+// Icons
+// ============================================================================
+const SearchIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: styles.searchIcon },
+    React.createElement("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" })));
+const ClearIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { width: 16, height: 16 } },
+    React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })));
+// ============================================================================
+// Component
+// ============================================================================
+export const SearchBarWithSuggestions = forwardRef(function SearchBarWithSuggestions(props, ref) {
+    const { variant = 'classic', placeholder = 'Powered by Seekora', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, maxProducts = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, includeFacets, includeCategories, dropdownWidth, dropdownMaxHeight, classNames = {}, style, inputStyle, ariaLabel = 'Search', } = props;
+    const { client } = useSearchContext();
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const [query, setQuery] = useState(value ?? initialQuery);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    // Analytics
+    const analytics = useSuggestionsAnalytics({
+        client,
+        enabled: enableAnalytics,
+        analyticsTags,
+    });
+    // Sync controlled value
+    useEffect(() => {
+        if (value !== undefined && value !== query) {
+            setQuery(value);
+        }
+    }, [value]);
+    // Handle query change
+    const handleQueryChange = useCallback((e) => {
+        const newQuery = e.target.value;
+        setQuery(newQuery);
+        onQueryChange?.(newQuery);
+        // Open dropdown when typing
+        if (newQuery.length >= minQueryLength || (showTrendingOnEmpty && newQuery.length === 0)) {
+            setIsDropdownOpen(true);
+        }
+    }, [onQueryChange, minQueryLength, showTrendingOnEmpty]);
+    // Handle search submit
+    const handleSubmit = useCallback((e) => {
+        e?.preventDefault();
+        if (query.trim()) {
+            onSearch?.(query.trim());
+            analytics.trackSearchSubmit(query.trim(), false);
+            setIsDropdownOpen(false);
+        }
+    }, [query, onSearch, analytics]);
+    // Handle suggestion select
+    const handleSuggestionSelect = useCallback((suggestion) => {
+        setQuery(suggestion.query);
+        onQueryChange?.(suggestion.query);
+        onSuggestionSelect?.(suggestion);
+        analytics.trackSuggestionClick({
+            suggestion,
+            position: 0, // Would need to track actual position
+            query,
+        });
+        setIsDropdownOpen(false);
+        // Optionally trigger search
+        onSearch?.(suggestion.query);
+    }, [query, onQueryChange, onSuggestionSelect, onSearch, analytics]);
+    // Handle product click
+    const handleProductClick = useCallback((product) => {
+        onProductClick?.(product);
+        analytics.trackProductClick({
+            product,
+            position: 0,
+            query,
+        });
+        setIsDropdownOpen(false);
+    }, [query, onProductClick, analytics]);
+    // Handle recent search click
+    const handleRecentSearchClick = useCallback((search) => {
+        setQuery(search.query);
+        onQueryChange?.(search.query);
+        analytics.trackRecentSearchClick(search);
+        setIsDropdownOpen(false);
+        onSearch?.(search.query);
+    }, [onQueryChange, onSearch, analytics]);
+    // Handle focus
+    const handleFocus = useCallback(() => {
+        setIsFocused(true);
+        setIsDropdownOpen(true);
+        analytics.trackDropdownOpen(query);
+    }, [query, analytics]);
+    // Handle blur
+    const handleBlur = useCallback(() => {
+        setIsFocused(false);
+        // Delay closing to allow click events on dropdown
+        setTimeout(() => {
+            setIsDropdownOpen(false);
+            analytics.trackDropdownClose(query);
+        }, 200);
+    }, [query, analytics]);
+    // Handle clear
+    const handleClear = useCallback(() => {
+        setQuery('');
+        onQueryChange?.('');
+        inputRef.current?.focus();
+    }, [onQueryChange]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        if (!isDropdownOpen) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                setIsDropdownOpen(true);
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                dropdownRef.current?.navigateNext?.();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                dropdownRef.current?.navigatePrevious?.();
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if ((dropdownRef.current?.getActiveIndex?.() ?? -1) >= 0) {
+                    dropdownRef.current?.selectActive?.();
+                }
+                else {
+                    handleSubmit();
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setIsDropdownOpen(false);
+                inputRef.current?.blur();
+                break;
+        }
+    }, [isDropdownOpen, handleSubmit]);
+    // Expose ref methods
+    useImperativeHandle(ref, () => ({
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        clear: handleClear,
+        getQuery: () => query,
+        setQuery: (newQuery) => {
+            setQuery(newQuery);
+            onQueryChange?.(newQuery);
+        },
+        openDropdown: () => setIsDropdownOpen(true),
+        closeDropdown: () => setIsDropdownOpen(false),
+        navigateNext: () => dropdownRef.current?.navigateNext?.(),
+        navigatePrevious: () => dropdownRef.current?.navigatePrevious?.(),
+        selectCurrent: () => dropdownRef.current?.selectActive?.(),
+    }), [query, handleClear, onQueryChange]);
+    // Render dropdown based on variant
+    const renderDropdown = () => {
+        const commonProps = {
+            query,
+            isOpen: isDropdownOpen,
+            maxSuggestions,
+            minQueryLength,
+            debounceMs,
+            showRecentSearches,
+            classNames,
+            onSuggestionSelect: handleSuggestionSelect,
+            onRecentSearchClick: handleRecentSearchClick,
+            onClose: () => setIsDropdownOpen(false),
+            analyticsTags,
+        };
+        switch (variant) {
+            case 'rich':
+                return (React.createElement(RichQuerySuggestions, { ref: dropdownRef, ...commonProps, includeDropdownRecommendations: includeDropdownRecommendations, includeCategories: true, width: dropdownWidth || '100%', maxHeight: dropdownMaxHeight || '480px' }));
+            case 'federated':
+                return (React.createElement(FederatedDropdown, { ref: dropdownRef, ...commonProps, maxProducts: maxProducts, filteredTabs: filteredTabs, showProducts: true, showBrands: true, showFilteredTabs: !!filteredTabs, onProductClick: handleProductClick, width: dropdownWidth || '800px', maxHeight: dropdownMaxHeight || '600px', includeFacets: includeFacets, includeCategories: includeCategories, includeDropdownRecommendations: includeDropdownRecommendations }));
+            case 'compact':
+                return (React.createElement(QuerySuggestionsDropdown, { ref: dropdownRef, ...commonProps, maxSuggestions: 5, showCounts: false, width: dropdownWidth || '100%' }));
+            case 'classic':
+            default:
+                return (React.createElement(QuerySuggestionsDropdown, { ref: dropdownRef, ...commonProps, width: dropdownWidth || '100%' }));
+        }
+    };
+    return (React.createElement("div", { className: clsx('seekora-search-bar-with-suggestions', classNames.wrapper), style: { ...styles.wrapper, ...style } },
+        React.createElement("form", { onSubmit: handleSubmit },
+            React.createElement("div", { style: {
+                    ...styles.inputWrapper,
+                    ...(isFocused ? styles.inputWrapperFocused : {}),
+                } },
+                React.createElement(SearchIcon, null),
+                React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleQueryChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: classNames.input, style: { ...styles.input, ...inputStyle } }),
+                showClearButton && query && (React.createElement("button", { type: "button", onClick: handleClear, className: classNames.clearButton, style: styles.clearButton, "aria-label": "Clear search" },
+                    React.createElement(ClearIcon, null))),
+                showSearchButton && (React.createElement("button", { type: "submit", className: classNames.button, style: styles.searchButton }, searchButtonText)))),
+        React.createElement("div", { className: classNames.dropdown }, renderDropdown())));
+});
+export default SearchBarWithSuggestions;

package/dist/components/SearchLayout.d.ts

@@ -0,0 +1,35 @@
+/**
+ * SearchLayout Component
+ *
+ * Provides a layout structure for search interfaces with sidebar and main content
+ */
+import React from 'react';
+export interface SearchLayoutTheme {
+    container?: string;
+    sidebar?: string;
+    main?: string;
+    header?: string;
+    footer?: string;
+}
+export interface SearchLayoutProps {
+    /** Content to render in the sidebar (filters, facets, etc.) */
+    sidebar?: React.ReactNode;
+    /** Content to render in the main area (results, etc.) */
+    children: React.ReactNode;
+    /** Header content */
+    header?: React.ReactNode;
+    /** Footer content */
+    footer?: React.ReactNode;
+    /** Sidebar width */
+    sidebarWidth?: string;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: SearchLayoutTheme;
+    /** Show sidebar on mobile */
+    showSidebarOnMobile?: boolean;
+}
+export declare const SearchLayout: React.FC<SearchLayoutProps>;
+//# sourceMappingURL=SearchLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchLayout.d.ts","sourceRoot":"","sources":["../../src/components/SearchLayout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoGpD,CAAC"}

package/dist/components/SearchLayout.js

@@ -0,0 +1,61 @@
+/**
+ * SearchLayout Component
+ *
+ * Provides a layout structure for search interfaces with sidebar and main content
+ */
+import React from 'react';
+import { useSearchContext } from './SearchProvider';
+import { clsx } from 'clsx';
+import { useIsMobile, useResponsivePadding, useResponsiveGap } from '../utils/responsive';
+export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px', className, style, theme: customTheme, showSidebarOnMobile = false, }) => {
+    const { theme } = useSearchContext();
+    const layoutTheme = customTheme || {};
+    const isMobile = useIsMobile();
+    const responsivePadding = useResponsivePadding(parseInt(theme.spacing.medium) || 16);
+    const responsiveGap = useResponsiveGap(parseInt(theme.spacing.large) || 24);
+    return (React.createElement("div", { className: clsx(layoutTheme.container, className), style: {
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh',
+            width: '100%',
+            maxWidth: '100%',
+            backgroundColor: theme.colors.background,
+            ...style,
+        } },
+        header && (React.createElement("header", { className: layoutTheme.header, style: {
+                padding: responsivePadding,
+                borderBottom: `1px solid ${theme.colors.border}`,
+                backgroundColor: theme.colors.background,
+            } }, header)),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flex: 1,
+                width: '100%',
+                maxWidth: '100%',
+                flexDirection: isMobile ? 'column' : 'row',
+                gap: responsiveGap,
+                padding: responsivePadding,
+                backgroundColor: theme.colors.background,
+                color: theme.colors.text,
+                overflow: 'visible',
+            } },
+            sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: layoutTheme.sidebar, style: {
+                    width: isMobile ? '100%' : sidebarWidth,
+                    minWidth: isMobile ? '100%' : sidebarWidth,
+                    flexShrink: 0,
+                } }, sidebar)),
+            React.createElement("main", { className: layoutTheme.main, style: {
+                    flex: 1,
+                    minWidth: 0,
+                    width: '100%',
+                    maxWidth: '100%',
+                    backgroundColor: theme.colors.background,
+                    color: theme.colors.text,
+                    overflow: 'auto',
+                } }, children)),
+        footer && (React.createElement("footer", { className: layoutTheme.footer, style: {
+                padding: responsivePadding,
+                borderTop: `1px solid ${theme.colors.border}`,
+                backgroundColor: theme.colors.background,
+            } }, footer))));
+};

package/dist/components/SearchProvider.d.ts

@@ -0,0 +1,35 @@
+/**
+ * SearchProvider Component
+ *
+ * Provides Seekora client and context to child components.
+ * Supports A/B testing via abTestId/abVariant props.
+ */
+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;
+    /** A/B test experiment ID to include in all analytics events */
+    abTestId?: string;
+    /** A/B test variant to include in all analytics events */
+    abVariant?: string;
+    /** Auto-fetch experiment assignments on mount (default: false) */
+    experiments?: boolean;
+}
+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;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAsB,MAAM,OAAO,CAAC;AACxF,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;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkDxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,kBAQnC,CAAC"}

package/dist/components/SearchProvider.js

@@ -0,0 +1,53 @@
+/**
+ * SearchProvider Component
+ *
+ * Provides Seekora client and context to child components.
+ * Supports A/B testing via abTestId/abVariant props.
+ */
+import React, { createContext, useContext, useMemo, useEffect } 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, abTestId, abVariant, experiments: _experiments, }) => {
+    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,
+            abTestId,
+            abVariant,
+        });
+    }, [client, stateManagerConfig, abTestId, abVariant]);
+    // Update A/B test fields on state manager and SDK client when props change
+    useEffect(() => {
+        if (abTestId !== undefined || abVariant !== undefined) {
+            stateManager.setAbTest(abTestId, abVariant);
+            client.setAbTest(abTestId, abVariant);
+        }
+    }, [stateManager, client, abTestId, abVariant]);
+    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,57 @@
+/**
+ * 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;
+    errorState?: string;
+    pagination?: string;
+    /** Custom min-height class override */
+    minHeight?: string;
+    /** Custom min-width class override */
+    minWidth?: 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;
+    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;
+    /** Minimum height to prevent container collapse when empty (default: '400px') */
+    minHeight?: string;
+    /** Minimum width to prevent container shrinking (default: '100%') */
+    minWidth?: string;
+}
+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,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;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,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;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAoBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqlBtD,CAAC"}