@asdp/ferryui 0.1.22-dev.9114 → 0.1.22-dev.9151

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, 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, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, Body2, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React5, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
+import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
 import { Container, Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
@@ -598,11 +598,13 @@ var CarouselWithCustomNav = ({
   cardFocus = false,
   showNavButtons = false,
   showCloseButton = false,
-  onCloseClick
+  onCloseClick,
+  autoPlay = false,
+  autoPlayInterval = 5e3
 }) => {
   const styles = useStyles2();
   const [internalIndex, setInternalIndex] = useState(0);
-  const labels = React5.useMemo(
+  const labels = React.useMemo(
     () => ({
       ...DEFAULT_LABELS2[language],
       ...customLabels,
@@ -620,6 +622,32 @@ var CarouselWithCustomNav = ({
     },
     [controlledIndex, onActiveIndexChange]
   );
+  React.useEffect(() => {
+    if (!autoPlay) return;
+    const totalSlides = React.Children.count(children);
+    if (totalSlides <= 1) return;
+    const intervalId = setInterval(() => {
+      let nextIndex = activeIndex + 1;
+      if (nextIndex >= totalSlides) {
+        nextIndex = circular ? 0 : activeIndex;
+      }
+      if (nextIndex !== activeIndex) {
+        if (controlledIndex === void 0) {
+          setInternalIndex(nextIndex);
+        }
+        onActiveIndexChange?.(nextIndex);
+      }
+    }, autoPlayInterval);
+    return () => clearInterval(intervalId);
+  }, [
+    autoPlay,
+    autoPlayInterval,
+    children,
+    circular,
+    activeIndex,
+    controlledIndex,
+    onActiveIndexChange
+  ]);
   const defaultAnnouncement = useCallback(
     (index, totalSlides) => {
       return labels.announcementTemplate.replace("{index}", (index + 1).toString()).replace("{total}", totalSlides.toString());
@@ -957,12 +985,12 @@ var useStyles4 = makeStyles({
     padding: 0,
     backgroundColor: "transparent",
     border: "none",
-    height: "450px",
+    aspectRatio: "3/1",
     borderRadius: tokens.borderRadiusXLarge
   },
   bannerImage: {
     width: "100%",
-    height: "auto",
+    aspectRatio: "3/1",
     objectFit: "cover",
     display: "block",
     cursor: "pointer",
@@ -1961,7 +1989,7 @@ var CardServiceMenu = ({
     return mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
   };
   return /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsx("div", { className: styles.menuList, children: menuItems.map((item, index) => {
-    return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Button,
         {
@@ -3757,7 +3785,7 @@ var CardTicketSearch = ({
   menuItems
 }) => {
   const styles = useStyles8();
-  const labels = React5.useMemo(
+  const labels = React.useMemo(
     () => ({ ...DEFAULT_LABELS8[language], ...customLabels }),
     [language, customLabels]
   );
@@ -3778,7 +3806,7 @@ var CardTicketSearch = ({
     name: "roundTrip",
     defaultValue: roundTrip
   });
-  React5.useEffect(() => {
+  React.useEffect(() => {
     setValue("from", from);
     setValue("to", to);
     setValue("startDate", startDate);
@@ -3798,7 +3826,7 @@ var CardTicketSearch = ({
     passenger,
     setValue
   ]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (onRoundTripChange) {
       onRoundTripChange(roundTripValue);
     }
@@ -6312,7 +6340,7 @@ var SortMenu = ({
   clearFiltersText: deprecatedClearFiltersText
 }) => {
   const styles = useStyles15();
-  const labels = React5.useMemo(
+  const labels = React.useMemo(
     () => ({
       ...DEFAULT_LABELS15[language],
       ...customLabels,
@@ -6335,11 +6363,11 @@ var SortMenu = ({
       deprecatedClearFiltersText
     ]
   );
-  const sortOptions = React5.useMemo(
+  const sortOptions = React.useMemo(
     () => customSortOptions || getSortOptions(labels),
     [customSortOptions, labels]
   );
-  const currentSortLabel = React5.useMemo(
+  const currentSortLabel = React.useMemo(
     () => sortOptions.find((opt) => opt.value === value)?.label || labels.recommendation,
     [sortOptions, value, labels.recommendation]
   );
@@ -10749,44 +10777,44 @@ var DEFAULT_LABELS27 = {
 var DEFAULT_FAQ_ITEMS = {
   id: [
     {
-      value: "1",
+      id: 1,
       question: "Bagaimana cara memesan tiket?",
       answer: "Anda dapat memesan tiket melalui halaman pencarian tiket dengan memilih pelabuhan asal, tujuan, dan tanggal keberangkatan."
     },
     {
-      value: "2",
+      id: 2,
       question: "Apakah bisa mengajukan refund?",
       answer: "Ya, pengajuan refund dapat dilakukan melalui menu Riwayat Pesanan sesuai dengan syarat dan ketentuan yang berlaku."
     },
     {
-      value: "3",
+      id: 3,
       question: "Metode pembayaran apa saja yang tersedia?",
       answer: "Kami mendukung berbagai metode pembayaran termasuk Virtual Account, E-Wallet, dan Kartu Kredit/Debit."
     },
     {
-      value: "4",
+      id: 4,
       question: "Apakah tiket perlu dicetak?",
       answer: "Tidak perlu. Anda dapat menunjukkan E-Tiket atau QR Code pada saat check-in di pelabuhan."
     }
   ],
   en: [
     {
-      value: "1",
+      id: 1,
       question: "How to book a ticket?",
       answer: "You can book tickets through the ticket search page by selecting origin, destination, and departure date."
     },
     {
-      value: "2",
+      id: 2,
       question: "Can I request a refund?",
       answer: "Yes, refund requests can be made via the Order History menu subject to applicable terms and conditions."
     },
     {
-      value: "3",
+      id: 3,
       question: "What payment methods are available?",
       answer: "We support various payment methods including Virtual Account, E-Wallet, and Credit/Debit Cards."
     },
     {
-      value: "4",
+      id: 4,
       question: "Do I need to print the ticket?",
       answer: "No physically printed ticket needed. You can show your E-Ticket or QR Code during check-in at the port."
     }
@@ -10824,7 +10852,7 @@ var CardFAQ = ({
     /* @__PURE__ */ jsx(Accordion, { collapsible: true, children: faqItems.map((item) => /* @__PURE__ */ jsxs(
       AccordionItem,
       {
-        value: item.value,
+        value: item.id,
         className: styles.accordionItem,
         children: [
           /* @__PURE__ */ jsxs(
@@ -10848,7 +10876,7 @@ var CardFAQ = ({
           /* @__PURE__ */ jsx(AccordionPanel, { children: item.answer })
         ]
       },
-      item.value
+      item.id
     )) })
   ] });
 };
@@ -11598,7 +11626,7 @@ var CardReview = ({
           }
         ) : (
           // Clone element to append className if it's a valid React element
-          React5.isValidElement(item.label) ? React5.cloneElement(item.label, {
+          React.isValidElement(item.label) ? React.cloneElement(item.label, {
             className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
           }) : /* @__PURE__ */ jsx(
             "div",
@@ -11951,7 +11979,7 @@ var CardPriceDetails = ({
   const renderItem = (item, key) => {
     const variantClass = getVariantClass(item.variant);
     const isTaxLike = item.variant === "danger";
-    return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
         isTaxLike ? /* @__PURE__ */ jsx(Body1Strong, { className: variantClass, children: item.name }) : /* @__PURE__ */ jsx(Caption1, { className: mergeClasses(styles.label, variantClass), children: item.name }),
         isTaxLike ? /* @__PURE__ */ jsxs(Body1Strong, { className: mergeClasses(styles.value, variantClass), children: [
@@ -11978,7 +12006,7 @@ var CardPriceDetails = ({
             section.detail.map((item, i) => renderItem(item, i))
           ] }, index);
         }
-        return /* @__PURE__ */ jsx(React5.Fragment, { children: section.detail.map((item, i) => renderItem(item, i)) }, index);
+        return /* @__PURE__ */ jsx(React.Fragment, { children: section.detail.map((item, i) => renderItem(item, i)) }, index);
       }),
       /* @__PURE__ */ jsx(Divider, {}),
       /* @__PURE__ */ jsxs("div", { className: styles.totalRow, children: [
@@ -12972,7 +13000,7 @@ var uploadStyles = makeStyles({
     objectFit: "contain"
   }
 });
-var FileUpload = React5.forwardRef(
+var FileUpload = React.forwardRef(
   ({
     name,
     control,