@lolmath/ui 6.4.0 → 7.0.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.
Files changed (20) hide show
  1. package/dist/es/index.css +415 -419
  2. package/dist/es/index.d.ts +50 -241
  3. package/dist/es/index.js +823 -823
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/font/beaufort/beaufort.css +20 -10
  6. package/dist/font/spiegel/spiegel.css +10 -5
  7. package/dist/lib/{index.js → index.cjs} +1022 -1022
  8. package/dist/lib/index.cjs.map +1 -0
  9. package/dist/lib/index.css +415 -419
  10. package/dist/lib/{index.d.ts → index.d.cts} +50 -241
  11. package/dist/tailwind.css +95 -0
  12. package/package.json +22 -33
  13. package/readme.md +17 -32
  14. package/dist/es/plugin.d.ts +0 -8
  15. package/dist/es/plugin.js +0 -150
  16. package/dist/es/plugin.js.map +0 -1
  17. package/dist/lib/index.js.map +0 -1
  18. package/dist/lib/plugin.d.ts +0 -8
  19. package/dist/lib/plugin.js +0 -185
  20. package/dist/lib/plugin.js.map +0 -1
package/dist/lib/{index.d.ts → index.d.cts} RENAMED
@@ -1,19 +1,15 @@
1
1
  import * as react_aria_components from 'react-aria-components';
2
- import { ButtonProps as ButtonProps$1, DisclosureProps, DisclosurePanelProps, BreadcrumbsProps, BreadcrumbProps, LinkProps, CheckboxProps, HeadingProps as HeadingProps$1, ModalOverlayProps, DialogProps, NumberFieldProps, Input, Group, ProgressBarProps as ProgressBarProps$1, RadioGroupProps, RadioProps, SearchFieldProps, PopoverProps, ListBoxProps, ListBoxItemProps, VirtualizerProps, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SliderOutputProps, SwitchProps, TabListProps, TabProps, TabPanelProps, TextFieldProps, TextAreaProps, InputProps, ToggleButtonProps as ToggleButtonProps$1, TextProps as TextProps$1, LabelProps as LabelProps$1, MenuTrigger as MenuTrigger$1, MenuProps, MenuItemProps, MenuSectionProps, Header, SeparatorProps, ComboBoxProps, TagProps } from 'react-aria-components';
2
+ import { BreadcrumbsProps, BreadcrumbProps, ButtonProps as ButtonProps$1, LinkProps, CheckboxProps, DisclosureProps, DisclosurePanelProps, MenuTrigger as MenuTrigger$1, MenuProps, MenuItemProps, PopoverProps, MenuSectionProps, Header, SeparatorProps, VirtualizerProps, HeadingProps as HeadingProps$1, ModalOverlayProps, DialogProps, NumberFieldProps, Input, Group, ProgressBarProps as ProgressBarProps$1, RadioGroupProps, RadioProps, SearchFieldProps, ComboBoxProps, InputProps, ListBoxProps, ListBoxItemProps, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SliderOutputProps, SwitchProps, TabListProps, TabProps, TabPanelProps, TagProps, TextFieldProps, TextAreaProps, ToggleButtonProps as ToggleButtonProps$1, TextProps as TextProps$1, LabelProps as LabelProps$1 } from 'react-aria-components';
3
3
  export { Autocomplete, Collection, Dialog, DialogTrigger, FieldError, GridLayout, Key, ListBoxItem, ListLayout, MenuItemProps, MenuProps, RouterProvider, Select, SelectValue, Selection, Size, TableLayout, Popover as UnstyledPopover, Virtualizer, WaterfallLayout, useFilter } from 'react-aria-components';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import * as react from 'react';
6
6
  import react__default, { Ref, ComponentProps, JSX } from 'react';
7
- import { ExternalToast as ExternalToast$1, ToasterProps } from 'sonner';
7
+ import * as cva from 'cva';
8
8
  import { Key } from 'react-aria';
9
-
10
- declare const DisclosureGroup: react.ForwardRefExoticComponent<react_aria_components.DisclosureGroupProps & react.RefAttributes<HTMLDivElement>>;
11
- declare function DisclosureButton({ children, className, ...props }: ButtonProps$1): react_jsx_runtime.JSX.Element;
12
- declare function Disclosure({ className, ...props }: DisclosureProps): react_jsx_runtime.JSX.Element;
13
- declare function DisclosurePanel({ className, ...props }: DisclosurePanelProps): react_jsx_runtime.JSX.Element;
9
+ import { ExternalToast as ExternalToast$1, ToasterProps } from 'sonner';
14
10
 
