beez-ui 0.6.2 → 0.8.0

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/pagination.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { type LinkProps } from "./link.js";
 import { Button } from "./button.js";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+/** Lists page links; the current page's highlight glides to the newly selected page. */
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
 export type PaginationLinkProps = {

package/dist/components/pagination.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Link } from "./link.js";
+import { GlideSlot } from "../motion/glide-slot.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
@@ -44,6 +45,7 @@ function Pagination(t0) {
 	}
 	return t2;
 }
+/** Lists page links; the current page's highlight glides to the newly selected page. */
 function PaginationContent(t0) {
 	const $ = _c(8);
 	let className;
@@ -67,10 +69,13 @@ function PaginationContent(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("ul", {
-			"data-slot": "pagination-content",
-			className: t1,
-			...props
+		t2 = /* @__PURE__ */ _jsx(GlideSlot, {
+			preset: "pagination",
+			children: /* @__PURE__ */ _jsx("ul", {
+				"data-slot": "pagination-content",
+				className: t1,
+				...props
+			})
 		});
 		$[5] = props;
 		$[6] = t1;

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]
+	});
+}

package/dist/components/pwa-update-control.d.ts

@@ -0,0 +1,18 @@
+export interface PwaUpdateControlLabels {
+    /** Short notice next to the button; hidden on narrow screens. */
+    badge?: string;
+    action?: string;
+}
+export interface PwaUpdateControlProps {
+    labels?: PwaUpdateControlLabels;
+    /** Message posted to the waiting worker so it activates. */
+    skipWaitingMessage?: unknown;
+    className?: string;
+}
+/**
+ * Renders the update notice and action once an update is waiting; nothing otherwise, including
+ * during server rendering and hydration.
+ * @param props - Optional labels, activation message and class name.
+ * @returns The update control, or nothing.
+ */
+export declare function PwaUpdateControl({ labels, skipWaitingMessage, className }: PwaUpdateControlProps): import("react").JSX.Element | null;

package/dist/components/pwa-update-control.js

