@passui/react 0.1.47 → 0.2.0

package/src/components/toggle/toggle.tsx

@@ -1,320 +0,0 @@
-import { CheckIcon } from "../../icons/icons";
-import {
-	animate,
-	motion,
-	useMotionValue,
-	useSpring,
-	useTransform,
-	useReducedMotion,
-} from "motion/react";
-import { useEffect, useId, useRef } from "react";
-import { cn } from "../../lib/class-names";
-import { haptic } from "../../lib/haptics";
-import { spring } from "../../motion/transitions";
-
-export type ToggleStyle = "switch" | "checkbox";
-export type ToggleSize = "sm" | "md" | "lg";
-
-const labelText: Record<ToggleSize, string> = {
-	sm: "text-footnote",
-	md: "text-subheadline",
-	lg: "text-body",
-};
-const labelGap: Record<ToggleSize, string> = {
-	sm: "gap-2",
-	md: "gap-3",
-	lg: "gap-3.5",
-};
-const checkboxBox: Record<ToggleSize, string> = {
-	sm: "size-4 rounded-sm",
-	md: "size-5 rounded-sm",
-	lg: "size-6 rounded-md",
-};
-const checkIconSize: Record<ToggleSize, number> = {
-	sm: 12,
-	md: 14,
-	lg: 16,
-};
-const mixedBar: Record<ToggleSize, string> = {
-	sm: "h-0.5 w-2",
-	md: "h-0.5 w-2.5",
-	lg: "h-0.5 w-3",
-};
-
-// Switch physics: travel = track_width - thumb_width - 2*inset.
-// md: 50 - 26 - 2 = 22 ✓  sm: 44 - 22 - 2 = 20 ✓  lg: 56 - 30 - 2 = 24 ✓
-type SwitchGeo = {
-	travel: number;
-	inset: number;
-	dropOffset: number;
-	track: string;
-	thumb: string;
-	drop: string;
-	dropTop: string;
-};
-const switchGeo: Record<ToggleSize, SwitchGeo> = {
-	sm: {
-		travel: 20,
-		inset: 2,
-		dropOffset: 4,
-		track: "h-[26px] w-[44px]",
-		thumb: "size-[22px]",
-		drop: "size-3.5",
-		dropTop: "top-[6px]",
-	},
-	md: {
-		travel: 22,
-		inset: 2,
-		dropOffset: 5,
-		track: "h-[30px] w-[50px]",
-		thumb: "size-[26px]",
-		drop: "size-4",
-		dropTop: "top-[7px]",
-	},
-	lg: {
-		travel: 24,
-		inset: 2,
-		dropOffset: 6,
-		track: "h-[34px] w-[56px]",
-		thumb: "size-[30px]",
-		drop: "size-5",
-		dropTop: "top-[8px]",
-	},
-};
-
-export interface ToggleProps {
-	/** Current on or off state. */
-	checked: boolean;
-	/** Called with the next checked state. */
-	onChange: (checked: boolean) => void;
-	/** Accessible name, including when the visible label is hidden. */
-	label: string;
-	disabled?: boolean;
-	/** `switch` for a setting, `checkbox` for a selection. @default "switch" */
-	style?: ToggleStyle;
-	/** Reports a mixed selection to assistive technology. @default false */
-	mixed?: boolean;
-	/** Keeps the accessible name while hiding the visible label. @default false */
-	labelHidden?: boolean;
-	/** Switch track size, thumb travel, checkbox box and label text scale. @default "md" */
-	size?: ToggleSize;
-	/** Custom classes for the toggle container. */
-	className?: string;
-}
-
-export function Toggle({
-	checked,
-	onChange,
-	label,
-	disabled,
-	style = "switch",
-	mixed = false,
-	labelHidden = false,
-	size = "md",
-	className,
-}: ToggleProps) {
-	const input = useRef<HTMLInputElement>(null);
-	useEffect(() => {
-		if (input.current) input.current.indeterminate = mixed;
-	}, [mixed]);
-	if (style === "checkbox") {
-		return (
-			<label
-				className={cn(
-					"flex cursor-pointer items-center",
-					labelGap[size],
-					labelText[size],
-					disabled && "cursor-not-allowed opacity-40",
-					className,
-				)}
-			>
-				<span
-					className={cn("relative inline-flex shrink-0", checkboxBox[size])}
-				>
-					<input
-						ref={input}
-						type="checkbox"
-						aria-checked={mixed ? "mixed" : checked}
-						checked={checked}
-						disabled={disabled}
-						onChange={(event) => onChange(event.target.checked)}
-						className={cn(
-							"peer cursor-inherit border-separator/80 bg-elevated checked:bg-accent indeterminate:bg-accent appearance-none border transition-colors checked:border-transparent indeterminate:border-transparent motion-reduce:transition-none",
-							checkboxBox[size],
-							"focus-visible:outline-accent-text focus-visible:outline-2 focus-visible:outline-offset-2",
-						)}
-					/>
-					{mixed ? (
-						<span
-							aria-hidden="true"
-							className={cn(
-								"bg-on-accent pointer-events-none absolute inset-0 m-auto rounded-full",
-								mixedBar[size],
-							)}
-						/>
-					) : (
-						<CheckIcon
-							aria-hidden="true"
-							size={checkIconSize[size]}
-							strokeWidth={2.5}
-							className="text-on-accent pointer-events-none absolute inset-0 m-auto opacity-0 peer-checked:opacity-100"
-						/>
-					)}
-				</span>
-				<span className={labelHidden ? "sr-only" : undefined}>{label}</span>
-			</label>
-		);
-	}
-	return (
-		<SwitchToggle
-			checked={checked}
-			onChange={onChange}
-			label={label}
-			disabled={disabled}
-			size={size}
-			className={className}
-		/>
-	);
-}
-
-function SwitchToggle({
-	checked,
-	onChange,
-	label,
-	disabled,
-	size = "md",
-	className,
-}: Pick<
-	ToggleProps,
-	"checked" | "onChange" | "label" | "disabled" | "size" | "className"
->) {
-	const reducedMotion = useReducedMotion();
-	const id = `toggle-goo-${useId().replace(/:/g, "")}`;
-	const geo = switchGeo[size];
-	const on = geo.travel;
-	const off = geo.inset;
-	const x = useMotionValue(checked ? on : off);
-	const chase = useSpring(x, spring.snappy);
-	const dropX = useTransform(chase, (value) => value + geo.dropOffset);
-	const gesture = useRef({
-		start: 0,
-		x: 0,
-		moved: false,
-		skipClick: false,
-		held: false,
-	});
-	useEffect(() => {
-		if (reducedMotion) {
-			x.set(checked ? on : off);
-			return;
-		}
-		const animation = animate(x, checked ? on : off, spring.snappy);
-		return () => animation.stop();
-	}, [checked, reducedMotion, x, on, off]);
-	const choose = (next: boolean) => {
-		if (disabled) return;
-		haptic("selection");
-		if (next !== checked) onChange(next);
-		if (reducedMotion) x.set(next ? on : off);
-		else animate(x, next ? on : off, spring.snappy);
-	};
-	return (
-		<button
-			type="button"
-			role="switch"
-			aria-checked={checked}
-			aria-label={label}
-			disabled={disabled}
-			onClick={() => {
-				if (gesture.current.skipClick) {
-					gesture.current.skipClick = false;
-					return;
-				}
-				choose(!checked);
-			}}
-			onPointerDown={(event) => {
-				if (event.button !== 0 || disabled) return;
-				event.currentTarget.setPointerCapture(event.pointerId);
-				gesture.current = {
-					start: event.clientX,
-					x: x.get(),
-					moved: false,
-					skipClick: false,
-					held: true,
-				};
-			}}
-			onPointerMove={(event) => {
-				const drag = gesture.current;
-				if (!drag.held || disabled) return;
-				const direction =
-					getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
-				const delta = (event.clientX - drag.start) * direction;
-				if (Math.abs(delta) > 3) drag.moved = true;
-				if (drag.moved) x.set(Math.max(off, Math.min(on, drag.x + delta)));
-			}}
-			onPointerUp={() => {
-				const drag = gesture.current;
-				if (!drag.held) return;
-				drag.held = false;
-				if (!drag.moved) return;
-				drag.skipClick = true;
-				choose(x.get() >= (on + off) / 2);
-			}}
-			onPointerCancel={() => {
-				gesture.current.held = false;
-				gesture.current.skipClick = false;
-				choose(checked);
-			}}
-			className={cn(
-				"duration-normal relative shrink-0 touch-pan-y rounded-full transition-colors motion-reduce:transition-none",
-				geo.track,
-				"focus-visible:ring-accent/70 focus-visible:ring-offset-background shadow-[inset_0_1px_2px_rgb(0_0_0/0.10)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none disabled:opacity-45",
-				checked ? "bg-accent" : "bg-separator/80",
-				className,
-			)}
-		>
-			<svg aria-hidden="true" width="0" height="0" className="absolute">
-				<defs>
-					<filter
-						id={id}
-						x="-50%"
-						y="-100%"
-						width="200%"
-						height="300%"
-						colorInterpolationFilters="sRGB"
-					>
-						<feGaussianBlur stdDeviation="2.5" result="smear" />
-						<feColorMatrix
-							in="smear"
-							type="matrix"
-							values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
-						/>
-					</filter>
-				</defs>
-			</svg>
-			<span
-				aria-hidden="true"
-				className="pointer-events-none absolute inset-0 rtl:-scale-x-100"
-				style={{ filter: reducedMotion ? undefined : `url(#${id})` }}
-			>
-				{!reducedMotion && (
-					<motion.span
-						className={cn(
-							"absolute left-0 rounded-full bg-white",
-							geo.dropTop,
-							geo.drop,
-						)}
-						style={{ x: dropX }}
-					/>
-				)}
-				<motion.span
-					className={cn(
-						"absolute top-0.5 left-0 rounded-full bg-white",
-						geo.thumb,
-					)}
-					style={{ x }}
-				/>
-			</span>
-		</button>
-	);
-}

