@seekora-ai/ui-sdk-react 1.0.0

package/dist/components/SearchBar.js

@@ -0,0 +1,217 @@
+/**
+ * SearchBar Component
+ *
+ * Interactive search input component with query suggestions support
+ */
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { useQuerySuggestions } from '../hooks/useQuerySuggestions';
+import { log } from '@seekora-ai/ui-sdk-core';
+import { clsx } from 'clsx';
+export const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, renderSuggestion, renderLoading, }) => {
+    const { client, theme, enableAnalytics, autoTrackSearch } = useSearchContext();
+    const { query, setQuery, search: triggerSearch, results, loading: searchLoading, error: searchError } = useSearchState();
+    const [isFocused, setIsFocused] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const isSearchingRef = useRef(false); // Flag to prevent blur handler from interfering
+    const { suggestions, loading: suggestionsLoading } = useQuerySuggestions({
+        client,
+        query,
+        enabled: showSuggestions && query.length >= minQueryLength,
+        debounceMs,
+        maxSuggestions,
+    });
+    const displayedSuggestions = suggestions.slice(0, maxSuggestions);
+    // Expose search state to parent
+    useEffect(() => {
+        if (onSearchStateChange) {
+            onSearchStateChange({
+                results,
+                loading: searchLoading,
+                error: searchError,
+            });
+        }
+    }, [results, searchLoading, searchError, onSearchStateChange]);
+    useEffect(() => {
+        if (results && onSearch) {
+            onSearch(query, results);
+        }
+    }, [results, query, onSearch]);
+    useEffect(() => {
+        if (onQueryChange) {
+            onQueryChange(query);
+        }
+    }, [query, onQueryChange]);
+    const handleSearch = useCallback(async (searchQuery) => {
+        // Allow empty queries - use empty string for search
+        const query = searchQuery.trim();
+        log.info('SearchBar: Triggering search', { query, originalQuery: searchQuery, isEmpty: !query });
+        // Set flag to prevent blur handler from interfering
+        isSearchingRef.current = true;
+        // Close suggestions first
+        setIsFocused(false);
+        setSelectedIndex(-1);
+        // Update query in state manager (don't trigger search yet - we'll do it explicitly)
+        setQuery(query, false);
+        // Explicitly trigger search immediately (bypass debounce for Enter key)
+        log.info('SearchBar: Calling search() directly');
+        await triggerSearch();
+        // Blur after a small delay to ensure search is triggered
+        setTimeout(() => {
+            inputRef.current?.blur();
+            // Reset flag after blur
+            setTimeout(() => {
+                isSearchingRef.current = false;
+            }, 50);
+        }, 100);
+    }, [setQuery, triggerSearch]);
+    const handleSuggestionSelect = useCallback((suggestion) => {
+        log.verbose('SearchBar: Suggestion selected', { suggestion });
+        setSelectedIndex(-1);
+        setIsFocused(false);
+        inputRef.current?.blur();
+        if (onSuggestionSelect) {
+            onSuggestionSelect(suggestion);
+        }
+        // Update query and trigger search
+        setQuery(suggestion);
+    }, [onSuggestionSelect, setQuery]);
+    const handleInputChange = useCallback((e) => {
+        const value = e.target.value;
+        // Update query in state manager but don't trigger search immediately
+        // Search will be triggered on Enter or suggestion select
+        setQuery(value, false); // false = don't trigger search immediately
+        setSelectedIndex(-1);
+    }, [setQuery]);
+    const handleKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                if (showSuggestions && displayedSuggestions.length > 0) {
+                    e.preventDefault();
+                    setSelectedIndex((prev) => prev < displayedSuggestions.length - 1 ? prev + 1 : prev);
+                }
+                break;
+            case 'ArrowUp':
+                if (showSuggestions && displayedSuggestions.length > 0) {
+                    e.preventDefault();
+                    setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1));
+                }
+                break;
+            case 'Enter':
+                e.preventDefault();
+                e.stopPropagation();
+                // Only select suggestion if one is explicitly selected (selectedIndex >= 0)
+                // Otherwise, search whatever is in the text box
+                if (showSuggestions && displayedSuggestions.length > 0 && selectedIndex >= 0 && selectedIndex < displayedSuggestions.length) {
+                    // Select suggestion if one is highlighted
+                    handleSuggestionSelect(displayedSuggestions[selectedIndex].query);
+                }
+                else {
+                    // Search whatever is in the text box (even if suggestions are shown)
+                    // Allow empty search - will use "*" for wildcard
+                    const currentValue = inputRef.current?.value || query;
+                    handleSearch(currentValue);
+                }
+                break;
+            case 'Escape':
+                setIsFocused(false);
+                inputRef.current?.blur();
+                break;
+        }
+    }, [displayedSuggestions, selectedIndex, query, showSuggestions, handleSearch, handleSuggestionSelect]);
+    const handleFocus = useCallback(() => {
+        setIsFocused(true);
+    }, []);
+    const handleBlur = useCallback((e) => {
+        // Don't interfere if we're explicitly triggering a search
+        if (isSearchingRef.current) {
+            return;
+        }
+        // Delay to allow click events on suggestions to fire
+        setTimeout(() => {
+            if (!containerRef.current?.contains(document.activeElement)) {
+                setIsFocused(false);
+                setSelectedIndex(-1);
+            }
+        }, 200);
+    }, []);
+    const defaultRenderSuggestion = (suggestion, index) => (React.createElement("div", { key: index }, suggestion));
+    const defaultRenderLoading = () => (React.createElement("div", { style: { padding: theme.spacing.medium, textAlign: 'center' } }, "Loading suggestions..."));
+    const searchBarTheme = customTheme || {};
+    const isLoading = suggestionsLoading || searchLoading;
+    // Only show suggestions list if:
+    // 1. Input is focused
+    // 2. Suggestions are enabled
+    // 3. Query is long enough
+    // 4. AND (we have suggestions to show OR we're currently loading suggestions)
+    const hasSuggestions = displayedSuggestions.length > 0;
+    const showSuggestionsList = isFocused && showSuggestions && query.length >= minQueryLength && (hasSuggestions || isLoading);
+    // Get processing time from results
+    const res = results;
+    const processingTime = res?.processingTimeMS
+        || res?.data?.processingTimeMS
+        || res?.data?.data?.processingTimeMS;
+    return (React.createElement("div", { ref: containerRef, className: clsx(searchBarTheme.container, className), style: {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            ...style,
+        } },
+        React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, className: clsx(searchBarTheme.input, isFocused && searchBarTheme.inputFocused), style: {
+                flex: 1,
+                padding: theme.spacing.medium,
+                fontSize: theme.typography.fontSize.medium,
+                fontFamily: theme.typography.fontFamily,
+                backgroundColor: theme.colors.background,
+                color: theme.colors.text,
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: isFocused ? theme.colors.focus : theme.colors.border,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                outline: 'none',
+                ...(isFocused && {
+                    boxShadow: theme.shadows.small,
+                }),
+            } }),
+        processingTime !== undefined && (React.createElement("span", { style: {
+                marginLeft: theme.spacing.small,
+                fontSize: theme.typography.fontSize.small,
+                color: theme.colors.text,
+                opacity: 0.7,
+                whiteSpace: 'nowrap',
+            } },
+            processingTime,
+            "ms")),
+        showSuggestionsList && (React.createElement("div", { className: searchBarTheme.suggestionsContainer, style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
+                marginTop: theme.spacing.small,
+                backgroundColor: theme.colors.background,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                boxShadow: theme.shadows.medium,
+                maxHeight: '400px',
+                overflowY: 'auto',
+                zIndex: 1000,
+            } },
+            isLoading && (renderLoading ? renderLoading() : defaultRenderLoading()),
+            !isLoading && displayedSuggestions.length > 0 && (React.createElement(React.Fragment, null, displayedSuggestions.map((suggestion, index) => {
+                const isSelected = index === selectedIndex;
+                const renderFn = renderSuggestion || defaultRenderSuggestion;
+                return (React.createElement("div", { key: index, className: clsx(searchBarTheme.suggestionItem, isSelected && searchBarTheme.suggestionItemActive), onClick: () => handleSuggestionSelect(suggestion.query), onMouseEnter: () => setSelectedIndex(index), style: {
+                        padding: theme.spacing.medium,
+                        cursor: 'pointer',
+                        backgroundColor: isSelected
+                            ? theme.colors.hover
+                            : 'transparent',
+                        color: theme.colors.text,
+                        transition: theme.transitions?.fast || '150ms ease-in-out',
+                    } }, renderFn(suggestion.query, index)));
+            }))),
+            !isLoading && displayedSuggestions.length === 0 && query.length >= minQueryLength && (React.createElement("div", { style: { padding: theme.spacing.medium, textAlign: 'center', color: theme.colors.textSecondary } }, "No suggestions found"))))));
+};

