@lolmath/ui 1.3.0 → 2.0.1
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/index.cjs +126 -59
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +12 -3
- package/dist/index.d.ts +12 -3
- package/dist/index.js +125 -59
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -34,6 +34,7 @@ __export(src_exports, {
|
|
|
34
34
|
SearchField: () => SearchField,
|
|
35
35
|
Select: () => Select,
|
|
36
36
|
Slider: () => Slider,
|
|
37
|
+
SliderLabel: () => SliderLabel,
|
|
37
38
|
Switch: () => Switch,
|
|
38
39
|
TextField: () => TextField
|
|
39
40
|
});
|
|
@@ -179,8 +180,8 @@ var import_react_aria_components3 = require("react-aria-components");
|
|
|
179
180
|
var import_tailwind_merge3 = require("tailwind-merge");
|
|
180
181
|
|
|
181
182
|
// src/utilities/resolve-classname.ts
|
|
182
|
-
function resolveClassname(
|
|
183
|
-
return typeof
|
|
183
|
+
function resolveClassname(className, values) {
|
|
184
|
+
return typeof className === "function" ? className(values) : className;
|
|
184
185
|
}
|
|
185
186
|
|
|
186
187
|
// src/components/search-field.tsx
|
|
@@ -193,7 +194,7 @@ function SearchField({
|
|
|
193
194
|
import_react_aria_components3.SearchField,
|
|
194
195
|
{
|
|
195
196
|
className: (values) => {
|
|
196
|
-
const finalClassName = resolveClassname(props, values);
|
|
197
|
+
const finalClassName = resolveClassname(props.className, values);
|
|
197
198
|
return (0, import_tailwind_merge3.twMerge)(
|
|
198
199
|
"flex flex-col outline-none",
|
|
199
200
|
borderClassName,
|
|
@@ -216,7 +217,10 @@ function SearchField({
|
|
|
216
217
|
{
|
|
217
218
|
...inputProps,
|
|
218
219
|
className: (values) => {
|
|
219
|
-
const finalClassName = resolveClassname(
|
|
220
|
+
const finalClassName = resolveClassname(
|
|
221
|
+
inputProps.className,
|
|
222
|
+
values
|
|
223
|
+
);
|
|
220
224
|
return (0, import_tailwind_merge3.twMerge)(
|
|
221
225
|
"bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide pl-6",
|
|
222
226
|
props.isDisabled && "text-lol-gray-500",
|
|
@@ -262,58 +266,114 @@ var sliderDisabled = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAB
|
|
|
262
266
|
|
|
263
267
|
// src/components/slider.tsx
|
|
264
268
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
265
|
-
function Slider({
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
269
|
+
function Slider({
|
|
270
|
+
children,
|
|
271
|
+
sliderThumbProps = {},
|
|
272
|
+
sliderTrackProps = {},
|
|
273
|
+
sliderTrackBackgroundClassName,
|
|
274
|
+
sliderTrackForegroundClassName,
|
|
275
|
+
...props
|
|
276
|
+
}) {
|
|
277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
278
|
+
import_react_aria_components4.Slider,
|
|
279
|
+
{
|
|
280
|
+
...props,
|
|
281
|
+
className: (values) => {
|
|
282
|
+
const resolvedClassName = resolveClassname(props.className, values);
|
|
283
|
+
return (0, import_tailwind_merge4.twMerge)("", resolvedClassName);
|
|
284
|
+
},
|
|
285
|
+
children: (values) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
286
|
+
typeof children === "function" ? children(values) : children,
|
|
276
287
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
277
|
-
|
|
288
|
+
import_react_aria_components4.SliderTrack,
|
|
278
289
|
{
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
style: { left: `${left}%`, width: `${width}%` }
|
|
287
|
-
}
|
|
288
|
-
),
|
|
289
|
-
state2.values.map((_, i) => {
|
|
290
|
-
let zIndex = state2.getThumbPercent(i === 1 ? 0 : 1) === (i === 1 ? 0 : 1) ? 2 : void 0;
|
|
291
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
292
|
-
import_react_aria_components4.SliderThumb,
|
|
293
|
-
{
|
|
294
|
-
index: i,
|
|
295
|
-
className: (0, import_tailwind_merge4.twMerge)(
|
|
296
|
-
"bg-contain h-7 w-7 top-[50%] outline-none",
|
|
297
|
-
"[background-image:var(--normal)]",
|
|
298
|
-
state2.isDisabled ? "[background-image:var(--disabled)]" : [
|
|
299
|
-
state2.isThumbDragging(i) && "[background-image:var(--active)]",
|
|
300
|
-
!state2.isThumbDragging(0) && !state2.isThumbDragging(1) && "group-hover:[background-image:var(--hover)]"
|
|
301
|
-
]
|
|
302
|
-
),
|
|
303
|
-
style: {
|
|
304
|
-
"--normal": sliderNormal,
|
|
305
|
-
"--hover": sliderHover,
|
|
306
|
-
"--active": sliderActive,
|
|
307
|
-
"--disabled": sliderDisabled,
|
|
308
|
-
zIndex
|
|
309
|
-
}
|
|
290
|
+
...sliderTrackProps,
|
|
291
|
+
className: (sliderTrackRenderProps) => {
|
|
292
|
+
const resolvedClassName = resolveClassname(
|
|
293
|
+
sliderTrackProps.className,
|
|
294
|
+
sliderTrackRenderProps
|
|
295
|
+
);
|
|
296
|
+
return (0, import_tailwind_merge4.twMerge)("relative w-full h-7 group", resolvedClassName);
|
|
310
297
|
},
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
298
|
+
children: (values2) => {
|
|
299
|
+
const left = values2.state.values.length === 1 ? 0 : values2.state.getThumbPercent(0) * 100;
|
|
300
|
+
const width = values2.state.values.length === 1 ? values2.state.getThumbPercent(0) * 100 : (values2.state.getThumbPercent(1) - values2.state.getThumbPercent(0)) * 100;
|
|
301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
302
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
303
|
+
"div",
|
|
304
|
+
{
|
|
305
|
+
className: (0, import_tailwind_merge4.twMerge)(
|
|
306
|
+
"absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-lol-gray-950",
|
|
307
|
+
resolveClassname(sliderTrackBackgroundClassName, values2)
|
|
308
|
+
)
|
|
309
|
+
}
|
|
310
|
+
),
|
|
311
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
312
|
+
"div",
|
|
313
|
+
{
|
|
314
|
+
className: (0, import_tailwind_merge4.twMerge)(
|
|
315
|
+
"absolute h-0.5 top-[50%] transform translate-y-[-50%] from-[#463714] to-[#695625] bg-gradient-to-r",
|
|
316
|
+
values2.state.isDisabled ? "from-transparent via-transparent to-transparent bg-[#5C5B57]" : [
|
|
317
|
+
"group-hover:from-[#785a28] group-hover:via-[#c89b3c] group-hover:to-[#c8aa6e]",
|
|
318
|
+
"group-active:from-[#695625] group-active:via-[#463714] group-active:to-[#463714]"
|
|
319
|
+
],
|
|
320
|
+
resolveClassname(sliderTrackForegroundClassName, values2)
|
|
321
|
+
),
|
|
322
|
+
style: { left: `${left}%`, width: `${width}%` }
|
|
323
|
+
}
|
|
324
|
+
),
|
|
325
|
+
values2.state.values.map((_, i) => {
|
|
326
|
+
let zIndex = values2.state.getThumbPercent(i === 1 ? 0 : 1) === (i === 1 ? 0 : 1) ? 2 : void 0;
|
|
327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
328
|
+
import_react_aria_components4.SliderThumb,
|
|
329
|
+
{
|
|
330
|
+
index: i,
|
|
331
|
+
...sliderThumbProps,
|
|
332
|
+
className: (sliderThumbRenderProps) => {
|
|
333
|
+
const resolvedClassName = resolveClassname(
|
|
334
|
+
sliderThumbProps.className,
|
|
335
|
+
sliderThumbRenderProps
|
|
336
|
+
);
|
|
337
|
+
return (0, import_tailwind_merge4.twMerge)(
|
|
338
|
+
"bg-contain h-7 w-7 top-[50%] outline-none",
|
|
339
|
+
"[background-image:var(--normal)]",
|
|
340
|
+
sliderThumbRenderProps.isDisabled ? "[background-image:var(--disabled)]" : [
|
|
341
|
+
sliderThumbRenderProps.state.isThumbDragging(
|
|
342
|
+
i
|
|
343
|
+
) && "[background-image:var(--active)]",
|
|
344
|
+
!sliderThumbRenderProps.state.isThumbDragging(
|
|
345
|
+
0
|
|
346
|
+
) && !sliderThumbRenderProps.state.isThumbDragging(
|
|
347
|
+
1
|
|
348
|
+
) && "group-hover:[background-image:var(--hover)]"
|
|
349
|
+
],
|
|
350
|
+
resolvedClassName
|
|
351
|
+
);
|
|
352
|
+
},
|
|
353
|
+
style: {
|
|
354
|
+
"--normal": sliderNormal,
|
|
355
|
+
"--hover": sliderHover,
|
|
356
|
+
"--active": sliderActive,
|
|
357
|
+
"--disabled": sliderDisabled,
|
|
358
|
+
zIndex
|
|
359
|
+
}
|
|
360
|
+
},
|
|
361
|
+
i
|
|
362
|
+
) });
|
|
363
|
+
})
|
|
364
|
+
] });
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
)
|
|
368
|
+
] })
|
|
369
|
+
}
|
|
370
|
+
);
|
|
371
|
+
}
|
|
372
|
+
function SliderLabel({ children }) {
|
|
373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between font-spiegel text-xs text-lol-gray-300 font-normal tracking-wide", children: [
|
|
374
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.Label, { className: "", children }),
|
|
375
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.SliderOutput, { className: "", children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" \u2013 ") })
|
|
376
|
+
] });
|
|
317
377
|
}
|
|
318
378
|
|
|
319
379
|
// src/components/switch.tsx
|
|
@@ -512,7 +572,7 @@ function TextField({
|
|
|
512
572
|
import_react_aria_components7.TextField,
|
|
513
573
|
{
|
|
514
574
|
className: (values) => {
|
|
515
|
-
const finalClassName = resolveClassname(props, values);
|
|
575
|
+
const finalClassName = resolveClassname(props.className, values);
|
|
516
576
|
return (0, import_tailwind_merge8.twMerge)(
|
|
517
577
|
"flex flex-col outline-none",
|
|
518
578
|
borderClassName,
|
|
@@ -534,7 +594,10 @@ function TextField({
|
|
|
534
594
|
{
|
|
535
595
|
...inputProps,
|
|
536
596
|
className: (values) => {
|
|
537
|
-
const finalClassName = resolveClassname(
|
|
597
|
+
const finalClassName = resolveClassname(
|
|
598
|
+
inputProps.className,
|
|
599
|
+
values
|
|
600
|
+
);
|
|
538
601
|
return (0, import_tailwind_merge8.twMerge)(
|
|
539
602
|
"bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide",
|
|
540
603
|
values.isDisabled && "text-lol-gray-500",
|
|
@@ -560,7 +623,7 @@ function RadioGroup({ ...props }) {
|
|
|
560
623
|
{
|
|
561
624
|
...props,
|
|
562
625
|
className: (values) => {
|
|
563
|
-
const finalClassName = resolveClassname(props, values);
|
|
626
|
+
const finalClassName = resolveClassname(props.className, values);
|
|
564
627
|
return (0, import_tailwind_merge9.twMerge)("flex flex-col items-start", finalClassName);
|
|
565
628
|
}
|
|
566
629
|
}
|
|
@@ -572,7 +635,7 @@ function Radio({ ...props }) {
|
|
|
572
635
|
{
|
|
573
636
|
...props,
|
|
574
637
|
className: (values) => {
|
|
575
|
-
const finalClassName = resolveClassname(props, values);
|
|
638
|
+
const finalClassName = resolveClassname(props.className, values);
|
|
576
639
|
return (0, import_tailwind_merge9.twMerge)(
|
|
577
640
|
"text-lol-gold-300 font-spiegel text-xs font-normal py-2 bg-no-repeat bg-[length:18px] bg-left pl-6 pr-4",
|
|
578
641
|
values.isDisabled ? "text-lol-gray-500" : values.isHovered || values.isSelected ? "text-lol-gold-50" : "",
|
|
@@ -624,7 +687,7 @@ function NumberField({
|
|
|
624
687
|
{
|
|
625
688
|
...groupProps,
|
|
626
689
|
className: (values) => {
|
|
627
|
-
const finalClassName = resolveClassname(groupProps, values);
|
|
690
|
+
const finalClassName = resolveClassname(groupProps.className, values);
|
|
628
691
|
return (0, import_tailwind_merge11.twMerge)(
|
|
629
692
|
"grid grid-cols-[auto_1fr_auto] outline-none gap-px p-px",
|
|
630
693
|
borderClassName,
|
|
@@ -640,7 +703,10 @@ function NumberField({
|
|
|
640
703
|
{
|
|
641
704
|
...inputProps,
|
|
642
705
|
className: (values) => {
|
|
643
|
-
const finalClassName = resolveClassname(
|
|
706
|
+
const finalClassName = resolveClassname(
|
|
707
|
+
inputProps.className,
|
|
708
|
+
values
|
|
709
|
+
);
|
|
644
710
|
return (0, import_tailwind_merge11.twMerge)(
|
|
645
711
|
"bg-black w-full py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel",
|
|
646
712
|
values.isDisabled && "text-lol-gray-500 bg-lol-gray-950",
|
|
@@ -671,6 +737,7 @@ function NumberField({
|
|
|
671
737
|
SearchField,
|
|
672
738
|
Select,
|
|
673
739
|
Slider,
|
|
740
|
+
SliderLabel,
|
|
674
741
|
Switch,
|
|
675
742
|
TextField
|
|
676
743
|
});
|