@ansiversa/components 0.0.123 → 0.0.124

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ansiversa/components",
3
- "version": "0.0.123",
3
+ "version": "0.0.124",
4
4
  "description": "Shared UI components and layouts for the Ansiversa ecosystem",
5
5
  "type": "module",
6
6
  "exports": {
@@ -30,17 +30,17 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
30
30
  <div class="resume-template av-print-white bg-slate-100 text-slate-900 print:bg-white">
31
31
  <main class="mx-auto max-w-4xl p-4 sm:p-6">
32
32
  <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-10 print:shadow-none print:ring-0">
33
- <header class="av-print-avoid-break flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
34
- <div>
35
- <h1 class="text-3xl font-bold tracking-tight">{basics.fullName}</h1>
36
- <p class="mt-1 text-base font-medium text-slate-700">{basics.headline}</p>
33
+ <header class="av-print-avoid-break flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
34
+ <div class="sm:max-w-[70%]">
35
+ <h1 class="text-4xl font-extrabold tracking-tight text-slate-950">{basics.fullName}</h1>
36
+ <p class="mt-1 text-sm font-semibold uppercase tracking-[0.14em] text-slate-700">{basics.headline}</p>
37
37
  {basics.summary && (
38
38
  <p class="mt-3 text-sm leading-6 text-slate-600">{basics.summary}</p>
39
39
  )}
40
40
  </div>
41
41
 
42
42
  {contactItems.length > 0 && (
43
- <div class="text-sm text-slate-700 sm:text-right">
43
+ <div class="text-sm text-slate-700 sm:max-w-[18rem] sm:border-l sm:border-slate-200 sm:pl-4 sm:text-right">
44
44
  <div class="flex flex-col gap-1 sm:items-end">
45
45
  {contactItems.map((item) =>
46
46
  item.href ? (
@@ -252,21 +252,21 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
252
252
  {hasDeclaration && (
253
253
  <>
254
254
  <div class="my-8 h-0 border-t border-slate-200"></div>
255
- <section class="av-print-avoid-break space-y-4">
255
+ <section class="av-print-avoid-break space-y-3">
256
256
  <h2 class="text-sm font-bold tracking-widest text-slate-900">DECLARATION</h2>
257
257
  {declaration.text && (
258
258
  <p class="text-sm leading-6 text-slate-700">{declaration.text}</p>
259
259
  )}
260
260
  {(declaration.place || declaration.name) && (
261
- <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
261
+ <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm text-slate-700">
262
262
  {declaration.place && (
263
- <div>
263
+ <div class="text-xs uppercase tracking-[0.12em] text-slate-600">
264
264
  <span class="font-semibold text-slate-900">Place:</span>{" "}
265
265
  {declaration.place}
266
266
  </div>
267
267
  )}
268
268
  {declaration.name && (
269
- <div class="font-semibold text-slate-900">{declaration.name}</div>
269
+ <div class="text-base font-bold tracking-wide text-slate-950">{declaration.name}</div>
270
270
  )}
271
271
  </div>
272
272
  )}
@@ -174,21 +174,21 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
174
174
  {hasDeclaration && (
175
175
  <>
176
176
  <div class="my-8 h-px bg-slate-200"></div>
177
- <section class="av-print-avoid-break space-y-4">
177
+ <section class="av-print-avoid-break space-y-3">
178
178
  <h2 class="text-sm font-bold tracking-widest text-slate-900">DECLARATION</h2>
179
179
  {declaration.text && (
180
180
  <p class="text-sm leading-6 text-slate-700">{declaration.text}</p>
181
181
  )}
182
182
  {(declaration.place || declaration.name) && (
183
- <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
183
+ <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm text-slate-700">
184
184
  {declaration.place && (
185
- <div>
185
+ <div class="text-xs uppercase tracking-[0.12em] text-slate-600">
186
186
  <span class="font-semibold text-slate-900">Place:</span>{" "}
187
187
  {declaration.place}
188
188
  </div>
189
189
  )}
190
190
  {declaration.name && (
191
- <div class="font-semibold text-slate-900">{declaration.name}</div>
191
+ <div class="text-base font-bold tracking-wide text-slate-950">{declaration.name}</div>
192
192
  )}
193
193
  </div>
194
194
  )}
@@ -29,18 +29,22 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
29
29
  <main class="mx-auto max-w-4xl p-4 sm:p-6">
30
30
  <section class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-slate-200 sm:p-12 print:shadow-none print:ring-0">
31
31
  <header class="space-y-4">
32
- <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
32
+ <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
33
33
  <div>
34
34
  <h1 class="text-4xl font-semibold tracking-tight">{basics.fullName}</h1>
35
35
  {headlineLine && <p class="mt-2 text-sm text-slate-600">{headlineLine}</p>}
36
36
  </div>
37
37
  {contactLinks.length > 0 && (
38
- <div class="text-sm text-slate-700 sm:text-right">
38
+ <div class="text-sm text-slate-700 sm:max-w-[18rem] sm:border-l sm:border-slate-200 sm:pl-4 sm:text-right">
39
39
  <div class="flex flex-col gap-1">
40
40
  {contactLinks.map((item) => (
41
+ item.href ? (
41
42
  <a class="underline underline-offset-4 hover:text-slate-900 print:no-underline" href={item.href}>
42
- {item.label}
43
- </a>
43
+ {item.label}
44
+ </a>
45
+ ) : (
46
+ <div>{item.label}</div>
47
+ )
44
48
  ))}
45
49
  </div>
46
50
  </div>
@@ -190,22 +194,22 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
190
194
 
191
195
  {hasDeclaration && (
192
196
  <>
193
- <div class="my-10 h-px bg-slate-200"></div>
194
- <section class="space-y-4">
197
+ <div class="my-6 h-px bg-slate-200"></div>
198
+ <section class="av-print-avoid-break rounded-xl border border-slate-200 p-4 space-y-3">
195
199
  <h2 class="text-xs font-semibold tracking-[0.25em] text-slate-500">DECLARATION</h2>
196
200
  {declaration.text && (
197
201
  <p class="text-sm leading-7 text-slate-700">{declaration.text}</p>
198
202
  )}
199
203
  {(declaration.place || declaration.name) && (
200
- <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
204
+ <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm text-slate-700">
201
205
  {declaration.place && (
202
- <div>
206
+ <div class="text-xs uppercase tracking-[0.12em] text-slate-600">
203
207
  <span class="font-semibold text-slate-900">Place:</span>{" "}
204
208
  {declaration.place}
205
209
  </div>
206
210
  )}
207
211
  {declaration.name && (
208
- <div class="font-semibold text-slate-900">{declaration.name}</div>
212
+ <div class="text-base font-bold tracking-wide text-slate-950">{declaration.name}</div>
209
213
  )}
210
214
  </div>
211
215
  )}
@@ -38,12 +38,12 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
38
38
  <main class="mx-auto max-w-4xl p-4 sm:p-6">
39
39
  <section class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 print:shadow-none print:ring-0">
40
40
  <div class="grid lg:grid-cols-12 print:grid-cols-1">
41
- <aside class="bg-slate-900 p-7 text-slate-100 sm:p-10 lg:col-span-4 print:order-2 print:bg-white print:text-slate-900">
41
+ <aside class="bg-slate-800 p-7 text-slate-100 sm:p-10 lg:col-span-4 print:order-2 print:bg-white print:text-slate-900">
42
42
  <div class="space-y-6">
43
43
  <div>
44
44
  <h1 class="text-3xl font-bold tracking-tight">{firstName}</h1>
45
45
  {lastName && <h1 class="-mt-1 text-3xl font-bold tracking-tight">{lastName}</h1>}
46
- <p class="mt-2 text-sm text-slate-200 print:text-slate-700">{basics.headline}</p>
46
+ <p class="mt-2 text-sm text-slate-100/90 print:text-slate-700">{basics.headline}</p>
47
47
  </div>
48
48
 
49
49
  <div class="h-px bg-slate-700 print:bg-slate-200"></div>
@@ -227,26 +227,26 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
227
227
  </div>
228
228
  </section>
229
229
 
230
- {hasDeclaration && (
231
- <section class="av-print-avoid-break">
232
- <div class="my-8 h-px bg-slate-200"></div>
233
- <h2 class="text-xs font-bold tracking-widest text-slate-500">DECLARATION</h2>
234
- {declaration.text && (
235
- <p class="mt-3 text-sm leading-6 text-slate-700">{declaration.text}</p>
236
- )}
237
- {(declaration.place || declaration.name) && (
238
- <div class="mt-3 flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
239
- {declaration.place && (
240
- <div>
241
- <span class="font-semibold text-slate-900">Place:</span>{" "}
242
- {declaration.place}
243
- </div>
244
- )}
245
- {declaration.name && (
246
- <div class="font-semibold text-slate-900">{declaration.name}</div>
247
- )}
230
+ {hasDeclaration && (
231
+ <section class="av-print-avoid-break">
232
+ <div class="my-8 h-px bg-slate-200"></div>
233
+ <h2 class="text-xs font-bold tracking-widest text-slate-500">DECLARATION</h2>
234
+ {declaration.text && (
235
+ <p class="mt-3 text-sm leading-6 text-slate-700">{declaration.text}</p>
236
+ )}
237
+ {(declaration.place || declaration.name) && (
238
+ <div class="mt-3 flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm text-slate-700">
239
+ {declaration.place && (
240
+ <div class="text-xs uppercase tracking-[0.12em] text-slate-600">
241
+ <span class="font-semibold text-slate-900">Place:</span>{" "}
242
+ {declaration.place}
248
243
  </div>
249
244
  )}
245
+ {declaration.name && (
246
+ <div class="text-base font-bold tracking-wide text-slate-950">{declaration.name}</div>
247
+ )}
248
+ </div>
249
+ )}
250
250
  </section>
251
251
  )}
252
252
  </div>