@sableui/react 0.2.0 → 0.3.1

package/llms/blocks/sign-up-block.md

@@ -0,0 +1,78 @@
+# SignUpBlock
+
+A sign-up card: name, work email and password as labelled Fields, one full-width Create account, and a link to sign in instead.
+
+**Intent:** Reach for this to create an account inside a surface you already have, or as the form of a sign-up route. For the whole route with brand art beside it, start from the AuthPage page shell and drop this card in.
+
+**Block:** Auth · card · designed for 18rem–24rem wide (fills its container up to the max)
+
+## Notes
+
+- Visible labels, not placeholders: someone filling a new form needs to see what each field is after typing in it.
+- The password rule is stated up front in the Field description, before anyone fails it.
+- `onSignUp` receives the fields only after the browser's own validation (required, type=email, minLength) passes.
+
+## Accessibility
+
+- Field wires each label, description and error to its input; never hand-roll <label> + <input> pairs.
+- autoComplete hints (name, email, new-password) let password managers offer to generate and save the password.
+
+## Source
+
+```tsx
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Field, Form, Input } from "@sableui/react"
+
+export interface SignUpBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a Sheet, Dialog or muted section that already frames it. */
+	framed?: boolean
+	/** Called with the submitted fields once the browser's validation passes. */
+	onSignUp?: (account: { name: string; email: string; password: string }) => void
+}
+
+export function SignUpBlock({ className, framed = true, onSignUp }: SignUpBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-sm", className)}>
+			<CardHeader>
+				<CardTitle>Create your account</CardTitle>
+				<CardDescription>Free for 14 days. No card needed.</CardDescription>
+			</CardHeader>
+			<Form
+				className="gap-0"
+				onSubmit={(event) => {
+					event.preventDefault()
+					const data = new FormData(event.currentTarget)
+					onSignUp?.({
+						name: String(data.get("name") ?? ""),
+						email: String(data.get("email") ?? ""),
+						password: String(data.get("password") ?? ""),
+					})
+				}}
+			>
+				<CardContent className="flex flex-col gap-3">
+					<Field label="Name" name="name" required>
+						<Input autoComplete="name" />
+					</Field>
+					<Field label="Work email" name="email" required>
+						<Input type="email" autoComplete="email" placeholder="you@studio.com" />
+					</Field>
+					<Field label="Password" name="password" description="At least 12 characters." required>
+						<Input type="password" autoComplete="new-password" minLength={12} />
+					</Field>
+				</CardContent>
+				<CardFooter className="flex-col items-stretch gap-3">
+					<Button type="submit" className="w-full">
+						Create account
+					</Button>
+					<p className="text-center text-caption text-muted-foreground">
+						Already have an account?{" "}
+						<a href="/sign-in" className="text-foreground underline underline-offset-4 motion-interactive hover:text-muted-foreground">
+							Sign in
+						</a>
+					</p>
+				</CardFooter>
+			</Form>
+		</Card>
+	)
+}
+```

package/llms/blocks/site-footer-block.md

