@lolmath/ui 9.4.0 → 9.6.0

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;
@@ -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;
@@ -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

package/dist/index.mjs

@@ -1,7 +1,8 @@
-import { Autocomplete, Autocomplete as Autocomplete$1, AutocompleteContext, AutocompleteStateContext, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, Calendar as Calendar$1, CalendarCell as CalendarCell$1, CalendarGrid as CalendarGrid$1, CalendarGridBody, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, CalendarHeading, CalendarMonthPicker, CalendarYearPicker, Cell, CheckboxButton as CheckboxButton$1, CheckboxField as CheckboxField$1, Collection, Column, ColumnResizer, DateField as DateField$1, DateInput as DateInput$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, DateSegment as DateSegment$1, Dialog, Dialog as Dialog$1, DialogTrigger, Disclosure as Disclosure$1, DisclosureGroup as DisclosureGroup$1, DisclosurePanel as DisclosurePanel$1, FieldError, Focusable, GridLayout, Group as Group$1, Header, Heading as Heading$1, Input, Label as Label$1, Link, ListBox, ListBoxItem, ListBoxItem as ListBoxItem$1, ListLayout, ListLayout as ListLayout$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, Popover as Popover$1, Popover as UnstyledPopover, Pressable, PreviewTrigger, ProgressBar as ProgressBar$1, RadioButton as RadioButton$1, RadioField as RadioField$1, RadioGroup as RadioGroup$1, RangeCalendar as RangeCalendar$1, ResizableTableContainer, RouterProvider, Row, SearchField as SearchField$1, Select, Select as Select$1, SelectValue, SelectValue as SelectValue$1, SelectionIndicator, Separator, Size, Slider as Slider$1, SliderFill, SliderOutput as SliderOutput$1, SliderThumb, SliderTrack, SubmenuTrigger as SubmenuTrigger$1, SwitchButton as SwitchButton$1, SwitchField as SwitchField$1, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, Table as Table$1, TableBody as TableBody$1, TableFooter as TableFooter$1, TableHeader, TableLayout, Tabs as Tabs$1, Tag as Tag$1, TagGroup as TagGroup$1, TagList as TagList$1, Text as Text$1, TextArea as TextArea$1, TextField as TextField$1, TimeField as TimeField$1, ToggleButton as ToggleButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Token as Token$1, TokenField as TokenField$1, TokenFieldValue, TokenInput as TokenInput$1, Toolbar as Toolbar$1, Tree as Tree$1, TreeItem as TreeItem$1, TreeItemContent as TreeItemContent$1, TreeLoadMoreItem as TreeLoadMoreItem$1, Virtualizer, Virtualizer as Virtualizer$1, WaterfallLayout, composeRenderProps, useFilter, useFilter as useFilter$1 } from "react-aria-components";
+/* empty css                */
+import { Autocomplete, Autocomplete as Autocomplete$1, AutocompleteContext, AutocompleteStateContext, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, Calendar as Calendar$1, CalendarCell as CalendarCell$1, CalendarGrid as CalendarGrid$1, CalendarGridBody, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, CalendarHeading, CalendarMonthPicker, CalendarYearPicker, Cell, CheckboxButton as CheckboxButton$1, CheckboxField as CheckboxField$1, Collection, Collection as Collection$1, Column, ColumnResizer, DateField as DateField$1, DateInput as DateInput$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, DateSegment as DateSegment$1, Dialog, Dialog as Dialog$1, DialogTrigger, Disclosure as Disclosure$1, DisclosureGroup as DisclosureGroup$1, DisclosurePanel as DisclosurePanel$1, DropIndicator, FieldError, Focusable, GridLayout, Group as Group$1, Header, Heading as Heading$1, Input, Label as Label$1, Link, ListBox, ListBoxItem, ListBoxItem as ListBoxItem$1, ListLayout, ListLayout as ListLayout$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, Popover as Popover$1, Popover as UnstyledPopover, Pressable, PreviewTrigger, ProgressBar as ProgressBar$1, RadioButton as RadioButton$1, RadioField as RadioField$1, RadioGroup as RadioGroup$1, RangeCalendar as RangeCalendar$1, ResizableTableContainer as ResizableTableContainer$1, RouterProvider, Row, SearchField as SearchField$1, Select, Select as Select$1, SelectValue, SelectValue as SelectValue$1, SelectionIndicator, Separator, Size, Slider as Slider$1, SliderFill, SliderOutput as SliderOutput$1, SliderThumb, SliderTrack, SubmenuTrigger as SubmenuTrigger$1, SwitchButton as SwitchButton$1, SwitchField as SwitchField$1, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, Table as Table$1, TableBody as TableBody$1, TableFooter as TableFooter$1, TableHeader as TableHeader$1, TableLayout, TableLoadMoreItem as TableLoadMoreItem$1, Tabs as Tabs$1, Tag as Tag$1, TagGroup as TagGroup$1, TagList as TagList$1, Text as Text$1, TextArea as TextArea$1, TextField as TextField$1, TimeField as TimeField$1, ToggleButton as ToggleButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Token as Token$1, TokenField as TokenField$1, TokenFieldValue, TokenInput as TokenInput$1, Toolbar as Toolbar$1, Tree as Tree$1, TreeItem as TreeItem$1, TreeItemContent as TreeItemContent$1, TreeLoadMoreItem as TreeLoadMoreItem$1, Virtualizer, Virtualizer as Virtualizer$1, WaterfallLayout, composeRenderProps, isTextDropItem, useAsyncList, useDragAndDrop, useDragAndDrop as useDragAndDrop$1, useFilter, useFilter as useFilter$1, useListData, useTableOptions } from "react-aria-components";
 import { cva, cx } from "cva";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { createElement, useMemo } from "react";
