@passui/react 0.1.47 → 0.2.0

package/src/lib/date.ts

@@ -1,86 +0,0 @@
-// Dates through the platform's own Intl, no date library in the bundle.
-// en-US on purpose: the server renders first, so a viewer-specific locale
-// would make server and browser disagree on hydration.
-const LOCALE = "en-US";
-
-const PRESETS = {
-	/** Aug 30, 2026 */
-	PP: { dateStyle: "medium" },
-	/** August 30, 2026 */
-	PPP: { dateStyle: "long" },
-	/** Aug 30, 2026, 2:15 PM */
-	PPp: { dateStyle: "medium", timeStyle: "short" },
-	/** August 30, 2026 at 2:15 PM */
-	PPPp: { dateStyle: "long", timeStyle: "short" },
-	/** Aug 30 */
-	"MMM d": { month: "short", day: "numeric" },
-	/** Aug 30, 14:15 */
-	"MMM d, HH:mm": {
-		month: "short",
-		day: "numeric",
-		hour: "2-digit",
-		minute: "2-digit",
-		hourCycle: "h23",
-	},
-	/** Aug 30, 14:15:09 */
-	"MMM d, HH:mm:ss": {
-		month: "short",
-		day: "numeric",
-		hour: "2-digit",
-		minute: "2-digit",
-		second: "2-digit",
-		hourCycle: "h23",
-	},
-} satisfies Record<string, Intl.DateTimeFormatOptions>;
-
-export type DatePreset = keyof typeof PRESETS;
-
-const formatters = new Map<string, Intl.DateTimeFormat>();
-
-function formatter(key: string, options: Intl.DateTimeFormatOptions) {
-	let cached = formatters.get(key);
-	if (!cached) {
-		cached = new Intl.DateTimeFormat(LOCALE, options);
-		formatters.set(key, cached);
-	}
-	return cached;
-}
-
-/** A stored UTC timestamp shown as its UTC wall-clock time, whatever the viewer's timezone. */
-export function formatUtc(date: Date | string | number, preset: DatePreset) {
-	return formatter(`utc:${preset}`, {
-		...PRESETS[preset],
-		timeZone: "UTC",
-	}).format(new Date(date));
-}
-
-/** The viewer's local time of day, like 2:15 PM. */
-export function formatTime(date: Date | string | number) {
-	return formatter("local:time", {
-		timeStyle: "short",
-	}).format(new Date(date));
-}
-
-const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
-	["year", 31_536_000],
-	["month", 2_592_000],
-	["week", 604_800],
-	["day", 86_400],
-	["hour", 3_600],
-	["minute", 60],
-];
-
-let relative: Intl.RelativeTimeFormat | undefined;
-
-/** "5 minutes ago", "in 30 days": the largest whole unit that fits. */
-export function fromNow(date: Date | string | number) {
-	relative ??= new Intl.RelativeTimeFormat(LOCALE, {
-		numeric: "auto",
-	});
-	const seconds = (new Date(date).getTime() - Date.now()) / 1000;
-	for (const [unit, size] of UNITS) {
-		if (Math.abs(seconds) >= size)
-			return relative.format(Math.round(seconds / size), unit);
-	}
-	return relative.format(0, "second");
-}

package/src/lib/floating-layers.ts

@@ -1,53 +0,0 @@
-export const FLOATING_LAYER = "data-floating-layer";
-
-const anchors = new WeakMap<Element, Element>();
-
-/** Portals retain the ownership of the control that opened them. */
-export function registerFloatingLayer(
-	layer: Element,
-	anchor: Element,
-): () => void {
-	anchors.set(layer, anchor);
-	return () => anchors.delete(layer);
-}
-
-export function ownsFloatingLayer(
-	container: Element,
-	target: Element | null,
-): boolean {
-	let layer = target?.closest(`[${FLOATING_LAYER}]`);
-	const visited = new Set<Element>();
-	while (layer && !visited.has(layer)) {
-		visited.add(layer);
-		const anchor = anchors.get(layer);
-		if (!anchor) return false;
-		if (container.contains(anchor)) return true;
-		layer = anchor.closest(`[${FLOATING_LAYER}]`);
-	}
-	return false;
-}
-
-/** An element belongs to a surface either directly or through a portaled child layer. */
-export function belongsToFloatingSurface(
-	surface: Element,
-	target: Element | null,
-): boolean {
-	return Boolean(
-		target && (surface.contains(target) || ownsFloatingLayer(surface, target)),
-	);
-}
-
-/** Whether a pointer target is outside both an anchored surface and its nested portals. */
-export function isOutsideFloatingSurface(
-	surface: Element | null,
-	anchor: Element,
-	target: EventTarget | null,
-): boolean {
-	if (!target || !("closest" in target) || !("contains" in target))
-		return false;
-	const element = target as Element;
-	return (
-		!anchor.contains(element) &&
-		(!surface || !belongsToFloatingSurface(surface, element))
-	);
-}

package/src/lib/haptics.ts

@@ -1,23 +0,0 @@
-/** The feedback kinds the systems share, from a selection tick to an error. */
-export type HapticKind =
-	| "selection"
-	| "light"
-	| "medium"
-	| "heavy"
-	| "success"
-	| "warning"
-	| "error";
-
-let player: (kind: HapticKind) => void = () => {};
-
-/**
- * Components only ask for feedback; the app decides how it plays on this
- * device (system haptics, a vibration, or nothing) and whether it's on.
- */
-export function setHapticPlayer(next: (kind: HapticKind) => void): void {
-	player = next;
-}
-
-export function haptic(kind: HapticKind): void {
-	player(kind);
-}

package/src/lib/language.ts

@@ -1,16 +0,0 @@
-/** A language's name in itself, capitalized: "Français", "中文". */
-export function getNativeLanguageName(tag: string) {
-	const name = new Intl.DisplayNames([tag], {
-		type: "language",
-	}).of(tag);
-	return name ? name.charAt(0).toUpperCase() + name.slice(1) : tag;
-}
-
-/** A language's name as read in `displayLocale`: "French" in English. */
-export function getLocalizedLanguageName(tag: string, displayLocale: string) {
-	return (
-		new Intl.DisplayNames([displayLocale], {
-			type: "language",
-		}).of(tag) ?? tag
-	);
-}

package/src/lib/range-value.ts

@@ -1,38 +0,0 @@
-/** Keep controlled numeric inputs within finite bounds without floating-point drift. */
-export function clampRange(value: number, min: number, max: number): number {
-	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. */
-export function stepRange(
-	value: number,
-	direction: -1 | 1,
-	min: number,
-	max: number,
-	step: number,
-): number {
-	const precision = Math.min(
-		12,
-		Math.max(0, ...[min, max, step].map(decimalPlaces)),
-	);
-	const factor = 10 ** precision;
-	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: number): number {
-	const text = String(value);
-	const [mantissa, exponent] = text.toLowerCase().split("e");
-	return Math.max(
-		0,
-		(mantissa?.split(".")[1]?.length ?? 0) - Number(exponent ?? 0),
-	);
-}

package/src/lib/screen-edges.ts

@@ -1,44 +0,0 @@
-export interface ScreenEdges {
-	top: number;
-	right: number;
-	bottom: number;
-	left: number;
-}
-
-let probe: HTMLDivElement | undefined;
-
-/**
- * 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 function screenEdges(): 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,
-	};
-}

package/src/lib/shapes.ts

@@ -1,59 +0,0 @@
-/** Material 3 expressive outlines: a circle and the scalloped "cookie", "clover", and "sunny" shapes. */
-export const shapes = [
-	"circle",
-	"cookie4",
-	"cookie6",
-	"cookie9",
-	"clover",
-	"sunny",
-	/** Reserved for the Pherus mark itself, so it never matches a project's icon. */
-	"cookie12",
-] as const;
-
-export type Shape = (typeof shapes)[number];
-
-/** Lobe count and wave depth (as a fraction of the radius) for each wavy shape. */
-const waves: Record<
-	Exclude<Shape, "circle">,
-	{ lobes: number; depth: number }
-> = {
-	cookie4: { lobes: 4, depth: 0.08 },
-	cookie6: { lobes: 6, depth: 0.07 },
-	cookie9: { lobes: 9, depth: 0.055 },
-	clover: { lobes: 4, depth: 0.16 },
-	sunny: { lobes: 8, depth: 0.045 },
-	cookie12: { lobes: 12, depth: 0.04 },
-};
-
-const STEPS = 144;
-
-/**
- * An SVG path for a Material 3 expressive shape centred on (cx, cy): a circle
- * whose radius rides a cosine wave, which gives the soft scalloped "cookie",
- * "clover", and "sunny" outlines. The wave is normalised so every shape fills
- * the same `r`, keeping icons optically the same size.
- */
-export function shapePath(shape: Shape, cx: number, cy: number, r: number) {
-	if (shape === "circle") {
-		return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0 Z`;
-	}
-
-	const { lobes, depth } = waves[shape];
-	const base = r / (1 + depth);
-	const points: string[] = [];
-	for (let i = 0; i < STEPS; i++) {
-		const theta = (i / STEPS) * Math.PI * 2 - Math.PI / 2;
-		const radius = base * (1 + depth * Math.cos(lobes * (theta + Math.PI / 2)));
-		const x = cx + radius * Math.cos(theta);
-		const y = cy + radius * Math.sin(theta);
-		points.push(`${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`);
-	}
-	return `${points.join(" ")} Z`;
-}
-
-/**
- * The app wide `dualTone` rule dims every svg path for two tone icons; a
- * drawn shape or illustration opts out with this so its colors stay true.
- */
-export const plainSvg =
-	"cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none";

package/src/machines/popover.machine.ts

@@ -1,51 +0,0 @@
-/**
- * Popover state machine — pure function, no React, no DOM.
- *
- * Translates directly to a Rust enum with match arms.
- *
- * States:
- *   closed   → nothing visible
- *   opening  → surface morphing from trigger to content
- *   open     → content fully visible
- *   closing  → surface morphing back to trigger
- *
- * The OPENED/CLOSED events are fired by onAnimationComplete,
- * so the machine stays in "opening"/"closing" until the animation
- * actually finishes — enabling interruptibility (close during open).
- */
-export type PopoverState = "closed" | "opening" | "open" | "closing";
-
-export type PopoverEvent = "OPEN" | "OPENED" | "CLOSE" | "CLOSED" | "TOGGLE";
-
-export function popoverMachine(
-	state: PopoverState,
-	event: PopoverEvent,
-): PopoverState {
-	switch (state) {
-		case "closed":
-			return event === "OPEN" || event === "TOGGLE" ? "opening" : "closed";
-		case "opening":
-			if (event === "CLOSE" || event === "TOGGLE") return "closing";
-			if (event === "OPENED") return "open";
-			return "opening";
-		case "open":
-			return event === "CLOSE" || event === "TOGGLE" ? "closing" : "open";
-		case "closing":
-			if (event === "OPEN" || event === "TOGGLE") return "opening";
-			if (event === "CLOSED") return "closed";
-			return "closing";
-	}
-}
-
-export type PopoverContextValue = {
-	state: PopoverState;
-	send: (event: PopoverEvent) => void;
-	/** The trigger element — set by PopoverTrigger, read by PopoverContent for positioning. */
-	triggerRef: React.RefObject<HTMLElement | null>;
-	/** Unique ID for aria-controls + layoutId morphing. */
-	contentId: string;
-	/** Shared layoutId for motion's matched-geometry transition. */
-	surfaceId: string;
-	/** Whether the popover is open or transitioning (not closed). */
-	isPresent: boolean;
-};

package/src/motion/transitions.ts

@@ -1,97 +0,0 @@
-import { springs } from "@passui/tokens/motion";
-import type { Transition } from "motion/react";
-
-/** Design-token springs as motion/react transitions. */
-export const spring = {
-	smooth: { type: "spring", ...springs.smooth },
-	snappy: { type: "spring", ...springs.snappy },
-	bouncy: { type: "spring", ...springs.bouncy },
-} as const satisfies Record<keyof typeof springs, Transition>;
-
-/**
- * Apple's fluid overshoot: cubic-bezier(0.34, 1.56, 0.1, 1).
- * Replaces traditional ease profiles with an authentic fluid bounce
- * that overshoots and settles, matching Apple's custom interface physics.
- * Used for zoom/matched-geometry transitions where the surface emerges
- * from the trigger and snaps into place with a physical bounce.
- */
-export const fluidOvershoot = {
-	duration: 0.4,
-	ease: [0.34, 1.56, 0.1, 1] as [number, number, number, number],
-} as const;
-
-/**
- * Exit motion: content collapses back toward its source.
- * The surface shrinks toward the trigger's position while fading,
- * like a water drop absorbing back into its origin.
- */
-export const fluidCollapse = {
-	duration: 0.28,
-	ease: [0.4, 0, 0.6, 1] as [number, number, number, number],
-} as const;
-
-export type FloatingPanelSide = "above" | "below";
-
-/**
- * Anchored panels settle toward their source without shrinking their text.
- * Now uses origin-based scaling: the panel grows from the trigger's
- * position (transform-origin set by the caller) with a scale + opacity
- * crossfade, rather than a plain slide.
- */
-export function floatingPanelMotion(side: FloatingPanelSide = "below") {
-	const direction = side === "above" ? 1 : -1;
-	return {
-		initial: { opacity: 0, scale: 0.92, y: direction * 6 },
-		animate: { opacity: 1, scale: 1, y: 0 },
-		exit: { opacity: 0, scale: 0.95, y: direction * 4 },
-		transition: {
-			...fluidOvershoot,
-			opacity: {
-				duration: 0.16,
-				ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
-			},
-		},
-	} as const;
-}
-
-/** Default below-anchor presentation, retained for existing consumers. */
-export const popoverMotion = floatingPanelMotion();
-
-/**
- * Zoom/matched-geometry transition for dialogs and center-placed sheets.
- * The surface starts small (scale 0.88) and invisible, then grows to
- * full size with the fluid overshoot bounce. Content elements inside
- * crossfade in slightly delayed so they phase into visibility
- * asynchronously — not a harsh switch.
- */
-export const zoomReveal = {
-	initial: { opacity: 0, scale: 0.88 },
-	animate: { opacity: 1, scale: 1 },
-	exit: { opacity: 0, scale: 0.92 },
-	transition: fluidOvershoot,
-} as const;
-
-/**
- * Content crossfade for elements inside an overlay.
- * Rather than a harsh switch, sub-elements scale and phase into
- * visibility asynchronously. Use for children of dialogs, sheets,
- * and popovers — the container arrives first, then content fades in.
- */
-export const contentCrossfade = {
-	initial: { opacity: 0, scale: 0.96 },
-	animate: { opacity: 1, scale: 1 },
-	exit: { opacity: 0, scale: 0.98 },
-	transition: {
-		duration: 0.24,
-		ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
-		delay: 0.04,
-	},
-} as const;
-
-/** Floating bars that rise from the bottom edge. */
-export const riseMotion = {
-	initial: { opacity: 0, y: 32 },
-	animate: { opacity: 1, y: 0 },
-	exit: { opacity: 0, y: 24 },
-	transition: spring.smooth,
-} as const;

package/src/tokens.ts

@@ -1 +0,0 @@
-export * from "@passui/tokens";