@alexgorbatchev/shadcn 0.0.35 → 0.0.37

package/dist/{chunk-h5kjmt32.js → chunk-kmvvw1vr.js}

@@ -22,14 +22,21 @@ import {
 // src/components/data-grid/DataGrid.tsx
 import {
   FlexRender,
+  columnFacetingFeature,
   columnFilteringFeature,
   columnOrderingFeature,
   columnResizingFeature,
   columnSizingFeature,
   columnVisibilityFeature,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
   createFilteredRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
+  filterFn_arrHas,
+  filterFn_arrIncludesSome,
+  filterFn_inNumberRange,
   filterFn_includesString,
   globalFilteringFeature,
   rowPaginationFeature,
@@ -97,6 +104,7 @@ function getDataGridColumnSizeVariables(table) {
 import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
 var columnMeta = {};
 var dataGridFeatures2 = tableFeatures({
+  columnFacetingFeature,
   columnFilteringFeature,
   columnOrderingFeature,
   columnSizingFeature,
@@ -106,10 +114,18 @@ var dataGridFeatures2 = tableFeatures({
   rowPaginationFeature,
   rowSelectionFeature,
   rowSortingFeature,
+  facetedRowModel: createFacetedRowModel(),
+  facetedMinMaxValues: createFacetedMinMaxValues(),
+  facetedUniqueValues: createFacetedUniqueValues(),
   filteredRowModel: createFilteredRowModel(),
   sortedRowModel: createSortedRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
-  filterFns: { includesString: filterFn_includesString },
+  filterFns: {
+    arrHas: filterFn_arrHas,
+    arrIncludesSome: filterFn_arrIncludesSome,
+    includesString: filterFn_includesString,
+    inNumberRange: filterFn_inNumberRange
+  },
   sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic },
   columnMeta
 });

package/dist/components/data-grid/DataGrid.d.ts

@@ -1,7 +1,37 @@
 import { type CellData, type Column, type ReactTable, type Row, type RowData, type Table as CoreTable, type TableState } from "@tanstack/react-table";
 import { type ReactElement, type ReactNode } from "react";
 import type { IDensityProps } from "../../density/types.js";
+import type { ILabelValue } from "../../options/types.js";
 import { type TableTextAlign, type TableVisibility } from "../Table.js";
+/**
+ * A numeric range. The filter value is `[min, max]`, with `null` for an open end; pair it with
+ * `filterFn: "inNumberRange"`. The inputs suggest the range of the rows other filters leave.
+ */
+interface IDataGridRangeFilter {
+    variant: "range";
+    /** Names the filter; defaults to the column label. */
+    label?: string;
+    step?: number;
+    /** Formats the bounds in the inputs and the active-filter summary, such as `{ useGrouping: false }` for years. */
+    format?: Intl.NumberFormatOptions;
+}
+/**
+ * A choice among known values. The filter value is the chosen option values; pair it with `filterFn: "arrHas"` for a
+ * single value per row, `"arrIncludesSome"` for an array of values, or a column `filterFn` that reads them. Each option
+ * shows how many rows the other filters leave with that value, so the column's unique values must be option values;
+ * a column whose rows hold several values, or values in another form, supplies them through `getUniqueValues`.
+ */
+interface IDataGridOptionsFilter {
+    variant: "options";
+    /** Names the filter; defaults to the column label. */
+    label?: string;
+    /** Choices known where the column is defined; the filter controls' `options` prop supplies choices known later. */
+    options?: readonly ILabelValue[];
+    /** Allows choosing several options; a single choice still writes a one-value array. Defaults to true. */
+    multiple?: boolean;
+}
+/** How `DataGridFilters` edits a column's filter and `DataGridFilterSummary` describes it. */
+type DataGridColumnFilter = IDataGridRangeFilter | IDataGridOptionsFilter;
 /** Presentation settings a column definition carries in its `meta`. */
 interface IDataGridColumnMeta {
     /** Name in the column picker and resize handle; defaults to a string header, then the column ID. */
@@ -17,8 +47,11 @@ interface IDataGridColumnMeta {
      * header's `aria-sort` reports whichever of them, or the column itself, is sorted.
      */
     sortColumnIds?: readonly string[];
+    /** Offers the column in `DataGridFilters`, whether or not it is visible. */
+    filter?: DataGridColumnFilter;
 }
 declare const dataGridFeatures: {
+    columnFacetingFeature: import("@tanstack/react-table").TableFeature;
     columnFilteringFeature: import("@tanstack/react-table").TableFeature;
     columnOrderingFeature: import("@tanstack/react-table").TableFeature;
     columnSizingFeature: import("@tanstack/react-table").TableFeature;
@@ -28,11 +61,17 @@ declare const dataGridFeatures: {
     rowPaginationFeature: import("@tanstack/react-table").TableFeature;
     rowSelectionFeature: import("@tanstack/react-table").TableFeature;
     rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    facetedRowModel: (table: CoreTable<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
+    facetedMinMaxValues: (table: CoreTable<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => undefined | [number, number];
+    facetedUniqueValues: (table: CoreTable<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
     filteredRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     sortedRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     paginatedRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     filterFns: {
+        arrHas: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        arrIncludesSome: import("@tanstack/react-table").CreatedFilterFn<any, any>;
         includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
     };
     sortFns: {
         alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
@@ -43,6 +82,19 @@ declare const dataGridFeatures: {
 type DataGridFeatures = typeof dataGridFeatures;
 /** A table built with `dataGridFeatures`; `TSelected` is the state its `useTable` selector returns. */
 type DataGridTable<T extends RowData, TSelected = TableState<DataGridFeatures>> = ReactTable<DataGridFeatures, T, TSelected>;
+/** Props of a control that works on a whole grid, such as its column options or filters. */
+interface IDataGridControlProps<T extends RowData> {
+    table: CoreTable<DataGridFeatures, T>;
+    /** Names the control; each control documents its default. */
+    label?: string;
+}
+/** Options-filter choices by column ID, for choices that depend on data the column definitions cannot hold. */
+type DataGridFilterOptions = Readonly<Record<string, readonly ILabelValue[]>>;
+/** Props of a control that edits or describes column filters. */
+interface IDataGridFilterControlProps<T extends RowData> extends IDataGridControlProps<T> {
+    /** Replaces the choices of the options filters it names; other filters keep their column's `meta.filter.options`. */
+    options?: DataGridFilterOptions;
+}
 type DataGridRow<T extends RowData> = Row<DataGridFeatures, T>;
 type DataGridColumn<T extends RowData> = Column<DataGridFeatures, T, CellData>;
 declare function getDataGridColumnLabel<T extends RowData>(column: DataGridColumn<T>): string;
@@ -85,4 +137,4 @@ declare function DataGridPagination<T extends RowData>({ table }: {
     table: DataGridTable<T>;
 }): ReactElement;
 export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridColumns, DataGridFilter, DataGridHeaderRows, DataGridPagination, dataGridFeatures, getDataGridColumnLabel, };
-export type { DataGridColumn, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta };
+export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, IDataGridControlProps, DataGridFilterOptions, IDataGridFilterControlProps, IDataGridOptionsFilter, IDataGridRangeFilter, };

package/dist/components/data-grid/DataGridColumnOptions.d.ts

@@ -1,14 +1,8 @@
-import { type RowData, type Table } from "@tanstack/react-table";
+import { type RowData } from "@tanstack/react-table";
 import type { ReactElement } from "react";
-import { type DataGridFeatures } from "./DataGrid.js";
-interface IDataGridColumnOptionsProps<T extends RowData> {
-    table: Table<DataGridFeatures, T>;
-    /** Trigger and popover title. */
-    label?: string;
-}
+import { type IDataGridControlProps } from "./DataGrid.js";
 /**
  * Shows, hides, and reorders the columns that allow hiding. Columns with `enableHiding: false` keep their positions.
- * Reset restores the table's initial visibility, order, and sizes.
+ * Reset restores the table's initial visibility, order, and sizes. `label` titles the trigger and popover.
  */
-export declare function DataGridColumnOptions<T extends RowData>({ table, label, }: IDataGridColumnOptionsProps<T>): ReactElement;
-export {};
+export declare function DataGridColumnOptions<T extends RowData>({ table, label, }: IDataGridControlProps<T>): ReactElement;

package/dist/components/data-grid/DataGridFilterSummary.d.ts

@@ -0,0 +1,9 @@
+import { type RowData } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import type { IDataGridFilterControlProps } from "./DataGrid.js";
+/**
+ * Lists the active filters of columns whose `meta.filter` describes one, each with a button that removes it, followed by
+ * Clear filters. Renders nothing while no such filter is active. `label` names the list; `options` supplies the
+ * options-filter choices given to `DataGridFilters`, so the summary names them the same way.
+ */
+export declare function DataGridFilterSummary<T extends RowData>({ table, label, options, }: IDataGridFilterControlProps<T>): ReactElement;

package/dist/components/data-grid/DataGridFilters.d.ts

@@ -0,0 +1,10 @@
+import { type RowData } from "@tanstack/react-table";
+import { type ReactElement } from "react";
+import type { IDataGridFilterControlProps } from "./DataGrid.js";
+/**
+ * Edits the filters of every column whose `meta.filter` describes one, hidden columns included. Filters combine with
+ * each other and with the global filter; each control suggests only values the other filters leave. The trigger counts
+ * the active column filters, and Clear filters removes them all. `label` titles the trigger and popover; `options`
+ * supplies options-filter choices that depend on runtime data.
+ */
+export declare function DataGridFilters<T extends RowData>({ table, label, options, }: IDataGridFilterControlProps<T>): ReactElement;

package/dist/components/data-grid/describeDataGridFilter.d.ts

@@ -0,0 +1,9 @@
+import type { ILabelValue } from "../../options/types.js";
+import type { DataGridColumnFilter } from "./DataGrid.js";
+/**
+ * Describes a filter value in a few words: `120–128`, `≥ 120`, or `≤ 128` for a range, and the labels of the chosen
+ * `options` for an options filter. Values without a matching option read as themselves. Returns an empty string for a
+ * value that filters nothing.
+ */
+declare function describeDataGridFilter(filter: DataGridColumnFilter, value: unknown, options: readonly ILabelValue[]): string;
+export { describeDataGridFilter };

package/dist/components/data-grid/getDataGridFilterLabel.d.ts

@@ -0,0 +1,5 @@
+import type { RowData } from "@tanstack/react-table";
+import { type DataGridColumn } from "./DataGrid.js";
+/** Names a column's filter: its own label, else the column's. */
+declare function getDataGridFilterLabel<T extends RowData>(column: DataGridColumn<T>): string;
+export { getDataGridFilterLabel };

package/dist/components/data-grid/getDataGridFilterOptions.d.ts

@@ -0,0 +1,6 @@
+import type { RowData } from "@tanstack/react-table";
+import type { ILabelValue } from "../../options/types.js";
+import type { DataGridColumn, DataGridFilterOptions } from "./DataGrid.js";
+/** A column's options-filter choices: those the controls were given for it, else its own. */
+declare function getDataGridFilterOptions<T extends RowData>(column: DataGridColumn<T>, options: DataGridFilterOptions | undefined): readonly ILabelValue[];
+export { getDataGridFilterOptions };

package/dist/components/data-grid/index.d.ts

@@ -1,3 +1,5 @@
 export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures, } from "./DataGrid.js";
-export type { DataGridColumn, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, } from "./DataGrid.js";
+export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, IDataGridControlProps, DataGridFilterOptions, IDataGridFilterControlProps, IDataGridOptionsFilter, IDataGridRangeFilter, } from "./DataGrid.js";
 export { DataGridColumnOptions } from "./DataGridColumnOptions.js";
+export { DataGridFilters } from "./DataGridFilters.js";
+export { DataGridFilterSummary } from "./DataGridFilterSummary.js";

package/dist/components/data-grid/index.js

@@ -13,7 +13,7 @@ import {
   DataGridColumnHeader2,
   DataGridFilter2,
   DataGridPagination2
-} from "../../chunk-h5kjmt32.js";
+} from "../../chunk-kmvvw1vr.js";
 import {
   Checkbox2
 } from "../../chunk-tnnf8ydf.js";
@@ -30,6 +30,28 @@ import {
   PopoverHeader2,
   PopoverTitle2
 } from "../../chunk-4djw71cv.js";
+import {
+  Combobox2,
+  ComboboxValue2,
+  ComboboxInput2,
+  ComboboxContent2,
+  ComboboxList2,
+  ComboboxItem2,
+  ComboboxEmpty2,
+  ComboboxChips2,
+  ComboboxChip2,
+  ComboboxChipsInput2,
+  useComboboxAnchor2,
+  ScrollArea2,
+  NumberField2,
+  NumberFieldGroup2,
+  NumberFieldInput2
+} from "../../chunk-c7tnf6h7.js";
+import {
+  Badge2
+} from "../../chunk-wjx6zf94.js";
+import"../../chunk-hz9azhzx.js";
+import"../../chunk-57jj9v64.js";
 // src/components/data-grid/DataGridColumnOptions.tsx
 import { Subscribe } from "@tanstack/react-table";
 import { ArrowDownIcon, ArrowUpIcon, Columns3Icon } from "lucide-react";
@@ -142,12 +164,360 @@ function DataGridColumnOptions({
     ]
   });
 }
+// src/components/data-grid/DataGridFilters.tsx
+import { Subscribe as Subscribe2 } from "@tanstack/react-table";
+import { ListFilterIcon } from "lucide-react";
+import { useId } from "react";
+
+// src/components/data-grid/getDataGridFilterLabel.ts
+function getDataGridFilterLabel(column) {
+  return column.columnDef.meta?.filter?.label ?? getDataGridColumnLabel(column);
+}
+
+// src/components/data-grid/getDataGridFilterOptions.ts
+var NO_OPTIONS = [];
+function getDataGridFilterOptions(column, options) {
+  const filter = column.columnDef.meta?.filter;
+  return options?.[column.id] ?? (filter?.variant === "options" ? filter.options : undefined) ?? NO_OPTIONS;
+}
+
+// src/components/data-grid/readDataGridOptionValues.ts
+var NO_VALUES = [];
+function readDataGridOptionValues(value) {
+  if (!Array.isArray(value))
+    return NO_VALUES;
+  return value.filter((item) => typeof item === "string");
+}
+
+// src/components/data-grid/readDataGridRange.ts
+var OPEN_RANGE = [null, null];
+function readBound(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function readDataGridRange(value) {
+  if (!Array.isArray(value) || value.length !== 2)
+    return OPEN_RANGE;
+  return [readBound(value[0]), readBound(value[1])];
+}
+
+// src/components/data-grid/DataGridFilters.tsx
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+function DataGridRangeFilterControl({
+  column,
+  filter,
+  label
+}) {
+  const labelId = useId();
+  const [min, max] = readDataGridRange(column.getFilterValue());
+  const available = column.getFacetedMinMaxValues();
+  const formatter = new Intl.NumberFormat(undefined, filter.format);
+  const update = (next) => column.setFilterValue(next[0] === null && next[1] === null ? undefined : next);
+  return /* @__PURE__ */ jsxs2("div", {
+    role: "group",
+    "aria-labelledby": labelId,
+    className: "grid gap-1.5",
+    children: [
+      /* @__PURE__ */ jsx2("span", {
+        id: labelId,
+        className: "text-xs font-medium text-muted-foreground",
+        children: label
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        className: "grid grid-cols-2 gap-2",
+        children: [
+          /* @__PURE__ */ jsx2(NumberField2, {
+            value: min,
+            step: filter.step,
+            format: filter.format,
+            onValueChange: (value) => update([value, max]),
+            children: /* @__PURE__ */ jsx2(NumberFieldGroup2, {
+              children: /* @__PURE__ */ jsx2(NumberFieldInput2, {
+                "aria-label": `Minimum ${label}`,
+                placeholder: available ? formatter.format(available[0]) : "Min"
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx2(NumberField2, {
+            value: max,
+            step: filter.step,
+            format: filter.format,
+            onValueChange: (value) => update([min, value]),
+            children: /* @__PURE__ */ jsx2(NumberFieldGroup2, {
+              children: /* @__PURE__ */ jsx2(NumberFieldInput2, {
+                "aria-label": `Maximum ${label}`,
+                placeholder: available ? formatter.format(available[1]) : "Max"
+              })
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+function DataGridOptionsFilterControl({
+  column,
+  filter,
+  options,
+  label
+}) {
+  const labelId = useId();
+  const anchor = useComboboxAnchor2();
+  const counts = column.getFacetedUniqueValues();
+  const selected = readDataGridOptionValues(column.getFilterValue()).map((value) => options.find((option) => option.value === value) ?? { label: value, value });
+  const update = (next) => column.setFilterValue(next.length ? next.map((option) => option.value) : undefined);
+  const content = /* @__PURE__ */ jsxs2(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2(ComboboxEmpty2, {
+        children: "No matches."
+      }),
+      /* @__PURE__ */ jsx2(ComboboxList2, {
+        children: (option) => /* @__PURE__ */ jsxs2(ComboboxItem2, {
+          value: option,
+          children: [
+            /* @__PURE__ */ jsx2("span", {
+              className: "min-w-0 flex-1 truncate",
+              children: option.label
+            }),
+            " ",
+            /* @__PURE__ */ jsx2("span", {
+              className: "text-xs text-muted-foreground tabular-nums",
+              children: counts.get(option.value) ?? 0
+            })
+          ]
+        }, option.value)
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsxs2("div", {
+    className: "grid gap-1.5",
+    children: [
+      /* @__PURE__ */ jsx2("span", {
+        id: labelId,
+        className: "text-xs font-medium text-muted-foreground",
+        children: label
+      }),
+      filter.multiple === false ? /* @__PURE__ */ jsxs2(Combobox2, {
+        items: options,
+        value: selected[0] ?? null,
+        onValueChange: (option) => update(option ? [option] : []),
+        itemToStringLabel: (option) => option.label,
+        isItemEqualToValue: (option, value) => option.value === value.value,
+        children: [
+          /* @__PURE__ */ jsx2(ComboboxInput2, {
+            "aria-labelledby": labelId,
+            placeholder: "Any",
+            showClear: true,
+            clearLabel: `Clear ${label}`
+          }),
+          /* @__PURE__ */ jsx2(ComboboxContent2, {
+            children: content
+          })
+        ]
+      }) : /* @__PURE__ */ jsxs2(Combobox2, {
+        items: options,
+        multiple: true,
+        value: selected,
+        onValueChange: (chosen) => update(chosen),
+        itemToStringLabel: (option) => option.label,
+        isItemEqualToValue: (option, value) => option.value === value.value,
+        children: [
+          /* @__PURE__ */ jsx2(ComboboxChips2, {
+            ref: anchor,
+            children: /* @__PURE__ */ jsx2(ComboboxValue2, {
+              children: (chosen) => /* @__PURE__ */ jsxs2(Fragment, {
+                children: [
+                  chosen.map((option) => /* @__PURE__ */ jsx2(ComboboxChip2, {
+                    removeLabel: `Remove ${option.label}`,
+                    children: option.label
+                  }, option.value)),
+                  /* @__PURE__ */ jsx2(ComboboxChipsInput2, {
+                    "aria-labelledby": labelId,
+                    placeholder: chosen.length ? undefined : "Any"
+                  })
+                ]
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx2(ComboboxContent2, {
+            anchor,
+            children: content
+          })
+        ]
+      })
+    ]
+  });
+}
+function DataGridFilters({
+  table,
+  label = "Filters",
+  options
+}) {
+  return /* @__PURE__ */ jsxs2(Popover2, {
+    children: [
+      /* @__PURE__ */ jsx2(Subscribe2, {
+        source: table.atoms.columnFilters,
+        children: (filters) => /* @__PURE__ */ jsxs2(PopoverTrigger2, {
+          render: /* @__PURE__ */ jsx2(Button2, {
+            variant: "outline"
+          }),
+          children: [
+            /* @__PURE__ */ jsx2(ListFilterIcon, {
+              "data-icon": "inline-start",
+              "aria-hidden": "true"
+            }),
+            label,
+            filters.length > 0 && /* @__PURE__ */ jsxs2(Badge2, {
+              variant: "secondary",
+              children: [
+                filters.length,
+                /* @__PURE__ */ jsx2("span", {
+                  className: "sr-only",
+                  children: " active"
+                })
+              ]
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsxs2(PopoverContent2, {
+        align: "end",
+        className: "max-h-(--available-height) w-80",
+        children: [
+          /* @__PURE__ */ jsx2(PopoverHeader2, {
+            children: /* @__PURE__ */ jsx2(PopoverTitle2, {
+              children: label
+            })
+          }),
+          /* @__PURE__ */ jsx2(Subscribe2, {
+            source: table.atoms.columnFilters,
+            children: (filters) => /* @__PURE__ */ jsxs2(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx2(ScrollArea2, {
+                  className: "flex-1",
+                  children: /* @__PURE__ */ jsx2("div", {
+                    className: "grid gap-3 pe-2.5",
+                    children: table.getAllLeafColumns().map((column) => {
+                      const filter = column.columnDef.meta?.filter;
+                      if (!filter)
+                        return null;
+                      const name = getDataGridFilterLabel(column);
+                      return filter.variant === "range" ? /* @__PURE__ */ jsx2(DataGridRangeFilterControl, {
+                        column,
+                        filter,
+                        label: name
+                      }, column.id) : /* @__PURE__ */ jsx2(DataGridOptionsFilterControl, {
+                        column,
+                        filter,
+                        options: getDataGridFilterOptions(column, options),
+                        label: name
+                      }, column.id);
+                    })
+                  })
+                }),
+                /* @__PURE__ */ jsx2(Button2, {
+                  variant: "outline",
+                  size: "sm",
+                  disabled: filters.length === 0,
+                  onClick: () => table.setColumnFilters([]),
+                  children: "Clear filters"
+                })
+              ]
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/components/data-grid/DataGridFilterSummary.tsx
+import { Subscribe as Subscribe3 } from "@tanstack/react-table";
+import { XIcon } from "lucide-react";
+
+// src/components/data-grid/describeDataGridFilter.ts
+function describeDataGridFilter(filter, value, options) {
+  if (filter.variant === "options") {
+    return readDataGridOptionValues(value).map((item) => options.find((option) => option.value === item)?.label ?? item).join(", ");
+  }
+  const formatter = new Intl.NumberFormat(undefined, filter.format);
+  const [min, max] = readDataGridRange(value);
+  if (min !== null && max !== null)
+    return `${formatter.format(Math.min(min, max))}–${formatter.format(Math.max(min, max))}`;
+  if (min !== null)
+    return `≥ ${formatter.format(min)}`;
+  if (max !== null)
+    return `≤ ${formatter.format(max)}`;
+  return "";
+}
+
+// src/components/data-grid/DataGridFilterSummary.tsx
+import { jsx as jsx3, jsxs as jsxs3, Fragment as Fragment2 } from "react/jsx-runtime";
+function DataGridFilterSummary({
+  table,
+  label = "Active filters",
+  options
+}) {
+  return /* @__PURE__ */ jsx3(Subscribe3, {
+    source: table.atoms.columnFilters,
+    children: () => {
+      const active = table.getAllLeafColumns().flatMap((column) => {
+        const filter = column.columnDef.meta?.filter;
+        const description = filter ? describeDataGridFilter(filter, column.getFilterValue(), getDataGridFilterOptions(column, options)) : "";
+        return description ? [{ column, description, name: getDataGridFilterLabel(column) }] : [];
+      });
+      return /* @__PURE__ */ jsx3(Fragment2, {
+        children: active.length > 0 && /* @__PURE__ */ jsxs3("div", {
+          className: "flex min-w-0 flex-wrap items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsx3("ul", {
+              "aria-label": label,
+              className: "flex min-w-0 flex-wrap gap-1.5",
+              children: active.map(({ column, description, name }) => /* @__PURE__ */ jsx3("li", {
+                className: "min-w-0",
+                children: /* @__PURE__ */ jsxs3(Badge2, {
+                  variant: "outline",
+                  className: "max-w-full pe-0",
+                  children: [
+                    /* @__PURE__ */ jsxs3("span", {
+                      className: "truncate",
+                      children: [
+                        name,
+                        ": ",
+                        description
+                      ]
+                    }),
+                    /* @__PURE__ */ jsx3(Button2, {
+                      variant: "ghost",
+                      size: "icon-xs",
+                      "aria-label": `Remove ${name} filter`,
+                      onClick: () => column.setFilterValue(undefined),
+                      children: /* @__PURE__ */ jsx3(XIcon, {
+                        "aria-hidden": "true"
+                      })
+                    })
+                  ]
+                })
+              }, column.id))
+            }),
+            /* @__PURE__ */ jsx3(Button2, {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => table.setColumnFilters([]),
+              children: "Clear filters"
+            })
+          ]
+        })
+      });
+    }
+  });
+}
 export {
   DataGrid2 as DataGrid,
   DataGridCells2 as DataGridCells,
   DataGridColumnHeader2 as DataGridColumnHeader,
   DataGridColumnOptions,
   DataGridFilter2 as DataGridFilter,
+  DataGridFilterSummary,
+  DataGridFilters,
   DataGridPagination2 as DataGridPagination,
   dataGridFeatures2 as dataGridFeatures
 };

package/dist/components/data-grid/readDataGridOptionValues.d.ts

@@ -0,0 +1,3 @@
+/** Reads an options filter value: its string items, or none when it is not an array. */
+declare function readDataGridOptionValues(value: unknown): readonly string[];
+export { readDataGridOptionValues };

package/dist/components/data-grid/readDataGridRange.d.ts

@@ -0,0 +1,6 @@
+/** A range filter's bounds; `null` leaves that end open. */
+type DataGridRange = readonly [min: number | null, max: number | null];
+/** Reads a range filter value, treating anything other than a two-item array of finite numbers or nulls as open. */
+declare function readDataGridRange(value: unknown): DataGridRange;
+export { readDataGridRange };
+export type { DataGridRange };

package/dist/components/json-render/index.js

@@ -27,7 +27,7 @@ import {
   DrawerHeader2,
   DrawerTitle2,
   DrawerDescription2
-} from "../../chunk-c6g2rbhv.js";
+} from "../../chunk-f71469fs.js";
 import"../../chunk-e6hk39ev.js";
 import"../../chunk-j89xg1ak.js";
 import"../../chunk-aa7m22zj.js";
@@ -93,6 +93,7 @@ import {
   CardContent2
 } from "../../chunk-bygq5yqf.js";
 import"../../chunk-57jj9v64.js";
+import"../../chunk-c7tnf6h7.js";
 import {
   Tabs2,
   TabsList2,

package/dist/components/virtual-data-grid/index.js

@@ -10,7 +10,7 @@ import {
   DataGridHeaderRows,
   DataGridCells2,
   DataGridColumns
-} from "../../chunk-h5kjmt32.js";
+} from "../../chunk-kmvvw1vr.js";
 import {
   VirtualTable2
 } from "../../chunk-efs4bk5b.js";