beez-ui 2.5.0 → 2.6.1

package/dist/components/avatar.js

@@ -1,55 +1,134 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import * as React from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { AnimatePresence, motion } from "motion/react";
+import { AVATAR_STATUS_HIDDEN_SCALE, AVATAR_STATUS_LABEL } from "../constants/avatar.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
+import { ARC_DURATION, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { useBeezUIComponents } from "../providers/beez-ui-provider.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The presence ring: a surface-coloured gap plus a faint hairline, so the dot reads on photos and fills alike. */
+const presenceRingClassName = "shadow-[0_0_0_2px_var(--surface),0_0_0_3px_color-mix(in_oklab,var(--border)_70%,transparent)]";
+/**
+* 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.
+*/
 function Avatar(t0) {
-	const $ = _c(10);
+	const $ = _c(24);
+	let children;
 	let className;
 	let props;
+	let status;
+	let statusLabel;
 	let t1;
 	if ($[0] !== t0) {
-		({className, size: t1, ...props} = t0);
+		({className, size: t1, status, statusLabel, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = status;
+		$[5] = statusLabel;
+		$[6] = t1;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		status = $[4];
+		statusLabel = $[5];
+		t1 = $[6];
 	}
 	const size = t1 === undefined ? "default" : t1;
+	const reduceMotion = usePrefersReducedMotion();
 	let t2;
-	if ($[4] !== className) {
-		t2 = cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className);
-		$[4] = className;
-		$[5] = t2;
+	if ($[7] !== className) {
+		t2 = cn("group/avatar relative inline-grid size-8 shrink-0 place-items-center rounded-(--radius-pill) border border-border bg-surface-muted text-xs font-medium text-foreground select-none data-[size=lg]:size-10 data-[size=lg]:text-sm data-[size=sm]:size-6 data-[size=sm]:text-[10px] data-[size=xl]:size-22 data-[size=xl]:text-xl", className);
+		$[7] = className;
+		$[8] = t2;
 	} else {
-		t2 = $[5];
+		t2 = $[8];
 	}
 	let t3;
-	if ($[6] !== props || $[7] !== size || $[8] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+	if ($[9] !== status || $[10] !== statusLabel) {
+		t3 = status ? /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: statusLabel ?? AVATAR_STATUS_LABEL[status]
+		}) : null;
+		$[9] = status;
+		$[10] = statusLabel;
+		$[11] = t3;
+	} else {
+		t3 = $[11];
+	}
+	let t4;
+	if ($[12] !== reduceMotion || $[13] !== status) {
+		t4 = status ? /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "avatar-status",
+			"data-status": status,
+			"aria-hidden": "true",
+			className: cn("absolute right-0 bottom-0 z-10 size-2.5 rounded-(--radius-pill) data-[status=offline]:bg-text-muted data-[status=online]:bg-success group-data-[size=lg]/avatar:size-3 group-data-[size=sm]/avatar:size-2 group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1 group-data-[size=xl]/avatar:size-3.5 group-has-data-[slot=avatar-badge]/avatar:top-0 group-has-data-[slot=avatar-badge]/avatar:bottom-auto group-data-[size=xl]/avatar:group-has-data-[slot=avatar-badge]/avatar:top-1", presenceRingClassName),
+			initial: {
+				opacity: 0,
+				scale: AVATAR_STATUS_HIDDEN_SCALE
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: AVATAR_STATUS_HIDDEN_SCALE,
+				transition: { duration: reduceMotion ? 0 : ARC_DURATION.fast }
+			},
+			transition: reduceMotion ? { duration: 0 } : ARC_SPRING_SNAPPY
+		}, status) : null;
+		$[12] = reduceMotion;
+		$[13] = status;
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	let t5;
+	if ($[15] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t4
+		});
+		$[15] = t4;
+		$[16] = t5;
+	} else {
+		t5 = $[16];
+	}
+	let t6;
+	if ($[17] !== children || $[18] !== props || $[19] !== size || $[20] !== t2 || $[21] !== t3 || $[22] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "fade",
-			children: /* @__PURE__ */ _jsx(AvatarPrimitive.Root, {
+			children: /* @__PURE__ */ _jsxs(AvatarPrimitive.Root, {
 				"data-slot": "avatar",
 				"data-size": size,
 				className: t2,
-				...props
+				...props,
+				children: [
+					children,
+					t3,
+					t5
+				]
 			})
 		});
-		$[6] = props;
-		$[7] = size;
-		$[8] = t2;
-		$[9] = t3;
+		$[17] = children;
+		$[18] = props;
+		$[19] = size;
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t5;
+		$[23] = t6;
 	} else {
-		t3 = $[9];
+		t6 = $[23];
 	}
-	return t3;
+	return t6;
 }
 /** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
 function AvatarImage(t0) {
@@ -84,7 +163,7 @@ function AvatarImage(t0) {
 	}
 	let t4;
 	if ($[7] !== className) {
-		t4 = cn("absolute inset-0 aspect-square size-full rounded-full object-cover data-[loading]:opacity-0 data-[error]:hidden", className);
+		t4 = cn("pointer-events-none absolute inset-0 aspect-square size-full rounded-full object-cover data-[loading]:opacity-0 data-[error]:hidden", className);
 		$[7] = className;
 		$[8] = t4;
 	} else {
@@ -133,7 +212,7 @@ function AvatarFallback(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className);
+		t1 = cn("flex size-full items-center justify-center rounded-full bg-surface-muted text-[length:inherit] font-medium text-foreground", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -154,6 +233,7 @@ function AvatarFallback(t0) {
 	}
 	return t2;
 }
+/** A custom corner badge, drawn with the same ring as Arc's presence dot. Prefer `status` for presence. */
 function AvatarBadge(t0) {
 	const $ = _c(8);
 	let className;
@@ -169,7 +249,7 @@ function AvatarBadge(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className);
+		t1 = cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color select-none", presenceRingClassName, "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", "group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1 group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -242,7 +322,7 @@ function AvatarGroupCount(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className);
+		t1 = cn("relative flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-surface-muted text-xs font-medium text-text-secondary ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=xl]/avatar-group:size-22 group-has-data-[size=xl]/avatar-group:text-xl [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 group-has-data-[size=xl]/avatar-group:[&>svg]:size-8", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/badge.d.ts

@@ -1,9 +1,41 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+import type { ComponentProps, ReactNode } from "react";
+/** shadcn-compatible visual variants, each drawn with one of Arc's tones. */
+export type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+/** Arc's semantic tones; a `tone` wins over the tone implied by `variant`. */
+export type BadgeTone = "neutral" | "success" | "info" | "warning" | "danger";
+/** Arc's badge heights: 26px (`md`) and 22px (`sm`). */
+export type BadgeSize = "sm" | "md";
+/** Options of `badgeVariants`, for styling links or other elements as badges. */
+export type BadgeVariantsOptions = {
+    variant?: BadgeVariant | null;
+    tone?: BadgeTone | null;
+    size?: BadgeSize | null;
+    className?: string;
+};
+/**
+ * Arc's badge classes for any element. Without a `tone`, the tone implied by `variant` is used, as in `Badge`.
+ * @param options - Variant, tone, size and extra classes.
+ * @returns The class list.
+ */
+declare function badgeVariants({ variant, tone, size, className }?: BadgeVariantsOptions): string;
+export type BadgeProps = ComponentProps<"span"> & {
+    /** shadcn-compatible variant, drawn with an Arc tone: default (info), secondary, outline and ghost (neutral),
+     * destructive (danger) and link (info, underlined on hover). */
+    variant?: BadgeVariant | null;
+    /** Arc's semantic tone; overrides the tone implied by `variant`. */
+    tone?: BadgeTone;
+    /** Arc's height: `md` (26px, default) or `sm` (22px). */
+    size?: BadgeSize;
+    /** A leading icon tinted with the tone, hidden from assistive technology. */
+    icon?: ReactNode;
+    /** Renders the child element instead of a span, merging the badge props into it. Text and icon swaps are off. */
     asChild?: boolean;
-}): React.JSX.Element;
+};
+/**
+ * A small label for status, category or metadata. Text children swap in place with Arc's motion and the pill springs
+ * to the new width; other children render as they are.
+ * @param props - Variant, tone, size, optional icon and native span attributes.
+ * @returns The badge.
+ */
+declare function Badge({ className, variant, tone, size, icon, asChild, children, ...props }: BadgeProps): import("react").JSX.Element;
 export { Badge, badgeVariants };

package/dist/components/badge.js

