@voila.dev/ui 1.1.9

package/src/components/ui/badge-variants.ts

@@ -0,0 +1,166 @@
+import { cva, type VariantProps } from "#/lib/cva.ts";
+
+/**
+ * The single canonical badge cva - base, variants, palette and sizes - shared
+ * by `Badge` and `Chip`. Like `button-variants.ts`/`menu-variants.ts`, the
+ * recipe lives in a React-free module so it stays importable from non-React
+ * surfaces and cross-component without pulling the component in.
+ */
+export const badgeVariants = cva({
+	base: "group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden rounded-4xl border border-transparent font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-3",
+	variants: {
+		// Solid variants only hover when rendered as an anchor ([a]:hover) -
+		// static chips should stay inert - while `ghost` and `link` exist for
+		// interactive use and hover unconditionally.
+		variant: {
+			default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+			secondary:
+				"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+			provider: "bg-provider text-provider-foreground [a]:hover:bg-provider/90",
+			organization:
+				"bg-organization text-organization-foreground [a]:hover:bg-organization/90",
+			destructive:
+				"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+			outline:
+				"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+			ghost:
+				"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		// Catalog palette. Declared after `variant` so its bg/text win conflicts
+		// via tailwind-merge when both a `variant` and a `color` are passed. Keep
+		// in sync with `BadgeColorEnum` in the domain and the `--badge-*` tokens.
+		color: {
+			slate:
+				"bg-badge-slate text-badge-slate-foreground [a]:hover:bg-badge-slate/90",
+			gray: "bg-badge-gray text-badge-gray-foreground [a]:hover:bg-badge-gray/90",
+			zinc: "bg-badge-zinc text-badge-zinc-foreground [a]:hover:bg-badge-zinc/90",
+			red: "bg-badge-red text-badge-red-foreground [a]:hover:bg-badge-red/90",
+			orange:
+				"bg-badge-orange text-badge-orange-foreground [a]:hover:bg-badge-orange/90",
+			amber:
+				"bg-badge-amber text-badge-amber-foreground [a]:hover:bg-badge-amber/90",
+			yellow:
+				"bg-badge-yellow text-badge-yellow-foreground [a]:hover:bg-badge-yellow/90",
+			lime: "bg-badge-lime text-badge-lime-foreground [a]:hover:bg-badge-lime/90",
+			green:
+				"bg-badge-green text-badge-green-foreground [a]:hover:bg-badge-green/90",
+			emerald:
+				"bg-badge-emerald text-badge-emerald-foreground [a]:hover:bg-badge-emerald/90",
+			teal: "bg-badge-teal text-badge-teal-foreground [a]:hover:bg-badge-teal/90",
+			cyan: "bg-badge-cyan text-badge-cyan-foreground [a]:hover:bg-badge-cyan/90",
+			sky: "bg-badge-sky text-badge-sky-foreground [a]:hover:bg-badge-sky/90",
+			blue: "bg-badge-blue text-badge-blue-foreground [a]:hover:bg-badge-blue/90",
+			indigo:
+				"bg-badge-indigo text-badge-indigo-foreground [a]:hover:bg-badge-indigo/90",
+			violet:
+				"bg-badge-violet text-badge-violet-foreground [a]:hover:bg-badge-violet/90",
+			purple:
+				"bg-badge-purple text-badge-purple-foreground [a]:hover:bg-badge-purple/90",
+			fuchsia:
+				"bg-badge-fuchsia text-badge-fuchsia-foreground [a]:hover:bg-badge-fuchsia/90",
+			pink: "bg-badge-pink text-badge-pink-foreground [a]:hover:bg-badge-pink/90",
+			rose: "bg-badge-rose text-badge-rose-foreground [a]:hover:bg-badge-rose/90",
+		},
+		size: {
+			default:
+				"h-5 gap-1 px-2 py-0.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+			sm: "h-4 gap-0.5 px-1.5 py-0 text-[10px] has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg:not([class*='size-'])]:size-2.5",
+		},
+	},
+});
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+/** The catalog palette names - keep in sync with the `color` variant above. */
+export const badgeColors = [
+	"slate",
+	"gray",
+	"zinc",
+	"red",
+	"orange",
+	"amber",
+	"yellow",
+	"lime",
+	"green",
+	"emerald",
+	"teal",
+	"cyan",
+	"sky",
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"fuchsia",
+	"pink",
+	"rose",
+] as const satisfies readonly NonNullable<BadgeVariants["color"]>[];
+
+export type BadgeColor = (typeof badgeColors)[number];
+
+/**
+ * Static lookup for the palette background utilities. Consumers (e.g. the
+ * color picker) must use this instead of composing `bg-badge-${name}` at
+ * runtime, which would silently break if these literals stopped being
+ * scanned by Tailwind.
+ */
+export const badgeColorBackgroundClass: Record<BadgeColor, string> = {
+	slate: "bg-badge-slate",
+	gray: "bg-badge-gray",
+	zinc: "bg-badge-zinc",
+	red: "bg-badge-red",
+	orange: "bg-badge-orange",
+	amber: "bg-badge-amber",
+	yellow: "bg-badge-yellow",
+	lime: "bg-badge-lime",
+	green: "bg-badge-green",
+	emerald: "bg-badge-emerald",
+	teal: "bg-badge-teal",
+	cyan: "bg-badge-cyan",
+	sky: "bg-badge-sky",
+	blue: "bg-badge-blue",
+	indigo: "bg-badge-indigo",
+	violet: "bg-badge-violet",
+	purple: "bg-badge-purple",
+	fuchsia: "bg-badge-fuchsia",
+	pink: "bg-badge-pink",
+	rose: "bg-badge-rose",
+};
+
+/** Static lookup for the contrast-aware palette foreground utilities. */
+export const badgeColorForegroundClass: Record<BadgeColor, string> = {
+	slate: "text-badge-slate-foreground",
+	gray: "text-badge-gray-foreground",
+	zinc: "text-badge-zinc-foreground",
+	red: "text-badge-red-foreground",
+	orange: "text-badge-orange-foreground",
+	amber: "text-badge-amber-foreground",
+	yellow: "text-badge-yellow-foreground",
+	lime: "text-badge-lime-foreground",
+	green: "text-badge-green-foreground",
+	emerald: "text-badge-emerald-foreground",
+	teal: "text-badge-teal-foreground",
+	cyan: "text-badge-cyan-foreground",
+	sky: "text-badge-sky-foreground",
+	blue: "text-badge-blue-foreground",
+	indigo: "text-badge-indigo-foreground",
+	violet: "text-badge-violet-foreground",
+	purple: "text-badge-purple-foreground",
+	fuchsia: "text-badge-fuchsia-foreground",
+	pink: "text-badge-pink-foreground",
+	rose: "text-badge-rose-foreground",
+};
+
+/** The semantic variant names - keep in sync with the `variant` axis above. */
+export const badgeVariantOptions = [
+	"default",
+	"secondary",
+	"provider",
+	"organization",
+	"destructive",
+	"outline",
+	"ghost",
+	"link",
+] as const satisfies readonly NonNullable<BadgeVariants["variant"]>[];
+
+export type BadgeVariant = (typeof badgeVariantOptions)[number];

