@asdp/ferryui 0.1.22-dev.9163 → 0.1.22-dev.9167

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +13 -0
  2. package/dist/index.d.ts +13 -0
  3. package/dist/index.js +147 -60
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +147 -60
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1306,7 +1306,8 @@ var CardTicket = ({
1306
1306
  buttonText,
1307
1307
  onPriceDetailClick,
1308
1308
  onPolicyClick,
1309
- onSelectTicket
1309
+ onSelectTicket,
1310
+ isLoading = false
1310
1311
  }) => {
1311
1312
  const styles = useStyles5();
1312
1313
  const { width } = useWindowSize();
@@ -1329,7 +1330,23 @@ var CardTicket = ({
1329
1330
  xxxl: 3,
1330
1331
  style: { padding: 0, margin: 0 },
1331
1332
  children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketLeftCard, children: [
1332
- /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
1333
+ isLoading ? /* @__PURE__ */ jsx(Row, { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(
1334
+ Col,
1335
+ {
1336
+ xs: 12,
1337
+ style: {
1338
+ display: "flex",
1339
+ flexDirection: "column",
1340
+ alignItems: "center",
1341
+ justifyContent: "center",
1342
+ gap: "1rem"
1343
+ },
1344
+ children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
1345
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "60px", borderRadius: "50%" } }),
1346
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100px", height: "20px", marginTop: "1rem" } })
1347
+ ] })
1348
+ }
1349
+ ) }) : /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
1333
1350
  /* @__PURE__ */ jsx(
1334
1351
  Col,
1335
1352
  {
@@ -1475,7 +1492,29 @@ var CardTicket = ({
1475
1492
  xxl: 4.5,
1476
1493
  xxxl: 4.5,
1477
1494
  style: { padding: 0, margin: 0 },
1478
- children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketMiddleCard, children: [
1495
+ children: /* @__PURE__ */ jsx(Card, { className: styles.ticketMiddleCard, children: isLoading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
1496
+ /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px", borderRadius: "4px" } }) }) }),
1497
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
1498
+ /* @__PURE__ */ jsx("div", { className: styles.ticketTime, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
1499
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }),
1500
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px" } }),
1501
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "14px" } })
1502
+ ] }) }),
1503
+ /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
1504
+ /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "16px", marginBottom: "8px" } }) }),
1505
+ /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "2px" } }) }) })
1506
+ ] }),
1507
+ /* @__PURE__ */ jsx("div", { className: styles.ticketTime, style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "8px" }, children: [
1508
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }),
1509
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px" } }),
1510
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "14px" } })
1511
+ ] }) })
1512
+ ] }) }),
1513
+ /* @__PURE__ */ jsx("div", { className: styles.ticketButtons, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", gap: "1rem", width: "100%" }, children: [
1514
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } }),
1515
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } })
1516
+ ] }) })
1517
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1479
1518
  /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxs(
1480
1519
  Badge,
1481
1520
  {
@@ -1553,7 +1592,7 @@ var CardTicket = ({
1553
1592
  }
1554
1593
  )
1555
1594
  ] })
1556
- ] })
1595
+ ] }) })
1557
1596
  }
1558
1597
  ),
