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

package/dist/components/InfiniteHits.d.ts

@@ -0,0 +1,51 @@
+/**
+ * InfiniteHits Component
+ *
+ * Displays search results with infinite scroll or "Show More" button
+ * Accumulates results as user loads more pages
+ */
+import React from 'react';
+import type { ResultItem, FieldMapping } from '@seekora-ai/ui-sdk-types';
+export interface InfiniteHitsTheme {
+    root?: string;
+    list?: string;
+    item?: string;
+    loadMore?: string;
+    loadMoreDisabled?: string;
+    empty?: string;
+    sentinel?: string;
+}
+export interface InfiniteHitsProps {
+    /** Custom render function for each hit */
+    renderHit?: (hit: ResultItem, index: number) => React.ReactNode;
+    /** Custom render for empty state */
+    renderEmpty?: () => React.ReactNode;
+    /** Custom render for "Show More" button */
+    renderShowMore?: (props: {
+        isLoading: boolean;
+        isLastPage: boolean;
+        onClick: () => void;
+    }) => React.ReactNode;
+    /** Whether to show the "Show More" button (default: true) */
+    showMoreButton?: boolean;
+    /** Whether to use infinite scroll with IntersectionObserver (default: false) */
+    useInfiniteScroll?: boolean;
+    /** Threshold for IntersectionObserver (default: 0.1) */
+    scrollThreshold?: number;
+    /** Field mapping for extracting data from hits */
+    fieldMapping?: FieldMapping;
+    /** Text for "Show More" button */
+    showMoreLabel?: string;
+    /** Callback when a hit is clicked */
+    onHitClick?: (hit: ResultItem, index: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: InfiniteHitsTheme;
+    /** Whether to sync with SearchStateManager (default: true) */
+    syncWithState?: boolean;
+}
+export declare const InfiniteHits: React.FC<InfiniteHitsProps>;
+//# sourceMappingURL=InfiniteHits.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteHits.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteHits.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;QACpB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,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,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4QpD,CAAC"}

package/dist/components/InfiniteHits.js

@@ -0,0 +1,173 @@
+/**
+ * InfiniteHits Component
+ *
+ * Displays search results with infinite scroll or "Show More" button
+ * Accumulates results as user loads more pages
+ */
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+export const InfiniteHits = ({ renderHit, renderEmpty, renderShowMore, showMoreButton = true, useInfiniteScroll = false, scrollThreshold = 0.1, fieldMapping, showMoreLabel = 'Show more', onHitClick, className, style, theme: customTheme, syncWithState = true, }) => {
+    const { theme, stateManager } = useSearchContext();
+    const { results, loading, currentPage, setPage } = useSearchState();
+    const infiniteHitsTheme = customTheme || {};
+    // Accumulated hits across pages
+    const [accumulatedHits, setAccumulatedHits] = useState([]);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const sentinelRef = useRef(null);
+    const prevPageRef = useRef(currentPage);
+    // Extract hits from results
+    const extractHits = useCallback((response) => {
+        if (!response)
+            return [];
+        if (response.results)
+            return response.results;
+        if (response.hits)
+            return response.hits;
+        if (Array.isArray(response))
+            return response;
+        return [];
+    }, []);
+    // Get current hits
+    const currentHits = useMemo(() => extractHits(results), [results, extractHits]);
+    // Calculate if we're on the last page
+    const totalResults = results?.totalResults || results?.found || 0;
+    const itemsPerPage = stateManager.getState().itemsPerPage || 10;
+    const totalPages = Math.ceil(totalResults / itemsPerPage);
+    const isLastPage = currentPage >= totalPages;
+    // Accumulate hits when results change
+    useEffect(() => {
+        if (!currentHits.length)
+            return;
+        if (currentPage === 1) {
+            // Reset accumulated hits on new search
+            setAccumulatedHits(currentHits);
+        }
+        else if (currentPage > prevPageRef.current) {
+            // Append new hits
+            setAccumulatedHits(prev => [...prev, ...currentHits]);
+        }
+        prevPageRef.current = currentPage;
+        setIsLoadingMore(false);
+    }, [currentHits, currentPage]);
+    // Reset when query changes
+    useEffect(() => {
+        if (currentPage === 1) {
+            setAccumulatedHits(currentHits);
+            prevPageRef.current = 1;
+        }
+    }, [results]);
+    // Handle "Show More" click
+    const handleShowMore = useCallback(() => {
+        if (isLastPage || loading || isLoadingMore)
+            return;
+        setIsLoadingMore(true);
+        if (syncWithState) {
+            setPage(currentPage + 1);
+        }
+    }, [isLastPage, loading, isLoadingMore, syncWithState, setPage, currentPage]);
+    // Infinite scroll with IntersectionObserver
+    useEffect(() => {
+        if (!useInfiniteScroll || !sentinelRef.current)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry.isIntersecting && !isLastPage && !loading && !isLoadingMore) {
+                handleShowMore();
+            }
+        }, { threshold: scrollThreshold });
+        observer.observe(sentinelRef.current);
+        return () => observer.disconnect();
+    }, [useInfiniteScroll, scrollThreshold, isLastPage, loading, isLoadingMore, handleShowMore]);
+    // Extract field from hit
+    const extractField = (hit, field) => {
+        if (!fieldMapping || !fieldMapping[field]) {
+            return hit[field] || '';
+        }
+        const mappedField = fieldMapping[field];
+        return hit[mappedField] || '';
+    };
+    // Default hit renderer
+    const defaultRenderHit = (hit, index) => {
+        const title = extractField(hit, 'title') || hit.title || '';
+        const description = extractField(hit, 'description') || hit.description || '';
+        const image = extractField(hit, 'image') || hit.image || hit.imageUrl || '';
+        const price = extractField(hit, 'price') || hit.price;
+        return (React.createElement("div", { key: hit.id || index, className: infiniteHitsTheme.item, style: {
+                display: 'flex',
+                gap: theme.spacing.medium,
+                padding: theme.spacing.medium,
+                borderBottom: `1px solid ${theme.colors.border}`,
+                cursor: onHitClick ? 'pointer' : 'default',
+                transition: theme.transitions?.fast || '150ms ease-in-out',
+            }, onClick: () => onHitClick?.(hit, index), role: onHitClick ? 'button' : undefined, tabIndex: onHitClick ? 0 : undefined },
+            image && (React.createElement("img", { src: image, alt: title, style: {
+                    width: '80px',
+                    height: '80px',
+                    objectFit: 'cover',
+                    borderRadius: typeof theme.borderRadius === 'string'
+                        ? theme.borderRadius
+                        : theme.borderRadius.small,
+                } })),
+            React.createElement("div", { style: { flex: 1 } },
+                React.createElement("h3", { style: {
+                        margin: 0,
+                        marginBottom: theme.spacing.small,
+                        fontSize: theme.typography.fontSize.medium,
+                        fontWeight: theme.typography.fontWeight?.semibold || 600,
+                        color: theme.colors.text,
+                    } }, title),
+                description && (React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: theme.typography.fontSize.small,
+                        color: theme.colors.textSecondary,
+                        lineHeight: theme.typography.lineHeight?.normal || 1.5,
+                    } }, description)),
+                price && (React.createElement("span", { style: {
+                        display: 'inline-block',
+                        marginTop: theme.spacing.small,
+                        fontSize: theme.typography.fontSize.medium,
+                        fontWeight: theme.typography.fontWeight?.bold || 700,
+                        color: theme.colors.primary,
+                    } },
+                    "$",
+                    typeof price === 'number' ? price.toFixed(2) : price)))));
+    };
+    // Default empty state
+    const defaultRenderEmpty = () => (React.createElement("div", { className: infiniteHitsTheme.empty, style: {
+            padding: theme.spacing.large,
+            textAlign: 'center',
+            color: theme.colors.textSecondary,
+        } }, "No results found"));
+    // Default "Show More" button
+    const defaultRenderShowMore = () => (React.createElement("button", { type: "button", onClick: handleShowMore, disabled: isLastPage || isLoadingMore, className: clsx(infiniteHitsTheme.loadMore, (isLastPage || isLoadingMore) && infiniteHitsTheme.loadMoreDisabled), style: {
+            display: 'block',
+            width: '100%',
+            padding: theme.spacing.medium,
+            marginTop: theme.spacing.medium,
+            fontSize: theme.typography.fontSize.medium,
+            fontWeight: theme.typography.fontWeight?.medium || 500,
+            backgroundColor: isLastPage || isLoadingMore ? theme.colors.hover : theme.colors.primary,
+            color: isLastPage || isLoadingMore ? theme.colors.textSecondary : '#ffffff',
+            border: 'none',
+            borderRadius: typeof theme.borderRadius === 'string'
+                ? theme.borderRadius
+                : theme.borderRadius.medium,
+            cursor: isLastPage || isLoadingMore ? 'not-allowed' : 'pointer',
+            transition: theme.transitions?.fast || '150ms ease-in-out',
+        } }, isLastPage ? 'No more results' : showMoreLabel));
+    if (loading && accumulatedHits.length === 0) {
+        return React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style });
+    }
+    // Empty state
+    if (!loading && accumulatedHits.length === 0) {
+        return (React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style }, renderEmpty ? renderEmpty() : defaultRenderEmpty()));
+    }
+    return (React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style },
+        React.createElement("div", { className: infiniteHitsTheme.list }, accumulatedHits.map((hit, index) => renderHit ? renderHit(hit, index) : defaultRenderHit(hit, index))),
+        showMoreButton && !useInfiniteScroll && !isLastPage && (renderShowMore
+            ? renderShowMore({ isLoading: isLoadingMore, isLastPage, onClick: handleShowMore })
+            : defaultRenderShowMore()),
+        useInfiniteScroll && !isLastPage && (React.createElement("div", { ref: sentinelRef, className: infiniteHitsTheme.sentinel, style: { height: '1px', visibility: 'hidden' }, "aria-hidden": "true" }))));
+};

