@asdp/ferryui 0.1.22-dev.9630 → 0.1.22-dev.9700

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea, Link } 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, Title2, Divider, Title3, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea, Link } 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 } from '@fluentui/react-icons';
@@ -238,6 +238,8 @@ var fontWeight = {
 var sharedColors = {
   "Shared_Cranberry_Primary": "#c50f1f",
   "Shared_Red_Primary": "#d13438",
+  "Shared_Orange_Shade_20": "#bc4b09",
+  "Shared_Orange_Tint_60": "#fff9f5",
   "Shared_Green_Primary": "#107c10"};
 var lightModeColors = {
   "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
@@ -11849,6 +11851,25 @@ var useStyles25 = makeStyles({
     height: "32px",
     zIndex: 1,
     filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))"
+  },
+  warningBanner: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    backgroundColor: sharedColors.Shared_Orange_Tint_60,
+    border: `1px solid ${sharedColors.Shared_Orange_Shade_20}`,
+    borderRadius: tokens.borderRadiusLarge,
+    padding: "0.75rem 1rem",
+    marginBottom: "1.5rem"
+  },
+  warningIcon: {
+    color: sharedColors.Shared_Orange_Shade_20,
+    flexShrink: 0,
+    display: "flex"
+  },
+  warningText: {
+    color: sharedColors.Shared_Orange_Shade_20,
+    fontSize: tokens.fontSizeBase300
   }
 });
 var CardPassengerList = ({
@@ -11867,6 +11888,10 @@ var CardPassengerList = ({
       /* @__PURE__ */ jsx(Title3, { className: styles.headerTitle, children: displayTitle }),
       /* @__PURE__ */ jsx("div", { className: styles.headerLine })
     ] }),
+    passengers.filter((p) => p.id).length !== passengers.length && /* @__PURE__ */ jsxs("div", { className: styles.warningBanner, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.warningIcon, children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:warning-20-filled", width: 24, height: 24 }) }),
+      /* @__PURE__ */ jsx("div", { className: styles.warningText, children: "Harap isi data penumpang dibawah ini untuk bisa melanjutkan pembelian tiket." })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: styles.passengerList, children: passengers.map((passenger, index) => {
       const badgeConfig = getBadgeConfig(passenger.serviceName);
       return /* @__PURE__ */ jsxs(
@@ -11884,7 +11909,7 @@ var CardPassengerList = ({
           },
           children: [
             /* @__PURE__ */ jsx("div", { className: styles.passengerInfo, children: /* @__PURE__ */ jsxs(Subtitle2, { className: styles.passengerText, children: [
-              passenger.name || `${mergedLabels.passengerPrefix} ${index + 1}`,
+              passenger.fullName || `${mergedLabels.passengerPrefix} ${index + 1}`,
               " ",
               "(",
               passenger.passengerType,
@@ -11916,7 +11941,7 @@ var CardPassengerList = ({
                   /* @__PURE__ */ jsx(
                     Icon,
                     {
-                      icon: passenger.name && passenger.serviceName ? "fluent:edit-24-regular" : "fluent:chevron-right-24-regular",
+                      icon: passenger.id && passenger.serviceName ? "fluent:edit-24-regular" : "fluent:chevron-right-24-regular",
                       width: 20,
                       height: 20
                     }
@@ -15890,8 +15915,8 @@ var uploadStyles = makeStyles({
     pointerEvents: "none"
   },
   filePreviewImage: {
-    width: "48px",
-    height: "48px",
+    width: "32px",
+    height: "32px",
     borderRadius: tokens.borderRadiusSmall,
     objectFit: "cover"
   },
@@ -15899,6 +15924,18 @@ var uploadStyles = makeStyles({
     maxWidth: "100%",
     maxHeight: "70vh",
     objectFit: "contain"
+  },
+  infoLabel: {
+    '& [role="note"]': {
+      backgroundColor: "black",
+      color: "white"
+    }
+  },
+  label: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "block"
   }
 });
 var FileUpload = React.forwardRef(
@@ -15914,7 +15951,8 @@ var FileUpload = React.forwardRef(
     language = "id",
     labels: customLabels,
     pdfIcon,
-    downloadTemplateDocument = false
+    downloadTemplateDocument = false,
+    infoLabel
   }, ref) => {
     const mergedLabels = { ...DEFAULT_LABELS39[language], ...customLabels };
     const styles = uploadStyles();
@@ -16047,8 +16085,11 @@ var FileUpload = React.forwardRef(
             return /* @__PURE__ */ jsxs(
               Field,
               {
+                ref,
                 required,
-                label: /* @__PURE__ */ jsx(Body1, { children: label }),
+                label: {
+                  children: (_, slotProps) => infoLabel ? /* @__PURE__ */ jsx(InfoLabel, { ...slotProps, info: infoLabel, className: styles.infoLabel, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: label }) }) : /* @__PURE__ */ jsx(Body1, { className: styles.label, children: label })
+                },
                 className: styles.fieldContainer,
                 children: [
                   /* @__PURE__ */ jsx(
@@ -16128,8 +16169,10 @@ var FileUpload = React.forwardRef(
               {
                 ref,
                 required,
-                label: /* @__PURE__ */ jsx(Body1, { children: label }),
                 className: styles.fieldContainer,
+                label: {
+                  children: (_, slotProps) => infoLabel ? /* @__PURE__ */ jsx(InfoLabel, { ...slotProps, info: infoLabel, className: styles.infoLabel, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: label }) }) : /* @__PURE__ */ jsx(Body1, { className: styles.label, children: label })
+                },
                 children: [
                   /* @__PURE__ */ jsxs(
                     Container,