mautourco-components 0.2.119 → 0.2.121

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.
@@ -4,9 +4,14 @@
4
4
 
5
5
  .feature-row {
6
6
  display: flex;
7
- align-items: center;
8
- gap: var(--spacing-gap-gap-3, 12px);
7
+ flex-direction: column;
8
+ gap: var(--spacing-gap-gap-1, 4px);
9
9
  padding: var(--spacing-padding-py-0, 0px) var(--spacing-padding-px-0, 0px);
10
+ @media (width >= 1536px) {
11
+ flex-direction: row;
12
+ align-items: center;
13
+ gap: var(--spacing-gap-gap-3, 12px);
14
+ }
10
15
  }
11
16
 
12
17
  .feature-row__label {
@@ -19,7 +24,9 @@
19
24
  }
20
25
 
21
26
  .feature-row__label-text {
22
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
27
+ font-family:
28
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
29
+ sans-serif;
23
30
  font-weight: var(--font-weight-font-bold, 700);
24
31
  font-size: var(--font-size-text-base, 16px);
25
32
  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
@@ -28,9 +35,12 @@
28
35
  }
29
36
 
30
37
  .feature-row__divider {
31
- flex-shrink: 0;
32
- height: 17px;
33
- width: var(--divider-border-width-default, 1px);
38
+ display: none;
39
+ @media (width >= 1536px) {
40
+ flex-shrink: 0;
41
+ height: 17px;
42
+ width: var(--divider-border-width-default, 1px);
43
+ }
34
44
  }
35
45
 
36
46
  .feature-row__value {
@@ -47,7 +57,9 @@
47
57
  }
48
58
 
49
59
  .feature-row__value-text {
50
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
60
+ font-family:
61
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
62
+ sans-serif;
51
63
  font-weight: var(--font-weight-font-normal, 400);
52
64
  font-size: var(--font-size-text-sm, 14px);
53
65
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
@@ -200,9 +200,12 @@
200
200
  display: flex;
201
201
  flex-direction: column;
202
202
  /* Figma uses a slightly larger inter-row gap (14px) */
203
- gap: var(--spacing-gap-gap-3-5, 14px);
204
- /* Figma: pl 10px for the features block */
203
+ gap: var(--spacing-gap-gap-4, 16px);
205
204
  padding-left: var(--spacing-padding-px-2-5, 10px);
205
+ /* Figma: pl 10px for the features block */
206
+ @media (width >= 1536px) {
207
+ gap: var(--spacing-gap-gap-3-5, 14px);
208
+ }
206
209
  }
207
210
 
