@seekora-ai/ui-sdk-react 0.0.0-stage-20260517092419

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Breadcrumb Component
+ *
+ * Displays the current hierarchical navigation path
+ * Allows users to navigate back to parent categories
+ */
+import React from 'react';
+export interface BreadcrumbItem {
+    label: string;
+    value: string;
+}
+export interface BreadcrumbTheme {
+    root?: string;
+    list?: string;
+    item?: string;
+    link?: string;
+    separator?: string;
+    current?: string;
+}
+export interface BreadcrumbProps {
+    /** Attributes for each level of hierarchy */
+    attributes: string[];
+    /** Separator between items (default: ' > ') */
+    separator?: string;
+    /** Root label (default: 'Home') */
+    rootLabel?: string;
+    /** Custom render function for items */
+    renderItem?: (item: BreadcrumbItem, index: number, isLast: boolean) => React.ReactNode;
+    /** Custom render for separator */
+    renderSeparator?: () => React.ReactNode;
+    /** Callback when an item is clicked */
+    onNavigate?: (item: BreadcrumbItem | null, index: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: BreadcrumbTheme;
+    /** Custom breadcrumb items (overrides automatic detection) */
+    items?: BreadcrumbItem[];
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+//# sourceMappingURL=Breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/Breadcrumb.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACvF,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACxC,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,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,8DAA8D;IAC9D,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0LhD,CAAC"}

package/dist/components/Breadcrumb.js

@@ -0,0 +1,119 @@
+/**
+ * Breadcrumb Component
+ *
+ * Displays the current hierarchical navigation path
+ * Allows users to navigate back to parent categories
+ */
+import React, { useMemo, useCallback } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+export const Breadcrumb = ({ attributes, separator = ' > ', rootLabel = 'Home', renderItem, renderSeparator, onNavigate, className, style, theme: customTheme, items: itemsProp, }) => {
+    const { theme, stateManager } = useSearchContext();
+    const { refinements, removeRefinement, clearRefinements } = useSearchState();
+    const breadcrumbTheme = customTheme || {};
+    // Build breadcrumb items from refinements
+    const items = useMemo(() => {
+        if (itemsProp)
+            return itemsProp;
+        const breadcrumbItems = [];
+        // Find hierarchical refinements
+        attributes.forEach((attr, level) => {
+            const refinement = refinements.find(r => r.field === attr);
+            if (refinement) {
+                // Parse the hierarchical value
+                const parts = refinement.value.split(separator);
+                parts.forEach((part, partIndex) => {
+                    const fullPath = parts.slice(0, partIndex + 1).join(separator);
+                    // Only add if not already in the list
+                    if (!breadcrumbItems.some(item => item.value === fullPath)) {
+                        breadcrumbItems.push({
+                            label: part,
+                            value: fullPath,
+                        });
+                    }
+                });
+            }
+        });
+        return breadcrumbItems;
+    }, [attributes, refinements, separator, itemsProp]);
+    // Handle click on breadcrumb item
+    const handleClick = useCallback((item, index) => {
+        if (item === null) {
+            // Clicked on root - clear all hierarchical refinements
+            attributes.forEach(attr => {
+                refinements
+                    .filter(r => r.field === attr)
+                    .forEach(r => removeRefinement(r.field, r.value, false));
+            });
+            stateManager.search();
+        }
+        else {
+            // Navigate to this level - remove refinements below this level
+            const currentLevel = items.findIndex(i => i.value === item.value);
+            attributes.forEach((attr, attrLevel) => {
+                refinements
+                    .filter(r => r.field === attr)
+                    .forEach(r => {
+                    // Remove if this is below the clicked level
+                    if (attrLevel > currentLevel ||
+                        (attrLevel === currentLevel && r.value !== item.value)) {
+                        removeRefinement(r.field, r.value, false);
+                    }
+                });
+            });
+            stateManager.search();
+        }
+        if (onNavigate) {
+            onNavigate(item, index);
+        }
+    }, [attributes, refinements, removeRefinement, stateManager, items, onNavigate]);
+    // Default separator renderer
+    const defaultRenderSeparator = () => (React.createElement("span", { className: breadcrumbTheme.separator, style: {
+            margin: `0 ${theme.spacing.small}`,
+            color: theme.colors.textSecondary,
+        }, "aria-hidden": "true" }, "\u203A"));
+    // Don't render if no items
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement("nav", { className: clsx(breadcrumbTheme.root, className), style: style, "aria-label": "Breadcrumb" },
+        React.createElement("ol", { className: breadcrumbTheme.list, style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                listStyle: 'none',
+                margin: 0,
+                padding: 0,
+                fontSize: theme.typography.fontSize.small,
+            } },
+            React.createElement("li", { className: breadcrumbTheme.item },
+                React.createElement("button", { type: "button", onClick: () => handleClick(null, -1), className: breadcrumbTheme.link, style: {
+                        padding: 0,
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        color: theme.colors.primary,
+                        fontFamily: 'inherit',
+                        fontSize: 'inherit',
+                        textDecoration: 'none',
+                    } }, rootLabel)),
+            items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                return (React.createElement(React.Fragment, { key: item.value },
+                    renderSeparator ? renderSeparator() : defaultRenderSeparator(),
+                    React.createElement("li", { className: clsx(breadcrumbTheme.item, isLast && breadcrumbTheme.current) }, renderItem ? (renderItem(item, index, isLast)) : isLast ? (React.createElement("span", { style: {
+                            color: theme.colors.text,
+                            fontWeight: theme.typography.fontWeight?.medium || 500,
+                        }, "aria-current": "page" }, item.label)) : (React.createElement("button", { type: "button", onClick: () => handleClick(item, index), className: breadcrumbTheme.link, style: {
+                            padding: 0,
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            color: theme.colors.primary,
+                            fontFamily: 'inherit',
+                            fontSize: 'inherit',
+                            textDecoration: 'none',
+                        } }, item.label)))));
+            }))));
+};

