@asdp/ferryui 0.1.22-dev.9582 → 0.1.22-dev.9596

package/dist/index.d.mts

@@ -2023,7 +2023,7 @@ interface ModalFilterTicketProps {
      */
     onPriceRangeChange: (range: [number, number]) => void;
     /**
-     * Duration range [min, max] in hours
+     * Duration range [min, max] in minutes
      */
     durationRange: [number, number];
     /**
@@ -2043,14 +2043,14 @@ interface ModalFilterTicketProps {
      */
     labels?: Partial<ModalFilterTicketLabels>;
     /**
-     * Optional custom service types
+     * Service types list (from API data)
      */
     serviceTypes?: Array<{
         value: string;
         label: string;
     }>;
     /**
-     * Optional custom time slots
+     * Time slots list (from API/Redux data)
      */
     timeSlots?: Array<{
         value: string;
@@ -2058,24 +2058,34 @@ interface ModalFilterTicketProps {
     }>;
     /**
      * Min price for range slider
-     * @default 200000
+     * @default 0
      */
     minPrice?: number;
     /**
      * Max price for range slider
-     * @default 800000
+     * @default 0
      */
     maxPrice?: number;
     /**
-     * Min duration for range slider (hours)
+     * Min duration for range slider (minutes)
      * @default 0
      */
     minDuration?: number;
     /**
-     * Max duration for range slider (hours)
-     * @default 8
+     * Max duration for range slider (minutes)
+     * @default 0
      */
     maxDuration?: number;
+    /**
+     * Step value for duration range slider
+     * @default 1
+     */
+    durationStep?: number;
+    /**
+     * Whether the filter data is still loading (shows skeleton)
+     * @default false
+     */
+    isLoading?: boolean;
 }
 interface ModalFilterTicketLabels {
     title: string;
@@ -2089,6 +2099,7 @@ interface ModalFilterTicketLabels {
     resetButton: string;
     applyButton: string;
     hourUnit: string;
+    minuteUnit: string;
     currencySymbol: string;
     closeAriaLabel: string;
 }

package/dist/index.d.ts

@@ -2023,7 +2023,7 @@ interface ModalFilterTicketProps {
      */
     onPriceRangeChange: (range: [number, number]) => void;
     /**
-     * Duration range [min, max] in hours
+     * Duration range [min, max] in minutes
      */
     durationRange: [number, number];
     /**
@@ -2043,14 +2043,14 @@ interface ModalFilterTicketProps {
      */
     labels?: Partial<ModalFilterTicketLabels>;
     /**
-     * Optional custom service types
+     * Service types list (from API data)
      */
     serviceTypes?: Array<{
         value: string;
         label: string;
     }>;
     /**
-     * Optional custom time slots
+     * Time slots list (from API/Redux data)
      */
     timeSlots?: Array<{
         value: string;
@@ -2058,24 +2058,34 @@ interface ModalFilterTicketProps {
     }>;
     /**
      * Min price for range slider
-     * @default 200000
+     * @default 0
      */
     minPrice?: number;
     /**
      * Max price for range slider
-     * @default 800000
+     * @default 0
      */
     maxPrice?: number;
     /**
-     * Min duration for range slider (hours)
+     * Min duration for range slider (minutes)
      * @default 0
      */
     minDuration?: number;
     /**
-     * Max duration for range slider (hours)
-     * @default 8
+     * Max duration for range slider (minutes)
+     * @default 0
      */
     maxDuration?: number;
+    /**
+     * Step value for duration range slider
+     * @default 1
+     */
+    durationStep?: number;
+    /**
+     * Whether the filter data is still loading (shows skeleton)
+     * @default false
+     */
+    isLoading?: boolean;
 }
 interface ModalFilterTicketLabels {
     title: string;
@@ -2089,6 +2099,7 @@ interface ModalFilterTicketLabels {
     resetButton: string;
     applyButton: string;
     hourUnit: string;
+    minuteUnit: string;
     currencySymbol: string;
     closeAriaLabel: string;
 }

package/dist/index.js

@@ -8926,10 +8926,11 @@ var DEFAULT_LABELS17 = {
       return `Mulai dari IDR ${formatPrice(min)} - ${formatPrice(max)}`;
     },
     durationLabel: "Durasi perjalanan",
-    durationRangeText: (min, max) => `Perjalanan ${min} - ${max} jam`,
+    durationRangeText: (min, max) => `Perjalanan ${min} - ${max} menit`,
     resetButton: "Reset",
     applyButton: "Terapkan",
     hourUnit: "jam",
+    minuteUnit: "menit",
     currencySymbol: "IDR",
     closeAriaLabel: "Tutup"
   },
@@ -8944,10 +8945,11 @@ var DEFAULT_LABELS17 = {
       return `From IDR ${formatPrice(min)} - ${formatPrice(max)}`;
     },
     durationLabel: "Travel duration",
-    durationRangeText: (min, max) => `${min} - ${max} hours trip`,
+    durationRangeText: (min, max) => `${min} - ${max} minutes trip`,
     resetButton: "Reset",
     applyButton: "Apply",
     hourUnit: "hours",
+    minuteUnit: "minutes",
     currencySymbol: "IDR",
     closeAriaLabel: "Close"
   }
@@ -8968,16 +8970,16 @@ var DEFAULT_TIME_SLOTS = [
   { value: "18:00 - 24:00", label: "18:00 - 24:00" }
 ];
 var DEFAULT_PRICE_RANGE = {
-  min: 2e5,
-  max: 8e5
+  min: 0,
+  max: 0
 };
 var DEFAULT_DURATION_RANGE = {
   min: 0,
-  max: 8
+  max: 0
 };
 var useStyles18 = reactComponents.makeStyles({
   dialogSurface: {
-    maxWidth: "600px",
+    maxWidth: "650px",
     width: "100%"
   },
   content: {
@@ -9059,6 +9061,16 @@ var useStyles18 = reactComponents.makeStyles({
       backgroundColor: reactComponents.tokens.colorPaletteRedBackground1,
       ...reactComponents.shorthands.borderColor(reactComponents.tokens.colorPaletteRedForeground1)
     }
+  },
+  skeletonGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "0.5rem"
+  },
+  skeletonCheckboxRow: {
+    display: "flex",
+    gap: reactComponents.tokens.spacingHorizontalS,
+    alignItems: "center"
   }
 });
 var ModalFilterTicket = ({
@@ -9078,12 +9090,14 @@ var ModalFilterTicket = ({
   onReset,
   onApply,
   labels,
-  serviceTypes = DEFAULT_SERVICE_TYPES,
-  timeSlots = DEFAULT_TIME_SLOTS,
-  minPrice = DEFAULT_PRICE_RANGE.min,
-  maxPrice = DEFAULT_PRICE_RANGE.max,
-  minDuration = DEFAULT_DURATION_RANGE.min,
-  maxDuration = DEFAULT_DURATION_RANGE.max
+  serviceTypes = [],
+  timeSlots = [],
+  minPrice = 0,
+  maxPrice = 0,
+  minDuration = 0,
+  maxDuration = 0,
+  durationStep = 1,
+  isLoading = false
 }) => {
   const styles = useStyles18();
   const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
@@ -9125,8 +9139,19 @@ var ModalFilterTicket = ({
       price
     );
   };
+  const hasPriceRange = minPrice > 0 || maxPrice > 0;
+  const hasDurationRange = minDuration > 0 || maxDuration > 0;
+  const safePriceValues = hasPriceRange ? [
+    Math.min(Math.max(priceRange[0], minPrice), maxPrice),
+    Math.min(Math.max(priceRange[1], minPrice), maxPrice)
+  ] : [minPrice, maxPrice];
+  const safeDurationValues = hasDurationRange ? [
+    Math.min(Math.max(durationRange[0], minDuration), maxDuration),
+    Math.min(Math.max(durationRange[1], minDuration), maxDuration)
+  ] : [minDuration, maxDuration];
   const renderPriceTrack = React.useCallback(
     ({ props, children }) => {
+      if (!hasPriceRange) return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: props.ref, children });
       const [value1, value2] = priceRange;
       const percent1 = (value1 - minPrice) / (maxPrice - minPrice) * 100;
       const percent2 = (value2 - minPrice) / (maxPrice - minPrice) * 100;
@@ -9162,10 +9187,11 @@ var ModalFilterTicket = ({
         }
       );
     },
-    [priceRange, minPrice, maxPrice]
+    [priceRange, minPrice, maxPrice, hasPriceRange]
   );
   const renderDurationTrack = React.useCallback(
     ({ props, children }) => {
+      if (!hasDurationRange) return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: props.ref, children });
       const [value1, value2] = durationRange;
       const percent1 = (value1 - minDuration) / (maxDuration - minDuration) * 100;
       const percent2 = (value2 - minDuration) / (maxDuration - minDuration) * 100;
@@ -9201,7 +9227,7 @@ var ModalFilterTicket = ({
         }
       );
     },
-    [durationRange, minDuration, maxDuration]
+    [durationRange, minDuration, maxDuration, hasDurationRange]
   );
   const renderThumb = ({ props }) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -9221,6 +9247,30 @@ var ModalFilterTicket = ({
       }
     }
   );
