@indxsearch/intrface 2.1.0 → 3.0.0-alpha.20260617

package/CHANGELOG.md

@@ -1,10 +1,30 @@
 # Changelog
 
-All notable changes to @indxsearch/intrface will be documented in this file.
+All notable changes to `@indxsearch/intrface` will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.0] - 2026-05-12
+
+### Changed
+- **BREAKING**: Package renamed from `@indxsearch/intrface` to `@indxsearch/intrface`
+- Targets Indx v5 and IndxCloudApi v2
+
+### Compatibility
+- Requires IndxCloudApi v2
+- React ^19.0.0
+- React DOM ^19.0.0
+
+---
+
+## [2.1.1] - 2026-01-21
+
+### Fixed
+- **CRITICAL**: Fixed missing TypeScript declaration files (.d.ts) in published package
+  - v2.1.0 was published without declaration files, causing TypeScript compilation errors
+  - All type definitions are now properly included in the npm package
+
 ## [2.1.0] - 2026-01-21
 
 ### Added

package/README.md

@@ -10,18 +10,18 @@ A powerful, flexible React search UI library for Indx Search with [IndxCloudApi]
 - 📱 **Mobile-responsive** - Built-in responsive design
 - ⚡ **Debounced searches** - Optimized performance
 - 🎨 **Customizable rendering** - Full control over result display
-- 🔒 **Secure authentication** - Session-based authentication with automatic login
+- 🔒 **Secure authentication** - Bearer-token authentication
 
 ## Compatibility
 
 | Package | Version |
 |---------|---------|
-| **IndxCloudApi** | `1.0.2` |
+| **IndxCloudApi** | `2.0` |
 | **React** | `^19.0.0` |
 | **React DOM** | `^19.0.0` |
-| **Node.js** | `>=16.0.0` |
+| **Node.js** | `^20.19.0 \|\| >=22.12.0` |
 
-> **Note:** This library is designed specifically for IndxCloudApi version 1.0.2. Different API versions may have incompatible changes.
+> **Note:** This library targets IndxCloudApi v2.0 (powered by IndxSearchLib v5 alpha). Different API versions may have incompatible changes.
 
 ## Installation
 
@@ -37,29 +37,25 @@ npm install @indxsearch/intrface @indxsearch/systm @indxsearch/pixl
 
 Create a `.env.local` file in your project root:
 
-**Option A: Using Bearer Token (Recommended for Production)**
 ```bash
 VITE_INDX_URL=https://your-indx-server.com
-VITE_INDX_TOKEN=your-jwt-bearer-token-here
+VITE_INDX_TOKEN=your-bearer-token-here
 ```
 
-**Option B: Using Email/Password (Quick Start)**
-```bash
-VITE_INDX_URL=https://your-indx-server.com
-VITE_INDX_EMAIL=your@email.com
-VITE_INDX_PASSWORD=yourpassword
-```
+Create and monitor your bearer token on the IndxCloudApi website.
+
+> Only the server URL and token come from the environment. Your **team** and **dataset** identify *what* you're searching, so they're passed directly as props on `SearchProvider` (shown below) — not as env vars.
 
 **For local development:**
 ```bash
-VITE_INDX_URL=http://localhost:5001
-# Then add either token or email/password as shown above
+VITE_INDX_URL=https://localhost:5001
+VITE_INDX_TOKEN=your-bearer-token-here
 ```
 
 **Security Notes:**
 - Never commit `.env.local` to version control
-- Store credentials/tokens securely in environment variables
-- For production deployments, prefer bearer token authentication
+- The token is exposed in the browser — use a read-only / scoped search token
+- Store the token in environment variables; never hardcode it
 
 ### 2. Import Styles
 