15
11
  declare function Breadcrumbs<T extends object>({ className, ...props }: BreadcrumbsProps<T>): react_jsx_runtime.JSX.Element;
16
- declare function Breadcrumb({ className, ...props }: BreadcrumbProps & {
12
+ declare function Breadcrumb({ className, children, href, ...props }: BreadcrumbProps & {
17
13
  href?: string;
18
14
  }): react_jsx_runtime.JSX.Element;
19
15
 
@@ -32,59 +28,11 @@ declare const button: (props?: ({
32
28
  thin?: boolean | undefined;
33
29
  size?: "small" | "medium" | "large" | undefined;
34
30
  } & ({
35
- class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
36
- [x: string]: any;
37
- } | null | undefined)[] | {
38
- [x: string]: any;
39
- } | null | undefined)[] | {
40
- [x: string]: any;
41
- } | null | undefined)[] | {
42
- [x: string]: any;
43
- } | null | undefined)[] | {
44
- [x: string]: any;
45
- } | null | undefined)[] | {
46
- [x: string]: any;
47
- } | null | undefined)[] | {
48
- [x: string]: any;
49
- } | null | undefined)[] | {
50
- [x: string]: any;
51
- } | null | undefined)[] | {
52
- [x: string]: any;
53
- } | null | undefined)[] | {
54
- [x: string]: any;
55
- } | null | undefined)[] | {
56
- [x: string]: any;
57
- } | null | undefined)[] | {
58
- [x: string]: any;
59
- } | null | undefined;
31
+ class?: cva.ClassValue;
60
32
  className?: never;
61
33
  } | {
62
34
  class?: never;
63
- className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
64
- [x: string]: any;
65
- } | null | undefined)[] | {
66
- [x: string]: any;
67
- } | null | undefined)[] | {
68
- [x: string]: any;
69
- } | null | undefined)[] | {
70
- [x: string]: any;
71
- } | null | undefined)[] | {
72
- [x: string]: any;
73
- } | null | undefined)[] | {
74
- [x: string]: any;
75
- } | null | undefined)[] | {
76
- [x: string]: any;
77
- } | null | undefined)[] | {
78
- [x: string]: any;
79
- } | null | undefined)[] | {
80
- [x: string]: any;
81
- } | null | undefined)[] | {
82
- [x: string]: any;
83
- } | null | undefined)[] | {
84
- [x: string]: any;
85
- } | null | undefined)[] | {
86
- [x: string]: any;
87
- } | null | undefined;
35
+ className?: cva.ClassValue;
88
36
  })) | undefined) => string;