@@ -0,0 +1,96 @@
+# SiteFooterBlock
+
+A site footer: the brand and a one-line tagline beside link groups in a labelled Footer nav, over a copyright line.
+
+**Intent:** Reach for this at the foot of a marketing or docs site. App screens inside an AppShell take no footer; their navigation lives in the sidebar.
+
+**Block:** Marketing · section
+
+## Notes
+
+- Copied from the LandingPage page shell's footer.
+- Every link is at least 36px tall (min-h-9), so the dense list is still an easy touch target.
+- Groups go two up on a phone and three up from sm; add a group only if it has three links or more.
+
+## Accessibility
+
+- Renders <footer> with a <nav aria-label="Footer">, distinct from the page's main navigation.
+- Group titles are h2s, so the footer's structure is navigable by heading.
+
+## Source
+
+```tsx
+import { cn, Region, Stack } from "@sableui/react"
+
+const brand = { name: "Sable", tagline: "React components, patterns, and tokens for products built with AI agents." }
+
+const groups = [
+	{
+		title: "Product",
+		links: [
+			{ label: "Components", href: "/components" },
+			{ label: "Patterns", href: "/patterns" },
+			{ label: "Themes", href: "/themes" },
+			{ label: "Canvas", href: "/canvas" },
+		],
+	},
+	{
+		title: "Resources",
+		links: [
+			{ label: "Documentation", href: "/docs" },
+			{ label: "Changelog", href: "/changelog" },
+			{ label: "llms.txt", href: "/llms.txt" },
+		],
+	},
+	{
+		title: "Community",
+		links: [
+			{ label: "GitHub", href: "/github" },
+			{ label: "npm", href: "/npm" },
+			{ label: "Discussions", href: "/discussions" },
+		],
+	},
+]
+
+export interface SiteFooterBlockProps {
+	className?: string
+}
+
+export function SiteFooterBlock({ className }: SiteFooterBlockProps) {
+	return (
+		<footer className={cn("w-full border-t border-border", className)}>
+			<Region max="wide" className="py-12">
+				<div className="grid gap-10 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
+					<Stack gap={3} className="max-w-xs">
+						<a href="/" className="w-fit text-title-lg motion-interactive hover:text-muted-foreground">
+							{brand.name}
+						</a>
+						<p className="text-body-sm text-muted-foreground">{brand.tagline}</p>
+					</Stack>
+					<nav aria-label="Footer" className="grid grid-cols-2 gap-8 sm:grid-cols-3">
+						{groups.map((group) => (
+							<div key={group.title}>
+								<h2 className="text-label-md text-muted-foreground">{group.title}</h2>
+								<ul className="mt-3 flex flex-col gap-1">
+									{group.links.map((link) => (
+										<li key={link.label}>
+											<a href={link.href} className="flex min-h-9 items-center text-body-sm motion-interactive hover:text-muted-foreground">
+												{link.label}
+											</a>
+										</li>
+									))}
+								</ul>
+							</div>
+						))}
+					</nav>
+				</div>
+				<div className="mt-12 border-t border-border pt-6">
+					<p className="text-caption text-muted-foreground">
+						© 2026 {brand.name}. Released under the MIT license.
+					</p>
+				</div>
+			</Region>
+		</footer>
+	)
+}
+```

package/llms/blocks/stat-row-block.md

@@ -0,0 +1,59 @@
+# StatRowBlock
+
+A KPI row: four stat cards, each a label, the value in the metric mono tier, and a trend Badge with its comparison note — 2 × 2 on a phone, one row from xl.
+
+**Intent:** Reach for this at the top of a dashboard or report, above the tables and charts it summarises. One headline number worth splitting into categories is RevenueBreakdownBlock.
+
+**Block:** Dashboard · section
+
+## Notes
+
+- Copied from the DashboardPage page shell's stat row.
+- Values are `text-mono-xl` — tabular figures, never a heading tier — so the four numbers align digit for digit.
+- The trend Badge sits with its note in CardContent, so the value keeps the full card width when the row folds to 2 × 2.
+- Keep it to four. A fifth stat is a sign one of them belongs in a table.
+
+## Accessibility
+
+- The trend is stated in text (+8.2%) with an arrow icon; the tone is reinforcement, not the signal.
+- Each card's label is read before its value, in source order.
+
+## Source
+
+```tsx
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, Grid, Icon, Row } from "@sableui/react"
+
+const stats = [
+	{ label: "Revenue", value: "$18,240", delta: "+8.2%", up: true, note: "vs. $16,857" },
+	{ label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 first-time" },
+	{ label: "Collectors", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
+	{ label: "Sell-through", value: "64%", delta: "−1.8%", up: false, note: "6 open editions" },
+]
+
+export interface StatRowBlockProps {
+	className?: string
+}
+
+export function StatRowBlock({ className }: StatRowBlockProps) {
+	return (
+		<Grid cols={{ base: 2, xl: 4 }} gap={3} className={cn("w-full", className)}>
+			{stats.map((stat) => (
+				<Card key={stat.label}>
+					<CardHeader>
+						<CardDescription>{stat.label}</CardDescription>
+						<CardTitle className="text-mono-xl">{stat.value}</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<Row gap={1} wrap>
+							<Badge tone={stat.up ? "success" : "warning"} size="sm" icon={<Icon name={stat.up ? "arrow-up" : "arrow-down"} />}>
+								{stat.delta}
+							</Badge>
+							<span className="text-caption text-muted-foreground">{stat.note}</span>
+						</Row>
+					</CardContent>
+				</Card>
+			))}
+		</Grid>
+	)
+}
+```

