@passui/react 0.1.45 → 0.1.47

package/src/index.ts

@@ -1,107 +1,107 @@
-export * from "./components/button/button"
-export * from "./components/accordion/accordion"
-export * from "./components/text-field/text-field"
-export * from "./components/secure-field/secure-field"
-export * from "./components/text-editor/text-editor"
-export * from "./components/tab-view/tab-view"
-export * from "./components/profile-image/profile-image"
-export * from "./components/search-list/search-list"
-export * from "./components/table/table"
-export * from "./components/button/icon-button"
-export * from "./components/chip/chip"
-export * from "./components/context-menu/context-menu-host"
+export * from "./components/button/button";
+export * from "./components/accordion/accordion";
+export * from "./components/text-field/text-field";
+export * from "./components/secure-field/secure-field";
+export * from "./components/text-editor/text-editor";
+export * from "./components/tab-view/tab-view";
+export * from "./components/profile-image/profile-image";
+export * from "./components/search-list/search-list";
+export * from "./components/table/table";
+export * from "./components/button/icon-button";
+export * from "./components/chip/chip";
+export * from "./components/context-menu/context-menu-host";
 export {
-    type ContextMenuItem,
-    type ContextMenuAlignX,
-    type ContextMenuAlignY,
-    type ContextMenuEdge,
-    closeContextMenu,
-    openContextMenu,
-    openFollowUpMenu,
-    openMenu,
-} from "./components/context-menu/context-menu-store"
-export * from "./components/context-menu/use-context-menu"
-export * from "./components/dialog/dialog-host"
+	type ContextMenuItem,
+	type ContextMenuAlignX,
+	type ContextMenuAlignY,
+	type ContextMenuEdge,
+	closeContextMenu,
+	openContextMenu,
+	openFollowUpMenu,
+	openMenu,
+} from "./components/context-menu/context-menu-store";
+export * from "./components/context-menu/use-context-menu";
+export * from "./components/dialog/dialog-host";
 export {
-    type ConfirmOptions,
-    confirmDialog,
-} from "./components/dialog/dialog-store"
-export * from "./components/labeled-content/labeled-content"
-export * from "./components/picker/picker"
-export * from "./components/popover/popover"
-export * from "./components/search-field/search-field"
-export * from "./components/section/section"
-export * from "./components/inline-disclosure/inline-disclosure"
-export * from "./components/disclosure-group/disclosure-group"
-export * from "./components/menu/menu"
-export * from "./components/segmented-control/segmented-control"
-export * from "./components/sheet/sheet"
-export * from "./components/sidebar/sidebar"
-export * from "./components/status-indicator/status-indicator"
-export * from "./components/swatch-picker/swatch-picker"
-export * from "./components/tab-bar/tab-bar"
+	type ConfirmOptions,
+	confirmDialog,
+} from "./components/dialog/dialog-store";
+export * from "./components/labeled-content/labeled-content";
+export * from "./components/picker/picker";
+export * from "./components/popover";
+export * from "./components/search-field/search-field";
+export * from "./components/section/section";
+export * from "./components/inline-disclosure/inline-disclosure";
+export * from "./components/disclosure-group/disclosure-group";
+export * from "./components/menu/menu";
+export * from "./components/segmented-control/segmented-control";
+export * from "./components/sheet/sheet";
+export * from "./components/sidebar/sidebar";
+export * from "./components/status-indicator/status-indicator";
+export * from "./components/swatch-picker/swatch-picker";
+export * from "./components/tab-bar/tab-bar";
 export {
-    type ToastOptions,
-    type ToastTone,
-    toast,
-} from "./components/toast/toast-store"
-export * from "./components/toast/toaster"
-export * from "./components/toggle/toggle"
-export * from "./components/slider/slider"
-export * from "./components/stepper/stepper"
-export * from "./components/progress-view/progress-view"
-export * from "./components/divider/divider"
-export * from "./components/tooltip/tooltip-host"
-export * from "./hooks/use-anchored-placement"
-export * from "./hooks/use-dismiss"
-export * from "./hooks/use-media-query"
-export * from "./icons/icons"
-export * from "./lib/anchored-placement"
-export * from "./lib/class-names"
-export * from "./lib/haptics"
-export * from "./lib/clipboard"
-export * from "./lib/screen-edges"
-export * from "./motion/transitions"
-export { AnimatePresence, motion } from "motion/react"
-export * from "./appearance"
+	type ToastOptions,
+	type ToastTone,
+	toast,
+} from "./components/toast/toast-store";
+export * from "./components/toast/toaster";
+export * from "./components/toggle/toggle";
+export * from "./components/slider/slider";
+export * from "./components/stepper/stepper";
+export * from "./components/progress-view/progress-view";
+export * from "./components/divider/divider";
+export * from "./components/tooltip/tooltip-host";
+export * from "./hooks/use-anchored-placement";
+export * from "./hooks/use-dismiss";
+export * from "./hooks/use-media-query";
+export * from "./icons/icons";
+export * from "./lib/anchored-placement";
+export * from "./lib/class-names";
+export * from "./lib/haptics";
+export * from "./lib/clipboard";
+export * from "./lib/screen-edges";
+export * from "./motion/transitions";
+export { AnimatePresence, motion } from "motion/react";
+export * from "./appearance";
 
