beez-ui 0.6.2 → 0.8.0

package/dist/components/external-browser-handoff.js

@@ -0,0 +1,306 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Full-page handoff for in-app browsers: a primary action opens the page in the default browser
+* through a deep link, and a countdown falls back to an in-app URL when the deep link does not take.
+*/
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../lib/utils.js";
+import { navigateToUrl } from "../lib/browser-navigation.js";
+import { AnimatedCount } from "./animated-count.js";
+import { Button } from "./button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_COUNTDOWN_SECONDS = 5;
+const COUNTDOWN_INTERVAL_MS = 1e3;
+/** After tapping the deep link, the page must still be visible this long to count as a failure. */
+const DEEP_LINK_FALLBACK_DELAY_MS = 2e3;
+const VISIBLE_DOCUMENT_STATE = "visible";
+/** Staggered entrance; `backwards` releases the properties so press and disabled styles keep working. */
+const ENTER_CLASS_NAME = "animate-in fade-in slide-in-from-bottom-1.5 fill-mode-backwards duration-300";
+const EXTERNAL_BROWSER_HANDOFF_DEFAULT_COPY = {
+	title: "Abrí este sitio en tu navegador",
+	description: "Para continuar, abrí este sitio en tu navegador habitual.",
+	countdownDescription: "Cuando el contador llegue a 0, vas a continuar acá mismo.",
+	primaryAction: "Continuar en tu navegador",
+	fallbackLink: "O continuá acá"
+};
+/**
+* Counts down and then follows `fallbackUrl`, unless the page was hidden because the external
+* browser opened. Repeated taps on the primary action restart one fallback window instead of
+* stacking redirects.
+* @param props - Deep link, fallback, countdown and copy.
+* @returns The handoff section.
+*/
+export function ExternalBrowserHandoff(t0) {
+	const $ = _c(48);
+	const { externalBrowserUrl, fallbackUrl, countdownSeconds: t1, copy, onFallback: t2, className } = t0;
+	const countdownSeconds = t1 === undefined ? DEFAULT_COUNTDOWN_SECONDS : t1;
+	const onFallback = t2 === undefined ? navigateToUrl : t2;
+	let t3;
+	if ($[0] !== copy) {
+		t3 = {
+			...EXTERNAL_BROWSER_HANDOFF_DEFAULT_COPY,
+			...copy
+		};
+		$[0] = copy;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	const resolvedCopy = t3;
+	const automaticFallbackTimeoutIdRef = useRef(null);
+	const primaryActionFallbackTimeoutIdRef = useRef(null);
+	const onFallbackRef = useRef(onFallback);
+	const [remainingSeconds, setRemainingSeconds] = useState(countdownSeconds);
+	let t4;
+	let t5;
+	if ($[2] !== onFallback) {
+		t4 = () => {
+			onFallbackRef.current = onFallback;
+		};
+		t5 = [onFallback];
+		$[2] = onFallback;
+		$[3] = t4;
+		$[4] = t5;
+	} else {
+		t4 = $[3];
+		t5 = $[4];
+	}
+	useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[5] !== countdownSeconds || $[6] !== fallbackUrl) {
+		t6 = () => {
+			const followFallbackIfVisible = () => {
+				if (document.visibilityState === VISIBLE_DOCUMENT_STATE) {
+					onFallbackRef.current(fallbackUrl);
+				}
+			};
+			const countdownIntervalId = window.setInterval(() => {
+				setRemainingSeconds(_temp);
+			}, COUNTDOWN_INTERVAL_MS);
+			automaticFallbackTimeoutIdRef.current = window.setTimeout(() => {
+				setRemainingSeconds(0);
+				followFallbackIfVisible();
+			}, countdownSeconds * COUNTDOWN_INTERVAL_MS);
+			return () => {
+				window.clearInterval(countdownIntervalId);
+				window.clearTimeout(automaticFallbackTimeoutIdRef.current ?? undefined);
+				automaticFallbackTimeoutIdRef.current = null;
+				window.clearTimeout(primaryActionFallbackTimeoutIdRef.current ?? undefined);
+				primaryActionFallbackTimeoutIdRef.current = null;
+			};
+		};
+		t7 = [countdownSeconds, fallbackUrl];
+		$[5] = countdownSeconds;
+		$[6] = fallbackUrl;
+		$[7] = t6;
+		$[8] = t7;
+	} else {
+		t6 = $[7];
+		t7 = $[8];
+	}
+	useEffect(t6, t7);
+	let t8;
+	if ($[9] !== fallbackUrl) {
+		t8 = () => {
+			window.clearTimeout(automaticFallbackTimeoutIdRef.current ?? undefined);
+			automaticFallbackTimeoutIdRef.current = null;
+			window.clearTimeout(primaryActionFallbackTimeoutIdRef.current ?? undefined);
+			primaryActionFallbackTimeoutIdRef.current = window.setTimeout(() => {
+				primaryActionFallbackTimeoutIdRef.current = null;
+				if (document.visibilityState === VISIBLE_DOCUMENT_STATE) {
+					onFallbackRef.current(fallbackUrl);
+				}
+			}, DEEP_LINK_FALLBACK_DELAY_MS);
+		};
+		$[9] = fallbackUrl;
+		$[10] = t8;
+	} else {
+		t8 = $[10];
+	}
+	const handlePrimaryAction = t8;
+	let t9;
+	if ($[11] !== className) {
+		t9 = cn("grid w-full place-items-center px-5 py-6", className);
+		$[11] = className;
+		$[12] = t9;
+	} else {
+		t9 = $[12];
+	}
+	let t10;
+	if ($[13] !== resolvedCopy.eyebrow) {
+		t10 = resolvedCopy.eyebrow ? /* @__PURE__ */ _jsx("p", {
+			className: cn("m-0 text-[0.78rem] font-bold tracking-[0.05em] text-muted-foreground uppercase", ENTER_CLASS_NAME),
+			children: resolvedCopy.eyebrow
+		}) : null;
+		$[13] = resolvedCopy.eyebrow;
+		$[14] = t10;
+	} else {
+		t10 = $[14];
+	}
+	let t11;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = cn("m-0 text-[clamp(1.75rem,5vw,2.5rem)] leading-[1.15] font-bold text-balance text-foreground", ENTER_CLASS_NAME, "delay-35");
+		$[15] = t11;
+	} else {
+		t11 = $[15];
+	}
+	let t12;
+	if ($[16] !== resolvedCopy.title) {
+		t12 = /* @__PURE__ */ _jsx("h1", {
+			className: t11,
+			children: resolvedCopy.title
+		});
+		$[16] = resolvedCopy.title;
+		$[17] = t12;
+	} else {
+		t12 = $[17];
+	}
+	let t13;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = cn("mx-auto my-0 max-w-md text-base leading-relaxed text-pretty text-muted-foreground", ENTER_CLASS_NAME, "delay-70");
+		$[18] = t13;
+	} else {
+		t13 = $[18];
+	}
+	let t14;
+	if ($[19] !== resolvedCopy.description) {
+		t14 = /* @__PURE__ */ _jsx("p", {
+			className: t13,
+			children: resolvedCopy.description
+		});
+		$[19] = resolvedCopy.description;
+		$[20] = t14;
+	} else {
+		t14 = $[20];
+	}
+	let t15;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = cn("mt-3 mb-2 grid max-w-md justify-items-center gap-2.5", ENTER_CLASS_NAME, "delay-105");
+		$[21] = t15;
+	} else {
+		t15 = $[21];
+	}
+	let t16;
+	if ($[22] !== remainingSeconds) {
+		t16 = /* @__PURE__ */ _jsx("span", {
+			className: "inline-flex size-18 items-center justify-center rounded-full bg-foreground text-4xl leading-none font-bold text-background tabular-nums shadow-[0_0_0_0.375rem_color-mix(in_srgb,var(--foreground)_8%,transparent)]",
+			children: /* @__PURE__ */ _jsx(AnimatedCount, { value: remainingSeconds })
+		});
+		$[22] = remainingSeconds;
+		$[23] = t16;
+	} else {
+		t16 = $[23];
+	}
+	let t17;
+	if ($[24] !== resolvedCopy.countdownDescription) {
+		t17 = /* @__PURE__ */ _jsx("p", {
+			className: "mx-auto my-0 text-[0.95rem] leading-normal text-pretty text-foreground",
+			children: resolvedCopy.countdownDescription
+		});
+		$[24] = resolvedCopy.countdownDescription;
+		$[25] = t17;
+	} else {
+		t17 = $[25];
+	}
+	let t18;
+	if ($[26] !== t16 || $[27] !== t17) {
+		t18 = /* @__PURE__ */ _jsxs("div", {
+			role: "timer",
+			className: t15,
+			children: [t16, t17]
+		});
+		$[26] = t16;
+		$[27] = t17;
+		$[28] = t18;
+	} else {
+		t18 = $[28];
+	}
+	let t19;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = cn("mt-2 w-full", ENTER_CLASS_NAME, "delay-140");
+		$[29] = t19;
+	} else {
+		t19 = $[29];
+	}
+	let t20;
+	if ($[30] !== externalBrowserUrl || $[31] !== handlePrimaryAction || $[32] !== resolvedCopy.primaryAction) {
+		t20 = /* @__PURE__ */ _jsx(Button, {
+			asChild: true,
+			size: "lg",
+			className: t19,
+			children: /* @__PURE__ */ _jsx("a", {
+				href: externalBrowserUrl,
+				onClick: handlePrimaryAction,
+				children: resolvedCopy.primaryAction
+			})
+		});
+		$[30] = externalBrowserUrl;
+		$[31] = handlePrimaryAction;
+		$[32] = resolvedCopy.primaryAction;
+		$[33] = t20;
+	} else {
+		t20 = $[33];
+	}
+	let t21;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = cn("inline-flex min-h-11 items-center rounded-[calc(var(--radius)-2px)] px-3 py-2 text-[0.9rem] text-muted-foreground underline decoration-current/40 underline-offset-[0.2rem] transition-[color,text-decoration-color] hover:text-foreground hover:decoration-current focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", ENTER_CLASS_NAME, "delay-175");
+		$[34] = t21;
+	} else {
+		t21 = $[34];
+	}
+	let t22;
+	if ($[35] !== fallbackUrl || $[36] !== resolvedCopy.fallbackLink) {
+		t22 = /* @__PURE__ */ _jsx("a", {
+			className: t21,
+			href: fallbackUrl,
+			children: resolvedCopy.fallbackLink
+		});
+		$[35] = fallbackUrl;
+		$[36] = resolvedCopy.fallbackLink;
+		$[37] = t22;
+	} else {
+		t22 = $[37];
+	}
+	let t23;
+	if ($[38] !== t10 || $[39] !== t12 || $[40] !== t14 || $[41] !== t18 || $[42] !== t20 || $[43] !== t22) {
+		t23 = /* @__PURE__ */ _jsxs("div", {
+			className: "grid w-full max-w-lg justify-items-center gap-3.5 text-center",
+			children: [
+				t10,
+				t12,
+				t14,
+				t18,
+				t20,
+				t22
+			]
+		});
+		$[38] = t10;
+		$[39] = t12;
+		$[40] = t14;
+		$[41] = t18;
+		$[42] = t20;
+		$[43] = t22;
+		$[44] = t23;
+	} else {
+		t23 = $[44];
+	}
+	let t24;
+	if ($[45] !== t23 || $[46] !== t9) {
+		t24 = /* @__PURE__ */ _jsx("section", {
+			"data-slot": "external-browser-handoff",
+			className: t9,
+			children: t23
+		});
+		$[45] = t23;
+		$[46] = t9;
+		$[47] = t24;
+	} else {
+		t24 = $[47];
+	}
+	return t24;
+}
+function _temp(currentRemainingSeconds) {
+	return Math.max(currentRemainingSeconds - 1, 0);
+}

