@jjlmoya/utils-tools 1.10.0 → 1.12.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.
@@ -55,173 +55,3 @@ const options = [
55
55
  </div>
56
56
  </div>
57
57
 
58
- <style>
59
- .pg-config-card {
60
- background: rgba(255, 255, 255, 0.4);
61
- border: 1px solid rgba(0, 0, 0, 0.05);
62
- border-radius: 1.5rem;
63
- padding: 1.5rem;
64
- display: flex;
65
- flex-direction: column;
66
- gap: 2rem;
67
- }
68
-
69
- :global(.theme-dark) .pg-config-card {
70
- background: rgba(0, 0, 0, 0.2);
71
- border-color: rgba(255, 255, 255, 0.05);
72
- }
73
-
74
- .pg-config-header {
75
- display: flex;
76
- justify-content: space-between;
77
- align-items: center;
78
- margin-bottom: 1rem;
79
- }
80
-
81
- .pg-config-label {
82
- font-size: 1rem;
83
- font-weight: 600;
84
- color: #475569;
85
- }
86
-
87
- :global(.theme-dark) .pg-config-label {
88
- color: #94a3b8;
89
- }
90
-
91
- .pg-config-value {
92
- font-size: 1.5rem;
93
- font-weight: 800;
94
- color: #3b82f6;
95
- }
96
-
97
- .pg-range-input {
98
- width: 100%;
99
- margin-bottom: 0.5rem;
100
- cursor: pointer;
101
- accent-color: #3b82f6;
102
- }
103
-
104
- .pg-range-markers {
105
- display: flex;
106
- justify-content: space-between;
107
- padding: 0 4px;
108
- font-size: 0.75rem;
109
- color: #94a3b8;
110
- font-weight: 500;
111
- }
112
-
113
- .pg-options-grid {
114
- display: grid;
115
- grid-template-columns: repeat(2, 1fr);
116
- gap: 0.75rem;
117
- }
118
-
119
- @media (max-width: 480px) {
120
- .pg-options-grid {
121
- grid-template-columns: 1fr;
122
- }
123
- }
124
-
125
- .pg-option-item {
126
- cursor: pointer;
127
- position: relative;
128
- }
129
-
130
- .pg-option-checkbox {
131
- position: absolute;
132
- opacity: 0;
133
- width: 0;
134
- height: 0;
135
- }
136
-
137
- .pg-option-content {
138
- display: flex;
139
- align-items: center;
140
- gap: 0.75rem;
141
- padding: 0.75rem;
142
- background: rgba(255, 255, 255, 0.6);
143
- border: 1px solid rgba(0, 0, 0, 0.05);
144
- border-radius: 1rem;
145
- transition: all 0.2s ease;
146
- }
147
-
148
- :global(.theme-dark) .pg-option-content {
149
- background: rgba(30, 41, 59, 0.4);
150
- border-color: rgba(255, 255, 255, 0.05);
151
- }
152
-
153
- .pg-option-item:hover .pg-option-content {
154
- background: rgba(255, 255, 255, 0.8);
155
- transform: translateY(-1px);
156
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
157
- }
158
-
159
- :global(.theme-dark) .pg-option-item:hover .pg-option-content {
160
- background: rgba(30, 41, 59, 0.6);
161
- }
162
-
163
- .pg-option-checkbox:checked + .pg-option-content {
164
- border-color: #10b981;
165
- background: rgba(16, 185, 129, 0.05);
166
- }
167
-
168
- :global(.theme-dark) .pg-option-checkbox:checked + .pg-option-content {
169
- background: rgba(16, 185, 129, 0.1);
170
- }
171
-
172
- .pg-option-indicator {
173
- width: 1.5rem;
174
- height: 1.5rem;
175
- border-radius: 0.5rem;
176
- border: 2px solid #cbd5e1;
177
- display: flex;
178
- align-items: center;
179
- justify-content: center;
180
- transition: all 0.2s ease;
181
- color: white;
182
- }
183
-
184
- :global(.theme-dark) .pg-option-indicator {
185
- border-color: #475569;
186
- }
187
-
188
- .pg-option-checkbox:checked + .pg-option-content .pg-option-indicator {
189
- background: #10b981;
190
- border-color: #10b981;
191
- box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
192
- }
193
-
194
- .pg-option-indicator svg {
195
- width: 0.875rem;
196
- height: 0.875rem;
197
- opacity: 0;
198
- transform: scale(0.5);
199
- transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
200
- }
201
-
202
- .pg-option-checkbox:checked + .pg-option-content .pg-option-indicator svg {
203
- opacity: 1;
204
- transform: scale(1);
205
- }
206
-
207
- .pg-option-info {
208
- display: flex;
209
- flex-direction: column;
210
- }
211
-
212
- .pg-option-label {
213
- font-size: 0.9375rem;
214
- font-weight: 600;
215
- color: #1e293b;
216
- }
217
-
218
- :global(.theme-dark) .pg-option-label {
219
- color: #e2e8f0;
220
- }
221
-
222
- .pg-option-hint {
223
- font-size: 0.75rem;
224
- color: #94a3b8;
225
- font-weight: 500;
226
- }
227
- </style>
@@ -28,120 +28,3 @@ const { generating, copyTitle, regenerateTitle } = Astro.props;
28
28
  </div>
29
29
  </div>
30
30
 
31
- <style>
32
- .pg-display {
33
- position: relative;
34
- width: 100%;
35
- margin-bottom: 1.5rem;
36
- }
37
-
38
- .pg-display-glass {
39
- position: absolute;
40
- inset: -2px;
41
- background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
42
- border-radius: 1.25rem;
43
- opacity: 0.15;
44
- filter: blur(8px);
45
- transition: opacity 0.3s ease;
46
- }
47
-
48
- .pg-display:hover .pg-display-glass {
49
- opacity: 0.25;
50
- }
51
-
52
- .pg-display-content {
53
- position: relative;
54
- display: flex;
55
- align-items: center;
56
- background: rgba(255, 255, 255, 0.8);
57
- backdrop-filter: blur(12px);
58
- -webkit-backdrop-filter: blur(12px);
59
- border: 1px solid rgba(255, 255, 255, 0.5);
60
- border-radius: 1.25rem;
61
- padding: 0.75rem;
62
- min-height: 5rem;
63
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
64
- }
65
-
66
- :global(.theme-dark) .pg-display-content {
67
- background: rgba(15, 23, 42, 0.8);
68
- border-color: rgba(255, 255, 255, 0.1);
69
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
70
- }
71
-
72
- .pg-output-text {
73
- flex: 1;
74
- font-size: 1.75rem;
75
- font-weight: 700;
76
- text-align: center;
77
- letter-spacing: 0.05em;
78
- color: #1e293b;
79
- word-break: break-all;
80
- padding: 0.5rem 1rem;
81
- transition: transform 0.2s ease;
82
- }
83
-
84
- :global(.theme-dark) .pg-output-text {
85
- color: #f8fafc;
86
- }
87
-
88
- .pg-display-divider {
89
- width: 1px;
90
- height: 3rem;
91
- background: rgba(0, 0, 0, 0.1);
92
- margin: 0 0.5rem;
93
- }
94
-
95
- :global(.theme-dark) .pg-display-divider {
96
- background: rgba(255, 255, 255, 0.1);
97
- }
98
-
99
- .pg-display-controls {
100
- display: flex;
101
- gap: 0.5rem;
102
- padding-right: 0.25rem;
103
- }
104
-
105
- .pg-control-btn {
106
- display: flex;
107
- align-items: center;
108
- justify-content: center;
109
- width: 3rem;
110
- height: 3rem;
111
- border-radius: 0.75rem;
112
- border: none;
113
- background: transparent;
114
- color: #64748b;
115
- cursor: pointer;
116
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
117
- }
118
-
119
- .pg-control-btn svg {
120
- width: 1.5rem;
121
- height: 1.5rem;
122
- }
123
-
124
- .pg-control-btn:hover {
125
- background: rgba(0, 0, 0, 0.05);
126
- color: #10b981;
127
- transform: translateY(-2px);
128
- }
129
-
130
- :global(.theme-dark) .pg-control-btn:hover {
131
- background: rgba(255, 255, 255, 0.05);
132
- }
133
-
134
- .pg-control-btn-accent:hover {
135
- color: #3b82f6;
136
- }
137
-
138
- .pg-control-btn:active {
139
- transform: translateY(0);
140
- }
141
-
142
- @media (max-width: 480px) {
143
- .pg-output-text {
144
- font-size: 1.25rem;
145
- }
146
- }
147
- </style>
@@ -16,55 +16,3 @@ const { labelSecurity } = Astro.props;
16
16
  </div>
17
17
  </div>
18
18
 
19
- <style>
20
- .pg-strength-container {
21
- width: 100%;
22
- margin-bottom: 2rem;
23
- }
24
-
25
- .pg-strength-header {
26
- display: flex;
27
- justify-content: space-between;
28
- align-items: flex-end;
29
- margin-bottom: 0.75rem;
30
- }
31
-
32
- .pg-strength-label {
33
- font-size: 0.875rem;
34
- font-weight: 600;
35
- text-transform: uppercase;
36
- letter-spacing: 0.05em;
37
- color: #94a3b8;
38
- }
39
-
40
- .pg-strength-status {
41
- font-size: 1rem;
42
- font-weight: 700;
43
- transition: color 0.3s ease;
44
- }
45
-
46
- .pg-strength-track {
47
- position: relative;
48
- height: 0.5rem;
49
- width: 100%;
50
- background: rgba(0, 0, 0, 0.05);
51
- border-radius: 1rem;
52
- overflow: hidden;
53
- }
54
-
55
- :global(.theme-dark) .pg-strength-track {
56
- background: rgba(255, 255, 255, 0.05);
57
- }
58
-
59
- .pg-strength-bar {
60
- position: absolute;
61
- left: 0;
62
- top: 0;
63
- height: 100%;
64
- width: 0;
65
- border-radius: 1rem;
66
- background: #ef4444;
67
- transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
68
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
69
- }
70
- </style>
@@ -19,7 +19,7 @@
19
19
  transition: transform 0.3s ease;
20
20
  }
21
21
 
22
- :global(.theme-dark) .pg-card {
22
+ .theme-dark .pg-card {
23
23
  background: linear-gradient(
24
24
  135deg,
25
25
  rgba(255, 255, 255, 0.05),
@@ -45,7 +45,7 @@
45
45
  flex-direction: column;
46
46
  }
47
47
 
48
- :global(.theme-dark) .pg-card-content {
48
+ .theme-dark .pg-card-content {
49
49
  background: #0f172a;
50
50
  }
51
51
 
@@ -60,7 +60,7 @@
60
60
  margin: 1.5rem 0;
61
61
  }
62
62
 
63
- :global(.theme-dark) .pg-divider {
63
+ .theme-dark .pg-divider {
64
64
  background: linear-gradient(
65
65
  to right,
66
66
  transparent,
@@ -81,6 +81,344 @@
81
81
  }
82
82
  }
83
83
 
84
- :global(.pg-copied-anim) {
84
+ .pg-copied-anim {
85
85
  animation: pulse-success 0.3s ease-out;
86
- }
86
+ }
87
+ /* Config.astro */
88
+ .pg-config-card {
89
+ background: rgba(255, 255, 255, 0.4);
90
+ border: 1px solid rgba(0, 0, 0, 0.05);
91
+ border-radius: 1.5rem;
92
+ padding: 1.5rem;
93
+ display: flex;
94
+ flex-direction: column;
95
+ gap: 2rem;
96
+ }
97
+
98
+ .theme-dark .pg-config-card {
99
+ background: rgba(0, 0, 0, 0.2);
100
+ border-color: rgba(255, 255, 255, 0.05);
101
+ }
102
+
103
+ .pg-config-header {
104
+ display: flex;
105
+ justify-content: space-between;
106
+ align-items: center;
107
+ margin-bottom: 1rem;
108
+ }
109
+
110
+ .pg-config-label {
111
+ font-size: 1rem;
112
+ font-weight: 600;
113
+ color: #475569;
114
+ }
115
+
116
+ .theme-dark .pg-config-label {
117
+ color: #94a3b8;
118
+ }
119
+
120
+ .pg-config-value {
121
+ font-size: 1.5rem;
122
+ font-weight: 800;
123
+ color: #3b82f6;
124
+ }
125
+
126
+ .pg-range-input {
127
+ width: 100%;
128
+ margin-bottom: 0.5rem;
129
+ cursor: pointer;
130
+ accent-color: #3b82f6;
131
+ }
132
+
133
+ .pg-range-markers {
134
+ display: flex;
135
+ justify-content: space-between;
136
+ padding: 0 4px;
137
+ font-size: 0.75rem;
138
+ color: #94a3b8;
139
+ font-weight: 500;
140
+ }
141
+
142
+ .pg-options-grid {
143
+ display: grid;
144
+ grid-template-columns: repeat(2, 1fr);
145
+ gap: 0.75rem;
146
+ }
147
+
148
+ @media (max-width: 480px) {
149
+ .pg-options-grid {
150
+ grid-template-columns: 1fr;
151
+ }
152
+ }
153
+
154
+ .pg-option-item {
155
+ cursor: pointer;
156
+ position: relative;
157
+ }
158
+
159
+ .pg-option-checkbox {
160
+ position: absolute;
161
+ opacity: 0;
162
+ width: 0;
163
+ height: 0;
164
+ }
165
+
166
+ .pg-option-content {
167
+ display: flex;
168
+ align-items: center;
169
+ gap: 0.75rem;
170
+ padding: 0.75rem;
171
+ background: rgba(255, 255, 255, 0.6);
172
+ border: 1px solid rgba(0, 0, 0, 0.05);
173
+ border-radius: 1rem;
174
+ transition: all 0.2s ease;
175
+ }
176
+
177
+ .theme-dark .pg-option-content {
178
+ background: rgba(30, 41, 59, 0.4);
179
+ border-color: rgba(255, 255, 255, 0.05);
180
+ }
181
+
182
+ .pg-option-item:hover .pg-option-content {
183
+ background: rgba(255, 255, 255, 0.8);
184
+ transform: translateY(-1px);
185
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
186
+ }
187
+
188
+ .theme-dark .pg-option-item:hover .pg-option-content {
189
+ background: rgba(30, 41, 59, 0.6);
190
+ }
191
+
192
+ .pg-option-checkbox:checked + .pg-option-content {
193
+ border-color: #10b981;
194
+ background: rgba(16, 185, 129, 0.05);
195
+ }
196
+
197
+ .theme-dark .pg-option-checkbox:checked + .pg-option-content {
198
+ background: rgba(16, 185, 129, 0.1);
199
+ }
200
+
201
+ .pg-option-indicator {
202
+ width: 1.5rem;
203
+ height: 1.5rem;
204
+ border-radius: 0.5rem;
205
+ border: 2px solid #cbd5e1;
206
+ display: flex;
207
+ align-items: center;
208
+ justify-content: center;
209
+ transition: all 0.2s ease;
210
+ color: white;
211
+ }
212
+
213
+ .theme-dark .pg-option-indicator {
214
+ border-color: #475569;
215
+ }
216
+
217
+ .pg-option-checkbox:checked + .pg-option-content .pg-option-indicator {
218
+ background: #10b981;
219
+ border-color: #10b981;
220
+ box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
221
+ }
222
+
223
+ .pg-option-indicator svg {
224
+ width: 0.875rem;
225
+ height: 0.875rem;
226
+ opacity: 0;
227
+ transform: scale(0.5);
228
+ transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
229
+ }
230
+
231
+ .pg-option-checkbox:checked + .pg-option-content .pg-option-indicator svg {
232
+ opacity: 1;
233
+ transform: scale(1);
234
+ }
235
+
236
+ .pg-option-info {
237
+ display: flex;
238
+ flex-direction: column;
239
+ }
240
+
241
+ .pg-option-label {
242
+ font-size: 0.9375rem;
243
+ font-weight: 600;
244
+ color: #1e293b;
245
+ }
246
+
247
+ .theme-dark .pg-option-label {
248
+ color: #e2e8f0;
249
+ }
250
+
251
+ .pg-option-hint {
252
+ font-size: 0.75rem;
253
+ color: #94a3b8;
254
+ font-weight: 500;
255
+ }
256
+
257
+ /* Display.astro */
258
+ .pg-display {
259
+ position: relative;
260
+ width: 100%;
261
+ margin-bottom: 1.5rem;
262
+ }
263
+
264
+ .pg-display-glass {
265
+ position: absolute;
266
+ inset: -2px;
267
+ background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
268
+ border-radius: 1.25rem;
269
+ opacity: 0.15;
270
+ filter: blur(8px);
271
+ transition: opacity 0.3s ease;
272
+ }
273
+
274
+ .pg-display:hover .pg-display-glass {
275
+ opacity: 0.25;
276
+ }
277
+
278
+ .pg-display-content {
279
+ position: relative;
280
+ display: flex;
281
+ align-items: center;
282
+ background: rgba(255, 255, 255, 0.8);
283
+ backdrop-filter: blur(12px);
284
+ -webkit-backdrop-filter: blur(12px);
285
+ border: 1px solid rgba(255, 255, 255, 0.5);
286
+ border-radius: 1.25rem;
287
+ padding: 0.75rem;
288
+ min-height: 5rem;
289
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
290
+ }
291
+
292
+ .theme-dark .pg-display-content {
293
+ background: rgba(15, 23, 42, 0.8);
294
+ border-color: rgba(255, 255, 255, 0.1);
295
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
296
+ }
297
+
298
+ .pg-output-text {
299
+ flex: 1;
300
+ font-size: 1.75rem;
301
+ font-weight: 700;
302
+ text-align: center;
303
+ letter-spacing: 0.05em;
304
+ color: #1e293b;
305
+ word-break: break-all;
306
+ padding: 0.5rem 1rem;
307
+ transition: transform 0.2s ease;
308
+ }
309
+
310
+ .theme-dark .pg-output-text {
311
+ color: #f8fafc;
312
+ }
313
+
314
+ .pg-display-divider {
315
+ width: 1px;
316
+ height: 3rem;
317
+ background: rgba(0, 0, 0, 0.1);
318
+ margin: 0 0.5rem;
319
+ }
320
+
321
+ .theme-dark .pg-display-divider {
322
+ background: rgba(255, 255, 255, 0.1);
323
+ }
324
+
325
+ .pg-display-controls {
326
+ display: flex;
327
+ gap: 0.5rem;
328
+ padding-right: 0.25rem;
329
+ }
330
+
331
+ .pg-control-btn {
332
+ display: flex;
333
+ align-items: center;
334
+ justify-content: center;
335
+ width: 3rem;
336
+ height: 3rem;
337
+ border-radius: 0.75rem;
338
+ border: none;
339
+ background: transparent;
340
+ color: #64748b;
341
+ cursor: pointer;
342
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
343
+ }
344
+
345
+ .pg-control-btn svg {
346
+ width: 1.5rem;
347
+ height: 1.5rem;
348
+ }
349
+
350
+ .pg-control-btn:hover {
351
+ background: rgba(0, 0, 0, 0.05);
352
+ color: #10b981;
353
+ transform: translateY(-2px);
354
+ }
355
+
356
+ .theme-dark .pg-control-btn:hover {
357
+ background: rgba(255, 255, 255, 0.05);
358
+ }
359
+
360
+ .pg-control-btn-accent:hover {
361
+ color: #3b82f6;
362
+ }
363
+
364
+ .pg-control-btn:active {
365
+ transform: translateY(0);
366
+ }
367
+
368
+ @media (max-width: 480px) {
369
+ .pg-output-text {
370
+ font-size: 1.25rem;
371
+ }
372
+ }
373
+
374
+ /* Strength.astro */
375
+ .pg-strength-container {
376
+ width: 100%;
377
+ margin-bottom: 2rem;
378
+ }
379
+
380
+ .pg-strength-header {
381
+ display: flex;
382
+ justify-content: space-between;
383
+ align-items: flex-end;
384
+ margin-bottom: 0.75rem;
385
+ }
386
+
387
+ .pg-strength-label {
388
+ font-size: 0.875rem;
389
+ font-weight: 600;
390
+ text-transform: uppercase;
391
+ letter-spacing: 0.05em;
392
+ color: #94a3b8;
393
+ }
394
+
395
+ .pg-strength-status {
396
+ font-size: 1rem;
397
+ font-weight: 700;
398
+ transition: color 0.3s ease;
399
+ }
400
+
401
+ .pg-strength-track {
402
+ position: relative;
403
+ height: 0.5rem;
404
+ width: 100%;
405
+ background: rgba(0, 0, 0, 0.05);
406
+ border-radius: 1rem;
407
+ overflow: hidden;
408
+ }
409
+
410
+ .theme-dark .pg-strength-track {
411
+ background: rgba(255, 255, 255, 0.05);
412
+ }
413
+
414
+ .pg-strength-bar {
415
+ position: absolute;
416
+ left: 0;
417
+ top: 0;
418
+ height: 100%;
419
+ width: 0;
420
+ border-radius: 1rem;
421
+ background: #ef4444;
422
+ transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
423
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
424
+ }