@luminescent/ui 0.7.6 → 0.7.7

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 (3) hide show
  1. package/lib/index.qwik.cjs +48 -14
  2. package/lib/index.qwik.mjs +48 -14
  3. package/package.json +1 -1
package/lib/index.qwik.cjs CHANGED
@@ -25,7 +25,7 @@ const sizeClasses = {
25
25
  lg: "text-base px-6 py-3 rounded-lg gap-3",
26
26
  xl: "text-base px-8 py-4 rounded-xl gap-4"
27
27
  };
28
- const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95";
28
+ const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95 whitespace-nowrap";
29
29
  const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
30
30
  const props1 = qwik._restProps(props, [
31
31
  "color",
@@ -271,7 +271,7 @@ const TextInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlined
271
271
  class: "flex flex-col"
272
272
  }, [
273
273
  /* @__PURE__ */ qwik._jsxQ("label", null, {
274
- class: "pb-2",
274
+ class: "text-gray-300 pb-1",
275
275
  for: qwik._fnSignal((p0) => p0.id, [
276
276
  props
277
277
  ], "p0.id")
@@ -579,7 +579,20 @@ class ColorPicker {
579
579
  this.$colors = this._document.createElement("div");
580
580
  this.$colors.className = "color-picker-colors";
581
581
  this.$el.appendChild(this.$colors);
582
- this.$colors.innerHTML = options.colors.map((color) => `<div class="color-picker-color" style="background: ${color}"></div>`).join("");
582
+ options.colors.forEach((color) => {
583
+ const $color = this._document.createElement("button");
584
+ $color.className = "color-picker-color";
585
+ $color.style.background = `${color}`;
586
+ $color.addEventListener("mousedown", (e) => {
587
+ this.setColor(color);
588
+ e.preventDefault();
589
+ });
590
+ $color.addEventListener("touchstart", (e) => {
591
+ this.setColor(color);
592
+ e.preventDefault();
593
+ });
594
+ this.$colors.appendChild($color);
595
+ });
583
596
  }
584
597
  this.setSize(options.width || 175, options.height || 150);
585
598
  this.setColor(options.color);
@@ -868,12 +881,19 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
868
881
  }
869
882
 
870
883
  .color-picker-color {
884
+ transition: all 0.2s;
871
885
  height: 25px;
872
886
  width: 25px;
873
887
  border-radius: 5px;
874
888
  position: relative;
875
889
  background: red;
876
890
  border: 1px solid rgb(31 41 55);
891
+ cursor: pointer;
892
+ }
893
+
894
+ .color-picker-color:hover {
895
+ border: 1px solid white;
896
+ transform: scale(1.1);
877
897
  }
878
898
 
879
899
  .color-picker-hSelector {
@@ -892,15 +912,16 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
892
912
  /* @__PURE__ */ qwik._jsxQ("label", {
893
913
  for: qwik._wrapSignal(props1, "id")
894
914
  }, {
895
- class: "mb-2 flex"
915
+ class: "text-gray-300 pb-1 flex"
896
916
  }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "0s_0"), 1, null),
897
917
  /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
898
918
  ...props1,
899
919
  get value() {
900
920
  return props.value ?? "#000000";
901
921
  },
902
- onBlur$: /* @__PURE__ */ qwik.inlinedQrl(() => {
922
+ onBlur$: /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
903
923
  const [props12] = qwik.useLexicalScope();
924
+ console.log(event);
904
925
  const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
905
926
  pickerDiv.classList.add("opacity-0", "pointer-events-none", "scale-95");
906
927
  }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
@@ -915,7 +936,19 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
915
936
  const picker = new ColorPicker({
916
937
  el: pickerDiv,
917
938
  color: props2.value ?? "#000000",
918
- colors: props2.presetColors,
939
+ colors: [
940
+ "#FAEDCB",
941
+ "#C9E4DE",
942
+ "#C6DEF1",
943
+ "#DBCDF0",
944
+ "#F2C6DE",
945
+ "#FCD05C",
946
+ "#5FE2C5",
947
+ "#4498DB",
948
+ "#9863E7",
949
+ "#E43A96",
950
+ ...props2.presetColors ?? []
951
+ ],
919
952
  width: 150,
920
953
  height: 150
921
954
  });
@@ -1000,8 +1033,9 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
1000
1033
  qwik._jsxBranch();
1001
1034
  let Component = /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
1002
1035
  children: /* @__PURE__ */ qwik._jsxQ("h2", null, {
1003
- class: "flex flex-1 items-center font-bold text-2xl"
1036
+ class: "flex gap-2 flex-1 items-center font-bold text-2xl whitespace-nowrap"
1004
1037
  }, [
1038
+ /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "dL_0"),
1005
1039
  props.id && /* @__PURE__ */ qwik._jsxC(Anchor, {
1006
1040
  get id() {
1007
1041
  return props.id;
@@ -1011,8 +1045,7 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
1011
1045
  props
1012
1046
  ], "p0.id")
1013
1047
  }
1014
- }, 3, "dL_0"),
1015
- /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "dL_1")
1048
+ }, 3, "dL_1")
1016
1049
  ], 1, null)