+  const renderServiceTypesSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "20px" } }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.skeletonGrid, children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "40px", borderRadius: "8px" } }) }, `svc-skel-${i}`)) })
+  ] });
+  const renderTimeSlotsSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100px", height: "20px" } }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 6, sm: 6, md: 6, lg: 3, xl: 3, xxl: 3, xxxl: 3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonCheckboxRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "16px", height: "16px", borderRadius: "4px" } }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "16px" } }) })
+    ] }) }, `time-skel-${i}`)) })
+  ] });
+  const renderRangeSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.spaceText, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px" } }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "200px", height: "16px" } }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "4px", borderRadius: "2px" } }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderValues, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }) })
+      ] })
+    ] })
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.DialogTitle,
@@ -9240,7 +9290,7 @@ var ModalFilterTicket = ({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { className: styles.content, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
+      isLoading ? renderServiceTypesSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.serviceTypeLabel }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonGrid, children: serviceTypes.map((service) => {
           const isSelected = selectedServiceTypes.includes(
@@ -9261,7 +9311,7 @@ var ModalFilterTicket = ({
         }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
+      isLoading ? renderTimeSlotsSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.departureTimeLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: timeSlots.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
           reactGridSystem.Col,
@@ -9289,7 +9339,7 @@ var ModalFilterTicket = ({
         )) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
+      isLoading ? renderTimeSlotsSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.arrivalTimeLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: timeSlots.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
           reactGridSystem.Col,
@@ -9317,18 +9367,18 @@ var ModalFilterTicket = ({
         )) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
+      isLoading ? renderRangeSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.spaceText, children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.priceLabel }),
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.priceRangeText(priceRange[0], priceRange[1]) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderContainer, children: [
-          rangeReady && /* @__PURE__ */ jsxRuntime.jsx(
+          rangeReady && hasPriceRange && /* @__PURE__ */ jsxRuntime.jsx(
             reactRange.Range,
             {
               min: minPrice,
               max: maxPrice,
-              values: priceRange,
+              values: safePriceValues,
               onChange: (values) => onPriceRangeChange(values),
               renderTrack: renderPriceTrack,
               renderThumb
@@ -9342,7 +9392,7 @@ var ModalFilterTicket = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
+      isLoading ? renderRangeSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.spaceText, children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.durationLabel }),
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.durationRangeText(
@@ -9351,13 +9401,13 @@ var ModalFilterTicket = ({
           ) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderContainer, children: [
-          rangeReady && /* @__PURE__ */ jsxRuntime.jsx(
+          rangeReady && hasDurationRange && /* @__PURE__ */ jsxRuntime.jsx(
             reactRange.Range,
             {
-              step: 1,
+              step: durationStep,
               min: minDuration,
               max: maxDuration,
-              values: durationRange,
+              values: safeDurationValues,
               onChange: (values) => onDurationRangeChange(values),
               renderTrack: renderDurationTrack,
               renderThumb
@@ -9368,12 +9418,12 @@ var ModalFilterTicket = ({
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               minDuration,
               " ",
-              mergedLabels.hourUnit
+              mergedLabels.minuteUnit
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               maxDuration,
               " ",
-              mergedLabels.hourUnit
+              mergedLabels.minuteUnit
             ] })
           ] })
         ] })