@voila.dev/ui 1.1.9

package/src/components/ui/money-input.tsx

@@ -0,0 +1,96 @@
+import type * as React from "react";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupInput,
+} from "#/components/ui/input-group.tsx";
+import { cn } from "#/lib/utils.ts";
+
+type MoneyInputProps = Omit<
+	React.ComponentProps<typeof InputGroupInput>,
+	"type" | "value" | "onChange"
+> & {
+	/** Raw amount as typed (e.g. `"120"` or `"120.50"`). */
+	value: string;
+	/** Receives the raw amount string on every change. */
+	onValueChange: (value: string) => void;
+	/** Selected currency code (e.g. `"EUR"`). */
+	currency: string;
+	/** Currency codes offered by the select. Defaults to the single `currency`. */
+	currencies?: ReadonlyArray<string>;
+	/** Receives the selected currency code. Omit when the select is locked. */
+	onCurrencyChange?: (currency: string) => void;
+	/**
+	 * Locks the currency select. Defaults to `true` when there is a single
+	 * currency to choose from, so the platform's single-currency case reads as a
+	 * disabled selector rather than a bare suffix.
+	 */
+	currencyDisabled?: boolean;
+	/** Accessible name for the currency select. */
+	currencyLabel: string;
+	/** Wrapper class (width/layout), forwarded to the `InputGroup`. */
+	className?: string;
+};
+
+/**
+ * A money amount input: a numeric field with a trailing currency select. The
+ * select is disabled by default (the platform settles in a single currency), so
+ * it reads as a locked currency selector rather than a static suffix — pass
+ * `currencies` + `onCurrencyChange` to make it interactive. The amount is an
+ * uncontrolled-string like the underlying `<input type="number">`; the consumer
+ * owns parsing/formatting into cents.
+ */
+function MoneyInput({
+	value,
+	onValueChange,
+	currency,
+	currencies = [currency],
+	onCurrencyChange,
+	currencyDisabled = currencies.length <= 1,
+	currencyLabel,
+	className,
+	...props
+}: MoneyInputProps) {
+	return (
+		<InputGroup
+			className={cn(
+				"has-disabled:bg-transparent has-disabled:opacity-100 dark:has-disabled:bg-input/30",
+				className,
+			)}
+			data-slot="money-input"
+		>
+			<InputGroupInput
+				type="number"
+				inputMode="decimal"
+				min="0"
+				step="0.5"
+				value={value}
+				onChange={(event) => onValueChange(event.target.value)}
+				{...props}
+			/>
+			<InputGroupAddon align="inline-end">
+				<select
+					data-slot="money-input-currency"
+					aria-label={currencyLabel}
+					disabled={currencyDisabled}
+					value={currency}
+					onChange={(event) => onCurrencyChange?.(event.target.value)}
+					className={cn(
+						"cursor-pointer appearance-none bg-transparent pr-1 text-sm font-medium text-muted-foreground outline-none",
+						// A disabled select must stay fully legible (it is the locked
+						// currency label), so keep full opacity and drop the cursor.
+						"disabled:cursor-default disabled:opacity-100",
+					)}
+				>
+					{currencies.map((code) => (
+						<option key={code} value={code}>
+							{code}
+						</option>
+					))}
+				</select>
+			</InputGroupAddon>
+		</InputGroup>
+	);
+}
+
+export { MoneyInput, type MoneyInputProps };

package/src/components/ui/native-date-picker.tsx

