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

package/dist/components/RangeSlider.js

@@ -4,18 +4,29 @@
  * Visual slider for numeric range filtering
  * Alternative to RangeInput for a more interactive UX
  */
-import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
+const SHADOWS = {
+    sm: '0 1px 2px rgba(0,0,0,0.05)',
+    md: '0 2px 4px rgba(0,0,0,0.1)',
+    lg: '0 4px 6px rgba(0,0,0,0.1)',
+    xl: '0 10px 15px rgba(0,0,0,0.1)',
+};
 export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: currentMinProp, currentMax: currentMaxProp, onRangeChange, formatValue = (v) => v.toString(), className, style, theme: customTheme, showValues = true, syncWithState = true, debounceMs = 300, }) => {
     const { theme } = useSearchContext();
     const { refinements, addRefinement, removeRefinement } = useSearchState();
     const rangeSliderTheme = customTheme || {};
+    const thumbClass = rangeSliderTheme.thumb || 'seekora-range-slider__thumb';
     // Parse current range from StateManager
-    const stateRange = useMemo(() => {
-        if (!syncWithState)
-            return { min: undefined, max: undefined };
+    // NOTE: computed every render (no useMemo) because the state manager mutates
+    // the refinements array in place — the reference never changes.
+    let stateRange;
+    if (!syncWithState) {
+        stateRange = { min: undefined, max: undefined };
+    }
+    else {
         let minVal;
         let maxVal;
         refinements.forEach(r => {
@@ -28,15 +39,17 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
                     maxVal = parseFloat(maxMatch[1]);
             }
         });
-        return { min: minVal, max: maxVal };
-    }, [syncWithState, refinements, field]);
+        stateRange = { min: minVal, max: maxVal };
+    }
     const [internalMin, setInternalMin] = useState(currentMinProp ?? stateRange.min ?? min);
     const [internalMax, setInternalMax] = useState(currentMaxProp ?? stateRange.max ?? max);
-    const [isDragging, setIsDragging] = useState(false);
+    const isDraggingRef = useRef(false);
     const debounceRef = useRef(null);
-    // Sync with StateManager changes
+    const pendingMinRef = useRef(internalMin);
+    const pendingMaxRef = useRef(internalMax);
+    // Sync with StateManager changes (only when stateRange actually changes, not on drag)
     useEffect(() => {
-        if (syncWithState && !isDragging) {
+        if (syncWithState && !isDraggingRef.current) {
             if (stateRange.min !== undefined)
                 setInternalMin(stateRange.min);
             else
@@ -46,7 +59,7 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
             else
                 setInternalMax(max);
         }
-    }, [syncWithState, stateRange.min, stateRange.max, isDragging, min, max]);
+    }, [syncWithState, stateRange.min, stateRange.max, min, max]);
     // Update StateManager with range refinements
     const updateStateManager = useCallback((minVal, maxVal) => {
         if (!syncWithState)
@@ -57,24 +70,24 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
                 removeRefinement(field, r.value, false);
             }
         });
-        // Add new range refinements
-        if (minVal > min) {
+        // Add new range refinements — trigger search on the last one added
+        const setMin = minVal > min;
+        const setMax = maxVal < max;
+        if (setMin && setMax) {
             addRefinement(field, `>=${minVal}`, false);
+            addRefinement(field, `<=${maxVal}`, true);
         }
-        if (maxVal < max) {
-            addRefinement(field, `<=${maxVal}`, minVal <= min); // Trigger search if only max is set
-        }
-        if (minVal > min && maxVal >= max) {
-            // Trigger search after setting min
+        else if (setMin) {
             addRefinement(field, `>=${minVal}`, true);
         }
-        else if (minVal > min || maxVal < max) {
-            // If both are set, we need to trigger search
-            // already triggered above
+        else if (setMax) {
+            addRefinement(field, `<=${maxVal}`, true);
         }
     }, [syncWithState, field, refinements, addRefinement, removeRefinement, min, max]);
-    // Debounced update
+    // Debounced update (during drag only)
     const debouncedUpdate = useCallback((minVal, maxVal) => {
+        pendingMinRef.current = minVal;
+        pendingMaxRef.current = maxVal;
         if (debounceRef.current) {
             clearTimeout(debounceRef.current);
         }
@@ -89,19 +102,75 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
     const handleMinChange = (e) => {
         const value = Math.min(Number(e.target.value), internalMax - step);
         setInternalMin(value);
-        setIsDragging(true);
+        isDraggingRef.current = true;
         debouncedUpdate(value, internalMax);
     };
     // Handle max slider change
     const handleMaxChange = (e) => {
         const value = Math.max(Number(e.target.value), internalMin + step);
         setInternalMax(value);
-        setIsDragging(true);
+        isDraggingRef.current = true;
         debouncedUpdate(internalMin, value);
     };
-    // Handle drag end
+    // Handle drag end — flush pending update immediately
     const handleDragEnd = () => {
-        setIsDragging(false);
+        isDraggingRef.current = false;
+        // Cancel the debounce and commit immediately
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+            debounceRef.current = null;
+        }
+        updateStateManager(pendingMinRef.current, pendingMaxRef.current);
+        if (onRangeChange) {
+            onRangeChange(pendingMinRef.current, pendingMaxRef.current);
+        }
+    };
+    // Handle keyboard navigation for enhanced control (Shift+Arrow for 10x step, Home/End)
+    const handleMinKeyDown = (e) => {
+        let newValue = null;
+        if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = min;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = internalMax - step;
+        }
+        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            newValue = Math.max(min, internalMin - step * 10);
+        }
+        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            newValue = Math.min(internalMax - step, internalMin + step * 10);
+        }
+        if (newValue !== null) {
+            setInternalMin(newValue);
+            debouncedUpdate(newValue, internalMax);
+        }
+    };
+    const handleMaxKeyDown = (e) => {
+        let newValue = null;
+        if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = internalMin + step;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = max;
+        }
+        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            newValue = Math.max(internalMin + step, internalMax - step * 10);
+        }
+        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            newValue = Math.min(max, internalMax + step * 10);
+        }
+        if (newValue !== null) {
+            setInternalMax(newValue);
+            debouncedUpdate(internalMin, newValue);
+        }
     };
     // Calculate filled track position
     const minPercent = ((internalMin - min) / (max - min)) * 100;
@@ -119,7 +188,7 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
             } }, label)),
         React.createElement("div", { className: rangeSliderTheme.slider, style: {
                 position: 'relative',
-                height: '40px',
+                minHeight: '40px',
                 display: 'flex',
                 alignItems: 'center',
             } },
@@ -138,7 +207,7 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
                     backgroundColor: theme.colors.primary,
                     borderRadius: '2px',
                 } }),
-            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, className: rangeSliderTheme.thumb, style: {
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMinKeyDown, tabIndex: 0, "aria-valuenow": internalMin, "aria-valuemin": min, "aria-valuemax": max, className: thumbClass, style: {
                     position: 'absolute',
                     width: '100%',
                     height: '4px',
@@ -148,7 +217,7 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
                     cursor: 'pointer',
                     pointerEvents: 'none',
                 }, "aria-label": `Minimum ${label || field}` }),
