@sprintup-cms/sdk 1.8.42 → 1.8.45

package/dist/react/index.js

@@ -442,6 +442,119 @@ function PricingTableBlock({ block }) {
     }) })
   ] });
 }
+function SplitHeroBlock({ block }) {
+  const d = getData(block);
+  const imgLeft = d.imagePosition === "left";
+  return /* @__PURE__ */ jsx("section", { className: "py-16", children: /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${imgLeft ? "md:flex-row-reverse" : "md:flex-row"} items-center gap-10 md:gap-16 max-w-6xl mx-auto px-4`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-5", children: [
+      d.title && /* @__PURE__ */ jsx("h1", { className: "text-3xl md:text-5xl font-extrabold tracking-tight text-balance leading-tight", children: d.title }),
+      d.subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground leading-relaxed text-pretty", children: d.subtitle }),
+      (d.button || d.secondaryButton) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 pt-2", children: [
+        d.button && /* @__PURE__ */ jsx("a", { href: d.buttonUrl || "#", className: "inline-flex items-center px-6 py-3 rounded-lg bg-primary text-primary-foreground font-semibold text-sm hover:opacity-90 transition-opacity", children: d.button }),
+        d.secondaryButton && /* @__PURE__ */ jsx("a", { href: d.secondaryUrl || "#", className: "inline-flex items-center px-6 py-3 rounded-lg border border-border text-foreground font-semibold text-sm hover:bg-muted transition-colors", children: d.secondaryButton })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 w-full", children: d.image ? /* @__PURE__ */ jsx("img", { src: d.image, alt: d.title || "", className: "w-full rounded-2xl object-cover shadow-lg border border-border" }) : /* @__PURE__ */ jsx("div", { className: "w-full rounded-2xl 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 NavbarBlock({ block }) {
+  const d = getData(block);
+  const links = Array.isArray(d.links) ? d.links : [];
+  return /* @__PURE__ */ jsx("header", { className: `w-full border-b border-border bg-background/95 backdrop-blur ${d.sticky ? "sticky top-0 z-50" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-4 h-16 flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("a", { href: "/", className: "flex items-center gap-2", children: [
+      d.logo && /* @__PURE__ */ jsx("img", { src: d.logo, alt: d.logoText || "Logo", className: "h-8 w-auto" }),
+      d.logoText && /* @__PURE__ */ jsx("span", { className: "font-bold text-base", children: d.logoText })
+    ] }),
+    /* @__PURE__ */ jsx("nav", { className: "hidden md:flex items-center gap-6", children: links.map((link, i) => /* @__PURE__ */ jsx("a", { href: link.url || "#", className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: link.label }, i)) }),
+    d.ctaLabel && /* @__PURE__ */ jsx("a", { href: d.ctaUrl || "#", className: "inline-flex items-center px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-semibold hover:opacity-90 transition-opacity", children: d.ctaLabel })
+  ] }) });
+}
+function AccordionBlock({ block }) {
+  const d = getData(block);
+  const items = Array.isArray(d.items) ? d.items : [];
+  const [open, setOpen] = React.useState(null);
+  return /* @__PURE__ */ jsxs("section", { className: "py-8", children: [
+    d.title && /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-center mb-6 text-balance", children: d.title }),
+    /* @__PURE__ */ jsx("div", { className: "max-w-2xl mx-auto divide-y divide-border border border-border rounded-xl overflow-hidden", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "w-full flex items-center justify-between px-5 py-4 text-left text-sm font-medium hover:bg-muted/50 transition-colors",
+          onClick: () => setOpen(open === i ? null : i),
+          "aria-expanded": open === i,
+          children: [
+            /* @__PURE__ */ jsx("span", { children: item.title }),
+            /* @__PURE__ */ jsx("svg", { className: `w-4 h-4 text-muted-foreground transition-transform ${open === i ? "rotate-180" : ""}`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) })
+          ]
+        }
+      ),
+      open === i && /* @__PURE__ */ jsx("div", { className: "px-5 pb-4 text-sm text-muted-foreground leading-relaxed", dangerouslySetInnerHTML: { __html: item.content || "" } })
+    ] }, i)) })
+  ] });
+}
+function TabsBlock({ block }) {
+  const d = getData(block);
+  const tabs = Array.isArray(d.tabs) ? d.tabs : [];
+  const [active, setActive] = React.useState(0);
+  if (!tabs.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "py-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b border-border mb-6 overflow-x-auto", children: tabs.map((tab, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActive(i),
+        className: `px-4 py-2 text-sm font-medium whitespace-nowrap transition-colors border-b-2 -mb-px ${active === i ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+        children: tab.label
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground leading-relaxed", dangerouslySetInnerHTML: { __html: tabs[active]?.content || "" } })
+  ] });
+}
+function ColumnsBlock({ block }) {
+  const d = getData(block);
+  const items = Array.isArray(d.items) ? d.items : [];
+  const cols = Number(d.columns) || 3;
+  const gridCols = cols === 2 ? "md:grid-cols-2" : cols === 4 ? "md:grid-cols-4" : "md:grid-cols-3";
+  const gap = d.gap === "sm" ? "gap-4" : d.gap === "lg" ? "gap-12" : "gap-8";
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: `grid grid-cols-1 ${gridCols} ${gap}`, children: items.map((item, i) => /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed", dangerouslySetInnerHTML: { __html: item.content || "" } }, i)) });
+}
+function ContainerBlock({ block }) {
+  const d = getData(block);
+  const maxW = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-lg", xl: "max-w-xl", "2xl": "max-w-2xl", "4xl": "max-w-4xl", full: "max-w-full" };
+  const pad = { none: "", sm: "px-4 py-4", md: "px-6 py-8", lg: "px-8 py-12" };
+  return /* @__PURE__ */ jsx("div", { className: `mx-auto ${maxW[d.maxWidth || "4xl"] ?? "max-w-4xl"} ${pad[d.padding || "md"] ?? "px-6 py-8"}`, children: d.content && /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed", dangerouslySetInnerHTML: { __html: d.content } }) });
+}
+function CarouselBlock({ block }) {
+  const d = getData(block);
+  const slides = Array.isArray(d.slides) ? d.slides : [];
+  const [current, setCurrent] = React.useState(0);
+  React.useEffect(() => {
+    if (!d.autoplay || slides.length < 2) return;
+    const id = setInterval(() => setCurrent((c) => (c + 1) % slides.length), Number(d.interval) || 4e3);
+    return () => clearInterval(id);
+  }, [d.autoplay, d.interval, slides.length]);
+  if (!slides.length) return null;
+  const prev = () => setCurrent((c) => (c - 1 + slides.length) % slides.length);
+  const next = () => setCurrent((c) => (c + 1) % slides.length);
+  const slide = slides[current];
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden rounded-xl border border-border bg-muted", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative aspect-video", children: [
+      slide.image ? /* @__PURE__ */ jsx("img", { src: slide.image, alt: slide.title || "", className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-muted-foreground text-sm", children: "No image" }),
+      (slide.title || slide.subtitle) && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-end pb-8 bg-gradient-to-t from-black/60 to-transparent text-white text-center px-6", children: [
+        slide.title && /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-balance", children: slide.title }),
+        slide.subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm opacity-80 mt-1", children: slide.subtitle })
+      ] })
+    ] }),
+    d.showArrows !== false && slides.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("button", { onClick: prev, className: "absolute left-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-black/40 text-white flex items-center justify-center hover:bg-black/60 transition-colors", "aria-label": "Previous", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) }) }),
+      /* @__PURE__ */ jsx("button", { onClick: next, className: "absolute right-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-black/40 text-white flex items-center justify-center hover:bg-black/60 transition-colors", "aria-label": "Next", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) }) })
+    ] }),
+    d.showDots !== false && slides.length > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5", children: slides.map((_, i) => /* @__PURE__ */ jsx("button", { onClick: () => setCurrent(i), className: `w-2 h-2 rounded-full transition-colors ${i === current ? "bg-white" : "bg-white/40"}`, "aria-label": `Slide ${i + 1}` }, i)) })
+  ] });
+}
 function CardGridBlock({ block }) {
   const d = getData(block);
   const cards = Array.isArray(d.cards) ? d.cards : [];
@@ -606,6 +719,13 @@ var BUILT_IN = {
   "icon-feature": (b) => /* @__PURE__ */ jsx(IconFeatureBlock, { block: b }),
   "feature-grid": (b) => /* @__PURE__ */ jsx(FeatureGridBlock, { block: b }),
   "two-column": (b) => /* @__PURE__ */ jsx(TwoColumnBlock, { block: b }),
+  "split-hero": (b) => /* @__PURE__ */ jsx(SplitHeroBlock, { block: b }),
+  navbar: (b) => /* @__PURE__ */ jsx(NavbarBlock, { block: b }),
+  accordion: (b) => /* @__PURE__ */ jsx(AccordionBlock, { block: b }),
+  tabs: (b) => /* @__PURE__ */ jsx(TabsBlock, { block: b }),
+  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 })
 };
 function CMSBlocks({ blocks, pageType, className = "", custom = {} }) {