package/dist/components/ClearRefinements.d.ts

@@ -0,0 +1,42 @@
+/**
+ * ClearRefinements Component
+ *
+ * A standalone button to clear all active refinements/filters
+ * Integrates with SearchStateManager for automatic state sync
+ */
+import React from 'react';
+export interface ClearRefinementsTheme {
+    root?: string;
+    button?: string;
+    buttonDisabled?: string;
+}
+export interface ClearRefinementsProps {
+    /** Button text when there are refinements to clear */
+    clearsQuery?: boolean;
+    /** Whether clicking should also clear the search query */
+    resetLabel?: string;
+    /** Button text shown when there are no refinements */
+    disabledLabel?: string;
+    /** Fields to include (if not specified, all fields are included) */
+    includedFields?: string[];
+    /** Fields to exclude from clearing */
+    excludedFields?: string[];
+    /** Callback when refinements are cleared */
+    onClear?: () => void;
+    /** Custom render function */
+    renderButton?: (props: {
+        canClear: boolean;
+        onClick: () => void;
+        disabled: boolean;
+    }) => React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: ClearRefinementsTheme;
+    /** Whether to hide when there are no refinements */
+    hideWhenEmpty?: boolean;
+}
+export declare const ClearRefinements: React.FC<ClearRefinementsProps>;
+//# sourceMappingURL=ClearRefinements.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClearRefinements.d.ts","sourceRoot":"","sources":["../../src/components/ClearRefinements.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IACpC,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,EAAE,OAAO,CAAC;KACnB,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,qBAAqB,CAAC;IAC9B,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0G5D,CAAC"}

package/dist/components/ClearRefinements.js

