@voila.dev/ui 1.1.9

package/src/components/ui/resizable.tsx

@@ -0,0 +1,61 @@
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Resizable panel layout (react-resizable-panels v4).
+ *
+ * Sizing contract: the Group sets inline `height: 100%; width: 100%`, so a
+ * height class on the group itself (`h-48`) is silently overridden — give it a
+ * sized parent instead, e.g. `<div className="h-48"><ResizablePanelGroup …>`.
+ */
+function ResizablePanelGroup({
+	className,
+	...props
+}: ResizablePrimitive.GroupProps) {
+	// Layout (display/flex-direction/height/width) comes entirely from the
+	// library's inline styles, so no layout classes are needed here.
+	return (
+		<ResizablePrimitive.Group
+			data-slot="resizable-panel-group"
+			className={cn(className)}
+			{...props}
+		/>
+	);
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+	return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+	withHandle,
+	className,
+	...props
+}: ResizablePrimitive.SeparatorProps & {
+	withHandle?: boolean;
+}) {
+	return (
+		<ResizablePrimitive.Separator
+			data-slot="resizable-handle"
+			// The library emits `data-separator=hover|active|focus|inactive` (its
+			// hover state honours the wider hit area), so we drive the resting,
+			// hover and drag affordance off those rather than CSS `:hover`. Note the
+			// orientation inversion: a horizontal group emits a vertical separator.
+			className={cn(
+				"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2 after:transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-hidden data-[separator=hover]:after:bg-ring/40 data-[separator=active]:after:bg-ring data-[separator=active]:[&>[data-slot=resizable-handle-grip]]:bg-ring motion-reduce:after:transition-none aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-2 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+				className,
+			)}
+			{...props}
+		>
+			{withHandle && (
+				<div
+					data-slot="resizable-handle-grip"
+					className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-muted-foreground/40 transition-colors motion-reduce:transition-none"
+				/>
+			)}
+		</ResizablePrimitive.Separator>
+	);
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

@@ -0,0 +1,278 @@
+import * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	type DialogContentSize,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "#/components/ui/dialog.tsx";
+import {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "#/components/ui/drawer.tsx";
+import { useIsMobile } from "#/hooks/use-mobile.ts";
+import { cn } from "#/lib/utils.ts";
+
+// One API, two surfaces: a centered Base UI dialog on desktop and a vaul
+// bottom drawer under the `useIsMobile` breakpoint (768px). 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`);
+// trigger/close bridge that by accepting the element form of `render` only.
+
+const ResponsiveDialogContext = React.createContext<boolean | null>(null);
+
+function useResponsiveDialogIsMobile(part: string): boolean {
+	const isMobile = React.use(ResponsiveDialogContext);
+	if (isMobile === null) {
+		throw new Error(`${part} must be used within <ResponsiveDialog>`);
+	}
+	return isMobile;
+}
+
+function ResponsiveDialog({
+	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 (
+		<ResponsiveDialogContext.Provider value={isMobile}>
+			{isMobile ? (
+				<Drawer open={isOpen} onOpenChange={handleOpenChange}>
+					{children}
+				</Drawer>
+			) : (
+				<Dialog open={isOpen} onOpenChange={handleOpenChange}>
+					{children}
+				</Dialog>
+			)}
+		</ResponsiveDialogContext.Provider>
+	);
+}
+
+function ResponsiveDialogTrigger({
+	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 = useResponsiveDialogIsMobile("ResponsiveDialogTrigger");
+	if (isMobile) {
+		if (render) {
+			return (
+				<DrawerTrigger asChild {...props}>
+					{children === undefined
+						? render
+						: React.cloneElement(render, undefined, children)}
+				</DrawerTrigger>
+			);
+		}
+		return <DrawerTrigger {...props}>{children}</DrawerTrigger>;
+	}
+	return (
+		<DialogTrigger render={render} {...props}>
+			{children}
+		</DialogTrigger>
+	);
+}
+
+function ResponsiveDialogClose({
+	render,
+	children,
+	...props
+}: Omit<React.ComponentProps<typeof DrawerClose>, "asChild"> & {
+	/** Element form only — the drawer half clones it, so render functions are unsupported. */
+	render?: React.ReactElement;
+}) {
+	const isMobile = useResponsiveDialogIsMobile("ResponsiveDialogClose");
+	if (isMobile) {
+		if (render) {
+			return (
+				<DrawerClose asChild {...props}>
+					{children === undefined
+						? render
+						: React.cloneElement(render, undefined, children)}
+				</DrawerClose>
+			);
+		}
+		return <DrawerClose {...props}>{children}</DrawerClose>;
+	}
+	return (
+		<DialogClose render={render} {...props}>
+			{children}
+		</DialogClose>
+	);
+}
+
+function ResponsiveDialogContent({
+	className,
+	children,
+	size = "sm",
+	showCloseButton = true,
+	closeButtonLabel = "Close",
+	overlayClassName,
+	autoFocus = true,
+}: {
+	className?: string;
+	children?: React.ReactNode;
+	/** Desktop dialog width — the mobile drawer is always full-width. */
+	size?: DialogContentSize;
+	showCloseButton?: boolean;
+	closeButtonLabel?: string;
+	overlayClassName?: string;
+	/**
+	 * Whether opening moves focus into the content (the default). Pass `false`
+	 * when the first field is a text input you don't want to focus on open —
+	 * on a phone that focus opens the keyboard over the content you just asked to
+	 * see. The content stays reachable by tab either way.
+	 */
+	autoFocus?: boolean;
+}) {
+	const isMobile = useResponsiveDialogIsMobile("ResponsiveDialogContent");
+	if (isMobile) {
+		return (
+			<DrawerContent
+				className={className}
+				showCloseButton={showCloseButton}
+				closeButtonLabel={closeButtonLabel}
+				overlayClassName={overlayClassName}
+				onOpenAutoFocus={
+					autoFocus ? undefined : (event) => event.preventDefault()
+				}
+			>
+				{children}
+			</DrawerContent>
+		);
+	}
+	return (
+		<DialogContent
+			className={className}
+			size={size}
+			showCloseButton={showCloseButton}
+			closeButtonLabel={closeButtonLabel}
+			overlayClassName={overlayClassName}
+			initialFocus={autoFocus}
+		>
+			{children}
+		</DialogContent>
+	);
+}
+
+function ResponsiveDialogHeader(props: React.ComponentProps<"div">) {
+	const isMobile = useResponsiveDialogIsMobile("ResponsiveDialogHeader");
+	return isMobile ? <DrawerHeader {...props} /> : <DialogHeader {...props} />;
+}
+
+/**
+ * Free-form content between header and footer. The dialog half already pads
+ * its popup; the drawer half doesn't, so this adds the missing gutter there.
+ */
+function ResponsiveDialogBody({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	const isMobile = useResponsiveDialogIsMobile("ResponsiveDialogBody");
+	return (
+		<div
+			data-slot="responsive-dialog-body"
+			className={cn(isMobile && "overflow-y-auto px-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function ResponsiveDialogFooter({
+	className,
+	closeLabel,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	closeLabel?: string;
+}) {
+	const isMobile = useResponsiveDialogIsMobile("ResponsiveDialogFooter");
+	if (isMobile) {
+		return (
+			<DrawerFooter className={className} {...props}>
+				{children}
+				{/* Last in the column = bottom, matching the dialog footer's
+				    col-reverse order where the close action sits below the primary. */}
+				{closeLabel !== undefined && (
+					<DrawerClose asChild>
+						<Button data-slot="drawer-footer-close" variant="outline">
+							{closeLabel}
+						</Button>
+					</DrawerClose>
+				)}
+			</DrawerFooter>
+		);
+	}
+	return (
+		<DialogFooter className={className} closeLabel={closeLabel} {...props}>
+			{children}
+		</DialogFooter>
+	);
+}
+
+function ResponsiveDialogTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerTitle>) {
+	const isMobile = useResponsiveDialogIsMobile("ResponsiveDialogTitle");
+	return isMobile ? (
+		<DrawerTitle className={className} {...props} />
+	) : (
+		<DialogTitle className={className} {...props} />
+	);
+}
+
+function ResponsiveDialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerDescription>) {
+	const isMobile = useResponsiveDialogIsMobile("ResponsiveDialogDescription");
+	return isMobile ? (
+		<DrawerDescription className={className} {...props} />
+	) : (
+		<DialogDescription className={className} {...props} />
+	);
+}
+
+export {
+	ResponsiveDialog,
+	ResponsiveDialogBody,
+	ResponsiveDialogClose,
+	ResponsiveDialogContent,
+	ResponsiveDialogDescription,
+	ResponsiveDialogFooter,
+	ResponsiveDialogHeader,
+	ResponsiveDialogTitle,
+	ResponsiveDialogTrigger,
+};

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

@@ -0,0 +1,289 @@
+import * as React from "react";
+import {
+	NativeSelect,
+	NativeSelectOptGroup,
+	NativeSelectOption,
+} from "#/components/ui/native-select.tsx";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "#/components/ui/select.tsx";
+import { useIsMobile } from "#/hooks/use-mobile.ts";
+
+// A composable select with two surfaces from one declaration: the Base UI
+// `Select` popup on desktop and the OS-native `<select>` under the `useIsMobile`
+// breakpoint (768px), where the native picker is the better touch experience.
+//
+// The parts (`Trigger`, `Value`, `Content`, `Group`, `Label`, `Item`) map 1:1
+// to the underlying `Select` parts on desktop. A native `<select>` is monolithic
+// — it can't be split into a trigger and a portalled popup — so on mobile the
+// `Root` reads the part *elements* (their props, not their rendered output) and
+// projects them onto a single `NativeSelect`. That keeps desktop usage identical
+// to using `Select` directly while still yielding a real native control on phones.
+//
+// Because the projection inspects element types, the parts must be DIRECT
+// children of their parent part (`Trigger` > `Value`, `Content` > `Item`/`Group`,
+// `Group` > `Label`/`Item`). Fragments and `.map()` are fine; wrapper elements
+// (e.g. a `<div>` around items) are not — they'd hide the items from the scan.
+// Item/Label content must be plain text so a native `<option>` can render it.
+
+type ItemProps = {
+	value: string;
+	disabled?: boolean;
+	children?: React.ReactNode;
+};
+
+function getElementsOfType<Props>(
+	children: React.ReactNode,
+	type: React.ElementType,
+): Array<React.ReactElement<Props>> {
+	const result: Array<React.ReactElement<Props>> = [];
+	for (const child of React.Children.toArray(children)) {
+		if (React.isValidElement(child) && child.type === type) {
+			result.push(child as React.ReactElement<Props>);
+		}
+	}
+	return result;
+}
+
+function getElementOfType<Props>(
+	children: React.ReactNode,
+	type: React.ElementType,
+): React.ReactElement<Props> | undefined {
+	return getElementsOfType<Props>(children, type)[0];
+}
+
+/** Flatten a text-only node to a string for native `<option>`/`<optgroup>` labels. */
+function textOf(node: React.ReactNode): string {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(textOf).join("");
+	return "";
+}
+
+export type ResponsiveSelectRootProps = {
+	value?: string;
+	defaultValue?: string;
+	onValueChange?: (value: string) => void;
+	/** Submitted under this name (hidden input on desktop, the `<select>` on mobile). */
+	name?: string;
+	disabled?: boolean;
+	required?: boolean;
+	children?: React.ReactNode;
+};
+
+/** Desktop `value → label` map so the Base UI trigger renders the selected label. */
+function buildItemsRecord(children: React.ReactNode): Record<string, string> {
+	const content = getElementOfType<{ children?: React.ReactNode }>(
+		children,
+		ResponsiveSelectContent,
+	);
+	const record: Record<string, string> = {};
+	const visit = (nodes: React.ReactNode) => {
+		for (const child of React.Children.toArray(nodes)) {
+			if (!React.isValidElement(child)) continue;
+			if (child.type === ResponsiveSelectItem) {
+				const props = child.props as ItemProps;
+				record[props.value] = textOf(props.children);
+			} else if (child.type === ResponsiveSelectGroup) {
+				visit((child.props as { children?: React.ReactNode }).children);
+			}
+		}
+	};
+	if (content) visit(content.props.children);
+	return record;
+}
+
+function NativeOptionsFromContent({ children }: { children: React.ReactNode }) {
+	return (
+		<>
+			{React.Children.map(children, (child) => {
+				if (!React.isValidElement(child)) return null;
+				if (child.type === ResponsiveSelectItem) {
+					const props = child.props as ItemProps;
+					return (
+						<NativeSelectOption value={props.value} disabled={props.disabled}>
+							{props.children}
+						</NativeSelectOption>
+					);
+				}
+				if (child.type === ResponsiveSelectGroup) {
+					const groupChildren = (child.props as { children?: React.ReactNode })
+						.children;
+					const label = getElementOfType<{ children?: React.ReactNode }>(
+						groupChildren,
+						ResponsiveSelectLabel,
+					);
+					const items = getElementsOfType<ItemProps>(
+						groupChildren,
+						ResponsiveSelectItem,
+					);
+					return (
+						<NativeSelectOptGroup label={textOf(label?.props.children)}>
+							{items.map((item) => (
+								<NativeSelectOption
+									key={item.props.value}
+									value={item.props.value}
+									disabled={item.props.disabled}
+								>
+									{item.props.children}
+								</NativeSelectOption>
+							))}
+						</NativeSelectOptGroup>
+					);
+				}
+				return null;
+			})}
+		</>
+	);
+}
+
+function ResponsiveSelectRoot({
+	value,
+	defaultValue,
+	onValueChange,
+	name,
+	disabled,
+	required,
+	children,
+}: ResponsiveSelectRootProps) {
+	// Single source of truth for which surface renders: the native `<select>`
+	// below 768px, the Base UI popup above it.
+	const isMobile = useIsMobile();
+
+	if (!isMobile) {
+		return (
+			<Select
+				items={buildItemsRecord(children)}
+				value={value}
+				defaultValue={defaultValue}
+				onValueChange={
+					onValueChange
+						? (next) => {
+								// Base UI resets a single select to `null` when its controlled
+								// value no longer matches any item (e.g. the chosen item is
+								// removed from the list right after selection). The public
+								// contract here is string-only, so swallow that reset instead
+								// of leaking `null` to consumers.
+								if (typeof next === "string") onValueChange(next);
+							}
+						: undefined
+				}
+				name={name}
+				disabled={disabled}
+				required={required}
+			>
+				{children}
+			</Select>
+		);
+	}
+
+	// Project the part elements onto one native control. The Select parts below
+	// are never instantiated on this surface — we only read their props.
+	const trigger = getElementOfType<ResponsiveSelectTriggerProps>(
+		children,
+		ResponsiveSelectTrigger,
+	);
+	const content = getElementOfType<{ children?: React.ReactNode }>(
+		children,
+		ResponsiveSelectContent,
+	);
+	const triggerProps = trigger?.props ?? {};
+	const placeholder = trigger
+		? getElementOfType<{ placeholder?: string }>(
+				triggerProps.children,
+				ResponsiveSelectValue,
+			)?.props.placeholder
+		: undefined;
+
+	return (
+		<NativeSelect
+			id={triggerProps.id}
+			// Base UI allows a state-function className on the trigger; only a plain
+			// string is meaningful on a native <select>, so drop the function form.
+			className={
+				typeof triggerProps.className === "string"
+					? triggerProps.className
+					: undefined
+			}
+			size={triggerProps.size}
+			aria-invalid={triggerProps["aria-invalid"]}
+			aria-label={triggerProps["aria-label"]}
+			aria-labelledby={triggerProps["aria-labelledby"]}
+			// The trigger types blur against a button; the projected target is a
+			// <select>, but the handler only reads currentTarget/relatedTarget.
+			onBlur={
+				triggerProps.onBlur as
+					| React.FocusEventHandler<HTMLSelectElement>
+					| undefined
+			}
+			value={value}
+			defaultValue={defaultValue}
+			onChange={
+				onValueChange ? (event) => onValueChange(event.target.value) : undefined
+			}
+			name={name}
+			disabled={disabled}
+			required={required}
+		>
+			{placeholder !== undefined && (
+				<NativeSelectOption value="">{placeholder}</NativeSelectOption>
+			)}
+			<NativeOptionsFromContent>
+				{content?.props.children}
+			</NativeOptionsFromContent>
+		</NativeSelect>
+	);
+}
+
+type ResponsiveSelectTriggerProps = React.ComponentProps<typeof SelectTrigger>;
+
+// On desktop these render their Base UI counterpart; on mobile `Root` reads them
+// instead of rendering them, so they double as the declaration the native
+// `<select>` is built from.
+function ResponsiveSelectTrigger(props: ResponsiveSelectTriggerProps) {
+	return <SelectTrigger {...props} />;
+}
+
+function ResponsiveSelectValue(
+	props: React.ComponentProps<typeof SelectValue>,
+) {
+	return <SelectValue {...props} />;
+}
+
+function ResponsiveSelectContent(
+	props: React.ComponentProps<typeof SelectContent>,
+) {
+	return <SelectContent {...props} />;
+}
+
+function ResponsiveSelectGroup(
+	props: React.ComponentProps<typeof SelectGroup>,
+) {
+	return <SelectGroup {...props} />;
+}
+
+function ResponsiveSelectLabel(
+	props: React.ComponentProps<typeof SelectLabel>,
+) {
+	return <SelectLabel {...props} />;
+}
+
+function ResponsiveSelectItem(props: React.ComponentProps<typeof SelectItem>) {
+	return <SelectItem {...props} />;
+}
+
+export const ResponsiveSelect = {
+	Root: ResponsiveSelectRoot,
+	Trigger: ResponsiveSelectTrigger,
+	Value: ResponsiveSelectValue,
+	Content: ResponsiveSelectContent,
+	Group: ResponsiveSelectGroup,
+	Label: ResponsiveSelectLabel,
+	Item: ResponsiveSelectItem,
+};