Filter Panel

import { FilterPanel, type FilterGroup, type FilterState } from '@/blocks/forms/filter-panel'

// Define filter groups
const filters: FilterGroup[] = [
 {
 type: 'search',
 id: 'search',
 label: 'Search',
 placeholder: 'Search...',
 },
 {
 type: 'checkbox',
 id: 'category',
 label: 'Category',
 options: [
 { id: 'electronics', label: 'Electronics', count: 42 },
 { id: 'clothing', label: 'Clothing', count: 156 },
 ],
 },
 {
 type: 'range',
 id: 'price',
 label: 'Price',
 min: 0,
 max: 1000,
 unit: '$',
 },
]

// Sidebar variant
const [filterState, setFilterState] = useState<FilterState>({})

<FilterPanel
 variant="sidebar"
 groups={filters}
 value={filterState}
 onChange={setFilterState}
/>

// Horizontal variant (above data table)
<FilterPanel
 variant="horizontal"
 groups={filters}
 value={filterState}
 onChange={setFilterState}
/>

// Dropdown variant (compact, single button)
<FilterPanel
 variant="dropdown"
 groups={filtersWithIcons}
 value={filterState}
 onChange={setFilterState}
 buttonSize="md"
 buttonVariant="secondary"
/>

// With deferred apply
<FilterPanel
 variant="sidebar"
 groups={filters}
 showApplyButton
 onApply={(filters) => fetchData(filters)}
/>

// Checkbox filter group
{
 type: 'checkbox',
 id: 'category',
 label: 'Category',
 defaultExpanded: true,
 options: [
 { id: 'option1', label: 'Option 1', count: 42 },
 { id: 'option2', label: 'Option 2', count: 18 },
 ],
}

// Range filter group
{
 type: 'range',
 id: 'price',
 label: 'Price Range',
 min: 0,
 max: 1000,
 step: 10,
 unit: '$',
 defaultValue: [0, 500],
}

// Search filter group
{
 type: 'search',
 id: 'search',
 label: 'Search',
 placeholder: 'Search products...',
}

// Filter group with icon (for dropdown variant)
import { Flag } from 'lucide-react'

{
 type: 'checkbox',
 id: 'priority',
 label: 'Priority',
 icon: Flag, // Shows in dropdown trigger row
 options: [
 { id: 'high', label: 'High' },
 { id: 'medium', label: 'Medium' },
 ],
}