@luminescent/ui 0.18.0 → 0.18.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 (3) hide show
  1. package/lib/index.qwik.cjs +206 -173
  2. package/lib/index.qwik.mjs +207 -174
  3. package/package.json +1 -1
package/lib/index.qwik.cjs CHANGED
@@ -797,8 +797,9 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
797
797
  });
798
798
  const setColor = /* @__PURE__ */ qwik.inlinedQrl((color) => {
799
799
  const [maxHue2, props2, store2, width2] = qwik.useLexicalScope();
800
- const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
801
- store2.value = rgbToHex(hsvToRgb(hsv));
800
+ if (!color.match(/^#[0-9A-F]{6}$/i)) return;
801
+ const number = hexStringToNumber(color);
802
+ const hsv = rgbToHsv(hexNumberToRgb(number));
802
803
  store2.hue.position = hsv.h * maxHue2;
803
804
  store2.hue.color = rgbToHex(hsvToRgb({
804
805
  h: hsv.h,
@@ -807,6 +808,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
807
808
  }));
808
809
  store2.sPosition = hsv.s * width2;
809
810
  store2.bPosition = (1 - hsv.v) * maxHue2;
811
+ store2.value = color;
810
812
  props2.onInput$?.(store2.value);
811
813
  }, "ColorPicker_component_setColor_QqVIlZ9HOqM", [
812
814
  maxHue,
@@ -888,35 +890,30 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
888
890
  }, "ColorPicker_component_sbMouseDown_lP7vsjR4o9U", [
889
891
  sbChange
890
892
  ]);
891
- qwik.useOn("change", /* @__PURE__ */ qwik.inlinedQrl(() => {
892
- const [props2, setColor2] = qwik.useLexicalScope();
893
- if (!props2.id)
894
- return;
895
- const inputElement = document.getElementById(props2.id);
896
- if (!inputElement)
897
- return;
898
- setColor2(inputElement.value);
899
- }, "ColorPicker_component_useOn_U80lAP6qXKg", [
900
- props,
901
- setColor
902
- ]));
903
893
  return /* @__PURE__ */ qwik._jsxQ("div", {
904
894
  class: {
905
- "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-6 rounded-lg border border-gray-700 touch-none": true,
895
+ "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-4 rounded-lg border border-gray-700 touch-none": true,
906
896
  "flex": true,
907
897
  "flex-col": !props.horizontal,
908
898
  ...props1.class
909
899
  }
910
900
  }, {
911
- id: qwik._fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
901
+ id: qwik._fnSignal((p0) => p0.id, [
912
902
  props
913
- ], "p0.id?`${p0.id}-picker`:undefined")
903
+ ], "p0.id"),
904
+ onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
905
+ const [setColor2] = qwik.useLexicalScope();
906
+ if (!el.dataset.value) return;
907
+ setColor2(el.dataset.value);
908
+ }, "ColorPicker_component_div_onInput_61AfRqNB51A", [
909
+ setColor
910
+ ])
914
911
  }, [
915
912
  /* @__PURE__ */ qwik._jsxQ("div", null, {
916
913
  class: "flex gap-4"
917
914
  }, [
918
915
  /* @__PURE__ */ qwik._jsxQ("div", null, {
919
- class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
916
+ class: "w-[125px] h-[150px] rounded-md relative",
920
917
  style: qwik._fnSignal((p0) => ({
921
918
  background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
922
919
  }), [
@@ -928,7 +925,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
928
925
  onTouchStart$: sbMouseDown
929
926
  }, [
930
927
  /* @__PURE__ */ qwik._jsxQ("div", null, {
931
- class: "w-[123px] h-[149px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black"
928
+ class: "w-[125px] h-[150px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black border border-gray-700"
932
929
  }, null, 3, null),
933
930
  /* @__PURE__ */ qwik._jsxQ("div", {
934
931
  class: {
@@ -967,45 +964,72 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
967
964
  /* @__PURE__ */ qwik._jsxQ("div", null, {
968
965
  class: "w-[150px] flex flex-wrap gap-1 justify-between"
969
966
  }, [
970
- (props.showInput ?? true) && /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
967
+ (props.showInput ?? true) && /* @__PURE__ */ qwik._jsxQ("div", {
971
968
  class: {
972
- "w-[150px] mb-4": true
973
- },
974
- get value() {
975
- return store.value;
976
- },
977
- style: (props.preview ?? "left") == "full" ? {
978
- backgroundColor: `${store.value}`,
979
- color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
980
- } : (props.preview ?? "left") == "left" ? {
981
- borderLeft: `35px solid ${store.value}`
982
- } : (props.preview ?? "left") == "right" ? {
983
- borderRight: `35px solid ${store.value}`
984
- } : (props.preview ?? "left") == "top" ? {
985
- borderTop: `10px solid ${store.value}`
986
- } : (props.preview ?? "left") == "bottom" ? {
987
- borderBottom: `10px solid ${store.value}`
988
- } : {},
989
- get color() {
990
- return props.color ?? "gray";
991
- },
992
- onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
993
- const [setColor2] = qwik.useLexicalScope();
994
- setColor2(el.value);
995
- }, "ColorPicker_component_div_div_TextInputRaw_onInput_nhKRhFMCxTk", [
996
- setColor
997
- ]),
998
- [qwik._IMMUTABLE]: {
999
- class: qwik._IMMUTABLE,
1000
- value: qwik._fnSignal((p0) => p0.value, [
1001
- store
1002
- ], "p0.value"),
1003
- color: qwik._fnSignal((p0) => p0.color ?? "gray", [
1004
- props
1005
- ], 'p0.color??"gray"'),
1006
- onInput$: qwik._IMMUTABLE
969
+ "flex w-[150px] pb-3 mb-2 border-b border-b-gray-700": true,
970
+ "flex-row gap-1": (props.preview ?? "left") == "left",
971
+ "flex-row-reverse gap-1": (props.preview ?? "left") == "right",
972
+ "flex-col": (props.preview ?? "left") == "top",
973
+ "flex-col-reverse": (props.preview ?? "left") == "bottom"
1007
974
  }
1008
- }, 3, "sj_0"),
975
+ }, null, [
976
+ (props.preview ?? "left") != "full" && /* @__PURE__ */ qwik._jsxQ("div", {
977
+ class: {
978
+ "border border-gray-700": true,
979
+ "h-full aspect-square rounded-md": (props.preview ?? "left") == "left" || (props.preview ?? "left") == "right",
980
+ "w-full h-3": (props.preview ?? "left") == "top" || (props.preview ?? "left") == "bottom",
981
+ "rounded-t-md": (props.preview ?? "left") == "top",
982
+ "rounded-b-md": (props.preview ?? "left") == "bottom"
983
+ }
984
+ }, {
985
+ style: qwik._fnSignal((p0) => ({
986
+ backgroundColor: `${p0.value}`
987
+ }), [
988
+ store
989
+ ], "{backgroundColor:`${p0.value}`}")
990
+ }, null, 3, "sj_0"),
991
+ /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
992
+ get class() {
993
+ return {
994
+ "w-full": true,
995
+ "border-t-0 rounded-t-none": (props.preview ?? "left") == "top",
996
+ "border-b-0 rounded-b-none": (props.preview ?? "left") == "bottom"
997
+ };
998
+ },
999
+ get value() {
1000
+ return store.value;
1001
+ },
1002
+ style: (props.preview ?? "left") == "full" ? {
1003
+ backgroundColor: `${store.value}`,
1004
+ color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
1005
+ } : {},
1006
+ get color() {
1007
+ return props.color ?? "gray";
1008
+ },
1009
+ onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
1010
+ const [setColor2] = qwik.useLexicalScope();
1011
+ setColor2(el.value);
1012
+ }, "ColorPicker_component_div_div_div_TextInputRaw_onInput_tZr31WTZETw", [
1013
+ setColor
1014
+ ]),
1015
+ [qwik._IMMUTABLE]: {
1016
+ class: qwik._fnSignal((p0) => ({
1017
+ "w-full": true,
1018
+ "border-t-0 rounded-t-none": (p0.preview ?? "left") == "top",
1019
+ "border-b-0 rounded-b-none": (p0.preview ?? "left") == "bottom"
1020
+ }), [
1021
+ props
1022
+ ], '{"w-full":true,"border-t-0 rounded-t-none":(p0.preview??"left")=="top","border-b-0 rounded-b-none":(p0.preview??"left")=="bottom"}'),
1023
+ value: qwik._fnSignal((p0) => p0.value, [
1024
+ store
1025
+ ], "p0.value"),
1026
+ color: qwik._fnSignal((p0) => p0.color ?? "gray", [
1027
+ props
1028
+ ], 'p0.color??"gray"'),
1029
+ onInput$: qwik._IMMUTABLE
1030
+ }
1031
+ }, 3, "sj_1")
1032
+ ], 1, "sj_2"),
1009
1033
  (props.colors ?? [
1010
1034
  "#FAEDCB",
1011
1035
  "#C9E4DE",
@@ -1054,14 +1078,15 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
1054
1078
  [qwik._IMMUTABLE]: {
1055
1079
  class: qwik._IMMUTABLE
1056
1080
  }
1057
- }, 3, "sj_1"), 1, null)
1081
+ }, 3, "sj_3"), 1, null)
1058
1082
  ], 1, null)
