@premium-ai/preview-ui 1.0.4 → 1.0.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/CHANGELOG.md +115 -39
- package/LICENSE +20 -20
- package/README.md +51 -48
- package/demo/README.md +16 -0
- package/demo/eslint.config.js +29 -0
- package/demo/index.html +13 -0
- package/demo/package.json +30 -0
- package/demo/public/vite.svg +1 -0
- package/demo/src/App.css +42 -0
- package/demo/src/App.jsx +112 -0
- package/demo/src/assets/react.svg +1 -0
- package/demo/src/index.css +2 -0
- package/demo/src/main.jsx +10 -0
- package/demo/vite.config.js +8 -0
- package/index.js +2 -2
- package/package.json +23 -46
- package/release.config.js +21 -21
- package/tailwind-ai-preview-plugin.js +105 -69
package/CHANGELOG.md
CHANGED
|
@@ -1,39 +1,115 @@
|
|
|
1
|
-
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
### Bug Fixes
|
|
5
|
-
|
|
6
|
-
*
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
*
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
1
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* pages build install tailwind for plugin ([a5fd864](https://github.com/tdogga14-ctrl/preview-ui/commit/a5fd86431ebd9acf8e66f664015024c772b1f510))
|
|
7
|
+
* pages build installs tailwind for plugin ([fac2d2d](https://github.com/tdogga14-ctrl/preview-ui/commit/fac2d2dfa3203b2447dca61895bca340182f791f))
|
|
8
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
9
|
+
|
|
10
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* pages build install tailwind for plugin ([a5fd864](https://github.com/tdogga14-ctrl/preview-ui/commit/a5fd86431ebd9acf8e66f664015024c772b1f510))
|
|
16
|
+
* pages build installs tailwind for plugin ([fac2d2d](https://github.com/tdogga14-ctrl/preview-ui/commit/fac2d2dfa3203b2447dca61895bca340182f791f))
|
|
17
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
18
|
+
|
|
19
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* pages build install tailwind for plugin ([a5fd864](https://github.com/tdogga14-ctrl/preview-ui/commit/a5fd86431ebd9acf8e66f664015024c772b1f510))
|
|
25
|
+
* pages build installs tailwind for plugin ([fac2d2d](https://github.com/tdogga14-ctrl/preview-ui/commit/fac2d2dfa3203b2447dca61895bca340182f791f))
|
|
26
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
27
|
+
|
|
28
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Bug Fixes
|
|
32
|
+
|
|
33
|
+
* pages build install tailwind for plugin ([a5fd864](https://github.com/tdogga14-ctrl/preview-ui/commit/a5fd86431ebd9acf8e66f664015024c772b1f510))
|
|
34
|
+
* pages build installs tailwind for plugin ([fac2d2d](https://github.com/tdogga14-ctrl/preview-ui/commit/fac2d2dfa3203b2447dca61895bca340182f791f))
|
|
35
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
36
|
+
|
|
37
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
### Bug Fixes
|
|
41
|
+
|
|
42
|
+
* pages build install tailwind for plugin ([a5fd864](https://github.com/tdogga14-ctrl/preview-ui/commit/a5fd86431ebd9acf8e66f664015024c772b1f510))
|
|
43
|
+
* pages build installs tailwind for plugin ([fac2d2d](https://github.com/tdogga14-ctrl/preview-ui/commit/fac2d2dfa3203b2447dca61895bca340182f791f))
|
|
44
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
45
|
+
|
|
46
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
### Bug Fixes
|
|
50
|
+
|
|
51
|
+
* pages build install tailwind for plugin ([a5fd864](https://github.com/tdogga14-ctrl/preview-ui/commit/a5fd86431ebd9acf8e66f664015024c772b1f510))
|
|
52
|
+
* pages build installs tailwind for plugin ([fac2d2d](https://github.com/tdogga14-ctrl/preview-ui/commit/fac2d2dfa3203b2447dca61895bca340182f791f))
|
|
53
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
54
|
+
|
|
55
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
### Bug Fixes
|
|
59
|
+
|
|
60
|
+
* pages build install tailwind for plugin ([a5fd864](https://github.com/tdogga14-ctrl/preview-ui/commit/a5fd86431ebd9acf8e66f664015024c772b1f510))
|
|
61
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
62
|
+
|
|
63
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
### Bug Fixes
|
|
67
|
+
|
|
68
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
69
|
+
|
|
70
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
### Bug Fixes
|
|
74
|
+
|
|
75
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
76
|
+
|
|
77
|
+
## [1.0.4](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.3...v1.0.4) (2025-12-21)
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
### Bug Fixes
|
|
81
|
+
|
|
82
|
+
* remove accidental submodule and flatten repo ([246d82a](https://github.com/tdogga14-ctrl/preview-ui/commit/246d82ae3a249c2c26d074a4880f6e92ba82fa74))
|
|
83
|
+
|
|
84
|
+
## [1.0.3](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.2...v1.0.3) (2025-12-21)
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
### Bug Fixes
|
|
88
|
+
|
|
89
|
+
* update README usage ([740609d](https://github.com/tdogga14-ctrl/preview-ui/commit/740609d2a65a0a45d94d5df13c41a918ba5ddf4e))
|
|
90
|
+
|
|
91
|
+
## [1.0.2](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.1...v1.0.2) (2025-12-19)
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
### Bug Fixes
|
|
95
|
+
|
|
96
|
+
* correct npmrc for public package publishing ([bbb9fd4](https://github.com/tdogga14-ctrl/preview-ui/commit/bbb9fd434d804c553922677c8cae5dc143049cea))
|
|
97
|
+
|
|
98
|
+
## [1.0.1](https://github.com/tdogga14-ctrl/preview-ui/compare/v1.0.0...v1.0.1) (2025-12-19)
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
### Bug Fixes
|
|
102
|
+
|
|
103
|
+
* correct npm package scope to [@tdogga14](https://github.com/tdogga14) ([b49e304](https://github.com/tdogga14-ctrl/preview-ui/commit/b49e304238f5569e3ae437bd4623e3954be263b3))
|
|
104
|
+
|
|
105
|
+
# 1.0.0 (2025-12-19)
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
### Bug Fixes
|
|
109
|
+
|
|
110
|
+
* update node version ([1570243](https://github.com/tdogga14-ctrl/preview-ui/commit/157024340046f5320e70e9df6efbc933279e3680))
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
### Features
|
|
114
|
+
|
|
115
|
+
* initial setup ([fa58d4d](https://github.com/tdogga14-ctrl/preview-ui/commit/fa58d4db705c31dd3fd045cd142618de69364fc8))
|
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Premium AI
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Premium AI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,49 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<div class="
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<span class="quality-badge text-green-500">HD</span>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
</div>
|
|
1
|
+
Use it to drop in ready-made loading, progress, skeleton, error, and upsell UI classes for preview flows.
|
|
2
|
+
|
|
3
|
+
## ⚡ Quick start
|
|
4
|
+
|
|
5
|
+
```text
|
|
6
|
+
Install:
|
|
7
|
+
npm install @premium-ai/preview-ui --save-dev
|
|
8
|
+
|
|
9
|
+
Add the plugin to Tailwind:
|
|
10
|
+
// tailwind.config.js
|
|
11
|
+
const previewUI = require('@premium-ai/preview-ui');
|
|
12
|
+
|
|
13
|
+
module.exports = {
|
|
14
|
+
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
|
|
15
|
+
darkMode: 'media',
|
|
16
|
+
plugins: [previewUI],
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
Use the classes:
|
|
20
|
+
<div class="ai-preview fade-in loaded">
|
|
21
|
+
<div class="preview-loading">
|
|
22
|
+
<i>⏳</i>
|
|
23
|
+
<p class="text-sm text-gray-600">Processing... 45%</p>
|
|
24
|
+
<div class="progress">
|
|
25
|
+
<div class="progress-bar" style="width: 45%;"></div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="skeleton mt-4"></div>
|
|
30
|
+
|
|
31
|
+
<div class="preview-image-container mt-4">
|
|
32
|
+
<img class="preview-image loaded" src="/path/to/image.jpg" alt="AI headshot" />
|
|
33
|
+
<div class="preview-overlay">
|
|
34
|
+
<button>Retake</button>
|
|
35
|
+
<button>Download</button>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div class="upsell-card mt-4 p-4 rounded-xl">
|
|
40
|
+
<p class="font-semibold">Upgrade for HD exports</p>
|
|
41
|
+
<span class="quality-badge text-green-500">HD</span>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="error-state mt-4">
|
|
45
|
+
<i>⚠️</i>
|
|
46
|
+
<p>Something went wrong. Try again.</p>
|
|
47
|
+
<button>Retry</button>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
Note: Icon fonts (Font Awesome, etc.) are not included. Use your own icons if you want.
|
|
49
52
|
```
|
package/demo/README.md
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# React + Vite
|
|
2
|
+
|
|
3
|
+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
+
|
|
5
|
+
Currently, two official plugins are available:
|
|
6
|
+
|
|
7
|
+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
|
8
|
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
|
+
|
|
10
|
+
## React Compiler
|
|
11
|
+
|
|
12
|
+
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
|
13
|
+
|
|
14
|
+
## Expanding the ESLint configuration
|
|
15
|
+
|
|
16
|
+
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import js from '@eslint/js'
|
|
2
|
+
import globals from 'globals'
|
|
3
|
+
import reactHooks from 'eslint-plugin-react-hooks'
|
|
4
|
+
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
5
|
+
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
6
|
+
|
|
7
|
+
export default defineConfig([
|
|
8
|
+
globalIgnores(['dist']),
|
|
9
|
+
{
|
|
10
|
+
files: ['**/*.{js,jsx}'],
|
|
11
|
+
extends: [
|
|
12
|
+
js.configs.recommended,
|
|
13
|
+
reactHooks.configs.flat.recommended,
|
|
14
|
+
reactRefresh.configs.vite,
|
|
15
|
+
],
|
|
16
|
+
languageOptions: {
|
|
17
|
+
ecmaVersion: 2020,
|
|
18
|
+
globals: globals.browser,
|
|
19
|
+
parserOptions: {
|
|
20
|
+
ecmaVersion: 'latest',
|
|
21
|
+
ecmaFeatures: { jsx: true },
|
|
22
|
+
sourceType: 'module',
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
rules: {
|
|
26
|
+
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
])
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>demo</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.jsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "demo",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"lint": "eslint .",
|
|
10
|
+
"preview": "vite preview"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@premium-ai/preview-ui": "file:..",
|
|
14
|
+
"@tailwindcss/vite": "^4.1.18",
|
|
15
|
+
"react": "^19.2.0",
|
|
16
|
+
"react-dom": "^19.2.0",
|
|
17
|
+
"tailwindcss": "^4.1.18"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@eslint/js": "^9.39.1",
|
|
21
|
+
"@types/react": "^19.2.5",
|
|
22
|
+
"@types/react-dom": "^19.2.3",
|
|
23
|
+
"@vitejs/plugin-react": "^5.1.1",
|
|
24
|
+
"eslint": "^9.39.1",
|
|
25
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
26
|
+
"eslint-plugin-react-refresh": "^0.4.24",
|
|
27
|
+
"globals": "^16.5.0",
|
|
28
|
+
"vite": "^7.2.4"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/demo/src/App.css
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
#root {
|
|
2
|
+
max-width: 1280px;
|
|
3
|
+
margin: 0 auto;
|
|
4
|
+
padding: 2rem;
|
|
5
|
+
text-align: center;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.logo {
|
|
9
|
+
height: 6em;
|
|
10
|
+
padding: 1.5em;
|
|
11
|
+
will-change: filter;
|
|
12
|
+
transition: filter 300ms;
|
|
13
|
+
}
|
|
14
|
+
.logo:hover {
|
|
15
|
+
filter: drop-shadow(0 0 2em #646cffaa);
|
|
16
|
+
}
|
|
17
|
+
.logo.react:hover {
|
|
18
|
+
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes logo-spin {
|
|
22
|
+
from {
|
|
23
|
+
transform: rotate(0deg);
|
|
24
|
+
}
|
|
25
|
+
to {
|
|
26
|
+
transform: rotate(360deg);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
31
|
+
a:nth-of-type(2) .logo {
|
|
32
|
+
animation: logo-spin infinite 20s linear;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.card {
|
|
37
|
+
padding: 2em;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.read-the-docs {
|
|
41
|
+
color: #888;
|
|
42
|
+
}
|
package/demo/src/App.jsx
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
export default function App() {
|
|
4
|
+
return (
|
|
5
|
+
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
|
|
6
|
+
|
|
7
|
+
{/* 1. HERO: Sell the dream */}
|
|
8
|
+
<header className="max-w-4xl mx-auto pt-20 pb-12 px-6 text-center">
|
|
9
|
+
<h1 className="text-4xl font-extrabold tracking-tight mb-4 text-slate-900">
|
|
10
|
+
Preview UI Plugin
|
|
11
|
+
</h1>
|
|
12
|
+
<p className="text-lg text-slate-600 mb-8">
|
|
13
|
+
Instant loading states, progress bars, and layout utilities for Tailwind CSS.
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
<div className="inline-block bg-slate-900 text-slate-50 rounded-lg px-6 py-4 font-mono text-sm shadow-xl">
|
|
17
|
+
<span className="text-pink-500 mr-2">$</span>
|
|
18
|
+
npm install preview-ui
|
|
19
|
+
</div>
|
|
20
|
+
</header>
|
|
21
|
+
|
|
22
|
+
{/* 2. GALLERY: Show off the classes */}
|
|
23
|
+
<main className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
24
|
+
|
|
25
|
+
{/* CARD A: The Skeleton Loader */}
|
|
26
|
+
<section className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200">
|
|
27
|
+
<div className="flex items-center justify-between mb-6">
|
|
28
|
+
<h2 className="font-bold flex items-center gap-2">
|
|
29
|
+
<span className="w-2 h-2 rounded-full bg-indigo-500"></span>
|
|
30
|
+
Skeleton Utility
|
|
31
|
+
</h2>
|
|
32
|
+
<code className="text-xs bg-slate-100 px-2 py-1 rounded text-slate-500">.skeleton</code>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div className="space-y-4">
|
|
36
|
+
{/* Using your .skeleton class here */}
|
|
37
|
+
<div className="flex gap-4">
|
|
38
|
+
<div className="w-12 h-12 rounded-full skeleton shrink-0"></div>
|
|
39
|
+
<div className="space-y-2 w-full">
|
|
40
|
+
<div className="h-4 w-3/4 rounded skeleton"></div>
|
|
41
|
+
<div className="h-4 w-1/2 rounded skeleton"></div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div className="h-32 w-full rounded-lg skeleton mt-6"></div>
|
|
45
|
+
</div>
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
{/* CARD B: The Progress Bar */}
|
|
49
|
+
<section className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200">
|
|
50
|
+
<div className="flex items-center justify-between mb-6">
|
|
51
|
+
<h2 className="font-bold flex items-center gap-2">
|
|
52
|
+
<span className="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|
53
|
+
Progress Components
|
|
54
|
+
</h2>
|
|
55
|
+
<code className="text-xs bg-slate-100 px-2 py-1 rounded text-slate-500">.progress</code>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div className="space-y-6">
|
|
59
|
+
<div>
|
|
60
|
+
<div className="flex justify-between text-sm font-medium text-slate-700 mb-1">
|
|
61
|
+
<span>Uploading...</span>
|
|
62
|
+
<span>60%</span>
|
|
63
|
+
</div>
|
|
64
|
+
{/* Using your .progress class here */}
|
|
65
|
+
<div className="progress">
|
|
66
|
+
<div className="progress-bar bg-emerald-500" style={{ width: "60%" }} />
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div>
|
|
71
|
+
<div className="flex justify-between text-sm font-medium text-slate-700 mb-1">
|
|
72
|
+
<span>Processing</span>
|
|
73
|
+
<span>30%</span>
|
|
74
|
+
</div>
|
|
75
|
+
{/* Variation */}
|
|
76
|
+
<div className="progress h-2 rounded-full">
|
|
77
|
+
<div className="progress-bar bg-indigo-500" style={{ width: "30%" }} />
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</section>
|
|
82
|
+
|
|
83
|
+
{/* CARD C: The Layout Wrapper (Full Width) */}
|
|
84
|
+
<section className="md:col-span-2 bg-white p-8 rounded-2xl shadow-sm border border-slate-200 relative overflow-hidden">
|
|
85
|
+
<div className="flex items-center justify-between mb-6 relative z-10">
|
|
86
|
+
<h2 className="font-bold flex items-center gap-2">
|
|
87
|
+
<span className="w-2 h-2 rounded-full bg-rose-500"></span>
|
|
88
|
+
Layout Container
|
|
89
|
+
</h2>
|
|
90
|
+
<code className="text-xs bg-slate-100 px-2 py-1 rounded text-slate-500">.preview-loading</code>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div className="border-2 border-dashed border-slate-200 rounded-xl bg-slate-50 p-4">
|
|
94
|
+
{/* Using your .preview-loading class here to demonstrate centering */}
|
|
95
|
+
<div className="preview-loading bg-white shadow-sm rounded-lg p-6 max-w-md mx-auto">
|
|
96
|
+
<i className="text-4xl mb-2 not-italic">⏳</i>
|
|
97
|
+
<h3 className="font-bold text-lg">Central Layout</h3>
|
|
98
|
+
<p className="text-slate-500 text-sm mt-1">
|
|
99
|
+
This content is automatically centered and spaced by the plugin wrapper.
|
|
100
|
+
</p>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</section>
|
|
104
|
+
|
|
105
|
+
</main>
|
|
106
|
+
|
|
107
|
+
<footer className="text-center pb-12 text-slate-400 text-sm">
|
|
108
|
+
<p>Built with Tailwind CSS & Your Plugin</p>
|
|
109
|
+
</footer>
|
|
110
|
+
</div>
|
|
111
|
+
);
|
|
112
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
package/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
// Entry point for @premium-ai/preview-ui
|
|
2
|
-
const plugin = require('./tailwind-ai-preview-plugin');
|
|
1
|
+
// Entry point for @premium-ai/preview-ui
|
|
2
|
+
const plugin = require('./tailwind-ai-preview-plugin');
|
|
3
3
|
module.exports = plugin;
|
package/package.json
CHANGED
|
@@ -1,46 +1,23 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@premium-ai/preview-ui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Tailwind plugin providing adaptive, dark-mode UI components for Premium AI Headshots realtime preview.",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"publishConfig": {
|
|
7
|
-
"access": "public"
|
|
8
|
-
},
|
|
9
|
-
"repository": {
|
|
10
|
-
"type": "git",
|
|
11
|
-
"url": "https://github.com/tdogga14-ctrl/preview-ui.git"
|
|
12
|
-
},
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
],
|
|
25
|
-
"peerDependencies": {
|
|
26
|
-
"tailwindcss": ">=3.0.0"
|
|
27
|
-
},
|
|
28
|
-
"release": {
|
|
29
|
-
"extends": "./release.config.js"
|
|
30
|
-
},
|
|
31
|
-
"devDependencies": {
|
|
32
|
-
"@semantic-release/changelog": "^6.0.2",
|
|
33
|
-
"@semantic-release/commit-analyzer": "^11.1.0",
|
|
34
|
-
"@semantic-release/git": "^10.0.1",
|
|
35
|
-
"@semantic-release/github": "^9.2.1",
|
|
36
|
-
"@semantic-release/npm": "^13.1.3",
|
|
37
|
-
"@semantic-release/release-notes-generator": "^12.1.0",
|
|
38
|
-
"autoprefixer": "^10.4.23",
|
|
39
|
-
"postcss": "^8.5.6",
|
|
40
|
-
"semantic-release": "^25.0.2",
|
|
41
|
-
"tailwindcss": "^4.1.18"
|
|
42
|
-
},
|
|
43
|
-
"dependencies": {
|
|
44
|
-
"@premium-ai/preview-ui": "^1.0.2"
|
|
45
|
-
}
|
|
46
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@premium-ai/preview-ui",
|
|
3
|
+
"version": "1.0.5",
|
|
4
|
+
"description": "Tailwind plugin providing adaptive, dark-mode UI components for Premium AI Headshots realtime preview.",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"publishConfig": {
|
|
7
|
+
"access": "public"
|
|
8
|
+
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/tdogga14-ctrl/preview-ui.git"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"tailwind",
|
|
15
|
+
"ui",
|
|
16
|
+
"plugin"
|
|
17
|
+
],
|
|
18
|
+
"author": "",
|
|
19
|
+
"license": "ISC",
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"tailwindcss": ">=3.0.0"
|
|
22
|
+
}
|
|
23
|
+
}
|
package/release.config.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Semantic-release configuration for @premium-ai/preview-ui
|
|
3
|
-
* Auto bumps versions, updates changelog, publishes to npm,
|
|
4
|
-
* and creates GitHub releases.
|
|
5
|
-
*/
|
|
6
|
-
module.exports = {
|
|
7
|
-
branches: ['main'],
|
|
8
|
-
plugins: [
|
|
9
|
-
'@semantic-release/commit-analyzer',
|
|
10
|
-
'@semantic-release/release-notes-generator',
|
|
11
|
-
'@semantic-release/changelog',
|
|
12
|
-
'@semantic-release/npm',
|
|
13
|
-
'@semantic-release/github',
|
|
14
|
-
[
|
|
15
|
-
'@semantic-release/git',
|
|
16
|
-
{
|
|
17
|
-
assets: ['package.json', 'CHANGELOG.md'],
|
|
18
|
-
message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}'
|
|
19
|
-
}
|
|
20
|
-
]
|
|
21
|
-
]
|
|
1
|
+
/**
|
|
2
|
+
* Semantic-release configuration for @premium-ai/preview-ui
|
|
3
|
+
* Auto bumps versions, updates changelog, publishes to npm,
|
|
4
|
+
* and creates GitHub releases.
|
|
5
|
+
*/
|
|
6
|
+
module.exports = {
|
|
7
|
+
branches: ['main'],
|
|
8
|
+
plugins: [
|
|
9
|
+
'@semantic-release/commit-analyzer',
|
|
10
|
+
'@semantic-release/release-notes-generator',
|
|
11
|
+
'@semantic-release/changelog',
|
|
12
|
+
'@semantic-release/npm',
|
|
13
|
+
'@semantic-release/github',
|
|
14
|
+
[
|
|
15
|
+
'@semantic-release/git',
|
|
16
|
+
{
|
|
17
|
+
assets: ['package.json', 'CHANGELOG.md'],
|
|
18
|
+
message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}'
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
]
|
|
22
22
|
};
|
|
@@ -1,69 +1,105 @@
|
|
|
1
|
-
// ============================================================
|
|
2
|
-
// Premium AI Headshots - Tailwind Plugin
|
|
3
|
-
// Module:
|
|
4
|
-
// ============================================================
|
|
5
|
-
const plugin = require(
|
|
6
|
-
|
|
7
|
-
module.exports = plugin(function ({ addComponents }) {
|
|
8
|
-
addComponents({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
1
|
+
// ============================================================
|
|
2
|
+
// Premium AI Headshots - Tailwind Plugin (v4-friendly)
|
|
3
|
+
// Module: preview-ui (auto Dark Mode support via nested media)
|
|
4
|
+
// ============================================================
|
|
5
|
+
const plugin = require("tailwindcss/plugin");
|
|
6
|
+
|
|
7
|
+
module.exports = plugin(function ({ addComponents }) {
|
|
8
|
+
addComponents({
|
|
9
|
+
".fade-in": {
|
|
10
|
+
"@apply opacity-0 transition-opacity duration-700 ease-out": {},
|
|
11
|
+
"&.loaded, &.show": { "@apply opacity-100": {} },
|
|
12
|
+
},
|
|
13
|
+
|
|
14
|
+
".preview-loading": {
|
|
15
|
+
"@apply flex flex-col items-center justify-center text-center space-y-2": {},
|
|
16
|
+
"& i": { "@apply text-blue-500 text-3xl animate-spin": {} },
|
|
17
|
+
"@media (prefers-color-scheme: dark)": {
|
|
18
|
+
"& i": { "@apply text-blue-400": {} },
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
".progress": {
|
|
23
|
+
"@apply w-full bg-gray-200 rounded-full overflow-hidden h-2 mt-2": {},
|
|
24
|
+
"@media (prefers-color-scheme: dark)": { "@apply bg-gray-700": {} },
|
|
25
|
+
},
|
|
26
|
+
|
|
27
|
+
".progress-bar": {
|
|
28
|
+
"@apply h-2 bg-blue-500 transition-all duration-500 ease-out": {},
|
|
29
|
+
"@media (prefers-color-scheme: dark)": { "@apply bg-blue-400": {} },
|
|
30
|
+
},
|
|
31
|
+
|
|
32
|
+
".skeleton": {
|
|
33
|
+
"@apply animate-pulse bg-gray-200 rounded-xl": {},
|
|
34
|
+
height: "280px",
|
|
35
|
+
width: "100%",
|
|
36
|
+
"@media (prefers-color-scheme: dark)": { "@apply bg-gray-700": {} },
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
".preview-image-container": {
|
|
40
|
+
"@apply relative rounded-xl overflow-hidden shadow-md": {},
|
|
41
|
+
"@media (prefers-color-scheme: dark)": {
|
|
42
|
+
"@apply border border-gray-700": {},
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
".preview-image": {
|
|
47
|
+
"@apply opacity-0 transition-opacity duration-700 ease-in": {},
|
|
48
|
+
"&.loaded": { "@apply opacity-100": {} },
|
|
49
|
+
},
|
|
50
|
+
|
|
51
|
+
".preview-overlay": {
|
|
52
|
+
"@apply absolute bottom-3 left-3 flex gap-2": {},
|
|
53
|
+
"& button": {
|
|
54
|
+
// NOTE: Tailwind v4 removed bg-opacity-* so we use /opacity syntax
|
|
55
|
+
"@apply bg-gray-800/70 text-white px-3 py-1 rounded-md text-xs font-medium transition-all duration-200 hover:bg-gray-800 hover:shadow-md":
|
|
56
|
+
{},
|
|
57
|
+
},
|
|
58
|
+
"@media (prefers-color-scheme: dark)": {
|
|
59
|
+
"& button": {
|
|
60
|
+
"@apply bg-gray-700/80 hover:bg-gray-600 hover:shadow-lg": {},
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
|
|
65
|
+
".error-state": {
|
|
66
|
+
"@apply flex flex-col items-center justify-center bg-red-50 border border-red-200 rounded-lg p-5 text-red-600 space-y-2":
|
|
67
|
+
{},
|
|
68
|
+
"& i": { "@apply text-3xl": {} },
|
|
69
|
+
"& button": {
|
|
70
|
+
"@apply bg-red-500 text-white px-4 py-1 rounded shadow transition hover:bg-red-600":
|
|
71
|
+
{},
|
|
72
|
+
},
|
|
73
|
+
"@media (prefers-color-scheme: dark)": {
|
|
74
|
+
"@apply bg-red-900 border-red-700 text-red-300": {},
|
|
75
|
+
"& button": { "@apply bg-red-600 hover:bg-red-500": {} },
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
|
|
79
|
+
".upsell-card": {
|
|
80
|
+
"@apply transition-all duration-300 ease-out bg-white": {},
|
|
81
|
+
"&:hover": { "@apply scale-[1.02] shadow-md bg-gray-50": {} },
|
|
82
|
+
"@media (prefers-color-scheme: dark)": {
|
|
83
|
+
"@apply bg-gray-800 border border-gray-700 text-gray-200": {},
|
|
84
|
+
"&:hover": { "@apply bg-gray-700 shadow-lg": {} },
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
|
|
88
|
+
".quality-badge": {
|
|
89
|
+
"@apply inline-block px-2 py-1 text-xs font-semibold rounded-md mt-1": {},
|
|
90
|
+
"@media (prefers-color-scheme: dark)": {
|
|
91
|
+
"&.text-green-500": { "@apply text-green-400": {} },
|
|
92
|
+
"&.text-yellow-500": { "@apply text-yellow-400": {} },
|
|
93
|
+
"&.text-orange-500": { "@apply text-orange-400": {} },
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
|
|
97
|
+
// Optional: if your README references .ai-preview, define it here
|
|
98
|
+
".ai-preview": {
|
|
99
|
+
"@apply rounded-xl shadow-xl bg-white border border-gray-200": {},
|
|
100
|
+
"@media (prefers-color-scheme: dark)": {
|
|
101
|
+
"@apply bg-gray-800 border-gray-700 text-gray-100": {},
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
});
|
|
105
|
+
});
|