@passui/react 0.1.44 → 0.1.46

package/src/components/secure-field/secure-field.tsx

@@ -1,8 +1,8 @@
-import { TextField, type TextFieldProps } from "../text-field/text-field"
+import { TextField, type TextFieldProps } from "../text-field/text-field";
 
 /** TextField's native input props, with the password type managed by SecureField. */
-export type SecureFieldProps = Omit<TextFieldProps, "type">
+export type SecureFieldProps = Omit<TextFieldProps, "type">;
 
 export function SecureField(props: SecureFieldProps) {
-    return <TextField {...props} type="password" />
+	return <TextField {...props} type="password" />;
 }

package/src/components/segmented-control/segmented-control.tsx

@@ -1,46 +1,46 @@
-import { motion, useReducedMotion } from "motion/react"
-import { useId, useLayoutEffect, useRef, useState } from "react"
-import { cn } from "../../lib/class-names"
-import { haptic } from "../../lib/haptics"
-import { spring } from "../../motion/transitions"
-import { Picker } from "../picker/picker"
+import { motion, useReducedMotion } from "motion/react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../lib/class-names";
+import { haptic } from "../../lib/haptics";
+import { spring } from "../../motion/transitions";
+import { Picker } from "../picker/picker";
 
-export type SegmentedControlSize = "sm" | "md" | "lg"
+export type SegmentedControlSize = "sm" | "md" | "lg";
 
 const segmentPaddings: Record<SegmentedControlSize, string> = {
-    sm: "p-[2px]",
-    md: "p-[3px]",
-    lg: "p-[4px]",
-}
+	sm: "p-[2px]",
+	md: "p-[3px]",
+	lg: "p-[4px]",
+};
 const segmentLabelClasses: Record<SegmentedControlSize, string> = {
-    sm: "min-w-[52px] px-2 py-0.5 text-caption2 whitespace-nowrap",
-    md: "min-w-[64px] px-3 py-1 text-footnote whitespace-nowrap",
-    lg: "min-w-[80px] px-4 py-1.5 text-subheadline whitespace-nowrap",
-}
+	sm: "min-w-[52px] px-2 py-0.5 text-caption2 whitespace-nowrap",
+	md: "min-w-[64px] px-3 py-1 text-footnote whitespace-nowrap",
+	lg: "min-w-[80px] px-4 py-1.5 text-subheadline whitespace-nowrap",
+};
 const segmentRadius: Record<SegmentedControlSize, string> = {
-    sm: "rounded-sm",
-    md: "rounded-md",
-    lg: "rounded-lg",
-}
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+};
 const fallbackPickerSizes: Record<SegmentedControlSize, string> = {
-    sm: "rounded-md py-1 text-caption2 font-semibold",
-    md: "rounded-lg py-1.5 text-footnote font-semibold",
-    lg: "rounded-lg py-2 text-subheadline font-semibold",
-}
+	sm: "rounded-md py-1 text-caption2 font-semibold",
+	md: "rounded-lg py-1.5 text-footnote font-semibold",
+	lg: "rounded-lg py-2 text-subheadline font-semibold",
+};
 
 export interface SegmentedControlProps<T extends string> {
-    /** Value of the selected segment. */
-    value: T
-    /** The choices, in display order. */
-    options: ReadonlyArray<{ value: T; label: string }>
-    /** Called with the selected segment's value. */
-    onChange: (value: NoInfer<T>) => void
-    /** Accessible name for the group and its compact picker. */
-    label: string
-    /** Custom classes for the control container. */
-    className?: string
-    /** Segment padding, label text scale and min-width. @default "md" */
-    size?: SegmentedControlSize
+	/** Value of the selected segment. */
+	value: T;
+	/** The choices, in display order. */
+	options: ReadonlyArray<{ value: T; label: string }>;
+	/** Called with the selected segment's value. */
+	onChange: (value: NoInfer<T>) => void;
+	/** Accessible name for the group and its compact picker. */
+	label: string;
+	/** Custom classes for the control container. */
+	className?: string;
+	/** Segment padding, label text scale and min-width. @default "md" */
+	size?: SegmentedControlSize;
 }
 
 /**
@@ -50,108 +50,108 @@ export interface SegmentedControlProps<T extends string> {
  * squeezing or spilling its text.
  */
 export function SegmentedControl<T extends string>({
-    value,
-    options,
-    onChange,
-    label,
-    className,
-    size = "md",
+	value,
+	options,
+	onChange,
+	label,
+	className,
+	size = "md",
 }: SegmentedControlProps<T>) {
-    const id = useId()
-    const reducedMotion = useReducedMotion()
-    const frame = useRef<HTMLDivElement>(null)
-    const measure = useRef<HTMLDivElement>(null)
-    const [fits, setFits] = useState(true)
+	const id = useId();
+	const reducedMotion = useReducedMotion();
+	const frame = useRef<HTMLDivElement>(null);
+	const measure = useRef<HTMLDivElement>(null);
+	const [fits, setFits] = useState(true);
 
-    useLayoutEffect(() => {
-        const box = frame.current
-        const natural = measure.current
-        if (!box || !natural) return
-        const check = () => setFits(natural.offsetWidth <= box.clientWidth + 0.5)
-        check()
-        const observer = new ResizeObserver(check)
-        observer.observe(box)
-        observer.observe(natural)
-        return () => observer.disconnect()
-    }, [])
+	useLayoutEffect(() => {
+		const box = frame.current;
+		const natural = measure.current;
+		if (!box || !natural) return;
+		const check = () => setFits(natural.offsetWidth <= box.clientWidth + 0.5);
+		check();
+		const observer = new ResizeObserver(check);
+		observer.observe(box);
+		observer.observe(natural);
+		return () => observer.disconnect();
+	}, []);
 
-    return (
-        <div ref={frame} className={cn("relative w-full min-w-0", className)}>
-            {/* The control at its natural size, to know whether it fits. */}
-            <div
-                ref={measure}
-                aria-hidden="true"
-                className={cn(
-                    "pointer-events-none invisible absolute top-0 flex w-max font-semibold",
-                    segmentPaddings[size],
-                    segmentLabelClasses[size].replace(/min-w-\[[^\]]+\]\s*/, "")
-                )}
-            >
-                {options.map((option) => (
-                    <span key={option.value} className={segmentLabelClasses[size]}>
-                        {option.label}
-                    </span>
-                ))}
-            </div>
-            {fits ? (
-                <fieldset
-                    className={cn(
-                        "flex w-full rounded-lg bg-fill shadow-[inset_0_1px_2px_rgb(40_30_0/0.06)]",
-                        segmentPaddings[size]
-                    )}
-                >
-                    <legend className="sr-only">{label}</legend>
-                    {options.map((option) => {
-                        const selected = option.value === value
-                        return (
-                            <label
-                                key={option.value}
-                                className={cn(
-                                    "relative isolate flex-1 cursor-pointer text-center whitespace-nowrap transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent/60",
-                                    segmentLabelClasses[size].replace("whitespace-nowrap", ""),
-                                    segmentRadius[size],
-                                    selected
-                                        ? "font-semibold text-label"
-                                        : "font-medium text-label-secondary hover:text-label"
-                                )}
-                            >
-                                <input
-                                    type="radio"
-                                    name={id}
-                                    value={option.value}
-                                    checked={selected}
-                                    onChange={() => {
-                                        haptic("selection")
-                                        onChange(option.value)
-                                    }}
-                                    className="sr-only"
-                                />
-                                {selected && (
-                                    <motion.span
-                                        layoutId={`segment-${id}`}
-                                        className={cn(
-                                            "absolute inset-0 -z-10 bg-elevated shadow-[0_0_0_0.5px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.08),0_3px_8px_-2px_rgb(0_0_0/0.10)]",
-                                            segmentRadius[size]
-                                        )}
-                                        transition={reducedMotion ? { duration: 0 } : spring.snappy}
-                                    />
-                                )}
-                                {option.label}
-                            </label>
-                        )
-                    })}
-                </fieldset>
-            ) : (
-                <Picker<T>
-                    label={label}
-                    value={value}
-                    options={options}
-                    onChange={onChange}
-                    searchable={false}
-                    className={fallbackPickerSizes[size]}
-                    size={size === "sm" ? "sm" : size === "lg" ? "lg" : "md"}
-                />
-            )}
-        </div>
-    )
+	return (
+		<div ref={frame} className={cn("relative w-full min-w-0", className)}>
+			{/* The control at its natural size, to know whether it fits. */}
+			<div
+				ref={measure}
+				aria-hidden="true"
+				className={cn(
+					"pointer-events-none invisible absolute top-0 flex w-max font-semibold",
+					segmentPaddings[size],
+					segmentLabelClasses[size].replace(/min-w-\[[^\]]+\]\s*/, ""),
+				)}
+			>
+				{options.map((option) => (
+					<span key={option.value} className={segmentLabelClasses[size]}>
+						{option.label}
+					</span>
+				))}
+			</div>
+			{fits ? (
+				<fieldset
+					className={cn(
+						"bg-fill flex w-full rounded-lg shadow-[inset_0_1px_2px_rgb(40_30_0/0.06)]",
+						segmentPaddings[size],
+					)}
+				>
+					<legend className="sr-only">{label}</legend>
+					{options.map((option) => {
+						const selected = option.value === value;
+						return (
+							<label
+								key={option.value}
+								className={cn(
+									"has-[:focus-visible]:ring-accent/60 relative isolate flex-1 cursor-pointer text-center whitespace-nowrap transition-colors has-[:focus-visible]:ring-2",
+									segmentLabelClasses[size].replace("whitespace-nowrap", ""),
+									segmentRadius[size],
+									selected
+										? "text-label font-semibold"
+										: "text-label-secondary hover:text-label font-medium",
+								)}
+							>
+								<input
+									type="radio"
+									name={id}
+									value={option.value}
+									checked={selected}
+									onChange={() => {
+										haptic("selection");
+										onChange(option.value);
+									}}
+									className="sr-only"
+								/>
+								{selected && (
+									<motion.span
+										layoutId={`segment-${id}`}
+										className={cn(
+											"bg-elevated absolute inset-0 -z-10 shadow-[0_0_0_0.5px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.08),0_3px_8px_-2px_rgb(0_0_0/0.10)]",
+											segmentRadius[size],
+										)}
+										transition={reducedMotion ? { duration: 0 } : spring.snappy}
+									/>
+								)}
+								{option.label}
+							</label>
+						);
+					})}
+				</fieldset>
+			) : (
+				<Picker<T>
+					label={label}
+					value={value}
+					options={options}
+					onChange={onChange}
+					searchable={false}
+					className={fallbackPickerSizes[size]}
+					size={size === "sm" ? "sm" : size === "lg" ? "lg" : "md"}
+				/>
+			)}
+		</div>
+	);
 }

