@passui/react 0.1.47 → 0.2.0

package/src/components/dialog/dialog-store.ts

@@ -1,66 +0,0 @@
-/**
- * App-wide confirmation dialogs, replacing the browser's `confirm`.
- * `await confirmDialog({...})` resolves true when confirmed. Render one
- * `<DialogHost />`.
- */
-export interface ConfirmOptions {
-	title: string;
-	message?: string;
-	confirmLabel?: string;
-	cancelLabel?: string;
-	/** Destructive actions are shown in red and are not the default button. */
-	destructive?: boolean;
-}
-
-export interface PendingDialog extends ConfirmOptions {
-	id: number;
-	resolve: (confirmed: boolean) => void;
-}
-
-let current: PendingDialog | null = null;
-let nextId = 1;
-const queue: PendingDialog[] = [];
-let exitingId: number | null = null;
-const listeners = new Set<() => void>();
-
-const emit = () => {
-	for (const listener of listeners) listener();
-};
-
-export function confirmDialog(options: ConfirmOptions): Promise<boolean> {
-	return new Promise((resolve) => {
-		const dialog = { ...options, id: nextId++, resolve };
-		if (current || exitingId !== null) queue.push(dialog);
-		else current = dialog;
-		emit();
-	});
-}
-
-export function settleDialog(confirmed: boolean, id?: number) {
-	if (!current || exitingId !== null || (id !== undefined && current.id !== id))
-		return;
-	const settled = current;
-	exitingId = settled.id;
-	current = null;
-	settled.resolve(confirmed);
-	emit();
-}
-
-/** Advance queued confirmations only after the dismissed card has exited. */
-export function advanceDialogQueue() {
-	if (exitingId === null) return;
-	exitingId = null;
-	current = queue.shift() ?? null;
-	emit();
-}
-
-export function subscribeDialogs(listener: () => void) {
-	listeners.add(listener);
-	return () => {
-		listeners.delete(listener);
-	};
-}
-
-export function getDialog(): PendingDialog | null {
-	return current;
-}

package/src/components/dialog/dialog.tsx

