@luciodale/docs-ui-kit 0.2.0

package/src/components/Callout.astro

@@ -0,0 +1,58 @@
+---
+import DangerIcon from "./icons/DangerIcon.astro";
+import InfoIcon from "./icons/InfoIcon.astro";
+import TipIcon from "./icons/TipIcon.astro";
+import WarningIcon from "./icons/WarningIcon.astro";
+
+type CalloutType = "info" | "warning" | "tip" | "danger";
+
+type Props = {
+	type?: CalloutType;
+	title?: string;
+};
+
+const { type = "info", title } = Astro.props;
+
+const styles: Record<CalloutType, { border: string; bg: string; text: string; defaultTitle: string }> = {
+	info: {
+		border: "border-blue-400/30",
+		bg: "bg-blue-400/5",
+		text: "text-blue-400",
+		defaultTitle: "Note",
+	},
+	warning: {
+		border: "border-yellow-400/30",
+		bg: "bg-yellow-400/5",
+		text: "text-yellow-400",
+		defaultTitle: "Warning",
+	},
+	tip: {
+		border: "border-green-400/30",
+		bg: "bg-green-400/5",
+		text: "text-green-400",
+		defaultTitle: "Tip",
+	},
+	danger: {
+		border: "border-red-400/30",
+		bg: "bg-red-400/5",
+		text: "text-red-400",
+		defaultTitle: "Danger",
+	},
+};
+
+const s = styles[type];
+const heading = title ?? s.defaultTitle;
+---
+
+<aside class:list={["rounded-lg border-l-4 px-5 py-4 my-6", s.border, s.bg]}>
+	<div class:list={["flex items-center gap-1.5 mb-2 text-sm font-semibold", s.text]}>
+		{type === "info" && <InfoIcon />}
+		{type === "warning" && <WarningIcon />}
+		{type === "tip" && <TipIcon />}
+		{type === "danger" && <DangerIcon />}
+		{heading}
+	</div>
+	<div class="text-sm text-white/60 leading-relaxed [&_a]:text-accent [&_a]:underline [&_code]:text-white/70 [&_code]:font-mono [&_code]:text-xs">
+		<slot />
+	</div>
+</aside>

package/src/components/CodeBlock.astro

@@ -0,0 +1,54 @@
+---
+import { codeToHtml } from "shiki";
+
+type Props = {
+	code: string;
+	language?: string;
+	filename?: string;
+};
+
+const { code, language = "tsx", filename } = Astro.props;
+const trimmed = code.trim();
+const html = await codeToHtml(trimmed, {
+	lang: language,
+	theme: "vitesse-dark",
+});
+---
+
+<div class="rounded-lg border border-white/10 bg-[#161618] overflow-hidden my-4">
+	<div class="flex items-center justify-between px-4 py-2.5 border-b border-white/[0.06] bg-white/[0.02]">
+		<span class="text-xs text-white/30 font-mono">{filename ?? language}</span>
+		<button
+			type="button"
+			class="copy-btn text-xs text-white/30 hover:text-white/60 transition-colors cursor-pointer"
+			data-code={trimmed}
+		>
+			<span class="copy-label">Copy</span>
+		</button>
+	</div>
+	<div
+		class="px-5 py-5 overflow-x-auto text-sm leading-[1.7] [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0"
+		set:html={html}
+	/>
+</div>
+
+<script>
+	function initCopyButtons() {
+		document.querySelectorAll(".copy-btn").forEach((btn) => {
+			if (btn.dataset.initialized) return;
+			btn.dataset.initialized = "true";
+			btn.addEventListener("click", async () => {
+				const code = btn.dataset.code;
+				if (!code) return;
+				await navigator.clipboard.writeText(code);
+				const label = btn.querySelector(".copy-label");
+				if (label) {
+					label.textContent = "Copied!";
+					setTimeout(() => { label.textContent = "Copy"; }, 2000);
+				}
+			});
+		});
+	}
+	initCopyButtons();
+	document.addEventListener("astro:after-swap", initCopyButtons);
+</script>

package/src/components/ContentSection.astro

