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

package/dist/components/Pagination.js

@@ -1,13 +1,28 @@
 /**
  * Pagination Component
  *
- * Displays pagination controls for search results
+ * Displays pagination controls for search results.
+ * Supports three display variants: numbered, load-more, and simple.
+ *
+ * CSS Variables (applied to the container element):
+ *   --seekora-pagination-bg
+ *   --seekora-pagination-color
+ *   --seekora-pagination-active-bg
+ *   --seekora-pagination-active-color
+ *   --seekora-pagination-border
+ *   --seekora-pagination-radius
  */
 import React from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
-export const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, }) => {
+/** Size-specific style tokens */
+const SIZE_TOKENS = {
+    small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '32px' },
+    medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '40px' },
+    large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px' },
+};
+export const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, variant = 'numbered', loadMoreText = 'Load More', size = 'medium', showPageInfo, previousLabel = 'Previous', nextLabel = 'Next', }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, currentPage: stateCurrentPage, setPage } = useSearchState();
     const paginationTheme = customTheme || {};
@@ -30,6 +45,19 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
         || res?.data?.total_pages
         || res?.data?.data?.total_pages
         || Math.ceil(totalResults / itemsPerPage);
+    // Resolve whether to show page info text
+    const resolvedShowPageInfo = showPageInfo !== undefined
+        ? showPageInfo
+        : variant === 'simple';
+    // Size tokens
+    const sizeTokens = SIZE_TOKENS[size];
+    // CSS variable aware helpers — allow overrides via custom properties
+    const cssVarBg = 'var(--seekora-pagination-bg, ' + theme.colors.background + ')';
+    const cssVarColor = 'var(--seekora-pagination-color, ' + theme.colors.text + ')';
+    const cssVarActiveBg = 'var(--seekora-pagination-active-bg, ' + theme.colors.primary + ')';
+    const cssVarActiveColor = 'var(--seekora-pagination-active-color, #fff)';
+    const cssVarBorder = 'var(--seekora-pagination-border, ' + theme.colors.border + ')';
+    const cssVarRadius = 'var(--seekora-pagination-radius, ' + (typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium) + ')';
     const handlePageChange = (page) => {
         if (page < 1 || page > totalPages || page === currentPage)
             return;
@@ -40,22 +68,26 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
             onPageChange(page);
         }
     };
-    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => !isDisabled && handlePageChange(page), className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled && paginationTheme.itemDisabled), style: {
-            padding: theme.spacing.small,
+    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => !isDisabled && handlePageChange(page), "aria-current": isActive ? 'page' : undefined, "aria-label": `Page ${page}`, className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled && paginationTheme.itemDisabled), style: {
+            padding: theme.spacing[sizeTokens.paddingKey],
             margin: `0 ${theme.spacing.small}`,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-            backgroundColor: isActive ? theme.colors.primary : theme.colors.background,
-            color: isActive ? '#fff' : theme.colors.text,
+            border: `1px solid ${cssVarBorder}`,
+            borderRadius: cssVarRadius,
+            backgroundColor: isActive ? cssVarActiveBg : cssVarBg,
+            color: isActive ? cssVarActiveColor : cssVarColor,
             cursor: isDisabled ? 'not-allowed' : 'pointer',
             opacity: isDisabled ? 0.5 : 1,
-            fontSize: theme.typography.fontSize.medium,
-            minWidth: '40px',
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            minWidth: sizeTokens.minWidth,
             ...(isActive && {
                 fontWeight: 'bold',
             }),
         } }, page));
-    if (totalPages <= 1) {
+    if (totalPages <= 1 && variant !== 'load-more') {
+        return null;
+    }
+    // For load-more, hide when there are no more pages to load
+    if (variant === 'load-more' && currentPage >= totalPages) {
         return null;
     }
     // Calculate page range to display
@@ -88,6 +120,94 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
         }
         return pages;
     };