1059
- ], 1, "sj_2");
1083
+ ], 1, "sj_4");
1060
1084
  }, "ColorPicker_component_D1OSB6ycLrI"));
1061
1085
  const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
1062
1086
  const props1 = qwik._restProps(props, [
1063
1087
  "onInput$",
1064
1088
  "value",
1089
+ "color",
1065
1090
  "colors",
1066
1091
  "preview",
1067
1092
  "horizontal",
@@ -1079,76 +1104,98 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
1079
1104
  }, {
1080
1105
  class: "text-gray-300 pb-1 flex select-none"
1081
1106
  }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "0s_0"), 1, null),
1082
- /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
1083
- get class() {
1084
- return {
1085
- "w-full": true,
1086
- ...props.class
1087
- };
1088
- },
1089
- ...props1,
1090
- get value() {
1091
- return props.value ?? "#000000";
1092
- },
1093
- onFocus$: /* @__PURE__ */ qwik.inlinedQrl(() => {
1094
- const [props12, store2] = qwik.useLexicalScope();
1095
- const abortController = new AbortController();
1096
- document.addEventListener("click", (e) => {
1097
- if (e.target instanceof HTMLElement && !e.target.closest(`#${props12.id}-picker`) && !e.target.closest(`#${props12.id}`)) {
1098
- store2.opened = false;
1099
- abortController.abort();
1100
- }
1101
- }, {
1102
- signal: abortController.signal
1103
- });
1104
- store2.opened = true;
1105
- }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
1106
- props1,
1107
- store
1108
- ]),
1109
- onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
1110
- const [props12, props2] = qwik.useLexicalScope();
1111
- const div = document.getElementById(`${props12.id}-picker`);
1112
- const event = new Event("change");
1113
- div.dispatchEvent(event);
1114
- props2.onInput$?.(el.value);
1115
- }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
1116
- props1,
1117
- props
1118
- ]),
1119
- style: (props.preview ?? "left") == "full" ? {
1120
- backgroundColor: `${props.value ?? "#000000"}`,
1121
- color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
1122
- } : (props.preview ?? "left") == "left" ? {
1123
- borderLeft: `35px solid ${props.value ?? "#000000"}`
1124
- } : (props.preview ?? "left") == "right" ? {
1125
- borderRight: `35px solid ${props.value ?? "#000000"}`
1126
- } : (props.preview ?? "left") == "top" ? {
1127
- borderTop: `10px solid ${props.value ?? "#000000"}`
1128
- } : (props.preview ?? "left") == "bottom" ? {
1129
- borderBottom: `10px solid ${props.value ?? "#000000"}`
1130
- } : {},
1131
- [qwik._IMMUTABLE]: {
1132
- class: qwik._fnSignal((p0) => ({
1133
- "w-full": true,
1134
- ...p0.class
1107
+ /* @__PURE__ */ qwik._jsxQ("div", {
1108
+ class: {
1109
+ "flex": true,
1110
+ "flex-row gap-1": (props.preview ?? "left") == "left",
1111
+ "flex-row-reverse gap-1": (props.preview ?? "left") == "right",
1112
+ "flex-col": (props.preview ?? "left") == "top",
1113
+ "flex-col-reverse": (props.preview ?? "left") == "bottom"
1114
+ }
1115
+ }, null, [
1116
+ (props.preview ?? "left") != "full" && /* @__PURE__ */ qwik._jsxQ("div", {
1117
+ id: `${props1.id}-preview`,
1118
+ class: {
1119
+ "border border-gray-700": true,
1120
+ "w-9 rounded-md": (props.preview ?? "left") == "left" || (props.preview ?? "left") == "right",
1121
+ "w-full h-3": (props.preview ?? "left") == "top" || (props.preview ?? "left") == "bottom",
1122
+ "rounded-t-md": (props.preview ?? "left") == "top",
1123
+ "rounded-b-md": (props.preview ?? "left") == "bottom"
1124
+ }
1125
+ }, {
1126
+ style: qwik._fnSignal((p0) => ({
1127
+ backgroundColor: `${p0.value ?? "#000000"}`
1135
1128
  }), [
1136
1129
  props
1137
- ], '{"w-full":true,...p0.class}'),
1138
- value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
1139
- props
1140
- ], 'p0.value??"#000000"')
1141
- }
1142
- }, 0, "0s_1"),
1130
+ ], '{backgroundColor:`${p0.value??"#000000"}`}')
1131
+ }, null, 3, "0s_1"),
1132
+ /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
1133
+ get class() {
1134
+ return {
1135
+ "border-t-0 rounded-t-none": (props.preview ?? "left") == "top",
1136
+ "border-b-0 rounded-b-none": (props.preview ?? "left") == "bottom",
1137
+ ...props.class
1138
+ };
1139
+ },
1140
+ ...props1,
1141
+ get value() {
1142
+ return props.value ?? "#000000";
1143
+ },
1144
+ get color() {
1145
+ return props.color;
1146
+ },
1147
+ onFocus$: /* @__PURE__ */ qwik.inlinedQrl(() => {
1148
+ const [props12, store2] = qwik.useLexicalScope();
1149
+ const abortController = new AbortController();
1150
+ document.addEventListener("click", (e) => {
1151
+ if (e.target instanceof HTMLElement && !e.target.closest(`#${props12.id}-popup`) && !e.target.closest(`#${props12.id}`)) {
1152
+ store2.opened = false;
1153
+ abortController.abort();
1154
+ }
1155
+ }, {
1156
+ signal: abortController.signal
1157
+ });
1158
+ store2.opened = true;
1159
+ }, "ColorInput_component_div_div_TextInputRaw_onFocus_Vqaw9AH9HEM", [
1160
+ props1,
1161
+ store
1162
+ ]),
1163
+ onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
1164
+ const [props12] = qwik.useLexicalScope();
1165
+ const div = document.getElementById(`${props12.id}-popup`);
1166
+ div.dataset.value = el.value;
1167
+ div.dispatchEvent(new Event("input"));
1168
+ }, "ColorInput_component_div_div_TextInputRaw_onInput_Z1LFYfy6bG8", [
1169
+ props1
1170
+ ]),
1171
+ style: (props.preview ?? "left") == "full" ? {
1172
+ backgroundColor: `${props.value ?? "#000000"}`,
1173
+ color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
1174
+ } : {},
1175
+ [qwik._IMMUTABLE]: {
1176
+ class: qwik._fnSignal((p0) => ({
1177
+ "border-t-0 rounded-t-none": (p0.preview ?? "left") == "top",
1178
+ "border-b-0 rounded-b-none": (p0.preview ?? "left") == "bottom",
1179
+ ...p0.class
1180
+ }), [
1181
+ props
1182
+ ], '{"border-t-0 rounded-t-none":(p0.preview??"left")=="top","border-b-0 rounded-b-none":(p0.preview??"left")=="bottom",...p0.class}'),
1183
+ value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
1184
+ props
1185
+ ], 'p0.value??"#000000"'),
1186
+ color: qwik._fnSignal((p0) => p0.color, [
1187
+ props
1188
+ ], "p0.color")
1189
+ }
1190
+ }, 0, "0s_2")
1191
+ ], 1, null),
1143
1192
  /* @__PURE__ */ qwik._jsxC(ColorPicker, {
1144
- get id() {
1145
- return props1.id;
1146
- },
1193
+ id: `${props1.id}-popup`,
1147
1194
  get value() {
1148
1195
  return props.value ?? "#000000";
1149
1196
  },
1150
1197
  get color() {
1151
- return props1.color;
1198
+ return props.color;
1152
1199
  },
1153
1200
  get colors() {
1154
1201
  return props.colors;
@@ -1171,36 +1218,24 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
1171
1218
  onInput$: /* @__PURE__ */ qwik.inlinedQrl((color) => {
1172
1219
  const [props12, props2] = qwik.useLexicalScope();
1173
1220
  const el = document.getElementById(props12.id);
1221
+ const previewel = document.getElementById(`${props12.id}-preview`);
1174
1222
  el.value = color;
1175
- switch (props2.preview ?? "left") {
1176
- case "full":
1177
- el.style.backgroundColor = color;
1178
- el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
1179
- break;
1180
- case "left":
1181
- el.style.borderLeft = `35px solid ${color}`;
1182
- break;
1183
- case "right":
1184
- el.style.borderRight = `35px solid ${color}`;
1185
- break;
1186
- case "top":
1187
- el.style.borderTop = `10px solid ${color}`;
1188
- break;
1189
- case "bottom":
1190
- el.style.borderBottom = `10px solid ${color}`;
1191
- break;
1192
- }
1223
+ if ((props2.preview ?? "left") == "full") {
1224
+ el.style.backgroundColor = color;
1225
+ el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
1226
+ } else previewel.style.backgroundColor = color;
1193
1227
  props2.onInput$?.(color);
1194
1228
  }, "ColorInput_component_div_ColorPicker_onInput_iZguRdHILBQ", [
1195
1229
  props1,
1196
1230
  props
1197
1231
  ]),
1198
1232
  [qwik._IMMUTABLE]: {
1199
- id: qwik._wrapProp(props1, "id"),
1200
1233
  value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
1201
1234
  props
1202
1235
  ], 'p0.value??"#000000"'),
1203
- color: qwik._wrapProp(props1, "color"),
1236
+ color: qwik._fnSignal((p0) => p0.color, [
1237
+ props
1238
+ ], "p0.color"),
1204
1239
  colors: qwik._fnSignal((p0) => p0.colors, [
1205
1240
  props
1206
1241
  ], "p0.colors"),
@@ -1220,8 +1255,8 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
1220
1255
  store
1221
1256
  ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
1222
1257
  }
1223
- }, 3, "0s_2")
1224
- ], 1, "0s_3");
1258
+ }, 3, "0s_3")
1259
+ ], 1, "0s_4");
1225
1260
  }, "ColorInput_component_jilGo0Bn3Ps"));
