@booga/vblocks 0.3.1 → 0.3.3

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Box, Stack, Grid, Inline, cn, Button, Card, CardHeader, CardTitle, CardContent, Separator, Badge, Avatar, AvatarImage, AvatarFallback } from '@booga/vui';
 import { dsl } from '@booga/vdsl';
 import { z } from 'zod';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/hero/HeroSplit/index.tsx
 var DBox = dsl(Box);
@@ -41,7 +41,7 @@ var HeroSplitContentSchema = z.object({
 function HeroSplit({ content, theme }) {
   HeroSplitContentSchema.parse(content);
   const { eyebrow, heading, description, primaryCta, secondaryCta, image } = content;
-  return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DGrid, { columns: 2, px: 6, py: 16, gap: 12, align: "center", className: cn("max-w-6xl mx-auto"), children: [
+  return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DGrid, { columns: 2, px: 6, py: 24, gap: 12, align: "center", className: cn("max-w-6xl mx-auto"), children: [
     /* @__PURE__ */ jsxs(DStack, { gap: 6, children: [
       eyebrow && /* @__PURE__ */ jsx(DBox, { as: "p", color: "accent", className: cn("text-sm font-semibold uppercase tracking-widest"), children: eyebrow }),
       /* @__PURE__ */ jsx(DBox, { as: "h1", className: cn("text-5xl font-bold tracking-tight leading-tight"), children: heading }),
@@ -84,7 +84,7 @@ function HeroCentered({ content, theme }) {
   return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DStack, { px: 6, py: 24, gap: 8, align: "center", className: cn("max-w-3xl mx-auto text-center"), children: [
     eyebrow && /* @__PURE__ */ jsx(DBox, { as: "p", color: "accent", className: cn("text-sm font-semibold uppercase tracking-widest"), children: eyebrow }),
     /* @__PURE__ */ jsx(DBox, { as: "h1", className: cn("text-5xl font-bold tracking-tight leading-tight"), children: heading }),
-    /* @__PURE__ */ jsx(DBox, { as: "p", color: "muted", className: cn("text-xl"), children: description }),
+    /* @__PURE__ */ jsx(DBox, { as: "p", color: "muted", className: cn("text-lg"), children: description }),
     /* @__PURE__ */ jsxs(DInline, { wrap: true, gap: 3, justify: "center", children: [
       /* @__PURE__ */ jsx(Button, { as: "a", href: primaryCta.href, children: primaryCta.label }),
       secondaryCta && /* @__PURE__ */ jsx(Button, { as: "a", href: secondaryCta.href, variant: "outline", children: secondaryCta.label })
@@ -110,7 +110,7 @@ function CtaSplit({ content, theme }) {
   const { heading, description, primaryCta, image } = content;
   return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DGrid, { columns: 2, px: 6, py: 16, gap: 12, align: "center", className: cn("max-w-6xl mx-auto"), children: [
     /* @__PURE__ */ jsxs(DStack, { gap: 6, children: [
-      /* @__PURE__ */ jsx(DBox, { as: "h2", className: cn("text-4xl font-bold tracking-tight"), children: heading }),
+      /* @__PURE__ */ jsx(DBox, { as: "h2", className: cn("text-3xl font-bold tracking-tight"), children: heading }),
       /* @__PURE__ */ jsx(DBox, { as: "p", color: "muted", className: cn("text-lg"), children: description }),
       /* @__PURE__ */ jsx(Button, { as: "a", href: primaryCta.href, size: "lg", children: primaryCta.label })
     ] }),
@@ -143,7 +143,7 @@ function CtaCentered({ content, theme }) {
   CtaCenteredContentSchema.parse(content);
   const { heading, description, primaryCta, secondaryCta } = content;
   return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DStack, { px: 6, gap: 8, align: "center", className: cn("max-w-2xl mx-auto text-center py-20"), children: [
-    /* @__PURE__ */ jsx(DBox, { as: "h2", className: cn("text-4xl font-bold tracking-tight"), children: heading }),
+    /* @__PURE__ */ jsx(DBox, { as: "h2", className: cn("text-3xl font-bold tracking-tight"), children: heading }),
     /* @__PURE__ */ jsx(DBox, { as: "p", color: "muted", className: cn("text-lg"), children: description }),
     /* @__PURE__ */ jsxs(DInline, { wrap: true, gap: 3, justify: "center", children: [
       /* @__PURE__ */ jsx(Button, { as: "a", href: primaryCta.href, size: "lg", children: primaryCta.label }),
@@ -352,7 +352,7 @@ var GalleryGridContentSchema = z.object({
 function GalleryGrid({ content, theme }) {
   GalleryGridContentSchema.parse(content);
   const { items } = content;
-  return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": "Gallery", style: themeStyle(theme), children: /* @__PURE__ */ jsx(DGrid, { columns: 3, px: 6, py: 12, gap: 4, className: cn("max-w-6xl mx-auto"), children: items.map((item, i) => /* @__PURE__ */ jsxs(DBox, { as: "figure", m: 0, children: [
+  return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": "Gallery", style: themeStyle(theme), children: /* @__PURE__ */ jsx(DGrid, { columns: 3, px: 6, py: 16, gap: 4, className: cn("max-w-6xl mx-auto"), children: items.map((item, i) => /* @__PURE__ */ jsxs(DBox, { as: "figure", m: 0, children: [
     /* @__PURE__ */ jsx(
       DBox,
       {
@@ -404,7 +404,7 @@ function PortfolioSplit({ content, theme }) {
         }
       ),
       /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(DStack, { gap: 2, pt: 2, children: [
-        /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: item.category }),
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: item.category }),
         /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("font-semibold text-lg"), children: item.title })
       ] }) })
     ] }, i)) })
@@ -432,7 +432,7 @@ var PortfolioGridContentSchema = z.object({
 function PortfolioGrid({ content, theme }) {
   PortfolioGridContentSchema.parse(content);
   const { items } = content;
-  return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": "Portfolio", style: themeStyle(theme), children: /* @__PURE__ */ jsx(DGrid, { columns: 2, px: 6, py: 12, gap: 6, className: cn("max-w-6xl mx-auto"), children: items.map((item, i) => /* @__PURE__ */ jsxs(Card, { children: [
+  return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": "Portfolio", style: themeStyle(theme), children: /* @__PURE__ */ jsx(DGrid, { columns: 2, px: 6, py: 16, gap: 6, className: cn("max-w-6xl mx-auto"), children: items.map((item, i) => /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsx(
       DBox,
       {
@@ -443,7 +443,7 @@ function PortfolioGrid({ content, theme }) {
       }
     ),
     /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(DStack, { gap: 2, pt: 2, children: [
-      /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: item.category }),
+      /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: item.category }),
       /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("font-semibold text-lg"), children: item.title })
     ] }) })
   ] }, i)) }) });
@@ -471,8 +471,8 @@ function PostSplit({ content, theme }) {
   const { title, author, date, category, body, image } = content;
   return /* @__PURE__ */ jsx(DBox, { as: "article", style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DGrid, { columns: 2, px: 6, py: 16, gap: 16, align: "start", className: cn("max-w-6xl mx-auto"), children: [
     /* @__PURE__ */ jsxs(DStack, { gap: 6, className: cn("sticky top-16"), children: [
-      category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: category }),
-      /* @__PURE__ */ jsx(DBox, { as: "h1", className: cn("text-3xl font-bold tracking-tight leading-snug"), children: title }),
+      category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: category }),
+      /* @__PURE__ */ jsx(DBox, { as: "h1", className: cn("text-4xl font-bold tracking-tight leading-snug"), children: title }),
       /* @__PURE__ */ jsx(Separator, {}),
       /* @__PURE__ */ jsxs(DInline, { gap: 2, color: "muted", className: cn("text-sm"), children: [
         /* @__PURE__ */ jsx(DBox, { as: "span", children: author }),
@@ -515,7 +515,7 @@ function PostCentered({ content, theme }) {
   PostCenteredContentSchema.parse(content);
   const { title, author, date, category, body } = content;
   return /* @__PURE__ */ jsx(DBox, { as: "article", style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DStack, { px: 6, py: 16, gap: 6, className: cn("max-w-2xl mx-auto"), children: [
-    category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: category }),
+    category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: category }),
     /* @__PURE__ */ jsx(DBox, { as: "h1", className: cn("text-4xl font-bold tracking-tight leading-snug"), children: title }),
     /* @__PURE__ */ jsxs(DInline, { gap: 2, color: "muted", className: cn("text-sm"), children: [
       /* @__PURE__ */ jsx(DBox, { as: "span", children: author }),
@@ -592,7 +592,7 @@ function TeamGrid({ content, theme }) {
   const { heading, members } = content;
   return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": heading, style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DStack, { px: 6, py: 16, className: cn("max-w-6xl mx-auto gap-10"), children: [
     /* @__PURE__ */ jsx(DBox, { as: "h2", className: cn("text-3xl font-bold tracking-tight text-center"), children: heading }),
-    /* @__PURE__ */ jsx(DGrid, { columns: 3, gap: 6, children: members.map((member, i) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(DStack, { gap: 3, align: "center", pt: 4, className: cn("text-center"), children: [
+    /* @__PURE__ */ jsx(DGrid, { columns: 3, gap: 6, children: members.map((member, i) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(DStack, { gap: 4, align: "center", py: 6, className: cn("text-center"), children: [
       /* @__PURE__ */ jsxs(Avatar, { className: cn("w-16 h-16"), children: [
         /* @__PURE__ */ jsx(AvatarImage, { src: member.avatar.src, alt: member.avatar.alt }),
         /* @__PURE__ */ jsx(AvatarFallback, { children: member.name.slice(0, 2).toUpperCase() })
@@ -640,14 +640,9 @@ function TestimonialSplit({ content, theme }) {
         /* @__PURE__ */ jsx(AvatarImage, { src: avatar.src, alt: avatar.alt }),
         /* @__PURE__ */ jsx(AvatarFallback, { children: author.slice(0, 2).toUpperCase() })
       ] }),
-      /* @__PURE__ */ jsxs(DInline, { gap: 1, color: "muted", className: cn("text-sm"), children: [
+      /* @__PURE__ */ jsxs(DInline, { gap: 0, color: "muted", className: cn("text-sm"), children: [
         /* @__PURE__ */ jsx(DBox, { as: "cite", color: "fg", className: cn("font-semibold not-italic"), children: author }),
-        /* @__PURE__ */ jsx(DBox, { as: "span", children: "," }),
-        /* @__PURE__ */ jsx(DBox, { as: "span", children: role }),
-        company && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DBox, { as: "span", children: "at" }),
-          /* @__PURE__ */ jsx(DBox, { as: "span", children: company })
-        ] })
+        /* @__PURE__ */ jsx(DBox, { as: "span", children: `, ${company ? `${role} at ${company}` : role}` })
       ] })
     ] })
   ] }) });
@@ -734,8 +729,8 @@ function BlogSplit({ content, theme }) {
           }
         ),
         /* @__PURE__ */ jsxs(DStack, { gap: 2, children: [
-          featured.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: featured.category }),
-          /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("text-xl font-semibold"), children: featured.title }),
+          featured.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: featured.category }),
+          /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("text-lg font-semibold"), children: featured.title }),
           /* @__PURE__ */ jsx(DBox, { as: "p", color: "muted", children: featured.excerpt }),
           /* @__PURE__ */ jsx(DBox, { as: "time", dateTime: featured.date, color: "muted", className: cn("text-xs"), children: featured.date })
         ] })
@@ -751,8 +746,8 @@ function BlogSplit({ content, theme }) {
           }
         ),
         /* @__PURE__ */ jsxs(DStack, { gap: 1, children: [
-          post.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: post.category }),
-          /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("font-semibold leading-snug"), children: post.title }),
+          post.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: post.category }),
+          /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("text-lg font-semibold leading-snug"), children: post.title }),
           /* @__PURE__ */ jsx(DBox, { as: "time", dateTime: post.date, color: "muted", className: cn("text-xs"), children: post.date })
         ] })
       ] }) }) }, i)) })
