@landtrustinc/design-system 1.2.57 → 1.2.59

package/dist/index.d.ts

@@ -2654,8 +2654,12 @@ type PackageCardProps = {
      * - 'md': Default size
      */
     size?: 'xs' | 'md';
+    /**
+     * Loading state - shows skeleton placeholders when true
+     */
+    isLoading?: boolean;
 };
-declare const PackageCard: ({ images, title, subtitle, startingPrice, isFavorited, onFavoriteClick, onClick, className, badges, availabilityBadges, id, hasContentBackground, orientation, actions, size, ...rest }: PackageCardProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const PackageCard: ({ images, title, subtitle, startingPrice, isFavorited, onFavoriteClick, onClick, className, badges, availabilityBadges, id, hasContentBackground, orientation, actions, size, isLoading, ...rest }: PackageCardProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type PackageHeaderProps = {
     /**

package/dist/index.js

@@ -9876,6 +9876,9 @@ var Navigation = ({
 };
 var Navigation_default = Navigation;
 
+// src/PackageCard/PackageCard.tsx
+var import_react_loading_skeleton2 = __toESM(require("react-loading-skeleton"));
+
 // src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
 var import_react68 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
@@ -10568,57 +10571,31 @@ var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler)
     }
   `}
 `;
-var imageContainerStyles = (orientation, size = "md") => import_react73.css`
+var imageContainerStyles = (orientation) => import_react73.css`
   width: 100%;
   height: 260px;
 
-  ${size === "xs" && import_react73.css`
-    aspect-ratio: 1;
-    height: auto;
-  `}
-
   ${orientation === "horizontal" && import_react73.css`
     ${media.md} {
       width: 40%;
       height: 200px;
-
-      ${size === "xs" && import_react73.css`
-        aspect-ratio: 1;
-        height: auto;
-      `}
-    }
   `}
 `;
-var imageBoxStyles = (orientation, size = "md") => import_react73.css`
+var imageBoxStyles = (orientation) => import_react73.css`
   height: 260px;
-
-  ${size === "xs" && import_react73.css`
-    aspect-ratio: 1;
-    height: auto;
-  `}
-
   ${orientation === "horizontal" && import_react73.css`
     ${media.md} {
       height: 200px;
-
-      ${size === "xs" && import_react73.css`
-        aspect-ratio: 1;
-        height: auto;
-      `}
     }
   `}
 `;
-var contentContainerStyles = (orientation, hasContentBackground, size = "md") => import_react73.css`
+var contentContainerStyles = (orientation, hasContentBackground) => import_react73.css`
   ${hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles}
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 
-  ${size === "xs" && import_react73.css`
-    padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
-  `}
-
   ${orientation === "horizontal" && import_react73.css`
     ${media.md} {
       width: 60%;
@@ -10711,8 +10688,43 @@ var PackageCard = ({
   orientation = "vertical",
   actions,
   size = "md",
+  isLoading = false,
   ...rest
 }) => {
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+      Box_default,
+      {
+        css: cardContainerStyles3(orientation, hasContentBackground, false),
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+            Box_default,
+            {
+              overflow: "hidden",
+              borderRadius: "var(--spacing-4)",
+              css: imageContainerStyles(orientation),
+              children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_loading_skeleton2.default, { width: "100%", height: "100%", borderRadius: 16 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+            Box_default,
+            {
+              display: "flex",
+              flexDirection: "column",
+              gap: "var(--spacing-1)",
+              mb: "var(--spacing-1)",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_loading_skeleton2.default, { width: "80%", height: 16, borderRadius: 4 }),
+                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_loading_skeleton2.default, { width: "60%", height: 14, borderRadius: 4 }),
+                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_loading_skeleton2.default, { width: "40%", height: 14, borderRadius: 4 })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
   const carouselId = id || `package-card-${title.replace(/\s+/g, "-")}`;
   const shouldShowOverlay = availabilityBadges == null ? void 0 : availabilityBadges.some(
     (badge2) => badge2.showOverlay
@@ -10732,7 +10744,7 @@ var PackageCard = ({
             position: "relative",
             overflow: "hidden",
             borderRadius: "var(--spacing-4)",
-            css: imageContainerStyles(orientation, size),
+            css: imageContainerStyles(orientation),
             children: [
               availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
                 AvailabilityBadge_default,
@@ -10760,7 +10772,7 @@ var PackageCard = ({
                           width: "100%",
                           css: [
                             imageStyles3,
-                            imageBoxStyles(orientation, size),
+                            imageBoxStyles(orientation),
                             {
                               backgroundImage: `linear-gradient(181deg, rgba(0, 0, 0, 0.00) 75.32%, rgba(0, 0, 0, 0.40) 99.41%), url(${image})`
                             }
@@ -10803,50 +10815,44 @@ var PackageCard = ({
           }
         ),
         actions && actions.length > 0 && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(ActionMenu_default, { actions }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
-          Box_default,
-          {
-            css: contentContainerStyles(orientation, hasContentBackground, size),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
-                Box_default,
-                {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "var(--spacing-1)",
-                  mb: "var(--spacing-1)",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Text_default, { size: size === "xs" ? "sm" : "md", fontWeight: "bold", children: title }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Text_default, { size: size === "xs" ? "xs" : "sm", fontWeight: "bold", children: subtitle }) }),
-                    startingPrice && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(Text_default, { size: size === "xs" ? "xs" : "sm", fontWeight: "normal", children: [
-                      "Starting Price ",
-                      startingPrice,
-                      " / Guest"
-                    ] }) })
-                  ]
-                }
-              ),
-              badges && badges.length > 0 && size !== "xs" && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
-                Box_default,
+        /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+            Box_default,
+            {
+              display: "flex",
+              flexDirection: "column",
+              gap: "var(--spacing-1)",
+              mb: "var(--spacing-1)",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Text_default, { size: size === "xs" ? "sm" : "md", fontWeight: "bold", children: title }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Text_default, { size: size === "xs" ? "xs" : "sm", fontWeight: "bold", children: subtitle }) }),
+                startingPrice && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(Text_default, { size: size === "xs" ? "xs" : "sm", fontWeight: "normal", children: [
+                  "Starting Price ",
+                  startingPrice,
+                  " / Guest"
+                ] }) })
+              ]
+            }
+          ),
+          badges && badges.length > 0 && size !== "xs" && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+            Box_default,
+            {
+              display: "flex",
+              gap: "var(--spacing-2) var(--spacing-4)",
+              alignItems: "center",
+              flexWrap: "wrap",
+              children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+                IconLabel_default,
                 {
-                  display: "flex",
-                  gap: "var(--spacing-2) var(--spacing-4)",
-                  alignItems: "center",
-                  flexWrap: "wrap",
-                  children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
-                    IconLabel_default,
-                    {
-                      iconSize: badge2.iconSize || "medium",
-                      label: badge2.label,
-                      variant: badge2.variant
-                    },
-                    `badge-${badge2.variant}-${index}`
-                  ))
-                }
-              )
-            ]
-          }
-        )
+                  iconSize: badge2.iconSize || "medium",
+                  label: badge2.label,
+                  variant: badge2.variant
+                },
+                `badge-${badge2.variant}-${index}`
+              ))
+            }
+          )
+        ] })
       ]
     }
   );