beez-ui 2.5.0 → 2.6.1

package/dist/components/dropdown-menu.js

@@ -1,13 +1,36 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as beez-ui's composable Radix
+* menu: Arc's raised panel, item rows, danger tone, separators, placement defaults and staggered item entrance on its
+* tokens, keeping every subcomponent, prop and `data-slot` of the previous API. The surface keeps beez-ui's reveal
+* from the trigger edge and the highlight that glides between items with the keyboard.
+*/
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { DROPDOWN_MENU_COLLISION_PADDING_PX, DROPDOWN_MENU_SIDE_OFFSET_PX } from "../constants/dropdown-menu.js";
 import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Arc's menu panel on its tokens. It also sets the direction its items rise in from (`--menu-item-offset-*`, toward
+* the trigger), so a nested submenu staggers its own items from its own side.
+*/
+const menuSurfaceClassName = "relative z-50 overflow-x-hidden overflow-y-auto rounded-(--radius-panel) border border-border bg-surface-raised p-[5px] text-foreground shadow-(--shadow-floating) data-[state=closed]:pointer-events-none data-[state=closed]:overflow-hidden [--menu-item-offset-x:0px] [--menu-item-offset-y:-2px] data-[side=top]:[--menu-item-offset-y:2px] data-[side=left]:[--menu-item-offset-x:2px] data-[side=left]:[--menu-item-offset-y:0px] data-[side=right]:[--menu-item-offset-x:-2px] data-[side=right]:[--menu-item-offset-y:0px]";
+/**
+* Arc's item row: 36px tall, a muted fill when highlighted and a muted icon (icons with their own `text-*` color keep
+* it). Items fade and rise in once when the menu opens, staggered by 35ms up to the fifth row; reduced motion shows
+* them at once. Only color, opacity and translate transition, so the highlight fill paints instantly and the
+* keyboard glide owns its movement.
+*/
+const menuItemClassName = "relative flex min-h-9 cursor-pointer items-center gap-2.5 rounded-[calc(var(--radius-panel)-6px)] px-[11px] text-sm text-foreground outline-hidden select-none [transition:color_var(--duration-fast)_var(--ease-standard),opacity_var(--duration-standard)_var(--ease-enter)_var(--menu-item-delay,0ms),translate_var(--duration-standard)_var(--ease-enter)_var(--menu-item-delay,0ms)] starting:opacity-0 starting:[translate:var(--menu-item-offset-x,0px)_var(--menu-item-offset-y,0px)] nth-2:[--menu-item-delay:35ms] nth-3:[--menu-item-delay:70ms] nth-4:[--menu-item-delay:105ms] nth-[n+5]:[--menu-item-delay:140ms] motion-reduce:transition-none data-highlighted:bg-surface-muted data-inset:pl-[38px] data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[svg:not([class*='text-'])]:text-text-secondary";
+/** Room at the end of checkbox and radio rows for their check, as in Arc's select options. */
+const menuSelectableItemClassName = "pr-[34px]";
+/** Position and color of the check of checkbox and radio rows. */
+const menuItemIndicatorClassName = "pointer-events-none absolute right-2.5 flex items-center justify-center text-foreground";
 function DropdownMenu(t0) {
 	const $ = _c(9);
 	let props;
@@ -95,40 +118,54 @@ function DropdownMenuTrigger(t0) {
 	}
 	return t1;
 }
