beez-ui 0.6.2 → 0.8.0

package/dist/components/typing-animation.js

@@ -3,6 +3,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 import { motion } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MOTION_TIMING } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const motionElements = {
@@ -19,8 +20,23 @@ const motionElements = {
 	section: motion.section,
 	span: motion.span
 };
+/** Idle cursors fade out and back in, like a text editor's caret. */
+const CURSOR_BLINK_OPACITY = [
+	1,
+	1,
+	0,
+	0,
+	1
+];
+const CURSOR_BLINK_TIMES = [
+	0,
+	.4,
+	.5,
+	.9,
+	1
+];
 export function TypingAnimation(t0) {
-	const $ = _c(67);
+	const $ = _c(68);
 	let children;
 	let className;
 	let deleteSpeed;
@@ -293,6 +309,7 @@ export function TypingAnimation(t0) {
 	const currentWordGraphemes = t19;
 	const isComplete = !loop && currentWordIndex === wordsToAnimate.length - 1 && currentCharIndex >= currentWordGraphemes.length && phase !== "deleting";
 	const shouldShowCursor = showCursor && !shouldReduceMotion && !isComplete && (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length);
+	const isCursorIdle = !shouldStart || phase === "pause" || displayedText === "";
 	let t20;
 	if ($[51] !== cursorStyle) {
 		t20 = () => {
@@ -328,20 +345,30 @@ export function TypingAnimation(t0) {
 		t23 = $[56];
 	}
 	let t24;
-	if ($[57] !== blinkCursor || $[58] !== getCursorChar || $[59] !== shouldShowCursor) {
-		t24 = shouldShowCursor && /* @__PURE__ */ _jsx("span", {
-			className: cn("inline-block", blinkCursor && "animate-blink-cursor"),
+	if ($[57] !== blinkCursor || $[58] !== getCursorChar || $[59] !== isCursorIdle || $[60] !== shouldShowCursor) {
+		t24 = shouldShowCursor && /* @__PURE__ */ _jsx(motion.span, {
+			"aria-hidden": "true",
+			"data-slot": "typing-animation-cursor",
+			className: "inline-block",
+			animate: { opacity: blinkCursor && isCursorIdle ? CURSOR_BLINK_OPACITY : 1 },
+			transition: blinkCursor && isCursorIdle ? {
+				duration: MOTION_TIMING.cursorBlink,
+				times: CURSOR_BLINK_TIMES,
+				repeat: Infinity,
+				ease: "easeInOut"
+			} : { duration: MOTION_TIMING.fast },
 			children: getCursorChar()
 		});
 		$[57] = blinkCursor;
 		$[58] = getCursorChar;
-		$[59] = shouldShowCursor;
-		$[60] = t24;
+		$[59] = isCursorIdle;
+		$[60] = shouldShowCursor;
+		$[61] = t24;
 	} else {
-		t24 = $[60];
+		t24 = $[61];
 	}
 	let t25;
-	if ($[61] !== MotionComponent || $[62] !== displayedText || $[63] !== props || $[64] !== t23 || $[65] !== t24) {
+	if ($[62] !== MotionComponent || $[63] !== displayedText || $[64] !== props || $[65] !== t23 || $[66] !== t24) {
 		t25 = /* @__PURE__ */ _jsxs(MotionComponent, {
 			ref: elementRef,
 			"data-slot": "typing-animation",
@@ -349,14 +376,14 @@ export function TypingAnimation(t0) {
 			...props,
 			children: [displayedText, t24]
 		});
-		$[61] = MotionComponent;
-		$[62] = displayedText;
-		$[63] = props;
-		$[64] = t23;
-		$[65] = t24;
-		$[66] = t25;
+		$[62] = MotionComponent;
+		$[63] = displayedText;
+		$[64] = props;
+		$[65] = t23;
+		$[66] = t24;
+		$[67] = t25;
 	} else {
-		t25 = $[66];
+		t25 = $[67];
 	}
 	return t25;
 }

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;