@seekora-ai/ui-sdk-react 0.2.12 → 0.2.14

package/dist/components/SearchResults.js

@@ -29,7 +29,7 @@ const formatPrice = (value, currency = '₹') => {
     }
     return String(value);
 };
-export const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, }) => {
+export const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, showLoadingState = false, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, minHeight = '400px', minWidth = '100%', loadingOpacity = 0.7, }) => {
     const { theme, client, enableAnalytics } = useSearchContext();
     const { results: stateResults, loading: stateLoading, error: stateError, currentPage, itemsPerPage: stateItemsPerPage } = useSearchState();
     const searchResultsTheme = customTheme || {};
@@ -373,6 +373,10 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
     });
     // Determine container style based on view mode
     const containerStyle = {
+        minHeight: `var(--seekora-results-min-height, ${minHeight})`,
+        minWidth: `var(--seekora-results-min-width, ${minWidth})`,
+        transition: 'opacity 200ms ease-in-out',
+        opacity: loading && resultItems.length > 0 ? loadingOpacity : 1,
         ...style,
     };
     // Determine results list style based on view mode
@@ -396,20 +400,22 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
         hasError: !!error,
         isLoading: loading,
     });
-    if (loading) {
+    // When loading with no previous results, show loading only if showLoadingState (default: show previous results, no loading screen)
+    if (loading && resultItems.length === 0 && showLoadingState) {
         log.verbose('SearchResults: Rendering loading state');
-        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderLoading ? renderLoading() : defaultRenderLoading()));
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: containerStyle }, renderLoading ? renderLoading() : defaultRenderLoading()));
     }
