beez-ui 2.7.0 → 3.0.0

package/dist/components/primitives/dropdown-menu.js

@@ -0,0 +1,557 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Internal primitive of Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Arc's raised
+* panel, item rows, danger tone, separators, placement defaults and staggered item entrance on its tokens, with
+* beez-ui's reveal from the trigger edge and the highlight that glides between items with the keyboard. Internal: the
+* Radix composition behind the public closed `DropdownMenu` and beez-ui's composite components; the package does not
+* export it.
+*/
+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 } 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).
+*/
+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]";
+/**
+* Arc's danger tone of a `destructive` row of any kind: danger text and icon over a faint danger fill when highlighted.
+*/
+const menuItemDestructiveClassName = "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))]";
+/** 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;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
+	let t1;
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
+		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Root, {
+			"data-slot": "dropdown-menu",
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
+		});
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "dropdown-menu",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
+}
+function DropdownMenuTrigger(t0) {
+	const $ = _c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Trigger, {
+			"data-slot": "dropdown-menu-trigger",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+/**
+* 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(23);
+	let className;
+	let onClick;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({className, align: t1, sideOffset: t2, collisionPadding: t3, loop: t4, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = onClick;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		className = $[1];
+		onClick = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+	}
+	const align = t1 === undefined ? "start" : t1;
+	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;
+	let t5;
+	if ($[8] !== onClick) {
+		t5 = (event) => {
+			onClick?.(event);
+			event.stopPropagation();
+		};
+		$[8] = onClick;
+		$[9] = t5;
+	} else {
+		t5 = $[9];
+	}
+	const stopClickAtPanel = t5;
+	const t6 = props.forceMount;
+	let t7;
+	if ($[10] !== className) {
+		t7 = 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);
+		$[10] = className;
+		$[11] = t7;
+	} else {
+		t7 = $[11];
+	}
+	let t8;
+	if ($[12] !== align || $[13] !== collisionPadding || $[14] !== loop || $[15] !== props || $[16] !== sideOffset || $[17] !== stopClickAtPanel || $[18] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
+			children: /* @__PURE__ */ _jsx(GlideSlot, {
+				preset: "menu",
+				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {
+					forceMount: true,
+					"data-slot": "dropdown-menu-content",
+					sideOffset,
+					align,
+					collisionPadding,
+					loop,
+					className: t7,
+					...props,
+					onClick: stopClickAtPanel
+				})
+			})
+		});
+		$[12] = align;
+		$[13] = collisionPadding;
+		$[14] = loop;
+		$[15] = props;
+		$[16] = sideOffset;
+		$[17] = stopClickAtPanel;
+		$[18] = t7;
+		$[19] = t8;
+	} else {
+		t8 = $[19];
+	}
+	let t9;
+	if ($[20] !== props.forceMount || $[21] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Portal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "dropdown-menu",
+				forceMount: t6,
+				children: t8
+			})
+		});
+		$[20] = props.forceMount;
+		$[21] = t8;
+		$[22] = t9;
+	} else {
+		t9 = $[22];
+	}
+	return t9;
+}
+/**
+* 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) {
+	const $ = _c(12);
+	let className;
+	let inset;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, inset, variant: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = inset;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		inset = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const variant = t1 === undefined ? "default" : t1;
+	let t2;
+	if ($[5] !== className) {
+		t2 = cn("group/dropdown-menu-item", menuItemClassName, menuItemDestructiveClassName, className);
+		$[5] = className;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	let t3;
+	if ($[7] !== inset || $[8] !== props || $[9] !== t2 || $[10] !== variant) {
+		t3 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Item, {
+			"data-slot": "dropdown-menu-item",
+			"data-inset": inset,
+			"data-variant": variant,
+			className: t2,
+			...props
+		});
+		$[7] = inset;
+		$[8] = props;
+		$[9] = t2;
+		$[10] = variant;
+		$[11] = t3;
+	} else {
+		t3 = $[11];
+	}
+	return t3;
+}
+/**
+* Renders a selectable checkbox action with its check at the end of the row. `destructive` draws Arc's danger tone.
+* @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 DropdownMenuCheckboxItem(t0) {
+	const $ = _c(17);
+	let checked;
+	let children;
+	let className;
+	let inset;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, children, checked, inset, variant: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = checked;
+		$[2] = children;
+		$[3] = className;
+		$[4] = inset;
+		$[5] = props;
+		$[6] = t1;
+	} else {
+		checked = $[1];
+		children = $[2];
+		className = $[3];
+		inset = $[4];
+		props = $[5];
+		t1 = $[6];
+	}
+	const variant = t1 === undefined ? "default" : t1;
+	let t2;
+	if ($[7] !== className) {
+		t2 = cn(menuItemClassName, menuSelectableItemClassName, menuItemDestructiveClassName, className);
+		$[7] = className;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ _jsx("span", {
+			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, { strokeWidth: 1.75 }) })
+			})
+		});
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	let t4;
+	if ($[10] !== checked || $[11] !== children || $[12] !== inset || $[13] !== props || $[14] !== t2 || $[15] !== variant) {
+		t4 = /* @__PURE__ */ _jsxs(DropdownMenuPrimitive.CheckboxItem, {
+			"data-slot": "dropdown-menu-checkbox-item",
+			"data-inset": inset,
+			"data-variant": variant,
+			className: t2,
+			checked,
+			...props,
+			children: [t3, children]
+		});
+		$[10] = checked;
+		$[11] = children;
+		$[12] = inset;
+		$[13] = props;
+		$[14] = t2;
+		$[15] = variant;
+		$[16] = t4;
+	} else {
+		t4 = $[16];
+	}
+	return t4;
+}
+function DropdownMenuRadioGroup(t0) {
+	const $ = _c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.RadioGroup, {
+			"data-slot": "dropdown-menu-radio-group",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+/**
+* Renders a mutually exclusive action with its check at the end of the row. `destructive` draws Arc's danger tone.
+* @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 DropdownMenuRadioItem(t0) {
+	const $ = _c(15);
+	let children;
+	let className;
+	let inset;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, children, inset, variant: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = inset;
+		$[4] = props;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		inset = $[3];
+		props = $[4];
+		t1 = $[5];
+	}
+	const variant = t1 === undefined ? "default" : t1;
+	let t2;
+	if ($[6] !== className) {
+		t2 = cn(menuItemClassName, menuSelectableItemClassName, menuItemDestructiveClassName, className);
+		$[6] = className;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	let t3;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ _jsx("span", {
+			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, { strokeWidth: 1.75 }) })
+			})
+		});
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	let t4;
+	if ($[9] !== children || $[10] !== inset || $[11] !== props || $[12] !== t2 || $[13] !== variant) {
+		t4 = /* @__PURE__ */ _jsxs(DropdownMenuPrimitive.RadioItem, {
+			"data-slot": "dropdown-menu-radio-item",
+			"data-inset": inset,
+			"data-variant": variant,
+			className: t2,
+			...props,
+			children: [t3, children]
+		});
+		$[9] = children;
+		$[10] = inset;
+		$[11] = props;
+		$[12] = t2;
+		$[13] = variant;
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	return t4;
+}
+/**
+* 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) {
+	const $ = _c(10);
+	let className;
+	let inset;
+	let props;
+	if ($[0] !== t0) {
+		({className, inset, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = inset;
+		$[3] = props;
+	} else {
+		className = $[1];
+		inset = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== 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 {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== inset || $[7] !== props || $[8] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Label, {
+			"data-slot": "dropdown-menu-label",
+			"data-inset": inset,
+			className: t1,
+			...props
+		});
+		$[6] = inset;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t2 = $[9];
+	}
+	return t2;
+}
+function DropdownMenuSeparator(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("-mx-1 my-1 h-px bg-border-subtle", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Separator, {
+			"data-slot": "dropdown-menu-separator",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* Renders trailing content at the end of a row, such as a shortcut or a count, muted until the row is highlighted.
+* @param props - Span properties.
+* @returns The trailing slot.
+*/
+function DropdownMenuShortcut(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("ml-auto flex items-center text-xs text-text-muted group-data-highlighted/dropdown-menu-item:text-text-secondary", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "dropdown-menu-shortcut",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut };

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

@@ -0,0 +1,50 @@
+/**
+ * Internal primitive of 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. Internal: the Radix composition behind the public
+ * closed `HoverCard`, plus Arc's `HoverCardProfile` preset, which the public module re-exports.
+ */
+import * as React from "react";
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
+/**
+ * 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;
+/**
+ * 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 };