@neasg/design-system 0.4.11 → 0.4.13

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;

package/dist/dialog-primitive.js

@@ -9,7 +9,7 @@ const DialogRoot = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, "data-slot": "dialog-overlay", className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogSurface = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-3 border bg-background p-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-overlay", className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-control text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
 DialogSurface.displayName = DialogPrimitive.Content.displayName;

package/dist/draggable-tabs.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
 import { type BadgeProps } from "./badge";
+import { type GuidanceTipProps } from "./guidance-tip";
 import { type TooltipProps } from "./tooltip";
 export interface DraggableTabBadge {
     label: React.ReactNode;
     variant?: BadgeProps["variant"];
     bordered?: BadgeProps["bordered"];
 }
+export type DraggableTabGuidance = Omit<GuidanceTipProps, "trigger">;
 export interface DraggableTabItem {
     id: string;
     label: React.ReactNode;
@@ -17,6 +19,7 @@ export interface DraggableTabItem {
     tooltip?: React.ReactNode;
     tooltipContentClassName?: string;
     tooltipSide?: TooltipProps["side"];
+    guidance?: DraggableTabGuidance;
     onSelect?: () => void;
     onClose?: () => void;
     className?: string;

package/dist/draggable-tabs.js

@@ -5,6 +5,7 @@ import { SortableContext, horizontalListSortingStrategy, sortableKeyboardCoordin
 import { CSS } from "@dnd-kit/utilities";
 import { XIcon } from "./animated-icons/x";
 import { Badge } from "./badge";
+import { GuidanceTip } from "./guidance-tip";
 import { cn } from "./lib/utils";
 import { Tooltip } from "./tooltip";
 function TabButton({ item, dragHandleProps, }) {
@@ -26,6 +27,9 @@ function TabButton({ item, dragHandleProps, }) {
                     event.stopPropagation();
                     (_a = item.onClose) === null || _a === void 0 ? void 0 : _a.call(item);
                 }, className: cn("cursor-pointer rounded p-1 text-muted-foreground hover:text-foreground", item.closeButtonClassName), "aria-label": "Close tab", children: _jsx(XIcon, { size: 12 }) })) : null] }));
+    if (item.guidance) {
+        return _jsx(GuidanceTip, { ...item.guidance, trigger: content });
+    }
     if (!item.tooltip) {
         return content;
     }

package/dist/editable-table.js

@@ -33,7 +33,7 @@ function setNestedValue(obj, path, value) {
     current[parts[parts.length - 1]] = value;
     return result;
 }
-function EditableTable({ value, onChange, columns, isEditing = false, className, emptyPlaceholder = "Enter text...", checkable = false, checkableHeader, activeField = "active", addRowLabel = "Add Row", renderRowActions, }) {
+function EditableTable({ value, onChange, columns, isEditing = false, className, emptyPlaceholder = "Enter text", checkable = false, checkableHeader, activeField = "active", addRowLabel = "Add Row", renderRowActions, }) {
     const [editingCell, setEditingCell] = React.useState(null);
     const [editValue, setEditValue] = React.useState("");
     const inputRef = React.useRef(null);
@@ -130,7 +130,7 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
                                         const isEmptyCell = isEmptyCellValue(cellValue);
                                         const isEditingCell = (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowIndex) === rowIndex &&
                                             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colPath) === column.path;
-                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), width: column.width, minWidth: getColumnMinWidth(column), maxWidth: getColumnMaxWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx("div", { className: "flex min-h-8 items-center", children: _jsx(InputControl, { ref: inputRef, value: editValue, placeholder: emptyPlaceholder, onChange: (event) => setEditValue(event.target.value), onClick: (event) => event.stopPropagation(), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-8 w-full px-2 py-1 text-sm" }) })) : (_jsx("span", { className: cn("flex min-h-8 items-center whitespace-normal break-words", isEmptyCell
+                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), width: column.width, minWidth: getColumnMinWidth(column), maxWidth: getColumnMaxWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsxs("div", { className: "relative min-h-8 min-w-0", children: [_jsx("span", { "aria-hidden": "true", className: "block min-h-8 whitespace-normal break-words opacity-0", style: { maxWidth: getColumnMaxWidth(column) }, children: editValue || emptyPlaceholder }), _jsx(InputControl, { ref: inputRef, value: editValue, placeholder: emptyPlaceholder, onChange: (event) => setEditValue(event.target.value), onClick: (event) => event.stopPropagation(), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "absolute inset-x-0 top-0 h-8 w-full px-2 py-1 text-sm" })] })) : (_jsx("span", { className: cn("flex min-h-8 items-center whitespace-normal break-words", isEmptyCell
                                                     ? "text-muted-foreground"
                                                     : undefined), style: { maxWidth: getColumnMaxWidth(column) }, children: isEmptyCell && isEditing
                                                     ? emptyPlaceholder

package/dist/guidance-tip.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+import { type PopoverProps } from "./popover";
+export interface GuidanceTipAction {
+    label?: React.ReactNode;
+    onClick?: ButtonProps["onClick"];
+    disabled?: boolean;
+    loading?: boolean;
+    loadingText?: React.ReactNode;
+    ariaLabel?: string;
+}
+export interface GuidanceTipProps extends Omit<PopoverProps, "children" | "contentClassName" | "surface" | "title"> {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    step?: number;
+    totalSteps?: number;
+    stepLabel?: React.ReactNode;
+    previousAction?: GuidanceTipAction;
+    nextAction?: GuidanceTipAction;
+    dismissAction?: GuidanceTipAction;
+    highlightTrigger?: boolean;
+    focusOverlay?: boolean;
+    contentClassName?: string;
+}
+declare function GuidanceTip({ title, description, step, totalSteps, stepLabel, previousAction, nextAction, dismissAction, highlightTrigger, focusOverlay, contentClassName, trigger, open, defaultOpen, onOpenChange, align, side, sideOffset, onKeyDown, ...popoverProps }: GuidanceTipProps): import("react/jsx-runtime").JSX.Element;
+export { GuidanceTip };

package/dist/guidance-tip.js

@@ -0,0 +1,162 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+import { Popover } from "./popover";
+const triggerHighlightClassName = "rounded-control ring-[calc(var(--space-1)/2)] ring-[hsl(var(--ring))] ring-offset-background [--tw-ring-offset-width:var(--space-1)] shadow-[0_0_var(--space-10)_hsl(var(--ring)/0.55)]";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function setRef(ref, value) {
+    if (!ref) {
+        return;
+    }
+    if (typeof ref === "function") {
+        ref(value);
+        return;
+    }
+    ref.current = value;
+}
+function composeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => setRef(ref, value));
+    };
+}
+function getStepLabel({ stepLabel, step, totalSteps, }) {
+    if (stepLabel !== undefined) {
+        return stepLabel;
+    }
+    if (typeof step === "number" && typeof totalSteps === "number") {
+        return `Step ${step} of ${totalSteps}`;
+    }
+    if (typeof step === "number") {
+        return `Step ${step}`;
+    }
+    return null;
+}
+function isDoneActionLabel(label) {
+    return typeof label === "string" && label.trim().toLowerCase() === "done";
+}
+function isEditableKeyboardTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    return (target.isContentEditable ||
+        target.matches("input, select, textarea, [role='textbox']"));
+}
+function canClickActionButton(button) {
+    return !(!button ||
+        button.disabled ||
+        button.getAttribute("aria-disabled") === "true");
+}
+function getGuidanceTrigger({ trigger, highlightTrigger, triggerRef, }) {
+    if (!highlightTrigger || !React.isValidElement(trigger)) {
+        return trigger;
+    }
+    const triggerElement = trigger;
+    return React.cloneElement(triggerElement, {
+        "data-guidance-highlight": "true",
+        ref: composeRefs(triggerElement.ref, triggerRef),
+    });
+}
+function GuidanceTriggerHighlight({ enabled, focusOverlay, targetRef, }) {
+    var _a, _b;
+    const [rect, setRect] = React.useState(null);
+    const updateRect = React.useCallback(() => {
+        const element = targetRef.current;
+        setRect(element && enabled ? element.getBoundingClientRect() : null);
+    }, [enabled, targetRef]);
+    useIsomorphicLayoutEffect(() => {
+        var _a;
+        if (!enabled) {
+            setRect(null);
+            return undefined;
+        }
+        const element = targetRef.current;
+        if (!element) {
+            return undefined;
+        }
+        const ownerWindow = (_a = element.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+        let frame = 0;
+        const requestUpdate = () => {
+            ownerWindow.cancelAnimationFrame(frame);
+            frame = ownerWindow.requestAnimationFrame(updateRect);
+        };
+        const resizeObserver = typeof ResizeObserver === "undefined"
+            ? null
+            : new ResizeObserver(requestUpdate);
+        updateRect();
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(element);
+        ownerWindow.addEventListener("resize", requestUpdate);
+        ownerWindow.addEventListener("scroll", requestUpdate, true);
+        return () => {
+            ownerWindow.cancelAnimationFrame(frame);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            ownerWindow.removeEventListener("resize", requestUpdate);
+            ownerWindow.removeEventListener("scroll", requestUpdate, true);
+        };
+    }, [enabled, targetRef, updateRect]);
+    if (!enabled || !rect || typeof document === "undefined") {
+        return null;
+    }
+    const ownerDocument = (_b = (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
+    return createPortal(_jsx("div", { "aria-hidden": "true", "data-guidance-highlight-overlay": "true", className: cn("pointer-events-none fixed z-40", triggerHighlightClassName), style: {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+            boxShadow: focusOverlay
+                ? "0 0 0 9999px rgb(0 0 0 / 0.8), 0 0 var(--space-10) hsl(var(--ring) / 0.55)"
+                : "0 0 var(--space-10) hsl(var(--ring) / 0.55)",
+        } }), ownerDocument.body);
+}
+function GuidanceTip({ title, description, step, totalSteps, stepLabel, previousAction, nextAction, dismissAction, highlightTrigger = true, focusOverlay = false, contentClassName, trigger, open, defaultOpen, onOpenChange, align = "start", side = "bottom", sideOffset = 0, onKeyDown, ...popoverProps }) {
+    var _a, _b, _c;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
+    const previousButtonRef = React.useRef(null);
+    const nextButtonRef = React.useRef(null);
+    const triggerHighlightRef = React.useRef(null);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internalOpen;
+    const resolvedStepLabel = getStepLabel({ stepLabel, step, totalSteps });
+    const showActions = Boolean(previousAction || nextAction || dismissAction);
+    const isFinalStep = typeof step === "number" &&
+        typeof totalSteps === "number" &&
+        step >= totalSteps;
+    const showNextActionIcon = !isFinalStep && !isDoneActionLabel(nextAction === null || nextAction === void 0 ? void 0 : nextAction.label);
+    const resolvedTrigger = getGuidanceTrigger({
+        trigger,
+        highlightTrigger: highlightTrigger && isOpen,
+        triggerRef: triggerHighlightRef,
+    });
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        if (!isControlled) {
+            setInternalOpen(nextOpen);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }, [isControlled, onOpenChange]);
+    const handleKeyDown = React.useCallback((event) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            isEditableKeyboardTarget(event.target)) {
+            return;
+        }
+        if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") {
+            return;
+        }
+        const actionButton = event.key === "ArrowRight"
+            ? nextButtonRef.current
+            : previousButtonRef.current;
+        event.preventDefault();
+        event.stopPropagation();
+        if (canClickActionButton(actionButton)) {
+            actionButton.click();
+        }
+    }, [onKeyDown]);
+    return (_jsxs(_Fragment, { children: [_jsx(Popover, { open: isOpen, onOpenChange: handleOpenChange, trigger: resolvedTrigger, align: align, side: side, sideOffset: sideOffset, onKeyDown: handleKeyDown, contentClassName: cn("w-[calc(var(--space-12)*6)] max-w-[calc(100vw-var(--space-8))] p-[var(--space-3)]", "data-[side=bottom]:mt-[var(--space-3)] data-[side=left]:mr-[var(--space-3)] data-[side=right]:ml-[var(--space-3)] data-[side=top]:mb-[var(--space-3)]", contentClassName), ...popoverProps, children: _jsxs("div", { className: "space-y-[var(--space-2)]", children: [_jsxs("div", { className: "space-y-[var(--space-1)]", children: [resolvedStepLabel ? (_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: resolvedStepLabel })) : null, _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), showActions ? (_jsxs("div", { className: cn("flex items-center gap-[var(--space-2)] pt-[var(--space-1)]", previousAction || dismissAction ? "justify-between" : "justify-end"), children: [previousAction || dismissAction ? (_jsxs("div", { className: "flex items-center gap-[var(--space-2)]", children: [dismissAction ? (_jsx(Button, { type: "button", variant: "ghost", size: "compact", onClick: dismissAction.onClick, disabled: dismissAction.disabled, loading: dismissAction.loading, loadingText: dismissAction.loadingText, "aria-label": dismissAction.ariaLabel, children: (_a = dismissAction.label) !== null && _a !== void 0 ? _a : "Skip" })) : null, previousAction ? (_jsxs(Button, { ref: previousButtonRef, type: "button", variant: "secondary", size: "compact", onClick: previousAction.onClick, disabled: previousAction.disabled, loading: previousAction.loading, loadingText: previousAction.loadingText, "aria-label": previousAction.ariaLabel, children: [_jsx(ChevronLeft, { className: "h-[var(--space-4)] w-[var(--space-4)]" }), (_b = previousAction.label) !== null && _b !== void 0 ? _b : "Previous"] })) : null] })) : null, nextAction ? (_jsxs(Button, { ref: nextButtonRef, type: "button", size: "compact", onClick: nextAction.onClick, disabled: nextAction.disabled, loading: nextAction.loading, loadingText: nextAction.loadingText, "aria-label": nextAction.ariaLabel, children: [(_c = nextAction.label) !== null && _c !== void 0 ? _c : "Next", showNextActionIcon ? (_jsx(ChevronRight, { className: "h-[var(--space-4)] w-[var(--space-4)]" })) : null] })) : null] })) : null] }) }), _jsx(GuidanceTriggerHighlight, { enabled: highlightTrigger && isOpen, focusOverlay: focusOverlay, targetRef: triggerHighlightRef })] }));
+}
+export { GuidanceTip };