@@ -1,30 +1,354 @@
-import * as React from "react";
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Badge (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a small pill for status, category or
+* metadata on Arc's tones and tokens. A new text label rises in while the pill springs to its new width, and a new
+* icon crossfades in place. The shadcn variants are kept and mapped onto Arc's tones.
+*/
+import { isValidElement, useRef } from "react";
 import { cva } from "class-variance-authority";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { Slot } from "radix-ui";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { BADGE_LABEL_OFFSET_EM } from "../constants/badge.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 badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
-	variants: { variant: {
-		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-		link: "text-primary underline-offset-4 hover:underline"
-	} },
-	defaultVariants: { variant: "default" }
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } 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 { useMorphWidth } from "../motion/use-morph-width.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** The Arc tone each shadcn variant is drawn with when no explicit `tone` is passed. */
+const VARIANT_TONE = {
+	default: "info",
+	secondary: "neutral",
+	destructive: "danger",
+	outline: "neutral",
+	ghost: "neutral",
+	link: "info"
+};
+/**
+* Arc's badge recipe. Each tone sets the pill's colour roles as custom properties, so hover can mix the tone into the
+* border and fill; variants only adjust the fill and border afterwards. Hover answers on fine pointers only.
+*/
+const badgeRecipe = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-clip rounded-(--radius-pill) border border-(--badge-border) bg-(--badge-background) leading-none font-medium tracking-[-.01em] whitespace-nowrap text-(--badge-foreground) transition-[border-color,background-color,color] duration-(--duration-standard) ease-(--ease-standard) motion-reduce:duration-(--duration-instant) hover-fine:border-[color-mix(in_oklab,var(--badge-color)_32%,var(--border))] hover-fine:bg-[color-mix(in_oklab,var(--badge-color)_10%,var(--surface))] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-danger [&>svg]:pointer-events-none [&>svg]:size-3! [&>svg]:text-(--badge-color)", {
+	variants: {
+		tone: {
+			neutral: "[--badge-background:var(--surface-muted)] [--badge-border:var(--border)] [--badge-color:var(--text-secondary)] [--badge-foreground:var(--text-secondary)]",
+			success: "[--badge-background:color-mix(in_oklab,var(--success)_10%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--success)_25%,var(--border))] [--badge-color:var(--success)] [--badge-foreground:var(--success)]",
+			info: "[--badge-background:var(--accent-subtle)] [--badge-border:color-mix(in_oklab,var(--accent)_24%,var(--border))] [--badge-color:var(--accent)] [--badge-foreground:var(--accent-strong)]",
+			warning: "[--badge-background:color-mix(in_oklab,var(--warning)_11%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--warning)_27%,var(--border))] [--badge-color:var(--warning)] [--badge-foreground:var(--warning)]",
+			danger: "[--badge-background:color-mix(in_oklab,var(--danger)_10%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--danger)_26%,var(--border))] [--badge-color:var(--danger)] [--badge-foreground:var(--danger)]"
+		},
+		variant: {
+			default: "",
+			secondary: "",
+			destructive: "",
+			outline: "[--badge-background:var(--surface)] [--badge-foreground:var(--foreground)]",
+			ghost: "[--badge-background:transparent] [--badge-border:transparent]",
+			link: "[--badge-background:transparent] [--badge-border:transparent] underline-offset-4 hover-fine:border-transparent hover-fine:bg-transparent hover-fine:underline"
+		},
+		size: {
+			sm: "min-h-[22px] gap-1 px-2 text-[11px]",
+			md: "min-h-[26px] gap-[5px] px-2.5 text-xs"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
 });
