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

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

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqUlD,CAAC"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAYxE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsVlD,CAAC"}

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,28 @@ 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) => {
@@ -166,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',
             } },
@@ -185,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, onKeyDown: handleMinKeyDown, tabIndex: 0, "aria-valuenow": internalMin, "aria-valuemin": min, "aria-valuemax": max, 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',
@@ -195,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, onKeyDown: handleMaxKeyDown, tabIndex: 0, "aria-valuenow": internalMax, "aria-valuemin": min, "aria-valuemax": max, 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',
@@ -215,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;
@@ -224,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};
@@ -234,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.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":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,cAAc,EAGd,kBAAkB,EAClB,0BAA0B,EAC1B,6BAA6B,EAE7B,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAuBlC,MAAM,WAAW,yBAA0B,SAAQ,6BAA6B;IAC9E,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACnC,sCAAsC;IACtC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,sEAAsE;IACtE,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yBAAyB;IACzB,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC,wBAAwB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF,sCAAsC;IACtC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,yGAAyG;IACzG,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE;QACjB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACtC,cAAc,CAAC,EAAE,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,CAAC;KACrE,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,EAAE,MAAM,MAAM,CAAC;CAC7B;AAqPD,eAAO,MAAM,oBAAoB,2GAwchC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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.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,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,CA0b9C,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,6 +9,13 @@ import { useSearchState } from '../hooks/useSearchState';
 import { useQuerySuggestions } from '../hooks/useQuerySuggestions';
 import { log } from '@seekora-ai/ui-sdk-core';
 import { clsx } from 'clsx';
+// 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',
@@ -195,9 +202,9 @@ export const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, d
     const inputPaddingLeft = hasSearchIcon ? sizeConfig.iconPaddingLeft : sizeConfig.padding.split(' ')[1] || sizeConfig.padding;
     const inputPaddingRight = hasClearBtn ? sizeConfig.iconPaddingRight : sizeConfig.padding.split(' ')[1] || sizeConfig.padding;
     const borderRadius = typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium;
-    const focusBorderColor = isFocused ? theme.colors.focus : theme.colors.border;
+    const focusBorderColor = isFocused ? `var(--seekora-border-focus, ${theme.colors.focus})` : `var(--seekora-border, ${theme.colors.border})`;
     const focusRingShadow = isFocused