@@ -0,0 +1,14 @@
+---
+type Props = {
+	label: string;
+	id?: string;
+};
+
+const { label, id } = Astro.props;
+const sectionId = id ?? label.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "");
+---
+
+<section id={sectionId} data-toc-label={label} class="scroll-mt-24 mb-12">
+	<h2 class="text-2xl md:text-3xl font-semibold tracking-tight text-white mb-6">{label}</h2>
+	<slot />
+</section>

package/src/components/DocsLayout.astro

@@ -0,0 +1,28 @@
+---
+import type { SiteConfig } from "../types/config";
+import Footer from "./Footer.astro";
+import Navbar from "./Navbar.astro";
+import Sidebar from "./Sidebar.astro";
+import TableOfContents from "./TableOfContents.astro";
+
+type Props = {
+	config: SiteConfig;
+	currentPath: string;
+};
+
+const { config, currentPath } = Astro.props;
+---
+
+<div class="flex flex-col min-h-dvh">
+	<Navbar config={config} currentPath={currentPath} />
+	<div class="flex flex-1">
+		<Sidebar sections={config.sidebarSections} currentPath={currentPath} />
+		<main class="flex-1 overflow-y-auto">
+			<div class="max-w-3xl px-6 md:px-8 xl:px-12 py-10 md:py-16">
+				<slot />
+			</div>
+		</main>
+		<TableOfContents />
+	</div>
+	<Footer config={config} />
+</div>

package/src/components/Footer.astro

@@ -0,0 +1,66 @@
+---
+import type { SiteConfig } from "../types/config";
+import GithubIcon from "./GithubIcon.astro";
+import LinkedInIcon from "./LinkedInIcon.astro";
+
+type Props = {
+	config: SiteConfig;
+};
+
+const { config } = Astro.props;
+const year = new Date().getFullYear();
+const copyright = config.copyright ?? config.title;
+---
+
+<footer class="mt-auto border-t border-white/10 py-10">
+	<div class="max-w-7xl mx-auto px-6 md:px-8">
+		<div class="flex flex-col md:flex-row items-center gap-6 md:gap-4">
+			<div class="flex items-center gap-3 md:w-1/3">
+				{config.logoSrc && (
+					<a href="/">
+						<img
+							src={config.logoSrc}
+							alt={config.logoAlt ?? config.title}
+							class="w-8 h-auto opacity-60 hover:opacity-100 transition-opacity"
+						/>
+					</a>
+				)}
+				<span class="text-white/40 text-sm">
+					&copy; {year} {copyright}
+				</span>
+			</div>
+
+			<div class="flex gap-6 md:w-1/3 justify-center">
+				{config.navLinks.map((link) => (
+					<a
+						href={link.href}
+						class="text-white/40 text-sm hover:text-white/70 transition-colors"
+					>
+						{link.label}
+					</a>
+				))}
+			</div>
+
+			<div class="flex gap-4 md:w-1/3 justify-end">
+				<a
+					href={config.socialLinks.github}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-white/30 hover:text-white/60 transition-colors"
+				>
+					<GithubIcon class="w-5" />
+				</a>
+				{config.socialLinks.linkedin && (
+					<a
+						href={config.socialLinks.linkedin}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-white/30 hover:text-white/60 transition-colors"
+					>
+						<LinkedInIcon class="w-5" />
+					</a>
+				)}
+			</div>
+		</div>
+	</div>
+</footer>

package/src/components/GithubIcon.astro

@@ -0,0 +1,12 @@
+---
+type Props = {
+	class?: string;
+};
+
+const { class: className = "w-5 text-white" } = Astro.props;
+---
+
+<svg class={className} fill="currentColor" viewBox="0 0 24 24">
+	<title>GitHub</title>
+	<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+</svg>

package/src/components/HeroSection.astro