-            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, className: rangeSliderTheme.thumb, style: {
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMaxKeyDown, tabIndex: 0, "aria-valuenow": internalMax, "aria-valuemin": min, "aria-valuemax": max, className: thumbClass, style: {
                     position: 'absolute',
                     width: '100%',
                     height: '4px',
@@ -168,7 +237,7 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
             React.createElement("span", { className: rangeSliderTheme.value }, formatValue(internalMin)),
             React.createElement("span", { className: rangeSliderTheme.value }, formatValue(internalMax)))),
         React.createElement("style", null, `
-        .${rangeSliderTheme.thumb || 'seekora-range-slider__thumb'}::-webkit-slider-thumb {
+        .${thumbClass}::-webkit-slider-thumb {
           -webkit-appearance: none;
           appearance: none;
           width: 20px;
@@ -177,9 +246,9 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
           border-radius: 50%;
           cursor: pointer;
           pointer-events: all;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+          box-shadow: ${SHADOWS.md};
         }
-        .${rangeSliderTheme.thumb || 'seekora-range-slider__thumb'}::-moz-range-thumb {
+        .${thumbClass}::-moz-range-thumb {
           width: 20px;
           height: 20px;
           background: ${theme.colors.primary};
@@ -187,7 +256,7 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
           cursor: pointer;
           pointer-events: all;
           border: none;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+          box-shadow: ${SHADOWS.md};
         }
       `)));
 };

package/dist/components/RichQuerySuggestions.d.ts

@@ -71,6 +71,13 @@ export interface RichQuerySuggestionsProps extends QuerySuggestionsEventHandlers
     ariaLabel?: string;
     /** Analytics tags */
     analyticsTags?: string[];