-/** Sizes action menus by their content instead of narrowing them to an icon trigger. */
+/**
+* Arc's menu panel. It sizes action menus by their content, at least 12rem unless the viewport is narrower, instead
+* of narrowing them to an icon trigger.
+* @param props - Primitive properties. Arc's defaults: `align="start"`, a 6px `sideOffset`, a 12px
+*   `collisionPadding` and `loop`, so arrow keys wrap from the last item to the first.
+* @returns The portaled menu, animated in and out with its open state.
+*/
 function DropdownMenuContent(t0) {
-	const $ = _c(15);
+	const $ = _c(19);
 	let className;
 	let props;
 	let t1;
 	let t2;
+	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({className, align: t1, sideOffset: t2, ...props} = t0);
+		({className, align: t1, sideOffset: t2, collisionPadding: t3, loop: t4, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = props;
 		$[3] = t1;
 		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
 	} else {
 		className = $[1];
 		props = $[2];
 		t1 = $[3];
 		t2 = $[4];
+		t3 = $[5];
+		t4 = $[6];
 	}
 	const align = t1 === undefined ? "start" : t1;
-	const sideOffset = t2 === undefined ? 4 : t2;
-	const t3 = props.forceMount;
-	let t4;
-	if ($[5] !== className) {
-		t4 = cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=closed]:overflow-hidden relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
-		$[5] = className;
-		$[6] = t4;
+	const sideOffset = t2 === undefined ? DROPDOWN_MENU_SIDE_OFFSET_PX : t2;
+	const collisionPadding = t3 === undefined ? DROPDOWN_MENU_COLLISION_PADDING_PX : t3;
+	const loop = t4 === undefined ? true : t4;
+	const t5 = props.forceMount;
+	let t6;
+	if ($[7] !== className) {
+		t6 = cn(menuSurfaceClassName, "max-h-(--radix-dropdown-menu-content-available-height) min-w-[min(12rem,var(--radix-dropdown-menu-content-available-width))] max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin)", className);
+		$[7] = className;
+		$[8] = t6;
 	} else {
-		t4 = $[6];
+		t6 = $[8];
 	}
-	let t5;
-	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+	let t7;
+	if ($[9] !== align || $[10] !== collisionPadding || $[11] !== loop || $[12] !== props || $[13] !== sideOffset || $[14] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "surface",
 			children: /* @__PURE__ */ _jsx(GlideSlot, {
 				preset: "menu",
@@ -137,36 +174,40 @@ function DropdownMenuContent(t0) {
 					"data-slot": "dropdown-menu-content",
 					sideOffset,
 					align,
-					className: t4,
+					collisionPadding,
+					loop,
+					className: t6,
 					...props
 				})
 			})
 		});
-		$[7] = align;
-		$[8] = props;
-		$[9] = sideOffset;
-		$[10] = t4;
-		$[11] = t5;
+		$[9] = align;
+		$[10] = collisionPadding;
+		$[11] = loop;
+		$[12] = props;
+		$[13] = sideOffset;
+		$[14] = t6;
+		$[15] = t7;
 	} else {
-		t5 = $[11];
+		t7 = $[15];
 	}
-	let t6;
-	if ($[12] !== props.forceMount || $[13] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Portal, {
+	let t8;
+	if ($[16] !== props.forceMount || $[17] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Portal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "dropdown-menu",
-				forceMount: t3,
-				children: t5
+				forceMount: t5,
+				children: t7
 			})
 		});
-		$[12] = props.forceMount;
-		$[13] = t5;
-		$[14] = t6;
+		$[16] = props.forceMount;
+		$[17] = t7;
+		$[18] = t8;
 	} else {
-		t6 = $[14];
+		t8 = $[18];
 	}
-	return t6;
+	return t8;
 }
 function DropdownMenuGroup(t0) {
 	const $ = _c(4);
@@ -192,8 +233,9 @@ function DropdownMenuGroup(t0) {
 	return t1;
 }
 /**
-* Renders an action with compact spacing and preserved disabled/destructive states.
-* @param props - Primitive properties and optional consumer overrides.
+* Renders an action row. `destructive` draws Arc's danger tone: danger text and icon over a faint danger fill when
+* highlighted.
+* @param props - Primitive properties, `inset` to align with rows that carry an icon, and the `variant`.
 * @returns The styled primitive with its original interaction contract.
 */
 function DropdownMenuItem(t0) {
@@ -218,7 +260,7 @@ function DropdownMenuItem(t0) {
 	const variant = t1 === undefined ? "default" : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className);
+		t2 = cn("group/dropdown-menu-item", menuItemClassName, "data-[variant=destructive]:text-danger data-[variant=destructive]:*:[svg:not([class*='text-'])]:text-danger data-[variant=destructive]:data-highlighted:bg-[color-mix(in_oklab,var(--danger)_8%,var(--surface))]", className);
 		$[5] = className;
 		$[6] = t2;
 	} else {
@@ -244,8 +286,8 @@ function DropdownMenuItem(t0) {
 	return t3;
 }
 /**
-* Renders a compact selectable checkbox action.
-* @param props - Primitive properties and optional consumer overrides.
+* Renders a selectable checkbox action with its check at the end of the row.
+* @param props - Primitive properties and `inset` to align with rows that carry an icon.
 * @returns The styled primitive with its original interaction contract.
 */
 function DropdownMenuCheckboxItem(t0) {
@@ -272,7 +314,7 @@ function DropdownMenuCheckboxItem(t0) {
 	}
 	let t1;
 	if ($[6] !== className) {
-		t1 = cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn(menuItemClassName, menuSelectableItemClassName, className);
 		$[6] = className;
 		$[7] = t1;
 	} else {
@@ -281,11 +323,11 @@ function DropdownMenuCheckboxItem(t0) {
 	let t2;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ _jsx("span", {
-			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			className: menuItemIndicatorClassName,
 			"data-slot": "dropdown-menu-checkbox-item-indicator",
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
 				kind: "item-check",
-				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, {}) })
+				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { strokeWidth: 1.75 }) })
 			})
 		});
 		$[8] = t2;
