@seekora-ai/ui-sdk-react 0.2.13 → 0.2.15

package/dist/components/SearchBarWithSuggestions.js

@@ -29,8 +29,8 @@ const styles = {
         transition: 'border-color 150ms ease, box-shadow 150ms ease',
     },
     inputWrapperFocused: {
-        borderColor: 'var(--seekora-primary, #3b82f6)',
-        boxShadow: '0 0 0 3px var(--seekora-primary-light, rgba(59, 130, 246, 0.1))',
+        borderColor: 'var(--seekora-border-focus, var(--seekora-primary, #3b82f6))',
+        boxShadow: '0 0 0 3px var(--seekora-border-focus-alpha, var(--seekora-primary-light, rgba(59, 130, 246, 0.1)))',
     },
     input: {
         flex: 1,
@@ -73,7 +73,7 @@ const styles = {
         margin: '4px',
         border: 'none',
         backgroundColor: 'var(--seekora-primary, #3b82f6)',
-        color: 'white',
+        color: 'var(--seekora-primary-text, white)',
         borderRadius: 'var(--seekora-border-radius, 6px)',
         fontSize: '14px',
         fontWeight: 600,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchLayout.d.ts","sourceRoot":"","sources":["../../src/components/SearchLayout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkGpD,CAAC"}
+{"version":3,"file":"SearchLayout.d.ts","sourceRoot":"","sources":["../../src/components/SearchLayout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2GpD,CAAC"}

package/dist/components/SearchLayout.js

@@ -22,6 +22,8 @@ export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth =
             display: 'flex',
             flexDirection: 'column',
             minHeight: '100vh',
+            width: '100%',
+            maxWidth: '100%',
             backgroundColor: theme.colors.background,
             ...style,
         } },
@@ -33,20 +35,27 @@ export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth =
         React.createElement("div", { style: {
                 display: 'flex',
                 flex: 1,
+                width: '100%',
+                maxWidth: '100%',
                 gap: theme.spacing.large,
                 padding: theme.spacing.medium,
                 backgroundColor: theme.colors.background,
                 color: theme.colors.text,
+                overflow: 'hidden',
             } },
             sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: layoutTheme.sidebar, style: {
                     width: sidebarWidth,
                     minWidth: sidebarWidth,
+                    flexShrink: 0,
                 } }, sidebar)),
             React.createElement("main", { className: layoutTheme.main, style: {
                     flex: 1,
-                    minWidth: 0, // Prevents flex item from overflowing
+                    minWidth: 0,
+                    width: '100%',
+                    maxWidth: '100%',
                     backgroundColor: theme.colors.background,
                     color: theme.colors.text,
+                    overflow: 'auto',
                 } }, children)),
         footer && (React.createElement("footer", { className: layoutTheme.footer, style: {
                 padding: theme.spacing.medium,

package/dist/components/SearchProvider.d.ts

@@ -1,7 +1,8 @@
 /**
  * SearchProvider Component
  *
- * Provides Seekora client and context to child components
+ * Provides Seekora client and context to child components.
+ * Supports A/B testing via abTestId/abVariant props.
  */
 import React, { ReactNode } from 'react';
 import type { SeekoraClient } from '@seekora-ai/search-sdk';
@@ -21,6 +22,12 @@ export interface SearchProviderProps {
     autoTrackSearch?: boolean;
     stateManager?: SearchStateManagerConfig;
     children: ReactNode;
+    /** A/B test experiment ID to include in all analytics events */
+    abTestId?: string;
+    /** A/B test variant to include in all analytics events */
+    abVariant?: string;
+    /** Auto-fetch experiment assignments on mount (default: false) */
+    experiments?: boolean;
 }
 export declare const SearchProvider: React.FC<SearchProviderProps>;
 export declare const useSearchContext: () => SearchContextValue;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchProvider.d.ts","sourceRoot":"","sources":["../../src/components/SearchProvider.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAW,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAO,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI1D,UAAU,kBAAkB;IAC1B,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,kBAAkB,CAAC;CAClC;AAID,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqCxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,kBAQnC,CAAC"}
+{"version":3,"file":"SearchProvider.d.ts","sourceRoot":"","sources":["../../src/components/SearchProvider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAsB,MAAM,OAAO,CAAC;AACxF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAO,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI1D,UAAU,kBAAkB;IAC1B,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,kBAAkB,CAAC;CAClC;AAID,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoDxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,kBAQnC,CAAC"}

package/dist/components/SearchProvider.js

@@ -1,14 +1,15 @@
 /**
  * SearchProvider Component
  *
- * Provides Seekora client and context to child components
+ * Provides Seekora client and context to child components.
+ * Supports A/B testing via abTestId/abVariant props.
  */
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useMemo, useEffect } from 'react';
 import { log, SearchStateManager } from '@seekora-ai/ui-sdk-core';
 import { defaultTheme } from '../themes/default';
 import { createTheme } from '../themes/createTheme';
 const SearchContext = createContext(null);
-export const SearchProvider = ({ client, theme: themeConfig, enableAnalytics = true, autoTrackSearch = true, stateManager: stateManagerConfig, children, }) => {
+export const SearchProvider = ({ client, theme: themeConfig, enableAnalytics = true, autoTrackSearch = true, stateManager: stateManagerConfig, children, abTestId, abVariant, experiments: _experiments, }) => {
     const theme = useMemo(() => {
         return themeConfig ? createTheme(themeConfig) : defaultTheme;
     }, [themeConfig]);
@@ -21,8 +22,19 @@ export const SearchProvider = ({ client, theme: themeConfig, enableAnalytics = t
             itemsPerPage: 10,
             defaultSearchOptions: { widget_mode: true },
             ...stateManagerConfig,
+            abTestId,
+            abVariant,
         });
-    }, [client, stateManagerConfig]);
+    }, [client, stateManagerConfig, abTestId, abVariant]);
+    // Update A/B test fields on state manager and SDK client when props change
+    useEffect(() => {
+        if (abTestId !== undefined || abVariant !== undefined) {
+            stateManager.setAbTest(abTestId, abVariant);
+            if (typeof client.setAbTest === 'function') {
+                client.setAbTest(abTestId, abVariant);
+            }
+        }
+    }, [stateManager, client, abTestId, abVariant]);
     const value = useMemo(() => ({
         client,
         theme,

package/dist/components/SearchResults.d.ts

@@ -21,6 +21,10 @@ export interface SearchResultsTheme {
     loadingState?: string;
     errorState?: string;
     pagination?: string;
+    /** Custom min-height class override */
+    minHeight?: string;
+    /** Custom min-width class override */
+    minWidth?: string;
 }
 export interface SearchResultsProps {
     results?: SearchResponse | null;
@@ -48,6 +52,12 @@ export interface SearchResultsProps {
     enableKeyboardNavigation?: boolean;
     /** Auto-focus the results container */
     autoFocus?: boolean;
+    /** Minimum height to prevent container collapse when empty (default: '400px') */
+    minHeight?: string;
+    /** Minimum width to prevent container shrinking (default: '100%') */
+    minWidth?: string;
+    /** Opacity applied to results while loading new results (default: 0.7, set to 1 to disable) */
+    loadingOpacity?: number;
 }
 export declare const SearchResults: React.FC<SearchResultsProps>;
 //# sourceMappingURL=SearchResults.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../src/components/SearchResults.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEnF,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1F,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,uHAAuH;IACvH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gFAAgF;IAChF,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAoBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsmBtD,CAAC"}
+{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../src/components/SearchResults.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEnF,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1F,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,uHAAuH;IACvH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gFAAgF;IAChF,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAoBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAknBtD,CAAC"}

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, showLoadingState = false, 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 || {};
@@ -53,6 +53,43 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
             }
         }
     }, [activeIndex, enableKeyboardNavigation]);
+    // Global keyboard listener for seamless navigation from search box to results
+    useEffect(() => {
+        if (!enableKeyboardNavigation)
+            return;
+        const handleGlobalKeyDown = (e) => {
+            // Only handle if we have results and the container exists
+            if (!containerRef.current)
+                return;
+            const resultElements = containerRef.current.querySelectorAll('[data-result-index]');
+            const maxIndex = resultElements.length - 1;
+            if (maxIndex < 0)
+                return;
+            // Check if focus is on an input/textarea (search box)
+            const activeElement = document.activeElement;
+            const isInputFocused = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA';
+            if (e.key === 'ArrowDown') {
+                // If in search box or no result selected, select first result
+                if (isInputFocused || activeIndex === -1) {
+                    e.preventDefault();
+                    setActiveIndex(0);
+                    containerRef.current?.focus();
+                }
+            }
+            else if (e.key === 'ArrowUp') {
+                // If first result is selected, go back to search box
+                if (activeIndex === 0) {
+                    e.preventDefault();
+                    setActiveIndex(-1);
+                    // Find and focus the search input
+                    const searchInput = document.querySelector('input[type="text"], input[type="search"]');
+                    searchInput?.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleGlobalKeyDown);
+        return () => document.removeEventListener('keydown', handleGlobalKeyDown);
+    }, [enableKeyboardNavigation, activeIndex]);
     // Keyboard navigation handler
     const handleKeyDown = useCallback((e) => {
         if (!enableKeyboardNavigation)
@@ -373,6 +410,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
@@ -399,19 +440,19 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
     // 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 (no loading screen)
+    // 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 },
@@ -424,30 +465,5 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
             results?.totalResults || results?.data?.total_results || 0,
             " result",
             (results?.totalResults || results?.data?.total_results || 0) !== 1 ? 's' : '')),
-        enableKeyboardNavigation && resultItems.length > 0 && (React.createElement("div", { style: {
-                fontSize: '12px',
-                color: theme.colors.text,
-                opacity: 0.6,
-                marginBottom: theme.spacing.small,
-                display: 'flex',
-                gap: '8px',
-                alignItems: 'center',
-            } },
-            React.createElement("span", { style: {
-                    display: 'inline-flex',
-                    gap: '4px',
-                    padding: '2px 6px',
-                    backgroundColor: theme.colors.hover,
-                    borderRadius: '4px',
-                    fontSize: '11px',
-                } }, "\u2191\u2193 navigate"),
-            React.createElement("span", { style: {
-                    display: 'inline-flex',
-                    gap: '4px',
-                    padding: '2px 6px',
-                    backgroundColor: theme.colors.hover,
-                    borderRadius: '4px',
-                    fontSize: '11px',
-                } }, "\u21B5 select"))),
         React.createElement("div", { className: searchResultsTheme.resultsList, style: resultsListStyle }, resultItems.map((result, index) => renderFn(result, index, index === activeIndex)))));
 };

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"}