+    /** Highlight options for query suggestions (passed to highlight rendering) */
+    highlightOptions?: {
+        highlightColor?: string;
+        highlightTextColor?: string;
+        highlightFontWeight?: string | number;
+        highlightStyle?: 'background' | 'underline' | 'bold' | 'color-only';
+    };
 }
 export interface RichQuerySuggestionsRef {
     getActiveIndex: () => number;

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

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

package/dist/components/RichQuerySuggestions.js

@@ -14,6 +14,20 @@ import React, { useState, useRef, useCallback, useMemo, forwardRef, useImperativ
 import { useSearchContext } from './SearchProvider';
 import { useQuerySuggestionsEnhanced } from '../hooks/useQuerySuggestionsEnhanced';
 import { clsx } from 'clsx';
+// ============================================================================
+// Constants
+// ============================================================================
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
 // Default section order
 const DEFAULT_SECTIONS = [
     { id: 'recent', title: 'Recent Searches', maxItems: 5, enabled: true, order: 1 },
@@ -26,16 +40,16 @@ const DEFAULT_SECTIONS = [
 // ============================================================================
 const styles = {
     container: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: 'var(--seekora-border-radius-lg, 12px)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `var(--seekora-border-radius-lg, ${BORDER_RADIUS.lg * 1.5}px)`,
         boxShadow: 'var(--seekora-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04))',
         overflow: 'hidden',
     },
     header: {
         padding: '12px 16px',
-        borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f9fafb)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
     },
     content: {
         overflowY: 'auto',
@@ -70,7 +84,7 @@ const styles = {
         alignItems: 'flex-start',
         padding: '10px 16px',
         cursor: 'pointer',
-        transition: 'background-color 100ms ease',
+        transition: `background-color ${TRANSITIONS.fast}`,
         gap: '12px',
     },
     itemActive: {
@@ -89,7 +103,7 @@ const styles = {
     },
     itemQuery: {
         fontSize: '14px',
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         fontWeight: 500,
         margin: 0,
         overflow: 'hidden',
@@ -98,7 +112,7 @@ const styles = {
     },
     itemMeta: {
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         marginTop: '2px',
     },
     itemCount: {
@@ -119,11 +133,11 @@ const styles = {
         padding: '3px 8px',
         fontSize: '11px',
         fontWeight: 500,
-        color: 'var(--seekora-text-secondary, #6b7280)',
-        backgroundColor: 'var(--seekora-bg-tertiary, #f3f4f6)',
-        borderRadius: '12px',
+        color: 'var(--seekora-text-secondary, inherit)',
+        backgroundColor: 'var(--seekora-bg-tertiary, rgba(255, 255, 255, 0.1))',
+        borderRadius: `${BORDER_RADIUS.lg * 1.5}px`,
         cursor: 'pointer',
-        transition: 'all 100ms ease',
+        transition: `all ${TRANSITIONS.fast}`,
     },
     categoryPillHover: {
         backgroundColor: 'var(--seekora-primary-light, #dbeafe)',
@@ -145,12 +159,12 @@ const styles = {
         padding: '6px 12px',
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #374151)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: '20px',
+        color: 'var(--seekora-text-primary, inherit)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `${BORDER_RADIUS.full}px`,
         cursor: 'pointer',
-        transition: 'all 150ms ease',
+        transition: `all ${TRANSITIONS.fast}`,
     },
     trendingChipHover: {
         borderColor: 'var(--seekora-primary, #3b82f6)',
@@ -164,7 +178,7 @@ const styles = {
     trendingRank: {
         width: '18px',
         height: '18px',
-        borderRadius: '50%',
+        borderRadius: `${BORDER_RADIUS.full}px`,
         backgroundColor: 'var(--seekora-primary, #3b82f6)',
         color: 'white',
         fontSize: '10px',
@@ -176,25 +190,25 @@ const styles = {
     removeButton: {
         padding: '4px',
         marginLeft: 'auto',
-        borderRadius: '4px',
+        borderRadius: `${BORDER_RADIUS.sm}px`,
         border: 'none',
         background: 'transparent',
         cursor: 'pointer',
         color: 'var(--seekora-text-tertiary, #9ca3af)',
         opacity: 0,
-        transition: 'opacity 100ms ease',
+        transition: `opacity ${TRANSITIONS.fast}`,
     },
     divider: {
         height: '1px',
-        backgroundColor: 'var(--seekora-border-color, #e5e7eb)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
         margin: '4px 16px',
     },
     footer: {
         padding: '12px 16px',
-        borderTop: '1px solid var(--seekora-border-color, #e5e7eb)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f9fafb)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     loadingOverlay: {
         position: 'absolute',
@@ -202,12 +216,12 @@ const styles = {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.8)',
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
     },
     emptyState: {
         padding: '32px 16px',
         textAlign: 'center',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     highlight: {
         backgroundColor: 'var(--seekora-highlight-bg, #fef9c3)',

package/dist/components/SearchBar.d.ts

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import type { SearchOptions } from '@seekora-ai/search-sdk';
+export type SearchBarSize = 'small' | 'medium' | 'large';
 export interface SearchBarTheme {
     container?: string;
     input?: string;
@@ -14,6 +15,9 @@ export interface SearchBarTheme {
     suggestionItemHover?: string;
     suggestionItemActive?: string;
     loadingIndicator?: string;
+    searchIcon?: string;
+    clearButton?: string;
+    submitButton?: string;
 }
 export interface SearchBarProps {
     placeholder?: string;
@@ -37,6 +41,18 @@ export interface SearchBarProps {
     showLoadingState?: boolean;
     renderSuggestion?: (suggestion: string, index: number) => React.ReactNode;
     renderLoading?: () => React.ReactNode;
+    /** Custom render for the search icon. If not provided, a default magnifying glass SVG is rendered. */
+    renderSearchIcon?: () => React.ReactNode;
+    /** Whether to show a clear button when the query is non-empty (default: true) */
+    showClearButton?: boolean;
+    /** Custom render for the clear icon */
+    renderClearIcon?: () => React.ReactNode;
+    /** Whether to show a submit button to the right of the input (default: false) */
+    showSubmitButton?: boolean;
+    /** Custom render for the submit button */
+    renderSubmitButton?: () => React.ReactNode;
+    /** Size variant controlling padding and font size (default: 'medium') */
+    size?: SearchBarSize;
 }
 export declare const SearchBar: React.FC<SearchBarProps>;
 //# sourceMappingURL=SearchBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../src/components/SearchBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/F,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,2HAA2H;IAC3H,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoT9C,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../src/components/SearchBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAU5D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/F,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,2HAA2H;IAC3H,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,sGAAsG;IACtG,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACzC,iFAAiF;IACjF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACxC,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC3C,yEAAyE;IACzE,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAgED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2b9C,CAAC"}

package/dist/components/SearchBar.js

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