@vadimcomanescu/nadicode-design-system 2.0.9 → 4.0.1

package/dist/chunk-7IADIXDV.js

@@ -0,0 +1,168 @@
+import { LogoIcon } from './chunk-GHIBG7OM.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Field, FieldLabel } from './chunk-RX5EUODB.js';
+import { siteConfig } from './chunk-A7NUWD76.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { GoogleIcon, MicrosoftIcon } from './chunk-DJTF3XFB.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import Link from 'next/link';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SignUpBlock({
+  title = `Create a ${siteConfig.name} Account`,
+  description = "Welcome! Create an account to get started",
+  showSocial = true,
+  signInHref = "#",
+  onSubmit,
+  className
+}) {
+  return /* @__PURE__ */ jsx("section", { className: className ?? "flex min-h-dvh bg-background px-4 py-16 md:py-32 dark:bg-transparent", children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      action: "",
+      onSubmit,
+      className: "bg-surface m-auto h-fit w-full max-w-sm rounded-[calc(var(--radius)+.125rem)] border p-0.5 shadow-md dark:[--color-muted:var(--color-surface)]",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "p-8 pb-6", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: "#",
+                "aria-label": "go home",
+                children: /* @__PURE__ */ jsx(LogoIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(Heading, { level: 1, size: "title", className: "mb-1.5 mt-4", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: description })
+          ] }),
+          !!showSocial && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  className: "h-11",
+                  children: [
+                    /* @__PURE__ */ jsx(GoogleIcon, {}),
+                    /* @__PURE__ */ jsx("span", { children: "Google" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  className: "h-11",
+                  children: [
+                    /* @__PURE__ */ jsx(MicrosoftIcon, {}),
+                    /* @__PURE__ */ jsx("span", { children: "Microsoft" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("hr", { className: "my-4 border-dashed" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxs(Field, { children: [
+                /* @__PURE__ */ jsx(
+                  FieldLabel,
+                  {
+                    htmlFor: "firstname",
+                    className: "block text-sm",
+                    children: "Firstname"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    required: true,
+                    name: "firstname",
+                    id: "firstname"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Field, { children: [
+                /* @__PURE__ */ jsx(
+                  FieldLabel,
+                  {
+                    htmlFor: "lastname",
+                    className: "block text-sm",
+                    children: "Lastname"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    required: true,
+                    name: "lastname",
+                    id: "lastname"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Field, { children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "email",
+                  className: "block text-sm",
+                  children: "Username"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "email",
+                  required: true,
+                  name: "email",
+                  id: "email"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Field, { children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "pwd",
+                  className: "text-sm",
+                  children: "Password"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "password",
+                  required: true,
+                  name: "pwd",
+                  id: "pwd",
+                  className: "input sz-md variant-mixed"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Button, { className: "w-full", children: "Continue" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-(--radius) border p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-accent-foreground text-center text-sm", children: [
+          "Have an account ?",
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              asChild: true,
+              variant: "link",
+              className: "px-2",
+              children: /* @__PURE__ */ jsx(Link, { href: signInHref, children: "Sign In" })
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+}
+
+export { SignUpBlock };

package/dist/chunk-7NS3VFD7.js

@@ -0,0 +1,86 @@
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Heading } from './chunk-WI547C47.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { Card, CardHeader, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultAgents = [
+  {
+    name: "Atlas",
+    role: "Data Analyst",
+    description: "Transforms raw data into actionable insights with automated reporting.",
+    avatar: /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-accent/10 text-2xl font-bold text-accent", children: "A" }),
+    capabilities: ["Analytics", "Reporting", "Forecasting"],
+    status: "active"
+  },
+  {
+    name: "Nova",
+    role: "Customer Support",
+    description: "Handles customer inquiries with empathy and precision, 24/7.",
+    avatar: /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-accent/10 text-2xl font-bold text-accent", children: "N" }),
+    capabilities: ["Chat", "Email", "Tickets"],
+    status: "active"
+  },
+  {
+    name: "Orion",
+    role: "Content Creator",
+    description: "Generates and optimizes content across all your marketing channels.",
+    avatar: /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-accent/10 text-2xl font-bold text-accent", children: "O" }),
+    capabilities: ["Writing", "SEO", "Social"],
+    status: "coming-soon"
+  }
+];
+var statusVariant = {
+  active: "accent",
+  idle: "secondary",
+  "coming-soon": "outline"
+};
+var statusLabel = {
+  active: "Active",
+  idle: "Idle",
+  "coming-soon": "Coming Soon"
+};
+var columnClasses = {
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+function AgentProfileGridBlock({
+  title = "Meet your AI team",
+  description = "Purpose-built agents that work together to accelerate your workflow.",
+  agents = defaultAgents,
+  columns = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx("section", { className: className ?? "py-16 md:py-32", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-4xl lg:text-5xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-4 text-text-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      StaggerChildren,
+      {
+        staggerMs: 80,
+        className: cn("mt-8 grid gap-6 md:mt-16", columnClasses[columns]),
+        children: agents.map((agent, i) => /* @__PURE__ */ jsxs(Card, { className: "text-center", children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-16", children: agent.avatar }),
+            /* @__PURE__ */ jsx(Heading, { level: 3, size: "title", className: "mt-4 font-medium", children: agent.name }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-text-tertiary", children: agent.role })
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: agent.description }),
+            agent.capabilities && agent.capabilities.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-1.5", children: agent.capabilities.map((cap) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: cap }, cap)) }),
+            agent.status && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant[agent.status], children: statusLabel[agent.status] }) }),
+            agent.href && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "link", asChild: true, children: /* @__PURE__ */ jsx("a", { href: agent.href, children: "Learn more" }) }) })
+          ] })
+        ] }, i))
+      }
+    )
+  ] }) }) });
+}
+
+export { AgentProfileGridBlock };

package/dist/chunk-ALA6OM7K.js

@@ -0,0 +1,134 @@
+import { LOCAL_HERO_LOGOS } from './chunk-QQOWC53X.js';
+import { HeaderBlock } from './chunk-WOYBVPXK.js';
+import { FlipWords } from './chunk-6DYFX5IR.js';
+import { ProgressiveBlur } from './chunk-3UJ3HJZ3.js';
+import { Heading } from './chunk-WI547C47.js';
+import { InfiniteSlider } from './chunk-IFIDWZ5M.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { ChevronRightIcon } from './chunk-G24VV5NO.js';
+import { cn } from './chunk-QYZT24TS.js';
+import Link from 'next/link';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var defaultFlipWords = ["scalable", "accessible", "beautiful", "performant"];
+var defaultPrimaryAction = { label: "Start Building", href: "#link" };
+var defaultSecondaryAction = { label: "Request a demo", href: "#link" };
+var defaultLogos = LOCAL_HERO_LOGOS;
+function heightClass(h) {
+  const n = parseInt(h, 10);
+  if (n <= 16) return "h-4";
+  if (n <= 20) return "h-5";
+  if (n <= 24) return "h-6";
+  return "h-7";
+}
+function HeroSectionBlock({
+  headline = "Build 10x Faster with NS",
+  flipWords = defaultFlipWords,
+  primaryAction = defaultPrimaryAction,
+  secondaryAction = defaultSecondaryAction,
+  logos = defaultLogos,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(HeaderBlock, {}),
+    /* @__PURE__ */ jsxs("main", { className: className ?? "overflow-x-hidden", children: [
+      /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: "py-24 md:pb-32 lg:pb-36 lg:pt-72", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative mx-auto flex max-w-7xl flex-col px-6 lg:block lg:px-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg text-center lg:ml-0 lg:max-w-full lg:text-left", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 1, size: "display", className: "mt-8 max-w-2xl text-5xl md:text-6xl lg:mt-16 xl:text-7xl", children: headline }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-8 max-w-2xl text-balance text-lg", children: [
+            "Highly customizable components that are",
+            " ",
+            /* @__PURE__ */ jsx(
+              FlipWords,
+              {
+                words: flipWords,
+                interval: 3e3,
+                className: "text-accent"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                asChild: true,
+                size: "lg",
+                className: "h-12 rounded-full pl-6 pr-4 text-base",
+                children: /* @__PURE__ */ jsxs(Link, { href: primaryAction.href, children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-nowrap", children: primaryAction.label }),
+                  /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16, className: "ml-1.5" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                asChild: true,
+                size: "lg",
+                variant: "ghost",
+                className: "h-12 rounded-full px-6 text-base hover:bg-surface-hover",
+                children: /* @__PURE__ */ jsx(Link, { href: secondaryAction.href, children: /* @__PURE__ */ jsx("span", { className: "text-nowrap", children: secondaryAction.label }) })
+              },
+              2
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-1.5 -z-10 overflow-hidden rounded-3xl border border-border/50 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.12),transparent_34%),radial-gradient(circle_at_bottom_right,rgba(59,130,246,0.18),transparent_30%),linear-gradient(135deg,rgba(15,23,42,0.98),rgba(30,41,59,0.94))] lg:rounded-[3rem]",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-x-10 top-10 h-24 rounded-full bg-accent/20 blur-3xl" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute left-8 top-16 size-40 rounded-full border border-foreground/10 bg-foreground/5 blur-[1px]" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute right-10 bottom-10 size-48 rounded-full border border-accent/20 bg-accent/10 blur-[1px]" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:48px_48px] opacity-40" })
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx("section", { className: "bg-background pb-2", children: /* @__PURE__ */ jsx("div", { className: "group relative m-auto max-w-7xl px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center md:flex-row", children: [
+        /* @__PURE__ */ jsx("div", { className: "md:max-w-44 md:border-r md:pr-6", children: /* @__PURE__ */ jsx("p", { className: "text-end text-sm", children: "Powering the best teams" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative py-6 md:w-[calc(100%-11rem)]", children: [
+          /* @__PURE__ */ jsx(
+            InfiniteSlider,
+            {
+              speed: 40,
+              gap: 112,
+              children: logos.map((logo) => /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  className: cn("mx-auto w-fit dark:invert", heightClass(logo.height)),
+                  src: logo.src,
+                  alt: logo.alt,
+                  height: logo.height,
+                  width: "auto"
+                }
+              ) }, logo.alt))
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "bg-linear-to-r from-background absolute inset-y-0 left-0 w-20" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-linear-to-l from-background absolute inset-y-0 right-0 w-20" }),
+          /* @__PURE__ */ jsx(
+            ProgressiveBlur,
+            {
+              className: "pointer-events-none absolute left-0 top-0 h-full w-20",
+              direction: "left",
+              blurIntensity: 1
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ProgressiveBlur,
+            {
+              className: "pointer-events-none absolute right-0 top-0 h-full w-20",
+              direction: "right",
+              blurIntensity: 1
+            }
+          )
+        ] })
+      ] }) }) })
+    ] })
+  ] });
+}
+
+export { HeroSectionBlock };

