@voila.dev/ui 1.1.9

package/src/components/ui/popover.tsx

@@ -0,0 +1,104 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { cn } from "#/lib/utils.ts";
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
+	return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
+}
+
+function PopoverContent({
+	className,
+	align = "center",
+	alignOffset = 0,
+	side = "bottom",
+	sideOffset = 4,
+	positionerProps,
+	...props
+}: PopoverPrimitive.Popup.Props &
+	Pick<
+		PopoverPrimitive.Positioner.Props,
+		"align" | "alignOffset" | "side" | "sideOffset"
+	> & {
+		// Escape hatch for the Positioner props not surfaced as dedicated props
+		// (collisionPadding, sticky, anchor, positionMethod, arrowPadding…).
+		positionerProps?: Omit<
+			PopoverPrimitive.Positioner.Props,
+			"align" | "alignOffset" | "side" | "sideOffset" | "children"
+		>;
+	}) {
+	const { className: positionerClassName, ...restPositionerProps } =
+		positionerProps ?? {};
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Positioner
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+				className={cn("isolate z-50", positionerClassName)}
+				{...restPositionerProps}
+			>
+				<PopoverPrimitive.Popup
+					data-slot="popover-content"
+					className={cn(
+						"z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none",
+						className,
+					)}
+					{...props}
+				/>
+			</PopoverPrimitive.Positioner>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="popover-header"
+			className={cn("flex flex-col gap-0.5", className)}
+			{...props}
+		/>
+	);
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+	return (
+		<PopoverPrimitive.Title
+			data-slot="popover-title"
+			className={cn("font-medium", className)}
+			{...props}
+		/>
+	);
+}
+
+function PopoverDescription({
+	className,
+	...props
+}: PopoverPrimitive.Description.Props) {
+	return (
+		<PopoverPrimitive.Description
+			data-slot="popover-description"
+			className={cn("text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Popover,
+	PopoverClose,
+	PopoverContent,
+	PopoverDescription,
+	PopoverHeader,
+	PopoverTitle,
+	PopoverTrigger,
+};

package/src/components/ui/profile-header.tsx

@@ -0,0 +1,196 @@
+import type * as React from "react";
+import { AspectRatio } from "#/components/ui/aspect-ratio.tsx";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "#/components/ui/avatar.tsx";
+import { getInitials } from "#/components/ui/user-avatar.tsx";
+import { cn } from "#/lib/utils.ts";
+
+type ProfileTheme = "provider" | "organization";
+
+// `theme` coordinates the themed children (cover gradient, avatar ring) off
+// the `data-theme` attribute their group root emits.
+
+/** Themed cover gradient used when no `coverImage` is supplied. */
+const coverGradientClasses =
+	"bg-gradient-to-br group-data-[theme=organization]/profile-header-cover:from-organization group-data-[theme=organization]/profile-header-cover:via-organization/80 group-data-[theme=organization]/profile-header-cover:to-organization/40 group-data-[theme=provider]/profile-header-cover:from-provider group-data-[theme=provider]/profile-header-cover:via-provider/80 group-data-[theme=provider]/profile-header-cover:to-provider/40";
+
+/** Ring color that frames the overlapping avatar, matched to the theme. */
+const avatarRingClasses =
+	"group-data-[theme=organization]/profile-header:ring-organization/20 group-data-[theme=provider]/profile-header:ring-provider/20";
+
+type ProfileHeaderAvatar = { src?: string; name?: string };
+
+function isAvatarDescriptor(
+	avatar: React.ReactNode | ProfileHeaderAvatar | undefined,
+): avatar is ProfileHeaderAvatar {
+	return (
+		typeof avatar === "object" &&
+		avatar !== null &&
+		!("$$typeof" in (avatar as object))
+	);
+}
+
+/** Cover band — renders a `coverImage` (node or src) or a themed gradient. */
+function ProfileHeaderCover({
+	coverImage,
+	theme = "provider",
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	coverImage?: React.ReactNode | string;
+	theme?: ProfileTheme;
+}) {
+	return (
+		<div
+			data-slot="profile-header-cover"
+			data-theme={theme}
+			className={cn(
+				"group/profile-header-cover relative overflow-hidden",
+				className,
+			)}
+			{...props}
+		>
+			<AspectRatio ratio={3}>
+				{typeof coverImage === "string" ? (
+					<img
+						src={coverImage}
+						alt=""
+						className="size-full object-cover"
+						data-slot="profile-header-cover-image"
+					/>
+				) : coverImage ? (
+					coverImage
+				) : (
+					<div
+						aria-hidden
+						data-slot="profile-header-cover-fallback"
+						className={cn("size-full", coverGradientClasses)}
+					/>
+				)}
+			</AspectRatio>
+			{children}
+		</div>
+	);
+}
+
+/**
+ * Hero band for a provider or organization profile: a themed cover, an
+ * overlapping circular avatar, name + optional headline, a trust-badge row
+ * and a right-aligned actions slot. Composable — the cover/body sub-parts are
+ * exported so consumers can rebuild a custom hero when needed.
+ */
+function ProfileHeader({
+	name,
+	headline,
+	coverImage,
+	avatar,
+	theme = "provider",
+	badges,
+	actions,
+	className,
+	children,
+	...props
+}: Omit<React.ComponentProps<"div">, "title"> & {
+	name: string;
+	headline?: React.ReactNode;
+	coverImage?: React.ReactNode | string;
+	avatar?: React.ReactNode | ProfileHeaderAvatar;
+	theme?: ProfileTheme;
+	badges?: React.ReactNode;
+	actions?: React.ReactNode;
+}) {
+	const avatarNode = isAvatarDescriptor(avatar) ? (
+		<Avatar
+			size="lg"
+			className={cn("size-16 ring-4 sm:size-24", avatarRingClasses)}
+		>
+			{avatar.src ? (
+				<AvatarImage src={avatar.src} alt={avatar.name ?? name} />
+			) : null}
+			<AvatarFallback className="text-lg sm:text-2xl">
+				{getInitials(avatar.name ?? name)}
+			</AvatarFallback>
+		</Avatar>
+	) : avatar !== undefined ? (
+		avatar
+	) : (
+		<Avatar
+			size="lg"
+			className={cn("size-16 ring-4 sm:size-24", avatarRingClasses)}
+		>
+			<AvatarFallback className="text-lg sm:text-2xl">
+				{getInitials(name)}
+			</AvatarFallback>
+		</Avatar>
+	);
+
+	return (
+		<div
+			data-slot="profile-header"
+			data-theme={theme}
+			className={cn("group/profile-header flex flex-col", className)}
+			{...props}
+		>
+			<ProfileHeaderCover coverImage={coverImage} theme={theme} />
+			<div
+				data-slot="profile-header-body"
+				className="flex flex-col gap-3 px-4 pb-4 sm:flex-row sm:items-end sm:gap-4"
+			>
+				<div
+					data-slot="profile-header-avatar"
+					className="-mt-8 shrink-0 sm:-mt-12"
+				>
+					{avatarNode}
+				</div>
+				<div
+					data-slot="profile-header-identity"
+					className="flex min-w-0 flex-1 flex-col gap-2 sm:pb-1"
+				>
+					<div className="flex min-w-0 flex-col gap-0.5">
+						<h1
+							data-slot="profile-header-name"
+							className="truncate text-xl font-semibold tracking-tight sm:text-2xl"
+						>
+							{name}
+						</h1>
+						{headline ? (
+							<p
+								data-slot="profile-header-headline"
+								className="truncate text-sm text-muted-foreground"
+							>
+								{headline}
+							</p>
+						) : null}
+					</div>
+					{badges ? (
+						<div
+							data-slot="profile-header-badges"
+							className="flex flex-wrap items-center gap-1.5"
+						>
+							{badges}
+						</div>
+					) : null}
+				</div>
+				{actions ? (
+					<div
+						data-slot="profile-header-actions"
+						className="flex shrink-0 items-center gap-2 sm:pb-1"
+					>
+						{actions}
+					</div>
+				) : null}
+			</div>
+			{children}
+		</div>
+	);
+}
+
+export {
+	ProfileHeader,
+	ProfileHeaderCover,
+	type ProfileTheme as ProfileHeaderTheme,
+};

package/src/components/ui/progress.tsx

@@ -0,0 +1,71 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+
+import { cn } from "#/lib/utils.ts";
+
+type ProgressProps = ProgressPrimitive.Root.Props & {
+	trackClassName?: string;
+	indicatorClassName?: string;
+};
+
+/**
+ * Children render before the track in a wrapping flex row, so a
+ * ProgressLabel + ProgressValue pair forms a header row and the full-width
+ * track wraps below it. Pass `value={null}` for an indeterminate bar.
+ */
+function Progress({
+	className,
+	children,
+	trackClassName,
+	indicatorClassName,
+	...props
+}: ProgressProps) {
+	return (
+		<ProgressPrimitive.Root
+			data-slot="progress"
+			className={cn("flex flex-wrap gap-3", className)}
+			{...props}
+		>
+			{children}
+			<ProgressPrimitive.Track
+				data-slot="progress-track"
+				className={cn(
+					"relative flex h-1 w-full items-center overflow-hidden rounded-full bg-muted",
+					trackClassName,
+				)}
+			>
+				<ProgressPrimitive.Indicator
+					data-slot="progress-indicator"
+					className={cn(
+						"h-full bg-primary transition-[width] motion-reduce:transition-none data-indeterminate:w-1/2 data-indeterminate:animate-progress-indeterminate data-indeterminate:motion-reduce:animate-[progress-indeterminate_4s_linear_infinite]",
+						indicatorClassName,
+					)}
+				/>
+			</ProgressPrimitive.Track>
+		</ProgressPrimitive.Root>
+	);
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+	return (
+		<ProgressPrimitive.Label
+			data-slot="progress-label"
+			className={cn("text-sm font-medium", className)}
+			{...props}
+		/>
+	);
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+	return (
+		<ProgressPrimitive.Value
+			data-slot="progress-value"
+			className={cn(
+				"ml-auto text-sm text-muted-foreground tabular-nums",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Progress, ProgressLabel, ProgressValue };

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

@@ -0,0 +1,115 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { CheckCircleIcon } from "@phosphor-icons/react";
+
+import { cn } from "#/lib/utils.ts";
+
+type RadioGroupProps = RadioGroupPrimitive.Props & {
+	/**
+	 * Layout direction of the items. `vertical` stacks them (the default);
+	 * `horizontal` lays them out in a wrapping row - saves consumers from
+	 * rebuilding a `flex-row` wrapper for short option sets.
+	 */
+	orientation?: "vertical" | "horizontal";
+};
+
+function RadioGroup({
+	className,
+	orientation = "vertical",
+	...props
+}: RadioGroupProps) {
+	return (
+		<RadioGroupPrimitive
+			data-slot="radio-group"
+			data-orientation={orientation}
+			className={cn(
+				orientation === "horizontal"
+					? "flex flex-wrap items-center gap-x-4 gap-y-2"
+					: "grid gap-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+	return (
+		<RadioPrimitive.Root
+			data-slot="radio-group-item"
+			className={cn(
+				// `transition-colors` keeps the border/background from snapping when an
+				// item becomes (un)checked. The trailing `dark:data-checked:bg-primary`
+				// duplicates `data-checked:bg-primary` on purpose: in dark mode the
+				// unchecked `dark:bg-input/30` fill would otherwise win the
+				// tailwind-merge order once checked, so the dark override must come
+				// last. (Same idiom as checkbox.tsx.)
+				"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+				className,
+			)}
+			{...props}
+		>
+			<RadioPrimitive.Indicator
+				data-slot="radio-group-indicator"
+				// The indicator unmounts when unchecked, so it animates in on selection;
+				// `data-checked` is present whenever it is mounted.
+				className="flex size-4 items-center justify-center data-checked:animate-in data-checked:zoom-in-50 motion-reduce:animate-none"
+			>
+				<span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+			</RadioPrimitive.Indicator>
+		</RadioPrimitive.Root>
+	);
+}
+
+type RadioGroupCardProps = RadioPrimitive.Root.Props & {
+	/** Hide the checked-corner icon when the card's own content marks selection. */
+	showIndicator?: boolean;
+};
+
+/**
+ * "Choice card" alternative to `RadioGroupItem` - a bordered selectable card
+ * for plan/role pickers. Children are free-form (title, description, price,
+ * ...); the checked state reads as a primary border plus a corner icon. Base
+ * UI renders the card as a `<button>`, so don't nest interactive elements.
+ */
+function RadioGroupCard({
+	className,
+	children,
+	showIndicator = true,
+	...props
+}: RadioGroupCardProps) {
+	return (
+		<RadioPrimitive.Root
+			data-slot="radio-group-card"
+			className={cn(
+				// `transition-colors` for the same no-snap reason as RadioGroupItem;
+				// the checked border doubles as a ring so the 1px border change does
+				// not shift the layout.
+				"relative flex flex-col items-start gap-1 rounded-lg border border-input p-4 text-start text-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:ring-1 data-checked:ring-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+				showIndicator && "pr-9",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showIndicator && (
+				<RadioPrimitive.Indicator
+					data-slot="radio-group-card-indicator"
+					// Unmounts when unchecked, so it animates in on selection (same
+					// idiom as RadioGroupItem's dot).
+					className="absolute top-3 right-3 flex data-checked:animate-in data-checked:zoom-in-50 motion-reduce:animate-none"
+				>
+					<CheckCircleIcon weight="fill" className="size-4.5 text-primary" />
+				</RadioPrimitive.Indicator>
+			)}
+		</RadioPrimitive.Root>
+	);
+}
+
+export {
+	RadioGroup,
+	RadioGroupCard,
+	type RadioGroupCardProps,
+	RadioGroupItem,
+	type RadioGroupProps,
+};

package/src/components/ui/rating.tsx

@@ -0,0 +1,200 @@
+import { StarIcon } from "@phosphor-icons/react";
+import * as React from "react";
+import { UserAvatar } from "#/components/ui/user-avatar.tsx";
+import { cn } from "#/lib/utils.ts";
+
+const MAX_STARS = 5;
+
+type RatingSize = "sm" | "default" | "lg";
+
+// `size` coordinates the star and count children off the root's `data-size`.
+const starSizeClasses =
+	"size-4 group-data-[size=lg]/rating:size-5 group-data-[size=sm]/rating:size-3.5";
+
+/**
+ * Read-only star display. `value` (0–5) controls how many stars fill with the
+ * amber `--warning` token; the rest stay muted. Pass `count` to append the
+ * number of reviews (e.g. "(128)").
+ */
+function Rating({
+	value,
+	count,
+	size = "default",
+	max = MAX_STARS,
+	className,
+	...props
+}: Omit<React.ComponentProps<"div">, "children"> & {
+	value: number;
+	count?: number;
+	size?: RatingSize;
+	max?: number;
+}) {
+	const clamped = Math.max(0, Math.min(max, value));
+	const rounded = Math.round(clamped);
+
+	return (
+		<div
+			data-slot="rating"
+			data-size={size}
+			role="img"
+			aria-label={`${clamped} out of ${max} stars`}
+			className={cn("group/rating inline-flex items-center gap-1", className)}
+			{...props}
+		>
+			<span className="inline-flex items-center" aria-hidden>
+				{Array.from({ length: max }, (_unused, index) => {
+					const filled = index < rounded;
+					return (
+						<StarIcon
+							key={index}
+							weight={filled ? "fill" : "regular"}
+							data-slot="rating-star"
+							data-filled={filled || undefined}
+							className={cn(
+								starSizeClasses,
+								filled ? "text-warning" : "text-muted-foreground/40",
+							)}
+						/>
+					);
+				})}
+			</span>
+			{count !== undefined ? (
+				<span
+					data-slot="rating-count"
+					className="text-sm text-muted-foreground tabular-nums group-data-[size=lg]/rating:text-base group-data-[size=sm]/rating:text-xs"
+				>
+					({count})
+				</span>
+			) : null}
+		</div>
+	);
+}
+
+/**
+ * Interactive star picker. Controlled via `value` / `onChange`; hovering
+ * previews the would-be selection. Keyboard accessible through a radiogroup of
+ * star buttons.
+ */
+function RatingInput({
+	value,
+	onChange,
+	size = "default",
+	max = MAX_STARS,
+	disabled = false,
+	name,
+	className,
+	...props
+}: Omit<React.ComponentProps<"div">, "onChange"> & {
+	value: number;
+	onChange: (value: number) => void;
+	size?: RatingSize;
+	max?: number;
+	disabled?: boolean;
+	name?: string;
+}) {
+	const [hovered, setHovered] = React.useState<number | null>(null);
+	const active = hovered ?? value;
+
+	return (
+		<div
+			data-slot="rating-input"
+			data-size={size}
+			role="radiogroup"
+			aria-label="Rating"
+			className={cn(
+				"group/rating inline-flex items-center gap-0.5",
+				disabled && "pointer-events-none opacity-50",
+				className,
+			)}
+			onMouseLeave={() => setHovered(null)}
+			{...props}
+		>
+			{Array.from({ length: max }, (_unused, index) => {
+				const starValue = index + 1;
+				const filled = starValue <= active;
+				return (
+					<button
+						key={index}
+						type="button"
+						role="radio"
+						aria-checked={starValue === value}
+						aria-label={`${starValue} star${starValue === 1 ? "" : "s"}`}
+						disabled={disabled}
+						data-slot="rating-input-star"
+						data-filled={filled || undefined}
+						className="touch-manipulation rounded-sm p-0.5 outline-none transition-transform focus-visible:ring-2 focus-visible:ring-ring/50 not-disabled:hover:scale-110"
+						onMouseEnter={() => setHovered(starValue)}
+						onFocus={() => setHovered(starValue)}
+						onBlur={() => setHovered(null)}
+						onClick={() => onChange(starValue)}
+					>
+						<StarIcon
+							weight={filled ? "fill" : "regular"}
+							className={cn(
+								starSizeClasses,
+								filled ? "text-warning" : "text-muted-foreground/40",
+							)}
+						/>
+					</button>
+				);
+			})}
+			{name !== undefined ? (
+				<input type="hidden" name={name} value={value} />
+			) : null}
+		</div>
+	);
+}
+
+/**
+ * One review entry: the reviewer's avatar + name, their star rating, the date
+ * and the review body. Composes `UserAvatar` and `Rating`.
+ */
+function ReviewItem({
+	authorName,
+	authorAvatarSrc,
+	rating,
+	date,
+	children,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	authorName: string;
+	authorAvatarSrc?: string;
+	rating: number;
+	/** Pre-formatted date string (the kit stays locale-agnostic). */
+	date?: React.ReactNode;
+}) {
+	return (
+		<div
+			data-slot="review-item"
+			className={cn("flex flex-col gap-2", className)}
+			{...props}
+		>
+			<div className="flex items-start justify-between gap-3">
+				<UserAvatar
+					name={authorName}
+					src={authorAvatarSrc}
+					description={<Rating value={rating} size="sm" />}
+				/>
+				{date ? (
+					<span
+						data-slot="review-item-date"
+						className="shrink-0 text-xs text-muted-foreground"
+					>
+						{date}
+					</span>
+				) : null}
+			</div>
+			{children ? (
+				<p
+					data-slot="review-item-body"
+					className="text-sm/relaxed text-foreground"
+				>
+					{children}
+				</p>
+			) : null}
+		</div>
+	);
+}
+
+export { Rating, RatingInput, type RatingSize, ReviewItem };