@passui/react 0.1.44 → 0.1.46

package/src/components/compact-time-picker/time-value.ts

@@ -1,55 +1,58 @@
 /** A time of day on a 24 hour clock. */
 export interface TimeOfDay {
-    hour: number
-    minute: number
+	hour: number;
+	minute: number;
 }
 
 /** Reads `HH:MM` (24 hour); null for anything else. */
 export function parseTime(value: string): TimeOfDay | null {
-    const match = /^(\d{2}):(\d{2})$/.exec(value)
-    if (!match) return null
-    const hour = Number(match[1])
-    const minute = Number(match[2])
-    return hour < 24 && minute < 60 ? { hour, minute } : null
+	const match = /^(\d{2}):(\d{2})$/.exec(value);
+	if (!match) return null;
+	const hour = Number(match[1]);
+	const minute = Number(match[2]);
+	return hour < 24 && minute < 60 ? { hour, minute } : null;
 }
 
 export function formatTime({ hour, minute }: TimeOfDay): string {
-    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`
+	return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
 }
 
 /** Whether people where `locale` is used read time on a 12 hour clock. */
 export function usesTwelveHours(locale: string): boolean {
-    try {
-        const cycle = new Intl.DateTimeFormat(locale, {
-            hour: "numeric",
-        }).resolvedOptions().hourCycle
-        return cycle === "h11" || cycle === "h12"
-    } catch {
-        return false
-    }
+	try {
+		const cycle = new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+		}).resolvedOptions().hourCycle;
+		return cycle === "h11" || cycle === "h12";
+	} catch {
+		return false;
+	}
 }
 
 /** The hour as shown on a 12 hour clock (12, 1 to 11) and whether it's after noon. */
 export function toTwelveHours(hour: number): {
-    hour: number
-    pm: boolean
+	hour: number;
+	pm: boolean;
 } {
-    return {
-        hour: hour % 12 === 0 ? 12 : hour % 12,
-        pm: hour >= 12,
-    }
+	return {
+		hour: hour % 12 === 0 ? 12 : hour % 12,
+		pm: hour >= 12,
+	};
 }
 
 export function fromTwelveHours(hour: number, pm: boolean): number {
-    return (hour % 12) + (pm ? 12 : 0)
+	return (hour % 12) + (pm ? 12 : 0);
 }
 
 /** Minutes offered in steps of `step`, keeping `current` when it falls between them. */
 export function minuteChoices(step: number, current?: number): number[] {
-    const choices = Array.from({ length: Math.ceil(60 / step) }, (_, index) => index * step)
-    if (current !== undefined && !choices.includes(current)) {
-        choices.push(current)
-        choices.sort((a, b) => a - b)
-    }
-    return choices
+	const choices = Array.from(
+		{ length: Math.ceil(60 / step) },
+		(_, index) => index * step,
+	);
+	if (current !== undefined && !choices.includes(current)) {
+		choices.push(current);
+		choices.sort((a, b) => a - b);
+	}
+	return choices;
 }

package/src/components/content-unavailable-view/content-unavailable-view.tsx

@@ -1,62 +1,78 @@
-import type { ReactNode, ComponentProps } from "react"
-import { cn } from "../../lib/class-names"
+import type { ReactNode, ComponentProps } from "react";
+import { cn } from "../../lib/class-names";
 
-export type ContentUnavailableViewSize = "sm" | "md" | "lg"
+export type ContentUnavailableViewSize = "sm" | "md" | "lg";
 
 const titleSizes: Record<ContentUnavailableViewSize, string> = {
-    sm: "text-subheadline",
-    md: "text-headline",
-    lg: "text-title3",
-}
+	sm: "text-subheadline",
+	md: "text-headline",
+	lg: "text-title3",
+};
 
 const descriptionSizes: Record<ContentUnavailableViewSize, string> = {
-    sm: "text-caption",
-    md: "text-footnote",
-    lg: "text-subheadline",
-}
+	sm: "text-caption",
+	md: "text-footnote",
+	lg: "text-subheadline",
+};
 
 const spacings: Record<ContentUnavailableViewSize, string> = {
-    sm: "gap-2 px-6 py-6",
-    md: "gap-3 px-6 py-10",
-    lg: "gap-4 px-6 py-14",
-}
+	sm: "gap-2 px-6 py-6",
+	md: "gap-3 px-6 py-10",
+	lg: "gap-4 px-6 py-14",
+};
 
-export interface ContentUnavailableViewProps extends Omit<ComponentProps<"div">, "title"> {
-    title: string
-    description?: string
-    icon?: ReactNode
-    actions?: ReactNode
-    /** Title, description and vertical rhythm. @default "md" */
-    size?: ContentUnavailableViewSize
+export interface ContentUnavailableViewProps
+	extends Omit<ComponentProps<"div">, "title"> {
+	title: string;
+	description?: string;
+	icon?: ReactNode;
+	actions?: ReactNode;
+	/** Title, description and vertical rhythm. @default "md" */
+	size?: ContentUnavailableViewSize;
 }
 
 /** A focused empty or unavailable state with an optional next action. */
 export function ContentUnavailableView({
-    title,
-    description,
-    icon,
-    actions,
-    size = "md",
-    className,
-    ...props
+	title,
+	description,
+	icon,
+	actions,
+	size = "md",
+	className,
+	...props
 }: ContentUnavailableViewProps) {
-    return (
-        <div
-            {...props}
-            className={cn("flex flex-col items-center text-center", spacings[size], className)}
-        >
-            {icon && (
-                <span aria-hidden="true" className="text-label-tertiary">
-                    {icon}
-                </span>
-            )}
-            <p className={cn(titleSizes[size], "font-semibold text-label")}>{title}</p>
-            {description && (
-                <p className={cn(descriptionSizes[size], "max-w-sm text-label-secondary")}>
-                    {description}
-                </p>
-            )}
-            {actions && <div className="mt-1 flex flex-wrap justify-center gap-2">{actions}</div>}
-        </div>
-    )
+	return (
+		<div
+			{...props}
+			className={cn(
+				"flex flex-col items-center text-center",
+				spacings[size],
+				className,
+			)}
+		>
+			{icon && (
+				<span aria-hidden="true" className="text-label-tertiary">
+					{icon}
+				</span>
+			)}
+			<p className={cn(titleSizes[size], "text-label font-semibold")}>
+				{title}
+			</p>
+			{description && (
+				<p
+					className={cn(
+						descriptionSizes[size],
+						"text-label-secondary max-w-sm",
+					)}
+				>
+					{description}
+				</p>
+			)}
+			{actions && (
+				<div className="mt-1 flex flex-wrap justify-center gap-2">
+					{actions}
+				</div>
+			)}
+		</div>
+	);
 }

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

@@ -1,206 +1,215 @@
 import {
-    createContext,
-    useContext,
-    type ComponentPropsWithoutRef,
-    type PropsWithChildren,
-    type ReactNode,
-} from "react"
-import { cn } from "../../lib/class-names"
-
-export type ContentViewVariant = keyof typeof variants
-export type ContentViewHeadingLevel = "h1" | "h2" | "h3"
-export type ContentViewSize = "sm" | "md" | "lg"
+	createContext,
+	useContext,
+	type ComponentPropsWithoutRef,
+	type PropsWithChildren,
+	type ReactNode,
+} from "react";
+import { cn } from "../../lib/class-names";
+
+export type ContentViewVariant = keyof typeof variants;
+export type ContentViewHeadingLevel = "h1" | "h2" | "h3";
+export type ContentViewSize = "sm" | "md" | "lg";
 
 const containerRadius: Record<ContentViewSize, string> = {
-    sm: "rounded-xl",
-    md: "rounded-2xl",
-    lg: "rounded-3xl",
-}
+	sm: "rounded-xl",
+	md: "rounded-2xl",
+	lg: "rounded-3xl",
+};
 const sectionGaps: Record<ContentViewSize, string> = {
-    sm: "gap-2",
-    md: "gap-3",
-    lg: "gap-4",
-}
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+};
 const spanText: Record<ContentViewSize, string> = {
-    sm: "text-footnote tracking-tighter font-light",
-    md: "text-callout tracking-tighter font-light",
-    lg: "text-subheadline tracking-tighter font-light",
-}
+	sm: "text-footnote tracking-tighter font-light",
+	md: "text-callout tracking-tighter font-light",
+	lg: "text-subheadline tracking-tighter font-light",
+};
 const subText: Record<ContentViewSize, string> = {
-    sm: "text-footnote text-label",
-    md: "text-subheadline text-label",
-    lg: "text-body text-label",
-}
+	sm: "text-footnote text-label",
+	md: "text-subheadline text-label",
+	lg: "text-body text-label",
+};
 const headerActionGaps: Record<ContentViewSize, string> = {
-    sm: "gap-2",
-    md: "gap-3",
-    lg: "gap-4",
-}
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+};
 
-const ContentViewSizeContext = createContext<ContentViewSize>("md")
-const useContentViewSize = () => useContext(ContentViewSizeContext)
+const ContentViewSizeContext = createContext<ContentViewSize>("md");
+const useContentViewSize = () => useContext(ContentViewSizeContext);
 
 type ContentViewProps = ComponentPropsWithoutRef<"section"> & {
-    variant?: ContentViewVariant
-    /** Container radius, section gap and text scale. @default "md" */
-    size?: ContentViewSize
-}
+	variant?: ContentViewVariant;
+	/** Container radius, section gap and text scale. @default "md" */
+	size?: ContentViewSize;
+};
 
-type RowProps = ComponentPropsWithoutRef<"div">
+type RowProps = ComponentPropsWithoutRef<"div">;
 
-type SectionProps = ComponentPropsWithoutRef<"section">
+type SectionProps = ComponentPropsWithoutRef<"section">;
 
 type HeaderProps = PropsWithChildren<{
-    heading: string
-    p?: string
-    pClassName?: string
-    icon?: ReactNode
-    action?: ReactNode
-    actionClassName?: string
-    as?: ContentViewHeadingLevel
-    className?: string
-}>
-
-type H1Props = ComponentPropsWithoutRef<"h1">
-type H2Props = ComponentPropsWithoutRef<"h2">
-type PProps = ComponentPropsWithoutRef<"p">
-type SpanProps = ComponentPropsWithoutRef<"span">
-type SubProps = ComponentPropsWithoutRef<"sub">
+	heading: string;
+	p?: string;
+	pClassName?: string;
+	icon?: ReactNode;
+	action?: ReactNode;
+	actionClassName?: string;
+	as?: ContentViewHeadingLevel;
+	className?: string;
+}>;
+
+type H1Props = ComponentPropsWithoutRef<"h1">;
+type H2Props = ComponentPropsWithoutRef<"h2">;
+type PProps = ComponentPropsWithoutRef<"p">;
+type SpanProps = ComponentPropsWithoutRef<"span">;
+type SubProps = ComponentPropsWithoutRef<"sub">;
 
 const variants = {
-    elevated: cn(
-        "rounded-2xl bg-elevated border border-separator/35",
-        "shadow hover:shadow-md cursor-pointer group"
-    ),
-} as const
+	elevated: cn(
+		"bg-elevated border-separator/35 rounded-2xl border",
+		"group cursor-pointer shadow hover:shadow-md",
+	),
+} as const;
 
 export function ContentView({
-    variant = "elevated",
-    size = "md",
-    className,
-    children,
-    ...props
+	variant = "elevated",
+	size = "md",
+	className,
+	children,
+	...props
 }: ContentViewProps) {
-    return (
-        <ContentViewSizeContext value={size}>
-            <section
-                className={cn(
-                    variants[variant],
-                    variant === "elevated" && containerRadius[size],
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </section>
-        </ContentViewSizeContext>
-    )
+	return (
+		<ContentViewSizeContext value={size}>
+			<section
+				className={cn(
+					variants[variant],
+					variant === "elevated" && containerRadius[size],
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</section>
+		</ContentViewSizeContext>
+	);
 }
 
 function Row({ className, children, ...props }: RowProps) {
-    return (
-        <div className={cn("flex items-center", className)} {...props}>
-            {children}
-        </div>
-    )
+	return (
+		<div className={cn("flex items-center", className)} {...props}>
+			{children}
+		</div>
+	);
 }
 
 function Section({ className, children, ...props }: SectionProps) {
-    const size = useContentViewSize()
-    return (
-        <section className={cn("flex flex-col", sectionGaps[size], className)} {...props}>
-            {children}
-        </section>
-    )
+	const size = useContentViewSize();
+	return (
+		<section
+			className={cn("flex flex-col", sectionGaps[size], className)}
+			{...props}
+		>
+			{children}
+		</section>
+	);
 }
 
 function Header({
-    heading,
-    p,
-    pClassName,
-    icon,
-    action,
-    actionClassName,
-    as: Tag = "h3",
-    className,
-    children,
+	heading,
+	p,
+	pClassName,
+	icon,
+	action,
+	actionClassName,
+	as: Tag = "h3",
+	className,
+	children,
 }: HeaderProps) {
-    const title = (
-        <Tag className={cn(icon && "flex items-center gap-2")}>
-            {icon}
-            {heading}
-        </Tag>
-    )
-
-    const size = useContentViewSize()
-    return (
-        <div className={className}>
-            {action ? (
-                <div className={cn("flex items-center", headerActionGaps[size], actionClassName)}>
-                    {title}
-                    {action}
-                </div>
-            ) : (
-                title
-            )}
-            {p && <p className={pClassName}>{p}</p>}
-            {children}
-        </div>
-    )
+	const title = (
+		<Tag className={cn(icon && "flex items-center gap-2")}>
+			{icon}
+			{heading}
+		</Tag>
+	);
+
+	const size = useContentViewSize();
+	return (
+		<div className={className}>
+			{action ? (
+				<div
+					className={cn(
+						"flex items-center",
+						headerActionGaps[size],
+						actionClassName,
+					)}
+				>
+					{title}
+					{action}
+				</div>
+			) : (
+				title
+			)}
+			{p && <p className={pClassName}>{p}</p>}
+			{children}
+		</div>
+	);
 }
 
 function Divider() {
-    return <span className="h-16 w-px bg-separator" />
+	return <span className="bg-separator h-16 w-px" />;
 }
 
 function H1({ className, children, ...props }: H1Props) {
-    return (
-        <h1 className={className} {...props}>
-            {children}
-        </h1>
-    )
+	return (
+		<h1 className={className} {...props}>
+			{children}
+		</h1>
+	);
 }
 
 function H2({ className, children, ...props }: H2Props) {
-    return (
-        <h2 className={className} {...props}>
-            {children}
-        </h2>
-    )
+	return (
+		<h2 className={className} {...props}>
+			{children}
+		</h2>
+	);
 }
 
 function P({ className, children, ...props }: PProps) {
-    return (
-        <p className={cn("leading-tight font-medium", className)} {...props}>
-            {children}
-        </p>
-    )
+	return (
+		<p className={cn("leading-tight font-medium", className)} {...props}>
+			{children}
+		</p>
+	);
 }
 
 function Span({ className, children, ...props }: SpanProps) {
-    const size = useContentViewSize()
-    return (
-        <span className={cn(spanText[size], className)} {...props}>
-            {children}
-        </span>
-    )
+	const size = useContentViewSize();
+	return (
+		<span className={cn(spanText[size], className)} {...props}>
+			{children}
+		</span>
+	);
 }
 
 function Sub({ className, children, ...props }: SubProps) {
-    const size = useContentViewSize()
-    return (
-        <sub className={cn(subText[size], className)} {...props}>
-            {children}
-        </sub>
-    )
-}
-
-ContentView.Row = Row
-ContentView.Section = Section
-ContentView.Header = Header
-ContentView.Divider = Divider
-ContentView.H1 = H1
-ContentView.H2 = H2
-ContentView.P = P
-ContentView.Span = Span
-ContentView.Sub = Sub
+	const size = useContentViewSize();
+	return (
+		<sub className={cn(subText[size], className)} {...props}>
+			{children}
+		</sub>
+	);
+}
+
+ContentView.Row = Row;
+ContentView.Section = Section;
+ContentView.Header = Header;
+ContentView.Divider = Divider;
+ContentView.H1 = H1;
+ContentView.H2 = H2;
+ContentView.P = P;
+ContentView.Span = Span;
+ContentView.Sub = Sub;

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

@@ -1 +1 @@
-export * from "./content-view"
+export * from "./content-view";

package/src/components/context-menu/conceal-menu-source.ts

@@ -1,30 +1,30 @@
 type ConcealedSource = {
-    count: number
-    opacity: string
-    inert: boolean
-}
-const sources = new WeakMap<HTMLElement, ConcealedSource>()
+	count: number;
+	opacity: string;
+	inert: boolean;
+};
+const sources = new WeakMap<HTMLElement, ConcealedSource>();
 
 /** Follow-up menus share ownership until the last surface finishes closing. */
 export function concealMenuSource(element: HTMLElement, inert: boolean) {
-    const state = sources.get(element) ?? {
-        count: 0,
-        opacity: element.style.opacity,
-        inert: element.inert,
-    }
-    state.count += 1
-    sources.set(element, state)
-    element.style.opacity = "0"
-    if (inert) element.inert = true
-    let active = true
-    return () => {
-        if (!active) return false
-        active = false
-        state.count -= 1
-        if (state.count) return false
-        element.style.opacity = state.opacity
-        element.inert = state.inert
-        sources.delete(element)
-        return true
-    }
+	const state = sources.get(element) ?? {
+		count: 0,
+		opacity: element.style.opacity,
+		inert: element.inert,
+	};
+	state.count += 1;
+	sources.set(element, state);
+	element.style.opacity = "0";
+	if (inert) element.inert = true;
+	let active = true;
+	return () => {
+		if (!active) return false;
+		active = false;
+		state.count -= 1;
+		if (state.count) return false;
+		element.style.opacity = state.opacity;
+		element.inert = state.inert;
+		sources.delete(element);
+		return true;
+	};
 }