@asdp/ferryui 0.1.22-dev.10850 → 0.1.22-dev.10923

package/dist/index.d.mts

@@ -3826,6 +3826,16 @@ interface CardPaymentMethodListProps {
     methods: PaymentMethodCategory[];
     selectedValue?: string;
     onSelect: (value: string) => void;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton categories to display while loading
+     * @default 3
+     */
+    skeletonCount?: number;
 }
 
 declare const CardPaymentMethodList: React$1.FC<CardPaymentMethodListProps>;
@@ -3882,6 +3892,16 @@ interface CardPaymentMethodFavoriteProps {
      * @default true
      */
     showViewAllButton?: boolean;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton payment methods to display while loading
+     * @default 3
+     */
+    skeletonCount?: number;
 }
 
 declare const CardPaymentMethodFavorite: React$1.FC<CardPaymentMethodFavoriteProps>;
@@ -3942,6 +3962,11 @@ interface CardPaymentInfoProps {
     onCopyVA?: () => void;
     onCheckStatus?: () => void;
     onChangePayment?: () => void;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
 }
 
 declare const CardPaymentInfo: React$1.FC<CardPaymentInfoProps>;

package/dist/index.d.ts

@@ -3826,6 +3826,16 @@ interface CardPaymentMethodListProps {
     methods: PaymentMethodCategory[];
     selectedValue?: string;
     onSelect: (value: string) => void;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton categories to display while loading
+     * @default 3
+     */
+    skeletonCount?: number;
 }
 
 declare const CardPaymentMethodList: React$1.FC<CardPaymentMethodListProps>;
@@ -3882,6 +3892,16 @@ interface CardPaymentMethodFavoriteProps {
      * @default true
      */
     showViewAllButton?: boolean;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton payment methods to display while loading
+     * @default 3
+     */
+    skeletonCount?: number;
 }
 
 declare const CardPaymentMethodFavorite: React$1.FC<CardPaymentMethodFavoriteProps>;
@@ -3942,6 +3962,11 @@ interface CardPaymentInfoProps {
     onCopyVA?: () => void;
     onCheckStatus?: () => void;
     onChangePayment?: () => void;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
 }
 
 declare const CardPaymentInfo: React$1.FC<CardPaymentInfoProps>;

package/dist/index.js

@@ -16542,6 +16542,17 @@ var useStyles38 = reactComponents.makeStyles({
     height: "40px",
     objectFit: "contain"
   },
+  skeletonOption: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  skeletonOptionLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalL
+  },
   card: {
     position: "relative",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -16558,13 +16569,53 @@ var CardPaymentMethodList = ({
   labels,
   methods,
   selectedValue,
-  onSelect
+  onSelect,
+  isLoading = false,
+  skeletonCount = 3
 }) => {
   const styles = useStyles38();
   const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.method }),
