@luminescent/ui 0.2.3 → 0.3.1
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/README.md +40 -0
- package/lib-types/tailwind-config.d.ts +114 -0
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1 +1,41 @@
|
|
|
1
1
|
# Luminescent UI Qwik Library ⚡️
|
|
2
|
+
|
|
3
|
+
To use the Luminescent UI Qwik Library, you need to install the package from npm.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @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
|
+
The theme property is optional if you don't want to use blobs in the Card component
|
|
11
|
+
|
|
12
|
+
```javascript
|
|
13
|
+
/** @type {import('tailwindcss').Config} */
|
|
14
|
+
|
|
15
|
+
import tailwindConfig from '@luminescent/ui/config';
|
|
16
|
+
|
|
17
|
+
export default {
|
|
18
|
+
content: [
|
|
19
|
+
// ...
|
|
20
|
+
...tailwindConfig.content,
|
|
21
|
+
],
|
|
22
|
+
theme: {
|
|
23
|
+
extend: {
|
|
24
|
+
animation: {
|
|
25
|
+
// ...
|
|
26
|
+
...tailwindConfig.animation,
|
|
27
|
+
},
|
|
28
|
+
keyframes: {
|
|
29
|
+
// ...
|
|
30
|
+
...tailwindConfig.keyframes,
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Once finished, you can import the components you need from the package.
|
|
38
|
+
|
|
39
|
+
```javascript
|
|
40
|
+
import { Button } from '@luminescent/ui';
|
|
41
|
+
```
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
content: string[];
|
|
3
|
+
animation: {
|
|
4
|
+
blob: string;
|
|
5
|
+
blob1: string;
|
|
6
|
+
blob2: string;
|
|
7
|
+
blob3: string;
|
|
8
|
+
blob4: string;
|
|
9
|
+
blob5: string;
|
|
10
|
+
blob6: string;
|
|
11
|
+
float: string;
|
|
12
|
+
};
|
|
13
|
+
keyframes: {
|
|
14
|
+
blob: {
|
|
15
|
+
'0%, 100%': {
|
|
16
|
+
transform: string;
|
|
17
|
+
};
|
|
18
|
+
'25%': {
|
|
19
|
+
transform: string;
|
|
20
|
+
};
|
|
21
|
+
'50%': {
|
|
22
|
+
transform: string;
|
|
23
|
+
};
|
|
24
|
+
'75%': {
|
|
25
|
+
transform: string;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
blob1: {
|
|
29
|
+
'0%, 100%': {
|
|
30
|
+
transform: string;
|
|
31
|
+
};
|
|
32
|
+
'25%': {
|
|
33
|
+
transform: string;
|
|
34
|
+
};
|
|
35
|
+
'50%': {
|
|
36
|
+
transform: string;
|
|
37
|
+
};
|
|
38
|
+
'75%': {
|
|
39
|
+
transform: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
blob2: {
|
|
43
|
+
'0%, 100%': {
|
|
44
|
+
transform: string;
|
|
45
|
+
};
|
|
46
|
+
'25%': {
|
|
47
|
+
transform: string;
|
|
48
|
+
};
|
|
49
|
+
'50%': {
|
|
50
|
+
transform: string;
|
|
51
|
+
};
|
|
52
|
+
'75%': {
|
|
53
|
+
transform: string;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
blob3: {
|
|
57
|
+
'0%, 100%': {
|
|
58
|
+
transform: string;
|
|
59
|
+
};
|
|
60
|
+
'25%': {
|
|
61
|
+
transform: string;
|
|
62
|
+
};
|
|
63
|
+
'50%': {
|
|
64
|
+
transform: string;
|
|
65
|
+
};
|
|
66
|
+
'75%': {
|
|
67
|
+
transform: string;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
blob4: {
|
|
71
|
+
'0%, 100%': {
|
|
72
|
+
transform: string;
|
|
73
|
+
};
|
|
74
|
+
'25%': {
|
|
75
|
+
transform: string;
|
|
76
|
+
};
|
|
77
|
+
'50%': {
|
|
78
|
+
transform: string;
|
|
79
|
+
};
|
|
80
|
+
'75%': {
|
|
81
|
+
transform: string;
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
blob5: {
|
|
85
|
+
'0%, 100%': {
|
|
86
|
+
transform: string;
|
|
87
|
+
};
|
|
88
|
+
'25%': {
|
|
89
|
+
transform: string;
|
|
90
|
+
};
|
|
91
|
+
'50%': {
|
|
92
|
+
transform: string;
|
|
93
|
+
};
|
|
94
|
+
'75%': {
|
|
95
|
+
transform: string;
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
blob6: {
|
|
99
|
+
'0%, 100%': {
|
|
100
|
+
transform: string;
|
|
101
|
+
};
|
|
102
|
+
'25%': {
|
|
103
|
+
transform: string;
|
|
104
|
+
};
|
|
105
|
+
'50%': {
|
|
106
|
+
transform: string;
|
|
107
|
+
};
|
|
108
|
+
'75%': {
|
|
109
|
+
transform: string;
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
};
|
|
114
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luminescent/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Luminescent UI library",
|
|
5
5
|
"main": "./lib/index.qwik.mjs",
|
|
6
6
|
"qwik": "./lib/index.qwik.mjs",
|
|
@@ -10,11 +10,15 @@
|
|
|
10
10
|
"import": "./lib/index.qwik.mjs",
|
|
11
11
|
"require": "./lib/index.qwik.cjs",
|
|
12
12
|
"types": "./lib-types/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./config": {
|
|
15
|
+
"import": "./src/tailwind.config.ts"
|
|
13
16
|
}
|
|
14
17
|
},
|
|
15
18
|
"files": [
|
|
16
19
|
"lib",
|
|
17
|
-
"lib-types"
|
|
20
|
+
"lib-types",
|
|
21
|
+
"src/tailwind.config.ts"
|
|
18
22
|
],
|
|
19
23
|
"engines": {
|
|
20
24
|
"node": ">=15.0.0"
|