kupos-ui-components-lib 9.7.7 → 9.7.9

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 (6) hide show
  1. package/dist/styles.css +3 -3
  2. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +9 -7
  3. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +2 -2
  4. package/package.json +1 -1
  5. package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +15 -7
  6. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +2 -1
package/dist/styles.css CHANGED
@@ -225,6 +225,9 @@
225
225
  .mt-\[15px\] {
226
226
  margin-top: 15px;
227
227
  }
228
+ .mt-\[16px\] {
229
+ margin-top: 16px;
230
+ }
228
231
  .mt-\[20px\] {
229
232
  margin-top: 20px;
230
233
  }
@@ -1011,9 +1014,6 @@
1011
1014
  .text-\[14px\] {
1012
1015
  font-size: 14px;
1013
1016
  }
1014
- .text-\[15px\] {
1015
- font-size: 15px;
1016
- }
1017
1017
  .text-\[17\.33px\] {
1018
1018
  font-size: 17.33px;
1019
1019
  }
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js CHANGED
@@ -88,7 +88,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
88
88
  borderRadius: "14px",
89
89
  } },
90
90
  React.createElement("div", { className: "flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]" },
91
- React.createElement("div", { className: "flex items-center gap-[10px] mt-[10px]" },
91
+ React.createElement("div", { className: "flex items-center gap-[10px] mt-[16px]" },
92
92
  React.createElement("span", null, "Salida flexible"),
93
93
  React.createElement("div", { className: "bold-text font-[9px]", style: {
94
94
  backgroundColor: "#FF5C60",
@@ -152,16 +152,18 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
152
152
  })))))))),
153
153
  React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
154
154
  React.createElement("div", null,
155
- React.createElement("span", { className: "text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]" }, "3 operadores compitiendo por tu compra"),
156
- React.createElement("div", { className: "flex gap-[8px] text-[white]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
155
+ React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } }, "3 operadores compitiendo por tu compra"),
156
+ React.createElement("div", { className: "flex gap-[8px] text-[white]", style: { width: "100%" } }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
157
+ flex: 1,
158
+ minWidth: 0,
157
159
  height: "100px",
158
160
  border: "1px solid #363c48",
159
161
  backgroundColor: "#1a202e",
160
- padding: "14px 10px",
162
+ padding: "14px 6px",
161
163
  } },
162
164
  React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
163
- React.createElement("span", { className: "text-[12px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
164
- React.createElement("span", { className: "text-[11px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
165
+ React.createElement("span", { className: "text-[12px] truncate max-w-full text-center " }, serviceItem.operator_details[2]),
166
+ React.createElement("span", { className: "text-[11px] mt-[6px] whitespace-nowrap" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
165
167
  React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]", style: {
166
168
  border: "1px solid #363c48",
167
169
  backgroundColor: "#1a202e",
@@ -246,7 +248,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
246
248
  React.createElement("div", { className: "flex flex-col" },
247
249
  React.createElement("span", { className: "bold-text" }, step.name),
248
250
  React.createElement("span", null, step.text)))))))))),
249
- React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
251
+ React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-center gap-[12px] z-10 " },
250
252
  React.createElement("div", { className: "flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap" },
251
253
  React.createElement("span", { className: "flex items-center" },
252
254
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" }),
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -119,6 +119,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
119
119
  React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
120
120
  React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
121
121
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
122
+ React.createElement("div", { className: "text-[12px] bold-text" }, "Viernes 23 de mayo"),
122
123
  React.createElement("div", { className: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
123
124
  if (!e.currentTarget.contains(e.relatedTarget)) {
124
125
  onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
@@ -147,8 +148,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
147
148
  onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
148
149
  }, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
149
150
  React.createElement("span", null, slot)));
150
- }))))),
151
- React.createElement("div", { className: "text-[11px] bold-text" }, "Viernes 23 de mayo")),
151
+ })))))),
152
152
  React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
153
153
  React.createElement("div", { className: "flex items-justify gap-[8px]" },
154
154
  renderIcon("sheildIcon", "16px"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.7.7",
3
+ "version": "9.7.9",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx CHANGED
@@ -121,7 +121,7 @@ const FeatureServiceUiMobile = ({
121
121
  }}
122
122
  >
123
123
  <div className="flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]">
124
- <div className="flex items-center gap-[10px] mt-[10px]">
124
+ <div className="flex items-center gap-[10px] mt-[16px]">
125
125
  <span>Salida flexible</span>
126
126
  <div
127
127
  className="bold-text font-[9px]"
@@ -252,19 +252,27 @@ const FeatureServiceUiMobile = ({
252
252
  <div className="border-t border-[#363c48] my-[8px]" />
253
253
 
254
254
  <div>
255
- <span className="text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]">
255
+ <span
256
+ className="block w-full text-[14px] bold-text text-[white] mb-[10px]"
257
+ style={{ textAlign: "center" }}
258
+ >
256
259
  3 operadores compitiendo por tu compra
257
260
  </span>
258
- <div className="flex gap-[8px] text-[white]">
261
+ <div
262
+ className="flex gap-[8px] text-[white]"
263
+ style={{ width: "100%" }}
264
+ >
259
265
  {operators.map((op, idx) => (
260
266
  <div
261
267
  key={idx}
262
268
  className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
263
269
  style={{
270
+ flex: 1,
271
+ minWidth: 0,
264
272
  height: "100px",
265
273
  border: "1px solid #363c48",
266
274
  backgroundColor: "#1a202e",
267
- padding: "14px 10px",
275
+ padding: "14px 6px",
268
276
  }}
269
277
  >
270
278
  <img
@@ -274,13 +282,13 @@ const FeatureServiceUiMobile = ({
274
282
  isSoldOut ? "grayscale" : ""
275
283
  }`}
276
284
  />
277
- <span className="text-[12px] truncate max-w-full text-center">
285
+ <span className="text-[12px] truncate max-w-full text-center ">
278
286
  {serviceItem.operator_details[2]}
279
287
  </span>
280
288
  {/* <div className="bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
281
289
  <span>{op?.time}</span>
282
290
  </div> */}
283
- <span className="text-[11px] mt-[6px]">
291
+ <span className="text-[11px] mt-[6px] whitespace-nowrap">
284
292
  {op?.seatsAvailable}
285
293
  </span>
286
294
  </div>
@@ -485,7 +493,7 @@ const FeatureServiceUiMobile = ({
485
493
  </div>
486
494
 
487
495
  {/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
488
- <div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
496
+ <div className="absolute -top-[11px] left-0 w-full flex items-center justify-center gap-[12px] z-10 ">
489
497
  <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
490
498
  <span className="flex items-center">
491
499
  <LottiePlayer
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED
@@ -192,6 +192,8 @@ const FeatureServiceUi = ({
192
192
  </div>
193
193
 
194
194
  <div className="flex flex-col gap-[8px]">
195
+ <div className="text-[12px] bold-text">Viernes 23 de mayo</div>
196
+
195
197
  <div
196
198
  className="kupos-time-dd relative"
197
199
  tabIndex={0}
@@ -260,7 +262,6 @@ const FeatureServiceUi = ({
260
262
  {/* <div className="text-[12px] bold-text whitespace-nowrap">
261
263
  Entre 07:00 AM y 10:00 AM
262
264
  </div> */}
263
- <div className="text-[11px] bold-text">Viernes 23 de mayo</div>
264
265
  </div>
265
266
 
266
267
  <div className="flex flex-col items-start gap-[10px] text-[12px] ">