-        ? `0 0 0 3px ${theme.colors.focus}33`
+        ? `0 0 0 3px var(--seekora-border-focus-alpha, ${theme.colors.focus}33)`
         : undefined;
     const handleClear = useCallback(() => {
         setQuery('', false);
@@ -231,7 +238,7 @@ export const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, d
                     justifyContent: 'center',
                     pointerEvents: 'none',
                     color: 'var(--seekora-searchbar-icon-color)',
-                    zIndex: 1,
+                    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%',
@@ -267,7 +274,7 @@ export const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, d
                     borderRadius: '50%',
                     color: 'var(--seekora-searchbar-icon-color)',
                     transition: theme.transitions?.fast || '150ms ease-in-out',
-                    zIndex: 1,
+                    zIndex: 2,
                 }, onMouseDown: (e) => {
                     // Prevent input blur so the clear action doesn't race with blur handler
                     e.preventDefault();
@@ -278,8 +285,8 @@ export const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, d
                 fontSize: sizeConfig.fontSize,
                 fontFamily: theme.typography.fontFamily,
                 fontWeight: theme.typography.fontWeight?.medium ?? 500,
-                backgroundColor: theme.colors.primary,
-                color: '#ffffff',
+                backgroundColor: `var(--seekora-primary, ${theme.colors.primary})`,
+                color: 'var(--seekora-primary-text, #ffffff)',
                 border: 'none',
                 borderRadius: 'var(--seekora-searchbar-radius)',
                 cursor: 'pointer',
@@ -307,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) => {

package/dist/components/SearchBarWithSuggestions.js

@@ -29,8 +29,8 @@ const styles = {
         transition: 'border-color 150ms ease, box-shadow 150ms ease',
     },
     inputWrapperFocused: {
-        borderColor: 'var(--seekora-primary, #3b82f6)',
-        boxShadow: '0 0 0 3px var(--seekora-primary-light, rgba(59, 130, 246, 0.1))',
+        borderColor: 'var(--seekora-border-focus, var(--seekora-primary, #3b82f6))',
+        boxShadow: '0 0 0 3px var(--seekora-border-focus-alpha, var(--seekora-primary-light, rgba(59, 130, 246, 0.1)))',
     },
     input: {
         flex: 1,
@@ -73,7 +73,7 @@ const styles = {
         margin: '4px',
         border: 'none',
         backgroundColor: 'var(--seekora-primary, #3b82f6)',
-        color: 'white',
+        color: 'var(--seekora-primary-text, white)',
         borderRadius: 'var(--seekora-border-radius, 6px)',
         fontSize: '14px',
         fontWeight: 600,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchLayout.d.ts","sourceRoot":"","sources":["../../src/components/SearchLayout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,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,iBAAiB,CAAC;IAC1B,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkGpD,CAAC"}
+{"version":3,"file":"SearchLayout.d.ts","sourceRoot":"","sources":["../../src/components/SearchLayout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,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,iBAAiB,CAAC;IAC1B,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2GpD,CAAC"}

package/dist/components/SearchLayout.js

@@ -22,6 +22,8 @@ export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth =
             display: 'flex',
             flexDirection: 'column',
             minHeight: '100vh',
+            width: '100%',
+            maxWidth: '100%',
             backgroundColor: theme.colors.background,
             ...style,
         } },
@@ -33,20 +35,27 @@ export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth =
         React.createElement("div", { style: {
                 display: 'flex',
                 flex: 1,
+                width: '100%',
+                maxWidth: '100%',
                 gap: theme.spacing.large,
                 padding: theme.spacing.medium,
                 backgroundColor: theme.colors.background,
                 color: theme.colors.text,
+                overflow: 'hidden',
             } },
             sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: layoutTheme.sidebar, style: {
                     width: sidebarWidth,
                     minWidth: sidebarWidth,
+                    flexShrink: 0,
                 } }, sidebar)),
             React.createElement("main", { className: layoutTheme.main, style: {
                     flex: 1,
-                    minWidth: 0, // Prevents flex item from overflowing
+                    minWidth: 0,
+                    width: '100%',
+                    maxWidth: '100%',
                     backgroundColor: theme.colors.background,
                     color: theme.colors.text,
+                    overflow: 'auto',
                 } }, children)),
         footer && (React.createElement("footer", { className: layoutTheme.footer, style: {
                 padding: theme.spacing.medium,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../src/components/SearchResults.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEnF,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1F,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,uHAAuH;IACvH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gFAAgF;IAChF,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAoBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6mBtD,CAAC"}
+{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../src/components/SearchResults.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEnF,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1F,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,uHAAuH;IACvH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gFAAgF;IAChF,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAoBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAknBtD,CAAC"}

package/dist/components/SearchResults.js

@@ -53,6 +53,43 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
             }
         }
     }, [activeIndex, enableKeyboardNavigation]);
+    // Global keyboard listener for seamless navigation from search box to results
+    useEffect(() => {
+        if (!enableKeyboardNavigation)
+            return;
+        const handleGlobalKeyDown = (e) => {
+            // Only handle if we have results and the container exists
+            if (!containerRef.current)
+                return;
+            const resultElements = containerRef.current.querySelectorAll('[data-result-index]');
+            const maxIndex = resultElements.length - 1;
+            if (maxIndex < 0)
+                return;
+            // Check if focus is on an input/textarea (search box)
+            const activeElement = document.activeElement;
+            const isInputFocused = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA';
+            if (e.key === 'ArrowDown') {
+                // If in search box or no result selected, select first result
+                if (isInputFocused || activeIndex === -1) {
+                    e.preventDefault();
+                    setActiveIndex(0);
+                    containerRef.current?.focus();
+                }
+            }
+            else if (e.key === 'ArrowUp') {
+                // If first result is selected, go back to search box
+                if (activeIndex === 0) {
+                    e.preventDefault();
+                    setActiveIndex(-1);
+                    // Find and focus the search input
+                    const searchInput = document.querySelector('input[type="text"], input[type="search"]');
+                    searchInput?.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleGlobalKeyDown);
+        return () => document.removeEventListener('keydown', handleGlobalKeyDown);
+    }, [enableKeyboardNavigation, activeIndex]);
     // Keyboard navigation handler
     const handleKeyDown = useCallback((e) => {
         if (!enableKeyboardNavigation)
@@ -428,30 +465,5 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
             results?.totalResults || results?.data?.total_results || 0,
             " result",
             (results?.totalResults || results?.data?.total_results || 0) !== 1 ? 's' : '')),
-        enableKeyboardNavigation && resultItems.length > 0 && (React.createElement("div", { style: {
-                fontSize: '12px',
-                color: theme.colors.text,
-                opacity: 0.6,
-                marginBottom: theme.spacing.small,
-                display: 'flex',
-                gap: '8px',
-                alignItems: 'center',
-            } },
-            React.createElement("span", { style: {
-                    display: 'inline-flex',
-                    gap: '4px',
-                    padding: '2px 6px',
-                    backgroundColor: theme.colors.hover,
-                    borderRadius: '4px',
-                    fontSize: '11px',
-                } }, "\u2191\u2193 navigate"),
-            React.createElement("span", { style: {
-                    display: 'inline-flex',
-                    gap: '4px',
-                    padding: '2px 6px',
-                    backgroundColor: theme.colors.hover,
-                    borderRadius: '4px',
-                    fontSize: '11px',
-                } }, "\u21B5 select"))),
         React.createElement("div", { className: searchResultsTheme.resultsList, style: resultsListStyle }, resultItems.map((result, index) => renderFn(result, index, index === activeIndex)))));
 };

package/dist/components/primitives/ActionButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ActionButtons.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7F,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,WAAW,GAAG,eAAe,GAAG,QAAQ,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAwBD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,MAAqB,EACrB,QAAmB,EACnB,UAAkB,EAClB,IAAe,EACf,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,qBAqFpB"}
+{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ActionButtons.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AA+B1B,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7F,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,WAAW,GAAG,eAAe,GAAG,QAAQ,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAwBD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,MAAqB,EACrB,QAAmB,EACnB,UAAkB,EAClB,IAAe,EACf,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,qBAqFpB"}