@lolmath/ui 9.3.0 → 9.4.0

package/dist/index.css

@@ -1004,7 +1004,7 @@
 	}
 }
 @layer lol {
-	._dateInput_qxz9d_2 {
+	._dateInput_xrlax_2 {
 		background:
 			var(--lol-input-background-gradient) padding-box,
 			var(--lol-input-border-gradient) border-box;
@@ -1022,8 +1022,12 @@
 
 		font-family: var(--lol-font-family-spiegel);
 
+		/* Matches the fill DatePicker/DateRangePicker's own date input takes when
+		   disabled, so a standalone DateField/TimeField greys out the same way as
+		   the pickers it sits next to in a form. */
 		&[data-disabled] {
 			--lol-input-border-gradient: var(--lol-gradient-disabled);
+			--lol-input-background-gradient: var(--lol-gradient-grey-300);
 		}
 
 		&[data-focus-within] {
@@ -1031,20 +1035,20 @@
 			--lol-input-background-gradient: var(--lol-gradient-grey-focus);
 		}
 
-		&._small_qxz9d_29 {
+		&._small_xrlax_33 {
 			min-height: var(--lol-form-height-small);
 		}
 
-		&._medium_qxz9d_33 {
+		&._medium_xrlax_37 {
 			min-height: var(--lol-form-height-medium);
 		}
 
-		&._large_qxz9d_37 {
+		&._large_xrlax_41 {
 			min-height: var(--lol-form-height-large);
 		}
 	}
 
-	._segment_qxz9d_42 {
+	._segment_xrlax_46 {
 		padding: 0 0.125rem;
 		border-radius: 2px;
 		font-size: 0.75rem;
@@ -2772,6 +2776,123 @@
 		}
 	}
 }
+@layer lol {
+	._tokenField_isyx7_2 {
+		display: grid;
+		grid-template-areas:
+			"label"
+			"input"
+			"help";
+
+		color: var(--lol-color-gold-100);
+	}
+
+	._input_isyx7_12 {
+		background:
+			var(--lol-token-field-background-gradient) padding-box,
+			var(--lol-token-field-border-gradient) border-box;
+
+		--lol-token-field-border-gradient: var(--lol-gradient-gold);
+		--lol-token-field-background-gradient: var(--lol-gradient-hextech-black);
+
+		border: 1px solid transparent;
+		grid-area: input;
+		margin: 0;
+		padding: 0.375rem 0.75rem;
+		outline: none;
+
+		font-family: var(--lol-font-family-spiegel);
+		font-size: 0.75rem;
+		font-weight: 500;
+		letter-spacing: 0.025em;
+		line-height: 1.25rem;
+		color: var(--lol-color-gold-100);
+
+		/* The editable area is a contenteditable box holding a mix of text nodes
+		   and token spans, so it has to stay a block formatting context: a flex
+		   container would wrap each run of text in an anonymous box and the caret
+		   would no longer move across the boundaries between them. */
+		display: block;
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+
+		&[data-disabled] {
+			--lol-token-field-border-gradient: var(--lol-gradient-disabled);
+			color: var(--lol-color-grey-150);
+		}
+
+		&[data-focused] {
+			--lol-token-field-border-gradient: var(--lol-gradient-gold-hover);
+			--lol-token-field-background-gradient: var(--lol-gradient-grey-focus);
+		}
+
+		/* The field holds no value of its own to hang a `::placeholder` on — its
+		   content is the editable DOM — so an empty box paints the hint itself. */
+		&:empty::before {
+			content: attr(data-placeholder);
+			color: var(--lol-color-grey-150);
+		}
+
+		&._small_isyx7_58 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_isyx7_62 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_isyx7_66 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._token_isyx7_2 {
+		background:
+			var(--lol-token-background-gradient) padding-box,
+			var(--lol-token-border-gradient) border-box;
+
+		--lol-token-border-gradient: var(--lol-gradient-hextech);
+		--lol-token-background-gradient: var(--lol-gradient-grey-300);
+
+		border: 1px solid transparent;
+		border-radius: 9999px;
+		padding: 0 0.4rem;
+
+		/* Inline, so a token flows with the text it sits between and wraps with
+		   it; inline-block would still be one atom but cannot break onto the next
+		   line as a run of text does around it. */
+		display: inline;
+		color: var(--lol-color-blue-100);
+		white-space: nowrap;
+
+		&._hextech_isyx7_90 {
+			--lol-token-border-gradient: var(--lol-gradient-hextech);
+			color: var(--lol-color-blue-100);
+		}
+
+		&._gold_isyx7_95 {
+			--lol-token-border-gradient: var(--lol-gradient-gold);
+			color: var(--lol-color-gold-300);
+		}
+
+		&._grey_isyx7_100 {
+			--lol-token-border-gradient: var(--lol-color-grey-100);
+			color: var(--lol-color-gold-100);
+		}
+
+		/* `userSelect: all` makes a token select as one atom, so the selected
+		   state is all-or-nothing and can be painted as such. */
+		&[data-selected] {
+			--lol-token-background-gradient: var(--lol-gradient-gold-hover);
+			color: var(--lol-color-hextech-black);
+		}
+
+		&[data-disabled] {
+			--lol-token-border-gradient: var(--lol-gradient-disabled);
+			color: var(--lol-color-grey-150);
+		}
+	}
+}
 @layer lol {
 	._toolbar_1j7x4_2 {
 		display: flex;

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-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, 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, 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, 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 { 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 { ExternalToast, ToasterProps } from "sonner";
 //#region src/components/breadcrumbs/breadcrumbs.d.ts
@@ -528,6 +528,57 @@ declare function ToggleButton({ children, className, preset, shape, size, thin,
 interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {}
 declare function ToggleButtonGroup({ className, ...props }: ToggleButtonGroupProps): import("react").JSX.Element;
 //#endregion
+//#region src/components/token-field/token-field.d.ts
+/**
+ * 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.
+ */
+declare function TokenField<T extends TokenFieldValue$1 = TokenFieldValue$1>({ className, ...props }: TokenFieldProps<T>): import("react").JSX.Element;
+declare const tokenInput: (props?: ({
+  size?: "small" | "medium" | "large" | undefined;
+} & ({
+  class?: import("cva").ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className?: import("cva").ClassValue;
+})) | undefined) => string;
+interface TokenInputProps<T extends TokenFieldValue$1 = TokenFieldValue$1> extends TokenInputProps$1<T> {
+  size?: "small" | "medium" | "large";
+  /** Shown while the field is empty; painted by the field, not by the UA. */
+  placeholder?: string;
+}
+/** 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;
+} & ({
+  class?: import("cva").ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className?: import("cva").ClassValue;
+})) | undefined) => string;
+interface TokenProps extends TokenProps$1 {
+  variant?: "gold" | "hextech" | "grey";
+}
+/** One non-editable segment inside a `TokenInput`. */
+declare function Token({ className, variant, ...props }: TokenProps): import("react").JSX.Element;
+//#endregion
 //#region src/components/toolbar.d.ts
 interface ToolbarProps extends ToolbarProps$1 {}
 declare function Toolbar({ className, ...props }: ToolbarProps): import("react").JSX.Element;
@@ -619,5 +670,5 @@ 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, 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, 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, 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, tree, treeItem, useFilter };
+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 };
 //# sourceMappingURL=index.d.mts.map

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 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, 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
@@ -1740,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",
@@ -1833,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, Group, GroupInput, GroupSeparator, 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, group, 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