package/llms/blocks/steps-block.md

@@ -0,0 +1,73 @@
+# StepsBlock
+
+A how-it-works section: the heading, lede and a guide link on the left; three numbered steps on the right, each under a strong rule.
+
+**Intent:** Reach for this when the pitch is a sequence — onboarding, a workflow, a setup. Parallel benefits with no order are FeatureGridBlock; progress through a live process is a Stepper.
+
+**Block:** Marketing · section
+
+## Notes
+
+- Copied from the BrandLandingPage page shell's how-it-works section.
+- The steps are an <ol>, so the order is semantic and the 01 / 02 / 03 numbers are its visual echo, set in the mono tier.
+- Three steps fit the 1 : 2 split on desktop; on a phone everything stacks with the intro first.
+
+## Accessibility
+
+- Each step has an h3 under the section's h2.
+- The guide link is an <a> styled as an outline Button, because it navigates.
+
+## Source
+
+```tsx
+import { useId } from "react"
+import { Button, cn, Icon, Region, Stack } from "@sableui/react"
+
+const intro = {
+	eyebrow: "How it works",
+	title: "From request to sealed record.",
+	lede: "Teams are usually live within a week. Cove adapts to the routes you already run instead of asking you to start over.",
+	link: { label: "Read the rollout guide", href: "/guides/rollout" },
+}
+
+const steps = [
+	{ title: "Connect your spaces", body: "Bring teams, vendors, and record stores into one workspace, with roles that mirror how you already work." },
+	{ title: "Route every approval", body: "Requests follow the path you define, with reviewers, deadlines, and escalation built in from the start." },
+	{ title: "Seal the record", body: "Approved work is archived with its full context and is ready for review the moment it closes." },
+]
+
+export interface StepsBlockProps {
+	className?: string
+}
+
+export function StepsBlock({ className }: StepsBlockProps) {
+	const titleId = useId()
+	return (
+		<Region as="section" aria-labelledby={titleId} max="wide" className={cn("w-full py-16 sm:py-24", className)}>
+			<div className="grid gap-12 lg:grid-cols-[1fr_2fr] lg:gap-16">
+				<Stack gap={2} className="max-w-md">
+					<p className="text-overline text-muted-foreground">{intro.eyebrow}</p>
+					<h2 id={titleId} className="text-balance text-heading-1">
+						{intro.title}
+					</h2>
+					<p className="text-body-md text-muted-foreground">{intro.lede}</p>
+					<div className="pt-3">
+						<Button variant="outline" iconEnd={<Icon name="arrow-right" />} render={<a href={intro.link.href} />}>
+							{intro.link.label}
+						</Button>
+					</div>
+				</Stack>
+				<ol className="grid gap-10 sm:grid-cols-3 sm:gap-6">
+					{steps.map((step, index) => (
+						<li key={step.title} className="flex flex-col gap-2 border-t border-border-strong pt-6">
+							<span className="text-mono-sm text-muted-foreground">{String(index + 1).padStart(2, "0")}</span>
+							<h3 className="mt-3 text-title-lg sm:mt-6">{step.title}</h3>
+							<p className="text-body-sm text-muted-foreground">{step.body}</p>
+						</li>
+					))}
+				</ol>
+			</div>
+		</Region>
+	)
+}
+```

package/llms/blocks/task-list-block.md

