@lolmath/ui 2.6.0 → 2.8.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 (7) hide show
  1. package/dist/index.cjs +163 -43
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +14 -3
  4. package/dist/index.d.ts +14 -3
  5. package/dist/index.js +158 -42
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -1,10 +1,13 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode, ComponentProps } from 'react';
3
- import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, InputProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps, CheckboxProps, TextAreaProps } from 'react-aria-components';
3
+ import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, InputProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps, CheckboxProps, TextAreaProps, TooltipProps } from 'react-aria-components';
4
+ export { TooltipTrigger } from 'react-aria-components';
4
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
6
 
6
7
  interface ButtonProps extends ButtonProps$1 {
7
- priority?: "primary" | "secondary";
8
+ priority?: "primary" | "secondary" | "tertiary";
9
+ isRounded?: boolean;
10
+ isSquared?: boolean;
8
11
  }
9
12
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
10
13
 
@@ -103,4 +106,12 @@ declare function TextArea({ textAreaProps, ...props }: TextFieldProps & {
103
106
  textAreaProps?: TextAreaProps;
104
107
  }): react_jsx_runtime.JSX.Element;
105
108
 
106
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Checkbox, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField };
109
+ declare function Tooltip({ children, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
110
+
111
+ interface CardProps extends ComponentProps<"div"> {
112
+ borderProps?: ComponentProps<"div">;
113
+ }
114
+ declare function Card({ children, className, style, borderProps }: CardProps): react_jsx_runtime.JSX.Element;
115
+ declare function borderInverted(r: string): string;
116
+
117
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Card, CardProps, Checkbox, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField, Tooltip, borderInverted };
package/dist/index.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode, ComponentProps } from 'react';
3
- import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, InputProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps, CheckboxProps, TextAreaProps } from 'react-aria-components';
3
+ import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, InputProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps, CheckboxProps, TextAreaProps, TooltipProps } from 'react-aria-components';
4
+ export { TooltipTrigger } from 'react-aria-components';
4
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
6
 
6
7
  interface ButtonProps extends ButtonProps$1 {
7
- priority?: "primary" | "secondary";
8
+ priority?: "primary" | "secondary" | "tertiary";
9
+ isRounded?: boolean;
10
+ isSquared?: boolean;
8
11
  }
9
12
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
10
13
 
@@ -103,4 +106,12 @@ declare function TextArea({ textAreaProps, ...props }: TextFieldProps & {
103
106
  textAreaProps?: TextAreaProps;
104
107
  }): react_jsx_runtime.JSX.Element;
105
108
 
