@neasg/design-system 0.4.18 → 0.4.20

package/dist/animated-icons/filter.js

@@ -72,7 +72,7 @@ const FilterIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 2
             controls.start("normal");
         }
     }, [controls, onMouseLeave, isParentHovered]);
-    return (_jsx("div", { ref: divRef, className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsx(motion.svg, { animate: controls, initial: "normal", fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", transition: DEFAULT_TRANSITION, variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: _jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) }) }));
+    return (_jsx("div", { ref: divRef, "data-slot": "filter-icon", className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsx(motion.svg, { animate: controls, initial: "normal", fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", transition: DEFAULT_TRANSITION, variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: _jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) }) }));
 });
 FilterIcon.displayName = "FilterIcon";
 export { FilterIcon };

package/dist/avatar-profile-popover.js

@@ -4,6 +4,7 @@ import { AvatarProfile } from "./avatar";
 import { Button } from "./button";
 import { cn } from "./lib/utils";
 import { Popover } from "./popover";
+import { popoverMenuItemFocusClassName } from "./popover-menu";
 import { Typography } from "./typography";
 function AvatarProfilePopover({ trigger, children, contentClassName, align = "start", sideOffset = 4, ...props }) {
     return (_jsx(Popover, { ...props, trigger: trigger, surface: "menu", align: align, sideOffset: sideOffset, contentClassName: cn("max-h-[calc(100vh-1rem)] w-80 max-w-[calc(100vw-1rem)] overflow-visible", contentClassName), children: children }));
@@ -21,7 +22,7 @@ function AvatarProfilePopoverFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "avatar-profile-popover-footer", className: cn("-mx-1 -mb-1 border-t p-1.5", className), ...props }));
 }
 function AvatarProfilePopoverFooterAction({ className, tone = "default", type = "button", ...props }) {
-    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-offset-0", tone === "destructive" &&
+    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal", popoverMenuItemFocusClassName, tone === "destructive" &&
             "text-destructive hover:bg-destructive/10 hover:text-destructive", className), ...props }));
 }
 export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, };

package/dist/command-search.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { ArrowRight, ArrowUpRight, SlidersHorizontal } from "lucide-react";
+import { ArrowRight, ArrowUpRight } from "lucide-react";
+import { FilterIcon } from "./animated-icons";
 import { Badge } from "./badge";
 import { Button } from "./button";
 import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command";
@@ -211,7 +212,7 @@ function CommandSearch({ value, onValueChange, sections, children, className, is
                         ? "h-control w-full min-w-[14rem] justify-start gap-[var(--space-2)] rounded-control border border-[hsl(var(--layout-sidebar-border))] bg-card px-[var(--space-2)] !font-normal text-muted-foreground shadow-none hover:bg-card hover:text-foreground focus-visible:border-ring focus-visible:bg-card focus-visible:ring-ring/30"
                         : isCollapsed
                             ? "h-control min-h-control w-control min-w-control max-w-control shrink-0 rounded-control p-[var(--space-0)] !font-normal text-muted-foreground hover:bg-card hover:text-foreground"
-                            : "h-control w-full min-w-[14rem] justify-start gap-[var(--space-2)] rounded-control border border-border bg-card px-[var(--space-2)] !font-normal text-muted-foreground hover:bg-card hover:text-foreground", triggerClassName), children: [_jsx(SearchIcon, { className: "shrink-0", size: 16 }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 text-left text-sm", children: triggerPlaceholder }), _jsx("kbd", { className: "hidden h-[var(--space-5)] items-center gap-[var(--space-1)] rounded border border-border bg-muted px-[var(--space-1)] font-mono text-[11px] text-muted-foreground sm:inline-flex", children: resolvedLabel })] })) : null] }), _jsx(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs(DialogSurface, { className: cn("w-[calc(100vw-var(--space-8))] max-w-[60rem] gap-[var(--space-0)] overflow-hidden p-[var(--space-0)] sm:w-[min(72vw,60rem)]", dialogClassName), "aria-describedby": undefined, hideCloseButton: true, children: [_jsx(DialogTitle, { className: "sr-only", children: inputPlaceholder }), _jsxs(Command, { shouldFilter: false, className: "rounded-none border-0", children: [_jsx(CommandInput, { ref: inputRef, value: value, onValueChange: onValueChange, placeholder: inputPlaceholder, wrapperClassName: "border-b px-[var(--space-3)] py-[var(--space-2)]", iconClassName: "hidden", className: "h-control border-0 bg-transparent px-[var(--space-3)] py-[var(--space-0)] pr-[calc(var(--space-12)+var(--space-6))] text-sm shadow-none focus-visible:border-transparent focus-visible:ring-0", endAdornment: _jsxs(_Fragment, { children: [value ? (_jsx("button", { type: "button", "aria-label": "Clear search", onMouseDown: preserveInputFocus, onClick: clearSearch, className: "flex size-[var(--space-6)] items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(XIcon, { size: 14, "aria-hidden": "true" }) })) : null, _jsx("kbd", { className: "inline-flex h-[var(--space-5)] items-center rounded border border-border bg-muted px-[var(--space-1)] font-mono text-[11px] leading-none text-muted-foreground", "aria-hidden": "true", children: "Esc" })] }) }), allFilter || filters.length ? (_jsxs("div", { role: "group", "aria-label": "Search filters", "data-multiselectable": allowMultiSelect ? "true" : "false", className: "flex flex-wrap items-center gap-[var(--space-1)] border-b px-[var(--space-3)] py-[var(--space-2)]", children: [allFilter ? (_jsxs(FilterToggle, { selected: allFilter.selected, "aria-pressed": Boolean(allFilter.selected), onMouseDown: preserveInputFocus, onClick: () => selectFilter(allFilter), children: [allFilter.label, typeof allFilter.count === "number" ? (_jsx(CountBadge, { count: allFilter.count, hideWhenZero: true, size: "sm", variant: allFilter.selected ? "default" : "muted" })) : null] })) : null, filters.map((filter) => (_jsxs(FilterToggle, { selected: filter.selected, "aria-pressed": Boolean(filter.selected), onMouseDown: preserveInputFocus, onClick: () => selectFilter(filter), children: [filter.label, typeof filter.count === "number" ? (_jsx(CountBadge, { count: filter.count, hideWhenZero: true, size: "sm", variant: filter.selected ? "default" : "muted" })) : null] }, filter.value)))] })) : null, subFilters.length ? (_jsxs("div", { role: "group", "aria-label": "Search sub-filters", "data-multiselectable": allowMultiSelect ? "true" : "false", className: "flex flex-wrap items-center gap-[var(--space-1)] border-b bg-muted/30 px-[var(--space-3)] py-[var(--space-2)]", children: [_jsx(SlidersHorizontal, { "data-slot": "command-search-sub-filter-icon", className: "mr-[var(--space-1)] h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" }), subFilters.map((filter) => (_jsxs(FilterToggle, { selected: filter.selected, "aria-pressed": Boolean(filter.selected), onMouseDown: preserveInputFocus, onClick: () => selectFilter(filter), children: [filter.label, typeof filter.count === "number" ? (_jsx(CountBadge, { count: filter.count, hideWhenZero: true, size: "sm", variant: filter.selected ? "default" : "muted" })) : null] }, filter.value)))] })) : null, _jsx(CommandList, { "aria-busy": loading || undefined, className: cn("p-[var(--space-1)]", resultsClassName), style: {
+                            : "h-control w-full min-w-[14rem] justify-start gap-[var(--space-2)] rounded-control border border-border bg-card px-[var(--space-2)] !font-normal text-muted-foreground hover:bg-card hover:text-foreground", triggerClassName), children: [_jsx(SearchIcon, { className: "shrink-0", size: 16 }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 text-left text-sm", children: triggerPlaceholder }), _jsx("kbd", { className: "hidden h-[var(--space-5)] items-center gap-[var(--space-1)] rounded border border-border bg-muted px-[var(--space-1)] font-mono text-[11px] text-muted-foreground sm:inline-flex", children: resolvedLabel })] })) : null] }), _jsx(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs(DialogSurface, { className: cn("w-[calc(100vw-var(--space-8))] max-w-[60rem] gap-[var(--space-0)] overflow-hidden p-[var(--space-0)] sm:w-[min(72vw,60rem)]", dialogClassName), "aria-describedby": undefined, hideCloseButton: true, children: [_jsx(DialogTitle, { className: "sr-only", children: inputPlaceholder }), _jsxs(Command, { shouldFilter: false, className: "rounded-none border-0", children: [_jsx(CommandInput, { ref: inputRef, value: value, onValueChange: onValueChange, placeholder: inputPlaceholder, wrapperClassName: "border-b px-[var(--space-3)] py-[var(--space-2)]", iconClassName: "hidden", className: "h-control border-0 bg-transparent px-[var(--space-3)] py-[var(--space-0)] pr-[calc(var(--space-12)+var(--space-6))] text-sm shadow-none focus-visible:border-transparent focus-visible:ring-0", endAdornment: _jsxs(_Fragment, { children: [value ? (_jsx("button", { type: "button", "aria-label": "Clear search", onMouseDown: preserveInputFocus, onClick: clearSearch, className: "flex size-[var(--space-6)] items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(XIcon, { size: 14, "aria-hidden": "true" }) })) : null, _jsx("kbd", { className: "inline-flex h-[var(--space-5)] items-center rounded border border-border bg-muted px-[var(--space-1)] font-mono text-[11px] leading-none text-muted-foreground", "aria-hidden": "true", children: "Esc" })] }) }), allFilter || filters.length ? (_jsxs("div", { role: "group", "aria-label": "Search filters", "data-multiselectable": allowMultiSelect ? "true" : "false", className: "flex flex-wrap items-center gap-[var(--space-1)] border-b px-[var(--space-3)] py-[var(--space-2)]", children: [allFilter ? (_jsxs(FilterToggle, { selected: allFilter.selected, "aria-pressed": Boolean(allFilter.selected), onMouseDown: preserveInputFocus, onClick: () => selectFilter(allFilter), children: [allFilter.label, typeof allFilter.count === "number" ? (_jsx(CountBadge, { count: allFilter.count, hideWhenZero: true, size: "sm", variant: allFilter.selected ? "default" : "muted" })) : null] })) : null, filters.map((filter) => (_jsxs(FilterToggle, { selected: filter.selected, "aria-pressed": Boolean(filter.selected), onMouseDown: preserveInputFocus, onClick: () => selectFilter(filter), children: [filter.label, typeof filter.count === "number" ? (_jsx(CountBadge, { count: filter.count, hideWhenZero: true, size: "sm", variant: filter.selected ? "default" : "muted" })) : null] }, filter.value)))] })) : null, subFilters.length ? (_jsxs("div", { role: "group", "aria-label": "Search sub-filters", "data-multiselectable": allowMultiSelect ? "true" : "false", className: "flex flex-wrap items-center gap-[var(--space-1)] border-b bg-muted/30 px-[var(--space-3)] py-[var(--space-2)]", children: [_jsx(FilterIcon, { "data-slot": "command-search-sub-filter-icon", className: "mr-[var(--space-1)] shrink-0 text-muted-foreground", size: 14, "aria-hidden": "true" }), subFilters.map((filter) => (_jsxs(FilterToggle, { selected: filter.selected, "aria-pressed": Boolean(filter.selected), onMouseDown: preserveInputFocus, onClick: () => selectFilter(filter), children: [filter.label, typeof filter.count === "number" ? (_jsx(CountBadge, { count: filter.count, hideWhenZero: true, size: "sm", variant: filter.selected ? "default" : "muted" })) : null] }, filter.value)))] })) : null, _jsx(CommandList, { "aria-busy": loading || undefined, className: cn("p-[var(--space-1)]", resultsClassName), style: {
                                         minHeight: resultsMinHeight,
                                         maxHeight: resultsMaxHeight,
                                     }, children: loading ? (_jsx(CommandSearchSkeleton, { rows: loadingRows })) : children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => {

package/dist/date-input.d.ts

@@ -5,6 +5,8 @@ export interface DateRangeInputValue {
 }
 interface DateInputSharedProps {
     label: React.ReactNode;
+    /** Visible heading for the calendar popover. */
+    popoverTitle?: React.ReactNode;
     appearance?: "field" | "inline";
     description?: React.ReactNode;
     error?: React.ReactNode;

package/dist/date-input.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format, parse } from "date-fns";
 import { CalendarIcon } from "lucide-react";
@@ -7,8 +7,8 @@ import { XIcon } from "./animated-icons/x";
 import { Calendar } from "./calendar";
 import { inputControlClassName } from "./input-control";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
-import { PopoverContent, PopoverRoot, PopoverTrigger } from "./popover-primitive";
 import { cn } from "./lib/utils";
+import { Popover } from "./popover";
 function createLocalDate(year, monthIndex, day) {
     const date = new Date(year, monthIndex, day);
     if (date.getFullYear() !== year ||
@@ -93,7 +93,7 @@ function formatDisplayRange(range) {
 }
 const DateInput = React.forwardRef((props, ref) => {
     var _a, _b, _c;
-    const { label, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, clearable = false, clearLabel, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
+    const { label, popoverTitle, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, clearable = false, clearLabel, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
     const [open, setOpen] = React.useState(false);
     const [isSelectingRangeEnd, setIsSelectingRangeEnd] = React.useState(false);
     const generatedId = React.useId();
@@ -164,11 +164,11 @@ const DateInput = React.forwardRef((props, ref) => {
         }
     };
     const disabledDays = (date) => isDateOutsideBounds(date, minDate, maxDate);
-    const calendarContent = (_jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, showOutsideDays: false, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
+    const calendarContent = (_jsx(_Fragment, { children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, showOutsideDays: false, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
     if (appearance === "inline") {
-        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
+        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", contentClassName: "w-auto p-0", trigger: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }), children: calendarContent }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
     }
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsxs("div", { className: "relative", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", showClearButton && "pr-16", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: _jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }) }) }), _jsxs("span", { "aria-hidden": showClearButton ? undefined : true, className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-2 text-muted-foreground", children: [showClearButton ? (_jsx("button", { type: "button", "aria-label": resolvedClearLabel, onClick: handleClear, className: "pointer-events-auto inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { size: 14, className: "flex items-center justify-center" }) })) : null, _jsx(CalendarIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", strokeWidth: 2 })] })] }), calendarContent] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs("div", { className: "relative", children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", contentClassName: "w-auto p-0", trigger: _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", showClearButton && "pr-16", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: _jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }) }), children: calendarContent }), _jsxs("span", { "aria-hidden": showClearButton ? undefined : true, className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-2 text-muted-foreground", children: [showClearButton ? (_jsx("button", { type: "button", "aria-label": resolvedClearLabel, onClick: handleClear, className: "pointer-events-auto inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { size: 14, className: "flex items-center justify-center" }) })) : null, _jsx(CalendarIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", strokeWidth: 2 })] })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/filter-popover.d.ts

@@ -25,14 +25,18 @@ export interface FilterPopoverProps extends Pick<PopoverProps, "align" | "defaul
     selectedCount?: number;
     trigger?: React.ReactElement;
     triggerLabel?: React.ReactNode;
+    title?: React.ReactNode;
     groupListLabel?: React.ReactNode;
     resetLabel?: React.ReactNode;
     emptyLabel?: React.ReactNode;
+    ariaLabel?: string;
     onReset?: () => void;
     contentClassName?: string;
     viewClassName?: string;
     maxHeight?: string;
+    /** Opens the only group directly, without the grouped-filter navigation screen. */
+    directSingleGroup?: boolean;
 }
 declare function getFilterSelectionLabel(count: number): string;
-declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, viewClassName, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterPopover({ align, ariaLabel, contentClassName, defaultOpen, directSingleGroup, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, title, viewClassName, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
 export { FilterPopover, getFilterSelectionLabel };

package/dist/filter-popover.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { ChevronLeft, ChevronRight, SlidersHorizontal } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { FilterIcon } from "./animated-icons";
 import { Button } from "./button";
 import { CountBadge } from "./count-badge";
 import { cn } from "./lib/utils";
 import { Popover } from "./popover";
-import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuItem, PopoverMenuScrollArea, PopoverMenuSearch, PopoverMenuSection, PopoverMenuView, } from "./popover-menu";
+import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuItem, PopoverMenuScrollArea, PopoverMenuSearch, PopoverMenuSection, PopoverMenuView, popoverMenuItemFocusClassName, } from "./popover-menu";
 import { Typography } from "./typography";
 function getText(value) {
     if (typeof value === "string" || typeof value === "number") {
@@ -32,12 +33,13 @@ function getFilterSelectionLabel(count) {
     }
     return count === 1 ? "1 selected" : `${count} selected`;
 }
-function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", viewClassName, }) {
-    var _a, _b, _c, _d, _e;
+function FilterPopover({ align = "start", ariaLabel, contentClassName, defaultOpen, directSingleGroup = false, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", title, viewClassName, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const [activeGroupId, setActiveGroupId] = React.useState(null);
     const [transitionDirection, setTransitionDirection] = React.useState("forward");
     const [query, setQuery] = React.useState("");
-    const activeGroup = (_a = groups.find((group) => group.id === activeGroupId)) !== null && _a !== void 0 ? _a : null;
+    const directGroup = directSingleGroup && groups.length === 1 ? groups[0] : null;
+    const activeGroup = (_a = directGroup !== null && directGroup !== void 0 ? directGroup : groups.find((group) => group.id === activeGroupId)) !== null && _a !== void 0 ? _a : null;
     const resolvedSelectedCount = selectedCount !== null && selectedCount !== void 0 ? selectedCount : groups.reduce((total, group) => total + getGroupSelectedCount(group), 0);
     const normalizedQuery = query.trim().toLowerCase();
     const filteredOptions = activeGroup && normalizedQuery
@@ -62,8 +64,15 @@ function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLa
         setTransitionDirection("backward");
         setActiveGroupId(null);
     };
-    const defaultTrigger = (_jsxs(Button, { type: "button", variant: "outline", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), triggerLabel, resolvedSelectedCount > 0 ? (_jsx(CountBadge, { count: resolvedSelectedCount, size: "sm" })) : null] }));
-    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, children: [_jsx(PopoverMenuView, { className: cn("-mx-1 -mt-1 px-1 pt-1", viewClassName), direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) }), activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_c = activeGroup.searchPlaceholder) !== null && _c !== void 0 ? _c : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_d = activeGroup.searchPlaceholder) !== null && _d !== void 0 ? _d : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_e = activeGroup.emptyLabel) !== null && _e !== void 0 ? _e : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: groupListLabel }), _jsx(PopoverMenuSection, { children: groups.map((group) => {
+    const defaultTrigger = (_jsxs(Button, { type: "button", variant: "outline", children: [_jsx(FilterIcon, { size: 16 }), triggerLabel, resolvedSelectedCount > 0 ? (_jsx(CountBadge, { count: resolvedSelectedCount, size: "sm" })) : null] }));
+    const handleOpenChange = (nextOpen) => {
+        if (!nextOpen && directGroup) {
+            setQuery("");
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    };
+    const resolvedTitle = (_c = title !== null && title !== void 0 ? title : directGroup === null || directGroup === void 0 ? void 0 : directGroup.label) !== null && _c !== void 0 ? _c : (!activeGroup ? triggerLabel : undefined);
+    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: handleOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, title: resolvedTitle, "aria-label": (_e = (_d = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : getText(resolvedTitle)) !== null && _d !== void 0 ? _d : getText(triggerLabel)) !== null && _e !== void 0 ? _e : "Filters", children: [_jsx(PopoverMenuView, { className: cn("-mx-1 -mt-1 px-1 pt-1", viewClassName), direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [!directGroup ? (_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: cn("w-full justify-start", popoverMenuItemFocusClassName), onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) })) : null, activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_f = activeGroup.searchPlaceholder) !== null && _f !== void 0 ? _f : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_g = activeGroup.searchPlaceholder) !== null && _g !== void 0 ? _g : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_h = activeGroup.emptyLabel) !== null && _h !== void 0 ? _h : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [!resolvedTitle ? (_jsx(PopoverMenuGroupLabel, { children: groupListLabel })) : null, _jsx(PopoverMenuSection, { children: groups.map((group) => {
                                     var _a;
                                     const groupSelectedCount = getGroupSelectedCount(group);
                                     const selectionLabel = (_a = group.selectionLabel) !== null && _a !== void 0 ? _a : getFilterSelectionLabel(groupSelectedCount);

package/dist/filter-toggle.js

@@ -9,7 +9,7 @@ const filterToggleVariants = cva("inline-flex shrink-0 cursor-pointer select-non
             muted: "",
         },
         selected: {
-            true: "border-transparent bg-primary/10 text-primary",
+            true: "border-transparent bg-primary/10 text-primary hover:bg-primary/20 focus-visible:bg-primary/20",
             false: "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
         },
     },

package/dist/index.d.ts

@@ -82,8 +82,8 @@ export { TaskModeShell, TASK_MODE_SHELL_ANIMATION_DURATION_MS, } from "./task-mo
 export type { TaskModeShellProps } from "./task-mode-shell";
 export { useFileUpload } from "./use-file-upload";
 export type { FileUploadProgress, FileUploadResult, FileUploadStatus, UseFileUploadOptions, UseFileUploadReturn, } from "./use-file-upload";
-export { Popover } from "./popover";
-export type { PopoverProps } from "./popover";
+export { Popover, PopoverTitle } from "./popover";
+export type { PopoverProps, PopoverTitleProps } from "./popover";
 export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, } from "./popover-menu";
 export type { PopoverMenuContentProps, PopoverMenuCheckboxItemProps, PopoverMenuHeaderProps, PopoverMenuSectionProps, PopoverMenuItemProps, PopoverMenuDividerProps, PopoverMenuFooterActionProps, PopoverMenuFooterMetaProps, PopoverMenuFooterProps, PopoverMenuGroupProps, PopoverMenuGroupLabelProps, PopoverMenuSearchProps, PopoverMenuScrollAreaProps, PopoverMenuViewProps, } from "./popover-menu";
 export { SearchInput } from "./search-input";
@@ -133,6 +133,7 @@ export { useTableSort } from "./use-table-sort";
 export type { UseTableSortOptions, UseTableSortReturn, } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
 export type { TableColumn, TableColumnWidths, TableProps, TableResizeMode, TableRowExpansionProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
+export type { TableColumnFilter, TableColumnFilterOption, TableDateColumnFilter, TableOptionsColumnFilter, TableTextColumnFilter, } from "./table-column-filter";
 export { Tabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsItemLabel, type TabsItemLabelProps, type TabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
 export { Toaster, toast } from "./toaster";

package/dist/index.js

@@ -42,7 +42,7 @@ export { RadioGroup } from "./radio-group";
 export { ScrollHint } from "./scroll-hint";
 export { TaskModeShell, TASK_MODE_SHELL_ANIMATION_DURATION_MS, } from "./task-mode-shell";
 export { useFileUpload } from "./use-file-upload";
-export { Popover } from "./popover";
+export { Popover, PopoverTitle } from "./popover";
 export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, } from "./popover-menu";
 export { SearchInput } from "./search-input";
 export { SectionNav } from "./section-nav";

package/dist/multi-select.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
+import { ChevronDownIcon } from "./animated-icons/chevron-down";
 import { XIcon } from "./animated-icons/x";
 import { Badge } from "./badge";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
@@ -22,6 +23,8 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
     const containerRef = React.useRef(null);
     const triggerRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
+    const listboxRef = React.useRef(null);
+    const openFocusTargetRef = React.useRef(searchable ? "search" : "first");
     const normalizedQuery = searchQuery.trim().toLowerCase();
     const filteredOptions = searchable && normalizedQuery
         ? options.filter((opt) => {
@@ -33,6 +36,28 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
     const selectedLabels = value
         .map((v) => options.find((opt) => opt.value === v))
         .filter(Boolean);
+    const getEnabledOptionElements = React.useCallback(() => {
+        var _a, _b;
+        return Array.from((_b = (_a = listboxRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="option"]:not(:disabled)')) !== null && _b !== void 0 ? _b : []);
+    }, []);
+    const focusBoundaryOption = React.useCallback((boundary) => {
+        const enabledOptions = getEnabledOptionElements();
+        const option = boundary === "first"
+            ? enabledOptions[0]
+            : enabledOptions[enabledOptions.length - 1];
+        option === null || option === void 0 ? void 0 : option.focus({ preventScroll: true });
+    }, [getEnabledOptionElements]);
+    const openWithFocus = React.useCallback((target) => {
+        openFocusTargetRef.current = target;
+        setOpen(true);
+    }, []);
+    const closeAndFocusTrigger = React.useCallback(() => {
+        setOpen(false);
+        window.requestAnimationFrame(() => {
+            var _a;
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        });
+    }, []);
     const toggleOption = React.useCallback((optionValue) => {
         const next = value.includes(optionValue)
             ? value.filter((v) => v !== optionValue)
@@ -47,14 +72,16 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
             setSearchQuery("");
             return;
         }
-        if (searchable) {
-            const frame = window.requestAnimationFrame(() => {
-                var _a;
+        const frame = window.requestAnimationFrame(() => {
+            var _a;
+            if (openFocusTargetRef.current === "search" && searchable) {
                 (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-            return () => window.cancelAnimationFrame(frame);
-        }
-    }, [open, searchable]);
+                return;
+            }
+            focusBoundaryOption(openFocusTargetRef.current === "last" ? "last" : "first");
+        });
+        return () => window.cancelAnimationFrame(frame);
+    }, [focusBoundaryOption, open, searchable]);
     React.useEffect(() => {
         const handleClickOutside = (event) => {
             if (containerRef.current &&
@@ -72,33 +99,91 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
             return;
         if (event.key === "Enter" || event.key === " ") {
             event.preventDefault();
-            setOpen((prev) => !prev);
+            if (open) {
+                setOpen(false);
+            }
+            else {
+                openWithFocus(searchable ? "search" : "first");
+            }
         }
         else if (event.key === "ArrowDown") {
             event.preventDefault();
-            setOpen(true);
+            openWithFocus("first");
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            openWithFocus("last");
         }
         else if (event.key === "Escape") {
-            setOpen(false);
+            event.preventDefault();
+            closeAndFocusTrigger();
+        }
+    }, [closeAndFocusTrigger, disabled, open, openWithFocus, searchable]);
+    const handleSearchKeyDown = React.useCallback((event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            focusBoundaryOption(event.key === "ArrowDown" ? "first" : "last");
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            closeAndFocusTrigger();
+        }
+    }, [closeAndFocusTrigger, focusBoundaryOption]);
+    const handleListboxKeyDown = React.useCallback((event) => {
+        var _a, _b;
+        const enabledOptions = getEnabledOptionElements();
+        const currentIndex = enabledOptions.findIndex((option) => option === document.activeElement);
+        if (event.key === "Escape") {
+            event.preventDefault();
+            closeAndFocusTrigger();
+            return;
+        }
+        if (event.key === "Home" || event.key === "End") {
+            event.preventDefault();
+            focusBoundaryOption(event.key === "Home" ? "first" : "last");
+            return;
+        }
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+            return;
+        }
+        event.preventDefault();
+        if (event.key === "ArrowUp" && currentIndex <= 0 && searchable) {
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            return;
         }
-    }, [disabled]);
+        const offset = event.key === "ArrowDown" ? 1 : -1;
+        const nextIndex = Math.min(Math.max(currentIndex + offset, 0), enabledOptions.length - 1);
+        (_b = enabledOptions[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+    }, [
+        closeAndFocusTrigger,
+        focusBoundaryOption,
+        getEnabledOptionElements,
+        searchable,
+    ]);
     return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { id: labelId, htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), onClick: (event) => {
                     var _a;
                     event.preventDefault();
                     (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: label }), _jsxs("div", { ref: containerRef, className: "relative", children: [_jsx("div", { ref: triggerRef, role: "combobox", id: selectId, tabIndex: disabled ? -1 : 0, onClick: () => {
+                }, children: label }), _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { ref: triggerRef, role: "combobox", id: selectId, tabIndex: disabled ? -1 : 0, onClick: () => {
                             if (!disabled) {
-                                setOpen((prev) => !prev);
+                                if (open) {
+                                    setOpen(false);
+                                }
+                                else {
+                                    openWithFocus(searchable ? "search" : "first");
+                                }
                             }
-                        }, onKeyDown: handleTriggerKeyDown, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": labelId, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("flex h-control w-full cursor-pointer items-center gap-1.5 overflow-hidden rounded-control border border-input bg-background px-2.5 py-1.5 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isInvalid ? "border-destructive" : "border-input", disabled && "cursor-not-allowed opacity-50", triggerClassName), children: selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (e) => {
-                                                e.stopPropagation();
-                                                removeOption(opt.value);
-                                            }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 12 }) })] }, opt.value))), selectedLabels.length > maxVisibleTags ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 text-sm font-medium", title: selectedLabels
-                                        .slice(maxVisibleTags)
-                                        .map((o) => o.label)
-                                        .join(", "), children: ["+", selectedLabels.length - maxVisibleTags] })) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })) }), open ? (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-overlay border bg-popover shadow-md", children: [searchable ? (_jsx("div", { className: "border-b px-2 py-1", children: _jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPlaceholder, className: "h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", onKeyDown: (e) => e.stopPropagation() }) })) : null, _jsx("div", { id: listboxId, role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                        }, onKeyDown: handleTriggerKeyDown, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": labelId, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("relative flex h-control w-full cursor-pointer items-center gap-1.5 overflow-hidden rounded-control border border-input bg-background px-2.5 py-1.5 pr-8 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isInvalid ? "border-destructive" : "border-input", disabled && "cursor-not-allowed opacity-50", triggerClassName), children: [selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    removeOption(opt.value);
+                                                }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 12 }) })] }, opt.value))), selectedLabels.length > maxVisibleTags ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 text-sm font-medium", title: selectedLabels
+                                            .slice(maxVisibleTags)
+                                            .map((o) => o.label)
+                                            .join(", "), children: ["+", selectedLabels.length - maxVisibleTags] })) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })), _jsx(ChevronDownIcon, { "aria-hidden": "true", size: 16, className: cn("pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground transition-transform duration-150", open && "rotate-180") })] }), open ? (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-overlay border bg-popover shadow-md", children: [searchable ? (_jsx("div", { className: "border-b p-1", children: _jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPlaceholder, className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none", onKeyDown: handleSearchKeyDown }) })) : null, _jsx("div", { ref: listboxRef, id: listboxId, role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto p-1", onKeyDown: handleListboxKeyDown, children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
                                     const isSelected = value.includes(option.value);
-                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, onClick: () => toggleOption(option.value), className: cn("flex min-h-8 w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected && "bg-accent"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: option.label }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: option.description })) : null] })] }, option.value));
+                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, tabIndex: -1, onClick: () => toggleOption(option.value), className: cn("flex min-h-8 w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected &&
+                                            "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus:bg-primary/20 focus:text-primary"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: option.label }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: option.description })) : null] })] }, option.value));
                                 })) : (_jsx("div", { className: "px-2.5 py-1.5 text-center text-sm text-muted-foreground", children: "No options found." })) })] })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 }
 export { MultiSelect };

