funda-ui 4.7.108 → 4.7.111

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/Stepper/index.css +30 -22
  2. package/Stepper/index.js +8 -3
  3. package/lib/cjs/Stepper/index.js +8 -3
  4. package/lib/css/Stepper/index.css +30 -22
  5. package/lib/esm/Stepper/index.scss +33 -23
  6. package/lib/esm/Stepper/index.tsx +14 -3
  7. package/package.json +1 -1
package/Stepper/index.css CHANGED
@@ -14,9 +14,10 @@
14
14
  --stepper-line-default: #dfdfdf;
15
15
  --stepper-line-active: #2563eb;
16
16
  --stepper-line-complete: #22c55e;
17
- --stepper-indicator-size: 0.875rem;
18
- --stepper-indicator-offset: 100px;
17
+ --stepper-indicator-font-size: 0.875rem;
18
+ --stepper-indicator-offset: 60px;
19
19
  --stepper-title-size: 0.875rem;
20
+ --stepper-indicator-size: 32px;
20
21
  position: relative;
21
22
  /* Navigation Header (only horizontal) */
22
23
  /* Main Navigation - Each step item (with circle + title) */
@@ -32,24 +33,25 @@
32
33
  align-items: flex-start;
33
34
  flex-wrap: nowrap;
34
35
  position: relative;
36
+ max-width: calc(100% - var(--stepper-indicator-size));
35
37
  /* background line */
36
38
  }
37
39
  .stepper-container .stepper-header::before {
38
40
  content: "";
39
41
  position: absolute;
40
42
  top: 16px; /* Subtract the height of the title */
41
- left: 14px;
43
+ left: 0;
42
44
  right: 0;
43
45
  height: 2px;
44
46
  background-color: var(--stepper-line-default);
45
47
  z-index: 1;
46
- width: calc(100% - 32px);
48
+ width: 100%;
47
49
  }
48
50
  .stepper-container .stepper-header::after {
49
51
  content: "";
50
52
  position: absolute;
51
53
  top: 16px; /* Subtract the height of the title */
52
- left: 14px;
54
+ left: 0;
53
55
  height: 2px;
54
56
  background-color: var(--stepper-line-complete);
55
57
  z-index: 2;
@@ -58,14 +60,14 @@
58
60
  }
59
61
  .stepper-container .stepper-header::after {
60
62
  width: var(--stepper-progress-width, 0%);
61
- max-width: calc(100% - 32px);
63
+ max-width: 100%;
62
64
  }
63
65
  .stepper-container .step-item {
64
66
  flex: none;
65
67
  display: flex;
66
68
  flex-direction: column;
67
69
  align-items: center;
68
- max-width: var(--stepper-indicator-offset);
70
+ max-width: 0;
69
71
  position: relative;
70
72
  z-index: 3;
71
73
  }
@@ -105,15 +107,15 @@
105
107
  transform: scaleX(1);
106
108
  }
107
109
  .stepper-container .step-indicator {
108
- width: 32px;
109
- height: 32px;
110
+ width: var(--stepper-indicator-size);
111
+ height: var(--stepper-indicator-size);
110
112
  margin: 0 auto 0.25rem;
111
113
  border-radius: 9999px;
112
114
  display: flex;
113
115
  align-items: center;
114
116
  justify-content: center;
115
117
  border: 2px solid #ccc;
116
- font-size: var(--stepper-indicator-size);
118
+ font-size: var(--stepper-indicator-font-size);
117
119
  /* default */
118
120
  background-color: var(--stepper-indicator-default);
119
121
  color: var(--stepper-color-default);
@@ -130,12 +132,17 @@
130
132
  border-color: var(--stepper-border-complete);
131
133
  }
132
134
  .stepper-container .step-title {
135
+ white-space: nowrap;
133
136
  font-size: var(--stepper-title-size);
137
+ margin-left: calc(var(--stepper-indicator-offset) / 2);
134
138
  /* default */
135
139
  color: var(--stepper-color-default);
136
140
  }
