@luminescent/ui-qwik 1.4.6-1 → 2.0.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/lib/index.qwik.cjs +65 -62
  2. package/lib/index.qwik.mjs +65 -62
  3. package/lib-types/components/elements/Blobs.d.ts +1 -1
  4. package/lib-types/components/elements/NumberInput.d.ts +2 -2
  5. package/lib-types/components/elements/Toggle.d.ts +2 -2
  6. package/package.json +12 -5
  7. package/{src/tailwind.config.js → tailwind.config.js} +38 -30
package/lib/index.qwik.cjs CHANGED
@@ -4,7 +4,7 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
4
4
  const qwik = require("@builder.io/qwik");
5
5
  const Anchor = qwik.component$(({ id }) => /* @__PURE__ */ jsxRuntime.jsx("span", {
6
6
  id,
7
- class: "block h-32 -mt-32 pointer-events-none"
7
+ class: "pointer-events-none -mt-32 block h-32"
8
8
  }));
9
9
  const blobColorClasses = {
10
10
  slate: [
@@ -142,7 +142,7 @@ const Blobs = qwik.component$(({ color = "darkgray", blur = "xl", ...props }) =>
142
142
  const colorClass = typeof color == "string" ? blobColorClasses[color] : color;
143
143
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
144
144
  class: {
145
- "motion-reduce:hidden absolute inset-0 transition-all animate-in fade-in anim-duration-[2s]": true,
145
+ "animate-in fade-in anim-duration-[2s] absolute inset-0 transition-all motion-reduce:hidden": true,
146
146
  ...props.class
147
147
  },
148
148
  style: {
@@ -152,7 +152,8 @@ const Blobs = qwik.component$(({ color = "darkgray", blur = "xl", ...props }) =>
152
152
  children: [
153
153
  /* @__PURE__ */ jsxRuntime.jsx("div", {
154
154
  class: {
155
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
155
+ "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
156
+ "blur-xs": blur === "xs",
156
157
  "blur-sm": blur === "sm",
157
158
  "blur-md": blur === "md",
158
159
  "blur-lg": blur === "lg",
@@ -163,7 +164,8 @@ const Blobs = qwik.component$(({ color = "darkgray", blur = "xl", ...props }) =>
163
164
  }),
164
165
  /* @__PURE__ */ jsxRuntime.jsx("div", {
165
166
  class: {
166
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
167
+ "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
168
+ "blur-xs": blur === "xs",
167
169
  "blur-sm": blur === "sm",
168
170
  "blur-md": blur === "md",
169
171
  "blur-lg": blur === "lg",
@@ -175,7 +177,8 @@ const Blobs = qwik.component$(({ color = "darkgray", blur = "xl", ...props }) =>
175
177
  }),
176
178
  /* @__PURE__ */ jsxRuntime.jsx("div", {
177
179
  class: {
178
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
180
+ "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
181
+ "blur-xs": blur === "xs",
179
182
  "blur-sm": blur === "sm",
180
183
  "blur-md": blur === "md",
181
184
  "blur-lg": blur === "lg",
@@ -430,8 +433,8 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
430
433
  });
431
434
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
432
435
  class: {
433
- "motion-safe:transition-all p-4 lum-bg-gray-900 flex gap-4 rounded-lg touch-none": true,
434
- "flex": true,
436
+ "lum-bg-gray-900 flex touch-none gap-4 rounded-lg p-4 motion-safe:transition-all": true,
437
+ flex: true,
435
438
  "flex-col": !horizontal,
436
439
  ...props.class
437
440
  },
@@ -445,7 +448,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
445
448
  class: "flex gap-4",
446
449
  children: [
447
450
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
448
- class: "w-[125px] h-[150px] rounded-md relative",
451
+ class: "relative h-[150px] w-[125px] rounded-md",
449
452
  style: {
450
453
  background: `linear-gradient(to right, #FFFFFF, ${store.hue.color})`
451
454
  },
@@ -455,11 +458,11 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
455
458
  "preventdefault:touchstart": true,
456
459
  children: [
457
460
  /* @__PURE__ */ jsxRuntime.jsx("div", {
458
- class: "w-[125px] h-[150px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black border border-gray-700"
461
+ class: "h-[150px] w-[125px] rounded-[0.3rem] border border-gray-700 bg-gradient-to-b from-transparent to-black"
459
462
  }),
460
463
  /* @__PURE__ */ jsxRuntime.jsx("div", {
461
464
  class: {
462
- "absolute -top-2 -left-2 w-4 h-4 border rounded-full bg-white": true,
465
+ "absolute -top-2 -left-2 h-4 w-4 rounded-full border bg-white": true,
463
466
  "border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
464
467
  "border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
465
468
  },
@@ -471,7 +474,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
471
474
  ]
472
475
  }),
473
476
  /* @__PURE__ */ jsxRuntime.jsx("div", {
474
- class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
477
+ class: "relative h-[150px] w-2 rounded-md border border-gray-700",
475
478
  style: {
476
479
  background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
477
480
  },
@@ -480,7 +483,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
480
483
  "preventdefault:mousedown": true,
481
484
  "preventdefault:touchstart": true,
482
485
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
483
- class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
486
+ class: "absolute -bottom-2 -left-[5px] h-4 w-4 rounded-full border border-white bg-[#ff0000]",
484
487
  style: {
485
488
  transform: `translateY(${-store.hue.position}px)`,
486
489
  background: store.hue.color
@@ -490,11 +493,11 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
490
493
  ]
491
494
  }),
492
495
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
493
- class: "w-[150px] flex flex-wrap gap-1 justify-between",
496
+ class: "flex w-[150px] flex-wrap justify-between gap-1",
494
497
  children: [
495
498
  showInput && /* @__PURE__ */ jsxRuntime.jsxs("div", {
496
499
  class: {
497
- "flex w-[150px] pb-3 mb-2 border-b border-b-gray-700": true,
500
+ "mb-2 flex w-[150px] border-b border-b-gray-700 pb-3": true,
498
501
  "flex-row gap-1": preview == "left",
499
502
  "flex-row-reverse gap-1": preview == "right",
500
503
  "flex-col": preview == "top",
@@ -504,8 +507,8 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
504
507
  preview != "full" && /* @__PURE__ */ jsxRuntime.jsx("div", {
505
508
  class: {
506
509
  "border border-gray-700": true,
507
- "h-full aspect-square rounded-md": preview == "left" || preview == "right",
508
- "w-full h-3": preview == "top" || preview == "bottom",
510
+ "aspect-square h-full rounded-md": preview == "left" || preview == "right",
511
+ "h-3 w-full": preview == "top" || preview == "bottom",
509
512
  "rounded-t-md": preview == "top",
510
513
  "rounded-b-md": preview == "bottom"
511
514
  },
@@ -515,9 +518,9 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
515
518
  }),
516
519
  /* @__PURE__ */ jsxRuntime.jsx("input", {
517
520
  class: {
518
- "w-full lum-input p-1 text-xs": true,
519
- "border-t-0 rounded-t-none": preview == "top",
520
- "border-b-0 rounded-b-none": preview == "bottom"
521
+ "lum-input w-full p-1 text-xs": true,
522
+ "rounded-t-none border-t-0": preview == "top",
523
+ "rounded-b-none border-b-0": preview == "bottom"
521
524
  },
522
525
  value: store.value,
523
526
  style: preview == "full" ? {
@@ -533,7 +536,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
533
536
  colors.map((color, i) => {
534
537
  return /* @__PURE__ */ jsxRuntime.jsx("button", {
535
538
  class: {
536
- "w-[1.6rem] h-[1.6rem] lum-btn p-0 border-white/30 border-2 hover:border-white": true
539
+ "lum-btn h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 hover:border-white": true
537
540
  },
538
541
  style: {
539
542
  background: color,
@@ -545,13 +548,13 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
545
548
  }, i);
546
549
  }),
547
550
  /* @__PURE__ */ jsxRuntime.jsx("button", {
548
- class: "w-[1.6rem] h-[1.6rem] lum-btn p-0.5",
551
+ class: "lum-btn h-[1.6rem] w-[1.6rem] p-0.5",
549
552
  onClick$: async () => {
550
553
  const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
551
554
  await setColor(color);
552
555
  },
553
556
  children: /* @__PURE__ */ jsxRuntime.jsx(Shuffle, {
554
- class: "fill-current text-gray-300 pl-0.5 p-0.5"
557
+ class: "fill-current p-0.5 pl-0.5 text-gray-300"
555
558
  })
556
559
  })
557
560
  ]
@@ -581,7 +584,7 @@ const Dropdown = qwik.component$((props) => {
581
584
  children: [
582
585
  /* @__PURE__ */ jsxRuntime.jsx("label", {
583
586
  for: props.id,
584
- class: "text-gray-300 pb-1 select-none",
587
+ class: "pb-1 text-gray-300 select-none",
585
588
  children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
586
589
  }),
587
590
  /* @__PURE__ */ jsxRuntime.jsx(DropdownRaw, {
@@ -598,14 +601,14 @@ const DropdownRaw = qwik.component$(({ id, values, class: Class, display, hover,
598
601
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
599
602
  class: {
600
603
  "relative touch-manipulation": true,
601
- "group": hover
604
+ group: hover
602
605
  },
603
606
  children: [
604
607
  values && /* @__PURE__ */ jsxRuntime.jsx("select", {
605
608
  ...props,
606
609
  id,
607
610
  class: {
608
- "hidden": true
611
+ hidden: true
609
612
  },
610
613
  children: values.map((value, i) => {
611
614
  return /* @__PURE__ */ jsxRuntime.jsx("option", {
@@ -632,25 +635,25 @@ const DropdownRaw = qwik.component$(({ id, values, class: Class, display, hover,
632
635
  /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {
633
636
  width: 16,
634
637
  class: {
635
- "motion-safe:transition-all ease-out": true,
636
- "transform rotate-180": store.opened,
637
- "group-hover:transform group-hover:rotate-180 duration-300 group-hover:duration-75": hover,
638
- "focus-within:transform focus-within:rotate-180 focus-within:duration-75": true
638
+ "ease-out motion-safe:transition-all": true,
639
+ "rotate-180 transform": store.opened,
640
+ "duration-300 group-hover:rotate-180 group-hover:transform group-hover:duration-75": hover,
641
+ "focus-within:rotate-180 focus-within:transform focus-within:duration-75": true
639
642
  }
640
643
  })
641
644
  ]
642
645
  }),
643
646
  /* @__PURE__ */ jsxRuntime.jsx("div", {
644
647
  class: {
645
- "transition-all ease-out absolute top-full pt-2 left-0 z-[1000] ": true,
646
- "opacity-0 scale-95 pointer-events-none": !store.opened,
647
- "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100 duration-300 group-hover:duration-75": hover,
648
- "focus-within:pointer-events-auto focus-within:opacity-100 focus-within:scale-100 focus-within:duration-75": true
648
+ "absolute top-full left-0 z-[1000] pt-2 transition-all ease-out": true,
649
+ "pointer-events-none scale-95 opacity-0": !store.opened,
650
+ "duration-300 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-hover:duration-75": hover,
651
+ "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
649
652
  },
650
653
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
651
654
  id: `lui-${id}-opts`,
652
655
  class: {
653
- "motion-safe:transition-all p-1 gap-1 lum-bg-gray-800 backdrop-blur-xl flex flex-col border max-h-72 lum-scroll overflow-auto select-none rounded-md": true
656
+ "lum-bg-gray-800 lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-md border p-1 backdrop-blur-xl select-none motion-safe:transition-all": true
654
657
  },
655
658
  children: [
656
659
  values?.map(({ name, value }, i) => {
@@ -697,7 +700,7 @@ const Link = qwik.component$((props) => {
697
700
  });
698
701
  const Header = qwik.component$(({ id, anchor, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs("h2", {
699
702
  class: {
700
- "flex gap-2 group items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
703
+ "group flex items-center gap-2 text-xl font-bold whitespace-nowrap text-white sm:text-2xl": true,
701
704
  ...props.class
702
705
  },
703
706
  children: [
@@ -711,7 +714,7 @@ const Header = qwik.component$(({ id, anchor, ...props }) => /* @__PURE__ */ jsx
711
714
  await navigator.clipboard.writeText(window.location.href);
712
715
  },
713
716
  children: /* @__PURE__ */ jsxRuntime.jsx(Link, {
714
- class: "transition-all opacity-10 group-hover:opacity-100 duration-300 group-hover:duration-75",
717
+ class: "opacity-10 transition-all duration-300 group-hover:opacity-100 group-hover:duration-75",
715
718
  width: 24
716
719
  })
717
720
  })
@@ -722,24 +725,24 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
722
725
  return /* @__PURE__ */ jsxRuntime.jsxs("nav", {
723
726
  ...props,
724
727
  class: {
725
- "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
726
- "fixed": fixed,
727
- "absolute": !fixed,
728
+ "top-0 left-0 z-50 flex w-full flex-col duration-200 motion-safe:transition-all": true,
729
+ fixed,
730
+ absolute: !fixed,
728
731
  ...props.class
729
732
  },
730
733
  children: [
731
734
  !nohamburger && /* @__PURE__ */ jsxRuntime.jsx("div", {
732
735
  class: {
733
- "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full top-full": true,
736
+ "absolute top-full flex w-full flex-col items-center px-2 motion-safe:transition-all sm:hidden": true,
734
737
  "mt-2": menu.value,
735
- "opacity-0 pointer-events-none": !menu.value,
738
+ "pointer-events-none opacity-0": !menu.value,
736
739
  "before:backdrop-blur-lg": !colorClass.includes("transparent"),
737
- 'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true
740
+ 'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lg before:drop-shadow-xl before:content-[""]': true
738
741
  },
739
742
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
740
743
  class: {
741
744
  [colorClass]: true,
742
- "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true
745
+ "flex w-full max-w-7xl flex-col gap-2 rounded-lg border px-2 py-4 motion-safe:transition-all": true
743
746
  },
744
747
  children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
745
748
  name: "mobile"
@@ -749,43 +752,43 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
749
752
  /* @__PURE__ */ jsxRuntime.jsx("div", {
750
753
  class: {
751
754
  [colorClass]: !floating,
752
- "!border-t-0 !border-x-0": !floating,
755
+ "!border-x-0 !border-t-0": !floating,
753
756
  "before:backdrop-blur-lg": !colorClass.includes("transparent") && !floating,
754
- 'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10': !floating,
755
- "relative mt-2 mx-2": floating
757
+ 'before:absolute before:-z-10 before:h-full before:w-full before:drop-shadow-xl before:content-[""]': !floating,
758
+ "relative mx-2 mt-2": floating
756
759
  },
757
760
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
758
761
  class: {
759
- "flex justify-evenly w-full mx-auto px-2 max-w-7xl": true,
762
+ "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
760
763
  [colorClass]: floating,
761
- "border rounded-lg": floating,
764
+ "rounded-lg border": floating,
762
765
  "before:backdrop-blur-lg": !colorClass.includes("transparent") && floating,
763
- 'before:absolute before:content-[""] before:w-full before:max-w-7xl before:h-full before:rounded-lg before:drop-shadow-xl before:-z-10': floating
766
+ 'before:absolute before:-z-10 before:h-full before:w-full before:max-w-7xl before:rounded-lg before:drop-shadow-xl before:content-[""]': floating
764
767
  },
765
768
  children: [
766
769
  /* @__PURE__ */ jsxRuntime.jsx("div", {
767
- class: "flex items-center flex-1 gap-2 py-2 justify-start",
770
+ class: "flex flex-1 items-center justify-start gap-2 py-2",
768
771
  children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
769
772
  name: "start"
770
773
  })
771
774
  }),
772
775
  /* @__PURE__ */ jsxRuntime.jsx("div", {
773
- class: "flex items-center flex-1 gap-2 py-2 justify-center",
776
+ class: "flex flex-1 items-center justify-center gap-2 py-2",
774
777
  children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
775
778
  name: "center"
776
779
  })
777
780
  }),
778
781
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
779
- class: "flex items-center flex-1 gap-2 py-2 justify-end",
782
+ class: "flex flex-1 items-center justify-end gap-2 py-2",
780
783
  children: [
781
784
  /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
782
785
  name: "end"
783
786
  }),
784
787
  !nohamburger && /* @__PURE__ */ jsxRuntime.jsx("button", {
785
- class: "lum-btn p-2 lum-bg-transparent sm:hidden",
788
+ class: "lum-btn lum-bg-transparent p-2 sm:hidden",
786
789
  onClick$: () => menu.value = !menu.value,
787
790
  children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
788
- class: "w-6 h-6",
791
+ class: "h-6 w-6",
789
792
  fill: "none",
790
793
  stroke: "currentColor",
791
794
  viewBox: "0 0 24 24",
@@ -844,7 +847,7 @@ const NumberInput = qwik.component$((props) => {
844
847
  children: [
845
848
  /* @__PURE__ */ jsxRuntime.jsx("label", {
846
849
  for: props.id,
847
- class: "text-gray-300 pb-1 select-none",
850
+ class: "pb-1 text-gray-300 select-none",
848
851
  children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
849
852
  }),
850
853
  /* @__PURE__ */ jsxRuntime.jsx(NumberInputRaw, {
@@ -867,7 +870,7 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
867
870
  `);
868
871
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
869
872
  class: {
870
- "flex gap-2 text-gray-50 touch-manipulation": true
873
+ "flex touch-manipulation gap-2 text-gray-50": true
871
874
  },
872
875
  children: [
873
876
  /* @__PURE__ */ jsxRuntime.jsx("button", {
@@ -1116,25 +1119,25 @@ const toggleOffColorClasses = {
1116
1119
  const Toggle = qwik.component$(({ checkbox, round, center, label, onColor = "blue", offColor = "darkgray", ...props }) => {
1117
1120
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
1118
1121
  class: {
1119
- "flex gap-3 items-center touch-manipulation": true,
1122
+ "flex touch-manipulation items-center gap-3": true,
1120
1123
  "justify-center": center
1121
1124
  },
1122
1125
  children: [
1123
1126
  /* @__PURE__ */ jsxRuntime.jsxs("label", {
1124
- class: "inline-flex relative items-center cursor-pointer",
1127
+ class: "relative inline-flex cursor-pointer items-center",
1125
1128
  children: [
1126
1129
  /* @__PURE__ */ jsxRuntime.jsx("input", {
1127
1130
  type: "checkbox",
1128
1131
  ...props,
1129
1132
  class: {
1130
- "sr-only peer": true,
1133
+ "peer sr-only": true,
1131
1134
  ...props.class
1132
1135
  }
1133
1136
  }),
1134
1137
  /* @__PURE__ */ jsxRuntime.jsx("div", {
1135
1138
  class: {
1136
- "motion-safe:transition duration-300 hover:duration-75 ease-out h-7 peer border hover:shadow-lg": true,
1137
- "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:h-5 after:w-5 after:motion-safe:transition-all after:duration-300 after:hover:duration-75 after:ease-out": true,
1139
+ "peer h-7 border duration-300 ease-out hover:shadow-lg hover:duration-75 motion-safe:transition": true,
1140
+ "after:absolute after:top-[4px] after:left-[4px] after:h-5 after:w-5 after:border after:duration-300 after:ease-out after:content-[''] after:hover:duration-75 after:motion-safe:transition-all": true,
1138
1141
  "rounded-md after:rounded-[0.2rem]": !round,
1139
1142
  "rounded-full after:rounded-full": round,
1140
1143
  "w-12 peer-checked:after:translate-x-full": !checkbox,
@@ -1149,7 +1152,7 @@ const Toggle = qwik.component$(({ checkbox, round, center, label, onColor = "blu
1149
1152
  }),
1150
1153
  label && /* @__PURE__ */ jsxRuntime.jsx("label", {
1151
1154
  for: props.id,
1152
- class: "text-gray-300 flex gap-2 select-none",
1155
+ class: "flex gap-2 text-gray-300 select-none",
1153
1156
  children: label
1154
1157
  })
1155
1158
  ]
package/lib/index.qwik.mjs CHANGED
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
2
2
  import { component$, useStore, $, Slot, useSignal, useStyles$ } from "@builder.io/qwik";
3
3
  const Anchor = component$(({ id }) => /* @__PURE__ */ jsx("span", {
4
4
  id,
5
- class: "block h-32 -mt-32 pointer-events-none"
5
+ class: "pointer-events-none -mt-32 block h-32"
6
6
  }));
7
7
  const blobColorClasses = {
8
8
  slate: [
@@ -140,7 +140,7 @@ const Blobs = component$(({ color = "darkgray", blur = "xl", ...props }) => {
140
140
  const colorClass = typeof color == "string" ? blobColorClasses[color] : color;
141
141
  return /* @__PURE__ */ jsxs("div", {
142
142
  class: {
143
- "motion-reduce:hidden absolute inset-0 transition-all animate-in fade-in anim-duration-[2s]": true,
143
+ "animate-in fade-in anim-duration-[2s] absolute inset-0 transition-all motion-reduce:hidden": true,
144
144
  ...props.class
145
145
  },
146
146
  style: {
@@ -150,7 +150,8 @@ const Blobs = component$(({ color = "darkgray", blur = "xl", ...props }) => {
150
150
  children: [
151
151
  /* @__PURE__ */ jsx("div", {
152
152
  class: {
153
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
153
+ "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
154
+ "blur-xs": blur === "xs",
154
155
  "blur-sm": blur === "sm",
155
156
  "blur-md": blur === "md",
156
157
  "blur-lg": blur === "lg",
@@ -161,7 +162,8 @@ const Blobs = component$(({ color = "darkgray", blur = "xl", ...props }) => {
161
162
  }),
162
163
  /* @__PURE__ */ jsx("div", {
163
164
  class: {
164
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
165
+ "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
166
+ "blur-xs": blur === "xs",
165
167
  "blur-sm": blur === "sm",
166
168
  "blur-md": blur === "md",
167
169
  "blur-lg": blur === "lg",
@@ -173,7 +175,8 @@ const Blobs = component$(({ color = "darkgray", blur = "xl", ...props }) => {
173
175
  }),
174
176
  /* @__PURE__ */ jsx("div", {
175
177
  class: {
176
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
178
+ "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
179
+ "blur-xs": blur === "xs",
177
180
  "blur-sm": blur === "sm",
178
181
  "blur-md": blur === "md",
179
182
  "blur-lg": blur === "lg",
@@ -428,8 +431,8 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
428
431
  });
429
432
  return /* @__PURE__ */ jsxs("div", {
430
433
  class: {
431
- "motion-safe:transition-all p-4 lum-bg-gray-900 flex gap-4 rounded-lg touch-none": true,
432
- "flex": true,
434
+ "lum-bg-gray-900 flex touch-none gap-4 rounded-lg p-4 motion-safe:transition-all": true,
435
+ flex: true,
433
436
  "flex-col": !horizontal,
434
437
  ...props.class
435
438
  },
@@ -443,7 +446,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
443
446
  class: "flex gap-4",
444
447
  children: [
445
448
  /* @__PURE__ */ jsxs("div", {
446
- class: "w-[125px] h-[150px] rounded-md relative",
449
+ class: "relative h-[150px] w-[125px] rounded-md",
447
450
  style: {
448
451
  background: `linear-gradient(to right, #FFFFFF, ${store.hue.color})`
449
452
  },
@@ -453,11 +456,11 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
453
456
  "preventdefault:touchstart": true,
454
457
  children: [
455
458
  /* @__PURE__ */ jsx("div", {
456
- class: "w-[125px] h-[150px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black border border-gray-700"
459
+ class: "h-[150px] w-[125px] rounded-[0.3rem] border border-gray-700 bg-gradient-to-b from-transparent to-black"
457
460
  }),
458
461
  /* @__PURE__ */ jsx("div", {
459
462
  class: {
460
- "absolute -top-2 -left-2 w-4 h-4 border rounded-full bg-white": true,
463
+ "absolute -top-2 -left-2 h-4 w-4 rounded-full border bg-white": true,
461
464
  "border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
462
465
  "border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
463
466
  },
@@ -469,7 +472,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
469
472
  ]
470
473
  }),
471
474
  /* @__PURE__ */ jsx("div", {
472
- class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
475
+ class: "relative h-[150px] w-2 rounded-md border border-gray-700",
473
476
  style: {
474
477
  background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
475
478
  },
@@ -478,7 +481,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
478
481
  "preventdefault:mousedown": true,
479
482
  "preventdefault:touchstart": true,
480
483
  children: /* @__PURE__ */ jsx("div", {
481
- class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
484
+ class: "absolute -bottom-2 -left-[5px] h-4 w-4 rounded-full border border-white bg-[#ff0000]",
482
485
  style: {
483
486
  transform: `translateY(${-store.hue.position}px)`,
484
487
  background: store.hue.color
@@ -488,11 +491,11 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
488
491
  ]
489
492
  }),
490
493
  /* @__PURE__ */ jsxs("div", {
491
- class: "w-[150px] flex flex-wrap gap-1 justify-between",
494
+ class: "flex w-[150px] flex-wrap justify-between gap-1",
492
495
  children: [
493
496
  showInput && /* @__PURE__ */ jsxs("div", {
494
497
  class: {
495
- "flex w-[150px] pb-3 mb-2 border-b border-b-gray-700": true,
498
+ "mb-2 flex w-[150px] border-b border-b-gray-700 pb-3": true,
496
499
  "flex-row gap-1": preview == "left",
497
500
  "flex-row-reverse gap-1": preview == "right",
498
501
  "flex-col": preview == "top",
@@ -502,8 +505,8 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
502
505
  preview != "full" && /* @__PURE__ */ jsx("div", {
503
506
  class: {
504
507
  "border border-gray-700": true,
505
- "h-full aspect-square rounded-md": preview == "left" || preview == "right",
506
- "w-full h-3": preview == "top" || preview == "bottom",
508
+ "aspect-square h-full rounded-md": preview == "left" || preview == "right",
509
+ "h-3 w-full": preview == "top" || preview == "bottom",
507
510
  "rounded-t-md": preview == "top",
508
511
  "rounded-b-md": preview == "bottom"
509
512
  },
@@ -513,9 +516,9 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
513
516
  }),
514
517
  /* @__PURE__ */ jsx("input", {
515
518
  class: {
516
- "w-full lum-input p-1 text-xs": true,
517
- "border-t-0 rounded-t-none": preview == "top",
518
- "border-b-0 rounded-b-none": preview == "bottom"
519
+ "lum-input w-full p-1 text-xs": true,
520
+ "rounded-t-none border-t-0": preview == "top",
521
+ "rounded-b-none border-b-0": preview == "bottom"
519
522
  },
520
523
  value: store.value,
521
524
  style: preview == "full" ? {
@@ -531,7 +534,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
531
534
  colors.map((color, i) => {
532
535
  return /* @__PURE__ */ jsx("button", {
533
536
  class: {
534
- "w-[1.6rem] h-[1.6rem] lum-btn p-0 border-white/30 border-2 hover:border-white": true
537
+ "lum-btn h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 hover:border-white": true
535
538
  },
536
539
  style: {
537
540
  background: color,
@@ -543,13 +546,13 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
543
546
  }, i);
544
547
  }),
545
548
  /* @__PURE__ */ jsx("button", {
546
- class: "w-[1.6rem] h-[1.6rem] lum-btn p-0.5",
549
+ class: "lum-btn h-[1.6rem] w-[1.6rem] p-0.5",
547
550
  onClick$: async () => {
548
551
  const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
549
552
  await setColor(color);
550
553
  },
551
554
  children: /* @__PURE__ */ jsx(Shuffle, {
552
- class: "fill-current text-gray-300 pl-0.5 p-0.5"
555
+ class: "fill-current p-0.5 pl-0.5 text-gray-300"
553
556
  })
554
557
  })
555
558
  ]
@@ -579,7 +582,7 @@ const Dropdown = component$((props) => {
579
582
  children: [
580
583
  /* @__PURE__ */ jsx("label", {
581
584
  for: props.id,
582
- class: "text-gray-300 pb-1 select-none",
585
+ class: "pb-1 text-gray-300 select-none",
583
586
  children: /* @__PURE__ */ jsx(Slot, {})
584
587
  }),
585
588
  /* @__PURE__ */ jsx(DropdownRaw, {
@@ -596,14 +599,14 @@ const DropdownRaw = component$(({ id, values, class: Class, display, hover, ...p
596
599
  return /* @__PURE__ */ jsxs("div", {
597
600
  class: {
598
601
  "relative touch-manipulation": true,
599
- "group": hover
602
+ group: hover
600
603
  },
601
604
  children: [
602
605
  values && /* @__PURE__ */ jsx("select", {
603
606
  ...props,
604
607
  id,
605
608
  class: {
606
- "hidden": true
609
+ hidden: true
607
610
  },
608
611
  children: values.map((value, i) => {
609
612
  return /* @__PURE__ */ jsx("option", {
@@ -630,25 +633,25 @@ const DropdownRaw = component$(({ id, values, class: Class, display, hover, ...p
630
633
  /* @__PURE__ */ jsx(ChevronDown, {
631
634
  width: 16,
632
635
  class: {
633
- "motion-safe:transition-all ease-out": true,
634
- "transform rotate-180": store.opened,
635
- "group-hover:transform group-hover:rotate-180 duration-300 group-hover:duration-75": hover,
636
- "focus-within:transform focus-within:rotate-180 focus-within:duration-75": true
636
+ "ease-out motion-safe:transition-all": true,
637
+ "rotate-180 transform": store.opened,
638
+ "duration-300 group-hover:rotate-180 group-hover:transform group-hover:duration-75": hover,
639
+ "focus-within:rotate-180 focus-within:transform focus-within:duration-75": true
637
640
  }
638
641
  })
639
642
  ]
640
643
  }),
641
644
  /* @__PURE__ */ jsx("div", {
642
645
  class: {
643
- "transition-all ease-out absolute top-full pt-2 left-0 z-[1000] ": true,
644
- "opacity-0 scale-95 pointer-events-none": !store.opened,
645
- "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100 duration-300 group-hover:duration-75": hover,
646
- "focus-within:pointer-events-auto focus-within:opacity-100 focus-within:scale-100 focus-within:duration-75": true
646
+ "absolute top-full left-0 z-[1000] pt-2 transition-all ease-out": true,
647
+ "pointer-events-none scale-95 opacity-0": !store.opened,
648
+ "duration-300 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-hover:duration-75": hover,
649
+ "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
647
650
  },
648
651
  children: /* @__PURE__ */ jsxs("div", {
649
652
  id: `lui-${id}-opts`,
650
653
  class: {
651
- "motion-safe:transition-all p-1 gap-1 lum-bg-gray-800 backdrop-blur-xl flex flex-col border max-h-72 lum-scroll overflow-auto select-none rounded-md": true
654
+ "lum-bg-gray-800 lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-md border p-1 backdrop-blur-xl select-none motion-safe:transition-all": true
652
655
  },
653
656
  children: [
654
657
  values?.map(({ name, value }, i) => {
@@ -695,7 +698,7 @@ const Link = component$((props) => {
695
698
  });
696
699
  const Header = component$(({ id, anchor, ...props }) => /* @__PURE__ */ jsxs("h2", {
697
700
  class: {
698
- "flex gap-2 group items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
701
+ "group flex items-center gap-2 text-xl font-bold whitespace-nowrap text-white sm:text-2xl": true,
699
702
  ...props.class
700
703
  },
701
704
  children: [
@@ -709,7 +712,7 @@ const Header = component$(({ id, anchor, ...props }) => /* @__PURE__ */ jsxs("h2
709
712
  await navigator.clipboard.writeText(window.location.href);
710
713
  },
711
714
  children: /* @__PURE__ */ jsx(Link, {
712
- class: "transition-all opacity-10 group-hover:opacity-100 duration-300 group-hover:duration-75",
715
+ class: "opacity-10 transition-all duration-300 group-hover:opacity-100 group-hover:duration-75",
713
716
  width: 24
714
717
  })
715
718
  })
@@ -720,24 +723,24 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-gra
720
723
  return /* @__PURE__ */ jsxs("nav", {
721
724
  ...props,
722
725
  class: {
723
- "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
724
- "fixed": fixed,
725
- "absolute": !fixed,
726
+ "top-0 left-0 z-50 flex w-full flex-col duration-200 motion-safe:transition-all": true,
727
+ fixed,
728
+ absolute: !fixed,
726
729
  ...props.class
727
730
  },
728
731
  children: [
729
732
  !nohamburger && /* @__PURE__ */ jsx("div", {
730
733
  class: {
731
- "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full top-full": true,
734
+ "absolute top-full flex w-full flex-col items-center px-2 motion-safe:transition-all sm:hidden": true,
732
735
  "mt-2": menu.value,
733
- "opacity-0 pointer-events-none": !menu.value,
736
+ "pointer-events-none opacity-0": !menu.value,
734
737
  "before:backdrop-blur-lg": !colorClass.includes("transparent"),
735
- 'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true
738
+ 'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lg before:drop-shadow-xl before:content-[""]': true
736
739
  },
737
740
  children: /* @__PURE__ */ jsx("div", {
738
741
  class: {
739
742
  [colorClass]: true,
740
- "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true
743
+ "flex w-full max-w-7xl flex-col gap-2 rounded-lg border px-2 py-4 motion-safe:transition-all": true
741
744
  },
742
745
  children: /* @__PURE__ */ jsx(Slot, {
743
746
  name: "mobile"
@@ -747,43 +750,43 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-gra
747
750
  /* @__PURE__ */ jsx("div", {
748
751
  class: {
749
752
  [colorClass]: !floating,
750
- "!border-t-0 !border-x-0": !floating,
753
+ "!border-x-0 !border-t-0": !floating,
751
754
  "before:backdrop-blur-lg": !colorClass.includes("transparent") && !floating,
752
- 'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10': !floating,
753
- "relative mt-2 mx-2": floating
755
+ 'before:absolute before:-z-10 before:h-full before:w-full before:drop-shadow-xl before:content-[""]': !floating,
756
+ "relative mx-2 mt-2": floating
754
757
  },
755
758
  children: /* @__PURE__ */ jsxs("div", {
756
759
  class: {
757
- "flex justify-evenly w-full mx-auto px-2 max-w-7xl": true,
760
+ "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
758
761
  [colorClass]: floating,
759
- "border rounded-lg": floating,
762
+ "rounded-lg border": floating,
760
763
  "before:backdrop-blur-lg": !colorClass.includes("transparent") && floating,
761
- 'before:absolute before:content-[""] before:w-full before:max-w-7xl before:h-full before:rounded-lg before:drop-shadow-xl before:-z-10': floating
764
+ 'before:absolute before:-z-10 before:h-full before:w-full before:max-w-7xl before:rounded-lg before:drop-shadow-xl before:content-[""]': floating
762
765
  },
763
766
  children: [
764
767
  /* @__PURE__ */ jsx("div", {
765
- class: "flex items-center flex-1 gap-2 py-2 justify-start",
768
+ class: "flex flex-1 items-center justify-start gap-2 py-2",
766
769
  children: /* @__PURE__ */ jsx(Slot, {
767
770
  name: "start"
768
771
  })
769
772
  }),
770
773
  /* @__PURE__ */ jsx("div", {
771
- class: "flex items-center flex-1 gap-2 py-2 justify-center",
774
+ class: "flex flex-1 items-center justify-center gap-2 py-2",
772
775
  children: /* @__PURE__ */ jsx(Slot, {
773
776
  name: "center"
774
777
  })
775
778
  }),
776
779
  /* @__PURE__ */ jsxs("div", {
777
- class: "flex items-center flex-1 gap-2 py-2 justify-end",
780
+ class: "flex flex-1 items-center justify-end gap-2 py-2",
778
781
  children: [
779
782
  /* @__PURE__ */ jsx(Slot, {
780
783
  name: "end"
781
784
  }),
782
785
  !nohamburger && /* @__PURE__ */ jsx("button", {
783
- class: "lum-btn p-2 lum-bg-transparent sm:hidden",
786
+ class: "lum-btn lum-bg-transparent p-2 sm:hidden",
784
787
  onClick$: () => menu.value = !menu.value,
785
788
  children: /* @__PURE__ */ jsx("svg", {
786
- class: "w-6 h-6",
789
+ class: "h-6 w-6",
787
790
  fill: "none",
788
791
  stroke: "currentColor",
789
792
  viewBox: "0 0 24 24",
@@ -842,7 +845,7 @@ const NumberInput = component$((props) => {
842
845
  children: [
843
846
  /* @__PURE__ */ jsx("label", {
844
847
  for: props.id,
845
- class: "text-gray-300 pb-1 select-none",
848
+ class: "pb-1 text-gray-300 select-none",
846
849
  children: /* @__PURE__ */ jsx(Slot, {})
847
850
  }),
848
851
  /* @__PURE__ */ jsx(NumberInputRaw, {
@@ -865,7 +868,7 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
865
868
  `);
866
869
  return /* @__PURE__ */ jsxs("div", {
867
870
  class: {
868
- "flex gap-2 text-gray-50 touch-manipulation": true
871
+ "flex touch-manipulation gap-2 text-gray-50": true
869
872
  },
870
873
  children: [
871
874
  /* @__PURE__ */ jsx("button", {
@@ -1114,25 +1117,25 @@ const toggleOffColorClasses = {
1114
1117
  const Toggle = component$(({ checkbox, round, center, label, onColor = "blue", offColor = "darkgray", ...props }) => {
1115
1118
  return /* @__PURE__ */ jsxs("div", {
1116
1119
  class: {
1117
- "flex gap-3 items-center touch-manipulation": true,
1120
+ "flex touch-manipulation items-center gap-3": true,
1118
1121
  "justify-center": center
1119
1122
  },
1120
1123
  children: [
1121
1124
  /* @__PURE__ */ jsxs("label", {
1122
- class: "inline-flex relative items-center cursor-pointer",
1125
+ class: "relative inline-flex cursor-pointer items-center",
1123
1126
  children: [
1124
1127
  /* @__PURE__ */ jsx("input", {
1125
1128
  type: "checkbox",
1126
1129
  ...props,
1127
1130
  class: {
1128
- "sr-only peer": true,
1131
+ "peer sr-only": true,
1129
1132
  ...props.class
1130
1133
  }
1131
1134
  }),
1132
1135
  /* @__PURE__ */ jsx("div", {
1133
1136
  class: {
1134
- "motion-safe:transition duration-300 hover:duration-75 ease-out h-7 peer border hover:shadow-lg": true,
1135
- "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:h-5 after:w-5 after:motion-safe:transition-all after:duration-300 after:hover:duration-75 after:ease-out": true,
1137
+ "peer h-7 border duration-300 ease-out hover:shadow-lg hover:duration-75 motion-safe:transition": true,
1138
+ "after:absolute after:top-[4px] after:left-[4px] after:h-5 after:w-5 after:border after:duration-300 after:ease-out after:content-[''] after:hover:duration-75 after:motion-safe:transition-all": true,
1136
1139
  "rounded-md after:rounded-[0.2rem]": !round,
1137
1140
  "rounded-full after:rounded-full": round,
1138
1141
  "w-12 peer-checked:after:translate-x-full": !checkbox,
@@ -1147,7 +1150,7 @@ const Toggle = component$(({ checkbox, round, center, label, onColor = "blue", o
1147
1150
  }),
1148
1151
  label && /* @__PURE__ */ jsx("label", {
1149
1152
  for: props.id,
1150
- class: "text-gray-300 flex gap-2 select-none",
1153
+ class: "flex gap-2 text-gray-300 select-none",
1151
1154
  children: label
1152
1155
  })
1153
1156
  ]
package/lib-types/components/elements/Blobs.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface BlobProps {
6
6
  [key: string]: string | number;
7
7
  };
8
8
  color?: keyof typeof blobColorClasses | [string, string, string];
9
- blur?: 'sm' | 'md' | 'lg' | 'xl';
9
+ blur?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
10
10
  }
11
11
  export declare const blobColorClasses: {
12
12
  slate: string[];
package/lib-types/components/elements/NumberInput.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { PropsOf, QRL } from '@builder.io/qwik';
2
- interface NumberInputRawProps extends Omit<(PropsOf<'input'> & {
2
+ interface NumberInputRawProps extends Omit<PropsOf<'input'> & {
3
3
  type: 'number';
4
- }), 'class' | 'type'> {
4
+ }, 'class' | 'type'> {
5
5
  onDecrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, inputElement?: HTMLInputElement) => void>;
6
6
  onIncrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, inputElement?: HTMLInputElement) => void>;
7
7
  input?: boolean;
package/lib-types/components/elements/Toggle.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { JSXOutput, PropsOf } from '@builder.io/qwik';
2
- interface ToggleProps extends Omit<(PropsOf<'input'> & {
2
+ interface ToggleProps extends Omit<PropsOf<'input'> & {
3
3
  type: 'checkbox';
4
- }), 'class' | 'bind:checked' | 'type' | 'children'> {
4
+ }, 'class' | 'bind:checked' | 'type' | 'children'> {
5
5
  class?: {
6
6
  [key: string]: boolean;
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui-qwik",
3
- "version": "1.4.6-1",
3
+ "version": "2.0.0",
4
4
  "description": "Luminescent UI library",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",
@@ -11,15 +11,18 @@
11
11
  "require": "./lib/index.qwik.cjs",
12
12
  "types": "./lib-types/index.d.ts"
13
13
  },
14
- "./config": "./src/tailwind.config.js"
14
+ "./config": "./tailwind.config.js"
15
15
  },
16
16
  "files": [
17
17
  "lib",
18
18
  "lib-types",
19
- "src/tailwind.config.js"
19
+ "tailwind.config.js"
20
20
  ],
21
21
  "engines": {
22
- "node": ">=15.0.0"
22
+ "node": ">=23.11.0",
23
+ "npm": "please-use-pnpm",
24
+ "yarn": "please-use-pnpm",
25
+ "pnpm": ">=10.10.0"
23
26
  },
24
27
  "license": "AGPL-3.0-or-later",
25
28
  "private": false,
@@ -40,6 +43,8 @@
40
43
  "eslint": "^9.26.0",
41
44
  "eslint-plugin-qwik": "^1.13.0",
42
45
  "globals": "^16.0.0",
46
+ "prettier": "^3.5.3",
47
+ "prettier-plugin-tailwindcss": "^0.6.11",
43
48
  "tailwindcss": "4.1.5",
44
49
  "typescript": "5.8.3",
45
50
  "typescript-eslint": "^8.31.1",
@@ -47,7 +52,7 @@
47
52
  "vite-tsconfig-paths": "^5.1.4"
48
53
  },
49
54
  "peerDependencies": {
50
- "@luminescent/ui": "1.4.6-1"
55
+ "@luminescent/ui": "2.0.0"
51
56
  },
52
57
  "scripts": {
53
58
  "build": "qwik build",
@@ -55,6 +60,8 @@
55
60
  "build.types": "tsc --emitDeclarationOnly",
56
61
  "dev": "vite --mode ssr",
57
62
  "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
63
+ "fmt": "prettier --write .",
64
+ "fmt.check": "prettier --check .",
58
65
  "lint": "eslint \"src/**/*.ts*\"",
59
66
  "start": "vite --open --mode ssr",
60
67
  "test": "echo \"No test specified\" && exit 0",
package/{src/tailwind.config.js → tailwind.config.js} RENAMED
@@ -3,29 +3,45 @@ function getBlobKeyFrame() {
3
3
  const translateYPercentages = [0, 12, 25, 38, 50];
4
4
  const scaleValues = [0.8, 1, 1.2, 1.4];
5
5
 
6
- const translateX0Key = Math.floor(Math.random() * translateXPercentages.length);
6
+ const translateX0Key = Math.floor(
7
+ Math.random() * translateXPercentages.length,
8
+ );
7
9
  const translateX0 = translateXPercentages[translateX0Key];
8
10
  translateXPercentages.splice(translateX0Key, 1);
9
- const translateX1Key = Math.floor(Math.random() * translateXPercentages.length);
11
+ const translateX1Key = Math.floor(
12
+ Math.random() * translateXPercentages.length,
13
+ );
10
14
  const translateX1 = translateXPercentages[translateX1Key];
11
15
  translateXPercentages.splice(translateX1Key, 1);
12
- const translateX2Key = Math.floor(Math.random() * translateXPercentages.length);
16
+ const translateX2Key = Math.floor(
17
+ Math.random() * translateXPercentages.length,
18
+ );
13
19
  const translateX2 = translateXPercentages[translateX2Key];
14
20
  translateXPercentages.splice(translateX2Key, 1);
15
- const translateX3Key = Math.floor(Math.random() * translateXPercentages.length);
21
+ const translateX3Key = Math.floor(
22
+ Math.random() * translateXPercentages.length,
23
+ );
16
24
  const translateX3 = translateXPercentages[translateX3Key];
17
25
  translateXPercentages.splice(translateX3Key, 1);
18
26
 
19
- const translateY0Key = Math.floor(Math.random() * translateYPercentages.length);
27
+ const translateY0Key = Math.floor(
28
+ Math.random() * translateYPercentages.length,
29
+ );
20
30
  const translateY0 = translateYPercentages[translateY0Key];
21
31
  translateYPercentages.splice(translateY0Key, 1);
22
- const translateY1Key = Math.floor(Math.random() * translateYPercentages.length);
32
+ const translateY1Key = Math.floor(
33
+ Math.random() * translateYPercentages.length,
34
+ );
23
35
  const translateY1 = translateYPercentages[translateY1Key];
24
36
  translateYPercentages.splice(translateY1Key, 1);
25
- const translateY2Key = Math.floor(Math.random() * translateYPercentages.length);
37
+ const translateY2Key = Math.floor(
38
+ Math.random() * translateYPercentages.length,
39
+ );
26
40
  const translateY2 = translateYPercentages[translateY2Key];
27
41
  translateYPercentages.splice(translateY2Key, 1);
28
- const translateY3Key = Math.floor(Math.random() * translateYPercentages.length);
42
+ const translateY3Key = Math.floor(
43
+ Math.random() * translateYPercentages.length,
44
+ );
29
45
  const translateY3 = translateYPercentages[translateY3Key];
30
46
  translateYPercentages.splice(translateY3Key, 1);
31
47
 
@@ -35,34 +51,26 @@ function getBlobKeyFrame() {
35
51
  const scale3 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
36
52
 
37
53
  const keyframe = {
38
- '0%, 100%': { transform: `translate(${translateX0}cqw, ${translateY0}cqh) scale(${scale0})` },
39
- '25%': { transform: `translate(${translateX1}cqw, ${translateY1}cqh) scale(${scale1})` },
40
- '50%': { transform: `translate(${translateX2}cqw, ${translateY2}cqh) scale(${scale2})` },
41
- '75%': { transform: `translate(${translateX3}cqw, ${translateY3}cqh) scale(${scale3})` },
54
+ '0%, 100%': {
55
+ transform: `translate(${translateX0}cqw, ${translateY0}cqh) scale(${scale0})`,
56
+ },
57
+ '25%': {
58
+ transform: `translate(${translateX1}cqw, ${translateY1}cqh) scale(${scale1})`,
59
+ },
60
+ '50%': {
61
+ transform: `translate(${translateX2}cqw, ${translateY2}cqh) scale(${scale2})`,
62
+ },
63
+ '75%': {
64
+ transform: `translate(${translateX3}cqw, ${translateY3}cqh) scale(${scale3})`,
65
+ },
42
66
  };
43
67
 
44
68
  return keyframe;
45
69
  }
46
70
 
47
- const luminescent = {
48
- 50: 'hsl(286deg, 65%, 97%)',
49
- 100: 'hsl(286deg, 60%, 95%)',
50
- 200: 'hsl(286deg, 55%, 90%)',
51
- 300: 'hsl(286deg, 50%, 82%)',
52
- 400: 'hsl(286deg, 45%, 75%)',
53
- 500: 'hsl(286deg, 40%, 60%)',
54
- 600: 'hsl(286deg, 35%, 51%)',
55
- 700: 'hsl(286deg, 30%, 42%)',
56
- 800: 'hsl(286deg, 25%, 35%)',
57
- 900: 'hsl(286deg, 20%, 30%)',
58
- 950: 'hsl(286deg, 15%, 17%)',
59
- };
60
-
61
- module.exports = {
62
- content: ['./node_modules/@luminescent/ui-qwik/**/*.{mjs,cjs}'],
71
+ export default {
63
72
  theme: {
64
73
  extend: {
65
- colors: { luminescent },
66
74
  animation: {
67
75
  blob: 'blob 15s infinite',
68
76
  blob1: 'blob1 15s infinite',
@@ -83,4 +91,4 @@ module.exports = {
83
91
  },
84
92
  },
85
93
  },
86
- };
94
+ };