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

package/dist/components/Facets.js

@@ -9,6 +9,7 @@ import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { log } from '@seekora-ai/ui-sdk-core';
 import { clsx } from 'clsx';
+import { RangeSlider } from './RangeSlider';
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -52,17 +53,19 @@ const CheckmarkIcon = ({ size = 16 }) => (React.createElement("svg", { width: si
 // CSS variable defaults
 // ---------------------------------------------------------------------------
 const CSS_VAR_DEFAULTS = {
-    '--seekora-facet-bg': '#ffffff',
+    '--seekora-facet-bg': 'transparent',
     '--seekora-facet-border': '#dee2e6',
-    '--seekora-facet-active-bg': '#f0f7ff',
+    '--seekora-facet-active-bg': 'rgba(0, 0, 0, 0.05)',
     '--seekora-facet-swatch-size': '32px',
     '--seekora-facet-count-bg': '#e9ecef',
     '--seekora-facet-count-color': '#495057',
+    '--seekora-primary': '#3b82f6',
+    '--seekora-primary-text': '#ffffff',
 };
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', }) => {
+export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', facetRanges, }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
     const facetsTheme = customTheme || {};
@@ -112,6 +115,7 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
                     count: count.count,
                     selected: refinements.some(r => r.field === fieldName && r.value === count.value),
                 })) : [],
+                stats: facet.stats || undefined,
             };
         });
         log.verbose('Facets: Extracted facets', {
@@ -189,7 +193,7 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
     const sizeScale = useMemo(() => {
         switch (size) {
             case 'small':
-                return { font: theme.typography.fontSize.small, padding: '0.25rem', gap: '0.25rem' };
+                return { font: theme.typography.fontSize.small, padding: '0.5rem', gap: '0.5rem' };
             case 'large':
                 return { font: theme.typography.fontSize.large, padding: '0.75rem', gap: '0.75rem' };
             case 'medium':
@@ -258,6 +262,7 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
                     ? 'var(--seekora-facet-active-bg, ' + theme.colors.hover + ')'
                     : 'transparent',
                 transition: 'background-color 0.2s ease',
+                boxSizing: 'border-box',
             } },
             React.createElement("input", { type: "checkbox", checked: refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false, onChange: () => handleFacetToggle(facet.field, item.value, item.selected || false), className: facetsTheme.checkbox, style: {
                     marginRight: sizeScale.gap,
@@ -266,6 +271,7 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
             React.createElement("span", { className: facetsTheme.facetItemLabel, style: {
                     flex: 1,
                     fontSize: sizeScale.font,
+                    lineHeight: 1.5,
                     color: theme.colors.text,
                 } }, item.value),
             renderCountBadge(item.count)));
@@ -294,13 +300,13 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
                     borderRadius: '50%',
                     backgroundColor: color,
                     border: isChecked
-                        ? `3px solid ${theme.colors.primary}`
+                        ? `3px solid var(--seekora-primary, ${theme.colors.primary})`
                         : `2px solid var(--seekora-facet-border, ${theme.colors.border})`,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     transition: 'border 0.2s ease, box-shadow 0.2s ease',
-                    boxShadow: isChecked ? `0 0 0 2px ${theme.colors.primary}33` : 'none',
+                    boxShadow: isChecked ? `0 0 0 2px var(--seekora-primary-alpha, ${theme.colors.primary}33)` : 'none',
                     position: 'relative',
                 } }, isChecked && (React.createElement("span", { className: clsx(facetsTheme.colorSwatchInner), style: {
                     display: 'flex',
@@ -526,9 +532,192 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
                     } }, "Show less"))))));
     };
     // -------------------------------------------------------------------
