@sprintup-cms/sdk 1.9.7 → 1.9.9

package/dist/react/index.js

@@ -575,20 +575,24 @@ function BentoHeroBlock({ block }) {
         )
       ] })
     ] }),
-    cards.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr", children: cards.map((card, i) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `rounded-2xl border border-border p-6 flex flex-col gap-3 transition-shadow hover:shadow-md ${card.featured ? "lg:col-span-2 row-span-1" : ""}`,
-        style: { background: card.background || "var(--muted)" },
-        children: [
-          card.icon && /* @__PURE__ */ jsx("span", { className: "text-2xl", role: "img", "aria-label": card.title, children: card.icon }),
-          card.image && /* @__PURE__ */ jsx("img", { src: card.image, alt: card.imageAlt || card.title || "Feature illustration", className: "w-full rounded-lg object-cover mb-1", style: { maxHeight: card.featured ? "180px" : "120px" } }),
-          card.title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: card.title }),
-          card.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: card.description })
-        ]
-      },
-      i
-    )) })
+    cards.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", style: { gridAutoRows: "180px" }, children: cards.map((card, i) => {
+      const colSpan = card.featured ? 2 : 1;
+      const rowSpan = card.rows || 1;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: { gridColumn: `span ${colSpan}`, gridRow: `span ${rowSpan}`, background: card.background || "var(--muted)" },
+          className: "rounded-2xl border border-border p-6 flex flex-col gap-3 transition-shadow hover:shadow-md",
+          children: [
+            card.icon && /* @__PURE__ */ jsx("span", { className: "text-2xl", role: "img", "aria-label": card.title, children: card.icon }),
+            card.image && /* @__PURE__ */ jsx("img", { src: card.image, alt: card.imageAlt || card.title || "Feature illustration", className: "w-full rounded-lg object-cover mb-1", style: { maxHeight: card.featured ? "180px" : "120px" } }),
+            card.title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: card.title }),
+            card.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: card.description })
+          ]
+        },
+        i
+      );
+    }) })
   ] }) });
 }
 function MinimalHeroBlock({ block }) {
@@ -877,31 +881,37 @@ function TwoColumnBlock({ block }) {
 function BentoGridBlock({ block }) {
   const d = getData(block);
   const items = Array.isArray(d.items) ? d.items : [];
-  const sizeClass = {
-    small: "col-span-1 row-span-1",
-    wide: "col-span-2 row-span-1",
-    tall: "col-span-1 row-span-2",
-    large: "col-span-2 row-span-2"
+  const SPAN = {
+    small: [1, 1],
+    wide: [2, 1],
+    tall: [1, 2],
+    large: [2, 2],
+    "wide-2": [2, 2],
+    "wide-3": [2, 3]
   };
   return /* @__PURE__ */ jsxs("section", { className: "py-12", children: [
     (d.title || d.subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
       d.title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight", children: d.title }),
       d.subtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: d.subtitle })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 auto-rows-[180px] gap-3", children: items.map((item, i) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `rounded-xl border border-border bg-card p-5 flex flex-col justify-between hover:bg-muted/40 transition-colors ${sizeClass[item.size] ?? sizeClass.small}`,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3", children: FEATURE_ICONS[item.icon] ?? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "w-4 h-4", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: item.title }),
-            item.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mt-0.5 leading-relaxed", children: item.description })
-          ] })
-        ]
-      },
-      i
-    )) })
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-3", style: { gridAutoRows: "180px" }, children: items.map((item, i) => {
+      const [cs, rs] = SPAN[item.size] ?? [1, 1];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: { gridColumn: `span ${cs}`, gridRow: `span ${rs}` },
+          className: "rounded-xl border border-border bg-card p-5 flex flex-col justify-between hover:bg-muted/40 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3", children: FEATURE_ICONS[item.icon] ?? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "w-4 h-4", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: item.title }),
+              item.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mt-0.5 leading-relaxed", children: item.description })
+            ] })
+          ]
+        },
+        i
+      );
+    }) })
   ] });
 }
 function GridLayoutBlock({ block }) {