@neasg/design-system 0.4.11 → 0.4.12

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

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

package/dist/layout.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type AvatarProfileProps } from "./avatar";
+import { type AvatarProfilePopoverProps } from "./avatar-profile-popover";
 import { type CountBadgeProps } from "./count-badge";
 import { type TabsProps } from "./tabs";
 export type DashboardRightPanelMode = "responsive" | "persistent";
@@ -32,6 +33,14 @@ export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElemen
     rightPanelMode?: DashboardRightPanelMode;
     /** Allows users to drag-resize a persistent right panel. */
     rightPanelResizable?: boolean;
+    /** Shows an edge control that collapses and reopens a persistent right panel. */
+    rightPanelCollapsible?: boolean;
+    /** Controlled collapsed state for a persistent right panel. */
+    rightPanelCollapsed?: boolean;
+    /** Initial collapsed state for an uncontrolled persistent right panel. */
+    defaultRightPanelCollapsed?: boolean;
+    /** Called when the persistent right panel collapse state changes. */
+    onRightPanelCollapsedChange?: (collapsed: boolean) => void;
     /** Initial persistent right panel width in pixels when resizing is enabled. */
     rightPanelDefaultWidth?: number;
     /** Minimum persistent right panel width in pixels when resizing is enabled. */
@@ -46,7 +55,7 @@ export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElemen
     /** Initial sidebar state on desktop before the user toggles it. */
     defaultSidebarCollapsed?: boolean;
 }
-declare function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightPanel, surfaceClassName, contentClassName, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, defaultSidebarCollapsed, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightPanel, surfaceClassName, contentClassName, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelCollapsible, rightPanelCollapsed, defaultRightPanelCollapsed, onRightPanelCollapsedChange, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, defaultSidebarCollapsed, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
     logo?: React.ReactNode | ((context: {
         isCollapsed: boolean;
@@ -99,12 +108,21 @@ export interface DashboardSidebarNavGroup {
     label?: string;
     items: DashboardSidebarNavItem[];
 }
+type DashboardSidebarProfileStatus = "online" | "busy" | "offline" | "none";
+type DashboardSidebarProfilePopoverPlacementProps = Pick<AvatarProfilePopoverProps, "align" | "alignOffset" | "avoidCollisions" | "collisionPadding" | "defaultOpen" | "modal" | "onOpenChange" | "open" | "side" | "sideOffset">;
 export interface DashboardSidebarProfileProps extends Omit<AvatarProfileProps, "className" | "avatarClassName" | "fallbackClassName" | "avatarOverlay" | "imageClassName" | "contentClassName" | "nameClassName" | "roleClassName" | "topInfoClassName" | "bottomInfoClassName" | "rolePlacement"> {
     isCollapsed?: boolean;
     rolePlacement?: "above" | "below";
-    status?: "online" | "busy" | "offline" | "none";
+    status?: DashboardSidebarProfileStatus;
 }
-declare function DashboardSidebarProfile({ isCollapsed, status, name, role, rolePlacement, size, ...props }: DashboardSidebarProfileProps): import("react/jsx-runtime").JSX.Element;
+export interface DashboardSidebarProfilePopoverProps extends Omit<DashboardSidebarProfileProps, "children">, DashboardSidebarProfilePopoverPlacementProps {
+    children: React.ReactNode;
+    contentClassName?: string;
+    triggerAriaLabel?: string;
+    triggerClassName?: string;
+}
+declare function DashboardSidebarProfile({ isCollapsed, ...props }: DashboardSidebarProfileProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardSidebarProfilePopover({ align, alignOffset, avoidCollisions, children, collisionPadding, contentClassName, defaultOpen, modal, onOpenChange, open, side, sideOffset, triggerAriaLabel, triggerClassName, ...profileProps }: DashboardSidebarProfilePopoverProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardSidebar({ className, children, logo, search, navGroups, footerItems, footer, toggleAriaLabel, ...props }: DashboardSidebarProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardContentProps extends React.HTMLAttributes<HTMLElement> {
     hasSidebar?: boolean;
@@ -113,6 +131,10 @@ export interface DashboardContentProps extends React.HTMLAttributes<HTMLElement>
     rightPanelFallbackTrigger?: React.ReactNode;
     rightPanelMode?: DashboardRightPanelMode;
     rightPanelResizable?: boolean;
+    rightPanelCollapsible?: boolean;
+    rightPanelCollapsed?: boolean;
+    defaultRightPanelCollapsed?: boolean;
+    onRightPanelCollapsedChange?: (collapsed: boolean) => void;
     rightPanelDefaultWidth?: number;
     rightPanelMinWidth?: number;
     rightPanelMaxWidth?: number;
@@ -148,5 +170,5 @@ declare function DashboardRightPanelTabs({ className, listWrapperClassName, pane
 declare function DashboardRightPanel({ className, ...props }: DashboardRightPanelProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardRightPanelHeader({ className, title, subtitle, badge, action, children, ...props }: DashboardRightPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardRightPanelBody({ className, contentClassName, footer, footerClassName, children, ...props }: DashboardRightPanelBodyProps): import("react/jsx-runtime").JSX.Element;
-declare function DashboardContent({ className, hasSidebar, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, surfaceClassName, children, ...props }: DashboardContentProps): import("react/jsx-runtime").JSX.Element;
-export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };
+declare function DashboardContent({ className, hasSidebar, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelCollapsible, rightPanelCollapsed, defaultRightPanelCollapsed, onRightPanelCollapsedChange, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, surfaceClassName, children, ...props }: DashboardContentProps): import("react/jsx-runtime").JSX.Element;
+export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };