@voila.dev/ui 1.1.9

package/src/components/ui/responsive-sheet.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import {
+	Drawer,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "#/components/ui/drawer.tsx";
+import {
+	Sheet,
+	SheetContent,
+	type SheetContentSize,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
+} from "#/components/ui/sheet.tsx";
+import { useIsMobile } from "#/hooks/use-mobile.ts";
+import { cn } from "#/lib/utils.ts";
+
+// One API, two surfaces: a side sheet on desktop and a vaul bottom drawer under
+// the `useIsMobile` breakpoint (768px) — the same split `ResponsiveDialog` makes
+// for centered dialogs. The root owns the open state so it survives crossing the
+// breakpoint while open: the two halves are different component trees, so
+// uncontrolled state would reset.
+//
+// The halves disagree on composition (Base UI `render` vs Radix `asChild`); the
+// trigger bridges that by accepting the element form of `render` only.
+
+const ResponsiveSheetContext = React.createContext<boolean | null>(null);
+
+function useResponsiveSheetIsMobile(part: string): boolean {
+	const isMobile = React.use(ResponsiveSheetContext);
+	if (isMobile === null) {
+		throw new Error(`${part} must be used within <ResponsiveSheet>`);
+	}
+	return isMobile;
+}
+
+function ResponsiveSheet({
+	open,
+	defaultOpen = false,
+	onOpenChange,
+	children,
+}: {
+	open?: boolean;
+	defaultOpen?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	children?: React.ReactNode;
+}) {
+	const isMobile = useIsMobile();
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+	const isOpen = open ?? uncontrolledOpen;
+	const handleOpenChange = (nextOpen: boolean) => {
+		setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+
+	return (
+		<ResponsiveSheetContext.Provider value={isMobile}>
+			{isMobile ? (
+				<Drawer open={isOpen} onOpenChange={handleOpenChange}>
+					{children}
+				</Drawer>
+			) : (
+				<Sheet open={isOpen} onOpenChange={handleOpenChange}>
+					{children}
+				</Sheet>
+			)}
+		</ResponsiveSheetContext.Provider>
+	);
+}
+
+function ResponsiveSheetTrigger({
+	render,
+	children,
+	...props
+}: Omit<React.ComponentProps<typeof DrawerTrigger>, "asChild"> & {
+	/** Element form only — the drawer half clones it, so render functions are unsupported. */
+	render?: React.ReactElement;
+}) {
+	const isMobile = useResponsiveSheetIsMobile("ResponsiveSheetTrigger");
+	if (isMobile) {
+		if (render) {
+			return (
+				<DrawerTrigger asChild {...props}>
+					{children === undefined
+						? render
+						: React.cloneElement(render, undefined, children)}
+				</DrawerTrigger>
+			);
+		}
+		return <DrawerTrigger {...props}>{children}</DrawerTrigger>;
+	}
+	return (
+		<SheetTrigger render={render} {...props}>
+			{children}
+		</SheetTrigger>
+	);
+}
+
+function ResponsiveSheetContent({
+	className,
+	children,
+	size = "default",
+	showCloseButton = true,
+	closeButtonLabel = "Close",
+}: {
+	className?: string;
+	children?: React.ReactNode;
+	/** Desktop panel width — the mobile drawer is always full-width. */
+	size?: SheetContentSize;
+	showCloseButton?: boolean;
+	closeButtonLabel?: string;
+}) {
+	const isMobile = useResponsiveSheetIsMobile("ResponsiveSheetContent");
+	if (isMobile) {
+		return (
+			<DrawerContent
+				className={className}
+				showCloseButton={showCloseButton}
+				closeButtonLabel={closeButtonLabel}
+			>
+				{children}
+			</DrawerContent>
+		);
+	}
+	return (
+		<SheetContent
+			className={className}
+			size={size}
+			showCloseButton={showCloseButton}
+			closeButtonLabel={closeButtonLabel}
+		>
+			{children}
+		</SheetContent>
+	);
+}
+
+function ResponsiveSheetHeader({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	const isMobile = useResponsiveSheetIsMobile("ResponsiveSheetHeader");
+	return isMobile ? (
+		// The bottom drawer centers its header by default; a detail panel reads
+		// the same on both surfaces only if the mobile half stays left-aligned.
+		<DrawerHeader
+			className={cn(
+				"group-data-[vaul-drawer-direction=bottom]/drawer-content:text-left",
+				className,
+			)}
+			{...props}
+		/>
+	) : (
+		<SheetHeader className={className} {...props} />
+	);
+}
+
+/** The scrolling region between header and footer, gutters included. */
+function ResponsiveSheetBody({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="responsive-sheet-body"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 pb-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ResponsiveSheetFooter({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	const isMobile = useResponsiveSheetIsMobile("ResponsiveSheetFooter");
+	return isMobile ? (
+		<DrawerFooter className={className} {...props} />
+	) : (
+		<SheetFooter className={className} {...props} />
+	);
+}
+
+function ResponsiveSheetTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerTitle>) {
+	const isMobile = useResponsiveSheetIsMobile("ResponsiveSheetTitle");
+	return isMobile ? (
+		<DrawerTitle className={className} {...props} />
+	) : (
+		<SheetTitle className={className} {...props} />
+	);
+}
+
+function ResponsiveSheetDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerDescription>) {
+	const isMobile = useResponsiveSheetIsMobile("ResponsiveSheetDescription");
+	return isMobile ? (
+		<DrawerDescription className={className} {...props} />
+	) : (
+		<SheetDescription className={className} {...props} />
+	);
+}
+
+export {
+	ResponsiveSheet,
+	ResponsiveSheetBody,
+	ResponsiveSheetContent,
+	ResponsiveSheetDescription,
+	ResponsiveSheetFooter,
+	ResponsiveSheetHeader,
+	ResponsiveSheetTitle,
+	ResponsiveSheetTrigger,
+};

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,51 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+
+import { cn } from "#/lib/utils.ts";
+
+function ScrollArea({
+	className,
+	children,
+	...props
+}: ScrollAreaPrimitive.Root.Props) {
+	return (
+		<ScrollAreaPrimitive.Root
+			data-slot="scroll-area"
+			className={cn("relative", className)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
+}
+
+function ScrollBar({
+	className,
+	orientation = "vertical",
+	...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+	return (
+		<ScrollAreaPrimitive.Scrollbar
+			data-slot="scroll-area-scrollbar"
+			orientation={orientation}
+			className={cn(
+				"flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent",
+				className,
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.Thumb
+				data-slot="scroll-area-thumb"
+				className="relative flex-1 rounded-full bg-border"
+			/>
+		</ScrollAreaPrimitive.Scrollbar>
+	);
+}
+
+export { ScrollArea, ScrollBar };

package/src/components/ui/section.tsx

@@ -0,0 +1,106 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Vertical rhythm wrapper for an in-page section - heading row + content with
+ * consistent spacing, the `PageHeader` anatomy one level down. Renders a
+ * `section` by default - pass `render` for a plain `div` when the landmark
+ * is unwanted.
+ */
+function Section({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"section">) {
+	return useRender({
+		defaultTagName: "section",
+		props: mergeProps<"section">(
+			{
+				className: cn("flex flex-col gap-4", className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "section",
+		},
+	});
+}
+
+function SectionHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="section-header"
+			className={cn("flex items-center justify-between gap-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function SectionHeading({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="section-heading"
+			className={cn("flex min-w-0 flex-col gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+/** Renders an `h2` - pass `render` to fit the page's heading outline. */
+function SectionTitle({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"h2">) {
+	return useRender({
+		defaultTagName: "h2",
+		props: mergeProps<"h2">(
+			{
+				className: cn("text-lg font-semibold tracking-tight", className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "section-title",
+		},
+	});
+}
+
+function SectionDescription({
+	className,
+	...props
+}: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="section-description"
+			className={cn(
+				"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SectionActions({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="section-actions"
+			className={cn("flex shrink-0 items-center gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Section,
+	SectionActions,
+	SectionDescription,
+	SectionHeader,
+	SectionHeading,
+	SectionTitle,
+};

package/src/components/ui/segmented-control.tsx

@@ -0,0 +1,148 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import * as React from "react";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Single-select switcher (Day/Week/Month) with an animated selection thumb.
+ * Built on radio semantics - exactly one segment is always selected - which
+ * is what separates it from `ToggleGroup`'s pressable toolbar buttons.
+ */
+const segmentedControlVariants = cva({
+	base: "group/segmented-control relative isolate inline-flex w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
+	variants: {
+		size: {
+			default: "h-8",
+			sm: "h-7 rounded-[min(var(--radius-md),12px)]",
+			lg: "h-9",
+		},
+	},
+	defaultVariants: {
+		size: "default",
+	},
+});
+
+const SegmentedControlContext = React.createContext<
+	VariantProps<typeof segmentedControlVariants>
+>({ size: "default" });
+
+type SegmentedControlProps = RadioGroupPrimitive.Props &
+	VariantProps<typeof segmentedControlVariants>;
+
+function SegmentedControl({
+	className,
+	size = "default",
+	children,
+	onValueChange,
+	...props
+}: SegmentedControlProps) {
+	const rootRef = React.useRef<HTMLDivElement | null>(null);
+	const thumbRef = React.useRef<HTMLSpanElement | null>(null);
+	const hasMeasuredRef = React.useRef(false);
+	// Re-rendering on uncontrolled selection changes keeps the layout effect
+	// below in sync with Base UI's internal state (the parent component does
+	// not re-render when only the primitive's state moves).
+	const [, forceMeasure] = React.useReducer((count: number) => count + 1, 0);
+
+	const measure = React.useCallback(() => {
+		const root = rootRef.current;
+		const thumb = thumbRef.current;
+		if (!root || !thumb) {
+			return;
+		}
+		const checked = root.querySelector<HTMLElement>(
+			"[data-slot='segmented-control-item'][data-checked]",
+		);
+		if (!checked) {
+			thumb.style.opacity = "0";
+			return;
+		}
+		// Skip the slide-in animation on the very first paint - the thumb
+		// should appear on the selected segment, not travel from the edge.
+		const isFirstMeasure = !hasMeasuredRef.current;
+		if (isFirstMeasure) {
+			thumb.style.transitionDuration = "0s";
+		}
+		thumb.style.opacity = "1";
+		thumb.style.width = `${checked.offsetWidth}px`;
+		thumb.style.transform = `translateX(${checked.offsetLeft}px)`;
+		if (isFirstMeasure) {
+			hasMeasuredRef.current = true;
+			requestAnimationFrame(() => {
+				thumb.style.transitionDuration = "";
+			});
+		}
+	}, []);
+
+	React.useLayoutEffect(() => {
+		measure();
+	});
+
+	React.useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root || typeof ResizeObserver === "undefined") {
+			return;
+		}
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		for (const item of root.querySelectorAll(
+			"[data-slot='segmented-control-item']",
+		)) {
+			observer.observe(item);
+		}
+		return () => observer.disconnect();
+	}, [measure]);
+
+	return (
+		<RadioGroupPrimitive
+			ref={rootRef}
+			data-slot="segmented-control"
+			data-size={size}
+			className={cn(segmentedControlVariants({ size }), className)}
+			onValueChange={(value, eventDetails) => {
+				onValueChange?.(value, eventDetails);
+				forceMeasure();
+			}}
+			{...props}
+		>
+			<span
+				ref={thumbRef}
+				aria-hidden
+				data-slot="segmented-control-thumb"
+				className="absolute inset-y-[3px] left-0 -z-10 rounded-md border border-transparent bg-background opacity-0 shadow-sm transition-[transform,width] duration-200 ease-out group-data-[size=sm]/segmented-control:rounded-[min(var(--radius-sm),10px)] motion-reduce:transition-none dark:border-input dark:bg-input/30"
+			/>
+			<SegmentedControlContext.Provider value={{ size }}>
+				{children}
+			</SegmentedControlContext.Provider>
+		</RadioGroupPrimitive>
+	);
+}
+
+function SegmentedControlItem({
+	className,
+	...props
+}: RadioPrimitive.Root.Props) {
+	const { size } = React.useContext(SegmentedControlContext);
+
+	return (
+		<RadioPrimitive.Root
+			data-slot="segmented-control-item"
+			data-size={size}
+			className={cn(
+				// The thumb slides behind the items, so items keep a transparent
+				// background and only transition their text color.
+				"inline-flex h-full min-w-0 items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 text-sm font-medium whitespace-nowrap text-foreground/60 outline-none transition-colors hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-checked:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[size=sm]:px-2 data-[size=sm]:text-[0.8rem] dark:text-muted-foreground dark:hover:text-foreground dark:data-checked:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[size=sm]:[&_svg:not([class*='size-'])]:size-3.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	SegmentedControl,
+	SegmentedControlItem,
+	type SegmentedControlProps,
+	segmentedControlVariants,
+};