@evinvest/uikit 0.23.0 → 0.25.0

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 (36) hide show
  1. package/README.md +151 -4
  2. package/dist/components/app-shell.js +85 -0
  3. package/dist/components/app-shell.js.map +1 -0
  4. package/dist/components/bottom-tab-bar.js +91 -0
  5. package/dist/components/bottom-tab-bar.js.map +1 -0
  6. package/dist/components/mobile-app-bar.js +51 -0
  7. package/dist/components/mobile-app-bar.js.map +1 -0
  8. package/dist/components/nav-badge.js +61 -0
  9. package/dist/components/nav-badge.js.map +1 -0
  10. package/dist/components/nav-link.js +50 -0
  11. package/dist/components/nav-link.js.map +1 -0
  12. package/dist/components/nav-model.js +55 -0
  13. package/dist/components/nav-model.js.map +1 -0
  14. package/dist/components/page-frame.js +92 -0
  15. package/dist/components/page-frame.js.map +1 -0
  16. package/dist/components/resource-error.js +47 -0
  17. package/dist/components/resource-error.js.map +1 -0
  18. package/dist/components/section-nav.js +86 -0
  19. package/dist/components/section-nav.js.map +1 -0
  20. package/dist/components/settled.js +19 -0
  21. package/dist/components/settled.js.map +1 -0
  22. package/dist/components/shell-icons.js +57 -0
  23. package/dist/components/shell-icons.js.map +1 -0
  24. package/dist/components/shell-nav.js +141 -0
  25. package/dist/components/shell-nav.js.map +1 -0
  26. package/dist/components/system-banner.js +53 -0
  27. package/dist/components/system-banner.js.map +1 -0
  28. package/dist/components/use-shell-nav.js +46 -0
  29. package/dist/components/use-shell-nav.js.map +1 -0
  30. package/dist/generated/button.js +4 -2
  31. package/dist/generated/button.js.map +1 -1
  32. package/dist/index.d.ts +421 -1
  33. package/dist/index.js +12 -0
  34. package/package.json +1 -1
  35. package/styles/theme.css +155 -1
  36. package/styles/tokens.css +157 -2
