@evinvest/uikit 0.12.1 → 0.14.0

package/README.md

@@ -78,7 +78,6 @@ state, never its appearance (`Red`) and never its selection (`Default`); see
 and carries EV's values: a single dark palette on `:root, .dark`. A consumer
 with two polarities writes its own sheet against the same names.
 
-`styles/tokens-legacy.css` is the pre-0.11 vocabulary layered on top —
 `text-main-mist`, `bg-sidebar`, `text-muted-foreground` and the rest keep
 working, and the current tokens are re-pointed at the old values so rendered
 colour is unchanged. Import it instead while migrating; it goes away once every
@@ -130,7 +129,7 @@ element across the two ports.
 | overlay placement | inline `position:fixed` + `data-side` | `Portal` + `useFloating` |
 | dismiss / focus trap | full-screen backdrop / native order | `useDismissableLayer` / `useFocusScope` |
 
-### Component inventory (all 60 bricks)
+### Component inventory (all 61 bricks)
 
 - **Tier A — static (22):** badge, button, button-group, card, input, textarea,
   label, field, separator, skeleton, spinner, kbd, table, container, alert,
@@ -142,13 +141,23 @@ element across the two ports.
   context-menu, menubar, navigation-menu, dialog, alert-dialog, sheet, drawer,
   select, command.
 - **Tier D — engines (5):** chart, calendar, sonner (toaster), form, resizable.
-- **Brand chrome — site shell (7):** header (marketing / compact density, plus
-  `hideNav`), footer, logo, and the shared status pages — `StatusScreen` with the
-  `NotFound` / `Forbidden` / `ServerError` presets (404 / 403 / 500).
+- **Site chrome (7):** header (marketing / compact density, plus `hideNav`),
+  footer, logo, and the shared status pages — `StatusScreen` with the `NotFound`
+  / `Forbidden` / `ServerError` presets (404 / 403 / 500). The kit ships no
+  artwork: `Logo` masks whatever `--brand-mark` / `--brand-aspect` the consumer
+  declares beside the palette, and the status pages use it for their mark.
+- **Features — composed screens (1):** terminal — a trading terminal over an
+  investment product's shares (`Terminal` grid placing each `TerminalPane` by
+  `TerminalArea`; `TerminalTicker` / `TickerStat`; `OrderBook` with
+  `OrderBookHead` / `OrderBookRow` / `OrderBookSpread`; `TradesTapeRow`;
+  `OrderForm` / `OrderFormRow` / `OrderFormSubmit`; `OpenOrdersEmpty`). Column
+  captions and every figure are the consumer's strings — the kit knows no
+  locale and no number format.
 
 The canonical variant set is the **superset** of the original cabinet (Rust) and
-landing (TS) sources — e.g. `Badge` keeps cabinet's `success` variant, `Button`
-keeps landing's `icon-sm`/`icon-lg` sizes.
+landing (TS) sources — e.g. `Badge` keeps cabinet's `success` variant, and
+`Button` keeps landing's square icon shape at every size, as the separate `icon`
+boolean it always was in Rust (see [docs/spec/variants.md](../../docs/spec/variants.md)).
 
 ## Limitations
 
@@ -166,6 +175,11 @@ measuring needs host-only `web-sys`). Known gaps:
   themed SVG host (emits `--color-*` from its config); `ChartTooltipContent` /
   `ChartLegendContent` are presentational and take explicit items. Draw series
   yourself inside the container.
+- **terminal:** no plotting engine and no state. `TerminalChart` is a sized
+  `relative` host that hands its element out (`ref` in TS, `id` in Rust) for a
+  consumer-chosen charting library to mount into; `OrderForm` only prevents the
+  submit's default — inputs, validation and the order itself are the
+  consumer's. The open-orders pane reuses `Table` and `Tabs`.
 - **calendar:** single month, single-date selection (no range/multi-month, no
   locale/dropdown features). Rust does manual date math; TS uses the built-in
   `Date`.

package/dist/index.d.ts

@@ -209,6 +209,15 @@ declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"s
 declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
 declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 
+declare const accentTextClasses: {
+    readonly trace: "text-accent-trace";
+    readonly debug: "text-accent-debug";
+    readonly info: "text-accent-info";
+    readonly warn: "text-accent-warn";
+    readonly error: "text-accent-error";
+};
+type Accent = keyof typeof accentTextClasses;
+
 declare const buttonVariantClasses: {
     readonly primary: "bg-primary text-on-primary hover:bg-primary/90";
     readonly secondary: "bg-secondary text-on-secondary hover:bg-secondary/80";
@@ -219,39 +228,42 @@ declare const buttonVariantClasses: {
 };
 type ButtonVariant = keyof typeof buttonVariantClasses;
 declare const buttonSizeClasses: {
-    readonly md: "h-9 px-4 py-[var(--control-py)] has-[>svg]:px-3";
     readonly xs: "h-7 gap-1 px-2 text-xs has-[>svg]:px-1.5";
     readonly sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5";
+    readonly md: "h-9 px-4 py-[var(--control-py)] has-[>svg]:px-3";
     readonly lg: "h-10 px-6 has-[>svg]:px-4";
     readonly xl: "px-[var(--control-px)] py-[var(--control-py)] text-[length:var(--control-text)]";
-    readonly icon: "h-9 aspect-square px-0";
-    readonly "icon-xs": "h-7 aspect-square px-0";
-    readonly "icon-sm": "h-8 aspect-square px-0";
-    readonly "icon-lg": "h-10 aspect-square px-0";
-    readonly "icon-xl": "aspect-square p-[var(--control-py)]";
 };
 type ButtonSize = keyof typeof buttonSizeClasses;
 
 interface ButtonVariantsOptions {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /** A square button holding a bare glyph; `size` still picks the magnitude. */
+    icon?: boolean;
+    /** Recolours the button at an accent rung; unset is the normal case. */
+    accent?: Accent | undefined;
     className?: string;
 }
 /**
  * Returns the fused canonical button class string. Reused by `pagination` so a
  * non-`Button` element can adopt the same styling, mirroring Rust's
  * `button_classes`.
+ *
+ * The accent fuses after the variant so it recolours whatever the variant set.
  */
-declare function buttonVariants({ variant, size, className, }?: ButtonVariantsOptions): string;
+declare function buttonVariants({ variant, size, icon, accent, className, }?: ButtonVariantsOptions): string;
 interface ButtonProps extends React.ComponentProps<"button"> {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    icon?: boolean;
+    accent?: Accent;
     asChild?: boolean;
     /** Renders an `<a>` wearing the button's classes — a link that looks like a
      *  call to action is still a link. */
     href?: string;
 }
-declare function Button({ className, variant, size, asChild, href, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ className, variant, size, icon, accent, asChild, href, ...props }: ButtonProps): React.JSX.Element;
 
 declare const buttonGroupOrientationClasses: {
     readonly horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none";
@@ -381,6 +393,28 @@ declare function Input({ className, type, ...props }: React.ComponentProps<"inpu
 
 declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
 
+/**
+ * The consumer's mark, painted as a CSS mask (`backgroundColor: currentColor` +
+ * `maskImage`) so a monochrome lockup follows the surrounding text colour
+ * instead of the artwork's baked-in fill. `withBackground` seats it on the brand
+ * field, keeping a chip consistent with a favicon.
+ *
+ * The kit ships no artwork. The mark is a design token like every colour: the
+ * consumer declares `--brand-mark` — a `url()` at its own asset — and
+ * `--brand-aspect` in the same sheet it declares the palette in (see
+ * `styles/tokens.css`). Undeclared, `maskImage` is invalid at computed-value time
+ * and the span paints as a solid block: loud, and nobody else's logo.
+ *
+ * Decorative by design (`aria-hidden`): every real call site has the brand name
+ * in adjacent text or on the wrapping link, and a mark announced twice is worse
+ * than one announced once.
+ */
+interface LogoProps {
+    className?: string;
+    withBackground?: boolean;
+}
+declare function Logo({ className, withBackground }: LogoProps): React.JSX.Element;
+
 declare const inputGroupAddonAligns: {
     readonly "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]";
     readonly "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]";
@@ -466,8 +500,10 @@ declare function PaginationItem(props: React.ComponentProps<"li">): React.JSX.El
 type PaginationLinkProps = {
     isActive?: boolean;
     size?: ButtonSize;
+    /** Page numbers are square glyphs; a "Previous"/"Next" label is not. */
+    icon?: boolean;
 } & React.ComponentProps<"a">;
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationLink({ className, isActive, size, icon, ...props }: PaginationLinkProps): React.JSX.Element;
 declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
 declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
@@ -482,22 +518,12 @@ declare function Skeleton({ className, ...props }: React.ComponentProps<"div">):
 declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
 
 /**
- * The shared 404 / 403 / 500 status surface.
- *
- * `StatusScreen` is the generic shell; `NotFound` / `Forbidden` / `ServerError`
- * are the ready-made pages with their copy baked in — a host renders those with
- * its own hrefs. Links default to a plain `<a>` (a full document load, which is
- * what you want off an error page); pass `linkComponent` (e.g. `next/link`) for
- * soft navigation from a client boundary.
- */
-type Accent = "trace" | "debug" | "info" | "warn" | "error";
-/**
- * A status CTA is a Button at the page's accent: the canonical button string,
- * then the mono/uppercase treatment the error pages wear, then the accent.
+ * A status CTA is a Button at the page's accent: the canonical button string for
+ * that variant and rung, then the mono/uppercase treatment the error pages wear.
  *
  * Exported because a host that renders its own action into `StatusScreen`'s
  * slot — a retry button wired to Next's `reset`, say — has to be able to match
- * the CTAs beside it, and the accent colour maps are ours.
+ * the CTAs beside it.
  */
 declare function statusCtaClass(accent: Accent, variant: ButtonVariant): string;
 interface StatusLinkData {
@@ -838,8 +864,8 @@ declare function CarouselItem({ className, ...props }: React.ComponentProps<"div
 declare function CarouselEdgeFade({ className, }: {
     className?: string;
 }): React.JSX.Element;
-declare function CarouselPrevious({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
-declare function CarouselNext({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, icon, ...props }: ButtonProps): React.JSX.Element;
+declare function CarouselNext({ className, variant, size, icon, ...props }: ButtonProps): React.JSX.Element;
 
 interface InputOTPProps extends Omit<React.ComponentProps<"input">, "value" | "defaultValue" | "onChange"> {
     maxLength: number;
@@ -1478,4 +1504,121 @@ interface ResizableHandleProps extends React.ComponentProps<"div"> {
 }
 declare function ResizableHandle({ className, index, withHandle, children, ...props }: ResizableHandleProps): React.JSX.Element;
 
-export { type Accent, Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, 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, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, 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, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSize, ItemTitle, type ItemVariant, Kbd, KbdGroup, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, type MenubarSubProps, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, 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, 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, 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, Textarea, 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, buttonVariants, cn, mergeRefs, navigationMenuTriggerStyle, statusCtaClass, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, useHoverIntent, usePresence, useRovingFocus, useSidebar };
+declare const terminalAreaClasses: {
+    readonly ticker: "lg:col-span-3 lg:row-start-1";
+    readonly chart: "lg:col-start-1 lg:row-start-2";
+    readonly book: "lg:col-start-2 lg:row-start-2";
+    readonly form: "lg:col-start-3 lg:row-start-2";
+    readonly orders: "lg:col-span-3 lg:row-start-3";
+};
+type TerminalArea = keyof typeof terminalAreaClasses;
+declare const bookSideClasses: {
+    readonly bid: "text-positive";
+    readonly ask: "text-accent-error";
+};
+type BookSide = keyof typeof bookSideClasses;
+declare const orderSideClasses: {
+    readonly buy: "bg-positive text-on-positive hover:bg-positive/90";
+    readonly sell: "bg-accent-error text-on-accent-error hover:bg-accent-error/90";
+};
+type OrderSide = keyof typeof orderSideClasses;
+
+/**
+ * The trading terminal — an order book over an investment product's shares,
+ * laid out like a spot exchange: ticker, then chart | book | order form, then
+ * the trader's own orders. Every pane is a slot; the chart host is empty on
+ * purpose (the plotting engine is the consumer's), the open-orders table is
+ * `Table`, the tabs over it are `Tabs`.
+ */
+/**
+ * The frame: a phone stacks the panes in DOM order, `lg` and up places them
+ * by `TerminalArea` on a viewport-bound grid.
+ */
+declare function Terminal({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+interface TerminalPaneProps extends React.ComponentProps<"section"> {
+    area: TerminalArea;
+}
+/**
+ * One cell of the frame. `area` is where it sits on the desktop grid;
+ * `TerminalPaneHeader` and `TerminalPaneBody` go inside.
+ */
+declare function TerminalPane({ area, className, ...props }: TerminalPaneProps): React.JSX.Element;
+declare function TerminalPaneHeader({ className, ...props }: React.ComponentProps<"header">): React.JSX.Element;
+/** The scrolling part of a pane. */
+declare function TerminalPaneBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * The sized host a plotting engine mounts into. Renders nothing itself; a
+ * consumer mounts its chart on the element (via `ref`) or fills it with
+ * children. `forwardRef` rather than a `ref` prop so the handle also reaches
+ * the element under React 18, where function components drop `ref`.
+ */
+declare const TerminalChart: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The strip across the top; holds `TickerStat`s. Already placed in the
+ * `ticker` slot.
+ */
+declare function TerminalTicker({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+interface TickerStatProps extends Omit<React.ComponentProps<"div">, "children"> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+}
+/**
+ * A labelled figure in the ticker. `className` lands on the figure, so a
+ * change figure passes its valence colour there.
+ */
+declare function TickerStat({ label, value, className, ...props }: TickerStatProps): React.JSX.Element;
+/** The book: `OrderBookHead`, then ask rows, `OrderBookSpread`, bid rows. */
+declare function OrderBook({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+interface OrderBookHeadProps extends Omit<React.ComponentProps<"div">, "children"> {
+    price: React.ReactNode;
+    size: React.ReactNode;
+    total: React.ReactNode;
+}
+/** The three column captions — price, size, total — in the consumer's words. */
+declare function OrderBookHead({ price, size, total, className, ...props }: OrderBookHeadProps): React.JSX.Element;
+interface OrderBookRowProps extends Omit<React.ComponentProps<"div">, "children"> {
+    side: BookSide;
+    price: React.ReactNode;
+    size: React.ReactNode;
+    total: React.ReactNode;
+    /**
+     * This level's cumulative size as a fraction of the deepest level shown
+     * (`0..=1`); it sizes the bar behind the figures.
+     */
+    depth?: number;
+}
+/** One price level. */
+declare function OrderBookRow({ side, price, size, total, depth, className, ...props }: OrderBookRowProps): React.JSX.Element;
+/**
+ * The line between asks and bids: the consumer passes the mid and the spread
+ * as it wants them formatted.
+ */
+declare function OrderBookSpread({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+interface TradesTapeRowProps extends Omit<React.ComponentProps<"div">, "children"> {
+    side: BookSide;
+    price: React.ReactNode;
+    size: React.ReactNode;
+    time: React.ReactNode;
+}
+/** One print in the tape: price coloured by the aggressor's side, then size and time. */
+declare function TradesTapeRow({ side, price, size, time, className, ...props }: TradesTapeRowProps): React.JSX.Element;
+/**
+ * The order form. Owns no state: the consumer wires the inputs and handles
+ * `onSubmit`; the default is prevented here so a submit never navigates.
+ */
+declare function OrderForm({ className, onSubmit, ...props }: React.ComponentProps<"form">): React.JSX.Element;
+interface OrderFormRowProps extends Omit<React.ComponentProps<"div">, "children"> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+}
+/** A label / figure line in the order summary — cost, fee, what is available. */
+declare function OrderFormRow({ label, value, className, ...props }: OrderFormRowProps): React.JSX.Element;
+interface OrderFormSubmitProps extends Omit<React.ComponentProps<"button">, "type"> {
+    side?: OrderSide;
+}
+/** The submit, filled in the colour of the intent. */
+declare function OrderFormSubmit({ side, className, ...props }: OrderFormSubmitProps): React.JSX.Element;
+/** The open-orders pane with nothing in it. */
+declare function OpenOrdersEmpty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { type Accent, Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, 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, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, 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, 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, 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, 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, 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, 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 };