Filter bar
A compact filter builder with grouped checkboxes, removable chips, and clear all.
Implementation
1"use client";2 3import { useEffect, useId, useRef, useState, type HTMLAttributes } from "react";4import { ChevronDown, Plus, X } from "lucide-react";5 6export type FilterOption = {7 value: string;8 label: string;9 count?: number;10};11 12export type FilterGroup = {13 id: string;14 label: string;15 options: FilterOption[];16};17 18export type FilterValue = Record<string, string[]>;19 20export type FilterBarProps = Omit<21 HTMLAttributes<HTMLDivElement>,22 "onChange" | "defaultValue"23> & {24 groups: FilterGroup[];25 value?: FilterValue;26 defaultValue?: FilterValue;27 onValueChange?: (value: FilterValue) => void;28 label?: string;