@luminescent/ui 0.10.0-4 → 0.11.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 (21) hide show
  1. package/lib/index.qwik.cjs +177 -143
  2. package/lib/index.qwik.mjs +178 -144
  3. package/lib-types/components/docs/Anchor.d.ts +2 -0
  4. package/lib-types/components/docs/Blobs.d.ts +2 -0
  5. package/lib-types/components/docs/Button.d.ts +2 -0
  6. package/lib-types/components/docs/Card.d.ts +2 -0
  7. package/lib-types/components/docs/ColorInput.d.ts +2 -0
  8. package/lib-types/components/docs/IconsLogos.d.ts +2 -0
  9. package/lib-types/components/docs/Nav.d.ts +2 -0
  10. package/lib-types/components/docs/NumberInput.d.ts +2 -0
  11. package/lib-types/components/docs/SelectInput.d.ts +2 -0
  12. package/lib-types/components/docs/TextArea.d.ts +2 -0
  13. package/lib-types/components/docs/TextInput.d.ts +2 -0
  14. package/lib-types/components/docs/Toggle.d.ts +2 -0
  15. package/lib-types/components/elements/Blobs.d.ts +22 -0
  16. package/lib-types/components/elements/Card.d.ts +0 -10
  17. package/lib-types/components/elements/SelectInput.d.ts +2 -1
  18. package/lib-types/components/elements.d.ts +1 -0
  19. package/package.json +1 -1
  20. package/src/tailwind.config.js +17 -3
  21. package/lib-types/utils/simple-color-picker/color.d.ts +0 -36
package/lib/index.qwik.cjs CHANGED
@@ -8,6 +8,121 @@ const Anchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
8
8
  props
9
9
  ], "p0.id")
10
10
  }, null, 3, "Oa_0"), "Anchor_component_O7y4zyaazA0"));
11
+ const blobColorClasses = {
12
+ pink: [
13
+ "bg-pink-400",
14
+ "bg-pink-500",
15
+ "bg-pink-600"
16
+ ],
17
+ red: [
18
+ "bg-red-400",
19
+ "bg-red-500",
20
+ "bg-red-600"
21
+ ],
22
+ orange: [
23
+ "bg-orange-400",
24
+ "bg-orange-500",
25
+ "bg-orange-600"
26
+ ],
27
+ yellow: [
28
+ "bg-yellow-400",
29
+ "bg-yellow-500",
30
+ "bg-yellow-600"
31
+ ],
32
+ green: [
33
+ "bg-green-400",
34
+ "bg-green-500",
35
+ "bg-green-600"
36
+ ],
37
+ blue: [
38
+ "bg-blue-400",
39
+ "bg-blue-500",
40
+ "bg-blue-600"
41
+ ],
42
+ purple: [
43
+ "bg-purple-400",
44
+ "bg-purple-500",
45
+ "bg-purple-600"
46
+ ],
47
+ gray: [
48
+ "bg-gray-400",
49
+ "bg-gray-500",
50
+ "bg-gray-600"
51
+ ],
52
+ darkgray: [
53
+ "bg-gray-500",
54
+ "bg-gray-600",
55
+ "bg-gray-700"
56
+ ],
57
+ darkergray: [
58
+ "bg-gray-600",
59
+ "bg-gray-700",
60
+ "bg-gray-800"
61
+ ]
62
+ };
63
+ const blobClasses = [
64
+ "animate-blob",
65
+ "animate-blob1",
66
+ "animate-blob2",
67
+ "animate-blob3",
68
+ "animate-blob4",
69
+ "animate-blob5",
70
+ "animate-blob6"
71
+ ];
72
+ const Blobs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
73
+ const props1 = qwik._restProps(props, [
74
+ "color",
75
+ "blur"
76
+ ]);
77
+ const blob = Math.round(Math.random() * 6);
78
+ const colorClass = typeof (props.color ?? "darkgray") == "string" ? blobColorClasses[props.color ?? "darkgray"] : props.color ?? "darkgray";
79
+ return /* @__PURE__ */ qwik._jsxQ("div", {
80
+ class: {
81
+ "motion-reduce:hidden absolute -z-10 inset-0 transition-all animate-in fade-in anim-duration-[2s]": true,
82
+ ...props1.class
83
+ }
84
+ }, {
85
+ style: {
86
+ containerType: "size"
87
+ }
88
+ }, [
89
+ /* @__PURE__ */ qwik._jsxQ("div", {
90
+ class: {
91
+ "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
92
+ "blur-sm": (props.blur ?? "xl") === "sm",
93
+ "blur-md": (props.blur ?? "xl") === "md",
94
+ "blur-lg": (props.blur ?? "xl") === "lg",
95
+ "blur-xl": (props.blur ?? "xl") === "xl",
96
+ [blobClasses[blob]]: true,
97
+ [colorClass[0]]: true
98
+ }
99
+ }, null, null, 3, null),
100
+ /* @__PURE__ */ qwik._jsxQ("div", {
101
+ class: {
102
+ "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
103
+ "blur-sm": (props.blur ?? "xl") === "sm",
104
+ "blur-md": (props.blur ?? "xl") === "md",
105
+ "blur-lg": (props.blur ?? "xl") === "lg",
106
+ "blur-xl": (props.blur ?? "xl") === "xl",
107
+ "anim-delay-[-5s]": true,
108
+ [blobClasses[blob]]: true,
109
+ [colorClass[1]]: true
110
+ }
111
+ }, null, null, 3, null),
112
+ /* @__PURE__ */ qwik._jsxQ("div", {
113
+ class: {
114
+ "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
115
+ "blur-sm": (props.blur ?? "xl") === "sm",
116
+ "blur-md": (props.blur ?? "xl") === "md",
117
+ "blur-lg": (props.blur ?? "xl") === "lg",
118
+ "blur-xl": (props.blur ?? "xl") === "xl",
119
+ "anim-delay-[-10s]": true,
120
+ [blobClasses[blob]]: true,
121
+ [colorClass[2]]: true
122
+ }
123
+ }, null, null, 3, null)
124
+ ], 1, "OL_0");
125
+ }, "Blobs_component_246Oa50YM60"));
11
126
  const buttonColorClasses = {
12
127
  blue: "bg-blue-600/90 border-blue-500 hover:bg-blue-500 active:bg-blue-400 focus:border-blue-400",
13
128
  purple: "bg-purple-600/90 border-purple-500 hover:bg-purple-500 active:bg-purple-400 focus:border-purple-400",
@@ -87,12 +202,7 @@ const cardColorClasses = {
87
202
  bg: "bg-pink-400/60 border-pink-400",
88
203
  hover: "hover:bg-pink-400/20",
89
204
  click: "active:bg-pink-300/20"
90
- },
91
- blobs: [
92
- "bg-pink-400",
93
- "bg-pink-500",
94
- "bg-pink-600"
95
- ]
205
+ }
96
206
  },
97
207
  red: {
98
208
  card: {
@@ -100,12 +210,7 @@ const cardColorClasses = {
100
210
  bg: "bg-red-400/60 border-red-400",
101
211
  hover: "hover:bg-red-400/20",
102
212
  click: "active:bg-red-300/20"
103
- },
104
- blobs: [
105
- "bg-red-400",
106
- "bg-red-500",
107
- "bg-red-600"
108
- ]
213
+ }
109
214
  },
110
215
  orange: {
111
216
  card: {
@@ -113,12 +218,7 @@ const cardColorClasses = {
113
218
  bg: "bg-orange-400/60 border-orange-400",
114
219
  hover: "hover:bg-orange-400/20",
115
220
  click: "active:bg-orange-300/20"
116
- },
117
- blobs: [
118
- "bg-orange-400",
119
- "bg-orange-500",
120
- "bg-orange-600"
121
- ]
221
+ }
122
222
  },
123
223
  yellow: {
124
224
  card: {
@@ -126,12 +226,7 @@ const cardColorClasses = {
126
226
  bg: "bg-yellow-400/60 border-yellow-400",
127
227
  hover: "hover:bg-yellow-400/20",
128
228
  click: "active:bg-yellow-300/20"
129
- },
130
- blobs: [
131
- "bg-yellow-400",
132
- "bg-yellow-500",
133
- "bg-yellow-600"
134
- ]
229
+ }
135
230
  },
136
231
  green: {
137
232
  card: {
@@ -139,12 +234,7 @@ const cardColorClasses = {
139
234
  bg: "bg-green-400/60 border-green-400",
140
235
  hover: "hover:bg-green-400/20",
141
236
  click: "active:bg-green-300/20"
142
- },
143
- blobs: [
144
- "bg-green-400",
145
- "bg-green-500",
146
- "bg-green-600"
147
- ]
237
+ }
148
238
  },
149
239
  blue: {
150
240
  card: {
@@ -152,12 +242,7 @@ const cardColorClasses = {
152
242
  bg: "bg-blue-400/60 border-blue-400",
153
243
  hover: "hover:bg-blue-400/20",
154
244
  click: "active:bg-blue-300/20"
155
- },
156
- blobs: [
157
- "bg-blue-400",
158
- "bg-blue-500",
159
- "bg-blue-600"
160
- ]
245
+ }
161
246
  },
162
247
  purple: {
163
248
  card: {
@@ -165,12 +250,7 @@ const cardColorClasses = {
165
250
  bg: "bg-purple-400/60 border-purple-400",
166
251
  hover: "hover:bg-purple-400/20",
167
252
  click: "active:bg-purple-300/20"
168
- },
169
- blobs: [
170
- "bg-purple-400",
171
- "bg-purple-500",
172
- "bg-purple-600"
173
- ]
253
+ }
174
254
  },
175
255
  gray: {
176
256
  card: {
@@ -178,12 +258,7 @@ const cardColorClasses = {
178
258
  bg: "bg-gray-400/60 border-gray-400",
179
259
  hover: "hover:bg-gray-400/20",
180
260
  click: "active:bg-gray-300/20"
181
- },
182
- blobs: [
183
- "bg-gray-400",
184
- "bg-gray-500",
185
- "bg-gray-600"
186
- ]
261
+ }
187
262
  },
188
263
  darkgray: {
189
264
  card: {
@@ -191,12 +266,7 @@ const cardColorClasses = {
191
266
  bg: "bg-gray-800/60 border-gray-800",
192
267
  hover: "hover:bg-gray-800/40",
193
268
  click: "active:bg-gray-700/40"
194
- },
195
- blobs: [
196
- "bg-gray-500",
197
- "bg-gray-600",
198
- "bg-gray-700"
199
- ]
269
+ }
200
270
  },
201
271
  darkergray: {
202
272
  card: {
@@ -204,31 +274,17 @@ const cardColorClasses = {
204
274
  bg: "bg-gray-900/60 border-gray-900",
205
275
  hover: "hover:bg-gray-900/50",
206
276
  click: "active:bg-gray-800/50"
207
- },
208
- blobs: [
209
- "bg-gray-600",
210
- "bg-gray-700",
211
- "bg-gray-800"
212
- ]
277
+ }
213
278
  }
214
279
  };
215
- const blobClasses = [
216
- "animate-blob",
217
- "animate-blob1",
218
- "animate-blob2",
219
- "animate-blob3",
220
- "animate-blob4",
221
- "animate-blob5",
222
- "animate-blob6"
223
- ];
224
280
  const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
281
+ qwik._jsxBranch();
225
282
  const props1 = qwik._restProps(props, [
226
283
  "color",
227
284
  "hover",
228
285
  "row",
229
286
  "blobs"
230
287
  ]);