1226
1261
  const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
1227
1262
  return /* @__PURE__ */ qwik._jsxS("svg", {
@@ -1565,37 +1600,35 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
1565
1600
  }, 3, "dL_2"), 1, "dL_3")
1566
1601
  ], 1, null)
1567
1602
  }, 1, "dL_4");
1568
- if (props.subheader)
1569
- Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
1570
- class: "flex flex-col gap-1"
1571
- }, [
1572
- Component,
1573
- /* @__PURE__ */ qwik._jsxQ("h3", null, {
1574
- class: "flex items-center text-gray-400 text-sm"
1575
- }, qwik._fnSignal((p0) => p0.subheader, [
1603
+ if (props.subheader) Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
1604
+ class: "flex flex-col gap-1"
1605
+ }, [
1606
+ Component,
1607
+ /* @__PURE__ */ qwik._jsxQ("h3", null, {
1608
+ class: "flex items-center text-gray-400 text-sm"
1609
+ }, qwik._fnSignal((p0) => p0.subheader, [
1610
+ props
1611
+ ], "p0.subheader"), 3, null)
1612
+ ], 1, "dL_5");
1613
+ if (props.loading !== void 0) Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
1614
+ class: "flex"
1615
+ }, [
1616
+ Component,
1617
+ /* @__PURE__ */ qwik._jsxQ("div", null, {
1618
+ class: qwik._fnSignal((p0) => ({
1619
+ "motion-safe:transition-all duration-200": true,
1620
+ "opacity-0": !p0.loading,
1621
+ "opacity-100": p0.loading
1622
+ }), [
1576
1623
  props
1577
- ], "p0.subheader"), 3, null)
1578
- ], 1, "dL_5");
1579
- if (props.loading !== void 0)
1580
- Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
1581
- class: "flex"
1582
- }, [
1583
- Component,
1584
- /* @__PURE__ */ qwik._jsxQ("div", null, {
1585
- class: qwik._fnSignal((p0) => ({
1586
- "motion-safe:transition-all duration-200": true,
1587
- "opacity-0": !p0.loading,
1588
- "opacity-100": p0.loading
1589
- }), [
1590
- props
1591
- ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
1592
- }, /* @__PURE__ */ qwik._jsxC(LoadingIcon, {
1593
- width: 24,
1594
- [qwik._IMMUTABLE]: {
1595
- width: qwik._IMMUTABLE
1596
- }
1597
- }, 3, "dL_6"), 1, null)
1598
- ], 1, "dL_7");
1624
+ ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
1625
+ }, /* @__PURE__ */ qwik._jsxC(LoadingIcon, {
1626
+ width: 24,
1627
+ [qwik._IMMUTABLE]: {
1628
+ width: qwik._IMMUTABLE
1629
+ }
1630
+ }, 3, "dL_6"), 1, null)
1631
+ ], 1, "dL_7");
1599
1632
  return Component;