+    // ── Page info element ──────────────────────────────────────────────
+    const pageInfoElement = resolvedShowPageInfo ? (React.createElement("span", { className: clsx(paginationTheme.pageInfo), style: {
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            color: cssVarColor,
+            padding: `0 ${theme.spacing.small}`,
+            whiteSpace: 'nowrap',
+        }, "aria-live": "polite" },
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages)) : null;
+    // ── Load More variant ──────────────────────────────────────────────
+    if (variant === 'load-more') {
+        const remaining = Math.max(0, totalResults - currentPage * itemsPerPage);
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.loadMoreButton), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.large}`,
+                    border: 'none',
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarActiveBg,
+                    color: cssVarActiveColor,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                    minWidth: sizeTokens.minWidth,
+                }, "aria-label": remaining > 0 ? `${loadMoreText} (${remaining} remaining)` : loadMoreText },
+                loadMoreText,
+                remaining > 0 && (React.createElement("span", { className: clsx(paginationTheme.loadMoreText), style: {
+                        marginLeft: theme.spacing.small,
+                        opacity: 0.85,
+                        fontSize: theme.typography.fontSize.small,
+                    } },
+                    "(",
+                    remaining,
+                    " remaining)"))),
+            pageInfoElement));
+    }
+    // ── Simple variant ─────────────────────────────────────────────────
+    if (variant === 'simple') {
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, paginationTheme.simpleContainer, className), style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: theme.spacing.medium,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.simpleButton, currentPage === 1 && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === 1 ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Previous page" }, previousLabel),
+            React.createElement("span", { className: clsx(paginationTheme.simpleText, paginationTheme.pageInfo), style: {
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    color: cssVarColor,
+                    whiteSpace: 'nowrap',
+                }, "aria-live": "polite" },
+                "Page ",
+                currentPage,
+                " of ",
+                totalPages),
+            React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.simpleButton, currentPage === totalPages && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === totalPages ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Next page" }, nextLabel)));
+    }
+    // ── Numbered variant (default — original behavior) ─────────────────
     const pageNumbers = getPageNumbers();
     return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: style, "aria-label": "Pagination" },
         React.createElement("ul", { className: paginationTheme.list, style: {
@@ -98,27 +218,44 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
                 padding: 0,
                 margin: 0,
                 flexWrap: 'wrap',
+            }, tabIndex: 0, onKeyDown: (e) => {
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    handlePageChange(currentPage - 1);
+                }
+                else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    handlePageChange(currentPage + 1);
+                }
+                else if (e.key === 'Home') {
+                    e.preventDefault();
+                    handlePageChange(1);
+                }
+                else if (e.key === 'End') {
+                    e.preventDefault();
+                    handlePageChange(totalPages);
+                }
             } },
             showPrevNext && (React.createElement("li", null,
                 React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.item, currentPage === 1 && paginationTheme.itemDisabled), style: {
-                        padding: theme.spacing.small,
+                        padding: theme.spacing[sizeTokens.paddingKey],
                         margin: `0 ${theme.spacing.small}`,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                        backgroundColor: theme.colors.background,
-                        color: theme.colors.text,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
                         cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
                         opacity: currentPage === 1 ? 0.5 : 1,
-                        fontSize: theme.typography.fontSize.medium,
-                    }, "aria-label": "Previous page" }, "Previous"))),
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Previous page" }, previousLabel))),
             pageNumbers.map((page, index) => {
                 if (page === 'ellipsis') {
                     return (React.createElement("li", { key: `ellipsis-${index}` },
                         React.createElement("span", { className: paginationTheme.ellipsis, style: {
-                                padding: theme.spacing.small,
+                                padding: theme.spacing[sizeTokens.paddingKey],
                                 margin: `0 ${theme.spacing.small}`,
-                                color: theme.colors.text,
-                                fontSize: theme.typography.fontSize.medium,
+                                color: cssVarColor,
+                                fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
                             } }, "...")));
                 }
                 const isActive = page === currentPage;
@@ -129,14 +266,15 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
             }),
             showPrevNext && (React.createElement("li", null,
                 React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.item, currentPage === totalPages && paginationTheme.itemDisabled), style: {
-                        padding: theme.spacing.small,
+                        padding: theme.spacing[sizeTokens.paddingKey],
                         margin: `0 ${theme.spacing.small}`,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                        backgroundColor: theme.colors.background,
-                        color: theme.colors.text,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
                         cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
                         opacity: currentPage === totalPages ? 0.5 : 1,
-                        fontSize: theme.typography.fontSize.medium,
-                    }, "aria-label": "Next page" }, "Next"))))));
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Next page" }, nextLabel))),
+            resolvedShowPageInfo && (React.createElement("li", { style: { marginLeft: theme.spacing.small } }, pageInfoElement)))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"QuerySuggestionsDropdown.d.ts","sourceRoot":"","sources":["../../src/components/QuerySuggestionsDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,0BAA0B,EAC1B,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,6BAA6B,EAC9B,MAAM,0BAA0B,CAAC;AAMlC,MAAM,WAAW,6BAA8B,SAAQ,6BAA6B;IAClF,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,wCAAwC;IACxC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,yBAAyB;IACzB,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC,wBAAwB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CACjB,UAAU,EAAE,cAAc,EAC1B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,KACzC,KAAK,CAAC,SAAS,CAAC;IACrB,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,CACnB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,KACd,KAAK,CAAC,SAAS,CAAC;IACrB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC7C,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0BAA0B;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,2BAA2B;IAC1C,uCAAuC;IACvC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,4BAA4B;IAC5B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB;IACvB,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,4BAA4B;IAC5B,aAAa,EAAE,MAAM,MAAM,CAAC;CAC7B;AAsKD,eAAO,MAAM,wBAAwB,mHAmanC,CAAC;AAEH,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"QuerySuggestionsDropdown.d.ts","sourceRoot":"","sources":["../../src/components/QuerySuggestionsDropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/QuerySuggestionsDropdown.js

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

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

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

package/dist/components/RangeInput.js

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

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

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