@asdp/ferryui 0.1.14 → 0.1.16

package/dist/index.d.mts

@@ -231,6 +231,10 @@ interface CardPromoProps {
      * custom description className
      */
     descriptionClassName?: string;
+    /**
+     * Loading state
+     */
+    isLoading?: boolean;
 }
 declare const CardPromo: React$1.FC<CardPromoProps>;
 
@@ -255,6 +259,10 @@ interface CardBannerProps {
      * Click handler for the banner
      */
     onClick?: () => void;
+    /**
+     * Loading state
+     */
+    isLoading?: boolean;
 }
 declare const CardBanner: React$1.FC<CardBannerProps>;
 

package/dist/index.d.ts

@@ -231,6 +231,10 @@ interface CardPromoProps {
      * custom description className
      */
     descriptionClassName?: string;
+    /**
+     * Loading state
+     */
+    isLoading?: boolean;
 }
 declare const CardPromo: React$1.FC<CardPromoProps>;
 
@@ -255,6 +259,10 @@ interface CardBannerProps {
      * Click handler for the banner
      */
     onClick?: () => void;
+    /**
+     * Loading state
+     */
+    isLoading?: boolean;
 }
 declare const CardBanner: React$1.FC<CardBannerProps>;
 

package/dist/index.js

@@ -352,10 +352,29 @@ var CardPromo = ({
   buttonText = "Lihat Detail",
   className,
   imageClassName,
-  descriptionClassName
+  descriptionClassName,
+  isLoading = false
 }) => {
   const classes = useStyles3();
   const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.CarouselCard,
+      {
+        autoSize: true,
+        className: reactComponents.mergeClasses(classes.actionCard, className),
+        style: { cursor: "default" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { "aria-label": "Loading content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses(classes.imageContainer, imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "rectangle", style: { width: "100%", height: "100%" } }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { className: classes.infoWrapper, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { className: classes.info, xs: 12, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "70%", height: "20px" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90%", height: "16px" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "16px" } })
+          ] }) })
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactComponents.CarouselCard,
     {
@@ -403,14 +422,17 @@ var useStyles4 = reactComponents.makeStyles({
     margin: 0,
     padding: 0,
     backgroundColor: "transparent",
-    border: "none"
+    border: "none",
+    height: "450px",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge
   },
   bannerImage: {
     width: "100%",
     height: "auto",
     objectFit: "cover",
     display: "block",
-    cursor: "pointer"
+    cursor: "pointer",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge
   }
 });
 var CardBanner = ({
@@ -418,10 +440,24 @@ var CardBanner = ({
   alt,
   index = 0,
   totalBanners,
-  onClick
+  onClick,
+  isLoading = false
 }) => {
   const classes = useStyles4();
   const ariaLabel = totalBanners ? `Banner ${index + 1} of ${totalBanners}` : `Banner ${index + 1}`;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.CarouselCard, { className: classes.bannerCard, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { "aria-label": "Loading banner", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.SkeletonItem,
+      {
+        shape: "rectangle",
+        style: {
+          width: "100%",
+          height: "100%",
+          borderRadius: reactComponents.tokens.borderRadiusXLarge
+        }
+      }
+    ) }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactComponents.CarouselCard,
     {