@instruments/materia-ui 0.1.0

package/dist/compositions/cookie-banner/cookie-banner-root.d.ts

@@ -0,0 +1,54 @@
+import type * as React from "react";
+export interface CookieBannerProps extends Omit<React.ComponentProps<"section">, "title"> {
+    /**
+     * Accept button label.
+     * @default "Accept"
+     */
+    acceptLabel?: string | undefined;
+    /**
+     * Supporting copy under the title. Pass your own to link to a cookie policy.
+     * @default Two paragraphs: what cookies are for, then what accepting means.
+     */
+    description?: React.ReactNode | undefined;
+    /** Called when the visitor accepts cookies. */
+    onAccept: () => void;
+    /** Called when the visitor rejects cookies. Omit to render no Reject button. */
+    onReject?: (() => void) | undefined;
+    /** Called when the visitor opens cookie settings. Omit to render no settings button. */
+    onSettings?: (() => void) | undefined;
+    /**
+     * Reject button label.
+     * @default "Reject"
+     */
+    rejectLabel?: string | undefined;
+    /**
+     * Settings button label.
+     * @default "Cookie settings"
+     */
+    settingsLabel?: string | undefined;
+    /**
+     * Banner heading; also the section's accessible name.
+     * @default "We use cookies"
+     */
+    title?: React.ReactNode | undefined;
+}
+/**
+ * Cookie consent banner: a title and description beside a stack of actions.
+ * Lays itself out from its own width (a container query), stacking the copy
+ * above the buttons when narrow and setting them side by side when wide.
+ *
+ * @bestPractice The app places and sizes it (e.g. `fixed inset-x-4 bottom-4 max-w-3xl`); it has no intrinsic width, so a fixed corner without a width collapses it.
+ * @bestPractice Only wire the actions you support: Reject and Cookie settings render only when `onReject` / `onSettings` are passed.
+ * @bestPractice It records nothing. Store the visitor's choice in the handlers and stop rendering the banner once they have made it.
+ *
+ * @example
+ * <CookieBanner
+ *   className="fixed inset-x-4 bottom-4 max-w-3xl"
+ *   onAccept={accept}
+ *   onReject={reject}
+ *   onSettings={openSettings}
+ * />
+ * @category states
+ */
+declare const CookieBanner: ({ acceptLabel, className, description, onAccept, onReject, onSettings, rejectLabel, settingsLabel, title, ...props }: CookieBannerProps) => React.JSX.Element;
+export { CookieBanner };

package/dist/compositions/cookie-banner/cookie-banner-root.js