1600
1633
  }, "Header_component_FfGOhhBNG5k"));
1601
1634
  const navColorClasses = {
package/lib/index.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, _wrapSignal, useStore, useOn, useLexicalScope, _wrapProp, useStylesQrl, useSignal } from "@builder.io/qwik";
1
+ import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, _wrapSignal, useStore, useLexicalScope, useStylesQrl, useSignal } from "@builder.io/qwik";
2
2
  import { Fragment } from "@builder.io/qwik/jsx-runtime";
3
3
  const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
4
4
  id: _fnSignal((p0) => p0.id, [
@@ -795,8 +795,9 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
795
795
  });
796
796
  const setColor = /* @__PURE__ */ inlinedQrl((color) => {
797
797
  const [maxHue2, props2, store2, width2] = useLexicalScope();
798
- const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
799
- store2.value = rgbToHex(hsvToRgb(hsv));
798
+ if (!color.match(/^#[0-9A-F]{6}$/i)) return;
799
+ const number = hexStringToNumber(color);
800
+ const hsv = rgbToHsv(hexNumberToRgb(number));
800
801
  store2.hue.position = hsv.h * maxHue2;
801
802
  store2.hue.color = rgbToHex(hsvToRgb({
802
803
  h: hsv.h,
@@ -805,6 +806,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
805
806
  }));
806
807
  store2.sPosition = hsv.s * width2;
807
808
  store2.bPosition = (1 - hsv.v) * maxHue2;
809
+ store2.value = color;
808
810
  props2.onInput$?.(store2.value);
809
811
  }, "ColorPicker_component_setColor_QqVIlZ9HOqM", [
810
812
  maxHue,
@@ -886,35 +888,30 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
886
888
  }, "ColorPicker_component_sbMouseDown_lP7vsjR4o9U", [
887
889
  sbChange
888
890
  ]);
889
- useOn("change", /* @__PURE__ */ inlinedQrl(() => {
890
- const [props2, setColor2] = useLexicalScope();
891
- if (!props2.id)
892
- return;
893
- const inputElement = document.getElementById(props2.id);
894
- if (!inputElement)
895
- return;
896
- setColor2(inputElement.value);
897
- }, "ColorPicker_component_useOn_U80lAP6qXKg", [
898
- props,
899
- setColor
900
- ]));
901
891
  return /* @__PURE__ */ _jsxQ("div", {
902
892
  class: {
903
- "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-6 rounded-lg border border-gray-700 touch-none": true,
893
+ "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-4 rounded-lg border border-gray-700 touch-none": true,
904
894
  "flex": true,
905
895
  "flex-col": !props.horizontal,
906
896
  ...props1.class
907
897
  }
908
898
  }, {
909
- id: _fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
899
+ id: _fnSignal((p0) => p0.id, [
910
900
  props
911
- ], "p0.id?`${p0.id}-picker`:undefined")
901
+ ], "p0.id"),
902
+ onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
903
+ const [setColor2] = useLexicalScope();
904
+ if (!el.dataset.value) return;
905
+ setColor2(el.dataset.value);
906
+ }, "ColorPicker_component_div_onInput_61AfRqNB51A", [
907
+ setColor
908
+ ])
912
909
  }, [
913
910
  /* @__PURE__ */ _jsxQ("div", null, {
914
911
  class: "flex gap-4"
915
912
  }, [
916
913
  /* @__PURE__ */ _jsxQ("div", null, {
917
- class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
914
+ class: "w-[125px] h-[150px] rounded-md relative",
918
915
  style: _fnSignal((p0) => ({
919
916
  background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
920
917
  }), [
@@ -926,7 +923,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
926
923
  onTouchStart$: sbMouseDown
927
924
  }, [
928
925
  /* @__PURE__ */ _jsxQ("div", null, {
929
- class: "w-[123px] h-[149px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black"
926
+ class: "w-[125px] h-[150px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black border border-gray-700"
930
927
  }, null, 3, null),
931
928
  /* @__PURE__ */ _jsxQ("div", {
932
929
  class: {
@@ -965,45 +962,72 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
965
962
  /* @__PURE__ */ _jsxQ("div", null, {
966
963
  class: "w-[150px] flex flex-wrap gap-1 justify-between"
967
964
  }, [
968
- (props.showInput ?? true) && /* @__PURE__ */ _jsxC(TextInputRaw, {
965
+ (props.showInput ?? true) && /* @__PURE__ */ _jsxQ("div", {
969
966
  class: {
970
- "w-[150px] mb-4": true
971
- },
972
- get value() {
973
- return store.value;
974
- },
975
- style: (props.preview ?? "left") == "full" ? {
976
- backgroundColor: `${store.value}`,
977
- color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
978
- } : (props.preview ?? "left") == "left" ? {
979
- borderLeft: `35px solid ${store.value}`
980
- } : (props.preview ?? "left") == "right" ? {
981
- borderRight: `35px solid ${store.value}`
982
- } : (props.preview ?? "left") == "top" ? {
983
- borderTop: `10px solid ${store.value}`
984
- } : (props.preview ?? "left") == "bottom" ? {
985
- borderBottom: `10px solid ${store.value}`
986
- } : {},
987
- get color() {
988
- return props.color ?? "gray";
989
- },
990
- onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
991
- const [setColor2] = useLexicalScope();
992
- setColor2(el.value);
993
- }, "ColorPicker_component_div_div_TextInputRaw_onInput_nhKRhFMCxTk", [
994
- setColor
995
- ]),
996
- [_IMMUTABLE]: {
997
- class: _IMMUTABLE,
998
- value: _fnSignal((p0) => p0.value, [
999
- store
1000
- ], "p0.value"),
1001
- color: _fnSignal((p0) => p0.color ?? "gray", [
1002
- props
1003
- ], 'p0.color??"gray"'),
1004
- onInput$: _IMMUTABLE
967
+ "flex w-[150px] pb-3 mb-2 border-b border-b-gray-700": true,
968
+ "flex-row gap-1": (props.preview ?? "left") == "left",
969
+ "flex-row-reverse gap-1": (props.preview ?? "left") == "right",
970
+ "flex-col": (props.preview ?? "left") == "top",
971
+ "flex-col-reverse": (props.preview ?? "left") == "bottom"
1005
972
  }
1006
- }, 3, "sj_0"),
973
+ }, null, [
974
+ (props.preview ?? "left") != "full" && /* @__PURE__ */ _jsxQ("div", {
975
+ class: {
976
+ "border border-gray-700": true,
977
+ "h-full aspect-square rounded-md": (props.preview ?? "left") == "left" || (props.preview ?? "left") == "right",
978
+ "w-full h-3": (props.preview ?? "left") == "top" || (props.preview ?? "left") == "bottom",
979
+ "rounded-t-md": (props.preview ?? "left") == "top",
980
+ "rounded-b-md": (props.preview ?? "left") == "bottom"
981
+ }
982
+ }, {
983
+ style: _fnSignal((p0) => ({
984
+ backgroundColor: `${p0.value}`
985
+ }), [
986
+ store
987
+ ], "{backgroundColor:`${p0.value}`}")
988
+ }, null, 3, "sj_0"),
989
+ /* @__PURE__ */ _jsxC(TextInputRaw, {
990
+ get class() {
991
+ return {
992
+ "w-full": true,
993
+ "border-t-0 rounded-t-none": (props.preview ?? "left") == "top",
994
+ "border-b-0 rounded-b-none": (props.preview ?? "left") == "bottom"
995
+ };
996
+ },
997
+ get value() {
998
+ return store.value;
999
+ },
1000
+ style: (props.preview ?? "left") == "full" ? {
1001
+ backgroundColor: `${store.value}`,
1002
+ color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
1003
+ } : {},
1004
+ get color() {
1005
+ return props.color ?? "gray";
1006
+ },
1007
+ onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
1008
+ const [setColor2] = useLexicalScope();
1009
+ setColor2(el.value);
1010
+ }, "ColorPicker_component_div_div_div_TextInputRaw_onInput_tZr31WTZETw", [
1011
+ setColor
1012
+ ]),
1013
+ [_IMMUTABLE]: {
1014
+ class: _fnSignal((p0) => ({
1015
+ "w-full": true,
1016
+ "border-t-0 rounded-t-none": (p0.preview ?? "left") == "top",
1017
+ "border-b-0 rounded-b-none": (p0.preview ?? "left") == "bottom"
1018
+ }), [
1019
+ props
1020
+ ], '{"w-full":true,"border-t-0 rounded-t-none":(p0.preview??"left")=="top","border-b-0 rounded-b-none":(p0.preview??"left")=="bottom"}'),
1021
+ value: _fnSignal((p0) => p0.value, [
1022
+ store
1023
+ ], "p0.value"),
1024
+ color: _fnSignal((p0) => p0.color ?? "gray", [
1025
+ props
1026
+ ], 'p0.color??"gray"'),
1027
+ onInput$: _IMMUTABLE
1028
+ }
1029
+ }, 3, "sj_1")
1030
+ ], 1, "sj_2"),
1007
1031
  (props.colors ?? [
1008
1032
  "#FAEDCB",
1009
1033
  "#C9E4DE",
@@ -1052,14 +1076,15 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
1052
1076
  [_IMMUTABLE]: {
1053
1077
  class: _IMMUTABLE
1054
1078
  }
1055
- }, 3, "sj_1"), 1, null)
1079
+ }, 3, "sj_3"), 1, null)
1056
1080
  ], 1, null)
1057
- ], 1, "sj_2");
1081
+ ], 1, "sj_4");
1058
1082
  }, "ColorPicker_component_D1OSB6ycLrI"));
