@shipfox/react-ui 0.21.0 → 0.23.0

package/dist/components/dashboard/components/charts/bar-chart.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { type BarProps, type CartesianGridProps, BarChart as RechartsBarChart, type XAxisProps, type YAxisProps } from 'recharts';
 import type { ChartColor } from './colors';
 export type RechartsBarChartProps = ComponentProps<typeof RechartsBarChart>;
@@ -23,8 +23,9 @@ export interface BarChartProps {
     };
     className?: string;
     title?: string;
+    action?: ReactNode;
     barRadius?: [number, number, number, number];
     maxBarSize?: number;
 }
-export declare function BarChart({ data, bars, height, xAxis, yAxis, grid, tooltip, className, title, barRadius, maxBarSize, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarChart({ data, bars, height, xAxis, yAxis, grid, tooltip, className, title, action, barRadius, maxBarSize, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=bar-chart.d.ts.map

package/dist/components/dashboard/components/charts/bar-chart.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/card/index.js';
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from '../../../../components/card/index.js';
 import { EmptyState } from '../../../../components/empty-state/index.js';
 import { Text } from '../../../../components/typography/index.js';
 import { useState } from 'react';
 import { Bar, CartesianGrid, BarChart as RechartsBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import { ChartTooltipContent } from './chart-tooltip.js';
 import { getChartColor, getHoverOpacity, normalizeTooltipPayload } from './utils.js';
-export function BarChart({ data, bars, height = 200, xAxis, yAxis, grid, tooltip, className, title, barRadius = [
+export function BarChart({ data, bars, height = 200, xAxis, yAxis, grid, tooltip, className, title, action, barRadius = [
     0,
     0,
     0,
@@ -23,11 +23,17 @@ export function BarChart({ data, bars, height = 200, xAxis, yAxis, grid, tooltip
     return /*#__PURE__*/ _jsxs(Card, {
         className: className,
         children: [
-            title && /*#__PURE__*/ _jsx(CardHeader, {
-                children: /*#__PURE__*/ _jsx(CardTitle, {
-                    variant: "h4",
-                    children: title
-                })
+            (title || action) && /*#__PURE__*/ _jsxs(CardHeader, {
+                className: "flex flex-row items-center justify-between",
+                children: [
+                    title && /*#__PURE__*/ _jsx(CardTitle, {
+                        variant: "h4",
+                        children: title
+                    }),
+                    action && /*#__PURE__*/ _jsx(CardAction, {
+                        children: action
+                    })
+                ]
             }),
             /*#__PURE__*/ _jsxs(CardContent, {
                 children: [

package/dist/components/dashboard/components/charts/line-chart.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { type CartesianGridProps, type LineProps, LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from 'recharts';
 import type { ChartColor } from './colors';
 export type RechartsLineChartProps = ComponentProps<typeof RechartsLineChart>;
@@ -23,6 +23,7 @@ export interface LineChartProps {
     };
     className?: string;
     title?: string;
+    action?: ReactNode;
 }
-export declare function LineChart({ data, lines, height, xAxis, yAxis, grid, tooltip, className, title, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineChart({ data, lines, height, xAxis, yAxis, grid, tooltip, className, title, action, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=line-chart.d.ts.map

package/dist/components/dashboard/components/charts/line-chart.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/card/index.js';
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from '../../../../components/card/index.js';
 import { EmptyState } from '../../../../components/empty-state/index.js';
 import { Text } from '../../../../components/typography/index.js';
 import { useState } from 'react';
 import { CartesianGrid, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import { ChartTooltipContent } from './chart-tooltip.js';
 import { getChartColor, getHoverOpacity, normalizeTooltipPayload } from './utils.js';
-export function LineChart({ data, lines, height = 200, xAxis, yAxis, grid, tooltip, className, title }) {
+export function LineChart({ data, lines, height = 200, xAxis, yAxis, grid, tooltip, className, title, action }) {
     const [hoveredDataKey, setHoveredDataKey] = useState(undefined);
     const visibleLines = lines.filter((line)=>!line.hide);
     const hasData = data && data.length > 0 && visibleLines.length > 0;
@@ -18,11 +18,17 @@ export function LineChart({ data, lines, height = 200, xAxis, yAxis, grid, toolt
     return /*#__PURE__*/ _jsxs(Card, {
         className: className,
         children: [
-            title && /*#__PURE__*/ _jsx(CardHeader, {
-                children: /*#__PURE__*/ _jsx(CardTitle, {
-                    variant: "h4",
-                    children: title
-                })
+            (title || action) && /*#__PURE__*/ _jsxs(CardHeader, {
+                className: "flex flex-row items-center justify-between",
+                children: [
+                    title && /*#__PURE__*/ _jsx(CardTitle, {
+                        variant: "h4",
+                        children: title
+                    }),
+                    action && /*#__PURE__*/ _jsx(CardAction, {
+                        children: action
+                    })
+                ]
             }),
             /*#__PURE__*/ _jsxs(CardContent, {
                 children: [

package/dist/components/dashboard/context/dashboard-context.d.ts

@@ -2,10 +2,14 @@
  * Dashboard Context Provider
  *
  * Provides centralized state management for dashboard components including
- * search, filters, column visibility, time period, and sidebar navigation.
+ * search, filters, column visibility, time interval, and sidebar navigation.
  */
+import type { IntervalSelection } from '../../../components/interval-selector';
 import { type ReactNode } from 'react';
-import type { DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn } from './types';
+import type { DashboardState, FilterOption, ResourceType, ResourceTypeOption, ViewColumn } from './types';
+export declare const RESOURCE_TYPES: Array<ResourceType>;
+export declare const RESOURCE_TYPE_LABELS: Record<ResourceType, string>;
+export declare const RESOURCE_TYPE_OPTIONS: ResourceTypeOption[];
 export interface DashboardProviderProps {
     children: ReactNode;
     /**
@@ -19,10 +23,10 @@ export interface DashboardProviderProps {
      */
     initialFilters?: FilterOption[];
     /**
-     * Initial time period
-     * @default '2days'
+     * Initial time interval selection
+     * @default { type: 'relative', duration: {days: 7} }
      */
-    initialTimePeriod?: TimePeriod;
+    initialSelection?: IntervalSelection;
     /**
      * Initial active sidebar item
      * @default 'reliability'
@@ -30,7 +34,7 @@ export interface DashboardProviderProps {
     initialActiveSidebarItem?: string;
     /**
      * Initial resource type
-     * @default 'ci-pipeline'
+     * @default 'ci.pipeline'
      */
     initialResourceType?: ResourceType;
     /**
@@ -46,12 +50,12 @@ export interface DashboardProviderProps {
  *
  * @example
  * ```tsx
- * <DashboardProvider initialTimePeriod="7days">
+ * <DashboardProvider initialInterval={intervalToNowFromDuration({days: 7})}>
  *   <AnalyticsContent />
  * </DashboardProvider>
  * ```
  */
-export declare function DashboardProvider({ children, initialColumns, initialFilters, initialTimePeriod, initialActiveSidebarItem, initialResourceType, columnMapping, }: DashboardProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardProvider({ children, initialColumns, initialFilters, initialSelection, initialActiveSidebarItem, initialResourceType, columnMapping, }: DashboardProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access dashboard context
  *

package/dist/components/dashboard/context/dashboard-context.js

@@ -2,7 +2,7 @@
  * Dashboard Context Provider
  *
  * Provides centralized state management for dashboard components including
- * search, filters, column visibility, time period, and sidebar navigation.
+ * search, filters, column visibility, time interval, and sidebar navigation.
  */ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { updateViewColumnsFromVisibility, viewColumnsToVisibilityState } from './utils.js';
@@ -85,6 +85,37 @@ const DashboardContext = /*#__PURE__*/ createContext(undefined);
         checked: false
     }
 ];
+export const RESOURCE_TYPES = [
+    'ci.pipeline',
+    'ci.job',
+    'ci.step',
+    'test.run',
+    'test.suite',
+    'test.case'
+];
+export const RESOURCE_TYPE_LABELS = {
+    'ci.pipeline': 'CI Pipeline',
+    'ci.job': 'CI Job',
+    'ci.step': 'CI Step',
+    'test.run': 'Test Run',
+    'test.suite': 'Test Suite',
+    'test.case': 'Test Case'
+};
+export const RESOURCE_TYPE_OPTIONS = [
+    ...RESOURCE_TYPES.map((type)=>({
+            id: type,
+            label: RESOURCE_TYPE_LABELS[type],
+            disabled: type.startsWith('test.')
+        }))
+];
+/**
+ * Default selection (relative: last 7 days)
+ */ const DEFAULT_SELECTION = {
+    type: 'relative',
+    duration: {
+        days: 7
+    }
+};
 /**
  * Dashboard Provider Component
  *
@@ -92,19 +123,22 @@ const DashboardContext = /*#__PURE__*/ createContext(undefined);
  *
  * @example
  * ```tsx
- * <DashboardProvider initialTimePeriod="7days">
+ * <DashboardProvider initialInterval={intervalToNowFromDuration({days: 7})}>
  *   <AnalyticsContent />
  * </DashboardProvider>
  * ```
- */ export function DashboardProvider({ children, initialColumns = DEFAULT_COLUMNS, initialFilters = DEFAULT_FILTERS, initialTimePeriod = '2days', initialActiveSidebarItem = 'reliability', initialResourceType = 'ci-pipeline', columnMapping }) {
+ */ export function DashboardProvider({ children, initialColumns = DEFAULT_COLUMNS, initialFilters = DEFAULT_FILTERS, initialSelection = DEFAULT_SELECTION, initialActiveSidebarItem = 'reliability', initialResourceType = 'ci.pipeline', columnMapping }) {
     // State management
     const [searchQuery, setSearchQuery] = useState('');
-    const [timePeriod, setTimePeriod] = useState(initialTimePeriod);
+    const [selection, setSelection] = useState(initialSelection);
     const [lastUpdated, setLastUpdated] = useState('13s ago');
     const [columns, setColumns] = useState(initialColumns);
     const [filters, setFilters] = useState(initialFilters);
     const [activeSidebarItem, setActiveSidebarItem] = useState(initialActiveSidebarItem);
     const [resourceType, setResourceType] = useState(initialResourceType);
+    const handleSelectionChange = useCallback((newSelection)=>{
+        setSelection(newSelection);
+    }, []);
     // Compute column visibility state
     const columnVisibility = useMemo(()=>viewColumnsToVisibilityState(columns, columnMapping), [
         columns,
@@ -121,8 +155,8 @@ const DashboardContext = /*#__PURE__*/ createContext(undefined);
     const value = useMemo(()=>({
             searchQuery,
             setSearchQuery,
-            timePeriod,
-            setTimePeriod,
+            selection,
+            setSelection: handleSelectionChange,
             lastUpdated,
             setLastUpdated,
             columns,
@@ -137,7 +171,8 @@ const DashboardContext = /*#__PURE__*/ createContext(undefined);
             setResourceType
         }), [
         searchQuery,
-        timePeriod,
+        selection,
+        handleSelectionChange,
         lastUpdated,
         columns,
         columnVisibility,

package/dist/components/dashboard/context/index.d.ts

@@ -2,7 +2,7 @@
  * Dashboard Context exports
  */
 export type { DashboardProviderProps } from './dashboard-context';
-export { DashboardProvider, useDashboardContext } from './dashboard-context';
-export type { DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn } from './types';
+export { DashboardProvider, RESOURCE_TYPE_LABELS, RESOURCE_TYPE_OPTIONS, RESOURCE_TYPES, useDashboardContext, } from './dashboard-context';
+export type { DashboardState, FilterOption, ResourceType, ResourceTypeOption, ViewColumn, } from './types';
 export { DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, viewColumnsToVisibilityState, } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dashboard/context/index.js

@@ -1,6 +1,6 @@
 /**
  * Dashboard Context exports
- */ export { DashboardProvider, useDashboardContext } from './dashboard-context.js';
+ */ export { DashboardProvider, RESOURCE_TYPE_LABELS, RESOURCE_TYPE_OPTIONS, RESOURCE_TYPES, useDashboardContext } from './dashboard-context.js';
 export { DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, viewColumnsToVisibilityState } from './utils.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/dashboard/context/types.d.ts

@@ -2,6 +2,7 @@
  * Shared types for dashboard components
  */
 import type { VisibilityState } from '@tanstack/react-table';
+import type { IntervalSelection } from '../../../components/interval-selector';
 /**
  * View column configuration for table visibility control
  */
@@ -18,22 +19,23 @@ export interface FilterOption {
     label: string;
     checked: boolean;
 }
-/**
- * Time period option
- */
-export type TimePeriod = '1hour' | '1day' | '2days' | '7days' | '30days';
+export type ResourceType = 'ci.pipeline' | 'ci.job' | 'ci.step' | 'test.run' | 'test.suite' | 'test.case';
 /**
  * Resource type option
  */
-export type ResourceType = 'ci-pipeline' | 'ci-jobs' | 'ci-steps' | 'runners' | 'suite' | 'cases';
+export interface ResourceTypeOption {
+    id: ResourceType;
+    label: string;
+    disabled?: boolean;
+}
 /**
  * Dashboard context state
  */
 export interface DashboardState {
     searchQuery: string;
     setSearchQuery: (query: string) => void;
-    timePeriod: TimePeriod;
-    setTimePeriod: (period: TimePeriod) => void;
+    selection: IntervalSelection;
+    setSelection: (selection: IntervalSelection) => void;
     lastUpdated: string;
     setLastUpdated: (timestamp: string) => void;
     columns: ViewColumn[];

package/dist/components/dashboard/index.d.ts

@@ -7,12 +7,10 @@ export type { MobileSidebarProps } from './components/mobile-sidebar';
 export { MobileSidebar } from './components/mobile-sidebar';
 export type { SidebarNavItem, SidebarProps } from './components/sidebar';
 export { defaultSidebarItems, Sidebar } from './components/sidebar';
-export type { DashboardProviderProps, DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn, } from './context';
-export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState, } from './context';
+export type { DashboardProviderProps, DashboardState, FilterOption, ResourceType, ViewColumn, } from './context';
+export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, RESOURCE_TYPE_OPTIONS, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState, } from './context';
 export type { DashboardProps } from './dashboard';
 export { Dashboard } from './dashboard';
-export type { ExpressionFilterBarProps, ResourceTypeOption } from './filters';
-export { ExpressionFilterBar } from './filters';
 export { AnalyticsPage, JobsPage } from './pages';
 export type { TableWrapperProps } from './table';
 export { TableWrapper } from './table';

package/dist/components/dashboard/index.js

@@ -3,9 +3,8 @@ export { DashboardAlert } from './components/dashboard-alert.js';
 export { KpiCard, KpiCardsGroup } from './components/kpi-card.js';
 export { MobileSidebar } from './components/mobile-sidebar.js';
 export { defaultSidebarItems, Sidebar } from './components/sidebar.js';
-export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState } from './context/index.js';
+export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, RESOURCE_TYPE_OPTIONS, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState } from './context/index.js';
 export { Dashboard } from './dashboard.js';
-export { ExpressionFilterBar } from './filters/index.js';
 export { AnalyticsPage, JobsPage } from './pages/index.js';
 export { TableWrapper } from './table/index.js';
 export { FilterButton, PageToolbar, ToolbarActions, ToolbarSearch, ViewDropdown } from './toolbar/index.js';

package/dist/components/dashboard/pages/analytics-page.js

@@ -3,10 +3,11 @@ import { Button } from '../../../components/button/index.js';
 import { CountUp } from '../../../components/count-up/count-up.js';
 import { Icon } from '../../../components/icon/index.js';
 import { SearchInline } from '../../../components/search/search-inline.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../components/select/index.js';
 import { jobColumns } from '../../../components/table/table.stories.columns.js';
 import { jobsData } from '../../../components/table/table.stories.data.js';
 import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { BarChart } from '../components/charts/bar-chart.js';
 import { LineChart } from '../components/charts/line-chart.js';
 import { DashboardAlert } from '../components/dashboard-alert.js';
@@ -14,7 +15,6 @@ import { KpiCardsGroup } from '../components/kpi-card.js';
 import { MobileSidebar } from '../components/mobile-sidebar.js';
 import { defaultSidebarItems, Sidebar } from '../components/sidebar.js';
 import { useDashboardContext } from '../context/index.js';
-import { ExpressionFilterBar } from '../filters/index.js';
 import { TableWrapper } from '../table/index.js';
 import { PageToolbar, ToolbarActions } from '../toolbar/index.js';
 const performanceData = [
@@ -146,8 +146,9 @@ const kpiCards = [
     }
 ];
 export function AnalyticsPage() {
-    const { searchQuery, setSearchQuery, timePeriod, setTimePeriod, lastUpdated, columnVisibility, updateColumnVisibility, activeSidebarItem, setActiveSidebarItem, resourceType, setResourceType } = useDashboardContext();
+    const { searchQuery, setSearchQuery, columnVisibility, updateColumnVisibility, activeSidebarItem, setActiveSidebarItem } = useDashboardContext();
     const isDesktop = useMediaQuery('(min-width: 1024px)');
+    const [performanceTimeRange, setPerformanceTimeRange] = useState('2h');
     const pageTitle = useMemo(()=>{
         const activeItem = defaultSidebarItems.find((item)=>item.id === activeSidebarItem);
         return activeItem?.label || 'Reliability';
@@ -162,9 +163,7 @@ export function AnalyticsPage() {
         children: [
             /*#__PURE__*/ _jsx(PageToolbar, {
                 title: pageTitle,
-                timePeriod: timePeriod,
-                onTimePeriodChange: setTimePeriod,
-                lastUpdated: lastUpdated,
+                onRefresh: ()=>undefined,
                 children: !isDesktop && /*#__PURE__*/ _jsx(MobileSidebar, {
                     items: defaultSidebarItems,
                     activeItemId: activeSidebarItem,
@@ -194,10 +193,6 @@ export function AnalyticsPage() {
                                     onClick: ()=>undefined
                                 }
                             }),
-                            /*#__PURE__*/ _jsx(ExpressionFilterBar, {
-                                value: resourceType,
-                                onValueChange: setResourceType
-                            }),
                             /*#__PURE__*/ _jsx(ToolbarActions, {}),
                             /*#__PURE__*/ _jsx(KpiCardsGroup, {
                                 cards: kpiCards
@@ -247,7 +242,42 @@ export function AnalyticsPage() {
                                         },
                                         tooltip: {
                                             labelFormatter: ()=>`Jul 22, 2025`
-                                        }
+                                        },
+                                        action: /*#__PURE__*/ _jsxs(Select, {
+                                            value: performanceTimeRange,
+                                            onValueChange: setPerformanceTimeRange,
+                                            children: [
+                                                /*#__PURE__*/ _jsx(SelectTrigger, {
+                                                    "aria-label": "Time range",
+                                                    className: "w-60",
+                                                    children: /*#__PURE__*/ _jsx(SelectValue, {})
+                                                }),
+                                                /*#__PURE__*/ _jsxs(SelectContent, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(SelectItem, {
+                                                            value: "1h",
+                                                            children: "1h"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(SelectItem, {
+                                                            value: "2h",
+                                                            children: "2h"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(SelectItem, {
+                                                            value: "6h",
+                                                            children: "6h"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(SelectItem, {
+                                                            value: "12h",
+                                                            children: "12h"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(SelectItem, {
+                                                            value: "24h",
+                                                            children: "24h"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
                                     }),
                                     /*#__PURE__*/ _jsx(BarChart, {
                                         data: durationData,

package/dist/components/dashboard/pages/jobs-page.js

@@ -9,7 +9,7 @@ import { useDashboardContext } from '../context/index.js';
 import { TableWrapper } from '../table/index.js';
 import { PageToolbar } from '../toolbar/index.js';
 export function JobsPage() {
-    const { searchQuery, setSearchQuery, timePeriod, setTimePeriod, lastUpdated, columnVisibility, updateColumnVisibility } = useDashboardContext();
+    const { searchQuery, setSearchQuery, columnVisibility, updateColumnVisibility } = useDashboardContext();
     const filteredData = useMemo(()=>jobsData.filter((job)=>job.name.toLowerCase().includes(searchQuery.toLowerCase())), [
         searchQuery
     ]);
@@ -18,9 +18,7 @@ export function JobsPage() {
         children: [
             /*#__PURE__*/ _jsx(PageToolbar, {
                 title: "Jobs",
-                timePeriod: timePeriod,
-                onTimePeriodChange: setTimePeriod,
-                lastUpdated: lastUpdated
+                onRefresh: ()=>undefined
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: "flex-1 px-12 pb-12 pt-4 md:px-24 md:pb-24 overflow-auto",

package/dist/components/dashboard/toolbar/filter-button.d.ts

@@ -1,12 +1,8 @@
-export interface FilterOption {
-    id: string;
-    label: string;
-    checked: boolean;
+import type { HTMLAttributes } from 'react';
+import type { ResourceType } from '../context/types';
+export interface FilterButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    value: ResourceType;
+    onValueChange: (value: ResourceType) => void;
 }
-export interface FilterButtonProps {
-    filters?: FilterOption[];
-    onFiltersChange?: (filters: FilterOption[]) => void;
-    className?: string;
-}
-export declare function FilterButton({ filters: controlledFilters, onFiltersChange, className, }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterButton({ value, onValueChange, className, ...props }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=filter-button.d.ts.map