@booga/vblocks 0.3.1 → 0.3.3

package/dist/index.cjs

@@ -43,7 +43,7 @@ var HeroSplitContentSchema = zod.z.object({
 function HeroSplit({ content, theme }) {
   HeroSplitContentSchema.parse(content);
   const { eyebrow, heading, description, primaryCta, secondaryCta, image } = content;
-  return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DGrid, { columns: 2, px: 6, py: 16, gap: 12, align: "center", className: vui.cn("max-w-6xl mx-auto"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DGrid, { columns: 2, px: 6, py: 24, gap: 12, align: "center", className: vui.cn("max-w-6xl mx-auto"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 6, children: [
       eyebrow && /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "accent", className: vui.cn("text-sm font-semibold uppercase tracking-widest"), children: eyebrow }),
       /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h1", className: vui.cn("text-5xl font-bold tracking-tight leading-tight"), children: heading }),
@@ -86,7 +86,7 @@ function HeroCentered({ content, theme }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { px: 6, py: 24, gap: 8, align: "center", className: vui.cn("max-w-3xl mx-auto text-center"), children: [
     eyebrow && /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "accent", className: vui.cn("text-sm font-semibold uppercase tracking-widest"), children: eyebrow }),
     /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h1", className: vui.cn("text-5xl font-bold tracking-tight leading-tight"), children: heading }),
-    /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "muted", className: vui.cn("text-xl"), children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "muted", className: vui.cn("text-lg"), children: description }),
     /* @__PURE__ */ jsxRuntime.jsxs(DInline, { wrap: true, gap: 3, justify: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(vui.Button, { as: "a", href: primaryCta.href, children: primaryCta.label }),
       secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(vui.Button, { as: "a", href: secondaryCta.href, variant: "outline", children: secondaryCta.label })
@@ -112,7 +112,7 @@ function CtaSplit({ content, theme }) {
   const { heading, description, primaryCta, image } = content;
   return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DGrid, { columns: 2, px: 6, py: 16, gap: 12, align: "center", className: vui.cn("max-w-6xl mx-auto"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h2", className: vui.cn("text-4xl font-bold tracking-tight"), children: heading }),
+      /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h2", className: vui.cn("text-3xl font-bold tracking-tight"), children: heading }),
       /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "muted", className: vui.cn("text-lg"), children: description }),
       /* @__PURE__ */ jsxRuntime.jsx(vui.Button, { as: "a", href: primaryCta.href, size: "lg", children: primaryCta.label })
     ] }),
@@ -145,7 +145,7 @@ function CtaCentered({ content, theme }) {
   CtaCenteredContentSchema.parse(content);
   const { heading, description, primaryCta, secondaryCta } = content;
   return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { px: 6, gap: 8, align: "center", className: vui.cn("max-w-2xl mx-auto text-center py-20"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h2", className: vui.cn("text-4xl font-bold tracking-tight"), children: heading }),
+    /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h2", className: vui.cn("text-3xl font-bold tracking-tight"), children: heading }),
     /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "muted", className: vui.cn("text-lg"), children: description }),
     /* @__PURE__ */ jsxRuntime.jsxs(DInline, { wrap: true, gap: 3, justify: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(vui.Button, { as: "a", href: primaryCta.href, size: "lg", children: primaryCta.label }),
@@ -354,7 +354,7 @@ var GalleryGridContentSchema = zod.z.object({
 function GalleryGrid({ content, theme }) {
   GalleryGridContentSchema.parse(content);
   const { items } = content;
-  return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": "Gallery", style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsx(DGrid, { columns: 3, px: 6, py: 12, gap: 4, className: vui.cn("max-w-6xl mx-auto"), children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(DBox, { as: "figure", m: 0, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": "Gallery", style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsx(DGrid, { columns: 3, px: 6, py: 16, gap: 4, className: vui.cn("max-w-6xl mx-auto"), children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(DBox, { as: "figure", m: 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DBox,
       {
@@ -406,7 +406,7 @@ function PortfolioSplit({ content, theme }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(vui.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 2, pt: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", children: item.category }),
+        /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", className: vui.cn("self-start"), children: item.category }),
         /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("font-semibold text-lg"), children: item.title })
       ] }) })
     ] }, i)) })
@@ -434,7 +434,7 @@ var PortfolioGridContentSchema = zod.z.object({
 function PortfolioGrid({ content, theme }) {
   PortfolioGridContentSchema.parse(content);
   const { items } = content;
-  return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": "Portfolio", style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsx(DGrid, { columns: 2, px: 6, py: 12, gap: 6, className: vui.cn("max-w-6xl mx-auto"), children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(vui.Card, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": "Portfolio", style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsx(DGrid, { columns: 2, px: 6, py: 16, gap: 6, className: vui.cn("max-w-6xl mx-auto"), children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(vui.Card, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DBox,
       {
@@ -445,7 +445,7 @@ function PortfolioGrid({ content, theme }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(vui.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 2, pt: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", children: item.category }),
+      /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", className: vui.cn("self-start"), children: item.category }),
       /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("font-semibold text-lg"), children: item.title })
     ] }) })
   ] }, i)) }) });
