@landtrustinc/design-system 1.2.57 → 1.2.58

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");
@@ -10711,8 +10714,49 @@ 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, size),
+              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, 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)(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