package/dist/chunk-AN5TW4AL.js

@@ -0,0 +1,50 @@
+import { cn } from './chunk-QYZT24TS.js';
+import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function AudioVisualizerBlock({
+  className,
+  bars = 20,
+  isPlaying = false
+}) {
+  const barsRef = useRef(null);
+  const opacityOffsetsRef = useRef(null);
+  if (opacityOffsetsRef.current === null || opacityOffsetsRef.current.length !== bars) {
+    opacityOffsetsRef.current = Array.from({ length: bars }, (_, i) => (i * 3 + 1) % 10 * 0.05);
+  }
+  const opacityOffsets = opacityOffsetsRef.current;
+  useEffect(() => {
+    const container = barsRef.current;
+    if (!container) return;
+    let interval;
+    const applyHeights = (heights) => {
+      const children = container.children;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        child.style.height = `${Math.max(10, heights[i])}%`;
+        child.style.opacity = String(isPlaying ? 0.5 + opacityOffsets[i] : 0.3);
+      }
+    };
+    if (isPlaying) {
+      interval = setInterval(() => {
+        applyHeights(Array.from({ length: bars }, () => Math.random() * 100));
+      }, 100);
+    } else {
+      applyHeights(Array(bars).fill(10));
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying, bars, opacityOffsets]);
+  return /* @__PURE__ */ jsx("div", { ref: barsRef, className: cn("flex h-16 items-center justify-center gap-1.5", className), children: Array.from({ length: bars }, (_, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "w-1 rounded-full bg-accent transition-[height,opacity] duration-micro ease-out",
+      style: {
+        height: "10%",
+        opacity: 0.3
+      }
+    },
+    i
+  )) });
+}
+
+export { AudioVisualizerBlock };

