mautourco-components 0.2.95 → 0.2.97

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 (7) hide show
  1. package/dist/components/molecules/DetailsInfo/DetailsAction.js +1 -1
  2. package/dist/styles/components/organism/round-trip.css +37 -3
  3. package/dist/styles/components/organism/transfer-line.css +40 -4
  4. package/package.json +1 -1
  5. package/src/components/molecules/DetailsInfo/DetailsAction.tsx +1 -1
  6. package/src/styles/components/organism/round-trip.css +36 -2
  7. package/src/styles/components/organism/transfer-line.css +39 -3
package/dist/components/molecules/DetailsInfo/DetailsAction.js CHANGED
@@ -32,5 +32,5 @@ export function DetailsAction(props) {
32
32
  onAction === null || onAction === void 0 ? void 0 : onAction(ActionDropdownType.DELETE_QUOTE);
33
33
  },
34
34
  },
35
- ], children: _jsxs("div", { className: cn('button button--outline-secondary button--sm w-[144px] !justify-between !px-[14px] cursor-pointer', buttonClassName), children: [buttonLabel, _jsx("span", { className: "button__icon button__icon--trailing", children: _jsx(Icon, { name: "chevron-down" }) })] }) }));
35
+ ], children: _jsxs("div", { className: cn("button button--".concat(buttonVariant, " button--sm w-[144px] !justify-between !px-[14px] cursor-pointer"), buttonClassName), children: [buttonLabel, _jsx("span", { className: "button__icon button__icon--trailing", children: _jsx(Icon, { name: "chevron-down" }) })] }) }));
36
36
  }
package/dist/styles/components/organism/round-trip.css CHANGED
@@ -6,6 +6,7 @@
6
6
 
7
7
  .round-trip {
8
8
  width: 100%;
9
+ container-type: inline-size;
9
10
  }
10
11
 
11
12
  .round-trip__content {
@@ -37,7 +38,7 @@
37
38
  line-height: 20px; /* Matches other label styles */
38
39
  }
39
40
 
40
- /* Responsive layout for mobile */
41
+ /* Fallback for older browsers - use media queries */
41
42
 
42
43
  @media (max-width: 768px) {
43
44
  .round-trip__row {
@@ -54,8 +55,6 @@
54
55
  }
55
56
  }
56
57
 
57
- /* Tablet layout */
58
-
59
58
  @media (min-width: 769px) and (max-width: 1024px) {
60
59
  .round-trip__row--first {
61
60
  flex-wrap: wrap;
@@ -70,6 +69,41 @@
70
69
  }
71
70
  }
72
71
 
72
+ /* Modern browsers with container query support */
73
+
74
+ @supports (container-type: inline-size) {
75
+ /* Responsive layout for mobile */
76
+ @container (max-width: 768px) {
77
+ .round-trip__row {
78
+ flex-direction: column;
79
+ gap: 12px;
80
+ }
81
+
82
+ .round-trip__field--pax,
83
+ .round-trip__field--dates,
84
+ .round-trip__field--pickup-dropoff,
85
+ .round-trip__field--accommodation {
86
+ width: 100%;
87
+ flex: 1 1 100%;
88
+ }
89
+ }
90
+
91
+ /* Tablet layout */
92
+ @container (min-width: 769px) and (max-width: 1024px) {
93
+ .round-trip__row--first {
94
+ flex-wrap: wrap;
95
+ }
96
+
97
+ .round-trip__field--pax {
98
+ flex: 0 0 calc(50% - 6px);
99
+ }
100
+
101
+ .round-trip__field--dates {
102
+ flex: 0 0 calc(50% - 6px);
103
+ }
104
+ }
105
+ }
106
+
73
107
  .round-trip__date-picker--input {
74
108
  height: 2.75rem !important;
75
109
  }
package/dist/styles/components/organism/transfer-line.css CHANGED
@@ -9,6 +9,7 @@
9
9
  width: 100%;