89
37
  declare function _Button({ children, className, preset, shape, size, thin, ...props }: ButtonProps, ref: Ref<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
90
38
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
@@ -100,6 +48,11 @@ declare const ButtonLink: react.ForwardRefExoticComponent<ButtonLinkProps & reac
100
48
 
101
49
  declare function Checkbox({ children, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
102
50
 
51
+ declare const DisclosureGroup: react.ForwardRefExoticComponent<react_aria_components.DisclosureGroupProps & react.RefAttributes<HTMLDivElement>>;
52
+ declare function DisclosureButton({ children, className, ...props }: ButtonProps$1): react_jsx_runtime.JSX.Element;
53
+ declare function Disclosure({ className, ...props }: DisclosureProps): react_jsx_runtime.JSX.Element;
54
+ declare function DisclosurePanel({ className, ...props }: DisclosurePanelProps): react_jsx_runtime.JSX.Element;
55
+
103
56
  interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
104
57
  preset?: "left" | "center" | "right";
105
58
  hrProps?: React.HTMLAttributes<HTMLHRElement>;
@@ -107,6 +60,16 @@ interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
107
60
  }
108
61
  declare function Divider({ preset, hrProps: { className: hrClassName, ...hrProps }, childrenWrapperProps: { className: childrenWrapperClassName, ...childrenWrapperProps }, className, children, ...rest }: DividerProps): react_jsx_runtime.JSX.Element;
109
62
 
63
+ declare const MenuTrigger: typeof MenuTrigger$1;
64
+ declare const SubmenuTrigger: (props: react_aria_components.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
65
+ declare function Menu<T extends object>({ className, ...props }: MenuProps<T>): react_jsx_runtime.JSX.Element;
66
+ declare function MenuItem<T extends object>({ className, ...props }: MenuItemProps<T>): react_jsx_runtime.JSX.Element;
67
+ declare function MenuPopover({ className, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
68
+ declare function MenuSection<T extends object>({ className, ...props }: MenuSectionProps<T>): react_jsx_runtime.JSX.Element;
69
+ declare function MenuHeader({ className, ...props }: ComponentProps<typeof Header>): react_jsx_runtime.JSX.Element;
70
+ declare function MenuSeparator({ className, ...props }: SeparatorProps): react_jsx_runtime.JSX.Element;
71
+ declare function MenuVirtualizer<T>(props: Omit<VirtualizerProps<T>, "layout" | "layoutOptions">): react_jsx_runtime.JSX.Element;
72
+
110
73
  interface ModalProps extends Omit<ModalOverlayProps, "children"> {
111
74
  modalOverlayClassName?: ModalOverlayProps["className"];
112
75
  dialogProps?: Omit<DialogProps, "children">;
@@ -126,6 +89,8 @@ declare function NumberField({ inputProps, groupProps, children, preset, size, .
126
89
  size?: "small" | "medium" | "large";
127
90
  }): react_jsx_runtime.JSX.Element;
128
91
 
92
+ declare function Popover({ children, className, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
93
+
129
94
  interface ProgressBarProps extends Omit<ProgressBarProps$1, "children"> {
130
95
  label?: string;
131
96
  }
@@ -140,6 +105,23 @@ declare function SearchField({ inputProps, borderProps, children, className, siz
140
105
  size?: "small" | "medium" | "large";
141
106
  }): react_jsx_runtime.JSX.Element;
142
107
 
108
+ interface SelectedKey {
109
+ id: Key;
110
+ name: string;
111
+ }
112
+ interface MultipleSelectProps<T extends SelectedKey> extends Omit<ComboBoxProps<T>, "children" | "validate" | "allowsEmptyCollection" | "selectedKey" | "inputValue" | "className" | "value" | "onSelectionChange" | "onInputChange"> {
113
+ items: Array<T>;
114
+ selectedItems: Array<T>;
115
+ className?: string;
116
+ onChange?: (items: Array<T>) => void;
117
+ renderEmptyState?: (inputValue: string) => react__default.ReactNode;
118
+ tag: (item: T) => react__default.ReactNode;
119
+ children: react__default.ReactNode | ((item: T) => react__default.ReactNode);
120
+ inputProps?: InputProps;
121
+ size?: "small" | "medium" | "large";
122
+ }
123
+ declare function MultipleSelect<T extends SelectedKey>({ children, items, selectedItems, onChange, className, name, renderEmptyState, size, ...props }: MultipleSelectProps<T>): react_jsx_runtime.JSX.Element;
124
+
143
125
  declare function SelectButton({ className, size, ...props }: ButtonProps$1 & {
144
126
  size?: "small" | "medium" | "large";
145
127
  }): react_jsx_runtime.JSX.Element;
@@ -269,6 +251,8 @@ declare function TabList<T extends object>({ className, ...rest }: TabListProps<
269
251
  declare function Tab({ children, className, ...rest }: TabProps): react_jsx_runtime.JSX.Element;
270
252
  declare function TabPanel({ ...rest }: TabPanelProps): react_jsx_runtime.JSX.Element;
271
253
 
254
+ declare function Tag({ children, className, ...props }: TagProps): react_jsx_runtime.JSX.Element;
255
+
272
256
  declare function TextArea({ textAreaProps, children, ...props }: TextFieldProps & {
273
257
  textAreaProps?: TextAreaProps;
274
258
  }): react_jsx_runtime.JSX.Element;
@@ -277,59 +261,11 @@ declare const textField: (props?: ({
277
261
  size?: "small" | "medium" | "large" | undefined;
278
262
  isTextArea?: boolean | undefined;
279
263
  } & ({
280
- class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
281
- [x: string]: any;
282
- } | null | undefined)[] | {
283
- [x: string]: any;
284
- } | null | undefined)[] | {
285
- [x: string]: any;
286
- } | null | undefined)[] | {
287
- [x: string]: any;
288
- } | null | undefined)[] | {
289
- [x: string]: any;
290
- } | null | undefined)[] | {
291
- [x: string]: any;
292
- } | null | undefined)[] | {
293
- [x: string]: any;
294
- } | null | undefined)[] | {
295
- [x: string]: any;
296
- } | null | undefined)[] | {
297
- [x: string]: any;
298
- } | null | undefined)[] | {
299
- [x: string]: any;
300
- } | null | undefined)[] | {
301
- [x: string]: any;
302
- } | null | undefined)[] | {
303
- [x: string]: any;
304
- } | null | undefined;
264
+ class?: cva.ClassValue;
305
265
  className?: never;
306
266
  } | {
307
267
  class?: never;
308
- className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
309
- [x: string]: any;
310
- } | null | undefined)[] | {
311
- [x: string]: any;
312
- } | null | undefined)[] | {
313
- [x: string]: any;
314
- } | null | undefined)[] | {
315
- [x: string]: any;
316
- } | null | undefined)[] | {
317
- [x: string]: any;
318
- } | null | undefined)[] | {
319
- [x: string]: any;
320
- } | null | undefined)[] | {
321
- [x: string]: any;
322
- } | null | undefined)[] | {
323
- [x: string]: any;
324
- } | null | undefined)[] | {
325
- [x: string]: any;
326
- } | null | undefined)[] | {
327
- [x: string]: any;
328
- } | null | undefined)[] | {
329
- [x: string]: any;
330
- } | null | undefined)[] | {
331
- [x: string]: any;
332
- } | null | undefined;
268
+ className?: cva.ClassValue;
333
269
  })) | undefined) => string;