137
141
  .stepper-container .step-title--active {
138
- font-weight: bold;
142
+ color: var(--stepper-indicator-active);
143
+ }
144
+ .stepper-container .step-title--complete {
145
+ color: var(--stepper-indicator-complete);
139
146
  }
140
147
  .stepper-container .stepper-buttons {
141
148
  display: flex;
@@ -157,10 +164,10 @@
157
164
 
158
165
  /*------ Verticle ------*/
159
166
  .stepper-container.stepper-container--vertical {
160
- --stepper-indicator-offset: 50px;
161
167
  display: flex;
162
168
  flex-direction: column;
163
- gap: 1rem; /* line length */
169
+ gap: 2.5rem; /* line length */
170
+ max-height: calc(100% - var(--stepper-indicator-size));
164
171
  /* background line */
165
172
  /* Layout */
166
173
  /* Title */
@@ -170,18 +177,18 @@
170
177
  .stepper-container.stepper-container--vertical::before {
171
178
  content: "";
172
179
  position: absolute;
173
- top: 20px;
174
- left: 24px;
180
+ top: 0;
181
+ left: calc(var(--stepper-indicator-size) / 2);
175
182
  width: 2px;
176
- height: calc(100% - 32px);
183
+ height: 100%;
177
184
  background-color: var(--stepper-line-default);
178
185
  z-index: 1;
179
186
  }
180
187
  .stepper-container.stepper-container--vertical::after {
181
188
  content: "";
182
189
  position: absolute;
183
- top: 20px;
184
- left: 24px;
190
+ top: 0;
191
+ left: calc(var(--stepper-indicator-size) / 2);
185
192
  width: 2px;
186
193
  background-color: var(--stepper-line-complete);
187
194
  z-index: 2;
@@ -190,7 +197,7 @@
190
197
  }
191
198
  .stepper-container.stepper-container--vertical::after {
192
199
  height: var(--stepper-progress-height, 0%);
193
- max-height: calc(100% - 32px);
200
+ max-height: 100%;
194
201
  }
195
202
  .stepper-container.stepper-container--vertical .vertical-step-row {
196
203
  display: flex;
@@ -198,13 +205,14 @@
198
205
  }
199
206
  .stepper-container.stepper-container--vertical .vertical-step-left {
200
207
  flex-shrink: 0;
201
- width: var(--stepper-indicator-offset);
208
+ width: var(--stepper-indicator-size);
209
+ height: var(--stepper-indicator-size);
202
210
  position: relative;
203
211
  /* Main Navigation - Each step item (with circle + title) */
204
212
  /* Line */
205
213
  }
206
214
  .stepper-container.stepper-container--vertical .vertical-step-left .step-item {
207
- margin-top: 20px;
215
+ margin-top: 0;
208
216
  }
209
217
  .stepper-container.stepper-container--vertical .vertical-step-left .step-line {
210
218
  position: absolute;
@@ -216,7 +224,7 @@
216
224
  left: 70px;
217
225
  width: calc(100% - 70px);
218
226
  position: absolute;
219
- top: 1.5rem;
227
+ top: 0; /* required */
220
228
  }
221
229
  .stepper-container.stepper-container--vertical .step-title {
222
230
  display: none;
package/Stepper/index.js CHANGED
@@ -448,7 +448,8 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
448
448
  })
449
449
  }, isCompleted ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, disableCompleteIcon ? index + 1 : completeIcon) : index + 1), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
450
450
  className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-title', {
451
- 'step-title--active': isActive
451
+ 'step-title--active': isActive,
452
+ 'step-title--complete': isCompleted
452
453
  })
453
454
  }, header)), index < panels.length - 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
454
455
  className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-line', {
@@ -467,7 +468,10 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
467
468
  var isCompleted = index < activeIndex || index === panels.length - 1 && isLastStepComplete;
468
469
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
469
470
  key: index,
470
- className: "vertical-step-row"
471
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('vertical-step-row', {
472
+ 'vertical-step-row--active': isActive,
473
+ 'vertical-step-row--complete': isCompleted
474
+ })
471
475
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
472
476
  className: "vertical-step-left"