package/dist/components/MobileFilters.d.ts

@@ -0,0 +1,71 @@
+/**
+ * MobileFilters Component
+ *
+ * A full-screen filter drawer optimized for mobile devices
+ * Slides in from the side or bottom to display facets and filters
+ */
+import React from 'react';
+export interface MobileFiltersTheme {
+    overlay?: string;
+    drawer?: string;
+    header?: string;
+    title?: string;
+    closeButton?: string;
+    content?: string;
+    footer?: string;
+    applyButton?: string;
+    clearButton?: string;
+    filterCount?: string;
+}
+export interface MobileFiltersProps {
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Callback when drawer should close */
+    onClose: () => void;
+    /** Callback when filters are applied */
+    onApply?: () => void;
+    /** Title text */
+    title?: string;
+    /** Apply button text */
+    applyButtonText?: string;
+    /** Clear button text */
+    clearButtonText?: string;
+    /** Position of the drawer */
+    position?: 'left' | 'right' | 'bottom';
+    /** Children (filter components) */
+    children: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom theme */
+    theme?: MobileFiltersTheme;
+    /** Show header */
+    showHeader?: boolean;
+    /** Show footer with apply/clear buttons */
+    showFooter?: boolean;
+    /** Show filter count badge */
+    showFilterCount?: boolean;
+    /** Close on backdrop click */
+    closeOnBackdropClick?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+}
+export declare const MobileFilters: React.FC<MobileFiltersProps>;
+/**
+ * MobileFiltersButton Component
+ *
+ * A button to toggle the MobileFilters drawer
+ */
+export interface MobileFiltersButtonProps {
+    /** Callback when clicked */
+    onClick: () => void;
+    /** Button text */
+    text?: string;
+    /** Show filter count */
+    showCount?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+export declare const MobileFiltersButton: React.FC<MobileFiltersButtonProps>;
+//# sourceMappingURL=MobileFilters.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileFilters.d.ts","sourceRoot":"","sources":["../../src/components/MobileFilters.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,0BAA0B;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4StD,CAAC;AAEF;;;;GAIG;AAEH,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuDlE,CAAC"}

package/dist/components/MobileFilters.js

@@ -0,0 +1,242 @@
+/**
+ * MobileFilters Component
+ *
+ * A full-screen filter drawer optimized for mobile devices
+ * Slides in from the side or bottom to display facets and filters
+ */
+import React, { useEffect, useCallback, useRef } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+export const MobileFilters = ({ isOpen, onClose, onApply, title = 'Filters', applyButtonText = 'Apply', clearButtonText = 'Clear all', position = 'right', children, className, theme: customTheme, showHeader = true, showFooter = true, showFilterCount = true, closeOnBackdropClick = true, closeOnEscape = true, }) => {
+    const { theme } = useSearchContext();
+    const { refinements, clearRefinements } = useSearchState();
+    const mobileFiltersTheme = customTheme || {};
+    const drawerRef = useRef(null);
+    // Lock body scroll when open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    // Handle escape key
+    useEffect(() => {
+        if (!closeOnEscape)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose, closeOnEscape]);
+    // Focus trap
+    useEffect(() => {
+        if (isOpen && drawerRef.current) {
+            const focusableElements = drawerRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            const handleTab = (e) => {
+                if (e.key !== 'Tab')
+                    return;
+                if (e.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        e.preventDefault();
+                        lastElement?.focus();
+                    }
+                }
+                else {
+                    if (document.activeElement === lastElement) {
+                        e.preventDefault();
+                        firstElement?.focus();
+                    }
+                }
+            };
+            document.addEventListener('keydown', handleTab);
+            firstElement?.focus();
+            return () => document.removeEventListener('keydown', handleTab);
+        }
+    }, [isOpen]);
+    const handleBackdropClick = useCallback(() => {
+        if (closeOnBackdropClick) {
+            onClose();
+        }
+    }, [closeOnBackdropClick, onClose]);
+    const handleApply = useCallback(() => {
+        if (onApply) {
+            onApply();
+        }
+        onClose();
+    }, [onApply, onClose]);
+    const handleClear = useCallback(() => {
+        clearRefinements(true);
+    }, [clearRefinements]);
+    // Get drawer transform based on position
+    const getTransform = (isVisible) => {
+        if (isVisible)
+            return 'translate(0, 0)';
+        switch (position) {
+            case 'left':
+                return 'translateX(-100%)';
+            case 'right':
+                return 'translateX(100%)';
+            case 'bottom':
+                return 'translateY(100%)';
+            default:
+                return 'translateX(100%)';
+        }
+    };
+    // Get drawer styles based on position
+    const getDrawerPositionStyles = () => {
+        const base = {
+            position: 'fixed',
+            backgroundColor: theme.colors.background,
+            display: 'flex',
+            flexDirection: 'column',
+            transition: 'transform 300ms ease-in-out',
+            transform: getTransform(isOpen),
+            zIndex: (theme.zIndex?.modal || 1050) + 1,
+        };
+        switch (position) {
+            case 'left':
+                return { ...base, top: 0, left: 0, bottom: 0, width: '80%', maxWidth: '320px' };
+            case 'right':
+                return { ...base, top: 0, right: 0, bottom: 0, width: '80%', maxWidth: '320px' };
+            case 'bottom':
+                return { ...base, left: 0, right: 0, bottom: 0, maxHeight: '80vh', borderTopLeftRadius: '16px', borderTopRightRadius: '16px' };
+            default:
+                return base;
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: mobileFiltersTheme.overlay, onClick: handleBackdropClick, style: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                zIndex: theme.zIndex?.modal || 1050,
+                opacity: isOpen ? 1 : 0,
+                transition: 'opacity 300ms ease-in-out',
+            }, "aria-hidden": "true" }),
+        React.createElement("div", { ref: drawerRef, className: clsx(mobileFiltersTheme.drawer, className), style: getDrawerPositionStyles(), role: "dialog", "aria-modal": "true", "aria-label": title },
+            showHeader && (React.createElement("div", { className: mobileFiltersTheme.header, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: theme.spacing.medium,
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                } },
+                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: theme.spacing.small } },
+                    React.createElement("h2", { className: mobileFiltersTheme.title, style: {
+                            margin: 0,
+                            fontSize: theme.typography.fontSize.large,
+                            fontWeight: theme.typography.fontWeight?.semibold || 600,
+                            color: theme.colors.text,
+                        } }, title),
+                    showFilterCount && refinements.length > 0 && (React.createElement("span", { className: mobileFiltersTheme.filterCount, style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            minWidth: '24px',
+                            height: '24px',
+                            padding: '0 6px',
+                            fontSize: theme.typography.fontSize.small,
+                            fontWeight: theme.typography.fontWeight?.bold || 700,
+                            color: '#ffffff',
+                            backgroundColor: theme.colors.primary,
+                            borderRadius: '12px',
+                        } }, refinements.length))),
+                React.createElement("button", { type: "button", onClick: onClose, className: mobileFiltersTheme.closeButton, style: {
+                        padding: theme.spacing.small,
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: '1.5rem',
+                        color: theme.colors.text,
+                    }, "aria-label": "Close filters" }, "\u00D7"))),
+            React.createElement("div", { className: mobileFiltersTheme.content, style: {
+                    flex: 1,
+                    overflow: 'auto',
+                    padding: theme.spacing.medium,
+                } }, children),
+            showFooter && (React.createElement("div", { className: mobileFiltersTheme.footer, style: {
+                    display: 'flex',
+                    gap: theme.spacing.small,
+                    padding: theme.spacing.medium,
+                    borderTop: `1px solid ${theme.colors.border}`,
+                } },
+                React.createElement("button", { type: "button", onClick: handleClear, className: mobileFiltersTheme.clearButton, style: {
+                        flex: 1,
+                        padding: theme.spacing.medium,
+                        fontSize: theme.typography.fontSize.medium,
+                        fontWeight: theme.typography.fontWeight?.medium || 500,
+                        color: theme.colors.text,
+                        backgroundColor: 'transparent',
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: typeof theme.borderRadius === 'string'
+                            ? theme.borderRadius
+                            : theme.borderRadius.medium,
+                        cursor: 'pointer',
+                    } }, clearButtonText),
+                React.createElement("button", { type: "button", onClick: handleApply, className: mobileFiltersTheme.applyButton, style: {
+                        flex: 2,
+                        padding: theme.spacing.medium,
+                        fontSize: theme.typography.fontSize.medium,
+                        fontWeight: theme.typography.fontWeight?.medium || 500,
+                        color: '#ffffff',
+                        backgroundColor: theme.colors.primary,
+                        border: 'none',
+                        borderRadius: typeof theme.borderRadius === 'string'
+                            ? theme.borderRadius
+                            : theme.borderRadius.medium,
+                        cursor: 'pointer',
+                    } },
+                    applyButtonText,
+                    showFilterCount && refinements.length > 0 && ` (${refinements.length})`))))));
+};
+export const MobileFiltersButton = ({ onClick, text = 'Filters', showCount = true, className, style, }) => {
+    const { theme } = useSearchContext();
+    const { refinements } = useSearchState();
+    return (React.createElement("button", { type: "button", onClick: onClick, className: className, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: theme.spacing.small,
+            padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+            fontSize: theme.typography.fontSize.medium,
+            fontWeight: theme.typography.fontWeight?.medium || 500,
+            color: theme.colors.text,
+            backgroundColor: theme.colors.background,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: typeof theme.borderRadius === 'string'
+                ? theme.borderRadius
+                : theme.borderRadius.medium,
+            cursor: 'pointer',
+            ...style,
+        } },
+        React.createElement("span", null, "\u2630"),
+        React.createElement("span", null, text),
+        showCount && refinements.length > 0 && (React.createElement("span", { style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minWidth: '20px',
+                height: '20px',
+                padding: '0 4px',
+                fontSize: theme.typography.fontSize.small,
+                fontWeight: theme.typography.fontWeight?.bold || 700,
+                color: '#ffffff',
+                backgroundColor: theme.colors.primary,
+                borderRadius: '10px',
+            } }, refinements.length))));
+};

