@asdp/ferryui 0.1.4 → 0.1.5

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import React$1, { ReactNode } from 'react';
 import { CarouselAnnouncerFunction } from '@fluentui/react-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FieldValues, Path, Control } from 'react-hook-form';
+import { FieldValues, Path } from 'react-hook-form';
 
 interface ModalIllustrationButton {
     /**
@@ -379,7 +379,7 @@ interface CountryCode {
 }
 interface InputDynamicProps<T extends FieldValues = FieldValues> {
     name: Path<T>;
-    control: Control<T>;
+    control: any;
     label?: string;
     type: InputType;
     placeholder?: string;
@@ -553,4 +553,95 @@ interface ModalSearchHarborProps {
  */
 declare const ModalSearchHarbor: React.FC<ModalSearchHarborProps>;
 
-export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, type RadioOption, type SelectOption, type ServiceMenuItem, getModalPreset };
+/**
+ * Tab type for trip selection
+ */
+type TabType = 'one-way' | 'round-trip';
+/**
+ * Props for ModalSelectDate component
+ */
+interface ModalSelectDateProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Tanggal"
+     */
+    title?: string;
+    /**
+     * Initial selected departure date
+     */
+    selectedDepartureDate?: Date;
+    /**
+     * Initial selected return date (for round trip)
+     */
+    selectedReturnDate?: Date;
+    /**
+     * Initial tab selection
+     * @default "one-way"
+     */
+    initialTab?: TabType;
+    /**
+     * Whether to show tabs for one-way/round-trip selection
+     * @default true
+     */
+    showTabs?: boolean;
+    /**
+     * Callback when departure date is selected
+     */
+    onSelectDepartureDate: (date: Date) => void;
+    /**
+     * Callback when return date is selected (for round trip)
+     */
+    onSelectReturnDate?: (date: Date) => void;
+    /**
+     * Callback when tab changes
+     */
+    onTabChange?: (tab: TabType) => void;
+    /**
+     * Minimum selectable date
+     * @default new Date()
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Date format for internal handling
+     * @default "DD MMMM YYYY"
+     */
+    dateFormat?: string;
+}
+/**
+ * ModalSelectDate - A reusable modal component for selecting dates
+ *
+ * This component provides a date selection modal with features like:
+ * - Single date selection (one-way)
+ * - Date range selection (round-trip)
+ * - Visual range preview on hover
+ * - Customizable date constraints
+ *
+ * @example
+ * ```tsx
+ * <ModalSelectDate
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Tanggal Keberangkatan"
+ *   selectedDepartureDate={departureDate}
+ *   selectedReturnDate={returnDate}
+ *   onSelectDepartureDate={setDepartureDate}
+ *   onSelectReturnDate={setReturnDate}
+ *   onTabChange={handleTabChange}
+ * />
+ * ```
+ */
+declare const ModalSelectDate: React.FC<ModalSelectDateProps>;
+
+export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, type RadioOption, type SelectOption, type ServiceMenuItem, type TabType, getModalPreset };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import React$1, { ReactNode } from 'react';
 import { CarouselAnnouncerFunction } from '@fluentui/react-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FieldValues, Path, Control } from 'react-hook-form';
+import { FieldValues, Path } from 'react-hook-form';
 
 interface ModalIllustrationButton {
     /**
@@ -379,7 +379,7 @@ interface CountryCode {
 }
 interface InputDynamicProps<T extends FieldValues = FieldValues> {
     name: Path<T>;
-    control: Control<T>;
+    control: any;
     label?: string;
     type: InputType;
     placeholder?: string;
@@ -553,4 +553,95 @@ interface ModalSearchHarborProps {
  */
 declare const ModalSearchHarbor: React.FC<ModalSearchHarborProps>;
 
-export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, type RadioOption, type SelectOption, type ServiceMenuItem, getModalPreset };
+/**
+ * Tab type for trip selection
+ */
+type TabType = 'one-way' | 'round-trip';
+/**
+ * Props for ModalSelectDate component
+ */
+interface ModalSelectDateProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Tanggal"
+     */
+    title?: string;
+    /**
+     * Initial selected departure date
+     */
+    selectedDepartureDate?: Date;
+    /**
+     * Initial selected return date (for round trip)
+     */
+    selectedReturnDate?: Date;
+    /**
+     * Initial tab selection
+     * @default "one-way"
+     */
+    initialTab?: TabType;
+    /**
+     * Whether to show tabs for one-way/round-trip selection
+     * @default true
+     */
+    showTabs?: boolean;
+    /**
+     * Callback when departure date is selected
+     */
+    onSelectDepartureDate: (date: Date) => void;
+    /**
+     * Callback when return date is selected (for round trip)
+     */
+    onSelectReturnDate?: (date: Date) => void;
+    /**
+     * Callback when tab changes
+     */
+    onTabChange?: (tab: TabType) => void;
+    /**
+     * Minimum selectable date
+     * @default new Date()
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Date format for internal handling
+     * @default "DD MMMM YYYY"
+     */
+    dateFormat?: string;
+}
+/**
+ * ModalSelectDate - A reusable modal component for selecting dates
+ *
+ * This component provides a date selection modal with features like:
+ * - Single date selection (one-way)
+ * - Date range selection (round-trip)
+ * - Visual range preview on hover
+ * - Customizable date constraints
+ *
+ * @example
+ * ```tsx
+ * <ModalSelectDate
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Tanggal Keberangkatan"
+ *   selectedDepartureDate={departureDate}
+ *   selectedReturnDate={returnDate}
+ *   onSelectDepartureDate={setDepartureDate}
+ *   onSelectReturnDate={setReturnDate}
+ *   onTabChange={handleTabChange}
+ * />
+ * ```
+ */
+declare const ModalSelectDate: React.FC<ModalSelectDateProps>;
+
+export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, type RadioOption, type SelectOption, type ServiceMenuItem, type TabType, getModalPreset };

