@jjlmoya/utils-babies 1.2.0 → 1.4.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.
Files changed (27) hide show
  1. package/package.json +2 -2
  2. package/src/tool/baby-feeding-calculator/bibliography.astro +8 -4
  3. package/src/tool/baby-feeding-calculator/component.astro +208 -177
  4. package/src/tool/baby-feeding-calculator/style.css +317 -229
  5. package/src/tool/baby-percentile-calculator/bibliography.astro +8 -4
  6. package/src/tool/baby-percentile-calculator/component.astro +98 -240
  7. package/src/tool/baby-percentile-calculator/i18n/en.ts +1 -0
  8. package/src/tool/baby-percentile-calculator/i18n/es.ts +1 -0
  9. package/src/tool/baby-percentile-calculator/i18n/fr.ts +1 -0
  10. package/src/tool/baby-percentile-calculator/index.ts +1 -0
  11. package/src/tool/baby-percentile-calculator/style.css +342 -268
  12. package/src/tool/baby-size-converter/bibliography.astro +8 -4
  13. package/src/tool/baby-size-converter/component.astro +221 -212
  14. package/src/tool/baby-size-converter/style.css +433 -263
  15. package/src/tool/fertile-days-estimator/bibliography.astro +8 -4
  16. package/src/tool/fertile-days-estimator/component.astro +202 -200
  17. package/src/tool/fertile-days-estimator/style.css +408 -270
  18. package/src/tool/pregnancy-calculator/bibliography.astro +8 -4
  19. package/src/tool/pregnancy-calculator/component.astro +50 -8
  20. package/src/tool/pregnancy-calculator/i18n/en.ts +8 -0
  21. package/src/tool/pregnancy-calculator/i18n/es.ts +8 -0
  22. package/src/tool/pregnancy-calculator/i18n/fr.ts +8 -0
  23. package/src/tool/pregnancy-calculator/index.ts +8 -0
  24. package/src/tool/pregnancy-calculator/style.css +351 -134
  25. package/src/tool/vaccination-calendar/bibliography.astro +8 -4
  26. package/src/tool/vaccination-calendar/component.astro +120 -124
  27. package/src/tool/vaccination-calendar/style.css +296 -209