package/dist/popover-menu.d.ts

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { type ButtonProps } from "./button";
 import { type CheckboxProps } from "./checkbox";
-import { InputControl } from "./input-control";
+import { type InputProps } from "./input";
 import { PopoverContent } from "./popover-primitive";
 import { Typography } from "./typography";
+declare const popoverMenuItemFocusClassName = "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:ring-offset-0";
+declare const popoverMenuItemFocusWithinClassName = "rounded-sm focus-within:ring-2 focus-within:ring-inset focus-within:ring-ring";
 export interface PopoverMenuHeaderProps extends Omit<React.ComponentPropsWithoutRef<typeof Typography>, "as" | "asChild" | "variant" | "color"> {
 }
 export interface PopoverMenuContentProps extends React.ComponentPropsWithoutRef<typeof PopoverContent> {
@@ -41,10 +43,12 @@ declare function PopoverMenuGroup({ className, children, ...props }: PopoverMenu
 export interface PopoverMenuGroupLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Typography>, "as" | "asChild" | "variant" | "color"> {
 }
 declare function PopoverMenuGroupLabel({ className, children, ...props }: PopoverMenuGroupLabelProps): import("react/jsx-runtime").JSX.Element;
-export interface PopoverMenuSearchProps extends React.ComponentPropsWithoutRef<typeof InputControl> {
+export interface PopoverMenuSearchProps extends Omit<InputProps, "className" | "hideLabel" | "inputClassName" | "label"> {
+    label?: React.ReactNode;
+    className?: string;
     containerClassName?: string;
 }
-declare const PopoverMenuSearch: React.ForwardRefExoticComponent<PopoverMenuSearchProps & React.RefAttributes<HTMLInputElement>>;
+declare const PopoverMenuSearch: React.ForwardRefExoticComponent<Omit<PopoverMenuSearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface PopoverMenuScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     maxHeight?: string;
 }
@@ -54,4 +58,4 @@ export interface PopoverMenuViewProps extends React.HTMLAttributes<HTMLDivElemen
     viewKey?: React.Key;
 }
 declare function PopoverMenuView({ children, className, direction, viewKey, ...props }: PopoverMenuViewProps): import("react/jsx-runtime").JSX.Element;
-export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuCheckboxItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, };
+export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuCheckboxItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, popoverMenuItemFocusClassName, popoverMenuItemFocusWithinClassName, };

