create-zerotal 1.0.0

package/templates/minimal/tests/smoke.test.ts

@@ -0,0 +1,51 @@
+/**
+ * The scaffold boots and serves its pages.
+ *
+ * A template ships with a `test` script, so it ships with something for that
+ * script to run — and this is the assertion that catches a broken starter:
+ * providers register, routes resolve, and a request completes. Delete it once
+ * you have real tests, or keep it as the shape to copy.
+ */
+import { beforeAll, afterAll, describe, test, expect } from 'bun:test';
+import { createTestApp, type TestApp } from '@zerotal/testing';
+
+let app: TestApp;
+
+beforeAll(async () => {
+  app = await createTestApp(() => import('../bootstrap/app.ts').then((m) => m.default));
+});
+
+afterAll(() => app.close());
+
+describe('scaffold', () => {
+  test('boots and renders the welcome page', async () => {
+    const res = await app.get('/');
+
+    res.assertOk();
+    // assertSeeText ignores the markup between the words, so a class change or a
+    // wrapping element does not fail a test about what the page says.
+    res.assertSeeText('Build server-driven apps with Zerotal');
+  });
+
+  test('serves the other views', async () => {
+    (await app.get('/about')).assertOk();
+    (await app.get('/contact')).assertOk();
+  });
+
+  test('serves the JSON routes', async () => {
+    const res = await app.get('/api');
+    res.assertOk().assertJson({ message: 'Hello, API!' });
+
+    const withParam = await app.get('/api/42');
+    withParam.assertJsonPath('id', '42');
+  });
+
+  test('answers HEAD on the home route, as probes and load balancers do', async () => {
+    const res = await app.head('/');
+    expect(res.status).toBeLessThan(400);
+  });
+
+  test('returns 404 for an unregistered path', async () => {
+    (await app.get('/definitely-not-a-route')).assertNotFound();
+  });
+});

package/templates/minimal/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true,
+    "emitDecoratorMetadata": false,
+    "jsx": "react-jsx",
+    "jsxImportSource": "zerotal",
+    "skipLibCheck": true,
+    "paths": {
+      "@app/*": ["./app/*"],
+      "@pages/*": ["./resources/js/pages/*"]
+    }
+  },
+  "exclude": ["node_modules", ".zerotal"]
+}

package/templates/minimal/zt.ts

@@ -0,0 +1,15 @@
+#!/usr/bin/env bun
+// zt.ts — Zerotal CLI entry point.
+// ─────────────────────────────────────────────────────────────────
+// Managed by the framework. All orchestration lives in @zerotal/core's
+// startZerotal(); this file just hands it the app's bootstrap module.
+//
+// Run commands with:  bun zt <command>
+//   bun zt serve [--port=3000] [--dev]   Start the HTTP server
+//   bun zt worker                        Start the background worker
+//   bun zt test                          Run tests with the app booted
+//   bun zt list                          Show all available commands
+// ─────────────────────────────────────────────────────────────────
+import { startZerotal } from "zerotal";
+
+await startZerotal(() => import("./bootstrap/app"));

package/templates/react/_env.example

@@ -0,0 +1,4 @@
+APP_ENV=development
+APP_KEY={{app_key}}
+APP_URL=http://localhost:3000
+ASSET_VERSION=1

package/templates/react/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.zerotal/
+*.sqlite
+.env
+public/assets/

package/templates/react/app/exceptions/Handler.ts