334
270
  declare function TextField({ inputProps, borderProps, children, size, ...props }: TextFieldProps & {
335
271
  inputProps?: InputProps;
@@ -346,8 +282,6 @@ interface ToggleButtonProps extends ToggleButtonProps$1 {
346
282
  }
347
283
  declare function ToggleButton({ children, className, preset, shape, size, thin, ...props }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
348
284
 
349
- declare function Popover({ children, className, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
350
-
351
285
  type HeadingColor = "gold100" | "gold200" | "gold400" | "grey100";
352
286
  type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5";
353
287
  interface HeadingProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
@@ -356,62 +290,14 @@ interface HeadingProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTML
356
290
  as?: HeadingElement | "span";
357
291
  }
358
292
  declare const heading: (props?: ({
359
- color?: "grey100" | "gold100" | "gold200" | "gold400" | undefined;
293
+ color?: "gold100" | "gold200" | "gold400" | "grey100" | undefined;
360
294
  preset?: "h1" | "h2" | "h3" | "h4" | "h5" | undefined;
361
295
  } & ({
362
- class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
363
- [x: string]: any;
364
- } | null | undefined)[] | {
365
- [x: string]: any;
366
- } | null | undefined)[] | {
367
- [x: string]: any;
368
- } | null | undefined)[] | {
369
- [x: string]: any;
370
- } | null | undefined)[] | {
371
- [x: string]: any;
372
- } | null | undefined)[] | {
373
- [x: string]: any;
374
- } | null | undefined)[] | {
375
- [x: string]: any;
376
- } | null | undefined)[] | {
377
- [x: string]: any;
378
- } | null | undefined)[] | {
379
- [x: string]: any;
380
- } | null | undefined)[] | {
381
- [x: string]: any;
382
- } | null | undefined)[] | {
383
- [x: string]: any;
384
- } | null | undefined)[] | {
385
- [x: string]: any;
386
- } | null | undefined;
296
+ class?: cva.ClassValue;
387
297
  className?: never;
388
298
  } | {
389
299
  class?: never;
390
- className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
391
- [x: string]: any;
392
- } | null | undefined)[] | {
393
- [x: string]: any;
394
- } | null | undefined)[] | {
395
- [x: string]: any;
396
- } | null | undefined)[] | {
397
- [x: string]: any;
398
- } | null | undefined)[] | {
399
- [x: string]: any;
400
- } | null | undefined)[] | {
401
- [x: string]: any;
402
- } | null | undefined)[] | {
403
- [x: string]: any;
404
- } | null | undefined)[] | {
405
- [x: string]: any;
406
- } | null | undefined)[] | {
407
- [x: string]: any;
408
- } | null | undefined)[] | {
409
- [x: string]: any;
410
- } | null | undefined)[] | {
411
- [x: string]: any;
412
- } | null | undefined)[] | {
413
- [x: string]: any;
414
- } | null | undefined;
300
+ className?: cva.ClassValue;
415
301
  })) | undefined) => string;
416
302
  declare function Heading({ as, preset, color, className, ...rest }: HeadingProps): JSX.Element;
417
303
 
@@ -419,62 +305,14 @@ type TextColor = "grey100" | "grey150" | "gold100";
419
305
  type TextElement = "p" | "span" | "div";
420
306
  type TextPreset = "sm" | "base" | "md" | "lg" | "largeNumber" | "stat";