@@ -0,0 +1,59 @@
+---
+type Props = {
+	title: string;
+	description: string;
+	installCommand: string;
+	logoSrc?: string;
+	logoAlt?: string;
+};
+
+const { title, description, installCommand, logoSrc, logoAlt } = Astro.props;
+const hasExtra = Astro.slots.has("default");
+---
+
+<section class="flex flex-col items-center justify-center px-6 py-24 md:py-32 text-center max-w-3xl mx-auto">
+	{logoSrc && (
+		<img src={logoSrc} alt={logoAlt ?? title} class="w-20 h-20 md:w-24 md:h-24 mb-8" />
+	)}
+	<h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white leading-[1.1] mb-4">
+		{title}
+	</h1>
+	<p class="text-lg text-white/50 leading-relaxed max-w-xl mb-10">{description}</p>
+	<button
+		type="button"
+		class="copy-btn group rounded-lg border border-white/10 bg-white/5 hover:bg-white/[0.08] px-5 py-3 font-mono text-sm text-white/70 transition-colors cursor-pointer"
+		data-code={installCommand}
+	>
+		<span class="text-accent">$</span>
+		<span class="ml-2">{installCommand}</span>
+		<span class="ml-3 text-white/30 group-hover:text-white/50 transition-colors text-xs copy-label">
+			Copy
+		</span>
+	</button>
+	{hasExtra && (
+		<div class="mt-12">
+			<slot />
+		</div>
+	)}
+</section>
+
+<script>
+	function initCopyButtons() {
+		document.querySelectorAll(".copy-btn").forEach((btn) => {
+			if (btn.dataset.initialized) return;
+			btn.dataset.initialized = "true";
+			btn.addEventListener("click", async () => {
+				const code = btn.dataset.code;
+				if (!code) return;
+				await navigator.clipboard.writeText(code);
+				const label = btn.querySelector(".copy-label");
+				if (label) {
+					label.textContent = "Copied!";
+					setTimeout(() => { label.textContent = "Copy"; }, 2000);
+				}
+			});
+		});
+	}
+	initCopyButtons();
+	document.addEventListener("astro:after-swap", initCopyButtons);
+</script>

package/src/components/LinkedInIcon.astro

@@ -0,0 +1,12 @@
+---
+type Props = {
+	class?: string;
+};
+
+const { class: className = "w-5 text-white" } = Astro.props;
+---
+
+<svg class={className} fill="currentColor" viewBox="0 0 24 24">
+	<title>LinkedIn</title>
+	<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+</svg>

package/src/components/Navbar.astro

