@alaarab/ogrid-react-radix 2.0.0-beta

package/README.md

@@ -0,0 +1,78 @@
+<p align="center">
+  <strong>OGrid</strong> — The lightweight React data grid with enterprise features and zero enterprise cost.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@alaarab/ogrid-react-radix"><img src="https://img.shields.io/npm/v/@alaarab/ogrid-react-radix?color=%23217346&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/alaarab/ogrid/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="MIT License" /></a>
+  <img src="https://img.shields.io/badge/React-17%20%7C%2018%20%7C%2019-blue" alt="React 17, 18, 19" />
+  <img src="https://img.shields.io/badge/TypeScript-strict-blue" alt="TypeScript strict" />
+</p>
+
+<p align="center">
+  <a href="https://alaarab.github.io/ogrid/">Documentation</a> · <a href="https://alaarab.github.io/ogrid/docs/getting-started/overview">Getting Started</a> · <a href="https://alaarab.github.io/ogrid/docs/api/ogrid-props">API Reference</a>
+</p>
+
+---
+
+This is the **default OGrid package** built with Radix UI primitives — lightweight, no Fluent/Material dependency. Also available for [Fluent UI](https://www.npmjs.com/package/@alaarab/ogrid-react-fluent) and [Material UI](https://www.npmjs.com/package/@alaarab/ogrid-react-material). Same API, just swap the import.
+
+## Why OGrid?
+
+| | OGrid | AG Grid Community | AG Grid Enterprise |
+|---|---|---|---|
+| Spreadsheet selection | Built-in | - | $999/dev/year |
+| Clipboard (copy/paste) | Built-in | - | $999/dev/year |
+| Fill handle | Built-in | - | $999/dev/year |
+| Undo/redo | Built-in | - | $999/dev/year |
+| Context menu | Built-in | - | $999/dev/year |
+| Status bar | Built-in | - | $999/dev/year |
+| Side bar | Built-in | - | $999/dev/year |
+| Cell editing | Built-in | Built-in | Built-in |
+| Sorting & filtering | Built-in | Built-in | Built-in |
+| **License** | **MIT (free)** | MIT | Commercial |
+
+## Features
+
+Sorting · Filtering (text, multi-select, date range, people picker) · Pagination · Cell editing (inline, select, checkbox, rich select, date, custom popover) · Spreadsheet selection · Clipboard · Fill handle · Undo/redo · Row selection · Column groups · Column pinning · Column resize · Column chooser · Side bar · Context menu · Status bar with aggregations · CSV export · Grid API · Server-side data · Column state persistence · Keyboard navigation (Excel-style Ctrl+Arrow) · Built-in column types (text, numeric, date, boolean) · React 17/18/19 · TypeScript strict
+
+## Install
+
+```bash
+npm install @alaarab/ogrid-react-radix
+```
+
+Radix UI primitives are bundled as regular dependencies — only `react` and `react-dom` are peer deps.
+
+## Quick Start
+
+```tsx
+import { OGrid, type IColumnDef } from '@alaarab/ogrid-react-radix';
+
+const columns: IColumnDef<Employee>[] = [
+  { columnId: 'name', name: 'Name', sortable: true, editable: true },
+  { columnId: 'department', name: 'Department',
+    filterable: { type: 'multiSelect' },
+    cellEditor: 'richSelect', cellEditorParams: { values: ['Engineering', 'Sales', 'Marketing'] } },
+  { columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
+    valueFormatter: (v) => `$${Number(v).toLocaleString()}` },
+];
+
+<OGrid
+  columns={columns}
+  data={employees}
+  getRowId={(e) => e.id}
+  editable
+  cellSelection
+  statusBar
+  sideBar
+/>
+```
+
+## Documentation
+
+Full docs, API reference, and interactive examples at **[alaarab.github.io/ogrid](https://alaarab.github.io/ogrid/)**.
+
+## License
+
+MIT — Free forever. No enterprise tiers. No feature paywalls.

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Popover from '@radix-ui/react-popover';
+import * as Checkbox from '@radix-ui/react-checkbox';
+import { useColumnChooserState } from '@alaarab/ogrid-react';
+import styles from './ColumnChooser.module.css';
+function TableSettingsIcon() {
+    return (_jsx("span", { className: styles.buttonIcon, "aria-hidden": true, children: "\u2699" }));
+}
+function ChevronDown() {
+    return _jsx("span", { className: styles.chevron, "aria-hidden": true, children: "\u25BC" });
+}
+function ChevronUp() {
+    return _jsx("span", { className: styles.chevron, "aria-hidden": true, children: "\u25B2" });
+}
+export const ColumnChooser = (props) => {
+    const { columns, visibleColumns, onVisibilityChange, className } = props;
+    const { open, setOpen, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange });
+    const handleCheckboxChange = (columnKey) => (checked) => {
+        setColumnVisible(columnKey)(checked === true);
+    };
+    return (_jsx("div", { className: `${styles.container} ${className || ''}`, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: styles.triggerButton, "aria-expanded": open, "aria-haspopup": "listbox", children: [_jsx(TableSettingsIcon, {}), _jsxs("span", { children: ["Column Visibility (", visibleCount, " of ", totalCount, ")"] }), open ? _jsx(ChevronUp, {}) : _jsx(ChevronDown, {})] }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { className: styles.dropdown, sideOffset: 4, align: "end", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs("div", { className: styles.header, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }), _jsx("div", { className: styles.optionsList, children: columns.map((column) => (_jsxs("div", { className: styles.optionItem, children: [_jsx(Checkbox.Root, { id: `col-${column.columnId}`, checked: visibleColumns.has(column.columnId), onCheckedChange: handleCheckboxChange(column.columnId), disabled: column.required === true, className: styles.checkbox, children: _jsx(Checkbox.Indicator, { className: styles.checkboxIndicator, children: "\u2713" }) }), _jsx("label", { htmlFor: `col-${column.columnId}`, style: { marginLeft: 8, cursor: 'pointer' }, children: column.name })] }, column.columnId))) }), _jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: handleClearAll, children: "Clear All" }), _jsx("button", { type: "button", className: styles.selectAllButton, onClick: handleSelectAll, children: "Select All" })] })] }) })] }) }));
+};

