@sableui/react 0.1.1 → 0.3.0

package/llms/blocks/event-card-block.md

@@ -0,0 +1,84 @@
+# EventCardBlock
+
+An upcoming-event card: a DateTile beside the title and time, a "starts in" Badge, attendees as an AvatarGroup, and Decline / Join.
+
+**Intent:** Reach for this for the next meeting, booking or live session on a dashboard or home screen. For a list of many upcoming events, use Entity rows with a DateTile as `leading`.
+
+**Block:** Dashboard · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- The DateTile names the day; the full weekday and time range sit in text beside it.
+- The Badge is one title line tall and wraps under the title rather than squeezing it onto two lines.
+- AvatarGroup `fit` trades avatars for the +N count before it pushes the actions to their own line.
+
+## Accessibility
+
+- DateTile is a <time> with a machine-readable date; the time range is plain text read in order after the title.
+- The AvatarGroup's aria-label states the total attendee count.
+
+## Source
+
+```tsx
+import { Avatar, AvatarGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardTitle, cn, DateTile } from "@sableui/react"
+
+const event = {
+	title: "Design review",
+	date: new Date(2026, 9, 14),
+	when: "Tuesday, 2:00 – 2:45 PM",
+	starts: "In 10 min",
+	attendees: ["MO", "SR", "JL"],
+	total: 7,
+}
+
+export interface EventCardBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	/** Called with the person's answer. */
+	onRespond?: (answer: "join" | "decline") => void
+}
+
+export function EventCardBlock({ className, framed = true, onRespond }: EventCardBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs", className)}>
+			<CardContent className="flex gap-4">
+				<DateTile date={event.date} />
+				<div className="flex min-w-0 flex-1 flex-col gap-1">
+					{/* The row carries the title's type, so the badge's box is exactly
+					    one title line (`h-[1lh]`): it centres on the title and never
+					    makes the row taller than the title alone. When a bolder or
+					    roomier look leaves no space beside the title, the badge wraps
+					    to its own line instead of squeezing the title onto two. */}
+					<div className="flex flex-wrap items-start justify-between gap-x-2 text-title-lg">
+						<CardTitle>{event.title}</CardTitle>
+						<span className="flex h-[1lh] shrink-0 items-center">
+							<Badge tone="info" size="sm">
+								{event.starts}
+							</Badge>
+						</span>
+					</div>
+					<CardDescription>{event.when}</CardDescription>
+				</div>
+			</CardContent>
+			{/* `fit`: when a roomy look tightens the row, the stack gives up
+			    avatars to the count instead of pushing the actions to a new line. */}
+			<CardFooter className="flex-wrap justify-between gap-3">
+				<AvatarGroup aria-label={`${event.total} attendees`} total={event.total} size="sm" surface={framed ? "card" : undefined} fit>
+					{event.attendees.map((initials) => (
+						<Avatar key={initials} fallback={initials} alt={initials} />
+					))}
+				</AvatarGroup>
+				<div className="flex gap-2">
+					<Button variant="outline" size="sm" onClick={() => onRespond?.("decline")}>
+						Decline
+					</Button>
+					<Button size="sm" onClick={() => onRespond?.("join")}>
+						Join
+					</Button>
+				</div>
+			</CardFooter>
+		</Card>
+	)
+}
+```

package/llms/blocks/faq-block.md