@@ -0,0 +1,119 @@
+"use client";
+/**
+* Offers to apply a waiting service worker update. It stays hidden until the browser reports a
+* waiting worker, asks it to activate on demand and reloads once the new worker takes control.
+*/
+import { useEffect, useRef, useState } from "react";
+import { RefreshCw } from "lucide-react";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Message understood by Workbox and most hand-written workers to call `skipWaiting()`. */
+const DEFAULT_SKIP_WAITING_MESSAGE = { type: "SKIP_WAITING" };
+const INSTALLED_WORKER_STATE = "installed";
+const PWA_UPDATE_DEFAULT_LABELS = {
+	badge: "Hay una nueva versión",
+	action: "Actualizar app"
+};
+/**
+* Tells whether the current page can talk to service workers.
+* @returns Whether the Service Worker API is available.
+*/
+function canUseServiceWorker() {
+	return typeof window !== "undefined" && "serviceWorker" in navigator;
+}
+/**
+* Reports a waiting worker now, or as soon as a newly found one finishes installing.
+* @param registration - Registration of the current page.
+* @param onWaiting - Called when an update is ready to activate.
+* @returns A cleanup that stops watching.
+*/
+function watchForWaitingWorker(registration, onWaiting) {
+	if (registration.waiting) onWaiting();
+	const handleUpdateFound = () => {
+		const installingWorker = registration.installing;
+		if (!installingWorker) return;
+		installingWorker.addEventListener("statechange", () => {
+			// Without a controller this is the first install, not an update.
+			if (installingWorker.state === INSTALLED_WORKER_STATE && navigator.serviceWorker.controller) onWaiting();
+		});
+	};
+	registration.addEventListener("updatefound", handleUpdateFound);
+	return () => registration.removeEventListener("updatefound", handleUpdateFound);
+}
+/**
+* Renders the update notice and action once an update is waiting; nothing otherwise, including
+* during server rendering and hydration.
+* @param props - Optional labels, activation message and class name.
+* @returns The update control, or nothing.
+*/
+export function PwaUpdateControl({ labels, skipWaitingMessage = DEFAULT_SKIP_WAITING_MESSAGE, className }) {
+	const resolvedLabels = {
+		...PWA_UPDATE_DEFAULT_LABELS,
+		...labels
+	};
+	const isHydrated = useIsHydrated();
+	const [hasUpdateReady, setHasUpdateReady] = useState(false);
+	const [isApplyingUpdate, setIsApplyingUpdate] = useState(false);
+	const hasReloadedForControllerChange = useRef(false);
+	useEffect(() => {
+		if (!isHydrated || !canUseServiceWorker()) return;
+		let stopWatchingRegistration = () => {};
+		let isDisposed = false;
+		const markUpdateReady = () => {
+			if (!isDisposed) setHasUpdateReady(true);
+		};
+		const handleControllerChange = () => {
+			if (hasReloadedForControllerChange.current) return;
+			hasReloadedForControllerChange.current = true;
+			window.location.reload();
+		};
+		navigator.serviceWorker.addEventListener("controllerchange", handleControllerChange);
+		const attachUpdateWatcher = async () => {
+			const registration = await navigator.serviceWorker.getRegistration();
+			if (!registration || isDisposed) return;
+			stopWatchingRegistration = watchForWaitingWorker(registration, markUpdateReady);
+			// A failed check (offline, server error) keeps the current version without blocking the page.
+			await registration.update().catch(() => undefined);
+			if (registration.waiting) markUpdateReady();
+		};
+		void attachUpdateWatcher();
+		return () => {
+			isDisposed = true;
+			stopWatchingRegistration();
+			navigator.serviceWorker.removeEventListener("controllerchange", handleControllerChange);
+		};
+	}, [isHydrated]);
+	const applyUpdate = async () => {
+		setIsApplyingUpdate(true);
+		try {
+			const registration = await navigator.serviceWorker.getRegistration();
+			if (!registration) return;
+			if (!registration.waiting) await registration.update();
+			registration.waiting?.postMessage(skipWaitingMessage);
+		} catch (updateError) {
+			console.error("PwaUpdateControl:applyUpdate failed to activate the waiting service worker", updateError);
+		} finally {
+			setIsApplyingUpdate(false);
+		}
+	};
+	if (!isHydrated || !canUseServiceWorker() || !hasUpdateReady) return null;
+	return /* @__PURE__ */ _jsxs("div", {
+		"data-slot": "pwa-update-control",
+		className: cn("inline-flex items-center gap-[0.45rem]", className),
+		children: [/* @__PURE__ */ _jsx("span", {
+			className: "hidden items-center rounded-full border border-[color-mix(in_srgb,var(--border)_84%,var(--primary)_16%)] bg-[color-mix(in_srgb,var(--muted)_90%,var(--primary)_10%)] px-2 py-[0.1rem] text-[0.72rem] leading-tight text-[color-mix(in_srgb,var(--foreground)_78%,var(--primary)_22%)] sm:inline-flex",
+			children: resolvedLabels.badge
+		}), /* @__PURE__ */ _jsxs(Button, {
+			disabled: isApplyingUpdate,
+			size: "sm",
+			type: "button",
+			onClick: () => void applyUpdate(),
+			children: [/* @__PURE__ */ _jsx(RefreshCw, {
+				"aria-hidden": "true",
+				className: cn(isApplyingUpdate && "animate-spin")
+			}), resolvedLabels.action]
+		})]
+	});
+}

package/dist/components/radio-group.js

@@ -56,7 +56,7 @@ function RadioGroupItem(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className);
+		t1 = cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input transition-[color,background-color,border-color,box-shadow] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/reaction-button.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Toggle for likes and similar reactions: the icon pops when the viewer reacts and the counter
+ * rolls in the direction of the change. The (optimistic) reaction state is owned by the caller.
+ */
+import type { ComponentType, MouseEvent, SVGProps } from "react";
+export interface ReactionButtonProps {
+    /** Accessible name, including the current count (for example "Me gusta 3"). */
+    ariaLabel: string;
+    isActive: boolean;
+    count: number;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    isDisabled?: boolean;
+    /** Icon of the reaction. While active it is filled with the destructive color; override it with `[&_svg]:` classes. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Formats the visible count, for example with a locale-aware compact format. */
+    formatCount?: (count: number) => string;
+    className?: string;
+}
+/**
+ * Renders an outline toggle button exposing its state with `aria-pressed`. The icon starts at
+ * rest (`initial={false}`), so server-rendered and already-active reactions never pop on load;
+ * only a change to active does, and not at all with reduced motion.
+ * @param props - Accessible name, state, count, click handler and optional icon.
+ * @returns The reaction button.
+ */
+export declare function ReactionButton({ ariaLabel, isActive, count, onClick, isDisabled, icon: Icon, formatCount, className, }: ReactionButtonProps): import("react").JSX.Element;

package/dist/components/reaction-button.js