+import React, { createContext, createElement, useContext, useMemo } from "react";
 import { Toaster, toast } from "sonner";
 //#region src/components/breadcrumbs/breadcrumbs.module.css
 var breadcrumbs_module_default = {
@@ -1524,28 +1525,49 @@ function Switch({ children, className, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/table.module.css
+//#region src/components/table/table.module.css
 var table_module_default = {
-	"resizableContainer": "_resizableContainer_1iv6r_2",
-	"table": "_table_1iv6r_7",
-	"row": "_row_1iv6r_25",
-	"cell": "_cell_1iv6r_84",
-	"resizer": "_resizer_1iv6r_102",
-	"sortIndicator": "_sortIndicator_1iv6r_134",
-	"column": "_column_1iv6r_158",
-	"footer": "_footer_1iv6r_214",
-	"empty": "_empty_1iv6r_222",
-	"start": "_start_1iv6r_233",
-	"center": "_center_1iv6r_237",
-	"end": "_end_1iv6r_241"
+	"resizableContainer": "_resizableContainer_1ftu2_2",
+	"table": "_table_1ftu2_7",
+	"column": "_column_1ftu2_46",
+	"row": "_row_1ftu2_56",
+	"cell": "_cell_1ftu2_130",
+	"resizer": "_resizer_1ftu2_148",
+	"sortIndicator": "_sortIndicator_1ftu2_180",
+	"selectionColumn": "_selectionColumn_1ftu2_264",
+	"selectionCell": "_selectionCell_1ftu2_265",
+	"gripColumn": "_gripColumn_1ftu2_266",
+	"gripCell": "_gripCell_1ftu2_267",
+	"grip": "_grip_1ftu2_266",
+	"dropIndicator": "_dropIndicator_1ftu2_119",
+	"treeContent": "_treeContent_1ftu2_327",
+	"chevron": "_chevron_1ftu2_337",
+	"chevronSpacer": "_chevronSpacer_1ftu2_366",
+	"loadMore": "_loadMore_1ftu2_386",
+	"spinner": "_spinner_1ftu2_391",
+	"footer": "_footer_1ftu2_396",
+	"empty": "_empty_1ftu2_404",
+	"start": "_start_1ftu2_415",
+	"center": "_center_1ftu2_419",
+	"end": "_end_1ftu2_423"
 };
 //#endregion
-//#region src/components/table.tsx
-const alignVariants = {
+//#region src/components/table/table.tsx
+const alignVariants$1 = {
 	start: table_module_default.start,
 	center: table_module_default.center,
 	end: table_module_default.end
 };
+/**
+* A `TableRow` inside a `TableFooter` still has to line up with the columns
+* above it, but it owns no selection checkbox and nothing to drag: the footer
+* fills those columns with empty cells instead.
+*
+* The context is read while the collection is being built — the pass in which
+* every wrapper in this file runs — so it reaches the rows even though react
+* aria renders the footer's DOM from the collection afterwards.
+*/
+const TableFooterContext = createContext(false);
 const table = cva({ base: table_module_default.table });
 function Table({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Table$1, {
@@ -1553,9 +1575,45 @@ function Table({ className, ...props }) {
 		className: composeRenderProps(className, (className) => table({ className }))
 	});
 }
+/**
+* The scroll container a `Table` needs for `allowsResizing` columns: it is the
+* element the column widths are measured against.
+*/
+function ResizableTableContainer({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ResizableTableContainer$1, {
+		...props,
+		className: cx(table_module_default.resizableContainer, className)
+	});
+}
+/**
+* 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.
+*/
+function TableHeader({ children, className, columns, dependencies, ...props }) {
+	const { allowsDragging, selectionBehavior, selectionMode } = useTableOptions();
+	return /* @__PURE__ */ jsxs(TableHeader$1, {
+		...props,
+		className,
+		children: [
+			allowsDragging && /* @__PURE__ */ jsx(Column, { className: tableColumn({ className: table_module_default.gripColumn }) }),
+			selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Column, {
+				className: tableColumn({ className: table_module_default.selectionColumn }),
+				children: selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { slot: "selection" })
+			}),
+			/* @__PURE__ */ jsx(Collection$1, {
+				dependencies,
+				items: columns,
+				children
+			})
+		]
+	});
+}
 const tableColumn = cva({
 	base: table_module_default.column,
-	variants: { align: alignVariants },
+	variants: { align: alignVariants$1 },
 	defaultVariants: { align: "start" }
 });
 function TableColumn({ align = "start", children, className, ...props }) {
@@ -1591,30 +1649,112 @@ function TableBody({ emptyState = "No results found", renderEmptyState, ...props
 	});
 }
 const tableRow = cva({ base: table_module_default.row });
-function TableRow({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Row, {
+/**
+* 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.
+*/
+function TableRow({ children, className, columns, dependencies, ...props }) {
+	const { allowsDragging, selectionBehavior } = useTableOptions();
+	const isFooterRow = useContext(TableFooterContext);
+	return /* @__PURE__ */ jsxs(Row, {
 		...props,
-		className: composeRenderProps(className, (className) => tableRow({ className }))
+		className: composeRenderProps(className, (className) => tableRow({ className })),
+		children: [
+			allowsDragging && /* @__PURE__ */ jsx(TableCell, {
+				className: table_module_default.gripCell,
+				children: !isFooterRow && /* @__PURE__ */ jsx(Button$1, {
+					className: table_module_default.grip,
+					slot: "drag"
+				})
+			}),
+			selectionBehavior === "toggle" && /* @__PURE__ */ jsx(TableCell, {
+				className: table_module_default.selectionCell,
+				children: !isFooterRow && /* @__PURE__ */ jsx(Checkbox, { slot: "selection" })
+			}),
+			/* @__PURE__ */ jsx(Collection$1, {
+				dependencies: dependencies ? [props.value, ...dependencies] : [props.value],
+				idScope: props.id,
+				items: columns,
+				children
+			})
+		]
 	});
 }
 const tableCell = cva({
 	base: table_module_default.cell,
-	variants: { align: alignVariants },
+	variants: { align: alignVariants$1 },
 	defaultVariants: { align: "start" }
 });
-function TableCell({ align = "start", className, ...props }) {
+/**
+* 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.
+*/
+function TableCell({ align = "start", children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Cell, {
 		...props,
 		className: composeRenderProps(className, (className) => tableCell({
 			align,
 			className
-		}))
+		})),
+		children: composeRenderProps(children, (children, { hasChildItems, isTreeColumn }) => isTreeColumn ? /* @__PURE__ */ jsxs("span", {
+			className: table_module_default.treeContent,
+			children: [hasChildItems ? /* @__PURE__ */ jsx(Button$1, {
+				className: table_module_default.chevron,
+				slot: "chevron"
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: table_module_default.chevronSpacer
+			}), children]
+		}) : children)
 	});
 }
 function TableFooter({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TableFooter$1, {
+	return /* @__PURE__ */ jsx(TableFooterContext, {
+		value: true,
+		children: /* @__PURE__ */ jsx(TableFooter$1, {
+			...props,
+			className: cx(table_module_default.footer, className)
+		})
+	});
+}
+/**
+* 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.
+*/
+function TableLoadMoreItem({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx(TableLoadMoreItem$1, {
+		...props,
+		className: cx(table_module_default.loadMore, className),
+		children: children ?? /* @__PURE__ */ jsx(Spinner, { className: table_module_default.spinner })
+	});
+}
+/**
+* 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.
+*/
+function TableDropIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropIndicator, {
 		...props,
-		className: cx(table_module_default.footer, className)
+		className: composeRenderProps(className, (className) => cx(table_module_default.dropIndicator, className))
+	});
+}
+/**
+* `useDragAndDrop` with the table's own drop indicator, for the
+* `dragAndDropHooks` prop of a `Table`.
+*/
+function useTableDragAndDrop(options) {
+	return useDragAndDrop$1({
+		renderDropIndicator: (target) => /* @__PURE__ */ jsx(TableDropIndicator, { target }),
+		...options
 	});
 }
 //#endregion
@@ -1911,6 +2051,71 @@ function TreeLoadMoreItem({ children, className, ...props }) {
 	});
 }
 //#endregion
-export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, Focusable, GridLayout, Group, GroupInput, GroupSeparator, Heading, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, NumberField, PickerDateInput, Popover, PopoverBody, Pressable, PreviewTrigger, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, Size, Slider, SliderOutput, Sonner, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableColumnResizer, TableFooter, TableHeader, TableLayout, TableRow, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Token, TokenField, TokenFieldValue, TokenInput, Toolbar, ToolbarSeparator, Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, 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.module.css
+var vertical_table_module_default = {
+	"table": "_table_v9mcp_2",
+	"fieldHeader": "_fieldHeader_v9mcp_26",
+	"recordHeader": "_recordHeader_v9mcp_27",
+	"corner": "_corner_v9mcp_28",
+	"cell": "_cell_v9mcp_70",
+	"start": "_start_v9mcp_76",
+	"center": "_center_v9mcp_80",
+	"end": "_end_v9mcp_84"
+};
+//#endregion
+//#region src/components/vertical-table/vertical-table.tsx
+const alignVariants = {
+	start: vertical_table_module_default.start,
+	center: vertical_table_module_default.center,
+	end: vertical_table_module_default.end
+};
+const verticalTable = cva({ base: vertical_table_module_default.table });
+const verticalTableCell = cva({
+	base: vertical_table_module_default.cell,
+	variants: { align: alignVariants },
+	defaultVariants: { align: "start" }
+});
+const verticalTableRecordHeader = cva({
+	base: vertical_table_module_default.recordHeader,
+	variants: { align: alignVariants },
+	defaultVariants: { align: "start" }
+});
+/**
+* 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.
+*/
+function VerticalTable({ align = "start", className, fields, recordHeader, recordKey = (_record, index) => index, records, ...props }) {
+	return /* @__PURE__ */ jsxs("table", {
+		...props,
+		className: verticalTable({ className }),
+		children: [recordHeader && /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", { className: vertical_table_module_default.corner }), records.map((record, index) => /* @__PURE__ */ jsx("th", {
+			className: verticalTableRecordHeader({ align }),
+			scope: "col",
+			children: recordHeader(record, index)
+		}, recordKey(record, index)))] }) }), /* @__PURE__ */ jsx("tbody", { children: fields.map((field, fieldIndex) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+			className: vertical_table_module_default.fieldHeader,
+			scope: "row",
+			children: field.name
+		}), records.map((record, index) => /* @__PURE__ */ jsx("td", {
+			className: verticalTableCell({ align: field.align ?? align }),
+			children: field.value(record, index)
+		}, recordKey(record, index)))] }, field.id ?? fieldIndex)) })]
+	});
+}
+//#endregion
+export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, Focusable, GridLayout, Group, GroupInput, GroupSeparator, Heading, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, NumberField, PickerDateInput, Popover, PopoverBody, Pressable, PreviewTrigger, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, Size, Slider, SliderOutput, Sonner, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableColumnResizer, TableDropIndicator, TableFooter, TableHeader, TableLayout, TableLoadMoreItem, TableRow, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Token, TokenField, TokenFieldValue, TokenInput, Toolbar, ToolbarSeparator, Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, UnstyledPopover, VerticalTable, 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.mjs.map