@@ -0,0 +1,35 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useId } from "react";
+import { Button } from "../../components/button.js";
+import { Flex } from "../../components/flex.js";
+import { Heading } from "../../components/heading.js";
+import { Text } from "../../components/text.js";
+// The second paragraph names the accept button, so it takes the live label.
+const renderDefaultDescription = (acceptLabel) => (_jsxs(_Fragment, { children: [_jsx("p", { children: "Cookies help us give you the best experience on our website. Our cookie policy explains how we use them." }), _jsxs("p", { children: ["By selecting \u201C", acceptLabel, "\u201D, you agree to our use of cookies."] })] }));
+/**
+ * Cookie consent banner: a title and description beside a stack of actions.
+ * Lays itself out from its own width (a container query), stacking the copy
+ * above the buttons when narrow and setting them side by side when wide.
+ *
+ * @bestPractice The app places and sizes it (e.g. `fixed inset-x-4 bottom-4 max-w-3xl`); it has no intrinsic width, so a fixed corner without a width collapses it.
+ * @bestPractice Only wire the actions you support: Reject and Cookie settings render only when `onReject` / `onSettings` are passed.
+ * @bestPractice It records nothing. Store the visitor's choice in the handlers and stop rendering the banner once they have made it.
+ *
+ * @example
+ * <CookieBanner
+ *   className="fixed inset-x-4 bottom-4 max-w-3xl"
+ *   onAccept={accept}
+ *   onReject={reject}
+ *   onSettings={openSettings}
+ * />
+ * @category states
+ */
+const CookieBanner = ({ acceptLabel = "Accept", className, description, onAccept, onReject, onSettings, rejectLabel = "Reject", settingsLabel = "Cookie settings", title = "We use cookies", ...props }) => {
+    const titleId = useId();
+    return (_jsx("section", { "aria-labelledby": titleId, className: cn("bg-card text-card-foreground @container rounded-4xl p-8 shadow-lg", className), "data-component": "cookie-banner", "data-slot": "cookie-banner", ...props, children: _jsxs(Flex, { className: "@2xl:flex-row @2xl:items-center @2xl:gap-12", direction: "column", gap: "2xl", children: [_jsxs(Flex, { className: "min-w-0 flex-1", direction: "column", gap: "xs", children: [_jsx(Heading, { id: titleId, size: "paragraph-lg", children: title }), _jsx(Text, { className: "flex flex-col gap-5", render: _jsx("div", {}), variant: "muted", children: description === undefined
+                                ? renderDefaultDescription(acceptLabel)
+                                : description })] }), _jsxs(Flex, { className: "min-w-0 flex-1", direction: "column", gap: "xs", children: [_jsx(Button, { onClick: onAccept, size: "xl", type: "button", children: acceptLabel }), onReject === undefined ? null : (_jsx(Button, { emphasis: "outline", onClick: onReject, size: "xl", type: "button", children: rejectLabel })), onSettings === undefined ? null : (_jsx(Button, { emphasis: "outline", onClick: onSettings, size: "xl", type: "button", children: settingsLabel }))] })] }) }));
+};
+export { CookieBanner };

package/dist/compositions/cookie-banner.d.ts

@@ -0,0 +1 @@
+export { CookieBanner, type CookieBannerProps, } from "./cookie-banner/cookie-banner-root.js";

package/dist/compositions/cookie-banner.js

@@ -0,0 +1 @@
+export { CookieBanner, } from "./cookie-banner/cookie-banner-root.js";

package/dist/compositions/data-grid/data-grid-anatomy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * dataGridAnatomy helper for DataGrid.
+ * Import from "@instruments/materia-ui/compositions/data-grid".
+ */
+export declare const dataGridAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

package/dist/compositions/data-grid/data-grid-anatomy.js

@@ -0,0 +1,34 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * dataGridAnatomy helper for DataGrid.
+ * Import from "@instruments/materia-ui/compositions/data-grid".
+ */
+export const dataGridAnatomy = defineAnatomy({
+    children: [
+        {
+            children: [
+                {
+                    description: "Leading region for search and filters",
+                    label: "ToolbarLeft",
+                    slot: "toolbar-left",
+                },
+                {
+                    description: "Trailing region for actions and controls",
+                    label: "ToolbarRight",
+                    slot: "toolbar-right",
+                },
+            ],
+            description: "Header bar with left and right action regions",
+            label: "DataGridToolbar",
+            slot: "data-grid-toolbar",
+        },
+        {
+            description: "TanStack-powered table with header, body, and rows",
+            label: "DataGridTable",
+            slot: "data-grid-table",
+        },
+    ],
+    description: "Framed container providing context and layout for the grid",
+    label: "DataGridShell",
+    slot: "data-grid",
+});

package/dist/compositions/data-grid/data-grid-checkbox.d.ts