@@ -0,0 +1,81 @@
+/**
+ * ClearRefinements Component
+ *
+ * A standalone button to clear all active refinements/filters
+ * Integrates with SearchStateManager for automatic state sync
+ */
+import React, { useMemo } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+export const ClearRefinements = ({ clearsQuery = false, resetLabel = 'Clear all filters', disabledLabel = 'No filters applied', includedFields, excludedFields = [], onClear, renderButton, className, style, theme: customTheme, hideWhenEmpty = false, }) => {
+    const { theme } = useSearchContext();
+    const { query, refinements, clearRefinements, setQuery, removeRefinement } = useSearchState();
+    const clearTheme = customTheme || {};
+    // Filter refinements based on included/excluded fields
+    const relevantRefinements = useMemo(() => {
+        return refinements.filter(r => {
+            if (excludedFields.includes(r.field))
+                return false;
+            if (includedFields && !includedFields.includes(r.field))
+                return false;
+            return true;
+        });
+    }, [refinements, includedFields, excludedFields]);
+    const canClear = relevantRefinements.length > 0 || (clearsQuery && query.length > 0);
+    const handleClick = () => {
+        if (!canClear)
+            return;
+        // Clear relevant refinements
+        if (includedFields || excludedFields.length > 0) {
+            // Clear only specific refinements
+            relevantRefinements.forEach(r => {
+                removeRefinement(r.field, r.value, false);
+            });
+            // Trigger search after all removals
+            if (relevantRefinements.length > 0) {
+                clearRefinements(false); // This will trigger the search
+            }
+        }
+        else {
+            // Clear all refinements
+            clearRefinements(!clearsQuery); // Trigger search if not also clearing query
+        }
+        // Clear query if requested
+        if (clearsQuery && query.length > 0) {
+            setQuery('', true);
+        }
+        // Call the callback
+        if (onClear) {
+            onClear();
+        }
+    };
+    // Hide when empty if requested
+    if (hideWhenEmpty && !canClear) {
+        return null;
+    }
+    // Custom render function
+    if (renderButton) {
+        return (React.createElement("div", { className: clsx(clearTheme.root, className), style: style }, renderButton({
+            canClear,
+            onClick: handleClick,
+            disabled: !canClear,
+        })));
+    }
+    return (React.createElement("div", { className: clsx(clearTheme.root, className), style: style },
+        React.createElement("button", { type: "button", onClick: handleClick, disabled: !canClear, className: clsx(clearTheme.button, !canClear && clearTheme.buttonDisabled), style: {
+                padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+                fontSize: theme.typography.fontSize.medium,
+                fontWeight: theme.typography.fontWeight?.medium || 500,
+                backgroundColor: theme.colors.primary,
+                color: '#ffffff',
+                border: 'none',
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.medium,
+                cursor: canClear ? 'pointer' : 'default',
+                opacity: canClear ? 1 : 0,
+                pointerEvents: canClear ? 'auto' : 'none',
+                transition: 'none',
+            }, "aria-label": resetLabel }, resetLabel)));
+};

package/dist/components/CurrentRefinements.d.ts

@@ -0,0 +1,63 @@
+/**
+ * CurrentRefinements Component
+ *
+ * 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 {
+    field: string;
+    label?: string;
+    value: string;
+    displayValue?: string;
+}
+export interface CurrentRefinementsTheme {
+    container?: string;
+    list?: string;
+    item?: string;
+    label?: string;
+    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 (if not provided, auto-reads from StateManager) */
+    refinements?: Refinement[];
+    /** Callback when a refinement is cleared */
+    onRefinementClear?: (field: string, value: string) => void;
+    /** Callback when all refinements are cleared */
+    onClearAll?: () => void;
+    /** Custom render function for refinement */
+    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 */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: CurrentRefinementsTheme;
+    /** Fields to exclude from display (e.g. ['category'] on collection pages) */
+    excludeFields?: string[];
+}
+export declare const CurrentRefinements: React.FC<CurrentRefinementsProps>;
+//# sourceMappingURL=CurrentRefinements.d.ts.map

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

@@ -0,0 +1 @@
+{"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;IAChC,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AA0FD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiThE,CAAC"}

package/dist/components/CurrentRefinements.js

@@ -0,0 +1,302 @@
+/**
+ * CurrentRefinements Component
+ *
+ * Displays currently active filters/refinements with ability to clear them.
+ * Supports StateManager auto-sync, display variants, layout modes, and animations.
+ */
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+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, excludeFields, }) => {
+    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 });
+        });
+        const merged = nonRange;
+        if (excludeFields && excludeFields.length > 0) {
+            const excluded = new Set(excludeFields);
+            return merged.filter(r => !excluded.has(r.field));
+        }
+        return merged;
+    }, [refinementsProp, stateRefinementsKey, excludeFields]);
+    // 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 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,
+            } },
+            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())));
+    };
+    // 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,
+        // When a custom list theme is provided, make the container transparent to layout
+        // so the list div becomes the direct layout child (enables overflow scroll from parent)
+        ...(refinementsTheme.list && !style?.display ? { display: 'contents' } : {}),
+    };
+    const listStyles = {
+        display: 'flex',
+        flexDirection: layout === 'vertical' ? 'column' : 'row',
+        alignItems: layout === 'vertical' ? 'flex-start' : 'center',
+        marginBottom: showClearAll && refinements.length > 0 ? theme.spacing.medium : 0,
+        // Only apply flex-wrap if no custom list theme is provided (let theme classes control wrapping)
+        ...(!refinementsTheme.list ? { flexWrap: layout === 'vertical' ? 'nowrap' : 'wrap' } : {}),
+    };
+    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); }
+        }
+      `),
+        refinements.length > 0 && (React.createElement(React.Fragment, null,
+            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}`,
+                    borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                    backgroundColor: theme.colors.background,
+                    color: theme.colors.text,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize.small,
+                    textDecoration: 'underline',
+                    transition: `background-color ${TRANSITIONS.fast}`,
+                } }, "Clear all filters"))))));
+};