@asdp/ferryui 0.1.7 → 0.1.9

package/dist/index.d.mts

@@ -854,4 +854,100 @@ interface ModalTotalPassengersProps {
  */
 declare const ModalTotalPassengers: React$1.FC<ModalTotalPassengersProps>;
 
-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, DEFAULT_SERVICE_CLASSES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, type Passenger, type PassengerService, type PassengerServiceCode, type PassengerType, type RadioOption, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceItem, type ServiceMenuItem, type TabType, getModalPreset };
+/**
+ * Service type item structure
+ */
+interface TypeOfService {
+    id: number;
+    image: string;
+    title: string;
+    info: string;
+    price: number;
+    type: string;
+    parentId?: number;
+    parentTitle?: string;
+    child: TypeOfService[];
+    typeOfPassanger: string;
+}
+/**
+ * Props for ModalTypeOfService component
+ */
+interface ModalTypeOfServiceProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Tipe Layanan"
+     */
+    title?: string;
+    /**
+     * Array of service types
+     */
+    serviceTypes: TypeOfService[];
+    /**
+     * Currently selected service
+     */
+    selectedService?: TypeOfService | null;
+    /**
+     * Callback when save button is clicked
+     */
+    onSave: (service: TypeOfService) => void;
+    /**
+     * Optional custom image renderer
+     * Useful for Next.js Image component or other custom renderers
+     */
+    renderImage?: (props: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    }) => ReactNode;
+}
+/**
+ * ModalTypeOfService - A reusable modal component for selecting service types
+ *
+ * This component provides a service type selection modal with features like:
+ * - Accordion for categories with children (vehicles, goods, etc.)
+ * - Radio buttons for individual selections
+ * - Image display for each service type
+ * - Customizable image renderer for framework-specific components
+ *
+ * @example
+ * ```tsx
+ * <ModalTypeOfService
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Tipe Layanan"
+ *   serviceTypes={serviceTypes}
+ *   selectedService={selectedService}
+ *   onSave={handleSave}
+ *   renderImage={(props) => <Image {...props} />}
+ * />
+ * ```
+ */
+declare const ModalTypeOfService: React$1.FC<ModalTypeOfServiceProps>;
+
+/**
+ * Default paths for vehicle icon images
+ * These images are bundled with the library in the assets directory
+ */
+declare const DEFAULT_VEHICLE_ICONS: {
+    readonly pedestrian: "/assets/images/icons/pedestrian.webp";
+    readonly roadbike: "/assets/images/icons/roadbike.webp";
+    readonly motorbike1: "/assets/images/icons/motorbike-1.webp";
+    readonly motorbike2: "/assets/images/icons/motorbike-2.svg";
+    readonly smallCar: "/assets/images/icons/small-car.webp";
+    readonly smallBus: "/assets/images/icons/small-bus.webp";
+    readonly bigBus: "/assets/images/icons/big-bus.webp";
+    readonly truck: "/assets/images/icons/truck.webp";
+    readonly bigTruck: "/assets/images/icons/big-truck.webp";
+    readonly looseLoad: "/assets/images/icons/loose-load.webp";
+};
+
+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, DEFAULT_SERVICE_CLASSES, DEFAULT_VEHICLE_ICONS, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, ModalTypeOfService, type ModalTypeOfServiceProps, type Passenger, type PassengerService, type PassengerServiceCode, type PassengerType, type RadioOption, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceItem, type ServiceMenuItem, type TabType, type TypeOfService, getModalPreset };

package/dist/index.d.ts

