@passui/react 0.1.46 → 0.2.0

package/dist/lib/presence.js

@@ -0,0 +1,53 @@
+import { useLayoutEffect, useRef, useState } from "react";
+// src/lib/presence.ts
+/**
+* Keeps a panel mounted until its CSS exit transition ends.
+*
+* `data-starting-style` is present for the first frame after mounting and
+* `data-ending-style` from the moment `open` turns false. Both are removed or
+* added by attribute only, so a transition reversed mid flight continues from
+* its current position instead of jumping. Without transitions (or without
+* `getAnimations`, as in jsdom) the panel unmounts at once.
+*/
+function usePresence(open, hooks) {
+	const ref = useRef(null);
+	const [phase, setPhase] = useState(open ? "open" : "closed");
+	const hooksRef = useRef(hooks);
+	hooksRef.current = hooks;
+	const previous = useRef(phase);
+	if (open && phase === "closed") setPhase("starting");
+	else if (open && phase === "ending") setPhase("open");
+	else if (!open && (phase === "open" || phase === "starting")) setPhase("ending");
+	useLayoutEffect(() => {
+		const was = previous.current;
+		previous.current = phase;
+		const el = ref.current;
+		if (phase === "starting") {
+			el?.getBoundingClientRect();
+			if (el) hooksRef.current?.enter?.(el);
+			setPhase("open");
+			return;
+		}
+		if (phase === "open" && was === "ending" && el) hooksRef.current?.enter?.(el);
+		if (phase !== "ending") return;
+		if (el) hooksRef.current?.exit?.(el);
+		let cancelled = false;
+		const animations = el?.getAnimations?.() ?? [];
+		if (animations.length === 0) setPhase("closed");
+		else Promise.allSettled(animations.map((a) => a.finished)).then(() => {
+			if (!cancelled) setPhase("closed");
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [phase]);
+	return {
+		ref,
+		mounted: phase !== "closed",
+		attrs: {
+			"data-starting-style": phase === "starting" ? "" : void 0,
+			"data-ending-style": phase === "ending" ? "" : void 0
+		}
+	};
+}
+export { usePresence };

package/dist/lib/range-value.js

@@ -0,0 +1,25 @@
+// src/lib/range-value.ts
+/** Keep controlled numeric inputs within finite bounds without floating-point drift. */
+function clampRange(value, min, max) {
+	if (!Number.isFinite(value)) return min;
+	return Math.min(max, Math.max(min, value));
+}
+/** The nearest reachable step from min, optionally allowing an exact maximum. */
+function stepRange(value, direction, min, max, step) {
+	const factor = 10 ** Math.min(12, Math.max(0, ...[
+		min,
+		max,
+		step
+	].map(decimalPlaces)));
+	const low = Math.round(min * factor);
+	const high = Math.round(max * factor);
+	const increment = Math.max(1, Math.round(step * factor));
+	const current = Math.round(clampRange(value, min, max) * factor);
+	const next = direction > 0 ? low + (Math.floor((current - low) / increment) + 1) * increment : low + (Math.ceil((current - low) / increment) - 1) * increment;
+	return clampRange(Math.min(high, Math.max(low, next)) / factor, min, max);
+}
+function decimalPlaces(value) {
+	const [mantissa, exponent] = String(value).toLowerCase().split("e");
+	return Math.max(0, (mantissa?.split(".")[1]?.length ?? 0) - Number(exponent ?? 0));
+}
+export { clampRange, stepRange };

package/dist/lib/render.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+type Props = Record<string, unknown>;
+/**
+ * Lets a part become the consumer's own element. Pass an element to receive
+ * the part's props merged into it, or a function that gets the props.
+ */
+export type RenderProp = ReactElement | ((props: Props) => ReactElement);
+export {};

package/dist/lib/render.js

@@ -0,0 +1,42 @@
+import { cx } from "./cx.js";
+import { cloneElement, createElement } from "react";
+// src/lib/render.ts
+function setRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* Merges two prop bags. Event handlers from both run (the element's first),
+* class names join, styles merge (the element wins) and refs both receive the node.
+*/
+function mergeProps(base, own) {
+	const merged = {
+		...base,
+		...own
+	};
+	for (const key of Object.keys(own)) {
+		const a = base[key];
+		const b = own[key];
+		if (/^on[A-Z]/.test(key) && typeof a === "function" && typeof b === "function") merged[key] = (...args) => {
+			b(...args);
+			a(...args);
+		};
+		else if (key === "className") merged[key] = cx(a, b);
+		else if (key === "style") merged[key] = {
+			...a,
+			...b
+		};
+		else if (key === "ref" && a && b) merged[key] = (node) => {
+			setRef(a, node);
+			setRef(b, node);
+		};
+	}
+	return merged;
+}
+/** Renders `tag` with `props`, or the consumer's `render` element or function in its place. */
+function renderPart(tag, props, render) {
+	if (typeof render === "function") return render(props);
+	if (render) return cloneElement(render, mergeProps(props, render.props));
+	return createElement(tag, props);
+}
+export { mergeProps, renderPart };

package/dist/lib/rolling-digit.js

@@ -0,0 +1,83 @@
+import { useMediaQuery } from "../use-media-query.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/lib/rolling-digit.tsx
+/** Counts at a place retain carries: the tens column of 1284 targets 128. */
+function digitAt(count) {
+	return (Math.floor(count) % 10 + 10) % 10;
+}
+function advanceDigit(position, velocity, target, frames) {
+	const nextVelocity = (velocity + (target - position) * .16 * frames) * .7 ** frames;
+	return {
+		position: position + nextVelocity * frames,
+		velocity: nextVelocity
+	};
+}
+/** Three recycled cells keep the strip continuous through either side of zero. */
+function RollingDigit({ count, place }) {
+	const strip = useRef(null);
+	const state = useRef({
+		position: count,
+		velocity: 0
+	});
+	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+	useEffect(() => {
+		let frame = 0;
+		let previous = 0;
+		let due = 0;
+		const paint = (position, velocity) => {
+			const node = strip.current;
+			if (!node) return;
+			const base = Math.floor(position);
+			for (let index = 0; index < node.children.length; index++) node.children[index].textContent = String(digitAt(base + index - 1));
+			node.style.transform = `translateY(${-(position - base + 1) * 100 / 3}%)`;
+			node.style.filter = `blur(${Math.min(2, Math.abs(velocity) * 1.4)}px)`;
+		};
+		if (reduced) {
+			state.current = {
+				position: count,
+				velocity: 0
+			};
+			paint(count, 0);
+			return;
+		}
+		const tick = (now) => {
+			if (!due) due = now + place * 28;
+			const frames = previous ? Math.min((now - previous) / (1e3 / 60), 2) : 1;
+			previous = now;
+			if (now >= due) {
+				state.current = advanceDigit(state.current.position, state.current.velocity, count, frames);
+				if (Math.abs(count - state.current.position) < .002 && Math.abs(state.current.velocity) < .002) {
+					state.current = {
+						position: count,
+						velocity: 0
+					};
+					paint(count, 0);
+					return;
+				}
+				paint(state.current.position, state.current.velocity);
+			}
+			frame = requestAnimationFrame(tick);
+		};
+		frame = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame);
+	}, [
+		count,
+		place,
+		reduced
+	]);
+	return /* @__PURE__ */ jsx("span", {
+		className: "relative inline-block h-[1.5em] w-[1ch] overflow-hidden align-middle",
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: strip,
+			className: "absolute inset-x-0 top-0 flex flex-col leading-[1.5em]",
+			style: { transform: "translateY(-33.333333%)" },
+			children: [
+				/* @__PURE__ */ jsx("span", { children: digitAt(count - 1) }),
+				/* @__PURE__ */ jsx("span", { children: digitAt(count) }),
+				/* @__PURE__ */ jsx("span", { children: digitAt(count + 1) })
+			]
+		})
+	});
+}
+export { RollingDigit, advanceDigit, digitAt };

package/dist/{types/src/lib → lib}/screen-edges.d.ts

@@ -1,12 +1,12 @@
 export interface ScreenEdges {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
 }
 /**
  * How far menus and popovers keep from each side of the screen: clear of
  * the status bar, gesture bar and notch, and on touch screens a little
  * further from the glass, as the systems' own menus are.
  */
-export declare function screenEdges(): ScreenEdges;
+export declare function screenEdges(): ScreenEdges;

package/dist/lib/screen-edges.js

@@ -0,0 +1,30 @@
+// src/lib/screen-edges.ts
+let probe;
+/**
+* How far menus and popovers keep from each side of the screen: clear of
+* the status bar, gesture bar and notch, and on touch screens a little
+* further from the glass, as the systems' own menus are.
+*/
+function screenEdges() {
+	const margin = typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches ? 12 : 8;
+	if (typeof document === "undefined") return {
+		top: margin,
+		right: margin,
+		bottom: margin,
+		left: margin
+	};
+	if (!probe) {
+		probe = document.createElement("div");
+		probe.setAttribute("aria-hidden", "true");
+		probe.style.cssText = "position:fixed;inset:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)";
+	}
+	if (!probe.isConnected) document.body.appendChild(probe);
+	const style = getComputedStyle(probe);
+	return {
+		top: Number.parseFloat(style.paddingTop) + margin,
+		right: Number.parseFloat(style.paddingRight) + margin,
+		bottom: Number.parseFloat(style.paddingBottom) + margin,
+		left: Number.parseFloat(style.paddingLeft) + margin
+	};
+}
+export { screenEdges };

package/dist/lib/swipe-touch-action.js

@@ -0,0 +1,34 @@
+import { useLayoutEffect } from "react";
+// src/lib/swipe-touch-action.ts
+/**
+* Lets a panel's own swipe win on a touch screen. A touch that starts a pan the
+* browser is allowed to scroll is handed to the browser, which cancels the
+* pointer events the drag needs, so the panel could only be dragged by its
+* handle. Where the content does not scroll along the swipe axis, tell the
+* browser it may only pan across that axis, and the body can be dragged too.
+* Content that does scroll keeps native scrolling; its handle still drags.
+*/
+function useSwipeTouchAction(ref, active, axis) {
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!active || !el) return;
+		const apply = () => {
+			const scrolls = axis === "y" ? el.scrollHeight > el.clientHeight + 1 : el.scrollWidth > el.clientWidth + 1;
+			el.style.touchAction = scrolls ? "" : axis === "y" ? "pan-x" : "pan-y";
+		};
+		apply();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(apply);
+		observer.observe(el);
+		for (const child of el.children) observer.observe(child);
+		return () => {
+			observer.disconnect();
+			el.style.touchAction = "";
+		};
+	}, [
+		ref,
+		active,
+		axis
+	]);
+}
+export { useSwipeTouchAction };

package/dist/lib/visual-viewport.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+// src/lib/visual-viewport.ts
+/**
+* Keeps `--visual-viewport-height` and `--visual-viewport-top` on the element
+* current, so a panel sized from them stays above the soft keyboard.
+*/
+function useVisualViewportVars(ref, enabled) {
+	useEffect(() => {
+		const el = ref.current;
+		const viewport = window.visualViewport;
+		if (!enabled || !el || !viewport) return;
+		const write = () => {
+			el.style.setProperty("--visual-viewport-height", `${viewport.height}px`);
+			el.style.setProperty("--visual-viewport-top", `${viewport.offsetTop}px`);
+		};
+		write();
+		viewport.addEventListener("resize", write);
+		viewport.addEventListener("scroll", write);
+		return () => {
+			viewport.removeEventListener("resize", write);
+			viewport.removeEventListener("scroll", write);
+			el.style.removeProperty("--visual-viewport-height");
+			el.style.removeProperty("--visual-viewport-top");
+		};
+	}, [ref, enabled]);
+}
+export { useVisualViewportVars };