473
477
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -486,7 +490,8 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
486
490
  })
487
491
  }, isCompleted ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, disableCompleteIcon ? index + 1 : completeIcon) : index + 1), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
488
492
  className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-title', {
489
- 'step-title--active': isActive
493
+ 'step-title--active': isActive,
494
+ 'step-title--complete': isCompleted
490
495
  })
491
496
  }, header)), index < panels.length - 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
492
497
  className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-line', {
package/lib/cjs/Stepper/index.js CHANGED
@@ -448,7 +448,8 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
448
448
  })
449
449
  }, isCompleted ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, disableCompleteIcon ? index + 1 : completeIcon) : index + 1), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
450
450
  className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-title', {
451
- 'step-title--active': isActive
451
+ 'step-title--active': isActive,
452
+ 'step-title--complete': isCompleted
452
453
  })
453
454
  }, header)), index < panels.length - 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
454
455
  className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-line', {
@@ -467,7 +468,10 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
467
468
  var isCompleted = index < activeIndex || index === panels.length - 1 && isLastStepComplete;
468
469
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
469
470
  key: index,
470
- className: "vertical-step-row"
471
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('vertical-step-row', {
472
+ 'vertical-step-row--active': isActive,
473
+ 'vertical-step-row--complete': isCompleted
474
+ })
471
475
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
472
476
  className: "vertical-step-left"
473
477
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -486,7 +490,8 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
486
490
  })
487
491
  }, isCompleted ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, disableCompleteIcon ? index + 1 : completeIcon) : index + 1), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
488
492
  className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-title', {
489
- 'step-title--active': isActive
493
+ 'step-title--active': isActive,
494
+ 'step-title--complete': isCompleted
490
495
  })
491
496
  }, header)), index < panels.length - 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
492
497
  className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-line', {
package/lib/css/Stepper/index.css CHANGED
@@ -14,9 +14,10 @@
14
14
  --stepper-line-default: #dfdfdf;
15
15
  --stepper-line-active: #2563eb;
16
16
  --stepper-line-complete: #22c55e;
17
- --stepper-indicator-size: 0.875rem;
18
- --stepper-indicator-offset: 100px;
17
+ --stepper-indicator-font-size: 0.875rem;
18
+ --stepper-indicator-offset: 60px;
19
19
  --stepper-title-size: 0.875rem;
20
+ --stepper-indicator-size: 32px;
20
21
  position: relative;
21
22
  /* Navigation Header (only horizontal) */
22
23
  /* Main Navigation - Each step item (with circle + title) */
@@ -32,24 +33,25 @@
32
33
  align-items: flex-start;
33
34
  flex-wrap: nowrap;
34
35
  position: relative;
36
+ max-width: calc(100% - var(--stepper-indicator-size));
35
37
  /* background line */
36
38
  }
37
39
  .stepper-container .stepper-header::before {
38
40
  content: "";
39
41
  position: absolute;
40
42
  top: 16px; /* Subtract the height of the title */
41
- left: 14px;
43
+ left: 0;
42
44
  right: 0;
43
45
  height: 2px;
44
46
  background-color: var(--stepper-line-default);
45
47
  z-index: 1;
46
- width: calc(100% - 32px);
48
+ width: 100%;
47
49
  }
48
50
  .stepper-container .stepper-header::after {
49
51
  content: "";
50
52
  position: absolute;
51
53
  top: 16px; /* Subtract the height of the title */
52
- left: 14px;
54
+ left: 0;
53
55
  height: 2px;
54
56
  background-color: var(--stepper-line-complete);
55
57
  z-index: 2;
@@ -58,14 +60,14 @@
58
60
  }
59
61
  .stepper-container .stepper-header::after {
60
62
  width: var(--stepper-progress-width, 0%);
61
- max-width: calc(100% - 32px);
63
+ max-width: 100%;
62
64
  }
63
65
  .stepper-container .step-item {
64
66
  flex: none;
65
67
  display: flex;
66
68
  flex-direction: column;
67
69
  align-items: center;
68
- max-width: var(--stepper-indicator-offset);
70
+ max-width: 0;
69
71
  position: relative;
70
72
  z-index: 3;
71
73
  }
