@passui/react 0.1.47 → 0.2.0

package/src/appearance/theme.tsx

@@ -1,467 +0,0 @@
-import * as React from "react";
-import {
-	createContext,
-	memo,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-} from "react";
-import type {
-	Dispatch,
-	PropsWithChildren,
-	ReactNode,
-	SetStateAction,
-} from "react";
-
-type ValueObject = {
-	[themeName: string]: string;
-};
-
-/**
- * Props for the useTheme hook
- * @author la niina
- */
-export type UseThemeProps = {
-	/** List of all available theme names */
-	themes: Array<string>;
-	/** Forced theme name for the current page */
-	forcedTheme?: string | undefined;
-	/** Update the theme */
-	setTheme: Dispatch<SetStateAction<string>>;
-	/** Active theme name */
-	theme?: string | undefined;
-	/** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
-	systemTheme?: SystemTheme | undefined;
-};
-
-export type SystemTheme = "dark" | "light";
-
-export type Attribute = `data-${string}` | "class";
-
-export interface ThemeProviderProps extends PropsWithChildren {
-	/** List of all available theme names */
-	themes?: Array<string> | undefined;
-	/** Forced theme name for the current page */
-	forcedTheme?: string | undefined;
-	/** Whether to switch between dark and light themes based on prefers-color-scheme */
-	enableSystem?: boolean | undefined;
-	/** Disable all CSS transitions when switching themes */
-	disableTransitionOnChange?: boolean | undefined;
-	/** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
-	enableColorScheme?: boolean | undefined;
-	/** Key used to store theme setting in localStorage */
-	storageKey?: string | undefined;
-	/** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
-	defaultTheme?: string | undefined;
-	/** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
-	attribute?: Attribute | Array<Attribute> | undefined;
-	/** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
-	value?: ValueObject | undefined;
-	/** Nonce string to pass to the inline script for CSP headers */
-	nonce?: string | undefined;
-}
-
-const colorSchemes = ["light", "dark"];
-const MEDIA = "(prefers-color-scheme: dark)";
-const isServer = typeof window === "undefined";
-const ThemeContext = createContext<UseThemeProps | undefined>(undefined);
-const defaultContext: UseThemeProps = {
-	setTheme: () => {
-		/* no-op */
-	},
-	themes: [],
-};
-
-/**
- * Hook to access the theme context
- * @returns {UseThemeProps} theme context
- * @example
- * const { theme, setTheme } = useTheme()
- */
-export const useTheme = (): UseThemeProps =>
-	useContext(ThemeContext) ?? defaultContext;
-
-/**
- * Theme provider component is used to wrap your app &
- * provide theme context to all components. It can be used to switch
- * between themes.
- * @author la niina
- * @param {ThemeProviderProps} props
- * @returns {ReactNode} children
- * @example
- * <ThemeProvider attribute="class" disableTransitionOnChange>
- *     <App />
- * </ThemeProvider>
- *
- * @example
- * <ThemeProvider themes={["light", "queer", "dark", "system"]} defaultTheme="light">
- *     <App />
- * </ThemeProvider>
- */
-export const ThemeProvider = (props: ThemeProviderProps): ReactNode => {
-	const context = useContext(ThemeContext);
-	// Ignore nested context providers, just passthrough children
-	if (context) {
-		return props.children;
-	}
-	return <Theme {...props} />;
-};
-
-const defaultThemes = ["light", "dark"];
-const Theme = ({
-	forcedTheme,
-	disableTransitionOnChange = false,
-	enableSystem = true,
-	enableColorScheme = true,
-	storageKey = "theme",
-	themes = defaultThemes,
-	defaultTheme = enableSystem ? "system" : "light",
-	attribute = "data-theme",
-	value,
-	children,
-	nonce,
-}: ThemeProviderProps) => {
-	const [theme, setThemeState] = useState(() =>
-		getTheme(storageKey, defaultTheme),
-	);
-
-	const applyClassAttribute = useCallback(
-		(name: string | undefined, attrValues: Array<string>) => {
-			const d = document.documentElement;
-			d.classList.remove(...attrValues);
-			if (name) {
-				d.classList.add(name);
-			}
-		},
-		[],
-	);
-
-	const applyDataAttribute = useCallback(
-		(attr: string, name: string | undefined) => {
-			const d = document.documentElement;
-			if (name) {
-				d.setAttribute(attr, name);
-			} else {
-				d.removeAttribute(attr);
-			}
-		},
-		[],
-	);
-
-	const applyAttributesToDOM = useCallback(
-		(resolved: string) => {
-			const attributeList = Array.isArray(attribute) ? attribute : [attribute];
-			const attrValues = value ? Object.values(value) : themes;
-			const name = value ? value[resolved] : resolved;
-
-			for (const attr of attributeList) {
-				if (attr === "class") {
-					applyClassAttribute(name, attrValues);
-				} else if (attr.startsWith("data-")) {
-					applyDataAttribute(attr, name);
-				}
-			}
-		},
-		[attribute, themes, value, applyClassAttribute, applyDataAttribute],
-	);
-
-	const applyColorScheme = useCallback(
-		(resolved: string) => {
-			if (!enableColorScheme) {
-				return;
-			}
-			const fallback = colorSchemes.includes(defaultTheme)
-				? defaultTheme
-				: null;
-			const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
-			document.documentElement.style.colorScheme = colorScheme || "";
-		},
-		[enableColorScheme, defaultTheme],
-	);
-
-	// apply selected theme function (light, dark, system)
-	const applyTheme = useCallback(
-		(nextTheme: string | undefined) => {
-			if (!nextTheme) {
-				return;
-			}
-			const resolved =
-				nextTheme === "system" && enableSystem ? getSystemTheme() : nextTheme;
-			const enable = disableTransitionOnChange ? disableAnimation() : null;
-			applyAttributesToDOM(resolved);
-			applyColorScheme(resolved);
-			enable?.();
-		},
-		[
-			enableSystem,
-			disableTransitionOnChange,
-			applyAttributesToDOM,
-			applyColorScheme,
-		],
-	);
-
-	// Set theme state and save to local storage
-	const setTheme = useCallback(
-		(newValue: SetStateAction<string>) => {
-			const newTheme =
-				typeof newValue === "function" ? newValue(theme ?? "") : newValue;
-			setThemeState(newTheme);
-
-			// Save to storage
-			try {
-				localStorage.setItem(storageKey, newTheme);
-			} catch {
-				// localStorage might not be available
-				console.error("Failed to save theme to localStorage");
-			}
-		},
-		[theme, storageKey],
-	);
-
-	const handleMediaQuery = useCallback(
-		(_event: MediaQueryListEvent | MediaQueryList) => {
-			if (theme === "system" && enableSystem && !forcedTheme) {
-				applyTheme("system");
-			}
-		},
-		[applyTheme, enableSystem, forcedTheme, theme],
-	);
-
-	// Always listen to System preference
-	React.useEffect(() => {
-		if (isServer) {
-			return;
-		}
-
-		const media = window.matchMedia(MEDIA);
-		// Intentionally use deprecated listener methods to support iOS 13 and older browsers
-		media.addEventListener("change", handleMediaQuery);
-		handleMediaQuery(media);
-		return () => media.removeEventListener("change", handleMediaQuery);
-	}, [handleMediaQuery]);
-
-	// localStorage event handling, allow to sync theme changes between tabs
-	React.useEffect(() => {
-		if (isServer) {
-			return;
-		}
-
-		const handleStorage = (e: StorageEvent) => {
-			if (e.key !== storageKey) {
-				return;
-			}
-			// If default theme set, use it if localstorage === null (happens on local storage manual deletion)
-			const newTheme = e.newValue || defaultTheme;
-			setTheme(newTheme);
-		};
-
-		window.addEventListener("storage", handleStorage);
-		return () => window.removeEventListener("storage", handleStorage);
-	}, [defaultTheme, setTheme, storageKey]);
-
-	// Whenever theme or forcedTheme changes, apply it
-	useEffect(() => {
-		applyTheme(forcedTheme ?? theme);
-	}, [applyTheme, forcedTheme, theme]);
-
-	const providerValue = useMemo(
-		() => ({
-			theme,
-			setTheme,
-			forcedTheme,
-			themes: enableSystem ? [...themes, "system"] : themes,
-			systemTheme: enableSystem
-				? (getSystemTheme() as "dark" | "light" | undefined)
-				: undefined,
-		}),
-		[theme, forcedTheme, enableSystem, themes, setTheme],
-	);
-
-	return (
-		<ThemeContext.Provider value={providerValue}>
-			<ThemeScript
-				{...{
-					forcedTheme,
-					storageKey,
-					attribute,
-					enableSystem,
-					enableColorScheme,
-					defaultTheme,
-					value,
-					themes,
-					nonce,
-				}}
-			/>
-			{children}
-		</ThemeContext.Provider>
-	);
-};
-
-const ThemeScript = memo(
-	({
-		forcedTheme,
-		storageKey,
-		attribute,
-		enableSystem,
-		enableColorScheme,
-		defaultTheme,
-		value,
-		themes,
-		nonce,
-	}: Omit<ThemeProviderProps, "children"> & {
-		defaultTheme: string;
-	}) => {
-		const scriptArgs = JSON.stringify([
-			attribute,
-			storageKey,
-			defaultTheme,
-			forcedTheme,
-			themes,
-			value,
-			enableSystem,
-			enableColorScheme,
-		]).slice(1, -1);
-
-		return (
-			<script
-				// Run the theme bootstrap with serialized provider configuration before first paint.
-				dangerouslySetInnerHTML={{
-					__html: `(${script.toString()})(${scriptArgs})`,
-				}}
-				nonce={nonce}
-				suppressHydrationWarning
-			/>
-		);
-	},
-);
-
-ThemeScript.displayName = "ThemeScript";
-
-// Helpers
-const getTheme = (key: string, fallback?: string) => {
-	if (isServer) {
-		return fallback;
-	}
-	let theme: string | undefined;
-	try {
-		theme = localStorage.getItem(key) || undefined;
-	} catch {
-		// localStorage might not be available
-	}
-	return theme || fallback;
-};
-
-const disableAnimation = () => {
-	const css = document.createElement("style");
-	css.appendChild(
-		document.createTextNode(
-			"*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}",
-		),
-	);
-	document.head.appendChild(css);
-
-	return () => {
-		// Force restyle
-		window.getComputedStyle(document.body);
-		// Wait for next tick before removing
-		setTimeout(() => {
-			document.head.removeChild(css);
-		}, 1);
-	};
-};
-
-const getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {
-	if (isServer) {
-		return "light";
-	}
-	const event = e ?? window.matchMedia(MEDIA);
-	const isDark = event.matches;
-	const systemTheme = isDark ? "dark" : "light";
-	return systemTheme;
-};
-
-/*
-  This file is adapted from next-themes to work with tanstack start.
-  next-themes can be found at https://github.com/pacocoursey/next-themes under the MIT license.
-*/
-
-export const script = (
-	attribute: Attribute | Array<Attribute>,
-	storageKey: string,
-	defaultTheme: string,
-	forcedTheme: string | undefined,
-	themes: Array<string>,
-	value: ValueObject | undefined,
-	enableSystem: boolean,
-	enableColorScheme: boolean,
-) => {
-	const el = document.documentElement;
-	const systemThemes = ["light", "dark"];
-	const attributes = Array.isArray(attribute) ? attribute : [attribute];
-	const attrValues = value ? Object.values(value) : themes;
-
-	function applyClassAttr(name: string | undefined) {
-		el.classList.remove(...attrValues);
-		if (name) {
-			el.classList.add(name);
-		}
-	}
-
-	function applyDataAttr(attr: string, name: string | undefined) {
-		if (name) {
-			el.setAttribute(attr, name);
-		} else {
-			el.removeAttribute(attr);
-		}
-	}
-
-	function updateDOM(theme: string) {
-		const name = value ? value[theme] : theme;
-
-		for (const attr of attributes) {
-			if (attr === "class") {
-				applyClassAttr(name);
-			} else if (attr.startsWith("data-")) {
-				applyDataAttr(attr, name);
-			}
-		}
-
-		setColorScheme(theme);
-	}
-
-	function setColorScheme(theme: string) {
-		if (!enableColorScheme) {
-			return;
-		}
-
-		const fallback = systemThemes.includes(defaultTheme) ? defaultTheme : null;
-		const colorScheme = systemThemes.includes(theme) ? theme : fallback;
-		el.style.colorScheme = colorScheme || "";
-	}
-
-	function resolveSystemTheme() {
-		return window.matchMedia("(prefers-color-scheme: dark)").matches
-			? "dark"
-			: "light";
-	}
-
-	if (forcedTheme) {
-		const resolvedForcedTheme =
-			forcedTheme === "system" && enableSystem
-				? resolveSystemTheme()
-				: forcedTheme;
-		updateDOM(resolvedForcedTheme);
-	} else {
-		try {
-			const themeName = localStorage.getItem(storageKey) || defaultTheme;
-			const isSystem = enableSystem && themeName === "system";
-			const theme = isSystem ? resolveSystemTheme() : themeName;
-			updateDOM(theme);
-		} catch {
-			// localStorage might not be available
-			updateDOM(defaultTheme);
-		}
-	}
-};

package/src/components/accordion/accordion.tsx

@@ -1,70 +0,0 @@
-import type { ReactNode } from "react";
-import {
-	DisclosureGroup,
-	type DisclosureGroupSize,
-} from "../disclosure-group/disclosure-group";
-import { cn } from "../../lib/class-names";
-
-export type AccordionSize = DisclosureGroupSize;
-
-const containerRadius: Record<AccordionSize, string> = {
-	sm: "rounded-xl",
-	md: "rounded-2xl",
-	lg: "rounded-3xl",
-};
-
-export interface AccordionItem {
-	/** Stable value used to identify the expanded item. */
-	value: string;
-	title: string;
-	content: ReactNode;
-	description?: string;
-	disabled?: boolean;
-}
-
-export interface AccordionProps {
-	items: readonly AccordionItem[];
-	/** The expanded item, or `null` when all items are closed. */
-	value: string | null;
-	/** Selecting the open item reports `null`, so every item can collapse. */
-	onValueChange: (value: string | null) => void;
-	/** Density passed through to each DisclosureGroup. @default "md" */
-	size?: AccordionSize;
-	className?: string;
-}
-
-/** A single-open, collapsible accordion with labelled animated content regions. */
-export function Accordion({
-	items,
-	value,
-	onValueChange,
-	size = "md",
-	className,
-}: AccordionProps) {
-	return (
-		<div
-			className={cn(
-				"flex w-full min-w-0 flex-col overflow-hidden",
-				containerRadius[size],
-				"border-separator/60 bg-elevated border",
-				className,
-			)}
-		>
-			{items.map((item, index) => (
-				<DisclosureGroup
-					key={item.value}
-					label={item.title}
-					description={item.description}
-					open={value === item.value}
-					disabled={item.disabled}
-					size={size}
-					triggerClassName="rounded-none"
-					onOpenChange={(open) => onValueChange(open ? item.value : null)}
-					className={cn(index > 0 && "border-separator/60 border-t")}
-				>
-					{item.content}
-				</DisclosureGroup>
-			))}
-		</div>
-	);
-}

