kupos-ui-components-lib 9.7.8 → 9.7.10

package/dist/components/ServiceItem/mobileTypes.d.ts

@@ -124,6 +124,19 @@ export interface MobileServiceItemProps {
             directoIcon?: string;
             whiteFireIcon?: string;
             femaleAnim?: string;
+            thunderAnim?: string;
+            personsAnim?: string;
+            whiteOrigin?: string;
+            whiteDestination?: string;
+            userIcon?: string;
+            sheildIcon?: string;
+            busIcon?: string;
+            whiteDownArrow?: string;
+            empressaIcon?: string;
+            flexibleIcon?: string;
+            listoIcon?: string;
+            precioIcon?: string;
+            confirmarIcon?: string;
             cancelTicketIcon?: string;
             changeTicketIcon?: string;
             petFriendlyIcon?: string;
@@ -133,6 +146,7 @@ export interface MobileServiceItemProps {
         useLottieFor?: string[];
     };
     onBookButtonPress?: () => void;
+    onRemateUiButtonClick?: () => void;
     terminals?: any[];
     showDropdown?: boolean;
     setShowDropdown?: (value: boolean) => void;
@@ -187,4 +201,22 @@ export interface MobileServiceItemProps {
         label?: string;
         icon?: string;
     };
+    isFeatureDropDownExpand?: any;
+    setIsFeatureDropDownExpand?: (value: any) => void;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+    onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+    cityOrigin?: {
+        value: number;
+        label: string;
+    };
+    cityDestination?: {
+        value: number;
+        label: string;
+    };
+    isNewUi?: boolean;
+    selectedTimeSlot?: string;
+    onTimeSlotChange?: (slot: string) => void;
+    isTimeDropdownOpen?: string | number | null;
+    onTimeDropdownToggle?: (id?: string | number | null) => void;
 }

package/dist/components/ServiceItem/types.d.ts

@@ -129,11 +129,23 @@ export interface ServiceItemProps {
             personIcon?: string;
             whiteFireIcon?: string;
             fireIcon?: string;
+            whiteOrigin?: string;
+            whiteDestination?: string;
+            userIcon?: string;
+            sheildIcon?: string;
+            busIcon?: string;
+            whiteDownArrow?: string;
+            empressaIcon?: string;
+            flexibleIcon?: string;
+            listoIcon?: string;
+            precioIcon?: string;
+            confirmarIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];
     };
     onBookButtonPress?: () => void;
+    onRemateUiButtonClick?: () => void;
     terminals?: any[];
     t?: (key: string) => string;
     serviceDetailsLoading?: boolean;
