@asdp/ferryui 0.1.22-dev.8898 → 0.1.22-dev.8932

package/dist/index.d.mts

@@ -284,7 +284,7 @@ interface CardPromoProps {
     /**
      * Promo description/subtitle
      */
-    description: string;
+    description: string | React.ReactNode;
     /**
      * Image alt text
      * @default "Promo image"
@@ -513,9 +513,9 @@ interface CardServiceMenuLabels {
 interface CardServiceMenuProps {
     /**
      * Currently active service ID
-     * @default 'ferry'
+     * @default 1
      */
-    activeServiceId?: ServiceId;
+    activeServiceId?: number;
     /**
      * Language for labels (Indonesian or English)
      * @default 'id'
@@ -524,7 +524,7 @@ interface CardServiceMenuProps {
     /**
      * Callback when a service is clicked
      */
-    onServiceClick?: (serviceId: ServiceId) => void;
+    onServiceClick?: (serviceId: number) => void;
     /**
      * Whether to show descriptions on desktop
      * @default true
@@ -538,6 +538,18 @@ interface CardServiceMenuProps {
      * Custom labels override
      */
     labels?: Partial<CardServiceMenuLabels>;
+    /**
+     * Menu items
+     */
+    menuItems?: CardServiceMenuItem[];
+}
+interface CardServiceMenuItem {
+    id: number;
+    description: string;
+    imageUrl: string;
+    linkUrl: string;
+    name: string;
+    sortOrder: number;
 }
 
 declare const CardServiceMenu: React$1.FC<CardServiceMenuProps>;
@@ -627,12 +639,12 @@ interface CardTicketSearchProps {
     onSwitchClick?: () => void;
     onRoundTripChange?: (value: boolean) => void;
     onSubmit?: (data: CardTicketSearchFormData) => void;
-    onServiceClick?: (serviceId: ServiceId) => void;
+    onServiceClick?: (serviceId: number) => void;
     /**
      * Active service ID
-     * @default 'ferry'
+     * @default 1
      */
-    activeServiceId?: ServiceId;
+    activeServiceId?: number;
     /**
      * Custom labels override (optional)
      * If not provided, default labels based on locale will be used
@@ -648,6 +660,7 @@ interface CardTicketSearchProps {
     isRotating?: boolean;
     showPassengerField?: boolean;
     showRoundTrip?: boolean;
+    menuItems?: CardServiceMenuItem[];
 }
 
 declare const CardTicketSearch: React$1.FC<CardTicketSearchProps>;

package/dist/index.d.ts

@@ -284,7 +284,7 @@ interface CardPromoProps {
     /**
      * Promo description/subtitle
      */
-    description: string;
+    description: string | React.ReactNode;
     /**
      * Image alt text
      * @default "Promo image"
@@ -513,9 +513,9 @@ interface CardServiceMenuLabels {
 interface CardServiceMenuProps {
     /**
      * Currently active service ID
-     * @default 'ferry'
+     * @default 1
      */
-    activeServiceId?: ServiceId;
+    activeServiceId?: number;
     /**
      * Language for labels (Indonesian or English)
      * @default 'id'
@@ -524,7 +524,7 @@ interface CardServiceMenuProps {
     /**
      * Callback when a service is clicked
      */
-    onServiceClick?: (serviceId: ServiceId) => void;
+    onServiceClick?: (serviceId: number) => void;
     /**
      * Whether to show descriptions on desktop
      * @default true
@@ -538,6 +538,18 @@ interface CardServiceMenuProps {
      * Custom labels override
      */
     labels?: Partial<CardServiceMenuLabels>;
+    /**
+     * Menu items
+     */
+    menuItems?: CardServiceMenuItem[];
+}
+interface CardServiceMenuItem {
+    id: number;
+    description: string;
+    imageUrl: string;
+    linkUrl: string;
+    name: string;
+    sortOrder: number;
 }
 
 declare const CardServiceMenu: React$1.FC<CardServiceMenuProps>;