package/dist/components/SearchBarWithSuggestions.d.ts

@@ -0,0 +1,99 @@
+/**
+ * SearchBarWithSuggestions Component
+ *
+ * Integrated search bar with query suggestions dropdown.
+ * Combines SearchBar with any of the suggestion dropdown variants.
+ */
+import React from 'react';
+import type { SuggestionItem, ProductItem, QuerySuggestionsVariant, QuerySuggestionsClassNames } from '@seekora-ai/ui-sdk-types';
+export interface SearchBarWithSuggestionsProps {
+    /** Dropdown variant to use */
+    variant?: QuerySuggestionsVariant;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Initial query value */
+    initialQuery?: string;
+    /** Controlled query value */
+    value?: string;
+    /** Callback when query changes */
+    onQueryChange?: (query: string) => void;
+    /** Callback when search is submitted */
+    onSearch?: (query: string) => void;
+    /** Callback when suggestion is selected */
+    onSuggestionSelect?: (suggestion: SuggestionItem) => void;
+    /** Callback when product is clicked */
+    onProductClick?: (product: ProductItem) => void;
+    /** Show search button */
+    showSearchButton?: boolean;
+    /** Search button text */
+    searchButtonText?: string;
+    /** Show clear button */
+    showClearButton?: boolean;
+    /** Auto focus on mount */
+    autoFocus?: boolean;
+    /** Min query length for suggestions */
+    minQueryLength?: number;
+    /** Max suggestions to show */
+    maxSuggestions?: number;
+    /** Debounce delay (ms) */
+    debounceMs?: number;
+    /** Show recent searches */
+    showRecentSearches?: boolean;
+    /** Show trending when empty */
+    showTrendingOnEmpty?: boolean;
+    /** Include dropdown recommendations */
+    includeDropdownRecommendations?: boolean;
+    /** Filtered tabs config */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Enable analytics tracking */
+    enableAnalytics?: boolean;
+    /** Analytics tags */
+    analyticsTags?: string[];
+    /** Dropdown width */
+    dropdownWidth?: string | number;
+    /** Dropdown max height */
+    dropdownMaxHeight?: string | number;
+    /** Custom class names */
+    classNames?: {
+        wrapper?: string;
+        input?: string;
+        button?: string;
+        clearButton?: string;
+        dropdown?: string;
+    } & QuerySuggestionsClassNames;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Input style */
+    inputStyle?: React.CSSProperties;
+    /** ARIA label */
+    ariaLabel?: string;
+}
+export interface SearchBarWithSuggestionsRef {
+    /** Focus the input */
+    focus: () => void;
+    /** Blur the input */
+    blur: () => void;
+    /** Clear the input */
+    clear: () => void;
+    /** Get current query */
+    getQuery: () => string;
+    /** Set query value */
+    setQuery: (query: string) => void;
+    /** Open dropdown */
+    openDropdown: () => void;
+    /** Close dropdown */
+    closeDropdown: () => void;
+    /** Navigate to next suggestion */
+    navigateNext: () => void;
+    /** Navigate to previous suggestion */
+    navigatePrevious: () => void;
+    /** Select current suggestion */
+    selectCurrent: () => void;
+}
+export declare const SearchBarWithSuggestions: React.ForwardRefExoticComponent<SearchBarWithSuggestionsProps & React.RefAttributes<SearchBarWithSuggestionsRef>>;
+export default SearchBarWithSuggestions;
+//# sourceMappingURL=SearchBarWithSuggestions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBarWithSuggestions.d.ts","sourceRoot":"","sources":["../../src/components/SearchBarWithSuggestions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,uBAAuB,EAEvB,0BAA0B,EAC3B,MAAM,0BAA0B,CAAC;AAMlC,MAAM,WAAW,6BAA6B;IAC5C,8BAA8B;IAC9B,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1D,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,+BAA+B;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uCAAuC;IACvC,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,2BAA2B;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,gCAAgC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,yBAAyB;IACzB,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,0BAA0B,CAAC;IAC/B,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,kBAAkB;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,2BAA2B;IAC1C,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qBAAqB;IACrB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,wBAAwB;IACxB,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,sBAAsB;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oBAAoB;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,qBAAqB;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kCAAkC;IAClC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,sCAAsC;IACtC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gCAAgC;IAChC,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AA8FD,eAAO,MAAM,wBAAwB,mHA+TpC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

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-primary, #3b82f6)',
+        boxShadow: '0 0 0 3px 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: '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 = 'Search...', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, 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, filteredTabs: filteredTabs, showProducts: true, showBrands: true, showFilteredTabs: !!filteredTabs, onProductClick: handleProductClick, width: dropdownWidth || '800px', maxHeight: dropdownMaxHeight || '600px' }));
+            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;AAInD,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,CAkGpD,CAAC"}