package/src/components/sheet/modal-environment.ts

@@ -1,75 +1,82 @@
-import { FLOATING_LAYER, ownsFloatingLayer } from "../../lib/floating-layers"
+import { FLOATING_LAYER, ownsFloatingLayer } from "../../lib/floating-layers";
 
-const surfaces: HTMLElement[] = []
-const isolated = new Map<HTMLElement, boolean>()
-let overflow = ""
-let overflowPriority = ""
+const surfaces: HTMLElement[] = [];
+const isolated = new Map<HTMLElement, boolean>();
+let overflow = "";
+let overflowPriority = "";
 
 function restoreBackground() {
-    for (const [element, inert] of isolated) element.inert = inert
-    isolated.clear()
+	for (const [element, inert] of isolated) element.inert = inert;
+	isolated.clear();
 }
 
 function isolateBackground() {
-    restoreBackground()
-    const surface = surfaces.at(-1)
-    if (!surface) return
-    const roots = [surface.parentElement ?? surface]
-    for (const layer of document.querySelectorAll<HTMLElement>(`[${FLOATING_LAYER}]`)) {
-        if (ownsFloatingLayer(surface, layer)) roots.push(layer)
-    }
-    const visit = (parent: HTMLElement) => {
-        for (const child of parent.children) {
-            if (!(child instanceof HTMLElement)) continue
-            if (roots.includes(child)) continue
-            if (roots.some((root) => child.contains(root))) {
-                visit(child)
-            } else if (!child.matches("script, style, link")) {
-                isolated.set(child, child.inert)
-                child.inert = true
-            }
-        }
-    }
-    visit(document.body)
+	restoreBackground();
+	const surface = surfaces.at(-1);
+	if (!surface) return;
+	const roots = [surface.parentElement ?? surface];
+	for (const layer of document.querySelectorAll<HTMLElement>(
+		`[${FLOATING_LAYER}]`,
+	)) {
+		if (ownsFloatingLayer(surface, layer)) roots.push(layer);
+	}
+	const visit = (parent: HTMLElement) => {
+		for (const child of parent.children) {
+			if (!(child instanceof HTMLElement)) continue;
+			if (roots.includes(child)) continue;
+			if (roots.some((root) => child.contains(root))) {
+				visit(child);
+			} else if (!child.matches("script, style, link")) {
+				isolated.set(child, child.inert);
+				child.inert = true;
+			}
+		}
+	};
+	visit(document.body);
 }
 
 /** Keeps nested sheets and their portaled controls above an inactive background. */
 export function enterModalEnvironment(surface: HTMLElement): () => void {
-    if (!surfaces.length) {
-        overflow = document.body.style.getPropertyValue("overflow")
-        overflowPriority = document.body.style.getPropertyPriority("overflow")
-        document.body.style.setProperty("overflow", "hidden")
-    }
-    surfaces.push(surface)
-    isolateBackground()
-    const preventBackgroundScroll = (event: WheelEvent | TouchEvent) => {
-        if (surfaces.at(-1) !== surface) return
-        const target = event.target
-        if (
-            target instanceof Element &&
-            (surface.contains(target) || ownsFloatingLayer(surface, target))
-        )
-            return
-        event.preventDefault()
-    }
-    document.addEventListener("wheel", preventBackgroundScroll, { passive: false })
-    document.addEventListener("touchmove", preventBackgroundScroll, { passive: false })
-    const observer = new MutationObserver(() => {
-        if (surfaces.at(-1) === surface) isolateBackground()
-    })
-    observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-    })
-    return () => {
-        observer.disconnect()
-        document.removeEventListener("wheel", preventBackgroundScroll)
-        document.removeEventListener("touchmove", preventBackgroundScroll)
-        surfaces.splice(surfaces.indexOf(surface), 1)
-        isolateBackground()
-        if (!surfaces.length) {
-            if (overflow) document.body.style.setProperty("overflow", overflow, overflowPriority)
-            else document.body.style.removeProperty("overflow")
-        }
-    }
+	if (!surfaces.length) {
+		overflow = document.body.style.getPropertyValue("overflow");
+		overflowPriority = document.body.style.getPropertyPriority("overflow");
+		document.body.style.setProperty("overflow", "hidden");
+	}
+	surfaces.push(surface);
+	isolateBackground();
+	const preventBackgroundScroll = (event: WheelEvent | TouchEvent) => {
+		if (surfaces.at(-1) !== surface) return;
+		const target = event.target;
+		if (
+			target instanceof Element &&
+			(surface.contains(target) || ownsFloatingLayer(surface, target))
+		)
+			return;
+		event.preventDefault();
+	};
+	document.addEventListener("wheel", preventBackgroundScroll, {
+		passive: false,
+	});
+	document.addEventListener("touchmove", preventBackgroundScroll, {
+		passive: false,
+	});
+	const observer = new MutationObserver(() => {
+		if (surfaces.at(-1) === surface) isolateBackground();
+	});
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true,
+	});
+	return () => {
+		observer.disconnect();
+		document.removeEventListener("wheel", preventBackgroundScroll);
+		document.removeEventListener("touchmove", preventBackgroundScroll);
+		surfaces.splice(surfaces.indexOf(surface), 1);
+		isolateBackground();
+		if (!surfaces.length) {
+			if (overflow)
+				document.body.style.setProperty("overflow", overflow, overflowPriority);
+			else document.body.style.removeProperty("overflow");
+		}
+	};
 }