+    // When loading with previous results, fall through and render them (with opacity transition)
     if (error) {
         log.error('SearchResults: Rendering error state', {
             error: error.message,
             stack: error.stack,
         });
-        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderError ? renderError(error) : defaultRenderError(error)));
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: containerStyle }, renderError ? renderError(error) : defaultRenderError(error)));
     }
     if (!results || resultItems.length === 0) {
         log.verbose('SearchResults: No results to display');
-        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderEmpty ? renderEmpty() : defaultRenderEmpty()));
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: containerStyle }, renderEmpty ? renderEmpty() : defaultRenderEmpty()));
     }
     const renderFn = renderResult || defaultRenderResult;
     return (React.createElement("div", { ref: containerRef, className: clsx(searchResultsTheme.container, className), style: containerStyle, tabIndex: enableKeyboardNavigation ? 0 : undefined, onKeyDown: handleKeyDown, role: "listbox", "aria-label": "Search results", "aria-activedescendant": activeIndex >= 0 ? `result-${activeIndex}` : undefined },

package/dist/components/SortBy.d.ts

@@ -1,18 +1,50 @@
 /**
  * SortBy Component
  *
- * Displays sort options for search results
- * Integrates with SearchStateManager for automatic state sync
+ * Displays sort options for search results in multiple display variants:
+ * - dropdown (default) — native select element
+ * - button-group — horizontal row of toggle buttons
+ * - radio-group — vertical list of radio inputs
+ *
+ * Integrates with SearchStateManager for automatic state sync.
+ *
+ * CSS Variables (apply on a parent element to customize):
+ * --seekora-sort-bg           — background color
+ * --seekora-sort-color        — text color
+ * --seekora-sort-border       — border color
+ * --seekora-sort-active-bg    — active item background
+ * --seekora-sort-active-color — active item text color
  */
 import React from 'react';
 export interface SortOption {
     value: string;
     label: string;
 }
+export type SortByVariant = 'dropdown' | 'button-group' | 'radio-group';
+export type SortBySize = 'small' | 'medium' | 'large';
 export interface SortByTheme {
+    /** Root container */
     container?: string;
+    /** Dropdown select element */
     select?: string;
+    /** Dropdown option element */
     option?: string;
+    /** Optional label above the control */
+    label?: string;
+    /** Button group wrapper */
+    buttonGroup?: string;
+    /** Individual button in the group */
+    buttonGroupItem?: string;
+    /** Active button in the group */
+    buttonGroupItemActive?: string;
+    /** Radio group wrapper */
+    radioGroup?: string;
+    /** Individual radio row (input + label) */
+    radioItem?: string;
+    /** Active radio row */
+    radioItemActive?: string;
+    /** Radio label text */
+    radioLabel?: string;
 }
 export interface SortByProps {
     /** Available sort options */
@@ -23,7 +55,7 @@ export interface SortByProps {
     defaultValue?: string;
     /** Callback when sort changes */
     onSortChange?: (value: string) => void;
-    /** Custom render function for select */
+    /** Custom render function for select (only used in dropdown variant) */
     renderSelect?: (props: {
         value: string;
         onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
@@ -35,10 +67,18 @@ export interface SortByProps {
     style?: React.CSSProperties;
     /** Custom theme */
     theme?: SortByTheme;
-    /** Placeholder text */
+    /** Placeholder text (dropdown variant) */
     placeholder?: string;
     /** Whether to sync with SearchStateManager (default: true) */
     syncWithState?: boolean;
+    /** Display variant (default: 'dropdown') */
+    variant?: SortByVariant;
+    /** Optional label text displayed above the control */
+    label?: string;
+    /** Whether to show the label (default: true when label is provided) */
+    showLabel?: boolean;
+    /** Size variant affecting padding and font size (default: 'medium') */
+    size?: SortBySize;
 }
 export declare const SortBy: React.FC<SortByProps>;
 //# sourceMappingURL=SortBy.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortBy.d.ts","sourceRoot":"","sources":["../../src/components/SortBy.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAC;AAKzC,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QAC5D,OAAO,EAAE,UAAU,EAAE,CAAC;KACvB,KAAK,KAAK,CAAC,SAAS,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,WAAW,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8FxC,CAAC"}
+{"version":3,"file":"SortBy.d.ts","sourceRoot":"","sources":["../../src/components/SortBy.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAwC,MAAM,OAAO,CAAC;AAS7D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AACxE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,wEAAwE;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QAC5D,OAAO,EAAE,UAAU,EAAE,CAAC;KACvB,KAAK,KAAK,CAAC,SAAS,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,WAAW,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AA8BD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmSxC,CAAC"}

package/dist/components/SortBy.js

@@ -1,61 +1,186 @@
 /**
  * SortBy Component
  *
- * Displays sort options for search results
- * Integrates with SearchStateManager for automatic state sync
+ * Displays sort options for search results in multiple display variants:
+ * - dropdown (default) — native select element
+ * - button-group — horizontal row of toggle buttons
+ * - radio-group — vertical list of radio inputs
+ *
+ * Integrates with SearchStateManager for automatic state sync.
+ *
+ * CSS Variables (apply on a parent element to customize):
+ * --seekora-sort-bg           — background color
+ * --seekora-sort-color        — text color
+ * --seekora-sort-border       — border color
+ * --seekora-sort-active-bg    — active item background
+ * --seekora-sort-active-color — active item text color
  */
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useId } from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
-export const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderSelect, className, style, theme: customTheme, placeholder = 'Sort by...', syncWithState = true, }) => {
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Map a size token to theme fontSize and spacing values. */
+function sizeStyles(size, theme) {
+    switch (size) {
+        case 'small':
+            return { fontSize: theme.typography.fontSize.small, padding: theme.spacing.small };
+        case 'large':
+            return { fontSize: theme.typography.fontSize.large, padding: theme.spacing.medium };
+        case 'medium':
+        default:
+            return { fontSize: theme.typography.fontSize.medium, padding: theme.spacing.small };
+    }
+}
+function resolveBorderRadius(br) {
+    return typeof br === 'string' ? br : br.medium;
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderSelect, className, style, theme: customTheme, placeholder = 'Sort by...', syncWithState = true, variant = 'dropdown', label, showLabel, size = 'medium', }) => {
     const { theme } = useSearchContext();
     const { sortBy: stateManagerSortBy, setSortBy } = useSearchState();
     const sortByTheme = customTheme || {};
-    // Initialize with defaultValue or first option
+    const instanceId = useId();
+    // Determine whether the label should render.
+    const shouldShowLabel = showLabel !== undefined ? showLabel : !!label;
+    // ------ State ----------------------------------------------------------
     const [internalValue, setInternalValue] = React.useState(defaultValue || options[0]?.value || '');
     // Sync with StateManager on mount if defaultValue is set
     useEffect(() => {
         if (syncWithState && defaultValue && !stateManagerSortBy) {
             setSortBy(defaultValue, false); // Don't trigger search on initial sync
         }
-    }, []);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
     // Determine the current value: controlled prop > StateManager > internal
     const value = valueProp !== undefined
         ? valueProp
-        : (syncWithState && stateManagerSortBy)
+        : syncWithState && stateManagerSortBy
             ? stateManagerSortBy
             : internalValue;
+    // ------ Handlers -------------------------------------------------------
     const handleChange = (e) => {
-        const newValue = e.target.value;
+        applyValue(e.target.value);
+    };
+    const applyValue = useCallback((newValue) => {
         setInternalValue(newValue);
-        // Update StateManager (automatically triggers search)
         if (syncWithState) {
             setSortBy(newValue);
         }
-        // Call callback for backwards compatibility
         if (onSortChange) {
             onSortChange(newValue);
         }
+    }, [syncWithState, setSortBy, onSortChange]);
+    // ------ Derived styles -------------------------------------------------
+    const { fontSize, padding } = sizeStyles(size, theme);
+    const borderRadius = resolveBorderRadius(theme.borderRadius);
+    const cssVarStyle = {
+        '--seekora-sort-bg': theme.colors.background,
+        '--seekora-sort-color': theme.colors.text,
+        '--seekora-sort-border': theme.colors.border,
+        '--seekora-sort-active-bg': theme.colors.primary,
+        '--seekora-sort-active-color': theme.colors.background,
     };
-    const defaultRenderSelect = () => (React.createElement("select", { value: value, onChange: handleChange, className: clsx(sortByTheme.select, className), style: {
-            padding: theme.spacing.small,
-            paddingRight: theme.spacing.medium,
-            fontSize: theme.typography.fontSize.medium,
-            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: 'pointer',
-            outline: 'none',
-            ...style,
-        }, "aria-label": "Sort results" }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value, className: sortByTheme.option }, option.label)))));
-    if (renderSelect) {
-        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: style }, renderSelect({
-            value,
-            onChange: handleChange,
-            options,
-        })));
+    // ------ Label ----------------------------------------------------------
+    const labelElement = shouldShowLabel && label ? (React.createElement("span", { className: clsx(sortByTheme.label), style: {
+            display: 'block',
+            marginBottom: theme.spacing.small,
+            fontSize,
+            color: 'var(--seekora-sort-color)',
+            fontWeight: 500,
+        } }, label)) : null;
+    // ------ Dropdown variant (original) ------------------------------------
+    if (variant === 'dropdown') {
+        if (renderSelect) {
+            return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+                labelElement,
+                renderSelect({
+                    value,
+                    onChange: handleChange,
+                    options,
+                })));
+        }
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement("select", { value: value, onChange: handleChange, className: clsx(sortByTheme.select), style: {
+                    padding,
+                    paddingRight: theme.spacing.medium,
+                    fontSize,
+                    border: '1px solid var(--seekora-sort-border)',
+                    borderRadius,
+                    backgroundColor: 'var(--seekora-sort-bg)',
+                    color: 'var(--seekora-sort-color)',
+                    cursor: 'pointer',
+                    outline: 'none',
+                    width: '100%',
+                }, "aria-label": label || 'Sort results' }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value, className: sortByTheme.option }, option.label))))));
+    }
+    // ------ Button group variant -------------------------------------------
+    if (variant === 'button-group') {
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement("div", { role: "group", "aria-label": label || 'Sort results', className: clsx(sortByTheme.buttonGroup), style: {
+                    display: 'inline-flex',
+                    borderRadius,
+                    overflow: 'hidden',
+                    border: '1px solid var(--seekora-sort-border)',
+                } }, options.map((option, index) => {
+                const isActive = option.value === value;
+                return (React.createElement("button", { key: option.value, type: "button", role: "button", "aria-pressed": isActive, onClick: () => applyValue(option.value), className: clsx(sortByTheme.buttonGroupItem, isActive && sortByTheme.buttonGroupItemActive), style: {
+                        padding,
+                        fontSize,
+                        border: 'none',
+                        borderRight: index < options.length - 1
+                            ? '1px solid var(--seekora-sort-border)'
+                            : 'none',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-sort-active-bg)'
+                            : 'var(--seekora-sort-bg)',
+                        color: isActive
+                            ? 'var(--seekora-sort-active-color)'
+                            : 'var(--seekora-sort-color)',
+                        cursor: 'pointer',
+                        fontWeight: isActive ? 600 : 400,
+                        transition: 'background-color 0.15s ease, color 0.15s ease',
+                        outline: 'none',
+                    } }, option.label));
+            }))));
+    }
+    // ------ Radio group variant --------------------------------------------
+    if (variant === 'radio-group') {
+        const radioName = `seekora-sort-${instanceId}`;
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement("div", { role: "radiogroup", "aria-label": label || 'Sort results', className: clsx(sortByTheme.radioGroup), style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: theme.spacing.small,
+                } }, options.map((option) => {
+                const isActive = option.value === value;
+                const radioId = `${radioName}-${option.value}`;
+                return (React.createElement("label", { key: option.value, htmlFor: radioId, className: clsx(sortByTheme.radioItem, isActive && sortByTheme.radioItemActive), style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: theme.spacing.small,
+                        padding,
+                        borderRadius,
+                        cursor: 'pointer',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-sort-active-bg)'
+                            : 'transparent',
+                        color: isActive
+                            ? 'var(--seekora-sort-active-color)'
+                            : 'var(--seekora-sort-color)',
+                        fontWeight: isActive ? 600 : 400,
+                        transition: 'background-color 0.15s ease, color 0.15s ease',
+                    } },
+                    React.createElement("input", { type: "radio", id: radioId, name: radioName, value: option.value, checked: isActive, onChange: () => applyValue(option.value), style: { margin: 0 } }),
+                    React.createElement("span", { className: clsx(sortByTheme.radioLabel), style: { fontSize } }, option.label)));
+            }))));
     }