+    // Render-type detection for numeric / range facets
+    // -------------------------------------------------------------------
+    const determineFacetRenderType = (fieldName, stats) => {
+        // If explicit range config exists for this field → range buttons
+        if (facetRanges?.some((rc) => rc.field === fieldName)) {
+            return 'range-buttons';
+        }
+        // If stats with valid min/max → range slider
+        if (stats && typeof stats.min === 'number' && typeof stats.max === 'number' && stats.min !== stats.max) {
+            return 'range-slider';
+        }
+        return 'list';
+    };
+    // -------------------------------------------------------------------
+    // Range button facet renderer
+    // -------------------------------------------------------------------
+    const renderRangeButtonFacet = (facet, _index) => {
+        const rangeConfig = facetRanges?.find((rc) => rc.field === facet.field);
+        if (!rangeConfig)
+            return null;
+        // Build a lookup from item value → count
+        const countMap = new Map();
+        facet.items.forEach((item) => countMap.set(item.value, item.count));
+        // Detect currently active range from refinements
+        const activeMin = refinements.find((r) => r.field === facet.field && r.value.startsWith('>='));
+        const activeMax = refinements.find((r) => r.field === facet.field && r.value.startsWith('<='));
+        const activeFromVal = activeMin ? parseFloat(activeMin.value.slice(2)) : undefined;
+        const activeToVal = activeMax ? parseFloat(activeMax.value.slice(2)) : undefined;
+        const isRangeActive = (range) => {
+            const fromMatch = range.from === undefined
+                ? activeFromVal === undefined
+                : activeFromVal === range.from;
+            const toMatch = range.to === undefined
+                ? activeToVal === undefined
+                : activeToVal === range.to;
+            return fromMatch && toMatch;
+        };
+        const handleRangeClick = (range) => {
+            // Clear existing range refinements for this field
+            refinements
+                .filter((r) => r.field === facet.field)
+                .forEach((r) => removeRefinement(facet.field, r.value, false));
+            if (isRangeActive(range)) {
+                // Was active → just clear (already removed above), trigger search
+                addRefinement(facet.field, '__noop__', false);
+                removeRefinement(facet.field, '__noop__', true);
+                return;
+            }
+            // Set new range
+            if (range.from !== undefined) {
+                addRefinement(facet.field, `>=${range.from}`, false);
+            }
+            if (range.to !== undefined) {
+                addRefinement(facet.field, `<=${range.to}`, true);
+            }
+            else if (range.from !== undefined) {
+                // Only "from" set — trigger search
+                addRefinement(facet.field, `>=${range.from}`, true);
+            }
+        };
+        const hasActiveRange = activeMin !== undefined || activeMax !== undefined;
+        const handleClear = () => {
+            refinements
+                .filter((r) => r.field === facet.field)
+                .forEach((r) => removeRefinement(facet.field, r.value, false));
+            // Trigger search after clearing
+            addRefinement(facet.field, '__noop__', false);
+            removeRefinement(facet.field, '__noop__', true);
+        };
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            } },
+            React.createElement("h3", { className: facetsTheme.facetTitle, style: {
+                    fontSize: theme.typography.fontSize.large,
+                    fontWeight: 'bold',
+                    margin: 0,
+                    marginBottom: theme.spacing.medium,
+                    color: theme.colors.text,
+                } }, facet.label || facet.field),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: sizeScale.gap,
+                } }, rangeConfig.ranges.map((range) => {
+                const count = countMap.get(range.label) ?? 0;
+                const active = isRangeActive(range);
+                return (React.createElement("button", { key: range.label, type: "button", className: clsx(facetsTheme.rangeButton, active && facetsTheme.rangeButtonActive), disabled: count === 0 && !active, onClick: () => handleRangeClick(range), style: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '0.35em',
+                        padding: `${sizeScale.padding} 0.75em`,
+                        fontSize: sizeScale.font,
+                        border: `1px solid ${active ? 'var(--seekora-primary, ' + theme.colors.primary + ')' : 'var(--seekora-facet-border, ' + theme.colors.border + ')'}`,
+                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.full,
+                        backgroundColor: active ? 'var(--seekora-primary, ' + theme.colors.primary + ')' : 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                        color: active ? 'var(--seekora-primary-text, #fff)' : theme.colors.text,
+                        cursor: count === 0 && !active ? 'not-allowed' : 'pointer',
+                        opacity: count === 0 && !active ? 0.5 : 1,
+                        transition: 'all 0.2s ease',
+                    } },
+                    range.label,
+                    showCounts && (React.createElement("span", { className: clsx(facetsTheme.rangeButtonCount), style: {
+                            fontSize: theme.typography.fontSize.small,
+                            opacity: 0.8,
+                        } },
+                        "(",
+                        count,
+                        ")"))));
+            })),
+            hasActiveRange && (React.createElement("button", { type: "button", className: clsx(facetsTheme.rangeClear), onClick: handleClear, style: {
+                    marginTop: sizeScale.gap,
+                    padding: sizeScale.padding,
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: theme.colors.primary,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize.small,
+                    textDecoration: 'underline',
+                } }, "Clear"))));
+    };
+    // -------------------------------------------------------------------
+    // Range slider facet renderer
+    // -------------------------------------------------------------------
+    const renderRangeSliderFacet = (facet, _index) => {
+        if (!facet.stats)
+            return null;
+        const { min: statsMin, max: statsMax } = facet.stats;
+        // Auto-detect formatting for common field names
+        const fieldLower = facet.field.toLowerCase();
+        const isPriceField = fieldLower.includes('price') || fieldLower.includes('cost') || fieldLower.includes('amount');
+        const formatValue = isPriceField
+            ? (v) => `$${v.toFixed(2)}`
+            : (v) => v.toString();
+        // Determine step: use 0.01 for price, 1 for integer ranges, 0.1 otherwise
+        const range = statsMax - statsMin;
+        const step = isPriceField ? 0.01 : range > 10 ? 1 : 0.1;
+        // Check if there's an active range refinement
+        const hasActiveRange = refinements.some((r) => r.field === facet.field && (r.value.startsWith('>=') || r.value.startsWith('<=')));
+        const handleClear = () => {
+            refinements
+                .filter((r) => r.field === facet.field && (r.value.startsWith('>=') || r.value.startsWith('<=')))
+                .forEach((r) => removeRefinement(facet.field, r.value, false));
+            // Trigger search after clearing
+            addRefinement(facet.field, '__noop__', false);
+            removeRefinement(facet.field, '__noop__', true);
+        };
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            } },
+            React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.spacing.small } },
+                React.createElement("h3", { className: facetsTheme.facetTitle, style: {
+                        fontSize: theme.typography.fontSize.large,
+                        fontWeight: 'bold',
+                        margin: 0,
+                        color: theme.colors.text,
+                    } }, facet.label || facet.field),
+                hasActiveRange && (React.createElement("button", { type: "button", className: clsx(facetsTheme.rangeClear), onClick: handleClear, style: {
+                        padding: '0.15em 0.5em',
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        color: theme.colors.primary,
+                        cursor: 'pointer',
+                        fontSize: theme.typography.fontSize.small,
+                        textDecoration: 'underline',
+                    } }, "Clear"))),
+            React.createElement(RangeSlider, { field: facet.field, min: statsMin, max: statsMax, step: step, formatValue: formatValue, syncWithState: true })));
+    };
+    // -------------------------------------------------------------------
     // Default facet renderer dispatcher
     // -------------------------------------------------------------------
     const defaultRenderFacet = (facet, index) => {
+        const renderType = determineFacetRenderType(facet.field, facet.stats);
+        if (renderType === 'range-buttons') {
+            return renderRangeButtonFacet(facet, index);
+        }
+        if (renderType === 'range-slider') {
+            return renderRangeSliderFacet(facet, index);
+        }
         switch (variant) {
             case 'color-swatch':
                 return renderColorSwatchFacet(facet, index);

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

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

package/dist/components/FederatedDropdown.js

@@ -15,20 +15,34 @@ 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,
+};
+// ============================================================================
 // Styles
 // ============================================================================
 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: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
         overflow: 'hidden',
     },
     header: {
         padding: '12px 20px',
-        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: {
         display: 'flex',
@@ -38,13 +52,13 @@ const styles = {
         flexDirection: 'column',
     },
     suggestionsColumn: {
-        borderRight: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRight: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         overflowY: 'auto',
     },
     productsColumn: {
         flex: 1,
         overflowY: 'auto',
-        backgroundColor: 'var(--seekora-bg-secondary, #fafafa)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
     },
     section: {
         padding: '12px 0',
@@ -75,7 +89,7 @@ const styles = {
         alignItems: 'center',
         padding: '10px 20px',
         cursor: 'pointer',
-        transition: 'background-color 100ms ease',
+        transition: `background-color ${TRANSITIONS.fast}`,
         gap: '12px',
     },
     suggestionItemActive: {
@@ -90,7 +104,7 @@ const styles = {
     suggestionText: {
         flex: 1,
         fontSize: '14px',
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         fontWeight: 500,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -114,7 +128,7 @@ const styles = {
         display: 'flex',
         gap: '4px',
         padding: '12px 20px',
-        borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         overflowX: 'auto',
     },
     tab: {
@@ -124,13 +138,13 @@ const styles = {
         padding: '8px 16px',
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         backgroundColor: 'transparent',
         border: '1px solid transparent',
-        borderRadius: '20px',
+        borderRadius: `${BORDER_RADIUS.full}px`,
         cursor: 'pointer',
         whiteSpace: 'nowrap',
-        transition: 'all 150ms ease',
+        transition: `all ${TRANSITIONS.fast}`,
     },
     tabActive: {
         color: 'var(--seekora-primary, #3b82f6)',
@@ -141,8 +155,8 @@ const styles = {
         fontSize: '11px',
         fontWeight: 600,
         padding: '2px 6px',
-        borderRadius: '10px',
-        backgroundColor: 'var(--seekora-bg-tertiary, #e5e7eb)',
+        borderRadius: `${BORDER_RADIUS.lg}px`,
+        backgroundColor: 'var(--seekora-bg-tertiary, rgba(255, 255, 255, 0.1))',
     },
     tabCountActive: {
         backgroundColor: 'var(--seekora-primary, #3b82f6)',
@@ -157,12 +171,12 @@ const styles = {
     productCard: {
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        borderRadius: '8px',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        borderRadius: `${BORDER_RADIUS.lg}px`,
         overflow: 'hidden',
         cursor: 'pointer',
-        transition: 'transform 150ms ease, box-shadow 150ms ease',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        transition: `transform ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     productCardHover: {
         transform: 'translateY(-2px)',
@@ -180,7 +194,7 @@ const styles = {
     productTitle: {
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         margin: 0,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -208,12 +222,12 @@ const styles = {
         padding: '8px 14px',
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #374151)',
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: '8px',
+        color: 'var(--seekora-text-primary, inherit)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `${BORDER_RADIUS.lg}px`,
         cursor: 'pointer',
-        transition: 'all 150ms ease',
+        transition: `all ${TRANSITIONS.fast}`,
     },
     brandChipHover: {
         borderColor: 'var(--seekora-primary, #3b82f6)',
@@ -222,30 +236,30 @@ const styles = {
     brandLogo: {
         width: '20px',
         height: '20px',
-        borderRadius: '4px',
+        borderRadius: `${BORDER_RADIUS.sm}px`,
         objectFit: 'contain',
         backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
     },
     footer: {
         padding: '12px 20px',
-        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))',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     emptyState: {
         padding: '48px 20px',
         textAlign: 'center',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     highlight: {
         backgroundColor: 'var(--seekora-highlight-bg, #fef9c3)',
         fontWeight: 600,
         padding: '0 2px',
-        borderRadius: '2px',
+        borderRadius: `${BORDER_RADIUS.sm / 2}px`,
     },
 };
 // ============================================================================

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

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

package/dist/components/QuerySuggestionsDropdown.js

@@ -14,13 +14,27 @@ 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,
+};
+// ============================================================================
 // Styles
 // ============================================================================
 const defaultStyles = {
     container: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: 'var(--seekora-border-radius, 8px)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.lg}px)`,
         boxShadow: 'var(--seekora-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))',
         maxHeight: '400px',
         overflowY: 'auto',
@@ -32,7 +46,7 @@ const defaultStyles = {
     sectionTitle: {
         fontSize: '12px',
         fontWeight: 600,
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         padding: '8px 16px 4px',
@@ -43,9 +57,9 @@ const defaultStyles = {
         alignItems: 'center',
         padding: '10px 16px',
         cursor: 'pointer',
-        transition: 'background-color 150ms ease',
+        transition: `background-color ${TRANSITIONS.fast}`,
         fontSize: '14px',
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         gap: '12px',
     },
     suggestionItemActive: {
@@ -65,10 +79,10 @@ const defaultStyles = {
     },
     highlight: {
         fontWeight: 600,
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         backgroundColor: 'var(--seekora-highlight-bg, #fef3c7)',
         padding: '0 2px',
-        borderRadius: '2px',
+        borderRadius: `${BORDER_RADIUS.sm / 2}px`,
     },
     recentIcon: {
         width: '16px',
@@ -78,13 +92,13 @@ const defaultStyles = {
     },
     removeButton: {
         padding: '4px',
-        borderRadius: '4px',
+        borderRadius: `${BORDER_RADIUS.sm}px`,
         border: 'none',
         background: 'transparent',
         cursor: 'pointer',
         color: 'var(--seekora-text-secondary, #9ca3af)',
         opacity: 0,
-        transition: 'opacity 150ms ease, color 150ms ease',
+        transition: `opacity ${TRANSITIONS.fast}, color ${TRANSITIONS.fast}`,
     },
     removeButtonVisible: {
         opacity: 1,
@@ -94,7 +108,7 @@ const defaultStyles = {
         alignItems: 'center',
         justifyContent: 'center',
         padding: '24px 16px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         fontSize: '14px',
         gap: '8px',
     },
@@ -104,20 +118,20 @@ const defaultStyles = {
         alignItems: 'center',
         justifyContent: 'center',
         padding: '24px 16px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         fontSize: '14px',
         textAlign: 'center',
     },
     divider: {
         height: '1px',
-        backgroundColor: 'var(--seekora-border-color, #e5e7eb)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
         margin: '4px 0',
     },
     footer: {
-        borderTop: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         padding: '8px 16px',
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -135,9 +149,9 @@ const defaultStyles = {
         minWidth: '20px',
         height: '18px',
         padding: '0 4px',
-        borderRadius: '3px',
-        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRadius: `${BORDER_RADIUS.sm - 1}px`,
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         fontSize: '10px',
         fontWeight: 500,
     },

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

@@ -1 +1 @@
-{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../src/components/RangeInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AAKzE,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3E,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QACzB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;QACxB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;QACxB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;QACjD,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,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,eAAe,CAAC;IACxB,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,WAAW,CAAC,EAAE;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA8BD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsQhD,CAAC"}
+{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../src/components/RangeInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3E,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QACzB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;QACxB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;QACxB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;QACjD,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,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,eAAe,CAAC;IACxB,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,WAAW,CAAC,EAAE;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA8BD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuQhD,CAAC"}

package/dist/components/RangeInput.js

@@ -4,7 +4,7 @@
  * Displays a range input for filtering numeric values (e.g., price range)
  * Integrates with SearchStateManager for automatic state sync
  */
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
@@ -35,11 +35,11 @@ export const RangeInput = ({ field, label, min, max, currentMin: currentMinProp,
     const { refinements, addRefinement, removeRefinement } = useSearchState();
     const rangeInputTheme = customTheme || {};
     // Parse current range from StateManager
-    const stateRange = useMemo(() => {
-        if (!syncWithState)
-            return { min: undefined, max: undefined };
-        return parseRangeFromRefinements(refinements, field);
-    }, [syncWithState, refinements, field]);
+    // NOTE: computed every render (no useMemo) because the state manager mutates
+    // the refinements array in place — the reference never changes.
+    const stateRange = !syncWithState
+        ? { min: undefined, max: undefined }
+        : parseRangeFromRefinements(refinements, field);
     const [internalMin, setInternalMin] = useState(currentMinProp ?? stateRange.min);
     const [internalMax, setInternalMax] = useState(currentMaxProp ?? stateRange.max);
     const [appliedMin, setAppliedMin] = useState(currentMinProp ?? stateRange.min);