@evinvest/uikit 0.26.0 → 0.29.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/README.md +148 -17
  2. package/dist/components/account-menu.js +70 -0
  3. package/dist/components/account-menu.js.map +1 -0
  4. package/dist/components/alert-dialog.js +4 -3
  5. package/dist/components/alert-dialog.js.map +1 -1
  6. package/dist/components/app-shell.js +11 -0
  7. package/dist/components/app-shell.js.map +1 -1
  8. package/dist/components/auth-wall.js +42 -0
  9. package/dist/components/auth-wall.js.map +1 -0
  10. package/dist/components/checkbox.js +2 -0
  11. package/dist/components/checkbox.js.map +1 -1
  12. package/dist/components/command.js +180 -25
  13. package/dist/components/command.js.map +1 -1
  14. package/dist/components/context-menu.js +8 -8
  15. package/dist/components/context-menu.js.map +1 -1
  16. package/dist/components/dialog.js +4 -3
  17. package/dist/components/dialog.js.map +1 -1
  18. package/dist/components/drawer.js +9 -5
  19. package/dist/components/drawer.js.map +1 -1
  20. package/dist/components/dropdown-menu.js +13 -10
  21. package/dist/components/dropdown-menu.js.map +1 -1
  22. package/dist/components/field.js +3 -8
  23. package/dist/components/field.js.map +1 -1
  24. package/dist/components/info-tip.js +2 -2
  25. package/dist/components/info-tip.js.map +1 -1
  26. package/dist/components/input.js +2 -0
  27. package/dist/components/input.js.map +1 -1
  28. package/dist/components/menubar.js +18 -5
  29. package/dist/components/menubar.js.map +1 -1
  30. package/dist/components/native-select.js +2 -0
  31. package/dist/components/native-select.js.map +1 -1
  32. package/dist/components/navigation-menu.js +2 -2
  33. package/dist/components/navigation-menu.js.map +1 -1
  34. package/dist/components/popover.js +2 -2
  35. package/dist/components/popover.js.map +1 -1
  36. package/dist/components/select.js +4 -2
  37. package/dist/components/select.js.map +1 -1
  38. package/dist/components/sheet.js +4 -3
  39. package/dist/components/sheet.js.map +1 -1
  40. package/dist/components/sonner.js +1 -0
  41. package/dist/components/sonner.js.map +1 -1
  42. package/dist/components/switch.js +2 -0
  43. package/dist/components/switch.js.map +1 -1
  44. package/dist/components/table.js +24 -7
  45. package/dist/components/table.js.map +1 -1
  46. package/dist/components/textarea.js +2 -0
  47. package/dist/components/textarea.js.map +1 -1
  48. package/dist/components/toggle-group.js +1 -1
  49. package/dist/components/toggle-group.js.map +1 -1
  50. package/dist/components/top-bar.js +21 -0
  51. package/dist/components/top-bar.js.map +1 -0
  52. package/dist/generated/command.js +2 -2
  53. package/dist/generated/command.js.map +1 -1
  54. package/dist/generated/context-menu.js +1 -1
  55. package/dist/generated/context-menu.js.map +1 -1
  56. package/dist/generated/dropdown-menu.js +1 -1
  57. package/dist/generated/dropdown-menu.js.map +1 -1
  58. package/dist/generated/menubar.js +1 -1
  59. package/dist/generated/menubar.js.map +1 -1
  60. package/dist/generated/table.js +20 -3
  61. package/dist/generated/table.js.map +1 -1
  62. package/dist/generated/toggle.js +2 -2
  63. package/dist/generated/toggle.js.map +1 -1
  64. package/dist/index.d.ts +179 -76
  65. package/dist/index.js +6 -4
  66. package/dist/primitives/dismissable-layer.js +80 -15
  67. package/dist/primitives/dismissable-layer.js.map +1 -1
  68. package/dist/primitives/labelable.js +24 -0
  69. package/dist/primitives/labelable.js.map +1 -0
  70. package/dist/primitives/use-roving-focus.js +13 -7
  71. package/dist/primitives/use-roving-focus.js.map +1 -1
  72. package/package.json +1 -1
  73. package/styles/ev.css +4 -2
  74. package/styles/theme.css +7 -0
  75. package/styles/tokens.css +15 -3
  76. package/dist/components/chart.js +0 -151
  77. package/dist/components/chart.js.map +0 -1
  78. package/dist/components/resizable.js +0 -193
  79. package/dist/components/resizable.js.map +0 -1
  80. package/dist/generated/chart.js +0 -9
  81. package/dist/generated/chart.js.map +0 -1
  82. package/dist/generated/resizable.js +0 -11
  83. package/dist/generated/resizable.js.map +0 -1
package/dist/index.d.ts CHANGED
@@ -71,6 +71,21 @@ interface PortalProviderProps {
71
71
  declare function PortalProvider({ container, children }: PortalProviderProps): React.JSX.Element;
72
72
  declare function Portal({ children, container }: PortalProps): React.ReactPortal | null;
73
73
 
74
+ type LayerRef = React.RefObject<HTMLDivElement | null>;
75
+ /**
76
+ * Elements carrying this attribute are outside every layer without being a
77
+ * click away from any: a press there dismisses nothing (the toaster).
78
+ */
79
+ declare const LAYER_IGNORE_ATTR = "data-dismissable-layer-ignore";
80
+ /**
81
+ * Marks `children` as rendered inside `layer` (the ref `useDismissableLayer`
82
+ * returned), so a layer among them always stacks above it — even when both
83
+ * open in the same commit. Wrap the overlay's content in it.
84
+ */
85
+ declare function DismissableLayerScope({ layer, children }: {
86
+ layer: LayerRef;
87
+ children?: React.ReactNode;
88
+ }): React.JSX.Element;
74
89
  /** Why a layer is being dismissed: the event itself, for a caller that treats keys and pointers apart. */
75
90
  type DismissEvent = PointerEvent | KeyboardEvent;
76
91
  /**
@@ -78,14 +93,25 @@ type DismissEvent = PointerEvent | KeyboardEvent;
78
93
  * dep-light core of every overlay's "click away to close". Pass refs to any
79
94
  * nodes that should NOT count as outside (e.g. the trigger), via `exclude`.
80
95
  *
81
- * Layers stack, in the order they opened: Escape dismisses only the topmost
82
- * layer on this stack, and a pointer-down inside a layer opened above this one
83
- * is not outside it — so a Select's list inside a Dialog closes the list, not
84
- * the Dialog. The stack knows only the overlays built on this hook: a
85
- * `Drawer` or `CommandDialog` (Escape in their own React `onKeyDown`) is not
86
- * on it, and a menu that also closes on Escape in its React `onKeyDown` lets
87
- * the key bubble through React's tree to what holds it. Moving those onto the
88
- * stack is a follow-up.
96
+ * Layers stack: a layer rendered inside another's `DismissableLayerScope`
97
+ * sits above it, the rest in the order they opened. Escape dismisses only the
98
+ * topmost layer, and a pointer-down inside a layer above this one is not
99
+ * outside it — so a Select's list inside a Dialog closes the list, not the
100
+ * Dialog. The Escape goes to the layer that was on top when the key was
101
+ * pressed, even if a handler on its way closed that layer first.
102
+ *
103
+ * `modal: true` makes the layer a barrier: while it is open, the layers below
104
+ * ignore every pointer-down — a press on its scrim closes it alone. Elements
105
+ * marked with `LAYER_IGNORE_ATTR` (the toaster) are outside no layer.
106
+ *
107
+ * `pointerOutside: false` keeps the layer on the stack (it takes Escape, and
108
+ * the layers below see a pointer-down inside it as inside) but leaves outside
109
+ * clicks to the caller — for an overlay whose own scrim is what "outside"
110
+ * means (Drawer, CommandDialog).
111
+ *
112
+ * The stack is shared through `globalThis`, so every copy of this module on
113
+ * the page sees one stack; parent links need one React context, so they hold
114
+ * within a copy only.
89
115
  *
90
116
  * Mirrors the dismiss behaviour Rust expresses with a full-screen backdrop.
91
117
  */
@@ -93,6 +119,10 @@ declare function useDismissableLayer(opts: {
93
119
  enabled: boolean;
94
120
  onDismiss: (event: DismissEvent) => void;
95
121
  exclude?: Array<React.RefObject<Element | null>>;
122
+ /** Dismiss on a pointer-down outside the layer. Default `true`. */
123
+ pointerOutside?: boolean;
124
+ /** Bar the layers below from pointer-downs while open. Default `false`. */
125
+ modal?: boolean;
96
126
  }): React.RefObject<HTMLDivElement | null>;
97
127
 
98
128
  type Side = "top" | "right" | "bottom" | "left";
@@ -196,10 +226,15 @@ declare function usePresence(present: boolean): {
196
226
  * Returns an `onKeyDown` to spread on the container and the active index; items
197
227
  * should set `tabIndex={index === activeIndex ? 0 : -1}`.
198
228
  *
229
+ * `count` may be a getter: containers whose items are only known from the DOM
230
+ * (menus with conditionally rendered or disabled items, inline sub-menus) pass
231
+ * one so the bound is read at keydown time — never during render, which keeps
232
+ * the hook safe under SSR.
233
+ *
199
234
  * Mirrors the keyboard navigation Rust drives with a focused-index signal.
200
235
  */
201
236
  declare function useRovingFocus(opts: {
202
- count: number;
237
+ count: number | (() => number);
203
238
  orientation?: "horizontal" | "vertical" | "both";
204
239
  loop?: boolean;
205
240
  initial?: number;
@@ -378,6 +413,17 @@ declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">
378
413
  declare function EmptyDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
379
414
  declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
380
415
 
416
+ /**
417
+ * What a section shows a caller it is not for: an `Empty` with a lock, a title, why,
418
+ * and an action slot. A guest gets the sign-in button there; a signed-in caller
419
+ * without the permission gets no action, or the host's own (request access).
420
+ */
421
+ interface AuthWallProps extends Omit<React.ComponentProps<"div">, "title"> {
422
+ title: React.ReactNode;
423
+ description: React.ReactNode;
424
+ }
425
+ declare function AuthWall({ title, description, children, ...props }: AuthWallProps): React.JSX.Element;
426
+
381
427
  declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
382
428
 
383
429
  declare const fieldOrientation: {
@@ -697,15 +743,74 @@ interface ServerErrorProps {
697
743
  /** 500 — server error. The "Try again" button runs `reset` or reloads the page. */
698
744
  declare function ServerError({ linkComponent, homeHref, reset }: ServerErrorProps): React.JSX.Element;
699
745
 
700
- declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
746
+ declare const tableVariants: {
747
+ readonly default: "[--table-px:initial] [--table-py:initial] [--table-head-ink:initial] [--table-head-text:initial] [--table-head-tracking:initial] [--table-head-case:initial]";
748
+ 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";
749
+ };
750
+ type TableVariant = keyof typeof tableVariants;
751
+ declare const tableDensities: {
752
+ readonly default: "[--table-dense-py:initial] [--table-head-h:initial]";
753
+ readonly compact: "[--table-dense-py:calc(var(--spacing)*1.5)] [--table-head-h:calc(var(--spacing)*8)]";
754
+ };
755
+ type TableDensity = keyof typeof tableDensities;
756
+ declare const tableAligns: {
757
+ readonly start: "text-start";
758
+ readonly end: "text-end tabular-nums";
759
+ };
760
+ type TableAlign = keyof typeof tableAligns;
761
+
762
+ interface TableProps extends React.ComponentProps<"table"> {
763
+ variant?: TableVariant;
764
+ density?: TableDensity;
765
+ }
766
+ declare function Table({ variant, density, className, ...props }: TableProps): React.JSX.Element;
767
+ /** The surface a `variant="card"` table sits in, edge to edge. */
768
+ declare function TableCard({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
701
769
  declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
702
770
  declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
703
771
  declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
704
772
  declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
705
- declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
706
- declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
773
+ interface TableHeadProps extends Omit<React.ComponentProps<"th">, "align"> {
774
+ align?: TableAlign;
775
+ }
776
+ declare function TableHead({ align, className, ...props }: TableHeadProps): React.JSX.Element;
777
+ interface TableCellProps extends Omit<React.ComponentProps<"td">, "align"> {
778
+ align?: TableAlign;
779
+ }
780
+ declare function TableCell({ align, className, ...props }: TableCellProps): React.JSX.Element;
707
781
  declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
708
782
 
783
+ type ListRowsVariant = "plain" | "card";
784
+ interface ListRowsProps extends React.ComponentProps<"ul"> {
785
+ variant?: ListRowsVariant;
786
+ }
787
+ declare function ListRows({ variant, className, ...props }: ListRowsProps): React.JSX.Element;
788
+ interface ListRowProps extends Omit<React.ComponentProps<"li">, "value"> {
789
+ /** The row's title. Omit it (and `value`) to lay the row out yourself. */
790
+ label?: React.ReactNode;
791
+ /** A caption a step down under the label. */
792
+ description?: React.ReactNode;
793
+ /** Trailing value, right-aligned and truncated rather than pushing the row wide. */
794
+ value?: React.ReactNode;
795
+ }
796
+ /**
797
+ * One row: label (and description) leading, value trailing, then `children`
798
+ * (a badge, an action). With neither `label` nor `value` the children are the
799
+ * whole row.
800
+ */
801
+ declare function ListRow({ label, description, value, className, children, ...props }: ListRowProps): React.JSX.Element;
802
+ interface ListRowLabelProps extends Omit<React.ComponentProps<"div">, "title"> {
803
+ description?: React.ReactNode;
804
+ }
805
+ /** The leading block on its own, for a row you compose by hand. */
806
+ declare function ListRowLabel({ description, className, children, ...props }: ListRowLabelProps): React.JSX.Element;
807
+ /**
808
+ * The trailing value. It shares the label's type step, so the muted tone and
809
+ * the lighter weight are what keep the label reading first; digits are tabular
810
+ * so a figure in one row lines up with the next.
811
+ */
812
+ declare function ListRowValue({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
813
+
709
814
  type AccordionType = "single" | "multiple";
710
815
  interface AccordionProps extends Omit<React.ComponentProps<"div">, "onChange"> {
711
816
  type?: AccordionType;
@@ -822,7 +927,7 @@ declare function TabsContent({ className, value, children, ...props }: TabsConte
822
927
 
823
928
  declare const toggleVariantClasses: {
824
929
  readonly bare: "bg-transparent";
825
- readonly outline: "border border-input bg-transparent shadow-xs hover:bg-hover hover:text-ink";
930
+ readonly outline: "border border-input bg-transparent shadow-xs hover:bg-hover hover:text-ink data-[state=on]:border-primary";
826
931
  };
827
932
  type ToggleVariant = keyof typeof toggleVariantClasses;
828
933
  declare const toggleSizeClasses: {
@@ -1104,15 +1209,18 @@ interface DropdownMenuTriggerProps extends React.ComponentProps<"button"> {
1104
1209
  declare function DropdownMenuTrigger({ asChild, onClick, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
1105
1210
  interface DropdownMenuContentProps extends React.ComponentProps<"div"> {
1106
1211
  sideOffset?: number;
1212
+ align?: "start" | "center" | "end";
1107
1213
  }
1108
- declare function DropdownMenuContent({ className, sideOffset, children, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
1214
+ declare function DropdownMenuContent({ className, sideOffset, align, children, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
1109
1215
  declare function DropdownMenuGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
1110
1216
  interface DropdownMenuItemProps extends React.ComponentProps<"div"> {
1217
+ /** Render the child (a link) as the item. */
1218
+ asChild?: boolean;
1111
1219
  inset?: boolean;
1112
1220
  variant?: "neutral" | "destructive";
1113
1221
  disabled?: boolean;
1114
1222
  }
1115
- declare function DropdownMenuItem({ className, inset, variant, disabled, onClick, onKeyDown, ...props }: DropdownMenuItemProps): React.JSX.Element;
1223
+ declare function DropdownMenuItem({ asChild, className, inset, variant, disabled, onClick, onKeyDown, ...props }: DropdownMenuItemProps): React.JSX.Element;
1116
1224
  interface DropdownMenuCheckboxItemProps extends React.ComponentProps<"div"> {
1117
1225
  checked?: boolean;
1118
1226
  disabled?: boolean;
@@ -1494,16 +1602,18 @@ interface CommandProps extends React.ComponentProps<"div"> {
1494
1602
  search?: string;
1495
1603
  defaultSearch?: string;
1496
1604
  onSearchChange?: (search: string) => void;
1605
+ shouldFilter?: boolean;
1497
1606
  }
1498
- declare function Command({ className, search, defaultSearch, onSearchChange, children, ...props }: CommandProps): React.JSX.Element;
1607
+ declare function Command({ className, search, defaultSearch, onSearchChange, shouldFilter, children, ref, onKeyDown, ...props }: CommandProps): React.JSX.Element;
1499
1608
  interface CommandDialogProps {
1500
1609
  open?: boolean;
1501
1610
  defaultOpen?: boolean;
1502
1611
  onOpenChange?: (open: boolean) => void;
1612
+ shouldFilter?: boolean;
1503
1613
  className?: string;
1504
1614
  children?: React.ReactNode;
1505
1615
  }
1506
- declare function CommandDialog({ open, defaultOpen, onOpenChange, className, children, }: CommandDialogProps): React.JSX.Element | null;
1616
+ declare function CommandDialog({ open, defaultOpen, onOpenChange, shouldFilter, className, children, }: CommandDialogProps): React.JSX.Element | null;
1507
1617
  declare function CommandInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
1508
1618
  declare function CommandList({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
1509
1619
  declare function CommandEmpty({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
@@ -1516,46 +1626,10 @@ interface CommandItemProps extends Omit<React.ComponentProps<"div">, "onSelect">
1516
1626
  disabled?: boolean;
1517
1627
  onSelect?: (value: string) => void;
1518
1628
  }
1519
- declare function CommandItem({ className, value, disabled, onSelect, children, ...props }: CommandItemProps): React.JSX.Element | null;
1629
+ declare function CommandItem({ className, value, disabled, onSelect, id: idProp, onPointerMove, children, ...props }: CommandItemProps): React.JSX.Element | null;
1520
1630
  declare function CommandSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
1521
1631
  declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
1522
1632
 
1523
- type ChartConfig = {
1524
- [k in string]: {
1525
- label?: React.ReactNode;
1526
- color?: string;
1527
- };
1528
- };
1529
- declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
1530
- config: ChartConfig;
1531
- }): React.JSX.Element;
1532
- declare const ChartStyle: ({ id, config }: {
1533
- id: string;
1534
- config: ChartConfig;
1535
- }) => React.JSX.Element | null;
1536
- type ChartItem = {
1537
- label?: React.ReactNode;
1538
- value?: React.ReactNode;
1539
- color?: string;
1540
- };
1541
- declare const ChartTooltip: ({ children }: {
1542
- children?: React.ReactNode;
1543
- }) => React.JSX.Element;
1544
- declare function ChartTooltipContent({ className, items, label, hideLabel, hideIndicator, labelClassName, }: React.ComponentProps<"div"> & {
1545
- items?: ChartItem[];
1546
- label?: React.ReactNode;
1547
- hideLabel?: boolean;
1548
- hideIndicator?: boolean;
1549
- labelClassName?: string;
1550
- }): React.JSX.Element | null;
1551
- declare const ChartLegend: ({ children }: {
1552
- children?: React.ReactNode;
1553
- }) => React.JSX.Element;
1554
- declare function ChartLegendContent({ className, hideIcon, items, }: React.ComponentProps<"div"> & {
1555
- hideIcon?: boolean;
1556
- items?: ChartItem[];
1557
- }): React.JSX.Element | null;
1558
-
1559
1633
  interface CalendarProps {
1560
1634
  /** The currently selected day, if any. */
1561
1635
  selected?: Date;
@@ -1753,24 +1827,6 @@ declare function FormControl({ error, ...props }: React.ComponentProps<typeof Sl
1753
1827
  declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
1754
1828
  declare function FormMessage({ className, children, ...props }: React.ComponentProps<"p">): React.JSX.Element | null;
1755
1829
 
1756
- type ResizableDirection = "horizontal" | "vertical";
1757
- interface ResizablePanelGroupProps extends React.ComponentProps<"div"> {
1758
- direction?: ResizableDirection;
1759
- keyboardStep?: number;
1760
- onLayout?: (sizes: number[]) => void;
1761
- }
1762
- declare function ResizablePanelGroup({ className, direction, keyboardStep, onLayout, children, ...props }: ResizablePanelGroupProps): React.JSX.Element;
1763
- interface ResizablePanelProps extends React.ComponentProps<"div"> {
1764
- index: number;
1765
- defaultSize?: number;
1766
- }
1767
- declare function ResizablePanel({ className, index, defaultSize, style, children, ...props }: ResizablePanelProps): React.JSX.Element;
1768
- interface ResizableHandleProps extends React.ComponentProps<"div"> {
1769
- index: number;
1770
- withHandle?: boolean;
1771
- }
1772
- declare function ResizableHandle({ className, index, withHandle, children, ...props }: ResizableHandleProps): React.JSX.Element;
1773
-
1774
1830
  declare const terminalAreaClasses: {
1775
1831
  readonly ticker: "lg:col-span-3 lg:row-start-1";
1776
1832
  readonly chart: "lg:col-start-1 lg:row-start-2";
@@ -1895,6 +1951,8 @@ interface AppShellProps extends React.ComponentProps<"div"> {
1895
1951
  rail?: React.ReactNode;
1896
1952
  /** The phone's tab bar — a `BottomTabBar`. Pinned to the viewport bottom below `breakpoint`. */
1897
1953
  tabBar?: React.ReactNode;
1954
+ /** A `TopBar`, pinned over the column from `breakpoint` up (a phone titles its screen with `MobileAppBar`). */
1955
+ topBar?: React.ReactNode;
1898
1956
  /** Strips above the page (`SystemBanner`s). An empty slot takes no room. */
1899
1957
  banner?: React.ReactNode;
1900
1958
  /** Default `lg`. */
@@ -1904,15 +1962,15 @@ interface AppShellProps extends React.ComponentProps<"div"> {
1904
1962
  }
1905
1963
  /**
1906
1964
  * The signed-in app's frame: a rail beside a content column on a wide screen, a
1907
- * bottom tab bar under it on a phone. Layout only — the nav, the banners and the
1908
- * page are slots, so the shell knows nothing about routes, roles or data.
1965
+ * bottom tab bar under it on a phone. Layout only — the nav, the top bar, the banners
1966
+ * and the page are slots, so the shell knows nothing about routes, roles or data.
1909
1967
  *
1910
1968
  * Fills the viewport less `--ev-shell-offset` (the room a host shell's own header
1911
1969
  * takes); the rail sticks under that offset at full remaining height and scrolls
1912
1970
  * by itself when it cannot fit. The column reserves the tab bar's height plus
1913
1971
  * the bottom safe area, so the bar never covers content.
1914
1972
  */
1915
- declare function AppShell({ rail, tabBar, banner, breakpoint, mainProps, className, children, ...props }: AppShellProps): React.JSX.Element;
1973
+ declare function AppShell({ rail, tabBar, topBar, banner, breakpoint, mainProps, className, children, ...props }: AppShellProps): React.JSX.Element;
1916
1974
 
1917
1975
  /**
1918
1976
  * How a {@link NavItem} decides it is the current one.
@@ -2112,6 +2170,51 @@ interface BottomTabBarProps extends Omit<React.ComponentProps<"nav">, "children"
2112
2170
  */
2113
2171
  declare function BottomTabBar({ items, pathname, linkComponent, onItemIntent, onNavigate, labels, className, ...props }: BottomTabBarProps): React.JSX.Element;
2114
2172
 
2173
+ interface TopBarProps extends React.ComponentProps<"header"> {
2174
+ /** The app switcher, or the service's name. */
2175
+ start?: React.ReactNode;
2176
+ /** Service stats, then an `AccountMenu` last. */
2177
+ end?: React.ReactNode;
2178
+ }
2179
+ /**
2180
+ * The wide screen's utility bar over the content column: who and where, never
2181
+ * product nav (that is the rail's). Layout only — `AppShell.topBar` pins it.
2182
+ */
2183
+ declare function TopBar({ start, end, className, ...props }: TopBarProps): React.JSX.Element;
2184
+
2185
+ interface AccountMenuLabels {
2186
+ /** Accessible name of the trigger. Default `"Account"`. */
2187
+ trigger?: string;
2188
+ /** Default `"Manage account"`. */
2189
+ manage?: string;
2190
+ /** Default `"Switch account"`. */
2191
+ switchAccount?: string;
2192
+ /** Default `"Sign out"`. */
2193
+ signOut?: string;
2194
+ }
2195
+ interface AccountMenuProps {
2196
+ account: {
2197
+ name?: string | null | undefined;
2198
+ email: string;
2199
+ };
2200
+ /** The account center, on the identity provider's origin; no item without it. */
2201
+ manageHref?: string | undefined;
2202
+ /** A full page load to the sign-in that offers the account chooser. */
2203
+ switchHref: string;
2204
+ /** The service's own entries, between the account center and switching. Draws `label`, `icon`, `external`. */
2205
+ groups?: readonly NavGroup[];
2206
+ onSignOut: () => void;
2207
+ linkComponent?: React.ElementType;
2208
+ labels?: AccountMenuLabels;
2209
+ className?: string;
2210
+ }
2211
+ /**
2212
+ * Who is signed in, top right. The order is fixed — the account, the account
2213
+ * center, the service's groups, switching, signing out — so every service's
2214
+ * menu reads the same; a service adds groups and nothing else.
2215
+ */
2216
+ declare function AccountMenu({ account, manageHref, switchHref, groups, onSignOut, linkComponent, labels, className, }: AccountMenuProps): React.JSX.Element;
2217
+
2115
2218
  interface MobileAppBarLabels {
2116
2219
  /** Accessible name of the back control. Default `"Back"`. */
2117
2220
  back?: string;
@@ -2307,4 +2410,4 @@ interface SettledProps extends Omit<React.ComponentProps<"div">, "children"> {
2307
2410
  */
2308
2411
  declare function Settled({ loading, skeleton, children, ...props }: SettledProps): React.JSX.Element;
2309
2412
 
2310
- 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 };
2413
+ 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, AuthWall, type AuthWallProps, 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, 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, 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 CHANGED
@@ -2,7 +2,7 @@ export { cn } from "./lib/cn.js";
2
2
  export { Slot } from "./primitives/slot.js";
3
3
  export { useControllableState } from "./primitives/use-controllable-state.js";
4
4
  export { Portal, PortalProvider } from "./primitives/portal.js";
5
- export { useDismissableLayer } from "./primitives/dismissable-layer.js";
5
+ export { useDismissableLayer, DismissableLayerScope, LAYER_IGNORE_ATTR } from "./primitives/dismissable-layer.js";
6
6
  export { useFloating } from "./primitives/use-floating.js";
7
7
  export { useFocusScope } from "./primitives/focus-scope.js";
8
8
  export { usePresence } from "./primitives/presence.js";
@@ -17,6 +17,7 @@ export { Button, buttonVariants } from "./components/button.js";
17
17
  export { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, } from "./components/button-group.js";
18
18
  export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, } from "./components/card.js";
19
19
  export { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, } from "./components/empty.js";
20
+ export { AuthWall } from "./components/auth-wall.js";
20
21
  export { Field, FieldSet, FieldLegend, FieldGroup, FieldContent, FieldLabel, FieldTitle, FieldDescription, FieldSeparator, FieldError, } from "./components/field.js";
21
22
  export { SectionDescriptor } from "./components/section-descriptor.js";
22
23
  export { Footer } from "./components/footer.js";
@@ -33,7 +34,8 @@ export { Separator } from "./components/separator.js";
33
34
  export { Skeleton } from "./components/skeleton.js";
34
35
  export { Spinner } from "./components/spinner.js";
35
36
  export { StatusScreen, NotFound, Forbidden, ServerError, statusCtaClass, } from "./components/status-screen.js";
36
- export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from "./components/table.js";
37
+ export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, TableCard, } from "./components/table.js";
38
+ export { ListRows, ListRow, ListRowLabel, ListRowValue, } from "./components/list-rows.js";
37
39
  export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "./components/accordion.js";
38
40
  export { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./components/collapsible.js";
39
41
  export { Container, } from "./components/container.js";
@@ -64,12 +66,10 @@ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
64
66
  export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "./components/select.js";
65
67
  export { NativeSelect, NativeSelectGroup, NativeSelectOption, } from "./components/native-select.js";
66
68
  export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./components/command.js";
67
- export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, } from "./components/chart.js";
68
69
  export { Calendar, } from "./components/calendar.js";
69
70
  export { DateTimePicker, } from "./components/date-time-picker.js";
70
71
  export { Toaster, toast, } from "./components/sonner.js";
71
72
  export { Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from "./components/form.js";
72
- export { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./components/resizable.js";
73
73
  export { OpenOrdersEmpty, OrderBook, OrderBookHead, OrderBookRow, OrderBookSpread, OrderForm, OrderFormRow, OrderFormSubmit, Terminal, TerminalChart, TerminalPane, TerminalPaneBody, TerminalPaneHeader, TerminalTicker, TickerStat, TradesTapeRow, } from "./components/terminal.js";
74
74
  export { AppShell } from "./components/app-shell.js";
75
75
  export { isNavItemActive, isPlainLeftClick, navItemMatch, resolveActiveNavItem, } from "./components/nav-model.js";
@@ -77,6 +77,8 @@ export { usePendingNavigation } from "./components/use-shell-nav.js";
77
77
  export { ShellNav } from "./components/shell-nav.js";
78
78
  export { NavBadge, NavDot } from "./components/nav-badge.js";
79
79
  export { BottomTabBar } from "./components/bottom-tab-bar.js";
80
+ export { TopBar } from "./components/top-bar.js";
81
+ export { AccountMenu } from "./components/account-menu.js";
80
82
  export { MobileAppBar } from "./components/mobile-app-bar.js";
81
83
  export { PageFrame, PageHeading, SectionLabel } from "./components/page-frame.js";
82
84
  export { SectionNav } from "./components/section-nav.js";
@@ -1,13 +1,77 @@
1
1
  "use client";
2
+ import { jsx } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
- const stack = [];
4
- function isInsideHigherLayer(own, target) {
5
- const index = stack.indexOf(own);
6
- if (index < 0) return false;
7
- return stack.slice(index + 1).some((layer) => layer.current?.contains(target) ?? false);
4
+ const STORE_KEY = /* @__PURE__ */ Symbol.for("@evinvest/uikit/dismissable-layers@1");
5
+ function isStore(value) {
6
+ return typeof value === "object" && value !== null && "stack" in value && Array.isArray(value.stack);
7
+ }
8
+ function sharedStore() {
9
+ const existing = Reflect.get(globalThis, STORE_KEY);
10
+ if (isStore(existing)) return existing;
11
+ const store2 = {
12
+ stack: [],
13
+ info: /* @__PURE__ */ new WeakMap(),
14
+ seen: /* @__PURE__ */ new WeakMap(),
15
+ snapshot: (event) => {
16
+ if (!store2.seen.has(event)) store2.seen.set(event, store2.stack.slice());
17
+ }
18
+ };
19
+ Reflect.set(globalThis, STORE_KEY, store2);
20
+ return store2;
21
+ }
22
+ const store = sharedStore();
23
+ const LAYER_IGNORE_ATTR = "data-dismissable-layer-ignore";
24
+ function layersAt(event) {
25
+ return store.seen.get(event) ?? store.stack;
26
+ }
27
+ function isPointerOutside(own, event) {
28
+ const target = event.target;
29
+ if (!(target instanceof Node)) return false;
30
+ const el = target instanceof Element ? target : target.parentElement;
31
+ if (el?.closest(`[${LAYER_IGNORE_ATTR}]`)) return false;
32
+ const layers = layersAt(event);
33
+ const index = layers.indexOf(own);
34
+ if (index < 0) return true;
35
+ const above = layers.slice(index + 1);
36
+ if (above.some((layer) => store.info.get(layer)?.modal === true)) return false;
37
+ return !above.some((layer) => layer.current?.contains(target) ?? false);
38
+ }
39
+ function ownsEscape(own, event) {
40
+ const layers = layersAt(event);
41
+ return layers[layers.length - 1] === own;
42
+ }
43
+ function isDescendant(layer, ancestor) {
44
+ for (let p = store.info.get(layer)?.parent ?? null; p; p = store.info.get(p)?.parent ?? null) {
45
+ if (p === ancestor) return true;
46
+ }
47
+ return false;
48
+ }
49
+ function push(layer) {
50
+ const { stack } = store;
51
+ if (stack.length === 0) {
52
+ window.addEventListener("keydown", store.snapshot, true);
53
+ window.addEventListener("pointerdown", store.snapshot, true);
54
+ }
55
+ const firstChild = stack.findIndex((other) => isDescendant(other, layer));
56
+ if (firstChild < 0) stack.push(layer);
57
+ else stack.splice(firstChild, 0, layer);
58
+ }
59
+ function pop(layer) {
60
+ const { stack } = store;
61
+ const index = stack.indexOf(layer);
62
+ if (index >= 0) stack.splice(index, 1);
63
+ if (stack.length === 0) {
64
+ window.removeEventListener("keydown", store.snapshot, true);
65
+ window.removeEventListener("pointerdown", store.snapshot, true);
66
+ }
67
+ }
68
+ const ParentLayerContext = React.createContext(null);
69
+ function DismissableLayerScope({ layer, children }) {
70
+ return /* @__PURE__ */ jsx(ParentLayerContext.Provider, { value: layer, children });
8
71
  }
9
72
  function useDismissableLayer(opts) {
10
- const { enabled, onDismiss, exclude } = opts;
73
+ const { enabled, onDismiss, exclude, pointerOutside = true, modal = false } = opts;
74
+ const parent = React.useContext(ParentLayerContext);
11
75
  const ref = React.useRef(null);
12
76
  const onDismissRef = React.useRef(onDismiss);
13
77
  const excludeRef = React.useRef(exclude);
@@ -17,32 +81,33 @@ function useDismissableLayer(opts) {
17
81
  });
18
82
  React.useEffect(() => {
19
83
  if (!enabled) return;
20
- stack.push(ref);
84
+ store.info.set(ref, { parent, modal });
85
+ push(ref);
21
86
  function onPointerDown(event) {
22
87
  const target = event.target;
23
- if (!target) return;
88
+ if (!(target instanceof Node)) return;
24
89
  if (ref.current && ref.current.contains(target)) return;
25
90
  for (const r of excludeRef.current ?? []) {
26
91
  if (r.current && r.current.contains(target)) return;
27
92
  }
28
- if (isInsideHigherLayer(ref, target)) return;
29
- onDismissRef.current(event);
93
+ if (isPointerOutside(ref, event)) onDismissRef.current(event);
30
94
  }
31
95
  function onKeyDown(event) {
32
- if (event.key === "Escape" && stack[stack.length - 1] === ref) onDismissRef.current(event);
96
+ if (event.key === "Escape" && ownsEscape(ref, event)) onDismissRef.current(event);
33
97
  }
34
- document.addEventListener("pointerdown", onPointerDown, true);
98
+ if (pointerOutside) document.addEventListener("pointerdown", onPointerDown, true);
35
99
  document.addEventListener("keydown", onKeyDown);
36
100
  return () => {
37
- const index = stack.indexOf(ref);
38
- if (index >= 0) stack.splice(index, 1);
101
+ pop(ref);
39
102
  document.removeEventListener("pointerdown", onPointerDown, true);
40
103
  document.removeEventListener("keydown", onKeyDown);
41
104
  };
42
- }, [enabled]);
105
+ }, [enabled, pointerOutside, modal, parent]);
43
106
  return ref;
44
107
  }
45
108
  export {
109
+ DismissableLayerScope,
110
+ LAYER_IGNORE_ATTR,
46
111
  useDismissableLayer
47
112
  };
48
113
  //# sourceMappingURL=dismissable-layer.js.map