231
- const blob = Math.round(Math.random() * 6);
232
288
  return /* @__PURE__ */ qwik._jsxS("div", {
233
289
  ...props1,
234
290
  children: [
@@ -246,36 +302,20 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
246
302
  }, {
247
303
  class: "absolute inset-0"
248
304
  }, null, 3, "OW_1"),
249
- props.blobs && /* @__PURE__ */ qwik._jsxQ("div", null, {
250
- class: "motion-reduce:hidden absolute -z-10 inset-0 transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
251
- style: {
252
- containerType: "size"
305
+ props.blobs && /* @__PURE__ */ qwik._jsxC(Blobs, {
306
+ get color() {
307
+ return props.color ?? "darkgray";
308
+ },
309
+ class: {
310
+ "overflow-clip": true
311
+ },
312
+ [qwik._IMMUTABLE]: {
313
+ class: qwik._IMMUTABLE,
314
+ color: qwik._fnSignal((p0) => p0.color ?? "darkgray", [
315
+ props
316
+ ], 'p0.color??"darkgray"')
253
317
  }
254
- }, [
255
- /* @__PURE__ */ qwik._jsxQ("div", {
256
- class: {
257
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
258
- [blobClasses[blob]]: true,
259
- [cardColorClasses[props.color ?? "darkgray"].blobs[0]]: true
260
- }
261
- }, null, null, 3, null),
262
- /* @__PURE__ */ qwik._jsxQ("div", {
263
- class: {
264
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
265
- "anim-delay-[-5s]": true,
266
- [blobClasses[blob]]: true,
267
- [cardColorClasses[props.color ?? "darkgray"].blobs[1]]: true
268
- }
269
- }, null, null, 3, null),
270
- /* @__PURE__ */ qwik._jsxQ("div", {
271
- class: {
272
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
273
- "anim-delay-[-10s]": true,
274
- [blobClasses[blob]]: true,
275
- [cardColorClasses[props.color ?? "darkgray"].blobs[2]]: true
276
- }
277
- }, null, null, 3, null)
278
- ], 1, "OW_2")
318
+ }, 3, "OW_2")
279
319
  ],
280
320
  class: {
281
321
  "relative p-8 border rounded-lg motion-safe:transition-all": true,
@@ -871,17 +911,15 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
871
911
  props
872
912
  ], '{"motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50":true,"fixed":p0.fixed,"absolute":!p0.fixed}')
873
913
  }, [
874
- /* @__PURE__ */ qwik._jsxQ("div", null, {
875
- class: qwik._fnSignal((p0) => ({
914
+ /* @__PURE__ */ qwik._jsxQ("div", {
915
+ class: {
876
916
  "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
877
- "top-full mt-2": p0.value,
878
- "opacity-0 top-0": !p0.value
879
- }), [
880
- menu
881
- ], '{"sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full":true,"top-full mt-2":p0.value,"opacity-0 top-0":!p0.value}')
882
- }, /* @__PURE__ */ qwik._jsxQ("div", null, {
917
+ "top-full mt-2": menu.value,
918
+ "opacity-0 top-0 scale-95": !menu.value
919
+ }
920
+ }, null, /* @__PURE__ */ qwik._jsxQ("div", null, {
883
921
  class: {
884
- "flex flex-col motion-safe:transition-all max-w-7xl w-full p-2 bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": true
922
+ "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full p-2 bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": true
885
923
  }
886
924
  }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
887
925
  name: "mobile",
@@ -889,21 +927,21 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
889
927
  name: qwik._IMMUTABLE
890
928
  }
891
929
  }, 3, "8r_0"), 1, null), 1, null),
892
- /* @__PURE__ */ qwik._jsxQ("div", null, {
893
- class: qwik._fnSignal((p0) => ({
894
- "bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl": !p0.floating,
895
- "p-2 pb-0": p0.floating
896
- }), [
897
- props
898
- ], '{"bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl":!p0.floating,"p-2 pb-0":p0.floating}')
899
- }, /* @__PURE__ */ qwik._jsxQ("div", {
930
+ /* @__PURE__ */ qwik._jsxQ("div", {
931
+ class: {
932
+ "bg-gray-800/50 border-b border-gray-700/50": !props.floating,
933
+ 'before:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': !props.floating,
934
+ "relative mt-2": props.floating
935
+ }
936
+ }, null, /* @__PURE__ */ qwik._jsxQ("div", {
900
937
  class: {
901
- "flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl": true,
902
- "bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": props.floating
938
+ "flex justify-evenly w-full mx-auto px-2 max-w-7xl": true,
939
+ "bg-gray-800/50 border border-gray-700/50 rounded-lg": props.floating,
940
+ 'before:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': props.floating
903
941
  }
904
942
  }, null, [
905
943
  /* @__PURE__ */ qwik._jsxQ("div", null, {
906
- class: "flex items-center flex-1 gap-2 justify-start"
944
+ class: "flex items-center flex-1 gap-2 py-2 justify-start"
907
945
  }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
908
946
  name: "start",
909
947
  [qwik._IMMUTABLE]: {
@@ -911,7 +949,7 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
911
949
  }
912
950
  }, 3, "8r_1"), 1, null),
913
951
  /* @__PURE__ */ qwik._jsxQ("div", null, {
914
- class: "flex items-center flex-1 gap-2 justify-center"
952
+ class: "flex items-center flex-1 gap-2 py-2 justify-center"
915
953
  }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
916
954
  name: "center",
917
955
  [qwik._IMMUTABLE]: {
@@ -919,7 +957,7 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
919
957
  }
920
958
  }, 3, "8r_2"), 1, null),
921
959
  /* @__PURE__ */ qwik._jsxQ("div", null, {
922
- class: "flex items-center flex-1 gap-2 justify-end"
960
+ class: "flex items-center flex-1 gap-2 py-2 justify-end"
923
961
  }, [
924
962
  /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
925
963
  name: "end",
@@ -1190,7 +1228,8 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
1190
1228
  "size"
1191
1229
  ]);
1192
1230
  const store = qwik.useStore({
1193
- opened: false
1231
+ opened: false,
1232
+ value: props1.value
1194
1233
  });
1195
1234
  qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
1196
1235
  .lui-scroll {
@@ -1222,7 +1261,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
1222
1261
  children: props.values.map((value, i) => {
1223
1262
  return /* @__PURE__ */ qwik._jsxQ("option", {
1224
1263
  value: qwik._wrapSignal(value, "value")
1225
- }, null, value.name, 1, i);
1264
+ }, null, `${value.value}`, 1, i);
1226
1265
  })
1227
1266
  }, {
1228
1267
  class: {
@@ -1254,7 +1293,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
1254
1293
  id: qwik._fnSignal((p0) => `lui-${p0.id}-name`, [
1255
1294
  props
1256
1295
  ], "`lui-${p0.id}-name`")
1257
- }, props.values.find((value) => value.value.toString() === props1.value)?.name ?? props.values[0].name, 1, "cA_3"),
1296
+ }, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "cA_3"),
1258
1297
  /* @__PURE__ */ qwik._jsxC(ChevronDown, {
1259
1298
  width: 16,
1260
1299
  get class() {
@@ -1305,36 +1344,29 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
1305
1344
  id: qwik._fnSignal((p0) => `lui-${p0.id}-opts`, [
1306
1345
  props
1307
1346
  ], "`lui-${p0.id}-opts`")
1308
- }, props.values.map((value, i) => {
1347
+ }, props.values.map(({ name, value, color = "transparent" }, i) => {
1309
1348
  return /* @__PURE__ */ qwik._jsxC(Button, {
1310
- color: "transparent",
1349
+ color,
1350
+ get size() {
1351
+ return props.size ?? "sm";
1352
+ },
1353
+ children: name,
1311
1354
  onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
1312
1355
  const [props2, store2, value2] = qwik.useLexicalScope();
1313
1356
  store2.opened = false;
1314
1357
  const select = document.getElementById(props2.id);
1315
- select.value = value2.value.toString();
1316
- const name = document.getElementById(`lui-${props2.id}-name`);
1317
- if (name)
1318
- name.textContent = value2.name;
1358
+ select.value = value2.toString();
1359
+ store2.value = value2.toString();
1319
1360
  select.dispatchEvent(new Event("change"));
1320
1361
  }, "SelectInputRaw_component_div_div_Button_onClick_mLa0FdeKCLw", [
1321
1362
  props,
1322
1363
  store,
1323
1364
  value
1324
1365
  ]),
1325
- get class() {
1326
- return {
1327
- "opacity-0": !store.opened
1328
- };
1329
- },
1330
- children: qwik._wrapSignal(value, "name"),
1331
1366
  [qwik._IMMUTABLE]: {
1332
- class: qwik._fnSignal((p0) => ({
1333
- "opacity-0": !p0.opened
1334
- }), [
1335
- store
1336
- ], '{"opacity-0":!p0.opened}'),
1337
- color: qwik._IMMUTABLE
1367
+ size: qwik._fnSignal((p0) => p0.size ?? "sm", [
1368
+ props
1369
+ ], 'p0.size??"sm"')
1338
1370
  }
1339
1371
  }, 1, i);
1340
1372
  }), 1, null)
@@ -1365,7 +1397,7 @@ const TextAreaRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
1365
1397
  class: {
1366
1398
  [InputClasses]: true,
1367
1399
  "h-32": true,
1368
- "cursor-pointer active:bg-gray-600": props.output,
1400
+ "cursor-pointer active:bg-gray-600 select-none": props.output,
1369
1401
  ...props1.class
1370
1402
  },
1371
1403
  onClick$: props.output ? /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
@@ -1866,6 +1898,7 @@ const LogoWaterfall = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
1866
1898
  }, 0, "Pt_0");
1867
1899
  }, "LogoWaterfall_component_1hFl8GlECLI"));
1868
1900
  exports.Anchor = Anchor;
1901
+ exports.Blobs = Blobs;
1869
1902
  exports.Button = Button;
1870
1903
  exports.ButtonAnchor = ButtonAnchor;
1871
1904
  exports.Card = Card;
@@ -1897,6 +1930,7 @@ exports.TextInputRaw = TextInputRaw;
1897
1930
  exports.Toggle = Toggle;
1898
1931
  exports._auto_blobClasses = blobClasses;
1899
1932
  exports._auto_buttonClass = buttonClass;
1933
+ exports.blobColorClasses = blobColorClasses;
1900
1934
  exports.buttonColorClasses = buttonColorClasses;
1901
1935
  exports.cardColorClasses = cardColorClasses;
1902
1936
  exports.sizeClasses = sizeClasses;
package/lib/index.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _wrapSignal, useStore, useLexicalScope, _IMMUTABLE, _wrapProp, useOn, _jsxBranch, useSignal, useStylesQrl } from "@builder.io/qwik";
1
+ import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _wrapSignal, _IMMUTABLE, useStore, useLexicalScope, _wrapProp, useOn, useSignal, useStylesQrl } 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
  class: "block h-32 -mt-32",
@@ -6,6 +6,121 @@ const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
6
6
  props
7
7
  ], "p0.id")
8
8
  }, null, 3, "Oa_0"), "Anchor_component_O7y4zyaazA0"));
