@sableui/react 0.1.1 → 0.3.0

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

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

@@ -0,0 +1,95 @@
+# TrafficTrendBlock
+
+A trend card: a stacked gradient AreaChart of two series by day, a time-range ToggleGroup in the header, and a one-line takeaway with its direction in the footer.
+
+**Intent:** Reach for this as the headline chart of a dashboard or an analytics section on a landing page. For a single number with a small trend beside it, KpiSparklineBlock is lighter.
+
+**Block:** Dashboard · card · designed for 20rem–48rem wide (fills its container up to the max)
+
+## Notes
+
+- Switching the range eases the chart from one shape to the next instead of redrawing it.
+- The footer states the takeaway in words, so the card says something even before the chart is read.
+- The tooltip heading spells out the weekday; the axis keeps short dates so they fit.
+
+## Accessibility
+
+- The chart's accessible name includes the range showing, and its data table updates with it.
+- The range control is a labelled ToggleGroup; the chart is one tab stop with arrow-key navigation.
+
+## Source
+
+```tsx
+import { useState } from "react"
+import { AreaChart, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Icon, Toggle, ToggleGroup } from "@sableui/react"
+
+/** 90 days of visitors — replace with your own rows ({ date, desktop, mobile }). */
+const days = Array.from({ length: 90 }, (_, i) => {
+	const wave = Math.sin(i / 6) * 60 + Math.sin(i / 2.3) * 25
+	return {
+		date: new Date(2026, 6, 1 + i).toISOString().slice(0, 10),
+		desktop: Math.round(240 + wave + (i % 7) * 9),
+		mobile: Math.round(160 + wave * 0.7 + ((i * 3) % 11) * 6),
+	}
+})
+
+const series = [
+	{ key: "desktop", label: "Desktop" },
+	{ key: "mobile", label: "Mobile" },
+]
+
+const ranges = [
+	{ id: "90d", label: "3 months", days: 90 },
+	{ id: "30d", label: "30 days", days: 30 },
+	{ id: "7d", label: "7 days", days: 7 },
+]
+
+const shortDate = (iso: string) => new Date(`${iso}T00:00:00`).toLocaleDateString("en-US", { month: "short", day: "numeric" })
+
+export interface TrafficTrendBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+}
+
+export function TrafficTrendBlock({ className, framed = true }: TrafficTrendBlockProps) {
+	const [range, setRange] = useState("90d")
+	const shown = days.slice(-(ranges.find((r) => r.id === range)?.days ?? 90))
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-3xl", className)}>
+			<CardHeader>
+				<CardTitle render={<h2 />}>Visitors</CardTitle>
+				<CardDescription>Desktop and mobile, by day.</CardDescription>
+				<CardAction>
+					<ToggleGroup value={[range]} onValueChange={(v: unknown[]) => v[0] && setRange(String(v[0]))} aria-label="Time range">
+						{ranges.map((r) => (
+							<Toggle key={r.id} value={r.id}>
+								{r.label}
+							</Toggle>
+						))}
+					</ToggleGroup>
+				</CardAction>
+			</CardHeader>
+			<CardContent>
+				<AreaChart
+					label={`Visitors per day, last ${ranges.find((r) => r.id === range)?.label}`}
+					data={shown}
+					index="date"
+					series={series}
+					indexFormatter={shortDate}
+					tooltip={{ labelFormatter: (d) => new Date(`${d}T00:00:00`).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) }}
+					stacked
+					gradient
+					className="h-64"
+				/>
+			</CardContent>
+			<CardFooter className="gap-1.5 text-body-sm">
+				<Icon name="arrow-up" className="text-success" />
+				<span>
+					Up 5.2% on the previous period <span className="text-muted-foreground">· desktop leads every week</span>
+				</span>
+			</CardFooter>
+		</Card>
+	)
+}
+```

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

