@lolmath/ui 9.2.0 → 9.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1004,7 +1004,7 @@
1004
1004
  }
1005
1005
  }
1006
1006
  @layer lol {
1007
- ._dateInput_qxz9d_2 {
1007
+ ._dateInput_xrlax_2 {
1008
1008
  background:
1009
1009
  var(--lol-input-background-gradient) padding-box,
1010
1010
  var(--lol-input-border-gradient) border-box;
@@ -1022,8 +1022,12 @@
1022
1022
 
1023
1023
  font-family: var(--lol-font-family-spiegel);
1024
1024
 
1025
+ /* Matches the fill DatePicker/DateRangePicker's own date input takes when
1026
+ disabled, so a standalone DateField/TimeField greys out the same way as
1027
+ the pickers it sits next to in a form. */
1025
1028
  &[data-disabled] {
1026
1029
  --lol-input-border-gradient: var(--lol-gradient-disabled);
1030
+ --lol-input-background-gradient: var(--lol-gradient-grey-300);
1027
1031
  }
1028
1032
 
1029
1033
  &[data-focus-within] {
@@ -1031,20 +1035,20 @@
1031
1035
  --lol-input-background-gradient: var(--lol-gradient-grey-focus);
1032
1036
  }
1033
1037
 
1034
- &._small_qxz9d_29 {
1038
+ &._small_xrlax_33 {
1035
1039
  min-height: var(--lol-form-height-small);
1036
1040
  }
1037
1041
 
1038
- &._medium_qxz9d_33 {
1042
+ &._medium_xrlax_37 {
1039
1043
  min-height: var(--lol-form-height-medium);
1040
1044
  }
1041
1045
 
1042
- &._large_qxz9d_37 {
1046
+ &._large_xrlax_41 {
1043
1047
  min-height: var(--lol-form-height-large);
1044
1048
  }
1045
1049
  }
1046
1050
 
1047
- ._segment_qxz9d_42 {
1051
+ ._segment_xrlax_46 {
1048
1052
  padding: 0 0.125rem;
1049
1053
  border-radius: 2px;
1050
1054
  font-size: 0.75rem;
@@ -1086,7 +1090,7 @@
1086
1090
  }
1087
1091
  }
1088
1092
  @layer lol {
1089
- ._group_xtlnv_2 {
1093
+ ._group_1dgbw_2 {
1090
1094
  display: flex;
1091
1095
  align-items: stretch;
1092
1096
  gap: 1px;
@@ -1103,20 +1107,20 @@
1103
1107
  background-image: var(--lol-gradient-gold-hover);
1104
1108
  }
1105
1109
 
1106
- &._small_xtlnv_19 {
1110
+ &._small_1dgbw_19 {
1107
1111
  min-height: var(--lol-form-height-small);
1108
1112
  }
1109
1113
 
1110
- &._medium_xtlnv_23 {
1114
+ &._medium_1dgbw_23 {
1111
1115
  min-height: var(--lol-form-height-medium);
1112
1116
  }
1113
1117
 
1114
- &._large_xtlnv_27 {
1118
+ &._large_1dgbw_27 {
1115
1119
  min-height: var(--lol-form-height-large);
1116
1120
  }
1117
1121
  }
1118
1122
 
1119
- ._input_xtlnv_32 {
1123
+ ._input_1dgbw_32 {
1120
1124
  flex: 1;
1121
1125
  display: flex;
1122
1126
  align-items: center;
@@ -1131,13 +1135,17 @@
1131
1135
  }
1132
1136
  }
1133
1137
 
1134
- ._separator_xtlnv_47 {
1138
+ ._separator_1dgbw_47 {
1135
1139
  display: flex;
1136
1140
  align-items: center;
1137
1141
  background-color: var(--lol-color-hextech-black);
1138
1142
  color: var(--lol-color-grey-100);
1139
1143
  padding: 0 0.125rem;
1140
1144
  font-family: var(--lol-font-family-spiegel);
1145
+ /* Match the date segments' line-height so flex-centering the dash
1146
+ against the same line-box height keeps it optically level. */
1147
+ font-size: 0.75rem;
1148
+ line-height: 1rem;
1141
1149
  /*
1142
1150
  * `.group`'s `gap` is what shows its gold background between every
1143
1151
  * pair of children — including the two 1px slivers flanking this
@@ -1154,7 +1162,7 @@
1154
1162
  }
1155
1163
  }
1156
1164
 
1157
- ._button_xtlnv_70 {
1165
+ ._button_1dgbw_74 {
1158
1166
  /* A <button> we never paint: without this it falls back to the UA's
1159
1167
  `buttonface` slab, which is grey under `color-scheme: dark`. */
1160
1168
  appearance: none;
@@ -1190,7 +1198,7 @@
1190
1198
  * of separately-filled sections. The visible "hextech" gradient lives on
1191
1199
  * selected dates themselves (see calendar.module.css), not the popover.
1192
1200
  */
1193
- ._popover_xtlnv_106 {
1201
+ ._popover_1dgbw_110 {
1194
1202
  padding: 0.75rem;
1195
1203
  border: 2px solid transparent;
1196
1204
  box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
@@ -1349,6 +1357,92 @@
1349
1357
  flex-grow: 1;
1350
1358
  }
1351
1359
  }
1360
+ @layer lol {
1361
+ ._group_74tda_2 {
1362
+ display: flex;
1363
+ align-items: stretch;
1364
+ outline: none;
1365
+
1366
+ /*
1367
+ * Unlike NumberField's Group, the pieces here (name + tag, start date +
1368
+ * end date, ...) read as one field, not separately-boxed controls — so
1369
+ * the border and fill are drawn once, on the group itself, instead of
1370
+ * per-child with gaps between them.
1371
+ */
1372
+ background:
1373
+ var(--lol-input-background-gradient) padding-box,
1374
+ var(--lol-input-border-gradient) border-box;
1375
+
1376
+ --lol-input-border-gradient: var(--lol-gradient-gold);
1377
+ --lol-input-background-gradient: var(--lol-gradient-hextech-black);
1378
+
1379
+ border: 1px solid transparent;
1380
+
1381
+ &[data-disabled] {
1382
+ --lol-input-border-gradient: var(--lol-gradient-disabled);
1383
+ }
1384
+
1385
+ &[data-focus-within] {
1386
+ --lol-input-border-gradient: var(--lol-gradient-gold-hover);
1387
+ }
1388
+
1389
+ &._small_74tda_30 {
1390
+ min-height: var(--lol-form-height-small);
1391
+ }
1392
+
1393
+ &._medium_74tda_34 {
1394
+ min-height: var(--lol-form-height-medium);
1395
+ }
1396
+
1397
+ &._large_74tda_38 {
1398
+ min-height: var(--lol-form-height-large);
1399
+ }
1400
+ }
1401
+
1402
+ ._input_74tda_43 {
1403
+ /* Transparent so the group's own fill shows through with no seam. */
1404
+ border: 0;
1405
+ margin: 0;
1406
+ flex: 1;
1407
+ min-width: 0;
1408
+ background-color: transparent;
1409
+ color: var(--lol-color-gold-100);
1410
+ font-family: var(--lol-font-family-spiegel);
1411
+ font-weight: 500;
1412
+ font-size: 0.75rem;
1413
+ line-height: 1rem;
1414
+ letter-spacing: 0.025em;
1415
+ padding: 0 0.75rem;
1416
+ outline: none;
1417
+
1418
+ &[data-disabled] {
1419
+ background-color: var(--lol-color-grey-300);
1420
+ color: var(--lol-color-grey-100);
1421
+ }
1422
+
1423
+ &[data-focused] {
1424
+ background-image: var(--lol-gradient-grey-focus);
1425
+ }
1426
+ }
1427
+
1428
+ ._separator_74tda_69 {
1429
+ display: flex;
1430
+ align-items: center;
1431
+ flex: none;
1432
+ color: var(--lol-color-gold-300);
1433
+ font-family: var(--lol-font-family-spiegel);
1434
+ font-weight: 700;
1435
+ font-size: 0.75rem;
1436
+ /* Match `.input`'s line-height so flex-centering both glyphs against
1437
+ the same line-box height keeps them optically level. */
1438
+ line-height: 1rem;
1439
+ padding: 0 0.5rem;
1440
+
1441
+ &[data-disabled] {
1442
+ color: var(--lol-color-grey-150);
1443
+ }
1444
+ }
1445
+ }
1352
1446
  @layer lol {
1353
1447
  ._heading_4cie6_2 {
1354
1448
  /* Rendered as h1-h5, which the UA gives block margins scaled to the font. */
@@ -2682,6 +2776,123 @@
2682
2776
  }
2683
2777
  }
2684
2778
  }
2779
+ @layer lol {
2780
+ ._tokenField_isyx7_2 {
2781
+ display: grid;
2782
+ grid-template-areas:
2783
+ "label"
2784
+ "input"
2785
+ "help";
2786
+
2787
+ color: var(--lol-color-gold-100);
2788
+ }
2789
+
2790
+ ._input_isyx7_12 {
2791
+ background:
2792
+ var(--lol-token-field-background-gradient) padding-box,
2793
+ var(--lol-token-field-border-gradient) border-box;
2794
+
2795
+ --lol-token-field-border-gradient: var(--lol-gradient-gold);
2796
+ --lol-token-field-background-gradient: var(--lol-gradient-hextech-black);
2797
+
2798
+ border: 1px solid transparent;
2799
+ grid-area: input;
2800
+ margin: 0;
2801
+ padding: 0.375rem 0.75rem;
2802
+ outline: none;
2803
+
2804
+ font-family: var(--lol-font-family-spiegel);
2805
+ font-size: 0.75rem;
2806
+ font-weight: 500;
2807
+ letter-spacing: 0.025em;
2808
+ line-height: 1.25rem;
2809
+ color: var(--lol-color-gold-100);
2810
+
2811
+ /* The editable area is a contenteditable box holding a mix of text nodes
2812
+ and token spans, so it has to stay a block formatting context: a flex
2813
+ container would wrap each run of text in an anonymous box and the caret
2814
+ would no longer move across the boundaries between them. */
2815
+ display: block;
2816
+ white-space: pre-wrap;
2817
+ overflow-wrap: anywhere;
2818
+
2819
+ &[data-disabled] {
2820
+ --lol-token-field-border-gradient: var(--lol-gradient-disabled);
2821
+ color: var(--lol-color-grey-150);
2822
+ }
2823
+
2824
+ &[data-focused] {
2825
+ --lol-token-field-border-gradient: var(--lol-gradient-gold-hover);
2826
+ --lol-token-field-background-gradient: var(--lol-gradient-grey-focus);
2827
+ }
2828
+
2829
+ /* The field holds no value of its own to hang a `::placeholder` on — its
2830
+ content is the editable DOM — so an empty box paints the hint itself. */
2831
+ &:empty::before {
2832
+ content: attr(data-placeholder);
2833
+ color: var(--lol-color-grey-150);
2834
+ }
2835
+
2836
+ &._small_isyx7_58 {
2837
+ min-height: var(--lol-form-height-small);
2838
+ }
2839
+
2840
+ &._medium_isyx7_62 {
2841
+ min-height: var(--lol-form-height-medium);
2842
+ }
2843
+
2844
+ &._large_isyx7_66 {
2845
+ min-height: var(--lol-form-height-large);
2846
+ }
2847
+ }
2848
+
2849
+ ._token_isyx7_2 {
2850
+ background:
2851
+ var(--lol-token-background-gradient) padding-box,
2852
+ var(--lol-token-border-gradient) border-box;
2853
+
2854
+ --lol-token-border-gradient: var(--lol-gradient-hextech);
2855
+ --lol-token-background-gradient: var(--lol-gradient-grey-300);
2856
+
2857
+ border: 1px solid transparent;
2858
+ border-radius: 9999px;
2859
+ padding: 0 0.4rem;
2860
+
2861
+ /* Inline, so a token flows with the text it sits between and wraps with
2862
+ it; inline-block would still be one atom but cannot break onto the next
2863
+ line as a run of text does around it. */
2864
+ display: inline;
2865
+ color: var(--lol-color-blue-100);
2866
+ white-space: nowrap;
2867
+
2868
+ &._hextech_isyx7_90 {
2869
+ --lol-token-border-gradient: var(--lol-gradient-hextech);
2870
+ color: var(--lol-color-blue-100);
2871
+ }
2872
+
2873
+ &._gold_isyx7_95 {
2874
+ --lol-token-border-gradient: var(--lol-gradient-gold);
2875
+ color: var(--lol-color-gold-300);
2876
+ }
2877
+
2878
+ &._grey_isyx7_100 {
2879
+ --lol-token-border-gradient: var(--lol-color-grey-100);
2880
+ color: var(--lol-color-gold-100);
2881
+ }
2882
+
2883
+ /* `userSelect: all` makes a token select as one atom, so the selected
2884
+ state is all-or-nothing and can be painted as such. */
2885
+ &[data-selected] {
2886
+ --lol-token-background-gradient: var(--lol-gradient-gold-hover);
2887
+ color: var(--lol-color-hextech-black);
2888
+ }
2889
+
2890
+ &[data-disabled] {
2891
+ --lol-token-border-gradient: var(--lol-gradient-disabled);
2892
+ color: var(--lol-color-grey-150);
2893
+ }
2894
+ }
2895
+ }
2685
2896
  @layer lol {
2686
2897
  ._toolbar_1j7x4_2 {
2687
2898
  display: flex;
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- 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, 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";
1
+ 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";
2
2
  import React$1, { ComponentProps, JSX, Ref } from "react";
3
3
  import { ExternalToast, ToasterProps } from "sonner";
4
4
  //#region src/components/breadcrumbs/breadcrumbs.d.ts
@@ -117,7 +117,7 @@ declare function PickerDateInput({ className, children, ...props }: Omit<Compone
117
117
  declare function DatePickerButton({ className, children, ...props }: ButtonProps): import("react").JSX.Element;
118
118
  declare function DatePickerPopover({ className, ...props }: PopoverProps): import("react").JSX.Element;
119
119
  declare function DatePicker<T extends DateValue$1>({ children, groupProps, inputProps, buttonProps, popoverProps, calendarProps, size, ...props }: DatePickerProps<T> & {
120
- groupProps?: ComponentProps<typeof Group>;
120
+ groupProps?: ComponentProps<typeof Group$1>;
121
121
  inputProps?: ComponentProps<typeof PickerDateInput>;
122
122
  buttonProps?: ButtonProps;
123
123
  popoverProps?: PopoverProps;
@@ -127,7 +127,7 @@ declare function DatePicker<T extends DateValue$1>({ children, groupProps, input
127
127
  //#endregion
128
128
  //#region src/components/calendar/date-range-picker.d.ts
129
129
  declare function DateRangePicker<T extends DateValue$1>({ children, groupProps, startInputProps, endInputProps, buttonProps, popoverProps, calendarProps, size, shouldCloseOnSelect, ...props }: DateRangePickerProps<T> & {
130
- groupProps?: ComponentProps<typeof Group>;
130
+ groupProps?: ComponentProps<typeof Group$1>;
131
131
  startInputProps?: ComponentProps<typeof PickerDateInput>;
132
132
  endInputProps?: ComponentProps<typeof PickerDateInput>;
133
133
  buttonProps?: ButtonProps;
@@ -161,6 +161,32 @@ interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
161
161
  }
162
162
  declare function Divider({ preset, hrProps: { className: hrClassName, ...hrProps }, childrenWrapperProps: { className: childrenWrapperClassName, ...childrenWrapperProps }, className, children, ...rest }: DividerProps): import("react").JSX.Element;
163
163
  //#endregion
164
+ //#region src/components/group.d.ts
165
+ declare const group: (props?: ({
166
+ size?: "small" | "medium" | "large" | undefined;
167
+ } & ({
168
+ class?: import("cva").ClassValue;
169
+ className?: never;
170
+ } | {
171
+ class?: never;
172
+ className?: import("cva").ClassValue;
173
+ })) | undefined) => string;
174
+ interface GroupProps extends GroupProps$1 {
175
+ size?: "small" | "medium" | "large";
176
+ }
177
+ /**
178
+ * Visually merges several focusable controls (inputs, buttons, static
179
+ * segments) into what reads as a single bordered field, e.g. a summoner name
180
+ * plus its `#`-prefixed tag. `Group` draws the border itself, so children
181
+ * meant to sit inside it should stay borderless — see `GroupInput` and
182
+ * `GroupSeparator`.
183
+ */
184
+ declare function Group({ size, className, ...props }: GroupProps): import("react").JSX.Element;
185
+ /** A borderless text input for use as a segment inside a `Group`. */
186
+ declare function GroupInput({ className, ...props }: ComponentProps<typeof Input>): import("react").JSX.Element;
187
+ /** A static, non-interactive segment for use inside a `Group`, e.g. a `#` between a name and its tag. */
188
+ declare function GroupSeparator({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
189
+ //#endregion
164
190
  //#region src/components/menu/menu.d.ts
165
191
  declare const MenuTrigger: typeof MenuTrigger$1;
166
192
  declare const SubmenuTrigger: (props: import("react-aria-components").SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
@@ -188,7 +214,7 @@ declare function DialogButtons({ children }: {
188
214
  type NumberFieldPreset = "normal" | "dimmed";
189
215
  declare function NumberField({ inputProps, groupProps, children, preset, size, ...props }: NumberFieldProps & {
190
216
  inputProps?: ComponentProps<typeof Input>;
191
- groupProps?: ComponentProps<typeof Group>;
217
+ groupProps?: ComponentProps<typeof Group$1>;
192
218
  preset?: NumberFieldPreset;
193
219
  size?: "small" | "medium" | "large";
194
220
  }): import("react").JSX.Element;
@@ -502,6 +528,57 @@ declare function ToggleButton({ children, className, preset, shape, size, thin,
502
528
  interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {}
503
529
  declare function ToggleButtonGroup({ className, ...props }: ToggleButtonGroupProps): import("react").JSX.Element;
504
530
  //#endregion
531
+ //#region src/components/token-field/token-field.d.ts
532
+ /**
533
+ * A text field with inline, non-editable tokens: an `@summoner` mention, a
534
+ * `#tag`, a champion picked from a menu. Text and tokens share one caret, so it
535
+ * reads and edits as a single field rather than as an input with chips beside
536
+ * it.
537
+ *
538
+ * ```tsx
539
+ * <TokenField value={value} onChange={setValue}>
540
+ * <Label>Prompt</Label>
541
+ * <TokenInput placeholder="Mention a @summoner">
542
+ * {(segment) => <Token>{segment.text}</Token>}
543
+ * </TokenInput>
544
+ * </TokenField>
545
+ * ```
546
+ *
547
+ * This is React Aria's own note, and it holds here too: `TokenField` is alpha
548
+ * upstream, so its API may still move under us.
549
+ */
550
+ declare function TokenField<T extends TokenFieldValue$1 = TokenFieldValue$1>({ className, ...props }: TokenFieldProps<T>): import("react").JSX.Element;
551
+ declare const tokenInput: (props?: ({
552
+ size?: "small" | "medium" | "large" | undefined;
553
+ } & ({
554
+ class?: import("cva").ClassValue;
555
+ className?: never;
556
+ } | {
557
+ class?: never;
558
+ className?: import("cva").ClassValue;
559
+ })) | undefined) => string;
560
+ interface TokenInputProps<T extends TokenFieldValue$1 = TokenFieldValue$1> extends TokenInputProps$1<T> {
561
+ size?: "small" | "medium" | "large";
562
+ /** Shown while the field is empty; painted by the field, not by the UA. */
563
+ placeholder?: string;
564
+ }
565
+ /** The editable area of a `TokenField`, rendering a `Token` per token segment. */
566
+ declare function TokenInput<T extends TokenFieldValue$1 = TokenFieldValue$1>({ className, placeholder, size, ...props }: TokenInputProps<T>): import("react").JSX.Element;
567
+ declare const token: (props?: ({
568
+ variant?: "hextech" | "gold" | "grey" | undefined;
569
+ } & ({
570
+ class?: import("cva").ClassValue;
571
+ className?: never;
572
+ } | {
573
+ class?: never;
574
+ className?: import("cva").ClassValue;
575
+ })) | undefined) => string;
576
+ interface TokenProps extends TokenProps$1 {
577
+ variant?: "gold" | "hextech" | "grey";
578
+ }
579
+ /** One non-editable segment inside a `TokenInput`. */
580
+ declare function Token({ className, variant, ...props }: TokenProps): import("react").JSX.Element;
581
+ //#endregion
505
582
  //#region src/components/toolbar.d.ts
506
583
  interface ToolbarProps extends ToolbarProps$1 {}
507
584
  declare function Toolbar({ className, ...props }: ToolbarProps): import("react").JSX.Element;
@@ -593,5 +670,5 @@ interface LabelProps$1 extends LabelProps {
593
670
  }
594
671
  declare function Label({ preset, color, className, ...rest }: LabelProps$1): JSX.Element;
595
672
  //#endregion
596
- 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, 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, heading, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, tree, treeItem, useFilter };
673
+ 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 };
597
674
  //# sourceMappingURL=index.d.mts.map