@lolmath/ui 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +86 -35
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +8 -5
  4. package/dist/index.d.ts +8 -5
  5. package/dist/index.js +90 -35
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -27,6 +27,7 @@ __export(src_exports, {
27
27
  Button: () => Button,
28
28
  Item: () => Item,
29
29
  Label: () => Label3,
30
+ NumberField: () => NumberField,
30
31
  ProgressBar: () => ProgressBar,
31
32
  Radio: () => Radio,
32
33
  RadioGroup: () => RadioGroup,
@@ -75,15 +76,15 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
75
76
  "span",
76
77
  {
77
78
  className: (0, import_tailwind_merge.twMerge)(
78
- "block m-0.5 px-4 py-2 bg-[#1e2328] transition-colors duration-200",
79
+ "block m-0.5 px-4 py-2 bg-lol-gray-950 transition-colors duration-200",
79
80
  priority === "primary" && "bg-gradient-to-b",
80
81
  "text-[#cdbe91] tracking-wide",
81
- values.isHovered && "text-[#f0e6d2]",
82
- values.isPressed && "text-[#5c5b57]",
83
- values.isDisabled && "text-[#5c5b57]",
82
+ values.isHovered && "text-lol-gold-100",
83
+ values.isPressed && "text-lol-gray-500",
84
+ values.isDisabled && "text-lol-gray-500",
84
85
  values.isFocused && "",
85
86
  values.isFocusVisible && "",
86
- priority === "primary" && "from-[#5a401f] via-[#47341B] to-[#332717]",
87
+ priority === "primary" && "from-lol-gold-700 via-lol-gold-800 to-lol-gold-900",
87
88
  priority === "primary" && values.isHovered && "from-[#604522] via-[#846745] to-[#725634]",
88
89
  priority === "primary" && values.isPressed && "from-[#261b0d] via-[#261b0d] to-[#261b0d] text-[#67604c]"
89
90
  ),
@@ -128,7 +129,7 @@ function Select({
128
129
  "span",
129
130
  {
130
131
  className: (0, import_tailwind_merge2.twMerge)(
131
- "block m-px bg-[#1e2328] px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat"
132
+ "block m-px bg-lol-gray-950 px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat"
132
133
  ),
133
134
  style: {
134
135
  backgroundPosition: "right 0.5rem center",
@@ -162,7 +163,7 @@ function Item({ className, ...props }) {
162
163
  const finalClassName = typeof className === "function" ? className(values) : className;
163
164
  return (0, import_tailwind_merge2.twMerge)(
164
165
  "px-2 py-0.5 border-b border-[#1f2123] text-[#cdbe91] text-sm font-spiegel font-bold outline-none",
165
- values.isHovered && "bg-[#1e2328] text-[#f0e6d2]",
166
+ values.isHovered && "bg-lol-gray-950 text-lol-gold-100",
166
167
  values.isPressed && "bg-[#1e232880] text-[#463714]",
167
168
  values.isFocusVisible && outlineClassName,
168
169
  values.isFocused && "",
@@ -192,9 +193,9 @@ function SearchField({
192
193
  import_react_aria_components3.SearchField,
193
194
  {
194
195
  className: (values) => {
195
- const finalClassName = typeof props.className === "function" ? props.className(values) : props.className;
196
+ const finalClassName = resolveClassname(props, values);
196
197
  return (0, import_tailwind_merge3.twMerge)(
197
- "flex flex-col outline-none [webkit-search-cancel-button]:hidden",
198
+ "flex flex-col outline-none",
198
199
  borderClassName,
199
200
  "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
200
201
  props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
@@ -202,12 +203,12 @@ function SearchField({
202
203
  );
203
204
  },
204
205
  ...props,
205
- children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
206
+ children: ({ state, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
206
207
  "div",
207
208
  {
208
209
  className: (0, import_tailwind_merge3.twMerge)(
209
- "m-px bg-[#000000] flex flex-row focus-within:from-[#071019] focus-within:to-[#20272c] focus-within:bg-gradient-to-b",
210
- props.isDisabled && "text-[#5c5b57] bg-[#1e2328]"
210
+ "m-px bg-black flex flex-row focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
211
+ props.isDisabled && "bg-lol-gray-950"
211
212
  ),
212
213
  children: [
213
214
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -217,7 +218,8 @@ function SearchField({
217
218
  className: (values) => {
218
219
  const finalClassName = resolveClassname(inputProps, values);
219
220
  return (0, import_tailwind_merge3.twMerge)(
220
- "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide",
221
+ "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide pl-6",
222
+ props.isDisabled && "text-lol-gray-500",
221
223
  finalClassName
222
224
  );
223
225
  },
@@ -230,12 +232,12 @@ function SearchField({
230
232
  }
231
233
  }
232
234
  ),
233
- state.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
235
+ state.value.length > 0 && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
234
236
  import_react_aria_components3.Button,
235
237
  {
236
238
  className: (buttonValues) => (0, import_tailwind_merge3.twMerge)(
237
239
  "font-black text-[#cdbe91] text-xs px-4",
238
- buttonValues.isHovered && "text-[#f0e6d2]",
240
+ buttonValues.isHovered && "text-lol-gold-100",
239
241
  buttonValues.isPressed && "text-[#463714]"
240
242
  ),
241
243
  children: "\u2715"
@@ -260,12 +262,7 @@ var sliderDisabled = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAB
260
262
 
261
263
  // src/components/slider.tsx
262
264
  var import_jsx_runtime4 = require("react/jsx-runtime");
263
- function Slider({
264
- className,
265
- placeholder,
266
- label,
267
- ...props
268
- }) {
265
+ function Slider({ className, label, ...props }) {
269
266
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.Slider, { ...props, className: "", children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
270
267
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between font-spiegel text-xs text-[#a09b8c] font-normal tracking-wide", children: [
271
268
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.Label, { className: "", children: label }),
@@ -275,7 +272,7 @@ function Slider({
275
272
  const left = state2.values.length === 1 ? 0 : state2.getThumbPercent(0) * 100;
276
273
  const width = state2.values.length === 1 ? state2.getThumbPercent(0) * 100 : (state2.getThumbPercent(1) - state2.getThumbPercent(0)) * 100;
277
274
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
278
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-[#1e2328]" }),
275
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-lol-gray-950" }),
279
276
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
280
277
  "div",
281
278
  {
@@ -351,7 +348,7 @@ function Switch({
351
348
  "div",
352
349
  {
353
350
  className: (0, import_tailwind_merge5.twMerge)(
354
- "relative grid h-full w-full rounded-full bg-[#1e2328] transition-colors duration-200 ease-in-out",
351
+ "relative grid h-full w-full rounded-full bg-lol-gray-950 transition-colors duration-200 ease-in-out",
355
352
  values.isPressed && "",
356
353
  values.isSelected && "bg-green-800",
357
354
  values.isSelected && values.isPressed && "bg-green-900",
@@ -369,7 +366,7 @@ function Switch({
369
366
  values.isPressed && borderPressedClassName,
370
367
  values.isDisabled && borderDisabledClassName
371
368
  ),
372
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "block h-full w-full rounded-full bg-[#1e2328]" })
369
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "block h-full w-full rounded-full bg-lol-gray-950" })
373
370
  }
374
371
  )
375
372
  }
@@ -392,7 +389,7 @@ function ProgressBar({
392
389
  ...props
393
390
  }) {
394
391
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components6.ProgressBar, { className: "flex w-56 flex-col gap-1 text-sm", ...props, children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
395
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex font-[beaufort] font-bold uppercase text-[#f0e6d2]", children: [
392
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex font-[beaufort] font-bold uppercase text-lol-gold-100", children: [
396
393
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components6.Label, { className: "flex-1 ", children: label ?? "Loading" }),
397
394
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: valueText })
398
395
  ] }),
@@ -403,15 +400,21 @@ function ProgressBar({
403
400
  borderClassName,
404
401
  "-ml-0.5 -mr-1 h-3 rounded-full p-px"
405
402
  ),
406
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge6.twMerge)("h-full w-full rounded-full bg-[#1e2328]"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
403
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
407
404
  "div",
408
405
  {
409
- className: (0, import_tailwind_merge6.twMerge)(
410
- "h-full rounded-full bg-gradient-to-r from-[#005A82] via-[#067F9B] to-[#73CCD5]"
411
- ),
412
- style: { width: `${percentage}%` }
406
+ className: (0, import_tailwind_merge6.twMerge)("h-full w-full rounded-full bg-lol-gray-950"),
407
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
408
+ "div",
409
+ {
410
+ className: (0, import_tailwind_merge6.twMerge)(
411
+ "h-full rounded-full bg-gradient-to-r from-[#005A82] via-[#067F9B] to-[#73CCD5]"
412
+ ),
413
+ style: { width: `${percentage}%` }
414
+ }
415
+ )
413
416
  }
414
- ) })
417
+ )
415
418
  }
416
419
  )
417
420
  ] }) });
@@ -509,9 +512,9 @@ function TextField({
509
512
  import_react_aria_components7.TextField,
510
513
  {
511
514
  className: (values) => {
512
- const finalClassName = typeof props.className === "function" ? props.className(values) : props.className;
515
+ const finalClassName = resolveClassname(props, values);
513
516
  return (0, import_tailwind_merge8.twMerge)(
514
- "flex flex-col outline-none [webkit-search-cancel-button]:hidden",
517
+ "flex flex-col outline-none",
515
518
  borderClassName,
516
519
  "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
517
520
  props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
@@ -524,16 +527,17 @@ function TextField({
524
527
  {
525
528
  className: (0, import_tailwind_merge8.twMerge)(
526
529
  "m-px bg-black flex flex-row focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
527
- props.isDisabled && "text-[#5c5b57] bg-lol-gray-950"
530
+ props.isDisabled && "bg-lol-gray-950"
528
531
  ),
529
532
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
530
533
  import_react_aria_components7.Input,
531
534
  {
532
535
  ...inputProps,
533
536
  className: (values) => {
534
- const finalClassName = typeof inputProps.className === "function" ? inputProps.className(values) : inputProps.className;
537
+ const finalClassName = resolveClassname(inputProps, values);
535
538
  return (0, import_tailwind_merge8.twMerge)(
536
539
  "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide",
540
+ values.isDisabled && "text-lol-gray-500",
537
541
  finalClassName
538
542
  );
539
543
  },
@@ -605,6 +609,52 @@ function Label3({ ...props }) {
605
609
  }
606
610
  );
607
611
  }
612
+
613
+ // src/components/number-field.tsx
614
+ var import_react_aria_components10 = require("react-aria-components");
615
+ var import_tailwind_merge11 = require("tailwind-merge");
616
+ var import_jsx_runtime11 = require("react/jsx-runtime");
617
+ function NumberField({
618
+ inputProps = {},
619
+ groupProps = {},
620
+ ...props
621
+ }) {
622
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.NumberField, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
623
+ import_react_aria_components10.Group,
624
+ {
625
+ ...groupProps,
626
+ className: (values) => {
627
+ const finalClassName = resolveClassname(groupProps, values);
628
+ return (0, import_tailwind_merge11.twMerge)(
629
+ "grid grid-cols-[auto_1fr_auto] outline-none gap-px p-px",
630
+ borderClassName,
631
+ "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
632
+ props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
633
+ finalClassName
634
+ );
635
+ },
636
+ children: [
637
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.Button, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "decrement", children: "-" }),
638
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
639
+ import_react_aria_components10.Input,
640
+ {
641
+ ...inputProps,
642
+ className: (values) => {
643
+ const finalClassName = resolveClassname(inputProps, values);
644
+ return (0, import_tailwind_merge11.twMerge)(
645
+ "bg-black w-full py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel",
646
+ values.isDisabled && "text-lol-gray-500 bg-lol-gray-950",
647
+ values.isFocused && "from-lol-gray-950 to-lol-gray-900 bg-gradient-to-b",
648
+ finalClassName
649
+ );
650
+ }
651
+ }
652
+ ),
653
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.Button, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "increment", children: "+" })
654
+ ]
655
+ }
656
+ ) });
657
+ }
608
658
  // Annotate the CommonJS export names for ESM import in node:
609
659
  0 && (module.exports = {
610
660
  Accordion,
@@ -614,6 +664,7 @@ function Label3({ ...props }) {
614
664
  Button,
615
665
  Item,
616
666
  Label,
667
+ NumberField,
617
668
  ProgressBar,
618
669
  Radio,
619
670
  RadioGroup,