@neasg/design-system 0.4.21 → 0.4.23

package/dist/popover-menu.js

@@ -21,13 +21,13 @@ 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", "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] }));
+    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 aria-[selected=true]:bg-highlight aria-[selected=true]:text-highlight-foreground aria-[selected=true]:[--muted-foreground:var(--instructional-foreground)] aria-[selected=true]:hover:bg-highlight/80 aria-[selected=true]:hover:text-highlight-foreground aria-[selected=true]:focus-visible:bg-highlight/80 aria-[selected=true]:focus-visible:text-highlight-foreground", popoverMenuItemFocusClassName, active &&
+            "bg-highlight text-highlight-foreground [--muted-foreground:var(--instructional-foreground)] hover:bg-highlight/80 hover:text-highlight-foreground focus-visible:bg-highlight/80 focus-visible:text-highlight-foreground", 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", 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] })] }));
+            "bg-highlight text-highlight-foreground hover:bg-highlight/80 hover:text-highlight-foreground focus-within:bg-highlight/80 focus-within:text-highlight-foreground", disabled &&
+            "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit", className), children: [_jsx(Checkbox, { ...props, "data-slot": "popover-menu-item", 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 }) {
     return _jsx("div", { className: cn("-mx-1 my-1 h-px bg-border", className), ...props });
@@ -49,7 +49,7 @@ function PopoverMenuGroupLabel({ className, children, ...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 }) }));
+    return (_jsx("div", { className: cn("relative -mx-1 -mt-1 mb-1 px-1 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 }) {
@@ -62,6 +62,8 @@ function PopoverMenuView({ children, className, direction = "forward", viewKey =
         key: viewKey,
         children,
     });
+    const activeViewElementRef = React.useRef(null);
+    const previousViewKeyRef = React.useRef(viewKey);
     const exitTimeoutRef = React.useRef(null);
     if (Object.is(viewKey, activeViewKey)) {
         activeViewRef.current = { key: viewKey, children };
@@ -99,12 +101,32 @@ function PopoverMenuView({ children, className, direction = "forward", viewKey =
             }
         };
     }, [direction, viewKey]);
+    useIsomorphicLayoutEffect(() => {
+        var _a;
+        if (Object.is(previousViewKeyRef.current, viewKey)) {
+            return;
+        }
+        previousViewKeyRef.current = viewKey;
+        const firstControl = (_a = activeViewElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
+        firstControl === null || firstControl === void 0 ? void 0 : firstControl.focus({ preventScroll: true });
+    }, [viewKey]);
     const activeDirection = exitingView === null || exitingView === void 0 ? void 0 : exitingView.direction;
     const shouldAnimateActive = Boolean(activeDirection);
-    return (_jsxs("div", { className: cn("grid min-w-0 overflow-hidden", className), ...props, children: [exitingView ? (_jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none col-start-1 row-start-1 min-w-0", exitingView.direction !== "none" &&
+    const setExitingViewElement = React.useCallback((element) => {
+        if (!element) {
+            return;
+        }
+        element.inert = true;
+        element
+            .querySelectorAll('a[href], button, input, select, textarea, [contenteditable="true"], [tabindex]')
+            .forEach((control) => {
+            control.tabIndex = -1;
+        });
+    }, []);
+    return (_jsxs("div", { className: cn("grid min-w-0 overflow-hidden", className), ...props, children: [exitingView ? (_jsx("div", { ref: setExitingViewElement, "aria-hidden": "true", inert: "", "data-popover-menu-view": "exiting", className: cn("pointer-events-none col-start-1 row-start-1 min-w-0", exitingView.direction !== "none" &&
                     "motion-safe:animate-out motion-safe:fade-out-0 motion-safe:duration-300 motion-reduce:animate-none", exitingView.direction === "forward" &&
                     "motion-safe:slide-out-to-left-full", exitingView.direction === "backward" &&
-                    "motion-safe:slide-out-to-right-full"), children: exitingView.children }, `leaving-${exitingView.key}`)) : null, _jsx("div", { className: cn("col-start-1 row-start-1 min-w-0", shouldAnimateActive &&
+                    "motion-safe:slide-out-to-right-full"), children: exitingView.children }, `leaving-${exitingView.key}`)) : null, _jsx("div", { ref: activeViewElementRef, "data-popover-menu-view": "active", className: cn("col-start-1 row-start-1 min-w-0", shouldAnimateActive &&
                     "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-300 motion-reduce:animate-none", activeDirection === "forward" &&
                     "motion-safe:slide-in-from-right-full", activeDirection === "backward" &&
                     "motion-safe:slide-in-from-left-full"), children: children }, viewKey)] }));

package/dist/popover.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type PopoverTabBehavior } from "./popover-focus";
 import { type TooltipProps } from "./tooltip";
 import { Typography } from "./typography";
 type PopoverRootProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
@@ -10,13 +11,15 @@ export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "mo
     /** Visible popover heading. Also labels the popover for assistive technology. */
     title?: React.ReactNode;
     surface?: "panel" | "menu";
+    /** Controls whether Tab stays within the popover or closes it and continues in the page Tab order. */
+    tabBehavior?: PopoverTabBehavior;
     contentClassName?: string;
     triggerTooltip?: React.ReactNode;
     triggerTooltipSide?: TooltipProps["side"];
     triggerTooltipSideOffset?: TooltipProps["sideOffset"];
     triggerTooltipClassName?: TooltipProps["contentClassName"];
 }
-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;
+declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface, tabBehavior, 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;

package/dist/popover.js

@@ -3,13 +3,33 @@ 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 { usePopoverTabExit, } from "./popover-focus";
 import { Tooltip } from "./tooltip";
 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 }) {
+function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface = "panel", tabBehavior = "contain", 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 });
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
+    const isControlled = open !== undefined;
+    const currentOpen = isControlled ? open : internalOpen;
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const setOpen = React.useCallback((nextOpen) => {
+        if (!isControlled) {
+            setInternalOpen(nextOpen);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }, [isControlled, onOpenChange]);
+    const { handleCloseAutoFocus, handleTabKeyDown } = usePopoverTabExit({
+        behavior: tabBehavior,
+        triggerRef,
+        contentRef,
+        onExit: () => setOpen(false),
+    });
+    const triggerElement = (_jsx(PopoverTrigger, { ref: triggerRef, asChild: true, children: trigger }));
     const contentOnKeyDown = contentProps.onKeyDown;
+    const contentOnKeyDownCapture = contentProps.onKeyDownCapture;
+    const contentOnCloseAutoFocus = contentProps.onCloseAutoFocus;
     const handleContentKeyDown = React.useCallback((event) => {
         contentOnKeyDown === null || contentOnKeyDown === void 0 ? void 0 : contentOnKeyDown(event);
         if (event.defaultPrevented ||
@@ -51,7 +71,15 @@ function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, ti
         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"
+    const handleContentKeyDownCapture = React.useCallback((event) => {
+        contentOnKeyDownCapture === null || contentOnKeyDownCapture === void 0 ? void 0 : contentOnKeyDownCapture(event);
+        handleTabKeyDown(event);
+    }, [contentOnKeyDownCapture, handleTabKeyDown]);
+    const handleContentCloseAutoFocus = React.useCallback((event) => {
+        contentOnCloseAutoFocus === null || contentOnCloseAutoFocus === void 0 ? void 0 : contentOnCloseAutoFocus(event);
+        handleCloseAutoFocus(event);
+    }, [contentOnCloseAutoFocus, handleCloseAutoFocus]);
+    return (_jsxs(PopoverRoot, { modal: modal, onOpenChange: setOpen, open: currentOpen, children: [triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsxs(PopoverContent, { ref: contentRef, 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, onCloseAutoFocus: handleContentCloseAutoFocus, onKeyDown: handleContentKeyDown, onKeyDownCapture: handleContentKeyDownCapture, 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] })] }));
 }

package/dist/rich-text-editor.js

@@ -390,5 +390,5 @@ export function RichTextEditor({ placeholder = "Type message here...", editorAri
                                     }, children: color.value === "" && (_jsx("span", { className: "text-xs text-muted-foreground", children: "A" })) }, `bg-${color.name}`))) }) }), _jsx(ToolbarIconButton, { label: "Bullet list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bulletList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run(), children: _jsx(ListIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Ordered list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("orderedList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrderedIcon, { size: 14 }) }), _jsx(Tooltip, { content: `Attach files (max ${maxFileSizeLabel}) - ${acceptedFileTypesLabel}`, side: "top", contentClassName: "max-w-[240px] text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", children: _jsx(PaperclipIcon, { size: 14 }) }) }), _jsx(ToolbarIconButton, { label: "Add link", active: editor === null || editor === void 0 ? void 0 : editor.isActive("link"), onClick: openLinkMenu, children: _jsx(LinkIcon, { size: 14 }) }), showTemplates && templates.length > 0 && (_jsx(_Fragment, { children: _jsxs(Popover, { open: templatePopoverOpen, onOpenChange: setTemplatePopoverOpen, align: "end", contentClassName: "w-96 p-0", trigger: _jsxs(Button, { type: "button", variant: "ghost", className: "h-8 gap-1 text-muted-foreground", children: ["Template", _jsx(ChevronDownIcon, { size: 14 })] }), children: [_jsx("div", { className: "max-h-80 overflow-y-auto", children: templatesByCategory.map(({ category, templates }) => {
                                             var _a;
                                             return (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 bg-muted px-3 py-2 text-sm font-semibold text-foreground", children: (_a = templateCategoryLabels[category]) !== null && _a !== void 0 ? _a : category }), templates.map((template) => (_jsxs("button", { type: "button", className: "w-full border-b border-border/50 px-3 py-2 text-left text-sm transition-colors last:border-0 hover:bg-muted", onClick: () => applyTemplate(template), children: [_jsx("div", { className: "truncate font-medium", children: template.name }), template.description && (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: template.description }))] }, template.id)))] }, category));
-                                        }) }), templateCreateHref && (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-primary transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) }))] }) }))] }) }), _jsx("div", { className: "bg-muted px-3 pb-2 pt-1 dark:bg-background", children: sendAction })] }));
+                                        }) }), templateCreateHref && (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-interactive transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) }))] }) }))] }) }), _jsx("div", { className: "bg-muted px-3 pb-2 pt-1 dark:bg-background", children: sendAction })] }));
 }

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 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] })] })));
+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-highlight data-[state=checked]:text-highlight-foreground data-[state=checked]:hover:bg-highlight/80 data-[state=checked]:hover:text-highlight-foreground data-[state=checked]:focus:bg-highlight/80 data-[state=checked]:focus:text-highlight-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] })] })));
 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

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { InputControl } from "./input-control";
 import { cn } from "./lib/utils";
+import { usePopoverTabExit } from "./popover-focus";
 import { SearchHighlight } from "./use-search-highlight";
 import { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, } from "./select-primitive";
 function groupOptions(options) {
@@ -42,6 +43,7 @@ function renderHighlightedLabel(label, query) {
 function Select({ label, options, placeholder = "Select an option", description, error, invalid = false, hideLabel = false, searchable = false, searchPlaceholder = "Search options...", searchEmptyMessage = "No options found.", searchInputAriaLabel = "Search options", className, triggerClassName, contentClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, open, onOpenChange, ...props }) {
     const generatedId = React.useId();
     const selectId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
+    const triggerRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
@@ -63,6 +65,22 @@ function Select({ label, options, placeholder = "Select an option", description,
         : options;
     const optionGroups = groupOptions(filteredOptions);
     const hasVisibleOptions = filteredOptions.length > 0;
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        if (open === undefined) {
+            setUncontrolledOpen(nextOpen);
+        }
+        if (!nextOpen) {
+            setSearchQuery("");
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }, [onOpenChange, open]);
+    const closeForTab = React.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+    const { handleCloseAutoFocus, handleTabKeyDown } = usePopoverTabExit({
+        behavior: "close",
+        triggerRef,
+        contentRef,
+        onExit: closeForTab,
+    });
     const focusSearchInput = React.useCallback(() => {
         const input = searchInputRef.current;
         if (!input || document.activeElement === input) {
@@ -82,6 +100,9 @@ function Select({ label, options, placeholder = "Select an option", description,
         option === null || option === void 0 ? void 0 : option.focus({ preventScroll: true });
     }, [getEnabledOptionElements]);
     const handleContentKeyDownCapture = React.useCallback((event) => {
+        if (handleTabKeyDown(event)) {
+            return;
+        }
         if (event.key !== "ArrowUp") {
             return;
         }
@@ -94,7 +115,12 @@ function Select({ label, options, placeholder = "Select an option", description,
         if (searchable) {
             focusSearchInput();
         }
-    }, [focusSearchInput, getEnabledOptionElements, searchable]);
+    }, [
+        focusSearchInput,
+        getEnabledOptionElements,
+        handleTabKeyDown,
+        searchable,
+    ]);
     React.useEffect(() => {
         if (!isOpen) {
             setSearchQuery("");
@@ -127,16 +153,7 @@ function Select({ label, options, placeholder = "Select an option", description,
         searchable,
         searchQuery,
     ]);
-    const handleOpenChange = React.useCallback((nextOpen) => {
-        if (open === undefined) {
-            setUncontrolledOpen(nextOpen);
-        }
-        if (!nextOpen) {
-            setSearchQuery("");
-        }
-        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, { 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) => {
+    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: isOpen, onOpenChange: handleOpenChange, ...props, children: [_jsx(SelectTrigger, { ref: triggerRef, 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, onCloseAutoFocus: handleCloseAutoFocus, 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();

package/dist/spinner.js

@@ -8,7 +8,7 @@ const SIZE_CLASS = {
     lg: "h-10 w-10 border-[3px]",
 };
 function Spinner({ size = "md", label = "Loading", className, ...props }) {
-    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn("inline-flex items-center justify-center", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: cn("shrink-0 animate-spin rounded-full border-current border-t-transparent text-primary", SIZE_CLASS[size]) }), _jsx("span", { className: "sr-only", children: label })] }));
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn("inline-flex items-center justify-center", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: cn("shrink-0 animate-spin rounded-full border-current border-t-transparent text-interactive", SIZE_CLASS[size]) }), _jsx("span", { className: "sr-only", children: label })] }));
 }
 function LoaderStack({ size, label, message, description, }) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4", children: _jsx(Spinner, { size: size, label: label }) }), message || description ? (_jsxs("div", { className: "space-y-1.5", children: [message ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message })) : null, description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] })) : null] }));

package/dist/styles.css

@@ -171,6 +171,15 @@
 
     --primary: var(--nea-green-700);
     --primary-foreground: var(--nea-neutral-0);
+    --interactive-foreground: var(--nea-green-800);
+    --highlight-background: var(--nea-green-100);
+    --highlight-foreground: var(--nea-green-900);
+    --button-primary-background: var(--nea-green-800);
+    --button-primary-hover-background: var(--nea-green-900);
+    --button-primary-foreground: var(--nea-neutral-0);
+    --count-badge-background: var(--nea-green-800);
+    --count-badge-foreground: var(--nea-neutral-0);
+    --instructional-foreground: 215 16% 40%;
 
     --secondary: var(--nea-neutral-100);
     --secondary-foreground: var(--nea-neutral-900);
@@ -296,6 +305,15 @@
 
     --primary: 148 30% 38%;
     --primary-foreground: var(--nea-dark-neutral-50);
+    --interactive-foreground: 143 44% 67%;
+    --highlight-background: 148 20% 18%;
+    --highlight-foreground: 143 44% 67%;
+    --button-primary-background: 148 30% 38%;
+    --button-primary-hover-background: 148 30% 39%;
+    --button-primary-foreground: 0 0% 100%;
+    --count-badge-background: 148 24% 24%;
+    --count-badge-foreground: 143 44% 67%;
+    --instructional-foreground: var(--nea-dark-neutral-200);
 
     --secondary: var(--nea-dark-neutral-500);
     --secondary-foreground: var(--nea-dark-neutral-100);

package/dist/table.d.ts

@@ -30,6 +30,14 @@ declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<
     treatWidthAsMinWidth?: boolean;
     containOverflow?: boolean;
 } & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableRowHeader: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    wrap?: boolean;
+    treatWidthAsMinWidth?: boolean;
+    containOverflow?: boolean;
+} & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 type TableAlign = "left" | "center" | "right";
 export type TableRowTone = "default" | "muted" | "warning";
@@ -85,13 +93,15 @@ export interface TableColumn<Row> {
     skeleton?: TableSkeletonConfig;
     headerClassName?: string;
     cellClassName?: string;
+    /** Renders this column's body cells as semantic row headers. */
+    rowHeader?: boolean;
     /** Pins the column to the left or right edge while the table scrolls horizontally. */
     sticky?: "left" | "right";
     /** Enables a resize handle for this column. Use `resizableColumns` on Table to opt every column in by default. */
     resizable?: boolean;
     /** Minimum pixel width while resizing. Defaults to `minWidth`, then 64. */
     resizeMinWidth?: number;
-    /** Maximum pixel width while resizing. Omit to allow the column to grow. */
+    /** Maximum pixel width while resizing. Defaults to 1200. */
     resizeMaxWidth?: number;
 }
 export interface TableSortingProps {
@@ -137,6 +147,8 @@ export interface TableColumnResizeHandleRenderProps<Row> {
     handle: React.ReactElement;
 }
 export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Accessible name used as a visually hidden caption when `caption` is omitted. */
+    accessibleLabel: string;
     columns: TableColumn<Row>[];
     rows: Row[];
     getRowKey: (row: Row, index: number) => string;
@@ -155,6 +167,8 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     sorting?: TableSortingProps;
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
+    /** Status announced while loading. */
+    loadingLabel?: string;
     loadingRows?: number;
     /** Optional controlled ordered list of visible column keys. Omit to render every column in config order. */
     visibleColumnKeys?: readonly string[];
@@ -180,8 +194,6 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     striped?: boolean;
     /** Adds a disclosure column and full-width expandable content for nested tables or row details. */
     rowExpansion?: TableRowExpansionProps<Row>;
-    /** When set, rows become interactive: cursor-pointer, hover highlight, and click handling. */
-    onRowClick?: (row: Row, index: number) => void;
 }
-declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, rowExpansion, onRowClick, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
-export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };
+declare function Table<Row>({ accessibleLabel, columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingLabel, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, rowExpansion, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, SortableTableHead, TableRowSkeleton, };