@@ -0,0 +1,25 @@
+import { Checkbox } from "@instruments/materia-ui/components/checkbox";
+import type { ComponentSize } from "@instruments/materia-ui/tokens/size";
+import type { DataGridColumnDef as ColumnDef, DataGridRow as Row, DataGridCoreTable as Table } from "@instruments/materia-ui/utils/data-grid-table";
+import type * as React from "react";
+type DataGridControlSize = Extract<ComponentSize, "xs" | "sm">;
+export type DataGridCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, "size"> & {
+    size?: DataGridControlSize;
+};
+/** Grid-tuned {@link Checkbox} (compact sizing, card background) for selection cells. */
+export declare const DataGridCheckbox: ({ size, className, ...props }: DataGridCheckboxProps) => React.JSX.Element;
+export interface DataGridRowSelectAllProps<TData extends object> {
+    disabled?: boolean;
+    table: Table<TData>;
+}
+/** Header checkbox that toggles selection of every row on the current page, with an indeterminate partial state. */
+export declare const DataGridRowSelectAll: <TData extends object>({ table, disabled, }: DataGridRowSelectAllProps<TData>) => React.JSX.Element;
+export interface DataGridRowSelectProps<TData extends object> {
+    disabled?: boolean;
+    row: Row<TData>;
+}
+/** Per-row selection checkbox; reflects sub-row partial selection as indeterminate when the row model supports it. */
+export declare const DataGridRowSelect: <TData extends object>({ row, disabled, }: DataGridRowSelectProps<TData>) => React.JSX.Element;
+/** Builds a fixed-width leading column of selection checkboxes (non-sortable, non-hideable). Place it first in the column list. */
+export declare const createSelectionColumn: <TData extends object>() => ColumnDef<TData>;
+export {};

package/dist/compositions/data-grid/data-grid-checkbox.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "@instruments/materia-ui/components/checkbox";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/** Grid-tuned {@link Checkbox} (compact sizing, card background) for selection cells. */
+export const DataGridCheckbox = ({ size = "xs", className, ...props }) => (_jsx(Checkbox, { className: cn("border-muted-foreground/40 bg-card rounded-sm align-[inherit] shadow-xs", className), size: size, ...props }));
+/** Header checkbox that toggles selection of every row on the current page, with an indeterminate partial state. */
+export const DataGridRowSelectAll = ({ table, disabled, }) => {
+    const isAllSelected = table.getIsAllPageRowsSelected();
+    const isSomeSelected = table.getIsSomePageRowsSelected();
+    return (_jsx(DataGridCheckbox, { "aria-label": "Select all", checked: isAllSelected, disabled: disabled === true, indeterminate: !isAllSelected && isSomeSelected, onCheckedChange: (value) => {
+            table.toggleAllPageRowsSelected(value);
+        } }));
+};
+/** Only some row models (those with sub-rows) expose partial selection. */
+const hasSomeSelected = (row) => "getIsSomeSelected" in row;
+/** Per-row selection checkbox; reflects sub-row partial selection as indeterminate when the row model supports it. */
+export const DataGridRowSelect = ({ row, disabled, }) => (_jsx(DataGridCheckbox, { "aria-label": `Select row ${String(row.index + 1)}`, checked: row.getIsSelected(), disabled: disabled === true, indeterminate: hasSomeSelected(row) ? row.getIsSomeSelected() : undefined, onCheckedChange: (value) => {
+        row.toggleSelected(value);
+    } }));
+/** Builds a fixed-width leading column of selection checkboxes (non-sortable, non-hideable). Place it first in the column list. */
+export const createSelectionColumn = () => ({
+    cell: ({ row }) => (_jsx(DataGridRowSelect, { disabled: !row.getCanSelect(), row: row })),
+    enableHiding: false,
+    enableSorting: false,
+    header: ({ table }) => (_jsx(DataGridRowSelectAll, { disabled: table.getRowModel().rows.length === 0, table: table })),
+    id: "select",
+    meta: {
+        cellClassName: "w-9.5 pr-1.5 pl-3",
+        headerClassName: "w-9.5 pr-1.5 pl-3",
+    },
+    size: 38,
+});

package/dist/compositions/data-grid/data-grid-context.d.ts