-export * from "./components/date-picker/date-picker"
-export * from "./components/compact-date-picker/compact-date-picker"
-export * from "./components/compact-time-picker/compact-time-picker"
+export * from "./components/date-picker/date-picker";
+export * from "./components/compact-date-picker/compact-date-picker";
+export * from "./components/compact-time-picker/compact-time-picker";
 
-export { Dialog } from "./components/dialog"
+export { Dialog } from "./components/dialog";
 export type {
-    DialogProps,
-    DialogPresentation,
-    DialogTone,
-} from "./components/dialog/dialog"
+	DialogProps,
+	DialogPresentation,
+	DialogTone,
+} from "./components/dialog/dialog";
 export type {
-    ContentViewHeadingLevel,
-    ContentViewVariant,
-} from "./components/content-view/content-view"
-export type { StatTileTone } from "./components/stat-tile/stat-tile"
+	ContentViewHeadingLevel,
+	ContentViewVariant,
+} from "./components/content-view/content-view";
+export type { StatTileTone } from "./components/stat-tile/stat-tile";
 
-export * from "./hooks/use-visual-viewport"
+export * from "./hooks/use-visual-viewport";
 
-export { registerFloatingLayer } from "./lib/floating-layers"
+export { registerFloatingLayer } from "./lib/floating-layers";
 
-export * from "./hooks/use-minimize-on-scroll"
+export * from "./hooks/use-minimize-on-scroll";
 
-export * from "./components/code-block/code-block"
-export * from "./components/keyboard-shortcut/keyboard-shortcut"
-export * from "./components/content-unavailable-view/content-unavailable-view"
-export * from "./components/combo-box/combo-box"
-export * from "./components/radio-group/radio-group"
-export * from "./components/breadcrumb/breadcrumb"
-export * from "./components/skeleton/skeleton"
+export * from "./components/code-block/code-block";
+export * from "./components/keyboard-shortcut/keyboard-shortcut";
+export * from "./components/content-unavailable-view/content-unavailable-view";
+export * from "./components/combo-box/combo-box";
+export * from "./components/radio-group/radio-group";
+export * from "./components/breadcrumb/breadcrumb";
+export * from "./components/skeleton/skeleton";
 
-export * from "./components/command/command"
+export * from "./components/command/command";
 
-export * from "./components/slosh-slider/slosh-slider"
-export * from "./components/wake-slider/wake-slider"
+export * from "./components/slosh-slider/slosh-slider";
+export * from "./components/wake-slider/wake-slider";
 
-export * from "./components/one-time-code/one-time-code"
+export * from "./components/one-time-code/one-time-code";
 
-export * from "./components/aspect-ratio/aspect-ratio"
+export * from "./components/aspect-ratio/aspect-ratio";
 
-export * from "./components/morph"
+export * from "./components/morph";

package/src/lib/anchored-placement.ts