@@ -0,0 +1,72 @@
+# FaqBlock
+
+A FAQ section: the heading and a way to ask beside an Accordion of questions, each answer one or two sentences.
+
+**Intent:** Reach for this near pricing or at the end of a landing page, for the questions that block a decision. Long help content belongs in docs, not an accordion.
+
+**Block:** Marketing · section
+
+## Notes
+
+- Every question starts closed: the list of questions is itself the useful summary.
+- The way to ask a human sits beside the heading, so it is found before the reader scrolls the list.
+- Capped at the `content` region width; questions wider than that are hard to scan.
+
+## Accessibility
+
+- Accordion triggers are buttons with aria-expanded, inside headings, so the questions are navigable by heading and operable by keyboard.
+- The contact link is a real <a> inside the lede sentence.
+
+## Source
+
+```tsx
+import { useId } from "react"
+import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, cn, Region, Stack } from "@sableui/react"
+
+const intro = {
+	title: "Questions, answered",
+	lede: "Can't find what you need?",
+	contact: { label: "Write to us", href: "/contact" },
+}
+
+const questions = [
+	{ q: "Is there a free plan?", a: "Yes. Starter is free forever for three live editions, with no fees on your first $1,000 in sales." },
+	{ q: "Can I change plans later?", a: "Any time. Upgrades apply immediately and are prorated; downgrades take effect at the end of the billing period." },
+	{ q: "Who owns the work I sell?", a: "You do. Collectors own the editions they buy, and you keep the rights to the work itself." },
+	{ q: "How do payouts work?", a: "Sales clear after seven days and are paid out every Friday to the account you connect in settings." },
+]
+
+export interface FaqBlockProps {
+	className?: string
+}
+
+export function FaqBlock({ className }: FaqBlockProps) {
+	const titleId = useId()
+	return (
+		<Region as="section" aria-labelledby={titleId} max="content" className={cn("w-full py-16", className)}>
+			<div className="grid gap-10 md:grid-cols-[1fr_2fr]">
+				<Stack gap={2}>
+					<h2 id={titleId} className="text-balance text-heading-2">
+						{intro.title}
+					</h2>
+					<p className="text-body-md text-muted-foreground">
+						{intro.lede}{" "}
+						<a href={intro.contact.href} className="text-foreground underline underline-offset-4 motion-interactive hover:text-muted-foreground">
+							{intro.contact.label}
+						</a>
+						.
+					</p>
+				</Stack>
+				<Accordion>
+					{questions.map((item) => (
+						<AccordionItem key={item.q} value={item.q}>
+							<AccordionTrigger>{item.q}</AccordionTrigger>
+							<AccordionPanel>{item.a}</AccordionPanel>
+						</AccordionItem>
+					))}
+				</Accordion>
+			</div>
+		</Region>
+	)
+}
+```

package/llms/blocks/feature-grid-block.md

@@ -0,0 +1,75 @@
+# FeatureGridBlock
+
+A feature section: an overline, an h2 and a lede over a grid of article cards, each with an icon in a well, a title and one sentence — 1, 2 then 3 columns.
+
+**Intent:** Reach for this to explain what a product does in six or fewer points. For a sequence (first this, then that), use StepsBlock; for one proof point with numbers, TestimonialBlock.
+
+**Block:** Marketing · section
+
+## Notes
+
+- Copied from the LandingPage page shell's features section.
+- Six features fill 3 × 2 evenly; keep the count a multiple of three, or drop to cols={{ lg: 2 }}.
+- Each body is one sentence. A feature that needs a paragraph needs its own section.
+- Icons sit in a `sable-well`, which derives its fill from the card surface it is on.
+
+## Accessibility
+
+- Each feature is an <article> with an h3 under the section's h2.
+- The icons are decorative; each title says what the feature is.
+
+## Source
+
+```tsx
+import { useId } from "react"
+import { Card, CardContent, cn, Grid, Icon, Region, Stack } from "@sableui/react"
+
+const intro = {
+	eyebrow: "Why Sable",
+	title: "A design system with the rules written down",
+	lede: "The decisions a senior designer would make are encoded once, so every screen your team or your agent builds starts from them.",
+}
+
+const features = [
+	{ icon: "component", title: "Behavior built in", body: "Focus management, keyboard navigation, and ARIA come from Base UI primitives under every control." },
+	{ icon: "eyedropper", title: "Semantic tokens end to end", body: "Re-theme the whole product, light and dark, from one preset without touching a component." },
+	{ icon: "layout", title: "Pages, not just parts", body: "Landing, dashboard, settings, auth, and list-detail shells to copy and adapt." },
+	{ icon: "book", title: "A contract agents can read", body: "registry.json, llms.txt, and a CLI hand agents the exact props, examples, and rules." },
+	{ icon: "circle-check", title: "Lint that knows the design", body: "sable-lint flags raw colors, hand-built controls, and motion that ignores reduced motion." },
+	{ icon: "play", title: "Motion with an off switch", body: "Named recipes run on one scale variable, so reduced motion stops every transition at once." },
+]
+
+export interface FeatureGridBlockProps {
+	className?: string
+}
+
+export function FeatureGridBlock({ className }: FeatureGridBlockProps) {
+	const titleId = useId()
+	return (
+		<Region as="section" aria-labelledby={titleId} max="wide" className={cn("w-full py-16 sm:py-24", className)}>
+			<Stack gap={10}>
+				<Stack gap={3} className="max-w-2xl">
+					<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-lg text-muted-foreground">{intro.lede}</p>
+				</Stack>
+				<Grid cols={{ base: 1, sm: 2, lg: 3 }} gap={4}>
+					{features.map((feature) => (
+						<Card key={feature.title} render={<article />} className="h-full">
+							<CardContent className="flex flex-col gap-3">
+								<span className="grid size-10 place-items-center rounded-md sable-well">
+									<Icon name={feature.icon} className="text-xl" />
+								</span>
+								<h3 className="pt-2 text-title-lg">{feature.title}</h3>
+								<p className="text-body-sm text-muted-foreground">{feature.body}</p>
+							</CardContent>
+						</Card>
+					))}
+				</Grid>
+			</Stack>
+		</Region>
+	)
+}
+```

