@voila.dev/ui 1.1.9

package/src/components/ui/select.tsx

@@ -0,0 +1,216 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react";
+import { cn } from "#/lib/utils.ts";
+
+/* Pass `items` (value → label) so the trigger renders the selected item's
+ * label; without it Base UI's Value falls back to the raw value string. */
+function Select<Value, Multiple extends boolean | undefined = false>(
+	props: SelectPrimitive.Root.Props<Value, Multiple>,
+) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+	return (
+		<SelectPrimitive.Group
+			data-slot="select-group"
+			className={cn("scroll-my-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+	return (
+		<SelectPrimitive.Value
+			data-slot="select-value"
+			className={cn("flex flex-1 text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectTrigger({
+	className,
+	size = "default",
+	children,
+	...props
+}: SelectPrimitive.Trigger.Props & {
+	size?: "sm" | "default";
+}) {
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none hover:bg-muted focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),12px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon
+				render={
+					<CaretDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+				}
+			/>
+		</SelectPrimitive.Trigger>
+	);
+}
+
+/* With the default `alignItemWithTrigger` the popup overlaps the trigger
+ * macOS-style and intentionally suppresses the open/close animation; pass
+ * `alignItemWithTrigger={false}` to get the popover-style zoom/fade. */
+function SelectContent({
+	className,
+	children,
+	side = "bottom",
+	sideOffset = 4,
+	align = "center",
+	alignOffset = 0,
+	alignItemWithTrigger = true,
+	collisionPadding,
+	...props
+}: SelectPrimitive.Popup.Props &
+	Pick<
+		SelectPrimitive.Positioner.Props,
+		| "align"
+		| "alignOffset"
+		| "side"
+		| "sideOffset"
+		| "alignItemWithTrigger"
+		| "collisionPadding"
+	>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				alignItemWithTrigger={alignItemWithTrigger}
+				collisionPadding={collisionPadding}
+				className="isolate z-50"
+			>
+				<SelectPrimitive.Popup
+					data-slot="select-content"
+					data-align-trigger={alignItemWithTrigger}
+					className={cn(
+						"relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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",
+						className,
+					)}
+					{...props}
+				>
+					<SelectScrollUpButton />
+					<SelectPrimitive.List className="p-1">
+						{children}
+					</SelectPrimitive.List>
+					<SelectScrollDownButton />
+				</SelectPrimitive.Popup>
+			</SelectPrimitive.Positioner>
+		</SelectPrimitive.Portal>
+	);
+}
+
+function SelectLabel({
+	className,
+	...props
+}: SelectPrimitive.GroupLabel.Props) {
+	return (
+		<SelectPrimitive.GroupLabel
+			data-slot="select-label"
+			className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectItem({
+	className,
+	children,
+	...props
+}: SelectPrimitive.Item.Props) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+				{children}
+			</SelectPrimitive.ItemText>
+			<SelectPrimitive.ItemIndicator
+				render={
+					<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+				}
+			>
+				<CheckIcon className="pointer-events-none" />
+			</SelectPrimitive.ItemIndicator>
+		</SelectPrimitive.Item>
+	);
+}
+
+function SelectSeparator({
+	className,
+	...props
+}: SelectPrimitive.Separator.Props) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectScrollUpButton({
+	className,
+	...props
+}: SelectPrimitive.ScrollUpArrow.Props) {
+	return (
+		<SelectPrimitive.ScrollUpArrow
+			data-slot="select-scroll-up-button"
+			className={cn(
+				"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<CaretUpIcon />
+		</SelectPrimitive.ScrollUpArrow>
+	);
+}
+
+function SelectScrollDownButton({
+	className,
+	...props
+}: SelectPrimitive.ScrollDownArrow.Props) {
+	return (
+		<SelectPrimitive.ScrollDownArrow
+			data-slot="select-scroll-down-button"
+			className={cn(
+				"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<CaretDownIcon />
+		</SelectPrimitive.ScrollDownArrow>
+	);
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

package/src/components/ui/separator.tsx

@@ -0,0 +1,69 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Visual divider. Pass `children` for a labeled divider (the auth-screen
+ * "OU" pattern): the element keeps its separator semantics while two
+ * decorative lines flank the label, so it works on any background - no
+ * `bg-background` punch-through needed.
+ *
+ * Vertical separators `self-stretch` to fill the row. To shorten one inside
+ * a taller row, pass a height plus `my-auto` (e.g. `className="my-auto h-4"`):
+ * a definite height makes `self-stretch` start-align, and the auto margins
+ * re-center it.
+ */
+function Separator({
+	className,
+	orientation = "horizontal",
+	children,
+	...props
+}: SeparatorPrimitive.Props) {
+	if (children == null) {
+		return (
+			<SeparatorPrimitive
+				data-slot="separator"
+				orientation={orientation}
+				className={cn(
+					"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+					className,
+				)}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<SeparatorPrimitive
+			data-slot="separator"
+			orientation={orientation}
+			className={cn(
+				"flex shrink-0 items-center gap-2 text-sm text-muted-foreground data-[orientation=horizontal]:w-full data-[orientation=vertical]:flex-col data-[orientation=vertical]:self-stretch",
+				className,
+			)}
+			{...props}
+		>
+			<SeparatorLine orientation={orientation} />
+			<span data-slot="separator-label">{children}</span>
+			<SeparatorLine orientation={orientation} />
+		</SeparatorPrimitive>
+	);
+}
+
+function SeparatorLine({
+	orientation,
+}: {
+	orientation: NonNullable<SeparatorPrimitive.Props["orientation"]>;
+}) {
+	return (
+		<span
+			aria-hidden
+			data-slot="separator-line"
+			className={cn(
+				"flex-1 bg-border",
+				orientation === "vertical" ? "w-px" : "h-px",
+			)}
+		/>
+	);
+}
+
+export { Separator };

package/src/components/ui/sheet.tsx

@@ -0,0 +1,154 @@
+import { Dialog as SheetPrimitive } 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 Sheet({ ...props }: SheetPrimitive.Root.Props) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+	return (
+		<SheetPrimitive.Backdrop
+			data-slot="sheet-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 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` and `full` are documented extras beyond the kit's `sm | default | lg`
+// scale for wide editing panels and full-bleed surfaces.
+type SheetContentSize = "sm" | "default" | "lg" | "xl" | "full";
+
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	size = "default",
+	showCloseButton = true,
+	closeButtonLabel = "Close",
+	...props
+}: SheetPrimitive.Popup.Props & {
+	side?: "top" | "right" | "bottom" | "left";
+	size?: SheetContentSize;
+	showCloseButton?: boolean;
+	closeButtonLabel?: string;
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Popup
+				data-slot="sheet-content"
+				data-side={side}
+				data-size={size}
+				className={cn(
+					"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:rounded-t-xl data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:rounded-r-xl data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:rounded-l-xl data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:rounded-b-xl data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem]",
+					// `size` only constrains the left/right panels (top/bottom are
+					// content-height, full-bleed). Styled off `data-size` (like
+					// `AlertDialogContent`); the default reproduces the historical
+					// `sm:max-w-sm` width.
+					"data-[size=default]:data-[side=left]:sm:max-w-sm data-[size=default]:data-[side=right]:sm:max-w-sm data-[size=full]:data-[side=left]:w-full data-[size=full]:data-[side=left]:max-w-none data-[size=full]:data-[side=right]:w-full data-[size=full]:data-[side=right]:max-w-none data-[size=lg]:data-[side=left]:sm:max-w-md data-[size=lg]:data-[side=right]:sm:max-w-md data-[size=sm]:data-[side=left]:sm:max-w-xs data-[size=sm]:data-[side=right]:sm:max-w-xs data-[size=xl]:data-[side=left]:sm:max-w-lg data-[size=xl]:data-[side=right]:sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<SheetPrimitive.Close
+						data-slot="sheet-close-button"
+						render={
+							<Button
+								variant="ghost"
+								className="absolute top-3 right-3"
+								size="icon-sm"
+							/>
+						}
+					>
+						<XIcon />
+						<span className="sr-only">{closeButtonLabel}</span>
+					</SheetPrimitive.Close>
+				)}
+			</SheetPrimitive.Popup>
+		</SheetPortal>
+	);
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sheet-header"
+			className={cn("flex flex-col gap-0.5 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sheet-footer"
+			className={cn(
+				// Extra bottom padding keeps actions above the iOS home indicator.
+				"mt-auto flex flex-col gap-2 p-4 pb-[calc(1rem+env(safe-area-inset-bottom))]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-base font-medium text-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetDescription({
+	className,
+	...props
+}: SheetPrimitive.Description.Props) {
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	type SheetContentSize,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetOverlay,
+	SheetPortal,
+	SheetTitle,
+	SheetTrigger,
+};

package/src/components/ui/shortcut.tsx

@@ -0,0 +1,41 @@
+import type * as React from "react";
+import { Kbd, KbdGroup } from "#/components/ui/kbd.tsx";
+import { menuShortcutVariants } from "#/components/ui/menu-variants.ts";
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Right-aligned keyboard hint for menu rows, shared by
+ * `DropdownMenuShortcut`, `ContextMenuShortcut`, `MenubarShortcut` and
+ * `CommandShortcut`. Pass plain children ("⌘K") for the classic text hint, or
+ * `keys` to render each key as a small `Kbd` chip instead.
+ */
+function Shortcut({
+	className,
+	keys,
+	children,
+	...props
+}: React.ComponentProps<"span"> & {
+	keys?: ReadonlyArray<string>;
+}) {
+	return (
+		<span
+			data-slot="shortcut"
+			className={cn(menuShortcutVariants(), className)}
+			{...props}
+		>
+			{keys === undefined ? (
+				children
+			) : (
+				<KbdGroup>
+					{keys.map((key) => (
+						<Kbd key={key} size="sm">
+							{key}
+						</Kbd>
+					))}
+				</KbdGroup>
+			)}
+		</span>
+	);
+}
+
+export { Shortcut };