@luminescent/ui 0.10.0-3 → 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.
- package/lib/index.qwik.cjs +185 -146
- package/lib/index.qwik.mjs +186 -147
- package/lib-types/components/docs/Anchor.d.ts +2 -0
- package/lib-types/components/docs/Blobs.d.ts +2 -0
- package/lib-types/components/docs/Button.d.ts +2 -0
- package/lib-types/components/docs/Card.d.ts +2 -0
- package/lib-types/components/docs/ColorInput.d.ts +2 -0
- package/lib-types/components/docs/IconsLogos.d.ts +2 -0
- package/lib-types/components/docs/Nav.d.ts +2 -0
- package/lib-types/components/docs/NumberInput.d.ts +2 -0
- package/lib-types/components/docs/SelectInput.d.ts +2 -0
- package/lib-types/components/docs/TextArea.d.ts +2 -0
- package/lib-types/components/docs/TextInput.d.ts +2 -0
- package/lib-types/components/docs/Toggle.d.ts +2 -0
- package/lib-types/components/elements/Blobs.d.ts +22 -0
- package/lib-types/components/elements/Card.d.ts +0 -10
- package/lib-types/components/elements/SelectInput.d.ts +5 -3
- package/lib-types/components/elements.d.ts +1 -0
- package/package.json +1 -1
- package/src/tailwind.config.js +17 -3
- 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.
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
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",
|
|
875
|
-
class:
|
|
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":
|
|
878
|
-
"opacity-0 top-0": !
|
|
879
|
-
}
|
|
880
|
-
|
|
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",
|
|
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", {
|
|
900
931
|
class: {
|
|
901
|
-
"
|
|
902
|
-
"
|
|
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", {
|
|
937
|
+
class: {
|
|
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 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 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 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",
|
|
@@ -1186,10 +1224,12 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
|
|
|
1186
1224
|
"values",
|
|
1187
1225
|
"class",
|
|
1188
1226
|
"display",
|
|
1189
|
-
"color"
|
|
1227
|
+
"color",
|
|
1228
|
+
"size"
|
|
1190
1229
|
]);
|
|
1191
1230
|
const store = qwik.useStore({
|
|
1192
|
-
opened: false
|
|
1231
|
+
opened: false,
|
|
1232
|
+
value: props1.value
|
|
1193
1233
|
});
|
|
1194
1234
|
qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
|
|
1195
1235
|
.lui-scroll {
|
|
@@ -1221,7 +1261,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
|
|
|
1221
1261
|
children: props.values.map((value, i) => {
|
|
1222
1262
|
return /* @__PURE__ */ qwik._jsxQ("option", {
|
|
1223
1263
|
value: qwik._wrapSignal(value, "value")
|
|
1224
|
-
}, null, value.
|
|
1264
|
+
}, null, `${value.value}`, 1, i);
|
|
1225
1265
|
})
|
|
1226
1266
|
}, {
|
|
1227
1267
|
class: {
|
|
@@ -1235,7 +1275,9 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
|
|
|
1235
1275
|
get color() {
|
|
1236
1276
|
return props.color;
|
|
1237
1277
|
},
|
|
1238
|
-
size
|
|
1278
|
+
get size() {
|
|
1279
|
+
return props.size ?? "sm";
|
|
1280
|
+
},
|
|
1239
1281
|
get class() {
|
|
1240
1282
|
return {
|
|
1241
1283
|
"flex": true,
|
|
@@ -1251,7 +1293,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
|
|
|
1251
1293
|
id: qwik._fnSignal((p0) => `lui-${p0.id}-name`, [
|
|
1252
1294
|
props
|
|
1253
1295
|
], "`lui-${p0.id}-name`")
|
|
1254
|
-
}, props.values.find((value) => value.value.toString() ===
|
|
1296
|
+
}, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "cA_3"),
|
|
1255
1297
|
/* @__PURE__ */ qwik._jsxC(ChevronDown, {
|
|
1256
1298
|
width: 16,
|
|
1257
1299
|
get class() {
|
|
@@ -1288,7 +1330,9 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
|
|
|
1288
1330
|
props
|
|
1289
1331
|
], "p0.color"),
|
|
1290
1332
|
onClick$: qwik._IMMUTABLE,
|
|
1291
|
-
size: qwik.
|
|
1333
|
+
size: qwik._fnSignal((p0) => p0.size ?? "sm", [
|
|
1334
|
+
props
|
|
1335
|
+
], 'p0.size??"sm"')
|
|
1292
1336
|
}
|
|
1293
1337
|
}, 1, "cA_5"),
|
|
1294
1338
|
/* @__PURE__ */ qwik._jsxQ("div", {
|
|
@@ -1300,36 +1344,29 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
|
|
|
1300
1344
|
id: qwik._fnSignal((p0) => `lui-${p0.id}-opts`, [
|
|
1301
1345
|
props
|
|
1302
1346
|
], "`lui-${p0.id}-opts`")
|
|
1303
|
-
}, props.values.map((value, i) => {
|
|
1347
|
+
}, props.values.map(({ name, value, color = "transparent" }, i) => {
|
|
1304
1348
|
return /* @__PURE__ */ qwik._jsxC(Button, {
|
|
1305
|
-
color
|
|
1349
|
+
color,
|
|
1350
|
+
get size() {
|
|
1351
|
+
return props.size ?? "sm";
|
|
1352
|
+
},
|
|
1353
|
+
children: name,
|
|
1306
1354
|
onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
|
|
1307
1355
|
const [props2, store2, value2] = qwik.useLexicalScope();
|
|
1308
1356
|
store2.opened = false;
|
|
1309
1357
|
const select = document.getElementById(props2.id);
|
|
1310
|
-
select.value = value2.
|
|
1311
|
-
|
|
1312
|
-
if (name)
|
|
1313
|
-
name.textContent = value2.name;
|
|
1358
|
+
select.value = value2.toString();
|
|
1359
|
+
store2.value = value2.toString();
|
|
1314
1360
|
select.dispatchEvent(new Event("change"));
|
|
1315
1361
|
}, "SelectInputRaw_component_div_div_Button_onClick_mLa0FdeKCLw", [
|
|
1316
1362
|
props,
|
|
1317
1363
|
store,
|
|
1318
1364
|
value
|
|
1319
1365
|
]),
|
|
1320
|
-
get class() {
|
|
1321
|
-
return {
|
|
1322
|
-
"opacity-0": !store.opened
|
|
1323
|
-
};
|
|
1324
|
-
},
|
|
1325
|
-
children: qwik._wrapSignal(value, "name"),
|
|
1326
1366
|
[qwik._IMMUTABLE]: {
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
store
|
|
1331
|
-
], '{"opacity-0":!p0.opened}'),
|
|
1332
|
-
color: qwik._IMMUTABLE
|
|
1367
|
+
size: qwik._fnSignal((p0) => p0.size ?? "sm", [
|
|
1368
|
+
props
|
|
1369
|
+
], 'p0.size??"sm"')
|
|
1333
1370
|
}
|
|
1334
1371
|
}, 1, i);
|
|
1335
1372
|
}), 1, null)
|
|
@@ -1360,7 +1397,7 @@ const TextAreaRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
1360
1397
|
class: {
|
|
1361
1398
|
[InputClasses]: true,
|
|
1362
1399
|
"h-32": true,
|
|
1363
|
-
"cursor-pointer active:bg-gray-600": props.output,
|
|
1400
|
+
"cursor-pointer active:bg-gray-600 select-none": props.output,
|
|
1364
1401
|
...props1.class
|
|
1365
1402
|
},
|
|
1366
1403
|
onClick$: props.output ? /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
|
|
@@ -1861,6 +1898,7 @@ const LogoWaterfall = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
|
|
|
1861
1898
|
}, 0, "Pt_0");
|
|
1862
1899
|
}, "LogoWaterfall_component_1hFl8GlECLI"));
|
|
1863
1900
|
exports.Anchor = Anchor;
|
|
1901
|
+
exports.Blobs = Blobs;
|
|
1864
1902
|
exports.Button = Button;
|
|
1865
1903
|
exports.ButtonAnchor = ButtonAnchor;
|
|
1866
1904
|
exports.Card = Card;
|
|
@@ -1892,6 +1930,7 @@ exports.TextInputRaw = TextInputRaw;
|
|
|
1892
1930
|
exports.Toggle = Toggle;
|
|
1893
1931
|
exports._auto_blobClasses = blobClasses;
|
|
1894
1932
|
exports._auto_buttonClass = buttonClass;
|
|
1933
|
+
exports.blobColorClasses = blobColorClasses;
|
|
1895
1934
|
exports.buttonColorClasses = buttonColorClasses;
|
|
1896
1935
|
exports.cardColorClasses = cardColorClasses;
|
|
1897
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,
|
|
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__ */
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
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",
|
|
873
|
-
class:
|
|
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":
|
|
876
|
-
"opacity-0 top-0": !
|
|
877
|
-
}
|
|
878
|
-
|
|
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",
|
|
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", {
|
|
898
929
|
class: {
|
|
899
|
-
"
|
|
900
|
-
"
|
|
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", {
|
|
935
|
+
class: {
|
|
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 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 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 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",
|
|
@@ -1184,10 +1222,12 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
|
|
|
1184
1222
|
"values",
|
|
1185
1223
|
"class",
|
|
1186
1224
|
"display",
|
|
1187
|
-
"color"
|
|
1225
|
+
"color",
|
|
1226
|
+
"size"
|
|
1188
1227
|
]);
|
|
1189
1228
|
const store = useStore({
|
|
1190
|
-
opened: false
|
|
1229
|
+
opened: false,
|
|
1230
|
+
value: props1.value
|
|
1191
1231
|
});
|
|
1192
1232
|
useStylesQrl(/* @__PURE__ */ inlinedQrl(`
|
|
1193
1233
|
.lui-scroll {
|
|
@@ -1219,7 +1259,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
|
|
|
1219
1259
|
children: props.values.map((value, i) => {
|
|
1220
1260
|
return /* @__PURE__ */ _jsxQ("option", {
|
|
1221
1261
|
value: _wrapSignal(value, "value")
|
|
1222
|
-
}, null, value.
|
|
1262
|
+
}, null, `${value.value}`, 1, i);
|
|
1223
1263
|
})
|
|
1224
1264
|
}, {
|
|
1225
1265
|
class: {
|
|
@@ -1233,7 +1273,9 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
|
|
|
1233
1273
|
get color() {
|
|
1234
1274
|
return props.color;
|
|
1235
1275
|
},
|
|
1236
|
-
size
|
|
1276
|
+
get size() {
|
|
1277
|
+
return props.size ?? "sm";
|
|
1278
|
+
},
|
|
1237
1279
|
get class() {
|
|
1238
1280
|
return {
|
|
1239
1281
|
"flex": true,
|
|
@@ -1249,7 +1291,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
|
|
|
1249
1291
|
id: _fnSignal((p0) => `lui-${p0.id}-name`, [
|
|
1250
1292
|
props
|
|
1251
1293
|
], "`lui-${p0.id}-name`")
|
|
1252
|
-
}, props.values.find((value) => value.value.toString() ===
|
|
1294
|
+
}, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "cA_3"),
|
|
1253
1295
|
/* @__PURE__ */ _jsxC(ChevronDown, {
|
|
1254
1296
|
width: 16,
|
|
1255
1297
|
get class() {
|
|
@@ -1286,7 +1328,9 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
|
|
|
1286
1328
|
props
|
|
1287
1329
|
], "p0.color"),
|
|
1288
1330
|
onClick$: _IMMUTABLE,
|
|
1289
|
-
size:
|
|
1331
|
+
size: _fnSignal((p0) => p0.size ?? "sm", [
|
|
1332
|
+
props
|
|
1333
|
+
], 'p0.size??"sm"')
|
|
1290
1334
|
}
|
|
1291
1335
|
}, 1, "cA_5"),
|
|
1292
1336
|
/* @__PURE__ */ _jsxQ("div", {
|
|
@@ -1298,36 +1342,29 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
|
|
|
1298
1342
|
id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
|
|
1299
1343
|
props
|
|
1300
1344
|
], "`lui-${p0.id}-opts`")
|
|
1301
|
-
}, props.values.map((value, i) => {
|
|
1345
|
+
}, props.values.map(({ name, value, color = "transparent" }, i) => {
|
|
1302
1346
|
return /* @__PURE__ */ _jsxC(Button, {
|
|
1303
|
-
color
|
|
1347
|
+
color,
|
|
1348
|
+
get size() {
|
|
1349
|
+
return props.size ?? "sm";
|
|
1350
|
+
},
|
|
1351
|
+
children: name,
|
|
1304
1352
|
onClick$: /* @__PURE__ */ inlinedQrl(() => {
|
|
1305
1353
|
const [props2, store2, value2] = useLexicalScope();
|
|
1306
1354
|
store2.opened = false;
|
|
1307
1355
|
const select = document.getElementById(props2.id);
|
|
1308
|
-
select.value = value2.
|
|
1309
|
-
|
|
1310
|
-
if (name)
|
|
1311
|
-
name.textContent = value2.name;
|
|
1356
|
+
select.value = value2.toString();
|
|
1357
|
+
store2.value = value2.toString();
|
|
1312
1358
|
select.dispatchEvent(new Event("change"));
|
|
1313
1359
|
}, "SelectInputRaw_component_div_div_Button_onClick_mLa0FdeKCLw", [
|
|
1314
1360
|
props,
|
|
1315
1361
|
store,
|
|
1316
1362
|
value
|
|
1317
1363
|
]),
|
|
1318
|
-
get class() {
|
|
1319
|
-
return {
|
|
1320
|
-
"opacity-0": !store.opened
|
|
1321
|
-
};
|
|
1322
|
-
},
|
|
1323
|
-
children: _wrapSignal(value, "name"),
|
|
1324
1364
|
[_IMMUTABLE]: {
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
store
|
|
1329
|
-
], '{"opacity-0":!p0.opened}'),
|
|
1330
|
-
color: _IMMUTABLE
|
|
1365
|
+
size: _fnSignal((p0) => p0.size ?? "sm", [
|
|
1366
|
+
props
|
|
1367
|
+
], 'p0.size??"sm"')
|
|
1331
1368
|
}
|
|
1332
1369
|
}, 1, i);
|
|
1333
1370
|
}), 1, null)
|
|
@@ -1358,7 +1395,7 @@ const TextAreaRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
1358
1395
|
class: {
|
|
1359
1396
|
[InputClasses]: true,
|
|
1360
1397
|
"h-32": true,
|
|
1361
|
-
"cursor-pointer active:bg-gray-600": props.output,
|
|
1398
|
+
"cursor-pointer active:bg-gray-600 select-none": props.output,
|
|
1362
1399
|
...props1.class
|
|
1363
1400
|
},
|
|
1364
1401
|
onClick$: props.output ? /* @__PURE__ */ inlinedQrl((event, element) => {
|
|
@@ -1860,6 +1897,7 @@ const LogoWaterfall = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
|
|
|
1860
1897
|
}, "LogoWaterfall_component_1hFl8GlECLI"));
|
|
1861
1898
|
export {
|
|
1862
1899
|
Anchor,
|
|
1900
|
+
Blobs,
|
|
1863
1901
|
Button,
|
|
1864
1902
|
ButtonAnchor,
|
|
1865
1903
|
Card,
|
|
@@ -1891,6 +1929,7 @@ export {
|
|
|
1891
1929
|
Toggle,
|
|
1892
1930
|
blobClasses as _auto_blobClasses,
|
|
1893
1931
|
buttonClass as _auto_buttonClass,
|
|
1932
|
+
blobColorClasses,
|
|
1894
1933
|
buttonColorClasses,
|
|
1895
1934
|
cardColorClasses,
|
|
1896
1935
|
sizeClasses
|
|
@@ -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 {};
|
|
@@ -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>;
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import type { JSXChildren, PropsOf } from '@builder.io/qwik';
|
|
2
|
-
import type { buttonColorClasses } from './Button';
|
|
3
|
-
interface SelectInputProps extends Omit<PropsOf<'select'>, 'class'> {
|
|
2
|
+
import type { buttonColorClasses, sizeClasses } from './Button';
|
|
3
|
+
interface SelectInputProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
|
|
4
4
|
class?: {
|
|
5
5
|
[key: string]: boolean;
|
|
6
6
|
};
|
|
7
7
|
display?: JSXChildren;
|
|
8
8
|
color?: keyof typeof buttonColorClasses;
|
|
9
|
+
size?: keyof typeof sizeClasses;
|
|
9
10
|
id: string;
|
|
10
11
|
values: {
|
|
11
|
-
name:
|
|
12
|
+
name: JSXChildren;
|
|
12
13
|
value: string | number;
|
|
14
|
+
color?: keyof typeof buttonColorClasses;
|
|
13
15
|
}[];
|
|
14
16
|
}
|
|
15
17
|
export declare const SelectInput: import("@builder.io/qwik").Component<SelectInputProps>;
|
package/package.json
CHANGED
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() *
|
|
7
|
-
const translateX0 =
|
|
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(),
|
|
@@ -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
|
-
};
|