beez-ui 2.7.1 → 3.0.0

package/dist/components/primitives/hover-card.js

@@ -0,0 +1,507 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* 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";
+import { motion } from "motion/react";
+import { usePrefersReducedMotion } from "../../hooks/use-prefers-reduced-motion.js";
+import { ArcFloatingSlot } from "../../motion/arc-floating-slot.js";
+import { ARC_DURATION, ARC_EASE } from "../../motion/arc-tokens.js";
+import { createOverlayWarmth, useOpenedWhileWarm } from "../../motion/overlay-warmth.js";
+import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../../motion/presence.js";
+import { cn } from "../../lib/utils.js";
+import { HOVER_CARD_CLOSE_DELAY_MS, HOVER_CARD_COLLISION_PADDING_PX, HOVER_CARD_INSTANT_MOTION, HOVER_CARD_MOTION, HOVER_CARD_OPEN_DELAY_MS, HOVER_CARD_PROFILE_INITIALS_LENGTH, HOVER_CARD_PROFILE_PORTRAIT_SIZE_PX, HOVER_CARD_PROFILE_ROW_ORDER, HOVER_CARD_PROFILE_SETTLE_DELAY_S, HOVER_CARD_PROFILE_SETTLE_DISTANCE_PX, HOVER_CARD_PROFILE_STAGGER_S, HOVER_CARD_SIDE_OFFSET_PX, HOVER_CARD_SKIP_WINDOW_MS, HOVER_CARD_WARM_OPEN_DELAY_MS } from "../../constants/hover-card.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Every hover card on the page shares one skip window. */
+const hoverCardWarmth = createOverlayWarmth(HOVER_CARD_SKIP_WINDOW_MS);
+/** Whether the page was already warm when the surrounding layer opened, so its entrance only fades. */
+const HoverCardOpenedWhileWarmContext = React.createContext(false);
+/**
+* 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.
+*/
+function HoverCard(t0) {
+	const $ = _c(19);
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({openDelay: t1, closeDelay: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		props = $[1];
+		t1 = $[2];
+		t2 = $[3];
+	}
+	const openDelay = t1 === undefined ? HOVER_CARD_OPEN_DELAY_MS : t1;
+	const closeDelay = t2 === undefined ? HOVER_CARD_CLOSE_DELAY_MS : t2;
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
+	const isWarm = React.useSyncExternalStore(hoverCardWarmth.subscribe, hoverCardWarmth.isWarm, hoverCardWarmth.isWarmOnServer);
+	const openedWhileWarm = useOpenedWhileWarm(motionOpen, isWarm);
+	let t3;
+	let t4;
+	if ($[4] !== motionOpen) {
+		t3 = () => {
+			if (!motionOpen) {
+				return;
+			}
+			return hoverCardWarmth.open();
+		};
+		t4 = [motionOpen];
+		$[4] = motionOpen;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	React.useEffect(t3, t4);
+	const t5 = isWarm ? Math.min(openDelay, HOVER_CARD_WARM_OPEN_DELAY_MS) : openDelay;
+	let t6;
+	if ($[7] !== closeDelay || $[8] !== motionOpen || $[9] !== props || $[10] !== setMotionOpen || $[11] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Root, {
+			"data-slot": "hover-card",
+			...props,
+			openDelay: t5,
+			closeDelay,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
+		});
+		$[7] = closeDelay;
+		$[8] = motionOpen;
+		$[9] = props;
+		$[10] = setMotionOpen;
+		$[11] = t5;
+		$[12] = t6;
+	} else {
+		t6 = $[12];
+	}
+	let t7;
+	if ($[13] !== openedWhileWarm || $[14] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(HoverCardOpenedWhileWarmContext.Provider, {
+			value: openedWhileWarm,
+			children: t6
+		});
+		$[13] = openedWhileWarm;
+		$[14] = t6;
+		$[15] = t7;
+	} else {
+		t7 = $[15];
+	}
+	let t8;
+	if ($[16] !== motionOpen || $[17] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "hover-card",
+			open: motionOpen,
+			children: t7
+		});
+		$[16] = motionOpen;
+		$[17] = t7;
+		$[18] = t8;
+	} else {
+		t8 = $[18];
+	}
+	return t8;
+}
+function HoverCardTrigger(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(HoverCardPrimitive.Trigger, {
+			"data-slot": "hover-card-trigger",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+/**
+* 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.
+*/
+function HoverCardContent(t0) {
+	const $ = _c(22);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({className, align: t1, sideOffset: t2, collisionPadding: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const align = t1 === undefined ? "center" : t1;
+	const sideOffset = t2 === undefined ? HOVER_CARD_SIDE_OFFSET_PX : t2;
+	const collisionPadding = t3 === undefined ? HOVER_CARD_COLLISION_PADDING_PX : t3;
+	const openedWhileWarm = React.useContext(HoverCardOpenedWhileWarmContext);
+	const t4 = props.forceMount;
+	let t5;
+	if ($[6] !== openedWhileWarm) {
+		t5 = () => openedWhileWarm ? HOVER_CARD_INSTANT_MOTION : HOVER_CARD_MOTION;
+		$[6] = openedWhileWarm;
+		$[7] = t5;
+	} else {
+		t5 = $[7];
+	}
+	let t6;
+	if ($[8] !== className) {
+		t6 = cn("z-50 box-border w-74 max-w-[min(18.5rem,var(--radix-hover-card-content-available-width,calc(100vw-24px)))] origin-(--radix-hover-card-content-transform-origin) rounded-(--radius-panel) border border-border bg-surface-raised p-(--space-4) font-sans text-sm leading-(--leading-body) tracking-(--tracking-body) text-foreground shadow-(--shadow-floating) outline-hidden", className);
+		$[8] = className;
+		$[9] = t6;
+	} else {
+		t6 = $[9];
+	}
+	let t7;
+	if ($[10] !== align || $[11] !== collisionPadding || $[12] !== props || $[13] !== sideOffset || $[14] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Content, {
+			forceMount: true,
+			"data-slot": "hover-card-content",
+			align,
+			sideOffset,
+			collisionPadding,
+			className: t6,
+			...props
+		});
+		$[10] = align;
+		$[11] = collisionPadding;
+		$[12] = props;
+		$[13] = sideOffset;
+		$[14] = t6;
+		$[15] = t7;
+	} else {
+		t7 = $[15];
+	}
+	let t8;
+	if ($[16] !== t5 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(ArcFloatingSlot, {
+			motion: t5,
+			children: t7
+		});
+		$[16] = t5;
+		$[17] = t7;
+		$[18] = t8;
+	} else {
+		t8 = $[18];
+	}
+	let t9;
+	if ($[19] !== props.forceMount || $[20] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Portal, {
+			"data-slot": "hover-card-portal",
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "hover-card",
+				forceMount: t4,
+				children: t8
+			})
+		});
+		$[19] = props.forceMount;
+		$[20] = t8;
+		$[21] = t9;
+	} else {
+		t9 = $[21];
+	}
+	return t9;
+}
+/**
+* Shows a portrait that fades in from a soft blur while it downloads, and at once when it is cached.
+* @param props.source - Portrait URL.
+* @returns The decorative portrait image.
+*/
+function HoverCardPortrait(t0) {
+	const $ = _c(7);
+	const { source } = t0;
+	const [isLoading, setIsLoading] = React.useState(false);
+	const imageRef = React.useRef(null);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			const image = imageRef.current;
+			setIsLoading(Boolean(image && !image.complete));
+		};
+		$[0] = t1;
+	} else {
+		t1 = $[0];
+	}
+	let t2;
+	if ($[1] !== source) {
+		t2 = [source];
+		$[1] = source;
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	React.useLayoutEffect(t1, t2);
+	const t3 = isLoading || undefined;
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => setIsLoading(false);
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	let t5;
+	if ($[4] !== source || $[5] !== t3) {
+		t5 = /* @__PURE__ */ _jsx("img", {
+			ref: imageRef,
+			src: source,
+			alt: "",
+			width: HOVER_CARD_PROFILE_PORTRAIT_SIZE_PX,
+			height: HOVER_CARD_PROFILE_PORTRAIT_SIZE_PX,
+			decoding: "async",
+			"data-loading": t3,
+			onLoad: t4,
+			className: "block size-full object-cover transition-[opacity,filter] duration-(--duration-standard) ease-(--ease-enter) data-loading:opacity-0 data-loading:blur-xs data-loading:transition-none motion-reduce:transition-none motion-reduce:data-loading:blur-none"
+		});
+		$[4] = source;
+		$[5] = t3;
+		$[6] = t5;
+	} else {
+		t5 = $[6];
+	}
+	return t5;
+}
+/**
+* Builds the initials shown when the profile has no portrait.
+* @param name - The person's name.
+* @returns Up to two uppercase initials.
+*/
+function initialsOf(name) {
+	return name.trim().split(/\s+/).slice(0, HOVER_CARD_PROFILE_INITIALS_LENGTH).map((word) => word[0]?.toUpperCase() ?? "").join("");
+}
+/**
+* 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`.
+*/
+function HoverCardProfile(t0) {
+	const $ = _c(39);
+	const { name, role, avatar, bio, stats: t1, meta, className } = t0;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = t1 === undefined ? [] : t1;
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const stats = t2;
+	const reduceMotion = usePrefersReducedMotion();
+	let t3;
+	if ($[2] !== reduceMotion) {
+		t3 = (order) => reduceMotion ? {} : {
+			initial: {
+				opacity: 0,
+				y: HOVER_CARD_PROFILE_SETTLE_DISTANCE_PX
+			},
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			transition: {
+				duration: ARC_DURATION.standard,
+				ease: [...ARC_EASE.enter],
+				delay: HOVER_CARD_PROFILE_SETTLE_DELAY_S + order * HOVER_CARD_PROFILE_STAGGER_S
+			}
+		};
+		$[2] = reduceMotion;
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	const settle = t3;
+	let t4;
+	if ($[4] !== className) {
+		t4 = cn("grid gap-(--space-3)", className);
+		$[4] = className;
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== settle) {
+		t5 = settle(HOVER_CARD_PROFILE_ROW_ORDER.head);
+		$[6] = settle;
+		$[7] = t5;
+	} else {
+		t5 = $[7];
+	}
+	let t6;
+	if ($[8] !== avatar || $[9] !== name) {
+		t6 = typeof avatar === "string" ? /* @__PURE__ */ _jsx(HoverCardPortrait, { source: avatar }) : avatar ?? initialsOf(name);
+		$[8] = avatar;
+		$[9] = name;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== t6) {
+		t7 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "relative grid size-12 flex-none place-items-center overflow-hidden rounded-full border border-border bg-surface-muted text-sm font-medium text-foreground",
+			children: t6
+		});
+		$[11] = t6;
+		$[12] = t7;
+	} else {
+		t7 = $[12];
+	}
+	let t8;
+	if ($[13] !== name) {
+		t8 = /* @__PURE__ */ _jsx("span", {
+			className: "truncate text-base leading-(--leading-body) font-medium text-foreground",
+			children: name
+		});
+		$[13] = name;
+		$[14] = t8;
+	} else {
+		t8 = $[14];
+	}
+	let t9;
+	if ($[15] !== role) {
+		t9 = role ? /* @__PURE__ */ _jsx("span", {
+			className: "truncate text-sm leading-(--leading-body) text-text-secondary",
+			children: role
+		}) : null;
+		$[15] = role;
+		$[16] = t9;
+	} else {
+		t9 = $[16];
+	}
+	let t10;
+	if ($[17] !== t8 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ _jsxs("span", {
+			className: "grid min-w-0",
+			children: [t8, t9]
+		});
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = t10;
+	} else {
+		t10 = $[19];
+	}
+	let t11;
+	if ($[20] !== t10 || $[21] !== t5 || $[22] !== t7) {
+		t11 = /* @__PURE__ */ _jsxs(motion.div, {
+			className: "flex min-w-0 items-center gap-(--space-3)",
+			...t5,
+			children: [t7, t10]
+		});
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t7;
+		$[23] = t11;
+	} else {
+		t11 = $[23];
+	}
+	let t12;
+	if ($[24] !== bio || $[25] !== settle) {
+		t12 = bio ? /* @__PURE__ */ _jsx(motion.p, {
+			className: "m-0 text-sm leading-(--leading-body) text-text-secondary",
+			...settle(HOVER_CARD_PROFILE_ROW_ORDER.bio),
+			children: bio
+		}) : null;
+		$[24] = bio;
+		$[25] = settle;
+		$[26] = t12;
+	} else {
+		t12 = $[26];
+	}
+	let t13;
+	if ($[27] !== settle || $[28] !== stats) {
+		t13 = stats.length > 0 ? /* @__PURE__ */ _jsx(motion.dl, {
+			className: "m-0 flex flex-wrap gap-x-(--space-6) gap-y-(--space-2) border-t border-border-subtle pt-(--space-3)",
+			...settle(HOVER_CARD_PROFILE_ROW_ORDER.stats),
+			children: stats.map(_temp)
+		}) : null;
+		$[27] = settle;
+		$[28] = stats;
+		$[29] = t13;
+	} else {
+		t13 = $[29];
+	}
+	let t14;
+	if ($[30] !== meta || $[31] !== settle) {
+		t14 = meta ? /* @__PURE__ */ _jsx(motion.div, {
+			className: "flex items-center gap-1.5 text-xs leading-(--leading-body) text-text-muted [&_svg]:flex-none",
+			...settle(HOVER_CARD_PROFILE_ROW_ORDER.meta),
+			children: meta
+		}) : null;
+		$[30] = meta;
+		$[31] = settle;
+		$[32] = t14;
+	} else {
+		t14 = $[32];
+	}
+	let t15;
+	if ($[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t4) {
+		t15 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "hover-card-profile",
+			className: t4,
+			children: [
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[33] = t11;
+		$[34] = t12;
+		$[35] = t13;
+		$[36] = t14;
+		$[37] = t4;
+		$[38] = t15;
+	} else {
+		t15 = $[38];
+	}
+	return t15;
+}
+function _temp(stat) {
+	return /* @__PURE__ */ _jsxs("div", {
+		className: "flex flex-col-reverse",
+		children: [/* @__PURE__ */ _jsx("dt", {
+			className: "text-xs leading-(--leading-body) text-text-muted",
+			children: stat.label
+		}), /* @__PURE__ */ _jsx("dd", {
+			className: "m-0 text-base leading-(--leading-body) font-medium text-foreground tabular-nums",
+			children: stat.value
+		})]
+	}, stat.label);
+}
+export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardProfile };

package/dist/components/primitives/pagination.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Internal composition behind Arc's Pagination (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): compact
+ * page controls on Arc's tokens with tabular numbers, a current-page mark that glides to the newly selected page with
+ * Arc's morph spring, hover only on fine pointers and arrows that press in. Each control is either a link rendered
+ * through the provider's `Link` adapter (Next.js, TanStack Router or a native anchor) or a button. Not exported from
+ * the package: the public `Pagination` in `../pagination.tsx` builds Arc's API on these parts.
+ */
+import type { ComponentProps, MouseEvent, ReactNode } from "react";
+import { type LinkProps } from "../link.js";
+/**
+ * Landmark that holds the page controls.
+ * @param props - Native `nav` attributes; the caller names it with `aria-label`.
+ * @returns The navigation landmark.
+ */
+declare function PaginationRoot({ className, ...props }: ComponentProps<"nav">): import("react").JSX.Element;
+/** Lists page controls; the current page's mark glides to the newly selected page. */
+declare function PaginationContent({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+declare function PaginationItem({ ...props }: ComponentProps<"li">): import("react").JSX.Element;
+/** Size of a control: a square page number or a padded arrow with a label. */
+type PaginationControlSize = "page" | "step";
+/** State shared by page links and page buttons. */
+type PaginationControlState = {
+    /** Marks the current page with `aria-current="page"`. */
+    isActive?: boolean;
+    /** Keeps the control visible and focusable but never acting, with `aria-disabled`. */
+    disabled?: boolean;
+    size?: PaginationControlSize;
+};
+/** Props of a page link: the provider's `Link` props plus the control state. */
+type PaginationLinkProps = PaginationControlState & LinkProps;
+/**
+ * One page, rendered through the provider's `Link` adapter or the `component` passed to it. Disabled, it never
+ * navigates, whether clicked or activated with Enter, and `onClick` is not called.
+ * @param props - Control state and link props.
+ * @returns The page link.
+ */
+declare function PaginationLink({ className, isActive, disabled, size, onClick, ...props }: PaginationLinkProps): import("react").JSX.Element;
+/** Props of a page button: native button props plus the control state. */
+type PaginationButtonProps = PaginationControlState & Omit<ComponentProps<"button">, "disabled">;
+/**
+ * One page as a button, for pagination kept in state. Disabled, it stays focusable and `onClick` is not called.
+ * @param props - Control state and button props.
+ * @returns The page button.
+ */
+declare function PaginationButton({ className, isActive, disabled, size, onClick, type, ...props }: PaginationButtonProps): import("react").JSX.Element;
+/** Props of a previous or next arrow. */
+type PaginationStepProps = {
+    direction: "previous" | "next";
+    /** Visible label, hidden on small screens. */
+    text: ReactNode;
+    /** Accessible name of the arrow. */
+    label: string;
+    /** Renders a link to this address; without it the arrow is a button. */
+    href?: string;
+    disabled?: boolean;
+    /** Called with the click, so the consumer can cancel a link's navigation. */
+    onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+};
+/**
+ * A previous or next arrow: Arc presses it in, while page numbers stay still and let the mark travel.
+ * @param props - Direction, copy, destination and state.
+ * @returns The arrow link or button.
+ */
+declare function PaginationStep({ direction, text, label, href, disabled, onClick }: PaginationStepProps): import("react").JSX.Element;
+export { PaginationButton, PaginationContent, PaginationItem, PaginationLink, PaginationRoot, PaginationStep };