@@ -627,12 +639,12 @@ interface CardTicketSearchProps {
     onSwitchClick?: () => void;
     onRoundTripChange?: (value: boolean) => void;
     onSubmit?: (data: CardTicketSearchFormData) => void;
-    onServiceClick?: (serviceId: ServiceId) => void;
+    onServiceClick?: (serviceId: number) => void;
     /**
      * Active service ID
-     * @default 'ferry'
+     * @default 1
      */
-    activeServiceId?: ServiceId;
+    activeServiceId?: number;
     /**
      * Custom labels override (optional)
      * If not provided, default labels based on locale will be used
@@ -648,6 +660,7 @@ interface CardTicketSearchProps {
     isRotating?: boolean;
     showPassengerField?: boolean;
     showRoundTrip?: boolean;
+    menuItems?: CardServiceMenuItem[];
 }
 
 declare const CardTicketSearch: React$1.FC<CardTicketSearchProps>;

package/dist/index.js

@@ -387,7 +387,7 @@ var useStyles2 = reactComponents.makeStyles({
       insetInlineEnd: "15% !important"
     },
     [`@media (min-width: ${extendedTokens.breakpointMd}) and (max-width: ${extendedTokens.breakpointLg})`]: {
-      insetInlineEnd: "13% !important"
+      insetInlineEnd: "11% !important"
     }
   },
   closeButtonWithoutNav: {
@@ -1690,28 +1690,40 @@ var DEFAULT_LABELS6 = {
     serviceAriaLabel: "Service"
   }
 };
-var ALIAS_MENU_ITEMS = {
-  ferry: {
-    id: "ferry",
-    logo: "/assets/images/icons/ferry.svg"
-  },
-  ifcs: {
-    id: "ifcs",
-    logo: "/assets/logo/asdp-default.svg"
-  },
-  skpt: {
-    id: "skpt",
-    logo: "/assets/logo/asdp-default.svg"
-  },
-  hotel: {
-    id: "hotel",
-    logo: "/assets/images/icons/hotel.svg"
-  },
-  other: {
-    id: "other",
-    logo: "/assets/images/icons/other.svg"
+var ALIAS_MENU_ITEMS = [
+  {
+    "id": 1,
+    "name": "Ferizy",
+    "description": "Layanan penyeberangan ferry ASDP",
+    "imageUrl": "https://mock-api.tryztech.com/images?name=ferry.svg",
+    "linkUrl": "https://ferizy.apps.devtix.swamedia.xyz",
+    "sortOrder": 1
+  },
+  {
+    "id": 4,
+    "name": "Hotel",
+    "description": "Layanan pemesanan hotel",
+    "imageUrl": "https://mock-api.tryztech.com/images?name=hotel.svg",
+    "linkUrl": "https://hotel.apps.devtix.swamedia.xyz",
+    "sortOrder": 2
+  },
+  {
+    "id": 5,
+    "name": "Travel",
+    "description": "Layanan pemesanan travel",
+    "imageUrl": "https://mock-api.tryztech.com/images?name=small-bus.webp",
+    "linkUrl": "https://travel.apps.devtix.swamedia.xyz",
+    "sortOrder": 3
+  },
+  {
+    "id": 6,
+    "name": "Food",
+    "description": "Layanan pemesanan makanan",
+    "imageUrl": "https://mock-api.tryztech.com/images?name=food.png",
+    "linkUrl": "https://food.apps.devtix.swamedia.xyz",
+    "sortOrder": 4
   }
-};
+];
 var useStyles6 = reactComponents.makeStyles({
   card: {
     width: "100%",
@@ -1805,37 +1817,33 @@ var useStyles6 = reactComponents.makeStyles({
   }
 });
 var CardServiceMenu = ({
-  activeServiceId = "ferry",
+  activeServiceId = 1,
   language = "id",
   onServiceClick,
   showDescriptions = true,
   className,
-  labels
+  labels,
+  menuItems = ALIAS_MENU_ITEMS
 }) => {
   const styles = useStyles6();
-  const mergedLabels = { ...DEFAULT_LABELS6[language], ...labels };
+  ({ ...DEFAULT_LABELS6[language], ...labels });
   const getMenuItemClass = (serviceId) => {
     const isActive = activeServiceId === serviceId;
     return reactComponents.mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
   };
-  const menuItems = Object.values(ALIAS_MENU_ITEMS);
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children: menuItems.map((item, index) => {
-    const labelKey = `${item.id}Label`;
-    const descriptionKey = `${item.id}Description`;
-    const label = mergedLabels[labelKey];
-    const description = mergedLabels[descriptionKey];
     return /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         reactComponents.Button,
         {
           className: getMenuItemClass(item.id),
           onClick: () => onServiceClick?.(item.id),
-          "aria-label": `${mergedLabels.serviceAriaLabel} ${label}`,
+          "aria-label": item.name,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.logo, alt: label, className: styles.logo }),
+            /* @__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: label }),
-              showDescriptions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.description, children: description })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
+              showDescriptions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.description, children: item.description })
             ] })
           ]
         }
@@ -3483,13 +3491,14 @@ var CardTicketSearch = ({
   onSwitchClick,
   onRoundTripChange,
   onSubmit,
-  activeServiceId = "ferry",
+  activeServiceId = 1,
   labels: customLabels,
   className,
   isRotating = false,
   showPassengerField = false,
   showRoundTrip = true,
-  onServiceClick
+  onServiceClick,
+  menuItems
 }) => {
   const styles = useStyles8();
   const labels = React5__default.default.useMemo(
@@ -3583,7 +3592,8 @@ var CardTicketSearch = ({
                   className: styles.serviceMenuCard,
                   activeServiceId,
                   language,
-                  onServiceClick
+                  onServiceClick,
+                  menuItems
                 }
               )
             }