package/dist/popover-menu.js

@@ -4,12 +4,14 @@ import * as React from "react";
 import { Check } from "lucide-react";
 import { Button } from "./button";
 import { Checkbox } from "./checkbox";
+import { Input } from "./input";
 import { cn } from "./lib/utils";
-import { InputControl } from "./input-control";
 import { PopoverContent } from "./popover-primitive";
 import { Typography } from "./typography";
 const POPOVER_MENU_VIEW_TRANSITION_MS = 300;
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+const popoverMenuItemFocusClassName = "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:ring-offset-0";
+const popoverMenuItemFocusWithinClassName = "rounded-sm focus-within:ring-2 focus-within:ring-inset focus-within:ring-ring";
 const PopoverMenuContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(PopoverContent, { ref: ref, className: cn("overflow-hidden p-1", className), ...props })));
 PopoverMenuContent.displayName = "PopoverMenuContent";
 function PopoverMenuHeader({ className, children, ...props }) {
@@ -19,11 +21,12 @@ function PopoverMenuSection({ className, children, ...props }) {
     return (_jsx("div", { className: cn("space-y-0", className), ...props, children: children }));
 }
 function PopoverMenuItem({ className, children, active, type = "button", ...props }) {
-    return (_jsxs(Button, { type: type, variant: "ghost", className: cn("h-auto min-h-8 w-full justify-start gap-2 rounded-sm px-2 py-2 text-left font-normal whitespace-normal focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-offset-0", active &&
-            "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground", className), ...props, children: [children, active ? _jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0" }) : null] }));
+    return (_jsxs(Button, { type: type, variant: "ghost", "data-slot": "popover-menu-item", className: cn("h-auto min-h-8 w-full justify-start gap-2 px-2 py-2 text-left font-normal whitespace-normal", popoverMenuItemFocusClassName, active &&
+            "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus-visible:bg-primary/20 focus-visible:text-primary", className), ...props, children: [children, active ? _jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0" }) : null] }));
 }
 function PopoverMenuCheckboxItem({ className, children, checked = false, description, disabled, onChange, readOnly, ...props }) {
-    return (_jsxs("label", { className: cn("flex h-auto min-h-8 w-full cursor-pointer items-start gap-1.5 rounded-sm px-2 py-2 text-left text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground", checked && "bg-accent text-accent-foreground", disabled &&
+    return (_jsxs("label", { className: cn("flex h-auto min-h-8 w-full cursor-pointer items-start gap-1.5 rounded-sm px-2 py-2 text-left text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground", popoverMenuItemFocusWithinClassName, checked &&
+            "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus-within:bg-primary/20 focus-within:text-primary", disabled &&
             "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit", className), children: [_jsx(Checkbox, { ...props, checked: checked, disabled: disabled, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : !onChange, onChange: onChange, className: "mt-0.5" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: "block", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", className: "mt-0.5 block", children: description })) : null] })] }));
 }
 function PopoverMenuDivider({ className, ...props }) {
@@ -33,7 +36,7 @@ function PopoverMenuFooter({ className, children, inset = "menu", ...props }) {
     return (_jsx("div", { className: cn("flex items-center gap-2 border-t p-1.5", inset === "menu" && "-mx-1 -mb-1", inset === "flush" && "m-0", className), ...props, children: children }));
 }
 function PopoverMenuFooterAction({ className, type = "button", ...props }) {
-    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-offset-0", className), ...props }));
+    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal", popoverMenuItemFocusClassName, className), ...props }));
 }
 function PopoverMenuFooterMeta({ className, children, ...props }) {
     return (_jsx(Typography, { as: "span", variant: "bodySm", color: "muted", className: cn("shrink-0 px-2 font-medium", className), ...props, children: children }));
@@ -44,7 +47,10 @@ function PopoverMenuGroup({ className, children, ...props }) {
 function PopoverMenuGroupLabel({ className, children, ...props }) {
     return (_jsx(Typography, { as: "p", variant: "caption", color: "muted", className: cn("px-2 py-1.5", className), ...props, children: children }));
 }
-const PopoverMenuSearch = React.forwardRef(({ className, containerClassName, ...props }, ref) => (_jsx("div", { className: cn("relative -mx-1 -mt-1 mb-1 px-2 py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:content-['']", containerClassName), children: _jsx(InputControl, { ref: ref, className: cn("h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", className), ...props }) })));
+const PopoverMenuSearch = React.forwardRef(({ "aria-label": ariaLabel, className, containerClassName, label, placeholder, ...props }, ref) => {
+    var _a, _b;
+    return (_jsx("div", { className: cn("relative -mx-1 -mt-1 mb-1 px-2 py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:content-['']", containerClassName), children: _jsx(Input, { ref: ref, "data-popover-menu-search": "true", label: (_b = (_a = label !== null && label !== void 0 ? label : ariaLabel) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : "Search", hideLabel: true, className: "gap-0", inputClassName: className, "aria-label": ariaLabel, placeholder: placeholder, ...props }) }));
+});
 PopoverMenuSearch.displayName = "PopoverMenuSearch";
 function PopoverMenuScrollArea({ className, children, maxHeight = "max-h-64", ...props }) {
     return (_jsx("div", { className: cn(maxHeight, "space-y-1 overflow-y-auto overflow-x-hidden", className), ...props, children: children }));
@@ -103,4 +109,4 @@ function PopoverMenuView({ children, className, direction = "forward", viewKey =
                     "motion-safe:slide-in-from-right-full", activeDirection === "backward" &&
                     "motion-safe:slide-in-from-left-full"), children: children }, viewKey)] }));
 }
-export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuCheckboxItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, };
+export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuCheckboxItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, popoverMenuItemFocusClassName, popoverMenuItemFocusWithinClassName, };

package/dist/popover.d.ts

@@ -1,11 +1,14 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { type TooltipProps } from "./tooltip";
+import { Typography } from "./typography";
 type PopoverRootProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
 type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
-export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "modal" | "onOpenChange" | "open">, Omit<PopoverContentProps, "children" | "className"> {
+export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "modal" | "onOpenChange" | "open">, Omit<PopoverContentProps, "children" | "className" | "title"> {
     trigger: React.ReactElement;
     children: React.ReactNode;
+    /** Visible popover heading. Also labels the popover for assistive technology. */
+    title?: React.ReactNode;
     surface?: "panel" | "menu";
     contentClassName?: string;
     triggerTooltip?: React.ReactNode;
@@ -13,5 +16,8 @@ export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "mo
     triggerTooltipSideOffset?: TooltipProps["sideOffset"];
     triggerTooltipClassName?: TooltipProps["contentClassName"];
 }
-declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, surface, contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align, sideOffset, ...contentProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
-export { Popover };
+declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface, contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align, sideOffset, ...contentProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export interface PopoverTitleProps extends Omit<React.ComponentPropsWithoutRef<typeof Typography>, "as" | "asChild" | "variant" | "color"> {
+}
+declare function PopoverTitle({ className, children, ...props }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTitle };

package/dist/popover.js

@@ -1,10 +1,61 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "./lib/utils";
 import { PopoverContent, PopoverRoot, PopoverTrigger, } from "./popover-primitive";
 import { Tooltip } from "./tooltip";
-function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, surface = "panel", contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align = "center", sideOffset = 4, ...contentProps }) {
+import { Typography } from "./typography";
+function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface = "panel", contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align = "center", sideOffset = 4, ...contentProps }) {
+    const generatedTitleId = React.useId();
+    const titleId = title ? `popover-title-${generatedTitleId}` : undefined;
     const triggerElement = _jsx(PopoverTrigger, { asChild: true, children: trigger });
-    return (_jsxs(PopoverRoot, { defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, children: [triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsx(PopoverContent, { align: align, sideOffset: sideOffset, className: cn(surface === "menu" && "overflow-hidden p-1", contentClassName), ...contentProps, children: children })] }));
+    const contentOnKeyDown = contentProps.onKeyDown;
+    const handleContentKeyDown = React.useCallback((event) => {
+        contentOnKeyDown === null || contentOnKeyDown === void 0 ? void 0 : contentOnKeyDown(event);
+        if (event.defaultPrevented ||
+            !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            return;
+        }
+        const menuItems = Array.from(event.currentTarget.querySelectorAll('[data-slot="popover-menu-item"]:not(:disabled)')).filter((item) => !item.closest('[aria-hidden="true"]'));
+        if (menuItems.length === 0) {
+            return;
+        }
+        const currentIndex = menuItems.findIndex((item) => item === document.activeElement);
+        const searchInput = event.currentTarget.querySelector('[data-popover-menu-search="true"]');
+        let focusTarget;
+        if (event.key === "Home") {
+            focusTarget = menuItems[0];
+        }
+        else if (event.key === "End") {
+            focusTarget = menuItems[menuItems.length - 1];
+        }
+        else if (document.activeElement === searchInput) {
+            focusTarget =
+                event.key === "ArrowDown"
+                    ? menuItems[0]
+                    : menuItems[menuItems.length - 1];
+        }
+        else if (currentIndex >= 0) {
+            if (event.key === "ArrowUp" && currentIndex === 0 && searchInput) {
+                focusTarget = searchInput;
+            }
+            else {
+                const offset = event.key === "ArrowDown" ? 1 : -1;
+                const nextIndex = Math.min(Math.max(currentIndex + offset, 0), menuItems.length - 1);
+                focusTarget = menuItems[nextIndex];
+            }
+        }
+        if (!focusTarget) {
+            return;
+        }
+        event.preventDefault();
+        focusTarget.focus({ preventScroll: true });
+    }, [contentOnKeyDown]);
+    return (_jsxs(PopoverRoot, { defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, children: [triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsxs(PopoverContent, { align: align, sideOffset: sideOffset, "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : contentProps["aria-labelledby"], className: cn(surface === "menu" && "overflow-hidden p-1", contentClassName), ...contentProps, onKeyDown: handleContentKeyDown, children: [title ? (_jsx(PopoverTitle, { id: titleId, className: cn(surface === "menu"
+                            ? "px-2 py-1.5"
+                            : "-mx-4 -mt-4 mb-4 border-b px-4 py-3"), children: title })) : null, children] })] }));
 }
-export { Popover };
+function PopoverTitle({ className, children, ...props }) {
+    return (_jsx(Typography, { as: "p", variant: "label", "data-slot": "popover-title", className: className, ...props, children: children }));
+}
+export { Popover, PopoverTitle };

package/dist/section-nav.js

@@ -7,6 +7,7 @@ import { Button } from "./button";
 import { cn } from "./lib/utils";
 import { Link } from "./link";
 import { Popover } from "./popover";
+import { popoverMenuItemFocusClassName } from "./popover-menu";
 import { Typography } from "./typography";
 function hasSectionNavChildren(item) {
     return Array.isArray(item.items) && item.items.length > 0;
@@ -28,7 +29,7 @@ const SectionNavRow = React.forwardRef(({ item, active, surface, hasChildren = f
     const isLink = Boolean(item.href) && !item.disabled && !hasChildren;
     const className = cn(surface === "list"
         ? "w-full justify-start gap-2 rounded-control px-2.5 text-sm font-medium shadow-none"
-        : "h-auto min-h-8 w-full justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-normal shadow-none whitespace-normal", active && !item.disabled
+        : cn("h-auto min-h-8 w-full justify-start gap-2 px-2 py-1.5 text-left text-sm font-normal shadow-none whitespace-normal", popoverMenuItemFocusClassName), active && !item.disabled
         ? surface === "list"
             ? "bg-background hover:bg-background"
             : "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground"
@@ -42,14 +43,14 @@ const SectionNavRow = React.forwardRef(({ item, active, surface, hasChildren = f
         hasChildren,
     });
     if (isLink) {
-        return (_jsx(Button, { ref: ref, asChild: true, variant: "ghost", disabled: item.disabled, className: cn(className, triggerClassName), "aria-current": active ? "page" : undefined, ...buttonProps, children: _jsx(Link, { variant: "inherit", href: item.href, target: item.target, rel: item.rel, onClick: (event) => {
+        return (_jsx(Button, { ref: ref, asChild: true, variant: "ghost", disabled: item.disabled, "data-slot": surface === "menu" ? "popover-menu-item" : undefined, className: cn(className, triggerClassName), "aria-current": active ? "page" : undefined, ...buttonProps, children: _jsx(Link, { variant: "inherit", href: item.href, target: item.target, rel: item.rel, onClick: (event) => {
                     var _a;
                     externalOnClick === null || externalOnClick === void 0 ? void 0 : externalOnClick(event);
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect();
                     (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
                 }, children: content }) }));
     }
-    return (_jsx(Button, { ref: ref, type: "button", variant: "ghost", disabled: item.disabled, className: cn(className, triggerClassName), "aria-current": active && !hasChildren ? "page" : undefined, "aria-expanded": hasChildren ? ariaExpanded : undefined, "aria-haspopup": hasChildren ? "menu" : undefined, ...buttonProps, onClick: hasChildren
+    return (_jsx(Button, { ref: ref, type: "button", variant: "ghost", disabled: item.disabled, "data-slot": surface === "menu" ? "popover-menu-item" : undefined, className: cn(className, triggerClassName), "aria-current": active && !hasChildren ? "page" : undefined, "aria-expanded": hasChildren ? ariaExpanded : undefined, "aria-haspopup": hasChildren ? "menu" : undefined, ...buttonProps, onClick: hasChildren
             ? externalOnClick
             : (event) => {
                 var _a;

package/dist/select-primitive.js

@@ -27,7 +27,7 @@ const SelectContent = React.forwardRef(({ className, children, header, position
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SelectPrimitive.ItemText, { className: "break-words font-normal", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", children: description })) : null] })] })));
+const SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary data-[state=checked]:hover:bg-primary/20 data-[state=checked]:hover:text-primary data-[state=checked]:focus:bg-primary/20 data-[state=checked]:focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SelectPrimitive.ItemText, { className: "break-words font-normal", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", children: description })) : null] })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/dist/select.js

@@ -43,6 +43,7 @@ function Select({ label, options, placeholder = "Select an option", description,
     const generatedId = React.useId();
     const selectId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
     const searchInputRef = React.useRef(null);
+    const contentRef = React.useRef(null);
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState("");
     const errorId = error ? `${selectId}-error` : undefined;
@@ -69,6 +70,31 @@ function Select({ label, options, placeholder = "Select an option", description,
         }
         input.focus({ preventScroll: true });
     }, []);
+    const getEnabledOptionElements = React.useCallback(() => {
+        var _a, _b;
+        return Array.from((_b = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-slot="select-item"]:not([data-disabled])')) !== null && _b !== void 0 ? _b : []);
+    }, []);
+    const focusBoundaryOption = React.useCallback((boundary) => {
+        const enabledOptions = getEnabledOptionElements();
+        const option = boundary === "first"
+            ? enabledOptions[0]
+            : enabledOptions[enabledOptions.length - 1];
+        option === null || option === void 0 ? void 0 : option.focus({ preventScroll: true });
+    }, [getEnabledOptionElements]);
+    const handleContentKeyDownCapture = React.useCallback((event) => {
+        if (event.key !== "ArrowUp") {
+            return;
+        }
+        const firstOption = getEnabledOptionElements()[0];
+        if (document.activeElement !== firstOption) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (searchable) {
+            focusSearchInput();
+        }
+    }, [focusSearchInput, getEnabledOptionElements, searchable]);
     React.useEffect(() => {
         if (!isOpen) {
             setSearchQuery("");
@@ -110,7 +136,17 @@ function Select({ label, options, placeholder = "Select an option", description,
         }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
     }, [onOpenChange, open]);
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(SelectRoot, { disabled: disabled, open: open, onOpenChange: handleOpenChange, ...props, children: [_jsx(SelectTrigger, { id: selectId, className: triggerClassName, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { className: contentClassName, header: searchable ? (_jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: searchPlaceholder, "aria-label": searchInputAriaLabel, autoComplete: "off", className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:border-0 focus-visible:ring-0", onKeyDown: (event) => {
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(SelectRoot, { disabled: disabled, open: open, onOpenChange: handleOpenChange, ...props, children: [_jsx(SelectTrigger, { id: selectId, className: triggerClassName, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { ref: contentRef, className: contentClassName, onKeyDownCapture: handleContentKeyDownCapture, header: searchable ? (_jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: searchPlaceholder, "aria-label": searchInputAriaLabel, autoComplete: "off", className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none", onKeyDown: (event) => {
+                                if (event.key === "ArrowDown" ||
+                                    event.key === "ArrowUp") {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    focusBoundaryOption(event.key === "ArrowDown" ? "first" : "last");
+                                    return;
+                                }
+                                if (event.key === "Escape" || event.key === "Tab") {
+                                    return;
+                                }
                                 event.stopPropagation();
                             } })) : undefined, viewportClassName: searchable ? "max-h-64" : undefined, children: hasVisibleOptions ? (optionGroups.map((group, groupIndex) => {
                             var _a;

package/dist/table-column-filter.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+interface TableColumnFilterBase {
+    /** Overrides the column header text in accessible filter labels. */
+    label?: string;
+    /** Short text shown in the filter row before a value is selected. */
+    placeholder?: string;
+    disabled?: boolean;
+}
+export interface TableTextColumnFilter extends TableColumnFilterBase {
+    type: "text";
+    value: string;
+    onValueChange: (value: string) => void;
+}
+export interface TableColumnFilterOption {
+    label: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+export interface TableOptionsColumnFilter extends TableColumnFilterBase {
+    type: "options";
+    values: readonly string[];
+    onValuesChange: (values: string[]) => void;
+    options: readonly TableColumnFilterOption[];
+    /** Adds a compact option search field. Defaults to true for more than seven options. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+}
+export interface TableDateColumnFilter extends TableColumnFilterBase {
+    type: "date";
+    value: string;
+    onValueChange: (value: string) => void;
+    minDate?: Date;
+    maxDate?: Date;
+}
+export type TableColumnFilter = TableTextColumnFilter | TableOptionsColumnFilter | TableDateColumnFilter;
+interface TableColumnFilterControlProps {
+    filter: TableColumnFilter;
+    label: string;
+}
+declare function TableColumnFilterControl({ filter, label, }: TableColumnFilterControlProps): import("react/jsx-runtime").JSX.Element;
+export { TableColumnFilterControl };

package/dist/table-column-filter.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FilterIcon } from "./animated-icons";
+import { DateInput } from "./date-input";
+import { FilterPopover } from "./filter-popover";
+import { FilterToggle, filterToggleVariants, } from "./filter-toggle";
+import { cn } from "./lib/utils";
+import { Popover } from "./popover";
+import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuSearch, } from "./popover-menu";
+function isTableColumnFilterActive(filter) {
+    return filter.type === "options"
+        ? filter.values.length > 0
+        : filter.value.trim().length > 0;
+}
+function getOptionsFilterSummary(filter) {
+    var _a, _b, _c;
+    if (filter.values.length === 0) {
+        return (_a = filter.placeholder) !== null && _a !== void 0 ? _a : "Filter";
+    }
+    if (filter.values.length > 1) {
+        return `${filter.values.length} selected`;
+    }
+    return ((_c = (_b = filter.options.find((option) => option.value === filter.values[0])) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : filter.values[0]);
+}
+const TableFilterTrigger = React.forwardRef(({ active, disabled, label, children, ...props }, ref) => (_jsx(FilterToggle, { ref: ref, type: "button", disabled: disabled, selected: active, "aria-label": `Filter by ${label}${active ? ", active" : ""}`, className: cn("h-9 w-full min-w-0 justify-start overflow-hidden px-2 text-sm font-normal", !active &&
+        "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"), icon: _jsx(FilterIcon, { "aria-hidden": "true", className: "shrink-0", size: 16 }), ...props, children: _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: children }) })));
+TableFilterTrigger.displayName = "TableFilterTrigger";
+function TextColumnFilter({ filter, label, }) {
+    var _a, _b, _c;
+    const active = isTableColumnFilterActive(filter);
+    const accessibleLabel = (_a = filter.label) !== null && _a !== void 0 ? _a : label;
+    return (_jsxs(Popover, { align: "start", surface: "menu", "aria-label": `${accessibleLabel} filter`, title: `Filter by ${accessibleLabel}`, trigger: _jsx(TableFilterTrigger, { active: active, disabled: filter.disabled, label: accessibleLabel, children: active ? filter.value : (_b = filter.placeholder) !== null && _b !== void 0 ? _b : "Filter" }), children: [_jsx(PopoverMenuSearch, { autoFocus: true, value: filter.value, onChange: (event) => filter.onValueChange(event.target.value), placeholder: (_c = filter.placeholder) !== null && _c !== void 0 ? _c : `Search ${accessibleLabel}`, "aria-label": `Filter ${accessibleLabel}`, disabled: filter.disabled, containerClassName: "after:hidden" }), active ? (_jsx(PopoverMenuFooter, { children: _jsx(PopoverMenuFooterAction, { onClick: () => filter.onValueChange(""), children: "Clear filter" }) })) : null] }));
+}
+function OptionsColumnFilter({ filter, label, }) {
+    var _a, _b, _c, _d;
+    const active = isTableColumnFilterActive(filter);
+    const accessibleLabel = (_a = filter.label) !== null && _a !== void 0 ? _a : label;
+    const searchable = (_b = filter.searchable) !== null && _b !== void 0 ? _b : filter.options.length > 7;
+    const toggleOption = (optionValue) => {
+        const nextValues = filter.values.includes(optionValue)
+            ? filter.values.filter((value) => value !== optionValue)
+            : [...filter.values, optionValue];
+        filter.onValuesChange(nextValues);
+    };
+    return (_jsx(FilterPopover, { directSingleGroup: true, ariaLabel: `${accessibleLabel} filter`, title: `Filter by ${accessibleLabel}`, trigger: _jsx(TableFilterTrigger, { active: active, disabled: filter.disabled, label: accessibleLabel, children: getOptionsFilterSummary(filter) }), groups: [
+            {
+                id: `table-column-${accessibleLabel}`,
+                label: accessibleLabel,
+                searchable,
+                searchPlaceholder: (_c = filter.searchPlaceholder) !== null && _c !== void 0 ? _c : "Search options",
+                emptyLabel: (_d = filter.emptyMessage) !== null && _d !== void 0 ? _d : "No options found",
+                selectedCount: filter.values.length,
+                options: filter.options.map((option) => ({
+                    id: option.value,
+                    label: option.label,
+                    selected: filter.values.includes(option.value),
+                    disabled: filter.disabled || option.disabled,
+                    onSelect: () => toggleOption(option.value),
+                })),
+            },
+        ], selectedCount: filter.values.length, onReset: active ? () => filter.onValuesChange([]) : undefined, resetLabel: "Clear filter" }));
+}
+function DateColumnFilter({ filter, label, }) {
+    var _a, _b;
+    const active = isTableColumnFilterActive(filter);
+    const accessibleLabel = (_a = filter.label) !== null && _a !== void 0 ? _a : label;
+    return (_jsx(DateInput, { label: `Filter by ${accessibleLabel}${active ? ", active" : ""}`, hideLabel: true, value: filter.value, onValueChange: filter.onValueChange, placeholder: (_b = filter.placeholder) !== null && _b !== void 0 ? _b : "Pick a date", disabled: filter.disabled, minDate: filter.minDate, maxDate: filter.maxDate, clearable: true, clearLabel: `Clear ${accessibleLabel} filter`, className: "gap-0", triggerClassName: cn(filterToggleVariants({ selected: active }), "h-9 w-full min-w-0 justify-start text-sm font-normal shadow-none", active ? "pl-2 pr-16" : "pl-2 pr-9", !active &&
+            "border-0 bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground") }));
+}
+function TableColumnFilterControl({ filter, label, }) {
+    if (filter.type === "text") {
+        return _jsx(TextColumnFilter, { filter: filter, label: label });
+    }
+    if (filter.type === "options") {
+        return _jsx(OptionsColumnFilter, { filter: filter, label: label });
+    }
+    return _jsx(DateColumnFilter, { filter: filter, label: label });
+}
+export { TableColumnFilterControl };

package/dist/table.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type PaginationProps } from "./pagination";
+import { type TableColumnFilter } from "./table-column-filter";
 interface TableRootProps extends React.HTMLAttributes<HTMLTableElement> {
     wrapperClassName?: string;
 }
@@ -73,6 +74,10 @@ export interface TableColumn<Row> {
     sortable?: boolean;
     sortKey?: string;
     sortLabel?: string;
+    /** Controlled filter rendered in a second header row. Filter the supplied `rows` in the screen or data hook. */
+    filter?: TableColumnFilter;
+    /** Optional class name for this column's filter cell. */
+    filterClassName?: string;
     /** When false, restore-defaults helpers can omit the column from the visible set. */
     defaultVisible?: boolean;
     /** When false, the column visibility menu keeps the column out of its checklist. */

package/dist/table.js

@@ -6,6 +6,7 @@ import { ArrowUpIcon } from "./animated-icons/arrow-up";
 import { EmptyState } from "./empty-state";
 import { Pagination } from "./pagination";
 import { Skeleton } from "./skeleton";
+import { TableColumnFilterControl, } from "./table-column-filter";
 import { cn } from "./lib/utils";
 const TableRoot = React.forwardRef(({ className, wrapperClassName: _wrapperClassName, ...props }, ref) => (_jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props })));
 TableRoot.displayName = "TableRoot";
@@ -110,7 +111,7 @@ function hasColumnWidthOverrides(columnWidths) {
 }
 function getMeasuredColumnWidths(resizeHandle, columns, fallbackColumnWidths) {
     const table = resizeHandle.closest("table");
-    const headerCells = table === null || table === void 0 ? void 0 : table.querySelectorAll('thead th:not([data-slot="table-expansion-head"])');
+    const headerCells = table === null || table === void 0 ? void 0 : table.querySelectorAll('thead th[data-slot="table-column-head"]');
     if (!(headerCells === null || headerCells === void 0 ? void 0 : headerCells.length)) {
         return fallbackColumnWidths;
     }
@@ -177,8 +178,8 @@ function stickyClassName(sticky, kind, showShadow = false) {
             : "shadow-[inset_1px_0_0_0_hsl(var(--table-border)),_-8px_0_12px_-10px_hsl(var(--foreground)_/_0.35)]"
         : undefined;
     const background = kind === "head" ? "bg-[hsl(var(--table-header-background))]" : "bg-card";
-    // z-20 on header cells so they layer above sticky body cells on the other axis.
-    const z = kind === "head" ? "z-20" : "z-10";
+    // Header and filter cells layer above sticky body cells on the other axis.
+    const z = kind === "cell" ? "z-10" : "z-20";
     return cn("sticky", background, side, z, shadow);
 }
 function getStickyShadowVisibility(sticky, scrollState) {
@@ -245,7 +246,7 @@ export const TABLE_SKELETON_PRESETS = {
 };
 function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, }) {
     const isSorted = currentSortField === field;
-    return (_jsxs(TableHead, { className: cn(resizeHandle && "relative", alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, children: [_jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", containOverflow && "max-w-full overflow-hidden", allowWrap
+    return (_jsxs(TableHead, { "data-slot": "table-column-head", className: cn(resizeHandle && "relative", alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, children: [_jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", containOverflow && "max-w-full overflow-hidden", allowWrap
                     ? "max-w-full whitespace-normal text-left"
                     : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${sortLabel !== null && sortLabel !== void 0 ? sortLabel : field}`, children: [_jsx("span", { className: cn("min-w-0", containOverflow && !allowWrap && "truncate", containOverflow && allowWrap && "break-words [overflow-wrap:anywhere]"), children: children }), _jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }), resizeHandle] }));
 }
@@ -331,6 +332,7 @@ function isStickyResizeBoundary(column, nextColumn) {
 function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowExpansion, onRowClick, onScroll, style, ...props }) {
     const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
     const hasExpansionColumn = Boolean(rowExpansion);
+    const hasColumnFilters = visibleColumns.some((column) => column.filter);
     const isGrowResizeMode = columnResizeMode === "grow";
     const isColumnResizingEnabled = resizableColumns || visibleColumns.some((column) => column.resizable);
     // Use auto layout by default so the browser can grow a column to contain its
@@ -561,18 +563,25 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
                                 minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled),
                                 maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled),
                                 treatWidthAsMinWidth: !isColumnResizingEnabled,
-                            }) }, column.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-head", "aria-label": "Expand rows", className: "w-12 px-2" })) : null, visibleColumns.map((column, columnIndex) => {
-                                var _a;
-                                const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
-                                const isSortable = column.sortable && sorting;
-                                const columnWidth = getRenderedColumnWidth({
-                                    column,
-                                    columnWidths: resolvedColumnWidths,
-                                    resizing: isColumnResizingEnabled,
-                                });
-                                const resizeHandle = renderResizeHandle(column, columnIndex);
-                                return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, children: column.header }, column.key)) : (_jsxs(TableHead, { width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), children: [column.header, resizeHandle] }, column.key)));
-                            })] }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: [
+                            }) }, column.key)))] }), _jsxs(TableHeader, { children: [_jsxs(TableRow, { children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-head", "aria-label": "Expand rows", className: "w-12 px-2" })) : null, visibleColumns.map((column, columnIndex) => {
+                                    var _a;
+                                    const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
+                                    const isSortable = column.sortable && sorting;
+                                    const columnWidth = getRenderedColumnWidth({
+                                        column,
+                                        columnWidths: resolvedColumnWidths,
+                                        resizing: isColumnResizingEnabled,
+                                    });
+                                    const resizeHandle = renderResizeHandle(column, columnIndex);
+                                    return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, children: column.header }, column.key)) : (_jsxs(TableHead, { "data-slot": "table-column-head", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), children: [column.header, resizeHandle] }, column.key)));
+                                })] }), hasColumnFilters ? (_jsxs(TableRow, { "data-slot": "table-filter-row", className: "!bg-card", children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-filter-cell", "aria-hidden": "true", className: "w-12 px-2" })) : null, visibleColumns.map((column) => {
+                                    const columnWidth = getRenderedColumnWidth({
+                                        column,
+                                        columnWidths: resolvedColumnWidths,
+                                        resizing: isColumnResizingEnabled,
+                                    });
+                                    return (_jsx(TableHead, { "data-slot": "table-filter-cell", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn("relative h-11 px-2 py-1 font-normal", stickyClassName(column.sticky, "filter", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.filterClassName), children: column.filter ? (_jsx("div", { "data-slot": "table-filter-control", className: "absolute inset-x-2 inset-y-1 min-w-0", children: _jsx(TableColumnFilterControl, { filter: column.filter, label: getColumnResizeLabel(column) }) })) : null }, column.key));
+                                })] })) : null] }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: [
                             ...(hasExpansionColumn
                                 ? [{ width: "1rem", height: "1rem" }]
                                 : []),

package/dist/tabs.js

@@ -7,7 +7,7 @@ import { ChevronDownIcon } from "./animated-icons/chevron-down";
 import { XIcon } from "./animated-icons/x";
 import { cn } from "./lib/utils";
 import { Popover } from "./popover";
-import { PopoverMenuSection } from "./popover-menu";
+import { PopoverMenuSection, popoverMenuItemFocusClassName, } from "./popover-menu";
 const TabsContext = React.createContext(null);
 const getTabValueSelector = (value) => {
     const escapedValue = typeof CSS !== "undefined" && typeof CSS.escape === "function"
@@ -82,7 +82,7 @@ function TabTriggerWithDropdown({ item, triggerClassName, contentClassName, }) {
             setInternalActiveSection((_b = (_a = sections[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
         }
     }, [isTabSelected, item.activeSection, sections]);
-    return (_jsx(Popover, { open: open, onOpenChange: setOpen, surface: "menu", align: "start", contentClassName: cn("min-w-[12rem]", contentClassName), trigger: _jsxs(TabsTrigger, { value: item.value, disabled: item.disabled, "data-state": isTabSelected ? "active" : "inactive", "data-tab-value": item.value, className: cn("flex items-center gap-1", triggerClassName), children: [renderTabsItemLabel(item.label, isTabSelected), _jsx(ChevronDownIcon, { size: 12, className: cn("transition-transform duration-200", open && "rotate-180") })] }), children: _jsx(PopoverMenuSection, { className: "space-y-1", children: sections.map((section) => (_jsxs("button", { type: "button", className: cn("flex min-h-fit w-full cursor-pointer items-start gap-2 rounded-sm px-3 py-2 text-left text-sm font-normal leading-5 text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", isTabSelected &&
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, surface: "menu", align: "start", contentClassName: cn("min-w-[12rem]", contentClassName), trigger: _jsxs(TabsTrigger, { value: item.value, disabled: item.disabled, "data-state": isTabSelected ? "active" : "inactive", "data-tab-value": item.value, className: cn("flex items-center gap-1", triggerClassName), children: [renderTabsItemLabel(item.label, isTabSelected), _jsx(ChevronDownIcon, { size: 12, className: cn("transition-transform duration-200", open && "rotate-180") })] }), children: _jsx(PopoverMenuSection, { className: "space-y-1", children: sections.map((section) => (_jsxs("button", { type: "button", "data-slot": "popover-menu-item", className: cn("flex min-h-fit w-full cursor-pointer items-start gap-2 px-3 py-2 text-left text-sm font-normal leading-5 text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground", popoverMenuItemFocusClassName, isTabSelected &&
                     activeSection === section.id &&
                     "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground"), onClick: () => handleSectionClick(section.id), children: [_jsx("span", { className: "block min-w-0 flex-1 whitespace-normal break-words leading-5", children: section.label }), isTabSelected && activeSection === section.id ? (_jsx(Check, { "aria-hidden": "true", className: "mt-0.5 h-4 w-4 shrink-0" })) : null] }, section.id))) }) }));
 }

package/dist/use-search-highlight.js

@@ -41,6 +41,6 @@ function useSearchHighlight(text, query) {
 }
 function SearchHighlight({ text, query, className, markClassName, ...props }) {
     const segments = useSearchHighlight(text, query);
-    return (_jsx("span", { className: className, ...props, children: segments.map((segment, index) => segment.matched ? (_jsx("mark", { className: cn("rounded-[2px] bg-[hsl(var(--status-warning))] px-0.5 font-medium text-[hsl(var(--status-warning-foreground))]", markClassName), children: segment.text }, `${segment.text}-${index}`)) : (_jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`))) }));
+    return (_jsx("span", { className: className, ...props, children: segments.map((segment, index) => segment.matched ? (_jsx("mark", { className: cn("rounded-[2px] bg-primary/10 px-0.5 font-medium text-primary dark:bg-primary/50 dark:text-foreground dark:ring-1 dark:ring-inset dark:ring-[hsl(var(--status-success-foreground)/0.55)]", markClassName), children: segment.text }, `${segment.text}-${index}`)) : (_jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`))) }));
 }
 export { SearchHighlight, useSearchHighlight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.18",
+  "version": "0.4.20",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",