@sableui/react 0.2.0 → 0.3.0

package/llms/blocks/command-palette-block.md

@@ -0,0 +1,48 @@
+# CommandPaletteBlock
+
+An inline command palette: CommandMenuPanel with a filter field and grouped actions, each with an icon and its keyboard shortcut.
+
+**Intent:** Reach for this to show a command list in place — an empty state that teaches shortcuts, an onboarding step, a quick-actions card. The ⌘K palette that opens over the app is CommandMenu; this is its panel without the dialog.
+
+**Block:** Navigation · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- Each command shows its shortcut as a Kbd hint, so the palette also teaches the keys.
+- `onCommand` receives the command's id; ids also key the rows, so two commands may share a label.
+- No card around it: the panel is its own surface, lifted with `shadow-sm` when it sits on a muted section.
+
+## Accessibility
+
+- CommandMenuPanel wires the filter input to the list as a combobox, with arrow-key navigation and the active row announced.
+- Shortcut hints are Kbd elements, read as keys.
+
+## Source
+
+```tsx
+import { cn, CommandMenuPanel, Kbd, type CommandItem } from "@sableui/react"
+
+const commands = [
+	{ id: "new-project", icon: "plus", label: "New project", key: "N" },
+	{ id: "invite", icon: "user", label: "Invite teammate", key: "I" },
+	{ id: "settings", icon: "gear", label: "Open settings", key: "," },
+]
+
+export interface CommandPaletteBlockProps {
+	className?: string
+	/** Called with the chosen command's id. */
+	onCommand?: (id: string) => void
+}
+
+export function CommandPaletteBlock({ className, onCommand }: CommandPaletteBlockProps) {
+	const items: CommandItem[] = commands.map((c) => ({
+		id: c.id,
+		group: "Actions",
+		icon: c.icon,
+		label: c.label,
+		hint: <Kbd>{c.key}</Kbd>,
+		onSelect: () => onCommand?.(c.id),
+	}))
+	return <CommandMenuPanel className={cn("w-full max-w-xs shadow-sm", className)} placeholder="Type a command…" items={items} />
+}
+```

package/llms/blocks/cta-band-block.md

@@ -0,0 +1,62 @@
+# CtaBandBlock
+
+A closing call to action: a centred h2 and one-line lede on a card, with a primary and an outline action.
+
+**Intent:** Reach for this as the last section before the footer, repeating the hero's primary action once the reader has seen the case. Mid-page prompts to sign up belong inline, not in a band.
+
+**Block:** Marketing · section
+
+## Notes
+
+- Copied from the LandingPage page shell's closing call to action.
+- The primary action matches the hero's, so the page asks for one thing twice rather than two things once.
+- Sitting on a Card lifts it from the page without a coloured band, so it follows any preset.
+
+## Accessibility
+
+- The section is labelled by its h2.
+- Both actions are links styled as Buttons, because they navigate.
+
+## Source
+
+```tsx
+import { useId } from "react"
+import { Button, Card, CardContent, cn, Region, Row, Stack } from "@sableui/react"
+
+const cta = {
+	title: "Build the product, not another component library",
+	lede: "Install Sable, pick a preset, and ship the first screen today.",
+	primary: { label: "Get started", href: "/docs/getting-started" },
+	secondary: { label: "Star on GitHub", href: "/github" },
+}
+
+export interface CtaBandBlockProps {
+	className?: string
+}
+
+export function CtaBandBlock({ className }: CtaBandBlockProps) {
+	const titleId = useId()
+	return (
+		<Region as="section" aria-labelledby={titleId} max="wide" className={cn("w-full py-16", className)}>
+			<Card>
+				<CardContent>
+					<Stack gap={4} align="center" className="py-8 text-center sm:py-12">
+						<h2 id={titleId} className="max-w-2xl text-balance text-heading-1">
+							{cta.title}
+						</h2>
+						<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">{cta.lede}</p>
+						<Row gap={2} justify="center" wrap className="pt-2">
+							<Button size="cta" render={<a href={cta.primary.href} />}>
+								{cta.primary.label}
+							</Button>
+							<Button size="cta" variant="outline" render={<a href={cta.secondary.href} />}>
+								{cta.secondary.label}
+							</Button>
+						</Row>
+					</Stack>
+				</CardContent>
+			</Card>
+		</Region>
+	)
+}
+```

package/llms/blocks/danger-zone-block.md

@@ -0,0 +1,69 @@
+# DangerZoneBlock
+
+A delete-account card: what deleting removes and what survives, one destructive Button, and a DestructiveActionModal that asks for the handle to be typed before it acts.
+
+**Intent:** Reach for this as the last section of account, workspace or project settings. Deleting a single record from a list is an OverflowMenu item that opens DestructiveActionModal directly, not a card.
+
+**Block:** Settings & team · card · designed for 20rem–42rem wide (fills its container up to the max)
+
+## Notes
+
+- Copied from the SettingsPage page shell's Delete account section.
+- The button never acts directly: it opens the modal, whose confirm stays disabled until the handle is typed.
+- The description says what is lost AND what is kept ("Collectors keep the editions they own"), which is what people want to know before they decide.
+
+## Accessibility
+
+- DestructiveActionModal is an alertdialog: focus opens on Cancel and the backdrop does not dismiss it.
+- The CardTitle is an h2, so the section is reachable by heading.
+
+## Source
+
+```tsx
+import { useState } from "react"
+import { Button, Card, CardDescription, CardFooter, CardHeader, CardTitle, cn, DestructiveActionModal } from "@sableui/react"
+
+const account = { handle: "ada", editions: 12 }
+
+export interface DangerZoneBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	/** Called once the person has typed the handle and confirmed. */
+	onDelete?: () => void
+}
+
+export function DangerZoneBlock({ className, framed = true, onDelete }: DangerZoneBlockProps) {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-2xl", className)}>
+				<CardHeader>
+					<CardTitle render={<h2 />}>Delete account</CardTitle>
+					<CardDescription>
+						Permanently remove your profile, editions, and sales history. Collectors keep the editions they own.
+					</CardDescription>
+				</CardHeader>
+				<CardFooter className="justify-end">
+					<Button variant="destructive" onClick={() => setOpen(true)}>
+						Delete account
+					</Button>
+				</CardFooter>
+			</Card>
+			<DestructiveActionModal
+				open={open}
+				onOpenChange={setOpen}
+				title="Delete your account?"
+				description={`This permanently removes your profile, ${account.editions} editions, and sales history. Pending payouts are still sent. This can't be undone.`}
+				confirmLabel="Delete account"
+				confirmingLabel="Deleting…"
+				confirmText={account.handle}
+				onConfirm={() => {
+					setOpen(false)
+					onDelete?.()
+				}}
+			/>
+		</>
+	)
+}
+```

package/llms/blocks/device-comparison-block.md

@@ -0,0 +1,91 @@
+# DeviceComparisonBlock
+
+A comparison card: each series' total sits in the header as a pressable tile, and the one pressed is plotted below as a daily BarChart.
+
+**Intent:** Reach for this when two or three measures share a page and the reader looks at one at a time — devices, regions, plans. To see them together, plot both in one BarChart or LineChart instead.
+
+**Block:** Dashboard · card · designed for 20rem–48rem wide (fills its container up to the max)
+
+## Notes
+
+- The totals are the switch: Toggles in a labelled ToggleGroup, so the number and the control are one thing, with the group's own pressed and hover states.
+- Switching eases every bar to its new height rather than redrawing.
+- Below sm the tiles stack under the title and divide with a top rule instead of a side rule.
+
+## Accessibility
+
+- Each total is a Toggle (aria-pressed) named by its label and value, in a ToggleGroup labelled "Device" with arrow-key movement between tiles.
+- The chart's name says which series is plotted, so the data table is unambiguous.
+
+## Source
+
+```tsx
+import { useState } from "react"
+import { BarChart, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, Toggle, ToggleGroup } from "@sableui/react"
+
+/** 30 days of visitors — replace with your own rows ({ date, desktop, mobile }). */
+const days = Array.from({ length: 30 }, (_, i) => ({
+	date: new Date(2026, 8, 1 + i).toISOString().slice(0, 10),
+	desktop: Math.round(320 + Math.sin(i / 3) * 90 + (i % 5) * 14),
+	mobile: Math.round(260 + Math.cos(i / 4) * 80 + (i % 4) * 18),
+}))
+
+const series = [
+	{ key: "desktop", label: "Desktop" },
+	{ key: "mobile", label: "Mobile" },
+] as const
+
+const shortDate = (iso: string) => new Date(`${iso}T00:00:00`).toLocaleDateString("en-US", { month: "short", day: "numeric" })
+
+export interface DeviceComparisonBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+}
+
+export function DeviceComparisonBlock({ className, framed = true }: DeviceComparisonBlockProps) {
+	const [active, setActive] = useState<string>("desktop")
+	const totals = Object.fromEntries(series.map((s) => [s.key, days.reduce((sum, d) => sum + d[s.key], 0)]))
+	const current = series.find((s) => s.key === active) ?? series[0]
+	return (
+		// overflow-hidden: the square tiles meet the card's rounded corner.
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-3xl overflow-hidden", className)}>
+			<div className="flex flex-col border-b border-border sm:flex-row">
+				<CardHeader className="flex-1 pb-[var(--card-p,--spacing(6))]">
+					<CardTitle render={<h2 />}>Visitors by device</CardTitle>
+					<CardDescription>The last 30 days. Pick a device to plot it.</CardDescription>
+				</CardHeader>
+				{/* The totals ARE the switch: one pressed tile per series. */}
+				<ToggleGroup
+					value={[active]}
+					onValueChange={(v: unknown[]) => v[0] && setActive(String(v[0]))}
+					aria-label="Device"
+					className="items-stretch gap-0"
+				>
+					{series.map((s) => (
+						<Toggle
+							key={s.key}
+							value={s.key}
+							className="h-auto flex-1 flex-col items-start justify-center gap-1 rounded-none border-border px-6 py-4 text-start text-foreground max-sm:border-t sm:border-s"
+						>
+							<span className="text-caption text-muted-foreground">{s.label}</span>
+							<span className="text-mono-lg">{totals[s.key].toLocaleString("en-US")}</span>
+						</Toggle>
+					))}
+				</ToggleGroup>
+			</div>
+			<CardContent>
+				<BarChart
+					label={`${current.label} visitors per day, last 30 days`}
+					data={days}
+					index="date"
+					series={[current]}
+					indexFormatter={shortDate}
+					radius={3}
+					className="h-64"
+				/>
+			</CardContent>
+		</Card>
+	)
+}
+```

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>
+	)
+}
+```