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

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 (117) 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 +259 -47
  4. package/dist/components/FacetDropdown.d.ts +92 -0
  5. package/dist/components/FacetDropdown.d.ts.map +1 -0
  6. package/dist/components/FacetDropdown.js +374 -0
  7. package/dist/components/Facets.d.ts +56 -1
  8. package/dist/components/Facets.d.ts.map +1 -1
  9. package/dist/components/Facets.js +602 -41
  10. package/dist/components/FederatedDropdown.d.ts.map +1 -1
  11. package/dist/components/FederatedDropdown.js +45 -31
  12. package/dist/components/HierarchicalMenu.d.ts.map +1 -1
  13. package/dist/components/HierarchicalMenu.js +112 -4
  14. package/dist/components/Pagination.d.ts +47 -1
  15. package/dist/components/Pagination.d.ts.map +1 -1
  16. package/dist/components/Pagination.js +166 -28
  17. package/dist/components/QuerySuggestionsDropdown.d.ts.map +1 -1
  18. package/dist/components/QuerySuggestionsDropdown.js +32 -18
  19. package/dist/components/RangeInput.d.ts.map +1 -1
  20. package/dist/components/RangeInput.js +6 -6
  21. package/dist/components/RangeSlider.d.ts.map +1 -1
  22. package/dist/components/RangeSlider.js +101 -32
  23. package/dist/components/RichQuerySuggestions.d.ts +7 -0
  24. package/dist/components/RichQuerySuggestions.d.ts.map +1 -1
  25. package/dist/components/RichQuerySuggestions.js +40 -26
  26. package/dist/components/SearchBar.d.ts +16 -0
  27. package/dist/components/SearchBar.d.ts.map +1 -1
  28. package/dist/components/SearchBar.js +139 -17
  29. package/dist/components/SearchBarWithSuggestions.js +3 -3
  30. package/dist/components/SearchLayout.d.ts.map +1 -1
  31. package/dist/components/SearchLayout.js +10 -1
  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 +10 -0
  36. package/dist/components/SearchResults.d.ts.map +1 -1
  37. package/dist/components/SearchResults.js +46 -30
  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/primitives/ActionButtons.d.ts.map +1 -1
  45. package/dist/components/primitives/ActionButtons.js +34 -10
  46. package/dist/components/primitives/BadgeList.d.ts.map +1 -1
  47. package/dist/components/primitives/BadgeList.js +33 -13
  48. package/dist/components/primitives/ImageDisplay.d.ts.map +1 -1
  49. package/dist/components/primitives/ImageDisplay.js +11 -8
  50. package/dist/components/primitives/ImageZoom.js +26 -26
  51. package/dist/components/primitives/VariantSelector.js +10 -10
  52. package/dist/components/primitives/VariantSwatches.js +3 -3
  53. package/dist/components/product-page/ProductGallery.d.ts +8 -1
  54. package/dist/components/product-page/ProductGallery.d.ts.map +1 -1
  55. package/dist/components/product-page/ProductGallery.js +2 -2
  56. package/dist/components/section-primitives/SectionSearchProvider.d.ts +3 -1
  57. package/dist/components/section-primitives/SectionSearchProvider.d.ts.map +1 -1
  58. package/dist/components/section-primitives/SectionSearchProvider.js +3 -2
  59. package/dist/components/suggestions/AmazonDropdown.d.ts.map +1 -1
  60. package/dist/components/suggestions/AmazonDropdown.js +2 -4
  61. package/dist/components/suggestions/GoogleDropdown.d.ts.map +1 -1
  62. package/dist/components/suggestions/GoogleDropdown.js +2 -6
  63. package/dist/components/suggestions/MinimalDropdown.d.ts.map +1 -1
  64. package/dist/components/suggestions/MinimalDropdown.js +2 -4
  65. package/dist/components/suggestions/MobileSheetDropdown.d.ts.map +1 -1
  66. package/dist/components/suggestions/MobileSheetDropdown.js +20 -22
  67. package/dist/components/suggestions/PinterestDropdown.d.ts.map +1 -1
  68. package/dist/components/suggestions/PinterestDropdown.js +2 -6
  69. package/dist/components/suggestions/ShopifyDropdown.d.ts.map +1 -1
  70. package/dist/components/suggestions/ShopifyDropdown.js +39 -41
  71. package/dist/components/suggestions/SpotlightDropdown.d.ts.map +1 -1
  72. package/dist/components/suggestions/SpotlightDropdown.js +2 -4
  73. package/dist/components/suggestions/utils.d.ts +10 -1
  74. package/dist/components/suggestions/utils.d.ts.map +1 -1
  75. package/dist/components/suggestions/utils.js +36 -0
  76. package/dist/components/suggestions-primitives/DropdownPanel.d.ts.map +1 -1
  77. package/dist/components/suggestions-primitives/DropdownPanel.js +15 -2
  78. package/dist/components/suggestions-primitives/ItemCard.d.ts.map +1 -1
  79. package/dist/components/suggestions-primitives/ItemCard.js +21 -8
  80. package/dist/components/suggestions-primitives/ItemGrid.d.ts.map +1 -1
  81. package/dist/components/suggestions-primitives/ItemGrid.js +9 -3
  82. package/dist/components/suggestions-primitives/ProductCard.d.ts.map +1 -1
  83. package/dist/components/suggestions-primitives/ProductCard.js +25 -10
  84. package/dist/components/suggestions-primitives/ProductCardLayouts.d.ts.map +1 -1
  85. package/dist/components/suggestions-primitives/ProductCardLayouts.js +24 -12
  86. package/dist/components/suggestions-primitives/SearchInput.d.ts.map +1 -1
  87. package/dist/components/suggestions-primitives/SearchInput.js +28 -9
  88. package/dist/components/suggestions-primitives/SuggestionItem.d.ts.map +1 -1
  89. package/dist/components/suggestions-primitives/SuggestionItem.js +3 -0
  90. package/dist/components/suggestions-primitives/highlightMarkup.d.ts +16 -4
  91. package/dist/components/suggestions-primitives/highlightMarkup.d.ts.map +1 -1
  92. package/dist/components/suggestions-primitives/highlightMarkup.js +42 -4
  93. package/dist/hooks/useClickTracking.d.ts +36 -0
  94. package/dist/hooks/useClickTracking.d.ts.map +1 -0
  95. package/dist/hooks/useClickTracking.js +96 -0
  96. package/dist/hooks/useExperiment.d.ts +25 -0
  97. package/dist/hooks/useExperiment.d.ts.map +1 -0
  98. package/dist/hooks/useExperiment.js +146 -0
  99. package/dist/hooks/useKeyboardNavigation.d.ts +51 -0
  100. package/dist/hooks/useKeyboardNavigation.d.ts.map +1 -0
  101. package/dist/hooks/useKeyboardNavigation.js +113 -0
  102. package/dist/hooks/useQuerySuggestions.d.ts.map +1 -1
  103. package/dist/hooks/useQuerySuggestions.js +19 -3
  104. package/dist/hooks/useQuerySuggestionsEnhanced.d.ts.map +1 -1
  105. package/dist/hooks/useQuerySuggestionsEnhanced.js +23 -6
  106. package/dist/hooks/useSuggestionsAnalytics.d.ts.map +1 -1
  107. package/dist/hooks/useSuggestionsAnalytics.js +6 -1
  108. package/dist/index.d.ts +6 -1
  109. package/dist/index.d.ts.map +1 -1
  110. package/dist/index.js +1 -0
  111. package/dist/index.umd.js +1 -1
  112. package/dist/src/index.d.ts +345 -19
  113. package/dist/src/index.esm.js +2869 -787
  114. package/dist/src/index.esm.js.map +1 -1
  115. package/dist/src/index.js +2868 -785
  116. package/dist/src/index.js.map +1 -1
  117. package/package.json +6 -6