@@ -213,6 +225,11 @@ export interface ServiceItemProps {
     isAllinBus?: boolean;
     isExpand?: any;
     setIsExpand?: (value: any) => void;
+    isFeatureDropDownExpand?: any;
+    setIsFeatureDropDownExpand?: (value: any) => void;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
+    onDecreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
     coachKey?: number;
     viewersConfig?: {
         min: number;
@@ -221,7 +238,12 @@ export interface ServiceItemProps {
         label?: string;
         icon?: string;
     };
+    isNewUi?: boolean;
     showLoginModal?: any;
     isLoggedIn?: any;
     showLoginOption?: boolean;
+    selectedTimeSlot?: string;
+    onTimeSlotChange?: (slot: string) => void;
+    isTimeDropdownOpen?: string | number | null;
+    onTimeDropdownToggle?: (id?: string | number | null) => void;
 }

package/dist/styles.css

@@ -60,9 +60,15 @@
 .top-\[88\%\] {
   top: 88%;
 }
+.top-\[calc\(100\%\+10px\)\] {
+  top: calc(100% + 10px);
+}
 .right-\[0px\] {
   right: 0px;
 }
+.right-\[18px\] {
+  right: 18px;
+}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -75,6 +81,9 @@
 .-bottom-\[36px\] {
   bottom: calc(36px * -1);
 }
+.bottom-\[11px\] {
+  bottom: 11px;
+}
 .bottom-\[35px\] {
   bottom: 35px;
 }
@@ -168,9 +177,18 @@
 .m-\[auto\] {
   margin: auto;
 }
+.mx-\[10px\] {
+  margin-inline: 10px;
+}
 .mx-auto {
   margin-inline: auto;
 }
+.my-\[8px\] {
+  margin-block: 8px;
+}
+.my-\[14px\] {
+  margin-block: 14px;
+}
 .-mt-\[15px\] {
   margin-top: calc(15px * -1);
 }
@@ -189,15 +207,27 @@
 .mt-\[5px\] {
   margin-top: 5px;
 }
+.mt-\[6px\] {
+  margin-top: 6px;
+}
 .mt-\[10px\] {
   margin-top: 10px;
 }
+.mt-\[12px\] {
+  margin-top: 12px;
+}
 .mt-\[13px\] {
   margin-top: 13px;
 }
+.mt-\[14px\] {
+  margin-top: 14px;
+}
 .mt-\[15px\] {
   margin-top: 15px;
 }
+.mt-\[16px\] {
+  margin-top: 16px;
+}
 .mt-\[20px\] {
   margin-top: 20px;
 }
@@ -285,6 +315,9 @@
 .ml-\[10px\] {
   margin-left: 10px;
 }
+.ml-\[12px\] {
+  margin-left: 12px;
+}
 .ml-\[50px\] {
   margin-left: 50px;
 }
@@ -342,6 +375,9 @@
 .h-\[30px\] {
   height: 30px;
 }
+.h-\[34px\] {
+  height: 34px;
+}
 .h-\[100\%\] {
   height: 100%;
 }
@@ -378,6 +414,9 @@
 .w-\[20px\] {
   width: 20px;
 }
+.w-\[34px\] {
+  width: 34px;
+}
 .w-\[50\%\] {
   width: 50%;
 }
@@ -402,6 +441,12 @@
 .w-\[115px\] {
   width: 115px;
 }
+.w-\[120px\] {
+  width: 120px;
+}
+.w-\[130px\] {
+  width: 130px;
+}
 .w-\[150px\] {
   width: 150px;
 }
@@ -440,6 +485,12 @@
 .max-w-\[165px\] {
   max-width: 165px;
 }
+.max-w-\[220px\] {
+  max-width: 220px;
+}
+.max-w-full {
+  max-width: 100%;
+}
 .min-w-\[75px\] {
   min-width: 75px;
 }
@@ -461,6 +512,9 @@
   --tw-translate-y: -10px;
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
+.rotate-0 {
+  rotate: 0deg;
+}
 .rotate-180 {
   rotate: 180deg;
 }
@@ -470,6 +524,9 @@
 .cursor-default {
   cursor: default;
 }
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -482,12 +539,21 @@
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .grid-cols-\[0\.8fr_auto_26\%_1fr\] {
   grid-template-columns: 0.8fr auto 26% 1fr;
 }
 .grid-cols-\[1\.5fr_1fr_auto\] {
   grid-template-columns: 1.5fr 1fr auto;
 }
+.grid-cols-\[25\%_48\%_27\%\] {
+  grid-template-columns: 25% 48% 27%;
+}
 .grid-cols-\[26px_auto_26\%_1fr\] {
   grid-template-columns: 26px auto 26% 1fr;
 }
@@ -515,6 +581,9 @@
 .items-start {
   align-items: flex-start;
 }
+.items-stretch {
+  align-items: stretch;
+}
 .justify-between {
   justify-content: space-between;
 }
@@ -557,6 +626,12 @@
 .gap-\[14px\] {
   gap: 14px;
 }
+.gap-\[16px\] {
+  gap: 16px;
+}
+.gap-\[20px\] {
+  gap: 20px;
+}
 .gap-x-\[2\%\] {
   -moz-column-gap: 2%;
        column-gap: 2%;
@@ -565,12 +640,20 @@
   -moz-column-gap: 8px;
        column-gap: 8px;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .overflow-hidden {
   overflow: hidden;
 }
 .overflow-y-hidden {
   overflow-y: hidden;
 }
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -583,6 +666,9 @@
 .rounded-\[15px\] {
   border-radius: 15px;
 }
+.rounded-\[16px\] {
+  border-radius: 16px;
+}
 .rounded-\[18px\] {
   border-radius: 18px;
 }
@@ -626,6 +712,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 8px;
 }
+.border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .border-r-8 {
   border-right-style: var(--tw-border-style);
   border-right-width: 8px;
@@ -654,6 +744,10 @@
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 8px;
 }
+.border-l {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 1px;
+}
 .border-l-8 {
   border-left-style: var(--tw-border-style);
   border-left-width: 8px;
@@ -670,6 +764,9 @@
   --tw-border-style: none;
   border-style: none;
 }
+.border-\[\#363c48\] {
+  border-color: #363c48;
+}
 .border-\[\#ccc\] {
   border-color: #ccc;
 }
@@ -688,9 +785,24 @@
 .border-l-transparent {
   border-left-color: transparent;
 }
+.bg-\[\#0C1421\] {
+  background-color: #0C1421;
+}
+.bg-\[\#2d374d\] {
+  background-color: #2d374d;
+}
+.bg-\[\#222b3d\] {
+  background-color: #222b3d;
+}
 .bg-\[\#E6E6E6\] {
   background-color: #E6E6E6;
 }
+.bg-\[\#FF5C60\] {
+  background-color: #FF5C60;
+}
+.bg-\[\#FF8F45\] {
+  background-color: #FF8F45;
+}
 .bg-\[\#FFF2F2\] {
   background-color: #FFF2F2;
 }
@@ -709,6 +821,9 @@
 .bg-\[lightgray\] {
   background-color: lightgray;
 }
+.bg-transparent {
+  background-color: transparent;
+}
 .bg-\[length\:200\%_200\%\] {
   background-size: 200% 200%;
 }
@@ -731,6 +846,9 @@
 .p-\[10px_15px\] {
   padding: 10px 15px;
 }
+.p-\[14px\] {
+  padding: 14px;
+}
 .p-\[15px\] {
   padding: 15px;
 }
@@ -764,9 +882,18 @@
 .px-\[15px\] {
   padding-inline: 15px;
 }
+.px-\[16px\] {
+  padding-inline: 16px;
+}
 .px-\[20px\] {
   padding-inline: 20px;
 }
+.px-\[22px\] {
+  padding-inline: 22px;
+}
+.py-\[2px\] {
+  padding-block: 2px;
+}
 .py-\[4px\] {
   padding-block: 4px;
 }
@@ -779,6 +906,9 @@
 .py-\[8px\] {
   padding-block: 8px;
 }
+.py-\[9px\] {
+  padding-block: 9px;
+}
 .py-\[10px\] {
   padding-block: 10px;
 }
@@ -791,6 +921,12 @@
 .pt-\[6px\] {
   padding-top: 6px;
 }
+.pt-\[10px\] {
+  padding-top: 10px;
+}
+.pt-\[14px\] {
+  padding-top: 14px;
+}
 .pt-\[20px\] {
   padding-top: 20px;
 }
@@ -806,6 +942,9 @@
 .pt-\[50px\] {
   padding-top: 50px;
 }
+.pr-\[10px\] {
+  padding-right: 10px;
+}
 .pr-\[15px\] {
   padding-right: 15px;
 }
@@ -815,6 +954,9 @@
 .pr-\[22px\] {
   padding-right: 22px;
 }
+.pb-\[6px\] {
+  padding-bottom: 6px;
+}
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
@@ -833,6 +975,9 @@
 .pl-\[6px\] {
   padding-left: 6px;
 }
+.pl-\[22px\] {
+  padding-left: 22px;
+}
 .text-center {
   text-align: center;
 }
@@ -878,9 +1023,21 @@
 .text-\[18px\] {
   font-size: 18px;
 }
+.text-\[20px\] {
+  font-size: 20px;
+}
 .text-\[22px\] {
   font-size: 22px;
 }
+.text-\[25px\] {
+  font-size: 25px;
+}
+.text-\[26px\] {
+  font-size: 26px;
+}
+.text-\[28px\] {
+  font-size: 28px;
+}
 .text-\[42px\] {
   font-size: 42px;
 }
@@ -888,6 +1045,10 @@
   --tw-leading: 1.3;
   line-height: 1.3;
 }