@@ -78,11 +74,11 @@ export default function SearchPage() {
   return (
     <SearchProvider
       url={import.meta.env.VITE_INDX_URL}
-      email={import.meta.env.VITE_INDX_EMAIL}
-      password={import.meta.env.VITE_INDX_PASSWORD}
+      preAuthenticatedToken={import.meta.env.VITE_INDX_TOKEN}
+      team="my-team"
       dataset="products"
     >
-      <SearchInput placeholder="Search products..." />
+      <SearchInput />
 
       <SearchResults
         fields={['name', 'description', 'category']}
@@ -104,28 +100,24 @@ export default function SearchPage() {
 
 ```typescript
 // products page
-<SearchProvider url={url} email={email} password={password} dataset="products">
+<SearchProvider url={url} preAuthenticatedToken={token} team="my-team" dataset="products">
   {/* ... */}
 </SearchProvider>
 
 // articles page
-<SearchProvider url={url} email={email} password={password} dataset="articles">
+<SearchProvider url={url} preAuthenticatedToken={token} team="my-team" dataset="articles">
   {/* ... */}
 </SearchProvider>
 ```
 
 ## Authentication
 
-The library supports **two authentication methods**: bearer token and email/password login.
-
-### Method 1: Bearer Token (Recommended for Production)
-
-Use a pre-authenticated JWT bearer token. This is ideal when you have a backend that generates tokens for your users.
+Authentication uses a **pre-issued bearer token**. Create and monitor tokens on the IndxCloudApi website, then provide the token to `SearchProvider`.
 
 **Environment setup:**
 ```bash
 VITE_INDX_URL=https://your-indx-server.com
-VITE_INDX_TOKEN=your-jwt-bearer-token-here
+VITE_INDX_TOKEN=your-bearer-token-here
 ```
 
 **Usage:**
@@ -133,57 +125,18 @@ VITE_INDX_TOKEN=your-jwt-bearer-token-here
 <SearchProvider
   url={import.meta.env.VITE_INDX_URL}
   preAuthenticatedToken={import.meta.env.VITE_INDX_TOKEN}
+  team="my-team"
   dataset="products"
 >
   {/* Your search UI */}
 </SearchProvider>
 ```
 
-**When to use:**
-- ✅ Production applications with backend authentication
-- ✅ When you have existing token infrastructure
-- ✅ For better security (tokens can have expiration, limited scope)
-- ✅ When you want to avoid storing passwords client-side
-
-### Method 2: Email/Password (Quick Start & Development)
-
-Automatically logs in when the app initializes using email and password.
-
-**Environment setup:**
-```bash
-VITE_INDX_URL=https://your-indx-server.com
-VITE_INDX_EMAIL=your@email.com
-VITE_INDX_PASSWORD=yourpassword
-```
-
-**Usage:**
-```typescript
-<SearchProvider
-  url={import.meta.env.VITE_INDX_URL}
-  email={import.meta.env.VITE_INDX_EMAIL}
-  password={import.meta.env.VITE_INDX_PASSWORD}
-  dataset="products"
->
-  {/* Your search UI */}
-</SearchProvider>
-```
-
-**How it works:**
-1. You provide email and password to `SearchProvider`
-2. On mount, the library automatically calls the Login API endpoint
-3. A fresh session token is obtained and used for all subsequent requests
-4. No manual token management required
-
-**When to use:**
-- ✅ Quick prototyping and development
-- ✅ Demo applications
-- ✅ When you don't have token infrastructure yet
-
-**Security Best Practices:**
-- Store credentials/tokens in environment variables (`.env.local`)
-- Never commit `.env.local` to version control
+**Security best practices:**
+- Create a read-only / scoped search token for client-side use
+- Store the token in environment variables (`.env.local`); never commit it
 - Use secure HTTPS connections in production
-- For production, prefer bearer token authentication
+- The token is exposed in the browser, so scope it to search only
 
 ## Error Handling
 
@@ -192,8 +145,7 @@ The library includes comprehensive error handling with helpful console messages:
 ### Automatic Error Detection
 
 The SearchProvider automatically validates:
-- ✅ Authentication (bearer token or email/password)
-- ✅ Login success and token retrieval (when using email/password)
+- ✅ Authentication (bearer token)
 - ✅ Dataset existence and status
 - ✅ Dataset readiness (indexing complete)
 - ✅ Empty dataset warnings
@@ -213,7 +165,7 @@ Wrap your search interface with `SearchErrorBoundary` for graceful error handlin
 import { SearchErrorBoundary, SearchProvider } from '@indxsearch/intrface';
 
 <SearchErrorBoundary>
-  <SearchProvider url={url} email={email} password={password} dataset={dataset}>
+  <SearchProvider url={url} preAuthenticatedToken={token} team={team} dataset={dataset}>
     {/* Your search UI */}
   </SearchProvider>
 </SearchErrorBoundary>
@@ -230,7 +182,7 @@ import { SearchErrorBoundary, SearchProvider } from '@indxsearch/intrface';
     </div>
   )}
 >
-  <SearchProvider url={url} email={email} password={password} dataset={dataset}>
+  <SearchProvider url={url} preAuthenticatedToken={token} team={team} dataset={dataset}>
     {children}
   </SearchProvider>
 </SearchErrorBoundary>
@@ -290,8 +242,8 @@ import { RangeFilterPanel } from '@indxsearch/intrface';
 <RangeFilterPanel
   field="price"
   label="Price Range"
-  min={0}
-  max={1000}
+  expectedMin={0}
+  expectedMax={1000}
 />
 ```
 
@@ -320,8 +272,8 @@ export default function AdvancedSearch() {
   return (
     <SearchProvider
       url={import.meta.env.VITE_INDX_URL}
-      email={import.meta.env.VITE_INDX_EMAIL}
-      password={import.meta.env.VITE_INDX_PASSWORD}
+      preAuthenticatedToken={import.meta.env.VITE_INDX_TOKEN}
+      team="my-team"
       dataset="products"
       allowEmptySearch={true}
       enableFacets={true}
@@ -339,7 +291,7 @@ export default function AdvancedSearch() {
 
         {/* Main content */}
         <main style={{ flex: 1 }}>
-          <SearchInput placeholder="Search products..." showFocus={true} />
+          <SearchInput showFocus={true} />
 
           <SearchResults
             fields={['name', 'description', 'price', 'category', 'brand']}
@@ -369,9 +321,8 @@ export default function AdvancedSearch() {
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `url` | `string` | ✅ | - | INDX server URL |
-| `preAuthenticatedToken` | `string` | ⚠️ | - | Bearer token for authentication (either this OR email/password) |
-| `email` | `string` | ⚠️ | - | User email for authentication (either this OR token) |
-| `password` | `string` | ⚠️ | - | User password for authentication (either this OR token) |
+| `preAuthenticatedToken` | `string` | ✅ | - | Bearer token created on the IndxCloudApi website |
+| `team` | `string` | ✅ | - | Team that owns the dataset — scopes requests to `/api/teams/{team}/datasets/{dataset}/…` |
 | `dataset` | `string` | ✅ | - | Dataset name |
 | `allowEmptySearch` | `boolean` | ❌ | `false` | Show results without query |
 | `enableFacets` | `boolean` | ❌ | `true` | Enable faceted search |
@@ -387,11 +338,12 @@ export default function AdvancedSearch() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `placeholder` | `string` | `'Search...'` | Input placeholder text |
 | `showClear` | `boolean` | `true` | Show clear button |
 | `showFocus` | `boolean` | `false` | Show focus ring |
 | `inputSize` | `'micro' \| 'default'` | `'default'` | Input size |
 
+> The placeholder text is configured on the provider via `searchSettings.placeholderText` (default `'Type to search'`), not as a prop on `SearchInput`.
+
 ### SearchResults Props
 
 | Prop | Type | Required | Description |
@@ -406,7 +358,7 @@ export default function AdvancedSearch() {
 |------|------|---------|-------------|
 | `field` | `string` | ✅ | Field name to filter on |
 | `label` | `string` | ❌ | Display label |
-| `displayType` | `'checkbox' \| 'button'` | `'checkbox'` | Filter UI style |
+| `displayType` | `'checkbox' \| 'button' \| 'toggle'` | `'checkbox'` | Filter UI style |
 | `layout` | `'list' \| 'grid'` | `'list'` | Layout style |
 | `limit` | `number` | `undefined` | Max filters to show |
 | `startCollapsed` | `boolean` | `false` | Start collapsed |
@@ -418,31 +370,95 @@ export default function AdvancedSearch() {
 |------|------|----------|-------------|
 | `field` | `string` | ✅ | Field name to filter on |
 | `label` | `string` | ❌ | Display label |
-| `min` | `number` | ❌ | Minimum value |
-| `max` | `number` | ❌ | Maximum value |
+| `displayType` | `'slider' \| 'input'` | ❌ | Filter UI style (default `'input'`) |
+| `expectedMin` | `number` | ❌ | Expected lower bound (default `0`) |
+| `expectedMax` | `number` | ❌ | Expected upper bound (default `1000`) |
+| `showHistogram` | `boolean` | ❌ | Show a histogram above the slider (requires the field to be facetable; default `false`) |
+| `resolution` | `number` | ❌ | Value-range per histogram bucket (e.g. `200` → 5 bars over 0–1000). Auto-derived (~20 bars) if omitted |
+| `collapsible` | `boolean` | ❌ | Whether the panel can collapse (default `true`) |
+| `startCollapsed` | `boolean` | ❌ | Start collapsed (default `false`) |
 
-## Troubleshooting
+### SortByPanel Props
 
-### "Login failed" error
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `displayType` | `'dropdown' \| 'radio'` | `'dropdown'` | Sort UI style |
+| `collapsible` | `boolean` | `true` | Allow the panel to collapse |
+| `startCollapsed` | `boolean` | `false` | Start collapsed |
 
-**Problem:** Authentication credentials are invalid
+## Hooks
 
-**Solutions:**
-1. Verify your email and password are correct
-2. Check that the credentials match your INDX account
-3. Ensure the INDX server URL is correct
-4. Check browser console for detailed error messages
+All hooks must be used within a `SearchProvider`.
+
+### useSearch / useSearchContext
+
+Access the search state and actions (query, filters, results, facets, etc.) from anywhere in the tree. `useSearch` is an alias for `useSearchContext`.
+
+```typescript
+import { useSearch } from '@indxsearch/intrface';
+
+const { state, setQuery } = useSearch();
+// state.query, state.filters, state.facets, state.searchSettings, ...
+```
+
+### useVectorSearch
+
+Embedding-based vector search against the `VectorSearch` endpoint. You supply an `embeddingFn` that turns query text into a vector; the hook posts it and resolves the matching documents.
+
+```typescript
+import { useVectorSearch } from '@indxsearch/intrface';
+
+const { results, isLoading, error, search } = useVectorSearch(embeddingFn, {
+  fieldName: 'embedding', // embedding field
+  maxResults: 10,         // optional, default 10
+  filter,                 // optional FilterProxy
+  timeoutMs,              // optional
+});
+
+await search('comfortable running shoes');
+// results: Array<{ document, documentKey, score }> | null
+```
+
+### useHybridSearch
+
+Combines full-text and vector scoring via the `HybridSearch` endpoint. Same shape as `useVectorSearch`, plus an `alpha` blend factor.
+
+```typescript
+import { useHybridSearch } from '@indxsearch/intrface';
+
+const { results, isLoading, error, search } = useHybridSearch(embeddingFn, {
+  fieldName: 'embedding',
+  alpha: 0.5,       // optional, default 0.5 — blend of text vs. vector score
+  maxResults: 10,   // optional, default 10
+  filter,           // optional FilterProxy
+  timeoutMs,        // optional
+});
+
+await search('comfortable running shoes');
+// results: Array<{ document, documentKey, score }> | null
+```
+
+## Additional Components
+
+These components are also exported and can be used for custom layouts:
+
+- `SearchResult` — a single result row; renders `children`, an optional index/score, and a skeleton state.
+- `SearchResultRow` — a lightweight row wrapper with `'title' | 'default'` variants for laying out result fields.
+- `SearchResultsSkeleton` — placeholder rows shown while results load (`rows` prop).
+- `FilterPanelSkeleton` — placeholder for a filter panel while facets load (`list` or `slider` variant).
+- `SearchSettingsPanel` — a ready-made panel for editing `searchSettings` (max results, coverage depth, placeholder text, coverage setup, etc.).
+
+## Troubleshooting
 
 ### "401 Unauthorized" errors
 
 **Problem:** Authentication failed or token is invalid
 
 **Solutions:**
-1. **If using bearer token:** Verify the token is valid and not expired. Generate a new token if needed.
-2. **If using email/password:** Refresh the page to get a new session token (automatic login)
-3. Check that the token/credentials are correctly set in your environment variables
-4. Verify the server is running and accessible
-5. Check server logs for authentication issues
+1. Verify the token is valid and not expired; create a fresh one on the IndxCloudApi website if needed
+2. Check that `VITE_INDX_TOKEN` is correctly set in your environment variables
+3. Verify the server is running and accessible
+4. Check server logs for authentication issues
 
 ### "Failed to fetch" errors
 
@@ -450,7 +466,7 @@ export default function AdvancedSearch() {
 
 **Solutions:**
 1. Verify the server URL is correct
-2. Check if the server is running (for local: `http://localhost:5001`)
+2. Check if the server is running (for local: `https://localhost:5001`)
 3. Ensure CORS is configured on the server
 4. Check browser console for detailed error
 
@@ -478,14 +494,14 @@ export default function AdvancedSearch() {
 ### Example 1: E-commerce Search
 
 ```typescript
-<SearchProvider url={url} email={email} password={password} dataset="products">
+<SearchProvider url={url} preAuthenticatedToken={token} team="my-team" dataset="products">
   <div className="search-page">
-    <SearchInput placeholder="Search products..." />
+    <SearchInput />
 
     <div className="filters">
       <ValueFilterPanel field="category" label="Category" />
       <ValueFilterPanel field="brand" label="Brand" displayType="button" />
-      <RangeFilterPanel field="price" label="Price" min={0} max={1000} />
+      <RangeFilterPanel field="price" label="Price" expectedMin={0} expectedMax={1000} />
       <ValueFilterPanel field="inStock" label="In Stock" />
     </div>
 
@@ -505,8 +521,8 @@ export default function AdvancedSearch() {
 ### Example 2: Document Search
 
 ```typescript
-<SearchProvider url={url} email={email} password={password} dataset="documents">
-  <SearchInput placeholder="Search documents..." />
+<SearchProvider url={url} preAuthenticatedToken={token} team="my-team" dataset="documents">
+  <SearchInput />
 
   <ValueFilterPanel field="docType" label="Type" />
   <ValueFilterPanel field="author" label="Author" />

package/dist/components/ActiveFiltersPanel.d.ts

@@ -0,0 +1 @@
+export declare function ActiveFiltersPanel(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/FilterPanelSkeleton.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface FilterPanelSkeletonProps {
+    title?: string;
+    rows?: number;
+    variant?: 'list' | 'slider';
+    collapsible?: boolean;
+    startCollapsed?: boolean;
+}
+export declare const FilterPanelSkeleton: React.FC<FilterPanelSkeletonProps>;

package/dist/components/RangeFilterPanel.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface RangeFilterPanelProps {
+    field: string;
+    label?: string;
+    displayType?: 'slider' | 'input';
+    expectedMin?: number;
+    expectedMax?: number;
+    collapsible?: boolean;
+    startCollapsed?: boolean;
+    showHistogram?: boolean;
+    resolution?: number;
+}
+export declare const RangeFilterPanel: React.FC<RangeFilterPanelProps>;

package/dist/components/SearchErrorBoundary.d.ts

@@ -0,0 +1,45 @@
+import { default as React, Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback?: (error: Error, reset: () => void) => ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Error boundary component for graceful error handling in search components.
+ *
+ * Catches errors during initialization and search operations, displaying
+ * user-friendly error messages with suggestions for fixing common issues.
+ *
+ * @example
+ * <SearchErrorBoundary>
+ *   <SearchProvider {...props}>
+ *     {children}
+ *   </SearchProvider>
+ * </SearchErrorBoundary>
+ *
+ * @example Custom fallback
+ * <SearchErrorBoundary
+ *   fallback={(error, reset) => (
+ *     <div>
+ *       <h2>Something went wrong</h2>
+ *       <p>{error.message}</p>
+ *       <button onClick={reset}>Try Again</button>
+ *     </div>
+ *   )}
+ * >
+ *   <SearchProvider {...props}>
+ *     {children}
+ *   </SearchProvider>
+ * </SearchErrorBoundary>
+ */
+export declare class SearchErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    reset: () => void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { InputSize } from '@indxsearch/systm';
+export interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    inputSize?: InputSize;
+    showClear?: boolean;
+    showFocus?: boolean;
+}
+export declare const SearchInput: React.FC<SearchInputProps>;

package/dist/components/SearchResult.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface SearchResultProps {
+    skeleton?: boolean;
+    index?: number;
+    score?: number;
+    showScore?: boolean;
+    children?: React.ReactNode;
+    /** Animation delay for staggered skeleton rows (seconds) */
+    skeletonDelay?: number;
+    /** Width percentages [titleWidth, subtitleWidth] for skeleton bars */
+    skeletonWidths?: [number, number];
+}
+export declare const SearchResult: React.FC<SearchResultProps>;

package/dist/components/SearchResultRow.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface SearchResultRowProps {
+    variant?: 'title' | 'default';
+    children: React.ReactNode;
+}
+export declare const SearchResultRow: React.FC<SearchResultRowProps>;

package/dist/components/SearchResults.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface SearchResultsProps {
+    fields?: string[];
+    resultsPerPage?: number;
+    children: (item: Record<string, any>) => React.ReactNode;
+}
+export declare const SearchResults: React.FC<SearchResultsProps>;

package/dist/components/SearchResultsSkeleton.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface SearchResultsSkeletonProps {
+    rows?: number;
+}
+export declare const SearchResultsSkeleton: React.FC<SearchResultsSkeletonProps>;

package/dist/components/SearchSettingsPanel.d.ts

@@ -0,0 +1 @@
+export declare function SearchSettingsPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/components/SortByPanel.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+type SortByPanelProps = {
+    displayType?: 'dropdown' | 'radio';
+    collapsible?: boolean;
+    startCollapsed?: boolean;
+};
+export declare const SortByPanel: React.FC<SortByPanelProps>;
+export {};

package/dist/components/ValueFilterPanel.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface ValueFilterPanelProps {
+    field: string;
+    label?: string;
+    preserveBlankFacetState?: boolean;
+    preserveBlankFacetStateOrder?: boolean;
+    sortFacetsBy?: 'histogram' | 'alphabetical' | 'numeric';
+    limit?: number;
+    collapsible?: boolean;
+    startCollapsed?: boolean;
+    displayType?: 'checkbox' | 'button' | 'toggle';
+    layout?: 'list' | 'grid';
+    showActivePanel?: boolean;
+    showCount?: boolean;
+    showNull?: boolean;
+    displayIfEmptyQuery?: boolean;
+    displayCondition?: (context: {
+        query: string;
+        filters: Record<string, string[]>;
+        facets: any;
+    }) => boolean;
+}
+export declare const ValueFilterPanel: React.FC<ValueFilterPanelProps>;