beez-ui 0.7.0 → 0.8.0

package/dist/components/rich-text-content.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Renders persisted rich text (markdown links plus auto-detected URLs) as plain text interleaved
+ * with safe `<a>` links. Raw HTML in the content is never interpreted as markup.
+ */
+import type { MouseEvent } from "react";
+/** Shared look of links inside rendered rich text. */
+export declare const RICH_TEXT_LINK_CLASS_NAME = "rounded-[0.2rem] text-primary underline decoration-primary/45 underline-offset-[0.18em] transition-[color,text-decoration-color] [word-break:break-word] hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+export interface RichTextContentProps {
+    content: string;
+    onLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    linkClassName?: string;
+}
+/**
+ * Renders an inline fragment instead of a wrapper element, so it composes inside any container
+ * without altering layout-sensitive behavior such as `line-clamp` on an ancestor.
+ * @param props - Stored content, optional link click handler and link class name.
+ * @returns Text and links.
+ */
+export declare function RichTextContent({ content, onLinkClick, linkClassName }: RichTextContentProps): import("react").JSX.Element;

package/dist/components/rich-text-content.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/utils.js";
+import { RICH_TEXT_SEGMENT_TYPE } from "../lib/rich-text/link-markdown-constants.js";
+import { parseRichTextSegments } from "../lib/rich-text/link-markdown.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const LINK_TARGET = "_blank";
+const LINK_REL = "noreferrer";
+/** Shared look of links inside rendered rich text. */
+export const RICH_TEXT_LINK_CLASS_NAME = "rounded-[0.2rem] text-primary underline decoration-primary/45 underline-offset-[0.18em] transition-[color,text-decoration-color] [word-break:break-word] hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+/**
+* Renders an inline fragment instead of a wrapper element, so it composes inside any container
+* without altering layout-sensitive behavior such as `line-clamp` on an ancestor.
+* @param props - Stored content, optional link click handler and link class name.
+* @returns Text and links.
+*/
+export function RichTextContent({ content, onLinkClick, linkClassName }) {
+	const segments = parseRichTextSegments(content);
+	return /* @__PURE__ */ _jsx(_Fragment, { children: segments.map((segment, segmentIndex) => segment.type === RICH_TEXT_SEGMENT_TYPE.link ? /* @__PURE__ */ _jsx("a", {
+		"data-slot": "rich-text-link",
+		className: cn(RICH_TEXT_LINK_CLASS_NAME, "font-bold decoration-[0.08em]", linkClassName),
+		href: segment.url,
+		onClick: onLinkClick,
+		rel: LINK_REL,
+		target: LINK_TARGET,
+		children: segment.text
+	}, segment.type + String(segmentIndex)) : segment.text) });
+}

package/dist/emoji-picker.d.ts

@@ -0,0 +1,27 @@
+export interface EmojiPickerLabels {
+    /** Accessible name of the trigger. */
+    chooseEmoji: string;
+    /** Accessible name of the popover. */
+    picker: string;
+    searchPlaceholder: string;
+    loading: string;
+}
+export interface EmojiPickerProps {
+    /** Currently selected emoji; empty shows a placeholder icon. */
+    value: string;
+    onChange: (emoji: string) => void;
+    /** Visible label of the field. */
+    label: string;
+    /** Keeps the label for assistive technology but hides it visually. */
+    isLabelVisuallyHidden?: boolean;
+    disabled?: boolean;
+    labels?: Partial<EmojiPickerLabels>;
+    className?: string;
+}
+/**
+ * Renders an outline trigger showing the current emoji that opens a searchable emoji popover. The
+ * chosen emoji swaps in with a short cross-fade; the picker follows the resolved color theme.
+ * @param props - Current value, change handler, label and optional copy.
+ * @returns The labelled emoji picker.
+ */
+export declare function EmojiPicker({ value, onChange, label, isLabelVisuallyHidden, disabled, labels, className, }: EmojiPickerProps): import("react").JSX.Element;

package/dist/emoji-picker.js

