@lolmath/ui 9.4.0 → 9.5.0

package/dist/index.css

@@ -2412,12 +2412,14 @@
 	}
 }
 @layer lol {
-	._resizableContainer_1iv6r_2 {
+	._resizableContainer_1ftu2_2 {
 		overflow: auto;
 		position: relative;
 	}
 
-	._table_1iv6r_7 {
+	._table_1ftu2_7 {
+		--lol-table-indent: 1.125rem;
+
 		border-collapse: collapse;
 		border-spacing: 0;
 		width: 100%;
@@ -2433,9 +2435,38 @@
 			outline: 1px solid var(--lol-color-gold-400);
 			outline-offset: 0.25rem;
 		}
+
+		/* The whole table is the drop target when a drag is dropped on it rather
+		   than between two of its rows. */
+		&[data-drop-target] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: 0.25rem;
+		}
+	}
+
+	/* Inside a `Virtualizer` the table is a <div> whose rows are placed by the
+	   layout, and it scrolls them itself — which is what the virtualizer measures
+	   against, so it is the one table that needs a height of its own. */
+	div._table_1ftu2_7 {
+		overflow: auto;
+		position: relative;
+
+		/* That also makes the header stick over the rows as they scroll past. The
+		   header cells tile the full width of the row, so frosting each one covers
+		   the strip; without it the rows read straight through the labels. The
+		   tint is the client's page black, which is what any surface the table
+		   sits on is a shade of. */
+		& ._column_1ftu2_46 {
+			background-color: color-mix(
+				in srgb,
+				var(--lol-color-hextech-black),
+				transparent 4%
+			);
+			backdrop-filter: blur(12px);
+		}
 	}
 
-	._row_1iv6r_25 {
+	._row_1ftu2_56 {
 		color: var(--lol-color-grey-100);
 		outline: none;
 		transition: color 0.3s ease;
@@ -2488,13 +2519,28 @@
 			cursor: default;
 		}
 
+		&[data-dragging] {
+			opacity: 0.4;
+		}
+
 		&[data-focus-visible] {
 			outline: 1px solid var(--lol-color-gold-400);
 			outline-offset: -1px;
 		}
+
+		/* A row is only its own drop target when the table takes drops onto rows;
+		   reordering draws the `.dropIndicator` between them instead. */
+		&[data-drop-target] {
+			color: var(--lol-color-gold-100);
+			--lol-table-row-highlight: linear-gradient(
+				90deg,
+				rgb(from var(--lol-color-gold-400) r g b / 0.35),
+				rgb(from var(--lol-color-gold-400) r g b / 0.1)
+			);
+		}
 	}
 
-	._cell_1iv6r_84 {
+	._cell_1ftu2_130 {
 		/*
 		 * Collapsed borders are resolved between neighbours, and Chrome paints the
 		 * winning hairline once per edge when the losing side is styled `none`. The
@@ -2512,7 +2558,7 @@
 		}
 	}
 
-	._resizer_1iv6r_102 {
+	._resizer_1ftu2_148 {
 		position: absolute;
 		inset-block: 0;
 		inset-inline-end: 0;
@@ -2544,7 +2590,7 @@
 	}
 
 	/* Fixed footprint so toggling the sort direction never shifts the header. */
-	._sortIndicator_1iv6r_134 {
+	._sortIndicator_1ftu2_180 {
 		display: inline-block;
 		vertical-align: middle;
 		width: 0.5rem;
@@ -2568,7 +2614,7 @@
 		}
 	}
 
-	._column_1iv6r_158 {
+	._column_1ftu2_46 {
 		position: relative;
 		font-family: var(--lol-font-family-beaufort);
 		color: var(--lol-color-gold-100);
@@ -2604,15 +2650,15 @@
 			color: var(--lol-color-gold-500);
 		}
 
-		&[data-hovered] ._sortIndicator_1iv6r_134 {
+		&[data-hovered] ._sortIndicator_1ftu2_180 {
 			opacity: 0.5;
 		}
 
-		&[data-sort-direction] ._sortIndicator_1iv6r_134 {
+		&[data-sort-direction] ._sortIndicator_1ftu2_180 {
 			opacity: 1;
 		}
 
-		&[data-sort-direction="descending"] ._sortIndicator_1iv6r_134::after {
+		&[data-sort-direction="descending"] ._sortIndicator_1ftu2_180::after {
 			border-width: 0.375rem 0.25rem 0;
 			border-top-color: currentColor;
 			border-bottom-color: transparent;
@@ -2624,34 +2670,170 @@
 		}
 	}
 
-	._footer_1iv6r_214 {
+	/* The checkbox and the drag handle sit in columns of their own, added by
+	   `TableHeader` and `TableRow`. Both shrink to their content: a percentage
+	   width smaller than the content is the table layout's way of saying "as
+	   narrow as this can go". */
+	._selectionColumn_1ftu2_264,
+	._selectionCell_1ftu2_265,
+	._gripColumn_1ftu2_266,
+	._gripCell_1ftu2_267 {
+		width: 1%;
+		white-space: nowrap;
+	}
+
+	._selectionCell_1ftu2_265,
+	._gripCell_1ftu2_267 {
+		padding-inline-end: 0;
+	}
+
+	._grip_1ftu2_266 {
+		/* A <button> we never paint: without this it falls back to the UA's
+		   `buttonface` slab, which is grey under `color-scheme: dark`. */
+		appearance: none;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		color: inherit;
+
+		display: block;
+		width: 0.625rem;
+		height: 0.75rem;
+		outline: none;
+		/* Three hairlines, the client's drag affordance. */
+		background: repeating-linear-gradient(
+			to bottom,
+			currentColor 0 1px,
+			transparent 1px 0.25rem
+		);
+	}
+
+	/* React aria drags the row itself and leaves the handle inert, so the cursor
+	   has to come from the row. */
+	._table_1ftu2_7[data-allows-dragging] ._row_1ftu2_56 {
+		cursor: grab;
+	}
+
+	/* The indicator is a row of its own with a single full-width cell, so the
+	   line is drawn by a pseudo element that takes up no space of its own. */
+	._dropIndicator_1ftu2_119 {
+		& > td,
+		& > th {
+			position: relative;
+		}
+
+		&[data-drop-target] > td::after,
+		&[data-drop-target] > th::after {
+			content: "";
+			position: absolute;
+			inset-inline: 0;
+			top: -1px;
+			height: 2px;
+			background-color: var(--lol-color-gold-400);
+		}
+	}
+
+	/* The expand chevron of a `treeColumn` cell, and the indent that puts a
+	   nested row under its parent. React aria sets `--table-row-level` on every
+	   row, starting at 1. */
+	._treeContent_1ftu2_327 {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding-inline-start: calc(
+			(var(--table-row-level, 1) - 1) *
+			var(--lol-table-indent)
+		);
+	}
+
+	._chevron_1ftu2_337 {
+		appearance: none;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		letter-spacing: inherit;
+		color: inherit;
+
+		flex: none;
+		width: 0.5rem;
+		height: 0.75rem;
+		outline: none;
+		cursor: pointer;
+
+		--lol-table-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABF0lEQVR42r3WMY7CQAxA0R8r2oobUMBB9hTLPegguQJUNHuJLbZb7RU4BvQIiZaKJiNFo0wy8dhYiiJNLD+N5RmlOv9sGYgtsAQajKJOICeg6p69BSQjCMAOOFpDMYIlJhOIGSbAqitSTeQWYQJcgQ3wzMhXY6F1f8CXJ9YfBlcsHm83TAbWXDBJrJtjMvLNFJOJAmaYZBQwwSRzaIoxmXEUijCZecDVmCiuLRVWKy/jgP0CHxmYakchHpm7ArhpoU/gH1hk5DbAUd6BaFqnQuZCamQOVITkQsVIDmSCTEFmyBhkiqQgc2QIckFiyA3pQ65IgNbeSIAuwLcn0m9dCxy8kHgYUlgxMjTeMWaCpP4Z2u59t0IAXn+VXtMKZ5riAAAAAElFTkSuQmCC");
+		background: var(--lol-table-chevron) no-repeat center / contain;
+		transition: rotate 0.15s ease;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
+		&[data-focus-visible] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: 0.125rem;
+		}
+	}
+
+	._chevronSpacer_1ftu2_366 {
+		flex: none;
+		width: 0.5rem;
+	}
+
+	._row_1ftu2_56[data-expanded] ._chevron_1ftu2_337 {
+		rotate: 90deg;
+	}
+
+	._row_1ftu2_56[data-hovered] ._chevron_1ftu2_337,
+	._chevron_1ftu2_337[data-hovered],
+	._chevron_1ftu2_337[data-focus-visible] {
+		--lol-table-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABGElEQVR42r3WO47CMBCA4T+jaCtuQLEcZE+x3IOOxxVIRcM1tlvtPTgBNFQIQUu1TSxFVpw44xlGiiI5o/nk0dhK9bie6IkVMAe2GEWdQA5A1T4bC0gGEIA10FhDMYIlJiOIGSbAZ1ukGsktwgS4AEvglZGvxkLrfoFvT6w7DK5YPN5umPSsuWCSWDfHZOCbKSYjBcwwyShggknm0BRjMuEoFGEy8YCrMVFcWyqsVl7GAfsBPjIw1Y5CPDN3BXDTQl/AHzDLyN0CjbwD0bROhUyF1MgUqAjJhYqRHMgEGYPMkCHIFElB5kgf5ILEkBvShVyRAC28kQCdgaMn0m3dDth7IfEwpLBipG+8Y8wESf0z7Nr33QoB+AdPzF+bRdCP8QAAAABJRU5ErkJggg==");
+	}
+
+	._row_1ftu2_56[data-disabled] ._chevron_1ftu2_337 {
+		cursor: default;
+		filter: grayscale(100%);
+	}
+
+	._loadMore_1ftu2_386 > td,
+	._loadMore_1ftu2_386 > th {
+		padding: 0.5rem;
+	}
+
+	._spinner_1ftu2_391 {
+		width: 1.5rem;
+		margin-inline: auto;
+	}
+
+	._footer_1ftu2_396 {
 		color: var(--lol-color-gold-300);
 
-		& ._cell_1iv6r_84 {
+		& ._cell_1ftu2_130 {
 			border-top: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
 		}
 	}
 
-	._empty_1iv6r_222 {
+	._empty_1ftu2_404 {
 		padding: 1rem 0.75rem;
 		text-align: center;
 	}
 
 	/* React aria renders the empty state in a row it builds itself, so that cell
 	   never gets `.cell` and keeps the UA's 1px padding. */
-	._table_1iv6r_7 [data-empty] > tr > td {
+	._table_1ftu2_7 [data-empty] > tr > td {
 		padding: 0;
 	}
 
-	._start_1iv6r_233 {
+	._start_1ftu2_415 {
 		text-align: start;
 	}
 
-	._center_1iv6r_237 {
+	._center_1ftu2_419 {
 		text-align: center;
 	}
 
-	._end_1iv6r_241 {
+	._end_1ftu2_423 {
 		text-align: end;
 	}
 }
@@ -3119,3 +3301,90 @@
 		width: 1.5rem;
 	}
 }
+@layer lol {
+	._table_v9mcp_2 {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+
+		font-family: var(--lol-font-family-spiegel);
+		font-size: var(--lol-font-size-sm);
+		line-height: var(--lol-line-height-sm);
+		letter-spacing: var(--lol-letter-spacing-sm);
+		font-weight: var(--lol-font-weight-sm);
+		color: var(--lol-color-grey-100);
+	}
+
+	/*
+	 * Both headings are set the same way — the client's heading face, in gold
+	 * over the grey of the data. What tells them apart is only which edge of the
+	 * table they run along.
+	 *
+	 * The zero-width `solid` on the edges each one leaves alone is the guard the
+	 * table's own cells carry: collapsed borders are resolved between
+	 * neighbours, and Chrome paints the winning hairline once per edge when the
+	 * losing side is styled `none`, so a 25%-opacity line blends twice and comes
+	 * out twice as bright.
+	 */
+	._fieldHeader_v9mcp_26,
+	._recordHeader_v9mcp_27,
+	._corner_v9mcp_28 {
+		border: 0 solid;
+	}
+
+	._fieldHeader_v9mcp_26,
+	._recordHeader_v9mcp_27 {
+		font-family: var(--lol-font-family-beaufort);
+		color: var(--lol-color-gold-100);
+		font-size: 0.75rem;
+		font-weight: 700;
+		letter-spacing: 0.075em;
+		line-height: 1rem;
+		text-transform: uppercase;
+		white-space: nowrap;
+		padding: 0.375rem 0.75rem;
+	}
+
+	/* The field names head their rows, so the hairline that separates the
+	   heading from the data runs down the table rather than across it. */
+	._fieldHeader_v9mcp_26 {
+		text-align: start;
+		border-inline-end: 1px solid
+			rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		/* Shrink to the names: a percentage under the content width is the table
+		   layout's way of saying "as narrow as this can go". */
+		width: 1%;
+	}
+
+	._recordHeader_v9mcp_27 {
+		border-bottom: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+	}
+
+	/* The blank corner over the field names carries both hairlines, so the one
+	   under the record names and the one beside the field names meet instead of
+	   stopping short of each other. */
+	._corner_v9mcp_28 {
+		padding: 0;
+		border-bottom: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		border-inline-end: 1px solid
+			rgb(from var(--lol-color-grey-100) r g b / 0.25);
+	}
+
+	._cell_v9mcp_70 {
+		border: 0 solid;
+		padding: 0.375rem 0.75rem;
+		vertical-align: middle;
+	}
+
+	._start_v9mcp_76 {
+		text-align: start;
+	}
+
+	._center_v9mcp_80 {
+		text-align: center;
+	}
+
+	._end_v9mcp_84 {
+		text-align: end;
+	}
+}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { Autocomplete, AutocompleteContext, AutocompleteStateContext, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CalendarCellProps, CalendarGridHeaderProps, CalendarGridProps, CalendarHeaderCellProps, CalendarProps as CalendarProps$1, CellProps, CheckboxButtonProps, CheckboxFieldProps, Collection, ColumnProps, ColumnResizerProps, DateFieldProps, DateInput as DateInput$1, DateInputProps, DatePickerProps, DateRangePickerProps, DateSegmentProps, DateValue, DateValue as DateValue$1, Dialog, DialogProps, DialogTrigger, DisclosurePanelProps, DisclosureProps, FieldError, Focusable, GridLayout, Group as Group$1, GroupProps as GroupProps$1, Header, HeadingProps, Input, InputProps, Key, Key as Key$1, LabelProps, LinkProps, ListBoxItem, ListBoxItemProps, ListBoxProps, ListLayout, MenuItemProps, MenuItemProps as MenuItemProps$1, MenuProps, MenuProps as MenuProps$1, MenuSectionProps, MenuTrigger as MenuTrigger$1, ModalOverlayProps, NumberFieldProps, Popover as UnstyledPopover, PopoverProps, Pressable, PreviewTrigger, PreviewTriggerProps, ProgressBarProps, RadioButtonProps, RadioFieldProps, RadioGroupProps, RangeCalendarProps as RangeCalendarProps$1, ResizableTableContainer, RouterProvider, RowProps, SearchFieldProps, Select, SelectProps, SelectValue, Selection, SeparatorProps, Size, SliderFillRenderProps, SliderOutputProps, SliderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SortDescriptor, SortDirection, SwitchButtonProps, SwitchFieldProps, TabListProps, TabPanelProps, TabProps, TableBodyProps as TableBodyProps$1, TableFooterProps as TableFooterProps$1, TableHeader, TableLayout, TableProps as TableProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextAreaProps, TextFieldProps, TextProps, TimeFieldProps, TimeValue, TimeValue as TimeValue$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, ToggleButtonProps, TokenFieldProps, TokenFieldValue, TokenFieldValue as TokenFieldValue$1, TokenInputProps as TokenInputProps$1, TokenProps as TokenProps$1, ToolbarProps as ToolbarProps$1, TreeItemContentProps as TreeItemContentProps$1, TreeItemProps as TreeItemProps$1, TreeLoadMoreItemProps as TreeLoadMoreItemProps$1, TreeProps as TreeProps$1, Virtualizer, VirtualizerProps, WaterfallLayout, useFilter } from "react-aria-components";
-import React$1, { ComponentProps, JSX, Ref } from "react";
+import { AsyncListData, AsyncListOptions, Autocomplete, AutocompleteContext, AutocompleteStateContext, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CalendarCellProps, CalendarGridHeaderProps, CalendarGridProps, CalendarHeaderCellProps, CalendarProps as CalendarProps$1, CellProps, CheckboxButtonProps, CheckboxFieldProps, Collection, ColumnProps, ColumnResizerProps, DateFieldProps, DateInput as DateInput$1, DateInputProps, DatePickerProps, DateRangePickerProps, DateSegmentProps, DateValue, DateValue as DateValue$1, Dialog, DialogProps, DialogTrigger, DisclosurePanelProps, DisclosureProps, DragAndDropHooks, DragAndDropHooks as DragAndDropHooks$1, DragAndDropOptions, DragAndDropOptions as DragAndDropOptions$1, DropIndicatorProps, DropItem, DropTarget, FieldError, Focusable, GridLayout, Group as Group$1, GroupProps as GroupProps$1, Header, HeadingProps, Input, InputProps, Key, Key as Key$1, LabelProps, LinkProps, ListBoxItem, ListBoxItemProps, ListBoxProps, ListData, ListLayout, MenuItemProps, MenuItemProps as MenuItemProps$1, MenuProps, MenuProps as MenuProps$1, MenuSectionProps, MenuTrigger as MenuTrigger$1, ModalOverlayProps, NumberFieldProps, Popover as UnstyledPopover, PopoverProps, Pressable, PreviewTrigger, PreviewTriggerProps, ProgressBarProps, RadioButtonProps, RadioFieldProps, RadioGroupProps, RangeCalendarProps as RangeCalendarProps$1, ResizableTableContainerProps as ResizableTableContainerProps$1, RouterProvider, RowProps, SearchFieldProps, Select, SelectProps, SelectValue, Selection, SeparatorProps, Size, SliderFillRenderProps, SliderOutputProps, SliderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SortDescriptor, SortDirection, SwitchButtonProps, SwitchFieldProps, TabListProps, TabPanelProps, TabProps, TableBodyProps as TableBodyProps$1, TableFooterProps as TableFooterProps$1, TableHeaderProps as TableHeaderProps$1, TableLayout, TableLoadMoreItemProps as TableLoadMoreItemProps$1, TableProps as TableProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextAreaProps, TextDropItem, TextFieldProps, TextProps, TimeFieldProps, TimeValue, TimeValue as TimeValue$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, ToggleButtonProps, TokenFieldProps, TokenFieldValue, TokenFieldValue as TokenFieldValue$1, TokenInputProps as TokenInputProps$1, TokenProps as TokenProps$1, ToolbarProps as ToolbarProps$1, TreeItemContentProps as TreeItemContentProps$1, TreeItemProps as TreeItemProps$1, TreeLoadMoreItemProps as TreeLoadMoreItemProps$1, TreeProps as TreeProps$1, Virtualizer, VirtualizerProps, WaterfallLayout, isTextDropItem, useAsyncList, useDragAndDrop, useFilter, useListData } from "react-aria-components";
+import React$1, { ComponentProps, JSX, Key as Key$2, ReactNode, Ref, TableHTMLAttributes } from "react";
 import { ExternalToast, ToasterProps } from "sonner";
 //#region src/components/breadcrumbs/breadcrumbs.d.ts
 declare function Breadcrumbs<T extends object>({ className, ...props }: BreadcrumbsProps<T>): import("react").JSX.Element;
@@ -18,7 +18,7 @@ interface ButtonProps$1 extends ButtonProps {
   size?: ButtonSize;
 }
 declare const button: (props?: ({
-  preset?: "primary" | "secondary" | "text" | "hextech" | "dimmed" | undefined;
+  preset?: "hextech" | "primary" | "secondary" | "text" | "dimmed" | undefined;
   shape?: "round" | "square" | "normal" | undefined;
   thin?: boolean | undefined;
   size?: "small" | "medium" | "large" | undefined;
@@ -397,7 +397,7 @@ declare function SwitchButton({ className, children, ...props }: SwitchButtonPro
 declare function SwitchField({ className, ...props }: SwitchFieldProps): import("react").JSX.Element;
 declare function Switch({ children, className, ...props }: Omit<SwitchFieldProps, "children" | "className"> & Pick<SwitchButtonProps, "children" | "className">): import("react").JSX.Element;
 //#endregion
-//#region src/components/table.d.ts
+//#region src/components/table/table.d.ts
 /** Horizontal alignment shared by `TableColumn` and `TableCell`. */
 type TableAlign = "start" | "center" | "end";
 declare const table: (props?: ({
@@ -409,6 +409,21 @@ declare const table: (props?: ({
 }) | undefined) => string;
 interface TableProps extends TableProps$1 {}
 declare function Table({ className, ...props }: TableProps): import("react").JSX.Element;
+interface ResizableTableContainerProps extends ResizableTableContainerProps$1 {}
+/**
+ * The scroll container a `Table` needs for `allowsResizing` columns: it is the
+ * element the column widths are measured against.
+ */
+declare function ResizableTableContainer({ className, ...props }: ResizableTableContainerProps): import("react").JSX.Element;
+interface TableHeaderProps<T extends object> extends TableHeaderProps$1<T> {}
+/**
+ * The header row of a `Table`.
+ *
+ * The select-all checkbox is added for tables with `selectionMode="multiple"`,
+ * and a blank column ahead of it for tables that allow dragging, so that the
+ * header keeps a column for every cell `TableRow` adds.
+ */
+declare function TableHeader<T extends object>({ children, className, columns, dependencies, ...props }: TableHeaderProps<T>): import("react").JSX.Element;
 declare const tableColumn: (props?: ({
   align?: "start" | "center" | "end" | undefined;
 } & ({
@@ -437,7 +452,16 @@ declare const tableRow: (props?: ({
   className?: import("cva").ClassValue;
 }) | undefined) => string;
 interface TableRowProps<T extends object> extends RowProps<T> {}
-declare function TableRow<T extends object>({ className, ...props }: TableRowProps<T>): import("react").JSX.Element;
+/**
+ * A row of a `Table`.
+ *
+ * A selection checkbox is added for tables with a `selectionMode`, and a drag
+ * handle for tables that allow dragging — both ahead of the row's own cells,
+ * matching the columns `TableHeader` adds. `selectionBehavior="replace"` drops
+ * the checkbox in favour of highlighting the row, like the ladder in the
+ * League client.
+ */
+declare function TableRow<T extends object>({ children, className, columns, dependencies, ...props }: TableRowProps<T>): import("react").JSX.Element;
 declare const tableCell: (props?: ({
   align?: "start" | "center" | "end" | undefined;
 } & ({
@@ -450,9 +474,36 @@ declare const tableCell: (props?: ({
 interface TableCellProps extends CellProps {
   align?: TableAlign;
 }
-declare function TableCell({ align, className, ...props }: TableCellProps): import("react").JSX.Element;
+/**
+ * A cell of a `TableRow`.
+ *
+ * The cell in the table's `treeColumn` grows an expand chevron for rows that
+ * have child rows, and is indented by the row's depth; the indent is read from
+ * the `--table-row-level` react aria sets on every row.
+ */
+declare function TableCell({ align, children, className, ...props }: TableCellProps): import("react").JSX.Element;
 interface TableFooterProps<T extends object> extends TableFooterProps$1<T> {}
 declare function TableFooter<T extends object>({ className, ...props }: TableFooterProps<T>): import("react").JSX.Element;
+interface TableLoadMoreItemProps extends TableLoadMoreItemProps$1 {}
+/**
+ * A sentinel row at the end of a `TableBody`. It calls `onLoadMore` once it
+ * scrolls into view, and shows the spinner while `isLoading` is set.
+ */
+declare function TableLoadMoreItem({ children, className, ...props }: TableLoadMoreItemProps): import("react").JSX.Element;
+interface TableDropIndicatorProps extends DropIndicatorProps {}
+/**
+ * The line drawn between two rows while a drop is hovered over the gap. It is
+ * rendered by `useTableDragAndDrop` — pass it to `useDragAndDrop`'s
+ * `renderDropIndicator` when using that hook directly.
+ */
+declare function TableDropIndicator({ className, ...props }: TableDropIndicatorProps): import("react").JSX.Element;
+/**
+ * `useDragAndDrop` with the table's own drop indicator, for the
+ * `dragAndDropHooks` prop of a `Table`.
+ */
+declare function useTableDragAndDrop<T = object>(options: DragAndDropOptions$1<T>): {
+  dragAndDropHooks: DragAndDropHooks$1<T>;
+};
 //#endregion
 //#region src/components/tabs.d.ts
 declare const Tabs: (props: import("react-aria-components").TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
@@ -565,7 +616,7 @@ interface TokenInputProps<T extends TokenFieldValue$1 = TokenFieldValue$1> exten
 /** The editable area of a `TokenField`, rendering a `Token` per token segment. */
 declare function TokenInput<T extends TokenFieldValue$1 = TokenFieldValue$1>({ className, placeholder, size, ...props }: TokenInputProps<T>): import("react").JSX.Element;
 declare const token: (props?: ({
-  variant?: "hextech" | "gold" | "grey" | undefined;
+  variant?: "gold" | "hextech" | "grey" | undefined;
 } & ({
   class?: import("cva").ClassValue;
   className?: never;
@@ -634,7 +685,7 @@ interface HeadingProps$1 extends React.DetailedHTMLProps<React.HTMLAttributes<HT
   as?: HeadingElement | "span";
 }
 declare const heading: (props?: ({
-  color?: "grey100" | "gold100" | "gold200" | "gold400" | undefined;
+  color?: "gold100" | "gold200" | "gold400" | "grey100" | undefined;
   preset?: "h1" | "h2" | "h3" | "h4" | "h5" | undefined;
 } & ({
   class?: import("cva").ClassValue;
@@ -650,7 +701,7 @@ type TextColor = "grey100" | "grey150" | "gold100";
 type TextElement = "p" | "span" | "div";
 type TextPreset = "sm" | "base" | "md" | "lg" | "largeNumber" | "stat";
 declare const text: (props?: ({
-  color?: "grey100" | "grey150" | "gold100" | undefined;
+  color?: "gold100" | "grey100" | "grey150" | undefined;
   preset?: "sm" | "base" | "md" | "lg" | "label" | "largeNumber" | "stat" | undefined;
 } & ({
   class?: import("cva").ClassValue;
@@ -670,5 +721,79 @@ interface LabelProps$1 extends LabelProps {
 }
 declare function Label({ preset, color, className, ...rest }: LabelProps$1): JSX.Element;
 //#endregion
-export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, ButtonPreset, ButtonShape, ButtonSize, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, CalendarProps, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, type DateValue, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, Focusable, GridLayout, Group, GroupInput, GroupProps, GroupSeparator, Heading, HeadingColor, HeadingElement, type Key, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, type MenuItemProps, MenuPopover, type MenuProps, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, MultipleSelectProps, NumberField, PickerDateInput, Popover, PopoverBody, Pressable, PreviewTrigger, type PreviewTriggerProps, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, RangeCalendarProps, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, type Selection, Size, Slider, SliderOutput, Sonner, SonnerProps, type SortDescriptor, type SortDirection, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableAlign, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableColumnResizer, TableColumnResizerProps, TableFooter, TableFooterProps, TableHeader, TableLayout, TableProps, TableRow, TableRowProps, Tabs, Tag, TagGroup, TagGroupProps, TagList, TagListProps, TagProps, Text, TextArea, TextColor, TextElement, TextField, TextPreset, TimeField, type TimeValue, ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonPreset, Token, TokenField, type TokenFieldValue, TokenInput, TokenInputProps, TokenProps, Toolbar, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, Tree, TreeItem, TreeItemContent, TreeItemContentProps, TreeItemProps, TreeLoadMoreItem, TreeLoadMoreItemProps, TreeProps, UnstyledPopover, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, group, heading, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, token, tokenInput, tree, treeItem, useFilter };
+//#region src/components/vertical-table/vertical-table.d.ts
+/** Horizontal alignment of a `VerticalTable`'s value cells. */
+type VerticalTableAlign = "start" | "center" | "end";
+/** One field of a `VerticalTable`: a row, read across every record. */
+interface VerticalTableField<T> {
+  /** The name of the field, which heads its row. */
+  name: ReactNode;
+  /** What this field is for one record, for every column of the row. */
+  value: (record: T, index: number) => ReactNode;
+  /** Overrides the table's `align` for this row. */
+  align?: VerticalTableAlign;
+  /** Distinguishes the row between renders. Defaults to the field's index. */
+  id?: Key$2;
+}
+declare const verticalTable: (props?: ({
+  class?: import("cva").ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className?: import("cva").ClassValue;
+}) | undefined) => string;
+declare const verticalTableCell: (props?: ({
+  align?: "start" | "center" | "end" | undefined;
+} & ({
+  class?: import("cva").ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className?: import("cva").ClassValue;
+})) | undefined) => string;
+declare const verticalTableRecordHeader: (props?: ({
+  align?: "start" | "center" | "end" | undefined;
+} & ({
+  class?: import("cva").ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className?: import("cva").ClassValue;
+})) | undefined) => string;
+interface VerticalTableProps<T> extends Omit<TableHTMLAttributes<HTMLTableElement>, "align" | "children"> {
+  /** The records, one per column. */
+  records: readonly T[];
+  /** The fields, one per row. */
+  fields: readonly VerticalTableField<T>[];
+  /**
+   * The heading over a record's column. Leave it out and the table has no
+   * header row at all, which is the stat card of a single record: the field
+   * names head their own rows, so nothing is left unnamed by dropping it.
+   */
+  recordHeader?: (record: T, index: number) => ReactNode;
+  /** Distinguishes a column between renders. Defaults to the record's index. */
+  recordKey?: (record: T, index: number) => Key$2;
+  /** Where the values sit in their cells. Defaults to `"start"`. */
+  align?: VerticalTableAlign;
+}
+/**
+ * A table read down rather than across: a row per field, a column per record,
+ * and the field names heading the rows from the leading column.
+ *
+ * It is the table for comparing a handful of records field by field — two
+ * builds, the champions of a lane — and, with a single record and no
+ * `recordHeader`, for the stat card that is a table underneath.
+ *
+ * Where `Table` is React Aria's grid, with everything that comes with it, this
+ * is markup and no more: a `<table>` whose field names are real
+ * `<th scope="row">`s and whose record headings are real `<th scope="col">`s.
+ * Nothing here is selectable, sortable, resizable or focusable. React Aria's
+ * table cannot be transposed — its collection is row major, and the flip is in
+ * the data rather than in the structure — so rather than dress one up as the
+ * other, a table that only has to be read is only what a table needs to be
+ * read. Reach for `Table` the moment the rows have to be interacted with.
+ */
+declare function VerticalTable<T>({ align, className, fields, recordHeader, recordKey, records, ...props }: VerticalTableProps<T>): import("react").JSX.Element;
+//#endregion
+export { type AsyncListData, type AsyncListOptions, Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, ButtonPreset, ButtonShape, ButtonSize, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, CalendarProps, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, type DateValue, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, type DragAndDropHooks, type DragAndDropOptions, type DropItem, type DropTarget, FieldError, Focusable, GridLayout, Group, GroupInput, GroupProps, GroupSeparator, Heading, HeadingColor, HeadingElement, type Key, Label, ListBoxItem, type ListData, ListLayout, Menu, MenuHeader, MenuItem, type MenuItemProps, MenuPopover, type MenuProps, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, MultipleSelectProps, NumberField, PickerDateInput, Popover, PopoverBody, Pressable, PreviewTrigger, type PreviewTriggerProps, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, RangeCalendarProps, ResizableTableContainer, ResizableTableContainerProps, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, type Selection, Size, Slider, SliderOutput, Sonner, SonnerProps, type SortDescriptor, type SortDirection, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableAlign, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableColumnResizer, TableColumnResizerProps, TableDropIndicator, TableDropIndicatorProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableLayout, TableLoadMoreItem, TableLoadMoreItemProps, TableProps, TableRow, TableRowProps, Tabs, Tag, TagGroup, TagGroupProps, TagList, TagListProps, TagProps, Text, TextArea, TextColor, type TextDropItem, TextElement, TextField, TextPreset, TimeField, type TimeValue, ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonPreset, Token, TokenField, type TokenFieldValue, TokenInput, TokenInputProps, TokenProps, Toolbar, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, Tree, TreeItem, TreeItemContent, TreeItemContentProps, TreeItemProps, TreeLoadMoreItem, TreeLoadMoreItemProps, TreeProps, UnstyledPopover, VerticalTable, VerticalTableAlign, VerticalTableField, VerticalTableProps, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, group, heading, isTextDropItem, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, token, tokenInput, tree, treeItem, useAsyncList, useDragAndDrop, useFilter, useListData, useTableDragAndDrop, verticalTable, verticalTableCell, verticalTableRecordHeader };
 //# sourceMappingURL=index.d.mts.map