+.leading-\[14px\] {
+  --tw-leading: 14px;
+  line-height: 14px;
+}
 .leading-\[20px\] {
   --tw-leading: 20px;
   line-height: 20px;
@@ -908,6 +1069,10 @@
   --tw-leading: 1;
   line-height: 1;
 }
+.font-\[9px\] {
+  --tw-font-weight: 9px;
+  font-weight: 9px;
+}
 .font-\[14px\] {
   --tw-font-weight: 14px;
   font-weight: 14px;
@@ -929,12 +1094,27 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-\[\#1a1a1a\] {
+  color: #1a1a1a;
+}
+.text-\[\#4a4a4a\] {
+  color: #4a4a4a;
+}
 .text-\[\#9f9f9f\] {
   color: #9f9f9f;
 }
+.text-\[\#666\] {
+  color: #666;
+}
+.text-\[\#272727\] {
+  color: #272727;
+}
 .text-\[\#464647\] {
   color: #464647;
 }
+.text-\[\#FF8F45\] {
+  color: #FF8F45;
+}
 .text-\[\#c0c0c0\] {
   color: #c0c0c0;
 }
@@ -950,6 +1130,12 @@
 .text-\[\#fff\] {
   color: #fff;
 }
+.text-\[red\] {
+  color: red;
+}
+.text-\[white\] {
+  color: white;
+}
 .capitalize {
   text-transform: capitalize;
 }
@@ -969,9 +1155,16 @@
 .opacity-0 {
   opacity: 0%;
 }
+.opacity-50 {
+  opacity: 50%;
+}
 .opacity-100 {
   opacity: 100%;
 }
+.outline {
+  outline-style: var(--tw-outline-style);
+  outline-width: 1px;
+}
 .grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -999,6 +1192,10 @@
   transition-timing-function: var(--tw-ease, ease);
   transition-duration: var(--tw-duration, 0s);
 }