@@ -0,0 +1,283 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Isolates the optional `emoji-picker-react` peer from the package root: only apps importing
+* `beez-ui/emoji-picker` need it installed.
+*/
+import { lazy, Suspense, useState } from "react";
+import { SmilePlusIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "./lib/utils.js";
+import { Button } from "./components/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./components/popover.js";
+import { PresenceSwap } from "./components/presence-swap.js";
+import { BouncingDotsLoader } from "./components/bouncing-dots-loader.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Loads the picker bundle (and its emoji data) only when the popover opens for the first time. */
+const LazyEmojiPickerReact = lazy(async () => {
+	const emojiPickerModule = await import("emoji-picker-react");
+	const moduleDefault = emojiPickerModule.default;
+	return { default: "default" in moduleDefault ? moduleDefault.default : moduleDefault };
+});
+const EMOJI_PICKER_HEIGHT_PX = 360;
+/** Fills the popover, which already caps its width to the viewport on phones. */
+const EMOJI_PICKER_WIDTH = "100%";
+/** Presence key of the placeholder icon shown before an emoji is chosen. */
+const EMPTY_SELECTION_KEY = "empty";
+const DARK_THEME = "dark";
+/**
+* Picker options as the string values of the library enums. Only types are imported, so the
+* library is not evaluated until the lazy import runs (never during server rendering).
+*/
+const EMOJI_PICKER_OPTIONS = {
+	emojiStyle: "apple",
+	defaultSkinTone: "neutral",
+	skinTonePickerLocation: "SEARCH",
+	suggestedEmojisMode: "recent",
+	darkTheme: "dark",
+	lightTheme: "light"
+};
+const EMOJI_PICKER_DEFAULT_LABELS = {
+	chooseEmoji: "Elegir emoji",
+	picker: "Selector de emojis",
+	searchPlaceholder: "Buscar emoji",
+	loading: "Cargando emojis..."
+};
+/**
+* Renders an outline trigger showing the current emoji that opens a searchable emoji popover. The
+* chosen emoji swaps in with a short cross-fade; the picker follows the resolved color theme.
+* @param props - Current value, change handler, label and optional copy.
+* @returns The labelled emoji picker.
+*/
+export function EmojiPicker(t0) {
+	const $ = _c(46);
+	const { value, onChange, label, isLabelVisuallyHidden: t1, disabled: t2, labels, className } = t0;
+	const isLabelVisuallyHidden = t1 === undefined ? false : t1;
+	const disabled = t2 === undefined ? false : t2;
+	let t3;
+	if ($[0] !== labels) {
+		t3 = {
+			...EMOJI_PICKER_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	const resolvedLabels = t3;
+	const [isOpen, setIsOpen] = useState(false);
+	const { resolvedTheme } = useTheme();
+	let t4;
+	if ($[2] !== value) {
+		t4 = value.trim();
+		$[2] = value;
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	const selectedEmoji = t4;
+	let t5;
+	if ($[4] !== onChange) {
+		t5 = (emojiData) => {
+			onChange(emojiData.emoji);
+			setIsOpen(false);
+		};
+		$[4] = onChange;
+		$[5] = t5;
+	} else {
+		t5 = $[5];
+	}
+	const handleEmojiClick = t5;
+	let t6;
+	if ($[6] !== className) {
+		t6 = cn("grid w-fit min-w-0 gap-[0.4rem]", className);
+		$[6] = className;
+		$[7] = t6;
+	} else {
+		t6 = $[7];
+	}
+	const t7 = isLabelVisuallyHidden && "sr-only";
+	let t8;
+	if ($[8] !== t7) {
+		t8 = cn("text-[0.82rem] leading-tight font-semibold text-muted-foreground", t7);
+		$[8] = t7;
+		$[9] = t8;
+	} else {
+		t8 = $[9];
+	}
+	let t9;
+	if ($[10] !== label || $[11] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			className: t8,
+			children: label
+		});
+		$[10] = label;
+		$[11] = t8;
+		$[12] = t9;
+	} else {
+		t9 = $[12];
+	}
+	const t10 = selectedEmoji || EMPTY_SELECTION_KEY;
+	let t11;
+	if ($[13] !== selectedEmoji) {
+		t11 = selectedEmoji || /* @__PURE__ */ _jsx(SmilePlusIcon, {});
+		$[13] = selectedEmoji;
+		$[14] = t11;
+	} else {
+		t11 = $[14];
+	}
+	let t12;
+	if ($[15] !== t11) {
+		t12 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": true,
+			children: t11
+		});
+		$[15] = t11;
+		$[16] = t12;
+	} else {
+		t12 = $[16];
+	}
+	let t13;
+	if ($[17] !== t10 || $[18] !== t12) {
+		t13 = /* @__PURE__ */ _jsx(PresenceSwap, {
+			as: "span",
+			className: "inline-grid min-h-5 min-w-5 place-items-center text-[1.15rem] leading-none",
+			mode: "popLayout",
+			presenceKey: t10,
+			children: t12
+		});
+		$[17] = t10;
+		$[18] = t12;
+		$[19] = t13;
+	} else {
+		t13 = $[19];
+	}
+	let t14;
+	if ($[20] !== disabled || $[21] !== resolvedLabels.chooseEmoji || $[22] !== t13) {
+		t14 = /* @__PURE__ */ _jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(Button, {
+				"aria-label": resolvedLabels.chooseEmoji,
+				className: "min-h-[2.7rem] w-fit min-w-[3.25rem] justify-center gap-[0.55rem] border-border bg-background text-[0.95rem] text-foreground data-[state=open]:border-ring data-[state=open]:shadow-[0_0_0_2px_color-mix(in_srgb,var(--ring)_18%,transparent)]",
+				disabled,
+				type: "button",
+				variant: "outline",
+				children: t13
+			})
+		});
+		$[20] = disabled;
+		$[21] = resolvedLabels.chooseEmoji;
+		$[22] = t13;
+		$[23] = t14;
+	} else {
+		t14 = $[23];
+	}
+	let t15;
+	if ($[24] !== resolvedLabels.loading) {
+		t15 = /* @__PURE__ */ _jsx(BouncingDotsLoader, {
+			className: "py-10",
+			label: resolvedLabels.loading,
+			size: "sm"
+		});
+		$[24] = resolvedLabels.loading;
+		$[25] = t15;
+	} else {
+		t15 = $[25];
+	}
+	let t16;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = [];
+		$[26] = t16;
+	} else {
+		t16 = $[26];
+	}
+	let t17;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = { showPreview: false };
+		$[27] = t17;
+	} else {
+		t17 = $[27];
+	}
+	const t18 = resolvedTheme === DARK_THEME ? EMOJI_PICKER_OPTIONS.darkTheme : EMOJI_PICKER_OPTIONS.lightTheme;
+	let t19;
+	if ($[28] !== handleEmojiClick || $[29] !== resolvedLabels.searchPlaceholder || $[30] !== t18) {
+		t19 = /* @__PURE__ */ _jsx(LazyEmojiPickerReact, {
+			autoFocusSearch: true,
+			customEmojis: t16,
+			defaultSkinTone: EMOJI_PICKER_OPTIONS.defaultSkinTone,
+			emojiStyle: EMOJI_PICKER_OPTIONS.emojiStyle,
+			height: EMOJI_PICKER_HEIGHT_PX,
+			lazyLoadEmojis: true,
+			onEmojiClick: handleEmojiClick,
+			previewConfig: t17,
+			searchPlaceholder: resolvedLabels.searchPlaceholder,
+			skinTonePickerLocation: EMOJI_PICKER_OPTIONS.skinTonePickerLocation,
+			suggestedEmojisMode: EMOJI_PICKER_OPTIONS.suggestedEmojisMode,
+			theme: t18,
+			width: EMOJI_PICKER_WIDTH
+		});
+		$[28] = handleEmojiClick;
+		$[29] = resolvedLabels.searchPlaceholder;
+		$[30] = t18;
+		$[31] = t19;
+	} else {
+		t19 = $[31];
+	}
+	let t20;
+	if ($[32] !== t15 || $[33] !== t19) {
+		t20 = /* @__PURE__ */ _jsx(Suspense, {
+			fallback: t15,
+			children: t19
+		});
+		$[32] = t15;
+		$[33] = t19;
+		$[34] = t20;
+	} else {
+		t20 = $[34];
+	}
+	let t21;
+	if ($[35] !== resolvedLabels.picker || $[36] !== t20) {
+		t21 = /* @__PURE__ */ _jsx(PopoverContent, {
+			"data-slot": "emoji-picker-content",
+			align: "start",
+			"aria-label": resolvedLabels.picker,
+			className: "w-[min(20rem,calc(100vw-2rem))] overflow-hidden p-0",
+			children: t20
+		});
+		$[35] = resolvedLabels.picker;
+		$[36] = t20;
+		$[37] = t21;
+	} else {
+		t21 = $[37];
+	}
+	let t22;
+	if ($[38] !== isOpen || $[39] !== t14 || $[40] !== t21) {
+		t22 = /* @__PURE__ */ _jsxs(Popover, {
+			open: isOpen,
+			onOpenChange: setIsOpen,
+			children: [t14, t21]
+		});
+		$[38] = isOpen;
+		$[39] = t14;
+		$[40] = t21;
+		$[41] = t22;
+	} else {
+		t22 = $[41];
+	}
+	let t23;
+	if ($[42] !== t22 || $[43] !== t6 || $[44] !== t9) {
+		t23 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "emoji-picker",
+			className: t6,
+			children: [t9, t22]
+		});
+		$[42] = t22;
+		$[43] = t6;
+		$[44] = t9;
+		$[45] = t23;
+	} else {
+		t23 = $[45];
+	}
+	return t23;
+}