421
307
  declare const text: (props?: ({
422
- color?: "grey100" | "gold100" | "grey150" | undefined;
308
+ color?: "gold100" | "grey100" | "grey150" | undefined;
423
309
  preset?: "base" | "label" | "sm" | "md" | "lg" | "largeNumber" | "stat" | undefined;
424
310
  } & ({
425
- class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
426
- [x: string]: any;
427
- } | null | undefined)[] | {
428
- [x: string]: any;
429
- } | null | undefined)[] | {
430
- [x: string]: any;
431
- } | null | undefined)[] | {
432
- [x: string]: any;
433
- } | null | undefined)[] | {
434
- [x: string]: any;
435
- } | null | undefined)[] | {
436
- [x: string]: any;
437
- } | null | undefined)[] | {
438
- [x: string]: any;
439
- } | null | undefined)[] | {
440
- [x: string]: any;
441
- } | null | undefined)[] | {
442
- [x: string]: any;
443
- } | null | undefined)[] | {
444
- [x: string]: any;
445
- } | null | undefined)[] | {
446
- [x: string]: any;
447
- } | null | undefined)[] | {
448
- [x: string]: any;
449
- } | null | undefined;
311
+ class?: cva.ClassValue;
450
312
  className?: never;
451
313
  } | {
452
314
  class?: never;
453
- className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
454
- [x: string]: any;
455
- } | null | undefined)[] | {
456
- [x: string]: any;
457
- } | null | undefined)[] | {
458
- [x: string]: any;
459
- } | null | undefined)[] | {
460
- [x: string]: any;
461
- } | null | undefined)[] | {
462
- [x: string]: any;
463
- } | null | undefined)[] | {
464
- [x: string]: any;
465
- } | null | undefined)[] | {
466
- [x: string]: any;
467
- } | null | undefined)[] | {
468
- [x: string]: any;
469
- } | null | undefined)[] | {
470
- [x: string]: any;
471
- } | null | undefined)[] | {
472
- [x: string]: any;
473
- } | null | undefined)[] | {
474
- [x: string]: any;
475
- } | null | undefined)[] | {
476
- [x: string]: any;
477
- } | null | undefined;
315
+ className?: cva.ClassValue;
478
316
  })) | undefined) => string;
