@asdp/ferryui 0.1.4 → 0.1.6

package/dist/index.mjs

@@ -1,11 +1,12 @@
-import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, typographyStyles, Checkbox, RadioGroup, Radio, Switch, Textarea } from '@fluentui/react-components';
+import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, typographyStyles, RadioGroup, Radio, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React2, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
+import React2, { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { Icon } from '@iconify/react';
 import { Controller } from 'react-hook-form';
 import PhoneInput from 'react-phone-input-2';
 import Select from 'react-select';
 import { Calendar } from '@fluentui/react-calendar-compat';
+import moment from 'moment';
 
 var useStyles = makeStyles({
   dialogSurface: {
@@ -3035,7 +3036,523 @@ var ModalSearchHarbor = ({
     }
   );
 };
+var useStyles9 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    paddingTop: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    paddingBottom: "20px",
+    width: "100%",
+    overflow: "hidden"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  tabContainer: {
+    display: "flex",
+    gap: "0px",
+    marginBottom: "16px",
+    borderBottom: `2px solid ${tokens.colorNeutralStroke2}`
+  },
+  tab: {
+    flex: 1,
+    padding: "12px 16px",
+    cursor: "pointer",
+    textAlign: "center",
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground3,
+    borderBottom: "2px solid transparent",
+    marginBottom: "-2px",
+    transition: "all 0.2s ease",
+    backgroundColor: "transparent",
+    border: "none",
+    ":hover": {
+      color: tokens.colorNeutralForeground1,
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    }
+  },
+  tabActive: {
+    color: tokens.colorBrandForeground1,
+    fontWeight: tokens.fontWeightSemibold,
+    borderBottom: `2px solid ${tokens.colorBrandBackground}`
+  },
+  calendarContainer: {
+    display: "flex",
+    gap: "20px",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    width: "100%"
+  },
+  rangeCalendar: {
+    "& .ms-CalendarDay": {
+      position: "relative"
+    },
+    '& button[class*="ms-CalendarDay"]': {
+      borderRadius: "999px",
+      transition: "all 0.15s ease",
+      border: "none",
+      "&:hover": {
+        backgroundColor: `${tokens.colorBrandBackground} !important`,
+        color: tokens.colorNeutralForegroundStaticInverted
+      }
+    }
+  },
+  rangeStart: {
+    backgroundColor: `${tokens.colorBrandBackground} !important`,
+    color: `${tokens.colorNeutralForegroundStaticInverted} !important`,
+    borderTopLeftRadius: "999px !important",
+    borderBottomLeftRadius: "999px !important",
+    fontWeight: tokens.fontWeightSemibold
+  },
+  rangeEnd: {
+    backgroundColor: `${tokens.colorBrandBackground} !important`,
+    color: `${tokens.colorNeutralForegroundOnBrand} !important`,
+    borderTopRightRadius: "999px !important",
+    borderBottomRightRadius: "999px !important",
+    fontWeight: tokens.fontWeightSemibold
+  },
+  rangeMiddle: {
+    backgroundColor: `${tokens.colorBrandBackground} !important`,
+    color: `${tokens.colorNeutralForegroundStaticInverted} !important`,
+    borderRadius: "0px !important"
+  },
+  rangePreview: {
+    backgroundColor: `${tokens.colorBrandBackground} !important`,
+    color: tokens.colorNeutralForegroundStaticInverted,
+    borderRadius: "0px !important",
+    boxShadow: `inset 0 0 0 1px ${tokens.colorBrandStroke1}`
+  },
+  rangeSingle: {
+    backgroundColor: `${tokens.colorBrandBackground} !important`,
+    color: `${tokens.colorNeutralForegroundOnBrand} !important`,
+    borderRadius: "999px !important",
+    fontWeight: tokens.fontWeightSemibold
+  }
+});
+var ModalSelectDate = ({
+  open,
+  onClose,
+  title = "Pilih Tanggal",
+  selectedDepartureDate,
+  selectedReturnDate,
+  initialTab = "one-way",
+  showTabs = true,
+  onSelectDepartureDate,
+  onSelectReturnDate,
+  onTabChange,
+  minDate = /* @__PURE__ */ new Date(),
+  maxDate,
+  dateFormat = "DD MMMM YYYY"
+}) => {
+  const styles = useStyles9();
+  const [selectedDate, setSelectedDate] = useState(selectedDepartureDate);
+  const [selectedEndDate, setSelectedEndDate] = useState(selectedReturnDate);
+  const [hoveredDate, setHoveredDate] = useState();
+  const [activeTab, setActiveTab] = useState(initialTab);
+  const previewEndDate = useMemo(() => {
+    if (selectedEndDate) return selectedEndDate;
+    if (selectedDate && hoveredDate && hoveredDate > selectedDate) {
+      return hoveredDate;
+    }
+    return void 0;
+  }, [hoveredDate, selectedDate, selectedEndDate]);
+  const isSameCalendarDay = (first, second) => {
+    if (!first || !second) return false;
+    return moment(first).isSame(second, "day");
+  };
+  useEffect(() => {
+    if (open) {
+      setSelectedDate(selectedDepartureDate);
+      setSelectedEndDate(selectedReturnDate);
+      setActiveTab(initialTab);
+      setHoveredDate(void 0);
+    }
+  }, [open, selectedDepartureDate, selectedReturnDate, initialTab]);
+  const handleTabChange = (tab) => {
+    setActiveTab(tab);
+    setSelectedEndDate(void 0);
+    setHoveredDate(void 0);
+    if (onTabChange) {
+      onTabChange(tab);
+    }
+  };
+  const handleClose = () => {
+    setHoveredDate(void 0);
+    onClose();
+  };
+  const handleDateSelect = (date) => {
+    if (!date) return;
+    const currentStart = selectedDate;
+    if (activeTab === "round-trip") {
+      if (!currentStart || selectedEndDate) {
+        setSelectedDate(date);
+        setSelectedEndDate(void 0);
+        setHoveredDate(void 0);
+        onSelectDepartureDate(date);
+      } else {
+        if (date < currentStart) {
+          setSelectedEndDate(currentStart);
+          setSelectedDate(date);
+          onSelectDepartureDate(date);
+          if (onSelectReturnDate) {
+            onSelectReturnDate(currentStart);
+          }
+        } else {
+          setSelectedEndDate(date);
+          if (onSelectReturnDate) {
+            onSelectReturnDate(date);
+          }
+        }
+        setHoveredDate(void 0);
+        handleClose();
+      }
+    } else {
+      setSelectedDate(date);
+      onSelectDepartureDate(date);
+      handleClose();
+    }
+  };
+  const handleCustomDayCellRef = useCallback(
+    (element, date, _classNames) => {
+      if (!element) return;
+      const removeTokens = (className) => {
+        className?.split(/\s+/).filter(Boolean).forEach((token) => element.classList.remove(token));
+      };
+      const addTokens = (className) => {
+        className?.split(/\s+/).filter(Boolean).forEach((token) => element.classList.add(token));
+      };
+      const removableClasses = [
+        styles.rangeStart,
+        styles.rangeEnd,
+        styles.rangeMiddle,
+        styles.rangePreview,
+        styles.rangeSingle
+      ];
+      removableClasses.forEach(removeTokens);
+      if (activeTab !== "round-trip" || !selectedDate) {
+        element.onmouseenter = null;
+        element.onmouseleave = null;
+        return;
+      }
+      const endDateForVisual = previewEndDate;
+      const startTime = selectedDate.getTime();
+      const endTime = endDateForVisual?.getTime();
+      const currentTime = date.getTime();
+      const isSameStartEnd = isSameCalendarDay(endDateForVisual, selectedDate);
+      const isStartDay = isSameCalendarDay(date, selectedDate);
+      const isEndDay = isSameCalendarDay(date, endDateForVisual);
+      if (isStartDay && (!endDateForVisual || isSameStartEnd)) {
+        addTokens(styles.rangeSingle);
+      } else {
+        if (isStartDay) {
+          addTokens(styles.rangeStart);
+        }
+        if (isEndDay && !isSameStartEnd) {
+          addTokens(styles.rangeEnd);
+        }
+      }
+      if (endTime && currentTime > startTime && currentTime < endTime) {
+        addTokens(selectedEndDate ? styles.rangeMiddle : styles.rangePreview);
+      }
+      if (!selectedEndDate) {
+        element.onmouseenter = () => {
+          if (date < selectedDate) return;
+          setHoveredDate((prev) => {
+            if (isSameCalendarDay(prev, date)) {
+              return prev;
+            }
+            return date;
+          });
+        };
+        element.onmouseleave = () => {
+          setHoveredDate(void 0);
+        };
+      } else {
+        element.onmouseenter = null;
+        element.onmouseleave = null;
+      }
+    },
+    [
+      activeTab,
+      previewEndDate,
+      selectedDate,
+      selectedEndDate,
+      styles.rangeEnd,
+      styles.rangeMiddle,
+      styles.rangePreview,
+      styles.rangeSingle,
+      styles.rangeStart
+    ]
+  );
+  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: handleClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
+          showTabs && /* @__PURE__ */ jsxs("div", { className: styles.tabContainer, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                disabled: activeTab === "round-trip",
+                className: `${styles.tab} ${activeTab === "one-way" ? styles.tabActive : ""}`,
+                onClick: () => handleTabChange("one-way"),
+                children: "Sekali Jalan"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `${styles.tab} ${activeTab === "round-trip" ? styles.tabActive : ""}`,
+                onClick: () => handleTabChange("round-trip"),
+                disabled: activeTab === "one-way",
+                children: "Pulang Pergi"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.calendarContainer, children: /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx("div", { className: activeTab === "round-trip" ? styles.rangeCalendar : "", children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              minDate,
+              maxDate,
+              value: selectedDate,
+              onSelectDate: handleDateSelect,
+              showGoToToday: true,
+              highlightSelectedMonth: true,
+              showMonthPickerAsOverlay: false,
+              allFocusable: true,
+              calendarDayProps: {
+                customDayCellRef: handleCustomDayCellRef
+              }
+            }
+          ) }) }) })
+        ] })
+      ] }) })
+    }
+  );
+};
+var useStyles10 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    paddingTop: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  headerRow: {
+    display: "flex",
+    justifyContent: "end",
+    alignItems: "center",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`
+  },
+  serviceList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    maxHeight: "400px",
+    overflowY: "auto",
+    paddingLeft: "20px"
+  },
+  serviceItem: {
+    padding: "16px 0px",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    cursor: "pointer",
+    transition: "background-color 0.2s ease",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    }
+  },
+  serviceContent: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  serviceName: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    color: tokens.colorNeutralForeground1
+  },
+  serviceType: {
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground2
+  },
+  serviceDescription: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground3,
+    lineHeight: "1.4"
+  },
+  footer: {
+    padding: "16px 20px",
+    borderTop: `1px solid ${tokens.colorNeutralStroke2}`
+  },
+  saveButton: {
+    width: "100%",
+    borderRadius: tokens.borderRadiusCircular
+  }
+});
+var ModalService = ({
+  open,
+  onClose,
+  title = "Pilih Kelas Layanan",
+  services,
+  selectedServiceIds,
+  onSave,
+  isLoading = false,
+  isError = false
+}) => {
+  const styles = useStyles10();
+  const [selectedServices, setSelectedServices] = useState(selectedServiceIds);
+  useEffect(() => {
+    if (open) {
+      if (selectedServiceIds && selectedServiceIds.length > 0) {
+        const validIds = services.filter((s) => selectedServiceIds.includes(s.id)).map((s) => s.id);
+        setSelectedServices(validIds);
+      } else {
+        setSelectedServices(services.map((s) => s.id));
+      }
+    }
+  }, [open, services, selectedServiceIds]);
+  const handleClose = () => {
+    onClose();
+  };
+  const handleToggleService = (serviceId) => {
+    setSelectedServices((prev) => {
+      if (prev.includes(serviceId)) {
+        return prev.filter((id) => id !== serviceId);
+      } else {
+        return [...prev, serviceId];
+      }
+    });
+  };
+  const handleToggleAll = () => {
+    if (selectedServices.length === services.length) {
+      setSelectedServices([]);
+    } else {
+      setSelectedServices(services.map((s) => s.id));
+    }
+  };
+  const handleSave = () => {
+    const selectedServiceItems = services.filter((s) => selectedServices.includes(s.id));
+    onSave(selectedServiceItems);
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !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: handleClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(Body1, { children: "Loading..." }) : isError ? /* @__PURE__ */ jsx(Body1, { children: "Error loading services" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.serviceList, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+              /* @__PURE__ */ jsx(Body1, { children: "Pilih Semua" }),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: selectedServices.length === services.length,
+                  onChange: handleToggleAll
+                }
+              )
+            ] }),
+            services.map((service) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles.serviceItem,
+                onClick: () => handleToggleService(service.id),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: styles.serviceContent, children: [
+                    /* @__PURE__ */ jsx(Body1, { className: styles.serviceName, children: service.serviceTypeName }),
+                    /* @__PURE__ */ jsx(Caption1, { className: styles.serviceType, children: service.serviceTypeCode }),
+                    /* @__PURE__ */ jsx(Caption1, { className: styles.serviceDescription, children: service.serviceDescription })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: selectedServices.includes(service.id),
+                      onChange: () => handleToggleService(service.id)
+                    }
+                  )
+                ]
+              },
+              service.id
+            ))
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              size: "medium",
+              className: styles.saveButton,
+              onClick: handleSave,
+              disabled: selectedServices.length === 0,
+              children: "Simpan"
+            }
+          ) })
+        ] }) })
+      ] }) })
+    }
+  );
+};
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES2 as DEFAULT_COUNTRY_CODES, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, getModalPreset };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES2 as DEFAULT_COUNTRY_CODES, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, ModalSelectDate, ModalService, getModalPreset };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map