@@ -1,29 +1,29 @@
-import { screenEdges } from "./screen-edges"
+import { screenEdges } from "./screen-edges";
 
 export interface AnchoredPlacement {
-    left: number
-    width: number
-    top?: number
-    bottom?: number
-    /** Opens upward, so motion should grow from the bottom edge. */
-    above: boolean
-    /**
-     * Set when the chosen side has less room than the panel needs: the
-     * panel scrolls inside this height instead of crossing the edge.
-     */
-    maxHeight?: number
+	left: number;
+	width: number;
+	top?: number;
+	bottom?: number;
+	/** Opens upward, so motion should grow from the bottom edge. */
+	above: boolean;
+	/**
+	 * Set when the chosen side has less room than the panel needs: the
+	 * panel scrolls inside this height instead of crossing the edge.
+	 */
+	maxHeight?: number;
 }
 
 /** The measurements placement decides on, so the math stays testable. */
 export interface PlacementFrame {
-    anchor: { top: number; bottom: number; left: number }
-    viewport: { width: number; height: number }
-    edges: {
-        top: number
-        right: number
-        bottom: number
-        left: number
-    }
+	anchor: { top: number; bottom: number; left: number };
+	viewport: { width: number; height: number };
+	edges: {
+		top: number;
+		right: number;
+		bottom: number;
+		left: number;
+	};
 }
 
 /**
@@ -32,55 +32,60 @@ export interface PlacementFrame {
  * screen's safe edges.
  */
 export function placeInViewport(
-    { anchor, viewport, edges }: PlacementFrame,
-    width: number,
-    needed: number,
-    gap = 6,
-    overlap = false
+	{ anchor, viewport, edges }: PlacementFrame,
+	width: number,
+	needed: number,
+	gap = 6,
+	overlap = false,
 ): AnchoredPlacement {
-    if (overlap) gap = anchor.top - anchor.bottom
-    const fitted = Math.min(width, viewport.width - edges.left - edges.right)
-    const left = Math.min(Math.max(edges.left, anchor.left), viewport.width - fitted - edges.right)
-    const roomBelow = viewport.height - anchor.bottom - gap - edges.bottom
-    const roomAbove = anchor.top - gap - edges.top
-    const above = roomBelow < needed && roomAbove > roomBelow
-    const room = above ? roomAbove : roomBelow
-    const placement: AnchoredPlacement = {
-        left,
-        width: fitted,
-        above,
-        ...(above ? { bottom: viewport.height - anchor.top + gap } : { top: anchor.bottom + gap }),
-    }
-    if (room < needed) placement.maxHeight = room
-    return placement
+	if (overlap) gap = anchor.top - anchor.bottom;
+	const fitted = Math.min(width, viewport.width - edges.left - edges.right);
+	const left = Math.min(
+		Math.max(edges.left, anchor.left),
+		viewport.width - fitted - edges.right,
+	);
+	const roomBelow = viewport.height - anchor.bottom - gap - edges.bottom;
+	const roomAbove = anchor.top - gap - edges.top;
+	const above = roomBelow < needed && roomAbove > roomBelow;
+	const room = above ? roomAbove : roomBelow;
+	const placement: AnchoredPlacement = {
+		left,
+		width: fitted,
+		above,
+		...(above
+			? { bottom: viewport.height - anchor.top + gap }
+			: { top: anchor.bottom + gap }),
+	};
+	if (room < needed) placement.maxHeight = room;
+	return placement;
 }
 
 /** `placeInViewport` from live DOM measurements. */
 export function placeAnchored(
-    anchor: HTMLElement,
-    width: number,
-    needed: number,
-    gap = 6,
-    overlap = false
+	anchor: HTMLElement,
+	width: number,
+	needed: number,
+	gap = 6,
+	overlap = false,
 ): AnchoredPlacement {
-    const rect = anchor.getBoundingClientRect()
-    const viewport = window.visualViewport
-    return placeInViewport(
-        {
-            anchor: {
-                top: rect.top,
-                bottom: rect.bottom,
-                left: rect.left,
-            },
-            viewport: {
-                width: viewport?.width ?? window.innerWidth,
-                height: viewport?.height ?? window.innerHeight,
-            },
-            edges: screenEdges(),
-        },
-        width,
-        needed,
-        gap,
-        overlap
-    )
+	const rect = anchor.getBoundingClientRect();
+	const viewport = window.visualViewport;
+	return placeInViewport(
+		{
+			anchor: {
+				top: rect.top,
+				bottom: rect.bottom,
+				left: rect.left,
+			},
+			viewport: {
+				width: viewport?.width ?? window.innerWidth,
+				height: viewport?.height ?? window.innerHeight,
+			},
+			edges: screenEdges(),
+		},
+		width,
+		needed,
+		gap,
+		overlap,
+	);
 }

package/src/lib/class-names.ts

@@ -1,20 +1,21 @@
-import { clsx } from "clsx"
-import type { ClassValue } from "clsx"
-import { extendTailwindMerge } from "tailwind-merge"
-import { textStyles } from "@passui/tokens/typography"
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import { textStyles } from "@passui/tokens/typography";
 
 const textStyleClasses = Object.keys(textStyles).map(
-    (name) => `text-${name.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)}`
-)
+	(name) =>
+		`text-${name.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)}`,
+);
 
 const twMerge = extendTailwindMerge({
-    extend: {
-        classGroups: {
-            "font-size": textStyleClasses,
-        },
-    },
-})
+	extend: {
+		classGroups: {
+			"font-size": textStyleClasses,
+		},
+	},
+});
 
 export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }

package/src/lib/clipboard.ts

@@ -4,11 +4,12 @@
  * manual copying. This helper never reads the clipboard or adds feedback.
  */
 export async function copyText(text: string): Promise<boolean> {
-    try {
-        if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return false
-        await navigator.clipboard.writeText(text)
-        return true
-    } catch {
-        return false
-    }
+	try {
+		if (typeof navigator === "undefined" || !navigator.clipboard?.writeText)
+			return false;
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
 }

package/src/lib/date.ts

@@ -1,85 +1,86 @@
 // 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 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>
+	/** 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
+export type DatePreset = keyof typeof PRESETS;
 
-const formatters = new Map<string, Intl.DateTimeFormat>()
+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
+	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))
+	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))
+	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],
-]
+	["year", 31_536_000],
+	["month", 2_592_000],
+	["week", 604_800],
+	["day", 86_400],
+	["hour", 3_600],
+	["minute", 60],
+];
 
-let relative: Intl.RelativeTimeFormat | undefined
+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")
+	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,38 +1,53 @@
-export const FLOATING_LAYER = "data-floating-layer"
+export const FLOATING_LAYER = "data-floating-layer";
 
-const anchors = new WeakMap<Element, Element>()
+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 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
+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)))
+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
+	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))
+	if (!target || !("closest" in target) || !("contains" in target))
+		return false;
+	const element = target as Element;
+	return (
+		!anchor.contains(element) &&
+		(!surface || !belongsToFloatingSurface(surface, element))
+	);
 }