@lolmath/ui 9.4.0 → 9.5.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
-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";
+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 +1524,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 +1574,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 +1648,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 +2050,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