1559
1598
  /* @__PURE__ */ jsx(
@@ -1568,54 +1607,68 @@ var CardTicket = ({
1568
1607
  xxxl: 4.5,
1569
1608
  style: { padding: 0, margin: 0 },
1570
1609
  children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketRightCard, children: [
1571
- /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
1572
- /* @__PURE__ */ jsxs(
1573
- "div",
1574
- {
1575
- style: {
1576
- display: "flex",
1577
- flexDirection: "column",
1578
- gap: "0.25rem"
1579
- },
1580
- children: [
1581
- /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.totalPriceLabel }),
1582
- /* @__PURE__ */ jsxs(
1583
- Title3,
1584
- {
1585
- style: {
1586
- display: "flex",
1587
- flex: "column",
1588
- justifyContent: "end"
1589
- },
1590
- children: [
1591
- mergedLabels.currencySymbol,
1592
- "\xA0",
1593
- departureItem?.billingDetail?.total?.formatted
1594
- ]
1595
- }
1596
- )
1597
- ]
1598
- }
1599
- ),
1600
- /* @__PURE__ */ jsx(
1601
- Button,
1602
- {
1603
- onClick: onSelectTicket,
1604
- appearance: "primary",
1605
- style: { backgroundColor: brandColors2["60"] },
1606
- size: "medium",
1607
- shape: "circular",
1608
- icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
1609
- children: buttonText || mergedLabels.selectTicketButton
1610
- }
1611
- )
1612
- ] }),
1613
- /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
1614
- /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.facilitiesLabel }),
1615
- /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
1616
- /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
1617
- /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
1618
- ] }, idx)) })
1610
+ isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
1611
+ /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
1612
+ /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px", flex: 1 }, children: [
1613
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "20px" } }),
1614
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "140px", height: "32px", borderRadius: "16px" } })
1615
+ ] }),
1616
+ /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "40px", borderRadius: "20px" } }) })
1617
+ ] }),
1618
+ /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
1619
+ /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "20px", marginBottom: "8px" } }) }),
1620
+ /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100px", height: "20px" } }) }, i)) })
1621
+ ] })
1622
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1623
+ /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
1624
+ /* @__PURE__ */ jsxs(
1625
+ "div",
1626
+ {
1627
+ style: {
1628
+ display: "flex",
1629
+ flexDirection: "column",
1630
+ gap: "0.25rem"
1631
+ },
1632
+ children: [
1633
+ /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.totalPriceLabel }),
1634
+ /* @__PURE__ */ jsxs(
1635
+ Title3,
1636
+ {
1637
+ style: {
1638
+ display: "flex",
1639
+ flex: "column",
1640
+ justifyContent: "end"
1641
+ },
1642
+ children: [
1643
+ mergedLabels.currencySymbol,
1644
+ "\xA0",
1645
+ departureItem?.billingDetail?.total?.formatted
1646
+ ]
1647
+ }
1648
+ )
1649
+ ]
1650
+ }
1651
+ ),
1652
+ /* @__PURE__ */ jsx(
1653
+ Button,
1654
+ {
1655
+ onClick: onSelectTicket,
1656
+ appearance: "primary",
1657
+ style: { backgroundColor: brandColors2["60"] },
1658
+ size: "medium",
1659
+ shape: "circular",
1660
+ icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
1661
+ children: buttonText || mergedLabels.selectTicketButton
1662
+ }
1663
+ )
1664
+ ] }),
1665
+ /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
1666
+ /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.facilitiesLabel }),
1667
+ /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
1668
+ /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
1669
+ /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
1670
+ ] }, idx)) })
1671
+ ] })
1619
1672
  ] }),
