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

package/dist/index.mjs

@@ -1875,50 +1875,74 @@ var ALIAS_MENU_ITEMS = [
     "sortOrder": 4
   }
 ];
+var BP_TABLET = `max-width: ${extendedTokens.breakpointXl}`;
+var BP_MOBILE = `max-width: ${extendedTokens.breakpointMd}`;
 var useStyles6 = makeStyles({
   card: {
     width: "100%",
     boxSizing: "border-box",
     padding: "0px",
-    borderRadius: tokens.borderRadiusXLarge
+    borderRadius: tokens.borderRadiusXLarge,
+    [`@media (${BP_MOBILE})`]: {
+      borderRadius: 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: tokens.borderRadiusMedium,
     cursor: "pointer",
     textAlign: "left",
     transition: "background-color 0.2s ease",
-    textDecoration: "none",
     color: tokens.colorNeutralForeground1,
     backgroundColor: tokens.colorNeutralBackground1,
     border: "none",
     gap: "12px",
+    width: "100%",
     "&:hover": {
       backgroundColor: 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: {
@@ -1928,47 +1952,92 @@ var useStyles6 = makeStyles({
       backgroundColor: 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: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
-    lineHeight: "1.2"
+    lineHeight: "1.2",
+    [`@media (${BP_TABLET})`]: {
+      fontSize: tokens.fontSizeBase200,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      width: "100%",
+      textAlign: "center"
+    },
+    [`@media (${BP_MOBILE})`]: {
+      fontSize: tokens.fontSizeBase100
+    }
   },
   description: {
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,
     color: 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: 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"
     }
   }
@@ -1997,14 +2066,14 @@ var CardServiceMenu = ({
           onClick: () => onServiceClick?.(item.id),
           "aria-label": item.name,
           children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
               "img",
               {
                 src: item.imageUrl,
                 alt: item.name,
                 className: styles.logo
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
               /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
               showDescriptions && /* @__PURE__ */ jsx(
@@ -2025,13 +2094,16 @@ var CardServiceMenu = ({
     ] }, item.id);
   }) }) });
 };
-function useIsClamped(deps) {
+var MenuItemDescription = ({ description, className }) => {
   const ref = useRef(null);
   const [isClamped, setIsClamped] = useState(false);
+  const [tooltipVisible, setTooltipVisible] = useState(false);
   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);
@@ -2039,25 +2111,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__ */ jsx(
-      Tooltip,
-      {
-        appearance: "inverted",
-        content: description,
-        relationship: "label",
-        positioning: "after",
-        children: /* @__PURE__ */ jsx("span", { ref, className, children: description })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("span", { ref, className, children: description });
+  }, [description]);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      appearance: "inverted",
+      content: description,
+      relationship: "description",
+      positioning: "after",
+      visible: tooltipVisible,
+      onVisibleChange: (_, data) => setTooltipVisible(isClamped && data.visible),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          className,
+          style: { pointerEvents: "auto" },
+          onMouseEnter: () => isClamped && setTooltipVisible(true),
+          onMouseLeave: () => setTooltipVisible(false),
+          children: description
+        }
+      )
+    }
+  );
 };
 var DatePickerInput = forwardRef(
   ({
@@ -2575,6 +2651,7 @@ var InputDynamic = ({
   appearance = "outline",
   validationRules,
   helperText,
+  helperIcon,
   className,
   layout,
   size = "large",
@@ -3495,7 +3572,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") {
@@ -3524,7 +3601,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") {
@@ -3571,15 +3648,29 @@ var InputDynamic = ({
               }
             ),
             renderInput(field, error?.message),
-            helperText && !error && /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: 200,
-                style: { textAlign: "left" },
-                className: styles.helperText,
-                children: helperText
-              }
-            )
+            helperText && !error && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "4px", marginTop: "4px" }, children: [
+              helperIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: helperIcon,
+                  style: {
+                    color: tokens.colorNeutralForeground3,
+                    flexShrink: 0
+                  },
+                  width: 16,
+                  height: 16
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: 200,
+                  style: { textAlign: "left" },
+                  className: styles.helperText,
+                  children: helperText
+                }
+              )
+            ] })
           ]
         }
       )
@@ -13504,7 +13595,186 @@ var CardProfileMenu = ({
     }
   ) });
 };
+var BP_TABLET2 = `max-width: ${extendedTokens.breakpointXl}`;
+var BP_MOBILE2 = `max-width: ${extendedTokens.breakpointMd}`;
+var useStyles41 = 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: tokens.borderRadiusMedium,
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "background-color 0.2s ease",
+    color: tokens.colorNeutralForeground1,
+    backgroundColor: tokens.colorNeutralBackground1,
+    border: "none",
+    gap: "12px",
+    width: "100%",
+    "&:hover": {
+      backgroundColor: 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: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    lineHeight: "1.2",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    width: "100%",
+    [`@media (${BP_TABLET2})`]: {
+      fontSize: tokens.fontSizeBase200
+    },
+    [`@media (${BP_MOBILE2})`]: {
+      fontSize: tokens.fontSizeBase100,
+      textAlign: "center"
+    }
+  },
+  description: {
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground2,
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    lineHeight: "1.4",
+    [`@media (${BP_TABLET2})`]: {
+      fontSize: 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__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: onClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx(Row, { gutterWidth: 0, children: menuItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 6, sm: 6, md: 3, lg: 3, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: styles.menuItem,
+            onClick: () => onItemClick?.(item),
+            "aria-label": item.name,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: item.imageUrl,
+                  alt: item.name,
+                  className: styles.logo
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
+                showDescriptions && /* @__PURE__ */ jsx(
+                  MenuItemDescription,
+                  {
+                    description: item.description,
+                    className: styles.description
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }, item.id)) }) })
+      ] }) })
+    }
+  );
+};
 
-export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, GENDER, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
+export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, GENDER, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map