@sableui/react 0.2.0 → 0.3.0

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

@@ -0,0 +1,82 @@
+# PricingCardBlock
+
+A single-plan pricing card: a Monthly/Yearly ToggleGroup, the price and billing note, a checked feature list, and one full-width call to action.
+
+**Intent:** Reach for this when one plan is on offer — an upgrade prompt, a paywall, a plan summary in billing settings. Comparing several tiers side by side is a pricing table, not three of these.
+
+**Block:** Commerce · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- The period switch is a ToggleGroup (a segmented control), not Tabs: it changes a value in place rather than showing another panel.
+- The price is a heading tier because it is the card's headline; its unit and billing note sit beside and below it in muted body text.
+- `onStart` receives the period showing, so checkout opens on the plan the person was looking at.
+
+## Accessibility
+
+- The ToggleGroup carries aria-label="Billing period"; each Toggle's text is its name.
+- The check icons are decorative beside each feature's text.
+
+## Source
+
+```tsx
+import { useState } from "react"
+import { Button, Card, CardContent, cn, Icon, Toggle, ToggleGroup } from "@sableui/react"
+
+const plan = {
+	monthly: { price: "$20", note: "Billed monthly. Cancel anytime." },
+	yearly: { price: "$16", note: "Billed $192 yearly. You save 20%." },
+	features: ["Unlimited projects", "Version history", "Priority support"],
+}
+
+type Period = "monthly" | "yearly"
+
+export interface PricingCardBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	/** Called with the billing period showing when the trial starts. */
+	onStart?: (period: Period) => void
+}
+
+export function PricingCardBlock({ className, framed = true, onStart }: PricingCardBlockProps) {
+	const [period, setPeriod] = useState<Period>("yearly")
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs", className)}>
+			<CardContent className="flex flex-col gap-5">
+				<ToggleGroup
+					value={[period]}
+					onValueChange={(v: unknown[]) => v[0] && setPeriod(v[0] as Period)}
+					aria-label="Billing period"
+					className="w-full"
+				>
+					<Toggle value="monthly" className="flex-1">
+						Monthly
+					</Toggle>
+					<Toggle value="yearly" className="flex-1">
+						Yearly
+					</Toggle>
+				</ToggleGroup>
+				<div className="flex flex-col gap-1">
+					<div className="flex items-baseline gap-1.5">
+						<span className="text-heading-2">{plan[period].price}</span>
+						<span className="text-body-sm text-muted-foreground">per seat / month</span>
+					</div>
+					<span className="text-body-sm text-muted-foreground">{plan[period].note}</span>
+				</div>
+				<ul className="flex flex-col gap-2 text-body-sm">
+					{plan.features.map((feature) => (
+						<li key={feature} className="flex items-center gap-2">
+							<Icon name="check" className="text-success" />
+							{feature}
+						</li>
+					))}
+				</ul>
+				<Button className="w-full" onClick={() => onStart?.(period)}>
+					Start free trial
+				</Button>
+			</CardContent>
+		</Card>
+	)
+}
+```

package/llms/blocks/pricing-table-block.md