@@ -0,0 +1,46 @@
1
+ "use client";
2
+ import * as React from "react";
3
+ function usePendingNavigation(pathname) {
4
+ const [pending, setPending] = React.useState(null);
5
+ if (pending && pending.from !== pathname) setPending(null);
6
+ const pendingId = pending && pending.from === pathname ? pending.id : null;
7
+ const markPending = React.useCallback(
8
+ (id) => setPending({ id, from: pathname }),
9
+ [pathname]
10
+ );
11
+ return [pendingId, markPending];
12
+ }
13
+ function useSlideMarker(ref, at) {
14
+ const placed = React.useRef(void 0);
15
+ React.useLayoutEffect(() => {
16
+ const section = ref.current;
17
+ if (!section) return;
18
+ const place = () => {
19
+ const marker = section.querySelector('[data-slot="shell-nav-marker"]');
20
+ const row = section.querySelector('[aria-current="page"]');
21
+ const fresh = marker !== placed.current;
22
+ const entering = fresh && placed.current !== void 0;
23
+ placed.current = marker;
24
+ if (!marker || !row) return;
25
+ if (fresh) marker.style.transition = "none";
26
+ marker.style.transform = `translate(${row.offsetLeft}px, ${row.offsetTop}px)`;
27
+ marker.style.width = `${row.offsetWidth}px`;
28
+ marker.style.height = `${row.offsetHeight}px`;
29
+ if (fresh) {
30
+ void marker.offsetWidth;
31
+ marker.style.transition = "";
32
+ marker.dataset["placed"] = entering ? "entered" : "first";
33
+ }
34
+ };
35
+ place();
36
+ if (typeof ResizeObserver === "undefined") return;
37
+ const observer = new ResizeObserver(place);
38
+ observer.observe(section);
39
+ return () => observer.disconnect();
40
+ }, [ref, at]);
41
+ }
42
+ export {
43
+ usePendingNavigation,
44
+ useSlideMarker
45
+ };
46
+ //# sourceMappingURL=use-shell-nav.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/use-shell-nav.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * The optimistic half of a nav: the id of the item just clicked, until the\n * pathname catches up.\n *\n * A router that waits for the next page's payload changes the pathname 150–300ms\n * after the click — exactly the window in which a highlight that has not moved\n * reads as a click that did not land. So the clicked item is marked at once.\n *\n * The entry remembers the pathname it was made on, so the moment the pathname\n * changes it is stale by construction and the URL is the truth again. It is\n * cleared during render, not in an effect (an effect would paint one frame with\n * the URL's row marked and the stale one not), and cleared rather than ignored:\n * left behind, it would come back to life on a return to the page it was made\n * on. A click that never navigates is forgotten by the next one.\n */\nexport function usePendingNavigation(\n pathname: string,\n): readonly [pendingId: string | null, markPending: (id: string) => void] {\n const [pending, setPending] = React.useState<{ id: string; from: string } | null>(null);\n if (pending && pending.from !== pathname) setPending(null);\n const pendingId = pending && pending.from === pathname ? pending.id : null;\n const markPending = React.useCallback(\n (id: string) => setPending({ id, from: pathname }),\n [pathname],\n );\n return [pendingId, markPending] as const;\n}\n\n/**\n * Places the section's `[data-slot=\"shell-nav-marker\"]` over its\n * `[aria-current=\"page\"]` row, by measurement: rows differ in count and every\n * label is somebody's translation, and SSR cannot know those offsets (until the\n * first placement the row carries the fill itself — see motion.css). Re-runs\n * when `at` changes and whenever the section resizes — rows come and go, labels\n * change width with the locale or a font swap.\n */\nexport function useSlideMarker(\n ref: React.RefObject<HTMLElement | null>,\n at: string | null,\n): void {\n // Which marker node was last placed, so a re-run over the same node — a move,\n // a resize — is told apart from a marker that has just mounted. `undefined`\n // until the first run, so only a marker mounting AFTER the section settled\n // counts as entering (and fades); one hydration finds on its row cuts in.\n const placed = React.useRef<HTMLElement | null | undefined>(undefined);\n React.useLayoutEffect(() => {\n const section = ref.current;\n if (!section) return;\n const place = () => {\n const marker = section.querySelector<HTMLElement>('[data-slot=\"shell-nav-marker\"]');\n const row = section.querySelector<HTMLElement>('[aria-current=\"page\"]');\n const fresh = marker !== placed.current;\n const entering = fresh && placed.current !== undefined;\n placed.current = marker;\n if (!marker || !row) return;\n if (fresh) marker.style.transition = \"none\";\n marker.style.transform = `translate(${row.offsetLeft}px, ${row.offsetTop}px)`;\n marker.style.width = `${row.offsetWidth}px`;\n marker.style.height = `${row.offsetHeight}px`;\n if (fresh) {\n // A transition is decided by the style AFTER the change: flushing the\n // placement first makes it the starting point, so a new marker appears on\n // its row instead of sliding in from the section's origin.\n void marker.offsetWidth;\n marker.style.transition = \"\";\n marker.dataset[\"placed\"] = entering ? \"entered\" : \"first\";\n }\n };\n place();\n if (typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(place);\n observer.observe(section);\n return () => observer.disconnect();\n }, [ref, at]);\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAiBhB,SAAS,qBACd,UACwE;AACxE,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAA8C,IAAI;AACtF,MAAI,WAAW,QAAQ,SAAS,SAAU,YAAW,IAAI;AACzD,QAAM,YAAY,WAAW,QAAQ,SAAS,WAAW,QAAQ,KAAK;AACtE,QAAM,cAAc,MAAM;AAAA,IACxB,CAAC,OAAe,WAAW,EAAE,IAAI,MAAM,SAAS,CAAC;AAAA,IACjD,CAAC,QAAQ;AAAA,EACX;AACA,SAAO,CAAC,WAAW,WAAW;AAChC;AAUO,SAAS,eACd,KACA,IACM;AAKN,QAAM,SAAS,MAAM,OAAuC,MAAS;AACrE,QAAM,gBAAgB,MAAM;AAC1B,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,MAAM;AAClB,YAAM,SAAS,QAAQ,cAA2B,gCAAgC;AAClF,YAAM,MAAM,QAAQ,cAA2B,uBAAuB;AACtE,YAAM,QAAQ,WAAW,OAAO;AAChC,YAAM,WAAW,SAAS,OAAO,YAAY;AAC7C,aAAO,UAAU;AACjB,UAAI,CAAC,UAAU,CAAC,IAAK;AACrB,UAAI,MAAO,QAAO,MAAM,aAAa;AACrC,aAAO,MAAM,YAAY,aAAa,IAAI,UAAU,OAAO,IAAI,SAAS;AACxE,aAAO,MAAM,QAAQ,GAAG,IAAI,WAAW;AACvC,aAAO,MAAM,SAAS,GAAG,IAAI,YAAY;AACzC,UAAI,OAAO;AAIT,aAAK,OAAO;AACZ,eAAO,MAAM,aAAa;AAC1B,eAAO,QAAQ,QAAQ,IAAI,WAAW,YAAY;AAAA,MACpD;AAAA,IACF;AACA,UAAM;AACN,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,WAAW,IAAI,eAAe,KAAK;AACzC,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,KAAK,EAAE,CAAC;AACd;","names":[]}
@@ -12,14 +12,16 @@ const buttonSizeClasses = {
12
12
  "sm": "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
13
13
  "md": "h-9 px-4 py-[var(--control-py)] has-[>svg]:px-3",
14
14
  "lg": "h-10 px-6 has-[>svg]:px-4",
15
- "xl": "px-[var(--control-px)] py-[var(--control-py)] text-[length:var(--control-text)]"
15
+ "xl": "px-[var(--control-px)] py-[var(--control-py)] text-[length:var(--control-text)]",
16
+ "touch": "min-h-11 px-6 has-[>svg]:px-4"
16
17
  };
17
18
  const buttonIconSizeClasses = {
18
19
  "xs": "h-7 aspect-square px-0",
19
20
  "sm": "h-8 aspect-square px-0",
20
21
  "md": "h-9 aspect-square px-0",
21
22
  "lg": "h-10 aspect-square px-0",
22
- "xl": "aspect-square p-[var(--control-py)]"
23
+ "xl": "aspect-square p-[var(--control-py)]",
24
+ "touch": "size-11 px-0"
23
25
  };