package/dist/hooks/use-horizontal-swipe.d.ts

@@ -0,0 +1,23 @@
+/** Recognizes one-finger horizontal swipes on touch surfaces such as pagers and calendars. */
+import { type TouchEvent } from "react";
+import { type HorizontalSwipeDirection } from "../lib/horizontal-swipe.js";
+/**
+ * Touch handlers to spread on the swipe surface.
+ */
+export type HorizontalSwipeHandlers = {
+    onTouchCancel: () => void;
+    onTouchEnd: (event: TouchEvent<HTMLElement>) => void;
+    onTouchStart: (event: TouchEvent<HTMLElement>) => void;
+};
+/**
+ * Detects horizontal one-finger swipes. Touch events are used instead of
+ * Pointer Events because browsers fire `pointercancel` as soon as they start
+ * scrolling, and WebKit (iOS Safari and every iOS browser) has only partial
+ * `touch-action` support to prevent it, while `touchend` is delivered on
+ * both engines. The handlers never call `preventDefault`, so native vertical
+ * scrolling and pinch-zoom keep working; mouse drags never trigger a swipe.
+ *
+ * @param onSwipe - Called once per recognised swipe.
+ * @returns Handlers for the swipe surface.
+ */
+export declare function useHorizontalSwipe(onSwipe: (direction: HorizontalSwipeDirection) => void): HorizontalSwipeHandlers;