@@ -0,0 +1,129 @@
+# PricingTableBlock
+
+A three-tier pricing section: heading, a Monthly/Yearly ToggleGroup, and three equal-height plan cards with the recommended one outlined in primary and badged "Most popular".
+
+**Intent:** Reach for this on a pricing page or the pricing band of a landing page, to compare plans side by side. A single plan on offer (an upgrade prompt, a paywall) is PricingCardBlock.
+
+**Block:** Commerce · section
+
+## Notes
+
+- One featured tier at most: it takes the primary button and a primary outline; the others take outline buttons so the recommendation is unmistakable.
+- Cards stretch to the tallest one and push their buttons to the bottom, so the calls to action line up across the row.
+- The yearly saving is stated in the toggle itself, where the choice is made. `onChoose` receives the tier id and the period showing.
+
+## Accessibility
+
+- Each plan is an <article> with an h3 under the section's h2, so the tiers are navigable by heading.
+- The ToggleGroup is labelled "Billing period"; prices update in place and stay in the reading order of each card.
+
+## Source
+
+```tsx
+import { useState, useId } from "react"
+import { Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Grid, Icon, Region, Stack, Toggle, ToggleGroup } from "@sableui/react"
+
+const tiers = [
+	{
+		id: "starter",
+		name: "Starter",
+		blurb: "For one person shipping their first editions.",
+		monthly: 0,
+		yearly: 0,
+		cta: "Start for free",
+		featured: false,
+		features: ["3 live editions", "Collector profiles", "Community support"],
+	},
+	{
+		id: "studio",
+		name: "Studio",
+		blurb: "For working artists with a steady release schedule.",
+		monthly: 20,
+		yearly: 16,
+		cta: "Start free trial",
+		featured: true,
+		features: ["Unlimited editions", "Scheduled drops", "Sales analytics", "Priority support"],
+	},
+	{
+		id: "collective",
+		name: "Collective",
+		blurb: "For galleries and teams releasing together.",
+		monthly: 48,
+		yearly: 40,
+		cta: "Talk to sales",
+		featured: false,
+		features: ["Everything in Studio", "Up to 10 seats", "Shared payouts", "Roles and approvals"],
+	},
+]
+
+type Period = "monthly" | "yearly"
+
+export interface PricingTableBlockProps {
+	className?: string
+	/** Called with the chosen tier and the billing period showing. */
+	onChoose?: (tier: string, period: Period) => void
+}
+
+export function PricingTableBlock({ className, onChoose }: PricingTableBlockProps) {
+	const [period, setPeriod] = useState<Period>("yearly")
+	const titleId = useId()
+	return (
+		<Region as="section" aria-labelledby={titleId} max="wide" className={cn("w-full py-16", className)}>
+			<Stack gap={10}>
+				<Stack gap={4} align="center" className="text-center">
+					<h2 id={titleId} className="text-balance text-heading-1">
+						Pricing that grows with your practice
+					</h2>
+					<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">
+						Every plan includes unlimited collectors and no fees on your first $1,000 in sales.
+					</p>
+					<ToggleGroup value={[period]} onValueChange={(v: unknown[]) => v[0] && setPeriod(v[0] as Period)} aria-label="Billing period">
+						<Toggle value="monthly">Monthly</Toggle>
+						<Toggle value="yearly">Yearly · save 20%</Toggle>
+					</ToggleGroup>
+				</Stack>
+				<Grid cols={{ base: 1, md: 3 }} gap={4} className="items-stretch">
+					{tiers.map((tier) => (
+						<Card
+							key={tier.id}
+							render={<article />}
+							className={cn("flex flex-col", tier.featured && "border-primary ring-1 ring-primary")}
+						>
+							<CardHeader>
+								<CardTitle render={<h3 />}>{tier.name}</CardTitle>
+								<CardDescription>{tier.blurb}</CardDescription>
+								{tier.featured ? (
+									<CardAction>
+										<Badge tone="edition" size="sm">
+											Most popular
+										</Badge>
+									</CardAction>
+								) : null}
+							</CardHeader>
+							<CardContent className="flex flex-1 flex-col gap-5">
+								<div className="flex items-baseline gap-1.5">
+									<span className="text-heading-2">${tier[period]}</span>
+									<span className="text-body-sm text-muted-foreground">per seat / month</span>
+								</div>
+								<ul className="flex flex-col gap-2 text-body-sm">
+									{tier.features.map((feature) => (
+										<li key={feature} className="flex items-center gap-2">
+											<Icon name="check" className="text-success" />
+											{feature}
+										</li>
+									))}
+								</ul>
+							</CardContent>
+							<CardFooter>
+								<Button className="w-full" variant={tier.featured ? "primary" : "outline"} onClick={() => onChoose?.(tier.id, period)}>
+									{tier.cta}
+								</Button>
+							</CardFooter>
+						</Card>
+					))}
+				</Grid>
+			</Stack>
+		</Region>
+	)
+}
+```

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

