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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/dist/components/CurrentRefinements.d.ts +22 -2
  2. package/dist/components/CurrentRefinements.d.ts.map +1 -1
  3. package/dist/components/CurrentRefinements.js +199 -47
  4. package/dist/components/Facets.d.ts +30 -1
  5. package/dist/components/Facets.d.ts.map +1 -1
  6. package/dist/components/Facets.js +418 -46
  7. package/dist/components/HierarchicalMenu.d.ts.map +1 -1
  8. package/dist/components/HierarchicalMenu.js +112 -4
  9. package/dist/components/InfiniteHits.d.ts +2 -0
  10. package/dist/components/InfiniteHits.d.ts.map +1 -1
  11. package/dist/components/InfiniteHits.js +6 -3
  12. package/dist/components/Pagination.d.ts +47 -1
  13. package/dist/components/Pagination.d.ts.map +1 -1
  14. package/dist/components/Pagination.js +166 -28
  15. package/dist/components/QuerySuggestions.d.ts +2 -0
  16. package/dist/components/QuerySuggestions.d.ts.map +1 -1
  17. package/dist/components/QuerySuggestions.js +4 -3
  18. package/dist/components/QuerySuggestionsDropdown.d.ts +1 -1
  19. package/dist/components/QuerySuggestionsDropdown.d.ts.map +1 -1
  20. package/dist/components/QuerySuggestionsDropdown.js +4 -4
  21. package/dist/components/RangeSlider.d.ts.map +1 -1
  22. package/dist/components/RangeSlider.js +49 -2
  23. package/dist/components/Recommendations.d.ts +6 -0
  24. package/dist/components/Recommendations.d.ts.map +1 -1
  25. package/dist/components/Recommendations.js +12 -6
  26. package/dist/components/RichQuerySuggestions.d.ts +11 -0
  27. package/dist/components/RichQuerySuggestions.d.ts.map +1 -1
  28. package/dist/components/RichQuerySuggestions.js +2 -3
  29. package/dist/components/SearchBar.d.ts +18 -0
  30. package/dist/components/SearchBar.d.ts.map +1 -1
  31. package/dist/components/SearchBar.js +134 -24
  32. package/dist/components/SearchProvider.d.ts +8 -1
  33. package/dist/components/SearchProvider.d.ts.map +1 -1
  34. package/dist/components/SearchProvider.js +16 -4
  35. package/dist/components/SearchResults.d.ts +12 -0
  36. package/dist/components/SearchResults.d.ts.map +1 -1
  37. package/dist/components/SearchResults.js +11 -5
  38. package/dist/components/SortBy.d.ts +44 -4
  39. package/dist/components/SortBy.d.ts.map +1 -1
  40. package/dist/components/SortBy.js +154 -29
  41. package/dist/components/Stats.d.ts +14 -0
  42. package/dist/components/Stats.d.ts.map +1 -1
  43. package/dist/components/Stats.js +172 -23
  44. package/dist/components/section-primitives/SectionItemGrid.d.ts +3 -1
  45. package/dist/components/section-primitives/SectionItemGrid.d.ts.map +1 -1
  46. package/dist/components/section-primitives/SectionItemGrid.js +3 -2
  47. package/dist/components/suggestions/AmazonDropdown.d.ts.map +1 -1
  48. package/dist/components/suggestions/AmazonDropdown.js +4 -6
  49. package/dist/components/suggestions/GoogleDropdown.d.ts.map +1 -1
  50. package/dist/components/suggestions/GoogleDropdown.js +4 -8
  51. package/dist/components/suggestions/MinimalDropdown.d.ts.map +1 -1
  52. package/dist/components/suggestions/MinimalDropdown.js +4 -6
  53. package/dist/components/suggestions/MobileSheetDropdown.d.ts.map +1 -1
  54. package/dist/components/suggestions/MobileSheetDropdown.js +4 -6
  55. package/dist/components/suggestions/PinterestDropdown.d.ts.map +1 -1
  56. package/dist/components/suggestions/PinterestDropdown.js +4 -8
  57. package/dist/components/suggestions/ShopifyDropdown.d.ts.map +1 -1
  58. package/dist/components/suggestions/ShopifyDropdown.js +4 -6
  59. package/dist/components/suggestions/SpotlightDropdown.d.ts.map +1 -1
  60. package/dist/components/suggestions/SpotlightDropdown.js +4 -6
  61. package/dist/components/suggestions/SuggestionSearchBar.d.ts.map +1 -1
  62. package/dist/components/suggestions/SuggestionSearchBar.js +1 -0
  63. package/dist/components/suggestions/types.d.ts +2 -0
  64. package/dist/components/suggestions/types.d.ts.map +1 -1
  65. package/dist/components/suggestions/utils.d.ts +10 -1
  66. package/dist/components/suggestions/utils.d.ts.map +1 -1
  67. package/dist/components/suggestions/utils.js +36 -0
  68. package/dist/components/suggestions-primitives/SuggestionList.d.ts +8 -1
  69. package/dist/components/suggestions-primitives/SuggestionList.d.ts.map +1 -1
  70. package/dist/components/suggestions-primitives/SuggestionList.js +7 -4
  71. package/dist/components/suggestions-primitives/SuggestionsDropdownComposition.d.ts.map +1 -1
  72. package/dist/components/suggestions-primitives/SuggestionsDropdownComposition.js +0 -2
  73. package/dist/components/suggestions-primitives/highlightMarkup.d.ts +16 -4
  74. package/dist/components/suggestions-primitives/highlightMarkup.d.ts.map +1 -1
  75. package/dist/components/suggestions-primitives/highlightMarkup.js +42 -4
  76. package/dist/docsearch/components/Results.d.ts +3 -1
  77. package/dist/docsearch/components/Results.d.ts.map +1 -1
  78. package/dist/docsearch/components/Results.js +6 -2
  79. package/dist/hooks/useClickTracking.d.ts +36 -0
  80. package/dist/hooks/useClickTracking.d.ts.map +1 -0
  81. package/dist/hooks/useClickTracking.js +96 -0
  82. package/dist/hooks/useExperiment.d.ts +25 -0
  83. package/dist/hooks/useExperiment.d.ts.map +1 -0
  84. package/dist/hooks/useExperiment.js +146 -0
  85. package/dist/hooks/useKeyboardNavigation.d.ts +51 -0
  86. package/dist/hooks/useKeyboardNavigation.d.ts.map +1 -0
  87. package/dist/hooks/useKeyboardNavigation.js +113 -0
  88. package/dist/hooks/useQuerySuggestions.d.ts.map +1 -1
  89. package/dist/hooks/useQuerySuggestions.js +19 -3
  90. package/dist/hooks/useQuerySuggestionsEnhanced.d.ts.map +1 -1
  91. package/dist/hooks/useQuerySuggestionsEnhanced.js +25 -7
  92. package/dist/hooks/useSuggestionsAnalytics.d.ts.map +1 -1
  93. package/dist/hooks/useSuggestionsAnalytics.js +6 -1
  94. package/dist/index.d.ts +4 -1
  95. package/dist/index.d.ts.map +1 -1
  96. package/dist/index.umd.js +1 -1
  97. package/dist/src/index.d.ts +249 -19
  98. package/dist/src/index.esm.js +1659 -305
  99. package/dist/src/index.esm.js.map +1 -1
  100. package/dist/src/index.js +1658 -304
  101. package/dist/src/index.js.map +1 -1
  102. package/package.json +3 -3
