xertica-ui 2.8.0 → 2.9.7

package/dist/cli.js

@@ -69,12 +69,12 @@ var colorThemes = [
       darkCard: "#1E1E1E",
       darkMuted: "#26241f",
       darkBorder: "#38352c",
-      gradientStart: "#1899AF",
-      // Celeste
-      gradientEnd: "#C45BAA",
-      // Magenta
-      gradientStartDark: "#126578",
-      gradientEndDark: "#8F3F7D",
+      // Flat fill, same value on every stop — this theme uses solid ink
+      // colors, never gradients (Negro Xertica, matching sidebar/secondary-button).
+      gradientStart: "#1E1E1E",
+      gradientEnd: "#1E1E1E",
+      gradientStartDark: "#1E1E1E",
+      gradientEndDark: "#1E1E1E",
       chart1: "#3D63AC",
       // Azul
       chart2: "#1899AF",
@@ -91,11 +91,22 @@ var colorThemes = [
       // Marfim — cards, header, assistant panel
       inputBorderColor: "rgba(30, 30, 30, 0.4)",
       // Negro Xertica stroke — form fields only
+      outlineBorderColor: "rgba(30, 30, 30, 0.4)",
+      // Negro Xertica stroke — Button `outline` variant only
+      successColor: "#2E8B5A",
+      // Verde
+      warningColor: "#E37744",
+      // Naranja
+      infoColor: "#3D63AC",
+      // Azul
+      destructiveColor: "#DE5B48",
+      // Rojo Coral
       buttonRadius: "9999px",
-      buttonStrokeWidth: "2px",
+      buttonStrokeWidth: "1px",
       buttonStrokeColor: "#1E1E1E",
       buttonStrokeColorDark: "#F2EDD8",
       // Crema
+      buttonFontWeight: "400",
       buttonSecondaryBg: "#1E1E1E",
       buttonSecondaryBgDark: "#1E1E1E",
       buttonSecondaryForeground: "#FFFEF8",
@@ -832,14 +843,7 @@ function generateAppTsx(selectedCodes, disableDarkMode = false) {
   const isMonolingual = selectedLangs.length === 1;
   const disableDarkModeProp = disableDarkMode ? `
           disableDarkMode={true}` : "";
-  const isAllDefaults = selectedLangs.length === SUPPORTED_LANGUAGES.length && selectedLangs.every((l) => DEFAULT_SELECTION.includes(l.code));
-  const languagesArrayLiteral = selectedLangs.map(
-    (l) => `            { code: '${l.code}', label: '${l.label}', shortLabel: '${l.shortLabel}' },`
-  ).join("\n");
-  const availableLanguagesProp = isAllDefaults ? "" : `
-          availableLanguages={[
-${languagesArrayLiteral}
-          ]}`;
+  const availableLanguagesProp = buildAvailableLanguagesProp(selectedCodes, "          ");
   const monolingualBanner = isMonolingual ? `
 // This project is configured for a single language \u2014 the LanguageSelector
 // auto-hides because there is nothing to switch to.` : "";
@@ -895,6 +899,38 @@ export default function App() {
 }
 `;
 }
+function generateLandingAppTsx(selectedCodes, disableDarkMode = false) {
+  const disableDarkModeProp = disableDarkMode ? `
+      disableDarkMode={true}` : "";
+  const availableLanguagesProp = buildAvailableLanguagesProp(selectedCodes, "      ");
+  return `import React from 'react';
+import { XerticaProvider } from 'xertica-ui/brand';
+import { LandingPage } from '../pages/LandingPage';
+
+export default function App() {
+  return (
+    <XerticaProvider
+      useCustomTokens={true}${availableLanguagesProp}${disableDarkModeProp}
+    >
+      <LandingPage />
+    </XerticaProvider>
+  );
+}
+`;
+}
+function buildAvailableLanguagesProp(selectedCodes, indent) {
+  const selectedLangs = SUPPORTED_LANGUAGES.filter((l) => selectedCodes.includes(l.code));
+  const isAllDefaults = selectedLangs.length === SUPPORTED_LANGUAGES.length && selectedLangs.every((l) => DEFAULT_SELECTION.includes(l.code));
+  if (isAllDefaults) return "";
+  const itemIndent = `${indent}  `;
+  const languagesArrayLiteral = selectedLangs.map(
+    (l) => `${itemIndent}{ code: '${l.code}', label: '${l.label}', shortLabel: '${l.shortLabel}' },`
+  ).join("\n");
+  return `
+${indent}availableLanguages={[
+${languagesArrayLiteral}
+${indent}]}`;
+}
 function toJsIdent(code) {
   return code.replace(/[^a-zA-Z0-9]/g, "");
 }
@@ -1112,12 +1148,156 @@ export function TemplatePage() {
 }
 `;
 }
+async function copyPackageJson(templatesDir, targetDir) {
+  const pkgTemplatePath = path2.join(templatesDir, "package.json");
+  if (await fs2.pathExists(pkgTemplatePath)) {
+    const pkgContent = await fs2.readJson(pkgTemplatePath);
+    const projectName = path2.basename(targetDir) || "my-xertica-app";
+    pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
+    await fs2.writeJson(path2.join(targetDir, "package.json"), pkgContent, { spaces: 2 });
+  }
+}
+async function initPageProject(targetDir, templatesDir) {
+  const response = await prompts([
+    {
+      type: "multiselect",
+      name: "languages",
+      message: "Which languages should the page support?",
+      instructions: false,
+      hint: "Select at least 1. Single-language apps auto-hide the LanguageSelector.",
+      min: 1,
+      choices: SUPPORTED_LANGUAGES.map((l) => ({
+        title: l.label,
+        value: l.code,
+        selected: true
+      }))
+    },
+    {
+      type: "select",
+      name: "theme",
+      message: "Select the default color theme for your project:",
+      choices: colorThemes.map((t) => ({
+        title: t.name,
+        description: t.description,
+        value: t.id
+      })),
+      initial: 0
+    },
+    {
+      type: "confirm",
+      name: "install",
+      message: "Install dependencies automatically?",
+      initial: true
+    }
+  ]);
+  if (!response.languages || !response.theme) return;
+  const spinner = ora("Initializing project...").start();
+  try {
+    await fs2.ensureDir(targetDir);
+    const selectedLanguages = Array.isArray(response.languages) && response.languages.length > 0 ? response.languages : DEFAULT_SELECTION;
+    const rootFilesToCopy = [
+      "index.html",
+      "vite.config.ts",
+      "tsconfig.json",
+      "tsconfig.node.json",
+      "postcss.config.js",
+      "vite-env.d.ts",
+      "eslint.config.js",
+      ".gitignore",
+      ".prettierrc"
+    ];
+    for (const file of rootFilesToCopy) {
+      const srcPath = path2.join(templatesDir, file);
+      if (await fs2.pathExists(srcPath)) {
+        await fs2.copy(srcPath, path2.join(targetDir, file));
+      }
+    }
+    await copyPackageJson(templatesDir, targetDir);
+    await fs2.copy(
+      path2.join(templatesDir, "src", "main.tsx"),
+      path2.join(targetDir, "src", "main.tsx")
+    );
+    await fs2.ensureDir(path2.join(targetDir, "src", "app"));
+    await fs2.writeFile(
+      path2.join(targetDir, "src", "app", "App.tsx"),
+      generateLandingAppTsx(selectedLanguages)
+    );
+    await fs2.writeFile(
+      path2.join(targetDir, "src", "i18n.ts"),
+      generateI18nFile(selectedLanguages)
+    );
+    await syncLocaleFiles(templatesDir, targetDir, selectedLanguages, { pruneOthers: true });
+    await writeLanguagesConfig(targetDir, selectedLanguages);
+    await writeXerticaConfig(targetDir, {
+      hasAssistant: false,
+      disableDarkMode: false,
+      themeId: response.theme,
+      projectType: "page"
+    });
+    await fs2.ensureDir(path2.join(targetDir, "src", "pages"));
+    await fs2.copy(
+      path2.join(templatesDir, "src", "pages", "LandingPage.tsx"),
+      path2.join(targetDir, "src", "pages", "LandingPage.tsx")
+    );
+    const selectedTheme = colorThemes.find((t) => t.id === response.theme) || colorThemes[0];
+    const tokensDir = path2.join(targetDir, "src", "styles", "xertica");
+    await fs2.ensureDir(tokensDir);
+    await fs2.copy(
+      path2.join(templatesDir, "src", "styles", "index.css"),
+      path2.join(targetDir, "src", "styles", "index.css")
+    );
+    await fs2.writeFile(path2.join(tokensDir, "tokens.css"), generateTokensCss(selectedTheme));
+    spinner.succeed("Project initialized successfully!");
+    if (response.install) {
+      const installSpinner = ora("Installing dependencies...").start();
+      await execa("npm", ["install"], { cwd: targetDir });
+      installSpinner.succeed("Dependencies installed!");
+    }
+    console.log(chalk.green("\n\u2705 Done! Your Xertica UI landing page is ready."));
+    console.log(chalk.cyan(`
+  cd ${path2.relative(process.cwd(), targetDir) || "."}`));
+    if (!response.install) {
+      console.log(chalk.cyan("  npm install"));
+    }
+    console.log(chalk.cyan("  npm run dev"));
+    console.log();
+    console.log(chalk.gray("  Edit the demo content in src/pages/LandingPage.tsx"));
+    console.log(chalk.gray("  Customize the theme in src/styles/xertica/tokens.css"));
+    console.log(chalk.gray("  To change the theme or languages later: npx xertica-ui update"));
+  } catch (error) {
+    spinner.fail("Failed to initialize project");
+    console.error(error);
+  }
+}
 var program = new Command();
 program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version(pkgJson.version);
 program.command("init").description("Initialize a new Xertica UI project").argument("[directory]", "Directory to initialize in", ".").action(async (directory) => {
   const targetDir = path2.resolve(process.cwd(), directory);
   const templatesDir = path2.resolve(__dirname, "../templates");
   console.log(chalk.blue(`\u{1F680} Welcome to Xertica UI CLI! ${chalk.dim(`v${pkgJson.version}`)}`));
+  const { projectType } = await prompts({
+    type: "select",
+    name: "projectType",
+    message: "What do you want to create?",
+    choices: [
+      {
+        title: "Full system",
+        description: "Auth, sidebar, pages, i18n \u2014 the current full scaffold",
+        value: "system"
+      },
+      {
+        title: "Web page",
+        description: "Just the marketing landing page \u2014 pick a theme and languages, done",
+        value: "page"
+      }
+    ],
+    initial: 0
+  });
+  if (!projectType) return;
+  if (projectType === "page") {
+    await initPageProject(targetDir, templatesDir);
+    return;
+  }
   const response = await prompts([
     {
       type: "multiselect",
@@ -1206,13 +1386,7 @@ program.command("init").description("Initialize a new Xertica UI project").argum
         await fs2.copy(srcPath, path2.join(targetDir, file));
       }
     }
-    const pkgTemplatePath = path2.join(templatesDir, "package.json");
-    if (await fs2.pathExists(pkgTemplatePath)) {
-      const pkgContent = await fs2.readJson(pkgTemplatePath);
-      const projectName = path2.basename(targetDir) || "my-xertica-app";
-      pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
-      await fs2.writeJson(path2.join(targetDir, "package.json"), pkgContent, { spaces: 2 });
-    }
+    await copyPackageJson(templatesDir, targetDir);
     await fs2.copy(
       path2.join(templatesDir, "src", "main.tsx"),
       path2.join(targetDir, "src", "main.tsx")
@@ -1238,7 +1412,12 @@ program.command("init").description("Initialize a new Xertica UI project").argum
     );
     await syncLocaleFiles(templatesDir, targetDir, selectedLanguages, { pruneOthers: true });
     await writeLanguagesConfig(targetDir, selectedLanguages);
-    await writeXerticaConfig(targetDir, { hasAssistant, disableDarkMode, themeId: response.theme });
+    await writeXerticaConfig(targetDir, {
+      hasAssistant,
+      disableDarkMode,
+      themeId: response.theme,
+      projectType: "system"
+    });
     await fs2.ensureDir(path2.join(targetDir, "src", "app", "context"));
     await fs2.copy(
       path2.join(templatesDir, "src", "app", "context", "AuthContext.tsx"),
@@ -1362,6 +1541,8 @@ program.command("update").alias("update-theme").description("Update theme or pro
   const targetDir = process.cwd();
   console.log(chalk.blue(`\u{1F527} Xertica UI CLI ${chalk.dim(`v${pkgJson.version}`)}`));
   const currentConfig = await readXerticaConfig(targetDir);
+  const projectType = currentConfig?.projectType ?? "system";
+  const isPageProject = projectType === "page";
   const { updateType } = await prompts({
     type: "select",
     name: "updateType",
@@ -1377,11 +1558,13 @@ program.command("update").alias("update-theme").description("Update theme or pro
         description: "Add or remove supported languages (pt-BR, en, es, \u2026)",
         value: "languages"
       },
-      {
-        title: "Assistant",
-        description: currentConfig?.hasAssistant ? "Remove the AI Assistant from your project" : "Add the AI Assistant to your project",
-        value: "assistant"
-      },
+      ...isPageProject ? [] : [
+        {
+          title: "Assistant",
+          description: currentConfig?.hasAssistant ? "Remove the AI Assistant from your project" : "Add the AI Assistant to your project",
+          value: "assistant"
+        }
+      ],
       {
         title: "Dark Mode",
         description: currentConfig?.disableDarkMode ? "Enable dark mode support in your project" : "Disable dark mode support in your project",
@@ -1389,7 +1572,7 @@ program.command("update").alias("update-theme").description("Update theme or pro
       },
       {
         title: "Project files",
-        description: "Update app shell, shared, features and pages to a specific version",
+        description: isPageProject ? "Update the app shell and landing page to a specific version" : "Update app shell, shared, features and pages to a specific version",
         value: "project"
       }
     ]
@@ -1510,7 +1693,7 @@ ${summary.join("\n")}
       await fs2.writeFile(path2.join(targetDir, "src", "i18n.ts"), generateI18nFile(newCodes));
       await fs2.writeFile(
         path2.join(targetDir, "src", "app", "App.tsx"),
-        generateAppTsx(newCodes, currentConfig?.disableDarkMode ?? false)
+        isPageProject ? generateLandingAppTsx(newCodes, currentConfig?.disableDarkMode ?? false) : generateAppTsx(newCodes, currentConfig?.disableDarkMode ?? false)
       );
       await writeLanguagesConfig(targetDir, newCodes);
       spinner2.succeed("Languages updated successfully!");
@@ -1672,7 +1855,7 @@ AI Assistant is currently: ${currentlyHas ? chalk.green("enabled") : chalk.red("
       const selectedCodes = persistedCodes && persistedCodes.length > 0 ? persistedCodes : DEFAULT_SELECTION;
       await fs2.writeFile(
         path2.join(targetDir, "src", "app", "App.tsx"),
-        generateAppTsx(selectedCodes, newDisableDarkMode)
+        isPageProject ? generateLandingAppTsx(selectedCodes, newDisableDarkMode) : generateAppTsx(selectedCodes, newDisableDarkMode)
       );
       spinner2.succeed(
         newDisableDarkMode ? "Dark mode disabled successfully! (Locked to Light Mode)" : "Dark mode enabled successfully!"
@@ -1712,7 +1895,20 @@ AI Assistant is currently: ${currentlyHas ? chalk.green("enabled") : chalk.red("
     type: "multiselect",
     name: "filesToUpdate",
     message: "Select which parts of the project to update:",
-    choices: [
+    choices: isPageProject ? [
+      {
+        title: "App shell + landing page",
+        description: "App.tsx and the LandingPage re-export",
+        value: "app",
+        selected: true
+      },
+      {
+        title: "Root config files",
+        description: "vite.config.ts, tsconfig.json, etc.",
+        value: "config",
+        selected: false
+      }
+    ] : [
       {
         title: "App shell (src/app/)",
         description: "App.tsx, AppLayout.tsx",
@@ -1764,11 +1960,6 @@ AI Assistant is currently: ${currentlyHas ? chalk.green("enabled") : chalk.red("
     spinner.text = "Copying updated files...";
     const updatedTemplatesDir = path2.join(targetDir, "node_modules", "xertica-ui", "templates");
     if (filesToUpdate.includes("app")) {
-      await fs2.copy(
-        path2.join(updatedTemplatesDir, "src", "app", "components", "AppLayout.tsx"),
-        path2.join(targetDir, "src", "app", "components", "AppLayout.tsx"),
-        { overwrite: true }
-      );
       const persistedCodes = await readLanguagesConfig(targetDir);
       let selectedCodes = persistedCodes ?? [];
       if (selectedCodes.length === 0) {
@@ -1783,31 +1974,58 @@ AI Assistant is currently: ${currentlyHas ? chalk.green("enabled") : chalk.red("
         await writeLanguagesConfig(targetDir, selectedCodes);
       }
       const projectConfig = await readXerticaConfig(targetDir);
-      await fs2.writeFile(
-        path2.join(targetDir, "src", "app", "App.tsx"),
-        generateAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
-      );
-      await fs2.writeFile(path2.join(targetDir, "src", "i18n.ts"), generateI18nFile(selectedCodes));
-      await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
-        pruneOthers: true
-      });
-      const pagesDir = path2.join(targetDir, "src", "pages");
-      const existingPages = await fs2.pathExists(pagesDir) ? await fs2.readdir(pagesDir) : [];
-      const hasLoginP = existingPages.includes("LoginPage.tsx");
-      const hasHomeP = existingPages.includes("HomePage.tsx");
-      const hasTemplateP = existingPages.includes("TemplatePage.tsx");
-      const hasAssistantP = projectConfig?.hasAssistant ?? existingPages.includes("AssistantPage.tsx");
-      const firstProtectedP = hasHomeP ? "/home" : hasTemplateP ? "/template" : "/login";
-      await fs2.writeFile(
-        path2.join(targetDir, "src", "app", "components", "AuthGuard.tsx"),
-        generateAuthGuard({
-          hasLogin: hasLoginP,
-          hasHome: hasHomeP,
-          hasTemplate: hasTemplateP,
-          hasAssistant: hasAssistantP,
-          firstProtectedPath: firstProtectedP
-        })
-      );
+      if (isPageProject) {
+        await fs2.writeFile(
+          path2.join(targetDir, "src", "app", "App.tsx"),
+          generateLandingAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
+        );
+        await fs2.writeFile(
+          path2.join(targetDir, "src", "i18n.ts"),
+          generateI18nFile(selectedCodes)
+        );
+        await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
+          pruneOthers: true
+        });
+        await fs2.copy(
+          path2.join(updatedTemplatesDir, "src", "pages", "LandingPage.tsx"),
+          path2.join(targetDir, "src", "pages", "LandingPage.tsx"),
+          { overwrite: true }
+        );
+      } else {
+        await fs2.copy(
+          path2.join(updatedTemplatesDir, "src", "app", "components", "AppLayout.tsx"),
+          path2.join(targetDir, "src", "app", "components", "AppLayout.tsx"),
+          { overwrite: true }
+        );
+        await fs2.writeFile(
+          path2.join(targetDir, "src", "app", "App.tsx"),
+          generateAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
+        );
+        await fs2.writeFile(
+          path2.join(targetDir, "src", "i18n.ts"),
+          generateI18nFile(selectedCodes)
+        );
+        await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
+          pruneOthers: true
+        });
+        const pagesDir = path2.join(targetDir, "src", "pages");
+        const existingPages = await fs2.pathExists(pagesDir) ? await fs2.readdir(pagesDir) : [];
+        const hasLoginP = existingPages.includes("LoginPage.tsx");
+        const hasHomeP = existingPages.includes("HomePage.tsx");
+        const hasTemplateP = existingPages.includes("TemplatePage.tsx");
+        const hasAssistantP = projectConfig?.hasAssistant ?? existingPages.includes("AssistantPage.tsx");
+        const firstProtectedP = hasHomeP ? "/home" : hasTemplateP ? "/template" : "/login";
+        await fs2.writeFile(
+          path2.join(targetDir, "src", "app", "components", "AuthGuard.tsx"),
+          generateAuthGuard({
+            hasLogin: hasLoginP,
+            hasHome: hasHomeP,
+            hasTemplate: hasTemplateP,
+            hasAssistant: hasAssistantP,
+            firstProtectedPath: firstProtectedP
+          })
+        );
+      }
     }
     if (filesToUpdate.includes("shared")) {
       await fs2.copy(

package/dist/components/blocks/auth/AuthPageShell.d.ts

@@ -1,12 +1,28 @@
 import React from 'react';
-export interface AuthPageShellProps {
+export type AuthPageShellProps = {
+    /** Hero photo on the left (default). Requires `imageSrc`/`imageAlt`. */
+    leftPanel?: 'image';
     imageSrc: string;
     imageAlt: string;
+    /**
+     * Background classes for the hero image overlay gradient. Defaults to the
+     * shared `--gradient-diagonal` theme token; pass a Tailwind gradient to
+     * override it for a specific auth page without affecting the others.
+     */
+    gradientClassName?: string;
     children: React.ReactNode;
-}
+} | {
+    /**
+     * Brand isotype mark on a solid `bg-muted` panel — no photo, no
+     * gradient. Pairs with a lighter `bg-card` form panel on the right,
+     * the inverse of the `image` variant's `bg-muted` form panel.
+     */
+    leftPanel: 'isotype';
+    children: React.ReactNode;
+};
 /**
  * Shared two-column shell used by every auth page (Login, ForgotPassword,
- * ResetPassword, VerifyEmail): hero image on the left, centered form panel
- * with a language selector on the right.
+ * ResetPassword, VerifyEmail): a left panel (hero image or brand isotype) and
+ * a centered form panel with a language selector on the right.
  */
-export declare function AuthPageShell({ imageSrc, imageAlt, children }: AuthPageShellProps): React.JSX.Element;
+export declare function AuthPageShell(props: AuthPageShellProps): React.JSX.Element;

package/dist/components/blocks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './card-patterns';
 export * from './auth';
+export * from './marketing';

package/dist/components/blocks/marketing/CTASection.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface CTASectionAction {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface CTASectionProps extends React.HTMLAttributes<HTMLElement> {
+    title: string;
+    description?: string;
+    cta: CTASectionAction;
+    secondaryCta?: CTASectionAction;
+}
+/**
+ * Full-width dark band prompting a primary conversion action.
+ *
+ * @description
+ * A high-impact closing section for marketing pages: a bold left-aligned
+ * headline, optional supporting copy, and up to two CTA buttons on a flat
+ * `bg-sidebar` surface — the same token-driven dark surface used elsewhere
+ * on this page (e.g. the methodology section) — so it stays legible across
+ * all Xertica-ui themes without per-theme contrast tuning or a gradient.
+ *
+ * @ai-rules
+ * 1. The background is a flat `bg-sidebar` surface with a `border-sidebar-border` hairline — never reintroduce a gradient or hardcode colors here.
+ * 2. Both buttons use their natural variants (`default` for `cta`, `outline` for `secondaryCta`) with no color overrides — they already contrast correctly against `bg-sidebar`; do not force-style them with one-off colors.
+ * 3. Each `cta`/`secondaryCta` needs either `href` (renders an `<a>`) or `onClick`.
+ */
+export declare function CTASection({ title, description, cta, secondaryCta, className, ...props }: CTASectionProps): React.JSX.Element;

package/dist/components/blocks/marketing/ComplianceBadgeRow.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface ComplianceBadge {
+    icon: React.ReactNode;
+    label: string;
+    description?: string;
+}
+export interface ComplianceBadgeRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    badges: ComplianceBadge[];
+}
+/**
+ * A row of certification/compliance badges (e.g. SOC 2, GDPR, WCAG 2.1 AA).
+ *
+ * @description
+ * Renders a left-aligned grid where each badge pairs a token-radius outlined
+ * icon chip with a label and an optional short description, built entirely
+ * from theme tokens so it reskins across all Xertica-ui themes and dark mode.
+ *
+ * @ai-rules
+ * 1. Provide `badges` as `{ icon, label, description? }` — `icon` should be a small lucide-react element.
+ * 2. Keep `label` and `description` short — badges sit in a `grid-cols-2 sm:grid-cols-4` layout, so each column has limited width.
+ * 3. Do not hand-roll badge styling elsewhere — this component owns the icon-chip/label/description layout.
+ */
+export declare function ComplianceBadgeRow({ badges, className, ...props }: ComplianceBadgeRowProps): React.JSX.Element;

package/dist/components/blocks/marketing/EvidenceTimeline.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export type BlockColor = 'primary' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'success' | 'info' | 'warning' | 'destructive';
+export interface EvidenceTimelineItem {
+    number?: string | number;
+    icon?: React.ReactNode;
+    title: string;
+    description: string;
+    color?: BlockColor;
+}
+export interface EvidenceTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: EvidenceTimelineItem[];
+}
+/**
+ * Vertical numbered timeline with a connecting line and colored step dots.
+ *
+ * @description
+ * Renders a "how our methodology works" style list: each item gets a
+ * colored dot (icon or step number) on a shared vertical line, with a
+ * title and description to its right.
+ *
+ * @ai-rules
+ * 1. Provide `icon` for a lucide-react icon in the dot, or `number` for a step label; if neither is set the 1-based index is used.
+ * 2. Each item's `color` maps to `colorTokens` — never hardcode colors.
+ * 3. This block has no outer card chrome; wrap it in a `<Card>` or section if chrome is needed.
+ */
+export declare function EvidenceTimeline({ items, className, ...props }: EvidenceTimelineProps): React.JSX.Element;

package/dist/components/blocks/marketing/FeatureRow.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export interface FeatureRowProps extends React.HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    bullets?: string[];
+    visual: React.ReactNode;
+    reverse?: boolean;
+    tone?: 'default' | 'muted' | 'card';
+}
+/**
+ * Alternating text + visual marketing section.
+ *
+ * @description
+ * A two-column "how it works" / definition row: a text block (eyebrow,
+ * title, description, optional checklist) paired with a consumer-supplied
+ * visual (image, illustration, or custom node). Stacks on mobile and
+ * alternates sides on desktop via `reverse`.
+ *
+ * @ai-rules
+ * 1. Chain multiple `FeatureRow`s and alternate `reverse` to build a "how it works" narrative.
+ * 2. Pass the visual as `<ImageWithFallback />` or any custom `ReactNode`; this component never renders an image itself.
+ * 3. Use `tone="muted"` on every other row to create a subtle section break instead of adding manual dividers; use `tone="card"` when a theme needs a stronger, genuinely lighter break (some themes set `--muted` equal to `--background`).
+ */
+export declare function FeatureRow({ eyebrow, title, description, bullets, visual, reverse, tone, className, ...props }: FeatureRowProps): React.JSX.Element;

package/dist/components/blocks/marketing/Hero.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export interface HeroCta {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: {
+        label: string;
+        icon?: React.ReactNode;
+    };
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    primaryCta?: HeroCta;
+    secondaryCta?: HeroCta;
+    visual?: React.ReactNode;
+    align?: 'left' | 'center';
+    decorative?: boolean;
+}
+/**
+ * Full-width, above-the-fold marketing hero section.
+ *
+ * @description
+ * The lead block for landing and marketing pages: an optional `PillBadge`
+ * eyebrow, a very large headline, supporting copy, and up to two `<Button>`
+ * CTAs. Automatically switches from a single column to a two-column layout
+ * once a `visual` (screenshot, illustration, collage) is supplied.
+ *
+ * @ai-rules
+ * 1. Pass `visual` for the two-column desktop layout; omit it for a single-column hero.
+ * 2. `primaryCta` renders as `default` (primary/brand) and `secondaryCta` as `secondary`, both via `<Button>` (`size="lg"`) — never hand-roll buttons.
+ * 3. Set `decorative` to add a token-based gradient blob backdrop; it is purely visual and never shifts layout.
+ * 4. `align="center"` centers the eyebrow/heading/copy/CTAs — pair it with omitting `visual` for a classic centered hero.
+ */
+export declare function Hero({ eyebrow, title, description, primaryCta, secondaryCta, visual, align, decorative, className, ...props }: HeroProps): React.JSX.Element;

package/dist/components/blocks/marketing/HowItWorksSteps.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export type BlockColor = 'primary' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'success' | 'info' | 'warning' | 'destructive';
+export interface HowItWorksStepItem {
+    number?: string | number;
+    icon?: React.ReactNode;
+    title: string;
+    description: string;
+    color?: BlockColor;
+}
+export interface HowItWorksStepsProps {
+    items: HowItWorksStepItem[];
+    className?: string;
+}
+/**
+ * Horizontal numbered process row — the horizontal counterpart to `EvidenceTimeline`.
+ *
+ * @description
+ * Renders a "how it works" style row of steps: each item gets a colored
+ * badge (icon or step number) above a title and description, laid out
+ * side by side in a responsive grid instead of `EvidenceTimeline`'s
+ * vertical connecting line.
+ *
+ * @ai-rules
+ * 1. Provide `icon` for a lucide-react icon in the badge, or `number` for a step label; if neither is set the 1-based index is used.
+ * 2. Each item's `color` maps to `colorTokens` — never hardcode colors.
+ * 3. There is no connecting line between steps (unlike `EvidenceTimeline`) — this avoids awkward line fragments when steps wrap to a new row on narrow screens.
+ * 4. This block has no outer card chrome; wrap it in a `<Card>` or section if chrome is needed.
+ */
+export declare function HowItWorksSteps({ items, className }: HowItWorksStepsProps): React.JSX.Element;