<!-- source-hash: 997a920fba0072bc3666a97dfbeeae72 -->
Storybook stories for the `FilterModal` component, covering all major prop combinations including filter groups, sorting, tag key:value filters, loading states, and interactive stateful examples.

## Key Components

### Exported Stories

| Story | Description |
|-------|-------------|
| `Default` | Basic modal with status filter group and pre-selected filters |
| `Interactive` | Stateful example with open/close toggle and live filter count |
| `MultipleGroups` | Modal with several filter groups (statuses, types, OS) |
| `WithoutCounts` | Filter options rendered without item counts |
| `WithSorting` | Combined sort columns + filter groups |
| `SortingOnly` | Sort configuration with no filter groups |
| `InteractiveWithSorting` | Stateful sort + filter with live sort display |
| `EmptyFilters` | Filter groups present but nothing selected |
| `NoFiltersAvailable` / `FullyEmpty` | Edge cases with no options or config |
| `Loading` | Skeleton placeholder state during data fetch |
| `WithTagFilter` | Tag key:value filter section alongside regular filters |
| `TagFilterOnly` | Tag filters with no regular filter groups |
| `FullFeatured` | All features combined: sort + filters + tags |
| `InteractiveWithTags` | Fully interactive with tags, sort, and filters |

### Key Types Used

- `FilterGroup` — group id, title, and options array (with optional counts)
- `SortConfig` — column definitions, active sort key, and direction
- `TagKeyConfig` — tag key with label and selectable values
- `TableFilters` — record mapping filter group ids to selected option ids

## Usage Example

```typescript
import { FilterModal, type FilterGroup, type SortConfig } from '../components/ui/filter-modal'
import type { TableFilters } from '../components/ui/table/types'

const filterGroups: FilterGroup[] = [
  {
    id: 'statuses',
    title: 'Statuses',
    options: [
      { id: 'active', label: 'Active', count: 2975 },
      { id: 'inactive', label: 'Inactive', count: 245 },
    ],
  },
]

const sortConfig: SortConfig = {
  columns: [{ key: 'name', label: 'Name' }, { key: 'date', label: 'Date' }],
  sortBy: 'name',
  sortDirection: 'asc',
}

function MyPage() {
  const [isOpen, setIsOpen] = useState(false)
  const [filters, setFilters] = useState<TableFilters>({})

  return (
    <FilterModal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      title="Sort and Filter"
      filterGroups={filterGroups}
      currentFilters={filters}
      onFilterChange={setFilters}
      sortConfig={sortConfig}
      onSort={(col, dir) => console.log(col, dir)}
    />
  )
}
```