@@ -13,6 +13,7 @@ export { Fingerprint, FingerprintComponents, FingerprintConfig, FingerprintResul
13
13
  * Interactive search input component with query suggestions support
14
14
  */
15
15
 
16
+ type SearchBarSize = 'small' | 'medium' | 'large';
16
17
  interface SearchBarTheme {
17
18
  container?: string;
18
19
  input?: string;
@@ -22,6 +23,9 @@ interface SearchBarTheme {
22
23
  suggestionItemHover?: string;
23
24
  suggestionItemActive?: string;
24
25
  loadingIndicator?: string;
26
+ searchIcon?: string;
27
+ clearButton?: string;
28
+ submitButton?: string;
25
29
  }
26
30
  interface SearchBarProps {
27
31
  placeholder?: string;
@@ -41,8 +45,22 @@ interface SearchBarProps {
41
45
  className?: string;
42
46
  style?: React__default.CSSProperties;
43
47
  theme?: SearchBarTheme;
48
+ /** Show loading state when fetching and no previous suggestions (default false: show previous results until new render) */
49
+ showLoadingState?: boolean;
44
50
  renderSuggestion?: (suggestion: string, index: number) => React__default.ReactNode;
45
51
  renderLoading?: () => React__default.ReactNode;
52
+ /** Custom render for the search icon. If not provided, a default magnifying glass SVG is rendered. */
53
+ renderSearchIcon?: () => React__default.ReactNode;
54
+ /** Whether to show a clear button when the query is non-empty (default: true) */
55
+ showClearButton?: boolean;
56
+ /** Custom render for the clear icon */
57
+ renderClearIcon?: () => React__default.ReactNode;
58
+ /** Whether to show a submit button to the right of the input (default: false) */
59
+ showSubmitButton?: boolean;
60
+ /** Custom render for the submit button */
61
+ renderSubmitButton?: () => React__default.ReactNode;
62
+ /** Size variant controlling padding and font size (default: 'medium') */
63
+ size?: SearchBarSize;
46
64
  }
47
65
  declare const SearchBar: React__default.FC<SearchBarProps>;
48
66
 
@@ -67,6 +85,10 @@ interface SearchResultsTheme {
67
85
  loadingState?: string;
68
86
  errorState?: string;
69
87
  pagination?: string;
88
+ /** Custom min-height class override */
89
+ minHeight?: string;
90
+ /** Custom min-width class override */
91
+ minWidth?: string;
70
92
  }
71
93
  interface SearchResultsProps {
72
94
  results?: SearchResponse | null;
@@ -75,6 +97,8 @@ interface SearchResultsProps {
75
97
  onResultClick?: (result: ResultItem, index: number) => void;
76
98
  renderResult?: (result: ResultItem, index: number, isActive?: boolean) => React__default.ReactNode;
77
99
  renderEmpty?: () => React__default.ReactNode;
100
+ /** Show loading state when fetching and no previous results (default false: show previous results until new render) */
101
+ showLoadingState?: boolean;
78
102
  renderLoading?: () => React__default.ReactNode;
79
103
  renderError?: (error: Error) => React__default.ReactNode;
80
104
  className?: string;
@@ -92,13 +116,20 @@ interface SearchResultsProps {
92
116
  enableKeyboardNavigation?: boolean;
93
117
  /** Auto-focus the results container */
94
118
  autoFocus?: boolean;
119
+ /** Minimum height to prevent container collapse when empty (default: '400px') */
120
+ minHeight?: string;
121
+ /** Minimum width to prevent container shrinking (default: '100%') */
122
+ minWidth?: string;
123
+ /** Opacity applied to results while loading new results (default: 0.7, set to 1 to disable) */
124
+ loadingOpacity?: number;
95
125
  }
96
126
  declare const SearchResults: React__default.FC<SearchResultsProps>;
97
127
 
98
128
  /**
99
129
  * SearchProvider Component
100
130
  *
101
- * Provides Seekora client and context to child components
131
+ * Provides Seekora client and context to child components.
132
+ * Supports A/B testing via abTestId/abVariant props.
102
133
  */
103
134
 
104
135
  interface SearchContextValue {
@@ -115,6 +146,12 @@ interface SearchProviderProps {
115
146
  autoTrackSearch?: boolean;
116
147
  stateManager?: SearchStateManagerConfig;
117
148
  children: ReactNode;
149
+ /** A/B test experiment ID to include in all analytics events */
150
+ abTestId?: string;
151
+ /** A/B test variant to include in all analytics events */
152
+ abVariant?: string;
153
+ /** Auto-fetch experiment assignments on mount (default: false) */
154
+ experiments?: boolean;
118
155
  }
119
156
  declare const SearchProvider: React__default.FC<SearchProviderProps>;
120
157
  declare const useSearchContext: () => SearchContextValue;
@@ -123,6 +160,7 @@ declare const useSearchContext: () => SearchContextValue;
123
160
  * Stats Component
124
161
  *
125
162
  * Displays search statistics (total results, processing time, etc.)
163
+ * Supports inline, badge, and detailed display variants.
126
164
  */
127
165
 
128
166
  interface StatsTheme {
@@ -130,6 +168,13 @@ interface StatsTheme {
130
168
  text?: string;
131
169
  highlight?: string;
132
170
  separator?: string;
171
+ badge?: string;
172
+ badgeLabel?: string;
173
+ badgeValue?: string;
174
+ detailed?: string;
175
+ detailedRow?: string;
176
+ detailedLabel?: string;
177
+ detailedValue?: string;
133
178
  }
134
179
  interface StatsProps {
135
180
  /** Search results response */
@@ -152,13 +197,28 @@ interface StatsProps {
152
197
  showQuery?: boolean;
153
198
  /** Custom separator between stats */
154
199
  separator?: string;
200
+ /** Display variant */
201
+ variant?: 'inline' | 'badge' | 'detailed';
202
+ /** Show result count (default: true) */
203
+ showResultCount?: boolean;
204
+ /** Custom number formatter (default: toLocaleString) */
205
+ formatNumber?: (n: number) => string;
155
206
  }
156
207
  declare const Stats: React__default.FC<StatsProps>;
157
208
 
158
209
  /**
159
210
  * Pagination Component
160
211
  *
161
- * Displays pagination controls for search results
212
+ * Displays pagination controls for search results.
213
+ * Supports three display variants: numbered, load-more, and simple.
214
+ *
215
+ * CSS Variables (applied to the container element):
216
+ * --seekora-pagination-bg
217
+ * --seekora-pagination-color
218
+ * --seekora-pagination-active-bg
219
+ * --seekora-pagination-active-color
220
+ * --seekora-pagination-border
221
+ * --seekora-pagination-radius
162
222
  */
163
223
 
164
224
  interface PaginationTheme {
@@ -169,6 +229,18 @@ interface PaginationTheme {
169
229
  itemDisabled?: string;
170
230
  link?: string;
171
231
  ellipsis?: string;
232
+ /** Class for the Load More button */
233
+ loadMoreButton?: string;
234
+ /** Class for the Load More descriptive text (e.g. "X remaining") */
235
+ loadMoreText?: string;
236
+ /** Class for the simple variant outer container */
237
+ simpleContainer?: string;
238
+ /** Class for the "Page X of Y" text in the simple variant */
239
+ simpleText?: string;
240
+ /** Class for Previous/Next buttons in the simple variant */
241
+ simpleButton?: string;
242
+ /** Class for the "Page X of Y" info text (usable in any variant) */
243
+ pageInfo?: string;
172
244
  }
173
245
  interface PaginationProps {
174
246
  /** Search results response */
@@ -195,24 +267,81 @@ interface PaginationProps {
195
267
  style?: React__default.CSSProperties;
196
268
  /** Custom theme */
197
269
  theme?: PaginationTheme;
270
+ /**
271
+ * Display variant.
272
+ * - 'numbered' (default): numbered page buttons with prev/next
273
+ * - 'load-more': single "Load More" button
274
+ * - 'simple': Previous / Next buttons with "Page X of Y" text
275
+ */
276
+ variant?: 'numbered' | 'load-more' | 'simple';
277
+ /** Label for the Load More button (default: "Load More") */
278
+ loadMoreText?: string;
279
+ /**
280
+ * Button / text sizing.
281
+ * - 'small': compact
282
+ * - 'medium' (default): standard
283
+ * - 'large': spacious
284
+ */
285
+ size?: 'small' | 'medium' | 'large';
286
+ /**
287
+ * Show "Page X of Y" text.
288
+ * Defaults to false for numbered, true for simple.
289
+ */
290
+ showPageInfo?: boolean;
291
+ /** Label for the Previous button (default: "Previous") */
292
+ previousLabel?: string;
293
+ /** Label for the Next button (default: "Next") */
294
+ nextLabel?: string;
198
295
  }
199
296
  declare const Pagination: React__default.FC<PaginationProps>;
200
297
 
201
298
  /**
202
299
  * SortBy Component
203
300
  *
204
- * Displays sort options for search results
205
- * Integrates with SearchStateManager for automatic state sync
301
+ * Displays sort options for search results in multiple display variants:
302
+ * - dropdown (default) native select element
303
+ * - button-group — horizontal row of toggle buttons
304
+ * - radio-group — vertical list of radio inputs
305
+ *
306
+ * Integrates with SearchStateManager for automatic state sync.
307
+ *
308
+ * CSS Variables (apply on a parent element to customize):
309
+ * --seekora-sort-bg — background color
310
+ * --seekora-sort-color — text color
311
+ * --seekora-sort-border — border color
312
+ * --seekora-sort-active-bg — active item background
313
+ * --seekora-sort-active-color — active item text color
206
314
  */
207
315
 
208
316
  interface SortOption {
209
317
  value: string;
210
318
  label: string;
211
319
  }
320
+ type SortByVariant = 'dropdown' | 'button-group' | 'radio-group';
321
+ type SortBySize = 'small' | 'medium' | 'large';
212
322
  interface SortByTheme {
323
+ /** Root container */
213
324
  container?: string;
325
+ /** Dropdown select element */
214
326
  select?: string;
327
+ /** Dropdown option element */
215
328
  option?: string;
329
+ /** Optional label above the control */
330
+ label?: string;
331
+ /** Button group wrapper */
332
+ buttonGroup?: string;
333
+ /** Individual button in the group */
334
+ buttonGroupItem?: string;
335
+ /** Active button in the group */
336
+ buttonGroupItemActive?: string;
337
+ /** Radio group wrapper */
338
+ radioGroup?: string;
339
+ /** Individual radio row (input + label) */
340
+ radioItem?: string;
341
+ /** Active radio row */
342
+ radioItemActive?: string;
343
+ /** Radio label text */
344
+ radioLabel?: string;
216
345
  }
217
346
  interface SortByProps {
218
347
  /** Available sort options */
@@ -223,7 +352,7 @@ interface SortByProps {
223
352
  defaultValue?: string;
224
353
  /** Callback when sort changes */
225
354
  onSortChange?: (value: string) => void;
226
- /** Custom render function for select */
355
+ /** Custom render function for select (only used in dropdown variant) */
227
356
  renderSelect?: (props: {
228
357
  value: string;
229
358
  onChange: (e: React__default.ChangeEvent<HTMLSelectElement>) => void;
@@ -235,17 +364,26 @@ interface SortByProps {
235
364
  style?: React__default.CSSProperties;
236
365
  /** Custom theme */
237
366
  theme?: SortByTheme;
238
- /** Placeholder text */
367
+ /** Placeholder text (dropdown variant) */
239
368
  placeholder?: string;
240
369
  /** Whether to sync with SearchStateManager (default: true) */
241
370
  syncWithState?: boolean;
371
+ /** Display variant (default: 'dropdown') */
372
+ variant?: SortByVariant;
373
+ /** Optional label text displayed above the control */
374
+ label?: string;
375
+ /** Whether to show the label (default: true when label is provided) */
376
+ showLabel?: boolean;
377
+ /** Size variant affecting padding and font size (default: 'medium') */
378
+ size?: SortBySize;
242
379
  }
243
380
  declare const SortBy: React__default.FC<SortByProps>;
244
381
 
245
382
  /**
246
383
  * Facets Component
247
384
  *
248
- * Displays facet filters for search results
385
+ * Displays facet filters for search results with multiple display variants,
386
+ * client-side search, count badges, and color swatch support.
249
387
  */
250
388
 
251
389
  interface FacetItem {
@@ -269,7 +407,23 @@ interface FacetsTheme {
269
407
  facetItemCount?: string;
270
408
  facetItemLabel?: string;
271
409
  checkbox?: string;
272
- }
410
+ /** Color swatch circle/square */
411
+ colorSwatch?: string;
412
+ /** Color swatch when selected */
413
+ colorSwatchSelected?: string;
414
+ /** Inner element of color swatch (for checkmark overlay) */
415
+ colorSwatchInner?: string;
416
+ /** Search input within a facet group */
417
+ searchInput?: string;
418
+ /** Collapsible header row */
419
+ collapsibleHeader?: string;
420
+ /** Chevron/expand icon in collapsible header */
421
+ collapsibleIcon?: string;
422
+ /** Count badge pill */
423
+ countBadge?: string;
424
+ }
425
+ type FacetVariant = 'checkbox' | 'color-swatch' | 'collapsible';
426
+ type FacetSize = 'small' | 'medium' | 'large';
273
427
  interface FacetsProps {
274
428
  /** Search results response */
275
429
  results?: SearchResponse | null;
@@ -291,13 +445,26 @@ interface FacetsProps {
291
445
  style?: React__default.CSSProperties;
292
446
  /** Custom theme */
293
447
  theme?: FacetsTheme;
448
+ /** Display variant: checkbox (default), color-swatch, or collapsible */
449
+ variant?: FacetVariant;
450
+ /** When true, show a search input at the top of each facet group */
451
+ searchable?: boolean;
452
+ /** Show count badges (default: true) */
453
+ showCounts?: boolean;
454
+ /** Maps facet values to CSS colors (used by color-swatch variant) */
455
+ colorMap?: Record<string, string>;
456
+ /** For collapsible variant, whether facets start collapsed (default: false) */
457
+ defaultCollapsed?: boolean;
458
+ /** Size preset: small, medium (default), or large */
459
+ size?: FacetSize;
294
460
  }
295
461
  declare const Facets: React__default.FC<FacetsProps>;
296
462
 
297
463
  /**
298
464
  * CurrentRefinements Component
299
465
  *
300
- * Displays currently active filters/refinements with ability to clear them
466
+ * Displays currently active filters/refinements with ability to clear them.
467
+ * Supports StateManager auto-sync, display variants, layout modes, and animations.
301
468
  */
302
469
 
303
470
  interface Refinement {
@@ -314,9 +481,20 @@ interface CurrentRefinementsTheme {
314
481
  value?: string;
315
482
  clearButton?: string;
316
483
  clearAllButton?: string;
317
- }
484
+ /** Variant-specific class slots */
485
+ chip?: string;
486
+ tag?: string;
487
+ pill?: string;
488
+ badge?: string;
489
+ group?: string;
490
+ groupLabel?: string;
491
+ }
492
+ /** Display variant for refinement items */
493
+ type RefinementVariant = 'chips' | 'tags' | 'pills' | 'badges' | 'text-list';
494
+ /** Layout variant for the container */
495
+ type RefinementLayout = 'horizontal' | 'vertical' | 'grouped';
318
496
  interface CurrentRefinementsProps {
319
- /** Current refinements */
497
+ /** Current refinements (if not provided, auto-reads from StateManager) */
320
498
  refinements?: Refinement[];
321
499
  /** Callback when a refinement is cleared */
322
500
  onRefinementClear?: (field: string, value: string) => void;
@@ -326,6 +504,14 @@ interface CurrentRefinementsProps {
326
504
  renderRefinement?: (refinement: Refinement, index: number) => React__default.ReactNode;
327
505
  /** Show "Clear all" button */
328
506
  showClearAll?: boolean;
507
+ /** Display variant (default: 'chips') */
508
+ variant?: RefinementVariant;
509
+ /** Layout mode (default: 'horizontal') */
510
+ layout?: RefinementLayout;
511
+ /** Per-field color mapping */
512
+ fieldColors?: Record<string, string>;
513
+ /** Custom close icon renderer */
514
+ renderCloseIcon?: () => React__default.ReactNode;
329
515
  /** Custom className */
330
516
  className?: string;
331
517
  /** Custom styles */
@@ -533,6 +719,8 @@ interface InfiniteHitsProps {
533
719
  renderHit?: (hit: ResultItem, index: number) => React__default.ReactNode;
534
720
  /** Custom render for empty state */
535
721
  renderEmpty?: () => React__default.ReactNode;
722
+ /** Show initial loading when fetching and no hits yet (default false: no loading screen) */
723
+ showInitialLoading?: boolean;
536
724
  /** Custom render for loading state */
537
725
  renderLoading?: () => React__default.ReactNode;
538
726
  /** Custom render for "Show More" button */
@@ -888,6 +1076,8 @@ interface RelatedProductsProps extends BaseRecommendationProps {
888
1076
  items?: RecommendationItem[];
889
1077
  /** Loading state */
890
1078
  loading?: boolean;
1079
+ /** Show loading state when fetching and no previous items (default false: show previous results until new render) */
1080
+ showLoadingState?: boolean;
891
1081
  }
892
1082
  declare const RelatedProducts: React__default.FC<RelatedProductsProps>;
893
1083
  interface TrendingItemsProps extends BaseRecommendationProps {
@@ -895,6 +1085,8 @@ interface TrendingItemsProps extends BaseRecommendationProps {
895
1085
  items?: RecommendationItem[];
896
1086
  /** Loading state */
897
1087
  loading?: boolean;
1088
+ /** Show loading state when fetching and no previous items (default false: show previous results until new render) */
1089
+ showLoadingState?: boolean;
898
1090
  /** Facet name for trending (if using facet data) */
899
1091
  facetName?: string;
900
1092
  }
@@ -906,6 +1098,8 @@ interface FrequentlyBoughtTogetherProps extends BaseRecommendationProps {
906
1098
  items?: RecommendationItem[];
907
1099
  /** Loading state */
908
1100
  loading?: boolean;
1101
+ /** Show loading state when fetching and no previous items (default false: show previous results until new render) */
1102
+ showLoadingState?: boolean;
909
1103
  /** Show "Add all to cart" button */
910
1104
  showAddAllButton?: boolean;
911
1105
  /** Callback when "Add all" is clicked */
@@ -952,6 +1146,8 @@ interface QuerySuggestionsProps {
952
1146
  minQueryLength?: number;
953
1147
  onSuggestionClick?: (suggestion: string) => void;
954
1148
  renderSuggestion?: (suggestion: SuggestionItem$2, index: number) => React__default.ReactNode;
1149
+ /** Show loading state when fetching and no previous suggestions (default false: show previous results until new render) */
1150
+ showLoadingState?: boolean;
955
1151
  renderLoading?: () => React__default.ReactNode;
956
1152
  renderEmpty?: () => React__default.ReactNode;
957
1153
  showTitle?: boolean;
@@ -991,7 +1187,7 @@ interface QuerySuggestionsDropdownProps extends QuerySuggestionsEventHandlers {
991
1187
  maxRecentSearches?: number;
992
1188
  /** Show suggestion counts */
993
1189
  showCounts?: boolean;
994
- /** Show loading state */
1190
+ /** Show loading state (default false: show previous results until new results render) */
995
1191
  showLoading?: boolean;
996
1192
  /** Show empty state when no results */
997
1193
  showEmptyState?: boolean;
@@ -1104,6 +1300,10 @@ interface RichQuerySuggestionsProps extends QuerySuggestionsEventHandlers {
1104
1300
  header?: React__default.ReactNode;
1105
1301
  /** Custom footer content */
1106
1302
  footer?: React__default.ReactNode;
1303
+ /** Show loading overlay when fetching (default false: show previous results until new results render) */
1304
+ showLoadingOverlay?: boolean;
1305
+ /** Custom render for loading overlay (only when showLoadingOverlay is true) */
1306
+ renderLoading?: () => React__default.ReactNode;
1107
1307
  /** Dropdown width */
1108
1308
  width?: string | number;
1109
1309
  /** Dropdown max height */
@@ -1114,6 +1314,13 @@ interface RichQuerySuggestionsProps extends QuerySuggestionsEventHandlers {
1114
1314
  ariaLabel?: string;
1115
1315
  /** Analytics tags */
1116
1316
  analyticsTags?: string[];
1317
+ /** Highlight options for query suggestions (passed to highlight rendering) */
1318
+ highlightOptions?: {
1319
+ highlightColor?: string;
1320
+ highlightTextColor?: string;
1321
+ highlightFontWeight?: string | number;
1322
+ highlightStyle?: 'background' | 'underline' | 'bold' | 'color-only';
1323
+ };
1117
1324
  }
1118
1325
  interface RichQuerySuggestionsRef {
1119
1326
  getActiveIndex: () => number;
@@ -1564,19 +1771,31 @@ declare function DropdownPanel({ children, position, top, left, right, width, ma
1564
1771
 
1565
1772
  /**
1566
1773
  * Parses suggestion text containing <mark>...</mark> and returns React nodes
1567
- * with the marked segments rendered as <mark> elements. Safe: inner content
1774
+ * with the marked segments rendered as styled elements. Safe: inner content
1568
1775
  * is rendered as text, not HTML.
1569
1776
  */
1570
1777
 
1778
+ /** Visual highlight styles */
1779
+ type HighlightStyle = 'background' | 'underline' | 'bold' | 'color-only';
1571
1780
  interface HighlightMarkupOptions {
1572
- /** Class name for the <mark> element. */
1781
+ /** Class name for the highlight element. */
1573
1782
  markClassName?: string;
1574
- /** Inline style for the <mark> element. */
1783
+ /** Inline style for the highlight element (merged with computed styles). */
1575
1784
  markStyle?: React__default.CSSProperties;
1785
+ /** Override background color for highlighted segments */
1786
+ highlightColor?: string;
1787
+ /** Text color for highlighted segments */
1788
+ highlightTextColor?: string;
1789
+ /** Font weight for highlighted segments */
1790
+ highlightFontWeight?: string | number;
1791
+ /** Visual highlight style (default: 'background') */
1792
+ highlightStyle?: HighlightStyle;
1793
+ /** Which HTML element to render for highlights (default: 'mark') */
1794
+ highlightTag?: keyof JSX.IntrinsicElements;
1576
1795
  }
1577
1796
  /**
1578
1797
  * Converts a string like "lined <mark>blue</mark>" into React nodes with
1579
- * the marked part rendered as a <mark> element. When no <mark> tags are
1798
+ * the marked part rendered as a styled element. When no <mark> tags are
1580
1799
  * present, returns the string as-is.
1581
1800
  */
1582
1801
  declare function parseHighlightMarkup(text: string, options?: HighlightMarkupOptions): React__default.ReactNode;
@@ -1586,6 +1805,13 @@ interface SuggestionListProps {
1586
1805
  className?: string;
1587
1806
  style?: React__default.CSSProperties;
1588
1807
  listClassName?: string;
1808
+ /**
1809
+ * When true, show a loading state when fetching and no previous suggestions exist.
1810
+ * When false (default), show previous results until new results render; no loading screen.
1811
+ */
1812
+ showLoadingState?: boolean;
1813
+ /** Custom render for loading state (only when showLoadingState is true and loading with no items). */
1814
+ renderLoading?: () => React__default.ReactNode;
1589
1815
  /**
1590
1816
  * When true (default), suggestion text with <mark>...</mark> is rendered
1591
1817
  * with those segments highlighted. When false, plain text is shown.
@@ -1596,7 +1822,7 @@ interface SuggestionListProps {
1596
1822
  highlightMarkupOptions?: HighlightMarkupOptions;
1597
1823
  renderItem?: (suggestion: _seekora_ai_ui_sdk_types.SuggestionItem, index: number, isActive: boolean, onSelect: () => void) => React__default.ReactNode;
1598
1824
  }
1599
- declare function SuggestionList({ maxItems, className, style, listClassName, enableHighlightMarkup, highlightMarkupOptions, renderItem, }: SuggestionListProps): React__default.JSX.Element | null;
1825
+ declare function SuggestionList({ maxItems, className, style, listClassName, showLoadingState, renderLoading, enableHighlightMarkup, highlightMarkupOptions, renderItem, }: SuggestionListProps): React__default.JSX.Element | null;
1600
1826
 
1601
1827
  /**
1602
1828
  * SuggestionItem – single text suggestion row (primitive)
@@ -2114,6 +2340,8 @@ interface BaseDropdownProps<TSuggestion = any, TProduct = any, TCategory = any,
2114
2340
  /** Custom footer */
2115
2341
  footer?: ReactNode;
2116
2342
  /** Custom loading state */
2343
+ /** Show loading state when fetching and no previous items (default false: show previous results until new render) */
2344
+ showLoadingState?: boolean;
2117
2345
  renderLoading?: () => ReactNode;
2118
2346
  /** Custom empty state */
2119
2347
  renderEmpty?: (query: string) => ReactNode;
@@ -2662,6 +2890,8 @@ interface SectionItemGridProps {
2662
2890
  maxItems?: number;
2663
2891
  className?: string;
2664
2892
  style?: React__default.CSSProperties;
2893
+ /** Show loading state when fetching and no previous items (default false: show previous results until new render) */
2894
+ showLoadingState?: boolean;
2665
2895
  getItemId?: (item: unknown) => string;
2666
2896
  getItemTitle?: (item: unknown) => string;
2667
2897
  getItemImage?: (item: unknown) => string | undefined;
@@ -2669,7 +2899,7 @@ interface SectionItemGridProps {
2669
2899
  getItemUrl?: (item: unknown) => string | undefined;
2670
2900
  renderItem?: (item: unknown, index: number) => React__default.ReactNode;
2671
2901
  }
2672
- declare function SectionItemGrid({ columns, maxItems, className, style, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, }: SectionItemGridProps): React__default.JSX.Element;
2902
+ declare function SectionItemGrid({ columns, maxItems, className, style, showLoadingState, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, }: SectionItemGridProps): React__default.JSX.Element;
2673
2903
 
2674
2904
  /**
2675
2905
  * SectionLoading – loading state for section (primitive)
@@ -4089,4 +4319,4 @@ declare function updateSuggestionsStyles(theme: SuggestionsThemeVariables): void
4089
4319
  declare const createTheme: (config: ThemeConfig) => _seekora_ai_ui_sdk_types.Theme;
4090
4320
 
4091
4321
  export { ActionButtons, AmazonDropdown, AnalyticsProvider, BadgeList, Breadcrumb, CategoriesTabs, ClearRefinements, CurrentRefinements, DocSearch, DocSearchButton, DropdownPanel, Facets, FederatedDropdown, FrequentlyBoughtTogether, GoogleDropdown, HierarchicalMenu, Highlight, HitsPerPage, ImageDisplay, ImageZoom, InfiniteHits, ItemCard, ItemGrid, MinimalDropdown, MobileFilters, MobileFiltersButton, MobileSheetDropdown, Pagination, PinterestDropdown, PriceDisplay, ProductCard, ProductGallery, ProductGrid, ProductInfo, ProductRecommendations, QuerySuggestions, QuerySuggestionsDropdown, RangeInput, RangeSlider, RatingDisplay, RecentSearchesList, RecentlyViewed, RelatedProducts, RichQuerySuggestions, SearchBar, SearchBarWithSuggestions, SearchInput, SearchLayout, SearchProvider, SearchResults, SectionError, SectionItemGrid, SectionLoading, SectionSearchProvider, ShopifyDropdown, Snippet, SortBy, SpotlightDropdown, Stats, SuggestionDropdownVariants, SuggestionItem$1 as SuggestionItem, SuggestionList, SuggestionSearchBar, SuggestionsCache, SuggestionsDropdownComposition, SuggestionsError, SuggestionsLoading, SuggestionsProvider, TrendingItems, TrendingList, VariantSelector, VariantSwatches, addRecentSearch, addToRecentlyViewed, brandPresets, breakpoints, clearRecentSearches, clearSuggestionsCache, createSuggestionsCache, createSuggestionsTheme, createTheme, darkTheme, darkThemeVariables, defaultTheme, extractBadges, extractBrand, extractCategory, extractProduct, extractSuggestion, findVariantBySelections, formatParsedFilters, formatPriceRange, formatPrice as formatSuggestionPrice, generateSuggestionsStylesheet, getAvailableValuesForOption, getPriceRange, getRecentSearches, getShortcutText, getSuggestionsCache, highlightText, injectGlobalResponsiveStyles, injectSuggestionsStyles, lightThemeVariables, mediaQueries, minimalTheme, minimalThemeVariables, parseHighlightMarkup, removeRecentSearch, touchTargets, updateSuggestionsStyles, useAnalytics, useAnalyticsProvider, useDocSearch, useSeekoraSearch$1 as useDocSearchSeekoraSearch, useInjectResponsiveStyles, useKeyboard, useNaturalLanguageFilters, useProductAnalytics, useQuerySuggestions, useQuerySuggestionsEnhanced, useResponsive, useSearchContext, useSearchState, useSectionSearchContext, useSeekoraSearch, useSmartSuggestions, useSuggestionsAnalytics, useSuggestionsContext, useVariantSelection, withAnalytics };
4092
- export type { ActionButton, ActionButtonType, ActionButtonsProps, AnalyticsConfig, AnalyticsEventPayload, AnalyticsProviderProps, BadgeListProps, BaseDropdownProps, BrandFieldMapping, BreadcrumbItem, BreadcrumbProps, BreadcrumbTheme, CategoriesTabsProps, CategoryFieldMapping, ClearRefinementsProps, ClearRefinementsTheme, DocSearchAction, DocSearchButtonProps, DocSearchHit, DocSearchProps, DocSearchResponse, DocSearchState, DocSearchSuggestion, DocSearchSuggestionsResponse, DocSearchTranslations, DropdownClassNames, DropdownEventHandlers, DropdownPanelProps, DropdownRef, DropdownThemeConfig, FederatedDropdownProps, FederatedDropdownRef, FrequentlyBoughtTogetherProps, GenericItem, HierarchicalMenuItem, HierarchicalMenuProps, HierarchicalMenuTheme, HighlightMarkupOptions, HighlightProps, HighlightTheme, HitsPerPageItem, HitsPerPageProps, HitsPerPageTheme, ImageDisplayProps, ImageDisplayVariant, ImageZoomMode, ImageZoomProps, InfiniteHitsProps, InfiniteHitsTheme, ImageDisplayVariant$1 as ItemCardImageVariant, ItemCardProps, ItemGridProps, MobileFiltersButtonProps, MobileFiltersProps, MobileFiltersTheme, NaturalLanguageFiltersOptions, NaturalLanguageResult, NavigableItem, ParsedFilter, PriceDisplayProps, ProductCardImageVariant, ProductCardProps, ProductClickEventData, ProductDisplayConfig, ProductFieldMapping, ProductGalleryProps, ProductGridProps, ProductInfoProps, ProductRecommendationsProps, QuerySuggestionsDropdownProps, QuerySuggestionsDropdownRef, QuerySuggestionsProps, QuerySuggestionsTheme, RangeSliderProps, RangeSliderTheme, RatingDisplayProps, RatingSize, RatingVariant, RecentSearchesListProps, RecentlyViewedProps, RecommendationItem, RecommendationTheme, RefinementInput, RelatedProductsProps, ResponsiveState, RichQuerySuggestionsProps, RichQuerySuggestionsRef, SearchBarProps, SearchBarTheme, SearchBarWithSuggestionsProps, SearchBarWithSuggestionsRef, SearchInputProps, SearchProviderProps, SearchResultsProps, SearchResultsTheme, SearchSource, SectionConfig, SectionErrorProps, SectionItemGridProps, SectionLoadingProps, SectionSearchContextValue, SectionSearchProviderProps, SmartSuggestion, SmartSuggestionsOptions, SnippetProps, SnippetTheme, SuggestionClickEventData, SuggestionDisplayConfig, SuggestionDropdownVariant, SuggestionFieldMapping, SuggestionImpressionEventData, SuggestionItemProps, SuggestionListProps, SuggestionSearchBarProps, SuggestionSearchBarRef, SuggestionsContextValue, SuggestionsDropdownCompositionProps, SuggestionsErrorProps, SuggestionsLoadingProps, SuggestionsProviderProps, SuggestionsThemeVariables, TrendingItemsProps, TrendingListProps, UseAnalyticsOptions, UseAnalyticsReturn, UseSeekoraSearchOptions$1 as UseDocSearchSeekoraSearchOptions, UseSeekoraSearchResult as UseDocSearchSeekoraSearchResult, UseProductAnalyticsOptions, UseProductAnalyticsReturn, UseQuerySuggestionsEnhancedOptions, UseQuerySuggestionsEnhancedReturn, UseSmartSuggestionsReturn, UseSuggestionsAnalyticsOptions, UseSuggestionsAnalyticsReturn, UseVariantSelectionOptions, UseVariantSelectionReturn, VariantSelectorProps, VariantSwatchesProps, WithAnalyticsConfig, WithAnalyticsInjectedProps };
4322
+ export type { ActionButton, ActionButtonType, ActionButtonsProps, AnalyticsConfig, AnalyticsEventPayload, AnalyticsProviderProps, BadgeListProps, BaseDropdownProps, BrandFieldMapping, BreadcrumbItem, BreadcrumbProps, BreadcrumbTheme, CategoriesTabsProps, CategoryFieldMapping, ClearRefinementsProps, ClearRefinementsTheme, DocSearchAction, DocSearchButtonProps, DocSearchHit, DocSearchProps, DocSearchResponse, DocSearchState, DocSearchSuggestion, DocSearchSuggestionsResponse, DocSearchTranslations, DropdownClassNames, DropdownEventHandlers, DropdownPanelProps, DropdownRef, DropdownThemeConfig, Facet, FacetItem, FacetSize, FacetVariant, FacetsProps, FacetsTheme, FederatedDropdownProps, FederatedDropdownRef, FrequentlyBoughtTogetherProps, GenericItem, HierarchicalMenuItem, HierarchicalMenuProps, HierarchicalMenuTheme, HighlightMarkupOptions, HighlightProps, HighlightTheme, HitsPerPageItem, HitsPerPageProps, HitsPerPageTheme, ImageDisplayProps, ImageDisplayVariant, ImageZoomMode, ImageZoomProps, InfiniteHitsProps, InfiniteHitsTheme, ImageDisplayVariant$1 as ItemCardImageVariant, ItemCardProps, ItemGridProps, MobileFiltersButtonProps, MobileFiltersProps, MobileFiltersTheme, NaturalLanguageFiltersOptions, NaturalLanguageResult, NavigableItem, PaginationProps, PaginationTheme, ParsedFilter, PriceDisplayProps, ProductCardImageVariant, ProductCardProps, ProductClickEventData, ProductDisplayConfig, ProductFieldMapping, ProductGalleryProps, ProductGridProps, ProductInfoProps, ProductRecommendationsProps, QuerySuggestionsDropdownProps, QuerySuggestionsDropdownRef, QuerySuggestionsProps, QuerySuggestionsTheme, RangeSliderProps, RangeSliderTheme, RatingDisplayProps, RatingSize, RatingVariant, RecentSearchesListProps, RecentlyViewedProps, RecommendationItem, RecommendationTheme, RefinementInput, RelatedProductsProps, ResponsiveState, RichQuerySuggestionsProps, RichQuerySuggestionsRef, SearchBarProps, SearchBarSize, SearchBarTheme, SearchBarWithSuggestionsProps, SearchBarWithSuggestionsRef, SearchInputProps, SearchProviderProps, SearchResultsProps, SearchResultsTheme, SearchSource, SectionConfig, SectionErrorProps, SectionItemGridProps, SectionLoadingProps, SectionSearchContextValue, SectionSearchProviderProps, SmartSuggestion, SmartSuggestionsOptions, SnippetProps, SnippetTheme, SortByProps, SortBySize, SortByTheme, SortByVariant, SortOption, SuggestionClickEventData, SuggestionDisplayConfig, SuggestionDropdownVariant, SuggestionFieldMapping, SuggestionImpressionEventData, SuggestionItemProps, SuggestionListProps, SuggestionSearchBarProps, SuggestionSearchBarRef, SuggestionsContextValue, SuggestionsDropdownCompositionProps, SuggestionsErrorProps, SuggestionsLoadingProps, SuggestionsProviderProps, SuggestionsThemeVariables, TrendingItemsProps, TrendingListProps, UseAnalyticsOptions, UseAnalyticsReturn, UseSeekoraSearchOptions$1 as UseDocSearchSeekoraSearchOptions, UseSeekoraSearchResult as UseDocSearchSeekoraSearchResult, UseProductAnalyticsOptions, UseProductAnalyticsReturn, UseQuerySuggestionsEnhancedOptions, UseQuerySuggestionsEnhancedReturn, UseSmartSuggestionsReturn, UseSuggestionsAnalyticsOptions, UseSuggestionsAnalyticsReturn, UseVariantSelectionOptions, UseVariantSelectionReturn, VariantSelectorProps, VariantSwatchesProps, WithAnalyticsConfig, WithAnalyticsInjectedProps };