@@ -0,0 +1,55 @@
+import {
+  ExceptionHandler,
+  ZerotalError,
+  devSurfacesEnabled,
+  type HttpContext,
+} from "zerotal";
+import { inertia } from "@zerotal/inertia";
+
+/**
+ * Renders HTTP errors as a page inside the app's own shell.
+ *
+ * Registered in bootstrap/app.ts. Without it, a mistyped URL lands on the
+ * framework's plain error page — correct, but jarring after the rest of the app.
+ * This hands the status to resources/js/pages/error.tsx instead.
+ *
+ * Three cases deliberately fall through to `super.render()`:
+ *
+ *   - **A 5xx in development.** The framework's stack-trace page is far more
+ *     useful than a tidy "something broke", so it keeps priority while dev
+ *     surfaces are on. Client errors (404, 403, …) always render the app's page,
+ *     including in development — otherwise you could never see your own.
+ *   - **Inertia XHR.** A client-side visit expects the adapter's own error
+ *     handling; substituting a page object here would break it.
+ *   - **API clients.** Anything asking for JSON keeps getting JSON.
+ */
+
+/** Statuses this app renders as a page; everything else uses the default. */
+const RENDERED = new Set([403, 404, 419, 429, 500, 503]);
+
+function statusOf(error: unknown): number {
+  return error instanceof ZerotalError ? error.status : 500;
+}
+
+export class Handler extends ExceptionHandler {
+  override async render(error: unknown, ctx: HttpContext): Promise<Response> {
+    const status = statusOf(error);
+    const wantsHtml = (ctx.request.headers.get("Accept") ?? "").includes("text/html");
+    const isInertiaVisit = ctx.request.headers.get("X-Inertia") === "true";
+
+    if (isInertiaVisit || !wantsHtml || !RENDERED.has(status)) {
+      return super.render(error, ctx);
+    }
+    if (status >= 500 && devSurfacesEnabled()) {
+      return super.render(error, ctx);
+    }
+
+    // `inertia()` writes the HTML onto the context rather than returning it, so
+    // re-wrap the body to carry the real status instead of a 200.
+    await inertia("error", { status });
+    const rendered = ctx.response;
+    if (!rendered) return super.render(error, ctx);
+
+    return new Response(rendered.body, { status, headers: rendered.headers });
+  }
+}

package/templates/react/app/routes/about.ts

@@ -0,0 +1,8 @@
+import { Inertia } from "@zerotal/inertia";
+
+// GET /about — the URL comes from this file's path under app/routes.
+export const GET = async () => {
+  return Inertia.render("about", {
+    title: "How this app fits together",
+  });
+};

package/templates/react/app/routes/contact.ts

@@ -0,0 +1,31 @@
+import type { HttpContext } from "zerotal";
+import { Inertia } from "@zerotal/inertia";
+import { validate } from "zerotal/validator";
+
+// GET /contact — render the form. Errors and old input from a failed POST arrive
+// on their own through Inertia's shared `errors` / `old` props; this route does
+// not have to pass them.
+export const GET = async () => {
+  return Inertia.render("contact", {
+    title: "Get in touch",
+  });
+};
+
+// POST /contact — validate, then redirect. The redirect is the important part:
+// answering a POST with a redirect is what keeps the browser's back button and a
+// page refresh from re-submitting the form.
+export async function POST(http: HttpContext): Promise<void> {
+  // On failure this throws — the framework turns it into a 303 back to /contact
+  // with the messages in `errors` and the submitted values in `old`. Nothing
+  // below this line runs unless the input is valid, and `name` is a string.
+  const { name } = await validate(http, (r) => ({
+    name: r.string().trim().min(2).max(80),
+    email: r.string().trim().email(),
+    message: r.string().trim().min(10).max(2000),
+  }));
+
+  // Nothing is stored — this is where you would queue a job, send a notification
+  // or write a row. Delete the flash and put your own work here.
+  http.flash("success", `Thanks ${name}, your message came through.`);
+  http.redirect("/contact", 303);
+}

package/templates/react/app/routes/index.ts

@@ -0,0 +1,11 @@
+import { Inertia } from "@zerotal/inertia";
+
+// GET / — the landing page. Whatever this route passes as the second argument
+// arrives in resources/js/pages/home.tsx as React props.
+export const GET = async () => {
+  return Inertia.render("home", {
+    title: "Everything in one TypeScript app",
+    message:
+      "Routes, pages, validation and data access share one language and one process — served by Bun.",
+  });
+};

package/templates/react/bootstrap/app.ts

@@ -0,0 +1,12 @@
+import { Application, basePath } from "zerotal";
+import providers from "./providers";
+import { Handler } from "../app/exceptions/Handler";
+
+const app = Application.create({ providers })
+  .fileBasedRouting({
+    web: basePath("app/routes"),
+  })
+  // Renders 404s and other HTTP errors through resources/js/pages/error.tsx.
+  .withExceptionHandler(Handler);
+
+export default app;