@@ -473,8 +473,8 @@ function PostSplit({ content, theme }) {
   const { title, author, date, category, body, image } = content;
   return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "article", style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DGrid, { columns: 2, px: 6, py: 16, gap: 16, align: "start", className: vui.cn("max-w-6xl mx-auto"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 6, className: vui.cn("sticky top-16"), children: [
-      category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", children: category }),
-      /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h1", className: vui.cn("text-3xl font-bold tracking-tight leading-snug"), children: title }),
+      category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", className: vui.cn("self-start"), children: category }),
+      /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h1", className: vui.cn("text-4xl font-bold tracking-tight leading-snug"), children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(vui.Separator, {}),
       /* @__PURE__ */ jsxRuntime.jsxs(DInline, { gap: 2, color: "muted", className: vui.cn("text-sm"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "span", children: author }),
@@ -517,7 +517,7 @@ function PostCentered({ content, theme }) {
   PostCenteredContentSchema.parse(content);
   const { title, author, date, category, body } = content;
   return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "article", style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { px: 6, py: 16, gap: 6, className: vui.cn("max-w-2xl mx-auto"), children: [
-    category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", children: category }),
+    category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", className: vui.cn("self-start"), children: category }),
     /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h1", className: vui.cn("text-4xl font-bold tracking-tight leading-snug"), children: title }),
     /* @__PURE__ */ jsxRuntime.jsxs(DInline, { gap: 2, color: "muted", className: vui.cn("text-sm"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "span", children: author }),
@@ -594,7 +594,7 @@ function TeamGrid({ content, theme }) {
   const { heading, members } = content;
   return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { px: 6, py: 16, className: vui.cn("max-w-6xl mx-auto gap-10"), children: [
     /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h2", className: vui.cn("text-3xl font-bold tracking-tight text-center"), children: heading }),
-    /* @__PURE__ */ jsxRuntime.jsx(DGrid, { columns: 3, gap: 6, children: members.map((member, i) => /* @__PURE__ */ jsxRuntime.jsx(vui.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(vui.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 3, align: "center", pt: 4, className: vui.cn("text-center"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DGrid, { columns: 3, gap: 6, children: members.map((member, i) => /* @__PURE__ */ jsxRuntime.jsx(vui.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(vui.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 4, align: "center", py: 6, className: vui.cn("text-center"), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(vui.Avatar, { className: vui.cn("w-16 h-16"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(vui.AvatarImage, { src: member.avatar.src, alt: member.avatar.alt }),
         /* @__PURE__ */ jsxRuntime.jsx(vui.AvatarFallback, { children: member.name.slice(0, 2).toUpperCase() })
@@ -642,14 +642,9 @@ function TestimonialSplit({ content, theme }) {
         /* @__PURE__ */ jsxRuntime.jsx(vui.AvatarImage, { src: avatar.src, alt: avatar.alt }),
         /* @__PURE__ */ jsxRuntime.jsx(vui.AvatarFallback, { children: author.slice(0, 2).toUpperCase() })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(DInline, { gap: 1, color: "muted", className: vui.cn("text-sm"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DInline, { gap: 0, color: "muted", className: vui.cn("text-sm"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "cite", color: "fg", className: vui.cn("font-semibold not-italic"), children: author }),
-        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "span", children: "," }),
-        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "span", children: role }),
-        company && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "span", children: "at" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "span", children: company })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "span", children: `, ${company ? `${role} at ${company}` : role}` })
       ] })
     ] })
   ] }) });
@@ -736,8 +731,8 @@ function BlogSplit({ content, theme }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 2, children: [
-          featured.category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", children: featured.category }),
-          /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("text-xl font-semibold"), children: featured.title }),
+          featured.category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", className: vui.cn("self-start"), children: featured.category }),
+          /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("text-lg font-semibold"), children: featured.title }),
           /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "muted", children: featured.excerpt }),
           /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "time", dateTime: featured.date, color: "muted", className: vui.cn("text-xs"), children: featured.date })
         ] })
@@ -753,8 +748,8 @@ function BlogSplit({ content, theme }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 1, children: [
-          post.category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", children: post.category }),
-          /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("font-semibold leading-snug"), children: post.title }),
+          post.category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", className: vui.cn("self-start"), children: post.category }),
+          /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("text-lg font-semibold leading-snug"), children: post.title }),
           /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "time", dateTime: post.date, color: "muted", className: vui.cn("text-xs"), children: post.date })
         ] })
       ] }) }) }, i)) })