package/src/components/ui/badge.tsx

@@ -0,0 +1,45 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import {
+	type BadgeVariants,
+	badgeVariants,
+} from "#/components/ui/badge-variants.ts";
+import { cn } from "#/lib/utils.ts";
+
+function Badge({
+	className,
+	variant = "default",
+	color,
+	size = "default",
+	render,
+	...props
+}: useRender.ComponentProps<"span"> & BadgeVariants) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps<"span">(
+			{
+				className: cn(badgeVariants({ variant, color, size }), className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "badge",
+			variant,
+			color,
+			size,
+		},
+	});
+}
+
+export {
+	type BadgeColor,
+	type BadgeVariant,
+	type BadgeVariants,
+	badgeColorBackgroundClass,
+	badgeColorForegroundClass,
+	badgeColors,
+	badgeVariantOptions,
+	badgeVariants,
+} from "#/components/ui/badge-variants.ts";
+export { Badge };

package/src/components/ui/banner.tsx

@@ -0,0 +1,84 @@
+import { XIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+
+import { cn } from "#/lib/utils.ts";
+
+const bannerVariants = cva({
+	base: "group/banner relative flex w-full items-center gap-3 px-4 py-2.5 text-sm has-data-[slot=banner-close]:pr-12 md:px-6 [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground",
+			muted: "bg-muted text-foreground",
+			success: "bg-success text-success-foreground",
+			warning: "bg-warning text-warning-foreground",
+			destructive: "bg-destructive text-destructive-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+/**
+ * Page-level announcement bar spanning the full width of its container
+ * (release notes, maintenance windows, billing reminders). Unlike `Alert`,
+ * which sits inline within the content flow, a Banner is pinned at the top of
+ * a page or layout and uses solid semantic backgrounds.
+ */
+function Banner({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof bannerVariants>) {
+	return (
+		<div
+			data-slot="banner"
+			role="status"
+			className={cn(bannerVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function BannerTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="banner-title"
+			className={cn(
+				"flex-1 font-medium text-balance [&_a]:underline [&_a]:underline-offset-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BannerAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="banner-action"
+			className={cn("flex shrink-0 items-center gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function BannerClose({ className, ...props }: React.ComponentProps<"button">) {
+	return (
+		<button
+			type="button"
+			data-slot="banner-close"
+			aria-label="Dismiss"
+			className={cn(
+				"absolute top-1/2 right-3 inline-flex size-6 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&>svg]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<XIcon aria-hidden />
+		</button>
+	);
+}
+
+export { Banner, BannerAction, BannerClose, BannerTitle, bannerVariants };

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,127 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import { cn } from "#/lib/utils.ts";
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+	return (
+		<nav
+			aria-label="breadcrumb"
+			data-slot="breadcrumb"
+			className={className}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="breadcrumb-item"
+			className={cn("inline-flex items-center gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbLink({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"a">) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn("transition-colors hover:text-foreground", className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "breadcrumb-link",
+		},
+	});
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			aria-current="page"
+			className={cn("font-normal text-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("[&>svg]:size-3.5", className)}
+			{...props}
+		>
+			{children ?? <CaretRightIcon />}
+		</li>
+	);
+}
+
+function BreadcrumbEllipsis({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"span">) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps<"span">(
+			{
+				className: cn(
+					"flex size-5 items-center justify-center [&>svg]:size-4",
+					className,
+				),
+				children: (
+					<>
+						<DotsThreeIcon />
+						<span className="sr-only">More</span>
+					</>
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "breadcrumb-ellipsis",
+		},
+	});
+}
+
+export {
+	Breadcrumb,
+	BreadcrumbEllipsis,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+};

package/src/components/ui/button-group.tsx

@@ -0,0 +1,99 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+import { Separator } from "#/components/ui/separator.tsx";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+
+const buttonGroupVariants = cva({
+	base: "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	variants: {
+		orientation: {
+			horizontal:
+				"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+			vertical:
+				"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+		},
+	},
+});
+
+const ButtonGroupContext = React.createContext<"horizontal" | "vertical">(
+	"horizontal",
+);
+
+/**
+ * Visual-only grouping: label it for screen readers with `aria-label` or
+ * `aria-labelledby`. For a single-select segmented control (Day/Week/Month),
+ * prefer `ToggleGroup`, which carries the pressed-state semantics.
+ */
+function ButtonGroup({
+	className,
+	orientation = "horizontal",
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+	return (
+		<ButtonGroupContext.Provider value={orientation}>
+			<div
+				role="group"
+				data-slot="button-group"
+				data-orientation={orientation}
+				className={cn(buttonGroupVariants({ orientation }), className)}
+				{...props}
+			/>
+		</ButtonGroupContext.Provider>
+	);
+}
+
+function ButtonGroupText({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "button-group-text",
+		},
+	});
+}
+
+function ButtonGroupSeparator({
+	className,
+	orientation,
+	...props
+}: React.ComponentProps<typeof Separator>) {
+	const groupOrientation = React.useContext(ButtonGroupContext);
+	return (
+		<Separator
+			data-slot="button-group-separator"
+			// A horizontal group needs a vertical rule between members, and
+			// vice versa - derived from the group so consumers never pass it.
+			orientation={
+				orientation ??
+				(groupOrientation === "horizontal" ? "vertical" : "horizontal")
+			}
+			className={cn(
+				"relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	ButtonGroup,
+	ButtonGroupSeparator,
+	ButtonGroupText,
+	buttonGroupVariants,
+};

package/src/components/ui/button-variants.ts

@@ -0,0 +1,108 @@
+import { cva, type VariantProps } from "#/lib/cva.ts";
+
+/**
+ * The single canonical button cva - base, variants and sizes - shared by the
+ * app's React `Button` (Base UI) and the marketing Astro button, so both
+ * surfaces render the same button. Built on the project-wide,
+ * tailwind-merge-configured `cva` (see `#/lib/cva.ts`).
+ *
+ * Variant colors map to the design tokens: `default` (primary, black),
+ * `provider` (blue), `organization` (orange), plus the neutral/utility roles.
+ * `primary` is an alias of `default` for the marketing site, whose buttons
+ * default to the `primary` variant name.
+ *
+ * `active:not-aria-[haspopup]:translate-y-px` gives a tactile press nudge on
+ * click, but skips popup triggers (dropdown/menu/select) so they don't jump
+ * down as their menu opens.
+ */
+export const buttonVariants = cva({
+	base: "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	variants: {
+		// Solid variants (default/primary/provider/organization) only hover when
+		// rendered as an anchor ([a]:hover) - a plain <button> is usually the
+		// page's primary action and gets its feedback from active:translate-y-px
+		// instead, so it stays inert under the cursor. The neutral/utility roles
+		// (secondary/outline/ghost/destructive/link) hover unconditionally.
+		// Mirrors the same split in `badgeVariants`.
+		variant: {
+			default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+			primary: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			provider: "bg-provider text-provider-foreground [a]:hover:bg-provider/90",
+			organization:
+				"bg-organization text-organization-foreground [a]:hover:bg-organization/90",
+			outline:
+				"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			ghost:
+				"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive:
+				"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			link: "border-transparent text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default:
+				"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-11 gap-2 px-6 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+			icon: "size-8",
+			"icon-xs":
+				"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm":
+				"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9",
+		},
+		// Corner shape. `default` keeps the size-driven radius; `pill` forces a
+		// fully-rounded button (used by the storefront CTAs). Listed last so its
+		// rounded-full wins tailwind-merge over the size radii above.
+		shape: {
+			default: "",
+			pill: "rounded-full",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		shape: "default",
+	},
+});
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+/**
+ * The semantic variant names - keep in sync with the `variant` axis above.
+ * Exported (like `badgeColors`) so stories and form builders can iterate the
+ * set instead of hand-copying it.
+ */
+export const buttonVariantOptions = [
+	"default",
+	"primary",
+	"secondary",
+	"provider",
+	"organization",
+	"outline",
+	"ghost",
+	"destructive",
+	"link",
+] as const satisfies readonly NonNullable<ButtonVariants["variant"]>[];
+
+export type ButtonVariant = (typeof buttonVariantOptions)[number];
+
+/**
+ * The size names, ordered smallest to largest (text sizes then icon sizes) -
+ * keep in sync with the `size` axis above. The scale is xs < sm < default < lg,
+ * with `default` (h-8) as the unmarked middle.
+ */
+export const buttonSizeOptions = [
+	"xs",
+	"sm",
+	"default",
+	"lg",
+	"icon-xs",
+	"icon-sm",
+	"icon",
+	"icon-lg",
+] as const satisfies readonly NonNullable<ButtonVariants["size"]>[];
+
+export type ButtonSize = (typeof buttonSizeOptions)[number];

package/src/components/ui/button.tsx

@@ -0,0 +1,54 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+
+import {
+	type ButtonVariants,
+	buttonVariants,
+} from "#/components/ui/button-variants.ts";
+import { Spinner } from "#/components/ui/spinner.tsx";
+import { cn } from "#/lib/utils.ts";
+
+type ButtonProps = ButtonPrimitive.Props &
+	ButtonVariants & {
+		/**
+		 * Show a leading spinner and mark the button `aria-busy`, disabling
+		 * interaction while an async action is in flight (e.g. a form submit).
+		 */
+		loading?: boolean;
+	};
+
+function Button({
+	className,
+	variant = "default",
+	size = "default",
+	shape = "default",
+	loading = false,
+	disabled,
+	children,
+	...props
+}: ButtonProps) {
+	return (
+		<ButtonPrimitive
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			data-shape={shape}
+			disabled={disabled || loading}
+			aria-busy={loading || undefined}
+			className={cn(buttonVariants({ variant, size, shape }), className)}
+			{...props}
+		>
+			{loading ? <Spinner /> : null}
+			{children}
+		</ButtonPrimitive>
+	);
+}
+
+export {
+	type ButtonSize,
+	type ButtonVariant,
+	type ButtonVariants,
+	buttonSizeOptions,
+	buttonVariantOptions,
+	buttonVariants,
+} from "#/components/ui/button-variants.ts";
+export { Button, type ButtonProps };