package/templates/react/bootstrap/providers.ts

@@ -0,0 +1,10 @@
+import { LogProvider } from "zerotal/logger";
+import { SessionProvider } from "zerotal/session";
+import { InertiaProvider } from "@zerotal/inertia";
+
+// Order matters. Sessions come before Inertia because Inertia's shared props read
+// the flash, error and old-input bags out of the session on every render — that is
+// what carries a failed `validate()` back to the form it came from.
+const providers = [LogProvider, SessionProvider, InertiaProvider];
+
+export default providers;

package/templates/react/config/app.ts

@@ -0,0 +1,25 @@
+import { env, requireEnv } from "zerotal";
+import { AppConfig } from "zerotal/config";
+
+export default AppConfig({
+  name: "{{name}}",
+  url: env("APP_URL", "http://localhost:3000"),
+  /**
+   * The APP_KEY is used for encryption and should be set to a random 32
+   * character string. Use `bun zt key:generate` to generate a secure key.
+   */
+  key: requireEnv("APP_KEY"),
+
+  cors: {
+    origin: env("CORS_ORIGIN", "*"),
+    credentials: false,
+  },
+
+  throttle: {
+    maxAttempts: 120,
+    windowSeconds: 60,
+  },
+
+  // Frontend assets are built by the Inertia pipeline (`bun zt inertia:build`),
+  // not the generic asset bundler — so no `assets` block is needed here.
+});

package/templates/react/config/inertia.ts

@@ -0,0 +1,7 @@
+import { env } from "zerotal";
+import { InertiaConfig } from "@zerotal/inertia";
+
+export default InertiaConfig({
+  htmlTemplate: "./resources/app.html",
+  version: env("ASSET_VERSION", "1"),
+});

package/templates/react/config/session.ts

@@ -0,0 +1,11 @@
+import { env } from "zerotal";
+import { SessionConfig } from "zerotal/session";
+
+// Cookie-driver sessions, signed with APP_KEY. This is what carries flash
+// messages and a failed validation's errors and old input from one request to
+// the next. Switch `driver` to "redis" for a shared, server-side store.
+export default SessionConfig({
+  secret: env("APP_KEY", ""),
+  cookie: "{{name}}_session",
+  lifetime: 60 * 60 * 24 * 7, // 7 days
+});

package/templates/react/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "zt": "bun zt.ts",
+    "dev": "bun zt.ts serve --dev",
+    "start": "bun zt.ts serve",
+    "build": "bun zt.ts inertia:build --production",
+    "test": "bun zt.ts test"
+  },
+  "dependencies": {
+    "@inertiajs/react": "^2.0.0",
+    "@zerotal/inertia": "{{zerotal_version}}",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zerotal": "{{zerotal_version}}"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "bun-plugin-tailwind": "latest",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/templates/react/public/zt.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="Zerotal">
+  <defs>
+    <linearGradient id="zt-grad" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#818cf8" />
+      <stop offset="0.5" stop-color="#6366f1" />
+      <stop offset="1" stop-color="#7c3aed" />
+    </linearGradient>
+    <linearGradient id="zt-shine" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#ffffff" stop-opacity="0.35" />
+      <stop offset="0.55" stop-color="#ffffff" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="18" fill="url(#zt-grad)" />
+  <rect width="64" height="64" rx="18" fill="url(#zt-shine)" />
+  <rect x="0.75" y="0.75" width="62.5" height="62.5" rx="17.25" stroke="#ffffff" stroke-opacity="0.18" stroke-width="1.5" />
+  <text x="32" y="41" text-anchor="middle" font-family="system-ui, -apple-system, Segoe UI, sans-serif" font-size="20" font-weight="800" letter-spacing="0.5" fill="#ffffff">ZT</text>
+</svg>

package/templates/react/resources/app.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{name}}</title>
+
+    <link rel="icon" href="/zt.svg" type="image/svg+xml" />
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#191922" media="(prefers-color-scheme: dark)" />
+
+    <!--
+      Resolve the theme before the first paint. Without this the page renders in
+      light mode for a frame and then flips, which is very visible on a dark
+      background. Kept inline and synchronous on purpose — a deferred script is
+      already too late. The storage key matches the one @zerotal/flow-ui uses, so
+      an app and its admin panel stay on the same theme.
+    -->
+    <script>
+      (function () {
+        try {
+          var stored = localStorage.getItem("zerotal-theme");
+          var dark = stored
+            ? stored === "dark"
+            : window.matchMedia("(prefers-color-scheme: dark)").matches;
+          document.documentElement.classList.toggle("dark", dark);
+        } catch (e) {
+          /* private mode / storage disabled — fall through to light */
+        }
+      })();
+    </script>
+
+    <link rel="stylesheet" href="/assets/app.css" />
+    <script type="module" src="/assets/app.js"></script>
+  </head>
+  <body>
+    <!-- @inertia -->
+  </body>
+</html>

package/templates/react/resources/css/app.css

@@ -0,0 +1,206 @@
+@import "tailwindcss";
+
+/* Page components live outside this file's directory — name them explicitly so
+ * their utility classes survive Tailwind's content scan. */
+@source "../js";
+
+/* Dark mode is driven by a `.dark` class on <html>, not the OS preference, so the
+ * in-app toggle can override it. The no-flash script in resources/app.html sets
+ * the class before first paint. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ── Design tokens ───────────────────────────────────────────────────────────
+ *
+ * Every colour in this app is one of the semantic tokens below — `bg-background`,
+ * `text-muted-foreground`, `border-border`, `bg-primary`. Nothing references a raw
+ * palette shade like `indigo-600`, which means re-branding is a single edit here
+ * rather than a find-and-replace across every component.
+ *
+ * The names match the tokens `@zerotal/flow-ui` defines, so an app, its admin
+ * panel and any copied-in flow-ui component all read from the same vocabulary.
+ *
+ * Colours are oklch: perceptually uniform, so lightening `--primary` by hand
+ * keeps its hue and saturation intact.
+ */
+
+:root {
+  color-scheme: light;
+
+  --radius: 0.75rem;
+
+  --background: oklch(0.994 0.003 286);
+  --foreground: oklch(0.185 0.015 286);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.185 0.015 286);
+
+  --muted: oklch(0.968 0.005 286);
+  --muted-foreground: oklch(0.53 0.016 286);
+
+  --primary: oklch(0.53 0.223 286);
+  --primary-foreground: oklch(0.99 0.004 286);
+  /* Explicit hover shade rather than an opacity fade, so a solid button stays
+   * solid over the grid background. */
+  --primary-hover: oklch(0.47 0.223 286);
+
+  --accent: oklch(0.958 0.018 286);
+  --accent-foreground: oklch(0.36 0.14 286);
+
+  --success: oklch(0.6 0.14 158);
+  --success-foreground: oklch(0.99 0.01 158);
+
+  --destructive: oklch(0.577 0.245 27.3);
+  --destructive-foreground: oklch(0.99 0.01 27.3);
+
+  --border: oklch(0.912 0.006 286);
+  --input: oklch(0.912 0.006 286);
+  --ring: oklch(0.53 0.223 286);
+
+  /* Decorative — the hero grid and the glow behind it. */
+  --grid-line: oklch(0.185 0.015 286 / 6%);
+  --glow-a: oklch(0.7 0.19 286 / 30%);
+  --glow-b: oklch(0.75 0.16 220 / 22%);
+}
+
+.dark {
+  color-scheme: dark;
+
+  --background: oklch(0.163 0.014 286);
+  --foreground: oklch(0.968 0.005 286);
+
+  --card: oklch(0.204 0.016 286);
+  --card-foreground: oklch(0.968 0.005 286);
+
+  --muted: oklch(0.253 0.016 286);
+  --muted-foreground: oklch(0.706 0.015 286);
+
+  --primary: oklch(0.71 0.17 288);
+  --primary-foreground: oklch(0.17 0.03 286);
+  --primary-hover: oklch(0.78 0.15 288);
+
+  --accent: oklch(0.28 0.04 286);
+  --accent-foreground: oklch(0.9 0.06 288);
+
+  --success: oklch(0.72 0.15 158);
+  --success-foreground: oklch(0.17 0.03 158);
+
+  --destructive: oklch(0.704 0.191 22.2);
+  --destructive-foreground: oklch(0.16 0.02 22.2);
+
+  --border: oklch(1 0 0 / 11%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.71 0.17 288);
+
+  --grid-line: oklch(1 0 0 / 7%);
+  --glow-a: oklch(0.6 0.22 288 / 35%);
+  --glow-b: oklch(0.6 0.19 220 / 25%);
+}
+
+/* Bind the tokens to Tailwind utilities. `inline` keeps the utilities pointing at
+ * `var(--token)` rather than a snapshot, which is what lets `.dark` re-theme the
+ * whole page by redefining the variables. */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 10px);
+
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* One focus treatment for every interactive element, so a custom-styled button
+   * is as keyboard-navigable as a bare one. */
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  ::selection {
+    background-color: color-mix(in oklch, var(--primary) 24%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* ── Decorative utilities ────────────────────────────────────────────────────
+ * Both are purely cosmetic and token-driven, so they follow the theme without a
+ * `dark:` variant anywhere. Delete them and the layout still holds. */
+
+/** Faint graph-paper grid, faded out towards the bottom by a radial mask. */
+@utility bg-grid {
+  background-image:
+    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 30%, transparent 100%);
+}
+
+/** Soft two-tone aurora, drifting slowly. Sits behind the hero. */
+@utility bg-aurora {
+  background-image:
+    radial-gradient(38rem 22rem at 22% 0%, var(--glow-a), transparent 70%),
+    radial-gradient(32rem 20rem at 78% 12%, var(--glow-b), transparent 70%);
+  animation: aurora-drift 22s ease-in-out infinite alternate;
+}
+
+@keyframes aurora-drift {
+  from {
+    transform: translate3d(-1.5%, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(1.5%, 1.5%, 0) scale(1.06);
+  }
+}
+
+/** Hairline card edge with an inner highlight — reads as depth without a shadow. */
+@utility surface {
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 6%);
+}

package/templates/react/resources/js/Components/Button.tsx

@@ -0,0 +1,67 @@
+import { Link } from "@inertiajs/react";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+/**
+ * The app's button styles, in one place.
+ *
+ * `Button` renders a `<button>`; `ButtonLink` renders an Inertia `<Link>` with
+ * identical styling, so a nav action and a form submit can't drift apart. Both
+ * are built from {@link buttonClass}, which you can also apply to a bare `<a>`
+ * for an external link.
+ */
+
+export type ButtonVariant = "primary" | "secondary" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+
+const BASE =
+  "inline-flex items-center justify-center gap-2 rounded-lg font-medium whitespace-nowrap " +
+  "transition-[background-color,border-color,color,transform] duration-150 " +
+  "active:translate-y-px disabled:pointer-events-none disabled:opacity-55";
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover",
+  secondary: "border border-border bg-card text-foreground hover:bg-muted",
+  ghost: "text-muted-foreground hover:bg-muted hover:text-foreground",
+};
+
+const SIZES: Record<ButtonSize, string> = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-11 px-5 text-[0.95rem]",
+};
+
+export function buttonClass(
+  variant: ButtonVariant = "primary",
+  size: ButtonSize = "md",
+  className?: string,
+): string {
+  return cn(BASE, VARIANTS[variant], SIZES[size], className);
+}
+
+interface StyleProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export function Button({
+  variant,
+  size,
+  className,
+  type = "button",
+  ...rest
+}: StyleProps & ComponentProps<"button">) {
+  return <button type={type} className={buttonClass(variant, size, className)} {...rest} />;
+}
+
+// `size` is omitted from the Link props on purpose: Inertia's Link inherits the
+// HTML `size` attribute (a number), which would intersect with this component's
+// size scale and collapse the prop to `never`.
+export function ButtonLink({
+  variant,
+  size,
+  className,
+  ...rest
+}: StyleProps & Omit<ComponentProps<typeof Link>, "size">) {
+  return <Link className={buttonClass(variant, size, className)} {...rest} />;
+}