@@ -105,15 +107,15 @@
105
107
  transform: scaleX(1);
106
108
  }
107
109
  .stepper-container .step-indicator {
108
- width: 32px;
109
- height: 32px;
110
+ width: var(--stepper-indicator-size);
111
+ height: var(--stepper-indicator-size);
110
112
  margin: 0 auto 0.25rem;
111
113
  border-radius: 9999px;
112
114
  display: flex;
113
115
  align-items: center;
114
116
  justify-content: center;
115
117
  border: 2px solid #ccc;
116
- font-size: var(--stepper-indicator-size);
118
+ font-size: var(--stepper-indicator-font-size);
117
119
  /* default */
118
120
  background-color: var(--stepper-indicator-default);
119
121
  color: var(--stepper-color-default);
@@ -130,12 +132,17 @@
130
132
  border-color: var(--stepper-border-complete);
131
133
  }
132
134
  .stepper-container .step-title {
135
+ white-space: nowrap;
133
136
  font-size: var(--stepper-title-size);
137
+ margin-left: calc(var(--stepper-indicator-offset) / 2);
134
138
  /* default */
135
139
  color: var(--stepper-color-default);
136
140
  }
137
141
  .stepper-container .step-title--active {
138
- font-weight: bold;
142
+ color: var(--stepper-indicator-active);
143
+ }
144
+ .stepper-container .step-title--complete {
145
+ color: var(--stepper-indicator-complete);
139
146
  }
