@asdp/ferryui 0.1.22-dev.9117 → 0.1.22-dev.9152

package/dist/index.js

@@ -1884,50 +1884,74 @@ var ALIAS_MENU_ITEMS = [
     "sortOrder": 4
   }
 ];
+var BP_TABLET = `max-width: ${extendedTokens.breakpointXl}`;
+var BP_MOBILE = `max-width: ${extendedTokens.breakpointMd}`;
 var useStyles6 = reactComponents.makeStyles({
   card: {
     width: "100%",
     boxSizing: "border-box",
     padding: "0px",
-    borderRadius: reactComponents.tokens.borderRadiusXLarge
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    [`@media (${BP_MOBILE})`]: {
+      borderRadius: reactComponents.tokens.borderRadiusLarge
+    }
   },
+  // Desktop: vertical column list
   menuList: {
     display: "flex",
     flexDirection: "column",
-    "@media (max-width: 1200px)": {
+    justifyContent: "space-around",
+    // Tablet + Mobile: horizontal scroll row
+    [`@media (${BP_TABLET})`]: {
       flexDirection: "row",
       overflowX: "auto",
+      overflowY: "visible",
       flexWrap: "nowrap",
-      gap: "0px",
       WebkitOverflowScrolling: "touch",
-      scrollbarWidth: "thin",
-      justifyContent: "space-around"
+      scrollSnapType: "x mandatory",
+      // Thin scrollbar on tablet, hidden on mobile
+      scrollbarWidth: "thin"
+    },
+    [`@media (${BP_MOBILE})`]: {
+      scrollbarWidth: "none"
     }
   },
+  // Desktop: full-width horizontal row (icon left, text right)
   menuItem: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-start",
-    padding: "12px",
+    padding: "12px 16px",
     borderRadius: reactComponents.tokens.borderRadiusMedium,
     cursor: "pointer",
     textAlign: "left",
     transition: "background-color 0.2s ease",
-    textDecoration: "none",
     color: reactComponents.tokens.colorNeutralForeground1,
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     border: "none",
     gap: "12px",
+    width: "100%",
     "&:hover": {
       backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
     },
-    "@media (max-width: 1200px)": {
-      padding: "10px 12px",
-      flexShrink: 0,
+    // Tablet: compact column, fixed width, description visible (1 line)
+    [`@media (${BP_TABLET})`]: {
       flexDirection: "column",
       alignItems: "center",
-      textAlign: "center"
+      textAlign: "center",
+      padding: "10px 8px",
+      flexShrink: 0,
+      width: "90px",
+      // compact fixed width
+      gap: "4px",
+      scrollSnapAlign: "start"
+    },
+    // Mobile: even tighter, no description
+    [`@media (${BP_MOBILE})`]: {
+      padding: "8px 6px",
+      width: "72px",
+      gap: "4px"
     }
   },
   menuItemActive: {
@@ -1937,47 +1961,92 @@ var useStyles6 = reactComponents.makeStyles({
       backgroundColor: reactComponents.tokens.colorNeutralBackground3Hover
     }
   },
+  // Icon wrapper — rounded bg on mobile
+  logoWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
   logo: {
     height: "32px",
     width: "32px",
-    flexShrink: 0
+    flexShrink: 0,
+    objectFit: "contain",
+    [`@media (${BP_TABLET})`]: {
+      height: "28px",
+      width: "28px"
+    },
+    [`@media (${BP_MOBILE})`]: {
+      height: "24px",
+      width: "24px"
+    }
   },
   textContent: {
     display: "flex",
     flexDirection: "column",
     gap: "4px",
-    "@media (max-width: 1200px)": {
-      alignItems: "center"
+    minWidth: 0,
+    width: "100%",
+    // allow ellipsis to work
+    [`@media (${BP_TABLET})`]: {
+      alignItems: "center",
+      gap: "2px"
     }
   },
   label: {
     fontSize: reactComponents.tokens.fontSizeBase300,
     fontWeight: reactComponents.tokens.fontWeightSemibold,
-    lineHeight: "1.2"
+    lineHeight: "1.2",
+    [`@media (${BP_TABLET})`]: {
+      fontSize: reactComponents.tokens.fontSizeBase200,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      width: "100%",
+      textAlign: "center"
+    },
+    [`@media (${BP_MOBILE})`]: {
+      fontSize: reactComponents.tokens.fontSizeBase100
+    }
   },
   description: {
     fontSize: reactComponents.tokens.fontSizeBase200,
     fontWeight: reactComponents.tokens.fontWeightRegular,
     color: reactComponents.tokens.colorNeutralForeground2,
-    // truncate text with ellipsis 2 line
+    // 2-line clamp on desktop
     display: "-webkit-box",
     WebkitLineClamp: 2,
     WebkitBoxOrient: "vertical",
     overflow: "hidden",
     textOverflow: "ellipsis",
     lineHeight: "1.4",
-    "@media (max-width: 1200px)": {
+    // Tablet: 1-line clamp, compact
+    [`@media (${BP_TABLET})`]: {
       fontSize: reactComponents.tokens.fontSizeBase100,
-      whiteSpace: "nowrap"
+      WebkitLineClamp: 1,
+      whiteSpace: "nowrap",
+      width: "100%",
+      textAlign: "center"
+    },
+    // Mobile: hide description entirely
+    [`@media (${BP_MOBILE})`]: {
+      display: "none"
     }
   },
+  // Dividers
   dividerVertical: {
-    "@media (min-width: 1200px)": {
+    // Only visible on tablet (horizontal layout)
+    [`@media (min-width: ${extendedTokens.breakpointXl})`]: {
+      display: "none"
+    },
+    [`@media (${BP_MOBILE})`]: {
       display: "none"
     }
   },
   dividerHorizontal: {
-    "@media (max-width: 1200px)": {
+    // Only visible on desktop (vertical layout)
+    [`@media (${BP_TABLET})`]: {
       display: "none"
     }
   }
@@ -2006,14 +2075,14 @@ var CardServiceMenu = ({
           onClick: () => onServiceClick?.(item.id),
           "aria-label": item.name,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
                 src: item.imageUrl,
                 alt: item.name,
                 className: styles.logo
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
               showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2034,13 +2103,16 @@ var CardServiceMenu = ({
     ] }, item.id);
   }) }) });
 };
-function useIsClamped(deps) {
+var MenuItemDescription = ({ description, className }) => {
   const ref = React.useRef(null);
   const [isClamped, setIsClamped] = React.useState(false);
+  const [tooltipVisible, setTooltipVisible] = React.useState(false);
   React.useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    const check = () => setIsClamped(el.scrollHeight > el.clientHeight);
+    const check = () => setIsClamped(
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    );
     const timer = setTimeout(check, 0);
     const observer = new ResizeObserver(check);
     observer.observe(el);
@@ -2048,25 +2120,29 @@ function useIsClamped(deps) {
       clearTimeout(timer);
       observer.disconnect();
     };
-  }, deps ?? []);
-  return { ref, isClamped };
-}
-var MenuItemDescription = ({ description, className }) => {
-  const { ref, isClamped } = useIsClamped([description]);
-  console.log({ isClamped, ref });
-  if (isClamped) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactComponents.Tooltip,
-      {
-        appearance: "inverted",
-        content: description,
-        relationship: "label",
-        positioning: "after",
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className, children: description })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className, children: description });
+  }, [description]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Tooltip,
+    {
+      appearance: "inverted",
+      content: description,
+      relationship: "description",
+      positioning: "after",
+      visible: tooltipVisible,
+      onVisibleChange: (_, data) => setTooltipVisible(isClamped && data.visible),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          className,
+          style: { pointerEvents: "auto" },
+          onMouseEnter: () => isClamped && setTooltipVisible(true),
+          onMouseLeave: () => setTooltipVisible(false),
+          children: description
+        }
+      )
+    }
+  );
 };
 var DatePickerInput = React.forwardRef(
   ({
@@ -2584,6 +2660,7 @@ var InputDynamic = ({
   appearance = "outline",
   validationRules,
   helperText,
+  helperIcon,
   className,
   layout,
   size = "large",
@@ -3504,7 +3581,7 @@ var InputDynamic = ({
         if (!stringValue) return true;
         const detectedType = detectEmailOrPhoneStrict(stringValue);
         if (detectedType === "email") {
-          if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(stringValue)) {
+          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(stringValue)) {
             return "Format email tidak valid";
           }
         } else if (detectedType === "phone") {
@@ -3533,7 +3610,7 @@ var InputDynamic = ({
         if (!stringValue) return true;
         const detectedType = detectIdentityType(stringValue);
         if (detectedType === "email") {
-          if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(stringValue)) {
+          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(stringValue)) {
             return "Format email tidak valid";
           }
         } else if (detectedType === "phone") {
@@ -3580,15 +3657,29 @@ var InputDynamic = ({
               }
             ),
             renderInput(field, error?.message),
-            helperText && !error && /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Text,
-              {
-                size: 200,
-                style: { textAlign: "left" },
-                className: styles.helperText,
-                children: helperText
-              }
-            )
+            helperText && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "4px", marginTop: "4px" }, children: [
+              helperIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                react.Icon,
+                {
+                  icon: helperIcon,
+                  style: {
+                    color: reactComponents.tokens.colorNeutralForeground3,
+                    flexShrink: 0
+                  },
+                  width: 16,
+                  height: 16
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Text,
+                {
+                  size: 200,
+                  style: { textAlign: "left" },
+                  className: styles.helperText,
+                  children: helperText
+                }
+              )
+            ] })
           ]
         }
       )
@@ -10786,44 +10877,44 @@ var DEFAULT_LABELS27 = {
 var DEFAULT_FAQ_ITEMS = {
   id: [
     {
-      value: "1",
+      id: 1,
       question: "Bagaimana cara memesan tiket?",
       answer: "Anda dapat memesan tiket melalui halaman pencarian tiket dengan memilih pelabuhan asal, tujuan, dan tanggal keberangkatan."
     },
     {
-      value: "2",
+      id: 2,
       question: "Apakah bisa mengajukan refund?",
       answer: "Ya, pengajuan refund dapat dilakukan melalui menu Riwayat Pesanan sesuai dengan syarat dan ketentuan yang berlaku."
     },
     {
-      value: "3",
+      id: 3,
       question: "Metode pembayaran apa saja yang tersedia?",
       answer: "Kami mendukung berbagai metode pembayaran termasuk Virtual Account, E-Wallet, dan Kartu Kredit/Debit."
     },
     {
-      value: "4",
+      id: 4,
       question: "Apakah tiket perlu dicetak?",
       answer: "Tidak perlu. Anda dapat menunjukkan E-Tiket atau QR Code pada saat check-in di pelabuhan."
     }
   ],
   en: [
     {
-      value: "1",
+      id: 1,
       question: "How to book a ticket?",
       answer: "You can book tickets through the ticket search page by selecting origin, destination, and departure date."
     },
     {
-      value: "2",
+      id: 2,
       question: "Can I request a refund?",
       answer: "Yes, refund requests can be made via the Order History menu subject to applicable terms and conditions."
     },
     {
-      value: "3",
+      id: 3,
       question: "What payment methods are available?",
       answer: "We support various payment methods including Virtual Account, E-Wallet, and Credit/Debit Cards."
     },
     {
-      value: "4",
+      id: 4,
       question: "Do I need to print the ticket?",
       answer: "No physically printed ticket needed. You can show your E-Ticket or QR Code during check-in at the port."
     }
@@ -10861,7 +10952,7 @@ var CardFAQ = ({
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { collapsible: true, children: faqItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       reactComponents.AccordionItem,
       {
-        value: item.value,
+        value: item.id,
         className: styles.accordionItem,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10885,7 +10976,7 @@ var CardFAQ = ({
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: item.answer })
         ]
       },
-      item.value
+      item.id
     )) })
   ] });
 };