@@ -767,7 +762,7 @@ var BlogSplitDefaultContent = {
   heading: "Latest posts",
   posts: [
     { title: "Designing for composability", excerpt: "How modular thinking unlocks maintainable systems at scale.", date: "2026-05-01", category: "Design", image: { src: "https://placehold.co/600x400", alt: "Design systems post" } },
-    { title: "Type-safe content at runtime", excerpt: "Zod schemas as the single source of truth for block content.", date: "2026-04-18", image: { src: "https://placehold.co/400x280", alt: "Type safety post" } },
+    { title: "Type-safe content at runtime", excerpt: "Zod schemas as the single source of truth for block content.", date: "2026-04-18", category: "Engineering", image: { src: "https://placehold.co/400x280", alt: "Type safety post" } },
     { title: "Tree-shaking section blocks", excerpt: "Per-category entry points and how they keep bundles lean.", date: "2026-04-05", category: "Engineering", image: { src: "https://placehold.co/400x280", alt: "Tree-shaking post" } }
   ]
 };
@@ -798,8 +793,8 @@ function BlogGrid({ content, theme }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(vui.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 2, pt: 2, children: [
-        post.category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", children: post.category }),
-        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("font-semibold leading-snug"), children: post.title }),
+        post.category && /* @__PURE__ */ jsxRuntime.jsx(vui.Badge, { variant: "secondary", className: vui.cn("self-start"), children: post.category }),
+        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("text-lg font-semibold leading-snug"), children: post.title }),
         /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "muted", className: vui.cn("text-sm"), children: post.excerpt }),
         /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "time", dateTime: post.date, color: "muted", className: vui.cn("text-xs"), children: post.date })
       ] }) })
@@ -812,7 +807,7 @@ var BlogGridDefaultContent = {
   heading: "From the blog",
   posts: [
     { title: "Designing for composability", excerpt: "Modular thinking at scale.", date: "2026-05-01", category: "Design", image: { src: "https://placehold.co/480x320", alt: "Design post" } },
-    { title: "Type-safe content at runtime", excerpt: "Zod as single source of truth.", date: "2026-04-18", image: { src: "https://placehold.co/480x320", alt: "Types post" } },
+    { title: "Type-safe content at runtime", excerpt: "Zod as single source of truth.", date: "2026-04-18", category: "Engineering", image: { src: "https://placehold.co/480x320", alt: "Types post" } },
     { title: "Tree-shaking section blocks", excerpt: "Lean bundles, per-category entry points.", date: "2026-04-05", category: "Engineering", image: { src: "https://placehold.co/480x320", alt: "Bundling post" } }
   ]
 };
@@ -834,7 +829,7 @@ function BusinessSplit({ content, theme }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "section", "aria-label": name, style: themeStyle(theme), children: /* @__PURE__ */ jsxRuntime.jsxs(DGrid, { columns: 2, px: 6, py: 16, gap: 16, align: "center", className: vui.cn("max-w-6xl mx-auto"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 6, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h2", className: vui.cn("text-4xl font-bold tracking-tight"), children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h2", className: vui.cn("text-3xl font-bold tracking-tight"), children: name }),
         /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "accent", className: vui.cn("text-xl"), children: tagline })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "muted", className: vui.cn("text-lg leading-relaxed"), children: description }),
@@ -919,7 +914,7 @@ function FeaturesSplit({ content, theme }) {
     /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "ul", m: 0, p: 0, gap: 8, display: "flex", className: vui.cn("list-none flex-col"), children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsxs(DInline, { gap: 4, align: "start", children: [
       feature.icon && /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "span", className: vui.cn("text-xl flex-shrink-0 mt-0.5"), "aria-hidden": "true", children: feature.icon }),
       /* @__PURE__ */ jsxRuntime.jsxs(DStack, { gap: 1, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("font-semibold"), children: feature.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "h3", className: vui.cn("text-lg font-semibold"), children: feature.title }),
         /* @__PURE__ */ jsxRuntime.jsx(DBox, { as: "p", color: "muted", className: vui.cn("text-sm"), children: feature.description })
       ] })
     ] }) }, i)) })