package/dist/hooks/use-horizontal-swipe.js

@@ -0,0 +1,80 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Recognizes one-finger horizontal swipes on touch surfaces such as pagers and calendars. */
+import { useRef } from "react";
+import { resolveHorizontalSwipe } from "../lib/horizontal-swipe.js";
+/**
+* Detects horizontal one-finger swipes. Touch events are used instead of
+* Pointer Events because browsers fire `pointercancel` as soon as they start
+* scrolling, and WebKit (iOS Safari and every iOS browser) has only partial
+* `touch-action` support to prevent it, while `touchend` is delivered on
+* both engines. The handlers never call `preventDefault`, so native vertical
+* scrolling and pinch-zoom keep working; mouse drags never trigger a swipe.
+*
+* @param onSwipe - Called once per recognised swipe.
+* @returns Handlers for the swipe surface.
+*/
+export function useHorizontalSwipe(onSwipe) {
+	const $ = _c(6);
+	const swipeStartRef = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			swipeStartRef.current = null;
+		};
+		$[0] = t0;
+	} else {
+		t0 = $[0];
+	}
+	let t1;
+	if ($[1] !== onSwipe) {
+		t1 = (event) => {
+			const swipeStart = swipeStartRef.current;
+			const endTouch = swipeStart ? Array.from(event.changedTouches).find((touch) => touch.identifier === swipeStart.identifier) : undefined;
+			swipeStartRef.current = null;
+			if (!swipeStart || !endTouch) {
+				return;
+			}
+			const direction = resolveHorizontalSwipe({
+				deltaX: endTouch.clientX - swipeStart.x,
+				deltaY: endTouch.clientY - swipeStart.y,
+				durationMs: event.timeStamp - swipeStart.startTime
+			});
+			if (direction) {
+				onSwipe(direction);
+			}
+		};
+		$[1] = onSwipe;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (event_0) => {
+			const [firstTouch] = Array.from(event_0.touches);
+			swipeStartRef.current = event_0.touches.length === 1 && firstTouch ? {
+				identifier: firstTouch.identifier,
+				startTime: event_0.timeStamp,
+				x: firstTouch.clientX,
+				y: firstTouch.clientY
+			} : null;
+		};
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== t1) {
+		t3 = {
+			onTouchCancel: t0,
+			onTouchEnd: t1,
+			onTouchStart: t2
+		};
+		$[4] = t1;
+		$[5] = t3;
+	} else {
+		t3 = $[5];
+	}
+	return t3;
+}

package/dist/hooks/use-is-hydrated.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hydration store: the server snapshot is `false` and the client snapshot is
+ * `true`, so the first client render still matches the server markup and the
+ * component learns it is hydrated on the very next render without an effect.
+ */
+export declare function useIsHydrated(): boolean;