+.duration-200 {
+  --tw-duration: 200ms;
+  transition-duration: 200ms;
+}
 .duration-300 {
   --tw-duration: 300ms;
   transition-duration: 300ms;
@@ -1007,6 +1204,11 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.select-none {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+       user-select: none;
+}
 .group-hover\:block {
   &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -1146,6 +1348,19 @@
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
+.kupos-time-dd > summary {
+  list-style: none;
+}
+.kupos-time-dd > summary::-webkit-details-marker {
+  display: none;
+}
+.kupos-time-chevron {
+  transition: transform 200ms ease;
+  flex-shrink: 0;
+}
+.kupos-time-dd[open] .kupos-time-chevron {
+  transform: rotate(180deg);
+}
 .hide-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -1218,6 +1433,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1309,6 +1529,7 @@
       --tw-numeric-figure: initial;
       --tw-numeric-spacing: initial;
       --tw-numeric-fraction: initial;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;

package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js

@@ -39,22 +39,22 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
     const HOW_IT_WORKS_STEPS = [
         {
             icon: "flexible",
-            name: "1. Salida flexible",
+            name: "Salida flexible",
             text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
         },
         {
             icon: "bus",
-            name: "2. Empresa asignada",
+            name: "Empresa asignada",
             text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
         },
         {
             icon: "price",
-            name: "3. Precio garantizado",
+            name: "Precio garantizado",
             text: "Mejor precio garantizado. Sin cambios ni cancelación.",
         },
         {
             icon: "ticket",
-            name: "4. ¡Listo!",
+            name: "¡Listo!",
             text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
         },
     ];
@@ -88,7 +88,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                 borderRadius: "14px",
             } },
             React.createElement("div", { className: "flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]" },
-                React.createElement("div", { className: "flex items-center gap-[10px] mt-[10px]" },
+                React.createElement("div", { className: "flex items-center gap-[10px] mt-[16px]" },
                     React.createElement("span", null, "Salida flexible"),
                     React.createElement("div", { className: "bold-text font-[9px]", style: {
                             backgroundColor: "#FF5C60",
@@ -152,16 +152,18 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                                         })))))))),
                     React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
                     React.createElement("div", null,
-                        React.createElement("span", { className: "text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]" }, "3 operadores compitiendo por tu compra"),
-                        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: {
+                        React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } }, "3 operadores compitiendo por tu compra"),
+                        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: {
+                                flex: 1,
+                                minWidth: 0,
                                 height: "100px",
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
-                                padding: "14px 10px",
+                                padding: "14px 6px",
                             } },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
-                            React.createElement("span", { className: "text-[12px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
-                            React.createElement("span", { className: "text-[11px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
+                            React.createElement("span", { className: "text-[12px] truncate max-w-full text-center " }, serviceItem.operator_details[2]),
+                            React.createElement("span", { className: "text-[11px] mt-[6px] whitespace-nowrap" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
                         React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]", style: {
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
@@ -246,7 +248,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                         React.createElement("div", { className: "flex flex-col" },
                             React.createElement("span", { className: "bold-text" }, step.name),
                             React.createElement("span", null, step.text)))))))))),
-        React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
+        React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 " },
             React.createElement("div", { className: "flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap" },
                 React.createElement("span", { className: "flex items-center" },
                     React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" }),