10
10
  flex-direction: column;
11
11
  gap: 0.75rem;
12
+ container-type: inline-size;
12
13
  }
13
14
 
14
15
  /* Header with icon and label */
@@ -58,7 +59,7 @@
58
59
  line-height: 1.5;
59
60
  }
60
61
 
61
- /* Mobile layout - stack fields vertically */
62
+ /* Fallback for older browsers - use media queries */
62
63
 
63
64
  @media (max-width: 768px) {
64
65
  .transfer-line__content {
@@ -78,8 +79,6 @@
78
79
  }
79
80
  }
80
81
 
81
- /* Tablet layout - 2 columns */
82
-
83
82
  @media (min-width: 769px) and (max-width: 1024px) {
84
83
  .transfer-line__content {
85
84
  flex-wrap: wrap;
@@ -93,6 +92,43 @@
93
92
  }
94
93
  }
95
94
 
95
+ /* Modern browsers with container query support */
96
+
97
+ @supports (container-type: inline-size) {
98
+ /* Mobile layout - stack fields vertically */
99
+ @container (max-width: 768px) {
100
+ .transfer-line__content {
101
+ flex-direction: column;
102
+ }
103
+
104
+ .transfer-line__field--pax,
105
+ .transfer-line__field--date,
106
+ .transfer-line__field--pickup,
107
+ .transfer-line__field--dropoff {
108
+ width: 100%;
109
+ flex: 1 1 100%;
110
+ }
111
+
112
+ .transfer-line__delete {
113
+ justify-content: center;
114
+ }
115
+ }
116
+
117
+ /* Tablet layout - 2 columns */
118
+ @container (min-width: 769px) and (max-width: 1024px) {
119
+ .transfer-line__content {
120
+ flex-wrap: wrap;
121
+ }
122
+
123
+ .transfer-line__field--pax,
124
+ .transfer-line__field--date,
125
+ .transfer-line__field--pickup,
126
+ .transfer-line__field--dropoff {
127
+ flex: 0 0 calc(50% - 0.25rem);
128
+ }
129
+ }
130
+ }
131
+
96
132
  .transfer-line__field-label {
97
133
  font-size: 0.875rem;
98
134
  line-height: 1.25rem;
@@ -136,7 +172,7 @@
136
172
  }
137
173
 
138
174
  .transfer-line__date-picker {
139
- height: 2.75rem;
175
+ height: 2.75rem !important;
140
176
  }
141
177
 
142
178
  /* Disabled state */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.95",
3
+ "version": "0.2.97",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Mautourco pour le redesign",
6
6
  "main": "dist/index.js",
package/src/components/molecules/DetailsInfo/DetailsAction.tsx CHANGED
@@ -58,7 +58,7 @@ export function DetailsAction(props: DetailsActionProps) {
58
58
  }>
59
59
  <div
60
60
  className={cn(
61
- 'button button--outline-secondary button--sm w-[144px] !justify-between !px-[14px] cursor-pointer',
61
+ `button button--${buttonVariant} button--sm w-[144px] !justify-between !px-[14px] cursor-pointer`,
62
62
  buttonClassName
63
63
  )}>
64
64
  {buttonLabel}
package/src/styles/components/organism/round-trip.css CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  .round-trip {
4
4
  @apply w-full;
5
+ container-type: inline-size;
5
6
  }
6
7
 
7
8
  .round-trip__content {
@@ -23,7 +24,7 @@
23
24
  line-height: 20px; /* Matches other label styles */
24
25
  }
25
26
 
26
- /* Responsive layout for mobile */
27
+ /* Fallback for older browsers - use media queries */
27
28
  @media (max-width: 768px) {
28
29
  .round-trip__row {
29
30
  @apply flex-col;
@@ -39,7 +40,6 @@
39
40
  }
40
41
  }
41
42
 