@@ -854,4 +854,100 @@ interface ModalTotalPassengersProps {
  */
 declare const ModalTotalPassengers: React$1.FC<ModalTotalPassengersProps>;
 
-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, DEFAULT_SERVICE_CLASSES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, type Passenger, type PassengerService, type PassengerServiceCode, type PassengerType, type RadioOption, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceItem, type ServiceMenuItem, type TabType, getModalPreset };
+/**
+ * Service type item structure
+ */
+interface TypeOfService {
+    id: number;
+    image: string;
+    title: string;
+    info: string;
+    price: number;
+    type: string;
+    parentId?: number;
+    parentTitle?: string;
+    child: TypeOfService[];
+    typeOfPassanger: string;
+}
+/**
+ * Props for ModalTypeOfService component
+ */
+interface ModalTypeOfServiceProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Tipe Layanan"
+     */
+    title?: string;
+    /**
+     * Array of service types
+     */
+    serviceTypes: TypeOfService[];
+    /**
+     * Currently selected service
+     */
+    selectedService?: TypeOfService | null;
+    /**
+     * Callback when save button is clicked
+     */
+    onSave: (service: TypeOfService) => void;
+    /**
+     * Optional custom image renderer
+     * Useful for Next.js Image component or other custom renderers
+     */
+    renderImage?: (props: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    }) => ReactNode;
+}
+/**
+ * ModalTypeOfService - A reusable modal component for selecting service types
+ *
+ * This component provides a service type selection modal with features like:
+ * - Accordion for categories with children (vehicles, goods, etc.)
+ * - Radio buttons for individual selections
+ * - Image display for each service type
+ * - Customizable image renderer for framework-specific components
+ *
+ * @example
+ * ```tsx
+ * <ModalTypeOfService
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Tipe Layanan"
+ *   serviceTypes={serviceTypes}
+ *   selectedService={selectedService}
+ *   onSave={handleSave}
+ *   renderImage={(props) => <Image {...props} />}
+ * />
+ * ```
+ */
+declare const ModalTypeOfService: React$1.FC<ModalTypeOfServiceProps>;
+
+/**
+ * Default paths for vehicle icon images
+ * These images are bundled with the library in the assets directory
+ */
+declare const DEFAULT_VEHICLE_ICONS: {
+    readonly pedestrian: "/assets/images/icons/pedestrian.webp";
+    readonly roadbike: "/assets/images/icons/roadbike.webp";
+    readonly motorbike1: "/assets/images/icons/motorbike-1.webp";
+    readonly motorbike2: "/assets/images/icons/motorbike-2.svg";
+    readonly smallCar: "/assets/images/icons/small-car.webp";
+    readonly smallBus: "/assets/images/icons/small-bus.webp";
+    readonly bigBus: "/assets/images/icons/big-bus.webp";
+    readonly truck: "/assets/images/icons/truck.webp";
+    readonly bigTruck: "/assets/images/icons/big-truck.webp";
+    readonly looseLoad: "/assets/images/icons/loose-load.webp";
+};
+
+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, DEFAULT_SERVICE_CLASSES, DEFAULT_VEHICLE_ICONS, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, ModalTypeOfService, type ModalTypeOfServiceProps, type Passenger, type PassengerService, type PassengerServiceCode, type PassengerType, type RadioOption, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceItem, type ServiceMenuItem, type TabType, type TypeOfService, getModalPreset };

package/dist/index.js

@@ -3881,6 +3881,275 @@ var ModalTotalPassengers = ({
     }
   );
 };
