@asdp/ferryui 0.1.22-dev.10695 → 0.1.22-dev.10751

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Spinner, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Link, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
+import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Subtitle1, Title2, Divider, Title3, Spinner, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Link, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular, ArrowRightRegular } from '@fluentui/react-icons';
@@ -1433,7 +1433,7 @@ var CardTicket = ({
                     children: /* @__PURE__ */ jsx(
                       Badge,
                       {
-                        size: "large",
+                        size: "extra-large",
                         appearance: "filled",
                         style: {
                           backgroundColor: departureItem?.availableTicket <= 0 ? tokens.colorNeutralForeground3 : departureItem?.provider?.serviceColor,
@@ -1470,8 +1470,8 @@ var CardTicket = ({
                     src: departureItem?.provider?.logo,
                     className: styles.asdpLogo,
                     alt: mergedLabels.logoAlt,
-                    height: 56,
-                    width: 82,
+                    height: 98,
+                    width: 137,
                     style: departureItem?.availableTicket <= 0 ? { filter: "grayscale(100%)", opacity: 0.7 } : {}
                   }
                 )
@@ -1512,7 +1512,12 @@ var CardTicket = ({
             /* @__PURE__ */ jsx(
               Col,
               {
-                style: { textAlign: "center" },
+                style: {
+                  textAlign: "center",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
                 xs: 12,
                 sm: 12,
                 md: 12,
@@ -1520,7 +1525,7 @@ var CardTicket = ({
                 xl: 12,
                 xxl: 12,
                 xxxl: 12,
-                children: /* @__PURE__ */ jsx(Subtitle2, { children: departureItem?.provider?.name })
+                children: /* @__PURE__ */ jsx(Subtitle1, { children: departureItem?.provider?.name })
               }
             )
           ] }),
@@ -1866,7 +1871,7 @@ var CardTicket = ({
                   /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.facilitiesLabel }),
                   /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
                     /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
-                    /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
+                    /* @__PURE__ */ jsx(Body1Strong, { children: facility })
                   ] }, idx)) })
                 ] })
               ] }),
@@ -6367,7 +6372,7 @@ var useStyles10 = makeStyles({
     // borderBottomRightRadius: '0',
     padding: "1rem",
     paddingTop: "2rem",
-    paddingBottom: "7rem",
+    paddingBottom: "4rem",
     position: "relative",
     overflow: "visible",
     // boxShadow: '0 0 2px rgba(0,0,0,0.12), 0 -8px 16px rgba(0,0,0,0.14)',
@@ -6407,7 +6412,7 @@ var useStyles10 = makeStyles({
   },
   buttonSearchContainer: {
     display: "flex",
-    justifyContent: "center",
+    justifyContent: "end",
     alignItems: "center",
     height: "100%",
     width: "100%"
@@ -6526,8 +6531,8 @@ var CardTicketSearchSummary = ({
           md: 12,
           lg: 12,
           xl: 12,
-          xxl: 4,
-          xxxl: 4,
+          xxl: 6,
+          xxxl: 6,
           className: styles.paddingResponsive,
           children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%", alignItems: "center" }, children: [
             /* @__PURE__ */ jsx(
@@ -6712,8 +6717,22 @@ var CardTicketSearchSummary = ({
           md: 12,
           lg: 12,
           xl: 12,
-          xxl: 2,
-          xxxl: 2,
+          xxl: 6,
+          xxxl: 6,
+          className: styles.paddingResponsive,
+          children: children && /* @__PURE__ */ jsx("div", { className: styles.filterButtonContainer, children })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Col,
+        {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+          xl: 12,
+          xxl: 6,
+          xxxl: 6,
           className: styles.paddingResponsive,
           children: /* @__PURE__ */ jsx("div", { className: styles.buttonSearchContainer, children: /* @__PURE__ */ jsx(
             Button,
@@ -6722,6 +6741,7 @@ var CardTicketSearchSummary = ({
               appearance: "primary",
               size: "medium",
               style: {
+                marginTop: "1rem",
                 width: "100%",
                 borderRadius: tokens.borderRadiusCircular
               },
@@ -6734,7 +6754,6 @@ var CardTicketSearchSummary = ({
         }
       )
     ] }),
-    children && /* @__PURE__ */ jsx("div", { className: styles.filterButtonContainer, children }),
     Array.from({ length: circularConfig.count }).map((_, index) => /* @__PURE__ */ jsx(
       "div",
       {
@@ -16404,10 +16423,12 @@ var CardPriceDetails = ({
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
 var DEFAULT_LABELS36 = {
   id: {
-    selectAriaLabel: "Pilih metode pembayaran"
+    selectAriaLabel: "Pilih metode pembayaran",
+    method: "Metode Pembayaran"
   },
   en: {
-    selectAriaLabel: "Select payment method"
+    selectAriaLabel: "Select payment method",
+    method: "Payment Method"
   }
 };
 var useStyles38 = makeStyles({
@@ -16472,51 +16493,54 @@ var CardPaymentMethodList = ({
 }) => {
   const styles = useStyles38();
   const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
-  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
-    index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
-    /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
-      /* @__PURE__ */ jsx(
-        AccordionHeader,
-        {
-          expandIconPosition: "end",
-          className: styles.title,
-          children: /* @__PURE__ */ jsx(Body1, { children: category.title || category.value })
-        }
-      ),
-      /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsx("div", { className: styles.itemContainer, children: category.options.map((option) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles.optionContainer,
-          onClick: () => onSelect(option.value),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.codeImage, children: [
+  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
+    /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.method }),
+    methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
+      index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
+      /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
+        /* @__PURE__ */ jsx(
+          AccordionHeader,
+          {
+            expandIconPosition: "end",
+            className: styles.title,
+            children: /* @__PURE__ */ jsx(Body1, { children: category.title || category.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsx("div", { className: styles.itemContainer, children: category.options.map((option) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.optionContainer,
+            onClick: () => onSelect(option.value),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.codeImage, children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: option.image,
+                    alt: option.label,
+                    className: styles.image
+                  }
+                ),
+                /* @__PURE__ */ jsx(Subtitle2, { className: styles.optionLabel, children: option.label })
+              ] }),
               /* @__PURE__ */ jsx(
-                "img",
+                Radio,
                 {
-                  src: option.image,
-                  alt: option.label,
-                  className: styles.image
+                  checked: selectedValue === option.value,
+                  onChange: () => onSelect(option.value),
+                  value: option.value,
+                  name: "payment-method",
+                  disabled: option.disabled,
+                  "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
                 }
-              ),
-              /* @__PURE__ */ jsx(Subtitle2, { className: styles.optionLabel, children: option.label })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Radio,
-              {
-                checked: selectedValue === option.value,
-                onChange: () => onSelect(option.value),
-                value: option.value,
-                name: "payment-method",
-                disabled: option.disabled,
-                "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
-              }
-            )
-          ]
-        },
-        option.value
-      )) }) })
-    ] }) })
-  ] }, category.value || index)) }) });
+              )
+            ]
+          },
+          option.value
+        )) }) })
+      ] }) })
+    ] }, category.value || index))
+  ] }) });
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts