@lolmath/ui 9.2.0 → 9.4.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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, GridLayout, Group, 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, 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, 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, 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 { cva, cx } from "cva";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { createElement, useMemo } from "react";
@@ -438,11 +438,11 @@ function RangeCalendar({ header = "heading", className, ...props }) {
 //#endregion
 //#region src/components/calendar/date-field.module.css
 var date_field_module_default = {
-	"dateInput": "_dateInput_qxz9d_2",
-	"small": "_small_qxz9d_29",
-	"medium": "_medium_qxz9d_33",
-	"large": "_large_qxz9d_37",
-	"segment": "_segment_qxz9d_42"
+	"dateInput": "_dateInput_xrlax_2",
+	"small": "_small_xrlax_33",
+	"medium": "_medium_xrlax_37",
+	"large": "_large_xrlax_41",
+	"segment": "_segment_xrlax_46"
 };
 //#endregion
 //#region src/components/calendar/date-field.tsx
@@ -483,14 +483,14 @@ function DateField({ inputProps = {}, children, size = "medium", ...props }) {
 //#endregion
 //#region src/components/calendar/date-picker.module.css
 var date_picker_module_default = {
-	"group": "_group_xtlnv_2",
-	"small": "_small_xtlnv_19",
-	"medium": "_medium_xtlnv_23",
-	"large": "_large_xtlnv_27",
-	"input": "_input_xtlnv_32",
-	"separator": "_separator_xtlnv_47",
-	"button": "_button_xtlnv_70",
-	"popover": "_popover_xtlnv_106"
+	"group": "_group_1dgbw_2",
+	"small": "_small_1dgbw_19",
+	"medium": "_medium_1dgbw_23",
+	"large": "_large_1dgbw_27",
+	"input": "_input_1dgbw_32",
+	"separator": "_separator_1dgbw_47",
+	"button": "_button_1dgbw_74",
+	"popover": "_popover_1dgbw_110"
 };
 //#endregion
 //#region src/components/calendar/date-picker.tsx
@@ -548,7 +548,7 @@ function DatePicker({ children, groupProps = {}, inputProps = {}, buttonProps =
 		...props,
 		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			typeof children === "function" ? children(values) : children,
-			/* @__PURE__ */ jsxs(Group, {
+			/* @__PURE__ */ jsxs(Group$1, {
 				...groupProps,
 				className: composeRenderProps(groupProps.className, (className, v) => dateGroup({
 					className,
@@ -572,7 +572,7 @@ function DateRangePicker({ children, groupProps = {}, startInputProps = {}, endI
 		shouldCloseOnSelect,
 		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			typeof children === "function" ? children(values) : children,
-			/* @__PURE__ */ jsxs(Group, {
+			/* @__PURE__ */ jsxs(Group$1, {
 				...groupProps,
 				className: composeRenderProps(groupProps.className, (className, v) => dateGroup({
 					className,
@@ -753,6 +753,59 @@ function Divider({ preset = "center", hrProps: { className: hrClassName, ...hrPr
 	});
 }
 //#endregion
+//#region src/components/group.module.css
+var group_module_default = {
+	"group": "_group_74tda_2",
+	"small": "_small_74tda_30",
+	"medium": "_medium_74tda_34",
+	"large": "_large_74tda_38",
+	"input": "_input_74tda_43",
+	"separator": "_separator_74tda_69"
+};
+//#endregion
+//#region src/components/group.tsx
+const group = cva({
+	base: group_module_default.group,
+	variants: { size: {
+		small: group_module_default.small,
+		medium: group_module_default.medium,
+		large: group_module_default.large
+	} }
+});
+/**
+* Visually merges several focusable controls (inputs, buttons, static
+* segments) into what reads as a single bordered field, e.g. a summoner name
+* plus its `#`-prefixed tag. `Group` draws the border itself, so children
+* meant to sit inside it should stay borderless — see `GroupInput` and
+* `GroupSeparator`.
+*/
+function Group({ size = "medium", className, ...props }) {
+	return /* @__PURE__ */ jsx(Group$1, {
+		...props,
+		className: composeRenderProps(className, (className, values) => group({
+			className,
+			size,
+			...values
+		}))
+	});
+}
+/** A borderless text input for use as a segment inside a `Group`. */
+function GroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		type: "text",
+		...props,
+		className: composeRenderProps(className, (className) => cx(group_module_default.input, className))
+	});
+}
+/** A static, non-interactive segment for use inside a `Group`, e.g. a `#` between a name and its tag. */
+function GroupSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		...props,
+		className: cx(group_module_default.separator, className)
+	});
+}
+//#endregion
 //#region src/components/typography/heading.module.css
 var heading_module_default = {
 	"heading": "_heading_4cie6_2",
@@ -943,7 +996,7 @@ const numberFieldInput = cva({
 function NumberField({ inputProps = {}, groupProps = {}, children, preset = "normal", size = "medium", ...props }) {
 	return /* @__PURE__ */ jsx(NumberField$1, {
 		...props,
-		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(values) : children, /* @__PURE__ */ jsxs(Group, {
+		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(values) : children, /* @__PURE__ */ jsxs(Group$1, {
 			...groupProps,
 			className: composeRenderProps(groupProps.className, (className, values) => numberFieldGroup({
 				className,
@@ -1687,6 +1740,84 @@ function ToggleButtonGroup({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/token-field/token-field.module.css
+var token_field_module_default = {
+	"tokenField": "_tokenField_isyx7_2",
+	"input": "_input_isyx7_12",
+	"small": "_small_isyx7_58",
+	"medium": "_medium_isyx7_62",
+	"large": "_large_isyx7_66",
+	"token": "_token_isyx7_2",
+	"hextech": "_hextech_isyx7_90",
+	"gold": "_gold_isyx7_95",
+	"grey": "_grey_isyx7_100"
+};
+//#endregion
+//#region src/components/token-field/token-field.tsx
+/**
+* A text field with inline, non-editable tokens: an `@summoner` mention, a
+* `#tag`, a champion picked from a menu. Text and tokens share one caret, so it
+* reads and edits as a single field rather than as an input with chips beside
+* it.
+*
+* ```tsx
+* <TokenField value={value} onChange={setValue}>
+*   <Label>Prompt</Label>
+*   <TokenInput placeholder="Mention a @summoner">
+*     {(segment) => <Token>{segment.text}</Token>}
+*   </TokenInput>
+* </TokenField>
+* ```
+*
+* This is React Aria's own note, and it holds here too: `TokenField` is alpha
+* upstream, so its API may still move under us.
+*/
+function TokenField({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TokenField$1, {
+		...props,
+		className: composeRenderProps(className, (className) => cx(token_field_module_default.tokenField, className))
+	});
+}
+const tokenInput = cva({
+	base: token_field_module_default.input,
+	variants: { size: {
+		small: token_field_module_default.small,
+		medium: token_field_module_default.medium,
+		large: token_field_module_default.large
+	} },
+	defaultVariants: { size: "medium" }
+});
+/** The editable area of a `TokenField`, rendering a `Token` per token segment. */
+function TokenInput({ className, placeholder, size = "medium", ...props }) {
+	return /* @__PURE__ */ jsx(TokenInput$1, {
+		"data-placeholder": placeholder,
+		...props,
+		className: composeRenderProps(className, (className) => tokenInput({
+			className,
+			size
+		}))
+	});
+}
+const token = cva({
+	base: token_field_module_default.token,
+	variants: { variant: {
+		gold: token_field_module_default.gold,
+		hextech: token_field_module_default.hextech,
+		grey: token_field_module_default.grey
+	} },
+	defaultVariants: { variant: "hextech" }
+});
+/** One non-editable segment inside a `TokenInput`. */
+function Token({ className, variant = "hextech", ...props }) {
+	return /* @__PURE__ */ jsx(Token$1, {
+		...props,
+		className: composeRenderProps(className, (className) => token({
+			className,
+			variant
+		}))
+	});
+}
+//#endregion
 //#region src/components/toolbar.module.css
 var toolbar_module_default = {
 	"toolbar": "_toolbar_1j7x4_2",
@@ -1780,6 +1911,6 @@ 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, GridLayout, Heading, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, NumberField, PickerDateInput, Popover, PopoverBody, 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, Toolbar, ToolbarSeparator, Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, UnstyledPopover, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, heading, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, tree, treeItem, useFilter };
+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 };
 
 //# sourceMappingURL=index.mjs.map