1059
1083
  const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
1060
1084
  const props1 = _restProps(props, [
1061
1085
  "onInput$",
1062
1086
  "value",
1087
+ "color",
1063
1088
  "colors",
1064
1089
  "preview",
1065
1090
  "horizontal",
@@ -1077,76 +1102,98 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
1077
1102
  }, {
1078
1103
  class: "text-gray-300 pb-1 flex select-none"
1079
1104
  }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
1080
- /* @__PURE__ */ _jsxC(TextInputRaw, {
1081
- get class() {
1082
- return {
1083
- "w-full": true,
1084
- ...props.class
1085
- };
1086
- },
1087
- ...props1,
1088
- get value() {
1089
- return props.value ?? "#000000";
1090
- },
1091
- onFocus$: /* @__PURE__ */ inlinedQrl(() => {
1092
- const [props12, store2] = useLexicalScope();
1093
- const abortController = new AbortController();
1094
- document.addEventListener("click", (e) => {
1095
- if (e.target instanceof HTMLElement && !e.target.closest(`#${props12.id}-picker`) && !e.target.closest(`#${props12.id}`)) {
1096
- store2.opened = false;
1097
- abortController.abort();
1098
- }
1099
- }, {
1100
- signal: abortController.signal
1101
- });
1102
- store2.opened = true;
1103
- }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
1104
- props1,
1105
- store
1106
- ]),
1107
- onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
1108
- const [props12, props2] = useLexicalScope();
1109
- const div = document.getElementById(`${props12.id}-picker`);
1110
- const event = new Event("change");
1111
- div.dispatchEvent(event);
1112
- props2.onInput$?.(el.value);
1113
- }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
1114
- props1,
1115
- props
1116
- ]),
1117
- style: (props.preview ?? "left") == "full" ? {
1118
- backgroundColor: `${props.value ?? "#000000"}`,
1119
- color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
1120
- } : (props.preview ?? "left") == "left" ? {
1121
- borderLeft: `35px solid ${props.value ?? "#000000"}`
1122
- } : (props.preview ?? "left") == "right" ? {
1123
- borderRight: `35px solid ${props.value ?? "#000000"}`
1124
- } : (props.preview ?? "left") == "top" ? {
1125
- borderTop: `10px solid ${props.value ?? "#000000"}`
1126
- } : (props.preview ?? "left") == "bottom" ? {
1127
- borderBottom: `10px solid ${props.value ?? "#000000"}`
1128
- } : {},
1129
- [_IMMUTABLE]: {
1130
- class: _fnSignal((p0) => ({
1131
- "w-full": true,
1132
- ...p0.class
1105
+ /* @__PURE__ */ _jsxQ("div", {
1106
+ class: {
1107
+ "flex": true,
1108
+ "flex-row gap-1": (props.preview ?? "left") == "left",
1109
+ "flex-row-reverse gap-1": (props.preview ?? "left") == "right",
1110
+ "flex-col": (props.preview ?? "left") == "top",
1111
+ "flex-col-reverse": (props.preview ?? "left") == "bottom"
1112
+ }
1113
+ }, null, [
1114
+ (props.preview ?? "left") != "full" && /* @__PURE__ */ _jsxQ("div", {
1115
+ id: `${props1.id}-preview`,
1116
+ class: {
1117
+ "border border-gray-700": true,
1118
+ "w-9 rounded-md": (props.preview ?? "left") == "left" || (props.preview ?? "left") == "right",
1119
+ "w-full h-3": (props.preview ?? "left") == "top" || (props.preview ?? "left") == "bottom",
1120
+ "rounded-t-md": (props.preview ?? "left") == "top",
1121
+ "rounded-b-md": (props.preview ?? "left") == "bottom"
1122
+ }
1123
+ }, {
1124
+ style: _fnSignal((p0) => ({
1125
+ backgroundColor: `${p0.value ?? "#000000"}`
1133
1126
  }), [
1134
1127
  props
1135
- ], '{"w-full":true,...p0.class}'),
1136
- value: _fnSignal((p0) => p0.value ?? "#000000", [
1137
- props
1138
- ], 'p0.value??"#000000"')
1139
- }
1140
- }, 0, "0s_1"),
1128
+ ], '{backgroundColor:`${p0.value??"#000000"}`}')
1129
+ }, null, 3, "0s_1"),
1130
+ /* @__PURE__ */ _jsxC(TextInputRaw, {
1131
+ get class() {
1132
+ return {
1133
+ "border-t-0 rounded-t-none": (props.preview ?? "left") == "top",
1134
+ "border-b-0 rounded-b-none": (props.preview ?? "left") == "bottom",
1135
+ ...props.class
1136
+ };
1137
+ },
1138
+ ...props1,
1139
+ get value() {
1140
+ return props.value ?? "#000000";
1141
+ },
1142
+ get color() {
1143
+ return props.color;
1144
+ },
1145
+ onFocus$: /* @__PURE__ */ inlinedQrl(() => {
1146
+ const [props12, store2] = useLexicalScope();
1147
+ const abortController = new AbortController();
1148
+ document.addEventListener("click", (e) => {
1149
+ if (e.target instanceof HTMLElement && !e.target.closest(`#${props12.id}-popup`) && !e.target.closest(`#${props12.id}`)) {
1150
+ store2.opened = false;
1151
+ abortController.abort();
1152
+ }
1153
+ }, {
1154
+ signal: abortController.signal
1155
+ });
1156
+ store2.opened = true;
1157
+ }, "ColorInput_component_div_div_TextInputRaw_onFocus_Vqaw9AH9HEM", [
1158
+ props1,
1159
+ store
1160
+ ]),
1161
+ onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
1162
+ const [props12] = useLexicalScope();
1163
+ const div = document.getElementById(`${props12.id}-popup`);
1164
+ div.dataset.value = el.value;
1165
+ div.dispatchEvent(new Event("input"));
1166
+ }, "ColorInput_component_div_div_TextInputRaw_onInput_Z1LFYfy6bG8", [
1167
+ props1
1168
+ ]),
1169
+ style: (props.preview ?? "left") == "full" ? {
1170
+ backgroundColor: `${props.value ?? "#000000"}`,
1171
+ color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
1172
+ } : {},
1173
+ [_IMMUTABLE]: {
1174
+ class: _fnSignal((p0) => ({
1175
+ "border-t-0 rounded-t-none": (p0.preview ?? "left") == "top",
1176
+ "border-b-0 rounded-b-none": (p0.preview ?? "left") == "bottom",
1177
+ ...p0.class
1178
+ }), [
1179
+ props
1180
+ ], '{"border-t-0 rounded-t-none":(p0.preview??"left")=="top","border-b-0 rounded-b-none":(p0.preview??"left")=="bottom",...p0.class}'),
1181
+ value: _fnSignal((p0) => p0.value ?? "#000000", [
1182
+ props
1183
+ ], 'p0.value??"#000000"'),
1184
+ color: _fnSignal((p0) => p0.color, [
1185
+ props
1186
+ ], "p0.color")
1187
+ }
1188
+ }, 0, "0s_2")
1189
+ ], 1, null),
1141
1190
  /* @__PURE__ */ _jsxC(ColorPicker, {
1142
- get id() {
1143
- return props1.id;
1144
- },
1191
+ id: `${props1.id}-popup`,
1145
1192
  get value() {
1146
1193
  return props.value ?? "#000000";
1147
1194
  },
1148
1195
  get color() {
1149
- return props1.color;
1196
+ return props.color;
1150
1197
  },
1151
1198
  get colors() {
1152
1199
  return props.colors;
@@ -1169,36 +1216,24 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
1169
1216
  onInput$: /* @__PURE__ */ inlinedQrl((color) => {
1170
1217
  const [props12, props2] = useLexicalScope();
1171
1218
  const el = document.getElementById(props12.id);
1219
+ const previewel = document.getElementById(`${props12.id}-preview`);
1172
1220
  el.value = color;
1173
- switch (props2.preview ?? "left") {
1174
- case "full":
1175
- el.style.backgroundColor = color;
1176
- el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
1177
- break;
1178
- case "left":
1179
- el.style.borderLeft = `35px solid ${color}`;
1180
- break;
1181
- case "right":
1182
- el.style.borderRight = `35px solid ${color}`;
1183
- break;
1184
- case "top":
1185
- el.style.borderTop = `10px solid ${color}`;
1186
- break;
1187
- case "bottom":
1188
- el.style.borderBottom = `10px solid ${color}`;
1189
- break;
1190
- }
1221
+ if ((props2.preview ?? "left") == "full") {
1222
+ el.style.backgroundColor = color;
1223
+ el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
1224
+ } else previewel.style.backgroundColor = color;
1191
1225
  props2.onInput$?.(color);
1192
1226
  }, "ColorInput_component_div_ColorPicker_onInput_iZguRdHILBQ", [
1193
1227
  props1,
1194
1228
  props
1195
1229
  ]),
1196
1230
  [_IMMUTABLE]: {
1197
- id: _wrapProp(props1, "id"),
1198
1231
  value: _fnSignal((p0) => p0.value ?? "#000000", [
1199
1232
  props
1200
1233
  ], 'p0.value??"#000000"'),
1201
- color: _wrapProp(props1, "color"),
1234
+ color: _fnSignal((p0) => p0.color, [
1235
+ props
1236
+ ], "p0.color"),
1202
1237
  colors: _fnSignal((p0) => p0.colors, [
1203
1238
  props
1204
1239
  ], "p0.colors"),
@@ -1218,8 +1253,8 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
1218
1253
  store
1219
1254
  ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
1220
1255
  }
1221
- }, 3, "0s_2")
1222
- ], 1, "0s_3");
1256
+ }, 3, "0s_3")
1257
+ ], 1, "0s_4");
1223
1258
  }, "ColorInput_component_jilGo0Bn3Ps"));
