@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/dist/index.js CHANGED
@@ -11,6 +11,11 @@ var borderHoverClassName = "from-[#c89c3c] via-[#dcc188] to-[#f0e6d8]";
11
11
  var borderPressedClassName = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700";
12
12
  var borderDisabledClassName = "from-[#5c5b57] via-[#5c5b57] to-[#5c5b57]";
13
13
 
14
+ // src/utilities/resolve-classname.ts
15
+ function resolveClassname(className, values) {
16
+ return typeof className === "function" ? className(values) : className;
17
+ }
18
+
14
19
  // src/components/button.tsx
15
20
  import { jsx } from "react/jsx-runtime";
16
21
  function _Button({ children, className, priority = "secondary", ...props }, ref) {
@@ -18,8 +23,8 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
18
23
  AriaButton,
19
24
  {
20
25
  ref,
26
+ ...props,
21
27
  className: (values) => {
22
- const overrideClassname = typeof className === "undefined" ? "" : typeof className === "string" ? className : className(values);
23
28
  return twMerge(
24
29
  "font-[beaufort] font-black uppercase transition-colors duration-200 outline-none bg-gradient-to-t",
25
30
  borderClassName,
@@ -28,10 +33,9 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
28
33
  values.isDisabled && borderDisabledClassName,
29
34
  values.isFocused && "",
30
35
  values.isFocusVisible && "outline outline-yellow-50 outline-offset-2",
31
- overrideClassname
36
+ resolveClassname(className, values)
32
37
  );
33
38
  },
34
- ...props,
35
39
  children: (values) => {
36
40
  return /* @__PURE__ */ jsx(
37
41
  "span",
@@ -81,47 +85,54 @@ function Select({
81
85
  children,
82
86
  ...props
83
87
  }) {
84
- return /* @__PURE__ */ jsx2(AriaSelect, { ...props, className: "font-spiegel", children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
85
- /* @__PURE__ */ jsx2(
86
- AriaButton2,
87
- {
88
- className: (buttonValues) => twMerge2(
89
- "inline-block outline-none",
90
- borderClassName,
91
- buttonValues.isHovered && borderHoverClassName,
92
- (buttonValues.isPressed || values.isOpen) && borderPressedClassName,
93
- buttonValues.isDisabled && borderDisabledClassName,
94
- buttonValues.isFocused && "",
95
- buttonValues.isFocusVisible && outlineClassName
96
- ),
97
- children: /* @__PURE__ */ jsx2(
98
- "span",
88
+ return /* @__PURE__ */ jsx2(
89
+ AriaSelect,
90
+ {
91
+ ...props,
92
+ className: (values) => twMerge2("font-spiegel", resolveClassname(props.className, values)),
93
+ children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
94
+ /* @__PURE__ */ jsx2(
95
+ AriaButton2,
99
96
  {
100
- className: twMerge2(
101
- "block m-px bg-lol-gray-950 px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat"
97
+ className: (buttonValues) => twMerge2(
98
+ "inline-block outline-none",
99
+ borderClassName,
100
+ buttonValues.isHovered && borderHoverClassName,
101
+ (buttonValues.isPressed || values.isOpen) && borderPressedClassName,
102
+ buttonValues.isDisabled && borderDisabledClassName,
103
+ buttonValues.isFocused && "",
104
+ buttonValues.isFocusVisible && outlineClassName
102
105
  ),
103
- style: {
104
- backgroundPosition: "right 0.5rem center",
105
- 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=')"
106
- },
107
- children: /* @__PURE__ */ jsx2(AriaSelectValue, {})
106
+ children: /* @__PURE__ */ jsx2(
107
+ "span",
108
+ {
109
+ className: twMerge2(
110
+ "block m-px bg-lol-gray-950 px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat"
111
+ ),
112
+ style: {
113
+ backgroundPosition: "right 0.5rem center",
114
+ 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=')"
115
+ },
116
+ children: /* @__PURE__ */ jsx2(AriaSelectValue, {})
117
+ }
118
+ )
108
119
  }
109
- )
110
- }
111
- ),
112
- description && /* @__PURE__ */ jsx2(AriaText, { slot: "description", children: description }),
113
- errorMessage && /* @__PURE__ */ jsx2(AriaText, { slot: "errorMessage", children: errorMessage }),
114
- /* @__PURE__ */ jsx2(AriaPopover, { offset: 4, children: /* @__PURE__ */ jsx2(
115
- AriaListBox,
116
- {
117
- className: (listbox) => twMerge2(
118
- "bg-[#010a13] border border-[#463714] outline-none",
119
- listbox.isFocused && ""
120
120
  ),
121
- children
122
- }
123
- ) })
124
- ] }) });
121
+ description && /* @__PURE__ */ jsx2(AriaText, { slot: "description", children: description }),
122
+ errorMessage && /* @__PURE__ */ jsx2(AriaText, { slot: "errorMessage", children: errorMessage }),
123
+ /* @__PURE__ */ jsx2(AriaPopover, { offset: 4, children: /* @__PURE__ */ jsx2(
124
+ AriaListBox,
125
+ {
126
+ className: (listbox) => twMerge2(
127
+ "bg-[#010a13] border border-[#463714] outline-none",
128
+ listbox.isFocused && ""
129
+ ),
130
+ children
131
+ }
132
+ ) })
133
+ ] })
134
+ }
135
+ );
125
136
  }