@@ -0,0 +1,13 @@
+import type { DataGridTable as Table } from "@instruments/materia-ui/utils/data-grid-table";
+import type { DataGridContextProps, DataGridProps } from "./data-grid-types.js";
+/**
+ * Reads the nearest DataGrid context (table instance, props, loading, count).
+ *
+ * @throws {Error} if called outside a `DataGrid`/`DataGridProvider`.
+ */
+declare const useDataGrid: <TData extends object>() => DataGridContextProps<TData>;
+/** Publishes the DataGrid context to descendants; use `DataGrid` unless you need to supply pre-merged props. */
+declare const DataGridProvider: <TData extends object>({ children, table, ...props }: DataGridProps<TData> & {
+    table: Table<TData>;
+}) => import("react").JSX.Element;
+export { DataGridProvider, useDataGrid };

package/dist/compositions/data-grid/data-grid-context.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+/**
+ * Context uses `any` because React Context with generics requires type erasure
+ * at the context creation site. Type safety is enforced through:
+ * 1. DataGridProvider accepting properly typed props
+ * 2. useDataGrid hook casting to the correct generic type at call sites
+ *
+ * This is the standard pattern for generic React contexts.
+ */
+const DataGridContext = createContext(undefined);
+/**
+ * Narrows the untyped context value to the grid's row type. Every value that
+ * reaches the context comes from `DataGridProvider<TData>` below, which always
+ * publishes the table and the resolved props together.
+ */
+const isDataGridContext = (value) => typeof value === "object" &&
+    value !== null &&
+    "props" in value &&
+    "table" in value;
+/**
+ * Reads the nearest DataGrid context (table instance, props, loading, count).
+ *
+ * @throws {Error} if called outside a `DataGrid`/`DataGridProvider`.
+ */
+const useDataGrid = () => {
+    // The context is created untyped (generic over TData); narrow at the hook.
+    const context = use(DataGridContext);
+    if (!isDataGridContext(context)) {
+        throw new Error("useDataGrid must be used within a DataGridProvider");
+    }
+    return context;
+};
+/** Publishes the DataGrid context to descendants; use `DataGrid` unless you need to supply pre-merged props. */
+const DataGridProvider = ({ children, table, ...props }) => {
+    const contextValue = useMemo(() => ({
+        /** Whether in loading state */
+        loading: props.loading,
+        props,
+        /** Record count */
+        recordCount: props.recordCount,
+        table,
+    }), [props, table]);
+    return (_jsx(DataGridContext.Provider, { value: contextValue, children: children }));
+};
+export { DataGridProvider, useDataGrid };

package/dist/compositions/data-grid/data-grid-expand.d.ts

@@ -0,0 +1,58 @@
+import type { DataGridRow as Row } from "@instruments/materia-ui/utils/data-grid-table";
+import type * as React from "react";
+export interface DataGridExpandToggleProps<TData extends object> {
+    /** CSS class name */
+    className?: string;
+    /** Collapsed icon */
+    collapsedIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    /** Expanded icon */
+    expandedIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    row: Row<TData>;
+}
+/**
+ * Toggle button for expanding/collapsing rows in a DataGrid.
+ * Automatically shows/hides based on whether the row can be expanded.
+ *
+ * @example
+ * ```tsx
+ * {
+ *   id: 'expander',
+ *   header: () => null,
+ *   cell: ({ row }) => <DataGridExpandToggle row={row} />,
+ *   size: 48,
+ * }
+ * ```
+ */
+export declare const DataGridExpandToggle: <TData extends object>({ row, className, expandedIcon: ExpandedIcon, collapsedIcon: CollapsedIcon, }: DataGridExpandToggleProps<TData>) => React.JSX.Element | null;
+/**
+ * Helper to create a standard expander column definition.
+ * Place this as the first column in your columns array.
+ *
+ * @example
+ * ```tsx
+ * const columns = useMemo<ColumnDef<MyData>[]>(() => [
+ *   createExpanderColumn(),
+ *   { accessorKey: 'name', header: 'Name' },
+ *   // ... other columns
+ * ], []);
+ * ```
+ */
+export declare const createExpanderColumn: <TData extends object>() => {
+    cell: ({ row }: {
+        row: Row<TData>;
+    }) => React.JSX.Element;
+    /** Enable hiding */
+    enableHiding: boolean;
+    /** Enable sorting */
+    enableSorting: boolean;
+    header: () => null;
+    id: string;
+    meta: {
+        /** Cell class name */
+        cellClassName: string;
+        /** Header class name */
+        headerClassName: string;
+    };
+    /** Component size */
+    size: number;
+};