@@ -337,8 +379,8 @@ function DropdownMenuRadioGroup(t0) {
 	return t1;
 }
 /**
-* Renders a compact mutually exclusive action.
-* @param props - Primitive properties and optional consumer overrides.
+* Renders a mutually exclusive action with its check at the end of the row.
+* @param props - Primitive properties and `inset` to align with rows that carry an icon.
 * @returns The styled primitive with its original interaction contract.
 */
 function DropdownMenuRadioItem(t0) {
@@ -362,7 +404,7 @@ function DropdownMenuRadioItem(t0) {
 	}
 	let t1;
 	if ($[5] !== className) {
-		t1 = cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn(menuItemClassName, menuSelectableItemClassName, className);
 		$[5] = className;
 		$[6] = t1;
 	} else {
@@ -371,11 +413,11 @@ function DropdownMenuRadioItem(t0) {
 	let t2;
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ _jsx("span", {
-			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			className: menuItemIndicatorClassName,
 			"data-slot": "dropdown-menu-radio-item-indicator",
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
 				kind: "item-check",
-				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, {}) })
+				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { strokeWidth: 1.75 }) })
 			})
 		});
 		$[7] = t2;
@@ -402,8 +444,8 @@ function DropdownMenuRadioItem(t0) {
 	return t3;
 }
 /**
-* Renders a compact menu group label.
-* @param props - Primitive properties and optional consumer overrides.
+* Renders a muted group label aligned with the item text.
+* @param props - Primitive properties and `inset` to align with rows that carry an icon.
 * @returns The styled primitive with its original interaction contract.
 */
 function DropdownMenuLabel(t0) {
@@ -424,7 +466,7 @@ function DropdownMenuLabel(t0) {
 	}
 	let t1;
 	if ($[4] !== className) {
-		t1 = cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className);
+		t1 = cn("px-[11px] py-1.5 text-xs font-medium text-text-muted data-inset:pl-[38px]", className);
 		$[4] = className;
 		$[5] = t1;
 	} else {
@@ -462,7 +504,7 @@ function DropdownMenuSeparator(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("-mx-1 my-1 h-px bg-border", className);
+		t1 = cn("-mx-1 my-1 h-px bg-border-subtle", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -498,7 +540,7 @@ function DropdownMenuShortcut(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("ml-auto text-xs text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className);
+		t1 = cn("ml-auto text-xs text-text-muted group-data-highlighted/dropdown-menu-item:text-text-secondary", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -561,8 +603,9 @@ function DropdownMenuSub(t0) {
 	return t2;
 }
 /**
-* Renders a compact trigger for a nested menu.
-* @param props - Primitive properties and optional consumer overrides.
+* Renders the row that opens a nested menu. It keeps the highlight fill while its submenu is open and nudges its
+* chevron toward it.
+* @param props - Primitive properties and `inset` to align with rows that carry an icon.
 * @returns The styled primitive with its original interaction contract.
 */
 function DropdownMenuSubTrigger(t0) {
@@ -586,7 +629,7 @@ function DropdownMenuSubTrigger(t0) {
 	}
 	let t1;
 	if ($[5] !== className) {
-		t1 = cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground data-open:*:data-[slot=dropdown-menu-sub-trigger-icon]:translate-x-0.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn(menuItemClassName, "data-[state=open]:bg-surface-muted data-open:*:data-[slot=dropdown-menu-sub-trigger-icon]:translate-x-0.5", className);
 		$[5] = className;
 		$[6] = t1;
 	} else {
@@ -596,7 +639,8 @@ function DropdownMenuSubTrigger(t0) {
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ _jsx(ChevronRightIcon, {
 			"data-slot": "dropdown-menu-sub-trigger-icon",
-			className: "ml-auto transition-transform duration-200 ease-out"
+			strokeWidth: 1.75,
+			className: "ml-auto text-text-muted transition-transform duration-200 ease-out motion-reduce:transition-none"
 		});
 		$[7] = t2;
 	} else {
@@ -622,65 +666,77 @@ function DropdownMenuSubTrigger(t0) {
 	return t3;
 }
 /**
-* Preserves readable submenu width with the shared translucent theme.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
+* Renders a nested menu on the same raised panel, at least 12rem wide.
+* @param props - Primitive properties. Arc's defaults: a 12px `collisionPadding` and `loop`.
+* @returns The submenu, animated in and out with its open state.
 */
 function DropdownMenuSubContent(t0) {
-	const $ = _c(11);
+	const $ = _c(15);
 	let className;
 	let props;
+	let t1;
+	let t2;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, collisionPadding: t1, loop: t2, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
 	} else {
 		className = $[1];
 		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
 	}
-	const t1 = props.forceMount;
-	let t2;
-	if ($[3] !== className) {
-		t2 = cn("z-50 min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
-		$[3] = className;
-		$[4] = t2;
+	const collisionPadding = t1 === undefined ? DROPDOWN_MENU_COLLISION_PADDING_PX : t1;
+	const loop = t2 === undefined ? true : t2;
+	const t3 = props.forceMount;
+	let t4;
+	if ($[5] !== className) {
+		t4 = cn(menuSurfaceClassName, "min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden", className);
+		$[5] = className;
+		$[6] = t4;
 	} else {
-		t2 = $[4];
+		t4 = $[6];
 	}
-	let t3;
-	if ($[5] !== props || $[6] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+	let t5;
+	if ($[7] !== collisionPadding || $[8] !== loop || $[9] !== props || $[10] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "surface",
 			children: /* @__PURE__ */ _jsx(GlideSlot, {
 				preset: "menu",
 				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.SubContent, {
 					forceMount: true,
 					"data-slot": "dropdown-menu-sub-content",
-					className: t2,
+					collisionPadding,
+					loop,
+					className: t4,
 					...props
 				})
 			})
 		});
-		$[5] = props;
-		$[6] = t2;
-		$[7] = t3;
+		$[7] = collisionPadding;
+		$[8] = loop;
+		$[9] = props;
+		$[10] = t4;
+		$[11] = t5;
 	} else {
-		t3 = $[7];
+		t5 = $[11];
 	}
-	let t4;
-	if ($[8] !== props.forceMount || $[9] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(MotionPresence, {
+	let t6;
+	if ($[12] !== props.forceMount || $[13] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(MotionPresence, {
 			scope: "dropdown-sub",
-			forceMount: t1,
-			children: t3
+			forceMount: t3,
+			children: t5
 		});
-		$[8] = props.forceMount;
-		$[9] = t3;
-		$[10] = t4;
+		$[12] = props.forceMount;
+		$[13] = t5;
+		$[14] = t6;
 	} else {
-		t4 = $[10];
+		t6 = $[14];
 	}
-	return t4;
+	return t6;
 }
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };

package/dist/components/hover-card.d.ts

@@ -1,6 +1,49 @@
+/**
+ * Arc's Hover Card (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a read-only preview of a person or
+ * link that opens after half a second of hover or on keyboard focus, grows from the trigger edge on a smooth spring
+ * and closes fast on leave. While a card is open, and briefly after it closes, moving to another trigger opens its
+ * card almost at once and only fades. It keeps the Radix composition and adds Arc's `HoverCardProfile` preset.
+ */
 import * as React from "react";
 import { HoverCard as HoverCardPrimitive } from "radix-ui";
-declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
+/**
+ * Owns the open state and timing of one hover card.
+ * @param props - Radix root properties. `openDelay` defaults to Arc's 500ms and `closeDelay` to 140ms; within the
+ *   skip window the card waits at most 80ms.
+ * @returns The hover card root.
+ */
+declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
 declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
-declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+/**
+ * Renders Arc's card: raised surface, hairline border, panel radius and floating shadow, 18.5rem wide at most.
+ * @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 8px and `collisionPadding`
+ *   to 12px.
+ * @returns The portaled card.
+ */
+declare function HoverCardContent({ className, align, sideOffset, collisionPadding, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
+/** One number of `HoverCardProfile`, such as followers or projects. */
+export interface HoverCardStat {
+    label: string;
+    value: string | number;
+}
+/** A person preview for `HoverCardContent`. */
+export interface HoverCardProfileProps {
+    name: string;
+    /** Role and team, such as "Diseñadora de producto, Pagos". */
+    role?: string;
+    /** A portrait URL, or your own image element such as an `Image` adapter. Initials show when it is missing. */
+    avatar?: string | React.ReactNode;
+    bio?: string;
+    stats?: HoverCardStat[];
+    /** A footer line, such as a location and local time. */
+    meta?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Arc's person preview: portrait, name, role, a short bio, a couple of numbers and a quiet footer line. Its rows
+ * settle in with a tiny stagger, and stay still when the user prefers reduced motion.
+ * @param props - The person's details.
+ * @returns The profile, meant as the child of `HoverCardContent`.
+ */
+declare function HoverCardProfile({ name, role, avatar, bio, stats, meta, className }: HoverCardProfileProps): React.JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardProfile };