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

package/dist/components/Stats.d.ts

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

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

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

package/dist/components/Stats.js

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

package/dist/components/suggestions/AmazonDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmazonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/AmazonDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiV9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,yFAod1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AmazonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/AmazonDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkV9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,yFAid1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/suggestions/AmazonDropdown.js

@@ -9,7 +9,7 @@
  * - Clean, functional design
  */
 import React, { useState, useRef, useEffect, useCallback, forwardRef, useImperativeHandle, useMemo, } from 'react';
-import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive, touchTargets } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -485,9 +485,7 @@ export const AmazonDropdown = forwardRef(function AmazonDropdown(props, ref) {
                                 React.createElement("div", { style: styles.suggestionIcon },
                                     React.createElement(SearchIcon, null)),
                                 React.createElement("div", { style: styles.suggestionContent },
-                                    React.createElement("div", { style: styles.suggestionQuery, dangerouslySetInnerHTML: {
-                                            __html: highlightText(suggestion.query, query, { className: 'highlight' })
-                                        } }),
+                                    React.createElement("div", { style: styles.suggestionQuery }, highlightTextReact(suggestion.query, query, { className: 'highlight' })),
                                     showDepartments && firstCategory && (React.createElement("div", { style: styles.suggestionContext },
                                         React.createElement("span", { style: styles.suggestionDepartment },
                                             "in ",

package/dist/components/suggestions/GoogleDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GoogleDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/GoogleDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgP9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,yFA4U1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"GoogleDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/GoogleDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiP9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,yFAuU1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/suggestions/GoogleDropdown.js

@@ -9,7 +9,7 @@
  * - Voice search integration ready
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -309,11 +309,7 @@ export const GoogleDropdown = forwardRef(function GoogleDropdown(props, ref) {
                 item.type === 'trending' ? React.createElement(TrendingIcon, null) :
                     React.createElement(SearchIcon, null)),
             React.createElement("div", { style: styles.itemContent },
-                React.createElement("span", { style: styles.itemText, dangerouslySetInnerHTML: {
-                        __html: query
-                            ? highlightText(item.query, query, { tag: 'b' })
-                            : item.query
-                    } }),
+                React.createElement("span", { style: styles.itemText }, query ? highlightTextReact(item.query, query, { tag: 'b' }) : item.query),
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
                     item.type === 'trending' && showTrendingIndicator && (React.createElement("span", { style: styles.trending },
                         React.createElement(TrendingIcon, null),

package/dist/components/suggestions/MinimalDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinimalDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/MinimalDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA4K9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,0FAqU3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"MinimalDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/MinimalDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA6K9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,0FAkU3B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/suggestions/MinimalDropdown.js

@@ -8,7 +8,7 @@
  * - Perfect for editorial/content sites
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, extractProduct, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -272,9 +272,7 @@ export const MinimalDropdown = forwardRef(function MinimalDropdown(props, ref) {
                     return (React.createElement("div", { key: s.id || `suggestion-${idx}`, "data-index": itemIdx, style: mergeStyles(styles.item, isActive ? styles.itemActive : undefined, isLast ? styles.itemLast : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => setActiveIndex(itemIdx) },
                         showIndices && (React.createElement("span", { style: styles.itemIndex }, itemIdx + 1)),
                         React.createElement("div", { style: styles.itemContent },
-                            React.createElement("div", { style: styles.itemQuery, dangerouslySetInnerHTML: {
-                                    __html: highlightText(s.query, query, { tag: 'mark' })
-                                } }),
+                            React.createElement("div", { style: styles.itemQuery }, highlightTextReact(s.query, query, { tag: 'mark' })),
                             s.count && (React.createElement("div", { style: styles.itemMeta },
                                 s.count.toLocaleString(),
                                 " results"))),

package/dist/components/suggestions/MobileSheetDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileSheetDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/MobileSheetDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuS9D,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,8FAgc/B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MobileSheetDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/MobileSheetDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAwS9D,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,8FA6b/B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/suggestions/MobileSheetDropdown.js

@@ -9,7 +9,7 @@
  * - Optimized for small screens
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, extractProduct, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
 // Styles
@@ -450,9 +450,7 @@ export const MobileSheetDropdown = forwardRef(function MobileSheetDropdown(props
                             React.createElement("div", { style: styles.itemIcon },
                                 React.createElement(SearchIcon, null)),
                             React.createElement("div", { style: styles.itemContent },
-                                React.createElement("div", { style: styles.itemTitle, dangerouslySetInnerHTML: {
-                                        __html: highlightText(s.query, inputValue, { tag: 'strong' })
-                                    } }),
+                                React.createElement("div", { style: styles.itemTitle }, highlightTextReact(s.query, inputValue, { tag: 'strong' })),
                                 s.count && (React.createElement("div", { style: styles.itemSubtitle },
                                     s.count,
                                     " results"))),

package/dist/components/suggestions/PinterestDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinterestDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/PinterestDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAsU9D,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;CACvD;AAED,eAAO,MAAM,iBAAiB,4FA2X7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PinterestDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/PinterestDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;CACvD;AAED,eAAO,MAAM,iBAAiB,4FAsX7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/suggestions/PinterestDropdown.js

@@ -9,7 +9,7 @@
  * - Color palette extraction ready
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -402,11 +402,7 @@ export const PinterestDropdown = forwardRef(function PinterestDropdown(props, re
                     setHoveredSuggestion(idx);
                     setActiveIndex(idx);
                 }, onMouseLeave: () => setHoveredSuggestion(-1) },
-                React.createElement("span", { style: styles.suggestionIcon, dangerouslySetInnerHTML: {
-                        __html: query
-                            ? highlightText(s.query, query, { tag: 'strong' })
-                            : s.query
-                    } })))))),
+                React.createElement("span", { style: styles.suggestionIcon }, query ? highlightTextReact(s.query, query, { tag: 'strong' }) : s.query)))))),
             displayProducts.length > 0 && (React.createElement(React.Fragment, null,
                 React.createElement("div", { style: styles.sectionTitle },
                     React.createElement(TrendingIcon, null),

package/dist/components/suggestions/ShopifyDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShopifyDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/ShopifyDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAsU9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,0FA8W3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ShopifyDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/ShopifyDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,0FA2W3B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/suggestions/ShopifyDropdown.js

@@ -9,7 +9,7 @@
  * - Quick add to cart
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, calculateDiscount, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, calculateDiscount, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -393,9 +393,7 @@ export const ShopifyDropdown = forwardRef(function ShopifyDropdown(props, ref) {
                             React.createElement("div", { style: styles.suggestionIcon },
                                 React.createElement(SearchIcon, null)),
                             React.createElement("div", { style: styles.suggestionContent },
-                                React.createElement("div", { style: styles.suggestionQuery, dangerouslySetInnerHTML: {
-                                        __html: highlightText(suggestion.query, query, { tag: 'mark' })
-                                    } }),
+                                React.createElement("div", { style: styles.suggestionQuery }, highlightTextReact(suggestion.query, query, { tag: 'mark' })),
                                 suggestion.count && (React.createElement("div", { style: styles.suggestionMeta },
                                     suggestion.count,
                                     " results"))),

package/dist/components/suggestions/SpotlightDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpotlightDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/SpotlightDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,iBAAiB,4FAghB7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SpotlightDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/SpotlightDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAwU9D,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,iBAAiB,4FA8gB7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/suggestions/SpotlightDropdown.js

@@ -9,7 +9,7 @@
  * - Keyboard-first interaction
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, extractProduct, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -494,9 +494,7 @@ export const SpotlightDropdown = forwardRef(function SpotlightDropdown(props, re
                             }, onMouseEnter: () => setActiveIndex(idx) },
                             React.createElement("div", { style: mergeStyles(styles.itemIcon, isActive ? styles.itemIconActive : undefined) }, item.icon),
                             React.createElement("div", { style: styles.itemContent },
-                                React.createElement("div", { style: mergeStyles(styles.itemTitle, isActive ? styles.itemTitleActive : undefined), dangerouslySetInnerHTML: {
-                                        __html: highlightText(item.title, query, { tag: 'strong' })
-                                    } }))));
+                                React.createElement("div", { style: mergeStyles(styles.itemTitle, isActive ? styles.itemTitleActive : undefined) }, highlightTextReact(item.title, query, { tag: 'strong' })))));
                     }))),
                 processedProducts.length > 0 && (React.createElement("div", { style: styles.section },
                     React.createElement("div", { style: styles.sectionTitle }, "Products"),

package/dist/components/suggestions/utils.d.ts

@@ -1,7 +1,7 @@
 /**
  * Utility functions for Query Suggestions components
  */
-import type { CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import type { SuggestionFieldMapping, ProductFieldMapping, CategoryFieldMapping, BrandFieldMapping, DropdownThemeConfig, ProductDisplayConfig } from './types';
 import type { ProductBadge, ProductOption, ProductVariant, PriceRange } from '@seekora-ai/ui-sdk-types';
 /**
@@ -90,6 +90,15 @@ export declare const highlightText: (text: string, query: string, options?: {
     className?: string;
     style?: CSSProperties;
 }) => string;
+/**
+ * Safe React-based highlight rendering (no dangerouslySetInnerHTML).
+ * Returns React nodes with matched text wrapped in the specified tag element.
+ */
+export declare const highlightTextReact: (text: string, query: string, options?: {
+    tag?: string;
+    className?: string;
+    style?: CSSProperties;
+}) => ReactNode;
 /**
  * Truncate text to specified length
  */

package/dist/components/suggestions/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/utils.ts"],"names":[],"mappings":"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"}

package/dist/components/suggestions/utils.js

@@ -1,6 +1,7 @@
 /**
  * Utility functions for Query Suggestions components
  */
+import { createElement } from 'react';
 // ============================================================================
 // Field Extraction
 // ============================================================================
@@ -154,6 +155,41 @@ export const highlightText = (text, query, options = {}) => {
     const classAttr = className ? ` class="${className}"` : '';
     return escapeHtml(text).replace(new RegExp(`(${escapeHtml(escapedQuery)})`, 'gi'), `<${tag}${classAttr}${styleAttr}>$1</${tag}>`);
 };
+/**
+ * Safe React-based highlight rendering (no dangerouslySetInnerHTML).
+ * Returns React nodes with matched text wrapped in the specified tag element.
+ */
+export const highlightTextReact = (text, query, options = {}) => {
+    if (!query || !text)
+        return text;
+    const { tag = 'mark', className, style } = options;
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedQuery})`, 'gi');
+    const parts = text.split(regex);
+    if (parts.length <= 1)
+        return text;
+    const defaultHighlightStyle = {
+        backgroundColor: 'var(--seekora-highlight-bg, rgba(251, 191, 36, 0.4))',
+        fontWeight: 500,
+        borderRadius: '2px',
+        padding: '0 2px',
+        ...style,
+    };
+    return parts.map((part, i) => {
+        if (regex.test(part)) {
+            // Reset lastIndex after test
+            regex.lastIndex = 0;
+            return createElement(tag, {
+                key: i,
+                className,
+                style: defaultHighlightStyle,
+            }, part);
+        }
+        // Reset lastIndex after test
+        regex.lastIndex = 0;
+        return part;
+    });
+};
 /**
  * Truncate text to specified length
  */

package/dist/components/suggestions-primitives/highlightMarkup.d.ts

@@ -1,18 +1,30 @@
 /**
  * Parses suggestion text containing <mark>...</mark> and returns React nodes
- * with the marked segments rendered as <mark> elements. Safe: inner content
+ * with the marked segments rendered as styled elements. Safe: inner content
  * is rendered as text, not HTML.
  */
 import React from 'react';
+/** Visual highlight styles */
+export type HighlightStyle = 'background' | 'underline' | 'bold' | 'color-only';
 export interface HighlightMarkupOptions {
-    /** Class name for the <mark> element. */
+    /** Class name for the highlight element. */
     markClassName?: string;
-    /** Inline style for the <mark> element. */
+    /** Inline style for the highlight element (merged with computed styles). */
     markStyle?: React.CSSProperties;
+    /** Override background color for highlighted segments */
+    highlightColor?: string;
+    /** Text color for highlighted segments */
+    highlightTextColor?: string;
+    /** Font weight for highlighted segments */
+    highlightFontWeight?: string | number;
+    /** Visual highlight style (default: 'background') */
+    highlightStyle?: HighlightStyle;
+    /** Which HTML element to render for highlights (default: 'mark') */
+    highlightTag?: keyof JSX.IntrinsicElements;
 }
 /**
  * Converts a string like "lined <mark>blue</mark>" into React nodes with
- * the marked part rendered as a <mark> element. When no <mark> tags are
+ * the marked part rendered as a styled element. When no <mark> tags are
  * present, returns the string as-is.
  */
 export declare function parseHighlightMarkup(text: string, options?: HighlightMarkupOptions): React.ReactNode;

package/dist/components/suggestions-primitives/highlightMarkup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlightMarkup.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/highlightMarkup.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AASD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,sBAA2B,GACnC,KAAK,CAAC,SAAS,CAyBjB"}
+{"version":3,"file":"highlightMarkup.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/highlightMarkup.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,8BAA8B;AAC9B,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,CAAC;AAEhF,MAAM,WAAW,sBAAsB;IACrC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,qDAAqD;IACrD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAC5C;AA4CD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,sBAA2B,GACnC,KAAK,CAAC,SAAS,CAkCjB"}