479
317
  interface TextProps extends TextProps$1 {
480
318
  preset?: TextPreset;
@@ -487,33 +325,4 @@ interface LabelProps extends LabelProps$1 {
487
325
  }
488
326
  declare function Label({ preset, color, className, ...rest }: LabelProps): JSX.Element;
489
327
 
490
- declare const MenuTrigger: typeof MenuTrigger$1;
491
- declare const SubmenuTrigger: (props: react_aria_components.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
492
- declare function Menu<T extends object>({ className, ...props }: MenuProps<T>): react_jsx_runtime.JSX.Element;
493
- declare function MenuItem<T extends object>({ className, ...props }: MenuItemProps<T>): react_jsx_runtime.JSX.Element;
494
- declare function MenuPopover({ className, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
495
- declare function MenuSection<T extends object>({ className, ...props }: MenuSectionProps<T>): react_jsx_runtime.JSX.Element;
496
- declare function MenuHeader({ className, ...props }: ComponentProps<typeof Header>): react_jsx_runtime.JSX.Element;
497
- declare function MenuSeparator({ className, ...props }: SeparatorProps): react_jsx_runtime.JSX.Element;
498
- declare function MenuVirtualizer<T>(props: Omit<VirtualizerProps<T>, "layout" | "layoutOptions">): react_jsx_runtime.JSX.Element;
499
-
500
- interface SelectedKey {
501
- id: Key;
502
- name: string;
503
- }
504
- interface MultipleSelectProps<T extends SelectedKey> extends Omit<ComboBoxProps<T>, "children" | "validate" | "allowsEmptyCollection" | "selectedKey" | "inputValue" | "className" | "value" | "onSelectionChange" | "onInputChange"> {
505
- items: Array<T>;
506
- selectedItems: Array<T>;
507
- className?: string;
508
- onChange?: (items: Array<T>) => void;
509
- renderEmptyState?: (inputValue: string) => react__default.ReactNode;
510
- tag: (item: T) => react__default.ReactNode;
511
- children: react__default.ReactNode | ((item: T) => react__default.ReactNode);
512
- inputProps?: InputProps;
513
- size?: "small" | "medium" | "large";
514
- }
515
- declare function MultipleSelect<T extends SelectedKey>({ children, items, selectedItems, onChange, className, name, renderEmptyState, size, ...props }: MultipleSelectProps<T>): react_jsx_runtime.JSX.Element;
516
-
517
- declare function Tag({ children, className, ...props }: TagProps): react_jsx_runtime.JSX.Element;
518
-
519
328
  export { Breadcrumb, Breadcrumbs, Button, ButtonLink, type ButtonPreset, type ButtonShape, type ButtonSize, Checkbox, DialogButtons, DialogHeading, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, Heading, type HeadingColor, type HeadingElement, Label, Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, NumberField, Popover, ProgressBar, Radio, RadioGroup, SearchField, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectVirtualizer, type SelectedKey, Slider, SliderOutput, Sonner, type SonnerProps, Spinner, SubmenuTrigger, Switch, Tab, TabList, TabPanel, Tabs, Tag, Text, TextArea, type TextColor, type TextElement, TextField, type TextPreset, type ToastVariant, ToggleButton, type ToggleButtonPreset, _Button, _ButtonLink, button, heading, sonner, text, textField };
package/dist/tailwind.css ADDED
@@ -0,0 +1,95 @@
1
+ @theme {
2
+ --color-lol-blue-100: var(--lol-color-blue-100);
3
+ --color-lol-blue-200: var(--lol-color-blue-200);
4
+ --color-lol-blue-300: var(--lol-color-blue-300);
5
+ --color-lol-blue-400: var(--lol-color-blue-400);
6
+ --color-lol-blue-500: var(--lol-color-blue-500);
7
+ --color-lol-blue-600: var(--lol-color-blue-600);
8
+ --color-lol-blue-700: var(--lol-color-blue-700);
9
+
10
+ --color-lol-grey-100: var(--lol-color-grey-100);
11
+ --color-lol-grey-150: var(--lol-color-grey-150);
12
+ --color-lol-grey-200: var(--lol-color-grey-200);
13
+ --color-lol-grey-300: var(--lol-color-grey-300);
14
+ --color-lol-grey-cool: var(--lol-color-grey-cool);
15
+
16
+ --color-lol-gold-100: var(--lol-color-gold-100);
17
+ --color-lol-gold-200: var(--lol-color-gold-200);
18
+ --color-lol-gold-300: var(--lol-color-gold-300);
19
+ --color-lol-gold-400: var(--lol-color-gold-400);
20
+ --color-lol-gold-500: var(--lol-color-gold-500);
21
+ --color-lol-gold-600: var(--lol-color-gold-600);
22
+ --color-lol-gold-700: var(--lol-color-gold-700);
23
+
24
+ --color-lol-hextech-black: var(--lol-color-hextech-black);
25
+
26
+ --font-lol-h1: var(--lol-font-size-h1);
27
+ --font-lol-h1--line-height: var(--lol-line-height-h1);
28
+ --font-lol-h1--letter-spacing: var(--lol-letter-spacing-h1);
29
+ --font-lol-h1--font-weight: var(--lol-font-weight-h1);
30
+
31
+ --font-lol-h2: var(--lol-font-size-h2);
32
+ --font-lol-h2--line-height: var(--lol-line-height-h2);
33
+ --font-lol-h2--letter-spacing: var(--lol-letter-spacing-h2);
34
+ --font-lol-h2--font-weight: var(--lol-font-weight-h2);
35
+
36
+ --font-lol-h3: var(--lol-font-size-h3);
37
+ --font-lol-h3--line-height: var(--lol-line-height-h3);
38
+ --font-lol-h3--letter-spacing: var(--lol-letter-spacing-h3);
39
+ --font-lol-h3--font-weight: var(--lol-font-weight-h3);
40
+
41
+ --font-lol-h4: var(--lol-font-size-h4);
42
+ --font-lol-h4--line-height: var(--lol-line-height-h4);
43
+ --font-lol-h4--letter-spacing: var(--lol-letter-spacing-h4);
44
+ --font-lol-h4--font-weight: var(--lol-font-weight-h4);
45
+
46
+ --font-lol-h5: var(--lol-font-size-h5);
47
+ --font-lol-h5--line-height: var(--lol-line-height-h5);
48
+ --font-lol-h5--letter-spacing: var(--lol-letter-spacing-h5);
49
+ --font-lol-h5--font-weight: var(--lol-font-weight-h5);
50
+
51
+ --font-lol-label: var(--lol-font-size-label);
52
+ --font-lol-label--line-height: var(--lol-line-height-label);
53
+ --font-lol-label--letter-spacing: var(--lol-letter-spacing-label);
54
+ --font-lol-label--font-weight: var(--lol-font-weight-label);
55
+
56
+ --font-lol-stat: var(--lol-font-size-stat);
57
+ --font-lol-stat--line-height: var(--lol-line-height-stat);
58
+ --font-lol-stat--letter-spacing: var(--lol-letter-spacing-stat);
59
+ --font-lol-stat--font-weight: var(--lol-font-weight-stat);
60
+
61
+ --font-lol-large-number: var(--lol-font-size-large-number);
62
+ --font-lol-large-number--line-height: var(--lol-line-height-large-number);
63
+ --font-lol-large-number--letter-spacing: var(
64
+ --lol-letter-spacing-large-number
65
+ );
66
+ --font-lol-large-number--font-weight: var(--lol-font-weight-large-number);
67
+
68
+ --font-lol-xs: var(--lol-font-size-xs);
69
+ --font-lol-xs--line-height: var(--lol-line-height-xs);
70
+ --font-lol-xs--letter-spacing: var(--lol-letter-spacing-xs);
71
+ --font-lol-xs--font-weight: var(--lol-font-weight-xs);
72
+
73
+ --font-lol-sm: var(--lol-font-size-sm);
74
+ --font-lol-sm--line-height: var(--lol-line-height-sm);
75
+ --font-lol-sm--letter-spacing: var(--lol-letter-spacing-sm);
76
+ --font-lol-sm--font-weight: var(--lol-font-weight-sm);
77
+
78
+ --font-lol-base: var(--lol-font-size-base);
79
+ --font-lol-base--line-height: var(--lol-line-height-base);
80
+ --font-lol-base--letter-spacing: var(--lol-letter-spacing-base);
81
+ --font-lol-base--font-weight: var(--lol-font-weight-base);
82
+
83
+ --font-lol-md: var(--lol-font-size-md);
84
+ --font-lol-md--line-height: var(--lol-line-height-md);
85
+ --font-lol-md--letter-spacing: var(--lol-letter-spacing-md);
86
+ --font-lol-md--font-weight: var(--lol-font-weight-md);
87
+
88
+ --font-lol-lg: var(--lol-font-size-lg);
89
+ --font-lol-lg--line-height: var(--lol-line-height-lg);
90
+ --font-lol-lg--letter-spacing: var(--lol-letter-spacing-lg);
91
+ --font-lol-lg--font-weight: var(--lol-font-weight-lg);
92
+
93
+ --font-lol-beaufort: var(--lol-font-family-beaufort);
94
+ --font-lol-spiegel: var(--lol-font-family-spiegel);
95
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lolmath/ui",
3
- "version": "6.4.0",
3
+ "version": "7.0.0",
4
4
  "private": false,
5
5
  "description": "lolmath.net UI",
6
6
  "type": "module",
@@ -11,10 +11,10 @@
11
11
  "author": "lolmath.net",
12
12
  "license": "ISC",
13
13
  "dependencies": {
14
- "cva": "1.0.0-beta.1",
15
- "react-aria": "^3.40.0",
16
- "react-aria-components": "^1.9.0",
17
- "sonner": "^2.0.3"
14
+ "cva": "1.0.0-beta.4",
15
+ "react-aria": "^3.43.1",
16
+ "react-aria-components": "^1.12.1",
17
+ "sonner": "^2.0.7"
18
18
  },
19
19
  "publishConfig": {
20
20
  "access": "public",
@@ -23,7 +23,7 @@
23
23
  "homepage": "https://ui.lolmath.net",
24
24
  "repository": {
25
25
  "type": "git",
26
- "url": "https://gitlab.com/lol-math/lolmath.git",
26
+ "url": "git+https://gitlab.com/lol-math/lolmath.git",
27
27
  "directory": "packages/ui"
28
28
  },
29
29
  "bugs": {
@@ -31,20 +31,21 @@
31
31
  "email": "incoming+lol-math-lolmath-41959739-1qbix14106nxnde3k5iusimi8-issue@incoming.gitlab.com"
32
32
  },
33
33
  "devDependencies": {
34
- "@modern-js/module-tools": "^2.67.6",
35
- "@types/react": "^19.1.5",
36
- "@types/react-dom": "^19.1.5",
34
+ "@modern-js/module-tools": "^2.68.11",
35
+ "@types/node": "^24.3.0",
36
+ "@types/react": "^19.1.12",
37
+ "@types/react-dom": "^19.1.9",
37
38
  "publint": "^0.3.12",
38
- "react": "^19.1.0",
39
- "react-dom": "^19.1.0",
39
+ "react": "^19.1.1",
40
+ "react-dom": "^19.1.1",
40
41
  "tailwindcss": "^3.4.17",
41
- "typescript": "^5.8.3",
42
- "vite-node": "^3.1.4",
43
- "vitest": "^3.1.4"
42
+ "@typescript/native-preview": "7.0.0-dev.20250829.3",
43
+ "typescript": "^5.9.2",
44
+ "vitest": "^3.2.4"
44
45
  },
45
46
  "peerDependencies": {
46
- "react": ">=18",
47
- "react-dom": ">=18",
47
+ "react": ">=19",
48
+ "react-dom": ">=19",
48
49
  "tailwindcss": ">=3"
49
50
  },
50
51
  "peerDependenciesMeta": {
@@ -59,24 +60,15 @@
59
60
  "default": "./dist/es/index.js"
60
61
  },
61
62
  "require": {
62
- "types": "./dist/lib/index.d.ts",
63
- "default": "./dist/lib/index.js"
63
+ "types": "./dist/lib/index.d.cts",
64
+ "default": "./dist/lib/index.cjs"
64
65
  }
65
66
  },
66
67
  "./css": {
67
68
  "import": "./dist/es/index.css",
68
69
  "require": "./dist/lib/index.css"
69
70
  },
70
- "./plugin": {
71
- "import": {
72
- "types": "./dist/es/plugin.d.ts",
73
- "default": "./dist/es/plugin.js"
74
- },
75
- "require": {
76
- "types": "./dist/lib/plugin.d.ts",
77
- "default": "./dist/lib/plugin.js"
78
- }
79
- },
71
+ "./tailwind": "./dist/tailwind.css",
80
72
  "./font/beaufort": {
81
73
  "import": "./dist/font/beaufort/beaufort.css",
82
74
  "require": "./dist/font/beaufort/beaufort.css"
@@ -90,10 +82,7 @@
90
82
  "build": "modern build",
91
83
  "dev": "modern build --watch",
92
84
  "lint": "publint",
93
- "typecheck": "tsc --noEmit",
94
- "dev:storybook": "npx storybook dev -p 6006",
95
- "build:storybook": "storybook build",
96
- "deploy:storybook": "wrangler pages deploy ./storybook-static --project-name lolmath-ui --branch $CI_COMMIT_REF_NAME",
97
- "docs": "vite-node ./docs.ts"
85
+ "typecheck": "tsgo --noEmit",
86
+ "docs": "node ./docs.ts"
98
87
  }
99
88
  }
package/readme.md CHANGED
@@ -32,46 +32,32 @@ tailwind).
32
32
 
33
33
  ### Usage with tailwind
34
34
 
35
- In tailwind 3, the @tailwind directives are compiled away in the final CSS. You
36
- can use the `@layer` directive to control the order of the CSS. Here, we put the
37
- tailwind `base` tailwind directive in a `tailwind-base` layer, ensuring that any
38
- styles in the `lol` layer are more specific than the tailwind base styles.
35
+ You can use the `@layer` directive to control the order of the CSS. For more
36
+ information on using `@layer` with tailwind, see
37
+ https://tailwindcss.com/docs/preflight
39
38
 
40
- We do the same for the `components` layer. The `utilities` layer is left as is.
41
- That way you can use tailwind utilities to style the components with
42
- `classNames`.
43
-
44
- ```css
45
- @layer tailwind-base, tailwind-components, lol;
46
-
47
- @layer tailwind-base {
48
- @tailwind base;
49
- }
50
-
51
- @layer tailwind-components {
52
- @tailwind components;
53
- }
39
+ ```css
40
+ @layer theme, base, components, lol, utilities;
54
41
 
55
- @tailwind utilities;
42
+ @import "tailwindcss/theme.css" layer(theme);
43
+ @import "tailwindcss/preflight.css" layer(base);
44
+ @import "tailwindcss/utilities.css" layer(utilities);
56
45
  ```
57
46
 
58
- ## TailwindCSS Plugin
47
+ ## TailwindCSS Theme
59
48
 
60
- Optionally, you can use the tailwind plugin to get League of Legends colors and
49
+ Optionally, you can use the tailwind theme to get League of Legends colors and
61
50
  fonts.
62
51
 
63
- ```ts tailwind.config.ts
64
- import { lolmathui } from "@lolmath/ui/plugin";
52
+ ```css tailwind.css
53
+ @layer theme, base, components, lol, utilities;
65
54
 
66
- /** @type {import('tailwindcss').Config} */
67
- export default {
68
- content: [],
69
- theme: {
70
- extend: {},
71
- },
72
- plugins: [lolmathui],
73
- };
55
+ @import "tailwindcss/theme.css" layer(theme);
56
+ @import "tailwindcss/preflight.css" layer(base);
57
+ @import "tailwindcss/utilities.css" layer(utilities);
74
58
 
59
+ /* Import the theme */
60
+ @import "@lolmath/ui/tailwind";
75
61
  ```
76
62
 
77
63
  ## Client-side Routing
@@ -80,7 +66,6 @@ See [react-aria-components](https://react-spectrum.adobe.com/react-aria/routing.
80
66
 
81
67
  ## Links
82
68
 
83
- - [Documentation](https://docs.lolmath.net).
84
69
  - [Storybook](https://ui.lolmath.net).
85
70
  - [NPM Package](https://www.npmjs.com/package/@lolmath/ui).
86
71
  - [Repository](https://gitlab.com/lol-math/lolmath/-/tree/main/packages/ui)