package/src/components/tooltip/tooltip-host.tsx

@@ -1,178 +0,0 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { spring } from "../../motion/transitions";
-import { useEffect, useId, useState } from "react";
-import { cn } from "../../lib/class-names";
-
-export type TooltipSize = "sm" | "md" | "lg";
-
-const tooltipClasses: Record<TooltipSize, string> = {
-	sm: "pointer-events-none fixed z-[80] max-w-[200px] rounded-md bg-inverse px-2 py-1 text-center text-caption2 leading-tight font-medium text-on-inverse shadow-lg",
-	md: "pointer-events-none fixed z-[80] max-w-[240px] rounded-md bg-inverse px-2.5 py-1.5 text-center text-caption leading-tight font-medium text-on-inverse shadow-lg",
-	lg: "pointer-events-none fixed z-[80] max-w-[280px] rounded-md bg-inverse px-3 py-2 text-center text-footnote leading-tight font-medium text-on-inverse shadow-lg",
-};
-
-interface Tip {
-	text: string;
-	x: number;
-	y: number;
-	/** Shown above the element when there's no room below. */
-	above: boolean;
-	size: TooltipSize;
-}
-
-const DELAY = 450;
-/** Moving from one control to the next within this window shows at once. */
-const WARM_WINDOW = 600;
-const MARGIN = 8;
-
-/**
- * Tooltips for any element with `data-tooltip`, on devices that can hover.
- * One listener for the whole app: a short delay before the first, then
- * instant while moving between controls, as on macOS.
- */
-export function TooltipHost() {
-	const [tip, setTip] = useState<Tip | null>(null);
-	const tooltipId = useId();
-	const reducedMotion = useReducedMotion();
-
-	useEffect(() => {
-		const canHover = window.matchMedia(
-			"(hover: hover) and (pointer: fine)",
-		).matches;
-		let timer: ReturnType<typeof setTimeout> | undefined;
-		let current: Element | null = null;
-		let lastShown = 0;
-		let described: Element | null = null;
-		let previousDescription: string | null = null;
-
-		const restoreDescription = () => {
-			if (!described) return;
-			if (previousDescription === null)
-				described.removeAttribute("aria-describedby");
-			else described.setAttribute("aria-describedby", previousDescription);
-			described = null;
-		};
-
-		const show = (element: Element) => {
-			const text = element.getAttribute("data-tooltip");
-			if (!text) return;
-			const rect = element.getBoundingClientRect();
-			const above = rect.bottom + 40 > window.innerHeight;
-			const sizeAttr = element.getAttribute("data-tooltip-size");
-			const size: TooltipSize =
-				sizeAttr === "sm" || sizeAttr === "lg" ? sizeAttr : "md";
-			setTip({
-				text,
-				x: rect.left + rect.width / 2,
-				y: above ? rect.top - MARGIN : rect.bottom + MARGIN,
-				above,
-				size,
-			});
-			lastShown = Date.now();
-		};
-		const hide = () => {
-			clearTimeout(timer);
-			if (current) lastShown = Date.now();
-			current = null;
-			restoreDescription();
-			setTip(null);
-		};
-		const onOver = (event: PointerEvent) => {
-			if (!canHover) return;
-			const element =
-				(event.target as Element | null)?.closest?.("[data-tooltip]") ?? null;
-			if (element === current) return;
-			clearTimeout(timer);
-			current = element;
-			if (!element) {
-				setTip(null);
-				return;
-			}
-			const warm = Date.now() - lastShown < WARM_WINDOW;
-			if (warm) show(element);
-			else {
-				setTip(null);
-				timer = setTimeout(() => current === element && show(element), DELAY);
-			}
-		};
-		const onFocus = (event: FocusEvent) => {
-			const element =
-				(event.target as Element | null)?.closest?.("[data-tooltip]") ?? null;
-			if (!element) return;
-			hide();
-			current = element;
-			described = element;
-			previousDescription = element.getAttribute("aria-describedby");
-			element.setAttribute(
-				"aria-describedby",
-				[previousDescription, tooltipId].filter(Boolean).join(" "),
-			);
-			show(element);
-		};
-		const onBlur = (event: FocusEvent) => {
-			if (described && !described.contains(event.relatedTarget as Node | null))
-				hide();
-		};
-
-		window.document.addEventListener("pointerover", onOver);
-		window.document.addEventListener("focusin", onFocus);
-		window.document.addEventListener("focusout", onBlur);
-		window.document.addEventListener("pointerdown", hide, true);
-		window.document.addEventListener("keydown", hide, true);
-		window.addEventListener("scroll", hide, true);
-		window.addEventListener("blur", hide);
-		return () => {
-			clearTimeout(timer);
-			restoreDescription();
-			window.document.removeEventListener("pointerover", onOver);
-			window.document.removeEventListener("focusin", onFocus);
-			window.document.removeEventListener("focusout", onBlur);
-			window.document.removeEventListener("pointerdown", hide, true);
-			window.document.removeEventListener("keydown", hide, true);
-			window.removeEventListener("scroll", hide, true);
-			window.removeEventListener("blur", hide);
-		};
-	}, [tooltipId]);
-
-	return (
-		<AnimatePresence>
-			{tip && (
-				<motion.div
-					id={tooltipId}
-					key={tip.text + tip.x}
-					role="tooltip"
-					className={cn(tooltipClasses[tip.size])}
-					style={{
-						left: Math.min(Math.max(tip.x, 128), window.innerWidth - 128),
-						top: tip.y,
-						translateX: "-50%",
-						translateY: tip.above ? "-100%" : 0,
-					}}
-					initial={
-						reducedMotion
-							? false
-							: {
-									opacity: 0,
-									scale: 0.92,
-									y: tip.above ? 4 : -4,
-								}
-					}
-					animate={{ opacity: 1, scale: 1, y: 0 }}
-					exit={
-						reducedMotion
-							? { opacity: 0 }
-							: {
-									opacity: 0,
-									scale: 0.96,
-									y: tip.above ? 2 : -2,
-									transition: spring.snappy,
-								}
-					}
-					transition={reducedMotion ? { duration: 0 } : spring.snappy}
-				>
-					{tip.text}
-				</motion.div>
-			)}
-		</AnimatePresence>
-	);
-}