42
- /* Tablet layout */
43
43
  @media (min-width: 769px) and (max-width: 1024px) {
44
44
  .round-trip__row--first {
45
45
  @apply flex-wrap;
@@ -54,6 +54,40 @@
54
54
  }
55
55
  }
56
56
 
57
+ /* Modern browsers with container query support */
58
+ @supports (container-type: inline-size) {
59
+ /* Responsive layout for mobile */
60
+ @container (max-width: 768px) {
61
+ .round-trip__row {
62
+ @apply flex-col;
63
+ gap: 12px;
64
+ }
65
+
66
+ .round-trip__field--pax,
67
+ .round-trip__field--dates,
68
+ .round-trip__field--pickup-dropoff,
69
+ .round-trip__field--accommodation {
70
+ @apply w-full;
71
+ flex: 1 1 100%;
72
+ }
73
+ }
74
+
75
+ /* Tablet layout */
76
+ @container (min-width: 769px) and (max-width: 1024px) {
77
+ .round-trip__row--first {
78
+ @apply flex-wrap;
79
+ }
80
+
81
+ .round-trip__field--pax {
82
+ flex: 0 0 calc(50% - 6px);
83
+ }
84
+
85
+ .round-trip__field--dates {
86
+ flex: 0 0 calc(50% - 6px);
87
+ }
88
+ }
89
+ }
90
+
57
91
  .round-trip__date-picker--input {
58
92
  @apply !h-11;
59
93
  }
package/src/styles/components/organism/transfer-line.css CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  .transfer-line {
4
4
  @apply w-full flex flex-col gap-3;
5
+ container-type: inline-size;
5
6
  }
6
7
 
7
8
  /* Header with icon and label */
@@ -35,7 +36,7 @@
35
36
  line-height: 1.5;
36
37
  }
37
38
 
38
- /* Mobile layout - stack fields vertically */
39
+ /* Fallback for older browsers - use media queries */
39
40
  @media (max-width: 768px) {
40
41
  .transfer-line__content {
41
42
  @apply flex-col;
@@ -54,7 +55,6 @@
54
55
  }
55
56
  }
56
57
 
57
- /* Tablet layout - 2 columns */
58
58
  @media (min-width: 769px) and (max-width: 1024px) {
59
59
  .transfer-line__content {
60
60
  @apply flex-wrap;
@@ -68,6 +68,42 @@
68
68
  }
69
69
  }
70
70
 
71
+ /* Modern browsers with container query support */
72
+ @supports (container-type: inline-size) {
73
+ /* Mobile layout - stack fields vertically */
74
+ @container (max-width: 768px) {
75
+ .transfer-line__content {
76
+ @apply flex-col;
77
+ }
78
+
79
+ .transfer-line__field--pax,
80
+ .transfer-line__field--date,
81
+ .transfer-line__field--pickup,
82
+ .transfer-line__field--dropoff {
83
+ @apply w-full;
84
+ flex: 1 1 100%;
85
+ }
86
+
87
+ .transfer-line__delete {
88
+ @apply justify-center;
89
+ }
90
+ }
91
+
92
+ /* Tablet layout - 2 columns */
93
+ @container (min-width: 769px) and (max-width: 1024px) {
94
+ .transfer-line__content {
95
+ @apply flex-wrap;
96
+ }
97
+
98
+ .transfer-line__field--pax,
99
+ .transfer-line__field--date,
100
+ .transfer-line__field--pickup,
101
+ .transfer-line__field--dropoff {
102
+ flex: 0 0 calc(50% - 0.25rem);
103
+ }
104
+ }
105
+ }
106
+
71
107
  .transfer-line__field-label {
72
108
  @apply text-[var(--color-neutral-800)] text-sm font-normal;
73
109
  }
@@ -86,7 +122,7 @@
86
122
  }
87
123
 
88
124
  .transfer-line__date-picker {
89
- @apply h-11;
125
+ @apply !h-11;
90
126
  }
91
127
 
92
128
  /* Disabled state */