@asdp/ferryui 0.1.22-dev.8661 → 0.1.22-dev.8694

package/dist/index.mjs

@@ -3,7 +3,6 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React5, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
 import { Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
-import { Icon as Icon$1 } from '@iconify/react/dist/iconify.js';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import PhoneInputComponent from 'react-phone-input-2';
 import Select from 'react-select';
@@ -2028,7 +2027,7 @@ var useStyles7 = makeStyles({
       display: "none"
     },
     "& .fui-Radio__label": {
-      padding: "10px 24px",
+      padding: "5px 10px",
       border: `1px solid ${tokens.colorNeutralStroke1}`,
       borderRadius: tokens.borderRadiusCircular,
       cursor: "pointer",
@@ -3548,7 +3547,7 @@ var CardTicketSearch = ({
                               control,
                               type: "text",
                               contentBefore: /* @__PURE__ */ jsx(
-                                Icon$1,
+                                Icon,
                                 {
                                   icon: "fluent:vehicle-ship-16-filled",
                                   color: tokens.colorBrandBackground
@@ -3617,7 +3616,7 @@ var CardTicketSearch = ({
                             control,
                             type: "text",
                             contentBefore: /* @__PURE__ */ jsx(
-                              Icon$1,
+                              Icon,
                               {
                                 icon: "fluent:location-24-filled",
                                 color: tokens.colorBrandBackground
@@ -3656,7 +3655,7 @@ var CardTicketSearch = ({
                             control,
                             type: "text",
                             contentBefore: /* @__PURE__ */ jsx(
-                              Icon$1,
+                              Icon,
                               {
                                 icon: "fluent:calendar-24-filled",
                                 color: tokens.colorBrandBackground
@@ -3716,7 +3715,7 @@ var CardTicketSearch = ({
                             control,
                             type: "text",
                             contentBefore: /* @__PURE__ */ jsx(
-                              Icon$1,
+                              Icon,
                               {
                                 icon: "fluent:calendar-24-filled",
                                 color: tokens.colorBrandBackground
@@ -3789,7 +3788,7 @@ var CardTicketSearch = ({
                                 control,
                                 type: "text",
                                 contentBefore: /* @__PURE__ */ jsx(
-                                  Icon$1,
+                                  Icon,
                                   {
                                     icon: "fluent:ribbon-star-24-filled",
                                     color: tokens.colorBrandBackground
@@ -3823,7 +3822,7 @@ var CardTicketSearch = ({
                                 control,
                                 type: "text",
                                 contentBefore: /* @__PURE__ */ jsx(
-                                  Icon$1,
+                                  Icon,
                                   {
                                     icon: "fluent:apps-list-24-filled",
                                     color: tokens.colorBrandBackground
@@ -3858,7 +3857,7 @@ var CardTicketSearch = ({
                                 control,
                                 type: "text",
                                 contentBefore: /* @__PURE__ */ jsx(
-                                  Icon$1,
+                                  Icon,
                                   {
                                     icon: "fluent:people-24-filled",
                                     color: tokens.colorBrandBackground
@@ -3880,7 +3879,7 @@ var CardTicketSearch = ({
                           appearance: "primary",
                           size: "large",
                           type: "submit",
-                          icon: /* @__PURE__ */ jsx(Icon$1, { icon: "fluent:vehicle-ship-20-filled" }),
+                          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-20-filled" }),
                           disabled: submitDisabled,
                           children: labels.searchButton
                         }
@@ -7820,6 +7819,8 @@ var DEFAULT_LABELS22 = {
     ticketClassLabel: "Kelas penumpang",
     saveButton: "Simpan",
     cancelButton: "Batal",
+    idTypeOtherLabel: "Tanggal lahir",
+    idTypeOtherPlaceholder: "DD/MM/YYYY",
     errors: {
       requiredTitle: "Title harus dipilih",
       requiredName: "Nama lengkap harus diisi",
@@ -7853,6 +7854,8 @@ var DEFAULT_LABELS22 = {
     ticketClassLabel: "Passenger Class",
     saveButton: "Save",
     cancelButton: "Cancel",
+    idTypeOtherLabel: "Date of Birth",
+    idTypeOtherPlaceholder: "DD/MM/YYYY",
     errors: {
       requiredTitle: "Title is required",
       requiredName: "Full name is required",
@@ -7868,6 +7871,24 @@ var DEFAULT_LABELS22 = {
     }
   }
 };
+var TYPE_OPTIONS = [
+  {
+    label: "KTP",
+    value: "ktp"
+  },
+  {
+    label: "SIM",
+    value: "sim"
+  },
+  {
+    label: "Paspor",
+    value: "paspor"
+  },
+  {
+    label: "Lainnya",
+    value: "lainnya"
+  }
+];
 var useStyles22 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -7896,7 +7917,6 @@ var ModalPassengerForm = ({
   defaultValues,
   isAdultForm = true,
   titleOptions,
-  idTypeOptions,
   cityOptions,
   ticketClassOptions
 }) => {
@@ -7907,12 +7927,18 @@ var ModalPassengerForm = ({
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
-  const { control, handleSubmit, reset } = useForm({
+  const { control, handleSubmit, reset, watch, setValue } = useForm({
     defaultValues
   });
+  const idType = watch("idType");
   useEffect(() => {
     reset(defaultValues);
   }, [defaultValues, reset]);
+  useEffect(() => {
+    if (idType) {
+      setValue("idNumber", "");
+    }
+  }, [idType, setValue]);
   const handleFormSubmit = (data) => {
     onSubmit(data);
     reset();
@@ -7968,6 +7994,45 @@ var ModalPassengerForm = ({
               }
             }
           ),
+          /* @__PURE__ */ jsx(
+            InputDynamic_default,
+            {
+              name: "age",
+              control,
+              type: "number",
+              label: mergedLabels.ageLabel,
+              placeholder: mergedLabels.agePlaceholder,
+              size: "large",
+              required: true,
+              validationRules: {
+                required: mergedErrors.requiredAge,
+                min: {
+                  value: 1,
+                  message: mergedErrors.minAge
+                },
+                max: {
+                  value: 150,
+                  message: mergedErrors.maxAge
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputDynamic_default,
+            {
+              name: "cityId",
+              control,
+              type: "select",
+              label: mergedLabels.cityLabel,
+              options: cityOptions,
+              placeholder: mergedLabels.cityPlaceholder,
+              size: "large",
+              required: true,
+              validationRules: {
+                required: mergedErrors.requiredCity
+              }
+            }
+          ),
           isAdultForm ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               InputDynamic_default,
@@ -7977,7 +8042,7 @@ var ModalPassengerForm = ({
                 type: "select",
                 label: mergedLabels.idTypeLabel,
                 placeholder: mergedLabels.idTypePlaceholder,
-                options: idTypeOptions,
+                options: TYPE_OPTIONS,
                 size: "large",
                 required: true,
                 validationRules: {
@@ -7985,48 +8050,40 @@ var ModalPassengerForm = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsx(
+            idType ? idType === "lainnya" ? /* @__PURE__ */ jsx(
               InputDynamic_default,
               {
                 name: "idNumber",
                 control,
-                type: "text",
-                label: mergedLabels.idNumberLabel,
-                placeholder: mergedLabels.idNumberPlaceholder,
+                type: "date",
+                label: mergedLabels.idTypeOtherLabel,
+                placeholder: mergedLabels.idTypeOtherPlaceholder,
                 size: "large",
                 required: true,
+                max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
                 validationRules: {
-                  required: mergedErrors.requiredIdNumber,
-                  minLength: {
-                    value: 6,
-                    message: mergedErrors.minLengthIdNumber
-                  }
+                  required: mergedErrors.requiredDate
                 }
               }
-            ),
-            /* @__PURE__ */ jsx(
+            ) : /* @__PURE__ */ jsx(
               InputDynamic_default,
               {
-                name: "age",
+                name: "idNumber",
                 control,
-                type: "number",
-                label: mergedLabels.ageLabel,
-                placeholder: mergedLabels.agePlaceholder,
+                type: idType === "ktp" ? "number" : "text",
+                label: mergedLabels.idNumberLabel,
+                placeholder: mergedLabels.idNumberPlaceholder,
                 size: "large",
                 required: true,
                 validationRules: {
-                  required: mergedErrors.requiredAge,
-                  min: {
-                    value: 1,
-                    message: mergedErrors.minAge
-                  },
-                  max: {
-                    value: 150,
-                    message: mergedErrors.maxAge
+                  required: mergedErrors.requiredIdNumber,
+                  minLength: {
+                    value: 6,
+                    message: mergedErrors.minLengthIdNumber
                   }
                 }
               }
-            )
+            ) : null
           ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
             InputDynamic_default,
             {
@@ -8042,22 +8099,6 @@ var ModalPassengerForm = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx(
-            InputDynamic_default,
-            {
-              name: "cityId",
-              control,
-              type: "select",
-              label: mergedLabels.cityLabel,
-              options: cityOptions,
-              placeholder: mergedLabels.cityPlaceholder,
-              size: "large",
-              required: true,
-              validationRules: {
-                required: mergedErrors.requiredCity
-              }
-            }
-          ),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsx(Divider, {}),
           /* @__PURE__ */ jsx("br", {}),