@passui/react 0.1.46 → 0.2.0

package/src/components/table/table.tsx

@@ -1,151 +0,0 @@
-import { createContext, useContext } from "react";
-import type * as React from "react";
-
-import { cn } from "../../lib/class-names";
-
-export type TableSize = "sm" | "md" | "lg";
-
-const tableText: Record<TableSize, string> = {
-	sm: "text-footnote text-label",
-	md: "text-subheadline text-label",
-	lg: "text-body text-label",
-};
-const headCell: Record<TableSize, string> = {
-	sm: "h-8 px-2 text-start align-middle text-caption2 font-semibold whitespace-nowrap",
-	md: "h-10 px-3 text-start align-middle text-footnote font-semibold whitespace-nowrap",
-	lg: "h-12 px-4 text-start align-middle text-subheadline font-semibold whitespace-nowrap",
-};
-const bodyCell: Record<TableSize, string> = {
-	sm: "px-2 py-1.5 align-middle whitespace-nowrap",
-	md: "px-3 py-2.5 align-middle whitespace-nowrap",
-	lg: "px-4 py-3.5 align-middle whitespace-nowrap",
-};
-const captionText: Record<TableSize, string> = {
-	sm: "mt-3 text-caption2 text-label-secondary",
-	md: "mt-4 text-footnote text-label-secondary",
-	lg: "mt-5 text-subheadline text-label-secondary",
-};
-
-const TableSizeContext = createContext<TableSize>("md");
-const useTableSize = () => useContext(TableSizeContext);
-
-function Table({
-	className,
-	size = "md",
-	...props
-}: React.ComponentProps<"table"> & {
-	/** Row height, cell padding and text scale. @default "md" */ size?: TableSize;
-}) {
-	return (
-		<div
-			data-slot="table-container"
-			className="relative w-full overflow-x-auto"
-		>
-			<TableSizeContext value={size}>
-				<table
-					data-slot="table"
-					className={cn(tableText[size], className)}
-					{...props}
-				/>
-			</TableSizeContext>
-		</div>
-	);
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-	return (
-		<thead
-			data-slot="table-header"
-			className={cn("[&_tr]:border-separator [&_tr]:border-b", className)}
-			{...props}
-		/>
-	);
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-	return (
-		<tbody
-			data-slot="table-body"
-			className={cn("[&_tr:last-child]:border-0", className)}
-			{...props}
-		/>
-	);
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-	return (
-		<tfoot
-			data-slot="table-footer"
-			className={cn(
-				"border-separator bg-fill/50 border-t font-semibold [&>tr]:last:border-b-0",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-	return (
-		<tr
-			data-slot="table-row"
-			className={cn(
-				"border-separator duration-fast hover:bg-fill/50 has-aria-expanded:bg-fill/50 border-b transition-colors",
-				"data-[state=selected]:bg-accent-soft/60",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-	const size = useTableSize();
-	return (
-		<th
-			data-slot="table-head"
-			className={cn(
-				headCell[size],
-				"text-label-secondary has-[[role=checkbox]]:pe-0",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-	const size = useTableSize();
-	return (
-		<td
-			data-slot="table-cell"
-			className={cn(bodyCell[size], "has-[[role=checkbox]]:pe-0", className)}
-			{...props}
-		/>
-	);
-}
-
-function TableCaption({
-	className,
-	...props
-}: React.ComponentProps<"caption">) {
-	const size = useTableSize();
-	return (
-		<caption
-			data-slot="table-caption"
-			className={cn(captionText[size], className)}
-			{...props}
-		/>
-	);
-}
-
-export {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableFooter,
-	TableHead,
-	TableHeader,
-	TableRow,
-};

package/src/components/text-editor/text-editor.tsx

@@ -1,42 +0,0 @@
-import type { ComponentProps } from "react";
-import { cn } from "../../lib/class-names";
-import { fieldSize, type TextFieldSize } from "../text-field/text-field";
-
-const minHeights: Record<TextFieldSize, string> = {
-	xs: "min-h-24",
-	sm: "min-h-24",
-	md: "min-h-28",
-	lg: "min-h-32",
-};
-
-export type TextEditorSize = TextFieldSize;
-
-export interface TextEditorProps
-	extends Omit<ComponentProps<"textarea">, "size"> {
-	/** Field surface scale; matches TextField's xs | sm | md | lg. @default "md" */
-	size?: TextEditorSize;
-}
-
-/** A multi-line text field that reuses TextField's shared surface treatment. */
-export function TextEditor({
-	className,
-	size = "md",
-	...props
-}: TextEditorProps) {
-	const surface = fieldSize(size);
-	return (
-		<textarea
-			{...props}
-			className={cn(
-				"border-separator bg-elevated text-label placeholder:text-label-tertiary w-full min-w-0 resize-y border",
-				"focus-visible:outline-accent-text focus-visible:outline-2 focus-visible:outline-offset-2",
-				"aria-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-40",
-				surface.radius,
-				surface.padding,
-				surface.text,
-				minHeights[size],
-				className,
-			)}
-		/>
-	);
-}

package/src/components/text-field/text-field.tsx

@@ -1,200 +0,0 @@
-import { type ComponentProps, type ReactNode, useId, useState } from "react";
-import { Button } from "../button/button";
-import { cn } from "../../lib/class-names";
-
-/** Shared text control classes for components that reuse TextField's surface. */
-export const textControlClasses = cn(
-	"border-separator bg-elevated w-full min-w-0 rounded-xl border",
-	"text-body text-label placeholder:text-label-tertiary px-3 py-2",
-	"focus-visible:outline-accent-text focus-visible:outline-2 focus-visible:outline-offset-2",
-	"aria-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-40",
-);
-
-const fieldIconClasses = "flex shrink-0 items-center text-label-secondary";
-
-/** Size scale shared across TextField, SecureField, and form fields. */
-export type TextFieldSize = "xs" | "sm" | "md" | "lg";
-
-export interface FieldSize {
-	height: string;
-	floatingHeight: string;
-	padding: string;
-	text: string;
-	radius: string;
-}
-
-export function fieldSize(size: TextFieldSize): FieldSize {
-	switch (size) {
-		case "xs":
-			return {
-				height: "h-8",
-				floatingHeight: "h-9",
-				padding: "px-2.5",
-				text: "text-caption",
-				radius: "rounded-lg",
-			};
-		case "sm":
-			return {
-				height: "h-9",
-				floatingHeight: "h-10",
-				padding: "px-3",
-				text: "text-subheadline",
-				radius: "rounded-xl",
-			};
-		case "lg":
-			return {
-				height: "h-12",
-				floatingHeight: "h-14",
-				padding: "px-4",
-				text: "text-body",
-				radius: "rounded-xl",
-			};
-		default:
-			return {
-				height: "h-11",
-				floatingHeight: "h-12",
-				padding: "px-3",
-				text: "text-body",
-				radius: "rounded-xl",
-			};
-	}
-}
-
-export type TextFieldProps = Omit<ComponentProps<"input">, "size"> & {
-	label: string;
-	description?: ReactNode;
-	errors?: string[];
-	/** A decorative icon before the text, such as a mail glyph. */
-	icon?: ReactNode;
-	/** A decorative icon after the text, such as a unit or a check. */
-	trailingIcon?: ReactNode;
-	/** An interactive control after the text, such as a clear button. Size it to the field: an `xs` or `icon-xs` button, never the default. */
-	action?: ReactNode;
-	revealLabels?: { show: string; hide: string };
-	/** Float the label into the outline on focus or when filled. @default "above" */
-	labelPlacement?: "above" | "floating";
-	/** Field height and text scale. @default "md" */
-	size?: TextFieldSize;
-};
-
-export function TextField({
-	label,
-	description,
-	errors = [],
-	icon,
-	trailingIcon,
-	action,
-	revealLabels,
-	labelPlacement = "above",
-	size = "md",
-	placeholder,
-	type = "text",
-	id: suppliedId,
-	className,
-	...props
-}: TextFieldProps) {
-	const generatedId = useId();
-	const id = suppliedId ?? generatedId;
-	const [revealed, setRevealed] = useState(false);
-	const messages = Array.from(new Set(errors));
-	const reveal = type === "password" && revealLabels;
-	const dims = fieldSize(size);
-	return (
-		<div className="not-typeset flex flex-col gap-2">
-			{labelPlacement === "above" && (
-				<label htmlFor={id} className="text-subheadline font-semibold">
-					{label}
-				</label>
-			)}
-			<div
-				className={cn(
-					`relative flex items-center gap-2 ${dims.padding} ${dims.radius} bg-elevated`,
-					labelPlacement === "floating"
-						? "passui-floating-field"
-						: "border-separator focus-within:ring-accent/40 has-[:focus-visible]:ring-accent-text/70 border focus-within:ring-1 has-[:focus-visible]:ring-2",
-				)}
-			>
-				{labelPlacement === "floating" && (
-					<>
-						<fieldset aria-hidden="true" className="passui-field-outline">
-							<legend>
-								<span>{label}</span>
-							</legend>
-						</fieldset>
-						<label
-							htmlFor={id}
-							className={cn(
-								"passui-floating-label",
-								icon && "passui-floating-label-with-icon",
-							)}
-						>
-							{label}
-						</label>
-					</>
-				)}
-				{icon && (
-					<span aria-hidden className={fieldIconClasses}>
-						{icon}
-					</span>
-				)}
-				<input
-					{...props}
-					id={id}
-					type={reveal && revealed ? "text" : type}
-					placeholder={
-						placeholder ?? (labelPlacement === "floating" ? " " : label)
-					}
-					aria-invalid={messages.length > 0 || props["aria-invalid"]}
-					aria-describedby={
-						[
-							props["aria-describedby"],
-							(messages.length || description) && `${id}-description`,
-						]
-							.filter(Boolean)
-							.join(" ") || undefined
-					}
-					className={cn(
-						labelPlacement === "floating" ? dims.floatingHeight : dims.height,
-						"text-label w-full min-w-0 bg-transparent outline-none",
-						dims.text,
-						"placeholder:text-label-tertiary disabled:opacity-40",
-						className,
-					)}
-				/>
-				{trailingIcon && (
-					<span aria-hidden className={fieldIconClasses}>
-						{trailingIcon}
-					</span>
-				)}
-				{reveal && (
-					<Button
-						variant="ghost"
-						size="xs"
-						// sized to sit inside the 44px field; on touch a
-						// wider invisible area keeps a 44px target
-						className="-mr-1.5 shrink-0 whitespace-nowrap [@media(pointer:coarse)]:before:absolute [@media(pointer:coarse)]:before:-inset-1.5 [@media(pointer:coarse)]:before:content-['']"
-						aria-controls={id}
-						aria-label={revealed ? revealLabels.hide : revealLabels.show}
-						aria-pressed={revealed}
-						onClick={() => setRevealed(!revealed)}
-					>
-						{revealed ? revealLabels.hide : revealLabels.show}
-					</Button>
-				)}
-				{action}
-			</div>
-			{(messages.length > 0 || description) && (
-				<div
-					id={`${id}-description`}
-					role={messages.length ? "alert" : undefined}
-					className={cn(
-						"text-footnote",
-						messages.length ? "text-danger" : "text-label-secondary",
-					)}
-				>
-					{messages.length ? messages.join(". ") : description}
-				</div>
-			)}
-		</div>
-	);
-}

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

@@ -1,164 +0,0 @@
-/**
- * App-wide toasts: short messages that confirm, report progress or explain
- * a failure. Call `toast` from anywhere; render one `<Toaster />`.
- */
-export type ToastTone = "neutral" | "success" | "error" | "loading";
-export type ToastSize = "sm" | "md" | "lg";
-
-export interface ToastAction {
-	label: string;
-	onClick: () => void;
-}
-
-export interface Toast {
-	id: number;
-	tone: ToastTone;
-	title: string;
-	description?: string;
-	action?: ToastAction;
-	/** Milliseconds before it leaves on its own; `null` stays until dismissed. */
-	duration: number | null;
-	createdAt: number;
-	/** Pill size, content padding and title/description text scale. @default "md" */
-	size: ToastSize;
-}
-
-export interface ToastOptions {
-	description?: string;
-	action?: ToastAction;
-	duration?: number | null;
-	/** Pill size, content padding and title/description text scale. @default "md" */
-	size?: ToastSize;
-}
-
-const DEFAULT_DURATION = 4200;
-const MAX_VISIBLE = 3;
-
-let toasts: Toast[] = [];
-let nextId = 1;
-const listeners = new Set<() => void>();
-
-const emit = () => {
-	for (const listener of listeners) listener();
-};
-
-function show(
-	tone: ToastTone,
-	title: string,
-	options: ToastOptions = {},
-): number {
-	const id = nextId++;
-	const duration =
-		options.duration !== undefined
-			? options.duration
-			: tone === "loading"
-				? null
-				: DEFAULT_DURATION;
-	toasts = [
-		{
-			id,
-			tone,
-			title,
-			description: options.description,
-			action: options.action,
-			duration,
-			createdAt: Date.now(),
-			size: options.size ?? "md",
-		},
-		...toasts,
-	].slice(0, MAX_VISIBLE + 2);
-	emit();
-	return id;
-}
-
-/** Changes a toast in place; it morphs to its new state. */
-function update(
-	id: number,
-	tone: ToastTone,
-	title: string,
-	options: ToastOptions = {},
-) {
-	if (!toasts.some((t) => t.id === id)) return show(tone, title, options);
-	toasts = toasts.map((t) =>
-		t.id === id
-			? {
-					...t,
-					tone,
-					title,
-					description: options.description,
-					action: options.action,
-					duration:
-						options.duration !== undefined
-							? options.duration
-							: tone === "loading"
-								? null
-								: DEFAULT_DURATION,
-					createdAt: Date.now(),
-					size: options.size ?? t.size,
-				}
-			: t,
-	);
-	emit();
-	return id;
-}
-
-function dismiss(id: number) {
-	toasts = toasts.filter((t) => t.id !== id);
-	emit();
-}
-
-interface PromiseMessages<T> {
-	loading: string;
-	success: string | ((value: T) => string);
-	error: string | ((error: unknown) => string);
-}
-
-export const toast = Object.assign(
-	(title: string, options?: ToastOptions) => show("neutral", title, options),
-	{
-		success: (title: string, options?: ToastOptions) =>
-			show("success", title, options),
-		error: (title: string, options?: ToastOptions) =>
-			show("error", title, options),
-		loading: (title: string, options?: ToastOptions) =>
-			show("loading", title, options),
-		update,
-		dismiss,
-		/** Shows progress, then morphs into the outcome. Returns the promise. */
-		promise<T>(promise: Promise<T>, messages: PromiseMessages<T>): Promise<T> {
-			const id = show("loading", messages.loading);
-			promise.then(
-				(value) =>
-					update(
-						id,
-						"success",
-						typeof messages.success === "function"
-							? messages.success(value)
-							: messages.success,
-					),
-				(error: unknown) =>
-					update(
-						id,
-						"error",
-						typeof messages.error === "function"
-							? messages.error(error)
-							: messages.error,
-					),
-			);
-			return promise;
-		},
-	},
-);
-
-export function subscribeToasts(listener: () => void) {
-	listeners.add(listener);
-	return () => {
-		listeners.delete(listener);
-	};
-}
-
-export function getToasts(): Toast[] {
-	return toasts;
-}
-
-export const toastLimits = { visible: MAX_VISIBLE } as const;