@@ -0,0 +1,81 @@
+# TaskListBlock
+
+A checklist card: a titled list of Checkbox rows with a category Badge each, a live count of what is left, and a quiet Add task action.
+
+**Intent:** Reach for this for a short, personal to-do list on a dashboard or in onboarding. A team's task board with assignees and status columns needs a Table or DataTable.
+
+**Block:** Dashboard · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- Finishing a task strikes it through and mutes it rather than removing it, so the list does not jump under the pointer.
+- The count in CardAction updates with every check, so progress reads without counting rows.
+- Add task is a ghost Button in the footer — present, but quieter than the list.
+
+## Accessibility
+
+- Every Checkbox has a real <Label htmlFor>, so the whole title is the click target and the accessible name.
+- Category Badges carry text; the tone only groups them visually.
+
+## Source
+
+```tsx
+import { useState, useId } from "react"
+import { Badge, Button, Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, cn, Icon, Label } from "@sableui/react"
+
+const tasks = [
+	{ title: "Pick the cover type", tag: "Design", tone: "collectible", done: true },
+	{ title: "Wire up checkout", tag: "Engineering", tone: "info", done: false },
+	{ title: "Draft launch post", tag: "Launch", tone: "edition", done: false },
+] as const
+
+export interface TaskListBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	onAddTask?: () => void
+}
+
+export function TaskListBlock({ className, framed = true, onAddTask }: TaskListBlockProps) {
+	const [done, setDone] = useState<boolean[]>(tasks.map((t) => t.done))
+	const id = useId()
+	const left = done.filter((d) => !d).length
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs", className)}>
+			<CardHeader>
+				<CardTitle>This week</CardTitle>
+				<CardAction>
+					<span className="text-caption text-muted-foreground">{left} left</span>
+				</CardAction>
+			</CardHeader>
+			<CardContent>
+				<ul className="flex flex-col gap-1">
+					{tasks.map((task, i) => (
+						<li key={task.title} className="flex items-center gap-3 py-1.5">
+							<Checkbox
+								id={`${id}-${i}`}
+								checked={done[i]}
+								onCheckedChange={(v: boolean) => setDone(done.map((d, j) => (j === i ? v : d)))}
+							/>
+							<Label
+								htmlFor={`${id}-${i}`}
+								className={cn("min-w-0 flex-1 motion-interactive", done[i] && "text-muted-foreground line-through")}
+							>
+								{task.title}
+							</Label>
+							<Badge tone={task.tone} size="sm">
+								{task.tag}
+							</Badge>
+						</li>
+					))}
+				</ul>
+			</CardContent>
+			<CardFooter>
+				<Button variant="ghost" size="sm" iconStart={<Icon name="plus" />} onClick={onAddTask}>
+					Add task
+				</Button>
+			</CardFooter>
+		</Card>
+	)
+}
+```

package/llms/blocks/team-members-block.md

