@passui/react 0.1.47 → 0.2.0

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

@@ -1,62 +0,0 @@
-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)}
-		</>
-	);
-}

package/src/components/sheet/sheet.tsx

@@ -1,165 +0,0 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { type ReactNode, useRef } from "react";
-import { useVisualViewport } from "../../hooks/use-visual-viewport";
-import { cn } from "../../lib/class-names";
-import { contentCrossfade, spring, zoomReveal } from "../../motion/transitions";
-import { SheetPortal } from "./sheet-portal";
-import { useSheetFocus } from "./use-sheet-focus";
-
-export type SheetPlacement = "adaptive" | "center";
-export type SheetSize = "sm" | "md" | "lg";
-
-const outerPaddings: Record<SheetSize, string> = {
-	sm: "p-4",
-	md: "p-6",
-	lg: "p-8",
-};
-const panelMaxWidths: Record<SheetSize, string> = {
-	sm: "max-w-sm",
-	md: "max-w-[560px]",
-	lg: "max-w-2xl",
-};
-
-export interface SheetProps {
-	/** Controls whether the sheet is presented. */
-	open: boolean;
-	/** Called on Escape or an outside press. */
-	onClose: () => void;
-	/** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
-	dismissOnOutsidePress?: boolean;
-	/** Read out by screen readers as the sheet's name. */
-	label: string;
-	/** ID of a visible heading to use instead of label for the accessible name. */
-	labelledBy?: string;
-	/** `adaptive` rises from the bottom on phones; `center` always floats. @default "adaptive" */
-	placement?: SheetPlacement;
-	/** Outer padding and panel max-width. @default "md" */
-	size?: SheetSize;
-	className?: string;
-	children: ReactNode;
-}
-
-/**
- * A modal card: rises from the bottom edge on phones and floats in the
- * middle on larger screens. Escape or a tap outside closes it.
- */
-export function Sheet({ open, ...props }: SheetProps) {
-	return (
-		<AnimatePresence>
-			{open && (
-				<SheetPortal>
-					<OpenSheet {...props} />
-				</SheetPortal>
-			)}
-		</AnimatePresence>
-	);
-}
-
-function OpenSheet({
-	onClose,
-	dismissOnOutsidePress = true,
-	label,
-	labelledBy,
-	placement = "adaptive",
-	size = "md",
-	className,
-	children,
-}: Omit<SheetProps, "open">) {
-	const panel = useRef<HTMLDivElement>(null);
-	const reducedMotion = useReducedMotion();
-	const viewport = useVisualViewport();
-	useSheetFocus(panel, onClose);
-
-	return (
-		<div
-			className={cn(
-				"fixed inset-0 z-[65] flex justify-center",
-				placement === "center"
-					? cn("items-center", outerPaddings[size])
-					: cn("items-end sm:items-center", `sm:${outerPaddings[size]}`),
-			)}
-			style={
-				viewport
-					? {
-							top: viewport.top,
-							left: viewport.left,
-							width: viewport.width,
-							height: viewport.height,
-							bottom: "auto",
-							right: "auto",
-						}
-					: undefined
-			}
-		>
-			<motion.div
-				aria-hidden="true"
-				className="absolute inset-0 bg-black/30 backdrop-blur-md"
-				initial={{ opacity: 0 }}
-				animate={{ opacity: 1 }}
-				exit={{ opacity: 0 }}
-				onClick={dismissOnOutsidePress ? onClose : undefined}
-			/>
-			<motion.div
-				ref={panel}
-				role="dialog"
-				aria-modal="true"
-				aria-label={labelledBy ? undefined : label}
-				aria-labelledby={labelledBy}
-				tabIndex={-1}
-				className={cn(
-					"glass-menu relative flex w-full flex-col overflow-hidden",
-					"max-h-[92%]",
-					panelMaxWidths[size],
-					placement === "center"
-						? "rounded-sheet"
-						: "rounded-t-sheet sm:rounded-sheet",
-					className,
-				)}
-				style={{
-					transformOrigin:
-						placement === "center" ? "center center" : "bottom center",
-				}}
-				initial={
-					reducedMotion
-						? { opacity: 0 }
-						: placement === "center"
-							? zoomReveal.initial
-							: { y: 40, opacity: 0, scale: 0.96 }
-				}
-				animate={
-					reducedMotion
-						? { opacity: 1 }
-						: placement === "center"
-							? zoomReveal.animate
-							: { y: 0, opacity: 1, scale: 1 }
-				}
-				exit={
-					reducedMotion
-						? { opacity: 0 }
-						: placement === "center"
-							? zoomReveal.exit
-							: { y: 30, opacity: 0, scale: 0.98 }
-				}
-				transition={
-					reducedMotion
-						? { duration: 0 }
-						: placement === "center"
-							? zoomReveal.transition
-							: { ...spring.bouncy, opacity: { duration: 0.18 } }
-				}
-			>
-				<motion.div
-					className="flex min-h-0 flex-1 flex-col overflow-y-auto"
-					initial={reducedMotion ? false : contentCrossfade.initial}
-					animate={reducedMotion ? undefined : contentCrossfade.animate}
-					exit={reducedMotion ? undefined : contentCrossfade.exit}
-					transition={
-						reducedMotion ? { duration: 0 } : contentCrossfade.transition
-					}
-				>
-					{children}
-				</motion.div>
-			</motion.div>
-		</div>
-	);
-}

package/src/components/sheet/use-sheet-focus.ts

@@ -1,109 +0,0 @@
-import {
-	type RefObject,
-	useEffect,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
-import { ownsFloatingLayer } from "../../lib/floating-layers";
-import { enterModalEnvironment } from "./modal-environment";
-
-const sheets: HTMLElement[] = [];
-const focusableSelector = [
-	"a[href]",
-	"button",
-	"input:not([type=hidden])",
-	"select",
-	"textarea",
-	"[tabindex]",
-	"[contenteditable=true]",
-].join(",");
-
-function focusableElements(panel: HTMLElement): HTMLElement[] {
-	return Array.from(
-		panel.querySelectorAll<HTMLElement>(focusableSelector),
-	).filter(
-		(element) =>
-			element.tabIndex >= 0 &&
-			!element.matches(":disabled") &&
-			!element.closest("[inert]") &&
-			element.getClientRects().length > 0 &&
-			getComputedStyle(element).visibility !== "hidden",
-	);
-}
-
-/** Keeps keyboard focus in the foremost sheet, including its floating pickers. */
-export function useSheetFocus(
-	panel: RefObject<HTMLDivElement | null>,
-	onClose: () => void,
-) {
-	// Capture before children mount, since a child may use autoFocus.
-	const [opener] = useState(() =>
-		typeof document === "undefined" ? null : document.activeElement,
-	);
-	const close = useRef(onClose);
-	useEffect(() => {
-		close.current = onClose;
-	}, [onClose]);
-
-	useLayoutEffect(() => {
-		const surface = panel.current;
-		if (!surface) return;
-		sheets.push(surface);
-		const foremost = () => sheets.at(-1) === surface;
-		const focusFirst = () => (focusableElements(surface)[0] ?? surface).focus();
-		const inFloatingLayer = (element: Element | null) =>
-			ownsFloatingLayer(surface, element);
-		const belongsToSheet = (element: Element | null) =>
-			surface.contains(element) || inFloatingLayer(element);
-
-		if (!surface.contains(document.activeElement))
-			surface.focus({ preventScroll: true });
-		const leaveModalEnvironment = enterModalEnvironment(surface);
-
-		const onFocus = (event: FocusEvent) => {
-			if (foremost() && !belongsToSheet(event.target as Element | null))
-				focusFirst();
-		};
-		const onKey = (event: KeyboardEvent) => {
-			if (!foremost() || event.defaultPrevented) return;
-			if (event.key === "Escape") {
-				// Floating controls handle their own Escape before the sheet.
-				if (inFloatingLayer(document.activeElement)) return;
-				event.preventDefault();
-				event.stopPropagation();
-				close.current();
-			}
-			if (event.key !== "Tab") return;
-			const controls = focusableElements(surface);
-			const first = controls[0] ?? surface;
-			const last = controls.at(-1) ?? surface;
-			const active = document.activeElement;
-			if (
-				event.shiftKey &&
-				(active === surface || active === first || !surface.contains(active))
-			) {
-				event.preventDefault();
-				last.focus();
-			} else if (
-				!event.shiftKey &&
-				(active === last || !surface.contains(active) || active === surface)
-			) {
-				event.preventDefault();
-				first.focus();
-			}
-		};
-
-		document.addEventListener("focusin", onFocus);
-		window.addEventListener("keydown", onKey);
-		return () => {
-			const wasForemost = foremost();
-			sheets.splice(sheets.indexOf(surface), 1);
-			document.removeEventListener("focusin", onFocus);
-			window.removeEventListener("keydown", onKey);
-			leaveModalEnvironment();
-			if (wasForemost && opener instanceof HTMLElement && opener.isConnected)
-				opener.focus();
-		};
-	}, [panel, opener]);
-}

package/src/components/sidebar/sidebar.tsx

@@ -1,102 +0,0 @@
-import { useId, type ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export interface SidebarSectionProps {
-	/** Visible heading for this group of navigation rows. */
-	title: string;
-	children: ReactNode;
-}
-
-export interface SidebarItemContentProps {
-	icon?: ReactNode;
-	/** Optional trailing count. */
-	count?: number;
-	/** Matches the router link's active state. */
-	active?: boolean;
-	children: ReactNode;
-}
-
-export function SidebarSection({
-	title,
-	children,
-	size = "md",
-}: SidebarSectionProps & { size?: SidebarSize }) {
-	const headingId = useId();
-	return (
-		<section aria-labelledby={headingId} className="flex flex-col gap-0.5">
-			<h2 id={headingId} className={sidebarHeadingSizes[size]}>
-				{title}
-			</h2>
-			{children}
-		</section>
-	);
-}
-
-/** Classes for a sidebar row; apply to the app's router link. */
-export type SidebarDensity = "regular" | "compact";
-export type SidebarSize = "sm" | "md" | "lg";
-
-const sidebarItemSizes: Record<SidebarSize, string> = {
-	sm: "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10",
-	md: "rounded-2xl px-2.5 py-[7px] text-subheadline",
-	lg: "rounded-2xl px-3 py-2.5 text-body [@media(pointer:coarse)]:min-h-13",
-};
-const sidebarHeadingSizes: Record<SidebarSize, string> = {
-	sm: "px-2 pb-1 text-caption2 font-semibold text-label-tertiary",
-	md: "px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary",
-	lg: "px-3 pb-2 text-subheadline font-semibold text-label-tertiary",
-};
-const sidebarCountSizes: Record<SidebarSize, string> = {
-	sm: "text-caption2 tabular-nums",
-	md: "text-footnote tabular-nums",
-	lg: "text-subheadline tabular-nums",
-};
-
-export function sidebarItemClass(
-	active?: boolean,
-	density: SidebarDensity = "regular",
-	size?: SidebarSize,
-): string {
-	const resolved = size ?? (density === "compact" ? "sm" : "md");
-	return cn(
-		"group text-label duration-fast focus-visible:outline-accent-text flex w-full items-center gap-2.5 no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
-		sidebarItemSizes[resolved],
-		active
-			? "bg-fill font-medium"
-			: "text-label-secondary hover:bg-fill/70 hover:text-label font-normal",
-	);
-}
-
-export function SidebarItemContent({
-	icon,
-	count,
-	active,
-	size = "md",
-	children,
-}: SidebarItemContentProps & { size?: SidebarSize }) {
-	return (
-		<>
-			{icon && (
-				<span
-					className={cn(
-						"flex transition-colors",
-						active ? "text-accent-text" : "text-label-secondary",
-					)}
-				>
-					{icon}
-				</span>
-			)}
-			<span className="grow truncate">{children}</span>
-			{count !== undefined && (
-				<span
-					className={cn(
-						sidebarCountSizes[size],
-						active ? "text-accent-text" : "text-label-tertiary",
-					)}
-				>
-					{count}
-				</span>
-			)}
-		</>
-	);
-}

package/src/components/skeleton/skeleton.tsx

@@ -1,38 +0,0 @@
-import type { ComponentProps } from "react";
-import { cn } from "../../lib/class-names";
-
-export type SkeletonSize = "sm" | "md" | "lg";
-
-const minHeights: Record<SkeletonSize, string> = {
-	sm: "min-h-3 rounded-md",
-	md: "min-h-4 rounded-md",
-	lg: "min-h-6 rounded-lg",
-};
-
-export interface SkeletonProps extends ComponentProps<"div"> {
-	label?: string;
-	/** Minimum height and rounding. @default "md" */
-	size?: SkeletonSize;
-}
-/** A loading placeholder that becomes still when Reduce Motion is enabled. */
-export function Skeleton({
-	label,
-	size = "md",
-	className,
-	...props
-}: SkeletonProps) {
-	return (
-		<div
-			{...props}
-			role={label ? "status" : undefined}
-			aria-hidden={label ? undefined : true}
-			className={cn(
-				"bg-fill motion-safe:animate-pulse",
-				minHeights[size],
-				className,
-			)}
-		>
-			{label && <span className="sr-only">{label}</span>}
-		</div>
-	);
-}

package/src/components/slider/slider.tsx

@@ -1,134 +0,0 @@
-import { type ComponentProps, useId } from "react";
-import { cn } from "../../lib/class-names";
-import { clampRange } from "../../lib/range-value";
-
-export type SliderSize = "sm" | "md" | "lg";
-
-const labelSizes: Record<SliderSize, string> = {
-	sm: "text-footnote font-semibold text-label",
-	md: "text-subheadline font-semibold text-label",
-	lg: "text-body font-semibold text-label",
-};
-const inputHeights: Record<SliderSize, string> = {
-	sm: "h-9",
-	md: "h-11",
-	lg: "h-13",
-};
-const descriptionSizes: Record<SliderSize, string> = {
-	sm: "text-caption2 text-label-secondary",
-	md: "text-footnote text-label-secondary",
-	lg: "text-subheadline text-label-secondary",
-};
-// Track height, thumb size, and the webkit thumb's -mt offset (derived from
-// (thumb - track) / 2: md (20-6)/2=7, sm (16-4)/2=6, lg (24-8)/2=8).
-const webkitTrack: Record<SliderSize, string> = {
-	sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-	md: "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-	lg: "[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-};
-const webkitThumb: Record<SliderSize, string> = {
-	sm: "[&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-	md: "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-	lg: "[&::-webkit-slider-thumb]:-mt-[8px] [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-};
-const mozTrack: Record<SliderSize, string> = {
-	sm: "[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-	md: "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-	lg: "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-};
-const mozProgress: Record<SliderSize, string> = {
-	sm: "[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-	md: "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-	lg: "[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-};
-const mozThumb: Record<SliderSize, string> = {
-	sm: "[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-	md: "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-	lg: "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-};
-
-export interface SliderProps
-	extends Omit<
-		ComponentProps<"input">,
-		| "type"
-		| "value"
-		| "defaultValue"
-		| "onChange"
-		| "min"
-		| "max"
-		| "step"
-		| "size"
-	> {
-	value: number;
-	onChange: (value: number) => void;
-	label: string;
-	min?: number;
-	max?: number;
-	step?: number;
-	description?: string;
-	/** Provides a localized, spoken description of the current value. */
-	formatValue?: (value: number) => string;
-	/** Track height, thumb size and label/description text scale. @default "md" */
-	size?: SliderSize;
-}
-
-/** Native keyboard, touch and pointer behavior with Passui's control treatment. */
-export function Slider({
-	value,
-	onChange,
-	label,
-	min = 0,
-	max = 100,
-	step = 1,
-	description,
-	formatValue,
-	size = "md",
-	id: suppliedId,
-	className,
-	disabled,
-	...props
-}: SliderProps) {
-	const generatedId = useId();
-	const id = suppliedId ?? generatedId;
-	const upper = Math.max(min, max);
-	const current = clampRange(value, min, upper);
-
-	return (
-		<div
-			className={cn("flex min-w-0 flex-col gap-2", disabled && "opacity-45")}
-		>
-			<label htmlFor={id} className={labelSizes[size]}>
-				{label}
-			</label>
-			<input
-				{...props}
-				id={id}
-				type="range"
-				min={min}
-				max={upper}
-				step={step > 0 ? step : 1}
-				value={current}
-				disabled={disabled || upper === min}
-				aria-valuetext={formatValue?.(current)}
-				aria-describedby={description ? `${id}-description` : undefined}
-				onChange={(event) => onChange(Number(event.currentTarget.value))}
-				className={cn(
-					"accent-accent w-full min-w-0 cursor-pointer appearance-none bg-transparent",
-					inputHeights[size],
-					"focus-visible:outline-accent-text focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2",
-					webkitTrack[size],
-					webkitThumb[size],
-					mozTrack[size],
-					mozProgress[size],
-					mozThumb[size],
-					className,
-				)}
-			/>
-			{description && (
-				<p id={`${id}-description`} className={descriptionSizes[size]}>
-					{description}
-				</p>
-			)}
-		</div>
-	);
-}

package/src/components/slosh-slider/liquid-step.ts

@@ -1,43 +0,0 @@
-import { clampRange } from "../../lib/range-value";
-
-export interface LiquidState {
-	fill: number;
-	velocity: number;
-}
-
-/** Bencho's frame-normalized liquid spring. See THIRD_PARTY_NOTICES.md. */
-export function stepLiquid(
-	state: LiquidState,
-	target: number,
-	viscosity: number,
-	dt: number,
-): LiquidState {
-	const soft = clampRange(viscosity, 0, 100) / 100;
-	target = clampRange(target, 0, 100);
-	dt = clampRange(dt, 0, 2.5);
-	if (soft === 0) {
-		/* 0 is an ordinary slider and has to be exactly that,
-           not a very stiff spring that still rings. */
-		return { fill: target, velocity: 0 };
-	}
-	/* Stiffness falls and damping rises together: thin liquid is slow to
-       answer and slow to forget, which is why these are one knob. */
-	const stiff = 0.34 - soft * 0.29;
-	const damp = 0.74 + soft * 0.22;
-	let velocity =
-		(state.velocity + (target - state.fill) * stiff * dt) * damp ** dt;
-	let fill = state.fill + velocity * dt;
-	/* The end stop is a wall, and a wall gives some back. Without this
-       the overshoot is swallowed exactly where you are looking at it. */
-	if (fill > 100) {
-		fill = 100;
-		velocity = -velocity * 0.42;
-	}
-	if (fill < 0) {
-		fill = 0;
-		velocity = -velocity * 0.42;
-	}
-	if (Math.abs(target - fill) < 0.02 && Math.abs(velocity) < 0.02)
-		return { fill: target, velocity: 0 };
-	return { fill, velocity };
-}