package/src/components/view-controller/index.ts

@@ -1 +0,0 @@
-export * from "./view-controller";

package/src/components/view-controller/view-controller.tsx

@@ -1,75 +0,0 @@
-import type { PropsWithChildren, ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-type ViewControllerProps = PropsWithChildren<{
-	heading: ReactNode;
-	className?: string;
-}>;
-
-type HeadingProps = {
-	title: ReactNode;
-	description?: ReactNode;
-	action?: ReactNode;
-	size?: keyof typeof titleSizes;
-};
-
-const titleSizes = {
-	default: "text-large-title leading-large-title",
-	// sign in style screens: centered, tighter, like a system sheet
-	compact: "text-title leading-title font-semibold tracking-tight",
-} as const;
-
-export function ViewController({
-	heading,
-	className,
-	children,
-}: ViewControllerProps) {
-	return (
-		<article
-			className={cn(
-				"container mx-auto flex flex-col",
-				"w-full gap-0 py-12 md:max-w-3xl",
-				className,
-			)}
-		>
-			{heading}
-			<div className="mt-8 flex flex-col gap-6">{children}</div>
-		</article>
-	);
-}
-
-function Heading({
-	title,
-	description,
-	action,
-	size = "default",
-}: HeadingProps) {
-	const centered = size === "compact";
-	return (
-		<>
-			<div
-				className={cn(
-					"flex flex-wrap items-center gap-3",
-					centered && "justify-center text-center",
-				)}
-			>
-				<h1 className={cn("min-w-0 wrap-anywhere", titleSizes[size])}>
-					{title}
-				</h1>
-				{action}
-			</div>
-			{description && (
-				<p
-					className={cn(
-						"text-subheadline text-label-secondary mt-0 max-w-prose leading-relaxed",
-						centered && "text-center",
-					)}
-				>
-					{description}
-				</p>
-			)}
-		</>
-	);
-}
-
-ViewController.Heading = Heading;