@lolmath/ui 2.5.0 → 2.5.2

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 (6) hide show
  1. package/README.md +9 -0
  2. package/dist/index.cjs +61 -61
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +61 -61
  5. package/dist/index.js.map +1 -1
  6. package/package.json +11 -1
package/README.md ADDED
@@ -0,0 +1,9 @@
1
+ # LoL Math UI
2
+
3
+ The League of Legends Math UI is React Component library made to look similar to
4
+ the League of Legends client. It is used in the [LoL Math website](https://lolmath.net)
5
+
6
+ - [Documentation](https://docs.lolmath.net).
7
+ - [Storybook](https://ui.lolmath.net).
8
+ - [NPM Package](https://www.npmjs.com/package/@lolmath/ui).
9
+ - [Repository](https://gitlab.com/lol-math/lolmath/-/tree/main/packages/ui)
package/dist/index.cjs CHANGED
@@ -61,6 +61,11 @@ var borderHoverClassName = "from-[#c89c3c] via-[#dcc188] to-[#f0e6d8]";
61
61
  var borderPressedClassName = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700";
62
62
  var borderDisabledClassName = "from-[#5c5b57] via-[#5c5b57] to-[#5c5b57]";
63
63
 
64
+ // src/utilities/resolve-classname.ts
65
+ function resolveClassname(className, values) {
66
+ return typeof className === "function" ? className(values) : className;
67
+ }
68
+
64
69
  // src/components/button.tsx
65
70
  var import_jsx_runtime = require("react/jsx-runtime");
66
71
  function _Button({ children, className, priority = "secondary", ...props }, ref) {
@@ -68,8 +73,8 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
68
73
  import_react_aria_components.Button,
69
74
  {
70
75
  ref,
76
+ ...props,
71
77
  className: (values) => {
72
- const overrideClassname = typeof className === "undefined" ? "" : typeof className === "string" ? className : className(values);
73
78
  return (0, import_tailwind_merge.twMerge)(
74
79
  "font-[beaufort] font-black uppercase transition-colors duration-200 outline-none bg-gradient-to-t",
75
80
  borderClassName,
@@ -78,10 +83,9 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
78
83
  values.isDisabled && borderDisabledClassName,
79
84
  values.isFocused && "",
80
85
  values.isFocusVisible && "outline outline-yellow-50 outline-offset-2",
81
- overrideClassname
86
+ resolveClassname(className, values)
82
87
  );
83
88
  },
84
- ...props,
85
89
  children: (values) => {
86
90
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
87
91
  "span",
@@ -123,47 +127,54 @@ function Select({
123
127
  children,
124
128
  ...props
125
129
  }) {
126
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Select, { ...props, className: "font-spiegel", children: (values) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
127
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
128
- import_react_aria_components2.Button,
129
- {
130
- className: (buttonValues) => (0, import_tailwind_merge2.twMerge)(
131
- "inline-block outline-none",
132
- borderClassName,
133
- buttonValues.isHovered && borderHoverClassName,
134
- (buttonValues.isPressed || values.isOpen) && borderPressedClassName,
135
- buttonValues.isDisabled && borderDisabledClassName,
136
- buttonValues.isFocused && "",
137
- buttonValues.isFocusVisible && outlineClassName
138
- ),
139
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
140
- "span",
130
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
131
+ import_react_aria_components2.Select,
132
+ {
133
+ ...props,
134
+ className: (values) => (0, import_tailwind_merge2.twMerge)("font-spiegel", resolveClassname(props.className, values)),
135
+ children: (values) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
136
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
137
+ import_react_aria_components2.Button,
141
138
  {
142
- className: (0, import_tailwind_merge2.twMerge)(
143
- "block m-px bg-lol-gray-950 px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat"
139
+ className: (buttonValues) => (0, import_tailwind_merge2.twMerge)(
140
+ "inline-block outline-none",
141
+ borderClassName,
142
+ buttonValues.isHovered && borderHoverClassName,
143
+ (buttonValues.isPressed || values.isOpen) && borderPressedClassName,
144
+ buttonValues.isDisabled && borderDisabledClassName,
145
+ buttonValues.isFocused && "",
146
+ buttonValues.isFocusVisible && outlineClassName
144
147
  ),
145
- style: {
146
- backgroundPosition: "right 0.5rem center",
147
- backgroundImage: values.isOpen ? "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==')" : "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=')"
148
- },
149
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.SelectValue, {})
148
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
149
+ "span",
150
+ {
151
+ className: (0, import_tailwind_merge2.twMerge)(
152
+ "block m-px bg-lol-gray-950 px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat"
153
+ ),
154
+ style: {
155
+ backgroundPosition: "right 0.5rem center",
156
+ backgroundImage: values.isOpen ? "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==')" : "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=')"
157
+ },
158
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.SelectValue, {})
159
+ }
160
+ )
150
161
  }
151
- )
152
- }
153
- ),
154
- description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Text, { slot: "description", children: description }),
155
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Text, { slot: "errorMessage", children: errorMessage }),
156
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Popover, { offset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
157
- import_react_aria_components2.ListBox,
158
- {
159
- className: (listbox) => (0, import_tailwind_merge2.twMerge)(
160
- "bg-[#010a13] border border-[#463714] outline-none",
161
- listbox.isFocused && ""
162
162
  ),
163
- children
164
- }
165
- ) })
166
- ] }) });
163
+ description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Text, { slot: "description", children: description }),
164
+ errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Text, { slot: "errorMessage", children: errorMessage }),
165
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Popover, { offset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
166
+ import_react_aria_components2.ListBox,
167
+ {
168
+ className: (listbox) => (0, import_tailwind_merge2.twMerge)(
169
+ "bg-[#010a13] border border-[#463714] outline-none",
170
+ listbox.isFocused && ""
171
+ ),
172
+ children
173
+ }
174
+ ) })
175
+ ] })
176
+ }
177
+ );
167
178
  }
168
179
  function Item({ className, ...props }) {
169
180
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -188,13 +199,6 @@ function Item({ className, ...props }) {
188
199
  // src/components/search-field.tsx
189
200
  var import_react_aria_components3 = require("react-aria-components");
190
201
  var import_tailwind_merge3 = require("tailwind-merge");
191
-
192
- // src/utilities/resolve-classname.ts
193
- function resolveClassname(className, values) {
194
- return typeof className === "function" ? className(values) : className;
195
- }
196
-
197
- // src/components/search-field.tsx
198
202
  var import_jsx_runtime3 = require("react/jsx-runtime");
199
203
  function SearchField({
200
204
  inputProps = {},
@@ -203,17 +207,16 @@ function SearchField({
203
207
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
204
208
  import_react_aria_components3.SearchField,
205
209
  {
210
+ ...props,
206
211
  className: (values) => {
207
- const finalClassName = resolveClassname(props.className, values);
208
212
  return (0, import_tailwind_merge3.twMerge)(
209
213
  "flex flex-col outline-none",
210
214
  borderClassName,
211
215
  "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
212
216
  props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
213
- finalClassName
217
+ resolveClassname(props.className, values)
214
218
  );
215
219
  },
216
- ...props,
217
220
  children: ({ state, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
218
221
  "div",
219
222
  {
@@ -399,8 +402,8 @@ function Switch({
399
402
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
400
403
  import_react_aria_components5.Switch,
401
404
  {
402
- className: "group inline-flex items-center gap-2 p-1 text-sm font-semibold text-black",
403
405
  ...props,
406
+ className: "group inline-flex items-center gap-2 p-1 text-sm font-semibold text-black",
404
407
  children: (values) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
405
408
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
406
409
  "div",
@@ -611,17 +614,14 @@ function TextField({
611
614
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
612
615
  import_react_aria_components7.TextField,
613
616
  {
614
- className: (values) => {
615
- const finalClassName = resolveClassname(props.className, values);
616
- return (0, import_tailwind_merge8.twMerge)(
617
- "flex flex-col outline-none",
618
- borderClassName,
619
- "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
620
- props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
621
- finalClassName
622
- );
623
- },
624
617
  ...props,
618
+ className: (values) => (0, import_tailwind_merge8.twMerge)(
619
+ "flex flex-col outline-none",
620
+ borderClassName,
621
+ "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
622
+ props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
623
+ resolveClassname(props.className, values)
624
+ ),
625
625
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
626
626
  "div",
627
627
  {