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

package/dist/components/Facets.d.ts

@@ -11,10 +11,26 @@ export interface FacetItem {
     count: number;
     selected?: boolean;
 }
+export interface FacetStats {
+    min: number;
+    max: number;
+    avg?: number;
+    sum?: number;
+}
+export interface FacetRangeItem {
+    label: string;
+    from?: number;
+    to?: number;
+}
+export interface FacetRangeConfig {
+    field: string;
+    ranges: FacetRangeItem[];
+}
 export interface Facet {
     field: string;
     label?: string;
     items: FacetItem[];
+    stats?: FacetStats;
 }
 export interface FacetsTheme {
     container?: string;
@@ -41,6 +57,14 @@ export interface FacetsTheme {
     collapsibleIcon?: string;
     /** Count badge pill */
     countBadge?: string;
+    /** Range button (pre-configured range option) */
+    rangeButton?: string;
+    /** Active range button */
+    rangeButtonActive?: string;
+    /** Count badge on range button */
+    rangeButtonCount?: string;
+    /** Clear button for range filters */
+    rangeClear?: string;
 }
 export type FacetVariant = 'checkbox' | 'color-swatch' | 'collapsible';
 export type FacetSize = 'small' | 'medium' | 'large';
@@ -77,6 +101,12 @@ export interface FacetsProps {
     defaultCollapsed?: boolean;
     /** Size preset: small, medium (default), or large */
     size?: FacetSize;
+    /** Pre-configured range button definitions for numeric facets */
+    facetRanges?: FacetRangeConfig[];
+    /** Use dedicated Filters API instead of extracting facets from search results */
+    useFiltersApi?: boolean;
+    /** Fields that should use disjunctive (OR) faceting (only with useFiltersApi) */
+    disjunctiveFacets?: string[];
 }
 export declare const Facets: React.FC<FacetsProps>;
 //# sourceMappingURL=Facets.d.ts.map

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

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

package/dist/components/Facets.js

@@ -7,8 +7,10 @@
 import React, { useState, useMemo } from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
+import { useFilters } from '../hooks/useFilters';
 import { log } from '@seekora-ai/ui-sdk-core';
 import { clsx } from 'clsx';
+import { RangeSlider } from './RangeSlider';
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -52,20 +54,24 @@ 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, useFiltersApi = false, disjunctiveFacets, }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
     const facetsTheme = customTheme || {};
+    // Use dedicated Filters API when useFiltersApi is enabled
+    const { filters: filtersApiData, searchFacetValues } = useFilters(useFiltersApi ? { disjunctiveFacets } : { autoFetch: false });
     // expandedFacets is used for "Show more/less" in checkbox/color-swatch variants
     // AND for collapse/expand in collapsible variant.
     const [expandedFacets, setExpandedFacets] = useState({});
@@ -73,11 +79,27 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
     // Use results from prop if provided, otherwise from state manager
     const results = resultsProp || stateResults;
     // -------------------------------------------------------------------
-    // Extract facets from results
+    // Extract facets from results (or Filters API)
     // -------------------------------------------------------------------
     const extractFacets = () => {
         if (facetsProp)
             return facetsProp;
+        // When using Filters API, convert FilterField[] to Facet[]
+        if (useFiltersApi && filtersApiData.length > 0) {
+            log.verbose('Facets: Using Filters API data', { filterCount: filtersApiData.length });
+            return filtersApiData.map((filter) => ({
+                field: filter.field || '',
+                label: filter.field || '',
+                items: (filter.values || []).map((v) => ({
+                    value: v.value || '',
+                    count: v.count || 0,
+                    selected: refinements.some(r => r.field === filter.field && r.value === v.value),
+                })),
+                stats: filter.stats?.min != null && filter.stats?.max != null
+                    ? { min: filter.stats.min, max: filter.stats.max, avg: filter.stats.avg, sum: filter.stats.sum }
+                    : undefined,
+            }));
+        }
         // Try to get facets from various locations in the response
         // Primary location: data.facets (widget_mode response structure)
         const rawFacets = results?.data?.facets
@@ -112,6 +134,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 +212,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 +281,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 +290,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 +319,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 +551,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":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EAEZ,0BAA0B,EAC1B,6BAA6B,EAC9B,MAAM,0BAA0B,CAAC;AAMlC,MAAM,WAAW,sBAAuB,SAAQ,6BAA6B;IAC3E,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,4BAA4B;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB;IAClB,MAAM,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,YAAY,CAAC;IACnD,+CAA+C;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kDAAkD;IAClD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yBAAyB;IACzB,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACrG,4BAA4B;IAC5B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACtE,0BAA0B;IAC1B,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+EAA+E;IAC/E,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED,MAAM,WAAW,oBAAoB;IACnC,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,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAsRD,eAAO,MAAM,iBAAiB,qGAye7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"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/InfiniteHits.d.ts

@@ -12,7 +12,6 @@ export interface InfiniteHitsTheme {
     item?: string;
     loadMore?: string;
     loadMoreDisabled?: string;
-    loading?: string;
     empty?: string;
     sentinel?: string;
 }
@@ -21,10 +20,6 @@ export interface InfiniteHitsProps {
     renderHit?: (hit: ResultItem, index: number) => React.ReactNode;
     /** Custom render for empty state */
     renderEmpty?: () => React.ReactNode;
-    /** Show initial loading when fetching and no hits yet (default false: no loading screen) */
-    showInitialLoading?: boolean;
-    /** Custom render for loading state */
-    renderLoading?: () => React.ReactNode;
     /** Custom render for "Show More" button */
     renderShowMore?: (props: {
         isLoading: boolean;
@@ -41,8 +36,6 @@ export interface InfiniteHitsProps {
     fieldMapping?: FieldMapping;
     /** Text for "Show More" button */
     showMoreLabel?: string;
-    /** Text for loading state */
-    loadingLabel?: string;
     /** Callback when a hit is clicked */
     onHitClick?: (hit: ResultItem, index: number) => void;
     /** Custom className */

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

@@ -1 +1 @@
-{"version":3,"file":"InfiniteHits.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteHits.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;QACpB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,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,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwSpD,CAAC"}
+{"version":3,"file":"InfiniteHits.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteHits.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;QACpB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,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,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4QpD,CAAC"}