@lolmath/ui 3.2.1 → 3.2.3
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/es/components/accordion.d.ts +22 -0
- package/dist/es/components/accordion.js +101 -0
- package/dist/es/components/accordion.js.map +1 -0
- package/dist/es/components/button.d.ts +11 -0
- package/dist/es/components/button.js +221 -0
- package/dist/es/components/button.js.map +1 -0
- package/dist/es/components/card.d.ts +6 -0
- package/dist/es/components/card.js +51 -0
- package/dist/es/components/card.js.map +1 -0
- package/dist/es/components/checkbox.d.ts +2 -0
- package/dist/es/components/checkbox.js +53 -0
- package/dist/es/components/checkbox.js.map +1 -0
- package/dist/es/components/divider.d.ts +25 -0
- package/dist/es/components/divider.js +30 -0
- package/dist/es/components/divider.js.map +1 -0
- package/dist/es/components/modal.d.ts +13 -0
- package/dist/es/components/modal.js +97 -0
- package/dist/es/components/modal.js.map +1 -0
- package/dist/es/components/number-field.d.ts +10 -0
- package/dist/es/components/number-field.js +110 -0
- package/dist/es/components/number-field.js.map +1 -0
- package/dist/es/components/popover.d.ts +1 -0
- package/dist/es/components/popover.js +0 -0
- package/dist/es/components/progress-bar.d.ts +6 -0
- package/dist/es/components/progress-bar.js +41 -0
- package/dist/es/components/progress-bar.js.map +1 -0
- package/dist/es/components/radio-group.d.ts +3 -0
- package/dist/es/components/radio-group.js +82 -0
- package/dist/es/components/radio-group.js.map +1 -0
- package/dist/es/components/search-field.d.ts +6 -0
- package/dist/es/components/search-field.js +95 -0
- package/dist/es/components/search-field.js.map +1 -0
- package/dist/es/components/select.d.ts +11 -0
- package/dist/es/components/select.js +117 -0
- package/dist/es/components/select.js.map +1 -0
- package/dist/es/components/slider/images.d.ts +4 -0
- package/dist/es/components/slider/images.js +12 -0
- package/dist/es/components/slider/images.js.map +1 -0
- package/dist/es/components/slider/slider.d.ts +8 -0
- package/dist/es/components/slider/slider.js +169 -0
- package/dist/es/components/slider/slider.js.map +1 -0
- package/dist/es/components/spinner/images.d.ts +1 -0
- package/dist/es/components/spinner/images.js +6 -0
- package/dist/es/components/spinner/images.js.map +1 -0
- package/dist/es/components/spinner/spinner.d.ts +5 -0
- package/dist/es/components/spinner/spinner.js +23 -0
- package/dist/es/components/spinner/spinner.js.map +1 -0
- package/dist/es/components/switch.d.ts +4 -0
- package/dist/es/components/switch.js +96 -0
- package/dist/es/components/switch.js.map +1 -0
- package/dist/es/components/tabs.d.ts +6 -0
- package/dist/es/components/tabs.js +107 -0
- package/dist/es/components/tabs.js.map +1 -0
- package/dist/es/components/text-area.d.ts +6 -0
- package/dist/es/components/text-area.js +67 -0
- package/dist/es/components/text-area.js.map +1 -0
- package/dist/es/components/text-field.d.ts +6 -0
- package/dist/es/components/text-field.js +68 -0
- package/dist/es/components/text-field.js.map +1 -0
- package/dist/es/components/toggle-button.d.ts +12 -0
- package/dist/es/components/toggle-button.js +208 -0
- package/dist/es/components/toggle-button.js.map +1 -0
- package/dist/es/components/tooltip.d.ts +3 -0
- package/dist/es/components/tooltip.js +73 -0
- package/dist/es/components/tooltip.js.map +1 -0
- package/dist/es/components/typography/heading.d.ts +9 -0
- package/dist/es/components/typography/heading.js +38 -0
- package/dist/es/components/typography/heading.js.map +1 -0
- package/dist/es/components/typography/text.d.ts +17 -0
- package/dist/es/components/typography/text.js +62 -0
- package/dist/es/components/typography/text.js.map +1 -0
- package/dist/es/index.d.ts +23 -0
- package/dist/es/index.js +25 -0
- package/dist/es/index.js.map +1 -0
- package/dist/es/plugin.d.ts +4 -0
- package/dist/es/plugin.js +13 -0
- package/dist/es/plugin.js.map +1 -0
- package/dist/es/utilities/css-id.d.ts +1 -0
- package/dist/es/utilities/css-id.js +9 -0
- package/dist/es/utilities/css-id.js.map +1 -0
- package/dist/es/utilities/gradient.d.ts +8 -0
- package/dist/es/utilities/gradient.js +20 -0
- package/dist/es/utilities/gradient.js.map +1 -0
- package/dist/es/utilities/outline.d.ts +1 -0
- package/dist/es/utilities/outline.js +6 -0
- package/dist/es/utilities/outline.js.map +1 -0
- package/dist/es/utilities/resolve-class-name.d.ts +1 -0
- package/dist/es/utilities/resolve-class-name.js +8 -0
- package/dist/es/utilities/resolve-class-name.js.map +1 -0
- package/dist/es/utilities/theme.d.ts +98 -0
- package/dist/{chunk-KUMYC3II.js → es/utilities/theme.js} +3 -4
- package/dist/es/utilities/theme.js.map +1 -0
- package/dist/es/utilities/tv.d.ts +1 -0
- package/dist/es/utilities/tv.js +21 -0
- package/dist/es/utilities/tv.js.map +1 -0
- package/dist/es/utilities/view-transition.d.ts +1 -0
- package/dist/es/utilities/view-transition.js +15 -0
- package/dist/es/utilities/view-transition.js.map +1 -0
- package/dist/lib/components/accordion.d.ts +22 -0
- package/dist/lib/components/accordion.js +130 -0
- package/dist/lib/components/accordion.js.map +1 -0
- package/dist/lib/components/button.d.ts +11 -0
- package/dist/lib/components/button.js +234 -0
- package/dist/lib/components/button.js.map +1 -0
- package/dist/lib/components/card.d.ts +6 -0
- package/dist/lib/components/card.js +76 -0
- package/dist/lib/components/card.js.map +1 -0
- package/dist/lib/components/checkbox.d.ts +2 -0
- package/dist/lib/components/checkbox.js +77 -0
- package/dist/lib/components/checkbox.js.map +1 -0
- package/dist/lib/components/divider.d.ts +25 -0
- package/dist/lib/components/divider.js +54 -0
- package/dist/lib/components/divider.js.map +1 -0
- package/dist/lib/components/modal.d.ts +13 -0
- package/dist/lib/components/modal.js +118 -0
- package/dist/lib/components/modal.js.map +1 -0
- package/dist/lib/components/number-field.d.ts +10 -0
- package/dist/lib/components/number-field.js +124 -0
- package/dist/lib/components/number-field.js.map +1 -0
- package/dist/lib/components/popover.d.ts +1 -0
- package/dist/lib/components/popover.js +1 -0
- package/dist/lib/components/progress-bar.d.ts +6 -0
- package/dist/lib/components/progress-bar.js +62 -0
- package/dist/lib/components/progress-bar.js.map +1 -0
- package/dist/lib/components/radio-group.d.ts +3 -0
- package/dist/lib/components/radio-group.js +104 -0
- package/dist/lib/components/radio-group.js.map +1 -0
- package/dist/lib/components/search-field.d.ts +6 -0
- package/dist/lib/components/search-field.js +115 -0
- package/dist/lib/components/search-field.js.map +1 -0
- package/dist/lib/components/select.d.ts +11 -0
- package/dist/lib/components/select.js +129 -0
- package/dist/lib/components/select.js.map +1 -0
- package/dist/lib/components/slider/images.d.ts +4 -0
- package/dist/lib/components/slider/images.js +39 -0
- package/dist/lib/components/slider/images.js.map +1 -0
- package/dist/lib/components/slider/slider.d.ts +8 -0
- package/dist/lib/components/slider/slider.js +184 -0
- package/dist/lib/components/slider/slider.js.map +1 -0
- package/dist/lib/components/spinner/images.d.ts +1 -0
- package/dist/lib/components/spinner/images.js +30 -0
- package/dist/lib/components/spinner/images.js.map +1 -0
- package/dist/lib/components/spinner/spinner.d.ts +5 -0
- package/dist/lib/components/spinner/spinner.js +47 -0
- package/dist/lib/components/spinner/spinner.js.map +1 -0
- package/dist/lib/components/switch.d.ts +4 -0
- package/dist/lib/components/switch.js +115 -0
- package/dist/lib/components/switch.js.map +1 -0
- package/dist/lib/components/tabs.d.ts +6 -0
- package/dist/lib/components/tabs.js +129 -0
- package/dist/lib/components/tabs.js.map +1 -0
- package/dist/lib/components/text-area.d.ts +6 -0
- package/dist/lib/components/text-area.js +88 -0
- package/dist/lib/components/text-area.js.map +1 -0
- package/dist/lib/components/text-field.d.ts +6 -0
- package/dist/lib/components/text-field.js +89 -0
- package/dist/lib/components/text-field.js.map +1 -0
- package/dist/lib/components/toggle-button.d.ts +12 -0
- package/dist/lib/components/toggle-button.js +221 -0
- package/dist/lib/components/toggle-button.js.map +1 -0
- package/dist/lib/components/tooltip.d.ts +3 -0
- package/dist/lib/components/tooltip.js +98 -0
- package/dist/lib/components/tooltip.js.map +1 -0
- package/dist/lib/components/typography/heading.d.ts +9 -0
- package/dist/lib/components/typography/heading.js +62 -0
- package/dist/lib/components/typography/heading.js.map +1 -0
- package/dist/lib/components/typography/text.d.ts +17 -0
- package/dist/lib/components/typography/text.js +85 -0
- package/dist/lib/components/typography/text.js.map +1 -0
- package/dist/lib/index.d.ts +23 -0
- package/dist/lib/index.js +68 -0
- package/dist/lib/index.js.map +1 -0
- package/dist/lib/plugin.d.ts +4 -0
- package/dist/lib/plugin.js +47 -0
- package/dist/lib/plugin.js.map +1 -0
- package/dist/lib/utilities/css-id.d.ts +1 -0
- package/dist/lib/utilities/css-id.js +33 -0
- package/dist/lib/utilities/css-id.js.map +1 -0
- package/dist/lib/utilities/gradient.d.ts +8 -0
- package/dist/lib/utilities/gradient.js +51 -0
- package/dist/lib/utilities/gradient.js.map +1 -0
- package/dist/lib/utilities/outline.d.ts +1 -0
- package/dist/lib/utilities/outline.js +30 -0
- package/dist/lib/utilities/outline.js.map +1 -0
- package/dist/lib/utilities/resolve-class-name.d.ts +1 -0
- package/dist/lib/utilities/resolve-class-name.js +32 -0
- package/dist/lib/utilities/resolve-class-name.js.map +1 -0
- package/dist/lib/utilities/theme.d.ts +98 -0
- package/dist/{plugin.cjs → lib/utilities/theme.js} +8 -30
- package/dist/lib/utilities/theme.js.map +1 -0
- package/dist/lib/utilities/tv.d.ts +1 -0
- package/dist/lib/utilities/tv.js +45 -0
- package/dist/lib/utilities/tv.js.map +1 -0
- package/dist/lib/utilities/view-transition.d.ts +1 -0
- package/dist/lib/utilities/view-transition.js +39 -0
- package/dist/lib/utilities/view-transition.js.map +1 -0
- package/package.json +24 -15
- package/dist/chunk-KUMYC3II.js.map +0 -1
- package/dist/index.cjs +0 -1987
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -279
- package/dist/index.d.ts +0 -279
- package/dist/index.js +0 -1857
- package/dist/index.js.map +0 -1
- package/dist/plugin.cjs.map +0 -1
- package/dist/plugin.d.cts +0 -8
- package/dist/plugin.d.ts +0 -8
- package/dist/plugin.js +0 -16
- package/dist/plugin.js.map +0 -1
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import {
|
|
3
|
+
ToggleButton as AriaToggleButton
|
|
4
|
+
} from "react-aria-components";
|
|
5
|
+
import { tv } from "../utilities/tv.js";
|
|
6
|
+
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
7
|
+
import {
|
|
8
|
+
dimmedGradient,
|
|
9
|
+
goldGradient,
|
|
10
|
+
goldGradientHover,
|
|
11
|
+
goldGradientPressed,
|
|
12
|
+
hextechGradient,
|
|
13
|
+
hextechGradientHover,
|
|
14
|
+
hextechGradientPressed,
|
|
15
|
+
disabledGradient
|
|
16
|
+
} from "../utilities/gradient.js";
|
|
17
|
+
const toggleButtonBorder = tv({
|
|
18
|
+
base: "bg-gradient-to-t p-0.5 outline-none transition-colors duration-200",
|
|
19
|
+
variants: {
|
|
20
|
+
preset: {
|
|
21
|
+
gold: "",
|
|
22
|
+
hextech: "",
|
|
23
|
+
dimmed: dimmedGradient
|
|
24
|
+
},
|
|
25
|
+
shape: {
|
|
26
|
+
round: "aspect-square rounded-full",
|
|
27
|
+
square: "aspect-square",
|
|
28
|
+
normal: ""
|
|
29
|
+
},
|
|
30
|
+
isHovered: {
|
|
31
|
+
true: ""
|
|
32
|
+
},
|
|
33
|
+
isPressed: {
|
|
34
|
+
true: ""
|
|
35
|
+
},
|
|
36
|
+
isDisabled: {
|
|
37
|
+
true: ""
|
|
38
|
+
},
|
|
39
|
+
isFocused: {
|
|
40
|
+
true: ""
|
|
41
|
+
},
|
|
42
|
+
isFocusVisible: {
|
|
43
|
+
true: ""
|
|
44
|
+
},
|
|
45
|
+
isSelected: {
|
|
46
|
+
true: ""
|
|
47
|
+
},
|
|
48
|
+
thin: {
|
|
49
|
+
true: "p-px"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
compoundVariants: [
|
|
53
|
+
{
|
|
54
|
+
preset: ["dimmed"],
|
|
55
|
+
isSelected: true,
|
|
56
|
+
class: [goldGradient]
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
preset: ["gold"],
|
|
60
|
+
class: goldGradient
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
preset: ["gold", "dimmed"],
|
|
64
|
+
isHovered: true,
|
|
65
|
+
class: goldGradientHover
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
preset: ["gold", "dimmed"],
|
|
69
|
+
isPressed: true,
|
|
70
|
+
class: goldGradientPressed
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
preset: ["gold", "dimmed"],
|
|
74
|
+
isDisabled: true,
|
|
75
|
+
class: disabledGradient
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
preset: ["gold"],
|
|
79
|
+
isFocusVisible: true,
|
|
80
|
+
class: "outline outline-offset-2 outline-yellow-50"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
preset: ["hextech"],
|
|
84
|
+
class: hextechGradient
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
preset: ["hextech"],
|
|
88
|
+
isHovered: true,
|
|
89
|
+
class: hextechGradientHover
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
preset: ["hextech"],
|
|
93
|
+
isPressed: true,
|
|
94
|
+
class: hextechGradientPressed
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
preset: ["hextech"],
|
|
98
|
+
isDisabled: true,
|
|
99
|
+
class: disabledGradient
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
});
|
|
103
|
+
const toggleButton = tv({
|
|
104
|
+
base: "text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200",
|
|
105
|
+
variants: {
|
|
106
|
+
preset: {
|
|
107
|
+
gold: "bg-lol-grey-300",
|
|
108
|
+
hextech: "text-lol-blue-100 bg-lol-grey-300",
|
|
109
|
+
dimmed: "bg-lol-grey-hextech-black"
|
|
110
|
+
},
|
|
111
|
+
isHovered: {
|
|
112
|
+
true: "text-lol-gold-100"
|
|
113
|
+
},
|
|
114
|
+
isPressed: {
|
|
115
|
+
true: "text-lol-grey-150"
|
|
116
|
+
},
|
|
117
|
+
isDisabled: {
|
|
118
|
+
true: "text-lol-grey-150"
|
|
119
|
+
},
|
|
120
|
+
isFocused: {
|
|
121
|
+
true: ""
|
|
122
|
+
},
|
|
123
|
+
isSelected: {
|
|
124
|
+
true: [
|
|
125
|
+
hextechGradient,
|
|
126
|
+
"text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner"
|
|
127
|
+
]
|
|
128
|
+
},
|
|
129
|
+
isFocusVisible: {
|
|
130
|
+
true: ""
|
|
131
|
+
},
|
|
132
|
+
shape: {
|
|
133
|
+
round: "rounded-full",
|
|
134
|
+
square: "",
|
|
135
|
+
normal: ""
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
compoundVariants: [
|
|
139
|
+
{
|
|
140
|
+
preset: ["gold", "hextech", "dimmed"],
|
|
141
|
+
class: "px-4 py-2"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
preset: ["hextech"],
|
|
145
|
+
isHovered: true,
|
|
146
|
+
class: "text-lol-blue-100"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
preset: ["hextech"],
|
|
150
|
+
isPressed: true,
|
|
151
|
+
class: "text-lol-blue-400"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
preset: ["hextech"],
|
|
155
|
+
isSelected: true,
|
|
156
|
+
class: ""
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
shape: ["round", "square"],
|
|
160
|
+
class: "flex aspect-square h-7 items-center justify-center p-0 font-black leading-none"
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
});
|
|
164
|
+
function ToggleButton({
|
|
165
|
+
children,
|
|
166
|
+
className,
|
|
167
|
+
innerProps = {},
|
|
168
|
+
preset = "gold",
|
|
169
|
+
shape = "normal",
|
|
170
|
+
thin = preset === "dimmed" ? true : false,
|
|
171
|
+
...props
|
|
172
|
+
}) {
|
|
173
|
+
return /* @__PURE__ */ jsx(
|
|
174
|
+
AriaToggleButton,
|
|
175
|
+
{
|
|
176
|
+
...props,
|
|
177
|
+
className: (values) => toggleButtonBorder({
|
|
178
|
+
...values,
|
|
179
|
+
preset,
|
|
180
|
+
shape,
|
|
181
|
+
thin,
|
|
182
|
+
className: resolveClassName(className, values)
|
|
183
|
+
}),
|
|
184
|
+
children: (values) => /* @__PURE__ */ jsx(
|
|
185
|
+
"span",
|
|
186
|
+
{
|
|
187
|
+
...innerProps,
|
|
188
|
+
className: toggleButton({
|
|
189
|
+
...values,
|
|
190
|
+
preset,
|
|
191
|
+
shape,
|
|
192
|
+
className: resolveClassName(innerProps.className, values)
|
|
193
|
+
}),
|
|
194
|
+
style: {
|
|
195
|
+
// backgroundImage: hextechMagic,
|
|
196
|
+
// backgroundPosition: "center",
|
|
197
|
+
},
|
|
198
|
+
children: typeof children === "function" ? children(values) : children
|
|
199
|
+
}
|
|
200
|
+
)
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
export {
|
|
205
|
+
ToggleButton
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
//# sourceMappingURL=toggle-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"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","names":[],"sources":["../../../src/components/toggle-button.tsx"],"sourcesContent":["import { ComponentProps } from \"react\";\nimport {\n ToggleButton as AriaToggleButton,\n type ToggleButtonProps as AriaToggleButtonProps,\n} from \"react-aria-components\";\nimport { tv } from \"../utilities/tv.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport {\n dimmedGradient,\n goldGradient,\n goldGradientHover,\n goldGradientPressed,\n hextechGradient,\n hextechGradientHover,\n hextechGradientPressed,\n disabledGradient,\n} from \"../utilities/gradient.js\";\n\nexport type ToggleButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ToggleButtonPreset = \"gold\" | \"hextech\" | \"dimmed\";\n\nconst toggleButtonBorder = tv({\n base: \"bg-gradient-to-t p-0.5 outline-none transition-colors duration-200\",\n variants: {\n preset: {\n gold: \"\",\n hextech: \"\",\n dimmed: dimmedGradient,\n },\n shape: {\n round: \"aspect-square rounded-full\",\n square: \"aspect-square\",\n normal: \"\",\n },\n isHovered: {\n true: \"\",\n },\n isPressed: {\n true: \"\",\n },\n isDisabled: {\n true: \"\",\n },\n isFocused: {\n true: \"\",\n },\n isFocusVisible: {\n true: \"\",\n },\n isSelected: {\n true: \"\",\n },\n thin: {\n true: \"p-px\",\n },\n },\n compoundVariants: [\n {\n preset: [\"dimmed\"],\n isSelected: true,\n class: [goldGradient],\n },\n {\n preset: [\"gold\"],\n class: goldGradient,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isHovered: true,\n class: goldGradientHover,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isPressed: true,\n class: goldGradientPressed,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isDisabled: true,\n class: disabledGradient,\n },\n {\n preset: [\"gold\"],\n isFocusVisible: true,\n class: \"outline outline-offset-2 outline-yellow-50\",\n },\n {\n preset: [\"hextech\"],\n class: hextechGradient,\n },\n {\n preset: [\"hextech\"],\n isHovered: true,\n class: hextechGradientHover,\n },\n {\n preset: [\"hextech\"],\n isPressed: true,\n class: hextechGradientPressed,\n },\n {\n preset: [\"hextech\"],\n isDisabled: true,\n class: disabledGradient,\n },\n ],\n});\nconst toggleButton = tv({\n base: \"text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200\",\n variants: {\n preset: {\n gold: \"bg-lol-grey-300\",\n hextech: \"text-lol-blue-100 bg-lol-grey-300\",\n dimmed: \"bg-lol-grey-hextech-black\",\n },\n isHovered: {\n true: \"text-lol-gold-100\",\n },\n isPressed: {\n true: \"text-lol-grey-150\",\n },\n isDisabled: {\n true: \"text-lol-grey-150\",\n },\n isFocused: {\n true: \"\",\n },\n isSelected: {\n true: [\n hextechGradient,\n \"text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner\",\n ],\n },\n isFocusVisible: {\n true: \"\",\n },\n shape: {\n round: \"rounded-full\",\n square: \"\",\n normal: \"\",\n },\n },\n compoundVariants: [\n {\n preset: [\"gold\", \"hextech\", \"dimmed\"],\n class: \"px-4 py-2\",\n },\n {\n preset: [\"hextech\"],\n isHovered: true,\n class: \"text-lol-blue-100\",\n },\n {\n preset: [\"hextech\"],\n isPressed: true,\n class: \"text-lol-blue-400\",\n },\n {\n preset: [\"hextech\"],\n isSelected: true,\n class: \"\",\n },\n\n {\n shape: [\"round\", \"square\"],\n class:\n \"flex aspect-square h-7 items-center justify-center p-0 font-black leading-none\",\n },\n ],\n});\n\ninterface ToggleButtonProps extends AriaToggleButtonProps {\n innerProps?: ComponentProps<\"span\">;\n preset?: ToggleButtonPreset;\n thin?: boolean;\n shape?: ToggleButtonShape;\n}\n\nexport function ToggleButton({\n children,\n className,\n innerProps = {},\n preset = \"gold\",\n shape = \"normal\",\n thin = preset === \"dimmed\" ? true : false,\n ...props\n}: ToggleButtonProps) {\n return (\n <AriaToggleButton\n {...props}\n className={(values) =>\n toggleButtonBorder({\n ...values,\n preset,\n shape,\n thin,\n className: resolveClassName(className, values),\n })\n }\n >\n {(values) => (\n <span\n {...innerProps}\n className={toggleButton({\n ...values,\n preset,\n shape,\n className: resolveClassName(innerProps.className, values),\n })}\n style={\n {\n // backgroundImage: hextechMagic,\n // backgroundPosition: \"center\",\n }\n }\n >\n {typeof children === \"function\" ? children(values) : children}\n </span>\n )}\n </AriaToggleButton>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Tooltip as AriaTooltip, OverlayArrow } from "react-aria-components";
|
|
3
|
+
import { goldGradient } from "../utilities/gradient.js";
|
|
4
|
+
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
5
|
+
import { tv } from "../utilities/tv.js";
|
|
6
|
+
const tooltipBorder = tv({
|
|
7
|
+
base: ["w-[280px] bg-gradient-to-t p-0.5 drop-shadow-lg", goldGradient],
|
|
8
|
+
variants: {
|
|
9
|
+
isEntering: {
|
|
10
|
+
true: "animate-in fade-in data-[placement=bottom]:slide-in-from-top-1 data-[placement=top]:slide-in-from-bottom-1 fill-mode-forwards duration-200 ease-out"
|
|
11
|
+
},
|
|
12
|
+
isExiting: {
|
|
13
|
+
true: "animate-out fade-out data-[placement=bottom]:slide-out-to-top-1 data-[placement=top]:slide-out-to-bottom-1 fill-mode-forwards duration-150 ease-in"
|
|
14
|
+
},
|
|
15
|
+
placement: {
|
|
16
|
+
bottom: "mt-2",
|
|
17
|
+
top: "mb-2",
|
|
18
|
+
center: "",
|
|
19
|
+
left: "",
|
|
20
|
+
right: ""
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
const tooltipArrowBorder = tv({
|
|
25
|
+
base: "fill-lol-gold-500 absolute block h-5 w-5",
|
|
26
|
+
variants: {
|
|
27
|
+
placement: {
|
|
28
|
+
top: "-left-0.5 -translate-y-[1px]",
|
|
29
|
+
bottom: "fill-lol-gold-200 -left-0.5 -translate-y-[3px] rotate-180",
|
|
30
|
+
left: "fill-lol-gold-400 -top-0.5 -translate-x-px -rotate-90",
|
|
31
|
+
right: "fill-lol-gold-400 -top-0.5 -translate-x-[3px] rotate-90",
|
|
32
|
+
center: ""
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
const tooltipArrow = tv({
|
|
37
|
+
base: "fill-lol-grey-300 block h-4 w-4",
|
|
38
|
+
variants: {
|
|
39
|
+
placement: {
|
|
40
|
+
top: "-translate-y-0.5",
|
|
41
|
+
bottom: "translate-y-0.5 rotate-180",
|
|
42
|
+
left: "-translate-x-0.5 -rotate-90",
|
|
43
|
+
right: "translate-x-0.5 rotate-90",
|
|
44
|
+
center: ""
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
function Tooltip({ children, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx(
|
|
50
|
+
AriaTooltip,
|
|
51
|
+
{
|
|
52
|
+
...props,
|
|
53
|
+
className: (values) => tooltipBorder({
|
|
54
|
+
...values,
|
|
55
|
+
className: resolveClassName(props?.className, values)
|
|
56
|
+
}),
|
|
57
|
+
children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
58
|
+
/* @__PURE__ */ jsx(OverlayArrow, { className: "translate-y-1 transform", children: (values2) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
59
|
+
/* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className: tooltipArrowBorder(values2), children: /* @__PURE__ */ jsx("path", { d: "M0 0,L6 6,L12 0" }) }),
|
|
60
|
+
/* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className: tooltipArrow(values2), children: /* @__PURE__ */ jsx("path", { d: "M0 0,L6 6,L12 0" }) })
|
|
61
|
+
] }) }),
|
|
62
|
+
/* @__PURE__ */ jsx("div", { className: "bg-lol-grey-300", children: typeof children === "function" ? children(values) : children })
|
|
63
|
+
] })
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
import { TooltipTrigger } from "react-aria-components";
|
|
68
|
+
export {
|
|
69
|
+
Tooltip,
|
|
70
|
+
TooltipTrigger
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
//# sourceMappingURL=tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAkEc,mBAEI,KAFJ;AAjEd,SAAS,WAAW,aAAa,oBAAoB;AACrD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,gBAAgB,GAAG;AAAA,EACvB,MAAM,CAAC,mDAAmD,YAAY;AAAA,EACtE,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,GAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAED,MAAM,eAAe,GAAG;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAEM,SAAS,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAiB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,cAAc;AAAA,QACZ,GAAG;AAAA,QACH,WAAW,iBAAiB,OAAO,WAAW,MAAM;AAAA,MACtD,CAAC;AAAA,MAGF,WAAC,WACA,iCACE;AAAA,4BAAC,gBAAa,WAAU,2BACrB,WAACA,YACA,iCACE;AAAA,8BAAC,SAAI,SAAQ,aAAY,WAAW,mBAAmBA,OAAM,GAC3D,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAAA,UACA,oBAAC,SAAI,SAAQ,aAAY,WAAW,aAAaA,OAAM,GACrD,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAAA,WACF,GAEJ;AAAA,QACA,oBAAC,SAAI,WAAU,mBACZ,iBAAO,aAAa,aAAa,SAAS,MAAM,IAAI,UACvD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,sBAAsB","names":["values"],"sources":["../../../src/components/tooltip.tsx"],"sourcesContent":["import type { TooltipProps } from \"react-aria-components\";\nimport { Tooltip as AriaTooltip, OverlayArrow } from \"react-aria-components\";\nimport { goldGradient } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst tooltipBorder = tv({\n base: [\"w-[280px] bg-gradient-to-t p-0.5 drop-shadow-lg\", goldGradient],\n variants: {\n isEntering: {\n true: \"animate-in fade-in data-[placement=bottom]:slide-in-from-top-1 data-[placement=top]:slide-in-from-bottom-1 fill-mode-forwards duration-200 ease-out\",\n },\n isExiting: {\n true: \"animate-out fade-out data-[placement=bottom]:slide-out-to-top-1 data-[placement=top]:slide-out-to-bottom-1 fill-mode-forwards duration-150 ease-in\",\n },\n placement: {\n bottom: \"mt-2\",\n top: \"mb-2\",\n center: \"\",\n left: \"\",\n right: \"\",\n },\n },\n});\n\nconst tooltipArrowBorder = tv({\n base: \"fill-lol-gold-500 absolute block h-5 w-5\",\n variants: {\n placement: {\n top: \"-left-0.5 -translate-y-[1px]\",\n bottom: \"fill-lol-gold-200 -left-0.5 -translate-y-[3px] rotate-180\",\n left: \"fill-lol-gold-400 -top-0.5 -translate-x-px -rotate-90\",\n right: \"fill-lol-gold-400 -top-0.5 -translate-x-[3px] rotate-90\",\n center: \"\",\n },\n },\n});\n\nconst tooltipArrow = tv({\n base: \"fill-lol-grey-300 block h-4 w-4\",\n variants: {\n placement: {\n top: \"-translate-y-0.5\",\n bottom: \"translate-y-0.5 rotate-180\",\n left: \"-translate-x-0.5 -rotate-90\",\n right: \"translate-x-0.5 rotate-90\",\n center: \"\",\n },\n },\n});\n\nexport function Tooltip({ children, ...props }: TooltipProps) {\n return (\n <AriaTooltip\n {...props}\n className={(values) =>\n tooltipBorder({\n ...values,\n className: resolveClassName(props?.className, values),\n })\n }\n >\n {(values) => (\n <>\n <OverlayArrow className=\"translate-y-1 transform\">\n {(values) => (\n <>\n <svg viewBox=\"0 0 12 12\" className={tooltipArrowBorder(values)}>\n <path d=\"M0 0,L6 6,L12 0\" />\n </svg>\n <svg viewBox=\"0 0 12 12\" className={tooltipArrow(values)}>\n <path d=\"M0 0,L6 6,L12 0\" />\n </svg>\n </>\n )}\n </OverlayArrow>\n <div className=\"bg-lol-grey-300\">\n {typeof children === \"function\" ? children(values) : children}\n </div>\n </>\n )}\n </AriaTooltip>\n );\n}\n\nexport { TooltipTrigger } from \"react-aria-components\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type HeadingColor = "gold-100" | "gold-200" | "gold-400" | "grey-100";
|
|
2
|
+
export type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5";
|
|
3
|
+
interface HeadingProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
|
|
4
|
+
preset?: HeadingElement;
|
|
5
|
+
color?: HeadingColor;
|
|
6
|
+
as?: HeadingElement | "span";
|
|
7
|
+
}
|
|
8
|
+
export declare function Heading({ as, preset, color, className, ...rest }: HeadingProps): JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { createElement } from "react";
|
|
2
|
+
import { tv } from "../../utilities/tv.js";
|
|
3
|
+
const heading = tv({
|
|
4
|
+
base: "font-beaufort scroll-m-20 uppercase",
|
|
5
|
+
variants: {
|
|
6
|
+
color: {
|
|
7
|
+
"gold-100": "text-lol-gold-100",
|
|
8
|
+
"gold-200": "text-lol-gold-200",
|
|
9
|
+
"gold-400": "text-lol-gold-400",
|
|
10
|
+
"grey-100": "text-lol-grey-100"
|
|
11
|
+
},
|
|
12
|
+
preset: {
|
|
13
|
+
h1: "text-lol-h1",
|
|
14
|
+
h2: "text-lol-h2",
|
|
15
|
+
h3: "text-lol-h3",
|
|
16
|
+
h4: "text-lol-h4",
|
|
17
|
+
h5: "text-lol-h5"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
function Heading({
|
|
22
|
+
as,
|
|
23
|
+
preset = "h1",
|
|
24
|
+
color = "gold-100",
|
|
25
|
+
className,
|
|
26
|
+
...rest
|
|
27
|
+
}) {
|
|
28
|
+
const resultAs = as ?? preset;
|
|
29
|
+
return createElement(resultAs, {
|
|
30
|
+
...rest,
|
|
31
|
+
className: heading({ preset, color, className })
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
Heading
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=heading.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAenB,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AACF,CAAC;AAEM,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,WAAW,MAAM;AAEvB,SAAO,cAAc,UAAU;AAAA,IAC7B,GAAG;AAAA,IACH,WAAW,QAAQ,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EACjD,CAAC;AACH","names":[],"sources":["../../../../src/components/typography/heading.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { tv } from \"../../utilities/tv.js\";\n\nexport type HeadingColor = \"gold-100\" | \"gold-200\" | \"gold-400\" | \"grey-100\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\";\n\ninterface HeadingProps\n extends React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLHeadingElement>,\n HTMLHeadingElement\n > {\n preset?: HeadingElement;\n color?: HeadingColor;\n as?: HeadingElement | \"span\";\n}\n\nconst heading = tv({\n base: \"font-beaufort scroll-m-20 uppercase\",\n variants: {\n color: {\n \"gold-100\": \"text-lol-gold-100\",\n \"gold-200\": \"text-lol-gold-200\",\n \"gold-400\": \"text-lol-gold-400\",\n \"grey-100\": \"text-lol-grey-100\",\n },\n preset: {\n h1: \"text-lol-h1\",\n h2: \"text-lol-h2\",\n h3: \"text-lol-h3\",\n h4: \"text-lol-h4\",\n h5: \"text-lol-h5\",\n },\n },\n});\n\nexport function Heading({\n as,\n preset = \"h1\",\n color = \"gold-100\",\n className,\n ...rest\n}: HeadingProps): JSX.Element {\n const resultAs = as ?? preset;\n\n return createElement(resultAs, {\n ...rest,\n className: heading({ preset, color, className }),\n });\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type LabelProps as AriaLabelProps } from "react-aria-components";
|
|
2
|
+
export type TextColor = "grey-100" | "grey-150" | "gold-100";
|
|
3
|
+
export type TextElement = "p" | "span" | "div";
|
|
4
|
+
export type TextPreset = "sm" | "base" | "md" | "lg" | "large-number" | "stat";
|
|
5
|
+
interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
|
|
6
|
+
preset?: TextPreset;
|
|
7
|
+
color?: TextColor;
|
|
8
|
+
as?: TextElement;
|
|
9
|
+
}
|
|
10
|
+
export declare function Text({ as, preset, color, className, ...rest }: TextProps): JSX.Element;
|
|
11
|
+
interface LabelProps extends AriaLabelProps {
|
|
12
|
+
preset?: TextPreset | 'label';
|
|
13
|
+
color?: TextColor;
|
|
14
|
+
as?: TextElement;
|
|
15
|
+
}
|
|
16
|
+
export declare function Label({ preset, color, className, ...rest }: LabelProps): JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { createElement } from "react";
|
|
2
|
+
import { tv } from "../../utilities/tv.js";
|
|
3
|
+
import {
|
|
4
|
+
Label as AriaLabel
|
|
5
|
+
} from "react-aria-components";
|
|
6
|
+
const presetElements = {
|
|
7
|
+
sm: "p",
|
|
8
|
+
base: "p",
|
|
9
|
+
md: "p",
|
|
10
|
+
lg: "p",
|
|
11
|
+
"large-number": "span",
|
|
12
|
+
stat: "span"
|
|
13
|
+
};
|
|
14
|
+
const text = tv({
|
|
15
|
+
base: "font-spiegel",
|
|
16
|
+
variants: {
|
|
17
|
+
color: {
|
|
18
|
+
"grey-100": "text-lol-grey-100",
|
|
19
|
+
"grey-150": "text-lol-grey-150",
|
|
20
|
+
"gold-100": "text-lol-gold-100"
|
|
21
|
+
},
|
|
22
|
+
preset: {
|
|
23
|
+
sm: "text-lol-sm",
|
|
24
|
+
base: "text-lol-base",
|
|
25
|
+
md: "text-lol-md",
|
|
26
|
+
lg: "text-lol-lg",
|
|
27
|
+
label: "text-lol-label",
|
|
28
|
+
"large-number": "text-lol-large-number font-beaufort italic",
|
|
29
|
+
stat: "text-lol-stat font-beaufort"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
function Text({
|
|
34
|
+
as = "p",
|
|
35
|
+
preset = "base",
|
|
36
|
+
color = "grey-100",
|
|
37
|
+
className,
|
|
38
|
+
...rest
|
|
39
|
+
}) {
|
|
40
|
+
const elementType = as ?? presetElements[preset];
|
|
41
|
+
return createElement(elementType, {
|
|
42
|
+
...rest,
|
|
43
|
+
className: text({ preset, color, className })
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
function Label({
|
|
47
|
+
preset = "sm",
|
|
48
|
+
color = "grey-100",
|
|
49
|
+
className,
|
|
50
|
+
...rest
|
|
51
|
+
}) {
|
|
52
|
+
return createElement(AriaLabel, {
|
|
53
|
+
...rest,
|
|
54
|
+
className: text({ preset, color, className })
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
export {
|
|
58
|
+
Label,
|
|
59
|
+
Text
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
//# sourceMappingURL=text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB;AAAA,EAEE,SAAS;AAAA,OACJ;AAYP,MAAM,iBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,MAAM;AACR;AAEA,MAAM,OAAO,GAAG;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAWM,SAAS,KAAK;AAAA,EACnB,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,cAAc,MAAM,eAAe,MAAM;AAC/C,SAAO,cAAc,aAAa;AAAA,IAChC,GAAG;AAAA,IACH,WAAW,KAAK,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAC9C,CAAC;AACH;AAOO,SAAS,MAAM;AAAA,EACpB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SAAO,cAAc,WAAW;AAAA,IAC9B,GAAG;AAAA,IACH,WAAW,KAAK,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAC9C,CAAC;AACH","names":[],"sources":["../../../../src/components/typography/text.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { tv } from \"../../utilities/tv.js\";\nimport {\n type LabelProps as AriaLabelProps,\n Label as AriaLabel,\n} from \"react-aria-components\";\n\nexport type TextColor = \"grey-100\" | \"grey-150\" | \"gold-100\";\nexport type TextElement = \"p\" | \"span\" | \"div\";\nexport type TextPreset =\n | \"sm\"\n | \"base\"\n | \"md\"\n | \"lg\"\n | \"large-number\"\n | \"stat\";\n\nconst presetElements: Record<TextPreset, TextElement> = {\n sm: \"p\",\n base: \"p\",\n md: \"p\",\n lg: \"p\",\n \"large-number\": \"span\",\n stat: \"span\",\n};\n\nconst text = tv({\n base: \"font-spiegel\",\n variants: {\n color: {\n \"grey-100\": \"text-lol-grey-100\",\n \"grey-150\": \"text-lol-grey-150\",\n \"gold-100\": \"text-lol-gold-100\",\n },\n preset: {\n sm: \"text-lol-sm\",\n base: \"text-lol-base\",\n md: \"text-lol-md\",\n lg: \"text-lol-lg\",\n label: \"text-lol-label\",\n \"large-number\": \"text-lol-large-number font-beaufort italic\",\n stat: \"text-lol-stat font-beaufort\",\n },\n },\n});\n\ninterface TextProps\n extends React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n > {\n preset?: TextPreset;\n color?: TextColor;\n as?: TextElement;\n}\nexport function Text({\n as = \"p\",\n preset = \"base\",\n color = \"grey-100\",\n className,\n ...rest\n}: TextProps): JSX.Element {\n const elementType = as ?? presetElements[preset];\n return createElement(elementType, {\n ...rest,\n className: text({ preset, color, className }),\n });\n}\n\ninterface LabelProps extends AriaLabelProps {\n preset?: TextPreset | 'label';\n color?: TextColor;\n as?: TextElement;\n}\nexport function Label({\n preset = \"sm\",\n color = \"grey-100\",\n className,\n ...rest\n}: LabelProps): JSX.Element {\n return createElement(AriaLabel, {\n ...rest,\n className: text({ preset, color, className }),\n });\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export * from "./components/accordion.js";
|
|
2
|
+
export * from "./components/button.js";
|
|
3
|
+
export * from "./components/card.js";
|
|
4
|
+
export * from "./components/checkbox.js";
|
|
5
|
+
export * from "./components/divider.js";
|
|
6
|
+
export * from "./components/modal.js";
|
|
7
|
+
export * from "./components/number-field.js";
|
|
8
|
+
export * from "./components/progress-bar.js";
|
|
9
|
+
export * from "./components/radio-group.js";
|
|
10
|
+
export * from "./components/search-field.js";
|
|
11
|
+
export * from "./components/select.js";
|
|
12
|
+
export * from "./components/slider/slider.js";
|
|
13
|
+
export * from "./components/spinner/spinner.js";
|
|
14
|
+
export * from "./components/switch.js";
|
|
15
|
+
export * from "./components/tabs.js";
|
|
16
|
+
export * from "./components/text-area.js";
|
|
17
|
+
export * from "./components/text-field.js";
|
|
18
|
+
export * from "./components/toggle-button.js";
|
|
19
|
+
export * from "./components/tooltip.js";
|
|
20
|
+
export * from "./components/typography/heading.js";
|
|
21
|
+
export * from "./components/typography/text.js";
|
|
22
|
+
export * from "./utilities/gradient.js";
|
|
23
|
+
export * from "./utilities/tv.js";
|
package/dist/es/index.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export * from "./components/accordion.js";
|
|
2
|
+
export * from "./components/button.js";
|
|
3
|
+
export * from "./components/card.js";
|
|
4
|
+
export * from "./components/checkbox.js";
|
|
5
|
+
export * from "./components/divider.js";
|
|
6
|
+
export * from "./components/modal.js";
|
|
7
|
+
export * from "./components/number-field.js";
|
|
8
|
+
export * from "./components/progress-bar.js";
|
|
9
|
+
export * from "./components/radio-group.js";
|
|
10
|
+
export * from "./components/search-field.js";
|
|
11
|
+
export * from "./components/select.js";
|
|
12
|
+
export * from "./components/slider/slider.js";
|
|
13
|
+
export * from "./components/spinner/spinner.js";
|
|
14
|
+
export * from "./components/switch.js";
|
|
15
|
+
export * from "./components/tabs.js";
|
|
16
|
+
export * from "./components/text-area.js";
|
|
17
|
+
export * from "./components/text-field.js";
|
|
18
|
+
export * from "./components/toggle-button.js";
|
|
19
|
+
export * from "./components/tooltip.js";
|
|
20
|
+
export * from "./components/typography/heading.js";
|
|
21
|
+
export * from "./components/typography/text.js";
|
|
22
|
+
export * from "./utilities/gradient.js";
|
|
23
|
+
export * from "./utilities/tv.js";
|
|
24
|
+
|
|
25
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"./components/accordion.js\";\nexport * from \"./components/button.js\";\nexport * from \"./components/card.js\";\nexport * from \"./components/checkbox.js\";\nexport * from \"./components/divider.js\";\nexport * from \"./components/modal.js\";\nexport * from \"./components/number-field.js\";\nexport * from \"./components/progress-bar.js\";\nexport * from \"./components/radio-group.js\";\nexport * from \"./components/search-field.js\";\nexport * from \"./components/select.js\";\nexport * from \"./components/slider/slider.js\";\nexport * from \"./components/spinner/spinner.js\";\nexport * from \"./components/switch.js\";\nexport * from \"./components/tabs.js\";\nexport * from \"./components/text-area.js\";\nexport * from \"./components/text-field.js\";\nexport * from \"./components/toggle-button.js\";\nexport * from \"./components/tooltip.js\";\nexport * from \"./components/typography/heading.js\";\nexport * from \"./components/typography/text.js\";\nexport * from \"./utilities/gradient.js\";\nexport * from \"./utilities/tv.js\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,YAAY;AACnB,SAAS,aAAa;AAEf,MAAM,YAAY,OAAO,SAAU,CAAC,GAAG;AAAC,GAAG;AAAA,EAChD,OAAO;AAAA,IACL,QAAQ;AAAA,EACV;AACF,CAAC","names":[],"sources":["../../src/plugin.ts"],"sourcesContent":["import plugin from \"tailwindcss/plugin.js\";\nimport { theme } from \"./utilities/theme.js\";\n\nexport const lolmathui = plugin(function ({}) {}, {\n theme: {\n extend: theme,\n },\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useCssId(): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAAS,aAAa;AAEf,SAAS,WAAW;AACzB,SAAO,MAAM,EAAE,WAAW,KAAK,EAAE;AACnC","names":[],"sources":["../../../src/utilities/css-id.tsx"],"sourcesContent":["import { useId } from \"react\";\n\nexport function useCssId() {\n return useId().replaceAll(\":\", \"\");\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const goldGradient = "from-lol-gold-500 via-lol-gold-400 to-lol-gold-200";
|
|
2
|
+
export declare const goldGradientHover = "from-lol-gold-400 via-lol-gold-200 to-lol-gold-100";
|
|
3
|
+
export declare const goldGradientPressed = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-500";
|
|
4
|
+
export declare const hextechGradient = "from-lol-blue-200 to-lol-blue-400";
|
|
5
|
+
export declare const hextechGradientHover = "from-lol-blue-100 to-lol-blue-300";
|
|
6
|
+
export declare const hextechGradientPressed = "from-lol-blue-500 to-lol-blue-400";
|
|
7
|
+
export declare const dimmedGradient = "from-lol-grey-300 via-lol-grey-300 to-lol-grey-300";
|
|
8
|
+
export declare const disabledGradient = "from-lol-grey-150 via-lol-grey-150 to-lol-grey-150";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const goldGradient = "from-lol-gold-500 via-lol-gold-400 to-lol-gold-200";
|
|
2
|
+
const goldGradientHover = "from-lol-gold-400 via-lol-gold-200 to-lol-gold-100";
|
|
3
|
+
const goldGradientPressed = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-500";
|
|
4
|
+
const hextechGradient = "from-lol-blue-200 to-lol-blue-400";
|
|
5
|
+
const hextechGradientHover = "from-lol-blue-100 to-lol-blue-300";
|
|
6
|
+
const hextechGradientPressed = "from-lol-blue-500 to-lol-blue-400";
|
|
7
|
+
const dimmedGradient = "from-lol-grey-300 via-lol-grey-300 to-lol-grey-300";
|
|
8
|
+
const disabledGradient = "from-lol-grey-150 via-lol-grey-150 to-lol-grey-150";
|
|
9
|
+
export {
|
|
10
|
+
dimmedGradient,
|
|
11
|
+
disabledGradient,
|
|
12
|
+
goldGradient,
|
|
13
|
+
goldGradientHover,
|
|
14
|
+
goldGradientPressed,
|
|
15
|
+
hextechGradient,
|
|
16
|
+
hextechGradientHover,
|
|
17
|
+
hextechGradientPressed
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=gradient.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAO,MAAM,eACX;AACK,MAAM,oBACX;AACK,MAAM,sBACX;AAEK,MAAM,kBAAkB;AACxB,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAE/B,MAAM,iBACX;AACK,MAAM,mBACX","names":[],"sources":["../../../src/utilities/gradient.tsx"],"sourcesContent":["export const goldGradient =\n \"from-lol-gold-500 via-lol-gold-400 to-lol-gold-200\";\nexport const goldGradientHover =\n \"from-lol-gold-400 via-lol-gold-200 to-lol-gold-100\";\nexport const goldGradientPressed =\n \"from-lol-gold-600 via-lol-gold-600 to-lol-gold-500\";\n\nexport const hextechGradient = \"from-lol-blue-200 to-lol-blue-400\";\nexport const hextechGradientHover = \"from-lol-blue-100 to-lol-blue-300\";\nexport const hextechGradientPressed = \"from-lol-blue-500 to-lol-blue-400\";\n\nexport const dimmedGradient =\n \"from-lol-grey-300 via-lol-grey-300 to-lol-grey-300\";\nexport const disabledGradient =\n \"from-lol-grey-150 via-lol-grey-150 to-lol-grey-150\";\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const outlineClassName = "outline outline-[#dcc188] outline-offset-2 outline-1";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAO,MAAM,mBACX","names":[],"sources":["../../../src/utilities/outline.tsx"],"sourcesContent":["export const outlineClassName =\n \"outline outline-[#dcc188] outline-offset-2 outline-1\";\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function resolveClassName(className: ((values: any) => string) | string | undefined, values: any): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAO,SAAS,iBACd,WACA,QACQ;AACR,SAAO,OAAO,cAAc,aAAa,UAAU,MAAM,IAAI,aAAa;AAC5E","names":[],"sources":["../../../src/utilities/resolve-class-name.ts"],"sourcesContent":["export function resolveClassName(\n className: ((values: any) => string) | string | undefined,\n values: any,\n): string {\n return typeof className === \"function\" ? className(values) : className ?? \"\";\n}\n"]}
|