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

package/dist/components/SearchBar.js

@@ -9,7 +9,42 @@ import { useSearchState } from '../hooks/useSearchState';
 import { useQuerySuggestions } from '../hooks/useQuerySuggestions';
 import { log } from '@seekora-ai/ui-sdk-core';
 import { clsx } from 'clsx';
-export const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, showLoadingState = false, renderSuggestion, renderLoading, }) => {
+const SIZE_CONFIG = {
+    small: {
+        padding: '0.375rem 0.5rem',
+        fontSize: '0.875rem',
+        iconSize: 14,
+        iconPaddingLeft: '1.75rem',
+        iconPaddingRight: '1.75rem',
+        iconLeft: '0.5rem',
+        iconRight: '0.5rem',
+    },
+    medium: {
+        padding: '0.625rem 1rem',
+        fontSize: '1rem',
+        iconSize: 18,
+        iconPaddingLeft: '2.25rem',
+        iconPaddingRight: '2.25rem',
+        iconLeft: '0.625rem',
+        iconRight: '0.625rem',
+    },
+    large: {
+        padding: '0.875rem 1.25rem',
+        fontSize: '1.25rem',
+        iconSize: 22,
+        iconPaddingLeft: '2.75rem',
+        iconPaddingRight: '2.75rem',
+        iconLeft: '0.75rem',
+        iconRight: '0.75rem',
+    },
+};
+const DefaultSearchIcon = ({ size = 18 }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+    React.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })));
+const DefaultClearIcon = ({ size = 14 }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+export const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, showLoadingState = false, renderSuggestion, renderLoading, renderSearchIcon, showClearButton = true, renderClearIcon, showSubmitButton = false, renderSubmitButton, size = 'medium', }) => {
     const { client, theme, enableAnalytics, autoTrackSearch } = useSearchContext();
     const { query, setQuery, search: triggerSearch, results, loading: searchLoading, error: searchError } = useSearchState();
     const [isFocused, setIsFocused] = useState(false);
@@ -150,28 +185,107 @@ export const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, d
     const processingTime = res?.processingTimeMS
         || res?.data?.processingTimeMS
         || res?.data?.data?.processingTimeMS;
+    // Size-based configuration
+    const sizeConfig = SIZE_CONFIG[size];
+    // Determine whether the search icon is shown (always unless renderSearchIcon returns null explicitly — but
+    // we always show it; there is no prop to hide the search icon, only to customise it)
+    const hasSearchIcon = true;
+    const hasClearBtn = showClearButton && query.length > 0;
+    // Compute input padding accounting for icons
+    const inputPaddingLeft = hasSearchIcon ? sizeConfig.iconPaddingLeft : sizeConfig.padding.split(' ')[1] || sizeConfig.padding;
+    const inputPaddingRight = hasClearBtn ? sizeConfig.iconPaddingRight : sizeConfig.padding.split(' ')[1] || sizeConfig.padding;
+    const borderRadius = typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium;
+    const focusBorderColor = isFocused ? theme.colors.focus : theme.colors.border;
+    const focusRingShadow = isFocused
+        ? `0 0 0 3px ${theme.colors.focus}33`
+        : undefined;
+    const handleClear = useCallback(() => {
+        setQuery('', false);
+        setSelectedIndex(-1);
+        inputRef.current?.focus();
+    }, [setQuery]);
+    const handleSubmit = useCallback(() => {
+        const currentValue = inputRef.current?.value || query;
+        handleSearch(currentValue);
+    }, [query, handleSearch]);
     return (React.createElement("div", { ref: containerRef, className: clsx(searchBarTheme.container, className), style: {
             position: 'relative',
             display: 'flex',
             alignItems: 'center',
+            // CSS custom properties for external styling
+            '--seekora-searchbar-bg': theme.colors.background,
+            '--seekora-searchbar-border': theme.colors.border,
+            '--seekora-searchbar-focus-border': theme.colors.focus,
+            '--seekora-searchbar-radius': borderRadius,
+            '--seekora-searchbar-icon-color': theme.colors.textSecondary,
             ...style,
         } },
-        React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, className: clsx(searchBarTheme.input, isFocused && searchBarTheme.inputFocused), style: {
-                flex: 1,
-                padding: theme.spacing.medium,
-                fontSize: theme.typography.fontSize.medium,
+        React.createElement("div", { style: { position: 'relative', flex: 1, display: 'flex', alignItems: 'center' } },
+            hasSearchIcon && (React.createElement("span", { className: searchBarTheme.searchIcon, "aria-hidden": "true", style: {
+                    position: 'absolute',
+                    left: sizeConfig.iconLeft,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    pointerEvents: 'none',
+                    color: 'var(--seekora-searchbar-icon-color)',
+                    zIndex: 1,
+                } }, renderSearchIcon ? renderSearchIcon() : React.createElement(DefaultSearchIcon, { size: sizeConfig.iconSize }))),
+            React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, className: clsx(searchBarTheme.input, isFocused && searchBarTheme.inputFocused), style: {
+                    width: '100%',
+                    paddingTop: sizeConfig.padding.split(' ')[0],
+                    paddingBottom: sizeConfig.padding.split(' ')[0],
+                    paddingLeft: inputPaddingLeft,
+                    paddingRight: inputPaddingRight,
+                    fontSize: sizeConfig.fontSize,
+                    fontFamily: theme.typography.fontFamily,
+                    backgroundColor: 'var(--seekora-searchbar-bg)',
+                    color: theme.colors.text,
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    borderColor: focusBorderColor,
+                    borderRadius: 'var(--seekora-searchbar-radius)',
+                    outline: 'none',
+                    boxShadow: focusRingShadow,
+                    transition: theme.transitions?.fast || '150ms ease-in-out',
+                    boxSizing: 'border-box',
+                } }),
+            hasClearBtn && (React.createElement("button", { type: "button", onClick: handleClear, className: searchBarTheme.clearButton, "aria-label": "Clear search", style: {
+                    position: 'absolute',
+                    right: sizeConfig.iconRight,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: '2px',
+                    borderRadius: '50%',
+                    color: 'var(--seekora-searchbar-icon-color)',
+                    transition: theme.transitions?.fast || '150ms ease-in-out',
+                    zIndex: 1,
+                }, onMouseDown: (e) => {
+                    // Prevent input blur so the clear action doesn't race with blur handler
+                    e.preventDefault();
+                } }, renderClearIcon ? renderClearIcon() : React.createElement(DefaultClearIcon, { size: sizeConfig.iconSize - 4 })))),
+        showSubmitButton && (renderSubmitButton ? (React.createElement("div", { onClick: handleSubmit, style: { marginLeft: theme.spacing.small, cursor: 'pointer' } }, renderSubmitButton())) : (React.createElement("button", { type: "button", onClick: handleSubmit, className: searchBarTheme.submitButton, style: {
+                marginLeft: theme.spacing.small,
+                padding: sizeConfig.padding,
+                fontSize: sizeConfig.fontSize,
                 fontFamily: theme.typography.fontFamily,
-                backgroundColor: theme.colors.background,
-                color: theme.colors.text,
-                borderWidth: '1px',
-                borderStyle: 'solid',
-                borderColor: isFocused ? theme.colors.focus : theme.colors.border,
-                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                outline: 'none',
-                ...(isFocused && {
-                    boxShadow: theme.shadows.small,
-                }),
-            } }),
+                fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                backgroundColor: theme.colors.primary,
+                color: '#ffffff',
+                border: 'none',
+                borderRadius: 'var(--seekora-searchbar-radius)',
+                cursor: 'pointer',
+                whiteSpace: 'nowrap',
+                transition: theme.transitions?.fast || '150ms ease-in-out',
+            } }, "Search"))),
         processingTime !== undefined && (React.createElement("span", { style: {
                 marginLeft: theme.spacing.small,
                 fontSize: theme.typography.fontSize.small,

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,CA6mBtD,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 || {};
@@ -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
@@ -399,19 +403,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 },

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