beez-ui 0.7.0 → 0.8.0

package/dist/components/notification-panel.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Content of a notification inbox: header with "mark all as read", the list, and the loading,
+ * error and empty states. Presentational: items, statuses and callbacks come from the caller.
+ */
+import type { ReactNode } from "react";
+export declare const NOTIFICATION_PANEL_STATUS: {
+    readonly error: "error";
+    readonly idle: "idle";
+    readonly loaded: "loaded";
+    readonly loading: "loading";
+};
+export type NotificationPanelStatus = (typeof NOTIFICATION_PANEL_STATUS)[keyof typeof NOTIFICATION_PANEL_STATUS];
+/** Presentation of one inbox item, already resolved by the application. */
+export interface NotificationPanelItem {
+    id: string;
+    title: string;
+    /** Secondary line, such as when or where. */
+    detail?: string;
+    /** Short creation stamp, such as "12 may · 18:00". */
+    sentAtLabel?: string;
+    /** In-app destination; navigates through the configured router adapter. */
+    href: string;
+    isUnread: boolean;
+}
+export interface NotificationPanelLabels {
+    markAllRead: string;
+    loading: string;
+    error: string;
+    retry: string;
+    empty: string;
+    emptyHint: string;
+    /** Visually hidden prefix of unread items. */
+    unreadPrefix: string;
+}
+export declare const NOTIFICATION_PANEL_DEFAULT_LABELS: NotificationPanelLabels;
+export interface NotificationPanelProps {
+    notifications: readonly NotificationPanelItem[];
+    listStatus: NotificationPanelStatus;
+    unreadCount: number;
+    isMarkingAll: boolean;
+    onMarkAllRead: () => void;
+    onRetry: () => void;
+    onSelectNotification: (notificationId: string) => void;
+    /** Heading rendered by the surface (popover or sheet title). */
+    titleSlot: ReactNode;
+    /** Leaves room for a sheet close button at the end of the header. */
+    reservesCloseButtonSpace?: boolean;
+    labels?: Partial<NotificationPanelLabels>;
+    className?: string;
+}
+/**
+ * Renders the inbox. Unread items keep a dot that fades out when they are read.
+ * @param props - Items, load status, callbacks, title slot and optional labels.
+ * @returns The panel.
+ */
+export declare function NotificationPanel({ notifications, listStatus, unreadCount, isMarkingAll, onMarkAllRead, onRetry, onSelectNotification, titleSlot, reservesCloseButtonSpace, labels, className, }: NotificationPanelProps): import("react").JSX.Element;

package/dist/components/notification-panel.js

