@asdp/ferryui 0.1.22-dev.8463 → 0.1.22-dev.8491

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { makeStyles, tokens, shorthands, createLightTheme, createDarkTheme, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, mergeClasses, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
+import { makeStyles, tokens, shorthands, createLightTheme, createDarkTheme, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, mergeClasses, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, typographyStyles, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React5, { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import React5, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
 import { Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
 import { Icon as Icon$1 } from '@iconify/react/dist/iconify.js';
@@ -536,6 +536,7 @@ var sharedColors = {
   "Shared_Red_Primary": "#d13438",
   "Shared_Green_Primary": "#107c10"};
 var lightModeColors2 = {
+  "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
   "Brand_Stroke_1_Rest": "#00B3BD"};
 var tokensV2_default = {
   lightModeColors: lightModeColors2};
@@ -6420,7 +6421,778 @@ var ModalSearchTicket = ({
     }
   );
 };
+var useStyles18 = makeStyles({
+  stepperWrapper: {
+    position: "relative",
+    width: "100%",
+    maxWidth: "988px",
+    margin: "0 auto",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      maxWidth: "100%"
+    }
+  },
+  stepperContainer: {
+    position: "relative",
+    width: "100%",
+    height: "78px",
+    display: "flex",
+    flexDirection: "column",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      height: "60px"
+    }
+  },
+  stepperBackground: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    zIndex: 0,
+    pointerEvents: "none"
+  },
+  stepsRow: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-around",
+    padding: "0 60px",
+    height: "50%",
+    zIndex: 2,
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      padding: "0 30px"
+    }
+  },
+  stepCircleWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    position: "relative",
+    zIndex: 3
+  },
+  stepCircle: {
+    width: "24px",
+    height: "24px",
+    borderRadius: "25%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "16px",
+    fontWeight: "bold",
+    transition: "all 0.3s ease",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      width: "16px",
+      height: "16px",
+      fontSize: "14px"
+    }
+  },
+  stepCircleActive: {
+    backgroundColor: "#FFFFFF",
+    color: "#00AEEF",
+    boxShadow: "0 2px 8px rgba(0, 174, 239, 0.3)"
+  },
+  stepCircleCompleted: {
+    backgroundColor: "#8DC63F",
+    color: "#FFFFFF",
+    border: "none"
+  },
+  stepCircleInactive: {
+    backgroundColor: "#FFFFFF",
+    color: "#999999"
+  },
+  stepLabel: {
+    position: "absolute",
+    top: "50%",
+    marginTop: "28px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    fontSize: "12px",
+    fontWeight: "600",
+    textAlign: "center",
+    whiteSpace: "nowrap",
+    color: "#FFFFFF",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      marginTop: "20px",
+      fontSize: "9px"
+    }
+  },
+  ferryIcon: {
+    width: "40px",
+    height: "40px",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      width: "30px",
+      height: "30px"
+    }
+  },
+  stepConnector: {
+    flex: 1,
+    height: "4px",
+    backgroundColor: "#CCCCCC",
+    margin: "0 8px",
+    alignSelf: "center",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      height: "3px",
+      margin: "0 4px"
+    }
+  },
+  stepConnectorCompleted: {
+    backgroundColor: "#8DC63F"
+  }
+});
+var Stepper = ({
+  steps,
+  currentStep,
+  className
+}) => {
+  const styles = useStyles18();
+  const currentStepIndex = useMemo(() => {
+    if (typeof currentStep === "number") {
+      return steps.findIndex((step) => step.number === currentStep);
+    }
+    return steps.findIndex((step) => step.id === currentStep);
+  }, [steps, currentStep]);
+  const activeStepNumber = useMemo(() => {
+    return currentStepIndex >= 0 ? steps[currentStepIndex].number : 1;
+  }, [currentStepIndex, steps]);
+  const getStepStatus = (stepNumber) => {
+    if (stepNumber < activeStepNumber) return "completed";
+    if (stepNumber === activeStepNumber) return "active";
+    return "inactive";
+  };
+  const getCircleClass = (stepNumber) => {
+    const status = getStepStatus(stepNumber);
+    const baseClass = styles.stepCircle;
+    if (status === "active") return `${baseClass} ${styles.stepCircleActive}`;
+    if (status === "completed") return `${baseClass} ${styles.stepCircleCompleted}`;
+    return `${baseClass} ${styles.stepCircleInactive}`;
+  };
+  const getConnectorClass = (currentStepNumber) => {
+    if (currentStepNumber < activeStepNumber) {
+      return `${styles.stepConnector} ${styles.stepConnectorCompleted}`;
+    }
+    return styles.stepConnector;
+  };
+  return /* @__PURE__ */ jsx("div", { className: mergeClasses(styles.stepperWrapper, className), children: /* @__PURE__ */ jsxs("div", { className: styles.stepperContainer, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: "/assets/images/reservation/stepper_bg.svg",
+        alt: "Stepper Background",
+        className: styles.stepperBackground
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.stepsRow, children: steps.map((step, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.stepCircleWrapper, children: [
+        getStepStatus(step.number) === "active" ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "/assets/images/reservation/ferry_step.svg",
+            alt: "Ferry",
+            className: styles.ferryIcon
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: getCircleClass(step.number), children: step.number }),
+        /* @__PURE__ */ jsx("span", { className: styles.stepLabel, children: step.label })
+      ] }),
+      index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: getConnectorClass(step.number) })
+    ] }, step.id)) })
+  ] }) });
+};
+var useStyles19 = makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: tokens.borderRadiusXLarge,
+    boxShadow: tokens.shadow4,
+    zIndex: 3
+  },
+  container: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "1rem"
+  },
+  fieldGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem"
+  },
+  label: {
+    color: tokens.colorNeutralForeground2
+  },
+  value: {
+    color: tokensV2_default.lightModeColors.Neutral_Foreground_Disabled_Rest
+  }
+});
+var CardOrdererInfo = ({
+  orderer,
+  className
+}) => {
+  const styles = useStyles19();
+  return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
+    /* @__PURE__ */ jsx(Title3, { children: "Informasi Pemesan" }),
+    /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsx(Subtitle2, { className: styles.label, children: "Nama Pemesan" }),
+        /* @__PURE__ */ jsx(Body1, { className: styles.value, children: orderer?.name || "-" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsx(Subtitle2, { className: styles.label, children: "Nomor Handphone" }),
+        /* @__PURE__ */ jsx(Body1, { className: styles.value, children: orderer?.phoneNumber || "-" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsx(Subtitle2, { className: styles.label, children: "Email" }),
+        /* @__PURE__ */ jsx(Body1, { className: styles.value, children: orderer?.email || "-" })
+      ] })
+    ] })
+  ] });
+};
+var useStyles20 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%",
+    borderRadius: tokens.borderRadiusXLarge
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1.5rem",
+    padding: "1.5rem"
+  },
+  searchInput: {
+    width: "100%"
+  },
+  passengerList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem"
+  },
+  passengerItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem",
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke2}`,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    }
+  },
+  actions: {
+    display: "flex",
+    gap: "1rem",
+    justifyContent: "flex-end",
+    marginTop: "1rem"
+  }
+});
+var ModalListPassenger = ({
+  open,
+  onClose,
+  title = "Detail Penumpang",
+  passengers,
+  searchQuery,
+  onSearchChange,
+  onSelectPassenger,
+  onEditPassenger,
+  onAddPassenger,
+  sameAsOrderer,
+  onSameAsOrdererChange
+}) => {
+  const styles = useStyles20();
+  const handleClose = () => {
+    onClose();
+    onSearchChange("");
+  };
+  const handleSelectPassenger = (passenger) => {
+    onSelectPassenger(passenger);
+    handleClose();
+  };
+  const filteredPassengers = passengers.filter((passenger) => {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return passenger.name?.toLowerCase().includes(query) || passenger.category?.toLowerCase().includes(query);
+  });
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          handleClose();
+        }
+      },
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Switch,
+              {
+                label: "Sama Dengan Pemesan",
+                checked: sameAsOrderer,
+                onChange: (_, data) => onSameAsOrdererChange(data.checked)
+              }
+            ),
+            children: /* @__PURE__ */ jsx(Subtitle1, { children: title })
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              className: styles.searchInput,
+              contentBefore: /* @__PURE__ */ jsx(Icon, { icon: "fluent:search-24-regular" }),
+              placeholder: "Cari Penumpang",
+              value: searchQuery,
+              onChange: (_, data) => onSearchChange(data.value),
+              size: "large"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles.passengerList, children: filteredPassengers.map((passenger, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles.passengerItem,
+              onClick: () => handleSelectPassenger(passenger),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelectPassenger(passenger);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Subtitle2, { children: [
+                  passenger.name,
+                  " (",
+                  passenger.category,
+                  ")"
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: "fluent:chevron-right-24-regular",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onEditPassenger(passenger);
+                    },
+                    width: 20,
+                    height: 20
+                  }
+                )
+              ]
+            },
+            passenger.id || `passenger-${index}`
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "large",
+                shape: "circular",
+                onClick: onAddPassenger,
+                children: "Tambah Penumpang"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "secondary",
+                size: "large",
+                shape: "circular",
+                onClick: handleClose,
+                children: "Batal"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
+var useStyles21 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%",
+    borderRadius: tokens.borderRadiusXLarge
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1.5rem"
+  },
+  actions: {
+    display: "flex",
+    gap: "1rem",
+    justifyContent: "flex-end",
+    marginTop: "1rem"
+  }
+});
+var ModalPassengerForm = ({
+  open,
+  onClose,
+  title = "Detail Penumpang",
+  onSubmit,
+  defaultValues,
+  isAdultForm = true,
+  titleOptions,
+  idTypeOptions,
+  cityOptions,
+  ticketClassOptions
+}) => {
+  const styles = useStyles21();
+  const { control, handleSubmit, reset } = useForm({
+    defaultValues
+  });
+  useEffect(() => {
+    reset(defaultValues);
+  }, [defaultValues, reset]);
+  const handleFormSubmit = (data) => {
+    onSubmit(data);
+    reset();
+  };
+  const handleClose = () => {
+    onClose();
+    reset();
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          handleClose();
+        }
+      },
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(Subtitle1, { children: title }) }),
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), children: [
+          /* @__PURE__ */ jsx(
+            InputDynamic_default,
+            {
+              name: "title",
+              control,
+              type: "select",
+              label: "Title",
+              placeholder: "Pilih",
+              options: titleOptions,
+              size: "large",
+              required: true,
+              validationRules: {
+                required: "Title harus dipilih"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputDynamic_default,
+            {
+              name: "name",
+              control,
+              type: "text",
+              label: "Nama Lengkap",
+              placeholder: "Masukkan Nama",
+              size: "large",
+              required: true,
+              validationRules: {
+                required: "Nama lengkap harus diisi",
+                minLength: {
+                  value: 3,
+                  message: "Nama minimal 3 karakter"
+                }
+              }
+            }
+          ),
+          isAdultForm ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              InputDynamic_default,
+              {
+                name: "idType",
+                control,
+                type: "select",
+                label: "Jenis ID",
+                placeholder: "Pilih",
+                options: idTypeOptions,
+                size: "large",
+                required: true,
+                validationRules: {
+                  required: "Jenis ID harus dipilih"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              InputDynamic_default,
+              {
+                name: "idNumber",
+                control,
+                type: "text",
+                label: "Nomor Identitas",
+                placeholder: "Masukkan Nomor Identitas",
+                size: "large",
+                required: true,
+                validationRules: {
+                  required: "Nomor identitas harus diisi",
+                  minLength: {
+                    value: 6,
+                    message: "Nomor identitas minimal 6 karakter"
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              InputDynamic_default,
+              {
+                name: "age",
+                control,
+                type: "number",
+                label: "Usia",
+                placeholder: "Masukkan Usia",
+                size: "large",
+                required: true,
+                validationRules: {
+                  required: "Usia harus diisi",
+                  min: {
+                    value: 1,
+                    message: "Usia minimal 1 tahun"
+                  },
+                  max: {
+                    value: 150,
+                    message: "Usia maksimal 150 tahun"
+                  }
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            InputDynamic_default,
+            {
+              name: "date",
+              control,
+              type: "date",
+              label: "Tanggal Lahir",
+              placeholder: "Masukkan Tanggal Lahir",
+              size: "large",
+              required: true,
+              validationRules: {
+                required: "Tanggal lahir harus diisi"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            InputDynamic_default,
+            {
+              name: "cityId",
+              control,
+              type: "select",
+              label: "Kota Kabupaten",
+              options: cityOptions,
+              placeholder: "Masukkan Nama Kota/Kabupaten",
+              size: "large",
+              required: true,
+              validationRules: {
+                required: "Kota/Kabupaten harus diisi"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsx(
+            InputDynamic_default,
+            {
+              name: "ticketClass",
+              control,
+              type: "radiobutton",
+              label: "Kelas penumpang",
+              options: ticketClassOptions,
+              required: true,
+              disabled: true
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
+            /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "large", shape: "circular", type: "submit", children: "Simpan" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "secondary",
+                size: "large",
+                shape: "circular",
+                type: "button",
+                onClick: handleClose,
+                children: "Batal"
+              }
+            )
+          ] })
+        ] }) })
+      ] }) })
+    }
+  );
+};
+var getBadgeConfig = (ticketClass) => {
+  const normalizedClass = ticketClass?.toUpperCase();
+  switch (normalizedClass) {
+    case "EKONOMI":
+    case "ECONOMY":
+      return {
+        color: "#A74109",
+        icon: "/assets/images/class/shield_badge_ekonomi.svg"
+      };
+    case "BISNIS":
+    case "BUSINESS":
+      return {
+        color: "#859599",
+        icon: "/assets/images/class/ribbon_badge_bisnis.svg"
+      };
+    case "EKSEKUTIF":
+    case "EXECUTIVE":
+      return {
+        color: "#C19C00",
+        icon: "/assets/images/class/crown_badge_eksekutif.svg"
+      };
+    default:
+      return {
+        color: tokens.colorNeutralBackground3,
+        icon: ""
+      };
+  }
+};
+var useStyles22 = makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: tokens.borderRadiusXLarge,
+    boxShadow: tokens.shadow4,
+    zIndex: 3
+  },
+  headerContainer: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: "1rem",
+    gap: "1rem"
+  },
+  headerTitle: {
+    whiteSpace: "nowrap"
+  },
+  headerLine: {
+    height: "1px",
+    flexGrow: 1,
+    backgroundColor: tokens.colorNeutralStroke2
+  },
+  passengerList: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  passengerItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem 0",
+    cursor: "pointer",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    ":last-child": {
+      borderBottom: "none"
+    },
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      paddingLeft: "0.5rem",
+      paddingRight: "0.5rem",
+      margin: "0 -0.5rem"
+    },
+    transition: "all 0.2s ease"
+  },
+  passengerInfo: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem"
+  },
+  passengerText: {
+    color: "#00B8D4"
+  },
+  badgeContainer: {
+    display: "flex",
+    alignItems: "center",
+    position: "relative"
+  },
+  badgeContent: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0.25rem 0.75rem 0.25rem 1.5rem",
+    borderTopRightRadius: "9999px",
+    borderBottomRightRadius: "9999px",
+    color: "white",
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightMedium,
+    marginLeft: "-14px",
+    minHeight: "24px"
+  },
+  badgeIcon: {
+    width: "28px",
+    height: "32px",
+    zIndex: 1,
+    filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))"
+  }
+});
+var CardPassengerList = ({
+  title = "Data Penumpang",
+  passengers,
+  onPassengerClick,
+  className
+}) => {
+  const styles = useStyles22();
+  return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
+      /* @__PURE__ */ jsx(Title3, { className: styles.headerTitle, children: title }),
+      /* @__PURE__ */ jsx("div", { className: styles.headerLine })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.passengerList, children: passengers.map((passenger, index) => {
+      const badgeConfig = getBadgeConfig(passenger.serviceName);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles.passengerItem,
+          onClick: () => onPassengerClick(passenger),
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onPassengerClick(passenger);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: styles.passengerInfo, children: /* @__PURE__ */ jsxs(Subtitle2, { className: styles.passengerText, children: [
+              passenger.name || `Penumpang ${index + 1}`,
+              " (",
+              passenger.passengerType,
+              ")"
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.badgeContainer, children: [
+                badgeConfig.icon && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: badgeConfig.icon,
+                    alt: passenger.serviceName,
+                    className: styles.badgeIcon
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: styles.badgeContent,
+                    style: { backgroundColor: badgeConfig.color },
+                    children: passenger.serviceName
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Icon, { icon: "fluent:chevron-right-24-regular", width: 20, height: 20 })
+            ] })
+          ]
+        },
+        passenger.id || `passenger-${index}`
+      );
+    }) })
+  ] });
+};
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CardTicketSearch, DEFAULT_LABELS as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS2 as CardTicketSearchSummaryDefaultLabels, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS4 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS3 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, getModalPreset, getSortLabel };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardOrdererInfo, CardPassengerList, CardPromo, CardServiceMenu, CardTicket, CardTicketSearch, DEFAULT_LABELS as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS2 as CardTicketSearchSummaryDefaultLabels, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS4 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS3 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map