1620
1673
  /* @__PURE__ */ jsx(Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map(
1621
1674
  (_, index) => /* @__PURE__ */ jsx(
@@ -2025,6 +2078,13 @@ var useStyles6 = makeStyles({
2025
2078
  display: "none"
2026
2079
  }
2027
2080
  },
2081
+ skeletonOverride: {
2082
+ cursor: "default",
2083
+ backgroundColor: "transparent",
2084
+ "&:hover": {
2085
+ backgroundColor: "transparent"
2086
+ }
2087
+ },
2028
2088
  // Dividers
2029
2089
  dividerVertical: {
2030
2090
  // Only visible on tablet (horizontal layout)
@@ -2049,7 +2109,9 @@ var CardServiceMenu = ({
2049
2109
  showDescriptions = true,
2050
2110
  className,
2051
2111
  labels,
2052
- menuItems = ALIAS_MENU_ITEMS
2112
+ menuItems = ALIAS_MENU_ITEMS,
2113
+ isLoading = false,
2114
+ skeletonCount = 4
2053
2115
  }) => {
2054
2116
  const styles = useStyles6();
2055
2117
  ({ ...DEFAULT_LABELS6[language], ...labels });
@@ -2057,7 +2119,19 @@ var CardServiceMenu = ({
2057
2119
  const isActive = activeServiceId === serviceId;
2058
2120
  return mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
2059
2121
  };
2060
- return /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsx("div", { className: styles.menuList, children: menuItems.map((item, index) => {
2122
+ return /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsx("div", { className: styles.menuList, children: isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
2123
+ /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
2124
+ /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
2125
+ /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
2126
+ /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
2127
+ showDescriptions && /* @__PURE__ */ jsx(Skeleton, { className: styles.description, children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
2128
+ ] })
2129
+ ] }),
2130
+ index < skeletonCount - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
2131
+ /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
2132
+ /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
2133
+ ] })
2134
+ ] }, `skeleton-${index}`)) : menuItems.map((item, index) => {
2061
2135
  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
2062
2136
  /* @__PURE__ */ jsxs(
2063
2137
  Button,
@@ -3879,7 +3953,8 @@ var CardTicketSearch = ({
3879
3953
  showPassengerField = false,
3880
3954
  showRoundTrip = true,
3881
3955
  onServiceClick,
3882
- menuItems
3956
+ menuItems,
3957
+ isLoadingServiceMenu
3883
3958
  }) => {
3884
3959
  const styles = useStyles8();
3885
3960
  const labels = React.useMemo(
@@ -3974,7 +4049,8 @@ var CardTicketSearch = ({
3974
4049
  activeServiceId,
3975
4050
  language,
3976
4051
  onServiceClick,
3977
- menuItems
4052
+ menuItems,
4053
+ isLoading: isLoadingServiceMenu
3978
4054
  }
3979
4055
  )
3980
4056
  }
@@ -5070,7 +5146,13 @@ var ModalSearchHarbor = ({
5070
5146
  /* @__PURE__ */ jsx(Divider, {})
5071
5147
  ] }),
5072
5148
  /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
5073
- /* @__PURE__ */ jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: mergedLabels.loadingData }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
5149
+ /* @__PURE__ */ jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
5150
+ /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", alignItems: "center", gap: "0.5rem", width: "70%" }, children: [
5151
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }),
5152
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100%", height: "20px", borderRadius: "4px" } })
5153
+ ] }),
5154
+ showButtonFavorite && /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }) })
5155
+ ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
5074
5156
  /* @__PURE__ */ jsxs(
5075
5157
  "div",
5076
5158
  {
@@ -6627,7 +6709,8 @@ var useStyles16 = makeStyles({
6627
6709
  paddingRight: tokens.spacingHorizontalSNudge,
6628
6710
  paddingBottom: tokens.spacingHorizontalXL,
6629
6711
  maxHeight: "70vh",
6630
- overflowY: "auto"
6712
+ overflowY: "auto",
6713
+ overflowX: "hidden"
6631
6714
  },
6632
6715
  closeButton: {
6633
6716
  minWidth: "32px",
@@ -7126,7 +7209,8 @@ var DateFilter = ({
7126
7209
  showCalendarButton = true,
7127
7210
  scrollAmount = DEFAULT_SCROLL_AMOUNT,
7128
7211
  language = "id",
7129
- labels
7212
+ labels,
7213
+ isLoading = false
7130
7214
  }) => {
7131
7215
  const styles = useStyles17();
7132
7216
  const scrollRef = useRef(null);
@@ -7151,7 +7235,10 @@ var DateFilter = ({
7151
7235
  "aria-label": mergedLabels.prevButtonAriaLabel
7152
7236
  }
7153
7237
  ) }) }),
7154
- /* @__PURE__ */ jsx("div", { ref: scrollRef, className: styles.scrollContainer, children: dates.map((date, index) => /* @__PURE__ */ jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxs(
7238
+ /* @__PURE__ */ jsx("div", { ref: scrollRef, className: styles.scrollContainer, children: isLoading ? Array.from({ length: 7 }).map((_, index) => /* @__PURE__ */ jsx("div", { className: styles.item, children: /* @__PURE__ */ jsx("div", { className: styles.compoundButton, style: { borderRadius: tokens.borderRadiusMedium, border: `1px solid ${tokens.colorNeutralStroke1}` }, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px", padding: "8px" }, children: [
7239
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "14px" } }),
7240
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60%", height: "14px" } })
7241
+ ] }) }) }, index)) : dates.map((date, index) => /* @__PURE__ */ jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxs(
7155
7242
  Button,
7156
7243
  {
7157
7244
  appearance: "outline",