@@ -1,211 +0,0 @@
-import { Sheet } from "../sheet/sheet";
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { Button } from "../button/button";
-import { cn } from "../../lib/class-names";
-import { contentCrossfade, spring } from "../../motion/transitions";
-import {
-	createContext,
-	useContext,
-	useId,
-	type FormEvent,
-	type ReactNode,
-} from "react";
-
-const CloseContext = createContext<() => void>(() => {});
-export type DialogPresentation = "drawer" | "center" | "inline";
-export type DialogTone = "default" | "destructive";
-export type DialogSize = "sm" | "md" | "lg";
-
-const titleText: Record<DialogSize, string> = {
-	sm: "text-subheadline",
-	md: "text-title3",
-	lg: "text-title2",
-};
-const descriptionText: Record<DialogSize, string> = {
-	sm: "text-caption",
-	md: "text-footnote",
-	lg: "text-subheadline",
-};
-const bodySpacing: Record<DialogSize, string> = {
-	sm: "gap-3 p-4",
-	md: "gap-4 p-5",
-	lg: "gap-5 p-6",
-};
-const footerSpacing: Record<DialogSize, string> = {
-	sm: "pt-2",
-	md: "pt-3",
-	lg: "pt-4",
-};
-
-export type DialogProps = {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	title: ReactNode;
-	description?: ReactNode;
-	children?: ReactNode;
-	footer?: ReactNode;
-	/** `drawer` (responsive sheet), `center` (floating panel), or `inline`. @default "drawer" */
-	presentation?: DialogPresentation;
-	/** Title, description, body and footer density. @default "md" */
-	size?: DialogSize;
-	className?: string;
-	onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
-};
-type ActionsProps = {
-	submitLabel: ReactNode;
-	cancelLabel: ReactNode;
-	pending?: boolean;
-	disabled?: boolean;
-	tone?: DialogTone;
-	onConfirm?: () => void;
-};
-
-export function Dialog({
-	open,
-	onOpenChange,
-	title,
-	description,
-	children,
-	footer,
-	presentation = "drawer",
-	size = "md",
-	className,
-	onSubmit,
-}: DialogProps) {
-	const titleId = useId();
-	const reducedMotion = useReducedMotion();
-	const close = () => onOpenChange(false);
-	const content = (
-		<>
-			{presentation !== "inline" && (
-				<h2 id={titleId} className={cn(titleText[size], "font-semibold")}>
-					{title}
-				</h2>
-			)}
-			{description && (
-				<div className={cn(descriptionText[size], "text-label-secondary")}>
-					{description}
-				</div>
-			)}
-			{children && <div className="flex flex-col gap-4">{children}</div>}
-			{footer && (
-				<div
-					className={cn(
-						"flex flex-wrap justify-end gap-2",
-						footerSpacing[size],
-					)}
-				>
-					{footer}
-				</div>
-			)}
-		</>
-	);
-	const body = (
-		<CloseContext value={close}>
-			{onSubmit ? (
-				<form
-					onSubmit={onSubmit}
-					className={cn(
-						"flex min-h-0 flex-col overflow-y-auto",
-						bodySpacing[size],
-						className,
-					)}
-				>
-					{content}
-				</form>
-			) : (
-				<div
-					className={cn(
-						"flex min-h-0 flex-col overflow-y-auto",
-						bodySpacing[size],
-						className,
-					)}
-				>
-					{content}
-				</div>
-			)}
-		</CloseContext>
-	);
-	if (presentation === "inline")
-		return (
-			<AnimatePresence initial={false}>
-				{open && (
-					<motion.div
-						key={titleId}
-						initial={{
-							height: reducedMotion ? "auto" : 0,
-							opacity: 0,
-							scale: reducedMotion ? 1 : 0.97,
-						}}
-						animate={{
-							height: "auto",
-							opacity: 1,
-							scale: 1,
-						}}
-						exit={{
-							height: reducedMotion ? "auto" : 0,
-							opacity: 0,
-							scale: reducedMotion ? 1 : 0.98,
-						}}
-						transition={reducedMotion ? { duration: 0 } : spring.bouncy}
-						className="overflow-hidden"
-						style={{ transformOrigin: "top center" }}
-					>
-						<motion.div
-							initial={reducedMotion ? false : contentCrossfade.initial}
-							animate={reducedMotion ? undefined : contentCrossfade.animate}
-							transition={
-								reducedMotion ? { duration: 0 } : contentCrossfade.transition
-							}
-						>
-							{body}
-						</motion.div>
-					</motion.div>
-				)}
-			</AnimatePresence>
-		);
-	return (
-		<Sheet
-			open={open}
-			onClose={close}
-			label=""
-			labelledBy={titleId}
-			placement={presentation === "center" ? "center" : "adaptive"}
-		>
-			{body}
-		</Sheet>
-	);
-}
-
-/** The standard footer: a primary action and a cancel that closes the dialog. */
-function Actions({
-	submitLabel,
-	cancelLabel,
-	pending = false,
-	disabled = false,
-	tone = "default",
-	onConfirm,
-}: ActionsProps) {
-	const close = useContext(CloseContext);
-	return (
-		<>
-			<Button
-				type={onConfirm ? "button" : "submit"}
-				variant={tone === "destructive" ? "ghost" : "default"}
-				className={
-					tone === "destructive" ? "bg-danger/10 text-danger" : undefined
-				}
-				isPending={pending}
-				disabled={disabled}
-				onClick={onConfirm}
-			>
-				{submitLabel}
-			</Button>
-			<Button type="button" variant="secondary" onClick={close}>
-				{cancelLabel}
-			</Button>
-		</>
-	);
-}
-
-Dialog.Actions = Actions;

package/src/components/dialog/index.ts

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

package/src/components/disclosure-group/disclosure-group.tsx

@@ -1,108 +0,0 @@
-import { Button } from "../button/button";
-import { type ReactNode, useId } from "react";
-import { ChevronDownIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { InlineDisclosure } from "../inline-disclosure/inline-disclosure";
-
-export type DisclosureGroupSize = "sm" | "md" | "lg";
-
-const triggerSizes: Record<DisclosureGroupSize, string> = {
-	sm: "h-auto min-h-9 w-full rounded-lg px-3 py-2 text-start text-footnote active:scale-100",
-	md: "h-auto min-h-11 w-full rounded-xl px-4 py-3 text-start text-subheadline active:scale-100",
-	lg: "h-auto min-h-13 w-full rounded-2xl px-5 py-4 text-start text-body active:scale-100",
-};
-const descriptionSizes: Record<DisclosureGroupSize, string> = {
-	sm: "text-caption2 leading-caption2 font-normal break-words whitespace-normal text-label-secondary",
-	md: "text-footnote leading-footnote font-normal break-words whitespace-normal text-label-secondary",
-	lg: "text-subheadline leading-subheadline font-normal break-words whitespace-normal text-label-secondary",
-};
-const contentSizes: Record<DisclosureGroupSize, string> = {
-	sm: "min-w-0 px-3 pb-3 text-footnote leading-footnote text-label-secondary [overflow-wrap:anywhere]",
-	md: "min-w-0 px-4 pb-4 text-subheadline leading-subheadline text-label-secondary [overflow-wrap:anywhere]",
-	lg: "min-w-0 px-5 pb-5 text-body leading-body text-label-secondary [overflow-wrap:anywhere]",
-};
-const chevronSizes: Record<DisclosureGroupSize, number> = {
-	sm: 15,
-	md: 17,
-	lg: 19,
-};
-
-export interface DisclosureGroupProps {
-	label: string;
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	children: ReactNode;
-	disabled?: boolean;
-	className?: string;
-	/** Trigger layout when composed inside a shared surface such as Accordion. */
-	triggerClassName?: string;
-	/** Supporting text beneath the title. */
-	description?: string;
-	/** Trigger, description and content density. @default "md" */
-	size?: DisclosureGroupSize;
-}
-
-/** A controlled, accessible disclosure row with the shared inline reveal. */
-export function DisclosureGroup({
-	label,
-	open,
-	onOpenChange,
-	children,
-	disabled = false,
-	className,
-	triggerClassName,
-	description,
-	size = "md",
-}: DisclosureGroupProps) {
-	const id = useId();
-
-	return (
-		<div className={cn("w-full min-w-0", className)}>
-			<h3 className="m-0">
-				<Button
-					variant="ghost"
-					contentClassName="w-full min-w-0 justify-between gap-3"
-					type="button"
-					id={`${id}-trigger`}
-					aria-expanded={open}
-					aria-controls={id}
-					disabled={disabled}
-					onClick={() => onOpenChange(!open)}
-					className={cn(
-						triggerSizes[size],
-						"text-label hover:bg-fill/60 font-normal focus-visible:ring-offset-0 focus-visible:ring-inset",
-						"focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-40",
-						triggerClassName,
-					)}
-				>
-					<span className="flex min-w-0 flex-col gap-0.5">
-						<span className="font-medium break-words whitespace-normal">
-							{label}
-						</span>
-						{description && (
-							<span className={descriptionSizes[size]}>{description}</span>
-						)}
-					</span>
-					<ChevronDownIcon
-						size={chevronSizes[size]}
-						aria-hidden="true"
-						className={cn(
-							"text-label-tertiary duration-normal shrink-0 transition-transform motion-reduce:transition-none",
-							open && "rotate-180",
-						)}
-					/>
-				</Button>
-			</h3>
-			<section
-				id={id}
-				aria-labelledby={`${id}-trigger`}
-				aria-hidden={!open}
-				inert={!open}
-			>
-				<InlineDisclosure open={open}>
-					<div className={contentSizes[size]}>{children}</div>
-				</InlineDisclosure>
-			</section>
-		</div>
-	);
-}

package/src/components/divider/divider.tsx

@@ -1,33 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/class-names";
-
-export type DividerOrientation = "horizontal" | "vertical";
-
-export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
-	orientation?: DividerOrientation;
-	/** Decorative separators are omitted from the accessibility tree. @default true */
-	decorative?: boolean;
-}
-
-/** A semantic separator using the shared surface color. */
-export function Divider({
-	orientation = "horizontal",
-	decorative = true,
-	className,
-	...props
-}: DividerProps) {
-	return (
-		<hr
-			{...props}
-			role={decorative ? "none" : "separator"}
-			aria-orientation={decorative ? undefined : orientation}
-			className={cn(
-				"bg-separator shrink-0 border-0",
-				orientation === "horizontal"
-					? "h-px w-full"
-					: "h-full w-px self-stretch",
-				className,
-			)}
-		/>
-	);
-}

package/src/components/inline-disclosure/inline-disclosure.tsx