-    return defaultRenderSelect();
+    // Fallback — should never reach here, but satisfies TS exhaustiveness
+    return null;
 };

package/dist/components/Stats.d.ts

@@ -2,6 +2,7 @@
  * Stats Component
  *
  * Displays search statistics (total results, processing time, etc.)
+ * Supports inline, badge, and detailed display variants.
  */
 import React from 'react';
 import type { SearchResponse } from '@seekora-ai/search-sdk';
@@ -10,6 +11,13 @@ export interface StatsTheme {
     text?: string;
     highlight?: string;
     separator?: string;
+    badge?: string;
+    badgeLabel?: string;
+    badgeValue?: string;
+    detailed?: string;
+    detailedRow?: string;
+    detailedLabel?: string;
+    detailedValue?: string;
 }
 export interface StatsProps {
     /** Search results response */
@@ -32,6 +40,12 @@ export interface StatsProps {
     showQuery?: boolean;
     /** Custom separator between stats */
     separator?: string;
+    /** Display variant */
+    variant?: 'inline' | 'badge' | 'detailed';
+    /** Show result count (default: true) */
+    showResultCount?: boolean;
+    /** Custom number formatter (default: toLocaleString) */
+    formatNumber?: (n: number) => string;
 }
 export declare const Stats: React.FC<StatsProps>;
 //# sourceMappingURL=Stats.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../src/components/Stats.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,KAAK,KAAK,CAAC,SAAS,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,UAAU,CAAC;IACnB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2EtC,CAAC"}
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../src/components/Stats.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,KAAK,KAAK,CAAC,SAAS,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,UAAU,CAAC;IACnB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1C,wCAAwC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACtC;AA8BD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsTtC,CAAC"}

package/dist/components/Stats.js

@@ -2,13 +2,48 @@
  * Stats Component
  *
  * Displays search statistics (total results, processing time, etc.)
+ * Supports inline, badge, and detailed display variants.
  */
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
-export const Stats = ({ results, renderStats, className, style, theme: customTheme, showProcessingTime = false, showQuery = false, separator = ' • ', }) => {
+/** CSS class name used for the animated count fade transition */
+const ANIMATE_CLASS = 'seekora-stats-animate';
+/** Inline <style> for the count-change animation and CSS custom properties */
+const statsStyleId = 'seekora-stats-styles';
+function ensureStatsStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(statsStyleId))
+        return;
+    const style = document.createElement('style');
+    style.id = statsStyleId;
+    style.textContent = `
+    .seekora-stats-root {
+      --seekora-stats-color: inherit;
+      --seekora-stats-bg: transparent;
+      --seekora-stats-font-size: inherit;
+      --seekora-stats-badge-bg: inherit;
+      --seekora-stats-badge-color: inherit;
+    }
+    .${ANIMATE_CLASS} {
+      opacity: 0;
+      transition: opacity 250ms ease-in-out;
+    }
+  `;
+    document.head.appendChild(style);
+}
+export const Stats = ({ results: resultsProp, renderStats, className, style, theme: customTheme, showProcessingTime = false, showQuery = false, separator = ' \u2022 ', variant = 'inline', showResultCount = true, formatNumber, }) => {
     const { theme } = useSearchContext();
+    const { results: stateResults } = useSearchState();
     const statsTheme = customTheme || {};
+    // Use results from prop if provided, otherwise from state manager
+    const results = resultsProp || stateResults;
+    // Inject keyframe / transition styles once
+    useEffect(() => {
+        ensureStatsStyles();
+    }, []);
     // Extract stats from results
     const res = results;
     const totalResults = res?.totalResults
@@ -19,34 +54,148 @@ export const Stats = ({ results, renderStats, className, style, theme: customThe
         || res?.data?.processingTimeMS
         || res?.data?.data?.processingTimeMS;
     const query = (res?.query ?? '');
-    const defaultRenderStats = () => {
-        const parts = [];
-        if (totalResults > 0) {
-            parts.push(`${totalResults.toLocaleString()} result${totalResults !== 1 ? 's' : ''}`);
+    // Number formatter
+    const fmt = formatNumber || ((n) => n.toLocaleString());
+    // Animated count change — toggle a CSS class briefly on totalResults change
+    const countRef = useRef(null);
+    const prevTotalRef = useRef(totalResults);
+    const [animating, setAnimating] = useState(false);
+    useEffect(() => {
+        if (prevTotalRef.current !== totalResults) {
+            prevTotalRef.current = totalResults;
+            setAnimating(true);
+            // After a frame, remove the class so the transition plays (opacity 0 -> 1)
+            const raf = requestAnimationFrame(() => {
+                setAnimating(false);
+            });
+            return () => cancelAnimationFrame(raf);
         }
-        else {
-            parts.push('No results');
+    }, [totalResults]);
+    // Helper: border radius value from theme
+    const borderRadiusSmall = typeof theme.borderRadius === 'string'
+        ? theme.borderRadius
+        : theme.borderRadius.small;
+    // ─── Custom render ────────────────────────────────────────
+    if (renderStats) {
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: style }, renderStats({
+            totalResults,
+            processingTime,
+            query,
+        })));
+    }
+    // ─── Inline variant (original behaviour) ──────────────────
+    if (variant === 'inline') {
+        const parts = [];
+        if (showResultCount) {
+            if (totalResults > 0) {
+                parts.push(React.createElement("span", { key: "count", className: statsTheme.text },
+                    React.createElement("span", { ref: countRef, className: clsx(animating && ANIMATE_CLASS), style: { transition: 'opacity 250ms ease-in-out' } }, fmt(totalResults)),
+                    ` result${totalResults !== 1 ? 's' : ''}`));
+            }
+            else {
+                parts.push(React.createElement("span", { key: "count", className: statsTheme.text }, "No results"));
+            }
         }
         if (showProcessingTime && processingTime !== undefined) {
-            parts.push(`${processingTime}ms`);
+            parts.push(React.createElement("span", { key: "time", className: statsTheme.text },
+                fmt(processingTime),
+                "ms"));
         }
         if (showQuery && query) {
-            parts.push(`for "${query}"`);
+            parts.push(React.createElement("span", { key: "query", className: statsTheme.text },
+                "for \"",
+                query,
+                "\""));
         }
-        return (React.createElement("div", { className: clsx(statsTheme.container, className), style: {
-                fontSize: theme.typography.fontSize.medium,
-                color: theme.colors.text,
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: {
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.medium + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
                 ...style,
             } }, parts.map((part, index) => (React.createElement("span", { key: index },
-            index > 0 && React.createElement("span", { className: statsTheme.separator, style: { margin: `0 ${theme.spacing.small}` } }, separator),
-            React.createElement("span", { className: statsTheme.text }, part))))));
-    };
-    if (renderStats) {
-        return (React.createElement("div", { className: clsx(statsTheme.container, className), style: style }, renderStats({
-            totalResults,
-            processingTime,
-            query,
-        })));
+            index > 0 && (React.createElement("span", { className: statsTheme.separator, style: { margin: `0 ${theme.spacing.small}` } }, separator)),
+            part)))));
+    }
+    // ─── Badge variant ────────────────────────────────────────
+    if (variant === 'badge') {
+        const badges = [];
+        const badgeStyle = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: theme.spacing.small,
+            padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+            borderRadius: borderRadiusSmall,
+            backgroundColor: `var(--seekora-stats-badge-bg, ${theme.colors.primary}1A)`, // 10 % opacity hex
+            color: `var(--seekora-stats-badge-color, ${theme.colors.primary})`,
+            fontSize: theme.typography.fontSize.small,
+            fontWeight: 500,
+        };
+        if (showResultCount) {
+            badges.push(React.createElement("span", { key: "count", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Results"),
+                React.createElement("span", { className: clsx(statsTheme.badgeValue, animating && ANIMATE_CLASS), style: { fontWeight: 600, transition: 'opacity 250ms ease-in-out' } }, totalResults > 0 ? fmt(totalResults) : '0')));
+        }
+        if (showQuery && query) {
+            badges.push(React.createElement("span", { key: "query", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Query"),
+                React.createElement("span", { className: statsTheme.badgeValue, style: { fontWeight: 600 } }, query)));
+        }
+        if (showProcessingTime && processingTime !== undefined) {
+            badges.push(React.createElement("span", { key: "time", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Time"),
+                React.createElement("span", { className: statsTheme.badgeValue, style: { fontWeight: 600 } },
+                    fmt(processingTime),
+                    "ms")));
+        }
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: theme.spacing.small,
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.small + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
+                ...style,
+            } }, badges));
+    }
+    // ─── Detailed variant ─────────────────────────────────────
+    if (variant === 'detailed') {
+        const rows = [];
+        if (showResultCount) {
+            rows.push({
+                label: 'Total Results',
+                value: (React.createElement("span", { className: clsx(animating && ANIMATE_CLASS), style: { transition: 'opacity 250ms ease-in-out' } }, fmt(totalResults))),
+            });
+        }
+        if (showQuery && query) {
+            rows.push({ label: 'Query', value: query });
+        }
+        if (showProcessingTime && processingTime !== undefined) {
+            rows.push({ label: 'Time', value: `${fmt(processingTime)}ms` });
+        }
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.detailed, statsTheme.container, className), style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing.small,
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.medium + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
+                ...style,
+            } }, rows.map((row, index) => (React.createElement("div", { key: index, className: statsTheme.detailedRow, style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+            } },
+            React.createElement("span", { className: statsTheme.detailedLabel, style: {
+                    color: theme.colors.textSecondary,
+                    fontWeight: 500,
+                } },
+                row.label,
+                ":"),
+            React.createElement("span", { className: statsTheme.detailedValue, style: {
+                    color: theme.colors.text,
+                    fontWeight: 600,
+                } }, row.value))))));
     }