package/dist/components/Pagination.d.ts

@@ -0,0 +1,90 @@
+/**
+ * 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 type { SearchResponse } from '@seekora-ai/search-sdk';
+export interface PaginationTheme {
+    container?: string;
+    list?: string;
+    item?: string;
+    itemActive?: string;
+    itemDisabled?: string;
+    link?: string;
+    ellipsis?: string;
+    /** Class for the Load More button */
+    loadMoreButton?: string;
+    /** Class for the Load More descriptive text (e.g. "X remaining") */
+    loadMoreText?: string;
+    /** Class for the simple variant outer container */
+    simpleContainer?: string;
+    /** Class for the "Page X of Y" text in the simple variant */
+    simpleText?: string;
+    /** Class for Previous/Next buttons in the simple variant */
+    simpleButton?: string;
+    /** Class for the "Page X of Y" info text (usable in any variant) */
+    pageInfo?: string;
+}
+export interface PaginationProps {
+    /** Search results response */
+    results?: SearchResponse | null;
+    /** Current page number (1-indexed) */
+    currentPage?: number;
+    /** Items per page */
+    itemsPerPage?: number;
+    /** Total number of pages */
+    totalPages?: number;
+    /** Callback when page changes */
+    onPageChange?: (page: number) => void;
+    /** Maximum number of page buttons to show */
+    maxPages?: number;
+    /** Show first/last page buttons */
+    showFirstLast?: boolean;
+    /** Show previous/next buttons */
+    showPrevNext?: boolean;
+    /** Custom render function for page button */
+    renderPageButton?: (page: number, isActive: boolean, isDisabled: boolean) => React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: PaginationTheme;
+    /**
+     * Display variant.
+     * - 'numbered' (default): numbered page buttons with prev/next
+     * - 'load-more': single "Load More" button
+     * - 'simple': Previous / Next buttons with "Page X of Y" text
+     */
+    variant?: 'numbered' | 'load-more' | 'simple';
+    /** Label for the Load More button (default: "Load More") */
+    loadMoreText?: string;
+    /**
+     * Button / text sizing.
+     * - 'small': compact
+     * - 'medium' (default): standard
+     * - 'large': spacious
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Show "Page X of Y" text.
+     * Defaults to false for numbered, true for simple.
+     */
+    showPageInfo?: boolean;
+    /** Label for the Previous button (default: "Previous") */
+    previousLabel?: string;
+    /** Label for the Next button (default: "Next") */
+    nextLabel?: string;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG7D,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7F,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC9C,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0bhD,CAAC"}