@booga/vblocks 0.3.0 → 0.3.2

package/dist/index.js

@@ -204,7 +204,7 @@ var FaqGridContentSchema = z.object({
 function FaqGrid({ content, theme }) {
   FaqGridContentSchema.parse(content);
   const { heading, items } = 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-5xl mx-auto gap-10"), children: [
+  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: 2, gap: 4, children: items.map((item, i) => /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { as: "h3", children: item.question }) }),
@@ -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)) })
@@ -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,7 +471,7 @@ 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 }),
+      category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: category }),
       /* @__PURE__ */ jsx(DBox, { as: "h1", className: cn("text-3xl font-bold tracking-tight leading-snug"), children: title }),
       /* @__PURE__ */ jsx(Separator, {}),
       /* @__PURE__ */ jsxs(DInline, { gap: 2, color: "muted", className: cn("text-sm"), children: [
@@ -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 }),
@@ -590,7 +590,7 @@ var TeamGridContentSchema = z.object({
 function TeamGrid({ content, theme }) {
   TeamGridContentSchema.parse(content);
   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-5xl mx-auto gap-10"), children: [
+  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__ */ jsxs(Avatar, { className: cn("w-16 h-16"), children: [
@@ -625,7 +625,7 @@ var TestimonialSplitContentSchema = z.object({
 function TestimonialSplit({ content, theme }) {
   TestimonialSplitContentSchema.parse(content);
   const { quote, author, role, company, avatar } = content;
-  return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": "Testimonial", style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DGrid, { columns: 2, px: 6, gap: 16, align: "center", className: cn("max-w-5xl mx-auto py-20"), children: [
+  return /* @__PURE__ */ jsx(DBox, { as: "section", "aria-label": "Testimonial", style: themeStyle(theme), children: /* @__PURE__ */ jsxs(DGrid, { columns: 2, px: 6, gap: 16, align: "center", className: cn("max-w-6xl mx-auto py-20"), children: [
     /* @__PURE__ */ jsx(
       DBox,
       {
@@ -675,7 +675,7 @@ var TestimonialGridContentSchema = z.object({
 function TestimonialGrid({ content, theme }) {
   TestimonialGridContentSchema.parse(content);
   const { heading, items } = 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-5xl mx-auto gap-10"), children: [
+  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: items.map((item, i) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(DStack, { gap: 4, pt: 4, children: [
       /* @__PURE__ */ jsx(DBox, { as: "blockquote", className: cn("text-sm leading-relaxed"), children: /* @__PURE__ */ jsx(DBox, { as: "p", children: item.quote }) }),
@@ -734,7 +734,7 @@ function BlogSplit({ content, theme }) {
           }
         ),
         /* @__PURE__ */ jsxs(DStack, { gap: 2, children: [
-          featured.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: featured.category }),
+          featured.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: featured.category }),
           /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("text-xl 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,7 +751,7 @@ function BlogSplit({ content, theme }) {
           }
         ),
         /* @__PURE__ */ jsxs(DStack, { gap: 1, children: [
-          post.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: post.category }),
+          post.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: post.category }),
           /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("font-semibold leading-snug"), children: post.title }),
           /* @__PURE__ */ jsx(DBox, { as: "time", dateTime: post.date, color: "muted", className: cn("text-xs"), children: post.date })
         ] })
@@ -796,7 +796,7 @@ 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 }),
+        post.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("self-start"), children: post.category }),
         /* @__PURE__ */ jsx(DBox, { as: "h3", className: cn("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 +810,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" } }
   ]
 };
@@ -874,7 +874,7 @@ var BusinessGridContentSchema = z.object({
 function BusinessGrid({ content, theme }) {
   BusinessGridContentSchema.parse(content);
   const { heading, services } = 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-5xl mx-auto gap-10"), children: [
+  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: 2, gap: 6, children: services.map((service, i) => /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(DStack, { gap: 2, children: [
@@ -947,7 +947,7 @@ var FeaturesGridContentSchema = z.object({
 function FeaturesGrid({ content, theme }) {
   FeaturesGridContentSchema.parse(content);
   const { heading, features } = 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-5xl mx-auto gap-10"), children: [
+  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: features.map((feature, i) => /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(DStack, { gap: 2, children: [