package/dist/hooks/use-is-hydrated.js

@@ -0,0 +1,20 @@
+"use client";
+/** Tells hydrated client renders apart from server and hydration renders without an effect. */
+import { useSyncExternalStore } from "react";
+function subscribeToNothing() {
+	return () => undefined;
+}
+function getHydratedSnapshot() {
+	return true;
+}
+function getServerHydratedSnapshot() {
+	return false;
+}
+/**
+* Hydration store: the server snapshot is `false` and the client snapshot is
+* `true`, so the first client render still matches the server markup and the
+* component learns it is hydrated on the very next render without an effect.
+*/
+export function useIsHydrated() {
+	return useSyncExternalStore(subscribeToNothing, getHydratedSnapshot, getServerHydratedSnapshot);
+}

package/dist/hooks/use-minute-clock.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Moves the clock forward to `instantTime` (epoch ms) and re-renders every
+ * consumer. Earlier instants are ignored, so the clock never goes back. Use
+ * it when a scheduled boundary is reached or the server proved that an
+ * instant already passed (for example an occurrence it reported as ended
+ * while the local clock still lagged behind).
+ *
+ * @param instantTime - Instant the clock must reach, in epoch milliseconds.
+ */
+export declare function advanceMinuteClockTo(instantTime: number): void;
+/**
+ * Current time, refreshed on every minute boundary and at the exact instant of
+ * each wake-up time that falls before the next boundary. Between boundaries it
+ * holds the minute (or the last wake-up instant) it settled on. Returns null
+ * during server rendering and hydration so time-dependent UI never produces a
+ * server/client markup mismatch; it settles to a number right after mount.
+ *
+ * @param wakeUpTimes - Instants (epoch ms) where time-dependent UI changes,
+ *   such as the end of an occurrence on screen; the clock re-renders exactly
+ *   then instead of waiting for the next minute.
+ * @returns The clock value in epoch milliseconds, or null before hydration.
+ */
+export declare function useMinuteClock(wakeUpTimes?: readonly number[]): number | null;

package/dist/hooks/use-minute-clock.js