@@ -0,0 +1,91 @@
+# TeamMembersBlock
+
+A members card: Entity rows with avatar, name and email, a role Badge, and an OverflowMenu of role changes and removal; pending invites sit in the same list.
+
+**Intent:** Reach for this to manage who is in a workspace, project or team. For inviting people when the list is empty or short, InviteTeamBlock is the lighter shape; for hundreds of members with filters, use a DataTable.
+
+**Block:** Settings & team · card · designed for 20rem–42rem wide (fills its container up to the max)
+
+## Notes
+
+- Each row's menu offers only what applies to it: Make admin or Make member, Resend invite for pending rows, then the destructive action after a separator.
+- The owner has no menu — ownership is transferred elsewhere — and a control-sized spacer keeps the role badges aligned.
+- Pending invites are outline Badges in the same list, so the team's full size reads in one place.
+
+## Accessibility
+
+- Each OverflowMenu is labelled with the member's name ("Manage Mara Okafor"), so the triggers are distinguishable in a list.
+- Roles are text in a Badge; tone only distinguishes the owner.
+
+## Source
+
+```tsx
+import { Avatar, Badge, Button, Card, CardAction, CardDescription, CardHeader, CardList, CardTitle, cn, Entity, Icon, MenuItem, MenuSeparator, OverflowMenu } from "@sableui/react"
+
+const members = [
+	{ id: "u1", name: "Ada Lovelace", initials: "AL", email: "ada@studio.com", role: "Owner" },
+	{ id: "u2", name: "Mara Okafor", initials: "MO", email: "mara@studio.com", role: "Admin" },
+	{ id: "u3", name: "Sam Rivera", initials: "SR", email: "sam@studio.com", role: "Member" },
+	{ id: "u4", name: "jun@studio.com", initials: "J", email: "Invited 2 days ago", role: "Pending" },
+]
+
+export interface TeamMembersBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	onInvite?: () => void
+	/** Called with the member's id and the action chosen from their menu. */
+	onMemberAction?: (id: string, action: "make-admin" | "make-member" | "resend" | "remove") => void
+}
+
+export function TeamMembersBlock({ className, framed = true, onInvite, onMemberAction }: TeamMembersBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-2xl", className)}>
+			<CardHeader>
+				<CardTitle render={<h2 />}>Members</CardTitle>
+				<CardDescription>{members.length} people in this workspace.</CardDescription>
+				<CardAction>
+					<Button size="sm" iconStart={<Icon name="plus" />} onClick={onInvite}>
+						Invite
+					</Button>
+				</CardAction>
+			</CardHeader>
+			<CardList>
+				{members.map((m) => (
+					<Entity
+						key={m.id}
+						leading={<Avatar size="sm" fallback={m.initials} alt={m.name} />}
+						title={m.name}
+						subtitle={m.email}
+						action={
+							<div className="flex items-center gap-2">
+								<Badge appearance={m.role === "Pending" ? "outline" : "plain"} tone={m.role === "Owner" ? "edition" : "neutral"} size="sm">
+									{m.role}
+								</Badge>
+								{/* The owner is not managed from here; a placeholder keeps the column aligned. */}
+								{m.role === "Owner" ? (
+									<span aria-hidden className="size-(--control-sm)" />
+								) : (
+									<OverflowMenu label={`Manage ${m.name}`} size="icon-sm">
+										{m.role === "Pending" ? (
+											<MenuItem onClick={() => onMemberAction?.(m.id, "resend")}>Resend invite</MenuItem>
+										) : m.role === "Admin" ? (
+											<MenuItem onClick={() => onMemberAction?.(m.id, "make-member")}>Make member</MenuItem>
+										) : (
+											<MenuItem onClick={() => onMemberAction?.(m.id, "make-admin")}>Make admin</MenuItem>
+										)}
+										<MenuSeparator />
+										<MenuItem variant="destructive" onClick={() => onMemberAction?.(m.id, "remove")}>
+											{m.role === "Pending" ? "Cancel invite" : "Remove from workspace"}
+										</MenuItem>
+									</OverflowMenu>
+								)}
+							</div>
+						}
+					/>
+				))}
+			</CardList>
+		</Card>
+	)
+}
+```

package/llms/blocks/testimonial-block.md