1224
1259
  const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
1225
1260
  return /* @__PURE__ */ _jsxS("svg", {
@@ -1563,37 +1598,35 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
1563
1598
  }, 3, "dL_2"), 1, "dL_3")
1564
1599
  ], 1, null)
1565
1600
  }, 1, "dL_4");
1566
- if (props.subheader)
1567
- Component = /* @__PURE__ */ _jsxQ("div", null, {
1568
- class: "flex flex-col gap-1"
1569
- }, [
1570
- Component,
1571
- /* @__PURE__ */ _jsxQ("h3", null, {
1572
- class: "flex items-center text-gray-400 text-sm"
1573
- }, _fnSignal((p0) => p0.subheader, [
1601
+ if (props.subheader) Component = /* @__PURE__ */ _jsxQ("div", null, {
1602
+ class: "flex flex-col gap-1"
1603
+ }, [
1604
+ Component,
1605
+ /* @__PURE__ */ _jsxQ("h3", null, {
1606
+ class: "flex items-center text-gray-400 text-sm"
1607
+ }, _fnSignal((p0) => p0.subheader, [
1608
+ props
1609
+ ], "p0.subheader"), 3, null)
1610
+ ], 1, "dL_5");
1611
+ if (props.loading !== void 0) Component = /* @__PURE__ */ _jsxQ("div", null, {
1612
+ class: "flex"
1613
+ }, [
1614
+ Component,
1615
+ /* @__PURE__ */ _jsxQ("div", null, {
1616
+ class: _fnSignal((p0) => ({
1617
+ "motion-safe:transition-all duration-200": true,
1618
+ "opacity-0": !p0.loading,
1619
+ "opacity-100": p0.loading
1620
+ }), [
1574
1621
  props
1575
- ], "p0.subheader"), 3, null)
1576
- ], 1, "dL_5");
1577
- if (props.loading !== void 0)
1578
- Component = /* @__PURE__ */ _jsxQ("div", null, {
1579
- class: "flex"
1580
- }, [
1581
- Component,
1582
- /* @__PURE__ */ _jsxQ("div", null, {
1583
- class: _fnSignal((p0) => ({
1584
- "motion-safe:transition-all duration-200": true,
1585
- "opacity-0": !p0.loading,
1586
- "opacity-100": p0.loading
1587
- }), [
1588
- props
1589
- ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
1590
- }, /* @__PURE__ */ _jsxC(LoadingIcon, {
1591
- width: 24,
1592
- [_IMMUTABLE]: {
1593
- width: _IMMUTABLE
1594
- }
1595
- }, 3, "dL_6"), 1, null)
1596
- ], 1, "dL_7");
1622
+ ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
1623
+ }, /* @__PURE__ */ _jsxC(LoadingIcon, {
1624
+ width: 24,
1625
+ [_IMMUTABLE]: {
1626
+ width: _IMMUTABLE
1627
+ }
1628
+ }, 3, "dL_6"), 1, null)
1629
+ ], 1, "dL_7");
1597
1630
  return Component;
1598
1631
  }, "Header_component_FfGOhhBNG5k"));
1599
1632
  const navColorClasses = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "0.18.0",
3
+ "version": "0.18.2",
4
4
  "description": "Luminescent UI library",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",