@voila.dev/ui 1.1.9

package/src/components/ui/item.tsx

@@ -0,0 +1,212 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import type * as React from "react";
+import { Separator } from "#/components/ui/separator.tsx";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+
+function ItemGroup({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "item-group",
+		},
+	});
+}
+
+function ItemSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="item-separator"
+			orientation="horizontal"
+			className={cn("my-2", className)}
+			{...props}
+		/>
+	);
+}
+
+const itemVariants = cva({
+	base: "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "border-transparent bg-muted/50",
+		},
+		size: {
+			default: "gap-2.5 px-3 py-2.5",
+			sm: "gap-2.5 px-3 py-2",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+function Item({
+	className,
+	variant = "default",
+	size = "default",
+	render,
+	...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(itemVariants({ variant, size }), className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "item",
+			variant,
+			size,
+		},
+	});
+}
+
+const itemMediaVariants = cva({
+	base: "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			icon: "[&_svg:not([class*='size-'])]:size-4",
+			image:
+				"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+function ItemMedia({
+	className,
+	variant = "default",
+	render,
+	...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(itemMediaVariants({ variant }), className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "item-media",
+			variant,
+		},
+	});
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-content"
+			className={cn(
+				"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="item-title"
+			className={cn(
+				"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="item-description"
+			className={cn(
+				"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-actions"
+			className={cn("flex items-center gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-header"
+			className={cn(
+				"flex basis-full items-center justify-between gap-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-footer"
+			className={cn(
+				"flex basis-full items-center justify-between gap-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Item,
+	ItemActions,
+	ItemContent,
+	ItemDescription,
+	ItemFooter,
+	ItemGroup,
+	ItemHeader,
+	ItemMedia,
+	ItemSeparator,
+	ItemTitle,
+};

package/src/components/ui/kbd.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+
+const kbdVariants = cva({
+	base: "pointer-events-none inline-flex w-fit items-center justify-center rounded-sm bg-muted font-sans font-medium text-muted-foreground select-none in-data-[slot=input-group-addon]:rounded-[calc(var(--radius)-5px)] in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10",
+	variants: {
+		size: {
+			default:
+				"h-5 min-w-5 gap-1 px-1 text-xs [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-4 min-w-4 gap-0.5 px-0.5 text-[10px] [&_svg:not([class*='size-'])]:size-2.5",
+		},
+	},
+});
+
+function Kbd({
+	className,
+	size = "default",
+	...props
+}: React.ComponentProps<"kbd"> & VariantProps<typeof kbdVariants>) {
+	return (
+		<kbd
+			data-slot="kbd"
+			data-size={size}
+			className={cn(kbdVariants({ size }), className)}
+			{...props}
+		/>
+	);
+}
+
+function KbdGroup({
+	className,
+	separator,
+	children,
+	...props
+}: React.ComponentProps<"kbd"> & { separator?: React.ReactNode }) {
+	return (
+		<kbd
+			data-slot="kbd-group"
+			className={cn(
+				"inline-flex items-center gap-1 text-muted-foreground",
+				className,
+			)}
+			{...props}
+		>
+			{separator === undefined
+				? children
+				: React.Children.toArray(children).map((child, index) => (
+						<React.Fragment key={index}>
+							{index > 0 && (
+								<span aria-hidden="true" data-slot="kbd-separator">
+									{separator}
+								</span>
+							)}
+							{child}
+						</React.Fragment>
+					))}
+		</kbd>
+	);
+}
+
+export { Kbd, KbdGroup };

package/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import type * as React from "react";
+
+import { cn } from "#/lib/utils.ts";
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+	return (
+		// biome-ignore lint/a11y/noLabelWithoutControl: This component is meant to be used as a wrapper for form controls, so it may not always have a control associated with it.
+		<label
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

package/src/components/ui/list.tsx

@@ -0,0 +1,46 @@
+import type * as React from "react";
+
+import { Item, ItemGroup, ItemSeparator } from "#/components/ui/item.tsx";
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Semantic `ul`/`li` counterparts of `ItemGroup`/`Item`: same styling and
+ * variants, but screen readers announce the collection and its size. The
+ * explicit `role="list"` restores list semantics that Safari/VoiceOver drop
+ * once `list-style: none` is applied.
+ */
+function List({
+	className,
+	...props
+}: Omit<React.ComponentProps<typeof ItemGroup>, "render">) {
+	return (
+		<ItemGroup
+			data-slot="list"
+			render={
+				// biome-ignore lint/a11y/noRedundantRoles: Safari/VoiceOver drop the implicit list role once list-style is none; the explicit role restores it.
+				<ul role="list" />
+			}
+			className={cn("list-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function ListItem(props: Omit<React.ComponentProps<typeof Item>, "render">) {
+	return <Item data-slot="list-item" render={<li />} {...props} />;
+}
+
+/** A separator between list items, hidden from the accessibility tree so it
+ * does not count as an item and the `ul` only contains `li` children. */
+function ListSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof ItemSeparator>) {
+	return (
+		<li role="presentation" aria-hidden="true" data-slot="list-separator">
+			<ItemSeparator className={className} {...props} />
+		</li>
+	);
+}
+
+export { List, ListItem, ListSeparator };

package/src/components/ui/menu-variants.ts

@@ -0,0 +1,71 @@
+import { cva } from "#/lib/cva.ts";
+
+/**
+ * Shared menu recipe consumed by dropdown-menu, context-menu, menubar (via
+ * dropdown-menu), combobox and command, so their popups and items stay
+ * visually identical instead of each restating — and drifting from — the same
+ * class strings.
+ *
+ * The underlying primitives expose their active/disabled state differently:
+ * Base UI menus focus the item (`:focus`), Base UI combobox highlights it
+ * (`data-highlighted`), and cmdk selects it (`data-selected="true"`). cmdk
+ * also always renders `data-disabled="true"|"false"` while Base UI only adds
+ * a bare `data-disabled` when actually disabled. Item-level recipes therefore
+ * style every state selector at once — only the one matching the rendering
+ * primitive ever activates — and gate disabled styles behind
+ * `not-data-[disabled=false]` so cmdk's enabled items are unaffected.
+ */
+
+const menuItemBase =
+	"group/menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 data-disabled:not-data-[disabled=false]:pointer-events-none data-disabled:not-data-[disabled=false]:opacity-50 focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-highlighted:*:[svg]:text-accent-foreground data-[selected=true]:*:[svg]:text-accent-foreground";
+
+/** Popup container for floating menus (dropdown, context, combobox). */
+export const menuContentVariants = cva({
+	base: "z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+});
+
+/**
+ * Menu row. `indicator: "end"` reserves right-side space (`pr-8`) for the
+ * kit-consistent end-aligned check/dot indicator on selectable rows.
+ */
+export const menuItemVariants = cva({
+	base: menuItemBase,
+	variants: {
+		variant: {
+			default: "",
+			destructive:
+				"text-destructive *:[svg]:text-destructive focus:bg-destructive/10 focus:text-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive data-[selected=true]:bg-destructive/10 data-[selected=true]:text-destructive dark:focus:bg-destructive/20 dark:data-highlighted:bg-destructive/20 dark:data-[selected=true]:bg-destructive/20",
+		},
+		indicator: {
+			none: "",
+			end: "pr-8",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		indicator: "none",
+	},
+});
+
+/** Submenu trigger: a menu row that also lights up while its popup is open. */
+export const menuSubTriggerVariants = cva({
+	base: `${menuItemBase} data-popup-open:bg-accent data-popup-open:text-accent-foreground`,
+});
+
+/** End-aligned wrapper for the check/dot indicator of selectable rows. */
+export const menuIndicatorVariants = cva({
+	base: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
+});
+
+export const menuLabelVariants = cva({
+	base: "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+});
+
+export const menuSeparatorVariants = cva({
+	base: "-mx-1 my-1 h-px bg-border",
+});
+
+/** Right-aligned shortcut hint; recolors with the active menu row. */
+export const menuShortcutVariants = cva({
+	base: "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menu-item:text-accent-foreground group-data-highlighted/menu-item:text-accent-foreground group-data-[selected=true]/menu-item:text-accent-foreground",
+});

package/src/components/ui/menubar.tsx

@@ -0,0 +1,226 @@
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+import type * as React from "react";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "#/components/ui/dropdown-menu.tsx";
+import { cn } from "#/lib/utils.ts";
+
+function Menubar({ className, ...props }: MenubarPrimitive.Props) {
+	return (
+		<MenubarPrimitive
+			data-slot="menubar"
+			className={cn(
+				"flex h-8 w-fit items-center gap-0.5 rounded-lg border p-[3px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
+	return <DropdownMenu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuGroup>) {
+	return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPortal>) {
+	return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuTrigger>) {
+	return (
+		<DropdownMenuTrigger
+			data-slot="menubar-trigger"
+			className={cn(
+				"flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarContent({
+	className,
+	align = "start",
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+	return (
+		<DropdownMenuContent
+			data-slot="menubar-content"
+			align={align}
+			alignOffset={alignOffset}
+			sideOffset={sideOffset}
+			className={cn("min-w-36", className)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarItem({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuItem>) {
+	return (
+		<DropdownMenuItem
+			data-slot="menubar-item"
+			className={className}
+			{...props}
+		/>
+	);
+}
+
+function MenubarCheckboxItem({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuCheckboxItem>) {
+	return (
+		<DropdownMenuCheckboxItem
+			data-slot="menubar-checkbox-item"
+			className={className}
+			{...props}
+		/>
+	);
+}
+
+function MenubarRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
+	return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />;
+}
+
+function MenubarRadioItem({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuRadioItem>) {
+	return (
+		<DropdownMenuRadioItem
+			data-slot="menubar-radio-item"
+			className={className}
+			{...props}
+		/>
+	);
+}
+
+function MenubarLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuLabel> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuLabel
+			data-slot="menubar-label"
+			data-inset={inset}
+			className={cn(
+				"px-1.5 py-1 text-sm font-medium data-inset:pl-7",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuSeparator>) {
+	return (
+		<DropdownMenuSeparator
+			data-slot="menubar-separator"
+			className={cn("-mx-1 my-1 h-px bg-border", className)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarShortcut({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuShortcut>) {
+	return (
+		<DropdownMenuShortcut
+			data-slot="menubar-shortcut"
+			className={className}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuSub>) {
+	return <DropdownMenuSub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuSubTrigger>) {
+	return (
+		<DropdownMenuSubTrigger
+			data-slot="menubar-sub-trigger"
+			className={className}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuSubContent>) {
+	return (
+		<DropdownMenuSubContent
+			data-slot="menubar-sub-content"
+			className={cn("min-w-32", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Menubar,
+	MenubarCheckboxItem,
+	MenubarContent,
+	MenubarGroup,
+	MenubarItem,
+	MenubarLabel,
+	MenubarMenu,
+	MenubarPortal,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSeparator,
+	MenubarShortcut,
+	MenubarSub,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarTrigger,
+};