@voila.dev/ui 1.1.9

package/src/components/ui/table.tsx

@@ -0,0 +1,132 @@
+import type * as React from "react";
+
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Wraps the `<table>` in a scroll container so wide tables pan horizontally
+ * instead of breaking the page layout. Style the container itself (max-height,
+ * sticky headers, borders) through `containerClassName`.
+ */
+function Table({
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<"table"> & { containerClassName?: string }) {
+	return (
+		<div
+			data-slot="table-container"
+			className={cn("relative w-full overflow-x-auto", containerClassName)}
+		>
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return (
+		<thead
+			data-slot="table-header"
+			className={cn("[&_tr]:border-b", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn(
+				"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * Hover highlighting only applies to body rows, not header/footer rows. Stamp
+ * `data-selected` on a row to mark it as selected.
+ */
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"border-b transition-colors has-aria-expanded:bg-muted/50 data-selected:bg-muted [tbody_&]:hover:bg-muted/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * Cells don't wrap by default - long content pans the table horizontally via
+ * the scroll container. Pass `whitespace-normal` for columns that should wrap
+ * (e.g. descriptions).
+ */
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCaption({
+	className,
+	...props
+}: React.ComponentProps<"caption">) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("mt-4 text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+};

package/src/components/ui/tabs.tsx

@@ -0,0 +1,77 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+
+import { cn } from "#/lib/utils.ts";
+
+function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			className={cn(
+				"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const tabsListVariants = cva({
+	base: "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+	variants: {
+		variant: {
+			default: "bg-muted",
+			line: "gap-1 bg-transparent",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+function TabsList({
+	className,
+	variant = "default",
+	...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+	return (
+		<TabsPrimitive.Tab
+			data-slot="tabs-trigger"
+			className={cn(
+				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+				"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+	return (
+		<TabsPrimitive.Panel
+			data-slot="tabs-content"
+			className={cn(
+				// Inactive panels are unmounted, so the fade runs on each switch.
+				"flex-1 animate-in text-sm outline-none fade-in-0 motion-reduce:animate-none!",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import type * as React from "react";
+
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Auto-grows with content (`field-sizing-content`) between `min-h-16` and
+ * `max-h-64`, then scrolls. Note that content sizing makes the `rows`
+ * attribute inert - size a taller or shorter field with `min-h-*`/`max-h-*`
+ * through `className` instead.
+ */
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				"field-sizing-content max-h-64 min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-[color,background-color,border-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 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 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",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Textarea };

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

@@ -0,0 +1,221 @@
+import { ClockIcon } from "@phosphor-icons/react";
+import * as React from "react";
+import { Button, type ButtonProps } from "#/components/ui/button.tsx";
+import { DatePickerTrigger } from "#/components/ui/date-picker.tsx";
+import { Popover, PopoverContent } from "#/components/ui/popover.tsx";
+import { usePickerState } from "#/hooks/use-picker-state.ts";
+import {
+	formatMinutesLabel,
+	minutesToTimeValue,
+	parseTimeToMinutes,
+} from "#/lib/time-math.ts";
+import { cn } from "#/lib/utils.ts";
+
+function formatTimeLabel(
+	time: string,
+	locale: string | undefined,
+	options: Intl.DateTimeFormatOptions | undefined,
+): string {
+	const totalMinutes = parseTimeToMinutes(time);
+	// An unparseable value is the caller's literal string; show it as-is.
+	if (totalMinutes === null) return time;
+	return formatMinutesLabel(totalMinutes, locale, options);
+}
+
+function timeRangeBoundsInMinutes(
+	min: string,
+	max: string,
+): { first: number; last: number } {
+	return {
+		first: parseTimeToMinutes(min) ?? 0,
+		last: parseTimeToMinutes(max) ?? 23 * 60 + 59,
+	};
+}
+
+function timeOptionValues(min: string, max: string, step: number): string[] {
+	const stepMinutes = step > 0 ? step : 30;
+	const { first, last } = timeRangeBoundsInMinutes(min, max);
+	const times: string[] = [];
+	for (let minutes = first; minutes <= last; minutes += stepMinutes) {
+		times.push(minutesToTimeValue(minutes));
+	}
+	return times;
+}
+
+/** The hidden form input serializing the selection as HH:mm (none without a name). */
+function HiddenTimeInput({
+	name,
+	value,
+}: {
+	name: string | undefined;
+	value: string | null | undefined;
+}) {
+	if (!name) return null;
+	return <input type="hidden" name={name} value={value ?? ""} />;
+}
+
+function TimePickerOption({
+	time,
+	label,
+	selected,
+	selectedOptionRef,
+	onSelect,
+}: {
+	time: string;
+	label: string;
+	selected: boolean;
+	selectedOptionRef: React.Ref<HTMLButtonElement>;
+	onSelect: (time: string) => void;
+}) {
+	return (
+		<Button
+			role="option"
+			aria-selected={selected}
+			data-selected={selected || undefined}
+			variant="ghost"
+			size="sm"
+			className="shrink-0 justify-center font-normal data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary data-selected:hover:text-primary-foreground"
+			ref={selected ? selectedOptionRef : undefined}
+			onClick={() => onSelect(time)}
+		>
+			{label}
+		</Button>
+	);
+}
+
+function TimePicker(props: {
+	/** Controlled "HH:mm" value; pass `null` for a controlled empty selection. */
+	value?: string | null;
+	defaultValue?: string;
+	onValueChange?: (time: string | null) => void;
+	placeholder?: string;
+	/**
+	 * `Intl.DateTimeFormat` options for the labels. Defaults to a short localized
+	 * time (`{ hour: "numeric", minute: "2-digit" }`, e.g. "2:30 PM" / "14:30").
+	 */
+	formatOptions?: Intl.DateTimeFormatOptions;
+	/** BCP-47 locale (e.g. "fr-FR"), applied to the trigger and option labels. */
+	locale?: string;
+	disabled?: boolean;
+	/** Minutes between two options. Defaults to 30. */
+	step?: number;
+	/** First selectable time, "HH:mm" inclusive. */
+	min?: string;
+	/** Last selectable time, "HH:mm" inclusive. */
+	max?: string;
+	/** Name for the hidden form input; the value is serialized as HH:mm. */
+	name?: string;
+	id?: string;
+	className?: string;
+	"aria-invalid"?: React.AriaAttributes["aria-invalid"];
+	"aria-label"?: string;
+	variant?: ButtonProps["variant"];
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}) {
+	const {
+		value: controlledValue,
+		defaultValue,
+		onValueChange,
+		placeholder = "Pick a time",
+		formatOptions,
+		locale,
+		disabled = false,
+		step = 30,
+		min = "00:00",
+		max = "23:59",
+		name,
+		id,
+		className,
+		"aria-invalid": ariaInvalid,
+		"aria-label": ariaLabel,
+		variant,
+		defaultOpen,
+		open: controlledOpen,
+		onOpenChange,
+	} = props;
+
+	const { isControlled, value, setUncontrolledValue, open, setOpen } =
+		usePickerState<string>({
+			value: controlledValue,
+			defaultValue,
+			open: controlledOpen,
+			defaultOpen,
+			onOpenChange,
+		});
+
+	const options = React.useMemo(
+		() => timeOptionValues(min, max, step),
+		[step, min, max],
+	);
+
+	const selectedMinutes = parseTimeToMinutes(value);
+
+	const handleSelect = (time: string) => {
+		if (!isControlled) setUncontrolledValue(time);
+		onValueChange?.(time);
+		setOpen(false);
+	};
+
+	// The selected option receives the popup's initial focus (otherwise Base UI
+	// focuses the first option, scrolling the list back to the top) and is then
+	// centered once the popup has been positioned — the ref fires too early, so
+	// defer by a frame. (Optional call: jsdom has no scrollIntoView.)
+	const selectedOptionRef = React.useRef<HTMLButtonElement | null>(null);
+	const setSelectedOption = React.useCallback(
+		(node: HTMLButtonElement | null) => {
+			selectedOptionRef.current = node;
+			if (!node) return;
+			requestAnimationFrame(() => node.scrollIntoView?.({ block: "center" }));
+		},
+		[],
+	);
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<DatePickerTrigger
+				slot="time-picker-trigger"
+				icon={<ClockIcon className="size-4 shrink-0 text-muted-foreground" />}
+				id={id}
+				className={cn("min-w-32", className)}
+				disabled={disabled}
+				empty={!value}
+				aria-invalid={ariaInvalid}
+				aria-label={ariaLabel}
+				variant={variant}
+			>
+				{value ? formatTimeLabel(value, locale, formatOptions) : placeholder}
+			</DatePickerTrigger>
+			<HiddenTimeInput name={name} value={value} />
+			<PopoverContent
+				data-slot="time-picker-content"
+				className="w-auto min-w-(--anchor-width) p-1"
+				align="start"
+				initialFocus={selectedMinutes !== null ? selectedOptionRef : undefined}
+			>
+				<div
+					role="listbox"
+					aria-label={ariaLabel ?? placeholder}
+					className="flex max-h-64 flex-col gap-0.5 overflow-y-auto overscroll-contain"
+				>
+					{options.map((time) => (
+						<TimePickerOption
+							key={time}
+							time={time}
+							label={formatTimeLabel(time, locale, formatOptions)}
+							selected={
+								selectedMinutes !== null &&
+								parseTimeToMinutes(time) === selectedMinutes
+							}
+							selectedOptionRef={setSelectedOption}
+							onSelect={handleSelect}
+						/>
+					))}
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export { TimePicker };

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

@@ -0,0 +1,86 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import * as React from "react";
+import { toggleVariants } from "#/components/ui/toggle.tsx";
+import type { VariantProps } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+
+const ToggleGroupContext = React.createContext<
+	VariantProps<typeof toggleVariants> & {
+		spacing?: number;
+		orientation?: "horizontal" | "vertical";
+	}
+>({
+	size: "default",
+	variant: "default",
+	spacing: 0,
+	orientation: "horizontal",
+});
+
+function ToggleGroup({
+	className,
+	variant,
+	size,
+	spacing = 0,
+	orientation = "horizontal",
+	children,
+	...props
+}: ToggleGroupPrimitive.Props &
+	VariantProps<typeof toggleVariants> & {
+		spacing?: number;
+		orientation?: "horizontal" | "vertical";
+	}) {
+	return (
+		<ToggleGroupPrimitive
+			data-slot="toggle-group"
+			data-variant={variant}
+			data-size={size}
+			data-spacing={spacing}
+			orientation={orientation}
+			style={{ "--gap": spacing } as React.CSSProperties}
+			className={cn(
+				"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+				className,
+			)}
+			{...props}
+		>
+			<ToggleGroupContext.Provider
+				value={{ variant, size, spacing, orientation }}
+			>
+				{children}
+			</ToggleGroupContext.Provider>
+		</ToggleGroupPrimitive>
+	);
+}
+
+function ToggleGroupItem({
+	className,
+	children,
+	variant = "default",
+	size = "default",
+	...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+	const context = React.useContext(ToggleGroupContext);
+
+	return (
+		<TogglePrimitive
+			data-slot="toggle-group-item"
+			data-variant={context.variant || variant}
+			data-size={context.size || size}
+			data-spacing={context.spacing}
+			className={cn(
+				"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</TogglePrimitive>
+	);
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+
+import { cn } from "#/lib/utils.ts";
+
+const toggleVariants = cva({
+	base: "group/toggle inline-flex items-center justify-center gap-1 rounded-lg border border-transparent text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-pressed:bg-muted data-pressed:inset-shadow-xs 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",
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border-input bg-transparent hover:bg-muted",
+		},
+		size: {
+			default:
+				"h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type ToggleProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants>;
+
+function Toggle({
+	className,
+	variant = "default",
+	size = "default",
+	...props
+}: ToggleProps) {
+	return (
+		<TogglePrimitive
+			data-slot="toggle"
+			className={cn(toggleVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
+}
+
+export { Toggle, type ToggleProps, toggleVariants };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,79 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "#/lib/utils.ts";
+
+/**
+ * Kit opinion: tooltips open instantly (`delay={0}`) instead of Base UI's
+ * default delay. `Tooltip` embeds its own provider, which shadows any outer
+ * one - to slow a tooltip down, set `delay` on that `Tooltip` directly.
+ */
+function TooltipProvider({
+	delay = 0,
+	...props
+}: TooltipPrimitive.Provider.Props) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delay={delay}
+			{...props}
+		/>
+	);
+}
+
+function Tooltip({
+	delay,
+	...props
+}: TooltipPrimitive.Root.Props &
+	Pick<TooltipPrimitive.Provider.Props, "delay">) {
+	return (
+		<TooltipProvider delay={delay}>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	side = "top",
+	sideOffset = 4,
+	align = "center",
+	alignOffset = 0,
+	collisionPadding,
+	children,
+	...props
+}: TooltipPrimitive.Popup.Props &
+	Pick<
+		TooltipPrimitive.Positioner.Props,
+		"align" | "alignOffset" | "collisionPadding" | "side" | "sideOffset"
+	>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Positioner
+				align={align}
+				alignOffset={alignOffset}
+				collisionPadding={collisionPadding}
+				side={side}
+				sideOffset={sideOffset}
+				className="isolate z-50"
+			>
+				<TooltipPrimitive.Popup
+					data-slot="tooltip-content"
+					className={cn(
+						"inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:rounded-sm 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 motion-reduce:animate-none!",
+						className,
+					)}
+					{...props}
+				>
+					{children}
+					<TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+				</TooltipPrimitive.Popup>
+			</TooltipPrimitive.Positioner>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };