@evinvest/uikit 0.25.0 → 0.27.0

package/dist/index.d.ts

@@ -71,6 +71,21 @@ interface PortalProviderProps {
 declare function PortalProvider({ container, children }: PortalProviderProps): React.JSX.Element;
 declare function Portal({ children, container }: PortalProps): React.ReactPortal | null;
 
+type LayerRef = React.RefObject<HTMLDivElement | null>;
+/**
+ * Elements carrying this attribute are outside every layer without being a
+ * click away from any: a press there dismisses nothing (the toaster).
+ */
+declare const LAYER_IGNORE_ATTR = "data-dismissable-layer-ignore";
+/**
+ * Marks `children` as rendered inside `layer` (the ref `useDismissableLayer`
+ * returned), so a layer among them always stacks above it — even when both
+ * open in the same commit. Wrap the overlay's content in it.
+ */
+declare function DismissableLayerScope({ layer, children }: {
+    layer: LayerRef;
+    children?: React.ReactNode;
+}): React.JSX.Element;
 /** Why a layer is being dismissed: the event itself, for a caller that treats keys and pointers apart. */
 type DismissEvent = PointerEvent | KeyboardEvent;
 /**
@@ -78,14 +93,25 @@ type DismissEvent = PointerEvent | KeyboardEvent;
  * dep-light core of every overlay's "click away to close". Pass refs to any
  * nodes that should NOT count as outside (e.g. the trigger), via `exclude`.
  *
- * Layers stack, in the order they opened: Escape dismisses only the topmost
- * layer on this stack, and a pointer-down inside a layer opened above this one
- * is not outside it — so a Select's list inside a Dialog closes the list, not
- * the Dialog. The stack knows only the overlays built on this hook: a
- * `Drawer` or `CommandDialog` (Escape in their own React `onKeyDown`) is not
- * on it, and a menu that also closes on Escape in its React `onKeyDown` lets
- * the key bubble through React's tree to what holds it. Moving those onto the
- * stack is a follow-up.
+ * Layers stack: a layer rendered inside another's `DismissableLayerScope`
+ * sits above it, the rest in the order they opened. Escape dismisses only the
+ * topmost layer, and a pointer-down inside a layer above this one is not
+ * outside it — so a Select's list inside a Dialog closes the list, not the
+ * Dialog. The Escape goes to the layer that was on top when the key was
+ * pressed, even if a handler on its way closed that layer first.
+ *
+ * `modal: true` makes the layer a barrier: while it is open, the layers below
+ * ignore every pointer-down — a press on its scrim closes it alone. Elements
+ * marked with `LAYER_IGNORE_ATTR` (the toaster) are outside no layer.
+ *
+ * `pointerOutside: false` keeps the layer on the stack (it takes Escape, and
+ * the layers below see a pointer-down inside it as inside) but leaves outside
+ * clicks to the caller — for an overlay whose own scrim is what "outside"
+ * means (Drawer, CommandDialog).
+ *
+ * The stack is shared through `globalThis`, so every copy of this module on
+ * the page sees one stack; parent links need one React context, so they hold
+ * within a copy only.
  *
  * Mirrors the dismiss behaviour Rust expresses with a full-screen backdrop.
  */
@@ -93,6 +119,10 @@ declare function useDismissableLayer(opts: {
     enabled: boolean;
     onDismiss: (event: DismissEvent) => void;
     exclude?: Array<React.RefObject<Element | null>>;
+    /** Dismiss on a pointer-down outside the layer. Default `true`. */
+    pointerOutside?: boolean;
+    /** Bar the layers below from pointer-downs while open. Default `false`. */
+    modal?: boolean;
 }): React.RefObject<HTMLDivElement | null>;
 
 type Side = "top" | "right" | "bottom" | "left";
@@ -138,16 +168,34 @@ declare function useFloating(opts: {
     offset?: number;
 }): FloatingResult;
 
+/**
+ * Where focus lands when the scope opens. `first` is the first Tab stop inside
+ * (an input, an alert dialog's least destructive action); `container` is the
+ * scope root itself, so a reader starts at the top and the first Tab reaches the
+ * first control — right for a panel of content, where the first stop may be an
+ * action one keypress away from firing.
+ */
+type InitialFocus = "first" | "container";
+interface FocusScopeOptions {
+    /** Default `first`; falls back to the container when nothing inside is focusable. */
+    initialFocus?: InitialFocus;
+    /**
+     * Where focus goes back on close when the element focused before opening is
+     * no use: `<body>` (Safari does not focus a clicked button), or detached (the
+     * opener was re-rendered away). Pass the overlay's trigger.
+     */
+    returnFocusTo?: React.RefObject<HTMLElement | null>;
+}
 /**
  * Traps Tab focus inside the returned ref's subtree and restores focus to the
  * previously-focused element on unmount — the dep-light core of dialogs/menus,
- * replacing `@radix-ui/react-focus-scope`. On mount, focuses the first
- * focusable (or the container itself).
+ * replacing `@radix-ui/react-focus-scope`. On mount, focuses per
+ * `initialFocus`; the root gets `tabindex="-1"` whenever it is the target.
  *
  * Rust dialogs rely on the browser's native focus order within a fixed overlay;
  * see the README "Limitations".
  */
-declare function useFocusScope(enabled: boolean): React.RefObject<HTMLDivElement | null>;
+declare function useFocusScope(enabled: boolean, { initialFocus, returnFocusTo }?: FocusScopeOptions): React.RefObject<HTMLDivElement | null>;
 
 /**
  * Keeps an overlay mounted through its exit animation. Enter animations
@@ -178,10 +226,15 @@ declare function usePresence(present: boolean): {
  * Returns an `onKeyDown` to spread on the container and the active index; items
  * should set `tabIndex={index === activeIndex ? 0 : -1}`.
  *
+ * `count` may be a getter: containers whose items are only known from the DOM
+ * (menus with conditionally rendered or disabled items, inline sub-menus) pass
+ * one so the bound is read at keydown time — never during render, which keeps
+ * the hook safe under SSR.
+ *
  * Mirrors the keyboard navigation Rust drives with a focused-index signal.
  */
 declare function useRovingFocus(opts: {
-    count: number;
+    count: number | (() => number);
     orientation?: "horizontal" | "vertical" | "both";
     loop?: boolean;
     initial?: number;
@@ -679,15 +732,74 @@ interface ServerErrorProps {
 /** 500 — server error. The "Try again" button runs `reset` or reloads the page. */
 declare function ServerError({ linkComponent, homeHref, reset }: ServerErrorProps): React.JSX.Element;
 
-declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+declare const tableVariants: {
+    readonly default: "[--table-px:initial] [--table-py:initial] [--table-head-ink:initial] [--table-head-text:initial] [--table-head-tracking:initial] [--table-head-case:initial]";
+    readonly card: "[--table-px:calc(var(--spacing)*5)] [--table-py:calc(var(--spacing)*3)] [--table-head-ink:var(--ink-soft)] [--table-head-text:var(--text-xs)] [--table-head-tracking:var(--tracking-wide)] [--table-head-case:uppercase] [&>thead>tr:hover]:bg-transparent";
+};
+type TableVariant = keyof typeof tableVariants;
+declare const tableDensities: {
+    readonly default: "[--table-dense-py:initial] [--table-head-h:initial]";
+    readonly compact: "[--table-dense-py:calc(var(--spacing)*1.5)] [--table-head-h:calc(var(--spacing)*8)]";
+};
+type TableDensity = keyof typeof tableDensities;
+declare const tableAligns: {
+    readonly start: "text-start";
+    readonly end: "text-end tabular-nums";
+};
+type TableAlign = keyof typeof tableAligns;
+
+interface TableProps extends React.ComponentProps<"table"> {
+    variant?: TableVariant;
+    density?: TableDensity;
+}
+declare function Table({ variant, density, className, ...props }: TableProps): React.JSX.Element;
+/** The surface a `variant="card"` table sits in, edge to edge. */
+declare function TableCard({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
 declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
 declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
-declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
-declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+interface TableHeadProps extends Omit<React.ComponentProps<"th">, "align"> {
+    align?: TableAlign;
+}
+declare function TableHead({ align, className, ...props }: TableHeadProps): React.JSX.Element;
+interface TableCellProps extends Omit<React.ComponentProps<"td">, "align"> {
+    align?: TableAlign;
+}
+declare function TableCell({ align, className, ...props }: TableCellProps): React.JSX.Element;
 declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
 
+type ListRowsVariant = "plain" | "card";
+interface ListRowsProps extends React.ComponentProps<"ul"> {
+    variant?: ListRowsVariant;
+}
+declare function ListRows({ variant, className, ...props }: ListRowsProps): React.JSX.Element;
+interface ListRowProps extends Omit<React.ComponentProps<"li">, "value"> {
+    /** The row's title. Omit it (and `value`) to lay the row out yourself. */
+    label?: React.ReactNode;
+    /** A caption a step down under the label. */
+    description?: React.ReactNode;
+    /** Trailing value, right-aligned and truncated rather than pushing the row wide. */
+    value?: React.ReactNode;
+}
+/**
+ * One row: label (and description) leading, value trailing, then `children`
+ * (a badge, an action). With neither `label` nor `value` the children are the
+ * whole row.
+ */
+declare function ListRow({ label, description, value, className, children, ...props }: ListRowProps): React.JSX.Element;
+interface ListRowLabelProps extends Omit<React.ComponentProps<"div">, "title"> {
+    description?: React.ReactNode;
+}
+/** The leading block on its own, for a row you compose by hand. */
+declare function ListRowLabel({ description, className, children, ...props }: ListRowLabelProps): React.JSX.Element;
+/**
+ * The trailing value. It shares the label's type step, so the muted tone and
+ * the lighter weight are what keep the label reading first; digits are tabular
+ * so a figure in one row lines up with the next.
+ */
+declare function ListRowValue({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+
 type AccordionType = "single" | "multiple";
 interface AccordionProps extends Omit<React.ComponentProps<"div">, "onChange"> {
     type?: AccordionType;
@@ -804,7 +916,7 @@ declare function TabsContent({ className, value, children, ...props }: TabsConte
 
 declare const toggleVariantClasses: {
     readonly bare: "bg-transparent";
-    readonly outline: "border border-input bg-transparent shadow-xs hover:bg-hover hover:text-ink";
+    readonly outline: "border border-input bg-transparent shadow-xs hover:bg-hover hover:text-ink data-[state=on]:border-primary";
 };
 type ToggleVariant = keyof typeof toggleVariantClasses;
 declare const toggleSizeClasses: {
@@ -1086,15 +1198,18 @@ interface DropdownMenuTriggerProps extends React.ComponentProps<"button"> {
 declare function DropdownMenuTrigger({ asChild, onClick, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
 interface DropdownMenuContentProps extends React.ComponentProps<"div"> {
     sideOffset?: number;
+    align?: "start" | "center" | "end";
 }
-declare function DropdownMenuContent({ className, sideOffset, children, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
+declare function DropdownMenuContent({ className, sideOffset, align, children, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
 declare function DropdownMenuGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 interface DropdownMenuItemProps extends React.ComponentProps<"div"> {
+    /** Render the child (a link) as the item. */
+    asChild?: boolean;
     inset?: boolean;
     variant?: "neutral" | "destructive";
     disabled?: boolean;
 }
-declare function DropdownMenuItem({ className, inset, variant, disabled, onClick, onKeyDown, ...props }: DropdownMenuItemProps): React.JSX.Element;
+declare function DropdownMenuItem({ asChild, className, inset, variant, disabled, onClick, onKeyDown, ...props }: DropdownMenuItemProps): React.JSX.Element;
 interface DropdownMenuCheckboxItemProps extends React.ComponentProps<"div"> {
     checked?: boolean;
     disabled?: boolean;
@@ -1277,8 +1392,10 @@ interface DialogOverlayProps extends React.ComponentProps<"div"> {
 declare function DialogOverlay({ className, ...props }: DialogOverlayProps): React.JSX.Element;
 interface DialogContentProps extends React.ComponentProps<"div"> {
     showCloseButton?: boolean;
+    /** Where focus lands on open. Default `first` — a dialog is usually a short form. */
+    initialFocus?: InitialFocus;
 }
-declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): React.JSX.Element | null;
+declare function DialogContent({ className, children, showCloseButton, initialFocus, ...props }: DialogContentProps): React.JSX.Element | null;
 interface DialogCloseProps extends React.ComponentProps<"button"> {
     asChild?: boolean;
 }
@@ -1332,8 +1449,14 @@ interface SheetOverlayProps extends React.ComponentProps<"div"> {
 declare function SheetOverlay({ className, ...props }: SheetOverlayProps): React.JSX.Element;
 interface SheetContentProps extends React.ComponentProps<"div"> {
     side?: "top" | "right" | "bottom" | "left";
+    /**
+     * Where focus lands on open. Default `container`: a sheet is a panel of
+     * content, and its first Tab stop is as likely an action as a field — the
+     * panel itself takes focus and the first Tab reaches the first control.
+     */
+    initialFocus?: InitialFocus;
 }
-declare function SheetContent({ className, children, side, ...props }: SheetContentProps): React.JSX.Element | null;
+declare function SheetContent({ className, children, side, initialFocus, ...props }: SheetContentProps): React.JSX.Element | null;
 interface SheetCloseProps extends React.ComponentProps<"button"> {
     asChild?: boolean;
 }
@@ -1468,16 +1591,18 @@ interface CommandProps extends React.ComponentProps<"div"> {
     search?: string;
     defaultSearch?: string;
     onSearchChange?: (search: string) => void;
+    shouldFilter?: boolean;
 }
-declare function Command({ className, search, defaultSearch, onSearchChange, children, ...props }: CommandProps): React.JSX.Element;
+declare function Command({ className, search, defaultSearch, onSearchChange, shouldFilter, children, ref, onKeyDown, ...props }: CommandProps): React.JSX.Element;
 interface CommandDialogProps {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    shouldFilter?: boolean;
     className?: string;
     children?: React.ReactNode;
 }
-declare function CommandDialog({ open, defaultOpen, onOpenChange, className, children, }: CommandDialogProps): React.JSX.Element | null;
+declare function CommandDialog({ open, defaultOpen, onOpenChange, shouldFilter, className, children, }: CommandDialogProps): React.JSX.Element | null;
 declare function CommandInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
 declare function CommandList({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CommandEmpty({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
@@ -1490,7 +1615,7 @@ interface CommandItemProps extends Omit<React.ComponentProps<"div">, "onSelect">
     disabled?: boolean;
     onSelect?: (value: string) => void;
 }
-declare function CommandItem({ className, value, disabled, onSelect, children, ...props }: CommandItemProps): React.JSX.Element | null;
+declare function CommandItem({ className, value, disabled, onSelect, id: idProp, onPointerMove, children, ...props }: CommandItemProps): React.JSX.Element | null;
 declare function CommandSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 
@@ -1869,6 +1994,8 @@ interface AppShellProps extends React.ComponentProps<"div"> {
     rail?: React.ReactNode;
     /** The phone's tab bar — a `BottomTabBar`. Pinned to the viewport bottom below `breakpoint`. */
     tabBar?: React.ReactNode;
+    /** A `TopBar`, pinned over the column from `breakpoint` up (a phone titles its screen with `MobileAppBar`). */
+    topBar?: React.ReactNode;
     /** Strips above the page (`SystemBanner`s). An empty slot takes no room. */
     banner?: React.ReactNode;
     /** Default `lg`. */
@@ -1878,15 +2005,15 @@ interface AppShellProps extends React.ComponentProps<"div"> {
 }
 /**
  * The signed-in app's frame: a rail beside a content column on a wide screen, a
- * bottom tab bar under it on a phone. Layout only — the nav, the banners and the
- * page are slots, so the shell knows nothing about routes, roles or data.
+ * bottom tab bar under it on a phone. Layout only — the nav, the top bar, the banners
+ * and the page are slots, so the shell knows nothing about routes, roles or data.
  *
  * Fills the viewport less `--ev-shell-offset` (the room a host shell's own header
  * takes); the rail sticks under that offset at full remaining height and scrolls
  * by itself when it cannot fit. The column reserves the tab bar's height plus
  * the bottom safe area, so the bar never covers content.
  */
-declare function AppShell({ rail, tabBar, banner, breakpoint, mainProps, className, children, ...props }: AppShellProps): React.JSX.Element;
+declare function AppShell({ rail, tabBar, topBar, banner, breakpoint, mainProps, className, children, ...props }: AppShellProps): React.JSX.Element;
 
 /**
  * How a {@link NavItem} decides it is the current one.
@@ -2086,6 +2213,51 @@ interface BottomTabBarProps extends Omit<React.ComponentProps<"nav">, "children"
  */
 declare function BottomTabBar({ items, pathname, linkComponent, onItemIntent, onNavigate, labels, className, ...props }: BottomTabBarProps): React.JSX.Element;
 
+interface TopBarProps extends React.ComponentProps<"header"> {
+    /** The app switcher, or the service's name. */
+    start?: React.ReactNode;
+    /** Service stats, then an `AccountMenu` last. */
+    end?: React.ReactNode;
+}
+/**
+ * The wide screen's utility bar over the content column: who and where, never
+ * product nav (that is the rail's). Layout only — `AppShell.topBar` pins it.
+ */
+declare function TopBar({ start, end, className, ...props }: TopBarProps): React.JSX.Element;
+
+interface AccountMenuLabels {
+    /** Accessible name of the trigger. Default `"Account"`. */
+    trigger?: string;
+    /** Default `"Manage account"`. */
+    manage?: string;
+    /** Default `"Switch account"`. */
+    switchAccount?: string;
+    /** Default `"Sign out"`. */
+    signOut?: string;
+}
+interface AccountMenuProps {
+    account: {
+        name?: string | null | undefined;
+        email: string;
+    };
+    /** The account center, on the identity provider's origin; no item without it. */
+    manageHref?: string | undefined;
+    /** A full page load to the sign-in that offers the account chooser. */
+    switchHref: string;
+    /** The service's own entries, between the account center and switching. Draws `label`, `icon`, `external`. */
+    groups?: readonly NavGroup[];
+    onSignOut: () => void;
+    linkComponent?: React.ElementType;
+    labels?: AccountMenuLabels;
+    className?: string;
+}
+/**
+ * Who is signed in, top right. The order is fixed — the account, the account
+ * center, the service's groups, switching, signing out — so every service's
+ * menu reads the same; a service adds groups and nothing else.
+ */
+declare function AccountMenu({ account, manageHref, switchHref, groups, onSignOut, linkComponent, labels, className, }: AccountMenuProps): React.JSX.Element;
+
 interface MobileAppBarLabels {
     /** Accessible name of the back control. Default `"Back"`. */
     back?: string;
@@ -2281,4 +2453,4 @@ interface SettledProps extends Omit<React.ComponentProps<"div">, "children"> {
  */
 declare function Settled({ loading, skeleton, children, ...props }: SettledProps): React.JSX.Element;
 
-export { type Accent, Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, AppShell, type AppShellProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, type BookSide, BottomTabBar, type BottomTabBarLabels, type BottomTabBarProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, type ButtonGroupTextProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselEdgeFade, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, type ChartConfig, ChartContainer, type ChartItem, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Check, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, type DismissEvent, Display, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, type DrawerProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyMediaVariant, EmptyTitle, Eyebrow, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, FieldTitle, type FloatingResult, Footer, type FooterLink, type FooterLinkGroup, type FooterOffice, type FooterProps, Forbidden, Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, type HoverIntentHandlers, InfoTip, InfoTipContent, type InfoTipContentProps, type InfoTipProps, InfoTipTrigger, type InfoTipTriggerProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupButtonSize, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, type InputProps, type InputSize, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSize, ItemTitle, type ItemVariant, Kbd, KbdGroup, Label, Logo, type LogoProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, type MenubarSubProps, MenubarSubTrigger, MenubarTrigger, MobileAppBar, type MobileAppBarBack, type MobileAppBarLabels, type MobileAppBarProps, NativeSelect, NativeSelectGroup, NativeSelectOption, type NativeSelectProps, type NativeSelectSize, NavBadge, type NavBadgeProps, type NavBadgeVariant, NavDot, type NavDotProps, type NavDotTone, type NavGroup, type NavItem, type NavItemState, type NavMatch, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenOrdersEmpty, OrderBook, OrderBookHead, type OrderBookHeadProps, OrderBookRow, type OrderBookRowProps, OrderBookSpread, OrderForm, OrderFormRow, type OrderFormRowProps, OrderFormSubmit, type OrderFormSubmitProps, type OrderSide, PageFrame, type PageFrameProps, type PageFrameWidth, PageHeading, type PageHeadingProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, type Polarity, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, PortalProvider, type PortalProviderProps, Progress, type ProgressProps, Prose, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, ResourceError, type ResourceErrorLabels, type ResourceErrorProps, ScrollArea, ScrollBar, type ScrollBarOrientation, type ScrollBarProps, Section, SectionDescriptor, type SectionDescriptorProps, SectionHead, type SectionHeadProps, SectionLabel, type SectionLabelProps, type SectionLabelTone, SectionNav, type SectionNavGroup, type SectionNavItem, type SectionNavLabels, type SectionNavProps, type SectionProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, SelectValue, type SelectValueProps, Separator, type SeparatorOrientation, type SeparatorProps, ServerError, type ServerErrorProps, Settled, type SettledProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, type SheetOverlayProps, type SheetProps, SheetTitle, SheetTrigger, type SheetTriggerProps, type ShellBreakpoint, ShellNav, type ShellNavLabels, type ShellNavProps, type Side, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SliderProps, Slot, type SlotProps, Spinner, Stat, type StatProps, type StatusLinkData, type StatusPageProps, StatusScreen, type StatusScreenProps, type Surface, Switch, type SwitchProps, SystemBanner, type SystemBannerLabels, type SystemBannerProps, type SystemBannerTone, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Terminal, type TerminalArea, TerminalChart, TerminalPane, TerminalPaneBody, TerminalPaneHeader, type TerminalPaneProps, TerminalTicker, Textarea, type TextareaProps, type TextareaSize, TickerStat, type TickerStatProps, type Toast, type ToastFn, type ToastOptions, type ToastPosition, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TradesTapeRow, type TradesTapeRowProps, buttonVariants, cn, isNavItemActive, isPlainLeftClick, mergeRefs, navItemMatch, navigationMenuTriggerStyle, resolveActiveNavItem, statusCtaClass, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, useHoverIntent, usePendingNavigation, usePresence, useRovingFocus, useSidebar };
+export { type Accent, Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, AccountMenu, type AccountMenuLabels, type AccountMenuProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, AppShell, type AppShellProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, type BookSide, BottomTabBar, type BottomTabBarLabels, type BottomTabBarProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, type ButtonGroupTextProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselEdgeFade, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, type ChartConfig, ChartContainer, type ChartItem, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Check, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, type DismissEvent, DismissableLayerScope, Display, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, type DrawerProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyMediaVariant, EmptyTitle, Eyebrow, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, FieldTitle, type FloatingResult, Footer, type FooterLink, type FooterLinkGroup, type FooterOffice, type FooterProps, Forbidden, Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, type HoverIntentHandlers, InfoTip, InfoTipContent, type InfoTipContentProps, type InfoTipProps, InfoTipTrigger, type InfoTipTriggerProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupButtonSize, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, type InputProps, type InputSize, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSize, ItemTitle, type ItemVariant, Kbd, KbdGroup, LAYER_IGNORE_ATTR, Label, ListRow, ListRowLabel, type ListRowLabelProps, type ListRowProps, ListRowValue, ListRows, type ListRowsProps, type ListRowsVariant, Logo, type LogoProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, type MenubarSubProps, MenubarSubTrigger, MenubarTrigger, MobileAppBar, type MobileAppBarBack, type MobileAppBarLabels, type MobileAppBarProps, NativeSelect, NativeSelectGroup, NativeSelectOption, type NativeSelectProps, type NativeSelectSize, NavBadge, type NavBadgeProps, type NavBadgeVariant, NavDot, type NavDotProps, type NavDotTone, type NavGroup, type NavItem, type NavItemState, type NavMatch, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenOrdersEmpty, OrderBook, OrderBookHead, type OrderBookHeadProps, OrderBookRow, type OrderBookRowProps, OrderBookSpread, OrderForm, OrderFormRow, type OrderFormRowProps, OrderFormSubmit, type OrderFormSubmitProps, type OrderSide, PageFrame, type PageFrameProps, type PageFrameWidth, PageHeading, type PageHeadingProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, type Polarity, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, PortalProvider, type PortalProviderProps, Progress, type ProgressProps, Prose, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, ResourceError, type ResourceErrorLabels, type ResourceErrorProps, ScrollArea, ScrollBar, type ScrollBarOrientation, type ScrollBarProps, Section, SectionDescriptor, type SectionDescriptorProps, SectionHead, type SectionHeadProps, SectionLabel, type SectionLabelProps, type SectionLabelTone, SectionNav, type SectionNavGroup, type SectionNavItem, type SectionNavLabels, type SectionNavProps, type SectionProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, SelectValue, type SelectValueProps, Separator, type SeparatorOrientation, type SeparatorProps, ServerError, type ServerErrorProps, Settled, type SettledProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, type SheetOverlayProps, type SheetProps, SheetTitle, SheetTrigger, type SheetTriggerProps, type ShellBreakpoint, ShellNav, type ShellNavLabels, type ShellNavProps, type Side, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SliderProps, Slot, type SlotProps, Spinner, Stat, type StatProps, type StatusLinkData, type StatusPageProps, StatusScreen, type StatusScreenProps, type Surface, Switch, type SwitchProps, SystemBanner, type SystemBannerLabels, type SystemBannerProps, type SystemBannerTone, Table, type TableAlign, TableBody, TableCaption, TableCard, TableCell, type TableCellProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Terminal, type TerminalArea, TerminalChart, TerminalPane, TerminalPaneBody, TerminalPaneHeader, type TerminalPaneProps, TerminalTicker, Textarea, type TextareaProps, type TextareaSize, TickerStat, type TickerStatProps, type Toast, type ToastFn, type ToastOptions, type ToastPosition, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TopBar, type TopBarProps, TradesTapeRow, type TradesTapeRowProps, buttonVariants, cn, isNavItemActive, isPlainLeftClick, mergeRefs, navItemMatch, navigationMenuTriggerStyle, resolveActiveNavItem, statusCtaClass, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, useHoverIntent, usePendingNavigation, usePresence, useRovingFocus, useSidebar };

package/dist/index.js

@@ -2,7 +2,7 @@ export { cn } from "./lib/cn.js";
 export { Slot } from "./primitives/slot.js";
 export { useControllableState } from "./primitives/use-controllable-state.js";
 export { Portal, PortalProvider } from "./primitives/portal.js";
-export { useDismissableLayer } from "./primitives/dismissable-layer.js";
+export { useDismissableLayer, DismissableLayerScope, LAYER_IGNORE_ATTR } from "./primitives/dismissable-layer.js";
 export { useFloating } from "./primitives/use-floating.js";
 export { useFocusScope } from "./primitives/focus-scope.js";
 export { usePresence } from "./primitives/presence.js";
@@ -33,7 +33,8 @@ export { Separator } from "./components/separator.js";
 export { Skeleton } from "./components/skeleton.js";
 export { Spinner } from "./components/spinner.js";
 export { StatusScreen, NotFound, Forbidden, ServerError, statusCtaClass, } from "./components/status-screen.js";
-export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from "./components/table.js";
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, TableCard, } from "./components/table.js";
+export { ListRows, ListRow, ListRowLabel, ListRowValue, } from "./components/list-rows.js";
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "./components/accordion.js";
 export { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./components/collapsible.js";
 export { Container, } from "./components/container.js";
@@ -77,6 +78,8 @@ export { usePendingNavigation } from "./components/use-shell-nav.js";
 export { ShellNav } from "./components/shell-nav.js";
 export { NavBadge, NavDot } from "./components/nav-badge.js";
 export { BottomTabBar } from "./components/bottom-tab-bar.js";
+export { TopBar } from "./components/top-bar.js";
+export { AccountMenu } from "./components/account-menu.js";
 export { MobileAppBar } from "./components/mobile-app-bar.js";
 export { PageFrame, PageHeading, SectionLabel } from "./components/page-frame.js";
 export { SectionNav } from "./components/section-nav.js";

package/dist/primitives/dismissable-layer.js

@@ -1,13 +1,77 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-const stack = [];
-function isInsideHigherLayer(own, target) {
-  const index = stack.indexOf(own);
-  if (index < 0) return false;
-  return stack.slice(index + 1).some((layer) => layer.current?.contains(target) ?? false);
+const STORE_KEY = /* @__PURE__ */ Symbol.for("@evinvest/uikit/dismissable-layers@1");
+function isStore(value) {
+  return typeof value === "object" && value !== null && "stack" in value && Array.isArray(value.stack);
+}
+function sharedStore() {
+  const existing = Reflect.get(globalThis, STORE_KEY);
+  if (isStore(existing)) return existing;
+  const store2 = {
+    stack: [],
+    info: /* @__PURE__ */ new WeakMap(),
+    seen: /* @__PURE__ */ new WeakMap(),
+    snapshot: (event) => {
+      if (!store2.seen.has(event)) store2.seen.set(event, store2.stack.slice());
+    }
+  };
+  Reflect.set(globalThis, STORE_KEY, store2);
+  return store2;
+}
+const store = sharedStore();
+const LAYER_IGNORE_ATTR = "data-dismissable-layer-ignore";
+function layersAt(event) {
+  return store.seen.get(event) ?? store.stack;
+}
+function isPointerOutside(own, event) {
+  const target = event.target;
+  if (!(target instanceof Node)) return false;
+  const el = target instanceof Element ? target : target.parentElement;
+  if (el?.closest(`[${LAYER_IGNORE_ATTR}]`)) return false;
+  const layers = layersAt(event);
+  const index = layers.indexOf(own);
+  if (index < 0) return true;
+  const above = layers.slice(index + 1);
+  if (above.some((layer) => store.info.get(layer)?.modal === true)) return false;
+  return !above.some((layer) => layer.current?.contains(target) ?? false);
+}
+function ownsEscape(own, event) {
+  const layers = layersAt(event);
+  return layers[layers.length - 1] === own;
+}
+function isDescendant(layer, ancestor) {
+  for (let p = store.info.get(layer)?.parent ?? null; p; p = store.info.get(p)?.parent ?? null) {
+    if (p === ancestor) return true;
+  }
+  return false;
+}
+function push(layer) {
+  const { stack } = store;
+  if (stack.length === 0) {
+    window.addEventListener("keydown", store.snapshot, true);
+    window.addEventListener("pointerdown", store.snapshot, true);
+  }
+  const firstChild = stack.findIndex((other) => isDescendant(other, layer));
+  if (firstChild < 0) stack.push(layer);
+  else stack.splice(firstChild, 0, layer);
+}
+function pop(layer) {
+  const { stack } = store;
+  const index = stack.indexOf(layer);
+  if (index >= 0) stack.splice(index, 1);
+  if (stack.length === 0) {
+    window.removeEventListener("keydown", store.snapshot, true);
+    window.removeEventListener("pointerdown", store.snapshot, true);
+  }
+}
+const ParentLayerContext = React.createContext(null);
+function DismissableLayerScope({ layer, children }) {
+  return /* @__PURE__ */ jsx(ParentLayerContext.Provider, { value: layer, children });
 }
 function useDismissableLayer(opts) {
-  const { enabled, onDismiss, exclude } = opts;
+  const { enabled, onDismiss, exclude, pointerOutside = true, modal = false } = opts;
+  const parent = React.useContext(ParentLayerContext);
   const ref = React.useRef(null);
   const onDismissRef = React.useRef(onDismiss);
   const excludeRef = React.useRef(exclude);
@@ -17,32 +81,33 @@ function useDismissableLayer(opts) {
   });
   React.useEffect(() => {
     if (!enabled) return;
-    stack.push(ref);
+    store.info.set(ref, { parent, modal });
+    push(ref);
     function onPointerDown(event) {
       const target = event.target;
-      if (!target) return;
+      if (!(target instanceof Node)) return;
       if (ref.current && ref.current.contains(target)) return;
       for (const r of excludeRef.current ?? []) {
         if (r.current && r.current.contains(target)) return;
       }
-      if (isInsideHigherLayer(ref, target)) return;
-      onDismissRef.current(event);
+      if (isPointerOutside(ref, event)) onDismissRef.current(event);
     }
     function onKeyDown(event) {
-      if (event.key === "Escape" && stack[stack.length - 1] === ref) onDismissRef.current(event);
+      if (event.key === "Escape" && ownsEscape(ref, event)) onDismissRef.current(event);
     }
-    document.addEventListener("pointerdown", onPointerDown, true);
+    if (pointerOutside) document.addEventListener("pointerdown", onPointerDown, true);
     document.addEventListener("keydown", onKeyDown);
     return () => {
-      const index = stack.indexOf(ref);
-      if (index >= 0) stack.splice(index, 1);
+      pop(ref);
       document.removeEventListener("pointerdown", onPointerDown, true);
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [enabled]);
+  }, [enabled, pointerOutside, modal, parent]);
   return ref;
 }
 export {
+  DismissableLayerScope,
+  LAYER_IGNORE_ATTR,
   useDismissableLayer
 };
 //# sourceMappingURL=dismissable-layer.js.map

package/dist/primitives/dismissable-layer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/dismissable-layer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\ntype LayerRef = React.RefObject<HTMLDivElement | null>;\n\n// The open layers, oldest first. An overlay opened inside another (a Select in\n// a Dialog, a Popover in a Drawer) is portaled out of its parent's subtree, so\n// \"outside the parent\" would include it: the stack is what tells a nested\n// layer from the rest of the page.\nconst stack: LayerRef[] = [];\n\nfunction isInsideHigherLayer(own: LayerRef, target: Node): boolean {\n  const index = stack.indexOf(own);\n  // Not on the stack (a listener outliving its cleanup): nothing is above it.\n  if (index < 0) return false;\n  return stack.slice(index + 1).some((layer) => layer.current?.contains(target) ?? false);\n}\n\n/** Why a layer is being dismissed: the event itself, for a caller that treats keys and pointers apart. */\nexport type DismissEvent = PointerEvent | KeyboardEvent;\n\n/**\n * Calls `onDismiss` on Escape or on a pointer-down outside the layer — the\n * dep-light core of every overlay's \"click away to close\". Pass refs to any\n * nodes that should NOT count as outside (e.g. the trigger), via `exclude`.\n *\n * Layers stack, in the order they opened: Escape dismisses only the topmost\n * layer on this stack, and a pointer-down inside a layer opened above this one\n * is not outside it — so a Select's list inside a Dialog closes the list, not\n * the Dialog. The stack knows only the overlays built on this hook: a\n * `Drawer` or `CommandDialog` (Escape in their own React `onKeyDown`) is not\n * on it, and a menu that also closes on Escape in its React `onKeyDown` lets\n * the key bubble through React's tree to what holds it. Moving those onto the\n * stack is a follow-up.\n *\n * Mirrors the dismiss behaviour Rust expresses with a full-screen backdrop.\n */\nexport function useDismissableLayer(opts: {\n  enabled: boolean;\n  onDismiss: (event: DismissEvent) => void;\n  exclude?: Array<React.RefObject<Element | null>>;\n}): React.RefObject<HTMLDivElement | null> {\n  const { enabled, onDismiss, exclude } = opts;\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const onDismissRef = React.useRef(onDismiss);\n  // Callers pass `exclude` inline, a new array each render: read through a ref,\n  // or the effect would re-run and move this layer to the top of the stack.\n  const excludeRef = React.useRef(exclude);\n  React.useEffect(() => {\n    onDismissRef.current = onDismiss;\n    excludeRef.current = exclude;\n  });\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    stack.push(ref);\n\n    function onPointerDown(event: PointerEvent) {\n      const target = event.target as Node | null;\n      if (!target) return;\n      if (ref.current && ref.current.contains(target)) return;\n      for (const r of excludeRef.current ?? []) {\n        if (r.current && r.current.contains(target)) return;\n      }\n      if (isInsideHigherLayer(ref, target)) return;\n      onDismissRef.current(event);\n    }\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\" && stack[stack.length - 1] === ref) onDismissRef.current(event);\n    }\n\n    document.addEventListener(\"pointerdown\", onPointerDown, true);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      const index = stack.indexOf(ref);\n      if (index >= 0) stack.splice(index, 1);\n      document.removeEventListener(\"pointerdown\", onPointerDown, true);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [enabled]);\n\n  return ref;\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAQvB,MAAM,QAAoB,CAAC;AAE3B,SAAS,oBAAoB,KAAe,QAAuB;AACjE,QAAM,QAAQ,MAAM,QAAQ,GAAG;AAE/B,MAAI,QAAQ,EAAG,QAAO;AACtB,SAAO,MAAM,MAAM,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,MAAM,SAAS,SAAS,MAAM,KAAK,KAAK;AACxF;AAqBO,SAAS,oBAAoB,MAIO;AACzC,QAAM,EAAE,SAAS,WAAW,QAAQ,IAAI;AACxC,QAAM,MAAM,MAAM,OAA8B,IAAI;AACpD,QAAM,eAAe,MAAM,OAAO,SAAS;AAG3C,QAAM,aAAa,MAAM,OAAO,OAAO;AACvC,QAAM,UAAU,MAAM;AACpB,iBAAa,UAAU;AACvB,eAAW,UAAU;AAAA,EACvB,CAAC;AAED,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,KAAK,GAAG;AAEd,aAAS,cAAc,OAAqB;AAC1C,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AACb,UAAI,IAAI,WAAW,IAAI,QAAQ,SAAS,MAAM,EAAG;AACjD,iBAAW,KAAK,WAAW,WAAW,CAAC,GAAG;AACxC,YAAI,EAAE,WAAW,EAAE,QAAQ,SAAS,MAAM,EAAG;AAAA,MAC/C;AACA,UAAI,oBAAoB,KAAK,MAAM,EAAG;AACtC,mBAAa,QAAQ,KAAK;AAAA,IAC5B;AAEA,aAAS,UAAU,OAAsB;AACvC,UAAI,MAAM,QAAQ,YAAY,MAAM,MAAM,SAAS,CAAC,MAAM,IAAK,cAAa,QAAQ,KAAK;AAAA,IAC3F;AAEA,aAAS,iBAAiB,eAAe,eAAe,IAAI;AAC5D,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,GAAG;AAC/B,UAAI,SAAS,EAAG,OAAM,OAAO,OAAO,CAAC;AACrC,eAAS,oBAAoB,eAAe,eAAe,IAAI;AAC/D,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/primitives/dismissable-layer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\ntype LayerRef = React.RefObject<HTMLDivElement | null>;\n\ninterface LayerInfo {\n  /** The layer this one was rendered inside, from context — not the one below it on the stack. */\n  parent: LayerRef | null;\n  modal: boolean;\n}\n\ninterface LayerStore {\n  // The open layers, bottom first. An overlay opened inside another (a Select\n  // in a Dialog, a Popover in a Drawer) is portaled out of its parent's\n  // subtree, so \"outside the parent\" would include it: the stack is what tells\n  // a nested layer from the rest of the page.\n  stack: LayerRef[];\n  info: WeakMap<LayerRef, LayerInfo>;\n  // The stack as it stood when an event started its trip. By the time the\n  // document hears an Escape, a React `onKeyDown` on the way (a Select's, a\n  // consumer's) may already have closed the top layer and — a discrete update\n  // commits synchronously — popped it, so the layer below would find itself\n  // on top and close on the same key; a pointer-down can close an upper modal\n  // the same way and lift its barrier mid-flight. Taken in the window's\n  // capture phase, which runs before any DOM listener, React's root included.\n  seen: WeakMap<Event, LayerRef[]>;\n  snapshot: (event: Event) => void;\n}\n\n// One stack per page, not per module copy: a micro-frontend that bundles its\n// own uikit must see the host's layers, and the host its. Versioned, so a copy\n// with a different store shape keeps to itself instead of misreading this one.\nconst STORE_KEY = Symbol.for(\"@evinvest/uikit/dismissable-layers@1\");\n\nfunction isStore(value: unknown): value is LayerStore {\n  return typeof value === \"object\" && value !== null && \"stack\" in value && Array.isArray(value.stack);\n}\n\nfunction sharedStore(): LayerStore {\n  const existing: unknown = Reflect.get(globalThis, STORE_KEY);\n  if (isStore(existing)) return existing;\n  const store: LayerStore = {\n    stack: [],\n    info: new WeakMap(),\n    seen: new WeakMap(),\n    snapshot: (event) => {\n      if (!store.seen.has(event)) store.seen.set(event, store.stack.slice());\n    },\n  };\n  Reflect.set(globalThis, STORE_KEY, store);\n  return store;\n}\n\nconst store = sharedStore();\n\n/**\n * Elements carrying this attribute are outside every layer without being a\n * click away from any: a press there dismisses nothing (the toaster).\n */\nexport const LAYER_IGNORE_ATTR = \"data-dismissable-layer-ignore\";\n\nfunction layersAt(event: Event): LayerRef[] {\n  // An event dispatched where the window never sees it falls back to the live stack.\n  return store.seen.get(event) ?? store.stack;\n}\n\nfunction isPointerOutside(own: LayerRef, event: PointerEvent): boolean {\n  const target = event.target;\n  if (!(target instanceof Node)) return false;\n  const el = target instanceof Element ? target : target.parentElement;\n  if (el?.closest(`[${LAYER_IGNORE_ATTR}]`)) return false;\n  const layers = layersAt(event);\n  const index = layers.indexOf(own);\n  // Not on the stack (a listener outliving its cleanup): nothing is above it.\n  if (index < 0) return true;\n  const above = layers.slice(index + 1);\n  // A modal above is a barrier: whatever the press landed on — its scrim, its\n  // panel, a toast over it — the modal answers for it, not the layers below.\n  if (above.some((layer) => store.info.get(layer)?.modal === true)) return false;\n  return !above.some((layer) => layer.current?.contains(target) ?? false);\n}\n\nfunction ownsEscape(own: LayerRef, event: KeyboardEvent): boolean {\n  const layers = layersAt(event);\n  return layers[layers.length - 1] === own;\n}\n\nfunction isDescendant(layer: LayerRef, ancestor: LayerRef): boolean {\n  for (let p = store.info.get(layer)?.parent ?? null; p; p = store.info.get(p)?.parent ?? null) {\n    if (p === ancestor) return true;\n  }\n  return false;\n}\n\nfunction push(layer: LayerRef) {\n  const { stack } = store;\n  if (stack.length === 0) {\n    window.addEventListener(\"keydown\", store.snapshot, true);\n    window.addEventListener(\"pointerdown\", store.snapshot, true);\n  }\n  // Children's effects run before their parent's, so a layer opened in the\n  // same commit as one nested in it (`defaultOpen` on both, a shared `open`)\n  // arrives second: it goes below its first descendant, not on top.\n  const firstChild = stack.findIndex((other) => isDescendant(other, layer));\n  if (firstChild < 0) stack.push(layer);\n  else stack.splice(firstChild, 0, layer);\n}\n\nfunction pop(layer: LayerRef) {\n  const { stack } = store;\n  const index = stack.indexOf(layer);\n  if (index >= 0) stack.splice(index, 1);\n  if (stack.length === 0) {\n    window.removeEventListener(\"keydown\", store.snapshot, true);\n    window.removeEventListener(\"pointerdown\", store.snapshot, true);\n  }\n}\n\nconst ParentLayerContext = React.createContext<LayerRef | null>(null);\n\n/**\n * Marks `children` as rendered inside `layer` (the ref `useDismissableLayer`\n * returned), so a layer among them always stacks above it — even when both\n * open in the same commit. Wrap the overlay's content in it.\n */\nexport function DismissableLayerScope({ layer, children }: { layer: LayerRef; children?: React.ReactNode }) {\n  return <ParentLayerContext.Provider value={layer}>{children}</ParentLayerContext.Provider>;\n}\n\n/** Why a layer is being dismissed: the event itself, for a caller that treats keys and pointers apart. */\nexport type DismissEvent = PointerEvent | KeyboardEvent;\n\n/**\n * Calls `onDismiss` on Escape or on a pointer-down outside the layer — the\n * dep-light core of every overlay's \"click away to close\". Pass refs to any\n * nodes that should NOT count as outside (e.g. the trigger), via `exclude`.\n *\n * Layers stack: a layer rendered inside another's `DismissableLayerScope`\n * sits above it, the rest in the order they opened. Escape dismisses only the\n * topmost layer, and a pointer-down inside a layer above this one is not\n * outside it — so a Select's list inside a Dialog closes the list, not the\n * Dialog. The Escape goes to the layer that was on top when the key was\n * pressed, even if a handler on its way closed that layer first.\n *\n * `modal: true` makes the layer a barrier: while it is open, the layers below\n * ignore every pointer-down — a press on its scrim closes it alone. Elements\n * marked with `LAYER_IGNORE_ATTR` (the toaster) are outside no layer.\n *\n * `pointerOutside: false` keeps the layer on the stack (it takes Escape, and\n * the layers below see a pointer-down inside it as inside) but leaves outside\n * clicks to the caller — for an overlay whose own scrim is what \"outside\"\n * means (Drawer, CommandDialog).\n *\n * The stack is shared through `globalThis`, so every copy of this module on\n * the page sees one stack; parent links need one React context, so they hold\n * within a copy only.\n *\n * Mirrors the dismiss behaviour Rust expresses with a full-screen backdrop.\n */\nexport function useDismissableLayer(opts: {\n  enabled: boolean;\n  onDismiss: (event: DismissEvent) => void;\n  exclude?: Array<React.RefObject<Element | null>>;\n  /** Dismiss on a pointer-down outside the layer. Default `true`. */\n  pointerOutside?: boolean;\n  /** Bar the layers below from pointer-downs while open. Default `false`. */\n  modal?: boolean;\n}): React.RefObject<HTMLDivElement | null> {\n  const { enabled, onDismiss, exclude, pointerOutside = true, modal = false } = opts;\n  const parent = React.useContext(ParentLayerContext);\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const onDismissRef = React.useRef(onDismiss);\n  // Callers pass `exclude` inline, a new array each render: read through a ref,\n  // or the effect would re-run and move this layer to the top of the stack.\n  const excludeRef = React.useRef(exclude);\n  React.useEffect(() => {\n    onDismissRef.current = onDismiss;\n    excludeRef.current = exclude;\n  });\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    store.info.set(ref, { parent, modal });\n    push(ref);\n\n    function onPointerDown(event: PointerEvent) {\n      const target = event.target;\n      if (!(target instanceof Node)) return;\n      if (ref.current && ref.current.contains(target)) return;\n      for (const r of excludeRef.current ?? []) {\n        if (r.current && r.current.contains(target)) return;\n      }\n      if (isPointerOutside(ref, event)) onDismissRef.current(event);\n    }\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\" && ownsEscape(ref, event)) onDismissRef.current(event);\n    }\n\n    if (pointerOutside) document.addEventListener(\"pointerdown\", onPointerDown, true);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      pop(ref);\n      document.removeEventListener(\"pointerdown\", onPointerDown, true);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [enabled, pointerOutside, modal, parent]);\n\n  return ref;\n}\n"],"mappings":"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","names":["store"]}