-    methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            style: {
+              width: "60%",
+              height: "20px",
+              marginBottom: reactComponents.tokens.spacingVerticalXXL
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonOption, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonOptionLeft, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                shape: "circle",
+                style: { width: "40px", height: "40px" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: { width: "140px", height: "18px" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              shape: "circle",
+              style: { width: "20px", height: "20px" }
+            }
+          )
+        ] })
+      ] })
+    ] }, `payment-method-skeleton-${index}`)) : methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -16648,6 +16699,17 @@ var useStyles39 = reactComponents.makeStyles({
     ),
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     zIndex: 3
+  },
+  skeletonRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  skeletonLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalL
   }
 });
 var CardPaymentMethodFavorite = ({
@@ -16658,7 +16720,9 @@ var CardPaymentMethodFavorite = ({
   onSelect,
   onViewAllMethods,
   showWarning = true,
-  showViewAllButton = true
+  showViewAllButton = true,
+  isLoading = false,
+  skeletonCount = 3
 }) => {
   const styles = useStyles39();
   const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
@@ -16678,29 +16742,61 @@ var CardPaymentMethodFavorite = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalL }, children: methods.map((option) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, onClick: () => onSelect(option.value), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { justify: "between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: option.image,
-          alt: option.label,
-          className: styles.image
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: option.label }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactComponents.Radio,
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalL }, children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonLeft, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            shape: "circle",
+            style: { width: "40px", height: "40px" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            style: { width: "140px", height: "18px" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.SkeletonItem,
         {
-          checked: selectedValue === option.value,
-          onChange: () => onSelect(option.value),
-          value: option.value,
-          name: "payment-method-favorite",
-          disabled: option.disabled,
-          "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
+          shape: "circle",
+          style: { width: "20px", height: "20px" }
         }
-      ) })
-    ] }) }, option.value)) }),
-    showViewAllButton && /* @__PURE__ */ jsxRuntime.jsx(
+      )
+    ] }) }, `payment-favorite-skeleton-${index}`)) }) }) : /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalL }, children: methods.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      reactGridSystem.Col,
+      {
+        xs: 12,
+        onClick: () => onSelect(option.value),
+        style: { cursor: "pointer" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { justify: "between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: option.image,
+              alt: option.label,
+              className: styles.image
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: option.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Radio,
+            {
+              checked: selectedValue === option.value,
+              onChange: () => onSelect(option.value),
+              value: option.value,
+              name: "payment-method-favorite",
+              disabled: option.disabled,
+              "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
+            }
+          ) })
+        ] })
+      },
+      option.value
+    )) }),
+    showViewAllButton && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.Button,
       {
         style: { width: "100%" },
@@ -16877,6 +16973,18 @@ var useStyles41 = reactComponents.makeStyles({
       reactComponents.tokens.spacingHorizontalM
     ),
     color: reactComponents.tokens.colorNeutralForeground4
+  },
+  skeletonCenter: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalM
+  },
+  skeletonRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: reactComponents.tokens.spacingHorizontalM
   }
 });
 var CardPaymentInfo = ({
@@ -16889,11 +16997,103 @@ var CardPaymentInfo = ({
   guides,
   onCopyVA,
   onCheckStatus,
-  onChangePayment
+  onChangePayment,
+  isLoading = false
 }) => {
   const styles = useStyles41();
   const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "180px", height: "20px" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "260px", height: "28px" } })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.infoCard, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.codeCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              shape: "circle",
+              style: { width: "40px", height: "40px" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "160px", height: "20px" } })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonCenter, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "260px", height: "36px" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              style: {
+                width: "80%",
+                height: "40px",
+                borderRadius: reactComponents.tokens.borderRadiusCircular
+              }
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.SkeletonItem,
+        {
+          style: {
+            width: "100%",
+            height: "40px",
+            borderRadius: reactComponents.tokens.borderRadiusCircular
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            style: {
+              width: "120px",
+              height: "18px",
+              marginBottom: "8px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            style: {
+              width: "100%",
+              height: "36px",
+              borderRadius: reactComponents.tokens.borderRadius2XLarge
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.SkeletonItem,
+        {
+          style: {
+            width: "75%",
+            height: "18px",
+            marginBottom: reactComponents.tokens.spacingVerticalM
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.SkeletonItem,
+        {
+          style: {
+            width: "100%",
+            height: "40px",
+            borderRadius: reactComponents.tokens.borderRadiusCircular
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.infoCard, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "55%", height: "20px" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "16px" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "85%", height: "16px" } })
+    ] })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.expiryPrefix }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title2, { className: styles.expiryTitle, children: expiryDate })
@@ -16946,7 +17146,16 @@ var CardPaymentInfo = ({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: reactComponents.tokens.spacingVerticalM }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { style: { color: reactComponents.tokens.colorNeutralStrokeAccessible, fontWeight: fontWeight.Medium }, children: mergedLabels.checkStatusInfo }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: reactComponents.tokens.spacingVerticalM }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Subtitle2,
+        {
+          style: {
+            color: reactComponents.tokens.colorNeutralStrokeAccessible,
+            fontWeight: fontWeight.Medium
+          },
+          children: mergedLabels.checkStatusInfo
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Button,
         {
@@ -16960,7 +17169,7 @@ var CardPaymentInfo = ({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(CardPaymentGuide, { guides, language })
-  ] }) });
+  ] }) }) });
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts