beez-ui 2.5.0 → 2.6.1

package/dist/components/alert.js

@@ -1,60 +1,381 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import * as React from "react";
+/**
+* Arc's Alert (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a persistent message that helps people
+* recover or continue, on Arc's surface with a resting shadow. A `tone` tints and picks its icon, which morphs in
+* place when the tone changes; `onDismiss` adds a dismiss button and `open` collapses the alert's height while it
+* fades, so the content below closes the gap. The compound title, description and action parts are kept.
+*/
+import { useRef, useState } from "react";
 import { cva } from "class-variance-authority";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { Check, CircleX, Info, TriangleAlert, X } from "lucide-react";
+import { ALERT_DISMISS_LABEL, ALERT_TONE_ROLE } from "../constants/alert.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
-	variants: { variant: {
-		default: "bg-card text-card-foreground",
-		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
-	} },
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+import { ARC_ICON_ENTER, ARC_ICON_EXIT, ARC_ICON_TRANSITION, ARC_REDUCED_EXIT, ARC_REDUCED_TRANSITION, ARC_SWAP_EXIT_TRANSITION, ARC_SWAP_REST } from "../motion/arc-swap.js";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** The icon each tone shows unless `icon` replaces it. */
+const TONE_ICON = {
+	info: Info,
+	success: Check,
+	warning: TriangleAlert,
+	danger: CircleX
+};
+/**
+* Arc's alert recipe. The icon column (a direct svg or the tone icon) spans the title and description rows, and
+* `--alert-color` tints it by tone.
+*/
+const alertVariants = cva("group/alert relative grid w-full items-start gap-x-(--space-3) gap-y-(--space-1) rounded-(--radius-control) border border-border bg-surface p-(--space-4) text-left text-sm text-foreground shadow-(--shadow-resting) [--alert-color:currentColor] has-[>svg]:grid-cols-[auto_1fr] has-data-[slot=alert-icon]:grid-cols-[auto_1fr] has-data-[slot=alert-action]:pr-18 has-data-[slot=alert-dismiss]:pr-12 has-data-[slot=alert-action]:has-data-[slot=alert-dismiss]:pr-36 *:[svg]:row-span-2 *:[svg]:mt-px *:[svg]:text-(--alert-color) *:[svg:not([class*='size-'])]:size-[18px]", {
+	variants: {
+		variant: {
+			default: "",
+			destructive: "[--alert-color:var(--danger)] *:data-[slot=alert-title]:text-danger"
+		},
+		tone: {
+			info: "[--alert-color:var(--accent)]",
+			success: "[--alert-color:var(--success)]",
+			warning: "[--alert-color:var(--warning)]",
+			danger: "[--alert-color:var(--danger)]"
+		}
+	},
 	defaultVariants: { variant: "default" }
 });
-function Alert(t0) {
-	const $ = _c(10);
+const reducedEnter = { opacity: 0 };
+const presenceTransition = {
+	height: ARC_SPRING_SMOOTH,
+	opacity: {
+		duration: ARC_DURATION.standard,
+		ease: [...ARC_EASE.enter]
+	}
+};
+/** The alert itself collapses, so its padding, border and margins close along with the height. */
+const collapsedBox = {
+	height: 0,
+	paddingTop: 0,
+	paddingBottom: 0,
+	borderTopWidth: 0,
+	borderBottomWidth: 0,
+	marginTop: 0,
+	marginBottom: 0
+};
+const presenceExit = {
+	...collapsedBox,
+	opacity: 0,
+	transition: {
+		default: ARC_SPRING_SMOOTH,
+		opacity: ARC_SWAP_EXIT_TRANSITION
+	}
+};
+const reducedPresenceExit = {
+	...collapsedBox,
+	opacity: 0,
+	transition: { duration: 0 }
+};
+/** Entrance target; once it settles, the alert hands height and opacity back to the consumer's classes and style. */
+const presenceEnter = {
+	height: "auto",
+	opacity: 1
+};
+/**
+* Converts a consumer style value into the inline string React would write.
+* @param value - The consumer's style value, if any.
+* @param unit - Unit appended to numbers, as React does for lengths.
+* @returns The inline value, or an empty string to fall back to the stylesheet.
+*/
+function toInlineStyleValue(value, unit = "") {
+	if (value === undefined) return "";
+	return typeof value === "number" ? `${value}${unit}` : value;
+}
+/** Outgoing icons are hidden from assistive technology while they fade. */
+function AlertIconSwap(props) {
+	const $ = _c(3);
+	const isPresent = useIsPresent();
+	const t0 = isPresent ? props["aria-hidden"] : true;
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = /* @__PURE__ */ _jsx(motion.span, {
+			...props,
+			"aria-hidden": t0
+		});
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	return t1;
+}
+/** The tone icon column: a new tone morphs its icon in place. */
+function AlertIcon(t0) {
+	const $ = _c(6);
+	const { icon, iconKey, reduceMotion } = t0;
+	const t1 = reduceMotion ? reducedEnter : ARC_ICON_ENTER;
+	const t2 = reduceMotion ? ARC_REDUCED_EXIT : ARC_ICON_EXIT;
+	const t3 = reduceMotion ? ARC_REDUCED_TRANSITION : ARC_ICON_TRANSITION;
+	let t4;
+	if ($[0] !== icon || $[1] !== iconKey || $[2] !== t1 || $[3] !== t2 || $[4] !== t3) {
+		t4 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "alert-icon",
+			"aria-hidden": "true",
+			className: "relative row-span-2 mt-px grid size-[18px] flex-none place-items-center text-(--alert-color) [&_svg]:block [&_svg:not([class*='size-'])]:size-[18px]",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(AlertIconSwap, {
+					className: "relative grid place-items-center",
+					initial: t1,
+					animate: ARC_SWAP_REST,
+					exit: t2,
+					transition: t3,
+					children: icon
+				}, iconKey)
+			})
+		});
+		$[0] = icon;
+		$[1] = iconKey;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	return t4;
+}
+/** The alert surface itself. */
+function AlertBox(t0) {
+	const $ = _c(44);
+	let children;
 	let className;
+	let icon;
+	let onDismiss;
+	let presence;
 	let props;
+	let reduceMotion;
+	let t1;
+	let tone;
 	let variant;
 	if ($[0] !== t0) {
-		({className, variant, ...props} = t0);
+		({className, variant, tone, icon, onDismiss, dismissLabel: t1, reduceMotion, presence, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = variant;
+		$[1] = children;
+		$[2] = className;
+		$[3] = icon;
+		$[4] = onDismiss;
+		$[5] = presence;
+		$[6] = props;
+		$[7] = reduceMotion;
+		$[8] = t1;
+		$[9] = tone;
+		$[10] = variant;
 	} else {
-		className = $[1];
-		props = $[2];
-		variant = $[3];
+		children = $[1];
+		className = $[2];
+		icon = $[3];
+		onDismiss = $[4];
+		presence = $[5];
+		props = $[6];
+		reduceMotion = $[7];
+		t1 = $[8];
+		tone = $[9];
+		variant = $[10];
 	}
-	let t1;
-	if ($[4] !== className || $[5] !== variant) {
-		t1 = cn(alertVariants({ variant }), className);
-		$[4] = className;
-		$[5] = variant;
-		$[6] = t1;
+	const dismissLabel = t1 === undefined ? ALERT_DISMISS_LABEL : t1;
+	const isPresent = useIsPresent();
+	const ToneIcon = tone ? TONE_ICON[tone] : null;
+	let t2;
+	if ($[11] !== ToneIcon || $[12] !== icon) {
+		t2 = icon === false ? null : icon ?? (ToneIcon ? /* @__PURE__ */ _jsx(ToneIcon, { "aria-hidden": "true" }) : null);
+		$[11] = ToneIcon;
+		$[12] = icon;
+		$[13] = t2;
 	} else {
-		t1 = $[6];
+		t2 = $[13];
 	}
-	let t2;
-	if ($[7] !== props || $[8] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+	const resolvedIcon = t2;
+	const t3 = tone ? ALERT_TONE_ROLE[tone] : "alert";
+	let t4;
+	if ($[14] !== className || $[15] !== tone || $[16] !== variant) {
+		t4 = cn(alertVariants({
+			variant,
+			tone
+		}), className);
+		$[14] = className;
+		$[15] = tone;
+		$[16] = variant;
+		$[17] = t4;
+	} else {
+		t4 = $[17];
+	}
+	let t5;
+	if ($[18] !== props || $[19] !== t3 || $[20] !== t4 || $[21] !== tone) {
+		t5 = {
+			"data-slot": "alert",
+			"data-tone": tone,
+			role: t3,
+			className: t4,
+			...props
+		};
+		$[18] = props;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = tone;
+		$[22] = t5;
+	} else {
+		t5 = $[22];
+	}
+	const rootProps = t5;
+	let t6;
+	if ($[23] !== icon || $[24] !== reduceMotion || $[25] !== resolvedIcon || $[26] !== tone) {
+		t6 = resolvedIcon ? /* @__PURE__ */ _jsx(AlertIcon, {
+			icon: resolvedIcon,
+			iconKey: icon ? "custom" : tone ?? "custom",
+			reduceMotion
+		}) : null;
+		$[23] = icon;
+		$[24] = reduceMotion;
+		$[25] = resolvedIcon;
+		$[26] = tone;
+		$[27] = t6;
+	} else {
+		t6 = $[27];
+	}
+	let t7;
+	if ($[28] !== dismissLabel || $[29] !== onDismiss) {
+		t7 = onDismiss ? /* @__PURE__ */ _jsx("button", {
+			type: "button",
+			"data-slot": "alert-dismiss",
+			"aria-label": dismissLabel,
+			onClick: onDismiss,
+			className: "absolute top-(--space-3) right-(--space-3) grid size-7 cursor-pointer place-items-center rounded-(--radius-pill) border-0 bg-transparent text-text-muted [-webkit-tap-highlight-color:transparent] transition-[scale,background-color,color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted hover-fine:text-foreground active:scale-[.96] motion-reduce:transition-none motion-reduce:active:scale-100",
+			children: /* @__PURE__ */ _jsx(X, {
+				className: "size-4",
+				strokeWidth: 1.75,
+				"aria-hidden": "true"
+			})
+		}) : null;
+		$[28] = dismissLabel;
+		$[29] = onDismiss;
+		$[30] = t7;
+	} else {
+		t7 = $[30];
+	}
+	let t8;
+	if ($[31] !== children || $[32] !== t6 || $[33] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(_Fragment, { children: [
+			t6,
+			children,
+			t7
+		] });
+		$[31] = children;
+		$[32] = t6;
+		$[33] = t7;
+		$[34] = t8;
+	} else {
+		t8 = $[34];
+	}
+	const content = t8;
+	if (presence) {
+		const t9 = rootProps;
+		const t10 = isPresent ? rootProps["aria-hidden"] : true;
+		const t11 = !isPresent || rootProps.inert;
+		let t12;
+		if ($[35] !== content || $[36] !== presence || $[37] !== t10 || $[38] !== t11 || $[39] !== t9) {
+			t12 = /* @__PURE__ */ _jsx(motion.div, {
+				...t9,
+				...presence,
+				"aria-hidden": t10,
+				inert: t11,
+				children: content
+			});
+			$[35] = content;
+			$[36] = presence;
+			$[37] = t10;
+			$[38] = t11;
+			$[39] = t9;
+			$[40] = t12;
+		} else {
+			t12 = $[40];
+		}
+		return t12;
+	}
+	let t9;
+	if ($[41] !== content || $[42] !== rootProps) {
+		t9 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "message",
 			children: /* @__PURE__ */ _jsx("div", {
-				"data-slot": "alert",
-				role: "alert",
-				className: t1,
-				...props
+				...rootProps,
+				children: content
 			})
 		});
-		$[7] = props;
-		$[8] = t1;
-		$[9] = t2;
+		$[41] = content;
+		$[42] = rootProps;
+		$[43] = t9;
 	} else {
-		t2 = $[9];
+		t9 = $[43];
 	}
-	return t2;
+	return t9;
+}
+/**
+* A persistent message. Compose it with `AlertTitle`, `AlertDescription` and `AlertAction`.
+* @param props - Variant, Arc tone and icon, optional presence and dismissal, plus native div attributes.
+* @returns The alert; with `open` or `onDismiss` it collapses its own height when hidden.
+*/
+function Alert({ open, onDismiss, ref: consumerRef, ...props }) {
+	const reduceMotion = usePrefersReducedMotion();
+	const [isDismissed, setIsDismissed] = useState(false);
+	const [presenceElement, attachPresence] = useAttachedElement(consumerRef);
+	const restingOverflow = useRef(undefined);
+	const clipPresence = () => {
+		if (!presenceElement) return;
+		restingOverflow.current ??= presenceElement.style.overflow;
+		presenceElement.style.overflow = "hidden";
+	};
+	const settlePresence = (definition) => {
+		if (!presenceElement) return;
+		if (restingOverflow.current !== undefined) presenceElement.style.overflow = restingOverflow.current;
+		restingOverflow.current = undefined;
+		if (definition === presenceEnter) {
+			presenceElement.style.height = toInlineStyleValue(props.style?.height, "px");
+			presenceElement.style.opacity = toInlineStyleValue(props.style?.opacity);
+		}
+	};
+	if (open === undefined && !onDismiss) {
+		return /* @__PURE__ */ _jsx(AlertBox, {
+			...props,
+			ref: consumerRef,
+			reduceMotion
+		});
+	}
+	const isOpen = open ?? !isDismissed;
+	const dismiss = onDismiss && (() => open === undefined ? setIsDismissed(true) : onDismiss());
+	return /* @__PURE__ */ _jsx(AnimatePresence, {
+		initial: false,
+		onExitComplete: () => {
+			if (open === undefined) onDismiss?.();
+		},
+		children: isOpen ? /* @__PURE__ */ _jsx(AlertBox, {
+			...props,
+			onDismiss: dismiss,
+			reduceMotion,
+			presence: {
+				ref: attachPresence,
+				initial: {
+					height: 0,
+					opacity: 0
+				},
+				animate: presenceEnter,
+				exit: reduceMotion ? reducedPresenceExit : presenceExit,
+				transition: reduceMotion ? { duration: 0 } : presenceTransition,
+				onAnimationStart: clipPresence,
+				onAnimationComplete: settlePresence
+			}
+		}, "alert") : null
+	});
 }
 function AlertTitle(t0) {
 	const $ = _c(8);
@@ -71,7 +392,7 @@ function AlertTitle(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className);
+		t1 = cn("text-sm font-medium group-has-[>svg]/alert:col-start-2 group-has-data-[slot=alert-icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover-fine:text-foreground", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -107,7 +428,7 @@ function AlertDescription(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className);
+		t1 = cn("text-xs leading-(--leading-body) text-pretty text-text-secondary group-has-[>svg]/alert:col-start-2 group-has-data-[slot=alert-icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover-fine:text-foreground [&_p:not(:last-child)]:mb-4", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -143,7 +464,7 @@ function AlertAction(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("absolute top-2 right-2", className);
+		t1 = cn("absolute top-(--space-3) right-(--space-3) group-has-data-[slot=alert-dismiss]/alert:right-12", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/avatar.d.ts

@@ -1,17 +1,40 @@
-import * as React from "react";
+/**
+ * Arc's Avatar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a compact identity marker on Arc's
+ * tokens, with a hairline border, a muted fill behind the initials and an optional presence dot that pops in and out.
+ * Loading, failure and fallback stay on the Base UI avatar primitive.
+ */
+import type { ComponentProps } from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import type { AvatarStatus } from "../constants/avatar.js";
+export type { AvatarStatus };
+/** Avatar diameters: 24px (`sm`), 32px (`default`), 40px (`lg`) and Arc's 88px profile size (`xl`). */
+export type AvatarSize = "default" | "sm" | "lg" | "xl";
 /** Accepts native image props and nullable image sources from application results. */
-export type AvatarImageProps = Omit<React.ComponentProps<"img">, "src"> & {
+export type AvatarImageProps = Omit<ComponentProps<"img">, "src"> & {
     src?: string | null;
 };
-declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
-    size?: "default" | "sm" | "lg";
-}): React.JSX.Element;
+export type AvatarProps = AvatarPrimitive.Root.Props & {
+    size?: AvatarSize;
+    /**
+     * Shows Arc's presence dot in the bottom corner, or the top corner when an `AvatarBadge` holds the bottom one, and
+     * adds the presence to the accessible text.
+     */
+    status?: AvatarStatus;
+    /** Accessible presence text; defaults to "En línea" or "Desconectado". */
+    statusLabel?: string;
+};
+/**
+ * A person or account, as a photo with initials as fallback.
+ * @param props - Size, optional presence and the Base UI avatar root props.
+ * @returns The avatar root.
+ */
+declare function Avatar({ className, size, status, statusLabel, children, ...props }: AvatarProps): import("react").JSX.Element;
 /** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
-declare function AvatarImage({ alt, className, src, ...props }: AvatarImageProps): React.JSX.Element;
-declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
-declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarImage({ alt, className, src, ...props }: AvatarImageProps): import("react").JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): import("react").JSX.Element;
+/** A custom corner badge, drawn with the same ring as Arc's presence dot. Prefer `status` for presence. */
+declare function AvatarBadge({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
 /** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
-declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };