@seekora-ai/ui-sdk-react 1.0.0

package/dist/components/Pagination.js

@@ -0,0 +1,142 @@
+/**
+ * Pagination Component
+ *
+ * Displays pagination controls for search results
+ */
+import React from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+export const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, }) => {
+    const { theme } = useSearchContext();
+    const { results: stateResults, currentPage: stateCurrentPage, setPage } = useSearchState();
+    const paginationTheme = customTheme || {};
+    // 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);
+    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), className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled && paginationTheme.itemDisabled), style: {
+            padding: theme.spacing.small,
+            margin: `0 ${theme.spacing.small}`,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            backgroundColor: isActive ? theme.colors.primary : theme.colors.background,
+            color: isActive ? '#fff' : theme.colors.text,
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+            opacity: isDisabled ? 0.5 : 1,
+            fontSize: theme.typography.fontSize.medium,
+            minWidth: '40px',
+            ...(isActive && {
+                fontWeight: 'bold',
+            }),
+        } }, page));
+    if (totalPages <= 1) {
+        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;
+    };
+    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',
+            } },
+            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.small,
+                        margin: `0 ${theme.spacing.small}`,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                        backgroundColor: theme.colors.background,
+                        color: theme.colors.text,
+                        cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                        opacity: currentPage === 1 ? 0.5 : 1,
+                        fontSize: theme.typography.fontSize.medium,
+                    }, "aria-label": "Previous page" }, "Previous"))),
+            pageNumbers.map((page, index) => {
+                if (page === 'ellipsis') {
+                    return (React.createElement("li", { key: `ellipsis-${index}` },
+                        React.createElement("span", { className: paginationTheme.ellipsis, style: {
+                                padding: theme.spacing.small,
+                                margin: `0 ${theme.spacing.small}`,
+                                color: theme.colors.text,
+                                fontSize: theme.typography.fontSize.medium,
+                            } }, "...")));
+                }
+                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.small,
+                        margin: `0 ${theme.spacing.small}`,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                        backgroundColor: theme.colors.background,
+                        color: theme.colors.text,
+                        cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                        opacity: currentPage === totalPages ? 0.5 : 1,
+                        fontSize: theme.typography.fontSize.medium,
+                    }, "aria-label": "Next page" }, "Next"))))));
+};

package/dist/components/QuerySuggestions.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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;
+    loadingState?: 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;
+    renderLoading?: () => 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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,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,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,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,CAwK5D,CAAC"}

package/dist/components/QuerySuggestions.js

@@ -0,0 +1,86 @@
+/**
+ * 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, renderLoading, 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 defaultRenderLoading = () => (React.createElement("div", { style: {
+            padding: theme.spacing.medium,
+            textAlign: 'center',
+            color: theme.colors.text,
+        } }, "Loading suggestions..."));
+    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 (loading) {
+        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)),
+            renderLoading ? renderLoading() : defaultRenderLoading()));
+    }
+    if (error || 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,86 @@
+/**
+ * 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 loading state */
+    showLoading?: 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 loading state */
+    renderLoading?: () => 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":"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"}