@@ -1,53 +0,0 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-import { spring } from "../../motion/transitions";
-
-export interface InlineDisclosureProps {
-	/** Whether the content is expanded. */
-	open: boolean;
-	children: ReactNode;
-	className?: string;
-}
-
-/**
- * An inline, spring-driven reveal for settings editors and small details.
- *
- * Height and opacity animate together so following rows move continuously
- * instead of jumping. Motion is disabled when the user requests less motion.
- * The content unmounts after its exit animation completes.
- */
-export function InlineDisclosure({
-	open,
-	children,
-	className,
-}: InlineDisclosureProps) {
-	const reduceMotion = useReducedMotion();
-
-	return (
-		<AnimatePresence initial={false}>
-			{open && (
-				<motion.div
-					key="inline-disclosure"
-					initial={reduceMotion ? false : { height: 0, opacity: 0 }}
-					animate={{ height: "auto", opacity: 1 }}
-					exit={reduceMotion ? { opacity: 0 } : { height: 0, opacity: 0 }}
-					transition={
-						reduceMotion
-							? { duration: 0 }
-							: {
-									height: spring.smooth,
-									opacity: {
-										duration: 0.18,
-										ease: "easeOut",
-									},
-								}
-					}
-					className={cn("overflow-hidden", className)}
-				>
-					{children}
-				</motion.div>
-			)}
-		</AnimatePresence>
-	);
-}

package/src/components/keyboard-shortcut/keyboard-shortcut.tsx

@@ -1,32 +0,0 @@
-import type { ComponentProps } from "react";
-import { cn } from "../../lib/class-names";
-
-export type KeyboardShortcutSize = "sm" | "md";
-
-const sizes: Record<KeyboardShortcutSize, string> = {
-	sm: "px-1 py-0 text-caption2",
-	md: "px-1.5 py-0.5 text-caption2",
-};
-
-export interface KeyboardShortcutProps extends ComponentProps<"kbd"> {
-	/** Keycap padding density. Text stays at caption2 in both sizes. @default "md" */
-	size?: KeyboardShortcutSize;
-}
-
-/** A quiet keycap for a shortcut supplied and localized by the application. */
-export function KeyboardShortcut({
-	size = "md",
-	className,
-	...props
-}: KeyboardShortcutProps) {
-	return (
-		<kbd
-			{...props}
-			className={cn(
-				"border-separator/70 bg-fill/50 text-label-secondary inline-flex shrink-0 items-center rounded-md border font-mono leading-none",
-				sizes[size],
-				className,
-			)}
-		/>
-	);
-}

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

@@ -1,84 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export type LabeledContentSize = "sm" | "md" | "lg";
-
-const padding: Record<LabeledContentSize, string> = {
-	sm: "px-3 py-2",
-	md: "px-4 py-3",
-	lg: "px-5 py-4",
-};
-
-export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
-	/** The visible name of the row. */
-	label: string;
-	/** Supporting text below the label. */
-	description?: string;
-	/** The row's control or value. */
-	children: ReactNode;
-	/** Places the control below the label at every width. @default false */
-	stacked?: boolean;
-	/** Places a wide control below its label on phones. @default false */
-	wide?: boolean;
-	/** Row padding density. @default "md" */
-	size?: LabeledContentSize;
-}
-
-/**
- * A row: a label, an optional description, and its control at the trailing
- * end, as SwiftUI's `LabeledContent`. Wide controls move under the label
- * when there is no room beside it, rather than squeezing.
- */
-export function LabeledContent({
-	label,
-	description,
-	children,
-	stacked,
-	wide,
-	size = "md",
-	className,
-	...props
-}: LabeledContentProps) {
-	return (
-		<div
-			className={cn(
-				"flex flex-wrap gap-x-4 gap-y-2",
-				padding[size],
-				stacked
-					? "flex-col items-stretch"
-					: cn(
-							"items-center justify-between",
-							wide && "max-sm:flex-col max-sm:items-stretch max-sm:gap-2",
-						),
-				className,
-			)}
-			{...props}
-		>
-			<div
-				className={cn(
-					"flex min-w-0 flex-1 flex-col gap-2 break-normal",
-					!stacked && "basis-36",
-					wide && "max-sm:basis-auto",
-				)}
-			>
-				<span className="text-subheadline text-label">{label}</span>
-				{description && (
-					<span className="text-footnote text-label-secondary leading-snug">
-						{description}
-					</span>
-				)}
-			</div>
-			{/* Controls give way before the label does; a segmented control that
-          no longer fits turns into a pop-up button by itself. */}
-			<div
-				className={cn(
-					"ms-auto flex max-w-full min-w-0 shrink-0 justify-end [&>*]:max-w-full",
-					stacked && "w-full",
-					wide && "max-sm:w-full",
-				)}
-			>
-				{children}
-			</div>
-		</div>
-	);
-}

package/src/components/locale-switcher/index.ts

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