@voila.dev/ui 1.1.9

package/src/components/ui/calendar.tsx

@@ -0,0 +1,266 @@
+import {
+	CaretDownIcon,
+	CaretLeftIcon,
+	CaretRightIcon,
+} from "@phosphor-icons/react";
+import * as React from "react";
+import {
+	type DayButton,
+	DayPicker,
+	getDefaultClassNames,
+} from "react-day-picker";
+import { Button, buttonVariants } from "#/components/ui/button.tsx";
+import { cn } from "#/lib/utils.ts";
+
+// DayPicker's props are a union over `mode` (single | range | multiple); omitting a
+// key must distribute so each member keeps its own `selected`/`onSelect` shape.
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown
+	? Omit<T, K>
+	: never;
+
+/**
+ * First day of the week for a BCP-47 locale (react-day-picker's `weekStartsOn`,
+ * 0 = Sunday), read from the native `Intl.Locale` week info: `en-US` → Sunday,
+ * `fr-FR` → Monday. Returns undefined (react-day-picker's default) when the
+ * runtime lacks the API or the locale is omitted.
+ */
+function weekStartFromLocale(
+	locale: string | undefined,
+): 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined {
+	if (!locale) return undefined;
+	try {
+		const intlLocale = new Intl.Locale(locale) as Intl.Locale & {
+			getWeekInfo?: () => { firstDay: number };
+			weekInfo?: { firstDay: number };
+		};
+		const info = intlLocale.getWeekInfo?.() ?? intlLocale.weekInfo;
+		// Intl reports 1 = Monday … 7 = Sunday; map Sunday (7) to 0 for the picker.
+		if (info) return (info.firstDay % 7) as 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	} catch {
+		// Older runtimes lack Intl week info; fall back to the picker default.
+	}
+	return undefined;
+}
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = "label",
+	navButtonVariant = "ghost",
+	locale,
+	weekStartsOn,
+	formatters,
+	components,
+	...props
+}: DistributiveOmit<React.ComponentProps<typeof DayPicker>, "locale"> & {
+	navButtonVariant?: React.ComponentProps<typeof Button>["variant"];
+	/** BCP-47 locale (e.g. "fr-FR") applied to the month, weekday, and day labels. */
+	locale?: string;
+}) {
+	const defaultClassNames = getDefaultClassNames();
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn(
+				"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className,
+			)}
+			captionLayout={captionLayout}
+			weekStartsOn={weekStartsOn ?? weekStartFromLocale(locale)}
+			formatters={{
+				// Localize every visible label through the native Intl formatters so the
+				// calendar carries no date-fns locale object.
+				formatCaption: (date) =>
+					new Intl.DateTimeFormat(locale, {
+						month: "long",
+						year: "numeric",
+					}).format(date),
+				formatMonthDropdown: (date) =>
+					new Intl.DateTimeFormat(locale, { month: "short" }).format(date),
+				formatYearDropdown: (date) =>
+					new Intl.DateTimeFormat(locale, { year: "numeric" }).format(date),
+				formatWeekdayName: (date) =>
+					new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date),
+				...formatters,
+			}}
+			classNames={{
+				root: cn("w-fit", defaultClassNames.root),
+				months: cn(
+					"relative flex flex-col gap-4 md:flex-row",
+					defaultClassNames.months,
+				),
+				month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+				nav: cn(
+					"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+					defaultClassNames.nav,
+				),
+				button_previous: cn(
+					buttonVariants({ variant: navButtonVariant }),
+					"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+					defaultClassNames.button_previous,
+				),
+				button_next: cn(
+					buttonVariants({ variant: navButtonVariant }),
+					"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+					defaultClassNames.button_next,
+				),
+				month_caption: cn(
+					"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+					defaultClassNames.month_caption,
+				),
+				dropdowns: cn(
+					"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+					defaultClassNames.dropdowns,
+				),
+				dropdown_root: cn(
+					"relative rounded-(--cell-radius)",
+					defaultClassNames.dropdown_root,
+				),
+				dropdown: cn(
+					"absolute inset-0 bg-popover opacity-0",
+					defaultClassNames.dropdown,
+				),
+				caption_label: cn(
+					"font-medium select-none",
+					captionLayout === "label"
+						? "text-sm"
+						: "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+					defaultClassNames.caption_label,
+				),
+				month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+				weekdays: cn("flex", defaultClassNames.weekdays),
+				// text-[0.8rem]: shared with Button `sm` (button-variants.ts); keep in sync.
+				weekday: cn(
+					"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+					defaultClassNames.weekday,
+				),
+				week: cn("mt-2 flex w-full", defaultClassNames.week),
+				week_number_header: cn(
+					"w-(--cell-size) select-none",
+					defaultClassNames.week_number_header,
+				),
+				week_number: cn(
+					"text-[0.8rem] text-muted-foreground select-none",
+					defaultClassNames.week_number,
+				),
+				day: cn(
+					"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+					props.showWeekNumber
+						? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+						: "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+					defaultClassNames.day,
+				),
+				range_start: cn(
+					"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+					defaultClassNames.range_start,
+				),
+				range_middle: cn("rounded-none", defaultClassNames.range_middle),
+				range_end: cn(
+					"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+					defaultClassNames.range_end,
+				),
+				today: cn(
+					"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+					defaultClassNames.today,
+				),
+				outside: cn(
+					"text-muted-foreground aria-selected:text-muted-foreground",
+					defaultClassNames.outside,
+				),
+				disabled: cn(
+					"text-muted-foreground opacity-50",
+					defaultClassNames.disabled,
+				),
+				hidden: cn("invisible", defaultClassNames.hidden),
+				...classNames,
+			}}
+			components={{
+				Root: ({ className, rootRef, ...props }) => {
+					return (
+						<div
+							data-slot="calendar"
+							ref={rootRef}
+							className={className}
+							{...props}
+						/>
+					);
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === "left") {
+						return (
+							<CaretLeftIcon className={cn("size-4", className)} {...props} />
+						);
+					}
+
+					if (orientation === "right") {
+						return (
+							<CaretRightIcon className={cn("size-4", className)} {...props} />
+						);
+					}
+
+					return (
+						<CaretDownIcon className={cn("size-4", className)} {...props} />
+					);
+				},
+				DayButton: ({ ...props }) => (
+					<CalendarDayButton locale={locale} {...props} />
+				),
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-(--cell-size) items-center justify-center text-center">
+								{children}
+							</div>
+						</td>
+					);
+				},
+				...components,
+			}}
+			{...props}
+		/>
+	);
+}
+
+function CalendarDayButton({
+	className,
+	day,
+	modifiers,
+	locale,
+	...props
+}: React.ComponentProps<typeof DayButton> & { locale?: string }) {
+	const defaultClassNames = getDefaultClassNames();
+
+	const ref = React.useRef<HTMLButtonElement>(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+
+	return (
+		<Button
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString(locale)}
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+				defaultClassNames.day,
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar, CalendarDayButton };

package/src/components/ui/card.tsx

@@ -0,0 +1,155 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { cn } from "#/lib/utils.ts";
+
+type CardSize = "default" | "sm";
+
+function Card({
+	className,
+	size = "default",
+	render,
+	...props
+}: useRender.ComponentProps<"div"> & { size?: CardSize }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: { slot: "card", size },
+	});
+}
+
+function CardHeader({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: { slot: "card-header" },
+	});
+}
+
+function CardTitle({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: { slot: "card-title" },
+	});
+}
+
+function CardDescription({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{ className: cn("text-sm text-muted-foreground", className) },
+			props,
+		),
+		render,
+		state: { slot: "card-description" },
+	});
+}
+
+function CardAction({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: { slot: "card-action" },
+	});
+}
+
+function CardContent({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{ className: cn("px-4 group-data-[size=sm]/card:px-3", className) },
+			props,
+		),
+		render,
+		state: { slot: "card-content" },
+	});
+}
+
+function CardFooter({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: { slot: "card-footer" },
+	});
+}
+
+export {
+	Card,
+	CardAction,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	type CardSize,
+	CardTitle,
+};