@evinvest/uikit 0.12.0 → 0.13.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.
- package/README.md +13 -1
- package/dist/index.d.ts +118 -1
- package/dist/index.js +220 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/tokens-legacy.css +1 -0
package/README.md
CHANGED
|
@@ -130,7 +130,7 @@ element across the two ports.
|
|
|
130
130
|
| overlay placement | inline `position:fixed` + `data-side` | `Portal` + `useFloating` |
|
|
131
131
|
| dismiss / focus trap | full-screen backdrop / native order | `useDismissableLayer` / `useFocusScope` |
|
|
132
132
|
|
|
133
|
-
### Component inventory (all
|
|
133
|
+
### Component inventory (all 61 bricks)
|
|
134
134
|
|
|
135
135
|
- **Tier A — static (22):** badge, button, button-group, card, input, textarea,
|
|
136
136
|
label, field, separator, skeleton, spinner, kbd, table, container, alert,
|
|
@@ -145,6 +145,13 @@ element across the two ports.
|
|
|
145
145
|
- **Brand chrome — site shell (7):** header (marketing / compact density, plus
|
|
146
146
|
`hideNav`), footer, logo, and the shared status pages — `StatusScreen` with the
|
|
147
147
|
`NotFound` / `Forbidden` / `ServerError` presets (404 / 403 / 500).
|
|
148
|
+
- **Features — composed screens (1):** terminal — a trading terminal over an
|
|
149
|
+
investment product's shares (`Terminal` grid placing each `TerminalPane` by
|
|
150
|
+
`TerminalArea`; `TerminalTicker` / `TickerStat`; `OrderBook` with
|
|
151
|
+
`OrderBookHead` / `OrderBookRow` / `OrderBookSpread`; `TradesTapeRow`;
|
|
152
|
+
`OrderForm` / `OrderFormRow` / `OrderFormSubmit`; `OpenOrdersEmpty`). Column
|
|
153
|
+
captions and every figure are the consumer's strings — the kit knows no
|
|
154
|
+
locale and no number format.
|
|
148
155
|
|
|
149
156
|
The canonical variant set is the **superset** of the original cabinet (Rust) and
|
|
150
157
|
landing (TS) sources — e.g. `Badge` keeps cabinet's `success` variant, `Button`
|
|
@@ -166,6 +173,11 @@ measuring needs host-only `web-sys`). Known gaps:
|
|
|
166
173
|
themed SVG host (emits `--color-*` from its config); `ChartTooltipContent` /
|
|
167
174
|
`ChartLegendContent` are presentational and take explicit items. Draw series
|
|
168
175
|
yourself inside the container.
|
|
176
|
+
- **terminal:** no plotting engine and no state. `TerminalChart` is a sized
|
|
177
|
+
`relative` host that hands its element out (`ref` in TS, `id` in Rust) for a
|
|
178
|
+
consumer-chosen charting library to mount into; `OrderForm` only prevents the
|
|
179
|
+
submit's default — inputs, validation and the order itself are the
|
|
180
|
+
consumer's. The open-orders pane reuses `Table` and `Tabs`.
|
|
169
181
|
- **calendar:** single month, single-date selection (no range/multi-month, no
|
|
170
182
|
locale/dropdown features). Rust does manual date math; TS uses the built-in
|
|
171
183
|
`Date`.
|
package/dist/index.d.ts
CHANGED
|
@@ -1478,4 +1478,121 @@ interface ResizableHandleProps extends React.ComponentProps<"div"> {
|
|
|
1478
1478
|
}
|
|
1479
1479
|
declare function ResizableHandle({ className, index, withHandle, children, ...props }: ResizableHandleProps): React.JSX.Element;
|
|
1480
1480
|
|
|
1481
|
-
|
|
1481
|
+
declare const terminalAreaClasses: {
|
|
1482
|
+
readonly ticker: "lg:col-span-3 lg:row-start-1";
|
|
1483
|
+
readonly chart: "lg:col-start-1 lg:row-start-2";
|
|
1484
|
+
readonly book: "lg:col-start-2 lg:row-start-2";
|
|
1485
|
+
readonly form: "lg:col-start-3 lg:row-start-2";
|
|
1486
|
+
readonly orders: "lg:col-span-3 lg:row-start-3";
|
|
1487
|
+
};
|
|
1488
|
+
type TerminalArea = keyof typeof terminalAreaClasses;
|
|
1489
|
+
declare const bookSideClasses: {
|
|
1490
|
+
readonly bid: "text-positive";
|
|
1491
|
+
readonly ask: "text-accent-error";
|
|
1492
|
+
};
|
|
1493
|
+
type BookSide = keyof typeof bookSideClasses;
|
|
1494
|
+
declare const orderSideClasses: {
|
|
1495
|
+
readonly buy: "bg-positive text-on-positive hover:bg-positive/90";
|
|
1496
|
+
readonly sell: "bg-accent-error text-on-accent-error hover:bg-accent-error/90";
|
|
1497
|
+
};
|
|
1498
|
+
type OrderSide = keyof typeof orderSideClasses;
|
|
1499
|
+
|
|
1500
|
+
/**
|
|
1501
|
+
* The trading terminal — an order book over an investment product's shares,
|
|
1502
|
+
* laid out like a spot exchange: ticker, then chart | book | order form, then
|
|
1503
|
+
* the trader's own orders. Every pane is a slot; the chart host is empty on
|
|
1504
|
+
* purpose (the plotting engine is the consumer's), the open-orders table is
|
|
1505
|
+
* `Table`, the tabs over it are `Tabs`.
|
|
1506
|
+
*/
|
|
1507
|
+
/**
|
|
1508
|
+
* The frame: a phone stacks the panes in DOM order, `lg` and up places them
|
|
1509
|
+
* by `TerminalArea` on a viewport-bound grid.
|
|
1510
|
+
*/
|
|
1511
|
+
declare function Terminal({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1512
|
+
interface TerminalPaneProps extends React.ComponentProps<"section"> {
|
|
1513
|
+
area: TerminalArea;
|
|
1514
|
+
}
|
|
1515
|
+
/**
|
|
1516
|
+
* One cell of the frame. `area` is where it sits on the desktop grid;
|
|
1517
|
+
* `TerminalPaneHeader` and `TerminalPaneBody` go inside.
|
|
1518
|
+
*/
|
|
1519
|
+
declare function TerminalPane({ area, className, ...props }: TerminalPaneProps): React.JSX.Element;
|
|
1520
|
+
declare function TerminalPaneHeader({ className, ...props }: React.ComponentProps<"header">): React.JSX.Element;
|
|
1521
|
+
/** The scrolling part of a pane. */
|
|
1522
|
+
declare function TerminalPaneBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1523
|
+
/**
|
|
1524
|
+
* The sized host a plotting engine mounts into. Renders nothing itself; a
|
|
1525
|
+
* consumer mounts its chart on the element (via `ref`) or fills it with
|
|
1526
|
+
* children. `forwardRef` rather than a `ref` prop so the handle also reaches
|
|
1527
|
+
* the element under React 18, where function components drop `ref`.
|
|
1528
|
+
*/
|
|
1529
|
+
declare const TerminalChart: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1530
|
+
/**
|
|
1531
|
+
* The strip across the top; holds `TickerStat`s. Already placed in the
|
|
1532
|
+
* `ticker` slot.
|
|
1533
|
+
*/
|
|
1534
|
+
declare function TerminalTicker({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1535
|
+
interface TickerStatProps extends Omit<React.ComponentProps<"div">, "children"> {
|
|
1536
|
+
label: React.ReactNode;
|
|
1537
|
+
value: React.ReactNode;
|
|
1538
|
+
}
|
|
1539
|
+
/**
|
|
1540
|
+
* A labelled figure in the ticker. `className` lands on the figure, so a
|
|
1541
|
+
* change figure passes its valence colour there.
|
|
1542
|
+
*/
|
|
1543
|
+
declare function TickerStat({ label, value, className, ...props }: TickerStatProps): React.JSX.Element;
|
|
1544
|
+
/** The book: `OrderBookHead`, then ask rows, `OrderBookSpread`, bid rows. */
|
|
1545
|
+
declare function OrderBook({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1546
|
+
interface OrderBookHeadProps extends Omit<React.ComponentProps<"div">, "children"> {
|
|
1547
|
+
price: React.ReactNode;
|
|
1548
|
+
size: React.ReactNode;
|
|
1549
|
+
total: React.ReactNode;
|
|
1550
|
+
}
|
|
1551
|
+
/** The three column captions — price, size, total — in the consumer's words. */
|
|
1552
|
+
declare function OrderBookHead({ price, size, total, className, ...props }: OrderBookHeadProps): React.JSX.Element;
|
|
1553
|
+
interface OrderBookRowProps extends Omit<React.ComponentProps<"div">, "children"> {
|
|
1554
|
+
side: BookSide;
|
|
1555
|
+
price: React.ReactNode;
|
|
1556
|
+
size: React.ReactNode;
|
|
1557
|
+
total: React.ReactNode;
|
|
1558
|
+
/**
|
|
1559
|
+
* This level's cumulative size as a fraction of the deepest level shown
|
|
1560
|
+
* (`0..=1`); it sizes the bar behind the figures.
|
|
1561
|
+
*/
|
|
1562
|
+
depth?: number;
|
|
1563
|
+
}
|
|
1564
|
+
/** One price level. */
|
|
1565
|
+
declare function OrderBookRow({ side, price, size, total, depth, className, ...props }: OrderBookRowProps): React.JSX.Element;
|
|
1566
|
+
/**
|
|
1567
|
+
* The line between asks and bids: the consumer passes the mid and the spread
|
|
1568
|
+
* as it wants them formatted.
|
|
1569
|
+
*/
|
|
1570
|
+
declare function OrderBookSpread({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1571
|
+
interface TradesTapeRowProps extends Omit<React.ComponentProps<"div">, "children"> {
|
|
1572
|
+
side: BookSide;
|
|
1573
|
+
price: React.ReactNode;
|
|
1574
|
+
size: React.ReactNode;
|
|
1575
|
+
time: React.ReactNode;
|
|
1576
|
+
}
|
|
1577
|
+
/** One print in the tape: price coloured by the aggressor's side, then size and time. */
|
|
1578
|
+
declare function TradesTapeRow({ side, price, size, time, className, ...props }: TradesTapeRowProps): React.JSX.Element;
|
|
1579
|
+
/**
|
|
1580
|
+
* The order form. Owns no state: the consumer wires the inputs and handles
|
|
1581
|
+
* `onSubmit`; the default is prevented here so a submit never navigates.
|
|
1582
|
+
*/
|
|
1583
|
+
declare function OrderForm({ className, onSubmit, ...props }: React.ComponentProps<"form">): React.JSX.Element;
|
|
1584
|
+
interface OrderFormRowProps extends Omit<React.ComponentProps<"div">, "children"> {
|
|
1585
|
+
label: React.ReactNode;
|
|
1586
|
+
value: React.ReactNode;
|
|
1587
|
+
}
|
|
1588
|
+
/** A label / figure line in the order summary — cost, fee, what is available. */
|
|
1589
|
+
declare function OrderFormRow({ label, value, className, ...props }: OrderFormRowProps): React.JSX.Element;
|
|
1590
|
+
interface OrderFormSubmitProps extends Omit<React.ComponentProps<"button">, "type"> {
|
|
1591
|
+
side?: OrderSide;
|
|
1592
|
+
}
|
|
1593
|
+
/** The submit, filled in the colour of the intent. */
|
|
1594
|
+
declare function OrderFormSubmit({ side, className, ...props }: OrderFormSubmitProps): React.JSX.Element;
|
|
1595
|
+
/** The open-orders pane with nothing in it. */
|
|
1596
|
+
declare function OpenOrdersEmpty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1597
|
+
|
|
1598
|
+
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, 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 };
|
package/dist/index.js
CHANGED
|
@@ -7441,6 +7441,210 @@ function ResizableHandle({
|
|
|
7441
7441
|
}
|
|
7442
7442
|
);
|
|
7443
7443
|
}
|
|
7444
|
+
|
|
7445
|
+
// src/components/terminal.tsx
|
|
7446
|
+
import * as React69 from "react";
|
|
7447
|
+
|
|
7448
|
+
// src/generated/terminal.ts
|
|
7449
|
+
var TERMINAL_ROOT = "grid w-full grid-cols-1 gap-px bg-border text-ink text-sm lg:h-[calc(100dvh-var(--ev-shell-offset,0px))] lg:grid-cols-[minmax(0,1fr)_18rem_20rem] lg:grid-rows-[auto_minmax(0,1fr)_14rem]";
|
|
7450
|
+
var terminalAreaClasses = {
|
|
7451
|
+
"ticker": "lg:col-span-3 lg:row-start-1",
|
|
7452
|
+
"chart": "lg:col-start-1 lg:row-start-2",
|
|
7453
|
+
"book": "lg:col-start-2 lg:row-start-2",
|
|
7454
|
+
"form": "lg:col-start-3 lg:row-start-2",
|
|
7455
|
+
"orders": "lg:col-span-3 lg:row-start-3"
|
|
7456
|
+
};
|
|
7457
|
+
var TERMINAL_PANE = "flex min-h-0 min-w-0 flex-col overflow-hidden bg-card";
|
|
7458
|
+
var TERMINAL_PANE_HEADER = "flex h-9 shrink-0 items-center gap-2 border-b border-border px-3 text-xs font-medium text-ink-mid";
|
|
7459
|
+
var TERMINAL_PANE_BODY = "flex min-h-0 flex-1 flex-col overflow-auto";
|
|
7460
|
+
var TERMINAL_CHART = "relative min-h-[18rem] flex-1 overflow-hidden";
|
|
7461
|
+
var TERMINAL_TICKER = "flex min-w-0 items-center gap-6 overflow-x-auto bg-card px-4 py-2 whitespace-nowrap";
|
|
7462
|
+
var TERMINAL_TICKER_STAT = "flex shrink-0 flex-col gap-0.5";
|
|
7463
|
+
var TERMINAL_TICKER_LABEL = "text-[11px] uppercase tracking-wide text-ink-soft";
|
|
7464
|
+
var TERMINAL_TICKER_VALUE = "font-mono text-sm tabular-nums text-ink";
|
|
7465
|
+
var bookSideClasses = {
|
|
7466
|
+
"bid": "text-positive",
|
|
7467
|
+
"ask": "text-accent-error"
|
|
7468
|
+
};
|
|
7469
|
+
var bookDepthClasses = {
|
|
7470
|
+
"bid": "bg-positive/15",
|
|
7471
|
+
"ask": "bg-accent-error/15"
|
|
7472
|
+
};
|
|
7473
|
+
var ORDER_BOOK = "flex min-h-0 flex-1 flex-col font-mono text-xs tabular-nums";
|
|
7474
|
+
var ORDER_BOOK_HEAD = "grid shrink-0 grid-cols-3 gap-2 px-3 py-1.5 text-right text-[11px] text-ink-soft [&>*:first-child]:text-left";
|
|
7475
|
+
var ORDER_BOOK_ROW = "relative isolate grid cursor-pointer grid-cols-3 gap-2 px-3 py-0.5 text-right leading-5 hover:bg-hover";
|
|
7476
|
+
var ORDER_BOOK_PRICE = "text-left";
|
|
7477
|
+
var ORDER_BOOK_DEPTH = "pointer-events-none absolute inset-y-0 right-0 -z-10";
|
|
7478
|
+
var ORDER_BOOK_SPREAD = "flex shrink-0 items-center justify-between gap-2 border-y border-border bg-muted/50 px-3 py-1 text-ink-mid";
|
|
7479
|
+
var TRADES_TAPE_ROW = "grid grid-cols-3 gap-2 px-3 py-0.5 text-right font-mono text-xs leading-5 tabular-nums hover:bg-hover";
|
|
7480
|
+
var ORDER_FORM = "flex flex-col gap-3 p-3 text-sm";
|
|
7481
|
+
var ORDER_FORM_ROW = "flex items-center justify-between gap-2 text-xs";
|
|
7482
|
+
var ORDER_FORM_LABEL = "text-ink-soft";
|
|
7483
|
+
var ORDER_FORM_VALUE = "font-mono tabular-nums text-ink";
|
|
7484
|
+
var ORDER_FORM_SUBMIT_BASE = "inline-flex h-10 w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--control-radius)] text-sm font-semibold transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50";
|
|
7485
|
+
var orderSideClasses = {
|
|
7486
|
+
"buy": "bg-positive text-on-positive hover:bg-positive/90",
|
|
7487
|
+
"sell": "bg-accent-error text-on-accent-error hover:bg-accent-error/90"
|
|
7488
|
+
};
|
|
7489
|
+
var OPEN_ORDERS_EMPTY = "flex flex-1 items-center justify-center p-6 text-sm text-ink-soft";
|
|
7490
|
+
|
|
7491
|
+
// src/components/terminal.tsx
|
|
7492
|
+
import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
7493
|
+
function Terminal({ className, ...props }) {
|
|
7494
|
+
return /* @__PURE__ */ jsx59("div", { "data-slot": "terminal", className: cn(TERMINAL_ROOT, className), ...props });
|
|
7495
|
+
}
|
|
7496
|
+
function TerminalPane({ area, className, ...props }) {
|
|
7497
|
+
return /* @__PURE__ */ jsx59(
|
|
7498
|
+
"section",
|
|
7499
|
+
{
|
|
7500
|
+
"data-slot": "terminal-pane",
|
|
7501
|
+
"data-area": area,
|
|
7502
|
+
className: cn(TERMINAL_PANE, terminalAreaClasses[area], className),
|
|
7503
|
+
...props
|
|
7504
|
+
}
|
|
7505
|
+
);
|
|
7506
|
+
}
|
|
7507
|
+
function TerminalPaneHeader({ className, ...props }) {
|
|
7508
|
+
return /* @__PURE__ */ jsx59(
|
|
7509
|
+
"header",
|
|
7510
|
+
{
|
|
7511
|
+
"data-slot": "terminal-pane-header",
|
|
7512
|
+
className: cn(TERMINAL_PANE_HEADER, className),
|
|
7513
|
+
...props
|
|
7514
|
+
}
|
|
7515
|
+
);
|
|
7516
|
+
}
|
|
7517
|
+
function TerminalPaneBody({ className, ...props }) {
|
|
7518
|
+
return /* @__PURE__ */ jsx59("div", { "data-slot": "terminal-pane-body", className: cn(TERMINAL_PANE_BODY, className), ...props });
|
|
7519
|
+
}
|
|
7520
|
+
var TerminalChart = React69.forwardRef(function TerminalChart2({ className, ...props }, ref) {
|
|
7521
|
+
return /* @__PURE__ */ jsx59(
|
|
7522
|
+
"div",
|
|
7523
|
+
{
|
|
7524
|
+
ref,
|
|
7525
|
+
"data-slot": "terminal-chart",
|
|
7526
|
+
className: cn(TERMINAL_CHART, className),
|
|
7527
|
+
...props
|
|
7528
|
+
}
|
|
7529
|
+
);
|
|
7530
|
+
});
|
|
7531
|
+
function TerminalTicker({ className, ...props }) {
|
|
7532
|
+
return /* @__PURE__ */ jsx59(
|
|
7533
|
+
"div",
|
|
7534
|
+
{
|
|
7535
|
+
"data-slot": "terminal-ticker",
|
|
7536
|
+
"data-area": "ticker",
|
|
7537
|
+
className: cn(TERMINAL_TICKER, terminalAreaClasses.ticker, className),
|
|
7538
|
+
...props
|
|
7539
|
+
}
|
|
7540
|
+
);
|
|
7541
|
+
}
|
|
7542
|
+
function TickerStat({ label, value, className, ...props }) {
|
|
7543
|
+
return /* @__PURE__ */ jsxs29("div", { "data-slot": "ticker-stat", className: TERMINAL_TICKER_STAT, ...props, children: [
|
|
7544
|
+
/* @__PURE__ */ jsx59("span", { className: TERMINAL_TICKER_LABEL, children: label }),
|
|
7545
|
+
/* @__PURE__ */ jsx59("span", { className: cn(TERMINAL_TICKER_VALUE, className), children: value })
|
|
7546
|
+
] });
|
|
7547
|
+
}
|
|
7548
|
+
function OrderBook({ className, ...props }) {
|
|
7549
|
+
return /* @__PURE__ */ jsx59("div", { "data-slot": "order-book", className: cn(ORDER_BOOK, className), ...props });
|
|
7550
|
+
}
|
|
7551
|
+
function OrderBookHead({ price, size, total, className, ...props }) {
|
|
7552
|
+
return /* @__PURE__ */ jsxs29("div", { "data-slot": "order-book-head", className: cn(ORDER_BOOK_HEAD, className), ...props, children: [
|
|
7553
|
+
/* @__PURE__ */ jsx59("span", { children: price }),
|
|
7554
|
+
/* @__PURE__ */ jsx59("span", { children: size }),
|
|
7555
|
+
/* @__PURE__ */ jsx59("span", { children: total })
|
|
7556
|
+
] });
|
|
7557
|
+
}
|
|
7558
|
+
function OrderBookRow({
|
|
7559
|
+
side,
|
|
7560
|
+
price,
|
|
7561
|
+
size,
|
|
7562
|
+
total,
|
|
7563
|
+
depth = 0,
|
|
7564
|
+
className,
|
|
7565
|
+
...props
|
|
7566
|
+
}) {
|
|
7567
|
+
return /* @__PURE__ */ jsxs29(
|
|
7568
|
+
"div",
|
|
7569
|
+
{
|
|
7570
|
+
"data-slot": "order-book-row",
|
|
7571
|
+
"data-side": side,
|
|
7572
|
+
className: cn(ORDER_BOOK_ROW, className),
|
|
7573
|
+
...props,
|
|
7574
|
+
children: [
|
|
7575
|
+
/* @__PURE__ */ jsx59(
|
|
7576
|
+
"span",
|
|
7577
|
+
{
|
|
7578
|
+
"aria-hidden": "true",
|
|
7579
|
+
className: cn(ORDER_BOOK_DEPTH, bookDepthClasses[side]),
|
|
7580
|
+
style: { width: `${depthPercent(depth)}%` }
|
|
7581
|
+
}
|
|
7582
|
+
),
|
|
7583
|
+
/* @__PURE__ */ jsx59("span", { className: cn(ORDER_BOOK_PRICE, bookSideClasses[side]), children: price }),
|
|
7584
|
+
/* @__PURE__ */ jsx59("span", { children: size }),
|
|
7585
|
+
/* @__PURE__ */ jsx59("span", { children: total })
|
|
7586
|
+
]
|
|
7587
|
+
}
|
|
7588
|
+
);
|
|
7589
|
+
}
|
|
7590
|
+
function depthPercent(depth) {
|
|
7591
|
+
if (Number.isNaN(depth)) return 0;
|
|
7592
|
+
return Math.round(Math.min(1, Math.max(0, depth)) * 100);
|
|
7593
|
+
}
|
|
7594
|
+
function OrderBookSpread({ className, ...props }) {
|
|
7595
|
+
return /* @__PURE__ */ jsx59("div", { "data-slot": "order-book-spread", className: cn(ORDER_BOOK_SPREAD, className), ...props });
|
|
7596
|
+
}
|
|
7597
|
+
function TradesTapeRow({ side, price, size, time, className, ...props }) {
|
|
7598
|
+
return /* @__PURE__ */ jsxs29(
|
|
7599
|
+
"div",
|
|
7600
|
+
{
|
|
7601
|
+
"data-slot": "trades-tape-row",
|
|
7602
|
+
"data-side": side,
|
|
7603
|
+
className: cn(TRADES_TAPE_ROW, className),
|
|
7604
|
+
...props,
|
|
7605
|
+
children: [
|
|
7606
|
+
/* @__PURE__ */ jsx59("span", { className: cn(ORDER_BOOK_PRICE, bookSideClasses[side]), children: price }),
|
|
7607
|
+
/* @__PURE__ */ jsx59("span", { children: size }),
|
|
7608
|
+
/* @__PURE__ */ jsx59("span", { children: time })
|
|
7609
|
+
]
|
|
7610
|
+
}
|
|
7611
|
+
);
|
|
7612
|
+
}
|
|
7613
|
+
function OrderForm({ className, onSubmit, ...props }) {
|
|
7614
|
+
return /* @__PURE__ */ jsx59(
|
|
7615
|
+
"form",
|
|
7616
|
+
{
|
|
7617
|
+
"data-slot": "order-form",
|
|
7618
|
+
className: cn(ORDER_FORM, className),
|
|
7619
|
+
onSubmit: (e) => {
|
|
7620
|
+
e.preventDefault();
|
|
7621
|
+
onSubmit?.(e);
|
|
7622
|
+
},
|
|
7623
|
+
...props
|
|
7624
|
+
}
|
|
7625
|
+
);
|
|
7626
|
+
}
|
|
7627
|
+
function OrderFormRow({ label, value, className, ...props }) {
|
|
7628
|
+
return /* @__PURE__ */ jsxs29("div", { "data-slot": "order-form-row", className: cn(ORDER_FORM_ROW, className), ...props, children: [
|
|
7629
|
+
/* @__PURE__ */ jsx59("span", { className: ORDER_FORM_LABEL, children: label }),
|
|
7630
|
+
/* @__PURE__ */ jsx59("span", { className: ORDER_FORM_VALUE, children: value })
|
|
7631
|
+
] });
|
|
7632
|
+
}
|
|
7633
|
+
function OrderFormSubmit({ side = "buy", className, ...props }) {
|
|
7634
|
+
return /* @__PURE__ */ jsx59(
|
|
7635
|
+
"button",
|
|
7636
|
+
{
|
|
7637
|
+
type: "submit",
|
|
7638
|
+
"data-slot": "order-form-submit",
|
|
7639
|
+
"data-side": side,
|
|
7640
|
+
className: cn(ORDER_FORM_SUBMIT_BASE, orderSideClasses[side], className),
|
|
7641
|
+
...props
|
|
7642
|
+
}
|
|
7643
|
+
);
|
|
7644
|
+
}
|
|
7645
|
+
function OpenOrdersEmpty({ className, ...props }) {
|
|
7646
|
+
return /* @__PURE__ */ jsx59("div", { "data-slot": "open-orders-empty", className: cn(OPEN_ORDERS_EMPTY, className), ...props });
|
|
7647
|
+
}
|
|
7444
7648
|
export {
|
|
7445
7649
|
Accordion,
|
|
7446
7650
|
AccordionContent,
|
|
@@ -7638,6 +7842,14 @@ export {
|
|
|
7638
7842
|
NavigationMenuTrigger,
|
|
7639
7843
|
NavigationMenuViewport,
|
|
7640
7844
|
NotFound,
|
|
7845
|
+
OpenOrdersEmpty,
|
|
7846
|
+
OrderBook,
|
|
7847
|
+
OrderBookHead,
|
|
7848
|
+
OrderBookRow,
|
|
7849
|
+
OrderBookSpread,
|
|
7850
|
+
OrderForm,
|
|
7851
|
+
OrderFormRow,
|
|
7852
|
+
OrderFormSubmit,
|
|
7641
7853
|
Pagination,
|
|
7642
7854
|
PaginationContent,
|
|
7643
7855
|
PaginationEllipsis,
|
|
@@ -7715,7 +7927,14 @@ export {
|
|
|
7715
7927
|
TabsContent,
|
|
7716
7928
|
TabsList,
|
|
7717
7929
|
TabsTrigger,
|
|
7930
|
+
Terminal,
|
|
7931
|
+
TerminalChart,
|
|
7932
|
+
TerminalPane,
|
|
7933
|
+
TerminalPaneBody,
|
|
7934
|
+
TerminalPaneHeader,
|
|
7935
|
+
TerminalTicker,
|
|
7718
7936
|
Textarea,
|
|
7937
|
+
TickerStat,
|
|
7719
7938
|
Toaster,
|
|
7720
7939
|
Toggle,
|
|
7721
7940
|
ToggleGroup,
|
|
@@ -7724,6 +7943,7 @@ export {
|
|
|
7724
7943
|
TooltipContent,
|
|
7725
7944
|
TooltipProvider,
|
|
7726
7945
|
TooltipTrigger,
|
|
7946
|
+
TradesTapeRow,
|
|
7727
7947
|
buttonVariants,
|
|
7728
7948
|
cn,
|
|
7729
7949
|
mergeRefs,
|