@@ -0,0 +1,66 @@
+# UploadListBlock
+
+An upload queue: full-width Attachment rows — one uploading with progress and a cancel button, one finished with a success check.
+
+**Intent:** Reach for this under a FileDropzone, or anywhere files are in flight — a composer, an import step, a document form. For files attached to a message, Attachment chips in the composer fit better.
+
+**Block:** Media & files · card · designed for 16rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- Rows, not chips: each Attachment drops its chip cap (`max-w-none`) to fill the block's width.
+- The success check sits in a control-sized box so it lines up with the cancel button on the row above.
+- No card: Attachment rows are their own surfaces. Wrap the block in a Card if it needs a header.
+
+## Accessibility
+
+- Attachment announces upload progress; the cancel Button carries aria-label.
+- The finished row's check carries aria-label="Uploaded", so the state is spoken, not only coloured.
+
+## Source
+
+```tsx
+import { Attachment, Button, cn, Icon } from "@sableui/react"
+
+const uploading = { name: "brand-guidelines.pdf", meta: "4.2 MB of 6.8 MB", progress: 62 }
+const uploaded = { name: "cover-final.png", meta: "Uploaded · 2.1 MB" }
+
+export interface UploadListBlockProps {
+	className?: string
+	/** Called when the in-progress upload is cancelled. */
+	onCancel?: () => void
+}
+
+export function UploadListBlock({ className, onCancel }: UploadListBlockProps) {
+	return (
+		// An upload list, not chips: rows fill the block's width.
+		<div className={cn("flex w-full max-w-xs flex-col gap-2", className)}>
+			<Attachment
+				className="max-w-none"
+				name={uploading.name}
+				meta={uploading.meta}
+				status="uploading"
+				progress={uploading.progress}
+				actions={
+					<Button variant="ghost" size="icon-sm" aria-label="Cancel upload" onClick={onCancel}>
+						<Icon name="xmark" />
+					</Button>
+				}
+			/>
+			<Attachment
+				className="max-w-none"
+				name={uploaded.name}
+				icon="image-stack"
+				meta={uploaded.meta}
+				// The same box as the icon-sm button above, so the check centres on
+				// the cancel button's line instead of hugging the edge.
+				actions={
+					<span className="grid size-(--control-sm) place-items-center">
+						<Icon name="circle-check" className="text-success" aria-label="Uploaded" />
+					</span>
+				}
+			/>
+		</div>
+	)
+}
+```

package/llms/blocks/verify-code-block.md

@@ -0,0 +1,59 @@
+# VerifyCodeBlock
+
+A one-time-code card: where the code went, a six-slot OtpField grouped 3 + 3 under a visible label, and a quiet Resend.
+
+**Intent:** Reach for this for email or SMS verification, two-factor sign-in, or confirming a sensitive change. For a code someone copies out (a recovery key), show it with Code and a copy button instead.
+
+**Block:** Auth · card · designed for 18rem–24rem wide (fills its container up to the max)
+
+## Notes
+
+- No submit button: the code verifies the moment the last slot fills, which is what people expect from a code field.
+- The destination is named in the description, so a mistyped address is caught before the wait.
+- Resend is a ghost Button — present for the stuck case, never competing with the field.
+
+## Accessibility
+
+- OtpField names each slot ("Character 1 of 6") and accepts a pasted code into all six at once.
+- Field labels the group and reads the expiry as its description.
+
+## Source
+
+```tsx
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Field, OtpField } from "@sableui/react"
+
+const sentTo = "ada@studio.com"
+
+export interface VerifyCodeBlockProps {
+	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 code as soon as the last digit is entered. */
+	onVerify?: (code: string) => void
+	onResend?: () => void
+}
+
+export function VerifyCodeBlock({ className, framed = true, onVerify, onResend }: VerifyCodeBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-sm", className)}>
+			<CardHeader>
+				<CardTitle>Check your email</CardTitle>
+				<CardDescription>
+					We sent a 6-digit code to <span className="text-foreground">{sentTo}</span>.
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<Field label="Verification code" description="The code expires in 10 minutes.">
+					<OtpField length={6} groupSize={3} onValueComplete={(code: string) => onVerify?.(code)} />
+				</Field>
+			</CardContent>
+			<CardFooter className="justify-between gap-3">
+				<span className="text-caption text-muted-foreground">Didn’t get it?</span>
+				<Button variant="ghost" size="sm" onClick={onResend}>
+					Resend code
+				</Button>
+			</CardFooter>
+		</Card>
+	)
+}
+```