package/dist/chunk-AWZFQQGN.js

@@ -0,0 +1,167 @@
+import { MarketingShellPageKit } from './chunk-Z233ZQZE.js';
+import { NewsletterBlock } from './chunk-K7NQ6ZAW.js';
+import { ChangelogBlock } from './chunk-VEO56RH4.js';
+import { CodeBlock } from './chunk-XTASI4IY.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { Avatar, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var EMPTY_CATEGORIES = [];
+var EMPTY_ARTICLES = [];
+var DEFAULT_CHANGELOG = {};
+var DEFAULT_NEWSLETTER = {};
+var DEFAULT_EMPTY_STATE = {
+  title: "No content available",
+  description: "Add content entries to populate this route."
+};
+function BlogContentPageKit({
+  shell,
+  state = "has-data",
+  variant = "content-index",
+  categories = EMPTY_CATEGORIES,
+  activeCategoryId = null,
+  onCategoryChange,
+  articles = EMPTY_ARTICLES,
+  detail,
+  changelog = DEFAULT_CHANGELOG,
+  pagination,
+  newsletter = DEFAULT_NEWSLETTER,
+  loadingMessage = "Loading content...",
+  emptyState = DEFAULT_EMPTY_STATE,
+  className
+}) {
+  const shouldRenderLoading = state === "loading";
+  const shouldRenderEmpty = state === "empty" || (state === "filtered" || state === "has-data" || state === "paginated") && variant === "content-index" && articles.length === 0;
+  let content = null;
+  if (shouldRenderLoading) {
+    content = /* @__PURE__ */ jsx("div", { role: "status", className: "rounded-md border border-border/70 bg-surface/70 px-4 py-3 text-sm text-text-secondary", children: loadingMessage });
+  } else if (variant === "changelog") {
+    content = changelog === null ? null : /* @__PURE__ */ jsx(ChangelogBlock, { ...changelog });
+  } else if (variant === "content-detail") {
+    content = detail ? /* @__PURE__ */ jsxs("article", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("header", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 2, children: detail.title }),
+        detail.excerpt ? /* @__PURE__ */ jsx(Typography, { variant: "muted", children: detail.excerpt }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 border-y border-border/70 py-3", children: [
+          /* @__PURE__ */ jsx(Avatar, { className: "h-9 w-9", children: /* @__PURE__ */ jsx(AvatarFallback, { children: detail.authorFallback ?? detail.authorName.slice(0, 2).toUpperCase() }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium text-text-primary", children: detail.authorName }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-text-secondary", children: [
+              detail.publishedAt,
+              detail.readTimeLabel ? ` \xB7 ${detail.readTimeLabel}` : ""
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-6", children: detail.content }),
+      detail.codeExamples && detail.codeExamples.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 4, children: "Code examples" }),
+        detail.codeExamples.map((example) => /* @__PURE__ */ jsx(
+          CodeBlock,
+          {
+            filename: example.filename,
+            language: example.language,
+            code: example.code
+          },
+          example.id
+        ))
+      ] }) : null
+    ] }) : /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: emptyState.title }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "muted", children: emptyState.description }) })
+    ] });
+  } else {
+    content = /* @__PURE__ */ jsxs("div", { "data-testid": "blog-index-view", className: "space-y-6", children: [
+      categories.length > 0 ? /* @__PURE__ */ jsxs("div", { "data-testid": "blog-category-controls", className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: activeCategoryId === null ? "primary" : "outline",
+            size: "sm",
+            onClick: () => onCategoryChange?.(null),
+            children: "All"
+          }
+        ),
+        categories.map((category) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: activeCategoryId === category.id ? "primary" : "outline",
+            size: "sm",
+            onClick: () => onCategoryChange?.(category.id),
+            children: [
+              category.label,
+              typeof category.count === "number" ? ` (${category.count})` : ""
+            ]
+          },
+          category.id
+        ))
+      ] }) : null,
+      shouldRenderEmpty ? /* @__PURE__ */ jsxs(Card, { "data-testid": "blog-empty-state", children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: emptyState.title }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "muted", children: emptyState.description }) })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: articles.map((article) => /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Badge, { variant: "outline", children: article.category }),
+            article.readTimeLabel ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-tertiary", children: article.readTimeLabel }) : null
+          ] }),
+          /* @__PURE__ */ jsx(CardTitle, { children: article.title }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: article.excerpt })
+        ] }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-wrap items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-text-secondary", children: [
+            article.authorName,
+            " \xB7 ",
+            article.publishedAt
+          ] }),
+          article.onOpen ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: article.onOpen, children: "Open" }) : null
+        ] })
+      ] }, article.id)) }),
+      pagination ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-text-secondary", children: [
+          "Page ",
+          pagination.page,
+          " of ",
+          pagination.totalPages
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              disabled: pagination.page <= 1,
+              onClick: () => pagination.onPageChange(Math.max(1, pagination.page - 1)),
+              children: "Previous page"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              disabled: pagination.page >= pagination.totalPages,
+              onClick: () => pagination.onPageChange(Math.min(pagination.totalPages, pagination.page + 1)),
+              children: "Next page"
+            }
+          )
+        ] })
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsx(MarketingShellPageKit, { ...shell, children: /* @__PURE__ */ jsxs("section", { className: cn("mx-auto w-full max-w-5xl space-y-8 px-6 pb-16", className), children: [
+    content,
+    newsletter === null ? null : /* @__PURE__ */ jsx(NewsletterBlock, { ...newsletter })
+  ] }) });
+}
+
+export { BlogContentPageKit };

package/dist/chunk-BRCBJ3S4.js

@@ -0,0 +1,42 @@
+import { PasswordRecoveryBlock } from './chunk-5PZ4VR2D.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function RecoveryPageKit({
+  mode = "reset",
+  onSubmit,
+  onBackToLogin,
+  title,
+  description,
+  buttonText,
+  successTitle,
+  errorMessage,
+  className,
+  cardClassName
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("min-h-dvh w-full bg-background px-4 py-12 md:px-8 md:py-20", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-5xl flex-col items-center justify-center gap-4", children: [
+    errorMessage ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        className: "w-full max-w-sm rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+        children: errorMessage
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      PasswordRecoveryBlock,
+      {
+        className: cn("w-full", cardClassName),
+        mode,
+        onSubmit,
+        onBackToLogin,
+        title,
+        description,
+        buttonText,
+        successTitle
+      }
+    )
+  ] }) });
+}
+
+export { RecoveryPageKit };