@@ -0,0 +1,189 @@
+---
+import type { SiteConfig } from "../types/config";
+import GithubIcon from "./GithubIcon.astro";
+import SearchModal from "./SearchModal.astro";
+
+type Props = {
+	config: SiteConfig;
+	currentPath: string;
+};
+
+const { config, currentPath } = Astro.props;
+---
+
+<header class="sticky top-0 z-50 h-16 border-b border-white/10 bg-black/80 backdrop-blur-md">
+	<div class="max-w-7xl h-full mx-auto px-6 md:px-8 flex items-center justify-between">
+		<a href="/" class="flex items-center gap-3 text-white hover:opacity-80 transition-opacity">
+			{config.logoSrc ? (
+				<img src={config.logoSrc} alt={config.logoAlt ?? config.title} class="h-7" />
+			) : (
+				<span class="text-base font-semibold tracking-tight">{config.title}</span>
+			)}
+		</a>
+
+		<nav class="hidden md:flex items-center gap-6">
+			{config.navLinks.map((link) => (
+				<a
+					href={link.href}
+					class:list={[
+						"text-sm font-medium transition-colors duration-150",
+						currentPath.startsWith(link.href)
+							? "text-white"
+							: "text-white/50 hover:text-white/80",
+					]}
+				>
+					{link.label}
+				</a>
+			))}
+			<button
+				id="search-trigger"
+				type="button"
+				class="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] px-3 py-1.5 text-white/40 hover:text-white/60 transition-colors cursor-pointer"
+			>
+				<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+					<circle cx="11" cy="11" r="7" />
+					<line x1="16.5" y1="16.5" x2="21" y2="21" />
+				</svg>
+				<span class="text-xs">Search</span>
+				<kbd class="ml-2 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] font-mono text-white/30">
+					<span class="text-[10px]">&#8984;</span>K
+				</kbd>
+			</button>
+			<a
+				href={config.githubUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-white/40 hover:text-white/70 transition-colors duration-150"
+			>
+				<GithubIcon class="w-5" />
+			</a>
+		</nav>
+
+		<div class="flex items-center gap-3 md:hidden">
+			<button
+				id="search-trigger-mobile"
+				type="button"
+				class="text-white/50 hover:text-white transition-colors cursor-pointer"
+				aria-label="Search"
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+					<circle cx="11" cy="11" r="7" />
+					<line x1="16.5" y1="16.5" x2="21" y2="21" />
+				</svg>
+			</button>
+			<button
+				id="mobile-nav-toggle"
+				type="button"
+				class="text-white/60 hover:text-white transition-colors cursor-pointer"
+				aria-label="Toggle menu"
+			>
+				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
+				</svg>
+			</button>
+		</div>
+	</div>
+</header>
+
+<div id="mobile-nav-overlay" class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm hidden md:hidden"></div>
+
+<nav
+	id="mobile-nav-menu"
+	class="fixed top-0 right-0 z-50 h-dvh w-72 bg-black border-l border-white/10 transform translate-x-full transition-transform duration-200 ease-out md:hidden overflow-y-auto"
+>
+	<div class="flex items-center justify-between px-6 py-5 border-b border-white/10">
+		<span class="text-sm font-semibold text-white">{config.title}</span>
+		<button
+			id="mobile-nav-close"
+			type="button"
+			class="text-white/60 hover:text-white transition-colors cursor-pointer"
+			aria-label="Close menu"
+		>
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+			</svg>
+		</button>
+	</div>
+
+	<div class="px-6 py-4 flex flex-col gap-3 border-b border-white/10">
+		{config.navLinks.map((link) => (
+			<a
+				href={link.href}
+				class:list={[
+					"text-sm font-medium transition-colors",
+					currentPath.startsWith(link.href)
+						? "text-white"
+						: "text-white/50 hover:text-white/80",
+				]}
+			>
+				{link.label}
+			</a>
+		))}
+	</div>
+
+	{config.sidebarSections.length > 0 && (
+		<div class="px-6 py-4">
+			{config.sidebarSections.map((section) => (
+				<div class="mb-5">
+					<div class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-2">
+						{section.title}
+					</div>
+					<div class="flex flex-col">
+						{section.links.map((link) => (
+							<a
+								href={link.href}
+								class:list={[
+									"block py-1.5 pl-3 text-sm border-l-2 transition-colors",
+									currentPath === link.href
+										? "border-accent text-white font-medium"
+										: "border-transparent text-white/50 hover:text-white/80 hover:border-white/20",
+								]}
+							>
+								{link.label}
+							</a>
+						))}
+					</div>
+				</div>
+			))}
+		</div>
+	)}
+
+	<div class="px-6 py-4 border-t border-white/10 mt-auto flex gap-4">
+		<a
+			href={config.socialLinks.github}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="text-white/30 hover:text-white/60 transition-colors"
+		>
+			<GithubIcon class="w-5" />
+		</a>
+	</div>
+</nav>
+
+<SearchModal />
+
+<script>
+	function initMobileNav() {
+		const toggle = document.getElementById("mobile-nav-toggle");
+		const close = document.getElementById("mobile-nav-close");
+		const overlay = document.getElementById("mobile-nav-overlay");
+		const menu = document.getElementById("mobile-nav-menu");
+
+		function open() {
+			overlay?.classList.remove("hidden");
+			menu?.classList.remove("translate-x-full");
+		}
+
+		function shut() {
+			overlay?.classList.add("hidden");
+			menu?.classList.add("translate-x-full");
+		}
+
+		toggle?.addEventListener("click", open);
+		close?.addEventListener("click", shut);
+		overlay?.addEventListener("click", shut);
+	}
+
+	initMobileNav();
+	document.addEventListener("astro:after-swap", initMobileNav);
+</script>

package/src/components/PackageInfo.astro

@@ -0,0 +1,92 @@
+---
+type Props = {
+	packageName: string;
+	githubRepo?: string;
+};
+
+const { packageName, githubRepo } = Astro.props;
+
+type NpmData = { version: string; license: string };
+type GithubData = { stars: number };
+
+async function fetchNpm(): Promise<NpmData | null> {
+	try {
+		const controller = new AbortController();
+		const timeout = setTimeout(() => controller.abort(), 3000);
+		const res = await fetch(`https://registry.npmjs.org/${packageName}/latest`, {
+			signal: controller.signal,
+		});
+		clearTimeout(timeout);
+		if (!res.ok) return null;
+		const data = await res.json();
+		return { version: data.version, license: data.license ?? "" };
+	} catch {
+		return null;
+	}
+}
+
+async function fetchGithub(): Promise<GithubData | null> {
+	if (!githubRepo) return null;
+	try {
+		const controller = new AbortController();
+		const timeout = setTimeout(() => controller.abort(), 3000);
+		const res = await fetch(`https://api.github.com/repos/${githubRepo}`, {
+			signal: controller.signal,
+			headers: { Accept: "application/vnd.github.v3+json" },
+		});
+		clearTimeout(timeout);
+		if (!res.ok) return null;
+		const data = await res.json();
+		return { stars: data.stargazers_count ?? 0 };
+	} catch {
+		return null;
+	}
+}
+
+const [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
+---
+
+<div class="flex items-center gap-3 flex-wrap text-xs font-mono my-4">
+	{npm?.version && (
+		<a
+			href={`https://www.npmjs.com/package/${packageName}`}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-accent hover:bg-white/[0.06] transition-colors"
+		>
+			<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
+				<path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z" />
+			</svg>
+			v{npm.version}
+		</a>
+	)}
+	{npm?.license && (
+		<span class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50">
+			{npm.license}
+		</span>
+	)}
+	{github && github.stars > 0 && (
+		<a
+			href={`https://github.com/${githubRepo}`}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50 hover:bg-white/[0.06] transition-colors"
+		>
+			<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+				<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279L0 9.306l8.332-1.151z" />
+			</svg>
+			{github.stars.toLocaleString()}
+		</a>
+	)}
+	<a
+		href={`https://bundlephobia.com/package/${packageName}${npm?.version ? `@${npm.version}` : ""}`}
+		target="_blank"
+		rel="noopener noreferrer"
+		class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50 hover:bg-white/[0.06] transition-colors"
+	>
+		<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+			<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
+		</svg>
+		bundlephobia
+	</a>
+</div>

package/src/components/PageLayout.astro

@@ -0,0 +1,20 @@
+---
+import type { SiteConfig } from "../types/config";
+import Footer from "./Footer.astro";
+import Navbar from "./Navbar.astro";
+
+type Props = {
+	config: SiteConfig;
+	currentPath: string;
+};
+
+const { config, currentPath } = Astro.props;
+---
+
+<div class="flex flex-col min-h-dvh">
+	<Navbar config={config} currentPath={currentPath} />
+	<main class="flex-1">
+		<slot />
+	</main>
+	<Footer config={config} />
+</div>

package/src/components/PropsTable.astro

@@ -0,0 +1,45 @@
+---
+import type { PropsTableRow } from "../types/props";
+
+type Props = {
+	title?: string;
+	rows: Array<PropsTableRow>;
+};
+
+const { title, rows } = Astro.props;
+---
+
+<div class="my-6">
+	{title && <h3 class="text-lg font-semibold text-white mb-4">{title}</h3>}
+	<div class="rounded-lg border border-white/10 overflow-hidden">
+		<div class="overflow-x-auto">
+			<table class="w-full text-left text-sm">
+				<thead>
+					<tr class="border-b border-white/10 bg-white/[0.02]">
+						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Prop</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Type</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Default</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Description</th>
+					</tr>
+				</thead>
+				<tbody>
+					{rows.map((row) => (
+						<tr class="border-b border-white/[0.04] last:border-b-0">
+							<td class="py-3 px-4">
+								<code class="text-accent font-mono text-xs">{row.name}</code>
+								{row.required && <span class="ml-1 text-red-400 text-xs">*</span>}
+							</td>
+							<td class="py-3 px-4">
+								<code class="text-white/50 font-mono text-xs">{row.type}</code>
+							</td>
+							<td class="py-3 px-4 text-white/35 text-xs font-mono">
+								{row.defaultValue ?? "\u2014"}
+							</td>
+							<td class="py-3 px-4 text-white/60 text-sm">{row.description}</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>