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

package/dist/components/CurrentRefinements.d.ts

@@ -1,7 +1,8 @@
 /**
  * CurrentRefinements Component
  *
- * Displays currently active filters/refinements with ability to clear them
+ * Displays currently active filters/refinements with ability to clear them.
+ * Supports StateManager auto-sync, display variants, layout modes, and animations.
  */
 import React from 'react';
 export interface Refinement {
@@ -18,9 +19,20 @@ export interface CurrentRefinementsTheme {
     value?: string;
     clearButton?: string;
     clearAllButton?: string;
+    /** Variant-specific class slots */
+    chip?: string;
+    tag?: string;
+    pill?: string;
+    badge?: string;
+    group?: string;
+    groupLabel?: string;
 }
+/** Display variant for refinement items */
+export type RefinementVariant = 'chips' | 'tags' | 'pills' | 'badges' | 'text-list';
+/** Layout variant for the container */
+export type RefinementLayout = 'horizontal' | 'vertical' | 'grouped';
 export interface CurrentRefinementsProps {
-    /** Current refinements */
+    /** Current refinements (if not provided, auto-reads from StateManager) */
     refinements?: Refinement[];
     /** Callback when a refinement is cleared */
     onRefinementClear?: (field: string, value: string) => void;
@@ -30,6 +42,14 @@ export interface CurrentRefinementsProps {
     renderRefinement?: (refinement: Refinement, index: number) => React.ReactNode;
     /** Show "Clear all" button */
     showClearAll?: boolean;
+    /** Display variant (default: 'chips') */
+    variant?: RefinementVariant;
+    /** Layout mode (default: 'horizontal') */
+    layout?: RefinementLayout;
+    /** Per-field color mapping */
+    fieldColors?: Record<string, string>;
+    /** Custom close icon renderer */
+    renderCloseIcon?: () => React.ReactNode;
     /** Custom className */
     className?: string;
     /** Custom styles */

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

@@ -1 +1 @@
-{"version":3,"file":"CurrentRefinements.d.ts","sourceRoot":"","sources":["../../src/components/CurrentRefinements.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,uBAAuB;IACtC,0BAA0B;IAC1B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,uBAAuB,CAAC;CACjC;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmIhE,CAAC"}
+{"version":3,"file":"CurrentRefinements.d.ts","sourceRoot":"","sources":["../../src/components/CurrentRefinements.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,2CAA2C;AAC3C,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEpF,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,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,uBAAuB,CAAC;CACjC;AA0FD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuShE,CAAC"}

package/dist/components/CurrentRefinements.js

@@ -1,75 +1,286 @@
 /**
  * CurrentRefinements Component
  *
- * Displays currently active filters/refinements with ability to clear them
+ * Displays currently active filters/refinements with ability to clear them.
+ * Supports StateManager auto-sync, display variants, layout modes, and animations.
  */
-import React from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
-export const CurrentRefinements = ({ refinements = [], onRefinementClear, onClearAll, renderRefinement, showClearAll = true, className, style, theme: customTheme, }) => {
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+/** Get variant-specific styles */
+const getVariantStyles = (variant, themeColors, themeSpacing, themeBorderRadius, fieldColor) => {
+    const baseBg = fieldColor || `var(--seekora-refinement-bg, ${themeColors.hover})`;
+    const baseColor = `var(--seekora-refinement-color, ${themeColors.text})`;
+    const baseBorder = `var(--seekora-refinement-border, ${themeColors.border})`;
+    switch (variant) {
+        case 'tags':
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: `2px ${themeSpacing.medium}`,
+                backgroundColor: baseBg,
+                border: `1px solid ${baseBorder}`,
+                borderRadius: `var(--seekora-refinement-radius, 4px)`,
+                fontSize: '12px',
+                color: baseColor,
+                fontWeight: 500,
+            };
+        case 'pills':
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: `${themeSpacing.small} ${themeSpacing.medium}`,
+                backgroundColor: baseBg,
+                border: 'none',
+                borderRadius: `var(--seekora-refinement-radius, 9999px)`,
+                fontSize: '13px',
+                color: baseColor,
+            };
+        case 'badges':
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: `3px ${themeSpacing.small}`,
+                backgroundColor: themeColors.primary,
+                border: 'none',
+                borderRadius: `var(--seekora-refinement-radius, 4px)`,
+                fontSize: '11px',
+                color: '#fff',
+                fontWeight: 600,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+            };
+        case 'text-list':
+            return {
+                display: 'flex',
+                alignItems: 'center',
+                padding: `${themeSpacing.small} 0`,
+                backgroundColor: 'transparent',
+                border: 'none',
+                borderBottom: `1px solid ${baseBorder}`,
+                borderRadius: '0',
+                fontSize: '14px',
+                color: baseColor,
+            };
+        case 'chips':
+        default:
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: `${themeSpacing.small} ${themeSpacing.medium}`,
+                backgroundColor: baseBg,
+                border: `1px solid ${baseBorder}`,
+                borderRadius: `var(--seekora-refinement-radius, ${typeof themeBorderRadius === 'string' ? themeBorderRadius : themeBorderRadius.medium})`,
+                fontSize: '13px',
+                color: baseColor,
+            };
+    }
+};
+/** Get variant-specific class name from theme */
+const getVariantClass = (variant, refinementsTheme) => {
+    switch (variant) {
+        case 'tags': return refinementsTheme.tag;
+        case 'pills': return refinementsTheme.pill;
+        case 'badges': return refinementsTheme.badge;
+        case 'chips': return refinementsTheme.chip;
+        default: return refinementsTheme.item;
+    }
+};
+export const CurrentRefinements = ({ refinements: refinementsProp, onRefinementClear, onClearAll, renderRefinement, showClearAll = true, variant = 'chips', layout = 'horizontal', fieldColors, renderCloseIcon, className, style, theme: customTheme, }) => {
     const { theme } = useSearchContext();
+    const { refinements: stateRefinements, removeRefinement, clearRefinements } = useSearchState();
     const refinementsTheme = customTheme || {};
+    // Format a numeric value for display (auto-detect price fields)
+    const formatRangeValue = (field, val) => {
+        const f = field.toLowerCase();
+        if (f.includes('price') || f.includes('cost') || f.includes('amount')) {
+            return `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+        }
+        return val.toLocaleString();
+    };
+    // Create a stable serialized key from stateRefinements to detect actual changes
+    // (needed because state manager mutates the array in place)
+    const stateRefinementsKey = useMemo(() => stateRefinements.map(r => `${r.field}:${r.value}`).sort().join('|'), [stateRefinements.map(r => `${r.field}:${r.value}`).sort().join('|')]);
+    // Use props if provided, otherwise auto-read from StateManager
+    // Combines >= / <= range refinements into single formatted pills
+    const refinements = useMemo(() => {
+        if (refinementsProp !== undefined) {
+            return refinementsProp;
+        }
+        const rangeMap = new Map();
+        const nonRange = [];
+        stateRefinements.forEach(r => {
+            const minMatch = r.value.match(/^>=(\d+(?:\.\d+)?)$/);
+            const maxMatch = r.value.match(/^<=(\d+(?:\.\d+)?)$/);
+            if (minMatch || maxMatch) {
+                if (!rangeMap.has(r.field))
+                    rangeMap.set(r.field, {});
+                const entry = rangeMap.get(r.field);
+                if (minMatch)
+                    entry.minVal = parseFloat(minMatch[1]);
+                if (maxMatch)
+                    entry.maxVal = parseFloat(maxMatch[1]);
+            }
+            else {
+                nonRange.push({ field: r.field, value: r.value });
+            }
+        });
+        rangeMap.forEach((range, field) => {
+            let displayValue;
+            if (range.minVal !== undefined && range.maxVal !== undefined) {
+                displayValue = `${formatRangeValue(field, range.minVal)} – ${formatRangeValue(field, range.maxVal)}`;
+            }
+            else if (range.minVal !== undefined) {
+                displayValue = `≥ ${formatRangeValue(field, range.minVal)}`;
+            }
+            else if (range.maxVal !== undefined) {
+                displayValue = `≤ ${formatRangeValue(field, range.maxVal)}`;
+            }
+            else {
+                return;
+            }
+            nonRange.push({ field, value: '__range__', displayValue });
+        });
+        return nonRange;
+    }, [refinementsProp, stateRefinementsKey]);
+    // Track items for entry/exit animations
+    const [visibleItems, setVisibleItems] = useState(new Set());
+    const [exitingItems, setExitingItems] = useState(new Set());
+    const prevRefinementsRef = useRef([]);
+    useEffect(() => {
+        const currentKeys = new Set(refinements.map(r => `${r.field}:${r.value}`));
+        const prevKeys = new Set(prevRefinementsRef.current.map(r => `${r.field}:${r.value}`));
+        // Detect removed items for exit animation
+        const removed = new Set();
+        prevKeys.forEach(key => {
+            if (!currentKeys.has(key))
+                removed.add(key);
+        });
+        if (removed.size > 0) {
+            setExitingItems(removed);
+            // Remove after animation completes
+            setTimeout(() => setExitingItems(new Set()), 200);
+        }
+        // Mark new items for entry animation
+        setVisibleItems(currentKeys);
+        prevRefinementsRef.current = [...refinements];
+    }, [refinements]);
     const handleClear = (field, value) => {
+        if (refinementsProp === undefined) {
+            if (value === '__range__') {
+                // Clear all range refinements for this field
+                const rangeRefs = stateRefinements.filter(r => r.field === field && (/^>=/.test(r.value) || /^<=/.test(r.value)));
+                rangeRefs.forEach((r, i) => removeRefinement(field, r.value, i === rangeRefs.length - 1));
+            }
+            else {
+                removeRefinement(field, value);
+            }
+        }
         if (onRefinementClear) {
             onRefinementClear(field, value);
         }
     };
     const handleClearAll = () => {
+        // If synced with StateManager, auto-clear all via StateManager
+        if (refinementsProp === undefined) {
+            clearRefinements();
+        }
         if (onClearAll) {
             onClearAll();
         }
     };
-    const defaultRenderRefinement = (refinement, index) => (React.createElement("div", { key: `${refinement.field}-${refinement.value}-${index}`, className: refinementsTheme.item, style: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            padding: `${theme.spacing.small} ${theme.spacing.medium}`,
-            margin: `0 ${theme.spacing.small} ${theme.spacing.small} 0`,
-            backgroundColor: theme.colors.hover,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-            fontSize: theme.typography.fontSize.small,
-        } },
-        React.createElement("span", { className: refinementsTheme.label, style: {
-                marginRight: theme.spacing.small,
-                color: theme.colors.text,
-                fontWeight: '500',
+    const defaultCloseIcon = () => (React.createElement("span", { "aria-hidden": "true", style: { lineHeight: 1 } }, "\u00D7"));
+    const defaultRenderRefinement = (refinement, index) => {
+        const key = `${refinement.field}:${refinement.value}`;
+        const fieldColor = fieldColors?.[refinement.field];
+        const isEntering = visibleItems.has(key) && !prevRefinementsRef.current.some(r => `${r.field}:${r.value}` === key);
+        const variantStyles = getVariantStyles(variant, theme.colors, theme.spacing, theme.borderRadius, fieldColor);
+        const variantClass = getVariantClass(variant, refinementsTheme);
+        return (React.createElement("div", { key: `${key}-${index}`, className: clsx(refinementsTheme.item, variantClass), role: "listitem", style: {
+                ...variantStyles,
+                margin: layout === 'vertical'
+                    ? `0 0 ${theme.spacing.small} 0`
+                    : `0 ${theme.spacing.small} ${theme.spacing.small} 0`,
+                transition: `all ${TRANSITIONS.normal}`,
+                opacity: exitingItems.has(key) ? 0 : 1,
+                transform: exitingItems.has(key) ? 'scale(0.8)' : 'scale(1)',
+                animation: isEntering ? 'seekoraChipIn 200ms ease-out' : undefined,
             } },
-            refinement.label || refinement.field,
-            ":"),
-        React.createElement("span", { className: refinementsTheme.value, style: {
-                marginRight: theme.spacing.small,
-                color: theme.colors.text,
-            } }, refinement.displayValue || refinement.value),
-        React.createElement("button", { type: "button", onClick: () => handleClear(refinement.field, refinement.value), className: refinementsTheme.clearButton, style: {
-                border: 'none',
-                backgroundColor: 'transparent',
-                color: theme.colors.text,
-                cursor: 'pointer',
-                fontSize: theme.typography.fontSize.medium,
-                padding: 0,
-                marginLeft: theme.spacing.small,
-                width: '20px',
-                height: '20px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: '50%',
-                transition: theme.transitions?.fast || '150ms ease-in-out',
-            }, "aria-label": `Clear ${refinement.label || refinement.field}: ${refinement.value}` }, "\u00D7")));
+            variant !== 'badges' && (React.createElement("span", { className: refinementsTheme.label, style: {
+                    marginRight: theme.spacing.small,
+                    fontWeight: '500',
+                    opacity: 0.7,
+                } },
+                refinement.label || refinement.field,
+                ":")),
+            React.createElement("span", { className: refinementsTheme.value }, refinement.displayValue || refinement.value),
+            React.createElement("button", { type: "button", onClick: () => handleClear(refinement.field, refinement.value), className: refinementsTheme.clearButton, style: {
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    padding: '0 0 0 6px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '50%',
+                    transition: `opacity ${TRANSITIONS.fast}`,
+                    opacity: 0.6,
+                }, "aria-label": `Clear ${refinement.label || refinement.field}: ${refinement.value}`, onMouseEnter: e => (e.currentTarget.style.opacity = '1'), onMouseLeave: e => (e.currentTarget.style.opacity = '0.6') }, renderCloseIcon ? renderCloseIcon() : defaultCloseIcon())));
+    };
     if (refinements.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: clsx(refinementsTheme.container, className), style: style },
-        React.createElement("div", { className: refinementsTheme.list, style: {
-                display: 'flex',
-                flexWrap: 'wrap',
-                alignItems: 'center',
-                marginBottom: showClearAll ? theme.spacing.medium : 0,
-            } }, refinements.map((refinement, index) => {
+    // Group refinements by field for grouped layout
+    const groupedRefinements = layout === 'grouped'
+        ? refinements.reduce((acc, r) => {
+            if (!acc[r.field])
+                acc[r.field] = [];
+            acc[r.field].push(r);
+            return acc;
+        }, {})
+        : null;
+    const containerStyles = {
+        ...style,
+    };
+    const listStyles = {
+        display: 'flex',
+        flexWrap: layout === 'vertical' ? 'nowrap' : 'wrap',
+        flexDirection: layout === 'vertical' ? 'column' : 'row',
+        alignItems: layout === 'vertical' ? 'flex-start' : 'center',
+        marginBottom: showClearAll ? theme.spacing.medium : 0,
+    };
+    return (React.createElement("div", { className: clsx(refinementsTheme.container, className), style: containerStyles },
+        React.createElement("style", null, `
+        @keyframes seekoraChipIn {
+          from { opacity: 0; transform: scale(0.8); }
+          to { opacity: 1; transform: scale(1); }
+        }
+      `),
+        layout === 'grouped' && groupedRefinements ? (Object.entries(groupedRefinements).map(([field, items]) => (React.createElement("div", { key: field, className: refinementsTheme.group, style: { marginBottom: theme.spacing.medium } },
+            React.createElement("div", { className: refinementsTheme.groupLabel, style: {
+                    fontSize: theme.typography.fontSize.small,
+                    fontWeight: 600,
+                    color: theme.colors.text,
+                    marginBottom: theme.spacing.small,
+                    textTransform: 'capitalize',
+                } }, items[0]?.label || field),
+            React.createElement("div", { role: "list", style: listStyles }, items.map((refinement, index) => {
+                return renderRefinement
+                    ? renderRefinement(refinement, index)
+                    : defaultRenderRefinement(refinement, index);
+            })))))) : (React.createElement("div", { role: "list", className: refinementsTheme.list, style: listStyles }, refinements.map((refinement, index) => {
             return renderRefinement
                 ? renderRefinement(refinement, index)
                 : defaultRenderRefinement(refinement, index);
-        })),
+        }))),
         showClearAll && refinements.length > 1 && (React.createElement("button", { type: "button", onClick: handleClearAll, className: refinementsTheme.clearAllButton, style: {
                 padding: `${theme.spacing.small} ${theme.spacing.medium}`,
                 border: `1px solid ${theme.colors.border}`,
@@ -79,5 +290,6 @@ export const CurrentRefinements = ({ refinements = [], onRefinementClear, onClea
                 cursor: 'pointer',
                 fontSize: theme.typography.fontSize.small,
                 textDecoration: 'underline',
+                transition: `background-color ${TRANSITIONS.fast}`,
             } }, "Clear all filters"))));
 };

package/dist/components/FacetDropdown.d.ts

@@ -0,0 +1,92 @@
+/**
+ * FacetDropdown Component
+ *
+ * A dropdown component that displays facet values from a specific field
+ * and allows users to filter search results by selecting values.
+ *
+ * Can be used standalone (fetches its own data) or integrated with SearchProvider.
+ *
+ * @cssVariables
+ * Customize the dropdown appearance using CSS variables:
+ *
+ * Button:
+ * - `--facet-dropdown-button-bg`: Button background color
+ * - `--facet-dropdown-text`: Button text color
+ * - `--facet-dropdown-border`: Button and panel border color
+ * - `--facet-dropdown-font-size`: Button font size (default: 0.875rem)
+ * - `--facet-dropdown-font-weight`: Button font weight (default: 500)
+ *
+ * Dropdown Panel:
+ * - `--facet-dropdown-bg`: Panel background color
+ * - `--facet-dropdown-shadow`: Panel box shadow
+ *
+ * Options:
+ * - `--facet-dropdown-option-text`: Option text color
+ * - `--facet-dropdown-option-font-size`: Option font size (default: 0.875rem)
+ * - `--facet-dropdown-option-font-weight-active`: Active option font weight (default: 500)
+ * - `--facet-dropdown-option-active-bg`: Active option background color
+ *
+ * Count Badge:
+ * - `--facet-dropdown-count-text`: Count text color
+ * - `--facet-dropdown-count-font-size`: Count font size (default: 0.75rem)
+ *
+ * Scrollbar:
+ * - `--facet-dropdown-scrollbar-thumb`: Scrollbar thumb color
+ * - `--facet-dropdown-scrollbar-thumb-hover`: Scrollbar thumb hover color
+ *
+ * @example
+ * ```tsx
+ * <FacetDropdown
+ *   field="category"
+ *   placeholder="All Categories"
+ *   applyFilter={true}
+ *   showCounts={true}
+ * />
+ * ```
+ */
+import React from 'react';
+import type { SeekoraClient } from '@seekora-ai/search-sdk';
+export interface FacetDropdownOption {
+    value: string;
+    count: number;
+    label?: string;
+}
+export interface FacetDropdownTheme {
+    button?: string;
+    buttonOpen?: string;
+    panel?: string;
+    option?: string;
+    optionActive?: string;
+    optionHover?: string;
+    caretIcon?: string;
+}
+export interface FacetDropdownProps {
+    /** The facet field to display (e.g., "category", "brand", "product_type") */
+    field: string;
+    /** Placeholder text when no value is selected */
+    placeholder?: string;
+    /** Custom className for the button */
+    className?: string;
+    /** Custom theme overrides */
+    theme?: FacetDropdownTheme;
+    /** Called when a value is selected */
+    onChange?: (value: string) => void;
+    /** Current selected value (controlled mode) */
+    value?: string;
+    /** Maximum number of options to show before scrolling */
+    maxOptions?: number;
+    /** Whether to show facet counts */
+    showCounts?: boolean;
+    /** Custom options (if you want to provide static options instead of fetching) */
+    options?: FacetDropdownOption[];
+    /** Standalone mode: provide your own search client */
+    client?: SeekoraClient;
+    /** Apply filter immediately on selection (default: true) */
+    applyFilter?: boolean;
+    /** Navigate to search page on selection (default: false) */
+    navigateOnSelect?: boolean;
+    /** Base URL for navigation (e.g., "/search") */
+    searchPageUrl?: string;
+}
+export declare const FacetDropdown: React.FC<FacetDropdownProps>;
+//# sourceMappingURL=FacetDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetDropdown.d.ts","sourceRoot":"","sources":["../../src/components/FacetDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAe5D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,sDAAsD;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6atD,CAAC"}