9
+ const blobColorClasses = {
10
+ pink: [
11
+ "bg-pink-400",
12
+ "bg-pink-500",
13
+ "bg-pink-600"
14
+ ],
15
+ red: [
16
+ "bg-red-400",
17
+ "bg-red-500",
18
+ "bg-red-600"
19
+ ],
20
+ orange: [
21
+ "bg-orange-400",
22
+ "bg-orange-500",
23
+ "bg-orange-600"
24
+ ],
25
+ yellow: [
26
+ "bg-yellow-400",
27
+ "bg-yellow-500",
28
+ "bg-yellow-600"
29
+ ],
30
+ green: [
31
+ "bg-green-400",
32
+ "bg-green-500",
33
+ "bg-green-600"
34
+ ],
35
+ blue: [
36
+ "bg-blue-400",
37
+ "bg-blue-500",
38
+ "bg-blue-600"
39
+ ],
40
+ purple: [
41
+ "bg-purple-400",
42
+ "bg-purple-500",
43
+ "bg-purple-600"
44
+ ],
45
+ gray: [
46
+ "bg-gray-400",
47
+ "bg-gray-500",
48
+ "bg-gray-600"
49
+ ],
50
+ darkgray: [
51
+ "bg-gray-500",
52
+ "bg-gray-600",
53
+ "bg-gray-700"
54
+ ],
55
+ darkergray: [
56
+ "bg-gray-600",
57
+ "bg-gray-700",
58
+ "bg-gray-800"
59
+ ]
60
+ };
61
+ const blobClasses = [
62
+ "animate-blob",
63
+ "animate-blob1",
64
+ "animate-blob2",
65
+ "animate-blob3",
66
+ "animate-blob4",
67
+ "animate-blob5",
68
+ "animate-blob6"
69
+ ];
70
+ const Blobs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
71
+ const props1 = _restProps(props, [
72
+ "color",
73
+ "blur"
74
+ ]);
75
+ const blob = Math.round(Math.random() * 6);
76
+ const colorClass = typeof (props.color ?? "darkgray") == "string" ? blobColorClasses[props.color ?? "darkgray"] : props.color ?? "darkgray";
77
+ return /* @__PURE__ */ _jsxQ("div", {
78
+ class: {
79
+ "motion-reduce:hidden absolute -z-10 inset-0 transition-all animate-in fade-in anim-duration-[2s]": true,
80
+ ...props1.class
81
+ }
82
+ }, {
83
+ style: {
84
+ containerType: "size"
85
+ }
86
+ }, [
87
+ /* @__PURE__ */ _jsxQ("div", {
88
+ class: {
89
+ "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
90
+ "blur-sm": (props.blur ?? "xl") === "sm",
91
+ "blur-md": (props.blur ?? "xl") === "md",
92
+ "blur-lg": (props.blur ?? "xl") === "lg",
93
+ "blur-xl": (props.blur ?? "xl") === "xl",
94
+ [blobClasses[blob]]: true,
95
+ [colorClass[0]]: true
96
+ }
97
+ }, null, null, 3, null),
98
+ /* @__PURE__ */ _jsxQ("div", {
99
+ class: {
100
+ "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
101
+ "blur-sm": (props.blur ?? "xl") === "sm",
102
+ "blur-md": (props.blur ?? "xl") === "md",
103
+ "blur-lg": (props.blur ?? "xl") === "lg",
104
+ "blur-xl": (props.blur ?? "xl") === "xl",
105
+ "anim-delay-[-5s]": true,
106
+ [blobClasses[blob]]: true,
107
+ [colorClass[1]]: true
108
+ }
109
+ }, null, null, 3, null),
110
+ /* @__PURE__ */ _jsxQ("div", {
111
+ class: {
112
+ "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
113
+ "blur-sm": (props.blur ?? "xl") === "sm",
114
+ "blur-md": (props.blur ?? "xl") === "md",
115
+ "blur-lg": (props.blur ?? "xl") === "lg",
116
+ "blur-xl": (props.blur ?? "xl") === "xl",
117
+ "anim-delay-[-10s]": true,
118
+ [blobClasses[blob]]: true,
119
+ [colorClass[2]]: true
120
+ }
121
+ }, null, null, 3, null)
122
+ ], 1, "OL_0");
123
+ }, "Blobs_component_246Oa50YM60"));
9
124
  const buttonColorClasses = {
10
125
  blue: "bg-blue-600/90 border-blue-500 hover:bg-blue-500 active:bg-blue-400 focus:border-blue-400",
11
126
  purple: "bg-purple-600/90 border-purple-500 hover:bg-purple-500 active:bg-purple-400 focus:border-purple-400",
@@ -85,12 +200,7 @@ const cardColorClasses = {
85
200
  bg: "bg-pink-400/60 border-pink-400",
86
201
  hover: "hover:bg-pink-400/20",
87
202
  click: "active:bg-pink-300/20"
88
- },
89
- blobs: [
90
- "bg-pink-400",
91
- "bg-pink-500",
92
- "bg-pink-600"
93
- ]
203
+ }
94
204
  },
95
205
  red: {
96
206
  card: {
@@ -98,12 +208,7 @@ const cardColorClasses = {
98
208
  bg: "bg-red-400/60 border-red-400",
99
209
  hover: "hover:bg-red-400/20",
100
210
  click: "active:bg-red-300/20"
101
- },
102
- blobs: [
103
- "bg-red-400",
104
- "bg-red-500",
105
- "bg-red-600"
106
- ]
211
+ }
107
212
  },
108
213
  orange: {
109
214
  card: {
@@ -111,12 +216,7 @@ const cardColorClasses = {
111
216
  bg: "bg-orange-400/60 border-orange-400",
112
217
  hover: "hover:bg-orange-400/20",
113
218
  click: "active:bg-orange-300/20"
114
- },
115
- blobs: [
116
- "bg-orange-400",
117
- "bg-orange-500",
118
- "bg-orange-600"
119
- ]
219
+ }
120
220
  },
121
221
  yellow: {
122
222
  card: {
@@ -124,12 +224,7 @@ const cardColorClasses = {
124
224
  bg: "bg-yellow-400/60 border-yellow-400",
125
225
  hover: "hover:bg-yellow-400/20",
126
226
  click: "active:bg-yellow-300/20"
127
- },
128
- blobs: [
129
- "bg-yellow-400",
130
- "bg-yellow-500",
131
- "bg-yellow-600"
132
- ]
227
+ }
133
228
  },
134
229
  green: {
135
230
  card: {
@@ -137,12 +232,7 @@ const cardColorClasses = {
137
232
  bg: "bg-green-400/60 border-green-400",
138
233
  hover: "hover:bg-green-400/20",
139
234
  click: "active:bg-green-300/20"
140
- },
141
- blobs: [
142
- "bg-green-400",
143
- "bg-green-500",
144
- "bg-green-600"
145
- ]
235
+ }
146
236
  },
147
237
  blue: {
148
238
  card: {
@@ -150,12 +240,7 @@ const cardColorClasses = {
150
240
  bg: "bg-blue-400/60 border-blue-400",
151
241
  hover: "hover:bg-blue-400/20",
152
242
  click: "active:bg-blue-300/20"
153
- },
154
- blobs: [
155
- "bg-blue-400",
156
- "bg-blue-500",
157
- "bg-blue-600"
158
- ]
243
+ }
159
244
  },
160
245
  purple: {
161
246
  card: {
@@ -163,12 +248,7 @@ const cardColorClasses = {
163
248
  bg: "bg-purple-400/60 border-purple-400",
164
249
  hover: "hover:bg-purple-400/20",
165
250
  click: "active:bg-purple-300/20"
166
- },
167
- blobs: [
168
- "bg-purple-400",
169
- "bg-purple-500",
170
- "bg-purple-600"
171
- ]
251
+ }
172
252
  },
173
253
  gray: {
174
254
  card: {
@@ -176,12 +256,7 @@ const cardColorClasses = {
176
256
  bg: "bg-gray-400/60 border-gray-400",
177
257
  hover: "hover:bg-gray-400/20",
178
258
  click: "active:bg-gray-300/20"
179
- },
180
- blobs: [
181
- "bg-gray-400",
182
- "bg-gray-500",
183
- "bg-gray-600"
184
- ]
259
+ }
185
260
  },