package/dist/compositions/data-grid/data-grid-expand.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { ExpandButton } from "../../components/expand-button/expand-button-root.js";
+/**
+ * Toggle button for expanding/collapsing rows in a DataGrid.
+ * Automatically shows/hides based on whether the row can be expanded.
+ *
+ * @example
+ * ```tsx
+ * {
+ *   id: 'expander',
+ *   header: () => null,
+ *   cell: ({ row }) => <DataGridExpandToggle row={row} />,
+ *   size: 48,
+ * }
+ * ```
+ */
+export const DataGridExpandToggle = ({ row, className, 
+/** Expanded icon */
+expandedIcon: ExpandedIcon, 
+/** Collapsed icon */
+collapsedIcon: CollapsedIcon, }) => {
+    if (!row.getCanExpand()) {
+        return null;
+    }
+    const isExpanded = row.getIsExpanded();
+    return (_jsx(ExpandButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", className: cn("border-muted-foreground/40 bg-card rounded-sm align-[inherit] shadow-xs", className), ...(CollapsedIcon === undefined ? {} : { collapsedIcon: CollapsedIcon }), expanded: isExpanded, ...(ExpandedIcon === undefined ? {} : { expandedIcon: ExpandedIcon }), onClick: row.getToggleExpandedHandler(), size: "xs" }));
+};
+/**
+ * Helper to create a standard expander column definition.
+ * Place this as the first column in your columns array.
+ *
+ * @example
+ * ```tsx
+ * const columns = useMemo<ColumnDef<MyData>[]>(() => [
+ *   createExpanderColumn(),
+ *   { accessorKey: 'name', header: 'Name' },
+ *   // ... other columns
+ * ], []);
+ * ```
+ */
+export const createExpanderColumn = () => ({
+    cell: ({ row }) => _jsx(DataGridExpandToggle, { row: row }),
+    /** Enable hiding */
+    enableHiding: false,
+    /** Enable sorting */
+    enableSorting: false,
+    header: () => null,
+    id: "expander",
+    meta: {
+        /** Cell class name */
+        cellClassName: "w-10 px-1 text-center",
+        /** Header class name */
+        headerClassName: "w-10 px-1 text-center",
+    },
+    /** Component size */
+    size: 40,
+});

package/dist/compositions/data-grid/data-grid-filter-dropdown.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import type { FilterSortKind } from "./data-grid-filter-sort-section.js";
+import type { FilterOption } from "./data-grid-types.js";
+/**
+ * Filter popup on Base UI's Combobox (multiple, input inside the popup): the
+ * library owns the listbox/option roles, filtering, arrow-key navigation and
+ * focus return. Its search text lives in the Root, so it resets on close.
+ */
+declare const FilterDropdown: ({ canSort, className, hasActiveFilter, headerContent, options, searchVisible, selectedValues, showSelectedTags, sortKind, sorted, onClearFilter, onClearSort, onSort, onChange, facets, }: {
+    canSort: boolean;
+    className?: string;
+    hasActiveFilter: boolean;
+    headerContent: ReactNode;
+    options: FilterOption[];
+    searchVisible: boolean;
+    selectedValues: Set<string>;
+    showSelectedTags?: boolean;
+    sortKind: FilterSortKind;
+    sorted: false | "asc" | "desc";
+    onClearFilter: () => void;
+    onClearSort: () => void;
+    onSort: (desc: boolean) => void;
+    onChange: (values: string[]) => void;
+    facets: Map<string, number> | undefined;
+}) => import("react").JSX.Element;
+export { FilterDropdown };

package/dist/compositions/data-grid/data-grid-filter-dropdown.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+import { Button } from "@instruments/materia-ui/components/button";
+import { ScrollArea } from "@instruments/materia-ui/components/scroll-area";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { POPOVER_CONTENT_ANIMATION, POPOVER_SURFACE, } from "../../tokens/overlay-styles.js";
+import { FilterOptionList } from "./data-grid-filter-option-list.js";
+import { FilterSearchInput } from "./data-grid-filter-search-input.js";
+import { FilterSelectedTags } from "./data-grid-filter-selected-tags.js";
+import { FilterSortSection } from "./data-grid-filter-sort-section.js";
+/** Pairs the stored filter strings with their options, in option order. */
+const toSelectedOptions = (options, selectedValues) => options.filter((opt) => selectedValues.has(opt.value));
+/**
+ * Filter popup on Base UI's Combobox (multiple, input inside the popup): the
+ * library owns the listbox/option roles, filtering, arrow-key navigation and
+ * focus return. Its search text lives in the Root, so it resets on close.
+ */
+const FilterDropdown = ({ canSort, className, hasActiveFilter, headerContent, options, searchVisible, selectedValues, showSelectedTags, sortKind, sorted, onClearFilter, onClearSort, onSort, onChange, facets, }) => (_jsxs(Combobox.Root, { isItemEqualToValue: (item, value) => item.value === value.value, items: options, multiple: true, onValueChange: (next) => {
+        onChange(next.map((opt) => opt.value));
+    }, value: toSelectedOptions(options, selectedValues), children: [_jsx(Combobox.Trigger
+        // It renders the kit's Button, a native <button>.
+        , { 
+            // It renders the kit's Button, a native <button>.
+            nativeButton: true, render: _jsx(Button, { className: cn("-ml-1 font-normal", className), emphasis: "ghost", radius: "full", size: "xs", tone: "neutral" }), children: headerContent }), _jsx(Combobox.Portal, { children: _jsx(Combobox.Positioner, { align: "start", className: "z-50", sideOffset: 4, children: _jsxs(Combobox.Popup, { "aria-label": "Filter column", className: cn(POPOVER_CONTENT_ANIMATION, POPOVER_SURFACE, "w-64 origin-(--transform-origin) rounded-3xl p-0 shadow-lg"), children: [_jsx(FilterSearchInput, { visible: searchVisible }), showSelectedTags === true && hasActiveFilter && (_jsx(FilterSelectedTags, { onToggle: (value) => {
+                                const next = new Set(selectedValues);
+                                next.delete(value);
+                                onChange([...next]);
+                            }, options: options, selectedValues: selectedValues })), _jsx(ScrollArea, { className: "max-h-75", children: _jsx(FilterOptionList, { facets: facets, hasActiveFilter: hasActiveFilter, onClearFilter: onClearFilter, selectedValues: selectedValues, ...(showSelectedTags === undefined ? {} : { showSelectedTags }) }) }), canSort && (_jsx(FilterSortSection, { kind: sortKind, onClearSort: onClearSort, onSort: onSort, sorted: sorted }))] }) }) })] }));
+export { FilterDropdown };

package/dist/compositions/data-grid/data-grid-filter-option-list.d.ts

@@ -0,0 +1,8 @@
+declare const FilterOptionList: ({ facets, hasActiveFilter, onClearFilter, selectedValues, showSelectedTags, }: {
+    facets: Map<string, number> | undefined;
+    hasActiveFilter: boolean;
+    onClearFilter: () => void;
+    selectedValues: Set<string>;
+    showSelectedTags?: boolean;
+}) => import("react").JSX.Element;
+export { FilterOptionList };

package/dist/compositions/data-grid/data-grid-filter-option-list.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+import { MenuItem } from "@instruments/materia-ui/components/menu-item";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { X } from "lucide-react";
+import { MENU_ITEM_HIGHLIGHT } from "../../tokens/menu-content.js";
+const FilterOptionList = ({ facets, hasActiveFilter, onClearFilter, selectedValues, showSelectedTags, }) => (_jsxs("div", { className: "p-1.5", "data-slot": "data-grid-filter-options", children: [_jsx(Combobox.Empty, { children: _jsx("p", { className: "text-muted-foreground text-paragraph-sm py-4 text-center", children: "No results." }) }), _jsx(Combobox.List, { children: (option) => {
+                const isSelected = selectedValues.has(option.value);
+                const count = facets?.get(option.value) ?? 0;
+                return (_jsx(Combobox.Item, { disabled: count === 0 && !isSelected, 
+                    // MenuItem renders a native <button>.
+                    nativeButton: true, render: _jsx(MenuItem, { checked: isSelected, className: cn("rounded-full", MENU_ITEM_HIGHLIGHT), radius: "full", size: "sm", suffix: _jsx("span", { className: "text-muted-foreground ms-auto ps-3 tabular-nums", children: count }) }), value: option, children: option.label }, option.value));
+            } }), hasActiveFilter && showSelectedTags !== true && (_jsx(MenuItem, { icon: X, onClick: onClearFilter, radius: "full", size: "sm", children: "Clear filter" }))] }));
+export { FilterOptionList };

package/dist/compositions/data-grid/data-grid-filter-search-input.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Search well above the values. Always mounted because it owns keyboard
+ * focus for the list; when search is off it stays in the tab order but is
+ * visually hidden, so arrow keys still move through the options.
+ */
+declare const FilterSearchInput: ({ visible }: {
+    visible: boolean;
+}) => import("react").JSX.Element;
+export { FilterSearchInput };

package/dist/compositions/data-grid/data-grid-filter-search-input.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+import { Icon } from "@instruments/materia-ui/components/icon";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Search } from "lucide-react";
+/**
+ * Search well above the values. Always mounted because it owns keyboard
+ * focus for the list; when search is off it stays in the tab order but is
+ * visually hidden, so arrow keys still move through the options.
+ */
+const FilterSearchInput = ({ visible }) => (_jsxs("div", { className: cn(visible
+        ? "bg-muted/60 focus-within:bg-muted mx-1.5 mt-1.5 flex h-9 items-center gap-2 rounded-full px-3 transition-colors"
+        : "sr-only"), children: [visible && (_jsx(Icon, { className: "text-muted-foreground shrink-0", icon: Search, size: "xs" })), _jsx(Combobox.Input, { "aria-label": "Filter values", 
+            // The caret and the well's tint show focus; a ring would square off
+            // inside the rounded well.
+            className: "placeholder:text-muted-foreground text-paragraph-sm h-full min-w-0 flex-1 bg-transparent outline-hidden", placeholder: "Search" })] }));
+export { FilterSearchInput };

package/dist/compositions/data-grid/data-grid-filter-selected-tags.d.ts

@@ -0,0 +1,7 @@
+import type { FilterOption } from "./data-grid-types.js";
+declare const FilterSelectedTags: ({ onToggle, options, selectedValues, }: {
+    onToggle: (value: string) => void;
+    options: FilterOption[];
+    selectedValues: Set<string>;
+}) => import("react").JSX.Element;
+export { FilterSelectedTags };

package/dist/compositions/data-grid/data-grid-filter-selected-tags.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "@instruments/materia-ui/components/flex";
+import { Tag } from "@instruments/materia-ui/components/tag";
+const FilterSelectedTags = ({ onToggle, options, selectedValues, }) => (_jsx(Flex, { align: "center", className: "border-border gap-1.5 border-b px-3 py-2.5", wrap: "wrap", children: options.flatMap((opt) => selectedValues.has(opt.value)
+        ? [
+            _jsx(Tag, { onDismiss: () => {
+                    onToggle(opt.value);
+                }, size: "base", children: opt.label }, opt.value),
+        ]
+        : []) }));
+export { FilterSelectedTags };

package/dist/compositions/data-grid/data-grid-filter-sort-section.d.ts

@@ -0,0 +1,14 @@
+/** What the column holds, so the orders can be named in its terms. */
+export type FilterSortKind = "number" | "text";
+/**
+ * The column's order, as a footer beneath its values: a pair of toggles
+ * named in the column's terms ("A to Z", "Low to high"). Pressing the order
+ * in force clears it.
+ */
+declare const FilterSortSection: ({ kind, onClearSort, onSort, sorted, }: {
+    kind: FilterSortKind;
+    onClearSort: () => void;
+    onSort: (desc: boolean) => void;
+    sorted: false | "asc" | "desc";
+}) => import("react").JSX.Element;
+export { FilterSortSection };

package/dist/compositions/data-grid/data-grid-filter-sort-section.js

@@ -0,0 +1,25 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from "@instruments/materia-ui/components/flex";
+import { Separator } from "@instruments/materia-ui/components/separator";
+import { Toggle } from "@instruments/materia-ui/components/toggle";
+import { ToggleGroup } from "@instruments/materia-ui/components/toggle-group";
+const ORDER_LABELS = {
+    number: { asc: "Low to high", desc: "High to low" },
+    text: { asc: "A to Z", desc: "Z to A" },
+};
+/**
+ * The column's order, as a footer beneath its values: a pair of toggles
+ * named in the column's terms ("A to Z", "Low to high"). Pressing the order
+ * in force clears it.
+ */
+const FilterSortSection = ({ kind, onClearSort, onSort, sorted, }) => (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs(Flex, { align: "center", className: "gap-3 py-1.5 ps-4 pe-1.5", justify: "space-between", children: [_jsx("span", { className: "text-muted-foreground text-paragraph-sm", children: "Sort" }), _jsxs(ToggleGroup, { "aria-label": "Sort", onValueChange: (next) => {
+                        const [order] = next;
+                        if (order === undefined) {
+                            onClearSort();
+                        }
+                        else {
+                            onSort(order === "desc");
+                        }
+                    }, radius: "full", size: "sm", value: sorted === false ? [] : [sorted], children: [_jsx(Toggle, { value: "asc", children: ORDER_LABELS[kind].asc }), _jsx(Toggle, { value: "desc", children: ORDER_LABELS[kind].desc })] })] })] }));
+export { FilterSortSection };