package/dist/components/file-upload.d.ts

@@ -0,0 +1,78 @@
+/**
+ * File upload building blocks: a drop zone that validates picked or dropped files, and a list of
+ * files with upload progress, failure and retry. Uploading itself stays with the application.
+ */
+import { type ComponentProps } from "react";
+export interface FileUploadDropZoneLabels {
+    uploadAction: string;
+    /** Shown next to the action on wide screens. */
+    dragAndDrop: string;
+    /** Accessible name of the hidden file input. */
+    input: string;
+}
+export interface FileUploadDropZoneProps {
+    /** Explains which files are allowed; turns destructive after a rejected file. */
+    hint?: string;
+    isDisabled?: boolean;
+    /** Same syntax as `<input accept>`, such as `"image/*,.pdf"`. */
+    accept?: string;
+    allowsMultiple?: boolean;
+    /** Maximum file size in bytes. */
+    maxSize?: number;
+    onDropFiles?: (files: File[]) => void;
+    onDropUnacceptedFiles?: (files: File[]) => void;
+    onSizeLimitExceed?: (files: File[]) => void;
+    inputId?: string;
+    labels?: Partial<FileUploadDropZoneLabels>;
+    className?: string;
+}
+/**
+ * Renders the drop zone. The action button and a click anywhere on the zone open the native file
+ * picker; the same file can be picked again after a failure.
+ * @param props - Constraints, callbacks and optional copy.
+ * @returns The drop zone.
+ */
+export declare function FileUploadDropZone({ hint, isDisabled, accept, allowsMultiple, maxSize, onDropFiles, onDropUnacceptedFiles, onSizeLimitExceed, inputId, labels, className, }: FileUploadDropZoneProps): import("react").JSX.Element;
+export interface FileUploadItemLabels {
+    complete: string;
+    uploading: string;
+    failed: string;
+    retry: string;
+    /** Accessible name of the delete button. */
+    delete: string;
+    /** Accessible name of the progress bar. */
+    progress: string;
+}
+export interface FileUploadItemProps {
+    name: string;
+    /** Size in bytes. */
+    size: number;
+    /** Upload progress from 0 to 100. */
+    progress: number;
+    failed?: boolean;
+    onDelete?: () => void;
+    isDeleteDisabled?: boolean;
+    onRetry?: () => void;
+    locale?: string;
+    labels?: Partial<FileUploadItemLabels>;
+    className?: string;
+}
+/**
+ * Renders one file with its size, status, progress bar, delete action and, after a failure, a
+ * retry action. Place it inside `FileUploadList` so additions and removals animate.
+ * @param props - File metadata, progress, callbacks and optional copy.
+ * @returns The list item.
+ */
+export declare function FileUploadItem({ name, size, progress, failed, onDelete, isDeleteDisabled, onRetry, locale, labels, className, }: FileUploadItemProps): import("react").JSX.Element;
+/**
+ * Lays out a drop zone and its file list.
+ * @param props - Native `div` attributes.
+ * @returns The container.
+ */
+export declare function FileUpload({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * Lists `FileUploadItem`s; only files added after the first render animate in.
+ * @param props - Native `ul` attributes and the items.
+ * @returns The list.
+ */
+export declare function FileUploadList({ className, children, ...props }: ComponentProps<"ul">): import("react").JSX.Element;