-function Badge({ className, variant = "default", asChild = false, ...props }) {
-	const Comp = asChild ? Slot.Root : "span";
-	return /* @__PURE__ */ _jsx(MotionSlot, {
-		kind: "fade",
-		children: /* @__PURE__ */ _jsx(Comp, {
-			"data-slot": "badge",
-			"data-variant": variant,
-			className: cn(badgeVariants({ variant }), className),
-			...props
-		})
-	});
+/**
+* Arc's badge classes for any element. Without a `tone`, the tone implied by `variant` is used, as in `Badge`.
+* @param options - Variant, tone, size and extra classes.
+* @returns The class list.
+*/
+function badgeVariants({ variant, tone, size, className } = {}) {
+	return cn(badgeRecipe({
+		tone: tone ?? VARIANT_TONE[variant ?? "default"],
+		variant,
+		size
+	}), className);
+}
+/** A new label rises out of a soft blur; the old one lifts away faster. */
+const labelEnter = {
+	opacity: 0,
+	y: `${BADGE_LABEL_OFFSET_EM.enter}em`,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const labelExit = {
+	opacity: 0,
+	y: `${BADGE_LABEL_OFFSET_EM.exit}em`,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: ARC_SWAP_EXIT_TRANSITION
+};
+const labelTransition = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+const reducedEnter = { opacity: 0 };
+/** Outgoing copies are hidden from assistive technology while they fade, so only the current one is read. */
+function BadgeSwap(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;
+}
+/** Keys an icon by its component, so a new icon crossfades in while re-rendering the same icon stays still. */
+function getIconKey(icon) {
+	if (!isValidElement(icon)) return "icon";
+	const iconType = icon.type;
+	return typeof iconType === "string" ? iconType : iconType.displayName ?? iconType.name ?? "icon";
+}
+/** Arc's swapping content: the icon and text change in place while the pill springs to the new width. */
+function BadgeContent(t0) {
+	const $ = _c(19);
+	const { icon, label, reduceMotion } = t0;
+	const contentRef = useRef(null);
+	let t1;
+	if ($[0] !== icon) {
+		t1 = icon ? getIconKey(icon) : "";
+		$[0] = icon;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const iconKey = t1;
+	const width = useMorphWidth(contentRef, `${iconKey}\n${label}`, reduceMotion);
+	let t2;
+	if ($[2] !== width) {
+		t2 = { width };
+		$[2] = width;
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== icon || $[5] !== iconKey || $[6] !== reduceMotion) {
+		t3 = icon ? /* @__PURE__ */ _jsx(BadgeIcon, {
+			icon,
+			iconKey,
+			reduceMotion
+		}) : null;
+		$[4] = icon;
+		$[5] = iconKey;
+		$[6] = reduceMotion;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	const t4 = reduceMotion ? reducedEnter : labelEnter;
+	const t5 = reduceMotion ? ARC_REDUCED_EXIT : labelExit;
+	const t6 = reduceMotion ? ARC_REDUCED_TRANSITION : labelTransition;
+	let t7;
+	if ($[8] !== label || $[9] !== t4 || $[10] !== t5 || $[11] !== t6) {
+		t7 = /* @__PURE__ */ _jsx("span", {
+			className: "relative inline-flex items-center",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(BadgeSwap, {
+					className: "block",
+					initial: t4,
+					animate: ARC_SWAP_REST,
+					exit: t5,
+					transition: t6,
+					children: label
+				}, label)
+			})
+		});
+		$[8] = label;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+	} else {
+		t7 = $[12];
+	}
+	let t8;
+	if ($[13] !== t3 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs("span", {
+			ref: contentRef,
+			className: "relative inline-flex w-max items-center gap-[inherit]",
+			children: [t3, t7]
+		});
+		$[13] = t3;
+		$[14] = t7;
+		$[15] = t8;
+	} else {
+		t8 = $[15];
+	}
+	let t9;
+	if ($[16] !== t2 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "badge-content",
+			className: "block gap-[inherit] data-morphing:overflow-clip",
+			style: t2,
+			children: t8
+		});
+		$[16] = t2;
+		$[17] = t8;
+		$[18] = t9;
+	} else {
+		t9 = $[18];
+	}
+	return t9;
+}
+/** The leading icon, tinted with the tone; a different icon component crossfades in. */
+function BadgeIcon(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": "badge-icon",
+			"aria-hidden": "true",
+			className: "relative inline-flex flex-none items-center justify-center leading-none text-(--badge-color) [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(BadgeSwap, {
+					className: "relative inline-flex 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;
+}
+/**
+* A small label for status, category or metadata. Text children swap in place with Arc's motion and the pill springs
+* to the new width; other children render as they are.
+* @param props - Variant, tone, size, optional icon and native span attributes.
+* @returns The badge.
+*/
+function Badge(t0) {
+	const $ = _c(28);
+	let children;
+	let className;
+	let icon;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let tone;
+	if ($[0] !== t0) {
+		({className, variant: t1, tone, size: t2, icon, asChild: t3, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = icon;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = tone;
+	} else {
+		children = $[1];
+		className = $[2];
+		icon = $[3];
+		props = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		tone = $[8];
+	}
+	const variant = t1 === undefined ? "default" : t1;
+	const size = t2 === undefined ? "md" : t2;
+	const asChild = t3 === undefined ? false : t3;
+	const reduceMotion = usePrefersReducedMotion();
+	const resolvedVariant = variant ?? "default";
+	const resolvedTone = tone ?? VARIANT_TONE[resolvedVariant];
+	const label = typeof children === "string" || typeof children === "number" ? String(children) : null;
+	const Component = asChild ? Slot.Root : "span";
+	let t4;
+	if ($[9] !== asChild || $[10] !== children || $[11] !== icon || $[12] !== label || $[13] !== reduceMotion) {
+		t4 = asChild ? children : label === null ? /* @__PURE__ */ _jsxs(_Fragment, { children: [icon ? /* @__PURE__ */ _jsx(BadgeIcon, {
+			icon,
+			iconKey: getIconKey(icon),
+			reduceMotion
+		}) : null, children] }) : /* @__PURE__ */ _jsx(BadgeContent, {
+			icon,
+			label,
+			reduceMotion
+		});
+		$[9] = asChild;
+		$[10] = children;
+		$[11] = icon;
+		$[12] = label;
+		$[13] = reduceMotion;
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	const content = t4;
+	let t5;
+	if ($[15] !== className || $[16] !== resolvedTone || $[17] !== resolvedVariant || $[18] !== size) {
+		t5 = badgeVariants({
+			tone: resolvedTone,
+			variant: resolvedVariant,
+			size,
+			className
+		});
+		$[15] = className;
+		$[16] = resolvedTone;
+		$[17] = resolvedVariant;
+		$[18] = size;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	let t6;
+	if ($[20] !== Component || $[21] !== content || $[22] !== props || $[23] !== resolvedTone || $[24] !== resolvedVariant || $[25] !== size || $[26] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "fade",
+			children: /* @__PURE__ */ _jsx(Component, {
+				"data-slot": "badge",
+				"data-variant": resolvedVariant,
+				"data-tone": resolvedTone,
+				"data-size": size,
+				className: t5,
+				...props,
+				children: content
+			})
+		});
+		$[20] = Component;
+		$[21] = content;
+		$[22] = props;
+		$[23] = resolvedTone;
+		$[24] = resolvedVariant;
+		$[25] = size;
+		$[26] = t5;
+		$[27] = t6;
+	} else {
+		t6 = $[27];
+	}
+	return t6;
 }
 export { Badge, badgeVariants };

package/dist/components/calendar.d.ts

@@ -1,10 +1,37 @@
+/**
+ * Arc's Calendar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on react-day-picker: round day cells
+ * on a 4px grid, the month title on the left with quiet pill controls on the right, today marked by a dot under its
+ * number, a selected disc that glides between days and an optional Today button. react-day-picker keeps selection
+ * modes, ranges, dropdowns, locales and keyboard navigation; only the design and the motion come from Arc.
+ */
 import * as React from "react";
 import { DayPicker, type DayButton, type Locale } from "react-day-picker";
 import { ControlButton } from "./control-button.js";
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+    /** Variant of the month navigation buttons, kept for compatibility; Arc's look is the default `ghost`. */
     buttonVariant?: React.ComponentProps<typeof ControlButton>["variant"];
-}): React.JSX.Element;
+    /**
+     * Adds Arc's Today button before the month controls: it goes back to the month holding today and, in single
+     * selection mode, selects today when it is available. It rests dimmed while there is nothing left to do.
+     */
+    showToday?: boolean;
+    /** Copy of the Today button. Defaults to "Hoy". */
+    todayLabel?: string;
+};
+/**
+ * A month grid for picking a day, several days or a range, controlled or uncontrolled like react-day-picker.
+ * @param props - Every react-day-picker prop plus the Arc additions `showToday` and `todayLabel`.
+ * @returns The calendar, in Spanish by default.
+ */
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, showToday, todayLabel, ...props }: CalendarProps): React.JSX.Element;
+/**
+ * One day of the grid: a round cell whose fill answers hover on fine pointers, presses in slightly and marks today
+ * with a dot under its number that takes the number's colour.
+ * @param props - react-day-picker day button properties plus the locale used for `data-day`.
+ * @returns The day button.
+ */
 declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
     locale?: Partial<Locale>;
 }): React.JSX.Element;
 export { Calendar, CalendarDayButton };
+export type { CalendarProps };