package/llms/blocks/feedback-form-block.md

@@ -0,0 +1,66 @@
+# FeedbackFormBlock
+
+A feedback card: a one-to-five rating as a full-width ToggleGroup, an optional notes field, and Skip / Send feedback.
+
+**Intent:** Reach for this for a post-session or post-purchase survey in a Sheet, Dialog or end-of-flow screen. For a feedback control anchored to a button in the app chrome, use the Feedback component (a popover).
+
+**Block:** Social & messaging · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- The rating is preselected, so one tap on Send is a complete answer; the notes are optional and say so.
+- Skip is a ghost Button before the primary, so dismissing is always available and never competes with sending.
+- `onDone` reports whether feedback was sent and, if so, the score and notes.
+
+## Accessibility
+
+- The ToggleGroup carries aria-label="Rating"; each Toggle's number is its name.
+- The Textarea carries aria-label="Notes"; its placeholder is a prompt, not the label.
+
+## Source
+
+```tsx
+import { useState } from "react"
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Textarea, Toggle, ToggleGroup } from "@sableui/react"
+
+const scale = ["1", "2", "3", "4", "5"]
+
+export interface FeedbackFormBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a Sheet or Dialog that already frames it. */
+	framed?: boolean
+	/** Skip calls it with `sent: false`; Send with `sent: true` and the answers. */
+	onDone?: (sent: boolean, feedback?: { score: number; notes: string }) => void
+}
+
+export function FeedbackFormBlock({ className, framed = true, onDone }: FeedbackFormBlockProps) {
+	const [score, setScore] = useState("4")
+	const [notes, setNotes] = useState("")
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs", className)}>
+			<CardHeader>
+				<CardTitle>How was the session?</CardTitle>
+				<CardDescription>One tap is enough. Notes help us more.</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<ToggleGroup value={[score]} onValueChange={(v: unknown[]) => v[0] && setScore(String(v[0]))} aria-label="Rating" className="w-full">
+					{scale.map((n) => (
+						<Toggle key={n} value={n} className="flex-1">
+							{n}
+						</Toggle>
+					))}
+				</ToggleGroup>
+				<Textarea placeholder="What worked, what didn’t…" aria-label="Notes" rows={3} value={notes} onChange={(e) => setNotes(e.target.value)} />
+			</CardContent>
+			<CardFooter className="justify-end">
+				<Button variant="ghost" size="sm" onClick={() => onDone?.(false)}>
+					Skip
+				</Button>
+				<Button size="sm" onClick={() => onDone?.(true, { score: Number(score), notes })}>
+					Send feedback
+				</Button>
+			</CardFooter>
+		</Card>
+	)
+}
+```

package/llms/blocks/goal-progress-block.md

@@ -0,0 +1,54 @@
+# GoalProgressBlock
+
+A goals card: a ring per goal in a RadialChart against its track (a full ring is 100%), a legend, and which goals are behind in the footer.
+
+**Intent:** Reach for this for progress toward two to four targets — a quarter's goals, a plan's limits, onboarding steps. A single reading in a settings row is a Meter; many goals are a list of Progress bars.
+
+**Block:** Dashboard · card · designed for 18rem–24rem wide (fills its container up to the max)
+
+## Notes
+
+- max={100} makes a full ring mean done; each ring draws round from 12 o'clock as the card scrolls into view.
+- The footer names what is behind, so the card is actionable without reading the rings.
+- Values are formatted as percents in the tooltip and data table.
+
+## Accessibility
+
+- The rings' data table lists each goal and its percent.
+- Arrowing through the rings announces each goal; the legend names every ring's colour.
+
+## Source
+
+```tsx
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, RadialChart } from "@sableui/react"
+
+const goals = [
+	{ goal: "Releases", progress: 82 },
+	{ goal: "Collectors", progress: 64 },
+	{ goal: "Revenue", progress: 91 },
+]
+
+export interface GoalProgressBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+}
+
+export function GoalProgressBlock({ className, framed = true }: GoalProgressBlockProps) {
+	const behind = goals.filter((g) => g.progress < 70)
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-sm", className)}>
+			<CardHeader>
+				<CardTitle render={<h2 />}>Quarter goals</CardTitle>
+				<CardDescription>Progress toward each target, in percent.</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<RadialChart label="Progress toward quarter goals" data={goals} index="goal" valueKey="progress" max={100} className="h-64" valueFormatter={(v) => `${v}%`} />
+			</CardContent>
+			<CardFooter className="text-body-sm text-muted-foreground">
+				{behind.length ? `${behind.map((g) => g.goal).join(" and ")} behind pace.` : "Every goal on pace."}
+			</CardFooter>
+		</Card>
+	)
+}
+```

package/llms/blocks/hero-block.md

@@ -0,0 +1,65 @@
+# HeroBlock
+
+A centred hero: an outline Badge eyebrow, the page's h1 at display size, a lede, a primary and an outline call to action, and an install command in a CodeBlock.
+
+**Intent:** Reach for this to open a product or developer-tool landing page. A brand page that leads with a product scene beside the headline is the BrandLandingPage page shell's hero.
+
+**Block:** Marketing · section
+
+## Notes
+
+- Copied from the LandingPage page shell's hero.
+- The headline is the page's only h1 — place one HeroBlock per page.
+- Two actions, one primary. The install command is the third, quieter way in for developers who already decided.
+- The lede is capped at the prose measure and the headline at max-w-4xl, so both stay readable on wide screens.
+
+## Accessibility
+
+- Calls to action are links styled as Buttons (render={<a />}), because they navigate.
+- The CodeBlock's copy button is labelled and announces when it has copied.
+
+## Source
+
+```tsx
+import { Badge, Button, cn, CodeBlock, Icon, Region, Row, Stack } from "@sableui/react"
+
+const hero = {
+	eyebrow: "Open source · MIT licensed",
+	title: "Product UI your agents can't get wrong",
+	lede: "Sable is a themeable React component library with enforced tokens, typography, and motion, documented for coding agents as carefully as for people.",
+	primary: { label: "Get started", href: "/docs/getting-started" },
+	secondary: { label: "Browse components", href: "/components" },
+	install: "pnpm add @sableui/react",
+}
+
+export interface HeroBlockProps {
+	className?: string
+}
+
+export function HeroBlock({ className }: HeroBlockProps) {
+	return (
+		<Region as="section" max="wide" className={cn("w-full py-16 sm:py-24", className)}>
+			<Stack gap={8} align="center">
+				<Stack gap={4} align="center" className="text-center">
+					<Badge appearance="outline" size="sm" icon={<Icon name="sparkles" />}>
+						{hero.eyebrow}
+					</Badge>
+					<h1 className="max-w-4xl text-balance text-display-lg sm:text-display-2xl">{hero.title}</h1>
+					<p className="max-w-(--measure-prose) text-pretty text-body-lg text-muted-foreground">{hero.lede}</p>
+					<Row gap={2} justify="center" wrap className="pt-2">
+						<Button size="cta" render={<a href={hero.primary.href} />}>
+							{hero.primary.label}
+						</Button>
+						<Button size="cta" variant="outline" render={<a href={hero.secondary.href} />}>
+							{hero.secondary.label}
+						</Button>
+					</Row>
+				</Stack>
+				<div className="w-full max-w-sm">
+					<CodeBlock prompt="$" code={hero.install} />
+				</div>
+			</Stack>
+		</Region>
+	)
+}
+```

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

@@ -0,0 +1,61 @@
+# InviteTeamBlock
+
+An invite card: who is already on the team as an AvatarGroup, and an email field with Send.
+
+**Intent:** Reach for this for team or project invites in onboarding, an empty workspace, or a settings section. For managing an existing member list with roles, use a CardList of Entity rows instead.
+
+**Block:** Settings & team · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- The field and Send are a <form>, so Enter sends; `onSend` receives the typed address.
+- The AvatarGroup ring matches the card surface when framed and inherits the host surface when not.
+
+## Accessibility
+
+- The AvatarGroup carries an aria-label with the count, so the stack reads as one item, not four initials.
+- The email Input carries aria-label; there is no visible label in this compact layout.
+
+## Source
+
+```tsx
+import { Avatar, AvatarGroup, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, Input } from "@sableui/react"
+
+const collaborators = ["MO", "SR", "JL", "AK"]
+
+export interface InviteTeamBlockProps {
+	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 address typed, on Send or Enter. */
+	onSend?: (email: string) => void
+}
+
+export function InviteTeamBlock({ className, framed = true, onSend }: InviteTeamBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs", className)}>
+			<CardHeader>
+				<CardTitle>Invite your team</CardTitle>
+				<CardDescription>Collaborators can edit every project.</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<AvatarGroup aria-label={`${collaborators.length} collaborators`} size="sm" surface={framed ? "card" : undefined}>
+					{collaborators.map((initials) => (
+						<Avatar key={initials} fallback={initials} alt={initials} />
+					))}
+				</AvatarGroup>
+				<form
+					className="flex gap-2"
+					onSubmit={(event) => {
+						event.preventDefault()
+						onSend?.(String(new FormData(event.currentTarget).get("email") ?? ""))
+					}}
+				>
+					<Input name="email" type="email" placeholder="name@company.com" aria-label="Email address" />
+					<Button type="submit">Send</Button>
+				</form>
+			</CardContent>
+		</Card>
+	)
+}
+```

package/llms/blocks/invoice-history-block.md

@@ -0,0 +1,84 @@
+# InvoiceHistoryBlock
+
+A billing history card: a flush Table of date, plan, amount and status per invoice, with a download button on each row.
+
+**Intent:** Reach for this in billing settings, under the current plan. For a long, filterable history (hundreds of rows, date ranges, export), use DataTable on its own page.
+
+**Block:** Commerce · card · designed for 20rem–42rem wide (fills its container up to the max)
+
+## Notes
+
+- The table runs edge to edge (CardContent flush); its first and last columns still line up with the card header's padding.
+- Amounts are a numeric column — right-aligned with tabular figures — so they compare by eye.
+- On a narrow screen the table scrolls sideways inside the card (with a quiet scrollbar) rather than squeezing its columns.
+
+## Accessibility
+
+- The download column has a screen-reader-only header, and each button names its invoice ("Download INV-0042").
+- Status is text in a Badge; the dot's colour only reinforces it.
+
+## Source
+
+```tsx
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, Icon, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@sableui/react"
+
+const invoices = [
+	{ id: "INV-0042", date: "Oct 1, 2026", plan: "Studio · yearly", amount: "$192.00", status: "Paid" },
+	{ id: "INV-0031", date: "Sep 1, 2026", plan: "Studio · monthly", amount: "$20.00", status: "Paid" },
+	{ id: "INV-0027", date: "Aug 1, 2026", plan: "Studio · monthly", amount: "$20.00", status: "Refunded" },
+	{ id: "INV-0019", date: "Jul 1, 2026", plan: "Starter", amount: "$0.00", status: "Paid" },
+]
+
+export interface InvoiceHistoryBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	/** Called with the invoice id to download. */
+	onDownload?: (id: string) => void
+}
+
+export function InvoiceHistoryBlock({ className, framed = true, onDownload }: InvoiceHistoryBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-2xl", className)}>
+			<CardHeader>
+				<CardTitle render={<h2 />}>Invoices</CardTitle>
+				<CardDescription>Sent to billing@studio.com on the 1st of each month.</CardDescription>
+			</CardHeader>
+			<CardContent flush className="overflow-x-auto scrollbar-quiet">
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Date</TableHead>
+							<TableHead>Plan</TableHead>
+							<TableHead numeric>Amount</TableHead>
+							<TableHead>Status</TableHead>
+							<TableHead className="w-0">
+								<span className="sr-only">Download</span>
+							</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{invoices.map((invoice) => (
+							<TableRow key={invoice.id}>
+								<TableCell className="whitespace-nowrap">{invoice.date}</TableCell>
+								<TableCell className="text-muted-foreground">{invoice.plan}</TableCell>
+								<TableCell numeric>{invoice.amount}</TableCell>
+								<TableCell>
+									<Badge appearance="plain" tone={invoice.status === "Paid" ? "success" : "neutral"} dot>
+										{invoice.status}
+									</Badge>
+								</TableCell>
+								<TableCell>
+									<Button variant="ghost" size="icon-sm" aria-label={`Download ${invoice.id}`} onClick={() => onDownload?.(invoice.id)}>
+										<Icon name="download" />
+									</Button>
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</CardContent>
+		</Card>
+	)
+}
+```