package/src/components/sheet/sheet-portal.tsx

@@ -1,57 +1,62 @@
-import { type ReactNode, useLayoutEffect, useRef, useState } from "react"
-import { createPortal } from "react-dom"
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 
 /** Escape transformed page layers while retaining the source's scoped appearance. */
 export function SheetPortal({ children }: { children: ReactNode }) {
-    const source = useRef<HTMLSpanElement>(null)
-    const [host, setHost] = useState<HTMLDivElement | null>(null)
-    useLayoutEffect(() => {
-        const marker = source.current
-        if (!marker) return
-        const document = marker.ownerDocument
-        const layer = document.createElement("div")
-        layer.dataset.passuiOverlay = ""
-        layer.style.display = "contents"
-        const attributes = ["data-theme", "data-accent", "data-os", "dir"]
-        let properties = new Set<string>()
-        const inherit = () => {
-            for (const name of attributes) {
-                const value = marker.closest(`[${name}]`)?.getAttribute(name)
-                if (value === null || value === undefined) layer.removeAttribute(name)
-                else layer.setAttribute(name, value)
-            }
-            const computed = getComputedStyle(marker)
-            const next = new Set<string>()
-            for (const name of computed) {
-                if (!name.startsWith("--")) continue
-                next.add(name)
-                layer.style.setProperty(name, computed.getPropertyValue(name))
-            }
-            for (const name of properties) if (!next.has(name)) layer.style.removeProperty(name)
-            properties = next
-            layer.style.colorScheme = computed.colorScheme
-            layer.style.fontFamily = computed.fontFamily
-            layer.style.direction = computed.direction
-        }
-        inherit()
-        document.body.appendChild(layer)
-        setHost(layer)
-        const observer = new MutationObserver(inherit)
-        for (let ancestor = marker.parentElement; ancestor; ancestor = ancestor.parentElement) {
-            observer.observe(ancestor, {
-                attributes: true,
-                attributeFilter: [...attributes, "style", "class"],
-            })
-        }
-        return () => {
-            observer.disconnect()
-            layer.remove()
-        }
-    }, [])
-    return (
-        <>
-            <span ref={source} hidden aria-hidden="true" />
-            {host && createPortal(children, host)}
-        </>
-    )
+	const source = useRef<HTMLSpanElement>(null);
+	const [host, setHost] = useState<HTMLDivElement | null>(null);
+	useLayoutEffect(() => {
+		const marker = source.current;
+		if (!marker) return;
+		const document = marker.ownerDocument;
+		const layer = document.createElement("div");
+		layer.dataset.passuiOverlay = "";
+		layer.style.display = "contents";
+		const attributes = ["data-theme", "data-accent", "data-os", "dir"];
+		let properties = new Set<string>();
+		const inherit = () => {
+			for (const name of attributes) {
+				const value = marker.closest(`[${name}]`)?.getAttribute(name);
+				if (value === null || value === undefined) layer.removeAttribute(name);
+				else layer.setAttribute(name, value);
+			}
+			const computed = getComputedStyle(marker);
+			const next = new Set<string>();
+			for (const name of computed) {
+				if (!name.startsWith("--")) continue;
+				next.add(name);
+				layer.style.setProperty(name, computed.getPropertyValue(name));
+			}
+			for (const name of properties)
+				if (!next.has(name)) layer.style.removeProperty(name);
+			properties = next;
+			layer.style.colorScheme = computed.colorScheme;
+			layer.style.fontFamily = computed.fontFamily;
+			layer.style.direction = computed.direction;
+		};
+		inherit();
+		document.body.appendChild(layer);
+		setHost(layer);
+		const observer = new MutationObserver(inherit);
+		for (
+			let ancestor = marker.parentElement;
+			ancestor;
+			ancestor = ancestor.parentElement
+		) {
+			observer.observe(ancestor, {
+				attributes: true,
+				attributeFilter: [...attributes, "style", "class"],
+			});
+		}
+		return () => {
+			observer.disconnect();
+			layer.remove();
+		};
+	}, []);
+	return (
+		<>
+			<span ref={source} hidden aria-hidden="true" />
+			{host && createPortal(children, host)}
+		</>
+	);
 }