@sprintup-cms/sdk 1.9.5 → 1.9.6

package/dist/react/index.js

@@ -874,6 +874,50 @@ function TwoColumnBlock({ block }) {
     !hasImage && /* @__PURE__ */ jsx("div", { className: "flex-1 w-full rounded-xl bg-muted border border-border aspect-video flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "No image set" }) })
   ] }) });
 }
+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"
+  };
+  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
+    )) })
+  ] });
+}
+function GridLayoutBlock({ block }) {
+  const d = getData(block);
+  const cols = Number(d.columns) || 3;
+  const gap = String(d.gap ?? "md");
+  const children = Array.isArray(d.children) ? d.children : [];
+  const gapMap = { none: "gap-0", sm: "gap-2", md: "gap-4", lg: "gap-6", xl: "gap-8" };
+  const colsMap = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4", 5: "grid-cols-5", 6: "grid-cols-6" };
+  return /* @__PURE__ */ jsx("div", { className: `grid ${colsMap[cols] ?? "grid-cols-3"} ${gapMap[gap] ?? "gap-4"}`, children: children.map((child) => /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(GridLayoutChildBlock, { block: child }) }, child.id)) });
+}
+function GridLayoutChildBlock({ block }) {
+  const renderer = BUILT_IN[block.type];
+  if (renderer) return /* @__PURE__ */ jsx(Fragment, { children: renderer(block, null) });
+  return /* @__PURE__ */ jsx(SectionBlock, { block, pageType: null });
+}
 var BUILT_IN = {
   // Structured page type — content is nested { sectionName: { fieldName: value } }
   "__structured__": (b, pt) => /* @__PURE__ */ jsx(StructuredBlock, { block: b, pageType: pt }),
@@ -913,7 +957,9 @@ var BUILT_IN = {
   columns: (b) => /* @__PURE__ */ jsx(ColumnsBlock, { block: b }),
   container: (b) => /* @__PURE__ */ jsx(ContainerBlock, { block: b }),
   carousel: (b) => /* @__PURE__ */ jsx(CarouselBlock, { block: b }),
-  "product-list": (b) => /* @__PURE__ */ jsx(ProductListBlock, { block: b })
+  "product-list": (b) => /* @__PURE__ */ jsx(ProductListBlock, { block: b }),
+  "bento-grid": (b) => /* @__PURE__ */ jsx(BentoGridBlock, { block: b }),
+  "grid-layout": (b) => /* @__PURE__ */ jsx(GridLayoutBlock, { block: b })
 };
 function CMSBlocks({ blocks, pageType, className = "", custom = {} }) {
   if (!blocks?.length) return null;