@@ -765,7 +760,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" } }
   ]
 };
@@ -796,8 +791,8 @@ function BlogGrid({ content, theme }) {
         }
       ),
       /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(DStack, { gap: 2, pt: 2, children: [
-        post.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: post.category }),
-        /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("font-semibold leading-snug"), children: post.title }),
+        post.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: post.category }),
+        /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("text-lg font-semibold leading-snug"), children: post.title }),
         /* @__PURE__ */ jsx(DBox, { as: "p", color: "muted", className: cn("text-sm"), children: post.excerpt }),
         /* @__PURE__ */ jsx(DBox, { as: "time", dateTime: post.date, color: "muted", className: cn("text-xs"), children: post.date })
       ] }) })
@@ -810,7 +805,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" } }
   ]
 };
@@ -832,7 +827,7 @@ function BusinessSplit({ content, theme }) {
   return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": name, style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DGrid, { columns: 2, px: 6, py: 16, gap: 16, align: "center", className: cn("max-w-6xl mx-auto"), children: [
     /* @__PURE__ */ jsxs(DStack, { gap: 6, children: [
       /* @__PURE__ */ jsxs(DStack, { gap: 2, children: [
-        /* @__PURE__ */ jsx(DBox, { as: "h2", className: cn("text-4xl font-bold tracking-tight"), children: name }),
+        /* @__PURE__ */ jsx(DBox, { as: "h2", className: cn("text-3xl font-bold tracking-tight"), children: name }),
         /* @__PURE__ */ jsx(DBox, { as: "p", color: "accent", className: cn("text-xl"), children: tagline })
       ] }),
       /* @__PURE__ */ jsx(DBox, { as: "p", color: "muted", className: cn("text-lg leading-relaxed"), children: description }),
@@ -917,7 +912,7 @@ function FeaturesSplit({ content, theme }) {
     /* @__PURE__ */ jsx(DBox, { as: "ul", m: 0, p: 0, gap: 8, display: "flex", className: cn("list-none flex-col"), children: features.map((feature, i) => /* @__PURE__ */ jsx(DBox, { as: "li", children: /* @__PURE__ */ jsxs(DInline, { gap: 4, align: "start", children: [
       feature.icon && /* @__PURE__ */ jsx(DBox, { as: "span", className: cn("text-xl flex-shrink-0 mt-0.5"), "aria-hidden": "true", children: feature.icon }),
       /* @__PURE__ */ jsxs(DStack, { gap: 1, children: [
-        /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("font-semibold"), children: feature.title }),
+        /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("text-lg font-semibold"), children: feature.title }),
         /* @__PURE__ */ jsx(DBox, { as: "p", color: "muted", className: cn("text-sm"), children: feature.description })
       ] })
     ] }) }, i)) })