@@ -0,0 +1,78 @@
+# TestimonialBlock
+
+A customer story: one large blockquote with the person's avatar, name and role, beside three outcome figures separated by rules.
+
+**Intent:** Reach for this for one strong, attributable quote backed by numbers. A wall of short quotes is a different section; a logo row is Marquee.
+
+**Block:** Marketing · section
+
+## Notes
+
+- Copied from the BrandLandingPage page shell's customer story.
+- The quote and the outcomes share one Card as a <figure>; the outcomes move under the quote below lg.
+- Outcome values use display sizes because they are the proof; their labels say what each number counts.
+
+## Accessibility
+
+- <figure> + <blockquote> + <figcaption> tie the quote to the person who said it.
+- The section is labelled "Customer story" so it is reachable as a landmark.
+
+## Source
+
+```tsx
+import { Avatar, Card, CardContent, cn, Region, Separator, Stack } from "@sableui/react"
+
+const story = {
+	quote: "We used to chase approvals across four tools. Now every request has an owner, a deadline, and a record, and our auditors stopped asking for screenshots.",
+	name: "Maya Okafor",
+	initials: "MO",
+	role: "Head of operations, Fielddesk",
+}
+
+const outcomes = [
+	{ value: "3.2×", label: "faster approvals in the first quarter" },
+	{ value: "68%", label: "fewer follow-ups on handoffs" },
+	{ value: "1 day", label: "to prepare a quarterly audit" },
+]
+
+export interface TestimonialBlockProps {
+	className?: string
+}
+
+export function TestimonialBlock({ className }: TestimonialBlockProps) {
+	return (
+		<Region as="section" aria-label="Customer story" max="wide" className={cn("w-full py-16", className)}>
+			<Card render={<figure />}>
+				<div className="grid lg:grid-cols-[1.5fr_1fr]">
+					<CardContent className="flex flex-col justify-between gap-10 sm:p-10">
+						<Stack gap={3}>
+							<p className="text-overline text-muted-foreground">Customer story</p>
+							<blockquote className="text-balance text-heading-3 sm:text-heading-2">“{story.quote}”</blockquote>
+						</Stack>
+						<figcaption className="flex items-center gap-3">
+							<Avatar size="lg" fallback={story.initials} alt={story.name} />
+							<div>
+								<p className="text-title-sm">{story.name}</p>
+								<p className="text-body-sm text-muted-foreground">{story.role}</p>
+							</div>
+						</figcaption>
+					</CardContent>
+					<div className="border-border max-lg:border-t lg:border-s">
+						<CardContent className="flex h-full flex-col justify-center gap-6 sm:p-10">
+							{outcomes.map((outcome, index) => (
+								<Stack key={outcome.label} gap={3}>
+									{index > 0 && <Separator />}
+									<div>
+										<p className="text-heading-1 sm:text-display-lg">{outcome.value}</p>
+										<p className="mt-1 text-body-sm text-muted-foreground">{outcome.label}</p>
+									</div>
+								</Stack>
+							))}
+						</CardContent>
+					</div>
+				</div>
+			</Card>
+		</Region>
+	)
+}
+```

package/llms/blocks/traffic-sources-block.md

@@ -0,0 +1,63 @@
+# TrafficSourcesBlock
+
+A share card: a donut PieChart of where a total comes from, the total in the hole, a legend, and the headline share in words in the footer.
+
+**Intent:** Reach for this for a split of one total into four or fewer parts — traffic sources, revenue by plan, tickets by channel. More parts, or values to compare exactly, belong in a horizontal BarChart.
+
+**Block:** Dashboard · card · designed for 18rem–24rem wide (fills its container up to the max)
+
+## Notes
+
+- The total sits in the donut's hole, so the card answers "how many" and "from where" at once.
+- The footer puts the biggest share in a sentence — the takeaway does not depend on reading the slices.
+- The slices sweep in clockwise as the card scrolls into view.
+
+## Accessibility
+
+- The chart's data table lists every source and its count; the legend repeats it visually.
+- Hovering or arrowing through the slices pulls each out and announces it.
+
+## Source
+
+```tsx
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, PieChart } from "@sableui/react"
+
+const sources = [
+	{ source: "Search", visitors: 4280 },
+	{ source: "Direct", visitors: 2910 },
+	{ source: "Social", visitors: 1840 },
+	{ source: "Email", visitors: 960 },
+]
+
+const total = sources.reduce((sum, s) => sum + s.visitors, 0)
+
+export interface TrafficSourcesBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+}
+
+export function TrafficSourcesBlock({ className, framed = true }: TrafficSourcesBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-sm", className)}>
+			<CardHeader>
+				<CardTitle render={<h2 />}>Traffic sources</CardTitle>
+				<CardDescription>Where this month's visitors came from.</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<PieChart
+					label="Visitors by source, this month"
+					data={sources}
+					index="source"
+					valueKey="visitors"
+					donut
+					centerLabel={{ value: total.toLocaleString("en-US"), label: "Visitors" }}
+				/>
+			</CardContent>
+			<CardFooter className="text-body-sm text-muted-foreground">
+				Search brings {Math.round((sources[0].visitors / total) * 100)}% of visitors.
+			</CardFooter>
+		</Card>
+	)
+}
+```