package/src/components/ambient/ambient.tsx

@@ -1,35 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "../../lib/class-names";
-
-type AmbientProps = ComponentPropsWithoutRef<"section"> & {
-	/** The image whose colors glow behind the content. */
-	src?: string | null;
-};
-
-/**
- * Content with its image's colors glowing softly behind it, no card or
- * edge: a blown-up, blurred copy of the image masked into a circle that
- * fades into the page, the way Apple lets a photo light its surroundings.
- */
-export function Ambient({ src, className, children, ...props }: AmbientProps) {
-	return (
-		<section className={cn("relative isolate", className)} {...props}>
-			{src && (
-				<img
-					aria-hidden
-					src={src}
-					alt=""
-					className={cn(
-						"pointer-events-none absolute top-[38%] left-1/2 -z-10 size-[min(32rem,100vw)] -translate-x-1/2 -translate-y-1/2",
-						"rounded-full object-cover opacity-20 blur-3xl",
-						// on a dark page the same light blooms far wider, so it shrinks and dims
-						"dark:size-[min(20rem,80vw)] dark:opacity-15 dark:blur-2xl",
-						"mask-[radial-gradient(closest-side,black_35%,transparent)]",
-						"animate-in fade-in-0 zoom-in-90 duration-1000",
-					)}
-				/>
-			)}
-			{children}
-		</section>
-	);
-}