package/llms/blocks/kpi-sparkline-block.md

@@ -0,0 +1,57 @@
+# KpiSparklineBlock
+
+A KPI row with trends: three stat cards, each the value in the metric mono tier, a Sparkline of its last twelve weeks, and the change as a Badge.
+
+**Intent:** Reach for this at the top of a dashboard or a landing page's proof section, where each number needs its recent shape. Without the trend, StatRowBlock is calmer; for one headline trend, TrafficTrendBlock.
+
+**Block:** Dashboard · section
+
+## Notes
+
+- Each sparkline is coloured by what its measure is, and the change Badge by whether it is good: churn falling is good news in a warning-toned trend.
+- The sparklines draw on as the row scrolls into view.
+- One column on a phone, three from sm.
+
+## Accessibility
+
+- Each Sparkline is an image named by the measure and the period, with its range spoken.
+- The change is stated in text (+8.2% vs last quarter) with an arrow icon; colour only reinforces it.
+
+## Source
+
+```tsx
+import { Badge, Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, cn, Grid, Icon, Sparkline } from "@sableui/react"
+
+const kpis = [
+	{ label: "Revenue", value: "$18,240", delta: "+8.2%", up: true, trend: [12, 14, 13, 17, 16, 19, 18, 21, 20, 24, 23, 26], tone: "success" },
+	{ label: "Active users", value: "3,912", delta: "+3.1%", up: true, trend: [30, 31, 29, 33, 34, 33, 36, 35, 37, 38, 37, 39], tone: "info" },
+	{ label: "Churn", value: "4.1%", delta: "−0.6%", up: false, trend: [9, 8, 9, 7, 8, 6, 7, 5, 6, 4, 5, 4], tone: "warning" },
+] as const
+
+export interface KpiSparklineBlockProps {
+	className?: string
+}
+
+export function KpiSparklineBlock({ className }: KpiSparklineBlockProps) {
+	return (
+		<Grid cols={{ base: 1, sm: 3 }} gap={3} className={cn("w-full", className)}>
+			{kpis.map((kpi) => (
+				<Card key={kpi.label}>
+					<CardHeader>
+						<CardDescription>{kpi.label}</CardDescription>
+						<CardTitle className="text-mono-xl">{kpi.value}</CardTitle>
+						<CardAction>
+							<Sparkline label={`${kpi.label}, last 12 weeks`} data={[...kpi.trend]} variant="area" tone={kpi.tone} />
+						</CardAction>
+					</CardHeader>
+					<CardContent>
+						<Badge tone={kpi.up ? "success" : "neutral"} size="sm" icon={<Icon name={kpi.up ? "arrow-up" : "arrow-down"} />}>
+							{kpi.delta} vs last quarter
+						</Badge>
+					</CardContent>
+				</Card>
+			))}
+		</Grid>
+	)
+}
+```