@@ -1,316 +1,403 @@
1
- .vaccination-calendar {
2
- --vc-bg: #fff;
3
- --vc-bg-muted: #eef2ff;
4
- --vc-text: #1e293b;
5
- --vc-text-muted: #64748b;
6
- --vc-border: #e2e8f0;
7
- --vc-border-inner: rgba(255, 255, 255, 0.1);
8
- --vc-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
9
- --vc-primary: #4f46e5;
10
- --vc-primary-on: #fff;
11
- --vc-primary-soft: #eef2ff;
12
- --vc-success: #10b981;
13
- --vc-warning: #f59e0b;
14
- --vc-error: #ef4444;
15
- --vc-error-bg: #fef2f2;
1
+ /* PRINCIPAL CONTAINER */
2
+ .vc-card {
3
+ --primary: #4f46e5;
4
+ --primary-soft: #eef2ff;
5
+ --success: #10b981;
6
+ --warning: #f59e0b;
7
+ --text-main: #1e293b;
8
+ --text-muted: #64748b;
9
+ --bg-card: #fff;
10
+ --border: #e2e8f0;
11
+ --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
12
+
13
+ max-width: 600px;
14
+ margin: 0 auto;
15
+ background: var(--bg-card);
16
+ border-radius: 28px;
17
+ border: 1px solid var(--border);
18
+ box-shadow: var(--shadow);
19
+ overflow: hidden;
20
+ color: var(--text-main);
21
+ transition: transform 0.3s ease;
22
+ }
16
23
 
17
- width: 100%;
18
- color: var(--vc-text);
19
- }
20
-
21
- .theme-dark .vaccination-calendar {
22
- --vc-bg: #1e293b;
23
- --vc-bg-muted: rgba(79, 70, 229, 0.1);
24
- --vc-text: #f1f5f9;
25
- --vc-text-muted: #94a3b8;
26
- --vc-border: rgba(255, 255, 255, 0.1);
27
- --vc-border-inner: rgba(255, 255, 255, 0.1);
28
- --vc-shadow: none;
29
- --vc-primary: #818cf8;
30
- --vc-primary-on: #fff;
31
- --vc-primary-soft: rgba(79, 70, 229, 0.1);
32
- --vc-success: #10b981;
33
- --vc-warning: #f59e0b;
34
- --vc-error: #ef4444;
35
- --vc-error-bg: rgba(239, 68, 68, 0.05);
36
- }
37
-
38
- .vaccination-calendar-header {
39
- background: var(--vc-bg);
40
- border: 1px solid var(--vc-border);
41
- border-radius: 1rem;
42
- box-shadow: var(--vc-shadow);
43
- padding: 1.5rem;
24
+ .dark .vc-card {
25
+ --bg-card: #1e293b;
26
+ --border: rgba(255, 255, 255, 0.1);
27
+ --text-main: #f1f5f9;
28
+ --text-muted: #94a3b8;
29
+ --primary-soft: rgba(79, 70, 229, 0.1);
30
+ }
31
+
32
+ /* HEADER */
33
+ .vc-header {
34
+ padding: 2rem 1.5rem;
35
+ background: linear-gradient(to bottom, var(--primary-soft), transparent);
36
+ border-bottom: 1px solid var(--border);
44
37
  display: flex;
45
38
  flex-direction: column;
46
- gap: 1rem;
39
+ align-items: center;
40
+ gap: 1.5rem;
47
41
  }
48
42
 
49
- .vaccination-calendar-field {
43
+ .vc-inputs {
44
+ width: 100%;
45
+ display: flex;
46
+ justify-content: center;
47
+ }
48
+
49
+ .vc-field {
50
50
  display: flex;
51
51
  flex-direction: column;
52
- gap: 0.5rem;
52
+ align-items: center;
53
+ gap: 0.75rem;
54
+ width: 100%;
53
55
  }
54
56
 
55
- .vaccination-calendar-field-label {
56
- font-size: 0.875rem;
57
- font-weight: 600;
58
- color: var(--vc-text-muted);
57
+ .vc-field label {
58
+ font-size: 0.8rem;
59
+ font-weight: 800;
59
60
  text-transform: uppercase;
61
+ color: var(--text-muted);
60
62
  letter-spacing: 0.05em;
61
63
  }
62
64
 
63
- .vaccination-calendar-triple-input {
65
+ .vc-triple-input {
64
66
  display: flex;
65
67
  align-items: center;
66
- gap: 0.25rem;
68
+ gap: 0.5rem;
69
+ background: var(--bg-card);
70
+ border: 2px solid var(--border);
71
+ border-radius: 16px;
72
+ padding: 0.25rem 1rem;
73
+ transition: all 0.2s ease;
74
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
75
+ }
76
+
77
+ .vc-triple-input:focus-within {
78
+ border-color: var(--primary);
79
+ box-shadow: 0 0 0 4px var(--primary-soft);
80
+ transform: translateY(-1px);
81
+ }
82
+
83
+ .vc-triple-input.has-error {
84
+ border-color: #ef4444;
85
+ background: #fef2f2;
86
+ }
87
+
88
+ .dark .vc-triple-input.has-error {
89
+ background: rgba(239, 68, 68, 0.05);
90
+ }
91
+
92
+ .vc-triple-input.has-error:focus-within {
93
+ box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
67
94
  }
68
95
 
69
- .vaccination-calendar-segment {
96
+ .vc-segment {
97
+ border: none;
98
+ padding: 0.8rem 0;
70
99
  width: 3rem;
71
- padding: 0.625rem 0.5rem;
72
100
  text-align: center;
73
- border: 1px solid var(--vc-border);
74
- border-radius: 0.5rem;
75
- background: var(--vc-bg);
76
- color: var(--vc-text);
77
- font-size: 1rem;
101
+ background: transparent;
102
+ font-size: 1.1rem;
103
+ font-weight: 700;
104
+ color: inherit;
78
105
  outline: none;
79
- transition: border-color 0.2s;
80
106
  }
81
107
 
82
- .vaccination-calendar-segment-year {
83
- width: 5rem;
108
+ .vc-segment-year {
109
+ width: 4.5rem;
84
110
  }
85
111
 
86
- .vaccination-calendar-segment:focus {
87
- border-color: var(--vc-primary);
88
- }
89
-
90
- .vaccination-calendar-sep {
91
- color: var(--vc-text-muted);
92
- font-weight: 600;
93
- padding: 0 0.125rem;
112
+ .vc-sep {
113
+ color: var(--text-muted);
114
+ font-weight: 700;
115
+ font-size: 1.2rem;
116
+ opacity: 0.3;
117
+ pointer-events: none;
94
118
  }
95
119
 
96
- .vaccination-calendar-error {
97
- font-size: 0.8125rem;
98
- color: var(--vc-error);
99
- background: var(--vc-error-bg);
100
- border-radius: 0.375rem;
101
- padding: 0.375rem 0.625rem;
102
- min-height: 1.5rem;
120
+ .vc-age-badge {
121
+ margin-top: 0.25rem;
122
+ font-size: 0.85rem;
123
+ font-weight: 700;
124
+ color: var(--text-muted);
125
+ opacity: 0;
126
+ transform: translateY(-5px);
127
+ transition: all 0.3s ease;
103
128
  }
104
129
 
105
- .vaccination-calendar-error:empty {
106
- display: none;
130
+ .vc-age-badge.vc-age-visible {
131
+ opacity: 1;
132
+ transform: translateY(0);
107
133
  }
108
134
 
109
- .vaccination-calendar-age-badge {
110
- font-size: 0.875rem;
111
- font-weight: 600;
112
- color: var(--vc-primary);
113
- background: var(--vc-primary-soft);
114
- border-radius: 2rem;
115
- padding: 0.375rem 0.875rem;
116
- align-self: flex-start;
135
+ /* EMPTY STATE */
136
+ .vc-empty-state {
137
+ padding: 3rem 1.5rem;
138
+ text-align: center;
139
+ color: var(--text-muted);
117
140
  }
118
141
 
119
- .vaccination-calendar-age-badge:empty {
142
+ /* NEXT APPOINTMENT */
143
+ .vc-main-context {
144
+ padding: 2rem 1.5rem;
145
+ text-align: center;
146
+ border-bottom: 1px solid var(--border);
120
147
  display: none;
121
148
  }
122
149
 
123
- .vaccination-calendar-empty {
124
- margin-top: 1.5rem;
125
- padding: 2rem;
126
- text-align: center;
127
- color: var(--vc-text-muted);
128
- font-size: 0.9375rem;
150
+ .vc-active .vc-main-context {
151
+ display: block;
152
+ animation: vc-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
129
153
  }
130
154
 
131
- .vaccination-calendar-context {
132
- margin-top: 1.5rem;
133
- background: var(--vc-bg);
134
- border: 1px solid var(--vc-border);
135
- border-radius: 1rem;
136
- box-shadow: var(--vc-shadow);
137
- padding: 1.5rem;
138
- display: flex;
139
- flex-direction: column;
140
- gap: 1rem;
155
+ @keyframes vc-slide-up {
156
+ from {
157
+ opacity: 0;
158
+ transform: translateY(20px);
159
+ }
160
+
161
+ to {
162
+ opacity: 1;
163
+ transform: translateY(0);
164
+ }
141
165
  }
142
166
 
143
- .vaccination-calendar-next-title {
144
- font-size: 0.75rem;
167
+ .vc-next-title {
168
+ font-size: 0.9rem;
145
169
  font-weight: 700;
170
+ color: var(--primary);
146
171
  text-transform: uppercase;
147
- letter-spacing: 0.1em;
148
- color: var(--vc-text-muted);
172
+ margin: 0 0 0.5rem;
149
173
  }
150
174
 
151
- .vaccination-calendar-next-date {
152
- font-size: 1.375rem;
153
- font-weight: 700;
154
- color: var(--vc-primary);
175
+ .vc-next-date {
176
+ font-size: 1.75rem;
177
+ font-weight: 900;
178
+ margin-bottom: 1.5rem;
179
+ }
180
+
181
+ .vc-is-today .vc-next-date {
182
+ color: #ef4444;
183
+ animation: vc-pulse-today 2s infinite;
184
+ }
185
+
186
+ @keyframes vc-pulse-today {
187
+ 0% { transform: scale(1); }
188
+ 50% { transform: scale(1.02); }
189
+ 100% { transform: scale(1); }
155
190
  }
156
191
 
157
- .vaccination-calendar-is-today .vaccination-calendar-next-date {
158
- color: var(--vc-warning);
192
+ .vc-is-today .vc-btn-primary {
193
+ background: #ef4444;
194
+ box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
159
195
  }
160
196
 
161
- .vaccination-calendar-vac-list {
162
- list-style: none;
163
- padding: 0;
164
- margin: 0;
197
+ .vc-vac-list {
165
198
  display: flex;
166
199
  flex-direction: column;
167
- gap: 0.5rem;
200
+ gap: 0.75rem;
201
+ margin-bottom: 2rem;
168
202
  }
169
203
 
170
- .vaccination-calendar-vac-item {
204
+ .vc-vac-item {
171
205
  display: flex;
172
206
  align-items: center;
173
- gap: 0.5rem;
207
+ gap: 1rem;
208
+ padding: 1rem;
209
+ background: var(--primary-soft);
210
+ border-radius: 16px;
211
+ text-align: left;
212
+ border: 1px solid transparent;
213
+ transition: 0.2s;
174
214
  }
175
215
 
176
- .vaccination-calendar-vac-name {
177
- font-size: 0.9375rem;
178
- font-weight: 500;
179
- color: var(--vc-text);
216
+ .vc-vac-icon {
217
+ width: 48px;
218
+ height: 48px;
219
+ display: flex;
220
+ align-items: center;
221
+ justify-content: center;
222
+ background: #fff;
223
+ border-radius: 12px;
224
+ font-weight: 700;
225
+ color: var(--primary);
226
+ border: 1px solid var(--border);
227
+ flex-shrink: 0;
180
228
  }
181
229
 
182
- .vaccination-calendar-actions {
183
- display: flex;
184
- flex-wrap: wrap;
185
- gap: 0.75rem;
230
+ .dark .vc-vac-icon {
231
+ background: #0f172a;
186
232
  }
187
233
 
188
- .vaccination-calendar-btn-primary {
189
- background: var(--vc-primary);
190
- color: var(--vc-primary-on);
191
- border: none;
192
- border-radius: 0.5rem;
193
- padding: 0.625rem 1.25rem;
194
- font-size: 0.875rem;
195
- font-weight: 600;
196
- cursor: pointer;
197
- transition: opacity 0.15s;
234
+ .vc-vac-info {
235
+ flex: 1;
236
+ }
237
+
238
+ .vc-vac-name {
239
+ display: block;
240
+ font-weight: 700;
241
+ font-size: 1rem;
198
242
  }
199
243
 
200
- .vaccination-calendar-btn-primary:hover {
201
- opacity: 0.88;
244
+ /* BUTTONS */
245
+ .vc-btn-primary {
246
+ display: inline-flex;
247
+ align-items: center;
248
+ gap: 0.5rem;
249
+ padding: 0.8rem 1.5rem;
250
+ background: var(--primary);
251
+ color: #fff;
252
+ border-radius: 12px;
253
+ font-weight: 700;
254
+ border: none;
255
+ cursor: pointer;
256
+ width: 100%;
257
+ justify-content: center;
202
258
  }
203
259
 
204
- .vaccination-calendar-btn-share {
205
- background: var(--vc-bg-muted);
206
- color: var(--vc-primary);
260
+ /* SECTIONS (accordion) */
261
+ .vc-sections {
262
+ display: none;
207
263
  }
208
264
 
209
- .vaccination-calendar-footer {
210
- font-size: 0.75rem;
211
- color: var(--vc-text-muted);
212
- border-top: 1px solid var(--vc-border);
213
- padding-top: 0.75rem;
265
+ .vc-active .vc-sections {
266
+ display: block;
214
267
  }
215
268
 
216
- .vaccination-calendar-sections {
217
- margin-top: 1.5rem;
218
- display: flex;
219
- flex-direction: column;
220
- gap: 0.75rem;
269
+ .vc-accordion-item {
270
+ border-bottom: 1px solid var(--border);
221
271
  }
222
272
 
223
- .vaccination-calendar-accordion-item {
224
- background: var(--vc-bg);
225
- border: 1px solid var(--vc-border);
226
- border-radius: 0.875rem;
227
- overflow: hidden;
273
+ .vc-accordion-item:last-child {
274
+ border-bottom: none;
228
275
  }
229
276
 
230
- .vaccination-calendar-accordion-trigger {
277
+ .vc-accordion-trigger {
278
+ width: 100%;
279
+ padding: 1.25rem 1.5rem;
231
280
  display: flex;
232
- align-items: center;
233
281
  justify-content: space-between;
234
- padding: 1rem 1.25rem;
235
- font-size: 0.9375rem;
236
- font-weight: 600;
237
- color: var(--vc-text);
282
+ align-items: center;
283
+ background: none;
284
+ border: none;
285
+ color: inherit;
286
+ font-weight: 700;
238
287
  cursor: pointer;
239
- list-style: none;
240
- user-select: none;
288
+ font-size: 1rem;
241
289
  }
242
290
 
243
- .vaccination-calendar-accordion-trigger::-webkit-details-marker {
244
- display: none;
291
+ .vc-accordion-trigger:hover {
292
+ background: var(--primary-soft);
245
293
  }
246
294
 
247
- .vaccination-calendar-accordion-content {
248
- padding: 0.25rem 1.25rem 1.25rem;
295
+ .vc-accordion-content {
296
+ max-height: 0;
297
+ overflow: hidden;
298
+ transition: max-height 0.3s ease;
249
299
  }
250
300
 
251
- .vaccination-calendar-timeline {
301
+ .vc-accordion-item.vc-open .vc-accordion-content {
302
+ max-height: 800px;
303
+ }
304
+
305
+ .vc-timeline-compact {
306
+ padding: 0 1.5rem 1.5rem;
252
307
  display: flex;
253
308
  flex-direction: column;
254
309
  gap: 0.5rem;
255
310
  }
256
311
 
257
- .vaccination-calendar .vaccination-calendar-timeline-row {
258
- display: grid;
259
- grid-template-columns: 8rem 1fr auto;
312
+ /* TIMELINE ROW */
313
+ .vc-timeline-row {
314
+ display: flex;
315
+ justify-content: space-between;
260
316
  align-items: center;
261
- gap: 0.75rem;
262
- padding: 0.625rem 0;
263
- border-bottom: 1px solid var(--vc-border);
317
+ padding: 0.6rem 0;
318
+ border-bottom: 1px dashed var(--border);
319
+ font-size: 0.9rem;
264
320
  }
265
321
 
266
- .vaccination-calendar .vaccination-calendar-timeline-row:last-child {
322
+ .vc-timeline-row:last-child {
267
323
  border-bottom: none;
268
324
  }
269
325
 
270
- .vaccination-calendar-timeline-age {
271
- font-size: 0.8125rem;
272
- font-weight: 600;
273
- color: var(--vc-text-muted);
274
- white-space: nowrap;
326
+ .vc-timeline-age {
327
+ font-weight: 800;
328
+ color: var(--primary);
329
+ width: 6.5rem;
330
+ flex-shrink: 0;
331
+ font-size: 0.8rem;
332
+ text-transform: uppercase;
333
+ letter-spacing: 0.02em;
275
334
  }
276
335
 
277
- .vaccination-calendar-timeline-vac {
336
+ .vc-timeline-vac {
337
+ flex: 1;
338
+ font-weight: 600;
339
+ color: var(--text-main);
278
340
  display: flex;
279
341
  flex-wrap: wrap;
280
- gap: 0.375rem;
342
+ gap: 0.4rem;
343
+ padding: 0 0.5rem;
281
344
  }
282
345
 
283
- .vaccination-calendar .vaccination-calendar-vac-pill {
284
- display: inline-block;
285
- background: var(--vc-primary-soft);
286
- color: var(--vc-primary);
287
- border-radius: 2rem;
288
- padding: 0.2rem 0.625rem;
289
- font-size: 0.75rem;
290
- font-weight: 500;
346
+ .vc-vac-pill {
347
+ padding: 0.15rem 0.5rem;
348
+ background: var(--primary-soft);
349
+ border-radius: 6px;
350
+ font-size: 0.8rem;
351
+ color: var(--primary);
352
+ border: 1px solid rgba(79, 70, 229, 0.1);
291
353
  }
292
354
 
293
- .vaccination-calendar-timeline-status {
294
- font-size: 0.6875rem;
295
- font-weight: 700;
296
- border-radius: 0.25rem;
297
- padding: 0.2rem 0.5rem;
298
- white-space: nowrap;
355
+ .dark .vc-vac-pill {
356
+ background: rgba(255, 255, 255, 0.05);
357
+ color: var(--text-main);
358
+ border-color: rgba(255, 255, 255, 0.1);
299
359
  }
300
360
 
301
- .vaccination-calendar-check {
302
- background: rgba(16, 185, 129, 0.1);
303
- color: var(--vc-success);
361
+ .vc-timeline-status {
362
+ font-size: 0.65rem;
363
+ font-weight: 900;
364
+ text-transform: uppercase;
365
+ width: 3.5rem;
366
+ flex-shrink: 0;
367
+ text-align: right;
368
+ letter-spacing: 0.05em;
369
+ }
370
+
371
+ .vc-check {
372
+ color: var(--success);
373
+ }
374
+
375
+ .vc-clock {
376
+ color: var(--warning);
377
+ }
378
+
379
+ /* FOOTER */
380
+ .vc-footer {
381
+ padding: 1rem;
382
+ text-align: center;
383
+ font-size: 0.75rem;
384
+ color: var(--text-muted);
385
+ background: var(--primary-soft);
386
+ }
387
+
388
+ .vc-share-link {
389
+ display: none;
390
+ color: var(--primary);
391
+ font-weight: 700;
392
+ text-decoration: none;
304
393
  }
305
394
 
306
- .vaccination-calendar-clock {
307
- background: rgba(245, 158, 11, 0.1);
308
- color: var(--vc-warning);
395
+ .vc-active .vc-share-link {
396
+ display: inline;
309
397
  }
310
398
 
311
- @media (max-width: 600px) {
312
- .vaccination-calendar .vaccination-calendar-timeline-row {
313
- grid-template-columns: 6rem 1fr auto;
314
- gap: 0.5rem;
399
+ @media (max-width: 480px) {
400
+ .vc-timeline-age {
401
+ width: 5rem;
315
402
  }
316
403
  }