208
211
  .car-booking-card__info {
@@ -266,14 +269,18 @@
266
269
  gap: var(--spacing-gap-gap-2, 8px);
267
270
  padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
268
271
  background: var(--color-elevation-level-1, #ffffff);
269
- border: var(--input-border-width-default, 1px) solid var(--color-border-default, #d4d4d4);
272
+ border: var(--input-border-width-default, 1px) solid
273
+ var(--color-border-default, #d4d4d4);
270
274
  border-radius: var(--border-radius-rounded-xl, 12px);
271
- font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
275
+ font-family:
276
+ var(--font-font-family-body, 'Satoshi'), 'Inter', 'Segoe UI', 'system-ui', sans-serif;
272
277
  font-size: var(--font-size-text-base, 16px);
273
278
  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
274
279
  color: var(--color-text-default, #262626);
275
280
  cursor: pointer;
276
- transition: border-color 0.2s ease, background-color 0.2s ease;
281
+ transition:
282
+ border-color 0.2s ease,
283
+ background-color 0.2s ease;
277
284
  min-height: 48px;
278
285
  }
279
286
 
@@ -282,7 +289,8 @@
282
289
  }
283
290
 
284
291
  .car-booking-card__supplement-trigger:focus {
285
- outline: var(--border-width-focus, 2px) solid var(--color-border-active-default, #0f7173);
292
+ outline: var(--border-width-focus, 2px) solid
293
+ var(--color-border-active-default, #0f7173);
286
294
  outline-offset: var(--spacing-base-0-5, 2px);
287
295
  }
288
296
 
@@ -297,7 +305,8 @@
297
305
  font-weight: var(--font-weight-font-regular, 400);
298
306
  }
299
307
 
300
- .car-booking-card__supplement-trigger--has-value .car-booking-card__supplement-placeholder {
308
+ .car-booking-card__supplement-trigger--has-value
309
+ .car-booking-card__supplement-placeholder {
301
310
  color: var(--color-text-default, #262626);
302
311
  }
303
312
 
@@ -312,7 +321,9 @@
312
321
  /* Ensure chips are properly interactive within the button */
313
322
  .car-booking-card__supplement-chips .chip {
314
323
  cursor: pointer;
315
- transition: opacity 0.15s ease, transform 0.15s ease;
324
+ transition:
325
+ opacity 0.15s ease,
326
+ transform 0.15s ease;
316
327
  -webkit-user-select: none;
317
328
  user-select: none;
318
329
  }
@@ -337,7 +348,9 @@
337
348
 
338
349
  /* Transition for chip icons */
339
350
  .car-booking-card__supplement-chips .chip .chip__icon--trailing {
340
- transition: transform 0.15s ease, opacity 0.15s ease;
351
+ transition:
352
+ transform 0.15s ease,
353
+ opacity 0.15s ease;
341
354
  opacity: 0.8;
342
355
  }
343
356
 
@@ -271,6 +271,7 @@ var PaxSelector = function (_a) {
271
271
  if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
272
272
  setIsOpen(false);
273
273
  onDone === null || onDone === void 0 ? void 0 : onDone(multipleRooms ? rooms : internalData);
274
+ onPaxInvalid === null || onPaxInvalid === void 0 ? void 0 : onPaxInvalid(false);
274
275
  }
275
276
  };
276
277
  var handleAddRoom = function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.119",
3
+ "version": "0.2.121",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Mautourco pour le redesign",
6
6
  "main": "dist/index.js",
@@ -1,8 +1,13 @@
1
1
  .feature-row {
2
2
  display: flex;
3
- align-items: center;
4
- gap: var(--spacing-gap-gap-3, 12px);
3
+ flex-direction: column;
4
+ gap: var(--spacing-gap-gap-1, 4px);
5
5
  padding: var(--spacing-padding-py-0, 0px) var(--spacing-padding-px-0, 0px);
6
+ @media (width >= 1536px) {
7
+ flex-direction: row;
8
+ align-items: center;
9
+ gap: var(--spacing-gap-gap-3, 12px);
10
+ }
6
11
  }
7
12
 
8
13
  .feature-row__label {
@@ -15,7 +20,9 @@
15
20
  }
16
21
 
17
22
  .feature-row__label-text {
18
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
23
+ font-family:
24
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
25
+ sans-serif;
19
26
  font-weight: var(--font-weight-font-bold, 700);
20
27
  font-size: var(--font-size-text-base, 16px);
21
28
  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
@@ -24,9 +31,12 @@
24
31
  }
25
32
 
26
33
  .feature-row__divider {
27
- flex-shrink: 0;
28
- height: 17px;
29
- width: var(--divider-border-width-default, 1px);
34
+ display: none;
35
+ @media (width >= 1536px) {
36
+ flex-shrink: 0;
37
+ height: 17px;
38
+ width: var(--divider-border-width-default, 1px);
39
+ }
30
40
  }
31
41
 
32
42
  .feature-row__value {
@@ -43,7 +53,9 @@
43
53
  }
44
54
 
45
55
  .feature-row__value-text {
46
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
56
+ font-family:
57
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
58
+ sans-serif;
47
59
  font-weight: var(--font-weight-font-normal, 400);
48
60
  font-size: var(--font-size-text-sm, 14px);
49
61
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
@@ -57,4 +69,3 @@
57
69
  .feature-row__value-text--not-applicable {
58
70
  color: var(--color-messaging-danger-foreground, #a01414);
59
71
  }
60
-
@@ -196,9 +196,12 @@
196
196
  display: flex;
197
197
  flex-direction: column;
198
198
  /* Figma uses a slightly larger inter-row gap (14px) */
199
- gap: var(--spacing-gap-gap-3-5, 14px);
200
- /* Figma: pl 10px for the features block */
199
+ gap: var(--spacing-gap-gap-4, 16px);
201
200
  padding-left: var(--spacing-padding-px-2-5, 10px);
201
+ /* Figma: pl 10px for the features block */
202
+ @media (width >= 1536px) {
203
+ gap: var(--spacing-gap-gap-3-5, 14px);
204
+ }
202
205
  }
203
206
 
204
207
  .car-booking-card__info {
@@ -262,14 +265,18 @@
262
265
  gap: var(--spacing-gap-gap-2, 8px);
263
266
  padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
264
267
  background: var(--color-elevation-level-1, #ffffff);
265
- border: var(--input-border-width-default, 1px) solid var(--color-border-default, #d4d4d4);
268
+ border: var(--input-border-width-default, 1px) solid
269
+ var(--color-border-default, #d4d4d4);
266
270
  border-radius: var(--border-radius-rounded-xl, 12px);
267
- font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
271
+ font-family:
272
+ var(--font-font-family-body, 'Satoshi'), 'Inter', 'Segoe UI', 'system-ui', sans-serif;
268
273
  font-size: var(--font-size-text-base, 16px);
269
274
  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
270
275
  color: var(--color-text-default, #262626);
271
276
  cursor: pointer;
272
- transition: border-color 0.2s ease, background-color 0.2s ease;
277
+ transition:
278
+ border-color 0.2s ease,
279
+ background-color 0.2s ease;
273
280
  min-height: 48px;
274
281
  }
275
282
 
@@ -278,7 +285,8 @@
278
285
  }
279
286
 
280
287
  .car-booking-card__supplement-trigger:focus {
281
- outline: var(--border-width-focus, 2px) solid var(--color-border-active-default, #0f7173);
288
+ outline: var(--border-width-focus, 2px) solid
289
+ var(--color-border-active-default, #0f7173);
282
290
  outline-offset: var(--spacing-base-0-5, 2px);
283
291
  }
284
292
 
@@ -293,7 +301,8 @@
293
301
  font-weight: var(--font-weight-font-regular, 400);
294
302
  }
295
303
 
296
- .car-booking-card__supplement-trigger--has-value .car-booking-card__supplement-placeholder {
304
+ .car-booking-card__supplement-trigger--has-value
305
+ .car-booking-card__supplement-placeholder {
297
306
  color: var(--color-text-default, #262626);
298
307
  }
299
308
 
@@ -308,7 +317,9 @@
308
317
  /* Ensure chips are properly interactive within the button */
309
318
  .car-booking-card__supplement-chips .chip {
310
319
  cursor: pointer;
311
- transition: opacity 0.15s ease, transform 0.15s ease;
320
+ transition:
321
+ opacity 0.15s ease,
322
+ transform 0.15s ease;
312
323
  user-select: none;
313
324
  }
314
325
 
@@ -332,7 +343,9 @@
332
343
 
333
344
  /* Transition for chip icons */
334
345
  .car-booking-card__supplement-chips .chip .chip__icon--trailing {
335
- transition: transform 0.15s ease, opacity 0.15s ease;
346
+ transition:
347
+ transform 0.15s ease,
348
+ opacity 0.15s ease;
336
349
  opacity: 0.8;
337
350
  }
338
351
 
@@ -364,5 +377,3 @@
364
377
  max-height: 600px;
365
378
  overflow-y: auto;
366
379
  }
367
-
368
-
@@ -388,6 +388,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
388
388
  if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
389
389
  setIsOpen(false);
390
390
  onDone?.(multipleRooms ? rooms : internalData);
391
+ onPaxInvalid?.(false);
391
392
  }
392
393
  };
393
394