140
147
  .stepper-container .stepper-buttons {
141
148
  display: flex;
@@ -157,10 +164,10 @@
157
164
 
158
165
  /*------ Verticle ------*/
159
166
  .stepper-container.stepper-container--vertical {
160
- --stepper-indicator-offset: 50px;
161
167
  display: flex;
162
168
  flex-direction: column;
163
- gap: 1rem; /* line length */
169
+ gap: 2.5rem; /* line length */
170
+ max-height: calc(100% - var(--stepper-indicator-size));
164
171
  /* background line */
165
172
  /* Layout */
166
173
  /* Title */
@@ -170,18 +177,18 @@
170
177
  .stepper-container.stepper-container--vertical::before {
171
178
  content: "";
172
179
  position: absolute;
173
- top: 20px;
174
- left: 24px;
180
+ top: 0;
181
+ left: calc(var(--stepper-indicator-size) / 2);
175
182
  width: 2px;
176
- height: calc(100% - 32px);
183
+ height: 100%;
177
184
  background-color: var(--stepper-line-default);
178
185
  z-index: 1;
179
186
  }
180
187
  .stepper-container.stepper-container--vertical::after {
181
188
  content: "";
182
189
  position: absolute;
183
- top: 20px;
184
- left: 24px;
190
+ top: 0;
191
+ left: calc(var(--stepper-indicator-size) / 2);
185
192
  width: 2px;
186
193
  background-color: var(--stepper-line-complete);
187
194
  z-index: 2;
@@ -190,7 +197,7 @@
190
197
  }
191
198
  .stepper-container.stepper-container--vertical::after {
192
199
  height: var(--stepper-progress-height, 0%);
193
- max-height: calc(100% - 32px);
200
+ max-height: 100%;
194
201
  }
195
202
  .stepper-container.stepper-container--vertical .vertical-step-row {
196
203
  display: flex;
@@ -198,13 +205,14 @@
198
205
  }
199
206
  .stepper-container.stepper-container--vertical .vertical-step-left {
200
207
  flex-shrink: 0;
201
- width: var(--stepper-indicator-offset);
208
+ width: var(--stepper-indicator-size);
209
+ height: var(--stepper-indicator-size);
202
210
  position: relative;
203
211
  /* Main Navigation - Each step item (with circle + title) */
204
212
  /* Line */
205
213
  }
206
214
  .stepper-container.stepper-container--vertical .vertical-step-left .step-item {
207
- margin-top: 20px;
215
+ margin-top: 0;
208
216
  }
209
217
  .stepper-container.stepper-container--vertical .vertical-step-left .step-line {
210
218
  position: absolute;
@@ -216,7 +224,7 @@
216
224
  left: 70px;
217
225
  width: calc(100% - 70px);
218
226
  position: absolute;
219
- top: 1.5rem;
227
+ top: 0; /* required */
220
228
  }
221
229
  .stepper-container.stepper-container--vertical .step-title {
222
230
  display: none;
package/lib/esm/Stepper/index.scss CHANGED
@@ -1,5 +1,4 @@
1
1
 
2
-
3
2
  /* ======================================================
4
3
  <!-- Stepper -->
5
4
  /* ====================================================== */
@@ -18,9 +17,11 @@
18
17
  --stepper-line-default: #dfdfdf;
19
18
  --stepper-line-active: #2563eb;
20
19
  --stepper-line-complete: #22c55e;
21
- --stepper-indicator-size: 0.875rem;
22
- --stepper-indicator-offset: 100px;
20
+ --stepper-indicator-font-size: 0.875rem;
21
+ --stepper-indicator-offset: 60px;
23
22
  --stepper-title-size: 0.875rem;
23
+ --stepper-indicator-size: 32px;
24
+
24
25
 
25
26
 
26
27
  position: relative;
@@ -31,25 +32,27 @@
31
32
  align-items: flex-start;
32
33
  flex-wrap: nowrap;
33
34
  position: relative;
35
+ max-width: calc(100% - var(--stepper-indicator-size));
34
36
 
35
37
  /* background line */
36
38
  &::before {
37
39
  content: '';
38
40
  position: absolute;
39
41
  top: 16px; /* Subtract the height of the title */
40
- left: 14px;
42
+ left: 0;
41
43
  right: 0;
42
44
  height: 2px;
43
45
  background-color: var(--stepper-line-default);
44
46
  z-index: 1;
45
- width: calc(100% - 32px);
47
+ width: 100%;
48
+
46
49
  }
47
50
 
48
51
  &::after {
49
52
  content: '';
50
53
  position: absolute;
51
54
  top: 16px; /* Subtract the height of the title */
52
- left: 14px;
55
+ left: 0;
53
56
  height: 2px;
54
57
  background-color: var(--stepper-line-complete);
55
58
  z-index: 2;
@@ -59,7 +62,7 @@
59
62
 
60
63
  &::after {
61
64
  width: var(--stepper-progress-width, 0%);
62
- max-width: calc(100% - 32px);
65
+ max-width: 100%;
63
66
  }
64
67
  }
65
68
 
@@ -69,7 +72,7 @@
69
72
  display: flex;
70
73
  flex-direction: column;
71
74
  align-items: center;
72
- max-width: var(--stepper-indicator-offset);
75
+ max-width: 0;
73
76
  position: relative;
74
77
  z-index: 3;
75
78
 
@@ -123,15 +126,15 @@
123
126
 
124
127
  /* Indicator */
125
128
  .step-indicator {
126
- width: 32px;
127
- height: 32px;
129
+ width: var(--stepper-indicator-size);
130
+ height: var(--stepper-indicator-size);
128
131
  margin: 0 auto 0.25rem;
129
132
  border-radius: 9999px;
130
133
  display: flex;
131
134
  align-items: center;
132
135
  justify-content: center;
133
136
  border: 2px solid #ccc;
134
- font-size: var(--stepper-indicator-size);
137
+ font-size: var(--stepper-indicator-font-size);
135
138
 
136
139
  /* default */
137
140
  background-color: var(--stepper-indicator-default);
@@ -155,13 +158,19 @@
155
158
 
156
159
  /* Title */
157
160
  .step-title {
161
+ white-space: nowrap;
158
162
  font-size: var(--stepper-title-size);
163
+ margin-left: calc(var(--stepper-indicator-offset) / 2);
159
164
 
160
165
  /* default */
161
166
  color: var(--stepper-color-default);
162
167
 
163
168
  &--active {
164
- font-weight: bold;
169
+ color: var(--stepper-indicator-active);
170
+ }
171
+
172
+ &--complete {
173
+ color: var(--stepper-indicator-complete);
165
174
  }
166
175
  }
167
176
 
@@ -201,20 +210,20 @@
201
210
  /*------ Verticle ------*/
202
211
  .stepper-container.stepper-container--vertical {
203
212
 
204
- --stepper-indicator-offset: 50px;
205
213
 
206
214
  display: flex;
207
215
  flex-direction: column;
208
- gap: 1rem; /* line length */
216
+ gap: 2.5rem; /* line length */
217
+ max-height: calc(100% - var(--stepper-indicator-size));
209
218
 
210
219
  /* background line */
211
220
  &::before {
212
221
  content: '';
213
222
  position: absolute;
214
- top: 20px;
215
- left: 24px;
223
+ top: 0;
224
+ left: calc(var(--stepper-indicator-size) / 2);
216
225
  width: 2px;
217
- height: calc(100% - 32px);
226
+ height: 100%;
218
227
  background-color: var(--stepper-line-default);
219
228
  z-index: 1;
220
229
  }
@@ -222,8 +231,8 @@
222
231
  &::after {
223
232
  content: '';
224
233
  position: absolute;
225
- top: 20px;
226
- left: 24px;
234
+ top: 0;
235
+ left: calc(var(--stepper-indicator-size) / 2);
227
236
  width: 2px;
228
237
  background-color: var(--stepper-line-complete);
229
238
  z-index: 2;
@@ -233,7 +242,7 @@
233
242
 
234
243
  &::after {
235
244
  height: var(--stepper-progress-height, 0%);
236
- max-height: calc(100% - 32px);
245
+ max-height: 100%;
237
246
  }
238
247
 
239
248
 
@@ -244,12 +253,13 @@
244
253
  }
245
254
  .vertical-step-left {
246
255
  flex-shrink: 0;
247
- width: var(--stepper-indicator-offset);
256
+ width: var(--stepper-indicator-size);
257
+ height: var(--stepper-indicator-size);
248
258
  position: relative;
249
259
 
250
260
  /* Main Navigation - Each step item (with circle + title) */
251
261
  .step-item {
252
- margin-top: 20px;
262
+ margin-top: 0;
253
263
  }
254
264
 
255
265
  /* Line */
@@ -266,7 +276,7 @@
266
276
  left: 70px;
267
277
  width: calc(100% - 70px);
268
278
  position: absolute;
269
- top: 1.5rem;
279
+ top: 0; /* required */
270
280
  }
271
281
 
272
282
  /* Title */
package/lib/esm/Stepper/index.tsx CHANGED
@@ -131,7 +131,8 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
131
131
  className={combinedCls(
132
132
  'step-title',
133
133
  {
134
- 'step-title--active': isActive
134
+ 'step-title--active': isActive,
135
+ 'step-title--complete': isCompleted
135
136
  }
136
137
  )}
137
138
  >
@@ -168,7 +169,16 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
168
169
  const isCompleted = index < activeIndex || (index === panels.length - 1 && isLastStepComplete);
169
170
 
170
171
  return (
171
- <div key={index} className="vertical-step-row">
172
+ <div
173
+ key={index}
174
+ className={combinedCls(
175
+ 'vertical-step-row',
176
+ {
177
+ 'vertical-step-row--active': isActive,
178
+ 'vertical-step-row--complete': isCompleted
179
+ }
180
+ )}
181
+ >
172
182
  {/* Left */}
173
183
  <div className="vertical-step-left">
174
184
  <div
@@ -199,7 +209,8 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
199
209
  className={combinedCls(
200
210
  'step-title',
201
211
  {
202
- 'step-title--active': isActive
212
+ 'step-title--active': isActive,
213
+ 'step-title--complete': isCompleted
203
214
  }
204
215
  )}
205
216
  >
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "UIUX Lab",
3
3
  "email": "uiuxlab@gmail.com",
4
4
  "name": "funda-ui",
5
- "version": "4.7.108",
5
+ "version": "4.7.111",
6
6
  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
7
7
  "repository": {
8
8
  "type": "git",