@voila.dev/ui 1.1.9

package/src/components/ui/checkbox-group.tsx

@@ -0,0 +1,44 @@
+import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
+
+import { cn } from "#/lib/utils.ts";
+
+type CheckboxGroupProps = CheckboxGroupPrimitive.Props & {
+	/**
+	 * Layout direction of the items. `vertical` stacks them (the default);
+	 * `horizontal` lays them out in a wrapping row - saves consumers from
+	 * rebuilding a `flex-row` wrapper for short option sets. (Same API as
+	 * `RadioGroup`.)
+	 */
+	orientation?: "vertical" | "horizontal";
+};
+
+/**
+ * Shared `value: string[]` state for a set of `Checkbox`es - each box opts in
+ * with its `name` prop. A box given `parent` together with `allValues` on the
+ * group becomes the tick-all/indeterminate parent checkbox.
+ *
+ * In parent mode Base UI overrides every box's `id` for its `aria-controls`
+ * wiring, which silently breaks `htmlFor`/`id` label pairs - wrap each box in
+ * its `Label` instead (implicit association).
+ */
+function CheckboxGroup({
+	className,
+	orientation = "vertical",
+	...props
+}: CheckboxGroupProps) {
+	return (
+		<CheckboxGroupPrimitive
+			data-slot="checkbox-group"
+			data-orientation={orientation}
+			className={cn(
+				orientation === "horizontal"
+					? "flex flex-wrap items-center gap-x-4 gap-y-2"
+					: "grid gap-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { CheckboxGroup, type CheckboxGroupProps };

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,34 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { CheckIcon, MinusIcon } from "@phosphor-icons/react";
+import { cn } from "#/lib/utils.ts";
+
+type CheckboxProps = CheckboxPrimitive.Root.Props & {
+	size?: "sm" | "default";
+};
+
+function Checkbox({ className, size = "default", ...props }: CheckboxProps) {
+	return (
+		<CheckboxPrimitive.Root
+			data-slot="checkbox"
+			data-size={size}
+			className={cn(
+				// after:* expands the touch target 12px horizontally and 8px
+				// vertically past the visible box; stacked checkboxes need at
+				// least that much spacing or adjacent hit areas overlap.
+				"peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:data-checked:border-destructive aria-invalid:data-indeterminate:border-destructive data-[size=default]:size-4 data-[size=sm]:size-3.5 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary",
+				className,
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator
+				data-slot="checkbox-indicator"
+				className="grid animate-in place-content-center text-current duration-150 zoom-in-50 group-data-[size=default]/checkbox:[&>svg]:size-3.5 group-data-[size=sm]/checkbox:[&>svg]:size-3 motion-reduce:animate-none"
+			>
+				<CheckIcon className="group-data-indeterminate/checkbox:hidden" />
+				<MinusIcon className="hidden group-data-indeterminate/checkbox:block" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	);
+}
+
+export { Checkbox, type CheckboxProps };

package/src/components/ui/chip.tsx

@@ -0,0 +1,60 @@
+import { XIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import {
+	type BadgeVariants,
+	badgeVariants,
+} from "#/components/ui/badge-variants.ts";
+
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Dismissible tag built on the Badge recipe: same `variant`/`color`/`size`
+ * axes, plus a `ChipRemove` button for removable selections (skills catalog,
+ * active filters). For a static label, use `Badge` instead.
+ */
+function Chip({
+	className,
+	variant = "secondary",
+	color,
+	size = "default",
+	...props
+}: React.ComponentProps<"span"> & BadgeVariants) {
+	return (
+		<span
+			data-slot="chip"
+			data-variant={variant}
+			data-color={color}
+			data-size={size}
+			className={cn(
+				badgeVariants({ variant, color, size }),
+				"has-data-[slot=chip-remove]:pr-1",
+				size === "sm" && "has-data-[slot=chip-remove]:pr-0.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ChipRemove({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"button">) {
+	return (
+		<button
+			type="button"
+			data-slot="chip-remove"
+			aria-label="Remove"
+			className={cn(
+				"inline-flex size-3.5 shrink-0 cursor-pointer items-center justify-center rounded-full opacity-60 transition-opacity outline-none hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&>svg]:size-2.5",
+				className,
+			)}
+			{...props}
+		>
+			{children ?? <XIcon aria-hidden />}
+		</button>
+	);
+}
+
+export { Chip, ChipRemove };

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,44 @@
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+import { cn } from "#/lib/utils.ts";
+
+function Collapsible({ className, ...props }: CollapsiblePrimitive.Root.Props) {
+	return (
+		<CollapsiblePrimitive.Root
+			data-slot="collapsible"
+			className={cn(className)}
+			{...props}
+		/>
+	);
+}
+
+function CollapsibleTrigger({
+	className,
+	...props
+}: CollapsiblePrimitive.Trigger.Props) {
+	return (
+		<CollapsiblePrimitive.Trigger
+			data-slot="collapsible-trigger"
+			className={cn(className)}
+			{...props}
+		/>
+	);
+}
+
+function CollapsibleContent({
+	className,
+	...props
+}: CollapsiblePrimitive.Panel.Props) {
+	return (
+		<CollapsiblePrimitive.Panel
+			data-slot="collapsible-content"
+			className={cn(
+				"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/src/components/ui/color-picker.tsx

@@ -0,0 +1,191 @@
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { useRef, useState } from "react";
+import {
+	type BadgeColor,
+	badgeColorBackgroundClass,
+	badgeColorForegroundClass,
+	badgeColors,
+} from "#/components/ui/badge-variants.ts";
+import { Button } from "#/components/ui/button.tsx";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "#/components/ui/popover.tsx";
+import { cn } from "#/lib/utils.ts";
+
+const GRID_COLUMNS = 5;
+
+/** Human-friendly label for a palette name: "blue" → "Blue". */
+const formatColorName = (name: string): string =>
+	name.charAt(0).toUpperCase() + name.slice(1);
+
+const ARROW_KEY_OFFSETS: Record<string, number> = {
+	ArrowLeft: -1,
+	ArrowRight: 1,
+	ArrowUp: -GRID_COLUMNS,
+	ArrowDown: GRID_COLUMNS,
+};
+
+/**
+ * Select-like trigger opening a swatch radiogroup over the catalog palette.
+ * Swatch classes come from the static maps in badge-variants.ts so the palette never
+ * relies on runtime class composition.
+ */
+function ColorPicker({
+	value: controlledValue,
+	defaultValue = null,
+	onValueChange,
+	placeholder = "Select a color",
+	clearLabel = "Clear selection",
+	clearable = false,
+	name,
+	disabled = false,
+	className,
+	contentClassName,
+}: {
+	/** Controlled selection; omit to let the picker manage its own state. */
+	value?: BadgeColor | null;
+	/** Initial selection for uncontrolled usage. */
+	defaultValue?: BadgeColor | null;
+	onValueChange?: (color: BadgeColor | null) => void;
+	placeholder?: string;
+	clearLabel?: string;
+	/** Offer a clear affordance that reports `null`. */
+	clearable?: boolean;
+	/** When set, renders a hidden input so plain form posts include the color. */
+	name?: string;
+	disabled?: boolean;
+	className?: string;
+	contentClassName?: string;
+}) {
+	const [open, setOpen] = useState(false);
+	const [uncontrolledValue, setUncontrolledValue] = useState<BadgeColor | null>(
+		defaultValue,
+	);
+	const gridRef = useRef<HTMLDivElement>(null);
+
+	const isControlled = controlledValue !== undefined;
+	const value = isControlled ? controlledValue : uncontrolledValue;
+
+	// Roving tabindex: a radiogroup exposes a single tab stop — the selected
+	// swatch, or the first one while nothing is selected.
+	const tabbableColor = value ?? badgeColors[0];
+
+	const selectColor = (next: BadgeColor | null) => {
+		if (!isControlled) setUncontrolledValue(next);
+		onValueChange?.(next);
+		setOpen(false);
+	};
+
+	const handleGridKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		const offset = ARROW_KEY_OFFSETS[event.key];
+		if (offset === undefined) return;
+		const swatches = gridRef.current?.querySelectorAll<HTMLButtonElement>(
+			"[data-slot=color-picker-swatch]",
+		);
+		if (swatches === undefined || swatches.length === 0) return;
+		const currentIndex = Array.prototype.indexOf.call(
+			swatches,
+			document.activeElement,
+		);
+		if (currentIndex === -1) return;
+		event.preventDefault();
+		const nextIndex = Math.min(
+			Math.max(currentIndex + offset, 0),
+			swatches.length - 1,
+		);
+		swatches[nextIndex]?.focus();
+	};
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger
+				render={(props) => (
+					<Button
+						{...props}
+						type="button"
+						variant="outline"
+						disabled={disabled}
+						data-slot="color-picker-trigger"
+						className={cn(
+							"w-full justify-between gap-2 font-normal",
+							className,
+						)}
+					>
+						<span className="flex min-w-0 items-center gap-2">
+							{value ? (
+								<span
+									aria-hidden
+									className={cn(
+										"size-4 shrink-0 rounded-full",
+										badgeColorBackgroundClass[value],
+									)}
+								/>
+							) : null}
+							<span
+								className={cn("truncate", !value && "text-muted-foreground")}
+							>
+								{value ? formatColorName(value) : placeholder}
+							</span>
+						</span>
+						<CaretDownIcon className="size-4 shrink-0 text-muted-foreground" />
+					</Button>
+				)}
+			/>
+			{name !== undefined && (
+				<input type="hidden" name={name} value={value ?? ""} />
+			)}
+			<PopoverContent align="start" className={cn("w-auto", contentClassName)}>
+				<div
+					ref={gridRef}
+					role="radiogroup"
+					aria-label={placeholder}
+					data-slot="color-picker-grid"
+					className="grid grid-cols-5 gap-1.5 p-0.5"
+					onKeyDown={handleGridKeyDown}
+				>
+					{badgeColors.map((color) => (
+						<button
+							key={color}
+							type="button"
+							role="radio"
+							aria-checked={value === color}
+							tabIndex={color === tabbableColor ? 0 : -1}
+							data-slot="color-picker-swatch"
+							title={formatColorName(color)}
+							aria-label={formatColorName(color)}
+							onClick={() => selectColor(color)}
+							className={cn(
+								"flex size-6 items-center justify-center rounded-full ring-ring ring-offset-2 ring-offset-popover outline-none transition-transform hover:scale-110 focus-visible:ring-2 motion-reduce:transform-none",
+								badgeColorBackgroundClass[color],
+								value === color && "ring-2",
+							)}
+						>
+							{value === color ? (
+								<CheckIcon
+									aria-hidden
+									weight="bold"
+									className={cn("size-3.5", badgeColorForegroundClass[color])}
+								/>
+							) : null}
+						</button>
+					))}
+				</div>
+				{clearable && value != null && (
+					<Button
+						type="button"
+						variant="ghost"
+						size="sm"
+						data-slot="color-picker-clear"
+						onClick={() => selectColor(null)}
+					>
+						{clearLabel}
+					</Button>
+				)}
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export { ColorPicker };

package/src/components/ui/combobox.tsx

@@ -0,0 +1,317 @@
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+import { CaretDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
+import * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+} from "#/components/ui/input-group.tsx";
+import {
+	menuContentVariants,
+	menuIndicatorVariants,
+	menuItemVariants,
+	menuLabelVariants,
+	menuSeparatorVariants,
+} from "#/components/ui/menu-variants.ts";
+import { cn } from "#/lib/utils.ts";
+
+// Base UI's combobox root renders no DOM element of its own, so it can't carry
+// a `data-slot` the way the other kit roots do; we still wrap it in a named
+// generic function for API consistency (and a discoverable doc anchor) while
+// forwarding the value/multiple generics intact.
+function Combobox<Value, Multiple extends boolean | undefined = false>(
+	props: ComboboxPrimitive.Root.Props<Value, Multiple>,
+) {
+	return <ComboboxPrimitive.Root {...props} />;
+}
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+	return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+function ComboboxTrigger({
+	className,
+	children,
+	"aria-label": ariaLabel = "Open list",
+	...props
+}: ComboboxPrimitive.Trigger.Props) {
+	return (
+		<ComboboxPrimitive.Trigger
+			data-slot="combobox-trigger"
+			aria-label={ariaLabel}
+			className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+			{...props}
+		>
+			{children}
+			<CaretDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+		</ComboboxPrimitive.Trigger>
+	);
+}
+
+function ComboboxClear({
+	"aria-label": ariaLabel = "Clear selection",
+	...props
+}: ComboboxPrimitive.Clear.Props) {
+	return (
+		<ComboboxPrimitive.Clear
+			data-slot="combobox-clear"
+			aria-label={ariaLabel}
+			render={<InputGroupButton variant="ghost" size="icon-xs" />}
+			{...props}
+		>
+			<XIcon className="pointer-events-none" />
+		</ComboboxPrimitive.Clear>
+	);
+}
+
+function ComboboxInput({
+	className,
+	children,
+	disabled = false,
+	showTrigger = true,
+	showClear = false,
+	...props
+}: ComboboxPrimitive.Input.Props & {
+	showTrigger?: boolean;
+	showClear?: boolean;
+}) {
+	return (
+		<InputGroup className={cn("w-auto", className)}>
+			<ComboboxPrimitive.Input
+				render={<InputGroupInput disabled={disabled} />}
+				{...props}
+			/>
+			<InputGroupAddon align="inline-end">
+				{showTrigger && (
+					<InputGroupButton
+						size="icon-xs"
+						variant="ghost"
+						render={<ComboboxTrigger />}
+						data-slot="input-group-button"
+						className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+						disabled={disabled}
+					/>
+				)}
+				{showClear && <ComboboxClear disabled={disabled} />}
+			</InputGroupAddon>
+			{children}
+		</InputGroup>
+	);
+}
+
+function ComboboxContent({
+	className,
+	side = "bottom",
+	sideOffset = 6,
+	align = "start",
+	alignOffset = 0,
+	anchor,
+	...props
+}: ComboboxPrimitive.Popup.Props &
+	Pick<
+		ComboboxPrimitive.Positioner.Props,
+		"side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+	>) {
+	return (
+		<ComboboxPrimitive.Portal>
+			<ComboboxPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				className="isolate z-50"
+			>
+				<ComboboxPrimitive.Popup
+					data-slot="combobox-content"
+					data-chips={!!anchor}
+					className={cn(
+						menuContentVariants(),
+						"group/combobox-content relative w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden p-0 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none",
+						className,
+					)}
+					{...props}
+				/>
+			</ComboboxPrimitive.Positioner>
+		</ComboboxPrimitive.Portal>
+	);
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+	return (
+		<ComboboxPrimitive.List
+			data-slot="combobox-list"
+			// max-height caps the list at 72 spacing units (18rem) or the available
+			// popup height, whichever is smaller, minus 9 units (2.25rem) reserved
+			// for an in-popup input group (command-style search) when present.
+			className={cn(
+				"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxItem({
+	className,
+	children,
+	...props
+}: ComboboxPrimitive.Item.Props) {
+	return (
+		<ComboboxPrimitive.Item
+			data-slot="combobox-item"
+			className={cn(
+				menuItemVariants({ indicator: "end" }),
+				"w-full",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ComboboxPrimitive.ItemIndicator
+				render={<span className={menuIndicatorVariants()} />}
+			>
+				<CheckIcon className="pointer-events-none" />
+			</ComboboxPrimitive.ItemIndicator>
+		</ComboboxPrimitive.Item>
+	);
+}
+
+function ComboboxRow({ ...props }: ComboboxPrimitive.Row.Props) {
+	return <ComboboxPrimitive.Row data-slot="combobox-row" {...props} />;
+}
+
+function ComboboxGroup({ ...props }: ComboboxPrimitive.Group.Props) {
+	return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />;
+}
+
+function ComboboxLabel({
+	className,
+	...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+	return (
+		<ComboboxPrimitive.GroupLabel
+			data-slot="combobox-label"
+			className={cn(menuLabelVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+	return (
+		<ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+	);
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+	return (
+		<ComboboxPrimitive.Empty
+			data-slot="combobox-empty"
+			className={cn(
+				"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxSeparator({
+	className,
+	...props
+}: ComboboxPrimitive.Separator.Props) {
+	return (
+		<ComboboxPrimitive.Separator
+			data-slot="combobox-separator"
+			className={cn(menuSeparatorVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxChips({ className, ...props }: ComboboxPrimitive.Chips.Props) {
+	return (
+		<ComboboxPrimitive.Chips
+			data-slot="combobox-chips"
+			className={cn(
+				"flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxChip({
+	className,
+	children,
+	showRemove = true,
+	...props
+}: ComboboxPrimitive.Chip.Props & {
+	showRemove?: boolean;
+}) {
+	return (
+		<ComboboxPrimitive.Chip
+			data-slot="combobox-chip"
+			// h-5.25 (21px) keeps chips compact enough to sit two-deep inside the
+			// 32px-min chips row without forcing it to grow.
+			className={cn(
+				"flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showRemove && (
+				<ComboboxPrimitive.ChipRemove
+					render={<Button variant="ghost" size="icon-xs" />}
+					className="-ml-1 opacity-50 hover:opacity-100"
+					data-slot="combobox-chip-remove"
+				>
+					<XIcon className="pointer-events-none" />
+				</ComboboxPrimitive.ChipRemove>
+			)}
+		</ComboboxPrimitive.Chip>
+	);
+}
+
+function ComboboxChipsInput({
+	className,
+	...props
+}: ComboboxPrimitive.Input.Props) {
+	return (
+		<ComboboxPrimitive.Input
+			data-slot="combobox-chip-input"
+			className={cn("min-w-16 flex-1 outline-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function useComboboxAnchor() {
+	return React.useRef<HTMLDivElement | null>(null);
+}
+
+export {
+	Combobox,
+	ComboboxChip,
+	ComboboxChips,
+	ComboboxChipsInput,
+	ComboboxCollection,
+	ComboboxContent,
+	ComboboxEmpty,
+	ComboboxGroup,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxLabel,
+	ComboboxList,
+	ComboboxRow,
+	ComboboxSeparator,
+	ComboboxTrigger,
+	ComboboxValue,
+	useComboboxAnchor,
+};