@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.
Files changed (209) hide show
  1. package/dist/es/components/accordion.d.ts +22 -0
  2. package/dist/es/components/accordion.js +101 -0
  3. package/dist/es/components/accordion.js.map +1 -0
  4. package/dist/es/components/button.d.ts +11 -0
  5. package/dist/es/components/button.js +221 -0
  6. package/dist/es/components/button.js.map +1 -0
  7. package/dist/es/components/card.d.ts +6 -0
  8. package/dist/es/components/card.js +51 -0
  9. package/dist/es/components/card.js.map +1 -0
  10. package/dist/es/components/checkbox.d.ts +2 -0
  11. package/dist/es/components/checkbox.js +53 -0
  12. package/dist/es/components/checkbox.js.map +1 -0
  13. package/dist/es/components/divider.d.ts +25 -0
  14. package/dist/es/components/divider.js +30 -0
  15. package/dist/es/components/divider.js.map +1 -0
  16. package/dist/es/components/modal.d.ts +13 -0
  17. package/dist/es/components/modal.js +97 -0
  18. package/dist/es/components/modal.js.map +1 -0
  19. package/dist/es/components/number-field.d.ts +10 -0
  20. package/dist/es/components/number-field.js +110 -0
  21. package/dist/es/components/number-field.js.map +1 -0
  22. package/dist/es/components/popover.d.ts +1 -0
  23. package/dist/es/components/popover.js +0 -0
  24. package/dist/es/components/progress-bar.d.ts +6 -0
  25. package/dist/es/components/progress-bar.js +41 -0
  26. package/dist/es/components/progress-bar.js.map +1 -0
  27. package/dist/es/components/radio-group.d.ts +3 -0
  28. package/dist/es/components/radio-group.js +82 -0
  29. package/dist/es/components/radio-group.js.map +1 -0
  30. package/dist/es/components/search-field.d.ts +6 -0
  31. package/dist/es/components/search-field.js +95 -0
  32. package/dist/es/components/search-field.js.map +1 -0
  33. package/dist/es/components/select.d.ts +11 -0
  34. package/dist/es/components/select.js +117 -0
  35. package/dist/es/components/select.js.map +1 -0
  36. package/dist/es/components/slider/images.d.ts +4 -0
  37. package/dist/es/components/slider/images.js +12 -0
  38. package/dist/es/components/slider/images.js.map +1 -0
  39. package/dist/es/components/slider/slider.d.ts +8 -0
  40. package/dist/es/components/slider/slider.js +169 -0
  41. package/dist/es/components/slider/slider.js.map +1 -0
  42. package/dist/es/components/spinner/images.d.ts +1 -0
  43. package/dist/es/components/spinner/images.js +6 -0
  44. package/dist/es/components/spinner/images.js.map +1 -0
  45. package/dist/es/components/spinner/spinner.d.ts +5 -0
  46. package/dist/es/components/spinner/spinner.js +23 -0
  47. package/dist/es/components/spinner/spinner.js.map +1 -0
  48. package/dist/es/components/switch.d.ts +4 -0
  49. package/dist/es/components/switch.js +96 -0
  50. package/dist/es/components/switch.js.map +1 -0
  51. package/dist/es/components/tabs.d.ts +6 -0
  52. package/dist/es/components/tabs.js +107 -0
  53. package/dist/es/components/tabs.js.map +1 -0
  54. package/dist/es/components/text-area.d.ts +6 -0
  55. package/dist/es/components/text-area.js +67 -0
  56. package/dist/es/components/text-area.js.map +1 -0
  57. package/dist/es/components/text-field.d.ts +6 -0
  58. package/dist/es/components/text-field.js +68 -0
  59. package/dist/es/components/text-field.js.map +1 -0
  60. package/dist/es/components/toggle-button.d.ts +12 -0
  61. package/dist/es/components/toggle-button.js +208 -0
  62. package/dist/es/components/toggle-button.js.map +1 -0
  63. package/dist/es/components/tooltip.d.ts +3 -0
  64. package/dist/es/components/tooltip.js +73 -0
  65. package/dist/es/components/tooltip.js.map +1 -0
  66. package/dist/es/components/typography/heading.d.ts +9 -0
  67. package/dist/es/components/typography/heading.js +38 -0
  68. package/dist/es/components/typography/heading.js.map +1 -0
  69. package/dist/es/components/typography/text.d.ts +17 -0
  70. package/dist/es/components/typography/text.js +62 -0
  71. package/dist/es/components/typography/text.js.map +1 -0
  72. package/dist/es/index.d.ts +23 -0
  73. package/dist/es/index.js +25 -0
  74. package/dist/es/index.js.map +1 -0
  75. package/dist/es/plugin.d.ts +4 -0
  76. package/dist/es/plugin.js +13 -0
  77. package/dist/es/plugin.js.map +1 -0
  78. package/dist/es/utilities/css-id.d.ts +1 -0
  79. package/dist/es/utilities/css-id.js +9 -0
  80. package/dist/es/utilities/css-id.js.map +1 -0
  81. package/dist/es/utilities/gradient.d.ts +8 -0
  82. package/dist/es/utilities/gradient.js +20 -0
  83. package/dist/es/utilities/gradient.js.map +1 -0
  84. package/dist/es/utilities/outline.d.ts +1 -0
  85. package/dist/es/utilities/outline.js +6 -0
  86. package/dist/es/utilities/outline.js.map +1 -0
  87. package/dist/es/utilities/resolve-class-name.d.ts +1 -0
  88. package/dist/es/utilities/resolve-class-name.js +8 -0
  89. package/dist/es/utilities/resolve-class-name.js.map +1 -0
  90. package/dist/es/utilities/theme.d.ts +98 -0
  91. package/dist/{chunk-KUMYC3II.js → es/utilities/theme.js} +3 -4
  92. package/dist/es/utilities/theme.js.map +1 -0
  93. package/dist/es/utilities/tv.d.ts +1 -0
  94. package/dist/es/utilities/tv.js +21 -0
  95. package/dist/es/utilities/tv.js.map +1 -0
  96. package/dist/es/utilities/view-transition.d.ts +1 -0
  97. package/dist/es/utilities/view-transition.js +15 -0
  98. package/dist/es/utilities/view-transition.js.map +1 -0
  99. package/dist/lib/components/accordion.d.ts +22 -0
  100. package/dist/lib/components/accordion.js +130 -0
  101. package/dist/lib/components/accordion.js.map +1 -0
  102. package/dist/lib/components/button.d.ts +11 -0
  103. package/dist/lib/components/button.js +234 -0
  104. package/dist/lib/components/button.js.map +1 -0
  105. package/dist/lib/components/card.d.ts +6 -0
  106. package/dist/lib/components/card.js +76 -0
  107. package/dist/lib/components/card.js.map +1 -0
  108. package/dist/lib/components/checkbox.d.ts +2 -0
  109. package/dist/lib/components/checkbox.js +77 -0
  110. package/dist/lib/components/checkbox.js.map +1 -0
  111. package/dist/lib/components/divider.d.ts +25 -0
  112. package/dist/lib/components/divider.js +54 -0
  113. package/dist/lib/components/divider.js.map +1 -0
  114. package/dist/lib/components/modal.d.ts +13 -0
  115. package/dist/lib/components/modal.js +118 -0
  116. package/dist/lib/components/modal.js.map +1 -0
  117. package/dist/lib/components/number-field.d.ts +10 -0
  118. package/dist/lib/components/number-field.js +124 -0
  119. package/dist/lib/components/number-field.js.map +1 -0
  120. package/dist/lib/components/popover.d.ts +1 -0
  121. package/dist/lib/components/popover.js +1 -0
  122. package/dist/lib/components/progress-bar.d.ts +6 -0
  123. package/dist/lib/components/progress-bar.js +62 -0
  124. package/dist/lib/components/progress-bar.js.map +1 -0
  125. package/dist/lib/components/radio-group.d.ts +3 -0
  126. package/dist/lib/components/radio-group.js +104 -0
  127. package/dist/lib/components/radio-group.js.map +1 -0
  128. package/dist/lib/components/search-field.d.ts +6 -0
  129. package/dist/lib/components/search-field.js +115 -0
  130. package/dist/lib/components/search-field.js.map +1 -0
  131. package/dist/lib/components/select.d.ts +11 -0
  132. package/dist/lib/components/select.js +129 -0
  133. package/dist/lib/components/select.js.map +1 -0
  134. package/dist/lib/components/slider/images.d.ts +4 -0
  135. package/dist/lib/components/slider/images.js +39 -0
  136. package/dist/lib/components/slider/images.js.map +1 -0
  137. package/dist/lib/components/slider/slider.d.ts +8 -0
  138. package/dist/lib/components/slider/slider.js +184 -0
  139. package/dist/lib/components/slider/slider.js.map +1 -0
  140. package/dist/lib/components/spinner/images.d.ts +1 -0
  141. package/dist/lib/components/spinner/images.js +30 -0
  142. package/dist/lib/components/spinner/images.js.map +1 -0
  143. package/dist/lib/components/spinner/spinner.d.ts +5 -0
  144. package/dist/lib/components/spinner/spinner.js +47 -0
  145. package/dist/lib/components/spinner/spinner.js.map +1 -0
  146. package/dist/lib/components/switch.d.ts +4 -0
  147. package/dist/lib/components/switch.js +115 -0
  148. package/dist/lib/components/switch.js.map +1 -0
  149. package/dist/lib/components/tabs.d.ts +6 -0
  150. package/dist/lib/components/tabs.js +129 -0
  151. package/dist/lib/components/tabs.js.map +1 -0
  152. package/dist/lib/components/text-area.d.ts +6 -0
  153. package/dist/lib/components/text-area.js +88 -0
  154. package/dist/lib/components/text-area.js.map +1 -0
  155. package/dist/lib/components/text-field.d.ts +6 -0
  156. package/dist/lib/components/text-field.js +89 -0
  157. package/dist/lib/components/text-field.js.map +1 -0
  158. package/dist/lib/components/toggle-button.d.ts +12 -0
  159. package/dist/lib/components/toggle-button.js +221 -0
  160. package/dist/lib/components/toggle-button.js.map +1 -0
  161. package/dist/lib/components/tooltip.d.ts +3 -0
  162. package/dist/lib/components/tooltip.js +98 -0
  163. package/dist/lib/components/tooltip.js.map +1 -0
  164. package/dist/lib/components/typography/heading.d.ts +9 -0
  165. package/dist/lib/components/typography/heading.js +62 -0
  166. package/dist/lib/components/typography/heading.js.map +1 -0
  167. package/dist/lib/components/typography/text.d.ts +17 -0
  168. package/dist/lib/components/typography/text.js +85 -0
  169. package/dist/lib/components/typography/text.js.map +1 -0
  170. package/dist/lib/index.d.ts +23 -0
  171. package/dist/lib/index.js +68 -0
  172. package/dist/lib/index.js.map +1 -0
  173. package/dist/lib/plugin.d.ts +4 -0
  174. package/dist/lib/plugin.js +47 -0
  175. package/dist/lib/plugin.js.map +1 -0
  176. package/dist/lib/utilities/css-id.d.ts +1 -0
  177. package/dist/lib/utilities/css-id.js +33 -0
  178. package/dist/lib/utilities/css-id.js.map +1 -0
  179. package/dist/lib/utilities/gradient.d.ts +8 -0
  180. package/dist/lib/utilities/gradient.js +51 -0
  181. package/dist/lib/utilities/gradient.js.map +1 -0
  182. package/dist/lib/utilities/outline.d.ts +1 -0
  183. package/dist/lib/utilities/outline.js +30 -0
  184. package/dist/lib/utilities/outline.js.map +1 -0
  185. package/dist/lib/utilities/resolve-class-name.d.ts +1 -0
  186. package/dist/lib/utilities/resolve-class-name.js +32 -0
  187. package/dist/lib/utilities/resolve-class-name.js.map +1 -0
  188. package/dist/lib/utilities/theme.d.ts +98 -0
  189. package/dist/{plugin.cjs → lib/utilities/theme.js} +8 -30
  190. package/dist/lib/utilities/theme.js.map +1 -0
  191. package/dist/lib/utilities/tv.d.ts +1 -0
  192. package/dist/lib/utilities/tv.js +45 -0
  193. package/dist/lib/utilities/tv.js.map +1 -0
  194. package/dist/lib/utilities/view-transition.d.ts +1 -0
  195. package/dist/lib/utilities/view-transition.js +39 -0
  196. package/dist/lib/utilities/view-transition.js.map +1 -0
  197. package/package.json +24 -15
  198. package/dist/chunk-KUMYC3II.js.map +0 -1
  199. package/dist/index.cjs +0 -1987
  200. package/dist/index.cjs.map +0 -1
  201. package/dist/index.d.cts +0 -279
  202. package/dist/index.d.ts +0 -279
  203. package/dist/index.js +0 -1857
  204. package/dist/index.js.map +0 -1
  205. package/dist/plugin.cjs.map +0 -1
  206. package/dist/plugin.d.cts +0 -8
  207. package/dist/plugin.d.ts +0 -8
  208. package/dist/plugin.js +0 -16
  209. 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,3 @@
1
+ import type { TooltipProps } from "react-aria-components";
2
+ export declare function Tooltip({ children, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
3
+ export { TooltipTrigger } from "react-aria-components";
@@ -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";
@@ -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,4 @@
1
+ export declare const lolmathui: {
2
+ handler: import("tailwindcss/types/config.js").PluginCreator;
3
+ config?: Partial<import("tailwindcss/types/config.js").Config> | undefined;
4
+ };
@@ -0,0 +1,13 @@
1
+ import plugin from "tailwindcss/plugin.js";
2
+ import { theme } from "./utilities/theme.js";
3
+ const lolmathui = plugin(function({}) {
4
+ }, {
5
+ theme: {
6
+ extend: theme
7
+ }
8
+ });
9
+ export {
10
+ lolmathui
11
+ };
12
+
13
+ //# sourceMappingURL=plugin.js.map
@@ -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,9 @@
1
+ import { useId } from "react";
2
+ function useCssId() {
3
+ return useId().replaceAll(":", "");
4
+ }
5
+ export {
6
+ useCssId
7
+ };
8
+
9
+ //# sourceMappingURL=css-id.js.map
@@ -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,6 @@
1
+ const outlineClassName = "outline outline-[#dcc188] outline-offset-2 outline-1";
2
+ export {
3
+ outlineClassName
4
+ };
5
+
6
+ //# sourceMappingURL=outline.js.map
@@ -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,8 @@
1
+ function resolveClassName(className, values) {
2
+ return typeof className === "function" ? className(values) : className ?? "";
3
+ }
4
+ export {
5
+ resolveClassName
6
+ };
7
+
8
+ //# sourceMappingURL=resolve-class-name.js.map
@@ -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"]}