package/dist/index.js

@@ -8,12 +8,14 @@ var reactHookForm = require('react-hook-form');
 var PhoneInput = require('react-phone-input-2');
 var Select = require('react-select');
 var reactCalendarCompat = require('@fluentui/react-calendar-compat');
+var moment = require('moment');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React2__default = /*#__PURE__*/_interopDefault(React2);
 var PhoneInput__default = /*#__PURE__*/_interopDefault(PhoneInput);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
+var moment__default = /*#__PURE__*/_interopDefault(moment);
 
 var useStyles = reactComponents.makeStyles({
   dialogSurface: {
@@ -3043,6 +3045,331 @@ var ModalSearchHarbor = ({
     }
   );
 };
+var useStyles9 = reactComponents.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 ${reactComponents.tokens.colorNeutralStroke2}`
+  },
+  tab: {
+    flex: 1,
+    padding: "12px 16px",
+    cursor: "pointer",
+    textAlign: "center",
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightRegular,
+    color: reactComponents.tokens.colorNeutralForeground3,
+    borderBottom: "2px solid transparent",
+    marginBottom: "-2px",
+    transition: "all 0.2s ease",
+    backgroundColor: "transparent",
+    border: "none",
+    ":hover": {
+      color: reactComponents.tokens.colorNeutralForeground1,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+    }
+  },
+  tabActive: {
+    color: reactComponents.tokens.colorBrandForeground1,
+    fontWeight: reactComponents.tokens.fontWeightSemibold,
+    borderBottom: `2px solid ${reactComponents.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: `${reactComponents.tokens.colorBrandBackground} !important`,
+        color: reactComponents.tokens.colorNeutralForegroundStaticInverted
+      }
+    }
+  },
+  rangeStart: {
+    backgroundColor: `${reactComponents.tokens.colorBrandBackground} !important`,
+    color: `${reactComponents.tokens.colorNeutralForegroundStaticInverted} !important`,
+    borderTopLeftRadius: "999px !important",
+    borderBottomLeftRadius: "999px !important",
+    fontWeight: reactComponents.tokens.fontWeightSemibold
+  },
+  rangeEnd: {
+    backgroundColor: `${reactComponents.tokens.colorBrandBackground} !important`,
+    color: `${reactComponents.tokens.colorNeutralForegroundOnBrand} !important`,
+    borderTopRightRadius: "999px !important",
+    borderBottomRightRadius: "999px !important",
+    fontWeight: reactComponents.tokens.fontWeightSemibold
+  },
+  rangeMiddle: {
+    backgroundColor: `${reactComponents.tokens.colorBrandBackground} !important`,
+    color: `${reactComponents.tokens.colorNeutralForegroundStaticInverted} !important`,
+    borderRadius: "0px !important"
+  },
+  rangePreview: {
+    backgroundColor: `${reactComponents.tokens.colorBrandBackground} !important`,
+    color: reactComponents.tokens.colorNeutralForegroundStaticInverted,
+    borderRadius: "0px !important",
+    boxShadow: `inset 0 0 0 1px ${reactComponents.tokens.colorBrandStroke1}`
+  },
+  rangeSingle: {
+    backgroundColor: `${reactComponents.tokens.colorBrandBackground} !important`,
+    color: `${reactComponents.tokens.colorNeutralForegroundOnBrand} !important`,
+    borderRadius: "999px !important",
+    fontWeight: reactComponents.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] = React2.useState(selectedDepartureDate);
+  const [selectedEndDate, setSelectedEndDate] = React2.useState(selectedReturnDate);
+  const [hoveredDate, setHoveredDate] = React2.useState();
+  const [activeTab, setActiveTab] = React2.useState(initialTab);
+  const previewEndDate = React2.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__default.default(first).isSame(second, "day");
+  };
+  React2.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 = React2.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__ */ 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: handleClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { className: styles.content, children: [
+          showTabs && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.tabContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                disabled: activeTab === "round-trip",
+                className: `${styles.tab} ${activeTab === "one-way" ? styles.tabActive : ""}`,
+                onClick: () => handleTabChange("one-way"),
+                children: "Sekali Jalan"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: `${styles.tab} ${activeTab === "round-trip" ? styles.tabActive : ""}`,
+                onClick: () => handleTabChange("round-trip"),
+                disabled: activeTab === "one-way",
+                children: "Pulang Pergi"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.calendarContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: activeTab === "round-trip" ? styles.rangeCalendar : "", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactCalendarCompat.Calendar,
+            {
+              minDate,
+              maxDate,
+              value: selectedDate,
+              onSelectDate: handleDateSelect,
+              showGoToToday: true,
+              highlightSelectedMonth: true,
+              showMonthPickerAsOverlay: false,
+              allFocusable: true,
+              calendarDayProps: {
+                customDayCellRef: handleCustomDayCellRef
+              }
+            }
+          ) }) }) })
+        ] })
+      ] }) })
+    }
+  );
+};
 
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
@@ -3056,6 +3383,7 @@ exports.InputDynamic = InputDynamic_default;
 exports.MODAL_PRESETS = MODAL_PRESETS;
 exports.ModalIllustration = ModalIllustration;
 exports.ModalSearchHarbor = ModalSearchHarbor;
+exports.ModalSelectDate = ModalSelectDate;
 exports.getModalPreset = getModalPreset;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map