@@ -0,0 +1,114 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { HeartIcon } from "lucide-react";
+import { motion } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_TIMING } from "../motion/tokens.js";
+import { AnimatedCount } from "./animated-count.js";
+import { Button } from "./button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Peak scale the icon reaches while popping into the active state. */
+const REACTION_ICON_POP_SCALE = 1.28;
+const REACTION_ICON_VARIANTS = {
+	idle: { scale: 1 },
+	active: {
+		scale: [
+			1,
+			REACTION_ICON_POP_SCALE,
+			1
+		],
+		transition: {
+			duration: MOTION_TIMING.pop,
+			ease: MOTION_EASE
+		}
+	}
+};
+/**
+* Renders an outline toggle button exposing its state with `aria-pressed`. The icon starts at
+* rest (`initial={false}`), so server-rendered and already-active reactions never pop on load;
+* only a change to active does, and not at all with reduced motion.
+* @param props - Accessible name, state, count, click handler and optional icon.
+* @returns The reaction button.
+*/
+export function ReactionButton(t0) {
+	const $ = _c(19);
+	const { ariaLabel, isActive, count, onClick, isDisabled: t1, icon: t2, formatCount, className } = t0;
+	const isDisabled = t1 === undefined ? false : t1;
+	const Icon = t2 === undefined ? HeartIcon : t2;
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const t3 = isActive || undefined;
+	let t4;
+	if ($[0] !== className) {
+		t4 = cn("group/reaction", className);
+		$[0] = className;
+		$[1] = t4;
+	} else {
+		t4 = $[1];
+	}
+	const t5 = isActive && !shouldReduceMotion ? "active" : "idle";
+	let t6;
+	if ($[2] !== Icon) {
+		t6 = /* @__PURE__ */ _jsx(Icon, { className: "size-4 transition-[fill,color] group-data-active/reaction:fill-current group-data-active/reaction:text-destructive" });
+		$[2] = Icon;
+		$[3] = t6;
+	} else {
+		t6 = $[3];
+	}
+	let t7;
+	if ($[4] !== t5 || $[5] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(motion.span, {
+			animate: t5,
+			"aria-hidden": true,
+			className: "inline-flex origin-center items-center justify-center",
+			initial: false,
+			variants: REACTION_ICON_VARIANTS,
+			children: t6
+		});
+		$[4] = t5;
+		$[5] = t6;
+		$[6] = t7;
+	} else {
+		t7 = $[6];
+	}
+	let t8;
+	if ($[7] !== count || $[8] !== formatCount) {
+		t8 = /* @__PURE__ */ _jsx(AnimatedCount, {
+			className: "min-w-[1ch]",
+			value: count,
+			format: formatCount
+		});
+		$[7] = count;
+		$[8] = formatCount;
+		$[9] = t8;
+	} else {
+		t8 = $[9];
+	}
+	let t9;
+	if ($[10] !== ariaLabel || $[11] !== isActive || $[12] !== isDisabled || $[13] !== onClick || $[14] !== t3 || $[15] !== t4 || $[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs(Button, {
+			"data-slot": "reaction-button",
+			"data-active": t3,
+			"aria-label": ariaLabel,
+			"aria-pressed": isActive,
+			className: t4,
+			disabled: isDisabled,
+			onClick,
+			type: "button",
+			variant: "outline",
+			children: [t7, t8]
+		});
+		$[10] = ariaLabel;
+		$[11] = isActive;
+		$[12] = isDisabled;
+		$[13] = onClick;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else {
+		t9 = $[18];
+	}
+	return t9;
+}

package/dist/components/rich-link-editor.d.ts

@@ -0,0 +1,25 @@
+import type { RichLinkEditorController } from "../hooks/use-rich-link-editor.js";
+/** Copy for the link popover. Every entry is optional and defaults to Spanish. */
+export type RichLinkEditorCopy = {
+    editAction: string;
+    editCancel: string;
+    editSave: string;
+    popoverTextLabel: string;
+    popoverUrlLabel: string;
+    removeAction: string;
+};
+export type RichLinkEditorProps = {
+    ariaLabel: string;
+    copy?: Partial<RichLinkEditorCopy>;
+    editor: RichLinkEditorController;
+    placeholder: string;
+    ariaDescribedBy?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+};
+/**
+ * `contentEditable` rich link editor: renders the controller's preview segments,
+ * turning each link into a popover that edits or removes it. All state lives in
+ * the `useRichLinkEditor` controller; this component is presentation only.
+ */
+export declare function RichLinkEditor({ ariaDescribedBy, ariaLabel, copy: copyOverrides, editor, isDisabled, isInvalid, placeholder, }: RichLinkEditorProps): import("react").JSX.Element;