1017
1050
  }, 1, "dL_2");
1018
1051
  if (props.subheader)
@@ -1021,7 +1054,7 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
1021
1054
  }, [
1022
1055
  Component,
1023
1056
  /* @__PURE__ */ qwik._jsxQ("h3", null, {
1024
- class: "flex flex-1 items-center text-gray-400 text-sm"
1057
+ class: "flex items-center text-gray-400 text-sm"
1025
1058
  }, qwik._fnSignal((p0) => p0.subheader, [
1026
1059
  props
1027
1060
  ], "p0.subheader"), 3, null)
@@ -1091,7 +1124,7 @@ const NumberInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
1091
1124
  class: "flex flex-col"
1092
1125
  }, [
1093
1126
  /* @__PURE__ */ qwik._jsxQ("label", null, {
1094
- class: "pb-2",
1127
+ class: "text-gray-300 pb-1",
1095
1128
  for: qwik._fnSignal((p0) => p0.id, [
1096
1129
  props
1097
1130
  ], "p0.id")
@@ -1177,6 +1210,7 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
1177
1210
  ...props1,
1178
1211
  class: {
1179
1212
  [InputClasses]: true,
1213
+ "text-center": true,
1180
1214
  ...props1.class
1181
1215
  }
1182
1216
  }, {
@@ -1256,7 +1290,7 @@ const SelectInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
1256
1290
  class: "flex flex-col"
1257
1291
  }, [
1258
1292
  /* @__PURE__ */ qwik._jsxQ("label", null, {
1259
- class: "pb-2",
1293
+ class: "text-gray-300 pb-1",
1260
1294
  for: qwik._fnSignal((p0) => p0.id, [
1261
1295
  props
1262
1296
  ], "p0.id")
@@ -1412,7 +1446,7 @@ const TextArea = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
1412
1446
  class: "flex flex-col"
1413
1447
  }, [
1414
1448
  /* @__PURE__ */ qwik._jsxQ("label", null, {
1415
- class: "pb-2",
1449
+ class: "text-gray-300 pb-1",
1416
1450
  for: qwik._fnSignal((p0) => p0.id, [
1417
1451
  props
1418
1452
  ], "p0.id")
@@ -1491,7 +1525,7 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
1491
1525
  props.label && /* @__PURE__ */ qwik._jsxQ("label", {
1492
1526
  for: qwik._wrapSignal(props1, "id")
1493
1527
  }, {
1494
- class: "text-gray-100"
1528
+ class: "text-gray-300"
1495
1529
  }, qwik._fnSignal((p0) => p0.label, [
1496
1530
  props
1497
1531
  ], "p0.label"), 3, "yu_0")
package/lib/index.qwik.mjs CHANGED
@@ -23,7 +23,7 @@ const sizeClasses = {
23
23
  lg: "text-base px-6 py-3 rounded-lg gap-3",
24
24
  xl: "text-base px-8 py-4 rounded-xl gap-4"
25
25
  };
26
- const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95";
26
+ const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95 whitespace-nowrap";
27
27
  const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
28
28
  const props1 = _restProps(props, [
29
29
  "color",
@@ -269,7 +269,7 @@ const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
269
269
  class: "flex flex-col"
270
270
  }, [
271
271
  /* @__PURE__ */ _jsxQ("label", null, {
272
- class: "pb-2",
272
+ class: "text-gray-300 pb-1",
273
273
  for: _fnSignal((p0) => p0.id, [
274
274
  props
275
275
  ], "p0.id")
@@ -577,7 +577,20 @@ class ColorPicker {
577
577
  this.$colors = this._document.createElement("div");
578
578
  this.$colors.className = "color-picker-colors";
579
579
  this.$el.appendChild(this.$colors);
580
- this.$colors.innerHTML = options.colors.map((color) => `<div class="color-picker-color" style="background: ${color}"></div>`).join("");
580
+ options.colors.forEach((color) => {
581
+ const $color = this._document.createElement("button");
582
+ $color.className = "color-picker-color";
583
+ $color.style.background = `${color}`;
584
+ $color.addEventListener("mousedown", (e) => {
585
+ this.setColor(color);
586
+ e.preventDefault();
587
+ });
588
+ $color.addEventListener("touchstart", (e) => {
589
+ this.setColor(color);
590
+ e.preventDefault();
591
+ });
592
+ this.$colors.appendChild($color);
593
+ });
581
594
  }
582
595
  this.setSize(options.width || 175, options.height || 150);
583
596
  this.setColor(options.color);
@@ -866,12 +879,19 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
866
879
  }
867
880
 
868
881
  .color-picker-color {
882
+ transition: all 0.2s;
869
883
  height: 25px;
870
884
  width: 25px;
871
885
  border-radius: 5px;
872
886
  position: relative;
873
887
  background: red;
874
888
  border: 1px solid rgb(31 41 55);
889
+ cursor: pointer;
890
+ }
891
+
892
+ .color-picker-color:hover {
893
+ border: 1px solid white;
894
+ transform: scale(1.1);
875
895
  }
876
896
 
877
897
  .color-picker-hSelector {
@@ -890,15 +910,16 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
890
910
  /* @__PURE__ */ _jsxQ("label", {
891
911
  for: _wrapSignal(props1, "id")
892
912
  }, {
893
- class: "mb-2 flex"
913
+ class: "text-gray-300 pb-1 flex"
894
914
  }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
895
915
  /* @__PURE__ */ _jsxC(TextInputRaw, {
896
916
  ...props1,
897
917
  get value() {
898
918
  return props.value ?? "#000000";
899
919
  },
900
- onBlur$: /* @__PURE__ */ inlinedQrl(() => {
920
+ onBlur$: /* @__PURE__ */ inlinedQrl((event, element) => {
901
921
  const [props12] = useLexicalScope();
922
+ console.log(event);
902
923
  const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
903
924
  pickerDiv.classList.add("opacity-0", "pointer-events-none", "scale-95");
904
925
  }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
@@ -913,7 +934,19 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
913
934
  const picker = new ColorPicker({
914
935
  el: pickerDiv,
915
936
  color: props2.value ?? "#000000",
916
- colors: props2.presetColors,
937
+ colors: [
938
+ "#FAEDCB",
939
+ "#C9E4DE",
940
+ "#C6DEF1",
941
+ "#DBCDF0",
942
+ "#F2C6DE",
943
+ "#FCD05C",
944
+ "#5FE2C5",
945
+ "#4498DB",
946
+ "#9863E7",
947
+ "#E43A96",
948
+ ...props2.presetColors ?? []
949
+ ],
917
950
  width: 150,
918
951
  height: 150
919
952
  });
@@ -998,8 +1031,9 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
998
1031
  _jsxBranch();
999
1032
  let Component = /* @__PURE__ */ _jsxC(Fragment, {
1000
1033
  children: /* @__PURE__ */ _jsxQ("h2", null, {
1001
- class: "flex flex-1 items-center font-bold text-2xl"
1034
+ class: "flex gap-2 flex-1 items-center font-bold text-2xl whitespace-nowrap"
1002
1035
  }, [
1036
+ /* @__PURE__ */ _jsxC(Slot, null, 3, "dL_0"),
1003
1037
  props.id && /* @__PURE__ */ _jsxC(Anchor, {
1004
1038
  get id() {
1005
1039
  return props.id;
@@ -1009,8 +1043,7 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
1009
1043
  props
1010
1044
  ], "p0.id")
1011
1045
  }
1012
- }, 3, "dL_0"),
1013
- /* @__PURE__ */ _jsxC(Slot, null, 3, "dL_1")
1046
+ }, 3, "dL_1")
1014
1047
  ], 1, null)
1015
1048
  }, 1, "dL_2");
1016
1049
  if (props.subheader)
@@ -1019,7 +1052,7 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
1019
1052
  }, [
1020
1053
  Component,
1021
1054
  /* @__PURE__ */ _jsxQ("h3", null, {
1022
- class: "flex flex-1 items-center text-gray-400 text-sm"
1055
+ class: "flex items-center text-gray-400 text-sm"
1023
1056
  }, _fnSignal((p0) => p0.subheader, [
1024
1057
  props
1025
1058
  ], "p0.subheader"), 3, null)
@@ -1089,7 +1122,7 @@ const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
1089
1122
  class: "flex flex-col"
1090
1123
  }, [
1091
1124
  /* @__PURE__ */ _jsxQ("label", null, {
1092
- class: "pb-2",
1125
+ class: "text-gray-300 pb-1",
1093
1126
  for: _fnSignal((p0) => p0.id, [
1094
1127
  props
1095
1128
  ], "p0.id")
@@ -1175,6 +1208,7 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
1175
1208
  ...props1,
1176
1209
  class: {
1177
1210
  [InputClasses]: true,
1211
+ "text-center": true,
1178
1212
  ...props1.class
1179
1213
  }
1180
1214
  }, {
@@ -1254,7 +1288,7 @@ const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
1254
1288
  class: "flex flex-col"
1255
1289
  }, [
1256
1290
  /* @__PURE__ */ _jsxQ("label", null, {
1257
- class: "pb-2",
1291
+ class: "text-gray-300 pb-1",
1258
1292
  for: _fnSignal((p0) => p0.id, [
1259
1293
  props
1260
1294
  ], "p0.id")
@@ -1410,7 +1444,7 @@ const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
1410
1444
  class: "flex flex-col"
1411
1445
  }, [
1412
1446
  /* @__PURE__ */ _jsxQ("label", null, {
1413
- class: "pb-2",
1447
+ class: "text-gray-300 pb-1",
1414
1448
  for: _fnSignal((p0) => p0.id, [
1415
1449
  props
1416
1450
  ], "p0.id")
@@ -1489,7 +1523,7 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
1489
1523
  props.label && /* @__PURE__ */ _jsxQ("label", {
1490
1524
  for: _wrapSignal(props1, "id")
1491
1525
  }, {
1492
- class: "text-gray-100"
1526
+ class: "text-gray-300"
1493
1527
  }, _fnSignal((p0) => p0.label, [
1494
1528
  props
1495
1529
  ], "p0.label"), 3, "yu_0")
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "0.7.6",
3
+ "version": "0.7.7",
4
4
  "description": "Luminescent UI library",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",