186
261
  darkgray: {
187
262
  card: {
@@ -189,12 +264,7 @@ const cardColorClasses = {
189
264
  bg: "bg-gray-800/60 border-gray-800",
190
265
  hover: "hover:bg-gray-800/40",
191
266
  click: "active:bg-gray-700/40"
192
- },
193
- blobs: [
194
- "bg-gray-500",
195
- "bg-gray-600",
196
- "bg-gray-700"
197
- ]
267
+ }
198
268
  },
199
269
  darkergray: {
200
270
  card: {
@@ -202,31 +272,17 @@ const cardColorClasses = {
202
272
  bg: "bg-gray-900/60 border-gray-900",
203
273
  hover: "hover:bg-gray-900/50",
204
274
  click: "active:bg-gray-800/50"
205
- },
206
- blobs: [
207
- "bg-gray-600",
208
- "bg-gray-700",
209
- "bg-gray-800"
210
- ]
275
+ }
211
276
  }
212
277
  };
213
- const blobClasses = [
214
- "animate-blob",
215
- "animate-blob1",
216
- "animate-blob2",
217
- "animate-blob3",
218
- "animate-blob4",
219
- "animate-blob5",
220
- "animate-blob6"
221
- ];
222
278
  const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
279
+ _jsxBranch();
223
280
  const props1 = _restProps(props, [
224
281
  "color",
225
282
  "hover",
226
283
  "row",
227
284
  "blobs"
228
285
  ]);
229
- const blob = Math.round(Math.random() * 6);
230
286
  return /* @__PURE__ */ _jsxS("div", {
231
287
  ...props1,
232
288
  children: [
@@ -244,36 +300,20 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
244
300
  }, {
245
301
  class: "absolute inset-0"
246
302
  }, null, 3, "OW_1"),
247
- props.blobs && /* @__PURE__ */ _jsxQ("div", null, {
248
- class: "motion-reduce:hidden absolute -z-10 inset-0 transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
249
- style: {
250
- containerType: "size"
303
+ props.blobs && /* @__PURE__ */ _jsxC(Blobs, {
304
+ get color() {
305
+ return props.color ?? "darkgray";
306
+ },
307
+ class: {
308
+ "overflow-clip": true
309
+ },
310
+ [_IMMUTABLE]: {
311
+ class: _IMMUTABLE,
312
+ color: _fnSignal((p0) => p0.color ?? "darkgray", [
313
+ props
314
+ ], 'p0.color??"darkgray"')
251
315
  }
252
- }, [
253
- /* @__PURE__ */ _jsxQ("div", {
254
- class: {
255
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
256
- [blobClasses[blob]]: true,
257
- [cardColorClasses[props.color ?? "darkgray"].blobs[0]]: true
258
- }
259
- }, null, null, 3, null),
260
- /* @__PURE__ */ _jsxQ("div", {
261
- class: {
262
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
263
- "anim-delay-[-5s]": true,
264
- [blobClasses[blob]]: true,
265
- [cardColorClasses[props.color ?? "darkgray"].blobs[1]]: true
266
- }
267
- }, null, null, 3, null),
268
- /* @__PURE__ */ _jsxQ("div", {
269
- class: {
270
- "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
271
- "anim-delay-[-10s]": true,
272
- [blobClasses[blob]]: true,
273
- [cardColorClasses[props.color ?? "darkgray"].blobs[2]]: true
274
- }
275
- }, null, null, 3, null)
276
- ], 1, "OW_2")
316
+ }, 3, "OW_2")
277
317
  ],
278
318
  class: {
279
319
  "relative p-8 border rounded-lg motion-safe:transition-all": true,
@@ -869,17 +909,15 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
869
909
  props
870
910
  ], '{"motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50":true,"fixed":p0.fixed,"absolute":!p0.fixed}')