package/src/components/ambient/index.ts

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

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -1,27 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/class-names";
-
-export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
-	/** Width divided by height. @default 1.3333333333333333 */
-	ratio?: number;
-}
-
-/** A crop frame: size its geometry, while images cover without distortion. */
-export function AspectRatio({
-	ratio = 4 / 3,
-	className,
-	style,
-	...props
-}: AspectRatioProps) {
-	const aspect = Number.isFinite(ratio) && ratio > 0 ? ratio : 4 / 3;
-	return (
-		<div
-			{...props}
-			className={cn(
-				"relative w-full overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover",
-				className,
-			)}
-			style={{ aspectRatio: aspect, ...style }}
-		/>
-	);
-}

package/src/components/breadcrumb/breadcrumb.tsx

@@ -1,73 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export type BreadcrumbSize = "sm" | "md";
-
-const sizes: Record<BreadcrumbSize, string> = {
-	sm: "text-caption",
-	md: "text-footnote",
-};
-
-export interface BreadcrumbItem {
-	label: string;
-	href?: string;
-}
-export interface BreadcrumbProps {
-	label: string;
-	items: readonly BreadcrumbItem[];
-	className?: string;
-	/** Integrate a client router without nesting interactive elements. */
-	renderLink?: (item: BreadcrumbItem & { href: string }) => ReactNode;
-	/** Text scale. @default "md" */
-	size?: BreadcrumbSize;
-}
-/** Ancestors stay links; the final item identifies the current page. */
-export function Breadcrumb({
-	label,
-	items,
-	className,
-	renderLink,
-	size = "md",
-}: BreadcrumbProps) {
-	return (
-		<nav aria-label={label} className={cn("not-typeset", className)}>
-			<ol
-				className={cn(
-					"text-label-secondary m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0",
-					sizes[size],
-				)}
-			>
-				{items.map((item, index) => (
-					<li
-						key={item.label}
-						className="m-0 flex min-w-0 items-center gap-2 p-0"
-					>
-						{index > 0 && (
-							<span aria-hidden="true" className="text-label-tertiary">
-								/
-							</span>
-						)}
-						{index === items.length - 1 ? (
-							<span aria-current="page" className="text-label font-medium">
-								{item.label}
-							</span>
-						) : item.href ? (
-							(renderLink?.({ ...item, href: item.href }) ?? (
-								<a
-									href={item.href}
-									className={cn(
-										"hover:text-label focus-visible:outline-accent-text rounded-sm focus-visible:outline-2",
-									)}
-								>
-									{item.label}
-								</a>
-							))
-						) : (
-							<span>{item.label}</span>
-						)}
-					</li>
-				))}
-			</ol>
-		</nav>
-	);
-}