package/dist/esm/ColumnChooser/ColumnChooser.module.css

@@ -0,0 +1,140 @@
+.container {
+  position: relative;
+  display: inline-flex;
+}
+
+.triggerButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 6px;
+  background: var(--ogrid-bg, #fff);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ogrid-fg, #333);
+  transition: background 0.15s, border-color 0.15s;
+}
+.triggerButton:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+  border-color: var(--ogrid-border-hover, #999);
+}
+.triggerButton[data-state=open] {
+  border-color: var(--ogrid-primary, #0066cc);
+}
+
+.buttonIcon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.chevron {
+  font-size: 12px;
+  color: var(--ogrid-muted, #888);
+}
+
+.dropdown {
+  min-width: 220px;
+  background: var(--ogrid-bg, #fff);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  border: 1px solid var(--ogrid-border, #e0e0e0);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  z-index: 50;
+}
+
+.header {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ogrid-border, #e5e5e5);
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--ogrid-fg, #333);
+  background: var(--ogrid-bg-subtle, #f5f5f5);
+}
+
+.optionsList {
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.optionItem {
+  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+}
+.optionItem:hover {
+  background: var(--ogrid-bg-hover, #f0f0f0);
+}
+
+.checkbox {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--ogrid-border, #888);
+  border-radius: 3px;
+  background: var(--ogrid-bg, #fff);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.checkbox[data-state=checked] {
+  background: var(--ogrid-primary, #0066cc);
+  border-color: var(--ogrid-primary, #0066cc);
+}
+.checkbox[data-state=indeterminate] {
+  background: var(--ogrid-primary, #0066cc);
+  border-color: var(--ogrid-primary, #0066cc);
+}
+
+.checkboxIndicator {
+  color: var(--ogrid-primary-fg, #fff);
+  font-size: 12px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--ogrid-border, #e5e5e5);
+  background: var(--ogrid-bg-subtle, #f5f5f5);
+}
+
+.clearButton {
+  padding: 6px 12px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-muted, #666);
+  font-size: 12px;
+  cursor: pointer;
+}
+.clearButton:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+  color: var(--ogrid-fg, #333);
+}
+
+.selectAllButton {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 4px;
+  background: var(--ogrid-primary, #0066cc);
+  color: var(--ogrid-primary-fg, #fff);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.selectAllButton:hover {
+  background: var(--ogrid-primary-hover, #0052a3);
+}

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import { useColumnHeaderFilterState } from '@alaarab/ogrid-react';
+import { TextFilterPopover } from './TextFilterPopover';
+import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
+import { PeopleFilterPopover } from './PeopleFilterPopover';
+import styles from './ColumnHeaderFilter.module.css';
+function SortIcon({ isSorted, isDesc }) {
+    if (isSorted)
+        return _jsx("span", { "aria-hidden": true, children: isDesc ? '\u2193' : '\u2191' });
+    return _jsx("span", { "aria-hidden": true, children: '\u21C5' });
+}
+function FilterIcon() {
+    return _jsx("span", { "aria-hidden": true, children: '\u25BE' });
+}
+export const ColumnHeaderFilter = React.memo((props) => {
+    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, selectedValues, onFilterChange, options = [], isLoadingOptions = false, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = props;
+    const state = useColumnHeaderFilterState({
+        filterType,
+        isSorted,
+        isSortedDescending,
+        onSort,
+        selectedValues,
+        onFilterChange,
+        options,
+        isLoadingOptions,
+        textValue,
+        onTextChange,
+        selectedUser,
+        onUserChange,
+        peopleSearch,
+        dateValue,
+        onDateChange,
+    });
+    const { headerRef, popoverRef, peopleInputRef, isFilterOpen, setFilterOpen, tempSelected, tempTextValue, setTempTextValue, searchText, setSearchText, filteredOptions, peopleSuggestions, isPeopleLoading, peopleSearchText, setPeopleSearchText, hasActiveFilter, handlers, } = state;
+    const safeOptions = options ?? [];
+    const renderPopoverContent = () => {
+        if (filterType === 'multiSelect') {
+            return (_jsx(MultiSelectFilterPopover, { searchText: searchText, onSearchChange: setSearchText, options: safeOptions, filteredOptions: filteredOptions, selected: tempSelected, onOptionToggle: handlers.handleCheckboxChange, onSelectAll: handlers.handleSelectAll, onClearSelection: handlers.handleClearSelection, onApply: handlers.handleApplyMultiSelect, isLoading: isLoadingOptions }));
+        }
+        if (filterType === 'text') {
+            return (_jsx(TextFilterPopover, { value: tempTextValue, onValueChange: setTempTextValue, onApply: handlers.handleTextApply, onClear: handlers.handleTextClear }));
+        }
+        if (filterType === 'people') {
+            return (_jsx(PeopleFilterPopover, { selectedUser: selectedUser, searchText: peopleSearchText, onSearchChange: setPeopleSearchText, suggestions: peopleSuggestions, isLoading: isPeopleLoading, onUserSelect: handlers.handleUserSelect, onClearUser: handlers.handleClearUser, inputRef: peopleInputRef }));
+        }
+        if (filterType === 'date') {
+            return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["From:", _jsx("input", { type: "date", value: state.tempDateFrom, onChange: (e) => state.setTempDateFrom(e.target.value), style: { flex: 1 } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["To:", _jsx("input", { type: "date", value: state.tempDateTo, onChange: (e) => state.setTempDateTo(e.target.value), style: { flex: 1 } })] })] }), _jsxs("div", { className: styles.popoverActions, children: [_jsx("button", { className: styles.clearButton, onClick: handlers.handleDateClear, disabled: !state.tempDateFrom && !state.tempDateTo, children: "Clear" }), _jsx("button", { className: styles.applyButton, onClick: handlers.handleDateApply, children: "Apply" })] })] }));
+        }
+        return null;
+    };
+    return (_jsxs("div", { className: styles.columnHeader, ref: headerRef, children: [_jsx("div", { className: styles.headerContent, children: _jsx("span", { className: styles.columnName, title: columnName, "data-header-label": true, children: columnName }) }), _jsxs("div", { className: styles.headerActions, children: [onSort && (_jsx("button", { type: "button", className: `${styles.sortIcon} ${isSorted ? styles.sortActive : ''}`, onClick: handlers.handleSortClick, "aria-label": `Sort by ${columnName}`, title: isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort', children: _jsx(SortIcon, { isSorted: isSorted, isDesc: isSortedDescending }) })), filterType !== 'none' && (_jsxs(Popover.Root, { open: isFilterOpen, onOpenChange: setFilterOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: `${styles.filterIcon} ${hasActiveFilter ? styles.filterActive : ''} ${isFilterOpen ? styles.filterOpen : ''}`, onClick: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, children: [_jsx(FilterIcon, {}), hasActiveFilter && _jsx("span", { className: styles.filterBadge })] }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { ref: popoverRef, className: styles.popoverContent, sideOffset: 4, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderPopoverContent()] }) })] }))] })] }));
+});
+ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.module.css

@@ -0,0 +1,332 @@
+.columnHeader {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.columnName {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ogrid-fg, #242424);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.sortIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ogrid-muted, #616161);
+  cursor: pointer;
+  flex-shrink: 0;
+  font-size: 14px;
+}
+.sortIcon:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+  color: var(--ogrid-fg, #424242);
+}
+.sortIcon.sortActive {
+  background: var(--ogrid-bg-selected, #e0e0e0);
+  color: var(--ogrid-fg, #333);
+}
+
+.filterIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ogrid-muted, #616161);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  font-size: 14px;
+}
+.filterIcon:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+  color: var(--ogrid-fg, #424242);
+}
+.filterIcon.filterActive {
+  background: var(--ogrid-bg-selected, #e0e0e0);
+  color: var(--ogrid-primary, #0066cc);
+}
+.filterIcon.filterOpen {
+  background: var(--ogrid-bg-selected, #e8e8e8);
+}
+
+.filterBadge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 6px;
+  height: 6px;
+  background: var(--ogrid-primary, #0066cc);
+  border-radius: 50%;
+  border: 1px solid var(--ogrid-bg, #fff);
+}
+
+.popoverContent {
+  z-index: 1000;
+  min-width: 280px;
+  max-width: 320px;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, #d1d1d1);
+  border-radius: 8px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
+  overflow: hidden;
+}
+
+.popoverHeader {
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ogrid-muted, #616161);
+  border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+  background: var(--ogrid-bg-subtle, #fafafa);
+}
+
+.popoverSearch {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+}
+
+.searchInput {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--ogrid-border, #d1d1d1);
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+.searchInput:focus {
+  outline: none;
+  border-color: var(--ogrid-primary, #0066cc);
+}
+
+.nativeInputWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  border: 1px solid var(--ogrid-border, #d1d1d1);
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  padding: 6px 12px;
+  min-height: 36px;
+  box-sizing: border-box;
+}
+.nativeInputWrapper:focus-within {
+  border-color: var(--ogrid-primary, #0066cc);
+  outline: none;
+}
+
+.nativeInput {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  padding: 0;
+  font-size: 14px;
+  font-family: inherit;
+  background: transparent;
+  color: var(--ogrid-fg, #242424);
+}
+.nativeInput::placeholder {
+  color: var(--ogrid-muted, #707070);
+}
+
+.resultCount {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--ogrid-muted, #616161);
+}
+
+.selectAllRow {
+  display: flex;
+  gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+  background: var(--ogrid-bg-subtle, #fafafa);
+}
+
+.selectAllButton {
+  background: none;
+  border: none;
+  color: var(--ogrid-primary, #0066cc);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.selectAllButton:hover {
+  background: var(--ogrid-bg-hover, #e8f4fc);
+}
+
+.popoverOptions {
+  overflow-y: auto;
+  max-height: 250px;
+  padding: 6px 0;
+}
+
+.popoverOption {
+  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+}
+.popoverOption:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+}
+
+.filterCheckbox {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--ogrid-border, #888);
+  border-radius: 3px;
+  background: var(--ogrid-bg, #fff);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.filterCheckbox[data-state=checked] {
+  background: var(--ogrid-primary, #0066cc);
+  border-color: var(--ogrid-primary, #0066cc);
+  color: var(--ogrid-primary-fg, #fff);
+}
+
+.personOption {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+.personOption:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+}
+
+.loadingContainer,
+.noResults {
+  padding: 20px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--ogrid-muted, #666);
+}
+
+.selectedUserSection {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+}
+
+.selectedUserLabel {
+  font-size: 11px;
+  color: var(--ogrid-muted, #666);
+  margin-bottom: 4px;
+}
+
+.selectedUser {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.userInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.userText {
+  min-width: 0;
+  font-size: 13px;
+}
+.userText .userSecondary {
+  font-size: 12px;
+  color: var(--ogrid-muted, #666);
+}
+
+.removeUserButton {
+  padding: 4px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--ogrid-muted, #666);
+  flex-shrink: 0;
+}
+.removeUserButton:hover {
+  color: var(--ogrid-fg, #333);
+}
+
+.popoverActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--ogrid-border, #e0e0e0);
+  background: var(--ogrid-bg-subtle, #f5f5f5);
+}
+
+.clearButton {
+  padding: 6px 12px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-muted, #666);
+  font-size: 12px;
+  cursor: pointer;
+}
+.clearButton:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+  color: var(--ogrid-fg, #333);
+}
+
+.applyButton {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 4px;
+  background: var(--ogrid-primary, #0066cc);
+  color: var(--ogrid-primary-fg, #fff);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.applyButton:hover {
+  background: var(--ogrid-primary-hover, #0052a3);
+}

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Checkbox from '@radix-ui/react-checkbox';
+import styles from './ColumnHeaderFilter.module.css';
+export const MultiSelectFilterPopover = ({ searchText, onSearchChange, options, filteredOptions, selected, onOptionToggle, onSelectAll, onClearSelection, onApply, isLoading, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.popoverSearch, children: [_jsx("input", { type: "text", className: styles.searchInput, placeholder: "Search...", value: searchText, onChange: (e) => onSearchChange(e.target.value), autoComplete: "off" }), _jsxs("div", { className: styles.resultCount, children: [filteredOptions.length, " of ", options.length, " options"] })] }), _jsxs("div", { className: styles.selectAllRow, children: [_jsxs("button", { type: "button", className: styles.selectAllButton, onClick: onSelectAll, children: ["Select All (", filteredOptions.length, ")"] }), _jsx("button", { type: "button", className: styles.selectAllButton, onClick: onClearSelection, children: "Clear" })] }), _jsx("div", { className: styles.popoverOptions, children: isLoading ? (_jsx("div", { className: styles.loadingContainer, children: "Loading..." })) : filteredOptions.length === 0 ? (_jsx("div", { className: styles.noResults, children: "No options found" })) : (filteredOptions.map((option) => (_jsxs("div", { className: styles.popoverOption, children: [_jsx(Checkbox.Root, { checked: selected.has(option), onCheckedChange: (c) => onOptionToggle(option, c === true), className: styles.filterCheckbox, children: _jsx(Checkbox.Indicator, { children: "\u2713" }) }), _jsx("label", { style: { marginLeft: 8, cursor: 'pointer' }, children: option })] }, option)))) }), _jsxs("div", { className: styles.popoverActions, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: onClearSelection, children: "Clear" }), _jsx("button", { type: "button", className: styles.applyButton, onClick: onApply, children: "Apply" })] })] }));
+MultiSelectFilterPopover.displayName = 'MultiSelectFilterPopover';

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styles from './ColumnHeaderFilter.module.css';
+function UserAvatar({ user, size = 32 }) {
+    if (user.photo) {
+        return _jsx("img", { src: user.photo, alt: "", width: size, height: size, style: { borderRadius: '50%' } });
+    }
+    return (_jsx("span", { style: {
+            width: size,
+            height: size,
+            borderRadius: '50%',
+            background: '#e0e0e0',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 12,
+        }, children: user.displayName?.charAt(0) ?? '?' }));
+}
+export const PeopleFilterPopover = ({ selectedUser, searchText, onSearchChange, suggestions, isLoading, onUserSelect, onClearUser, inputRef, }) => (_jsxs(_Fragment, { children: [selectedUser && (_jsxs("div", { className: styles.selectedUserSection, children: [_jsx("div", { className: styles.selectedUserLabel, children: "Currently filtered by:" }), _jsxs("div", { className: styles.selectedUser, children: [_jsxs("div", { className: styles.userInfo, children: [_jsx(UserAvatar, { user: selectedUser }), _jsxs("div", { className: styles.userText, children: [_jsx("div", { children: selectedUser.displayName }), _jsx("div", { className: styles.userSecondary, children: selectedUser.email })] })] }), _jsx("button", { type: "button", className: styles.removeUserButton, onClick: onClearUser, "aria-label": "Remove filter", children: "\u2715" })] })] })), _jsx("div", { className: styles.popoverSearch, children: _jsx("div", { className: styles.nativeInputWrapper, children: _jsx("input", { ref: inputRef, type: "text", className: styles.nativeInput, placeholder: "Search for a person...", value: searchText, onChange: (e) => onSearchChange(e.target.value), autoComplete: "off" }) }) }), _jsx("div", { className: styles.popoverOptions, children: isLoading && searchText.trim() ? (_jsx("div", { className: styles.loadingContainer, children: "Searching..." })) : suggestions.length === 0 && searchText.trim() ? (_jsx("div", { className: styles.noResults, children: "No results found" })) : searchText.trim() ? (suggestions.map((user) => (_jsx("div", { className: styles.personOption, onClick: () => onUserSelect(user), onKeyDown: (e) => e.key === 'Enter' && onUserSelect(user), role: "button", tabIndex: 0, children: _jsxs("div", { className: styles.userInfo, children: [_jsx(UserAvatar, { user: user }), _jsxs("div", { className: styles.userText, children: [_jsx("div", { children: user.displayName }), _jsx("div", { className: styles.userSecondary, children: user.email })] })] }) }, user.id ?? user.email ?? user.displayName ?? '')))) : (_jsx("div", { className: styles.noResults, children: "Type to search..." })) }), selectedUser && (_jsx("div", { className: styles.popoverActions, children: _jsx("button", { type: "button", className: styles.clearButton, onClick: onClearUser, children: "Clear Filter" }) }))] }));
+PeopleFilterPopover.displayName = 'PeopleFilterPopover';

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styles from './ColumnHeaderFilter.module.css';
+export const TextFilterPopover = ({ value, onValueChange, onApply, onClear, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverSearch, children: _jsx("input", { type: "text", className: styles.searchInput, placeholder: "Enter search term...", value: value, onChange: (e) => onValueChange(e.target.value), onKeyDown: (e) => e.key === 'Enter' && (e.preventDefault(), onApply()), autoComplete: "off" }) }), _jsxs("div", { className: styles.popoverActions, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: onClear, disabled: !value, children: "Clear" }), _jsx("button", { type: "button", className: styles.applyButton, onClick: onApply, children: "Apply" })] })] }));
+TextFilterPopover.displayName = 'TextFilterPopover';

package/dist/esm/ColumnHeaderFilter/index.js

@@ -0,0 +1 @@
+export { ColumnHeaderFilter } from './ColumnHeaderFilter';