871
911
  }, [
872
- /* @__PURE__ */ _jsxQ("div", null, {
873
- class: _fnSignal((p0) => ({
912
+ /* @__PURE__ */ _jsxQ("div", {
913
+ class: {
874
914
  "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
875
- "top-full mt-2": p0.value,
876
- "opacity-0 top-0": !p0.value
877
- }), [
878
- menu
879
- ], '{"sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full":true,"top-full mt-2":p0.value,"opacity-0 top-0":!p0.value}')
880
- }, /* @__PURE__ */ _jsxQ("div", null, {
915
+ "top-full mt-2": menu.value,
916
+ "opacity-0 top-0 scale-95": !menu.value
917
+ }
918
+ }, null, /* @__PURE__ */ _jsxQ("div", null, {
881
919
  class: {
882
- "flex flex-col motion-safe:transition-all max-w-7xl w-full p-2 bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": true
920
+ "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full p-2 bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": true
883
921
  }
884
922
  }, /* @__PURE__ */ _jsxC(Slot, {
885
923
  name: "mobile",
@@ -887,21 +925,21 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
887
925
  name: _IMMUTABLE
888
926
  }
889
927
  }, 3, "8r_0"), 1, null), 1, null),
890
- /* @__PURE__ */ _jsxQ("div", null, {
891
- class: _fnSignal((p0) => ({
892
- "bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl": !p0.floating,
893
- "p-2 pb-0": p0.floating
894
- }), [
895
- props
896
- ], '{"bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl":!p0.floating,"p-2 pb-0":p0.floating}')
897
- }, /* @__PURE__ */ _jsxQ("div", {
928
+ /* @__PURE__ */ _jsxQ("div", {
929
+ class: {
930
+ "bg-gray-800/50 border-b border-gray-700/50": !props.floating,
931
+ 'before:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': !props.floating,
932
+ "relative mt-2": props.floating
933
+ }
934
+ }, null, /* @__PURE__ */ _jsxQ("div", {
898
935
  class: {
899
- "flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl": true,
900
- "bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": props.floating
936
+ "flex justify-evenly w-full mx-auto px-2 max-w-7xl": true,
937
+ "bg-gray-800/50 border border-gray-700/50 rounded-lg": props.floating,
938
+ 'before:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': props.floating
901
939
  }
902
940
  }, null, [
903
941
  /* @__PURE__ */ _jsxQ("div", null, {
904
- class: "flex items-center flex-1 gap-2 justify-start"
942
+ class: "flex items-center flex-1 gap-2 py-2 justify-start"
905
943
  }, /* @__PURE__ */ _jsxC(Slot, {
906
944
  name: "start",
907
945
  [_IMMUTABLE]: {
@@ -909,7 +947,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
909
947
  }
910
948
  }, 3, "8r_1"), 1, null),
911
949
  /* @__PURE__ */ _jsxQ("div", null, {
912
- class: "flex items-center flex-1 gap-2 justify-center"
950
+ class: "flex items-center flex-1 gap-2 py-2 justify-center"
913
951
  }, /* @__PURE__ */ _jsxC(Slot, {
914
952
  name: "center",
915
953
  [_IMMUTABLE]: {
@@ -917,7 +955,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
917
955
  }
918
956
  }, 3, "8r_2"), 1, null),
919
957
  /* @__PURE__ */ _jsxQ("div", null, {
920
- class: "flex items-center flex-1 gap-2 justify-end"
958
+ class: "flex items-center flex-1 gap-2 py-2 justify-end"
921
959
  }, [
922
960
  /* @__PURE__ */ _jsxC(Slot, {
923
961
  name: "end",
@@ -1188,7 +1226,8 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
1188
1226
  "size"
1189
1227
  ]);
1190
1228
  const store = useStore({
1191
- opened: false
1229
+ opened: false,
1230
+ value: props1.value
1192
1231
  });
1193
1232
  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
1194
1233
  .lui-scroll {
@@ -1220,7 +1259,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
1220
1259
  children: props.values.map((value, i) => {
1221
1260
  return /* @__PURE__ */ _jsxQ("option", {
1222
1261
  value: _wrapSignal(value, "value")
1223
- }, null, value.name, 1, i);
1262
+ }, null, `${value.value}`, 1, i);
1224
1263
  })
1225
1264
  }, {
1226
1265
  class: {
@@ -1252,7 +1291,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
1252
1291
  id: _fnSignal((p0) => `lui-${p0.id}-name`, [
1253
1292
  props
1254
1293
  ], "`lui-${p0.id}-name`")
1255
- }, props.values.find((value) => value.value.toString() === props1.value)?.name ?? props.values[0].name, 1, "cA_3"),
1294
+ }, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "cA_3"),
1256
1295
  /* @__PURE__ */ _jsxC(ChevronDown, {
1257
1296
  width: 16,
1258
1297
  get class() {
@@ -1303,36 +1342,29 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
1303
1342
  id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
1304
1343
  props
1305
1344
  ], "`lui-${p0.id}-opts`")
1306
- }, props.values.map((value, i) => {
1345
+ }, props.values.map(({ name, value, color = "transparent" }, i) => {
1307
1346
  return /* @__PURE__ */ _jsxC(Button, {
1308
- color: "transparent",
1347
+ color,
1348
+ get size() {
1349
+ return props.size ?? "sm";
1350
+ },
1351
+ children: name,
1309
1352
  onClick$: /* @__PURE__ */ inlinedQrl(() => {
1310
1353
  const [props2, store2, value2] = useLexicalScope();
1311
1354
  store2.opened = false;
1312
1355
  const select = document.getElementById(props2.id);
1313
- select.value = value2.value.toString();
1314
- const name = document.getElementById(`lui-${props2.id}-name`);
1315
- if (name)
1316
- name.textContent = value2.name;
1356
+ select.value = value2.toString();
1357
+ store2.value = value2.toString();
1317
1358
  select.dispatchEvent(new Event("change"));
1318
1359
  }, "SelectInputRaw_component_div_div_Button_onClick_mLa0FdeKCLw", [
1319
1360
  props,
1320
1361
  store,
1321
1362
  value
1322
1363
  ]),
1323
- get class() {
1324
- return {
1325
- "opacity-0": !store.opened
1326
- };
1327
- },
1328
- children: _wrapSignal(value, "name"),
1329
1364
  [_IMMUTABLE]: {
1330
- class: _fnSignal((p0) => ({
1331
- "opacity-0": !p0.opened
1332
- }), [
1333
- store
1334
- ], '{"opacity-0":!p0.opened}'),
1335
- color: _IMMUTABLE
1365
+ size: _fnSignal((p0) => p0.size ?? "sm", [
1366
+ props
1367
+ ], 'p0.size??"sm"')
1336
1368
  }
1337
1369
  }, 1, i);
1338
1370
  }), 1, null)
@@ -1363,7 +1395,7 @@ const TextAreaRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
1363
1395
  class: {
1364
1396
  [InputClasses]: true,
1365
1397
  "h-32": true,
1366
- "cursor-pointer active:bg-gray-600": props.output,
1398
+ "cursor-pointer active:bg-gray-600 select-none": props.output,
1367
1399
  ...props1.class
1368
1400
  },
1369
1401
  onClick$: props.output ? /* @__PURE__ */ inlinedQrl((event, element) => {
@@ -1865,6 +1897,7 @@ const LogoWaterfall = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
1865
1897
  }, "LogoWaterfall_component_1hFl8GlECLI"));
1866
1898
  export {
1867
1899
  Anchor,
1900
+ Blobs,
1868
1901
  Button,
1869
1902
  ButtonAnchor,
1870
1903
  Card,
@@ -1896,6 +1929,7 @@ export {
1896
1929
  Toggle,
1897
1930
  blobClasses as _auto_blobClasses,
1898
1931
  buttonClass as _auto_buttonClass,
1932
+ blobColorClasses,
1899
1933
  buttonColorClasses,
1900
1934
  cardColorClasses,
1901
1935
  sizeClasses
package/lib-types/components/docs/Anchor.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/Blobs.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/Button.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/Card.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/ColorInput.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/IconsLogos.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/Nav.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/NumberInput.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/SelectInput.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/TextArea.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/TextInput.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/docs/Toggle.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@builder.io/qwik").Component<unknown>;
2
+ export default _default;
package/lib-types/components/elements/Blobs.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import type { sizeClasses } from './Button';
2
+ interface BlobProps {
3
+ class?: {
4
+ [key: string]: boolean;
5
+ };
6
+ color?: keyof typeof blobColorClasses | [string, string, string];
7
+ blur?: keyof typeof sizeClasses;
8
+ }
9
+ export declare const blobColorClasses: {
10
+ pink: string[];
11
+ red: string[];
12
+ orange: string[];
13
+ yellow: string[];
14
+ green: string[];
15
+ blue: string[];
16
+ purple: string[];
17
+ gray: string[];
18
+ darkgray: string[];
19
+ darkergray: string[];
20
+ };
21
+ export declare const Blobs: import("@builder.io/qwik").Component<BlobProps>;
22
+ export {};
package/lib-types/components/elements/Card.d.ts CHANGED
@@ -17,7 +17,6 @@ export declare const cardColorClasses: {
17
17
  hover: string;
18
18
  click: string;
19
19
  };
20
- blobs: string[];
21
20
  };
22
21
  red: {
23
22
  card: {
@@ -26,7 +25,6 @@ export declare const cardColorClasses: {
26
25
  hover: string;
27
26
  click: string;
28
27
  };
29
- blobs: string[];
30
28
  };
31
29
  orange: {
32
30
  card: {
@@ -35,7 +33,6 @@ export declare const cardColorClasses: {
35
33
  hover: string;
36
34
  click: string;
37
35
  };
38
- blobs: string[];
39
36
  };
40
37
  yellow: {
41
38
  card: {
@@ -44,7 +41,6 @@ export declare const cardColorClasses: {
44
41
  hover: string;
45
42
  click: string;
46
43
  };
47
- blobs: string[];
48
44
  };
49
45
  green: {
50
46
  card: {
@@ -53,7 +49,6 @@ export declare const cardColorClasses: {
53
49
  hover: string;
54
50
  click: string;
55
51
  };
56
- blobs: string[];
57
52
  };
58
53
  blue: {
59
54
  card: {
@@ -62,7 +57,6 @@ export declare const cardColorClasses: {
62
57
  hover: string;
63
58
  click: string;
64
59
  };
65
- blobs: string[];
66
60
  };
67
61
  purple: {
68
62
  card: {
@@ -71,7 +65,6 @@ export declare const cardColorClasses: {
71
65
  hover: string;
72
66
  click: string;
73
67
  };
74
- blobs: string[];
75
68
  };
76
69
  gray: {
77
70
  card: {
@@ -80,7 +73,6 @@ export declare const cardColorClasses: {
80
73
  hover: string;
81
74
  click: string;
82
75
  };
83
- blobs: string[];
84
76
  };
85
77
  darkgray: {
86
78
  card: {
@@ -89,7 +81,6 @@ export declare const cardColorClasses: {
89
81
  hover: string;
90
82
  click: string;
91
83
  };
92
- blobs: string[];
93
84
  };
94
85
  darkergray: {
95
86
  card: {
@@ -98,7 +89,6 @@ export declare const cardColorClasses: {
98
89
  hover: string;
99
90
  click: string;
100
91
  };
101
- blobs: string[];
102
92
  };
103
93
  };
104
94
  export declare const Card: import("@builder.io/qwik").Component<CardProps>;
package/lib-types/components/elements/SelectInput.d.ts CHANGED
@@ -9,8 +9,9 @@ interface SelectInputProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
9
9
  size?: keyof typeof sizeClasses;
10
10
  id: string;
11
11
  values: {
12
- name: string;
12
+ name: JSXChildren;
13
13
  value: string | number;
14
+ color?: keyof typeof buttonColorClasses;
14
15
  }[];
15
16
  }
16
17
  export declare const SelectInput: import("@builder.io/qwik").Component<SelectInputProps>;
package/lib-types/components/elements.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './elements/Anchor';
2
+ export * from './elements/Blobs';
2
3
  export * from './elements/Button';
3
4
  export * from './elements/Card';
4
5
  export * from './elements/ColorInput';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "0.10.0-4",
3
+ "version": "0.11.0",
4
4
  "description": "Luminescent UI library",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",
package/src/tailwind.config.js CHANGED
@@ -3,8 +3,8 @@ 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() * 70);
7
- const translateX0 = Math.floor(Math.random() * 70);
6
+ const translateX0Key = Math.floor(Math.random() * translateXPercentages.length);
7
+ const translateX0 = translateXPercentages[translateX0Key];
8
8
  translateXPercentages.splice(translateX0Key, 1);
9
9
  const translateX1Key = Math.floor(Math.random() * translateXPercentages.length);
10
10
  const translateX1 = translateXPercentages[translateX1Key];
@@ -44,10 +44,25 @@ function getBlobKeyFrame() {
44
44
  return keyframe;
45
45
  }
46
46
 
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
+
47
61
  module.exports = {
48
62
  content: ['./node_modules/@luminescent/ui/**/*.{mjs,cjs}'],
49
63
  theme: {
50
64
  extend: {
65
+ colors: { luminescent },
51
66
  animation: {
52
67
  blob: 'blob 15s infinite',
53
68
  blob1: 'blob1 15s infinite',
@@ -56,7 +71,6 @@ module.exports = {
56
71
  blob4: 'blob4 15s infinite',
57
72
  blob5: 'blob5 15s infinite',
58
73
  blob6: 'blob6 15s infinite',
59
- float: 'float 6s infinite',
60
74
  },
61
75
  keyframes: {
62
76
  blob: getBlobKeyFrame(),
package/lib-types/utils/simple-color-picker/color.d.ts DELETED
@@ -1,36 +0,0 @@
1
- export declare const clamp: (value: number, min: number, max: number) => number;
2
- export declare function getMousePosition(e: MouseEvent | TouchEvent): {
3
- x: number;
4
- y: number;
5
- };
6
- export declare const pad2: (c: string) => string;
7
- export type RGBAColor = {
8
- r: number;
9
- g: number;
10
- b: number;
11
- a?: number;
12
- };
13
- export type HSVAColor = {
14
- h: number;
15
- s: number;
16
- v: number;
17
- a?: number;
18
- };
19
- export declare function getBrightness(color: RGBAColor): number;
20
- export declare function hexNumberToRgb(color: number): {
21
- r: number;
22
- g: number;
23
- b: number;
24
- };
25
- export declare function rgbToHex(color: RGBAColor): string;
26
- export declare const hexStringToNumber: (color: string) => number;
27
- export declare function hsvToRgb(color: HSVAColor): {
28
- r: number;
29
- g: number;
30
- b: number;
31
- };
32
- export declare function rgbToHsv(color: RGBAColor): {
33
- h: number;
34
- s: number;
35
- v: number;
36
- };