@@ -0,0 +1,281 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { BellOffIcon, CheckCheckIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_TIMING } from "../motion/tokens.js";
+import { AnimatedListItem } from "./animated-list-item.js";
+import { Button } from "./button.js";
+import { Link } from "./link.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NOTIFICATION_PANEL_STATUS = {
+	error: "error",
+	idle: "idle",
+	loaded: "loaded",
+	loading: "loading"
+};
+export const NOTIFICATION_PANEL_DEFAULT_LABELS = {
+	markAllRead: "Marcar todas como leídas",
+	loading: "Cargando notificaciones…",
+	error: "No pudimos cargar tus notificaciones.",
+	retry: "Reintentar",
+	empty: "No tenés notificaciones.",
+	emptyHint: "Te avisamos acá cuando cambie algo que te importa.",
+	unreadPrefix: "No leída: "
+};
+/** Body regions fade in when they mount, so the new state is in the DOM at once. */
+const REGION_FADE_CLASS_NAME = "animate-in fade-in duration-180";
+const MARK_ALL_FADE = {
+	animate: { opacity: 1 },
+	exit: { opacity: 0 },
+	initial: { opacity: 0 },
+	transition: {
+		duration: MOTION_TIMING.enter,
+		ease: MOTION_EASE
+	}
+};
+/**
+* Picks the body region: the list whenever there are items (a background refresh never hides
+* them), otherwise the state of the last load.
+* @param hasNotifications - Whether the inbox has at least one item.
+* @param listStatus - Status of the latest list load.
+* @returns The region to render.
+*/
+function resolvePanelView(hasNotifications, listStatus) {
+	if (hasNotifications) return "list";
+	if (listStatus === NOTIFICATION_PANEL_STATUS.loading) return "loading";
+	if (listStatus === NOTIFICATION_PANEL_STATUS.error) return "error";
+	if (listStatus === NOTIFICATION_PANEL_STATUS.loaded) return "empty";
+	return "idle";
+}
+/**
+* Renders the inbox. Unread items keep a dot that fades out when they are read.
+* @param props - Items, load status, callbacks, title slot and optional labels.
+* @returns The panel.
+*/
+export function NotificationPanel(t0) {
+	const $ = _c(42);
+	const { notifications, listStatus, unreadCount, isMarkingAll, onMarkAllRead, onRetry, onSelectNotification, titleSlot, reservesCloseButtonSpace: t1, labels, className } = t0;
+	const reservesCloseButtonSpace = t1 === undefined ? false : t1;
+	let t2;
+	if ($[0] !== labels) {
+		t2 = {
+			...NOTIFICATION_PANEL_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const resolvedLabels = t2;
+	const t3 = notifications.length > 0;
+	let t4;
+	if ($[2] !== listStatus || $[3] !== t3) {
+		t4 = resolvePanelView(t3, listStatus);
+		$[2] = listStatus;
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	const panelView = t4;
+	let t5;
+	if ($[5] !== className) {
+		t5 = cn("flex min-h-0 min-w-0 flex-col", className);
+		$[5] = className;
+		$[6] = t5;
+	} else {
+		t5 = $[6];
+	}
+	const t6 = reservesCloseButtonSpace && "pr-12";
+	let t7;
+	if ($[7] !== t6) {
+		t7 = cn("flex flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-3", t6);
+		$[7] = t6;
+		$[8] = t7;
+	} else {
+		t7 = $[8];
+	}
+	let t8;
+	if ($[9] !== isMarkingAll || $[10] !== onMarkAllRead || $[11] !== resolvedLabels || $[12] !== unreadCount) {
+		t8 = unreadCount > 0 ? /* @__PURE__ */ _jsx(motion.span, {
+			className: "-mr-2 inline-flex",
+			...MARK_ALL_FADE,
+			children: /* @__PURE__ */ _jsxs(Button, {
+				className: "text-[0.8rem] text-muted-foreground",
+				disabled: isMarkingAll,
+				onClick: onMarkAllRead,
+				size: "sm",
+				type: "button",
+				variant: "ghost",
+				children: [/* @__PURE__ */ _jsx(CheckCheckIcon, { "aria-hidden": "true" }), resolvedLabels.markAllRead]
+			})
+		}, "mark-all") : null;
+		$[9] = isMarkingAll;
+		$[10] = onMarkAllRead;
+		$[11] = resolvedLabels;
+		$[12] = unreadCount;
+		$[13] = t8;
+	} else {
+		t8 = $[13];
+	}
+	let t9;
+	if ($[14] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t8
+		});
+		$[14] = t8;
+		$[15] = t9;
+	} else {
+		t9 = $[15];
+	}
+	let t10;
+	if ($[16] !== t7 || $[17] !== t9 || $[18] !== titleSlot) {
+		t10 = /* @__PURE__ */ _jsxs("div", {
+			className: t7,
+			children: [titleSlot, t9]
+		});
+		$[16] = t7;
+		$[17] = t9;
+		$[18] = titleSlot;
+		$[19] = t10;
+	} else {
+		t10 = $[19];
+	}
+	let t11;
+	if ($[20] !== panelView || $[21] !== resolvedLabels) {
+		t11 = panelView === "loading" ? /* @__PURE__ */ _jsx("p", {
+			className: cn("m-0 grid justify-items-start gap-3 p-4 text-[0.9rem] text-muted-foreground", REGION_FADE_CLASS_NAME),
+			role: "status",
+			children: resolvedLabels.loading
+		}) : null;
+		$[20] = panelView;
+		$[21] = resolvedLabels;
+		$[22] = t11;
+	} else {
+		t11 = $[22];
+	}
+	let t12;
+	if ($[23] !== onRetry || $[24] !== panelView || $[25] !== resolvedLabels) {
+		t12 = panelView === "error" ? /* @__PURE__ */ _jsxs("div", {
+			className: cn("grid justify-items-start gap-3 p-4 text-[0.9rem] text-muted-foreground", REGION_FADE_CLASS_NAME),
+			role: "alert",
+			children: [/* @__PURE__ */ _jsx("p", {
+				className: "m-0",
+				children: resolvedLabels.error
+			}), /* @__PURE__ */ _jsx(Button, {
+				onClick: onRetry,
+				size: "sm",
+				type: "button",
+				variant: "outline",
+				children: resolvedLabels.retry
+			})]
+		}) : null;
+		$[23] = onRetry;
+		$[24] = panelView;
+		$[25] = resolvedLabels;
+		$[26] = t12;
+	} else {
+		t12 = $[26];
+	}
+	let t13;
+	if ($[27] !== panelView || $[28] !== resolvedLabels) {
+		t13 = panelView === "empty" ? /* @__PURE__ */ _jsxs("div", {
+			className: cn("grid justify-items-center gap-[0.35rem] px-5 py-8 text-center text-[0.9rem] text-muted-foreground", REGION_FADE_CLASS_NAME),
+			children: [
+				/* @__PURE__ */ _jsx(BellOffIcon, {
+					"aria-hidden": "true",
+					className: "mb-1 size-6 opacity-80"
+				}),
+				/* @__PURE__ */ _jsx("p", {
+					className: "m-0",
+					children: resolvedLabels.empty
+				}),
+				/* @__PURE__ */ _jsx("p", {
+					className: "m-0 max-w-72 text-[0.8rem]",
+					children: resolvedLabels.emptyHint
+				})
+			]
+		}) : null;
+		$[27] = panelView;
+		$[28] = resolvedLabels;
+		$[29] = t13;
+	} else {
+		t13 = $[29];
+	}
+	let t14;
+	if ($[30] !== notifications || $[31] !== onSelectNotification || $[32] !== panelView || $[33] !== resolvedLabels) {
+		t14 = panelView === "list" ? /* @__PURE__ */ _jsx("ul", {
+			className: cn("m-0 min-h-0 list-none overflow-y-auto overscroll-contain py-1", REGION_FADE_CLASS_NAME),
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				initial: false,
+				children: notifications.map((notification) => /* @__PURE__ */ _jsx(AnimatedListItem, {
+					className: "[&+&]:border-t [&+&]:border-border/60",
+					children: /* @__PURE__ */ _jsxs(Link, {
+						className: cn("grid grid-cols-[0.5rem_minmax(0,1fr)] items-start gap-3 px-4 py-3 text-foreground no-underline outline-none [-webkit-tap-highlight-color:transparent] transition-[background-color,box-shadow] focus-visible:bg-accent focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] active:bg-accent [@media(hover:hover)]:hover:bg-accent", notification.isUnread && "bg-primary/6"),
+						href: notification.href,
+						onClick: () => onSelectNotification(notification.id),
+						children: [/* @__PURE__ */ _jsx("span", {
+							"aria-hidden": "true",
+							"data-unread": notification.isUnread || undefined,
+							className: "mt-[0.4rem] size-2 scale-50 rounded-full bg-primary opacity-0 transition-[opacity,scale] data-unread:scale-100 data-unread:opacity-100"
+						}), /* @__PURE__ */ _jsxs("span", {
+							className: "grid min-w-0 gap-[0.15rem]",
+							children: [
+								notification.isUnread ? /* @__PURE__ */ _jsx("span", {
+									className: "sr-only",
+									children: resolvedLabels.unreadPrefix
+								}) : null,
+								/* @__PURE__ */ _jsx("span", {
+									className: "text-[0.9rem] leading-[1.35] font-medium [overflow-wrap:anywhere]",
+									children: notification.title
+								}),
+								notification.detail ? /* @__PURE__ */ _jsx("span", {
+									className: "text-[0.8rem] leading-[1.4] text-muted-foreground [overflow-wrap:anywhere]",
+									children: notification.detail
+								}) : null,
+								notification.sentAtLabel ? /* @__PURE__ */ _jsx("span", {
+									className: "text-xs text-muted-foreground",
+									children: notification.sentAtLabel
+								}) : null
+							]
+						})]
+					})
+				}, notification.id))
+			})
+		}) : null;
+		$[30] = notifications;
+		$[31] = onSelectNotification;
+		$[32] = panelView;
+		$[33] = resolvedLabels;
+		$[34] = t14;
+	} else {
+		t14 = $[34];
+	}
+	let t15;
+	if ($[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t5) {
+		t15 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "notification-panel",
+			className: t5,
+			children: [
+				t10,
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t5;
+		$[41] = t15;
+	} else {
+		t15 = $[41];
+	}
+	return t15;
+}

package/dist/components/open-in-browser-cta.d.ts

@@ -0,0 +1,22 @@
+export interface OpenInBrowserCtaCopy {
+    title: string;
+    description: string;
+    iosButtonLabel: string;
+    iosHint: string;
+    manualHint: string;
+}
+export interface OpenInBrowserCtaProps {
+    /** Absolute https URL to continue with, such as the sign-in page. */
+    url: string;
+    /** iOS gets a Safari deep link; other platforms get manual steps. */
+    isIos: boolean;
+    copy?: Partial<OpenInBrowserCtaCopy>;
+    className?: string;
+}
+/**
+ * Renders the handoff section. The URL is selectable with one tap, since copying is the only
+ * universal escape from embedded browsers.
+ * @param props - Destination URL, platform and optional copy.
+ * @returns The call to action.
+ */
+export declare function OpenInBrowserCta({ url, isIos, copy, className }: OpenInBrowserCtaProps): import("react").JSX.Element;

package/dist/components/open-in-browser-cta.js

@@ -0,0 +1,61 @@
+/**
+* Asks people inside an in-app browser to continue in their regular browser: a Safari deep link
+* on iOS, manual steps elsewhere, and the destination URL ready to copy. Server-safe.
+*/
+import { cn } from "../lib/utils.js";
+import { EXTERNAL_BROWSER_PLATFORM, buildExternalBrowserUrl } from "../lib/in-app-browser.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ENTER_CLASS_NAME = "animate-in fade-in slide-in-from-bottom-1.5 fill-mode-both duration-300";
+const OPEN_IN_BROWSER_DEFAULT_COPY = {
+	title: "Abrí este sitio en tu navegador",
+	description: "Estás dentro del navegador interno de la app que te trajo hasta acá. Para continuar, abrí este sitio en tu navegador habitual.",
+	iosButtonLabel: "Abrir en Safari",
+	iosHint: "Tocá el botón para abrir el sitio en Safari y continuá desde ahí.",
+	manualHint: "Tocá los tres puntos arriba a la derecha y elegí “Abrir en el navegador”, o copiá este link y pegalo en tu navegador."
+};
+/**
+* Renders the handoff section. The URL is selectable with one tap, since copying is the only
+* universal escape from embedded browsers.
+* @param props - Destination URL, platform and optional copy.
+* @returns The call to action.
+*/
+export function OpenInBrowserCta({ url, isIos, copy, className }) {
+	const resolvedCopy = {
+		...OPEN_IN_BROWSER_DEFAULT_COPY,
+		...copy
+	};
+	const safariUrl = buildExternalBrowserUrl({
+		platform: EXTERNAL_BROWSER_PLATFORM.ios,
+		targetHttpsUrl: url
+	}) ?? url;
+	return /* @__PURE__ */ _jsxs("section", {
+		"data-slot": "open-in-browser-cta",
+		className: cn("mt-6 flex flex-col gap-4", className),
+		children: [
+			/* @__PURE__ */ _jsx("h2", {
+				className: cn("m-0 text-lg font-semibold text-foreground", ENTER_CLASS_NAME),
+				children: resolvedCopy.title
+			}),
+			/* @__PURE__ */ _jsx("p", {
+				className: cn("m-0 text-sm leading-6 text-muted-foreground", ENTER_CLASS_NAME, "delay-35"),
+				children: resolvedCopy.description
+			}),
+			isIos ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("a", {
+				className: cn("inline-flex h-10 items-center justify-center self-stretch rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground no-underline [-webkit-tap-highlight-color:transparent] transition-[background-color,box-shadow,scale] outline-none active:scale-[0.98] focus-visible:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)] [@media(hover:hover)]:hover:bg-primary/80", ENTER_CLASS_NAME, "delay-70"),
+				href: safariUrl,
+				rel: "noopener noreferrer",
+				children: resolvedCopy.iosButtonLabel
+			}), /* @__PURE__ */ _jsx("p", {
+				className: cn("m-0 text-[0.8125rem] leading-5 text-muted-foreground", ENTER_CLASS_NAME, "delay-105"),
+				children: resolvedCopy.iosHint
+			})] }) : /* @__PURE__ */ _jsx("p", {
+				className: cn("m-0 text-[0.8125rem] leading-5 text-muted-foreground", ENTER_CLASS_NAME, "delay-70"),
+				children: resolvedCopy.manualHint
+			}),
+			/* @__PURE__ */ _jsx("p", {
+				className: cn("m-0 rounded-lg border border-border bg-muted/50 p-3 font-mono text-xs leading-[1.125rem] break-all text-muted-foreground select-all", ENTER_CLASS_NAME, "delay-140"),
+				children: url
+			})
+		]
+	});
+}

