@voila.dev/ui 1.1.9

package/src/components/ui/dialog.tsx

@@ -0,0 +1,176 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import { cn } from "#/lib/utils.ts";
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+	className,
+	...props
+}: DialogPrimitive.Backdrop.Props) {
+	return (
+		<DialogPrimitive.Backdrop
+			data-slot="dialog-overlay"
+			className={cn(
+				// `bg-black/10` carries the dimming on light pages; on a near-black
+				// dark page the blur alone does the work, so deepen the scrim there.
+				"fixed inset-0 isolate z-50 bg-black/10 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none dark:bg-black/40",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+// `xl` is a documented extra beyond the kit's `sm | default | lg` scale for
+// media-heavy dialogs (gallery lightbox, annuaire match review).
+type DialogContentSize = "sm" | "default" | "lg" | "xl";
+
+function DialogContent({
+	className,
+	children,
+	size = "sm",
+	showCloseButton = true,
+	closeButtonLabel = "Close",
+	overlayClassName,
+	...props
+}: DialogPrimitive.Popup.Props & {
+	size?: DialogContentSize;
+	showCloseButton?: boolean;
+	closeButtonLabel?: string;
+	overlayClassName?: string;
+}) {
+	return (
+		<DialogPortal>
+			<DialogOverlay className={overlayClassName} />
+			<DialogPrimitive.Popup
+				data-slot="dialog-content"
+				data-size={size}
+				className={cn(
+					// The default `sm` reproduces the historical `sm:max-w-sm` width;
+					// sizes are styled off `data-size`, like `AlertDialogContent`.
+					"fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 transition duration-150 ease-out outline-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none data-[size=default]:sm:max-w-md data-[size=lg]:sm:max-w-lg data-[size=sm]:sm:max-w-sm data-[size=xl]:sm:max-w-xl",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close-button"
+						render={
+							<Button
+								variant="ghost"
+								className="absolute top-2 right-2"
+								size="icon-sm"
+							/>
+						}
+					>
+						<XIcon />
+						<span className="sr-only">{closeButtonLabel}</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Popup>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-header"
+			// `pr-8` reserves room so the title never runs under the X button.
+			className={cn("flex flex-col gap-2 pr-8", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({
+	className,
+	closeLabel,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	closeLabel?: string;
+}) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		>
+			{closeLabel !== undefined && (
+				<DialogPrimitive.Close
+					data-slot="dialog-footer-close"
+					render={<Button variant="outline" />}
+				>
+					{closeLabel}
+				</DialogPrimitive.Close>
+			)}
+			{children}
+		</div>
+	);
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn(
+				"text-base leading-none font-medium text-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({
+	className,
+	...props
+}: DialogPrimitive.Description.Props) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn(
+				"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-4 *:[a]:hover:text-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	type DialogContentSize,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

package/src/components/ui/direction.tsx

@@ -0,0 +1,15 @@
+/**
+ * Re-export of Base UI's reading-direction context.
+ *
+ * `DirectionProvider` only informs Base UI's logical positioning and keyboard
+ * navigation (popup sides like `inline-start`, arrow-key orientation in
+ * menus). It does not set the `dir` attribute on the DOM: text alignment,
+ * visual ordering, and portaled popups (rendered under `document.body`) still
+ * follow the closest DOM `dir` ancestor. When localizing to a right-to-left
+ * language, set `dir="rtl"` on `<html>` alongside the provider.
+ */
+export {
+	DirectionProvider,
+	type TextDirection as Direction,
+	useDirection,
+} from "@base-ui/react/direction-provider";

package/src/components/ui/drawer.tsx

@@ -0,0 +1,178 @@
+import { XIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { Button } from "#/components/ui/button.tsx";
+import { cn } from "#/lib/utils.ts";
+
+// Unlike the Base UI overlays in this kit, the drawer is Radix-based (vaul):
+// compose with `asChild` (not `render`) and style against `data-state`.
+
+function Drawer({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+	return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+	return <DrawerPrimitive.Portal {...props} />;
+}
+
+function DrawerClose({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+	return (
+		<DrawerPrimitive.Overlay
+			data-slot="drawer-overlay"
+			className={cn(
+				// `bg-black/10` carries the dimming on light pages; on a near-black
+				// dark page the blur alone does the work, so deepen the scrim there.
+				"fixed inset-0 isolate z-50 bg-black/10 duration-150 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 motion-reduce:animate-none dark:bg-black/40",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerHandle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-handle"
+			aria-hidden="true"
+			className={cn(
+				"mx-auto mt-4 h-1 w-24 shrink-0 rounded-full bg-muted-foreground/20",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerContent({
+	className,
+	children,
+	showHandle = true,
+	showCloseButton = true,
+	closeButtonLabel = "Close",
+	overlayClassName,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+	showHandle?: boolean;
+	/** Renders an X button on `left`/`right` drawers, which have no grab handle. */
+	showCloseButton?: boolean;
+	closeButtonLabel?: string;
+	overlayClassName?: string;
+}) {
+	return (
+		<DrawerPortal>
+			<DrawerOverlay className={overlayClassName} />
+			<DrawerPrimitive.Content
+				data-slot="drawer-content"
+				className={cn(
+					"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground ring-1 ring-foreground/10 data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+					className,
+				)}
+				{...props}
+			>
+				{showHandle && (
+					<DrawerHandle className="hidden group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+				)}
+				{children}
+				{showCloseButton && (
+					<DrawerPrimitive.Close asChild>
+						<Button
+							data-slot="drawer-close-button"
+							variant="ghost"
+							size="icon-sm"
+							className="absolute top-2 right-2 hidden group-data-[vaul-drawer-direction=left]/drawer-content:inline-flex group-data-[vaul-drawer-direction=right]/drawer-content:inline-flex"
+						>
+							<XIcon />
+							<span className="sr-only">{closeButtonLabel}</span>
+						</Button>
+					</DrawerPrimitive.Close>
+				)}
+			</DrawerPrimitive.Content>
+		</DrawerPortal>
+	);
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn(
+				// `pr-8` on side drawers reserves room so the title never runs under
+				// the X button; bottom/top drawers center on mobile, left-align on md+.
+				"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=left]/drawer-content:pr-8 group-data-[vaul-drawer-direction=right]/drawer-content:pr-8 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:group-data-[vaul-drawer-direction=bottom]/drawer-content:text-left md:group-data-[vaul-drawer-direction=top]/drawer-content:text-left",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+	return (
+		<DrawerPrimitive.Title
+			data-slot="drawer-title"
+			className={cn("text-base font-medium text-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+	return (
+		<DrawerPrimitive.Description
+			data-slot="drawer-description"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHandle,
+	DrawerHeader,
+	DrawerOverlay,
+	DrawerPortal,
+	DrawerTitle,
+	DrawerTrigger,
+};

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

@@ -0,0 +1,247 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/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 DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+	return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+	return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+	return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+	align = "start",
+	alignOffset = 0,
+	side = "bottom",
+	sideOffset = 4,
+	className,
+	...props
+}: MenuPrimitive.Popup.Props &
+	Pick<
+		MenuPrimitive.Positioner.Props,
+		"align" | "alignOffset" | "side" | "sideOffset"
+	>) {
+	return (
+		<MenuPrimitive.Portal>
+			<MenuPrimitive.Positioner
+				className="isolate z-50 outline-none"
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+			>
+				<MenuPrimitive.Popup
+					data-slot="dropdown-menu-content"
+					className={cn(menuContentVariants(), className)}
+					{...props}
+				/>
+			</MenuPrimitive.Positioner>
+		</MenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+	return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+// Plain div, not Menu.GroupLabel: Base UI's GroupLabel throws when rendered
+// outside a Menu.Group, and labels are routinely used standalone.
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<"div"> & {
+	inset?: boolean;
+}) {
+	return (
+		<div
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(menuLabelVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: MenuPrimitive.Item.Props & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<MenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(menuItemVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+	return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<MenuPrimitive.SubmenuTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(menuSubTriggerVariants(), className)}
+			{...props}
+		>
+			{children}
+			<CaretRightIcon className="ml-auto" />
+		</MenuPrimitive.SubmenuTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	alignOffset = -3,
+	side = "inline-end",
+	sideOffset = 0,
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+	return (
+		<DropdownMenuContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn("shadow-lg", className)}
+			alignOffset={alignOffset}
+			side={side}
+			sideOffset={sideOffset}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	inset,
+	...props
+}: MenuPrimitive.CheckboxItem.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<MenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			data-inset={inset}
+			className={cn(menuItemVariants({ indicator: "end" }), className)}
+			checked={checked}
+			{...props}
+		>
+			<span
+				className={menuIndicatorVariants()}
+				data-slot="dropdown-menu-checkbox-item-indicator"
+			>
+				<MenuPrimitive.CheckboxItemIndicator>
+					<CheckIcon />
+				</MenuPrimitive.CheckboxItemIndicator>
+			</span>
+			{children}
+		</MenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+	return (
+		<MenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	inset,
+	...props
+}: MenuPrimitive.RadioItem.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<MenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			data-inset={inset}
+			className={cn(menuItemVariants({ indicator: "end" }), className)}
+			{...props}
+		>
+			<span
+				className={menuIndicatorVariants()}
+				data-slot="dropdown-menu-radio-item-indicator"
+			>
+				<MenuPrimitive.RadioItemIndicator>
+					<CircleIcon weight="fill" className="size-2" />
+				</MenuPrimitive.RadioItemIndicator>
+			</span>
+			{children}
+		</MenuPrimitive.RadioItem>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: MenuPrimitive.Separator.Props) {
+	return (
+		<MenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn(menuSeparatorVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({
+	...props
+}: React.ComponentProps<typeof Shortcut>) {
+	return <Shortcut data-slot="dropdown-menu-shortcut" {...props} />;
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+};