@@ -13513,6 +13604,185 @@ var CardProfileMenu = ({
     }
   ) });
 };
+var BP_TABLET2 = `max-width: ${extendedTokens.breakpointXl}`;
+var BP_MOBILE2 = `max-width: ${extendedTokens.breakpointMd}`;
+var useStyles41 = reactComponents.makeStyles({
+  dialogSurface: {
+    maxWidth: "900px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  content: {
+    paddingTop: "8px",
+    paddingBottom: "16px"
+  },
+  // Horizontal row layout: icon left, text right — same as CardServiceMenu desktop
+  menuItem: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    padding: "12px 16px",
+    borderRadius: reactComponents.tokens.borderRadiusMedium,
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "background-color 0.2s ease",
+    color: reactComponents.tokens.colorNeutralForeground1,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+    border: "none",
+    gap: "12px",
+    width: "100%",
+    "&:hover": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+    },
+    [`@media (${BP_TABLET2})`]: {
+      padding: "10px 10px",
+      gap: "8px"
+    },
+    [`@media (${BP_MOBILE2})`]: {
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      padding: "8px 6px",
+      gap: "4px"
+    }
+  },
+  logoWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  logo: {
+    height: "32px",
+    width: "32px",
+    flexShrink: 0,
+    objectFit: "contain",
+    [`@media (${BP_TABLET2})`]: {
+      height: "28px",
+      width: "28px"
+    },
+    [`@media (${BP_MOBILE2})`]: {
+      height: "24px",
+      width: "24px"
+    }
+  },
+  textContent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    minWidth: 0,
+    width: "100%",
+    [`@media (${BP_MOBILE2})`]: {
+      alignItems: "center"
+    }
+  },
+  label: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightSemibold,
+    lineHeight: "1.2",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    width: "100%",
+    [`@media (${BP_TABLET2})`]: {
+      fontSize: reactComponents.tokens.fontSizeBase200
+    },
+    [`@media (${BP_MOBILE2})`]: {
+      fontSize: reactComponents.tokens.fontSizeBase100,
+      textAlign: "center"
+    }
+  },
+  description: {
+    fontSize: reactComponents.tokens.fontSizeBase200,
+    fontWeight: reactComponents.tokens.fontWeightRegular,
+    color: reactComponents.tokens.colorNeutralForeground2,
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    lineHeight: "1.4",
+    [`@media (${BP_TABLET2})`]: {
+      fontSize: reactComponents.tokens.fontSizeBase100,
+      WebkitLineClamp: 1
+    },
+    [`@media (${BP_MOBILE2})`]: {
+      display: "none"
+    }
+  }
+});
+var ModalListMenuService = ({
+  open = false,
+  onClose = () => {
+  },
+  title = "",
+  menuItems = ALIAS_MENU_ITEMS,
+  onItemClick,
+  showDescriptions = true
+}) => {
+  const styles = useStyles41();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.DialogTitle,
+          {
+            action: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: onClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { gutterWidth: 0, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 6, sm: 6, md: 3, lg: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          reactComponents.Button,
+          {
+            className: styles.menuItem,
+            onClick: () => onItemClick?.(item),
+            "aria-label": item.name,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: item.imageUrl,
+                  alt: item.name,
+                  className: styles.logo
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
+                showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(
+                  MenuItemDescription,
+                  {
+                    description: item.description,
+                    className: styles.description
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }, item.id)) }) })
+      ] }) })
+    }
+  );
+};
 
 exports.API_CONFIG = API_CONFIG;
 exports.API_ENDPOINTS = API_ENDPOINTS;
@@ -13566,6 +13836,7 @@ exports.MY_TICKET_TAB = MY_TICKET_TAB;
 exports.ModalFilterTicket = ModalFilterTicket;
 exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS16;
 exports.ModalIllustration = ModalIllustration;
+exports.ModalListMenuService = ModalListMenuService;
 exports.ModalListPassenger = ModalListPassenger;
 exports.ModalPassengerForm = ModalPassengerForm;
 exports.ModalPreviewImage = ModalPreviewImage;