@luminescent/ui 0.7.3 → 0.7.5
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/LICENSE +661 -661
- package/README.md +48 -48
- package/lib/index.qwik.cjs +1 -1
- package/lib/index.qwik.mjs +1 -1
- package/package.json +62 -62
- package/src/tailwind.config.js +71 -71
- package/lib-types/components/logos/LoadingIcon.d.ts +0 -8
package/README.md
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
<img src="./branding.png" width="400">
|
|
2
|
-
|
|
3
|
-
To use the Luminescent UI Qwik Library, you need to install the package from npm.
|
|
4
|
-
|
|
5
|
-
```bash
|
|
6
|
-
npm install @anuragroy/tailwindcss-animate @luminescent/ui
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
Once installed, since this is a tailwind based library, you need to include the following to your tailwind config
|
|
10
|
-
|
|
11
|
-
The theme and plugins properties are optional if you don't want to use blobs in the Card component
|
|
12
|
-
|
|
13
|
-
```javascript
|
|
14
|
-
/** @type {import('tailwindcss').Config} */
|
|
15
|
-
|
|
16
|
-
import tailwindConfig from '@luminescent/ui/config';
|
|
17
|
-
|
|
18
|
-
export default {
|
|
19
|
-
// required
|
|
20
|
-
content: [
|
|
21
|
-
// ...
|
|
22
|
-
...tailwindConfig.content,
|
|
23
|
-
],
|
|
24
|
-
// only for blobs in the Card component
|
|
25
|
-
theme: {
|
|
26
|
-
extend: {
|
|
27
|
-
animation: {
|
|
28
|
-
// ...
|
|
29
|
-
...tailwindConfig.theme.extend.animation,
|
|
30
|
-
},
|
|
31
|
-
keyframes: {
|
|
32
|
-
// ...
|
|
33
|
-
...tailwindConfig.theme.extend.keyframes,
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
plugins: [
|
|
38
|
-
// ...
|
|
39
|
-
require('@anuragroy/tailwindcss-animate'),
|
|
40
|
-
],
|
|
41
|
-
};
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
Once finished, you can import the components you need from the package.
|
|
45
|
-
|
|
46
|
-
```javascript
|
|
47
|
-
import { Button } from '@luminescent/ui';
|
|
48
|
-
```
|
|
1
|
+
<img src="./branding.png" width="400">
|
|
2
|
+
|
|
3
|
+
To use the Luminescent UI Qwik Library, you need to install the package from npm.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @anuragroy/tailwindcss-animate @luminescent/ui
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
Once installed, since this is a tailwind based library, you need to include the following to your tailwind config
|
|
10
|
+
|
|
11
|
+
The theme and plugins properties are optional if you don't want to use blobs in the Card component
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
/** @type {import('tailwindcss').Config} */
|
|
15
|
+
|
|
16
|
+
import tailwindConfig from '@luminescent/ui/config';
|
|
17
|
+
|
|
18
|
+
export default {
|
|
19
|
+
// required
|
|
20
|
+
content: [
|
|
21
|
+
// ...
|
|
22
|
+
...tailwindConfig.content,
|
|
23
|
+
],
|
|
24
|
+
// only for blobs in the Card component
|
|
25
|
+
theme: {
|
|
26
|
+
extend: {
|
|
27
|
+
animation: {
|
|
28
|
+
// ...
|
|
29
|
+
...tailwindConfig.theme.extend.animation,
|
|
30
|
+
},
|
|
31
|
+
keyframes: {
|
|
32
|
+
// ...
|
|
33
|
+
...tailwindConfig.theme.extend.keyframes,
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
plugins: [
|
|
38
|
+
// ...
|
|
39
|
+
require('@anuragroy/tailwindcss-animate'),
|
|
40
|
+
],
|
|
41
|
+
};
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Once finished, you can import the components you need from the package.
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
import { Button } from '@luminescent/ui';
|
|
48
|
+
```
|
package/lib/index.qwik.cjs
CHANGED
|
@@ -293,7 +293,7 @@ const TextInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
|
|
|
293
293
|
}, "TextInputRaw_component_ssloWlmBB4w"));
|
|
294
294
|
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
295
295
|
function getMousePosition(e) {
|
|
296
|
-
if (e instanceof TouchEvent) {
|
|
296
|
+
if (window.TouchEvent && e instanceof TouchEvent) {
|
|
297
297
|
const touch = e.touches[0];
|
|
298
298
|
return {
|
|
299
299
|
x: touch.clientX,
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -291,7 +291,7 @@ const TextInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
|
|
|
291
291
|
}, "TextInputRaw_component_ssloWlmBB4w"));
|
|
292
292
|
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
293
293
|
function getMousePosition(e) {
|
|
294
|
-
if (e instanceof TouchEvent) {
|
|
294
|
+
if (window.TouchEvent && e instanceof TouchEvent) {
|
|
295
295
|
const touch = e.touches[0];
|
|
296
296
|
return {
|
|
297
297
|
x: touch.clientX,
|
package/package.json
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@luminescent/ui",
|
|
3
|
-
"version": "0.7.
|
|
4
|
-
"description": "Luminescent UI library",
|
|
5
|
-
"main": "./lib/index.qwik.mjs",
|
|
6
|
-
"qwik": "./lib/index.qwik.mjs",
|
|
7
|
-
"types": "./lib-types/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"import": "./lib/index.qwik.mjs",
|
|
11
|
-
"require": "./lib/index.qwik.cjs",
|
|
12
|
-
"types": "./lib-types/index.d.ts"
|
|
13
|
-
},
|
|
14
|
-
"./config": "./src/tailwind.config.js"
|
|
15
|
-
},
|
|
16
|
-
"files": [
|
|
17
|
-
"lib",
|
|
18
|
-
"lib-types",
|
|
19
|
-
"src/tailwind.config.js"
|
|
20
|
-
],
|
|
21
|
-
"engines": {
|
|
22
|
-
"node": ">=15.0.0"
|
|
23
|
-
},
|
|
24
|
-
"license": "AGPL-3.0-or-later",
|
|
25
|
-
"private": false,
|
|
26
|
-
"type": "module",
|
|
27
|
-
"publishConfig": {
|
|
28
|
-
"access": "public"
|
|
29
|
-
},
|
|
30
|
-
"scripts": {
|
|
31
|
-
"build": "qwik build",
|
|
32
|
-
"build.lib": "vite build --mode lib",
|
|
33
|
-
"build.types": "tsc --emitDeclarationOnly",
|
|
34
|
-
"dev": "vite --mode ssr",
|
|
35
|
-
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
|
|
36
|
-
"lint": "eslint \"src/**/*.ts*\"",
|
|
37
|
-
"release": "np",
|
|
38
|
-
"start": "vite --open --mode ssr",
|
|
39
|
-
"test": "echo \"No test specified\" && exit 0",
|
|
40
|
-
"qwik": "qwik"
|
|
41
|
-
},
|
|
42
|
-
"devDependencies": {
|
|
43
|
-
"@anuragroy/tailwindcss-animate": "^1.0.6",
|
|
44
|
-
"@builder.io/qwik": "1.4.5",
|
|
45
|
-
"@builder.io/qwik-city": "^1.4.5",
|
|
46
|
-
"@types/eslint": "^8.56.2",
|
|
47
|
-
"@types/node": "^20.11.19",
|
|
48
|
-
"@typescript-eslint/eslint-plugin": "^7.0.2",
|
|
49
|
-
"@typescript-eslint/parser": "^7.0.2",
|
|
50
|
-
"autoprefixer": "^10.4.17",
|
|
51
|
-
"chart.js": "^4.4.1",
|
|
52
|
-
"eslint": "^8.56.0",
|
|
53
|
-
"eslint-plugin-qwik": "latest",
|
|
54
|
-
"np": "^9.2.0",
|
|
55
|
-
"postcss": "^8.4.35",
|
|
56
|
-
"tailwindcss": "3.4.1",
|
|
57
|
-
"typescript": "5.3.3",
|
|
58
|
-
"undici": "*",
|
|
59
|
-
"vite": "^5.1.3",
|
|
60
|
-
"vite-tsconfig-paths": "^4.3.1"
|
|
61
|
-
}
|
|
62
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@luminescent/ui",
|
|
3
|
+
"version": "0.7.5",
|
|
4
|
+
"description": "Luminescent UI library",
|
|
5
|
+
"main": "./lib/index.qwik.mjs",
|
|
6
|
+
"qwik": "./lib/index.qwik.mjs",
|
|
7
|
+
"types": "./lib-types/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./lib/index.qwik.mjs",
|
|
11
|
+
"require": "./lib/index.qwik.cjs",
|
|
12
|
+
"types": "./lib-types/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./config": "./src/tailwind.config.js"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"lib",
|
|
18
|
+
"lib-types",
|
|
19
|
+
"src/tailwind.config.js"
|
|
20
|
+
],
|
|
21
|
+
"engines": {
|
|
22
|
+
"node": ">=15.0.0"
|
|
23
|
+
},
|
|
24
|
+
"license": "AGPL-3.0-or-later",
|
|
25
|
+
"private": false,
|
|
26
|
+
"type": "module",
|
|
27
|
+
"publishConfig": {
|
|
28
|
+
"access": "public"
|
|
29
|
+
},
|
|
30
|
+
"scripts": {
|
|
31
|
+
"build": "qwik build",
|
|
32
|
+
"build.lib": "vite build --mode lib",
|
|
33
|
+
"build.types": "tsc --emitDeclarationOnly",
|
|
34
|
+
"dev": "vite --mode ssr",
|
|
35
|
+
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
|
|
36
|
+
"lint": "eslint \"src/**/*.ts*\"",
|
|
37
|
+
"release": "np",
|
|
38
|
+
"start": "vite --open --mode ssr",
|
|
39
|
+
"test": "echo \"No test specified\" && exit 0",
|
|
40
|
+
"qwik": "qwik"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@anuragroy/tailwindcss-animate": "^1.0.6",
|
|
44
|
+
"@builder.io/qwik": "1.4.5",
|
|
45
|
+
"@builder.io/qwik-city": "^1.4.5",
|
|
46
|
+
"@types/eslint": "^8.56.2",
|
|
47
|
+
"@types/node": "^20.11.19",
|
|
48
|
+
"@typescript-eslint/eslint-plugin": "^7.0.2",
|
|
49
|
+
"@typescript-eslint/parser": "^7.0.2",
|
|
50
|
+
"autoprefixer": "^10.4.17",
|
|
51
|
+
"chart.js": "^4.4.1",
|
|
52
|
+
"eslint": "^8.56.0",
|
|
53
|
+
"eslint-plugin-qwik": "latest",
|
|
54
|
+
"np": "^9.2.0",
|
|
55
|
+
"postcss": "^8.4.35",
|
|
56
|
+
"tailwindcss": "3.4.1",
|
|
57
|
+
"typescript": "5.3.3",
|
|
58
|
+
"undici": "*",
|
|
59
|
+
"vite": "^5.1.3",
|
|
60
|
+
"vite-tsconfig-paths": "^4.3.1"
|
|
61
|
+
}
|
|
62
|
+
}
|
package/src/tailwind.config.js
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
function getBlobKeyFrame() {
|
|
2
|
-
const translateXPercentages = [0, 19, 38, 57, 76];
|
|
3
|
-
const translateYPercentages = [0, 12, 25, 38, 50];
|
|
4
|
-
const scaleValues = [0.8, 1, 1.2, 1.4];
|
|
5
|
-
|
|
6
|
-
const translateX0Key = Math.floor(Math.random() * 70);
|
|
7
|
-
const translateX0 = Math.floor(Math.random() * 70);
|
|
8
|
-
translateXPercentages.splice(translateX0Key, 1);
|
|
9
|
-
const translateX1Key = Math.floor(Math.random() * translateXPercentages.length);
|
|
10
|
-
const translateX1 = translateXPercentages[translateX1Key];
|
|
11
|
-
translateXPercentages.splice(translateX1Key, 1);
|
|
12
|
-
const translateX2Key = Math.floor(Math.random() * translateXPercentages.length);
|
|
13
|
-
const translateX2 = translateXPercentages[translateX2Key];
|
|
14
|
-
translateXPercentages.splice(translateX2Key, 1);
|
|
15
|
-
const translateX3Key = Math.floor(Math.random() * translateXPercentages.length);
|
|
16
|
-
const translateX3 = translateXPercentages[translateX3Key];
|
|
17
|
-
translateXPercentages.splice(translateX3Key, 1);
|
|
18
|
-
|
|
19
|
-
const translateY0Key = Math.floor(Math.random() * translateYPercentages.length);
|
|
20
|
-
const translateY0 = translateYPercentages[translateY0Key];
|
|
21
|
-
translateYPercentages.splice(translateY0Key, 1);
|
|
22
|
-
const translateY1Key = Math.floor(Math.random() * translateYPercentages.length);
|
|
23
|
-
const translateY1 = translateYPercentages[translateY1Key];
|
|
24
|
-
translateYPercentages.splice(translateY1Key, 1);
|
|
25
|
-
const translateY2Key = Math.floor(Math.random() * translateYPercentages.length);
|
|
26
|
-
const translateY2 = translateYPercentages[translateY2Key];
|
|
27
|
-
translateYPercentages.splice(translateY2Key, 1);
|
|
28
|
-
const translateY3Key = Math.floor(Math.random() * translateYPercentages.length);
|
|
29
|
-
const translateY3 = translateYPercentages[translateY3Key];
|
|
30
|
-
translateYPercentages.splice(translateY3Key, 1);
|
|
31
|
-
|
|
32
|
-
const scale0 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
|
|
33
|
-
const scale1 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
|
|
34
|
-
const scale2 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
|
|
35
|
-
const scale3 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
|
|
36
|
-
|
|
37
|
-
const keyframe = {
|
|
38
|
-
'0%, 100%': { transform: `translate(${translateX0}cqw, ${translateY0}cqh) scale(${scale0})` },
|
|
39
|
-
'25%': { transform: `translate(${translateX1}cqw, ${translateY1}cqh) scale(${scale1})` },
|
|
40
|
-
'50%': { transform: `translate(${translateX2}cqw, ${translateY2}cqh) scale(${scale2})` },
|
|
41
|
-
'75%': { transform: `translate(${translateX3}cqw, ${translateY3}cqh) scale(${scale3})` },
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
return keyframe;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
module.exports = {
|
|
48
|
-
content: ['./node_modules/@luminescent/ui/**/*.{mjs,cjs}'],
|
|
49
|
-
theme: {
|
|
50
|
-
extend: {
|
|
51
|
-
animation: {
|
|
52
|
-
blob: 'blob 15s infinite',
|
|
53
|
-
blob1: 'blob1 15s infinite',
|
|
54
|
-
blob2: 'blob2 15s infinite',
|
|
55
|
-
blob3: 'blob3 15s infinite',
|
|
56
|
-
blob4: 'blob4 15s infinite',
|
|
57
|
-
blob5: 'blob5 15s infinite',
|
|
58
|
-
blob6: 'blob6 15s infinite',
|
|
59
|
-
float: 'float 6s infinite',
|
|
60
|
-
},
|
|
61
|
-
keyframes: {
|
|
62
|
-
blob: getBlobKeyFrame(),
|
|
63
|
-
blob1: getBlobKeyFrame(),
|
|
64
|
-
blob2: getBlobKeyFrame(),
|
|
65
|
-
blob3: getBlobKeyFrame(),
|
|
66
|
-
blob4: getBlobKeyFrame(),
|
|
67
|
-
blob5: getBlobKeyFrame(),
|
|
68
|
-
blob6: getBlobKeyFrame(),
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
},
|
|
1
|
+
function getBlobKeyFrame() {
|
|
2
|
+
const translateXPercentages = [0, 19, 38, 57, 76];
|
|
3
|
+
const translateYPercentages = [0, 12, 25, 38, 50];
|
|
4
|
+
const scaleValues = [0.8, 1, 1.2, 1.4];
|
|
5
|
+
|
|
6
|
+
const translateX0Key = Math.floor(Math.random() * 70);
|
|
7
|
+
const translateX0 = Math.floor(Math.random() * 70);
|
|
8
|
+
translateXPercentages.splice(translateX0Key, 1);
|
|
9
|
+
const translateX1Key = Math.floor(Math.random() * translateXPercentages.length);
|
|
10
|
+
const translateX1 = translateXPercentages[translateX1Key];
|
|
11
|
+
translateXPercentages.splice(translateX1Key, 1);
|
|
12
|
+
const translateX2Key = Math.floor(Math.random() * translateXPercentages.length);
|
|
13
|
+
const translateX2 = translateXPercentages[translateX2Key];
|
|
14
|
+
translateXPercentages.splice(translateX2Key, 1);
|
|
15
|
+
const translateX3Key = Math.floor(Math.random() * translateXPercentages.length);
|
|
16
|
+
const translateX3 = translateXPercentages[translateX3Key];
|
|
17
|
+
translateXPercentages.splice(translateX3Key, 1);
|
|
18
|
+
|
|
19
|
+
const translateY0Key = Math.floor(Math.random() * translateYPercentages.length);
|
|
20
|
+
const translateY0 = translateYPercentages[translateY0Key];
|
|
21
|
+
translateYPercentages.splice(translateY0Key, 1);
|
|
22
|
+
const translateY1Key = Math.floor(Math.random() * translateYPercentages.length);
|
|
23
|
+
const translateY1 = translateYPercentages[translateY1Key];
|
|
24
|
+
translateYPercentages.splice(translateY1Key, 1);
|
|
25
|
+
const translateY2Key = Math.floor(Math.random() * translateYPercentages.length);
|
|
26
|
+
const translateY2 = translateYPercentages[translateY2Key];
|
|
27
|
+
translateYPercentages.splice(translateY2Key, 1);
|
|
28
|
+
const translateY3Key = Math.floor(Math.random() * translateYPercentages.length);
|
|
29
|
+
const translateY3 = translateYPercentages[translateY3Key];
|
|
30
|
+
translateYPercentages.splice(translateY3Key, 1);
|
|
31
|
+
|
|
32
|
+
const scale0 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
|
|
33
|
+
const scale1 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
|
|
34
|
+
const scale2 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
|
|
35
|
+
const scale3 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
|
|
36
|
+
|
|
37
|
+
const keyframe = {
|
|
38
|
+
'0%, 100%': { transform: `translate(${translateX0}cqw, ${translateY0}cqh) scale(${scale0})` },
|
|
39
|
+
'25%': { transform: `translate(${translateX1}cqw, ${translateY1}cqh) scale(${scale1})` },
|
|
40
|
+
'50%': { transform: `translate(${translateX2}cqw, ${translateY2}cqh) scale(${scale2})` },
|
|
41
|
+
'75%': { transform: `translate(${translateX3}cqw, ${translateY3}cqh) scale(${scale3})` },
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
return keyframe;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
module.exports = {
|
|
48
|
+
content: ['./node_modules/@luminescent/ui/**/*.{mjs,cjs}'],
|
|
49
|
+
theme: {
|
|
50
|
+
extend: {
|
|
51
|
+
animation: {
|
|
52
|
+
blob: 'blob 15s infinite',
|
|
53
|
+
blob1: 'blob1 15s infinite',
|
|
54
|
+
blob2: 'blob2 15s infinite',
|
|
55
|
+
blob3: 'blob3 15s infinite',
|
|
56
|
+
blob4: 'blob4 15s infinite',
|
|
57
|
+
blob5: 'blob5 15s infinite',
|
|
58
|
+
blob6: 'blob6 15s infinite',
|
|
59
|
+
float: 'float 6s infinite',
|
|
60
|
+
},
|
|
61
|
+
keyframes: {
|
|
62
|
+
blob: getBlobKeyFrame(),
|
|
63
|
+
blob1: getBlobKeyFrame(),
|
|
64
|
+
blob2: getBlobKeyFrame(),
|
|
65
|
+
blob3: getBlobKeyFrame(),
|
|
66
|
+
blob4: getBlobKeyFrame(),
|
|
67
|
+
blob5: getBlobKeyFrame(),
|
|
68
|
+
blob6: getBlobKeyFrame(),
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
72
|
};
|