@@ -0,0 +1,120 @@
+import {
+	CalendarBlankIcon,
+	CalendarDotsIcon,
+	ClockIcon,
+} from "@phosphor-icons/react";
+import type * as React from "react";
+import { cn } from "#/lib/utils.ts";
+
+type NativeDateFieldProps = Omit<
+	React.ComponentProps<"input">,
+	"type" | "size"
+> & {
+	size?: "sm" | "default";
+	/**
+	 * Classes for the wrapper `<div>` that hosts the leading icon. Use this for
+	 * layout and width (e.g. `w-full`, `w-48`); `className` styles the inner
+	 * `<input>` itself, matching the rest of the kit's form controls.
+	 */
+	wrapperClassName?: string;
+};
+
+/**
+ * Shared chrome for the native date/time/datetime-local inputs: the kit's
+ * Input field styling plus a leading icon (mirroring DatePicker's trigger)
+ * and click-anywhere-to-open via `showPicker()`. The WebKit indicator is
+ * hidden — the whole field is the affordance, like the composed DatePicker.
+ */
+function NativeDateField({
+	type,
+	slot,
+	icon,
+	className,
+	wrapperClassName,
+	size = "default",
+	onClick,
+	...props
+}: NativeDateFieldProps & {
+	type: "date" | "time" | "datetime-local";
+	slot: string;
+	icon: React.ReactNode;
+}) {
+	return (
+		<div
+			className={cn(
+				"group/native-date-picker relative w-fit has-[input:disabled]:opacity-50",
+				wrapperClassName,
+			)}
+			data-slot={`${slot}-wrapper`}
+			data-size={size}
+		>
+			<span
+				className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-muted-foreground select-none [&_svg]:size-4"
+				aria-hidden="true"
+				data-slot={`${slot}-icon`}
+			>
+				{icon}
+			</span>
+			<input
+				type={type}
+				data-slot={slot}
+				data-size={size}
+				// `text-base` then `md:text-sm` is the same iOS zoom guard as Input.
+				className={cn(
+					"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent py-1 pr-2.5 pl-8 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),12px)] data-[size=sm]:py-0.5 md:text-sm dark:scheme-dark dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&::-webkit-calendar-picker-indicator]:hidden",
+					className,
+				)}
+				onClick={(event) => {
+					onClick?.(event);
+					if (event.defaultPrevented) return;
+					const input = event.currentTarget;
+					// Chrome/Edge/Firefox/Safari 16+; throws outside a user gesture.
+					if (typeof input.showPicker === "function") {
+						try {
+							input.showPicker();
+						} catch {
+							// Unsupported context (e.g. cross-origin iframe) — the field
+							// still works through its native segment editing.
+						}
+					}
+				}}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function NativeDatePicker(props: NativeDateFieldProps) {
+	return (
+		<NativeDateField
+			type="date"
+			slot="native-date-picker"
+			icon={<CalendarBlankIcon />}
+			{...props}
+		/>
+	);
+}
+
+function NativeTimePicker(props: NativeDateFieldProps) {
+	return (
+		<NativeDateField
+			type="time"
+			slot="native-time-picker"
+			icon={<ClockIcon />}
+			{...props}
+		/>
+	);
+}
+
+function NativeDateTimePicker(props: NativeDateFieldProps) {
+	return (
+		<NativeDateField
+			type="datetime-local"
+			slot="native-date-time-picker"
+			icon={<CalendarDotsIcon />}
+			{...props}
+		/>
+	);
+}
+
+export { NativeDatePicker, NativeDateTimePicker, NativeTimePicker };

package/src/components/ui/native-select.tsx

@@ -0,0 +1,74 @@
+import { CaretDownIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import { cn } from "#/lib/utils.ts";
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+	size?: "sm" | "default";
+	/**
+	 * Classes for the wrapper `<div>` that hosts the caret overlay. Use this for
+	 * layout and width (e.g. `w-full`, `w-48`); `className` styles the inner
+	 * `<select>` itself, matching the rest of the kit's form controls.
+	 */
+	wrapperClassName?: string;
+};
+
+function NativeSelect({
+	className,
+	wrapperClassName,
+	size = "default",
+	...props
+}: NativeSelectProps) {
+	return (
+		<div
+			className={cn(
+				"group/native-select relative w-full has-[select:disabled]:opacity-50",
+				wrapperClassName,
+			)}
+			data-slot="native-select-wrapper"
+			data-size={size}
+		>
+			<select
+				data-slot="native-select"
+				data-size={size}
+				className={cn(
+					"h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:scheme-dark dark:bg-input/30 dark:hover:bg-input/50 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+					className,
+				)}
+				{...props}
+			/>
+			<CaretDownIcon
+				className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+				aria-hidden="true"
+				data-slot="native-select-icon"
+			/>
+		</div>
+	);
+}
+
+function NativeSelectOption({
+	className,
+	...props
+}: React.ComponentProps<"option">) {
+	return (
+		<option
+			data-slot="native-select-option"
+			className={cn("bg-[Canvas] text-[CanvasText]", className)}
+			{...props}
+		/>
+	);
+}
+
+function NativeSelectOptGroup({
+	className,
+	...props
+}: React.ComponentProps<"optgroup">) {
+	return (
+		<optgroup
+			data-slot="native-select-optgroup"
+			className={cn("bg-[Canvas] text-[CanvasText]", className)}
+			{...props}
+		/>
+	);
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

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

@@ -0,0 +1,183 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { cva } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+
+function NavigationMenu({
+	align = "start",
+	alignOffset = 0,
+	side = "bottom",
+	sideOffset = 8,
+	collisionPadding,
+	className,
+	children,
+	...props
+}: NavigationMenuPrimitive.Root.Props &
+	Pick<
+		NavigationMenuPrimitive.Positioner.Props,
+		"align" | "alignOffset" | "side" | "sideOffset" | "collisionPadding"
+	>) {
+	return (
+		<NavigationMenuPrimitive.Root
+			data-slot="navigation-menu"
+			className={cn(
+				"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<NavigationMenuPositioner
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+				collisionPadding={collisionPadding}
+			/>
+		</NavigationMenuPrimitive.Root>
+	);
+}
+
+function NavigationMenuList({
+	className,
+	...props
+}: NavigationMenuPrimitive.List.Props) {
+	return (
+		<NavigationMenuPrimitive.List
+			data-slot="navigation-menu-list"
+			className={cn(
+				"group flex flex-1 list-none items-center justify-center gap-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuItem({
+	className,
+	...props
+}: NavigationMenuPrimitive.Item.Props) {
+	return (
+		<NavigationMenuPrimitive.Item
+			data-slot="navigation-menu-item"
+			className={cn("relative", className)}
+			{...props}
+		/>
+	);
+}
+
+const navigationMenuTriggerStyle = cva({
+	base: "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-popup-open:focus-visible:bg-muted",
+});
+
+function NavigationMenuTrigger({
+	className,
+	children,
+	...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+	return (
+		<NavigationMenuPrimitive.Trigger
+			data-slot="navigation-menu-trigger"
+			className={cn(navigationMenuTriggerStyle(), "group", className)}
+			{...props}
+		>
+			{children}{" "}
+			<CaretDownIcon
+				className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180"
+				aria-hidden="true"
+			/>
+		</NavigationMenuPrimitive.Trigger>
+	);
+}
+
+function NavigationMenuContent({
+	className,
+	...props
+}: NavigationMenuPrimitive.Content.Props) {
+	return (
+		<NavigationMenuPrimitive.Content
+			data-slot="navigation-menu-content"
+			className={cn(
+				"h-full w-auto p-1 transition-[opacity,transform,translate] duration-350 ease-fluid data-starting-style:opacity-0 data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] data-ending-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] motion-reduce:transition-none **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuPositioner({
+	className,
+	side = "bottom",
+	sideOffset = 8,
+	align = "start",
+	alignOffset = 0,
+	...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+	return (
+		<NavigationMenuPrimitive.Portal>
+			<NavigationMenuPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				className={cn(
+					"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-350 ease-fluid motion-reduce:transition-none data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+					className,
+				)}
+				{...props}
+			>
+				<NavigationMenuPrimitive.Popup className="relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-350 ease-fluid outline-none motion-reduce:transition-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0">
+					<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+				</NavigationMenuPrimitive.Popup>
+			</NavigationMenuPrimitive.Positioner>
+		</NavigationMenuPrimitive.Portal>
+	);
+}
+
+function NavigationMenuLink({
+	className,
+	...props
+}: NavigationMenuPrimitive.Link.Props) {
+	return (
+		<NavigationMenuPrimitive.Link
+			data-slot="navigation-menu-link"
+			className={cn(
+				"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus-visible:bg-muted [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuIndicator({
+	className,
+	...props
+}: NavigationMenuPrimitive.Icon.Props) {
+	return (
+		<NavigationMenuPrimitive.Icon
+			data-slot="navigation-menu-indicator"
+			className={cn(
+				"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+				className,
+			)}
+			{...props}
+		>
+			<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+		</NavigationMenuPrimitive.Icon>
+	);
+}
+
+export {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuIndicator,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuPositioner,
+	NavigationMenuTrigger,
+	navigationMenuTriggerStyle,
+};

package/src/components/ui/pagination.tsx

@@ -0,0 +1,150 @@
+import {
+	CaretLeftIcon,
+	CaretRightIcon,
+	DotsThreeIcon,
+} from "@phosphor-icons/react";
+import type * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import { cn } from "#/lib/utils.ts";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+	return (
+		<nav
+			// Sentence case to match the kit's other nav labels; spread-overridable
+			// (e.g. a French `aria-label="Pagination"`) since `{...props}` wins.
+			aria-label="Pagination"
+			data-slot="pagination"
+			className={cn("mx-auto flex w-full justify-center", className)}
+			{...props}
+		/>
+	);
+}
+
+function PaginationContent({
+	className,
+	...props
+}: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="pagination-content"
+			className={cn("flex items-center gap-0.5", className)}
+			{...props}
+		/>
+	);
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+	return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+	/**
+	 * Render the link as non-interactive (e.g. Previous on the first page):
+	 * `aria-disabled`, removed from the tab order, and dimmed. Maps to the kit's
+	 * `aria-disabled:` styling idiom rather than a dead `href`.
+	 */
+	isDisabled?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size" | "variant"> &
+	React.ComponentProps<"a">;
+
+function PaginationLink({
+	className,
+	isActive,
+	isDisabled,
+	size = "icon",
+	variant,
+	...props
+}: PaginationLinkProps) {
+	return (
+		<Button
+			// `variant` overrides the active/inactive default so consumers can opt
+			// into e.g. a `secondary` active page without re-implementing the link.
+			variant={variant ?? (isActive ? "outline" : "ghost")}
+			size={size}
+			className={cn(
+				"aria-disabled:pointer-events-none aria-disabled:opacity-50",
+				className,
+			)}
+			nativeButton={false}
+			render={
+				<a
+					data-slot="pagination-link"
+					data-active={isActive}
+					aria-current={isActive ? "page" : undefined}
+					{...props}
+					aria-disabled={isDisabled || undefined}
+					tabIndex={isDisabled ? -1 : props.tabIndex}
+				/>
+			}
+		/>
+	);
+}
+
+function PaginationPrevious({
+	className,
+	text = "Previous",
+	...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+	return (
+		<PaginationLink
+			aria-label="Go to previous page"
+			size="default"
+			className={cn("pl-1.5!", className)}
+			{...props}
+		>
+			<CaretLeftIcon data-icon="inline-start" />
+			<span className="hidden sm:block">{text}</span>
+		</PaginationLink>
+	);
+}
+
+function PaginationNext({
+	className,
+	text = "Next",
+	...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+	return (
+		<PaginationLink
+			aria-label="Go to next page"
+			size="default"
+			className={cn("pr-1.5!", className)}
+			{...props}
+		>
+			<span className="hidden sm:block">{text}</span>
+			<CaretRightIcon data-icon="inline-end" />
+		</PaginationLink>
+	);
+}
+
+function PaginationEllipsis({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		// Decorative gap indicator: `aria-hidden` hides it from the a11y tree, so
+		// it carries no sr-only text (the old one was unreachable inside the hidden
+		// subtree). The surrounding page links convey the skipped range.
+		<span
+			aria-hidden
+			data-slot="pagination-ellipsis"
+			className={cn(
+				"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<DotsThreeIcon />
+		</span>
+	);
+}
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+};