106
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Checkbox, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField };
109
+ declare function Tooltip({ children, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
110
+
111
+ interface CardProps extends ComponentProps<"div"> {
112
+ borderProps?: ComponentProps<"div">;
113
+ }
114
+ declare function Card({ children, className, style, borderProps }: CardProps): react_jsx_runtime.JSX.Element;
115
+ declare function borderInverted(r: string): string;
116
+
117
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Card, CardProps, Checkbox, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField, Tooltip, borderInverted };
package/dist/index.js CHANGED
@@ -6,10 +6,10 @@ import {
6
6
  import { twMerge } from "tailwind-merge";
7
7
 
8
8
  // src/utilities/border.tsx
9
- var borderClassName = "from-[#785b28] via-[#c89c3c] to-[#c8aa6e] bg-gradient-to-t";
10
- var borderHoverClassName = "from-[#c89c3c] via-[#dcc188] to-[#f0e6d8]";
11
- var borderPressedClassName = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700";
12
- var borderDisabledClassName = "from-[#5c5b57] via-[#5c5b57] to-[#5c5b57]";
9
+ var borderGradient = "from-[#785b28] via-[#c89c3c] to-[#c8aa6e] bg-gradient-to-t";
10
+ var borderGradientHover = "from-[#c89c3c] via-[#dcc188] to-[#f0e6d8]";
11
+ var borderGradientPressed = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700";
12
+ var borderGradientDisabled = "from-[#5c5b57] via-[#5c5b57] to-[#5c5b57]";
13
13
 
14
14
  // src/utilities/resolve-classname.ts
15
15
  function resolveClassname(className, values) {
@@ -18,7 +18,14 @@ function resolveClassname(className, values) {
18
18
 
19
19
  // src/components/button.tsx
20
20
  import { jsx } from "react/jsx-runtime";
21
- function _Button({ children, className, priority = "secondary", ...props }, ref) {
21
+ function _Button({
22
+ children,
23
+ className,
24
+ priority = "secondary",
25
+ isRounded = false,
26
+ isSquared = false,
27
+ ...props
28
+ }, ref) {
22
29
  return /* @__PURE__ */ jsx(
23
30
  AriaButton,
24
31
  {
@@ -26,13 +33,18 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
26
33
  ...props,
27
34
  className: (values) => {
28
35
  return twMerge(
29
- "font-[beaufort] font-black uppercase transition-colors duration-200 outline-none bg-gradient-to-t",
30
- borderClassName,
31
- values.isHovered && borderHoverClassName,
32
- values.isPressed && borderPressedClassName,
33
- values.isDisabled && borderDisabledClassName,
34
- values.isFocused && "",
35
- values.isFocusVisible && "outline outline-yellow-50 outline-offset-2",
36
+ "transition-colors duration-200 outline-none",
37
+ (priority === "primary" || priority === "secondary") && [
38
+ "bg-gradient-to-t",
39
+ borderGradient,
40
+ values.isHovered && borderGradientHover,
41
+ values.isPressed && borderGradientPressed,
42
+ values.isDisabled && borderGradientDisabled,
43
+ values.isFocused && "",
44
+ values.isFocusVisible && "outline outline-yellow-50 outline-offset-2"
45
+ ],
46
+ isRounded && "rounded-full aspect-square",
47
+ isSquared && "aspect-square",
36
48
  resolveClassname(className, values)
37
49
  );
38
50
  },
@@ -41,17 +53,26 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
41
53
  "span",
42
54
  {
43
55
  className: twMerge(
44
- "block m-0.5 px-4 py-2 bg-lol-gray-950 transition-colors duration-200",
45
- priority === "primary" && "bg-gradient-to-b",
46
- "text-[#cdbe91] tracking-wide",
47
- values.isHovered && "text-lol-gold-100",
48
- values.isPressed && "text-lol-gray-500",
56
+ "block transition-colors duration-200 text-lol-gold-300 tracking-wide font-beaufort font-black uppercase",
57
+ (priority === "primary" || priority === "secondary") && [
58
+ "m-0.5 px-4 py-2 bg-lol-gray-950"
59
+ ],
60
+ priority === "primary" && "from-lol-gold-700 via-lol-gold-800 to-lol-gold-900 bg-gradient-to-b",
61
+ priority === "tertiary" && !isRounded && 'relative after:content-[""] after:absolute after:-top-2 after:-bottom-2 after:-left-2 after:-right-2',
62
+ (isSquared || isRounded) && "aspect-square p-1.5",
63
+ isRounded && "rounded-full",
64
+ values.isHovered && [
65
+ "text-lol-gold-100",
66
+ priority === "primary" && "from-lol-gold-700 via-lol-gold-600 to-lol-gold-600",
67
+ priority === "tertiary" && (isRounded || isSquared) && "bg-lol-gray-900"
68
+ ],
69
+ values.isPressed && [
70
+ "text-lol-gray-500",
71
+ priority === "primary" && "text-lol-gold-600 from-lol-gold-900 via-lol-gold-900 to-lol-gold-900"
72
+ ],
49
73
  values.isDisabled && "text-lol-gray-500",
50
74
  values.isFocused && "",
51
- values.isFocusVisible && "",
52
- priority === "primary" && "from-lol-gold-700 via-lol-gold-800 to-lol-gold-900",
53
- priority === "primary" && values.isHovered && "from-[#604522] via-[#846745] to-[#725634]",
54
- priority === "primary" && values.isPressed && "from-[#261b0d] via-[#261b0d] to-[#261b0d] text-[#67604c]"
75
+ values.isFocusVisible && ""
55
76
  ),
56
77
  children: typeof children === "function" ? children(values) : children
57
78
  }
@@ -96,10 +117,10 @@ function Select({
96
117
  {
97
118
  className: (buttonValues) => twMerge2(
98
119
  "inline-block outline-none",
99
- borderClassName,
100
- buttonValues.isHovered && borderHoverClassName,
101
- (buttonValues.isPressed || values.isOpen) && borderPressedClassName,
102
- buttonValues.isDisabled && borderDisabledClassName,
120
+ borderGradient,
121
+ buttonValues.isHovered && borderGradientHover,
122
+ (buttonValues.isPressed || values.isOpen) && borderGradientPressed,
123
+ buttonValues.isDisabled && borderGradientDisabled,
103
124
  buttonValues.isFocused && "",
104
125
  buttonValues.isFocusVisible && outlineClassName
105
126
  ),
@@ -173,7 +194,7 @@ function SearchField({
173
194
  className: (values) => {
174
195
  return twMerge3(
175
196
  "flex flex-col outline-none",
176
- borderClassName,
197
+ borderGradient,
177
198
  "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
178
199
  props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
179
200
  resolveClassname(props.className, values)
@@ -378,10 +399,10 @@ function Switch({
378
399
  {
379
400
  className: twMerge5(
380
401
  "h-6 w-14 shrink-0 cursor-default rounded-full p-0.5",
381
- borderClassName,
382
- values.isHovered && borderHoverClassName,
383
- values.isPressed && borderPressedClassName,
384
- values.isDisabled && borderDisabledClassName,
402
+ borderGradient,
403
+ values.isHovered && borderGradientHover,
404
+ values.isPressed && borderGradientPressed,
405
+ values.isDisabled && borderGradientDisabled,
385
406
  values.isFocused && "",
386
407
  values.isFocusVisible && "outline outline-1 outline-offset-2 outline-yellow-50"
387
408
  ),
@@ -402,10 +423,10 @@ function Switch({
402
423
  className: twMerge5(
403
424
  "absolute -left-2 -top-1.5 h-8 w-8 rounded-full p-0.5 shadow-md ring-0 transition-[left] duration-200 ease-in-out",
404
425
  values.isSelected && "left-[calc(100%-1.75rem)]",
405
- borderClassName,
406
- values.isHovered && borderHoverClassName,
407
- values.isPressed && borderPressedClassName,
408
- values.isDisabled && borderDisabledClassName
426
+ borderGradient,
427
+ values.isHovered && borderGradientHover,
428
+ values.isPressed && borderGradientPressed,
429
+ values.isDisabled && borderGradientDisabled
409
430
  ),
410
431
  children: /* @__PURE__ */ jsx5("span", { className: "block h-full w-full rounded-full bg-lol-gray-950" })
411
432
  }
@@ -433,7 +454,7 @@ function ProgressBar({
433
454
  ...props
434
455
  }) {
435
456
  return /* @__PURE__ */ jsx6(AriaProgressBar, { className: "flex w-56 flex-col gap-1 text-sm", ...props, children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs5(Fragment4, { children: [
436
- /* @__PURE__ */ jsxs5("div", { className: "flex font-[beaufort] font-bold uppercase text-lol-gold-100", children: [
457
+ /* @__PURE__ */ jsxs5("div", { className: "flex font-beaufort font-bold uppercase text-lol-gold-100", children: [
437
458
  /* @__PURE__ */ jsx6(Label2, { className: "flex-1 ", children: label ?? "Loading" }),
438
459
  /* @__PURE__ */ jsx6("span", { children: valueText })
439
460
  ] }),
@@ -441,7 +462,7 @@ function ProgressBar({
441
462
  "div",
442
463
  {
443
464
  className: twMerge6(
444
- borderClassName,
465
+ borderGradient,
445
466
  "-ml-0.5 -mr-1 h-3 rounded-full p-px"
446
467
  ),
447
468
  children: /* @__PURE__ */ jsx6(
@@ -503,7 +524,7 @@ function Accordion({ children, className }) {
503
524
  "div",
504
525
  {
505
526
  className: twMerge7(
506
- "bg-lol-blue-950 border-lol-gold-500 rounded border overflow-hidden",
527
+ "bg-lol-blue-950 border-lol-gold-500 border",
507
528
  className
508
529
  ),
509
530
  style: {
@@ -591,7 +612,7 @@ function TextField({
591
612
  ...props,
592
613
  className: (values) => twMerge8(
593
614
  "flex flex-col outline-none",
594
- borderClassName,
615
+ borderGradient,
595
616
  "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
596
617
  props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
597
618
  resolveClassname(props.className, values)
@@ -710,7 +731,7 @@ function NumberField({
710
731
  const finalClassName = resolveClassname(groupProps.className, values);
711
732
  return twMerge11(
712
733
  "grid grid-cols-[auto_1fr_auto] outline-none gap-px p-px",
713
- borderClassName,
734
+ borderGradient,
714
735
  "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
715
736
  props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
716
737
  finalClassName
@@ -811,7 +832,7 @@ function Modal({
811
832
  {
812
833
  className: twMerge13(
813
834
  "text-left align-middle shadow-xl p-0.5 bg-gradient-to-t",
814
- borderPressedClassName
835
+ borderGradientPressed
815
836
  ),
816
837
  children: /* @__PURE__ */ jsx13("div", { className: "bg-black", children: typeof children === "function" ? children(dialogRenderProps) : children })
817
838
  }
@@ -987,7 +1008,7 @@ function TextArea({
987
1008
  ...props,
988
1009
  className: (values) => twMerge16(
989
1010
  "flex flex-col outline-none",
990
- borderClassName,
1011
+ borderGradient,
991
1012
  "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
992
1013
  props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
993
1014
  resolveClassname(props.className, values)
@@ -1017,12 +1038,104 @@ function TextArea({
1017
1038
  }
1018
1039
  );
1019
1040
  }
1041
+
1042
+ // src/components/tooltip.tsx
1043
+ import { Tooltip as AriaTooltip, OverlayArrow } from "react-aria-components";
1044
+ import { twMerge as twMerge17 } from "tailwind-merge";
1045
+ import { TooltipTrigger } from "react-aria-components";
1046
+ import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
1047
+ function Tooltip({ children, ...props }) {
1048
+ return /* @__PURE__ */ jsx17(
1049
+ AriaTooltip,
1050
+ {
1051
+ ...props,
1052
+ className: (values) => twMerge17(
1053
+ `p-0.5 drop-shadow-lg bg-black`,
1054
+ borderGradient,
1055
+ "w-[280px]",
1056
+ values.isEntering && "animate-in fade-in data-[placement=bottom]:slide-in-from-top-1 data-[placement=top]:slide-in-from-bottom-1 ease-out duration-200 fill-mode-forwards",
1057
+ values.isExiting && "animate-out fade-out data-[placement=bottom]:slide-out-to-top-1 data-[placement=top]:slide-out-to-bottom-1 ease-in duration-150 fill-mode-forwards",
1058
+ values.placement === "bottom" && "mt-2",
1059
+ values.placement === "top" && "mb-2",
1060
+ resolveClassname(props.className, values)
1061
+ ),
1062
+ children: (values) => /* @__PURE__ */ jsxs11(Fragment8, { children: [
1063
+ /* @__PURE__ */ jsx17(OverlayArrow, { className: "transform translate-y-1", children: (values2) => /* @__PURE__ */ jsxs11(Fragment8, { children: [
1064
+ /* @__PURE__ */ jsx17(
1065
+ "svg",
1066
+ {
1067
+ viewBox: "0 0 12 12",
1068
+ className: twMerge17(
1069
+ "block fill-lol-gold-600 w-5 h-5 absolute",
1070
+ values2.placement === "top" && "-translate-y-[1px] -left-0.5 ",
1071
+ values2.placement === "bottom" && "-translate-y-[3px] rotate-180 -left-0.5 fill-lol-gold-400",
1072
+ values2.placement === "left" && "-translate-x-px -rotate-90 -top-0.5 fill-lol-gold-500",
1073
+ values2.placement === "right" && "-translate-x-[3px] rotate-90 -top-0.5 fill-lol-gold-500"
1074
+ ),
1075
+ children: /* @__PURE__ */ jsx17("path", { d: "M0 0,L6 6,L12 0" })
1076
+ }
1077
+ ),
1078
+ /* @__PURE__ */ jsx17(
1079
+ "svg",
1080
+ {
1081
+ viewBox: "0 0 12 12",
1082
+ className: twMerge17(
1083
+ "block fill-lol-gray-900 w-4 h-4",
1084
+ values2.placement === "top" && "-translate-y-0.5",
1085
+ values2.placement === "bottom" && "translate-y-0.5 rotate-180",
1086
+ values2.placement === "left" && "-translate-x-0.5 -rotate-90",
1087
+ values2.placement === "right" && "translate-x-0.5 rotate-90"
1088
+ ),
1089
+ children: /* @__PURE__ */ jsx17("path", { d: "M0 0,L6 6,L12 0" })
1090
+ }
1091
+ )
1092
+ ] }) }),
1093
+ /* @__PURE__ */ jsx17("div", { className: "bg-lol-gray-900", children: typeof children === "function" ? children(values) : children })
1094
+ ] })
1095
+ }
1096
+ );
1097
+ }
1098
+
1099
+ // src/components/card.tsx
1100
+ import { twMerge as twMerge18 } from "tailwind-merge";
1101
+ import { jsx as jsx18 } from "react/jsx-runtime";
1102
+ function Card({ children, className, style, borderProps }) {
1103
+ const r = `1rem`;
1104
+ return /* @__PURE__ */ jsx18(
1105
+ "div",
1106
+ {
1107
+ ...borderProps ?? {},
1108
+ className: twMerge18("p-[3px]", borderGradient, borderProps?.className),
1109
+ style: {
1110
+ WebkitMask: borderInverted(r),
1111
+ mask: borderInverted(r),
1112
+ ...borderProps?.style ?? {}
1113
+ },
1114
+ children: /* @__PURE__ */ jsx18(
1115
+ "div",
1116
+ {
1117
+ className: twMerge18("bg-black w-full", className),
1118
+ style: {
1119
+ WebkitMask: borderInverted(r),
1120
+ mask: borderInverted(r),
1121
+ ...style ?? {}
1122
+ },
1123
+ children
1124
+ }
1125
+ )
1126
+ }
1127
+ );
1128
+ }
1129
+ function borderInverted(r) {
1130
+ return `radial-gradient(${r} at ${r} ${r},#0000 98%,#000) -${r} -${r}`;
1131
+ }
1020
1132
  export {
1021
1133
  Accordion,
1022
1134
  AccordionContent,
1023
1135
  AccordionItem,
1024
1136
  AccordionTrigger,
1025
1137
  Button,
1138
+ Card,
1026
1139
  Checkbox,
1027
1140
  DialogButtons,
1028
1141
  DialogTrigger,
@@ -1045,6 +1158,9 @@ export {
1045
1158
  TabPanel,
1046
1159
  Tabs,
1047
1160
  TextArea,
1048
- TextField
1161
+ TextField,
1162
+ Tooltip,
1163
+ TooltipTrigger,
1164
+ borderInverted
1049
1165
  };
1050
1166
  //# sourceMappingURL=index.js.map