24
26
  export {
25
27
  BUTTON_BASE,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/generated/button.ts"],"sourcesContent":["// AUTO-GENERATED by `nix run .#gen` — do not edit.\n\nexport const BUTTON_BASE = \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--control-radius)] text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error\";\n\nexport const buttonVariantClasses = {\n \"primary\": \"bg-primary text-on-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n \"secondary\": \"bg-secondary text-on-secondary hover:bg-secondary/80 focus-visible:ring-0 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n \"outline\": \"border border-input bg-transparent shadow-xs hover:bg-hover hover:text-ink\",\n \"ghost\": \"hover:bg-hover hover:text-ink\",\n \"destructive\": \"bg-accent-error text-on-accent-error hover:bg-accent-error/90 focus-visible:ring-accent-error/20 focus-visible:ring-0 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n \"link\": \"text-primary-ink underline-offset-4 hover:underline\",\n} as const;\nexport type ButtonVariant = keyof typeof buttonVariantClasses;\n\nexport const buttonSizeClasses = {\n \"xs\": \"h-7 gap-1 px-2 text-xs has-[>svg]:px-1.5\",\n \"sm\": \"h-8 gap-1.5 px-3 has-[>svg]:px-2.5\",\n \"md\": \"h-9 px-4 py-[var(--control-py)] has-[>svg]:px-3\",\n \"lg\": \"h-10 px-6 has-[>svg]:px-4\",\n \"xl\": \"px-[var(--control-px)] py-[var(--control-py)] text-[length:var(--control-text)]\",\n} as const;\nexport type ButtonSize = keyof typeof buttonSizeClasses;\n\nexport const buttonIconSizeClasses = {\n \"xs\": \"h-7 aspect-square px-0\",\n \"sm\": \"h-8 aspect-square px-0\",\n \"md\": \"h-9 aspect-square px-0\",\n \"lg\": \"h-10 aspect-square px-0\",\n \"xl\": \"aspect-square p-[var(--control-py)]\",\n} as const;\nexport type ButtonIconSize = keyof typeof buttonIconSizeClasses;\n"],"mappings":"AAEO,MAAM,cAAc;AAEpB,MAAM,uBAAuB;AAAA,EAClC,WAAW;AAAA,EACX,aAAa;AAAA,EACb,WAAW;AAAA,EACX,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AACV;AAGO,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;","names":[]}
1
+ {"version":3,"sources":["../../src/generated/button.ts"],"sourcesContent":["// AUTO-GENERATED by `nix run .#gen` — do not edit.\n\nexport const BUTTON_BASE = \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--control-radius)] text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error\";\n\nexport const buttonVariantClasses = {\n \"primary\": \"bg-primary text-on-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n \"secondary\": \"bg-secondary text-on-secondary hover:bg-secondary/80 focus-visible:ring-0 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n \"outline\": \"border border-input bg-transparent shadow-xs hover:bg-hover hover:text-ink\",\n \"ghost\": \"hover:bg-hover hover:text-ink\",\n \"destructive\": \"bg-accent-error text-on-accent-error hover:bg-accent-error/90 focus-visible:ring-accent-error/20 focus-visible:ring-0 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n \"link\": \"text-primary-ink underline-offset-4 hover:underline\",\n} as const;\nexport type ButtonVariant = keyof typeof buttonVariantClasses;\n\nexport const buttonSizeClasses = {\n \"xs\": \"h-7 gap-1 px-2 text-xs has-[>svg]:px-1.5\",\n \"sm\": \"h-8 gap-1.5 px-3 has-[>svg]:px-2.5\",\n \"md\": \"h-9 px-4 py-[var(--control-py)] has-[>svg]:px-3\",\n \"lg\": \"h-10 px-6 has-[>svg]:px-4\",\n \"xl\": \"px-[var(--control-px)] py-[var(--control-py)] text-[length:var(--control-text)]\",\n \"touch\": \"min-h-11 px-6 has-[>svg]:px-4\",\n} as const;\nexport type ButtonSize = keyof typeof buttonSizeClasses;\n\nexport const buttonIconSizeClasses = {\n \"xs\": \"h-7 aspect-square px-0\",\n \"sm\": \"h-8 aspect-square px-0\",\n \"md\": \"h-9 aspect-square px-0\",\n \"lg\": \"h-10 aspect-square px-0\",\n \"xl\": \"aspect-square p-[var(--control-py)]\",\n \"touch\": \"size-11 px-0\",\n} as const;\nexport type ButtonIconSize = keyof typeof buttonIconSizeClasses;\n"],"mappings":"AAEO,MAAM,cAAc;AAEpB,MAAM,uBAAuB;AAAA,EAClC,WAAW;AAAA,EACX,aAAa;AAAA,EACb,WAAW;AAAA,EACX,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AACV;AAGO,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAGO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;","names":[]}
package/dist/index.d.ts CHANGED
@@ -287,6 +287,7 @@ declare const buttonSizeClasses: {
287
287
  readonly md: "h-9 px-4 py-[var(--control-py)] has-[>svg]:px-3";
288
288
  readonly lg: "h-10 px-6 has-[>svg]:px-4";
289
289
  readonly xl: "px-[var(--control-px)] py-[var(--control-py)] text-[length:var(--control-text)]";
290
+ readonly touch: "min-h-11 px-6 has-[>svg]:px-4";
290
291
  };
291
292
  type ButtonSize = keyof typeof buttonSizeClasses;
292
293
 
@@ -1861,4 +1862,423 @@ declare function OrderFormSubmit({ side, className, ...props }: OrderFormSubmitP
1861
1862
  /** The open-orders pane with nothing in it. */
1862
1863
  declare function OpenOrdersEmpty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
1863
1864
 
1864
- 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, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, type BookSide, 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, NativeSelect, NativeSelectGroup, NativeSelectOption, type NativeSelectProps, type NativeSelectSize, 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, 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, ScrollArea, ScrollBar, type ScrollBarOrientation, type ScrollBarProps, Section, SectionDescriptor, type SectionDescriptorProps, SectionHead, type SectionHeadProps, 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, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, type SheetOverlayProps, type SheetProps, SheetTitle, SheetTrigger, type SheetTriggerProps, 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, 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, mergeRefs, navigationMenuTriggerStyle, statusCtaClass, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, useHoverIntent, usePresence, useRovingFocus, useSidebar };
1865
+ /** Where the shell swaps the bottom tab bar for the rail. */
1866
+ type ShellBreakpoint = "md" | "lg";
1867
+ interface AppShellProps extends React.ComponentProps<"div"> {
1868
+ /** The desktop rail — a `ShellNav`. Shown from `breakpoint` up. */
1869
+ rail?: React.ReactNode;
1870
+ /** The phone's tab bar — a `BottomTabBar`. Pinned to the viewport bottom below `breakpoint`. */
1871
+ tabBar?: React.ReactNode;
1872
+ /** Strips above the page (`SystemBanner`s). An empty slot takes no room. */
1873
+ banner?: React.ReactNode;
1874
+ /** Default `lg`. */
1875
+ breakpoint?: ShellBreakpoint;
1876
+ /** Props for the `<main>` the page renders into (an `id` for a skip link, say). */
1877
+ mainProps?: React.ComponentProps<"main">;
1878
+ }
1879
+ /**
1880
+ * The signed-in app's frame: a rail beside a content column on a wide screen, a
1881
+ * bottom tab bar under it on a phone. Layout only — the nav, the banners and the
1882
+ * page are slots, so the shell knows nothing about routes, roles or data.
1883
+ *
1884
+ * Fills the viewport less `--ev-shell-offset` (the room a host shell's own header
1885
+ * takes); the rail sticks under that offset at full remaining height and scrolls
1886
+ * by itself when it cannot fit. The column reserves the tab bar's height plus
1887
+ * the bottom safe area, so the bar never covers content.
1888
+ */
1889
+ declare function AppShell({ rail, tabBar, banner, breakpoint, mainProps, className, children, ...props }: AppShellProps): React.JSX.Element;
1890
+
1891
+ /**
1892
+ * How a {@link NavItem} decides it is the current one.
1893
+ *
1894
+ * - `"prefix"` (default) — the path is the item's own or lies beneath it, on a
1895
+ * segment boundary: `/invest` claims `/invest/arb` but not `/investors`. An
1896
+ * item at `/` is exact, or it would claim every page.
1897
+ * - `"exact"` — the path is the item's own and nothing beneath it.
1898
+ * - a function — whatever it answers for the path.
1899
+ */
1900
+ type NavMatch = "exact" | "prefix" | ((pathname: string) => boolean);
1901
+ /** State a row is rendered in; what `trailing` and `renderItem` are told. */
1902
+ interface NavItemState {
1903
+ active: boolean;
1904
+ /** Marked by a click whose navigation has not landed yet. */
1905
+ pending: boolean;
1906
+ }
1907
+ /** One destination, shared by the rail ({@link ShellNav}) and the tab bar. */
1908
+ interface NavItem {
1909
+ /** Stable key; also what `onNavigate` / `onItemIntent` hand back. */
1910
+ id: string;
1911
+ href: string;
1912
+ label: React.ReactNode;
1913
+ icon?: React.ComponentType<{
1914
+ className?: string;
1915
+ }>;
1916
+ /** A count (`NavBadge`, capped at 99+, `0` draws nothing) or your own node. */
1917
+ badge?: number | React.ReactNode;
1918
+ /** Anything after the label — a status chip; a function is told the row's state. */
1919
+ trailing?: React.ReactNode | ((state: NavItemState) => React.ReactNode);
1920
+ /**
1921
+ * Leaves the app: rendered as a plain `<a>` (never `linkComponent`), never
1922
+ * current, never marked pending — a `mailto:`, a docs site.
1923
+ */
1924
+ external?: boolean;
1925
+ /** Passed to the anchor; `_blank` gets `rel="noopener noreferrer"`. */
1926
+ target?: React.HTMLAttributeAnchorTarget;
1927
+ match?: NavMatch;
1928
+ /**
1929
+ * More paths this item claims, prefix-matched — the one tab standing in for
1930
+ * a whole group of rail rows (`["/profile", "/notifications"]`).
1931
+ */
1932
+ also?: readonly string[];
1933
+ /** Rendered, not focusable, never current. */
1934
+ disabled?: boolean;
1935
+ }
1936
+ /** A titled run of items; the rail draws one marker per group. */
1937
+ interface NavGroup {
1938
+ id: string;
1939
+ /** The eyebrow above the rows; also the list's accessible name. */
1940
+ label?: React.ReactNode;
1941
+ items: readonly NavItem[];
1942
+ }
1943
+ /**
1944
+ * How strongly `item` claims `pathname`, or `null` when it does not. Used to
1945
+ * pick ONE current item when several match — the rail and the tab bar each
1946
+ * draw a single marker, so two current rows is not a state they can show.
1947
+ */
1948
+ declare function navItemMatch(item: NavItem, pathname: string): number | null;
1949
+ /** Whether `item` claims `pathname` at all, regardless of its neighbours. */
1950
+ declare function isNavItemActive(item: NavItem, pathname: string): boolean;
1951
+ /** The single current item for `pathname`: the strongest claim, ties to the first. */
1952
+ declare function resolveActiveNavItem(items: Iterable<NavItem>, pathname: string): NavItem | undefined;
1953
+ /**
1954
+ * A click the app should handle in place. A modified or non-primary click opens
1955
+ * the page elsewhere (a tab, a window, the context menu) and the router lets the
1956
+ * browser have it, so the current row stays current; `defaultPrevented` is the
1957
+ * same courtesy to anything upstream that claimed the click.
1958
+ */
1959
+ declare function isPlainLeftClick(e: React.MouseEvent): boolean;
1960
+
1961
+ /**
1962
+ * The optimistic half of a nav: the id of the item just clicked, until the
1963
+ * pathname catches up.
1964
+ *
1965
+ * A router that waits for the next page's payload changes the pathname 150–300ms
1966
+ * after the click — exactly the window in which a highlight that has not moved
1967
+ * reads as a click that did not land. So the clicked item is marked at once.
1968
+ *
1969
+ * The entry remembers the pathname it was made on, so the moment the pathname
1970
+ * changes it is stale by construction and the URL is the truth again. It is
1971
+ * cleared during render, not in an effect (an effect would paint one frame with
1972
+ * the URL's row marked and the stale one not), and cleared rather than ignored:
1973
+ * left behind, it would come back to life on a return to the page it was made
1974
+ * on. A click that never navigates is forgotten by the next one.
1975
+ */
1976
+ declare function usePendingNavigation(pathname: string): readonly [pendingId: string | null, markPending: (id: string) => void];
1977
+
1978
+ interface NavLinkCallbacks {
1979
+ /** Hover or focus on an item — the moment to prefetch its route. */
1980
+ onItemIntent?: ((item: NavItem) => void) | undefined;
1981
+ /** A plain left click on an in-app item, after it is marked pending. */
1982
+ onNavigate?: ((item: NavItem) => void) | undefined;
1983
+ }
1984
+
1985
+ interface ShellNavLabels {
1986
+ /** Accessible name of the nav holding `groups`. Default `"Main"`. */
1987
+ primary?: string;
1988
+ /** Accessible name of the nav holding `footerGroups`. Default `"Account"`. */
1989
+ footer?: string;
1990
+ /** Spoken text of a numeric badge, given the real count. Default `"{n} new"`. */
1991
+ badge?: (count: number) => string;
1992
+ }
1993
+ interface ShellNavProps extends Omit<React.ComponentProps<"aside">, "children">, NavLinkCallbacks {
1994
+ groups: readonly NavGroup[];
1995
+ /** Pinned to the bottom of the rail (profile, notifications, settings). */
1996
+ footerGroups?: readonly NavGroup[];
1997
+ /** The router's current path — `usePathname()` in Next. */
1998
+ pathname: string;
1999
+ /** Your router's link (`next/link`); defaults to a plain `<a>`. */
2000
+ linkComponent?: React.ElementType;
2001
+ /** Above the groups — the brand lock-up. */
2002
+ header?: React.ReactNode;
2003
+ /** Below the footer groups — the signed-in account, a sign-out. */
2004
+ footer?: React.ReactNode;
2005
+ /** Replaces a row's content (icon, label, badge); the link, `aria-current` and the marker stay the kit's. */
2006
+ renderItem?: (item: NavItem, state: NavItemState) => React.ReactNode;
2007
+ labels?: ShellNavLabels;
2008
+ }
2009
+ /**
2010
+ * The app's left rail: data-driven groups, a footer block pinned to the bottom,
2011
+ * one sliding marker per group, and an optimistic mark on click so the row
2012
+ * answers the click rather than the router's round-trip.
2013
+ *
2014
+ * Exactly one row across the rail is current — the strongest claim on the path
2015
+ * (see {@link resolveActiveNavItem}) — so overlapping `prefix` items are safe.
2016
+ * Visibility (roles, flags) is the caller's: pass only the items to show.
2017
+ */
2018
+ declare function ShellNav({ groups, footerGroups, pathname, linkComponent, header, footer, renderItem, onItemIntent, onNavigate, labels, className, ...props }: ShellNavProps): React.JSX.Element;
2019
+
2020
+ type NavBadgeVariant = "pill" | "corner";
2021
+ interface NavBadgeProps extends Omit<React.ComponentProps<"span">, "children"> {
2022
+ count: number;
2023
+ /** Above this the badge shows `{max}+`. */
2024
+ max?: number;
2025
+ /**
2026
+ * The spoken text, given the REAL count — the one figure the cap throws away.
2027
+ * Default: `"{n} new"`.
2028
+ */
2029
+ label?: (count: number) => string;
2030
+ /**
2031
+ * `pill` sits in a row after the label (the rail); `corner` is the solid dot on
2032
+ * an icon's top-right corner (the tab bar) — its parent must be `relative`.
2033
+ */
2034
+ variant?: NavBadgeVariant;
2035
+ /** A pill on the marked row: inverted so it reads on the marker's fill. */
2036
+ active?: boolean;
2037
+ }
2038
+ /**
2039
+ * A count on a nav row or tab, capped so a neglected inbox cannot widen the
2040
+ * rail. Draws nothing for `0` or less.
2041
+ *
2042
+ * The visible figure is `aria-hidden` and the spoken one rides in an `sr-only`
2043
+ * span rather than an `aria-label`: a label on a plain span is not part of the
2044
+ * name the browser computes for the link around it, while text is — so the row
2045
+ * reads "Notifications, 150 new".
2046
+ */
2047
+ declare function NavBadge({ count, max, label, variant, active, className, ...props }: NavBadgeProps): React.JSX.Element | null;
2048
+ type NavDotTone = "primary" | "positive" | "warn" | "error";
2049
+ interface NavDotProps extends Omit<React.ComponentProps<"span">, "children"> {
2050
+ tone?: NavDotTone;
2051
+ /** Spoken text; without one the dot is decoration and hidden from AT. */
2052
+ label?: string;
2053
+ /** Pin to an icon's top-right corner (parent `relative`), as the tab bar does. */
2054
+ corner?: boolean;
2055
+ }
2056
+ /** A presence dot — "something here", no figure. */
2057
+ declare function NavDot({ tone, label, corner, className, ...props }: NavDotProps): React.JSX.Element;
2058
+
2059
+ interface BottomTabBarLabels {
2060
+ /** Accessible name of the bar. Default `"Main"`. */
2061
+ nav?: string;
2062
+ /** Spoken text of a numeric badge, given the real count. Default `"{n} new"`. */
2063
+ badge?: (count: number) => string;
2064
+ }
2065
+ interface BottomTabBarProps extends Omit<React.ComponentProps<"nav">, "children">, NavLinkCallbacks {
2066
+ /**
2067
+ * The tabs, in order. Five is the most a phone holds — every label gets a
2068
+ * fifth of ~390px. A tab standing in for several rail rows lists their paths
2069
+ * in `also`. `trailing` is not drawn here; `badge` sits on the icon's corner.
2070
+ */
2071
+ items: readonly NavItem[];
2072
+ pathname: string;
2073
+ linkComponent?: React.ElementType;
2074
+ labels?: BottomTabBarLabels;
2075
+ }
2076
+ /**
2077
+ * The mobile tab bar: equal tabs, one rule that slides between them, and a
2078
+ * corner badge. Position-agnostic — `AppShell` pins it to the bottom of the
2079
+ * viewport and hides it from its breakpoint up; the bar itself reserves the
2080
+ * bottom safe area under its `--shell-tab-bar-h`.
2081
+ *
2082
+ * The rule is a single node translated by whole tab widths (it is exactly one
2083
+ * tab wide, so the two cannot drift); on a route no tab claims it fades out
2084
+ * where it stands. That is why each tab is `min-w-0`: a long label must
2085
+ * truncate, never widen its tab off the rule's arithmetic.
2086
+ */
2087
+ declare function BottomTabBar({ items, pathname, linkComponent, onItemIntent, onNavigate, labels, className, ...props }: BottomTabBarProps): React.JSX.Element;
2088
+
2089
+ interface MobileAppBarLabels {
2090
+ /** Accessible name of the back control. Default `"Back"`. */
2091
+ back?: string;
2092
+ }
2093
+ type MobileAppBarBack = {
2094
+ href: string;
2095
+ } | {
2096
+ onClick: () => void;
2097
+ };
2098
+ interface MobileAppBarProps extends Omit<React.ComponentProps<"header">, "title"> {
2099
+ title: React.ReactNode;
2100
+ /** A pushed screen: a back link (`href`) or a back button (`onClick`); centres the title. */
2101
+ back?: MobileAppBarBack;
2102
+ /** Trailing action — Save, a menu. */
2103
+ right?: React.ReactNode;
2104
+ linkComponent?: React.ElementType;
2105
+ /** Hidden from this breakpoint up, where the page heading takes over. Default `lg`; `false` never hides. */
2106
+ hideFrom?: ShellBreakpoint | false;
2107
+ labels?: MobileAppBarLabels;
2108
+ }
2109
+ /**
2110
+ * The bar that titles a screen on a phone. A root screen puts the title flush
2111
+ * left with an optional action; a pushed one (`back`) centres it between the
2112
+ * back control and a matching spacer. Sticks under `--ev-shell-offset` and
2113
+ * arrives with the screen (`data-enter="rise"`), one step ahead of a
2114
+ * `PageFrame`'s sections.
2115
+ */
2116
+ declare function MobileAppBar({ title, back, right, linkComponent, hideFrom, labels, className, ...props }: MobileAppBarProps): React.JSX.Element;
2117
+
2118
+ type SectionLabelTone = "muted" | "accent";
2119
+ interface SectionLabelProps extends React.HTMLAttributes<HTMLElement> {
2120
+ as?: React.ElementType;
2121
+ /** `muted` labels a group or a section; `accent` announces a hero figure. */
2122
+ tone?: SectionLabelTone;
2123
+ }
2124
+ /** The tracked-uppercase label above a figure, a group or a section. */
2125
+ declare function SectionLabel({ as: Comp, tone, className, ...props }: SectionLabelProps): React.JSX.Element;
2126
+ interface PageHeadingProps extends Omit<React.ComponentProps<"header">, "title"> {
2127
+ title: React.ReactNode;
2128
+ /** What the screen is for, in a sentence. */
2129
+ description?: React.ReactNode;
2130
+ eyebrow?: React.ReactNode;
2131
+ /** The screen's own controls, on the right. */
2132
+ actions?: React.ReactNode;
2133
+ }
2134
+ /** The title row: eyebrow → title → description on the left, actions on the right. */
2135
+ declare function PageHeading({ title, description, eyebrow, actions, className, ...props }: PageHeadingProps): React.JSX.Element;
2136
+ type PageFrameWidth = "full" | "content";
2137
+ interface PageFrameProps extends Omit<React.ComponentProps<"div">, "title"> {
2138
+ /** Omit when the screen's heading is its own composition. */
2139
+ title?: React.ReactNode;
2140
+ description?: React.ReactNode;
2141
+ eyebrow?: React.ReactNode;
2142
+ actions?: React.ReactNode;
2143
+ /**
2144
+ * The bar titling the screen on a phone (`MobileAppBar`). With one, the heading
2145
+ * shows from `breakpoint` up only and the sections arrive a step after the bar.
2146
+ */
2147
+ appBar?: React.ReactNode;
2148
+ /** Default `lg`. */
2149
+ breakpoint?: ShellBreakpoint;
2150
+ /** `full` fills the column (the rail already bounds it); `content` caps it at a reading measure. */
2151
+ width?: PageFrameWidth;
2152
+ headingClassName?: string;
2153
+ }
2154
+ /**
2155
+ * The frame every screen sits in: one inset, one section rhythm, one title scale,
2156
+ * so moving between screens never reads as moving between products.
2157
+ *
2158
+ * Its sections arrive in sequence by CSS alone (`data-enter="stagger"`, see
2159
+ * motion.css): every direct child fades and rises `--ev-rise`, one
2160
+ * `--ev-stagger-section` after the previous, the heading first. Server-safe —
2161
+ * no motion library, no hydration needed for the entrance.
2162
+ */
2163
+ declare function PageFrame({ title, description, eyebrow, actions, appBar, breakpoint, width, headingClassName, className, style, children, ...props }: PageFrameProps): React.JSX.Element;
2164
+
2165
+ interface SectionNavItem {
2166
+ id: string;
2167
+ label: React.ReactNode;
2168
+ icon?: React.ComponentType<{
2169
+ className?: string;
2170
+ }>;
2171
+ /** A link (`?section=…`, a sub-route) instead of a button calling `onValueChange`. */
2172
+ href?: string;
2173
+ /** After the label — a count, a status chip. */
2174
+ trailing?: React.ReactNode;
2175
+ disabled?: boolean;
2176
+ }
2177
+ interface SectionNavGroup {
2178
+ id: string;
2179
+ label?: React.ReactNode;
2180
+ /** One line under the label saying what kind of thing lives here. */
2181
+ description?: React.ReactNode;
2182
+ items: readonly SectionNavItem[];
2183
+ }
2184
+ interface SectionNavLabels {
2185
+ /** Accessible name of the nav. Default `"Sections"`. */
2186
+ nav?: string;
2187
+ }
2188
+ interface SectionNavProps extends Omit<React.ComponentProps<"nav">, "children"> {
2189
+ groups: readonly SectionNavGroup[];
2190
+ /** The current section's id. */
2191
+ value: string;
2192
+ /** Called by button items (those without `href`), and by link items on click. */
2193
+ onValueChange?: (id: string) => void;
2194
+ linkComponent?: React.ElementType;
2195
+ labels?: SectionNavLabels;
2196
+ }
2197
+ /**
2198
+ * A screen's own section rail — settings panes, a document's chapters: grouped
2199
+ * rows, one current (`aria-current`), each a button or a link. The shell's rail
2200
+ * is `ShellNav`; this one lives inside a page, so it carries a tint rather than
2201
+ * the rail's solid marker and does not slide.
2202
+ */
2203
+ declare function SectionNav({ groups, value, onValueChange, linkComponent, labels, className, ...props }: SectionNavProps): React.JSX.Element;
2204
+
2205
+ interface ResourceErrorLabels {
2206
+ /** The retry button. Default `"Try again"`. */
2207
+ retry?: string;
2208
+ }
2209
+ interface ResourceErrorBase extends Omit<React.ComponentProps<"div">, "title" | "children"> {
2210
+ /** What failed, already in the reader's words — the kit formats no errors. */
2211
+ message: React.ReactNode;
2212
+ labels?: ResourceErrorLabels;
2213
+ }
2214
+ type ResourceErrorProps = ResourceErrorBase & ({
2215
+ /** One line under the page header — for dense screens where a block would push everything down. */
2216
+ variant?: "inline";
2217
+ title?: never;
2218
+ /** Re-run the read; boxes the line so the button and the message read as one thing. */
2219
+ onRetry?: () => void;
2220
+ /** The retry is in flight: the button is disabled and its icon spins. */
2221
+ retrying?: boolean;
2222
+ } | {
2223
+ /** The kit's `Alert` with a heading — for screens that address the reader. */
2224
+ variant: "alert";
2225
+ title?: React.ReactNode;
2226
+ onRetry?: never;
2227
+ retrying?: never;
2228
+ });
2229
+ /**
2230
+ * What a screen shows when a read it needed never arrived. Whether there is
2231
+ * anything to report stays with the caller — only it knows whether stale data is
2232
+ * still on screen, and a failed refresh over figures the reader can see belongs
2233
+ * beside them, not in place of them.
2234
+ */
2235
+ declare function ResourceError(props: ResourceErrorProps): React.JSX.Element;
2236
+
2237
+ type SystemBannerTone = "warn" | "info";
2238
+ interface SystemBannerLabels {
2239
+ /** The close button. Default `"Dismiss"`. */
2240
+ dismiss?: string;
2241
+ }
2242
+ interface SystemBannerProps extends Omit<React.ComponentProps<"div">, "title"> {
2243
+ /** `warn` — a platform state (maintenance, read-only); `info` — an announcement. */
2244
+ tone?: SystemBannerTone;
2245
+ /** Bold lead before the message. */
2246
+ title?: React.ReactNode;
2247
+ /** Replaces the tone's glyph; `null` drops it. */
2248
+ icon?: React.ReactNode;
2249
+ /** Shows a close button; remembering the dismissal is the caller's. */
2250
+ onDismiss?: () => void;
2251
+ labels?: SystemBannerLabels;
2252
+ }
2253
+ /**
2254
+ * A slim full-width strip above the page — presentation only: where its state
2255
+ * comes from, and whether a dismissal sticks, are the caller's. Put it in
2256
+ * `AppShell`'s `banner` slot; several stack with a gap.
2257
+ */
2258
+ declare function SystemBanner({ tone, title, icon, onDismiss, labels, className, children, ...props }: SystemBannerProps): React.JSX.Element;
2259
+
2260
+ interface SettledProps extends Omit<React.ComponentProps<"div">, "children"> {
2261
+ /** True while the data this surface needs is in flight. */
2262
+ loading: boolean;
2263
+ /** What stands in meanwhile — a `Skeleton` or a group of them. */
2264
+ skeleton: React.ReactNode;
2265
+ /** The content; also the empty and error states, guarded on the same condition. */
2266
+ children: React.ReactNode;
2267
+ }
2268
+ /**
2269
+ * The skeleton → content handover. Swapped in a single frame, a skeleton reads
2270
+ * as a flicker — the eye sees that something changed, not what. Here the
2271
+ * content fades and rises the last `--ev-rise` into place
2272
+ * (`data-state="revealed"`, motion.css).
2273
+ *
2274
+ * Deliberately not a cross-fade: the two would have to overlap, which means
2275
+ * taking one out of flow and animating a height, and the surface would jump
2276
+ * when the content is a different size. And no entrance when no skeleton was
2277
+ * shown — data already present on the first render cuts straight in; fading it
2278
+ * would invent a delay the data never had.
2279
+ *
2280
+ * `data-state`: `loading` → `revealed` after a skeleton, `ready` without one.
2281
+ */
2282
+ declare function Settled({ loading, skeleton, children, ...props }: SettledProps): React.JSX.Element;
2283
+
2284
+ 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 };
package/dist/index.js CHANGED
@@ -71,3 +71,15 @@ export { Toaster, toast, } from "./components/sonner.js";
71
71
  export { Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from "./components/form.js";
72
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
+ export { AppShell } from "./components/app-shell.js";
75
+ export { isNavItemActive, isPlainLeftClick, navItemMatch, resolveActiveNavItem, } from "./components/nav-model.js";
76
+ export { usePendingNavigation } from "./components/use-shell-nav.js";
77
+ export { ShellNav } from "./components/shell-nav.js";
78
+ export { NavBadge, NavDot } from "./components/nav-badge.js";
79
+ export { BottomTabBar } from "./components/bottom-tab-bar.js";
80
+ export { MobileAppBar } from "./components/mobile-app-bar.js";
81
+ export { PageFrame, PageHeading, SectionLabel } from "./components/page-frame.js";
82
+ export { SectionNav } from "./components/section-nav.js";
83
+ export { ResourceError } from "./components/resource-error.js";
84
+ export { SystemBanner } from "./components/system-banner.js";
85
+ export { Settled } from "./components/settled.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evinvest/uikit",
3
- "version": "0.23.0",
3
+ "version": "0.25.0",
4
4
  "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
5
5
  "license": "BlueOak-1.0.0",
6
6
  "publishConfig": {