126
137
  function Item({ className, ...props }) {
127
138
  return /* @__PURE__ */ jsx2(
@@ -150,13 +161,6 @@ import {
150
161
  Button as AriaButton3
151
162
  } from "react-aria-components";
152
163
  import { twMerge as twMerge3 } from "tailwind-merge";
153
-
154
- // src/utilities/resolve-classname.ts
155
- function resolveClassname(className, values) {
156
- return typeof className === "function" ? className(values) : className;
157
- }
158
-
159
- // src/components/search-field.tsx
160
164
  import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
161
165
  function SearchField({
162
166
  inputProps = {},
@@ -165,17 +169,16 @@ function SearchField({
165
169
  return /* @__PURE__ */ jsx3(
166
170
  AriaSearchField,
167
171
  {
172
+ ...props,
168
173
  className: (values) => {
169
- const finalClassName = resolveClassname(props.className, values);
170
174
  return twMerge3(
171
175
  "flex flex-col outline-none",
172
176
  borderClassName,
173
177
  "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
174
178
  props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
175
- finalClassName
179
+ resolveClassname(props.className, values)
176
180
  );
177
181
  },
178
- ...props,
179
182
  children: ({ state, isDisabled }) => /* @__PURE__ */ jsxs2(
180
183
  "div",
181
184
  {
@@ -367,8 +370,8 @@ function Switch({
367
370
  return /* @__PURE__ */ jsx5(
368
371
  AriaSwitch,
369
372
  {
370
- className: "group inline-flex items-center gap-2 p-1 text-sm font-semibold text-black",
371
373
  ...props,
374
+ className: "group inline-flex items-center gap-2 p-1 text-sm font-semibold text-black",
372
375
  children: (values) => /* @__PURE__ */ jsxs4(Fragment3, { children: [
373
376
  /* @__PURE__ */ jsx5(
374
377
  "div",
@@ -585,17 +588,14 @@ function TextField({
585
588
  return /* @__PURE__ */ jsx8(
586
589
  AriaTextField,
587
590
  {
588
- className: (values) => {
589
- const finalClassName = resolveClassname(props.className, values);
590
- return twMerge8(
591
- "flex flex-col outline-none",
592
- borderClassName,
593
- "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
594
- props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
595
- finalClassName
596
- );
597
- },
598
591
  ...props,
592
+ className: (values) => twMerge8(
593
+ "flex flex-col outline-none",
594
+ borderClassName,
595
+ "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
596
+ props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
597
+ resolveClassname(props.className, values)
598
+ ),
599
599
  children: /* @__PURE__ */ jsx8(
600
600
  "div",
601
601
  {