package/dist/compositions/data-grid/data-grid-filterable-header.d.ts

@@ -0,0 +1,30 @@
+import type { DataGridColumn as Column } from "@instruments/materia-ui/utils/data-grid-table";
+import type { ReactNode } from "react";
+import type { FilterOption } from "./data-grid-types.js";
+export type { FilterOption } from "./data-grid-types.js";
+interface DataGridFilterableHeaderProps<TData extends object, TValue> {
+    children: ReactNode;
+    className?: string;
+    column: Column<TData, TValue>;
+    /** Filter options - enables the facets section */
+    options?: FilterOption[];
+    /** Control search: true = always, false = never, undefined = auto (> 5 options) */
+    showSearch?: boolean;
+    /** Show selected values as dismissible Tag pills above the filter list */
+    showSelectedTags?: boolean;
+}
+/**
+ * Unified column header for DataGrid columns.
+ * Combines sorting, filtering, search, and tag pills in a single popover.
+ *
+ * - Sort-only columns render a plain button with sort toggle.
+ * - Filter columns open a popover with optional search, facet checkboxes, and sort commands.
+ * - Tag columns add dismissible pills above the facet list via `showSelectedTags`.
+ *
+ * A column whose `header` is plain text gets this automatically: sortable
+ * columns sort from it, and `meta.filter` columns filter from it. Render it
+ * yourself only from a custom `header` function.
+ *
+ * @bestPractice Prefer a plain-text `header` plus `meta.filter` over rendering this by hand; the table then wires it, and `PageToolbarTableFilters` shows the same choices as chips.
+ */
+export declare const DataGridFilterableHeader: <TData extends object, TValue>({ column, children, options, showSelectedTags, showSearch, className, }: DataGridFilterableHeaderProps<TData, TValue>) => import("react").JSX.Element;