+var useStyles12 = reactComponents.makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  passengerSection: {
+    marginTop: reactComponents.tokens.spacingHorizontalM,
+    display: "flex",
+    flexDirection: "column"
+  },
+  accordionItem: {
+    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
+    width: "100%"
+  },
+  accordionHeader: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightBold,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  accordionTitleAndInfo: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    marginLeft: reactComponents.tokens.spacingHorizontalM,
+    flex: 1
+  },
+  accordionBody: {
+    marginLeft: "100px"
+  },
+  footer: {
+    marginTop: reactComponents.tokens.spacingVerticalL,
+    display: "flex",
+    gap: reactComponents.tokens.spacingHorizontalM,
+    justifyContent: "flex-end"
+  }
+});
+var ModalTypeOfService = ({
+  open,
+  onClose,
+  title = "Pilih Tipe Layanan",
+  serviceTypes,
+  selectedService,
+  onSave,
+  renderImage
+}) => {
+  const styles = useStyles12();
+  const [selectedServiceTitle, setSelectedServiceTitle] = React2.useState(
+    selectedService?.title || ""
+  );
+  const [openItems, setOpenItems] = React2.useState(() => {
+    if (!selectedService) return void 0;
+    for (const item of serviceTypes) {
+      if (item.type === "accordion" && item.child.length > 0) {
+        const hasSelectedChild = item.child.some(
+          (child) => child.title === selectedService.title
+        );
+        if (hasSelectedChild) {
+          return item.id;
+        }
+      }
+    }
+    return void 0;
+  });
+  const defaultRenderImage = ({ src, alt, width, height }) => /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, width, height, style: { objectFit: "contain" } });
+  const imageRenderer = renderImage || defaultRenderImage;
+  React2.useEffect(() => {
+    const newTitle = selectedService?.title || "";
+    if (newTitle !== selectedServiceTitle) {
+      setSelectedServiceTitle(newTitle);
+    }
+    if (selectedService) {
+      for (const item of serviceTypes) {
+        if (item.type === "accordion" && item.child.length > 0) {
+          const hasSelectedChild = item.child.some(
+            (child) => child.title === selectedService.title
+          );
+          if (hasSelectedChild && openItems !== item.id) {
+            setOpenItems(item.id);
+            break;
+          }
+        }
+      }
+    } else if (openItems !== void 0) {
+      setOpenItems(void 0);
+    }
+  }, [open, selectedService?.title]);
+  const handleConfirm = () => {
+    if (selectedServiceTitle) {
+      let selectedItem = null;
+      for (const item of serviceTypes) {
+        if (item.title === selectedServiceTitle) {
+          selectedItem = {
+            id: item.id,
+            image: item.image,
+            title: item.title,
+            info: item.info,
+            price: item.price,
+            parentTitle: "",
+            parentId: 0,
+            type: item.type,
+            typeOfPassanger: item.typeOfPassanger,
+            child: []
+          };
+          break;
+        }
+        if (item.child && item.child.length > 0) {
+          const childItem = item.child.find((child) => child.title === selectedServiceTitle);
+          if (childItem) {
+            selectedItem = {
+              id: childItem.id,
+              image: childItem.image,
+              title: childItem.title,
+              info: childItem.info,
+              price: childItem.price,
+              parentTitle: childItem.parentTitle,
+              parentId: childItem.parentId,
+              type: childItem.type,
+              typeOfPassanger: childItem.typeOfPassanger,
+              child: []
+            };
+            break;
+          }
+        }
+      }
+      if (selectedItem) {
+        onSave(selectedItem);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !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.jsxs(reactComponents.DialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Accordion,
+            {
+              collapsible: true,
+              openItems,
+              onToggle: (_, data) => setOpenItems(data.openItems[0]),
+              className: styles.passengerSection,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.RadioGroup,
+                {
+                  value: selectedServiceTitle,
+                  onChange: (_, data) => setSelectedServiceTitle(data.value),
+                  children: serviceTypes.map((item, index) => {
+                    if (item.type === "accordion") {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: item.id, className: styles.accordionItem, children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          reactComponents.AccordionHeader,
+                          {
+                            className: styles.accordionHeader,
+                            expandIconPosition: "end",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { children: imageRenderer({ src: item.image, alt: "vehicles", width: 74, height: 74 }) }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionTitleAndInfo, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.title }),
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: item.info })
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionBody, children: item.child.length > 0 && item.child.map((childItem, childIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
+                          {
+                            className: reactComponents.mergeClasses(
+                              styles.accordionHeader,
+                              styles.accordionItem
+                            ),
+                            style: { padding: reactComponents.tokens.spacingHorizontalXS },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { children: imageRenderer({
+                                src: childItem.image,
+                                alt: childItem.title,
+                                width: 48,
+                                height: 48
+                              }) }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionTitleAndInfo, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: childItem.title }),
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: childItem.info })
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: childItem.title })
+                            ]
+                          },
+                          childIndex
+                        )) })
+                      ] }, index);
+                    } else if (item.type === "radio") {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          className: reactComponents.mergeClasses(styles.accordionHeader, styles.accordionItem),
+                          style: { padding: reactComponents.tokens.spacingHorizontalXS },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: 2 }, children: imageRenderer({ src: item.image, alt: item.title, width: 74, height: 74 }) }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionTitleAndInfo, style: { marginLeft: 18 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.title }),
+                              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: item.info })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: item.title })
+                          ]
+                        },
+                        index
+                      );
+                    }
+                    return null;
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.footer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "secondary", shape: "circular", onClick: onClose, children: "Batal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "primary",
+                shape: "circular",
+                onClick: handleConfirm,
+                disabled: !selectedServiceTitle,
+                children: "Simpan"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
+
+// src/components/ModalTypeOfService/constants.ts
+var DEFAULT_VEHICLE_ICONS = {
+  pedestrian: "/assets/images/icons/pedestrian.webp",
+  roadbike: "/assets/images/icons/roadbike.webp",
+  motorbike1: "/assets/images/icons/motorbike-1.webp",
+  motorbike2: "/assets/images/icons/motorbike-2.svg",
+  smallCar: "/assets/images/icons/small-car.webp",
+  smallBus: "/assets/images/icons/small-bus.webp",
+  bigBus: "/assets/images/icons/big-bus.webp",
+  truck: "/assets/images/icons/truck.webp",
+  bigTruck: "/assets/images/icons/big-truck.webp",
+  looseLoad: "/assets/images/icons/loose-load.webp"
+};
 
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
@@ -3891,6 +4160,7 @@ exports.CardTicket = CardTicket;
 exports.CarouselWithCustomNav = CarouselWithCustomNav;
 exports.DEFAULT_COUNTRY_CODES = DEFAULT_COUNTRY_CODES2;
 exports.DEFAULT_SERVICE_CLASSES = DEFAULT_SERVICE_CLASSES;
+exports.DEFAULT_VEHICLE_ICONS = DEFAULT_VEHICLE_ICONS;
 exports.InputDynamic = InputDynamic_default;
 exports.MODAL_PRESETS = MODAL_PRESETS;
 exports.ModalIllustration = ModalIllustration;
@@ -3898,6 +4168,7 @@ exports.ModalSearchHarbor = ModalSearchHarbor;
 exports.ModalSelectDate = ModalSelectDate;
 exports.ModalService = ModalService;
 exports.ModalTotalPassengers = ModalTotalPassengers;
+exports.ModalTypeOfService = ModalTypeOfService;
 exports.getModalPreset = getModalPreset;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map