package/dist/components/presence-swap.d.ts

@@ -0,0 +1,22 @@
+/** Cross-fades between states of the same region, such as idle, loading and result. */
+import type { ReactNode } from "react";
+declare const PRESENCE_SWAP_ELEMENTS: {
+    readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>;
+    readonly span: import("motion/react").ForwardRefComponent<HTMLSpanElement, import("motion/react").HTMLMotionProps<"span">>;
+};
+export interface PresenceSwapProps {
+    /** Changing the key plays the exit of the previous content and the entry of the new one. */
+    presenceKey: string;
+    children: ReactNode;
+    as?: keyof typeof PRESENCE_SWAP_ELEMENTS;
+    className?: string;
+    /** `wait` swaps sequentially; `popLayout` overlaps them for inline content. */
+    mode?: "wait" | "popLayout";
+}
+/**
+ * Swaps keyed content with a short lift-and-fade; the first render is not animated.
+ * @param props - Key identifying the current state and its content.
+ * @returns The animated content.
+ */
+export declare function PresenceSwap({ presenceKey, children, as, className, mode }: PresenceSwapProps): import("react").JSX.Element;
+export {};

package/dist/components/presence-swap.js

@@ -0,0 +1,162 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { MOTION_CONTENT_DISTANCE, MOTION_EASE, MOTION_TIMING } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PRESENCE_SWAP_ELEMENTS = {
+	div: motion.div,
+	span: motion.span
+};
+const INSTANT_TRANSITION = { duration: 0 };
+/**
+* One keyed state of the swap. While it animates out it turns inert and hidden
+* from assistive technology, so stale controls cannot be clicked or announced.
+* @param props - Element type, class name and content.
+* @returns The animated state.
+*/
+function PresenceSwapItem(t0) {
+	const $ = _c(20);
+	const { as, className, children } = t0;
+	const MotionElement = PRESENCE_SWAP_ELEMENTS[as];
+	const isPresent = useIsPresent();
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const distance = shouldReduceMotion ? 0 : MOTION_CONTENT_DISTANCE;
+	const t1 = isPresent ? undefined : true;
+	const t2 = !isPresent || undefined;
+	let t3;
+	if ($[0] !== distance) {
+		t3 = {
+			opacity: 0,
+			y: distance
+		};
+		$[0] = distance;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	let t4;
+	if ($[2] !== shouldReduceMotion) {
+		t4 = shouldReduceMotion ? INSTANT_TRANSITION : {
+			duration: MOTION_TIMING.enter,
+			ease: MOTION_EASE
+		};
+		$[2] = shouldReduceMotion;
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	let t5;
+	if ($[4] !== t4) {
+		t5 = {
+			opacity: 1,
+			y: 0,
+			transition: t4
+		};
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t5 = $[5];
+	}
+	const t6 = -distance;
+	let t7;
+	if ($[6] !== shouldReduceMotion) {
+		t7 = shouldReduceMotion ? INSTANT_TRANSITION : {
+			duration: MOTION_TIMING.exit,
+			ease: MOTION_EASE
+		};
+		$[6] = shouldReduceMotion;
+		$[7] = t7;
+	} else {
+		t7 = $[7];
+	}
+	let t8;
+	if ($[8] !== t6 || $[9] !== t7) {
+		t8 = {
+			opacity: 0,
+			y: t6,
+			transition: t7
+		};
+		$[8] = t6;
+		$[9] = t7;
+		$[10] = t8;
+	} else {
+		t8 = $[10];
+	}
+	let t9;
+	if ($[11] !== MotionElement || $[12] !== children || $[13] !== className || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(MotionElement, {
+			"data-slot": "presence-swap",
+			"aria-hidden": t1,
+			inert: t2,
+			className,
+			initial: t3,
+			animate: t5,
+			exit: t8,
+			children
+		});
+		$[11] = MotionElement;
+		$[12] = children;
+		$[13] = className;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t8;
+		$[19] = t9;
+	} else {
+		t9 = $[19];
+	}
+	return t9;
+}
+/**
+* Swaps keyed content with a short lift-and-fade; the first render is not animated.
+* @param props - Key identifying the current state and its content.
+* @returns The animated content.
+*/
+export function PresenceSwap(t0) {
+	const $ = _c(11);
+	const { presenceKey, children, as: t1, className, mode: t2 } = t0;
+	const as = t1 === undefined ? "div" : t1;
+	const mode = t2 === undefined ? "wait" : t2;
+	const t3 = as === "span" && "inline-flex items-center";
+	let t4;
+	if ($[0] !== className || $[1] !== t3) {
+		t4 = cn("min-w-0", t3, className);
+		$[0] = className;
+		$[1] = t3;
+		$[2] = t4;
+	} else {
+		t4 = $[2];
+	}
+	let t5;
+	if ($[3] !== as || $[4] !== children || $[5] !== presenceKey || $[6] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(PresenceSwapItem, {
+			as,
+			className: t4,
+			children
+		}, presenceKey);
+		$[3] = as;
+		$[4] = children;
+		$[5] = presenceKey;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		t5 = $[7];
+	}
+	let t6;
+	if ($[8] !== mode || $[9] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode,
+			initial: false,
+			children: t5
+		});
+		$[8] = mode;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	return t6;
+}

package/dist/components/progress-ring.d.ts

@@ -0,0 +1,20 @@
+/** Compact circular progress indicator whose arc inherits the surrounding text color. */
+import type { ComponentProps } from "react";
+export interface ProgressRingProps extends Omit<ComponentProps<"svg">, "children"> {
+    /** Completion ratio in the `[0, 1]` range; values outside are clamped. */
+    fraction: number;
+    /** Rendered width and height in pixels. */
+    size?: number;
+    /**
+     * Accessible name. Without it the ring is decorative (`aria-hidden`), which fits when an
+     * adjacent label such as `3 / 4` already conveys the value.
+     */
+    label?: string;
+}
+/**
+ * Draws a ring whose arc covers `fraction` of the circle. The arc uses `currentColor`, so the
+ * parent's text color (for example success or warning) styles it without extra props.
+ * @param props - Fraction, size, optional accessible name and SVG attributes.
+ * @returns The progress ring.
+ */
+export declare function ProgressRing({ fraction, size, label, className, ...svgProps }: ProgressRingProps): import("react").JSX.Element;

package/dist/components/progress-ring.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PROGRESS_RING_VIEWBOX_SIZE = 18;
+const PROGRESS_RING_CENTER = PROGRESS_RING_VIEWBOX_SIZE / 2;
+const PROGRESS_RING_RADIUS = 7;
+const PROGRESS_RING_STROKE_WIDTH = 2.5;
+const PROGRESS_RING_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RING_RADIUS;
+const DEFAULT_PROGRESS_RING_SIZE_PX = 18;
+/**
+* Draws a ring whose arc covers `fraction` of the circle. The arc uses `currentColor`, so the
+* parent's text color (for example success or warning) styles it without extra props.
+* @param props - Fraction, size, optional accessible name and SVG attributes.
+* @returns The progress ring.
+*/
+export function ProgressRing({ fraction, size = DEFAULT_PROGRESS_RING_SIZE_PX, label, className, ...svgProps }) {
+	const clampedFraction = Math.min(Math.max(Number.isFinite(fraction) ? fraction : 0, 0), 1);
+	const dashOffset = PROGRESS_RING_CIRCUMFERENCE * (1 - clampedFraction);
+	const accessibilityProps = label ? {
+		role: "progressbar",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(clampedFraction * 100)
+	} : { "aria-hidden": true };
+	return /* @__PURE__ */ _jsxs("svg", {
+		"data-slot": "progress-ring",
+		...accessibilityProps,
+		...svgProps,
+		className: cn("shrink-0 -rotate-90", className),
+		height: size,
+		viewBox: `0 0 ${PROGRESS_RING_VIEWBOX_SIZE} ${PROGRESS_RING_VIEWBOX_SIZE}`,
+		width: size,
+		children: [/* @__PURE__ */ _jsx("circle", {
+			className: "stroke-border/70",
+			cx: PROGRESS_RING_CENTER,
+			cy: PROGRESS_RING_CENTER,
+			fill: "none",
+			r: PROGRESS_RING_RADIUS,
+			strokeWidth: PROGRESS_RING_STROKE_WIDTH
+		}), clampedFraction > 0 ? /* @__PURE__ */ _jsx("circle", {
+			"data-slot": "progress-ring-indicator",
+			cx: PROGRESS_RING_CENTER,
+			cy: PROGRESS_RING_CENTER,
+			fill: "none",
+			r: PROGRESS_RING_RADIUS,
+			stroke: "currentColor",
+			strokeDasharray: PROGRESS_RING_CIRCUMFERENCE,
+			strokeDashoffset: dashOffset,
+			strokeLinecap: "round",
+			strokeWidth: PROGRESS_RING_STROKE_WIDTH
+		}) : null]
+	});
+}