@neasg/design-system 0.4.10 → 0.4.12

package/dist/date-input.d.ts

@@ -12,6 +12,8 @@ interface DateInputSharedProps {
     hideLabel?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    clearable?: boolean;
+    clearLabel?: string;
     minDate?: Date;
     maxDate?: Date;
     className?: string;

package/dist/date-input.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format, parse } from "date-fns";
 import { CalendarIcon } from "lucide-react";
+import { XIcon } from "./animated-icons/x";
 import { Calendar } from "./calendar";
 import { inputControlClassName } from "./input-control";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
@@ -92,8 +93,9 @@ function formatDisplayRange(range) {
 }
 const DateInput = React.forwardRef((props, ref) => {
     var _a, _b, _c;
-    const { label, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
+    const { label, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, clearable = false, clearLabel, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
     const [open, setOpen] = React.useState(false);
+    const [isSelectingRangeEnd, setIsSelectingRangeEnd] = React.useState(false);
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `date-input-${generatedId}`;
     const errorId = error ? `${inputId}-error` : undefined;
@@ -109,6 +111,24 @@ const DateInput = React.forwardRef((props, ref) => {
             ? formatDisplayDate(selectedDate)
             : undefined;
     const placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : (isRange ? "Pick range" : "Pick a date");
+    const showClearButton = clearable && Boolean(displayValue) && !disabled;
+    const resolvedClearLabel = clearLabel !== null && clearLabel !== void 0 ? clearLabel : (isRange ? "Clear date range" : "Clear date");
+    const handleOpenChange = (nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+            setIsSelectingRangeEnd(false);
+        }
+    };
+    const handleClear = () => {
+        if (props.mode === "range") {
+            props.onValueChange({});
+        }
+        else {
+            props.onValueChange("");
+        }
+        setIsSelectingRangeEnd(false);
+        setOpen(false);
+    };
     const handleSelect = (date) => {
         if (props.mode === "range")
             return;
@@ -118,17 +138,37 @@ const DateInput = React.forwardRef((props, ref) => {
     const handleRangeSelect = (range) => {
         if (props.mode !== "range")
             return;
+        if (!(range === null || range === void 0 ? void 0 : range.from)) {
+            props.onValueChange({});
+            setIsSelectingRangeEnd(false);
+            return;
+        }
+        const rangeFrom = range.from;
+        const rangeTo = range.to;
+        const isCompletingRange = isSelectingRangeEnd || Boolean((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !selectedRange.to);
+        const isSingleDayRange = rangeTo
+            ? getDateTime(rangeFrom) === getDateTime(rangeTo)
+            : false;
+        if (!isCompletingRange && isSingleDayRange) {
+            props.onValueChange({ from: formatISODate(rangeFrom) });
+            setIsSelectingRangeEnd(true);
+            return;
+        }
         props.onValueChange(formatDateRangeValue(range));
-        if ((range === null || range === void 0 ? void 0 : range.from) && range.to) {
+        if (rangeTo) {
+            setIsSelectingRangeEnd(false);
             setOpen(false);
         }
+        else {
+            setIsSelectingRangeEnd(true);
+        }
     };
     const disabledDays = (date) => isDateOutsideBounds(date, minDate, maxDate);
     const calendarContent = (_jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
     if (appearance === "inline") {
-        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
+        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
     }
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: [_jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }), _jsx(CalendarIcon, { "aria-hidden": "true", className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground", strokeWidth: 2 })] }) }), calendarContent] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsxs("div", { className: "relative", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", showClearButton && "pr-16", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: _jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }) }) }), _jsxs("span", { "aria-hidden": showClearButton ? undefined : true, className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-2 text-muted-foreground", children: [showClearButton ? (_jsx("button", { type: "button", "aria-label": resolvedClearLabel, onClick: handleClear, className: "pointer-events-auto inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { size: 14, className: "flex items-center justify-center" }) })) : null, _jsx(CalendarIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", strokeWidth: 2 })] })] }), calendarContent] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

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/filter-popover.d.ts

@@ -30,8 +30,9 @@ export interface FilterPopoverProps extends Pick<PopoverProps, "align" | "defaul
     emptyLabel?: React.ReactNode;
     onReset?: () => void;
     contentClassName?: string;
+    viewClassName?: string;
     maxHeight?: string;
 }
 declare function getFilterSelectionLabel(count: number): string;
-declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, viewClassName, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
 export { FilterPopover, getFilterSelectionLabel };

package/dist/filter-popover.js

@@ -32,7 +32,7 @@ function getFilterSelectionLabel(count) {
     }
     return count === 1 ? "1 selected" : `${count} selected`;
 }
-function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", }) {
+function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", viewClassName, }) {
     var _a, _b, _c, _d, _e;
     const [activeGroupId, setActiveGroupId] = React.useState(null);
     const [transitionDirection, setTransitionDirection] = React.useState("forward");
@@ -63,7 +63,7 @@ function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLa
         setActiveGroupId(null);
     };
     const defaultTrigger = (_jsxs(Button, { type: "button", variant: "outline", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), triggerLabel, resolvedSelectedCount > 0 ? (_jsx(CountBadge, { count: resolvedSelectedCount, size: "sm" })) : null] }));
-    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, children: [_jsx(PopoverMenuView, { className: "-mx-1 -mt-1 px-1 pt-1", direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) }), activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_c = activeGroup.searchPlaceholder) !== null && _c !== void 0 ? _c : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_d = activeGroup.searchPlaceholder) !== null && _d !== void 0 ? _d : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_e = activeGroup.emptyLabel) !== null && _e !== void 0 ? _e : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: groupListLabel }), _jsx(PopoverMenuSection, { children: groups.map((group) => {
+    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, children: [_jsx(PopoverMenuView, { className: cn("-mx-1 -mt-1 px-1 pt-1", viewClassName), direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) }), activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_c = activeGroup.searchPlaceholder) !== null && _c !== void 0 ? _c : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_d = activeGroup.searchPlaceholder) !== null && _d !== void 0 ? _d : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_e = activeGroup.emptyLabel) !== null && _e !== void 0 ? _e : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: groupListLabel }), _jsx(PopoverMenuSection, { children: groups.map((group) => {
                                     var _a;
                                     const groupSelectedCount = getGroupSelectedCount(group);
                                     const selectionLabel = (_a = group.selectionLabel) !== null && _a !== void 0 ? _a : getFilterSelectionLabel(groupSelectedCount);

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 };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
 export type { AvatarProps, AvatarSize, AvatarProfileProps, AvatarRootProps, } from "./avatar";
+export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, } from "./avatar-profile-popover";
+export type { AvatarProfilePopoverProps, AvatarProfilePopoverContentProps, AvatarProfilePopoverHeaderProps, AvatarProfilePopoverSectionProps, AvatarProfilePopoverFooterProps, AvatarProfilePopoverFooterActionProps, } from "./avatar-profile-popover";
 export * from "./animated-icons";
 export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
 export type { AlertActionProps, AlertConsentProps, AlertProps } from "./alert";
@@ -63,7 +65,7 @@ export type { LinkProps } from "./link";
 export { Dialog } from "./dialog";
 export type { DialogAction, DialogProps } from "./dialog";
 export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./command";
-export { CommandSearch, type CommandSearchFilter, type CommandSearchItem, type CommandSearchProps, type CommandSearchSection, type CommandSearchShowAllResultsLabel, } from "./command-search";
+export { CommandSearch, type CommandSearchFilter, type CommandSearchFilterSelectDetails, type CommandSearchItem, type CommandSearchItemDetail, type CommandSearchProps, type CommandSearchSection, type CommandSearchSectionAction, type CommandSearchShowAllResultsLabel, type CommandSearchShortcutPlatform, } from "./command-search";
 export { FileUpload } from "./file-upload";
 export type { FileUploadProps } from "./file-upload";
 export { FileUploadStatusToast, showFileUploadStatusToast, } from "./file-upload-status-toast";
@@ -90,8 +92,12 @@ export { SectionNav } from "./section-nav";
 export type { SectionNavItem, SectionNavProps } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
 export type { GovtMastheadProps } from "./govt-masthead";
+export { GuidanceTip } from "./guidance-tip";
+export type { GuidanceTipAction, GuidanceTipProps } from "./guidance-tip";
 export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
 export type { SearchHighlightProps, SearchHighlightSegment, } from "./use-search-highlight";
+export { clearJumpTargetHighlights, highlightJumpTarget, jumpTargetHighlightAttribute, jumpTargetHighlightClassName, jumpTargetHighlightDurationMs, jumpTargetHighlightIterations, jumpTargetHighlightSelector, } from "./jump-target-highlight";
+export type { HighlightJumpTargetOptions, JumpTargetHighlightRoot, } from "./jump-target-highlight";
 export { useErrorShake } from "./use-error-shake";
 export type { UseErrorShakeOptions } from "./use-error-shake";
 export { useStickySentinel } from "./use-sticky-sentinel";
@@ -100,12 +106,14 @@ export { useViewportThreshold } from "./use-viewport-threshold";
 export type { UseViewportThresholdOptions, UseViewportThresholdReturn, } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export type { TextareaProps } from "./textarea";
-export { DraggableTabs, type DraggableTabBadge, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
+export { DraggableTabs, type DraggableTabBadge, type DraggableTabGuidance, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
 export type { DrawerAction, DrawerProps, DrawerSide } from "./drawer";
-export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, SidebarProvider, useSidebar, } from "./layout";
-export type { DashboardContentProps, DashboardLayoutProps, DashboardRightPanelBodyProps, DashboardRightPanelHeaderProps, DashboardRightPanelMode, DashboardRightPanelProps, DashboardRightPanelSectionProps, DashboardRightPanelTabsProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, DashboardSidebarProfileProps, } from "./layout";
+export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, SidebarProvider, useSidebar, } from "./layout";
+export type { DashboardContentProps, DashboardLayoutProps, DashboardRightPanelBodyProps, DashboardRightPanelHeaderProps, DashboardRightPanelMode, DashboardRightPanelProps, DashboardRightPanelSectionProps, DashboardRightPanelTabsProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, DashboardSidebarProfileProps, DashboardSidebarProfilePopoverProps, } from "./layout";
 export { PageHeader } from "./page-header";
+export { PageLayout, PageLayoutContext, PageLayoutControls, PageLayoutHeader, PageLayoutSection, PageLayoutStack, PageLayoutTitle, pageLayoutGapClassNames, pageLayoutStackGapClassNames, } from "./page-layout";
+export type { PageLayoutGap, PageLayoutProps, PageLayoutStackGap, PageLayoutStackProps, PageLayoutTitleProps, } from "./page-layout";
 export { WorkspaceHeader } from "./workspace-header";
 export type { WorkspaceHeaderProps } from "./workspace-header";
 export { PageSection, PageSectionGroup } from "./page-section";
@@ -123,7 +131,7 @@ export type { TableColumnVisibilityMenuProps } from "./table-column-visibility";
 export { useTableSort } from "./use-table-sort";
 export type { UseTableSortOptions, UseTableSortReturn, } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
-export type { TableColumn, TableProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
+export type { TableColumn, TableColumnWidths, TableProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
 export { Tabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsItemLabel, type TabsItemLabelProps, type TabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
 export { Toaster, toast } from "./toaster";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
+export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, } from "./avatar-profile-popover";
 export * from "./animated-icons";
 export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
 export { Badge, badgeVariants } from "./badge";
@@ -46,15 +47,18 @@ export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, Popover
 export { SearchInput } from "./search-input";
 export { SectionNav } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
+export { GuidanceTip } from "./guidance-tip";
 export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
+export { clearJumpTargetHighlights, highlightJumpTarget, jumpTargetHighlightAttribute, jumpTargetHighlightClassName, jumpTargetHighlightDurationMs, jumpTargetHighlightIterations, jumpTargetHighlightSelector, } from "./jump-target-highlight";
 export { useErrorShake } from "./use-error-shake";
 export { useStickySentinel } from "./use-sticky-sentinel";
 export { useViewportThreshold } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export { DraggableTabs, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
-export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, SidebarProvider, useSidebar, } from "./layout";
+export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, SidebarProvider, useSidebar, } from "./layout";
 export { PageHeader } from "./page-header";
+export { PageLayout, PageLayoutContext, PageLayoutControls, PageLayoutHeader, PageLayoutSection, PageLayoutStack, PageLayoutTitle, pageLayoutGapClassNames, pageLayoutStackGapClassNames, } from "./page-layout";
 export { WorkspaceHeader } from "./workspace-header";
 export { PageSection, PageSectionGroup } from "./page-section";
 export { Typography, typographyVariants } from "./typography";

package/dist/jump-target-highlight.d.ts

@@ -0,0 +1,13 @@
+export declare const jumpTargetHighlightAttribute = "data-jump-target-highlight";
+export declare const jumpTargetHighlightSelector = "[data-jump-target-highlight=\"true\"]";
+export declare const jumpTargetHighlightDurationMs = 420;
+export declare const jumpTargetHighlightIterations = 2;
+export declare const jumpTargetHighlightClassName = "transition-[background-color,box-shadow,border-color] duration-150 data-[jump-target-highlight=true]:border-ring/40 data-[jump-target-highlight=true]:bg-primary/5 data-[jump-target-highlight=true]:shadow-[0_0_0_2px_hsl(var(--ring)_/_0.16)] motion-reduce:transition-none";
+export type JumpTargetHighlightRoot = Document | DocumentFragment | Element;
+export interface HighlightJumpTargetOptions {
+    root?: JumpTargetHighlightRoot;
+    durationMs?: number;
+    iterations?: number;
+}
+export declare function clearJumpTargetHighlights(root?: JumpTargetHighlightRoot): void;
+export declare function highlightJumpTarget(target: HTMLElement | null | undefined, { root, durationMs, iterations, }?: HighlightJumpTargetOptions): () => void;

package/dist/jump-target-highlight.js

@@ -0,0 +1,95 @@
+export const jumpTargetHighlightAttribute = "data-jump-target-highlight";
+export const jumpTargetHighlightSelector = `[${jumpTargetHighlightAttribute}="true"]`;
+export const jumpTargetHighlightDurationMs = 420;
+export const jumpTargetHighlightIterations = 2;
+export const jumpTargetHighlightClassName = "transition-[background-color,box-shadow,border-color] duration-150 data-[jump-target-highlight=true]:border-ring/40 data-[jump-target-highlight=true]:bg-primary/5 data-[jump-target-highlight=true]:shadow-[0_0_0_2px_hsl(var(--ring)_/_0.16)] motion-reduce:transition-none";
+const jumpTargetHighlightIdDataKey = "jumpTargetHighlightId";
+const activeJumpTargetHighlights = new WeakMap();
+function getJumpTargetHighlightTotalMs(durationMs, iterations) {
+    return durationMs * iterations;
+}
+function prefersReducedMotion(ownerWindow) {
+    return (typeof ownerWindow.matchMedia === "function" &&
+        ownerWindow.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+function clearJumpTargetElement(element) {
+    const activeHighlight = activeJumpTargetHighlights.get(element);
+    if (activeHighlight) {
+        activeJumpTargetHighlights.delete(element);
+        if (activeHighlight.timeoutId !== undefined) {
+            activeHighlight.ownerWindow.clearTimeout(activeHighlight.timeoutId);
+        }
+        if (activeHighlight.animation) {
+            activeHighlight.animation.onfinish = null;
+            activeHighlight.animation.oncancel = null;
+            activeHighlight.animation.cancel();
+        }
+    }
+    element.removeAttribute(jumpTargetHighlightAttribute);
+    delete element.dataset[jumpTargetHighlightIdDataKey];
+}
+export function clearJumpTargetHighlights(root) {
+    const highlightRoot = root !== null && root !== void 0 ? root : (typeof document === "undefined" ? undefined : document);
+    if (!highlightRoot) {
+        return;
+    }
+    highlightRoot
+        .querySelectorAll(jumpTargetHighlightSelector)
+        .forEach(clearJumpTargetElement);
+}
+export function highlightJumpTarget(target, { root, durationMs = jumpTargetHighlightDurationMs, iterations = jumpTargetHighlightIterations, } = {}) {
+    if (!target) {
+        return () => undefined;
+    }
+    const ownerWindow = target.ownerDocument.defaultView;
+    if (!ownerWindow) {
+        return () => undefined;
+    }
+    clearJumpTargetHighlights(root !== null && root !== void 0 ? root : target.ownerDocument);
+    const highlightId = `${Date.now()}`;
+    const clearHighlight = () => {
+        if (target.dataset[jumpTargetHighlightIdDataKey] !== highlightId) {
+            return;
+        }
+        clearJumpTargetElement(target);
+    };
+    target.dataset[jumpTargetHighlightIdDataKey] = highlightId;
+    target.setAttribute(jumpTargetHighlightAttribute, "true");
+    if (!prefersReducedMotion(ownerWindow) &&
+        typeof target.animate === "function") {
+        const animation = target.animate([
+            {
+                backgroundColor: "hsl(var(--primary) / 0.04)",
+                borderColor: "hsl(var(--ring) / 0.35)",
+                boxShadow: "0 0 0 2px hsl(var(--ring) / 0.12)",
+            },
+            {
+                backgroundColor: "hsl(var(--primary) / 0.12)",
+                borderColor: "hsl(var(--ring) / 0.6)",
+                boxShadow: "0 0 0 3px hsl(var(--ring) / 0.24)",
+            },
+            {
+                backgroundColor: "hsl(var(--primary) / 0.04)",
+                borderColor: "hsl(var(--ring) / 0.35)",
+                boxShadow: "0 0 0 2px hsl(var(--ring) / 0.12)",
+            },
+        ], {
+            duration: durationMs,
+            easing: "ease-in-out",
+            iterations,
+        });
+        activeJumpTargetHighlights.set(target, {
+            animation,
+            ownerWindow,
+        });
+        animation.onfinish = clearHighlight;
+        animation.oncancel = clearHighlight;
+        return clearHighlight;
+    }
+    const timeoutId = ownerWindow.setTimeout(clearHighlight, getJumpTargetHighlightTotalMs(durationMs, iterations));
+    activeJumpTargetHighlights.set(target, {
+        ownerWindow,
+        timeoutId,
+    });
+    return clearHighlight;
+}