@asdp/ferryui 0.1.5 → 0.1.6

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, typographyStyles, Checkbox, RadioGroup, Radio, Switch, Textarea } from '@fluentui/react-components';
+import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, typographyStyles, RadioGroup, Radio, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React2, { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { Icon } from '@iconify/react';
@@ -3361,7 +3361,198 @@ var ModalSelectDate = ({
     }
   );
 };
+var useStyles10 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    paddingTop: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  headerRow: {
+    display: "flex",
+    justifyContent: "end",
+    alignItems: "center",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`
+  },
+  serviceList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    maxHeight: "400px",
+    overflowY: "auto",
+    paddingLeft: "20px"
+  },
+  serviceItem: {
+    padding: "16px 0px",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    cursor: "pointer",
+    transition: "background-color 0.2s ease",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    }
+  },
+  serviceContent: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  serviceName: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    color: tokens.colorNeutralForeground1
+  },
+  serviceType: {
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground2
+  },
+  serviceDescription: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground3,
+    lineHeight: "1.4"
+  },
+  footer: {
+    padding: "16px 20px",
+    borderTop: `1px solid ${tokens.colorNeutralStroke2}`
+  },
+  saveButton: {
+    width: "100%",
+    borderRadius: tokens.borderRadiusCircular
+  }
+});
+var ModalService = ({
+  open,
+  onClose,
+  title = "Pilih Kelas Layanan",
+  services,
+  selectedServiceIds,
+  onSave,
+  isLoading = false,
+  isError = false
+}) => {
+  const styles = useStyles10();
+  const [selectedServices, setSelectedServices] = useState(selectedServiceIds);
+  useEffect(() => {
+    if (open) {
+      if (selectedServiceIds && selectedServiceIds.length > 0) {
+        const validIds = services.filter((s) => selectedServiceIds.includes(s.id)).map((s) => s.id);
+        setSelectedServices(validIds);
+      } else {
+        setSelectedServices(services.map((s) => s.id));
+      }
+    }
+  }, [open, services, selectedServiceIds]);
+  const handleClose = () => {
+    onClose();
+  };
+  const handleToggleService = (serviceId) => {
+    setSelectedServices((prev) => {
+      if (prev.includes(serviceId)) {
+        return prev.filter((id) => id !== serviceId);
+      } else {
+        return [...prev, serviceId];
+      }
+    });
+  };
+  const handleToggleAll = () => {
+    if (selectedServices.length === services.length) {
+      setSelectedServices([]);
+    } else {
+      setSelectedServices(services.map((s) => s.id));
+    }
+  };
+  const handleSave = () => {
+    const selectedServiceItems = services.filter((s) => selectedServices.includes(s.id));
+    onSave(selectedServiceItems);
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !data.open && onClose(),
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: handleClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(Body1, { children: "Loading..." }) : isError ? /* @__PURE__ */ jsx(Body1, { children: "Error loading services" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.serviceList, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+              /* @__PURE__ */ jsx(Body1, { children: "Pilih Semua" }),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: selectedServices.length === services.length,
+                  onChange: handleToggleAll
+                }
+              )
+            ] }),
+            services.map((service) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles.serviceItem,
+                onClick: () => handleToggleService(service.id),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: styles.serviceContent, children: [
+                    /* @__PURE__ */ jsx(Body1, { className: styles.serviceName, children: service.serviceTypeName }),
+                    /* @__PURE__ */ jsx(Caption1, { className: styles.serviceType, children: service.serviceTypeCode }),
+                    /* @__PURE__ */ jsx(Caption1, { className: styles.serviceDescription, children: service.serviceDescription })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: selectedServices.includes(service.id),
+                      onChange: () => handleToggleService(service.id)
+                    }
+                  )
+                ]
+              },
+              service.id
+            ))
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              size: "medium",
+              className: styles.saveButton,
+              onClick: handleSave,
+              disabled: selectedServices.length === 0,
+              children: "Simpan"
+            }
+          ) })
+        ] }) })
+      ] }) })
+    }
+  );
+};
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES2 as DEFAULT_COUNTRY_CODES, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, ModalSelectDate, getModalPreset };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES2 as DEFAULT_COUNTRY_CODES, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, ModalSelectDate, ModalService, getModalPreset };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map