@neasg/design-system 0.4.10 → 0.4.12

package/README.md

@@ -1,8 +1,8 @@
 # NEA Design System
 
-Shared NEA UI primitives, theme tokens, and Storybook documentation.
+[![npm version](https://img.shields.io/npm/v/%40neasg%2Fdesign-system?style=flat-square&label=npm)](https://www.npmjs.com/package/@neasg/design-system)
 
-Package: [@neasg/design-system on npm](https://www.npmjs.com/package/@neasg/design-system)
+Shared NEA UI primitives, theme tokens, and Storybook documentation.
 
 ## Local Development
 

package/dist/avatar-profile-popover.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { type AvatarProfileProps } from "./avatar";
+import { type ButtonProps } from "./button";
+import { type PopoverProps } from "./popover";
+export interface AvatarProfilePopoverProps extends Omit<PopoverProps, "trigger" | "children" | "surface" | "contentClassName"> {
+    trigger: React.ReactElement;
+    children: React.ReactNode;
+    contentClassName?: string;
+}
+declare function AvatarProfilePopover({ trigger, children, contentClassName, align, sideOffset, ...props }: AvatarProfilePopoverProps): import("react/jsx-runtime").JSX.Element;
+export interface AvatarProfilePopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function AvatarProfilePopoverContent({ className, ...props }: AvatarProfilePopoverContentProps): import("react/jsx-runtime").JSX.Element;
+export interface AvatarProfilePopoverHeaderProps extends Omit<AvatarProfileProps, "className"> {
+    className?: string;
+    profileClassName?: string;
+}
+declare function AvatarProfilePopoverHeader({ className, profileClassName, size, avatarClassName, nameClassName, roleClassName, ...props }: AvatarProfilePopoverHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface AvatarProfilePopoverSectionProps extends React.HTMLAttributes<HTMLElement> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    contentClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+}
+declare function AvatarProfilePopoverSection({ className, label, description, children, contentClassName, labelClassName, descriptionClassName, ...props }: AvatarProfilePopoverSectionProps): import("react/jsx-runtime").JSX.Element;
+export interface AvatarProfilePopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function AvatarProfilePopoverFooter({ className, ...props }: AvatarProfilePopoverFooterProps): import("react/jsx-runtime").JSX.Element;
+export interface AvatarProfilePopoverFooterActionProps extends Omit<ButtonProps, "variant" | "size"> {
+    tone?: "default" | "destructive";
+}
+declare function AvatarProfilePopoverFooterAction({ className, tone, type, ...props }: AvatarProfilePopoverFooterActionProps): import("react/jsx-runtime").JSX.Element;
+export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, };

package/dist/avatar-profile-popover.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvatarProfile } from "./avatar";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+import { Popover } from "./popover";
+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 }));
+}
+function AvatarProfilePopoverContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-profile-popover-content", className: cn("min-w-0 bg-popover text-popover-foreground", className), ...props }));
+}
+function AvatarProfilePopoverHeader({ className, profileClassName, size = "sm", avatarClassName, nameClassName, roleClassName, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-profile-popover-header", className: cn("-mx-1 -mt-1 border-b px-3 py-2.5", className), children: _jsx(AvatarProfile, { ...props, size: size, className: profileClassName, avatarClassName: cn("h-9 w-9", avatarClassName), nameClassName: cn("text-sm leading-5", nameClassName), roleClassName: cn("text-xs leading-4", roleClassName) }) }));
+}
+function AvatarProfilePopoverSection({ className, label, description, children, contentClassName, labelClassName, descriptionClassName, ...props }) {
+    return (_jsxs("section", { "data-slot": "avatar-profile-popover-section", className: cn("space-y-1.5 px-2 py-2", className), ...props, children: [_jsx(Typography, { as: "h3", variant: "label", className: labelClassName, children: label }), _jsx("div", { className: cn("min-w-0", contentClassName), children: children }), description ? (_jsx(Typography, { as: "p", variant: "bodySm", color: "muted", className: descriptionClassName, children: description })) : null] }));
+}
+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" &&
+            "text-destructive hover:bg-destructive/10 hover:text-destructive", className), ...props }));
+}
+export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, };

package/dist/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "accent" | "muted" | "outline" | "destructive" | "secondary" | "info" | "success" | "warning" | null | undefined;
+    variant?: "accent" | "muted" | "destructive" | "outline" | "secondary" | "info" | "success" | "warning" | null | undefined;
     size?: "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

package/dist/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "compact" | "icon" | "compactIcon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/card.d.ts

@@ -11,6 +11,8 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "t
     footer?: React.ReactNode;
     active?: boolean;
     accent?: "primary";
+    /** Optional visual affordance shown in the top-right corner, such as a filter icon. */
+    icon?: React.ReactNode;
     /** Replaces title/stat/subMetric with skeleton placeholders while data is loading. */
     loading?: boolean;
 }

package/dist/card.js

@@ -22,9 +22,45 @@ const cardSplitGridColumns = {
         lg: "xl:grid-cols-[minmax(0,1fr)_22rem]",
     },
 };
-const Card = React.forwardRef(({ title, description, variant = "default", size = "default", stat, subMetric, footer, active, accent, loading = false, children, className, onClick, onKeyDown, role, tabIndex, ...props }, ref) => {
+function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === "function") {
+                ref(value);
+                return;
+            }
+            ref.current = value;
+        });
+    };
+}
+function isAnimatedIconElement(node) {
+    var _a, _b;
+    if (typeof node.type === "string" || node.type === React.Fragment) {
+        return false;
+    }
+    const component = node.type;
+    const componentName = (_b = (_a = component.displayName) !== null && _a !== void 0 ? _a : component.name) !== null && _b !== void 0 ? _b : "";
+    return componentName.endsWith("Icon");
+}
+function attachCardIconRef(node, ref) {
+    if (!React.isValidElement(node) || !isAnimatedIconElement(node)) {
+        return node;
+    }
+    const refCallback = (value) => {
+        ref.current = value;
+    };
+    return React.cloneElement(node, {
+        ref: mergeRefs(node.ref, refCallback),
+    });
+}
+const Card = React.forwardRef(({ title, description, variant = "default", size = "default", stat, subMetric, footer, active, accent, icon, loading = false, children, className, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, role, tabIndex, "aria-pressed": ariaPressed, ...props }, ref) => {
     const interactive = Boolean(onClick);
     const hasStat = stat !== undefined;
+    const iconRef = React.useRef(null);
+    const showIcon = icon != null;
+    const renderedIcon = showIcon ? attachCardIconRef(icon, iconRef) : null;
     const handleKeyDown = (event) => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (event.defaultPrevented ||
@@ -36,12 +72,45 @@ const Card = React.forwardRef(({ title, description, variant = "default", size =
         event.preventDefault();
         onClick(event);
     };
+    const startIconAnimation = () => {
+        var _a, _b;
+        (_b = (_a = iconRef.current) === null || _a === void 0 ? void 0 : _a.startAnimation) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    const stopIconAnimation = () => {
+        var _a, _b;
+        (_b = (_a = iconRef.current) === null || _a === void 0 ? void 0 : _a.stopAnimation) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    const handleMouseEnter = (event) => {
+        if (showIcon) {
+            startIconAnimation();
+        }
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+    };
+    const handleMouseLeave = (event) => {
+        if (showIcon) {
+            stopIconAnimation();
+        }
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+    };
+    const handleFocus = (event) => {
+        if (showIcon) {
+            startIconAnimation();
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    };
+    const handleBlur = (event) => {
+        if (showIcon) {
+            stopIconAnimation();
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
     const renderedTitle = React.isValidElement(title) ? (title) : (_jsx(Typography, { as: "p", variant: hasStat ? "caption" : "body", color: variant === "gradient" ? "inherit" : hasStat ? "muted" : "foreground", className: cn(hasStat && "font-medium", !hasStat && "font-semibold", variant === "gradient" && "opacity-80"), children: title }));
     const renderedDescription = description == null ? null : React.isValidElement(description) ? (description) : (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-70" : undefined, children: description }));
-    return (_jsxs("div", { ref: ref, onClick: onClick, onKeyDown: handleKeyDown, role: role !== null && role !== void 0 ? role : (interactive ? "button" : undefined), tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (interactive ? 0 : undefined), className: cn("rounded-surface border border-[hsl(var(--card-border))] text-card-foreground", variant === "default" && "bg-card", variant === "elevated" && "bg-card shadow-sm", variant === "gradient" &&
+    return (_jsxs("div", { ref: ref, onClick: onClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, role: role !== null && role !== void 0 ? role : (interactive ? "button" : undefined), tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (interactive ? 0 : undefined), "aria-pressed": ariaPressed !== null && ariaPressed !== void 0 ? ariaPressed : (interactive && active !== undefined ? Boolean(active) : undefined), className: cn("group/card rounded-surface border border-[hsl(var(--card-border))] text-card-foreground", variant === "default" && "bg-card", variant === "elevated" && "bg-card shadow-sm", variant === "gradient" &&
             "border-[hsl(var(--card-gradient-border))]/30 bg-gradient-to-br from-[hsl(var(--card-gradient-from))] to-[hsl(var(--card-gradient-to))] text-[hsl(var(--card-gradient-foreground))]", active && "border-primary bg-primary/[0.04] ring-1 ring-primary/20", accent === "primary" &&
             "border-[hsl(var(--card-border))] shadow-[inset_4px_0_0_0_hsl(var(--primary))]", interactive &&
-            "cursor-pointer transition-[border-color,background-color,box-shadow] hover:border-primary/50 hover:bg-primary/5 hover:shadow-md focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2", size === "default" && "p-4", size === "compact" && "p-3"), children: [loading ? (_jsx(Skeleton, { className: "h-3.5 w-24" })) : (renderedTitle), loading
+            "cursor-pointer transition-[border-color,background-color,box-shadow,transform] duration-150 ease-out hover:border-primary/50 hover:bg-primary/5 hover:shadow-md motion-safe:hover:-translate-y-0.5 motion-safe:active:translate-y-0 motion-safe:active:scale-[0.99] focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), ...props, children: [_jsxs("div", { className: cn("relative flex flex-col gap-2", size === "default" && "p-4", size === "compact" && "p-3", showIcon && size === "default" && "pr-12", showIcon && size === "compact" && "pr-10"), children: [showIcon ? (_jsx("span", { "aria-hidden": "true", "data-slot": "card-icon", className: cn("pointer-events-none absolute right-3 top-3 inline-flex size-7 items-center justify-center rounded-control border border-[hsl(var(--card-border))] bg-background/80 text-muted-foreground shadow-sm transition-[background-color,color,transform] duration-150 ease-out group-hover/card:scale-105 group-hover/card:bg-primary/10 group-hover/card:text-primary group-focus-visible/card:bg-primary/10 group-focus-visible/card:text-primary motion-reduce:transition-colors [&_svg]:size-3.5", size === "compact" && "right-2.5 top-2.5 size-6 [&_svg]:size-3", active && "border-primary/30 bg-primary/10 text-primary", variant === "gradient" &&
+                            "border-white/25 bg-white/10 text-current group-hover/card:bg-white/20 group-hover/card:text-current group-focus-visible/card:bg-white/20 group-focus-visible/card:text-current"), children: renderedIcon })) : null, loading ? (_jsx(Skeleton, { className: "h-3.5 w-24" })) : (renderedTitle), loading
                         ? description != null && _jsx(Skeleton, { className: "h-5 w-40" })
                         : renderedDescription, loading ? (stat !== undefined && _jsx(Skeleton, { className: "h-8 w-20" })) : stat ? (_jsx(Typography, { as: "p", variant: "title", color: variant === "gradient" ? "inherit" : undefined, children: stat })) : null, loading ? (subMetric !== undefined && _jsx(Skeleton, { className: "h-5 w-28" })) : subMetric ? (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-80" : undefined, children: subMetric })) : null] }), children ? (_jsx("div", { className: cn(size === "default" && "p-4 pt-0", size === "compact" && "p-3 pt-0"), children: children })) : null, footer ? (_jsx("div", { className: cn("flex items-center", size === "default" && "p-4 pt-0", size === "compact" && "p-3 pt-0"), children: footer })) : null] }));
 });

package/dist/command-search.d.ts

@@ -1,26 +1,62 @@
 import * as React from "react";
+import { type BadgeProps } from "./badge";
 export interface CommandSearchFilter {
     value: string;
     label: string;
+    count?: number;
     selected?: boolean;
-    onSelect?: () => void;
+    onSelect?: (details: CommandSearchFilterSelectDetails) => void;
+}
+export interface CommandSearchFilterSelectDetails {
+    value: string;
+    selected: boolean;
+    allowMultiSelect: boolean;
+}
+export type CommandSearchIcon = React.ComponentType<{
+    className?: string;
+}>;
+export type CommandSearchItemTone = "accent" | "destructive" | "info" | "muted" | "success" | "warning";
+export interface CommandSearchItemDetail {
+    label: string;
+    value: string;
+    /** Groups related metadata badges together while preserving the default Badge styling. */
+    group?: string;
+    variant?: BadgeProps["variant"];
+    bordered?: boolean;
+    showLabel?: boolean;
 }
 export interface CommandSearchItem {
     id: string;
     title: string;
     subtitle?: string;
+    description?: string;
+    details?: CommandSearchItemDetail[];
+    icon?: CommandSearchIcon;
+    tone?: CommandSearchItemTone;
+    affordance?: React.ReactNode;
+    affordanceLabel?: string;
     value?: string;
     keywords?: string[];
     disabled?: boolean;
     closeOnSelect?: boolean;
     onSelect?: () => void;
 }
+export interface CommandSearchSectionAction {
+    label: React.ReactNode;
+    value?: string;
+    affordance?: React.ReactNode;
+    affordanceLabel?: string;
+    closeOnSelect?: boolean;
+    onSelect?: () => void;
+}
 export interface CommandSearchSection {
     key: string;
     heading: string;
     items: CommandSearchItem[];
+    action?: CommandSearchSectionAction;
 }
 export type CommandSearchShowAllResultsLabel = React.ReactNode | ((query: string, hasResults: boolean) => React.ReactNode);
+export type CommandSearchShortcutPlatform = "mac" | "windows";
 export interface CommandSearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     value: string;
     onValueChange: (value: string) => void;
@@ -35,14 +71,23 @@ export interface CommandSearchProps extends Omit<React.HTMLAttributes<HTMLDivEle
     inputPlaceholder?: string;
     /** The key that opens the dialog when pressed with Cmd/Ctrl (e.g. "k", "j"). */
     shortcutKey?: string;
+    /** Controls the default shortcut label shown on the trigger. */
+    shortcutPlatform?: CommandSearchShortcutPlatform;
     /** Override the label shown on the trigger. Defaults to "⌘{shortcutKey.toUpperCase()}". */
     shortcutLabel?: string;
     allFilter?: CommandSearchFilter;
     filters?: CommandSearchFilter[];
+    subFilters?: CommandSearchFilter[];
+    /** Whether multiple filters can be selected at once. Selection state remains controlled by the passed filters. */
+    allowMultiSelect?: boolean;
     /** Shows command-list skeleton rows while results are being fetched. */
     loading?: boolean;
     /** Number of skeleton rows shown while `loading` is true. */
     loadingRows?: number;
+    /** Minimum height for the results pane to keep the dialog from resizing between states. */
+    resultsMinHeight?: React.CSSProperties["minHeight"];
+    /** Maximum height for the scrollable results pane. */
+    resultsMaxHeight?: React.CSSProperties["maxHeight"];
     /**
      * Renders a footer action for routing to a full search results page.
      * The action is shown only when the query is not empty and results are not loading.
@@ -55,5 +100,5 @@ export interface CommandSearchProps extends Omit<React.HTMLAttributes<HTMLDivEle
     dialogClassName?: string;
     resultsClassName?: string;
 }
-declare function CommandSearch({ value, onValueChange, sections, children, className, isCollapsed, open, defaultOpen, onOpenChange, triggerVariant, triggerPlaceholder, inputPlaceholder, shortcutKey, shortcutLabel, allFilter, filters, loading, loadingRows, onShowAllResults, showAllResultsLabel, triggerClassName, dialogClassName, resultsClassName, ...props }: CommandSearchProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandSearch({ value, onValueChange, sections, children, className, isCollapsed, open, defaultOpen, onOpenChange, triggerVariant, triggerPlaceholder, inputPlaceholder, shortcutKey, shortcutPlatform, shortcutLabel, allFilter, filters, subFilters, allowMultiSelect, loading, loadingRows, resultsMinHeight, resultsMaxHeight, onShowAllResults, showAllResultsLabel, triggerClassName, dialogClassName, resultsClassName, ...props }: CommandSearchProps): import("react/jsx-runtime").JSX.Element;
 export { CommandSearch };

package/dist/command-search.js

@@ -1,10 +1,14 @@
 "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 { Badge } from "./badge";
 import { Button } from "./button";
 import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command";
 import { EmptyState } from "./empty-state";
 import { SearchIcon } from "./animated-icons/search";
+import { XIcon } from "./animated-icons/x";
+import { CountBadge } from "./count-badge";
 import { DialogRoot, DialogSurface, DialogTitle } from "./dialog-primitive";
 import { FilterToggle } from "./filter-toggle";
 import { cn } from "./lib/utils";
@@ -15,15 +19,128 @@ import { SearchHighlight } from "./use-search-highlight";
 function CommandSearchEmptyIcon({ className }) {
     return _jsx(SearchIcon, { className: className, size: 20 });
 }
+const commandSearchItemToneClasses = {
+    accent: "border-status-accent-foreground/20 bg-status-accent text-status-accent-foreground",
+    destructive: "border-status-destructive-foreground/20 bg-status-destructive text-status-destructive-foreground",
+    info: "border-status-info-foreground/20 bg-status-info text-status-info-foreground",
+    muted: "border-border bg-muted text-muted-foreground",
+    success: "border-status-success-foreground/20 bg-status-success text-status-success-foreground",
+    warning: "border-status-warning-foreground/20 bg-status-warning text-status-warning-foreground",
+};
 function getCommandSearchItemValue(item) {
-    var _a, _b;
-    const fallbackValue = [item.title, item.subtitle, ...((_a = item.keywords) !== null && _a !== void 0 ? _a : [])]
+    var _a, _b, _c, _d;
+    const detailValues = (_b = (_a = item.details) === null || _a === void 0 ? void 0 : _a.flatMap((detail) => [detail.label, detail.value])) !== null && _b !== void 0 ? _b : [];
+    const fallbackValue = [
+        item.title,
+        item.subtitle,
+        item.description,
+        ...detailValues,
+        ...((_c = item.keywords) !== null && _c !== void 0 ? _c : []),
+    ]
         .filter(Boolean)
         .join(" ");
-    return (_b = item.value) !== null && _b !== void 0 ? _b : fallbackValue;
+    return (_d = item.value) !== null && _d !== void 0 ? _d : fallbackValue;
+}
+function getCommandSearchSectionActionValue(section) {
+    if (!section.action) {
+        return section.heading;
+    }
+    if (section.action.value) {
+        return section.action.value;
+    }
+    const label = typeof section.action.label === "string"
+        ? section.action.label
+        : "Show all results";
+    return `${section.heading} ${label}`;
+}
+function handleCommandSearchItemKeyDown(event, onSelect) {
+    if (event.key !== "Enter" && event.key !== " ") {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    onSelect();
+}
+function isCommandSearchTitleDetail(detail) {
+    return detail.showLabel === false && Boolean(detail.variant);
+}
+function getNormalizedCommandSearchDetailLabel(detail) {
+    return detail.label.toLowerCase().replace(/\.$/, "");
+}
+function isCommandSearchCompanyDetail(detail) {
+    const label = getNormalizedCommandSearchDetailLabel(detail);
+    return (label === "company name" ||
+        label === "uen" ||
+        label === "postal code");
+}
+const commandSearchDetailGroupPriority = {
+    identity: 0,
+    summary: 1,
+};
+function getCommandSearchDetailGroup(detail) {
+    if (detail.group)
+        return detail.group;
+    const label = getNormalizedCommandSearchDetailLabel(detail);
+    if (label === "company name" ||
+        label === "case number" ||
+        label === "licence no" ||
+        label === "inspection no" ||
+        label === "uen" ||
+        label === "postal code") {
+        return "identity";
+    }
+    if (label === "active licences" || label === "in progress cases") {
+        return "summary";
+    }
+    return "metadata";
+}
+function getGroupedCommandSearchDetails(details) {
+    const groups = new Map();
+    details.forEach((detail, index) => {
+        const key = getCommandSearchDetailGroup(detail);
+        const group = groups.get(key);
+        if (group) {
+            group.details.push(detail);
+            return;
+        }
+        groups.set(key, { key, details: [detail], order: index });
+    });
+    return Array.from(groups.values()).sort((a, b) => {
+        var _a, _b;
+        const priorityA = (_a = commandSearchDetailGroupPriority[a.key]) !== null && _a !== void 0 ? _a : 2;
+        const priorityB = (_b = commandSearchDetailGroupPriority[b.key]) !== null && _b !== void 0 ? _b : 2;
+        return priorityA - priorityB || a.order - b.order;
+    });
+}
+function CommandSearchDetailBadge({ detail, query, className, }) {
+    var _a;
+    return (_jsxs(Badge, { variant: (_a = detail.variant) !== null && _a !== void 0 ? _a : "muted", bordered: detail.bordered, "data-slot": "command-search-detail", className: cn("max-w-full justify-start text-left", className), title: detail.showLabel === false
+            ? detail.value
+            : `${detail.label}: ${detail.value}`, children: [detail.showLabel === false ? null : (_jsx("span", { className: "shrink-0", children: detail.label })), _jsx("span", { className: cn("min-w-0 truncate", !detail.variant && "text-foreground"), children: _jsx(SearchHighlight, { text: detail.value, query: query }) })] }));
+}
+function CommandSearchResultItem({ item, query, }) {
+    var _a, _b, _c, _d;
+    const Icon = item.icon;
+    const tone = (_a = item.tone) !== null && _a !== void 0 ? _a : "muted";
+    const details = (_b = item.details) !== null && _b !== void 0 ? _b : [];
+    const titleDetails = details.filter(isCommandSearchTitleDetail);
+    const metadataDetails = details.filter((detail) => !isCommandSearchTitleDetail(detail));
+    const companyDetails = metadataDetails.filter(isCommandSearchCompanyDetail);
+    const recordDetails = metadataDetails.filter((detail) => !isCommandSearchCompanyDetail(detail));
+    const recordDetailGroups = getGroupedCommandSearchDetails(recordDetails);
+    const hasDetails = metadataDetails.length > 0;
+    const hasRecordDetails = recordDetails.length > 0;
+    const hasCompanyDetails = companyDetails.length > 0;
+    return (_jsxs(_Fragment, { children: [Icon ? (_jsx("span", { className: cn("mt-[calc(var(--space-1)/2)] flex size-[var(--space-8)] shrink-0 items-center justify-center rounded-control border", commandSearchItemToneClasses[tone]), "aria-hidden": "true", children: _jsx(Icon, { className: "h-3.5 w-3.5" }) })) : null, _jsxs("span", { className: "min-w-0 flex-1 space-y-[var(--space-2)]", children: [_jsxs("span", { "data-slot": "command-search-title-line", className: "flex min-w-0 items-center gap-[var(--space-2)]", children: [_jsx(Typography, { as: "span", variant: "label", className: "min-w-0 truncate", children: _jsx(SearchHighlight, { text: item.title, query: query }) }), titleDetails.map((detail) => (_jsx(CommandSearchDetailBadge, { detail: detail, query: query, className: "shrink-0" }, `${detail.label}-${detail.value}`)))] }), !hasDetails && item.subtitle ? (_jsx(Typography, { as: "span", variant: "caption", className: "block truncate text-muted-foreground", children: _jsx(SearchHighlight, { text: item.subtitle, query: query }) })) : null, !hasDetails && item.description ? (_jsx(Typography, { as: "span", variant: "caption", className: "block line-clamp-2 text-muted-foreground", children: _jsx(SearchHighlight, { text: item.description, query: query }) })) : null, hasDetails ? (_jsxs("span", { "data-slot": "command-search-details-lines", className: "flex min-w-0 flex-col gap-[calc(var(--space-1)+0.125rem)] overflow-hidden", children: [hasRecordDetails ? (_jsx("span", { "data-slot": "command-search-record-details-line", className: "flex min-w-0 items-center gap-[var(--space-1)] overflow-hidden", children: recordDetailGroups.map((group) => (_jsx("span", { "data-slot": "command-search-detail-group", "data-group": group.key, className: "flex min-w-0 shrink items-center gap-[var(--space-1)]", children: group.details.map((detail) => (_jsx(CommandSearchDetailBadge, { detail: detail, query: query, className: "min-w-0 shrink" }, `${detail.label}-${detail.value}`))) }, group.key))) })) : null, hasCompanyDetails ? (_jsx("span", { "data-slot": "command-search-company-details-line", "data-group": "company", className: "flex min-w-0 items-center gap-[var(--space-1)] overflow-hidden", children: companyDetails.map((detail) => (_jsx(CommandSearchDetailBadge, { detail: detail, query: query, className: "min-w-0 shrink" }, `${detail.label}-${detail.value}`))) })) : null] })) : null] }), _jsxs("span", { "data-slot": "command-search-result-affordance", className: "ml-auto flex size-[var(--space-8)] shrink-0 self-center items-center justify-center rounded-control text-muted-foreground opacity-0 transition-opacity group-data-[selected=true]:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100", children: [(_c = item.affordance) !== null && _c !== void 0 ? _c : (_jsx(ArrowUpRight, { className: "size-[var(--space-4)]", "aria-hidden": "true" })), _jsx("span", { className: "sr-only", children: (_d = item.affordanceLabel) !== null && _d !== void 0 ? _d : "Open result" })] })] }));
 }
 function CommandSearchSkeleton({ rows = 4 }) {
-    return (_jsx("div", { className: "space-y-[var(--space-1)] p-[var(--space-1)]", children: Array.from({ length: rows }).map((_, index) => (_jsxs("div", { className: "space-y-[var(--space-2)] rounded-sm px-[var(--space-2)] py-[var(--space-2)]", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-3 w-56 max-w-full" })] }, index))) }));
+    return (_jsx("div", { "data-slot": "command-search-skeleton", className: "space-y-[var(--space-1)] p-[var(--space-1)]", children: Array.from({ length: rows }).map((_, index) => (_jsxs("div", { "data-slot": "command-search-skeleton-row", className: "flex min-h-[var(--space-8)] items-start gap-[var(--space-2)] rounded-sm px-[var(--space-2)] py-[var(--space-3)]", children: [_jsx(Skeleton, { "data-slot": "command-search-skeleton-icon", className: "mt-[calc(var(--space-1)/2)] size-[var(--space-8)] shrink-0 rounded-control" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-[var(--space-2)]", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-[var(--space-2)]", children: [_jsx(Skeleton, { className: "h-[var(--space-4)] w-36 max-w-[55%]" }), _jsx(Skeleton, { className: "h-[var(--space-5)] w-16 shrink-0 rounded-md" })] }), _jsx("div", { className: "flex min-w-0 items-center gap-[var(--space-1)] overflow-hidden", children: _jsx(Skeleton, { className: "h-[var(--space-5)] w-28 shrink rounded-md" }) }), _jsxs("div", { className: "flex min-w-0 items-center gap-[var(--space-1)] overflow-hidden", children: [_jsx(Skeleton, { className: "h-[var(--space-5)] w-40 max-w-[45%] shrink rounded-md" }), _jsx(Skeleton, { className: "h-[var(--space-5)] w-24 shrink rounded-md" }), _jsx(Skeleton, { className: "h-[var(--space-5)] w-24 shrink rounded-md" })] })] }), _jsx(Skeleton, { "data-slot": "command-search-skeleton-affordance", className: "ml-auto size-[var(--space-8)] shrink-0 self-center rounded-control opacity-60" })] }, index))) }));
+}
+function CommandSearchEmptyState({ query, resultsMinHeight, }) {
+    const normalizedQuery = query.trim();
+    return (_jsx(EmptyState, { "data-slot": "command-search-empty-state", icon: CommandSearchEmptyIcon, style: { minHeight: resultsMinHeight }, message: normalizedQuery ? "No results found" : "Start typing to search", description: normalizedQuery
+            ? `No results found for "${query}".`
+            : "Results will appear here as you type." }));
 }
 function useControllableOpen({ open, defaultOpen, onOpenChange, }) {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
@@ -37,7 +154,7 @@ function useControllableOpen({ open, defaultOpen, onOpenChange, }) {
     }, [isControlled, onOpenChange]);
     return [currentOpen, setOpen];
 }
-function CommandSearch({ value, onValueChange, sections, children, className, isCollapsed = false, open, defaultOpen, onOpenChange, triggerVariant = "default", triggerPlaceholder = "Search...", inputPlaceholder = "Search...", shortcutKey = "k", shortcutLabel, allFilter, filters = [], loading = false, loadingRows = 4, onShowAllResults, showAllResultsLabel, triggerClassName, dialogClassName, resultsClassName, ...props }) {
+function CommandSearch({ value, onValueChange, sections, children, className, isCollapsed = false, open, defaultOpen, onOpenChange, triggerVariant = "default", triggerPlaceholder = "Search...", inputPlaceholder = "Search...", shortcutKey = "k", shortcutPlatform = "mac", shortcutLabel, allFilter, filters = [], subFilters = [], allowMultiSelect = true, loading = false, loadingRows = 4, resultsMinHeight = 384, resultsMaxHeight = 560, onShowAllResults, showAllResultsLabel, triggerClassName, dialogClassName, resultsClassName, ...props }) {
     const [isOpen, setIsOpen] = useControllableOpen({
         open,
         defaultOpen,
@@ -53,7 +170,10 @@ function CommandSearch({ value, onValueChange, sections, children, className, is
         : showAllResultsLabel !== null && showAllResultsLabel !== void 0 ? showAllResultsLabel : (hasResults
             ? `Show all results for "${normalizedValue}"`
             : `Search all records for "${normalizedValue}"`);
-    const resolvedLabel = shortcutLabel !== null && shortcutLabel !== void 0 ? shortcutLabel : `⌘${shortcutKey.toUpperCase()}`;
+    const shortcutKeyLabel = shortcutKey.toUpperCase();
+    const resolvedLabel = shortcutLabel !== null && shortcutLabel !== void 0 ? shortcutLabel : (shortcutPlatform === "windows"
+        ? `Ctrl ${shortcutKeyLabel}`
+        : `⌘${shortcutKeyLabel}`);
     React.useEffect(() => {
         const handleKeyDown = (event) => {
             if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === shortcutKey.toLowerCase()) {
@@ -72,29 +192,58 @@ function CommandSearch({ value, onValueChange, sections, children, className, is
     const preserveInputFocus = React.useCallback((event) => {
         event.preventDefault();
     }, []);
-    const selectFilter = React.useCallback((onSelect) => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    const selectFilter = React.useCallback((filter) => {
+        var _a;
+        (_a = filter.onSelect) === null || _a === void 0 ? void 0 : _a.call(filter, {
+            value: filter.value,
+            selected: Boolean(filter.selected),
+            allowMultiSelect,
+        });
         window.setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
-    }, []);
+    }, [allowMultiSelect]);
+    const clearSearch = React.useCallback(() => {
+        onValueChange("");
+        window.setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [onValueChange]);
     return (_jsxs("div", { className: className, ...props, children: [_jsxs(Button, { type: "button", onClick: () => setIsOpen(true), variant: "ghost", size: isCollapsed ? "icon" : "default", className: cn(triggerVariant === "sidebar" && isCollapsed
-                    ? "h-control min-h-control w-control min-w-control max-w-control shrink-0 rounded-control border-none bg-transparent p-0 !font-normal text-muted-foreground hover:bg-card hover:text-foreground focus-visible:bg-card focus-visible:ring-ring/30"
+                    ? "mx-auto flex h-control min-h-control w-control min-w-control max-w-control shrink-0 gap-0 rounded-control border-none bg-transparent p-[var(--space-0)] !font-normal text-muted-foreground hover:bg-card hover:text-foreground focus-visible:bg-card focus-visible:ring-ring/30"
                     : triggerVariant === "sidebar"
-                        ? "h-control w-full min-w-[14rem] justify-start gap-2 rounded-control border border-[hsl(var(--layout-sidebar-border))] bg-card px-2.5 !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"
+                        ? "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-0 !font-normal text-muted-foreground hover:bg-card hover:text-foreground"
-                            : "h-control w-full min-w-[14rem] justify-start gap-2 rounded-control border border-border bg-card px-2.5 !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-[20px] items-center gap-1 rounded border border-border bg-muted px-1.5 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-2rem)] max-w-[52rem] gap-0 overflow-hidden p-0 sm:w-[min(64vw,52rem)]", 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, className: "text-sm" }), allFilter || filters.length ? (_jsxs("div", { className: "flex flex-wrap items-center gap-1 border-b px-2.5 py-1.5", children: [allFilter ? (_jsx(FilterToggle, { selected: allFilter.selected, onMouseDown: preserveInputFocus, onClick: () => selectFilter(allFilter.onSelect), children: allFilter.label })) : null, filters.map((filter) => (_jsx(FilterToggle, { selected: filter.selected, onMouseDown: preserveInputFocus, onClick: () => selectFilter(filter.onSelect), children: filter.label }, filter.value)))] })) : null, _jsx(CommandList, { "aria-busy": loading || undefined, className: cn("max-h-[400px] p-1", resultsClassName), children: loading ? (_jsx(CommandSearchSkeleton, { rows: loadingRows })) : children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(CommandSeparator, { alwaysRender: true }) : null, _jsx(CommandGroup, { heading: section.heading, children: section.items.map((item) => (_jsx(CommandItem, { value: getCommandSearchItemValue(item), disabled: item.disabled, onSelect: () => {
-                                                        var _a;
-                                                        (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
-                                                        if (item.closeOnSelect !== false) {
-                                                            setIsOpen(false);
-                                                        }
-                                                    }, children: _jsxs("div", { className: "min-w-0", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: _jsx(SearchHighlight, { text: item.title, query: value }) }), item.subtitle ? (_jsx(Typography, { as: "p", variant: "caption", className: "truncate", children: _jsx(SearchHighlight, { text: item.subtitle, query: value }) })) : null] }) }, item.id))) })] }, section.key)))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
-                                            ? `No results found for "${value}".`
-                                            : "Results will appear here as you type." }))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
-                                            ? `No results found for "${value}".`
-                                            : "Results will appear here as you type." })) }), shouldShowAllResults ? (_jsx(PopoverMenuFooter, { inset: "flush", children: _jsx(PopoverMenuFooterAction, { onClick: () => {
+                            ? "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: {
+                                        minHeight: resultsMinHeight,
+                                        maxHeight: resultsMaxHeight,
+                                    }, children: loading ? (_jsx(CommandSearchSkeleton, { rows: loadingRows })) : children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => {
+                                        var _a, _b;
+                                        return (_jsxs(React.Fragment, { children: [index > 0 ? (_jsx(CommandSeparator, { alwaysRender: true, className: "-mx-[var(--space-1)]" })) : null, _jsxs(CommandGroup, { heading: section.heading, children: [section.items.map((item) => (_jsx(CommandItem, { value: getCommandSearchItemValue(item), disabled: item.disabled, tabIndex: item.disabled ? -1 : 0, className: "group min-h-[var(--space-8)] w-full items-start gap-[var(--space-2)] px-[var(--space-2)] py-[var(--space-3)] text-left font-normal whitespace-normal focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", onSelect: () => {
+                                                                var _a;
+                                                                (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+                                                                if (item.closeOnSelect !== false) {
+                                                                    setIsOpen(false);
+                                                                }
+                                                            }, onKeyDown: (event) => handleCommandSearchItemKeyDown(event, () => {
+                                                                var _a;
+                                                                (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+                                                                if (item.closeOnSelect !== false) {
+                                                                    setIsOpen(false);
+                                                                }
+                                                            }), children: _jsx(CommandSearchResultItem, { item: item, query: value }) }, item.id))), section.action ? (_jsx(CommandItem, { value: getCommandSearchSectionActionValue(section), tabIndex: 0, className: "group min-h-[var(--space-8)] w-full items-center px-[var(--space-0)] py-[var(--space-0)] text-left font-normal whitespace-normal text-muted-foreground focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[selected=true]:bg-transparent data-[selected=true]:text-muted-foreground", onSelect: () => {
+                                                                var _a, _b, _c;
+                                                                (_b = (_a = section.action) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                                                if (((_c = section.action) === null || _c === void 0 ? void 0 : _c.closeOnSelect) !== false) {
+                                                                    setIsOpen(false);
+                                                                }
+                                                            }, onKeyDown: (event) => handleCommandSearchItemKeyDown(event, () => {
+                                                                var _a, _b, _c;
+                                                                (_b = (_a = section.action) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                                                if (((_c = section.action) === null || _c === void 0 ? void 0 : _c.closeOnSelect) !== false) {
+                                                                    setIsOpen(false);
+                                                                }
+                                                            }), children: _jsx(Button, { asChild: true, variant: "link", size: "compact", className: "w-full justify-start text-left font-medium group-data-[selected=true]:underline", children: _jsxs("span", { children: [_jsx("span", { className: "min-w-0 truncate", children: section.action.label }), _jsxs("span", { className: "inline-flex shrink-0 items-center justify-center text-primary", children: [(_a = section.action.affordance) !== null && _a !== void 0 ? _a : (_jsx(ArrowRight, { className: "size-[var(--space-4)]", "aria-hidden": "true" })), _jsx("span", { className: "sr-only", children: (_b = section.action.affordanceLabel) !== null && _b !== void 0 ? _b : "Show all results in group" })] })] }) }) }, `${section.key}-action`)) : null] })] }, section.key));
+                                    })) : (_jsx(CommandSearchEmptyState, { query: value, resultsMinHeight: resultsMinHeight }))) : (_jsx(CommandSearchEmptyState, { query: value, resultsMinHeight: resultsMinHeight })) }), shouldShowAllResults ? (_jsx(PopoverMenuFooter, { inset: "flush", children: _jsxs(PopoverMenuFooterAction, { className: "group", onClick: () => {
                                             onShowAllResults === null || onShowAllResults === void 0 ? void 0 : onShowAllResults(normalizedValue);
                                             setIsOpen(false);
-                                        }, children: _jsx("span", { className: "truncate", children: resolvedShowAllResultsLabel }) }) })) : null] })] }) })] }));
+                                        }, children: [_jsx("span", { className: "min-w-0 truncate", children: resolvedShowAllResultsLabel }), _jsx(ArrowRight, { className: "size-[var(--space-4)] shrink-0 transition-transform duration-150 group-hover:translate-x-[var(--space-1)] group-focus-visible:translate-x-[var(--space-1)]", "aria-hidden": "true" })] }) })) : null] })] }) })] }));
 }
 export { CommandSearch };

package/dist/command.d.ts

@@ -21,6 +21,8 @@ interface CommandInputProps extends React.ComponentPropsWithoutRef<typeof Comman
     wrapperClassName?: string;
     iconClassName?: string;
     iconSize?: number;
+    endAdornment?: React.ReactNode;
+    endAdornmentClassName?: string;
 }
 declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React.ForwardRefExoticComponent<Omit<{

package/dist/command.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { inputControlClassName } from "./input-control";
@@ -7,7 +7,7 @@ import { cn } from "./lib/utils";
 import { SearchInputShell } from "./search-input-shell";
 const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn("flex h-full w-full flex-col overflow-hidden rounded-overlay bg-popover text-popover-foreground", className), ...props })));
 Command.displayName = CommandPrimitive.displayName;
-const CommandInput = React.forwardRef(({ className, wrapperClassName, iconClassName, iconSize = 16, ...props }, ref) => (_jsx("div", { "cmdk-input-wrapper": "", className: cn("border-b p-4", wrapperClassName), children: _jsx(SearchInputShell, { iconClassName: iconClassName, iconSize: iconSize, children: _jsx(CommandPrimitive.Input, { ref: ref, className: cn(inputControlClassName, "bg-background pl-9 pr-3", className), ...props }) }) })));
+const CommandInput = React.forwardRef(({ className, wrapperClassName, iconClassName, iconSize = 16, endAdornment, endAdornmentClassName, ...props }, ref) => (_jsx("div", { "cmdk-input-wrapper": "", className: cn("border-b p-4", wrapperClassName), children: _jsxs(SearchInputShell, { iconClassName: iconClassName, iconSize: iconSize, children: [_jsx(CommandPrimitive.Input, { ref: ref, className: cn(inputControlClassName, "bg-background pl-9 pr-3", className), ...props }), endAdornment ? (_jsx("div", { "data-slot": "command-input-end-adornment", className: cn("absolute right-[var(--space-3)] top-1/2 flex -translate-y-1/2 items-center gap-[var(--space-1)]", endAdornmentClassName), children: endAdornment })) : null] }) })));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className), ...props })));
 CommandList.displayName = CommandPrimitive.List.displayName;