-    return defaultRenderStats();
+    // Fallback (should not be reached)
+    return null;
 };

package/dist/components/section-primitives/SectionItemGrid.d.ts

@@ -7,6 +7,8 @@ export interface SectionItemGridProps {
     maxItems?: number;
     className?: string;
     style?: React.CSSProperties;
+    /** Show loading state when fetching and no previous items (default false: show previous results until new render) */
+    showLoadingState?: boolean;
     getItemId?: (item: unknown) => string;
     getItemTitle?: (item: unknown) => string;
     getItemImage?: (item: unknown) => string | undefined;
@@ -14,5 +16,5 @@ export interface SectionItemGridProps {
     getItemUrl?: (item: unknown) => string | undefined;
     renderItem?: (item: unknown, index: number) => React.ReactNode;
 }
-export declare function SectionItemGrid({ columns, maxItems, className, style, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, }: SectionItemGridProps): React.JSX.Element;
+export declare function SectionItemGrid({ columns, maxItems, className, style, showLoadingState, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, }: SectionItemGridProps): React.JSX.Element;
 //# sourceMappingURL=SectionItemGrid.d.ts.map

package/dist/components/section-primitives/SectionItemGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionItemGrid.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/SectionItemGrid.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChE;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAW,EACX,QAAa,EACb,SAAS,EACT,KAAK,EACL,SAA8E,EAC9E,YAAyE,EACzE,YAAmE,EACnE,kBAAqF,EACrF,UAA6D,EAC7D,UAAU,GACX,EAAE,oBAAoB,qBAsBtB"}
+{"version":3,"file":"SectionItemGrid.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/SectionItemGrid.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,qHAAqH;IACrH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChE;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAW,EACX,QAAa,EACb,SAAS,EACT,KAAK,EACL,gBAAwB,EACxB,SAA8E,EAC9E,YAAyE,EACzE,YAAmE,EACnE,kBAAqF,EACrF,UAA6D,EAC7D,UAAU,GACX,EAAE,oBAAoB,qBAuBtB"}