kupos-ui-components-lib 1.1.0 → 1.1.1

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/components/ServiceItem/ServiceItemDesktop.js +4 -4
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +8 -8
  3. package/dist/styles.css +0 -6
  4. package/package.json +1 -1
  5. package/src/components/ServiceItem/ServiceItemDesktop.tsx +10 -4
  6. package/src/components/ServiceItem/ServiceItemMobile.tsx +14 -8
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -300,12 +300,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
300
300
  React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:minmax(0,1.4fr)_minmax(0,0.2fr)_minmax(0,1fr)_auto] gap-x-[7rem] min-[640px]:gap-x-[5\n rem] min-[768px]:gap-x-[4rem] min-[1024px]:gap-x-[4rem] min-[1280px]:gap-x-[4rem] min-[1380px]:gap-x-[5rem] items-center" },
301
301
  React.createElement("div", { className: "min-h-[2.5rem] flex flex-col gap-[10px]", style: { justifyContent: isCiva ? "center" : "space-between" } },
302
302
  React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
303
- React.createElement("div", { className: "flex items-center" },
303
+ React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
304
304
  React.createElement("div", null,
305
305
  " ",
306
306
  orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
307
307
  React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` })))),
308
- React.createElement("div", { className: "flex items-center bold-text capitalize group relative items-center justify-between w-[200px] " },
308
+ React.createElement("div", { className: "flex items-center bold-text capitalize group relative items-center justify-between ", style: { flex: 1 } },
309
309
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
310
310
  serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-2 text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
311
311
  React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
@@ -313,10 +313,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
313
313
  React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
314
314
  React.createElement("div", { className: "font-[900] relative" }, DateService.formatTime(serviceItem.dep_time))))),
315
315
  isCiva ? null : (React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
316
- React.createElement("div", { className: "flex items-center" },
316
+ React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
317
317
  React.createElement("div", null, destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
318
318
  React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` })))),
319
- React.createElement("div", { className: "flex items-center bold-text capitalize relative group items-center justify-between w-[200px]" },
319
+ React.createElement("div", { className: "flex items-center bold-text capitalize relative group items-center justify-between ", style: { flex: 1 } },
320
320
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
321
321
  serviceItem.dropoff_stages && (React.createElement("div", { className: `hidden group-hover:block absolute -top-[8px] left-[100%] ml-2 text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
322
322
  React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -44,7 +44,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
44
44
  ? "w-[100%] flex flex-row justify-between "
45
45
  : "w-[100%] flex flex-row justify-between items-center", key: i },
46
46
  React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] ", style: {
47
- marginLeft: "10px",
47
+ // marginLeft: "10px",
48
48
  color: isSoldOut ? "#bbb" : "#464647",
49
49
  } }, type.label),
50
50
  React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] bold-text", style: { color: isSoldOut ? "#bbb" : colors.priceColor } }, commonService.currency(type.fare, currencySign))));
@@ -159,24 +159,24 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
159
159
  React.createElement("div", { className: "flex justify-end -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
160
160
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("span", { className: "text-[12px] text-[red] mt-1 flex\n justify-end\n \n \n pt-[5px] pb-[5px] pl-[15px] pr-[15px]\n rounded-[8px] bg-[#DE051414]" }, "\u00A1 \u00DAltimos Asientos!")))),
161
161
  React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
162
- React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] ", style: { justifyContent: isCiva && "center" } },
163
- React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[11px] justify-between mr-[10px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
164
- React.createElement("div", { className: "flex items-center" },
162
+ React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
163
+ React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[11px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
164
+ React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
165
165
  React.createElement("div", null,
166
166
  " ",
167
167
  orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[14px] h-auto mr-[5px]" },
168
168
  React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[14px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
169
- React.createElement("div", { className: "flex items-center relative capitalize gap-[30px] justify-between" },
169
+ React.createElement("div", { className: "flex items-center relative capitalize justify-between ", style: { flex: 1 } },
170
170
  React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
171
171
  React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
172
172
  React.createElement("div", { className: "font-[900] relative black-text" }, DateService.formatTime(serviceItem.dep_time))))),
173
- isCiva ? null : (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[11px] justify-between mr-[10px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
174
- React.createElement("div", { className: "flex items-center" },
173
+ isCiva ? null : (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[11px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
174
+ React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
175
175
  React.createElement("div", null,
176
176
  " ",
177
177
  destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[14px] h-auto mr-[5px]" },
178
178
  React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, alt: "destination", className: `w-[14px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
179
- React.createElement("div", { className: "flex items-center relative capitalize justify-between gap-[30px]" },
179
+ React.createElement("div", { className: "flex items-center relative capitalize justify-between ", style: { flex: 1 } },
180
180
  React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
181
181
  React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
182
182
  React.createElement("div", { className: "font-[900] relative black-text" }, DateService.formatTime(serviceItem.arr_time))))))),
package/dist/styles.css CHANGED
@@ -270,9 +270,6 @@
270
270
  .w-\[188px\] {
271
271
  width: 188px;
272
272
  }
273
- .w-\[200px\] {
274
- width: 200px;
275
- }
276
273
  .w-\[230px\] {
277
274
  width: 230px;
278
275
  }
@@ -370,9 +367,6 @@
370
367
  .gap-\[12px\] {
371
368
  gap: 12px;
372
369
  }
373
- .gap-\[30px\] {
374
- gap: 30px;
375
- }
376
370
  .gap-x-\[7rem\] {
377
371
  -moz-column-gap: 7rem;
378
372
  column-gap: 7rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -462,7 +462,7 @@ function ServiceItemPB({
462
462
  isSoldOut ? "text-[#c0c0c0]" : ""
463
463
  }`}
464
464
  >
465
- <div className="flex items-center">
465
+ <div className="flex items-center" style={{ flex: 1 }}>
466
466
  <div>
467
467
  {" "}
468
468
  {orignLabel ? (
@@ -479,7 +479,10 @@ function ServiceItemPB({
479
479
  </div>
480
480
  )}
481
481
  </div>
482
- <div className="flex items-center bold-text capitalize group relative items-center justify-between w-[200px] ">
482
+ <div
483
+ className="flex items-center bold-text capitalize group relative items-center justify-between "
484
+ style={{ flex: 1 }}
485
+ >
483
486
  <span className="cursor-pointer bold-text">
484
487
  {DateService.getServiceItemDate(serviceItem.travel_date)}
485
488
  </span>
@@ -520,7 +523,7 @@ function ServiceItemPB({
520
523
  isSoldOut ? "text-[#c0c0c0]" : ""
521
524
  }`}
522
525
  >
523
- <div className="flex items-center">
526
+ <div className="flex items-center" style={{ flex: 1 }}>
524
527
  <div>
525
528
  {destinationLabel ? (
526
529
  <div className="w-[60px]">{destinationLabel}</div>
@@ -535,7 +538,10 @@ function ServiceItemPB({
535
538
  </div>
536
539
  )}
537
540
  </div>
538
- <div className="flex items-center bold-text capitalize relative group items-center justify-between w-[200px]">
541
+ <div
542
+ className="flex items-center bold-text capitalize relative group items-center justify-between "
543
+ style={{ flex: 1 }}
544
+ >
539
545
  <span className="cursor-pointer bold-text">
540
546
  {DateService.getServiceItemDate(
541
547
  serviceItem.arrival_date
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -74,7 +74,7 @@ function ServiceItemMobile({
74
74
  <span
75
75
  className="min-[420]:text-[13px] text-[11px] "
76
76
  style={{
77
- marginLeft: "10px",
77
+ // marginLeft: "10px",
78
78
  color: isSoldOut ? "#bbb" : "#464647",
79
79
  }}
80
80
  >
@@ -274,15 +274,15 @@ function ServiceItemMobile({
274
274
  >
275
275
  {/* DATE AND TIME */}
276
276
  <div
277
- className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] "
277
+ className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
278
278
  style={{ justifyContent: isCiva && "center" }}
279
279
  >
280
280
  <div
281
- className={`flex items-center min-[420]:text-[13px] text-[11px] justify-between mr-[10px] ${
281
+ className={`flex items-center min-[420]:text-[13px] text-[11px] justify-between ${
282
282
  isSoldOut ? "text-[#c0c0c0]" : ""
283
283
  }`}
284
284
  >
285
- <div className="flex items-center">
285
+ <div className="flex items-center" style={{ flex: 1 }}>
286
286
  <div>
287
287
  {" "}
288
288
  {orignLabel ? (
@@ -299,7 +299,10 @@ function ServiceItemMobile({
299
299
  </div>
300
300
  )}
301
301
  </div>
302
- <div className="flex items-center relative capitalize gap-[30px] justify-between">
302
+ <div
303
+ className="flex items-center relative capitalize justify-between "
304
+ style={{ flex: 1 }}
305
+ >
303
306
  <span className="cursor-pointer black-text">
304
307
  {DateService.getServiceItemDate(serviceItem.travel_date)}
305
308
  </span>
@@ -312,11 +315,11 @@ function ServiceItemMobile({
312
315
  </div>
313
316
  {isCiva ? null : (
314
317
  <div
315
- className={`flex items-center min-[420]:text-[13px] text-[11px] justify-between mr-[10px] ${
318
+ className={`flex items-center min-[420]:text-[13px] text-[11px] justify-between ${
316
319
  isSoldOut ? "text-[#c0c0c0]" : ""
317
320
  }`}
318
321
  >
319
- <div className="flex items-center">
322
+ <div className="flex items-center" style={{ flex: 1 }}>
320
323
  <div>
321
324
  {" "}
322
325
  {destinationLabel ? (
@@ -333,7 +336,10 @@ function ServiceItemMobile({
333
336
  </div>
334
337
  )}
335
338
  </div>
336
- <div className="flex items-center relative capitalize justify-between gap-[30px]">
339
+ <div
340
+ className="flex items-center relative capitalize justify-between "
341
+ style={{ flex: 1 }}
342
+ >
337
343
  <span className="cursor-pointer black-text">
338
344
  {DateService.getServiceItemDate(
339
345
  serviceItem.arrival_date