@@ -0,0 +1,69 @@
+# ProductCardBlock
+
+A product card: edge-to-edge artwork, title and maker, an edition Badge, and the price beside a single buy action.
+
+**Intent:** Reach for this for a product, edition or listing in a grid or a featured slot. For a row in a dense list, use an Entity with the image as `leading` instead.
+
+**Block:** Commerce · card · designed for 16rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- The artwork runs to the card's edges; the card clips it to its own corners (overflow-hidden).
+- Prices are `text-mono-lg` — the metric mono tier with tabular figures — never a heading tier.
+- The placeholder art is painted from the palette's decorative tones so it follows the theme; swap it for the product image with real alt text.
+
+## Accessibility
+
+- The placeholder art is aria-hidden. A real product image needs alt text naming the product.
+- The card is not a link: it holds its own button. To make the whole card navigate, move the action to the detail page and render the Card as an <a>.
+
+## Source
+
+```tsx
+import { Badge, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, cn } from "@sableui/react"
+
+const product = { title: "Untitled (gold rush)", maker: "Mara Okafor", edition: "12 of 50", price: "0.42 SOL" }
+
+/**
+ * Placeholder artwork painted from the palette — a soft mesh of the theme's
+ * decorative tones over the brand, so it follows every look. Replace the art
+ * <div> with your product's image.
+ */
+const ART_TONES = ["info", "collectible", "edition", "standard"]
+const ART_SPOTS = [[18, 22, 58], [82, 18, 55], [70, 88, 60], [12, 92, 55]]
+const artwork = [
+	...ART_SPOTS.map(
+		([x, y, reach], i) =>
+			// design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
+			`radial-gradient(in oklab at ${x}% ${y}%, oklch(from var(--tone-${ART_TONES[i % ART_TONES.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`,
+	),
+	"var(--primary)",
+].join(", ")
+
+export interface ProductCardBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	/** The buy action. */
+	onCollect?: () => void
+}
+
+export function ProductCardBlock({ className, framed = true, onCollect }: ProductCardBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs overflow-hidden", className)}>
+			<div aria-hidden className="aspect-[4/3]" style={{ background: artwork }} />
+			<CardHeader>
+				<CardTitle>{product.title}</CardTitle>
+				<CardDescription>{product.maker}</CardDescription>
+				<CardAction>
+					<Badge tone="edition">{product.edition}</Badge>
+				</CardAction>
+			</CardHeader>
+			<CardFooter className="justify-between pt-4">
+				<span className="text-mono-lg">{product.price}</span>
+				<Button onClick={onCollect}>Collect</Button>
+			</CardFooter>
+		</Card>
+	)
+}
+```

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

@@ -0,0 +1,103 @@
+# ProfileCardBlock
+
+A profile card: a cover banner, an avatar rising into it, Share and Follow, the name and handle, a one-line bio and two counts.
+
+**Intent:** Reach for this for a person or creator summary — a suggested-follow card, a hover target's full view, the top of a profile sidebar. For a small inline preview on hover, use ContextCard; for a row in a list of people, use Entity.
+
+**Block:** Social & messaging · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- The avatar overlaps the banner by half its height with a ring in the card colour, so it reads as sitting on the card, not pasted over the art.
+- Follow is the one primary action and flips to a secondary Following once pressed; Share is an icon-only ghost Button beside it.
+- Counts pair a label-tier number with muted body text, so the numbers scan as a row.
+
+## Accessibility
+
+- The Share button carries aria-label; Follow's visible text changes with its state.
+- The banner is decorative (aria-hidden); the Avatar's alt is the person's name.
+
+## Source
+
+```tsx
+import { useState } from "react"
+import { Avatar, Button, Card, CardContent, CardDescription, CardTitle, cn, Icon } from "@sableui/react"
+
+const profile = {
+	name: "Juno Avery",
+	initials: "JA",
+	handle: "@juno · Sound and light",
+	bio: "Field recordings, slowed down. New edition every full moon.",
+	stats: [
+		{ value: "128", label: "posts" },
+		{ value: "4.2k", label: "followers" },
+	],
+}
+
+/**
+ * Placeholder banner painted from the palette — the theme's decorative tones
+ * over the brand, so it follows every look. Replace with the person's cover image.
+ */
+const ART_TONES = ["info", "collectible", "edition", "standard"]
+const ART_SPOTS = [[10, 50, 60], [50, 0, 55], [90, 60, 60], [40, 100, 50]]
+const banner = [
+	...ART_SPOTS.map(
+		([x, y, reach], i) =>
+			// design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
+			`radial-gradient(in oklab at ${x}% ${y}%, oklch(from var(--tone-${ART_TONES[i % ART_TONES.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`,
+	),
+	"var(--primary)",
+].join(", ")
+
+export interface ProfileCardBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	/** Called with the new follow state. */
+	onFollowChange?: (following: boolean) => void
+	onShare?: () => void
+}
+
+export function ProfileCardBlock({ className, framed = true, onFollowChange, onShare }: ProfileCardBlockProps) {
+	const [following, setFollowing] = useState(false)
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs overflow-hidden", className)}>
+			<div aria-hidden className="h-20" style={{ background: banner }} />
+			{/* pt-0: the avatar rises into the banner above, so the content
+			    starts at the banner's edge rather than a full pad below it. */}
+			<CardContent className="flex flex-col gap-3 pt-0">
+				<div className="flex items-start justify-between">
+					<Avatar size="lg" fallback={profile.initials} alt={profile.name} className="-mt-6 ring-4 ring-card" />
+					<div className="flex gap-1.5 pt-3">
+						<Button variant="ghost" size="icon-sm" aria-label="Share profile" onClick={onShare}>
+							<Icon name="share" />
+						</Button>
+						<Button
+							size="sm"
+							variant={following ? "secondary" : "primary"}
+							onClick={() => {
+								setFollowing(!following)
+								onFollowChange?.(!following)
+							}}
+						>
+							{following ? "Following" : "Follow"}
+						</Button>
+					</div>
+				</div>
+				<div className="flex flex-col gap-0.5">
+					<CardTitle>{profile.name}</CardTitle>
+					<CardDescription>{profile.handle}</CardDescription>
+				</div>
+				<p className="text-body-sm">{profile.bio}</p>
+				<div className="flex gap-4 text-body-sm">
+					{profile.stats.map((s) => (
+						<span key={s.label}>
+							<span className="text-label-lg">{s.value}</span> <span className="text-muted-foreground">{s.label}</span>
+						</span>
+					))}
+				</div>
+			</CardContent>
+		</Card>
+	)
+}
+```

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

@@ -0,0 +1,114 @@
+# ProfileFormBlock
+
+A profile settings card: avatar with upload/remove, name and handle side by side, a bio, a timezone Select, and one Save profile in the footer.
+
+**Intent:** Reach for this for the profile or account section of settings, or any form of drafted text that is committed together. Toggles that apply instantly belong in NotificationSettingsBlock, never behind this Save.
+
+**Block:** Settings & team · card · designed for 20rem–42rem wide (fills its container up to the max)
+
+## Notes
+
+- Copied from the SettingsPage page shell's Profile section; the shell keeps its own copy so it stays one self-contained file.
+- One explicit save for the whole card. Short pairs (name + handle) sit side by side from sm up with Grid cols={{ base: 1, sm: 2 }}.
+- The CardTitle renders an h2, so the section joins the page outline under its h1.
+
+## Accessibility
+
+- Field wires label, description and error to each control; the handle's URL preview is its description.
+- The photo actions are type="button", so neither one submits the form.
+
+## Source
+
+```tsx
+import { Avatar, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Field, Form, Grid, Input, Row, Select, SelectContent, SelectItem, SelectTrigger, Stack, Textarea } from "@sableui/react"
+
+const profile = {
+	name: "Ada Lovelace",
+	initials: "AL",
+	handle: "ada",
+	bio: "Generative artist working in plotted ink and code. New editions of 25 to 100 every month.",
+	timezone: "europe-london",
+}
+
+const timezones = [
+	{ value: "europe-london", label: "London (GMT+1)" },
+	{ value: "europe-paris", label: "Paris (GMT+2)" },
+	{ value: "america-new-york", label: "New York (GMT−4)" },
+	{ value: "america-los-angeles", label: "Los Angeles (GMT−7)" },
+	{ value: "asia-tokyo", label: "Tokyo (GMT+9)" },
+]
+
+export interface ProfileFormBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	/** Called with the form's fields on Save profile. */
+	onSave?: (fields: FormData) => void
+}
+
+export function ProfileFormBlock({ className, framed = true, onSave }: ProfileFormBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-2xl", className)}>
+			<CardHeader>
+				<CardTitle render={<h2 />}>Profile</CardTitle>
+				<CardDescription>How collectors see you.</CardDescription>
+			</CardHeader>
+			{/* The one explicit save: profile text is drafted, then committed. */}
+			<Form
+				className="gap-0"
+				onSubmit={(event) => {
+					event.preventDefault()
+					onSave?.(new FormData(event.currentTarget))
+				}}
+			>
+				<CardContent>
+					<Stack gap={3}>
+						<Row gap={2}>
+							<Avatar size="lg" fallback={profile.initials} alt={profile.name} />
+							<Stack gap={0.5} align="start">
+								<Row gap={1}>
+									<Button type="button" variant="outline" size="sm">
+										Upload photo
+									</Button>
+									<Button type="button" variant="ghost" size="sm">
+										Remove
+									</Button>
+								</Row>
+								<p className="text-caption text-muted-foreground">Square PNG or JPG, at least 400 px.</p>
+							</Stack>
+						</Row>
+						<Grid cols={{ base: 1, sm: 2 }} gap={3}>
+							<Field label="Display name" name="displayName" required>
+								<Input defaultValue={profile.name} autoComplete="name" />
+							</Field>
+							<Field label="Handle" name="handle" description={`atelier.com/@${profile.handle}`} required>
+								<Input defaultValue={profile.handle} autoComplete="username" spellCheck={false} />
+							</Field>
+						</Grid>
+						<Field label="Bio" name="bio" description="Shown on your profile and edition pages.">
+							<Textarea rows={3} defaultValue={profile.bio} />
+						</Field>
+						<Grid cols={{ base: 1, sm: 2 }} gap={3}>
+							<Field label="Timezone" name="timezone" description="Release times use this zone.">
+								<Select defaultValue={profile.timezone} items={timezones}>
+									<SelectTrigger />
+									<SelectContent>
+										{timezones.map((zone) => (
+											<SelectItem key={zone.value} value={zone.value}>
+												{zone.label}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</Field>
+						</Grid>
+					</Stack>
+				</CardContent>
+				<CardFooter className="justify-end">
+					<Button type="submit">Save profile</Button>
+				</CardFooter>
+			</Form>
+		</Card>
+	)
+}
+```

package/llms/blocks/revenue-breakdown-block.md

@@ -0,0 +1,70 @@
+# RevenueBreakdownBlock
+
+A stat card with a breakdown: the KPI in the metric mono tier, its trend Badge, a SegmentedBar of how the total divides, and a StatusDot legend.
+
+**Intent:** Reach for this when a headline number is worth splitting into a few categories — revenue by product, storage by type, tickets by priority. A plain KPI with no split is a smaller stat card (see DashboardPage's stat row).
+
+**Block:** Dashboard · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- The value is `text-mono-xl` — tabular figures, never a heading tier — and the label above it is CardDescription.
+- The legend reflows from two columns to one by measuring in em, so larger type or a narrower card never truncates a label.
+- Each category keeps the same tone in the bar and its legend dot; reuse those tones wherever the category appears.
+
+## Accessibility
+
+- The SegmentedBar is one image whose name reads every share; the legend repeats it visually and is aria-hidden so it is not announced twice.
+- The trend Badge states the change as text (+8.2%), not by colour.
+
+## Source
+
+```tsx
+import { Badge, Card, CardAction, CardContent, CardDescription, CardHeader, cn, Grid, SegmentedBar, StatusDot } from "@sableui/react"
+
+const revenue = { label: "Revenue this month", total: "$12,480", change: "+8.2%" }
+
+const segments = [
+	{ label: "Editions", value: 42, tone: "edition" },
+	{ label: "Collectibles", value: 27, tone: "collectible" },
+	{ label: "Standard", value: 19, tone: "standard" },
+	{ label: "Commissions", value: 12, tone: "info" },
+] as const
+
+export interface RevenueBreakdownBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+}
+
+export function RevenueBreakdownBlock({ className, framed = true }: RevenueBreakdownBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs", className)}>
+			<CardHeader>
+				<CardDescription>{revenue.label}</CardDescription>
+				<CardAction>
+					<Badge tone="success" size="sm">
+						{revenue.change}
+					</Badge>
+				</CardAction>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4 pt-2">
+				<span className="text-mono-xl">{revenue.total}</span>
+				<SegmentedBar label="Revenue by type" segments={[...segments]} size="lg" />
+				{/* Two columns while each entry fits whole, one when they would not:
+				    sized in em, so a larger type or a narrower card drops to one.
+				    aria-hidden: the bar already reads every share aloud. */}
+				<Grid aria-hidden minItemWidth="9.5em" gap="calc(var(--spacing) * 1.5) calc(var(--spacing) * 4)">
+					{segments.map((s) => (
+						<div key={s.label} className="flex items-center gap-2 text-body-sm">
+							<StatusDot tone={s.tone} />
+							<span className="flex-1 text-muted-foreground">{s.label}</span>
+							<span className="text-mono-caption">{s.value}%</span>
+						</div>
+					))}
+				</Grid>
+			</CardContent>
+		</Card>
+	)
+}
+```

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

@@ -0,0 +1,64 @@
+# SignInBlock
+
+A sign-in card: email and password, a primary Sign in, and a passkey alternative under an "or" separator.
+
+**Intent:** Reach for this wherever someone signs in inside a surface you already have — a Sheet, a Dialog, a gated panel. For a whole sign-in route with brand art beside the form, start from the AuthPage page shell instead.
+
+**Block:** Auth · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- One primary action. The passkey is an outline Button under a labelled Separator, so it reads as an alternative, not a second submit.
+- The fields are a real <form>: Enter submits, and the browser's password manager recognises the autocomplete hints.
+- framed={false} keeps the padding and drops the surface, for a Sheet or Dialog that is already the frame.
+
+## Accessibility
+
+- Inputs carry aria-label because the design shows placeholders, not visible labels; add Field labels if your brief wants them visible.
+- `onSignIn` receives "password" or "passkey", so focus and error handling stay with the caller's auth flow.
+
+## Source
+
+```tsx
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, Icon, Input, Separator } from "@sableui/react"
+
+export interface SignInBlockProps {
+	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 method the person chose. Wire your auth here. */
+	onSignIn?: (method: "password" | "passkey") => void
+}
+
+export function SignInBlock({ className, framed = true, onSignIn }: SignInBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs", className)}>
+			<CardHeader>
+				<CardTitle>Welcome back</CardTitle>
+				<CardDescription>Sign in to pick up where you left off.</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<form
+					className="flex flex-col gap-4"
+					onSubmit={(event) => {
+						event.preventDefault()
+						onSignIn?.("password")
+					}}
+				>
+					<div className="flex flex-col gap-2">
+						<Input name="email" type="email" autoComplete="email" placeholder="you@studio.com" aria-label="Email" />
+						<Input name="password" type="password" autoComplete="current-password" placeholder="Password" aria-label="Password" />
+					</div>
+					<Button type="submit" className="w-full">
+						Sign in
+					</Button>
+					<Separator label="or" />
+					<Button variant="outline" className="w-full" iconStart={<Icon name="lock" />} onClick={() => onSignIn?.("passkey")}>
+						Use a passkey
+					</Button>
+				</form>
+			</CardContent>
+		</Card>
+	)
+}
+```