@voila.dev/ui 1.1.9

package/src/components/ui/command.tsx

@@ -0,0 +1,187 @@
+import { CheckIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { Command as CommandPrimitive } from "cmdk";
+import type * as React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "#/components/ui/dialog.tsx";
+import { InputGroup, InputGroupAddon } from "#/components/ui/input-group.tsx";
+import {
+	menuItemVariants,
+	menuSeparatorVariants,
+} from "#/components/ui/menu-variants.ts";
+import { Shortcut } from "#/components/ui/shortcut.tsx";
+import { cn } from "#/lib/utils.ts";
+
+function Command({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn(
+				"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	className,
+	showCloseButton = false,
+	...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
+	children: React.ReactNode;
+}) {
+	return (
+		<Dialog {...props}>
+			<DialogContent
+				className={cn(
+					"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
+					className,
+				)}
+				showCloseButton={showCloseButton}
+			>
+				<DialogHeader className="sr-only">
+					<DialogTitle>{title}</DialogTitle>
+					<DialogDescription>{description}</DialogDescription>
+				</DialogHeader>
+				{children}
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function CommandInput({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div data-slot="command-input-wrapper" className="p-1 pb-0">
+			<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+				<CommandPrimitive.Input
+					data-slot="command-input"
+					className={cn(
+						"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+						className,
+					)}
+					{...props}
+				/>
+				<InputGroupAddon>
+					<MagnifyingGlassIcon className="size-4 shrink-0 opacity-50" />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+	);
+}
+
+function CommandList({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn(
+				"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandEmpty({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className={cn(
+				"py-6 text-center text-sm text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-1.5 **:[[cmdk-group-heading]]:py-1 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn(menuSeparatorVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				menuItemVariants(),
+				"in-data-[slot=dialog-content]:rounded-lg!",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/menu-item:hidden group-data-[checked=true]/menu-item:opacity-100" />
+		</CommandPrimitive.Item>
+	);
+}
+
+function CommandShortcut({ ...props }: React.ComponentProps<typeof Shortcut>) {
+	return <Shortcut data-slot="command-shortcut" {...props} />;
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+	CommandShortcut,
+};

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

@@ -0,0 +1,125 @@
+import * as React from "react";
+import {
+	AlertDialog,
+	AlertDialogCancel,
+	AlertDialogContent,
+	type AlertDialogContentSize,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogMedia,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "#/components/ui/alert-dialog.tsx";
+import { Button, type ButtonVariant } from "#/components/ui/button.tsx";
+
+type ConfirmDialogProps = {
+	/**
+	 * Element rendered as the dialog trigger, carrying its own label, e.g.
+	 * `<Button variant="destructive">Delete</Button>`. Omit it to drive the
+	 * dialog through `open`/`onOpenChange` instead.
+	 */
+	trigger?: React.ReactElement<Record<string, unknown>>;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	title: React.ReactNode;
+	description?: React.ReactNode;
+	/** Icon slot rendered in `AlertDialogMedia` beside the title. */
+	media?: React.ReactNode;
+	size?: AlertDialogContentSize;
+	// English defaults to match the kit's other built-in labels; pass localized
+	// strings from the app (e.g. paraglide messages).
+	confirmLabel?: React.ReactNode;
+	cancelLabel?: React.ReactNode;
+	/** Confirm button variant - use `destructive` for irreversible actions. */
+	variant?: ButtonVariant;
+	/**
+	 * Confirm handler. When it returns a promise the dialog enters a pending
+	 * state (spinner on the confirm button, cancel disabled, dismissal blocked)
+	 * and closes once it resolves. On rejection the dialog stays open so the
+	 * user can retry - surface the failure inside `onConfirm` (e.g. a toast),
+	 * the dialog does not report it.
+	 */
+	onConfirm?: () => undefined | Promise<unknown>;
+	/** Called when the cancel button is clicked (not on Escape/backdrop). */
+	onCancel?: () => void;
+};
+
+function ConfirmDialog({
+	trigger,
+	open: controlledOpen,
+	onOpenChange,
+	title,
+	description,
+	media,
+	size,
+	confirmLabel = "Confirm",
+	cancelLabel = "Cancel",
+	variant = "default",
+	onConfirm,
+	onCancel,
+}: ConfirmDialogProps) {
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+	const [pending, setPending] = React.useState(false);
+	const open = controlledOpen ?? uncontrolledOpen;
+
+	const setOpen = (nextOpen: boolean) => {
+		if (controlledOpen === undefined) {
+			setUncontrolledOpen(nextOpen);
+		}
+		onOpenChange?.(nextOpen);
+	};
+
+	const handleOpenChange = (nextOpen: boolean) => {
+		if (pending) {
+			return;
+		}
+		setOpen(nextOpen);
+	};
+
+	const handleConfirm = async () => {
+		if (onConfirm === undefined) {
+			setOpen(false);
+			return;
+		}
+		setPending(true);
+		try {
+			await onConfirm();
+		} catch {
+			return;
+		} finally {
+			setPending(false);
+		}
+		setOpen(false);
+	};
+
+	return (
+		<AlertDialog open={open} onOpenChange={handleOpenChange}>
+			{trigger ? <AlertDialogTrigger render={trigger} /> : null}
+			<AlertDialogContent size={size}>
+				<AlertDialogHeader>
+					{media ? <AlertDialogMedia>{media}</AlertDialogMedia> : null}
+					<AlertDialogTitle>{title}</AlertDialogTitle>
+					{description ? (
+						<AlertDialogDescription>{description}</AlertDialogDescription>
+					) : null}
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel disabled={pending} onClick={onCancel}>
+						{cancelLabel}
+					</AlertDialogCancel>
+					<Button
+						data-slot="confirm-dialog-confirm"
+						variant={variant}
+						loading={pending}
+						onClick={handleConfirm}
+					>
+						{confirmLabel}
+					</Button>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+}
+
+export { ConfirmDialog, type ConfirmDialogProps };

package/src/components/ui/context-menu.tsx

@@ -0,0 +1,254 @@
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+import { CaretRightIcon, CheckIcon, CircleIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import {
+	menuContentVariants,
+	menuIndicatorVariants,
+	menuItemVariants,
+	menuLabelVariants,
+	menuSeparatorVariants,
+	menuSubTriggerVariants,
+} from "#/components/ui/menu-variants.ts";
+import { Shortcut } from "#/components/ui/shortcut.tsx";
+import { cn } from "#/lib/utils.ts";
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+	return (
+		<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+	);
+}
+
+function ContextMenuTrigger({
+	className,
+	...props
+}: ContextMenuPrimitive.Trigger.Props) {
+	return (
+		<ContextMenuPrimitive.Trigger
+			data-slot="context-menu-trigger"
+			className={cn("select-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuContent({
+	className,
+	align = "start",
+	alignOffset = 4,
+	side = "right",
+	sideOffset = 0,
+	...props
+}: ContextMenuPrimitive.Popup.Props &
+	Pick<
+		ContextMenuPrimitive.Positioner.Props,
+		"align" | "alignOffset" | "side" | "sideOffset"
+	>) {
+	return (
+		<ContextMenuPrimitive.Portal>
+			<ContextMenuPrimitive.Positioner
+				className="isolate z-50 outline-none"
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+			>
+				<ContextMenuPrimitive.Popup
+					data-slot="context-menu-content"
+					className={cn(menuContentVariants(), "min-w-36", className)}
+					{...props}
+				/>
+			</ContextMenuPrimitive.Positioner>
+		</ContextMenuPrimitive.Portal>
+	);
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+	return (
+		<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+	);
+}
+
+// Plain div, not GroupLabel: Base UI's GroupLabel throws when rendered
+// outside a Group, and labels are routinely used standalone.
+function ContextMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<"div"> & {
+	inset?: boolean;
+}) {
+	return (
+		<div
+			data-slot="context-menu-label"
+			data-inset={inset}
+			className={cn(menuLabelVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: ContextMenuPrimitive.Item.Props & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<ContextMenuPrimitive.Item
+			data-slot="context-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(menuItemVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+	return (
+		<ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+	);
+}
+
+function ContextMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.SubmenuTrigger
+			data-slot="context-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(menuSubTriggerVariants(), className)}
+			{...props}
+		>
+			{children}
+			<CaretRightIcon className="ml-auto" />
+		</ContextMenuPrimitive.SubmenuTrigger>
+	);
+}
+
+function ContextMenuSubContent({
+	className,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+	return (
+		<ContextMenuContent
+			data-slot="context-menu-sub-content"
+			className={cn("shadow-lg", className)}
+			side={side}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	inset,
+	...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.CheckboxItem
+			data-slot="context-menu-checkbox-item"
+			data-inset={inset}
+			className={cn(menuItemVariants({ indicator: "end" }), className)}
+			checked={checked}
+			{...props}
+		>
+			<span className={menuIndicatorVariants()}>
+				<ContextMenuPrimitive.CheckboxItemIndicator>
+					<CheckIcon />
+				</ContextMenuPrimitive.CheckboxItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.CheckboxItem>
+	);
+}
+
+function ContextMenuRadioGroup({
+	...props
+}: ContextMenuPrimitive.RadioGroup.Props) {
+	return (
+		<ContextMenuPrimitive.RadioGroup
+			data-slot="context-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuRadioItem({
+	className,
+	children,
+	inset,
+	...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.RadioItem
+			data-slot="context-menu-radio-item"
+			data-inset={inset}
+			className={cn(menuItemVariants({ indicator: "end" }), className)}
+			{...props}
+		>
+			<span className={menuIndicatorVariants()}>
+				<ContextMenuPrimitive.RadioItemIndicator>
+					<CircleIcon weight="fill" className="size-2" />
+				</ContextMenuPrimitive.RadioItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.RadioItem>
+	);
+}
+
+function ContextMenuSeparator({
+	className,
+	...props
+}: ContextMenuPrimitive.Separator.Props) {
+	return (
+		<ContextMenuPrimitive.Separator
+			data-slot="context-menu-separator"
+			className={cn(menuSeparatorVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuShortcut({
+	...props
+}: React.ComponentProps<typeof Shortcut>) {
+	return <Shortcut data-slot="context-menu-shortcut" {...props} />;
+}
+
+export {
+	ContextMenu,
+	ContextMenuCheckboxItem,
+	ContextMenuContent,
+	ContextMenuGroup,
+	ContextMenuItem,
+	ContextMenuLabel,
+	ContextMenuPortal,
+	ContextMenuRadioGroup,
+	ContextMenuRadioItem,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuTrigger,
+};

package/src/components/ui/copyable-text.tsx

@@ -0,0 +1,65 @@
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+import * as React from "react";
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * A monospace value that copies itself when clicked — for the identifiers,
+ * addresses and phone numbers that are meant to be carried to another screen.
+ * The copied value can differ from the rendered label (a truncated id copies
+ * in full), and `stopPropagation` keeps a copy click from also triggering an
+ * enclosing clickable row.
+ */
+function CopyableText({
+	value,
+	label = value,
+	className,
+	muted = false,
+	copyLabel = "Copy",
+	copiedLabel = "Copied",
+}: {
+	/** The text written to the clipboard. */
+	value: string;
+	/** What's rendered, when it differs from the copied value (e.g. a short id). */
+	label?: string;
+	className?: string;
+	/** Render the label in muted secondary text. */
+	muted?: boolean;
+	copyLabel?: string;
+	copiedLabel?: string;
+}) {
+	const [copied, setCopied] = React.useState(false);
+
+	const copy = () => {
+		void navigator.clipboard?.writeText(value).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1500);
+		});
+	};
+
+	return (
+		<button
+			type="button"
+			data-slot="copyable-text"
+			aria-label={copied ? copiedLabel : copyLabel}
+			title={copied ? copiedLabel : copyLabel}
+			className={cn(
+				"group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-sm text-left font-mono focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2",
+				muted && "text-muted-foreground",
+				className,
+			)}
+			onClick={(event) => {
+				event.stopPropagation();
+				copy();
+			}}
+		>
+			<span className="truncate">{label}</span>
+			{copied ? (
+				<CheckIcon className="shrink-0 text-success" weight="bold" />
+			) : (
+				<CopyIcon className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" />
+			)}
+		</button>
+	);
+}
+
+export { CopyableText };