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

package/dist/components/Pagination.js

@@ -0,0 +1,298 @@
+/**
+ * Pagination Component
+ *
+ * Displays pagination controls for search results.
+ * Supports three display variants: numbered, load-more, and simple.
+ *
+ * CSS Variables (applied to the container element):
+ *   --seekora-pagination-bg
+ *   --seekora-pagination-color
+ *   --seekora-pagination-active-bg
+ *   --seekora-pagination-active-color
+ *   --seekora-pagination-border
+ *   --seekora-pagination-radius
+ */
+import React from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+import { useIsMobile } from '../utils/responsive';
+/** Size-specific style tokens (responsive) */
+const getSizeTokens = (size, isMobile) => {
+    if (isMobile) {
+        // Larger touch targets on mobile
+        return {
+            small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '40px', minHeight: '40px' },
+            medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '44px', minHeight: '44px' },
+            large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px', minHeight: '48px' },
+        }[size];
+    }
+    return {
+        small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '32px', minHeight: '32px' },
+        medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '40px', minHeight: '40px' },
+        large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px', minHeight: '48px' },
+    }[size];
+};
+export const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages: maxPagesProp = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, variant = 'numbered', loadMoreText = 'Load More', size = 'medium', showPageInfo, previousLabel = 'Previous', nextLabel = 'Next', }) => {
+    const { theme } = useSearchContext();
+    const { results: stateResults, currentPage: stateCurrentPage, setPage } = useSearchState();
+    const paginationTheme = customTheme || {};
+    const isMobile = useIsMobile();
+    // Responsive maxPages - show fewer pages on mobile
+    const maxPages = isMobile ? Math.min(maxPagesProp, 5) : maxPagesProp;
+    // Use results from prop if provided, otherwise from state manager
+    const results = resultsProp || stateResults;
+    // Use currentPage from prop if provided, otherwise from state manager
+    const currentPage = currentPageProp || stateCurrentPage;
+    const res = results;
+    const itemsPerPage = itemsPerPageProp
+        || res?.perPage
+        || res?.data?.per_page
+        || res?.data?.data?.per_page
+        || 20;
+    const totalResults = res?.totalResults
+        || res?.data?.total_results
+        || res?.data?.data?.total_results
+        || 0;
+    const totalPages = totalPagesProp
+        || res?.totalPages
+        || res?.data?.total_pages
+        || res?.data?.data?.total_pages
+        || Math.ceil(totalResults / itemsPerPage);
+    // Resolve whether to show page info text
+    const resolvedShowPageInfo = showPageInfo !== undefined
+        ? showPageInfo
+        : variant === 'simple';
+    // Size tokens (responsive)
+    const sizeTokens = getSizeTokens(size, isMobile);
+    // CSS variable aware helpers — allow overrides via custom properties
+    const cssVarBg = 'var(--seekora-pagination-bg, ' + theme.colors.background + ')';
+    const cssVarColor = 'var(--seekora-pagination-color, ' + theme.colors.text + ')';
+    const cssVarActiveBg = 'var(--seekora-pagination-active-bg, ' + theme.colors.primary + ')';
+    const cssVarActiveColor = 'var(--seekora-pagination-active-color, #fff)';
+    const cssVarBorder = 'var(--seekora-pagination-border, ' + theme.colors.border + ')';
+    const cssVarRadius = 'var(--seekora-pagination-radius, ' + (typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium) + ')';
+    const handlePageChange = (page) => {
+        if (page < 1 || page > totalPages || page === currentPage)
+            return;
+        // Update state manager (automatically triggers search)
+        setPage(page);
+        // Call callback for backwards compatibility
+        if (onPageChange) {
+            onPageChange(page);
+        }
+    };
+    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => !isDisabled && handlePageChange(page), "aria-current": isActive ? 'page' : undefined, "aria-label": `Page ${page}`, className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled && paginationTheme.itemDisabled), style: {
+            padding: theme.spacing[sizeTokens.paddingKey],
+            margin: isMobile ? `0 4px` : `0 ${theme.spacing.small}`,
+            border: `1px solid ${cssVarBorder}`,
+            borderRadius: cssVarRadius,
+            backgroundColor: isActive ? cssVarActiveBg : cssVarBg,
+            color: isActive ? cssVarActiveColor : cssVarColor,
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+            opacity: isDisabled ? 0.5 : 1,
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            minWidth: sizeTokens.minWidth,
+            minHeight: sizeTokens.minHeight,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            ...(isActive && {
+                fontWeight: 'bold',
+            }),
+        } }, page));
+    if (totalPages <= 1 && variant !== 'load-more') {
+        return null;
+    }
+    // For load-more, hide when there are no more pages to load
+    if (variant === 'load-more' && currentPage >= totalPages) {
+        return null;
+    }
+    // Calculate page range to display
+    const getPageNumbers = () => {
+        const pages = [];
+        const halfRange = Math.floor(maxPages / 2);
+        let startPage = Math.max(1, currentPage - halfRange);
+        let endPage = Math.min(totalPages, currentPage + halfRange);
+        // Adjust if we're near the beginning or end
+        if (currentPage <= halfRange) {
+            endPage = Math.min(maxPages, totalPages);
+        }
+        if (currentPage >= totalPages - halfRange) {
+            startPage = Math.max(1, totalPages - maxPages + 1);
+        }
+        if (showFirstLast && startPage > 1) {
+            pages.push(1);
+            if (startPage > 2) {
+                pages.push('ellipsis');
+            }
+        }
+        for (let i = startPage; i <= endPage; i++) {
+            pages.push(i);
+        }
+        if (showFirstLast && endPage < totalPages) {
+            if (endPage < totalPages - 1) {
+                pages.push('ellipsis');
+            }
+            pages.push(totalPages);
+        }
+        return pages;
+    };
+    // ── Page info element ──────────────────────────────────────────────
+    const pageInfoElement = resolvedShowPageInfo ? (React.createElement("span", { className: clsx(paginationTheme.pageInfo), style: {
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            color: cssVarColor,
+            padding: `0 ${theme.spacing.small}`,
+            whiteSpace: 'nowrap',
+        }, "aria-live": "polite" },
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages)) : null;
+    // ── Load More variant ──────────────────────────────────────────────
+    if (variant === 'load-more') {
+        const remaining = Math.max(0, totalResults - currentPage * itemsPerPage);
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.loadMoreButton), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.large}`,
+                    border: 'none',
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarActiveBg,
+                    color: cssVarActiveColor,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                    minWidth: sizeTokens.minWidth,
+                }, "aria-label": remaining > 0 ? `${loadMoreText} (${remaining} remaining)` : loadMoreText },
+                loadMoreText,
+                remaining > 0 && (React.createElement("span", { className: clsx(paginationTheme.loadMoreText), style: {
+                        marginLeft: theme.spacing.small,
+                        opacity: 0.85,
+                        fontSize: theme.typography.fontSize.small,
+                    } },
+                    "(",
+                    remaining,
+                    " remaining)"))),
+            pageInfoElement));
+    }
+    // ── Simple variant ─────────────────────────────────────────────────
+    if (variant === 'simple') {
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, paginationTheme.simpleContainer, className), style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: theme.spacing.medium,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.simpleButton, currentPage === 1 && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === 1 ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Previous page" }, previousLabel),
+            React.createElement("span", { className: clsx(paginationTheme.simpleText, paginationTheme.pageInfo), style: {
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    color: cssVarColor,
+                    whiteSpace: 'nowrap',
+                }, "aria-live": "polite" },
+                "Page ",
+                currentPage,
+                " of ",
+                totalPages),
+            React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.simpleButton, currentPage === totalPages && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === totalPages ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Next page" }, nextLabel)));
+    }
+    // ── Numbered variant (default — original behavior) ─────────────────
+    const pageNumbers = getPageNumbers();
+    return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: style, "aria-label": "Pagination" },
+        React.createElement("ul", { className: paginationTheme.list, style: {
+                listStyle: 'none',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 0,
+                margin: 0,
+                flexWrap: 'wrap',
+            }, tabIndex: 0, onKeyDown: (e) => {
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    handlePageChange(currentPage - 1);
+                }
+                else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    handlePageChange(currentPage + 1);
+                }
+                else if (e.key === 'Home') {
+                    e.preventDefault();
+                    handlePageChange(1);
+                }
+                else if (e.key === 'End') {
+                    e.preventDefault();
+                    handlePageChange(totalPages);
+                }
+            } },
+            showPrevNext && (React.createElement("li", null,
+                React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.item, currentPage === 1 && paginationTheme.itemDisabled), style: {
+                        padding: theme.spacing[sizeTokens.paddingKey],
+                        margin: `0 ${theme.spacing.small}`,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
+                        cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                        opacity: currentPage === 1 ? 0.5 : 1,
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Previous page" }, previousLabel))),
+            pageNumbers.map((page, index) => {
+                if (page === 'ellipsis') {
+                    return (React.createElement("li", { key: `ellipsis-${index}` },
+                        React.createElement("span", { className: paginationTheme.ellipsis, style: {
+                                padding: theme.spacing[sizeTokens.paddingKey],
+                                margin: `0 ${theme.spacing.small}`,
+                                color: cssVarColor,
+                                fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                            } }, "...")));
+                }
+                const isActive = page === currentPage;
+                const isDisabled = false;
+                return (React.createElement("li", { key: page }, renderPageButton
+                    ? renderPageButton(page, isActive, isDisabled)
+                    : defaultRenderPageButton(page, isActive, isDisabled)));
+            }),
+            showPrevNext && (React.createElement("li", null,
+                React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.item, currentPage === totalPages && paginationTheme.itemDisabled), style: {
+                        padding: theme.spacing[sizeTokens.paddingKey],
+                        margin: `0 ${theme.spacing.small}`,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
+                        cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                        opacity: currentPage === totalPages ? 0.5 : 1,
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Next page" }, nextLabel))),
+            resolvedShowPageInfo && (React.createElement("li", { style: { marginLeft: theme.spacing.small } }, pageInfoElement)))));
+};

package/dist/components/QuerySuggestions.d.ts

@@ -0,0 +1,36 @@
+/**
+ * QuerySuggestions Component
+ *
+ * Standalone component for displaying query suggestions
+ */
+import React from 'react';
+export interface SuggestionItem {
+    query: string;
+    count?: number;
+    metadata?: Record<string, any>;
+}
+export interface QuerySuggestionsTheme {
+    container?: string;
+    title?: string;
+    suggestionsList?: string;
+    suggestionItem?: string;
+    suggestionItemHover?: string;
+    suggestionItemActive?: string;
+    emptyState?: string;
+}
+export interface QuerySuggestionsProps {
+    query?: string;
+    maxSuggestions?: number;
+    debounceMs?: number;
+    minQueryLength?: number;
+    onSuggestionClick?: (suggestion: string) => void;
+    renderSuggestion?: (suggestion: SuggestionItem, index: number) => React.ReactNode;
+    renderEmpty?: () => React.ReactNode;
+    showTitle?: boolean;
+    title?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: QuerySuggestionsTheme;
+}
+export declare const QuerySuggestions: React.FC<QuerySuggestionsProps>;
+//# sourceMappingURL=QuerySuggestions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuerySuggestions.d.ts","sourceRoot":"","sources":["../../src/components/QuerySuggestions.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAClF,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsI5D,CAAC"}

package/dist/components/QuerySuggestions.js

@@ -0,0 +1,71 @@
+/**
+ * QuerySuggestions Component
+ *
+ * Standalone component for displaying query suggestions
+ */
+import React, { useState } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useQuerySuggestions } from '../hooks/useQuerySuggestions';
+import { clsx } from 'clsx';
+export const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, minQueryLength = 2, onSuggestionClick, renderSuggestion, renderEmpty, showTitle = false, title = 'Suggestions', className, style, theme: customTheme, }) => {
+    const { client, theme } = useSearchContext();
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const { suggestions, loading, error } = useQuerySuggestions({
+        client,
+        query,
+        enabled: query.length >= minQueryLength,
+        debounceMs,
+        maxSuggestions,
+    });
+    const displayedSuggestions = suggestions.slice(0, maxSuggestions);
+    const suggestionsTheme = customTheme || {};
+    const defaultRenderSuggestion = (suggestion, index) => (React.createElement("div", { key: index },
+        React.createElement("span", null, suggestion.query),
+        suggestion.count !== undefined && (React.createElement("span", { style: { opacity: 0.6, marginLeft: theme.spacing.small } },
+            "(",
+            suggestion.count,
+            ")"))));
+    const defaultRenderEmpty = () => (React.createElement("div", { style: {
+            padding: theme.spacing.medium,
+            textAlign: 'center',
+            color: theme.colors.text,
+            opacity: 0.6,
+        } }, "No suggestions available"));
+    const handleSuggestionClick = (suggestion) => {
+        if (onSuggestionClick) {
+            onSuggestionClick(suggestion.query);
+        }
+    };
+    if (query.length < minQueryLength) {
+        return null;
+    }
+    if (error || (!loading && displayedSuggestions.length === 0)) {
+        return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
+            showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
+                    fontSize: theme.typography.fontSize.large,
+                    fontWeight: 'bold',
+                    marginBottom: theme.spacing.medium,
+                    color: theme.colors.text,
+                } }, title)),
+            renderEmpty ? renderEmpty() : defaultRenderEmpty()));
+    }
+    const renderFn = renderSuggestion || defaultRenderSuggestion;
+    return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
+        showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
+                fontSize: theme.typography.fontSize.large,
+                fontWeight: 'bold',
+                marginBottom: theme.spacing.medium,
+                color: theme.colors.text,
+            } }, title)),
+        React.createElement("div", { className: suggestionsTheme.suggestionsList }, displayedSuggestions.map((suggestion, index) => {
+            const isSelected = index === selectedIndex;
+            return (React.createElement("div", { key: index, className: clsx(suggestionsTheme.suggestionItem, isSelected && suggestionsTheme.suggestionItemActive), onClick: () => handleSuggestionClick(suggestion), onMouseEnter: () => setSelectedIndex(index), onMouseLeave: () => setSelectedIndex(-1), style: {
+                    padding: theme.spacing.medium,
+                    cursor: 'pointer',
+                    borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                    transition: 'background-color 0.2s ease',
+                    backgroundColor: isSelected ? theme.colors.hover : 'transparent',
+                    marginBottom: index < displayedSuggestions.length - 1 ? theme.spacing.small : 0,
+                } }, renderFn(suggestion, index)));
+        }))));
+};

package/dist/components/QuerySuggestionsDropdown.d.ts

@@ -0,0 +1,82 @@
+/**
+ * QuerySuggestionsDropdown Component
+ *
+ * Classic dropdown variant with:
+ * - Highlighted matches
+ * - Keyboard navigation
+ * - Recent searches
+ * - Customizable styling
+ * - Analytics tracking
+ * - Accessibility support
+ */
+import React from 'react';
+import type { SuggestionItem, RecentSearch, QuerySuggestionsClassNames, HighlightConfig, KeyboardNavConfig, AnimationConfig, QuerySuggestionsEventHandlers } from '@seekora-ai/ui-sdk-types';
+export interface QuerySuggestionsDropdownProps extends QuerySuggestionsEventHandlers {
+    /** Current query string */
+    query: string;
+    /** Whether the dropdown is visible */
+    isOpen?: boolean;
+    /** Maximum suggestions to display */
+    maxSuggestions?: number;
+    /** Minimum query length to trigger suggestions */
+    minQueryLength?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Show recent searches section */
+    showRecentSearches?: boolean;
+    /** Maximum recent searches to display */
+    maxRecentSearches?: number;
+    /** Show suggestion counts */
+    showCounts?: boolean;
+    /** Show empty state when no results */
+    showEmptyState?: boolean;
+    /** Highlight configuration */
+    highlight?: HighlightConfig;
+    /** Keyboard navigation configuration */
+    keyboardNav?: KeyboardNavConfig;
+    /** Animation configuration */
+    animation?: AnimationConfig;
+    /** Custom class names */
+    classNames?: QuerySuggestionsClassNames;
+    /** Custom CSS styles */
+    style?: React.CSSProperties;
+    /** Custom render for suggestion item */
+    renderSuggestion?: (suggestion: SuggestionItem, index: number, isActive: boolean, highlight: (text: string) => React.ReactNode) => React.ReactNode;
+    /** Custom render for recent search item */
+    renderRecentSearch?: (search: RecentSearch, index: number, isActive: boolean) => React.ReactNode;
+    /** Custom render for empty state */
+    renderEmpty?: () => React.ReactNode;
+    /** Custom footer content */
+    footer?: React.ReactNode;
+    /** Position of dropdown */
+    position?: 'absolute' | 'fixed';
+    /** Dropdown width */
+    width?: string | number;
+    /** Z-index for dropdown */
+    zIndex?: number;
+    /** Input element ref for positioning */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** Close on click outside */
+    closeOnClickOutside?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+    /** ARIA label */
+    ariaLabel?: string;
+}
+export interface QuerySuggestionsDropdownRef {
+    /** Select the currently active item */
+    selectActive: () => void;
+    /** Navigate to next item */
+    navigateNext: () => void;
+    /** Navigate to previous item */
+    navigatePrevious: () => void;
+    /** Reset selection */
+    resetSelection: () => void;
+    /** Get active index */
+    getActiveIndex: () => number;
+    /** Get total items count */
+    getTotalItems: () => number;
+}
+export declare const QuerySuggestionsDropdown: React.ForwardRefExoticComponent<QuerySuggestionsDropdownProps & React.RefAttributes<QuerySuggestionsDropdownRef>>;
+export default QuerySuggestionsDropdown;
+//# sourceMappingURL=QuerySuggestionsDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuerySuggestionsDropdown.d.ts","sourceRoot":"","sources":["../../src/components/QuerySuggestionsDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,0BAA0B,EAC1B,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,6BAA6B,EAC9B,MAAM,0BAA0B,CAAC;AAuBlC,MAAM,WAAW,6BAA8B,SAAQ,6BAA6B;IAClF,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,wCAAwC;IACxC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,yBAAyB;IACzB,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC,wBAAwB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CACjB,UAAU,EAAE,cAAc,EAC1B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,KACzC,KAAK,CAAC,SAAS,CAAC;IACrB,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,CACnB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,KACd,KAAK,CAAC,SAAS,CAAC;IACrB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC7C,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0BAA0B;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,2BAA2B;IAC1C,uCAAuC;IACvC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,4BAA4B;IAC5B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB;IACvB,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,4BAA4B;IAC5B,aAAa,EAAE,MAAM,MAAM,CAAC;CAC7B;AAsJD,eAAO,MAAM,wBAAwB,mHAqZnC,CAAC;AAEH,eAAe,wBAAwB,CAAC"}