@@ -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;
@@ -45,6 +49,18 @@ interface SearchBarProps {
45
49
  showLoadingState?: boolean;
46
50
  renderSuggestion?: (suggestion: string, index: number) => React__default.ReactNode;
47
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;
48
64
  }
49
65
  declare const SearchBar: React__default.FC<SearchBarProps>;
50
66
 
@@ -69,6 +85,10 @@ interface SearchResultsTheme {
69
85
  loadingState?: string;
70
86
  errorState?: string;
71
87
  pagination?: string;
88
+ /** Custom min-height class override */
89
+ minHeight?: string;
90
+ /** Custom min-width class override */
91
+ minWidth?: string;
72
92
  }
73
93
  interface SearchResultsProps {
74
94
  results?: SearchResponse | null;
@@ -96,13 +116,20 @@ interface SearchResultsProps {
96
116
  enableKeyboardNavigation?: boolean;
97
117
  /** Auto-focus the results container */
98
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;
99
125
  }
100
126
  declare const SearchResults: React__default.FC<SearchResultsProps>;
101
127
 
102
128
  /**
103
129
  * SearchProvider Component
104
130
  *
105
- * 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.
106
133
  */
107
134
 
108
135
  interface SearchContextValue {
@@ -119,6 +146,12 @@ interface SearchProviderProps {
119
146
  autoTrackSearch?: boolean;
120
147
  stateManager?: SearchStateManagerConfig;
121
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;
122
155
  }
123
156
  declare const SearchProvider: React__default.FC<SearchProviderProps>;
124
157
  declare const useSearchContext: () => SearchContextValue;
@@ -127,6 +160,7 @@ declare const useSearchContext: () => SearchContextValue;
127
160
  * Stats Component
128
161
  *
129
162
  * Displays search statistics (total results, processing time, etc.)
163
+ * Supports inline, badge, and detailed display variants.
130
164
  */
131
165
 
132
166
  interface StatsTheme {
@@ -134,6 +168,13 @@ interface StatsTheme {
134
168
  text?: string;
135
169
  highlight?: string;
136
170
  separator?: string;
171
+ badge?: string;
172
+ badgeLabel?: string;
173
+ badgeValue?: string;
174
+ detailed?: string;
175
+ detailedRow?: string;
176
+ detailedLabel?: string;
177
+ detailedValue?: string;
137
178
  }
138
179
  interface StatsProps {
139
180
  /** Search results response */
@@ -156,13 +197,28 @@ interface StatsProps {
156
197
  showQuery?: boolean;
157
198
  /** Custom separator between stats */
158
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;
159
206
  }
160
207
  declare const Stats: React__default.FC<StatsProps>;
161
208
 
162
209
  /**
163
210
  * Pagination Component
164
211
  *
165
- * 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
166
222
  */
167
223
 
168
224
  interface PaginationTheme {
@@ -173,6 +229,18 @@ interface PaginationTheme {
173
229
  itemDisabled?: string;
174
230
  link?: string;
175
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;
176
244
  }
177
245
  interface PaginationProps {
178
246
  /** Search results response */
@@ -199,24 +267,81 @@ interface PaginationProps {
199
267
  style?: React__default.CSSProperties;
200
268
  /** Custom theme */
201
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;
202
295
  }
203
296
  declare const Pagination: React__default.FC<PaginationProps>;
204
297
 
205
298
  /**
206
299
  * SortBy Component
207
300
  *
208
- * Displays sort options for search results
209
- * 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
210
314
  */
211
315
 
212
316
  interface SortOption {
213
317
  value: string;
214
318
  label: string;
215
319
  }
320
+ type SortByVariant = 'dropdown' | 'button-group' | 'radio-group';
321
+ type SortBySize = 'small' | 'medium' | 'large';
216
322
  interface SortByTheme {
323
+ /** Root container */
217
324
  container?: string;
325
+ /** Dropdown select element */
218
326
  select?: string;
327
+ /** Dropdown option element */
219
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;
220
345
  }
221
346
  interface SortByProps {
222
347
  /** Available sort options */
@@ -227,7 +352,7 @@ interface SortByProps {
227
352
  defaultValue?: string;
228
353
  /** Callback when sort changes */
229
354
  onSortChange?: (value: string) => void;
230
- /** Custom render function for select */
355
+ /** Custom render function for select (only used in dropdown variant) */
231
356
  renderSelect?: (props: {
232
357
  value: string;
233
358
  onChange: (e: React__default.ChangeEvent<HTMLSelectElement>) => void;
@@ -239,17 +364,26 @@ interface SortByProps {
239
364
  style?: React__default.CSSProperties;
240
365
  /** Custom theme */
241
366
  theme?: SortByTheme;
242
- /** Placeholder text */
367
+ /** Placeholder text (dropdown variant) */
243
368
  placeholder?: string;
244
369
  /** Whether to sync with SearchStateManager (default: true) */
245
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;
246
379
  }
247
380
  declare const SortBy: React__default.FC<SortByProps>;
248
381
 
249
382
  /**
250
383
  * Facets Component
251
384
  *
252
- * 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.
253
387
  */
254
388
 
255
389
  interface FacetItem {
@@ -257,10 +391,26 @@ interface FacetItem {
257
391
  count: number;
258
392
  selected?: boolean;
259
393
  }
394
+ interface FacetStats {
395
+ min: number;
396
+ max: number;
397
+ avg?: number;
398
+ sum?: number;
399
+ }
400
+ interface FacetRangeItem {
401
+ label: string;
402
+ from?: number;
403
+ to?: number;
404
+ }
405
+ interface FacetRangeConfig {
406
+ field: string;
407
+ ranges: FacetRangeItem[];
408
+ }
260
409
  interface Facet {
261
410
  field: string;
262
411
  label?: string;
263
412
  items: FacetItem[];
413
+ stats?: FacetStats;
264
414
  }
265
415
  interface FacetsTheme {
266
416
  container?: string;
@@ -273,7 +423,31 @@ interface FacetsTheme {
273
423
  facetItemCount?: string;
274
424
  facetItemLabel?: string;
275
425
  checkbox?: string;
276
- }
426
+ /** Color swatch circle/square */
427
+ colorSwatch?: string;
428
+ /** Color swatch when selected */
429
+ colorSwatchSelected?: string;
430
+ /** Inner element of color swatch (for checkmark overlay) */
431
+ colorSwatchInner?: string;
432
+ /** Search input within a facet group */
433
+ searchInput?: string;
434
+ /** Collapsible header row */
435
+ collapsibleHeader?: string;
436
+ /** Chevron/expand icon in collapsible header */
437
+ collapsibleIcon?: string;
438
+ /** Count badge pill */
439
+ countBadge?: string;
440
+ /** Range button (pre-configured range option) */
441
+ rangeButton?: string;
442
+ /** Active range button */
443
+ rangeButtonActive?: string;
444
+ /** Count badge on range button */
445
+ rangeButtonCount?: string;
446
+ /** Clear button for range filters */
447
+ rangeClear?: string;
448
+ }
449
+ type FacetVariant = 'checkbox' | 'color-swatch' | 'collapsible';
450
+ type FacetSize = 'small' | 'medium' | 'large';
277
451
  interface FacetsProps {
278
452
  /** Search results response */
279
453
  results?: SearchResponse | null;
@@ -295,13 +469,119 @@ interface FacetsProps {
295
469
  style?: React__default.CSSProperties;
296
470
  /** Custom theme */
297
471
  theme?: FacetsTheme;
472
+ /** Display variant: checkbox (default), color-swatch, or collapsible */
473
+ variant?: FacetVariant;
474
+ /** When true, show a search input at the top of each facet group */
475
+ searchable?: boolean;
476
+ /** Show count badges (default: true) */
477
+ showCounts?: boolean;
478
+ /** Maps facet values to CSS colors (used by color-swatch variant) */
479
+ colorMap?: Record<string, string>;
480
+ /** For collapsible variant, whether facets start collapsed (default: false) */
481
+ defaultCollapsed?: boolean;
482
+ /** Size preset: small, medium (default), or large */
483
+ size?: FacetSize;
484
+ /** Pre-configured range button definitions for numeric facets */
485
+ facetRanges?: FacetRangeConfig[];
298
486
  }
299
487
  declare const Facets: React__default.FC<FacetsProps>;
300
488
 
489
+ /**
490
+ * FacetDropdown Component
491
+ *
492
+ * A dropdown component that displays facet values from a specific field
493
+ * and allows users to filter search results by selecting values.
494
+ *
495
+ * Can be used standalone (fetches its own data) or integrated with SearchProvider.
496
+ *
497
+ * @cssVariables
498
+ * Customize the dropdown appearance using CSS variables:
499
+ *
500
+ * Button:
501
+ * - `--facet-dropdown-button-bg`: Button background color
502
+ * - `--facet-dropdown-text`: Button text color
503
+ * - `--facet-dropdown-border`: Button and panel border color
504
+ * - `--facet-dropdown-font-size`: Button font size (default: 0.875rem)
505
+ * - `--facet-dropdown-font-weight`: Button font weight (default: 500)
506
+ *
507
+ * Dropdown Panel:
508
+ * - `--facet-dropdown-bg`: Panel background color
509
+ * - `--facet-dropdown-shadow`: Panel box shadow
510
+ *
511
+ * Options:
512
+ * - `--facet-dropdown-option-text`: Option text color
513
+ * - `--facet-dropdown-option-font-size`: Option font size (default: 0.875rem)
514
+ * - `--facet-dropdown-option-font-weight-active`: Active option font weight (default: 500)
515
+ * - `--facet-dropdown-option-active-bg`: Active option background color
516
+ *
517
+ * Count Badge:
518
+ * - `--facet-dropdown-count-text`: Count text color
519
+ * - `--facet-dropdown-count-font-size`: Count font size (default: 0.75rem)
520
+ *
521
+ * Scrollbar:
522
+ * - `--facet-dropdown-scrollbar-thumb`: Scrollbar thumb color
523
+ * - `--facet-dropdown-scrollbar-thumb-hover`: Scrollbar thumb hover color
524
+ *
525
+ * @example
526
+ * ```tsx
527
+ * <FacetDropdown
528
+ * field="category"
529
+ * placeholder="All Categories"
530
+ * applyFilter={true}
531
+ * showCounts={true}
532
+ * />
533
+ * ```
534
+ */
535
+
536
+ interface FacetDropdownOption {
537
+ value: string;
538
+ count: number;
539
+ label?: string;
540
+ }
541
+ interface FacetDropdownTheme {
542
+ button?: string;
543
+ buttonOpen?: string;
544
+ panel?: string;
545
+ option?: string;
546
+ optionActive?: string;
547
+ optionHover?: string;
548
+ caretIcon?: string;
549
+ }
550
+ interface FacetDropdownProps {
551
+ /** The facet field to display (e.g., "category", "brand", "product_type") */
552
+ field: string;
553
+ /** Placeholder text when no value is selected */
554
+ placeholder?: string;
555
+ /** Custom className for the button */
556
+ className?: string;
557
+ /** Custom theme overrides */
558
+ theme?: FacetDropdownTheme;
559
+ /** Called when a value is selected */
560
+ onChange?: (value: string) => void;
561
+ /** Current selected value (controlled mode) */
562
+ value?: string;
563
+ /** Maximum number of options to show before scrolling */
564
+ maxOptions?: number;
565
+ /** Whether to show facet counts */
566
+ showCounts?: boolean;
567
+ /** Custom options (if you want to provide static options instead of fetching) */
568
+ options?: FacetDropdownOption[];
569
+ /** Standalone mode: provide your own search client */
570
+ client?: SeekoraClient;
571
+ /** Apply filter immediately on selection (default: true) */
572
+ applyFilter?: boolean;
573
+ /** Navigate to search page on selection (default: false) */
574
+ navigateOnSelect?: boolean;
575
+ /** Base URL for navigation (e.g., "/search") */
576
+ searchPageUrl?: string;
577
+ }
578
+ declare const FacetDropdown: React__default.FC<FacetDropdownProps>;
579
+
301
580
  /**
302
581
  * CurrentRefinements Component
303
582
  *
304
- * Displays currently active filters/refinements with ability to clear them
583
+ * Displays currently active filters/refinements with ability to clear them.
584
+ * Supports StateManager auto-sync, display variants, layout modes, and animations.
305
585
  */
306
586
 
307
587
  interface Refinement {
@@ -318,9 +598,20 @@ interface CurrentRefinementsTheme {
318
598
  value?: string;
319
599
  clearButton?: string;
320
600
  clearAllButton?: string;
321
- }
601
+ /** Variant-specific class slots */
602
+ chip?: string;
603
+ tag?: string;
604
+ pill?: string;
605
+ badge?: string;
606
+ group?: string;
607
+ groupLabel?: string;
608
+ }
609
+ /** Display variant for refinement items */
610
+ type RefinementVariant = 'chips' | 'tags' | 'pills' | 'badges' | 'text-list';
611
+ /** Layout variant for the container */
612
+ type RefinementLayout = 'horizontal' | 'vertical' | 'grouped';
322
613
  interface CurrentRefinementsProps {
323
- /** Current refinements */
614
+ /** Current refinements (if not provided, auto-reads from StateManager) */
324
615
  refinements?: Refinement[];
325
616
  /** Callback when a refinement is cleared */
326
617
  onRefinementClear?: (field: string, value: string) => void;
@@ -330,6 +621,14 @@ interface CurrentRefinementsProps {
330
621
  renderRefinement?: (refinement: Refinement, index: number) => React__default.ReactNode;
331
622
  /** Show "Clear all" button */
332
623
  showClearAll?: boolean;
624
+ /** Display variant (default: 'chips') */
625
+ variant?: RefinementVariant;
626
+ /** Layout mode (default: 'horizontal') */
627
+ layout?: RefinementLayout;
628
+ /** Per-field color mapping */
629
+ fieldColors?: Record<string, string>;
630
+ /** Custom close icon renderer */
631
+ renderCloseIcon?: () => React__default.ReactNode;
333
632
  /** Custom className */
334
633
  className?: string;
335
634
  /** Custom styles */
@@ -1132,6 +1431,13 @@ interface RichQuerySuggestionsProps extends QuerySuggestionsEventHandlers {
1132
1431
  ariaLabel?: string;
1133
1432
  /** Analytics tags */
1134
1433
  analyticsTags?: string[];
1434
+ /** Highlight options for query suggestions (passed to highlight rendering) */
1435
+ highlightOptions?: {
1436
+ highlightColor?: string;
1437
+ highlightTextColor?: string;
1438
+ highlightFontWeight?: string | number;
1439
+ highlightStyle?: 'background' | 'underline' | 'bold' | 'color-only';
1440
+ };
1135
1441
  }
1136
1442
  interface RichQuerySuggestionsRef {
1137
1443
  getActiveIndex: () => number;
@@ -1582,19 +1888,31 @@ declare function DropdownPanel({ children, position, top, left, right, width, ma
1582
1888
 
1583
1889
  /**
1584
1890
  * Parses suggestion text containing <mark>...</mark> and returns React nodes
1585
- * with the marked segments rendered as <mark> elements. Safe: inner content
1891
+ * with the marked segments rendered as styled elements. Safe: inner content
1586
1892
  * is rendered as text, not HTML.
1587
1893
  */
1588
1894
 
1895
+ /** Visual highlight styles */
1896
+ type HighlightStyle = 'background' | 'underline' | 'bold' | 'color-only';
1589
1897
  interface HighlightMarkupOptions {
1590
- /** Class name for the <mark> element. */
1898
+ /** Class name for the highlight element. */
1591
1899
  markClassName?: string;
1592
- /** Inline style for the <mark> element. */
1900
+ /** Inline style for the highlight element (merged with computed styles). */
1593
1901
  markStyle?: React__default.CSSProperties;
1902
+ /** Override background color for highlighted segments */
1903
+ highlightColor?: string;
1904
+ /** Text color for highlighted segments */
1905
+ highlightTextColor?: string;
1906
+ /** Font weight for highlighted segments */
1907
+ highlightFontWeight?: string | number;
1908
+ /** Visual highlight style (default: 'background') */
1909
+ highlightStyle?: HighlightStyle;
1910
+ /** Which HTML element to render for highlights (default: 'mark') */
1911
+ highlightTag?: keyof JSX.IntrinsicElements;
1594
1912
  }
1595
1913
  /**
1596
1914
  * Converts a string like "lined <mark>blue</mark>" into React nodes with
1597
- * the marked part rendered as a <mark> element. When no <mark> tags are
1915
+ * the marked part rendered as a styled element. When no <mark> tags are
1598
1916
  * present, returns the string as-is.
1599
1917
  */
1600
1918
  declare function parseHighlightMarkup(text: string, options?: HighlightMarkupOptions): React__default.ReactNode;
@@ -2661,8 +2979,10 @@ interface SectionSearchProviderProps {
2661
2979
  sortBy?: string;
2662
2980
  enabled?: boolean;
2663
2981
  sectionId?: string;
2982
+ /** Additional search options merged into the request (e.g. { widget_mode: false }). */
2983
+ searchOptions?: Record<string, unknown>;
2664
2984
  }
2665
- declare function SectionSearchProvider({ children, query, refinements, maxItems, sortBy, enabled, sectionId, }: SectionSearchProviderProps): React__default.JSX.Element;
2985
+ declare function SectionSearchProvider({ children, query, refinements, maxItems, sortBy, enabled, sectionId, searchOptions, }: SectionSearchProviderProps): React__default.JSX.Element;
2666
2986
 
2667
2987
  /**
2668
2988
  * SectionSearchContext – preset query/filter section state
@@ -2737,8 +3057,14 @@ interface ProductGalleryProps {
2737
3057
  style?: React__default.CSSProperties;
2738
3058
  carouselAutoplay?: boolean;
2739
3059
  carouselIntervalMs?: number;
3060
+ /** Enable zoom functionality on product images */
3061
+ enableZoom?: boolean;
3062
+ /** Zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' */
3063
+ zoomMode?: ImageZoomMode;
3064
+ /** Zoom magnification level (2 = 200%, 3 = 300%) */
3065
+ zoomLevel?: number;
2740
3066
  }
2741
- declare function ProductGallery({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, }: ProductGalleryProps): React__default.JSX.Element;
3067
+ declare function ProductGallery({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, }: ProductGalleryProps): React__default.JSX.Element;
2742
3068
 
2743
3069
  /**
2744
3070
  * ProductInfo – product detail block (primitive)
@@ -4117,5 +4443,5 @@ declare function updateSuggestionsStyles(theme: SuggestionsThemeVariables): void
4117
4443
 
4118
4444
  declare const createTheme: (config: ThemeConfig) => _seekora_ai_ui_sdk_types.Theme;
4119
4445
 
4120
- 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 };
4121
- 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 };
4446
+ export { ActionButtons, AmazonDropdown, AnalyticsProvider, BadgeList, Breadcrumb, CategoriesTabs, ClearRefinements, CurrentRefinements, DocSearch, DocSearchButton, DropdownPanel, FacetDropdown, 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 };
4447
+ 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, FacetDropdownOption, FacetDropdownProps, FacetDropdownTheme, FacetItem, FacetRangeConfig, FacetRangeItem, FacetSize, FacetStats, 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 };