@@ -0,0 +1,147 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Shares one minute-aligned clock across components, hydration-safe and with exact wake-ups. */
+import { useEffect, useSyncExternalStore } from "react";
+const MILLISECONDS_PER_MINUTE = 6e4;
+const NO_WAKE_UP_TIMES = [];
+const clockListeners = new Set();
+/**
+* Latest instant the clock settled on. It only moves forward: minute ticks
+* raise it to the current minute and wake-ups (or an instant the server
+* confirmed) raise it to that exact instant. Null while nobody observes the
+* clock, so a later mount starts again from the real time.
+*/
+let settledClockTime = null;
+let minuteTickTimeoutId = null;
+function truncateToMinute(time) {
+	return Math.floor(time / MILLISECONDS_PER_MINUTE) * MILLISECONDS_PER_MINUTE;
+}
+function notifyClockListeners() {
+	for (const listener of clockListeners) {
+		listener();
+	}
+}
+/**
+* Moves the clock forward to `instantTime` (epoch ms) and re-renders every
+* consumer. Earlier instants are ignored, so the clock never goes back. Use
+* it when a scheduled boundary is reached or the server proved that an
+* instant already passed (for example an occurrence it reported as ended
+* while the local clock still lagged behind).
+*
+* @param instantTime - Instant the clock must reach, in epoch milliseconds.
+*/
+export function advanceMinuteClockTo(instantTime) {
+	if (settledClockTime !== null && instantTime <= settledClockTime) {
+		return;
+	}
+	settledClockTime = instantTime;
+	notifyClockListeners();
+}
+/**
+* Schedules the next tick on the next minute boundary. Each tick measures the
+* remaining time again instead of relying on a fixed interval, so the clock
+* never lags by the mount offset and a timer that fires a little early or
+* late re-aligns on the following boundary.
+*/
+function scheduleNextMinuteTick() {
+	const currentTime = Date.now();
+	const millisecondsToNextMinute = truncateToMinute(currentTime) + MILLISECONDS_PER_MINUTE - currentTime;
+	minuteTickTimeoutId = window.setTimeout(() => {
+		scheduleNextMinuteTick();
+		notifyClockListeners();
+	}, millisecondsToNextMinute);
+}
+function stopMinuteTicks() {
+	if (minuteTickTimeoutId !== null) {
+		window.clearTimeout(minuteTickTimeoutId);
+		minuteTickTimeoutId = null;
+	}
+}
+function subscribe(onStoreChange) {
+	clockListeners.add(onStoreChange);
+	if (clockListeners.size === 1) {
+		scheduleNextMinuteTick();
+	}
+	return () => {
+		clockListeners.delete(onStoreChange);
+		if (clockListeners.size === 0) {
+			stopMinuteTicks();
+			settledClockTime = null;
+		}
+	};
+}
+function getSnapshot() {
+	const currentMinuteTime = truncateToMinute(Date.now());
+	if (settledClockTime === null || currentMinuteTime > settledClockTime) {
+		settledClockTime = currentMinuteTime;
+	}
+	return settledClockTime;
+}
+function getServerSnapshot() {
+	return null;
+}
+function findNextWakeUpTime(wakeUpTimes, nowTime) {
+	let nextWakeUpTime = null;
+	for (const wakeUpTime of wakeUpTimes) {
+		if (wakeUpTime > nowTime && (nextWakeUpTime === null || wakeUpTime < nextWakeUpTime)) {
+			nextWakeUpTime = wakeUpTime;
+		}
+	}
+	return nextWakeUpTime;
+}
+/**
+* Current time, refreshed on every minute boundary and at the exact instant of
+* each wake-up time that falls before the next boundary. Between boundaries it
+* holds the minute (or the last wake-up instant) it settled on. Returns null
+* during server rendering and hydration so time-dependent UI never produces a
+* server/client markup mismatch; it settles to a number right after mount.
+*
+* @param wakeUpTimes - Instants (epoch ms) where time-dependent UI changes,
+*   such as the end of an occurrence on screen; the clock re-renders exactly
+*   then instead of waiting for the next minute.
+* @returns The clock value in epoch milliseconds, or null before hydration.
+*/
+export function useMinuteClock(t0) {
+	const $ = _c(8);
+	const wakeUpTimes = t0 === undefined ? NO_WAKE_UP_TIMES : t0;
+	const nowTime = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+	let t1;
+	if ($[0] !== nowTime || $[1] !== wakeUpTimes) {
+		t1 = nowTime === null ? null : findNextWakeUpTime(wakeUpTimes, nowTime);
+		$[0] = nowTime;
+		$[1] = wakeUpTimes;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	const nextWakeUpTime = t1;
+	let t2;
+	if ($[3] !== nextWakeUpTime) {
+		t2 = () => {
+			if (nextWakeUpTime === null) {
+				return;
+			}
+			const millisecondsToWakeUp = nextWakeUpTime - Date.now();
+			if (millisecondsToWakeUp > MILLISECONDS_PER_MINUTE) {
+				return;
+			}
+			const wakeUpTimeoutId = window.setTimeout(() => advanceMinuteClockTo(nextWakeUpTime), Math.max(0, millisecondsToWakeUp));
+			return () => window.clearTimeout(wakeUpTimeoutId);
+		};
+		$[3] = nextWakeUpTime;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== nextWakeUpTime || $[6] !== nowTime) {
+		t3 = [nextWakeUpTime, nowTime];
+		$[5] = nextWakeUpTime;
+		$[6] = nowTime;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	return nowTime;
+}

package/dist/hooks/use-month-transition-direction.d.ts

@@ -0,0 +1,21 @@
+export declare const MONTH_TRANSITION_DIRECTION: {
+    readonly next: "next";
+    readonly none: "none";
+    readonly previous: "previous";
+};
+export type MonthTransitionDirection = (typeof MONTH_TRANSITION_DIRECTION)[keyof typeof MONTH_TRANSITION_DIRECTION];
+/**
+ * Compares two `YYYY-MM` keys, which sort chronologically as plain strings.
+ * @param fromMonth - Month shown before, or null when there is none.
+ * @param toMonth - Month shown now.
+ * @returns `next` or `previous` when the month changed, `none` otherwise.
+ */
+export declare function resolveMonthTransitionDirection(fromMonth: string | null, toMonth: string): MonthTransitionDirection;
+/**
+ * Direction of the latest month change of a calendar: a new `month` on the same instance, or a
+ * fresh mount right after another month of the same calendar was on screen.
+ * @param scopeKey - Calendar identity, so different calendars do not orient each other.
+ * @param month - Visible `YYYY-MM` month.
+ * @returns Direction to animate the month entrance with.
+ */
+export declare function useMonthTransitionDirection(scopeKey: string, month: string): MonthTransitionDirection;