@passui/react 0.1.47 → 0.2.0

package/src/components/swatch-picker/swatch-picker.tsx

@@ -1,138 +0,0 @@
-import { motion } from "motion/react";
-import { useId } from "react";
-import { CheckIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { haptic } from "../../lib/haptics";
-import { spring } from "../../motion/transitions";
-
-export interface SwatchPickerOption<T extends string> {
-	value: T;
-	label: string;
-	/** Swatch background color. */
-	color: string;
-	/** Color of the selected checkmark. */
-	ink: string;
-}
-
-export type SwatchPickerSize = "sm" | "md" | "lg";
-
-const swatchSizes: Record<SwatchPickerSize, string> = {
-	sm: "size-6",
-	md: "size-8",
-	lg: "size-10",
-};
-const checkSizes: Record<SwatchPickerSize, number> = {
-	sm: 13,
-	md: 16,
-	lg: 19,
-};
-const captionText: Record<SwatchPickerSize, string> = {
-	sm: "text-caption2",
-	md: "text-caption2",
-	lg: "text-caption",
-};
-const fieldsetGaps: Record<SwatchPickerSize, string> = {
-	sm: "gap-2",
-	md: "gap-3",
-	lg: "gap-4",
-};
-const labelGaps: Record<SwatchPickerSize, string> = {
-	sm: "gap-1",
-	md: "gap-1.5",
-	lg: "gap-2",
-};
-
-export interface SwatchPickerProps<T extends string> {
-	value: T;
-	options: ReadonlyArray<SwatchPickerOption<T>>;
-	onChange: (value: T) => void;
-	/** Accessible name for the group. */
-	label: string;
-	/** Custom classes for the swatch container. */
-	className?: string;
-	/** Swatch diameter, check icon and caption scale. @default "md" */
-	size?: SwatchPickerSize;
-}
-
-/** Colour swatches with a check on the chosen one. */
-export function SwatchPicker<T extends string>({
-	value,
-	options,
-	onChange,
-	label,
-	className,
-	size = "md",
-}: SwatchPickerProps<T>) {
-	const name = useId();
-	return (
-		<fieldset className={cn("flex flex-wrap", fieldsetGaps[size], className)}>
-			<legend className="sr-only">{label}</legend>
-			{options.map((option) => {
-				const selected = option.value === value;
-				return (
-					<label
-						key={option.value}
-						className={cn(
-							"group flex cursor-pointer flex-col items-center",
-							labelGaps[size],
-						)}
-					>
-						<input
-							type="radio"
-							name={name}
-							value={option.value}
-							checked={selected}
-							onChange={() => {
-								haptic("selection");
-								onChange(option.value);
-							}}
-							className="peer sr-only"
-						/>
-						<span
-							className={cn(
-								"ring-offset-elevated duration-fast peer-focus-visible:ring-accent flex items-center justify-center rounded-full ring-offset-1 transition-[box-shadow,transform] group-active:scale-95 peer-focus-visible:ring-2",
-								swatchSizes[size],
-								selected
-									? "ring-label/70 ring-[1.5px]"
-									: "group-hover:ring-separator ring-0 group-hover:ring-[1.5px]",
-							)}
-							style={{
-								background: option.color,
-							}}
-						>
-							{selected && (
-								<motion.span
-									initial={{
-										scale: 0.4,
-										opacity: 0,
-									}}
-									animate={{
-										scale: 1,
-										opacity: 1,
-									}}
-									transition={spring.bouncy}
-								>
-									<CheckIcon
-										size={checkSizes[size]}
-										strokeWidth={2.6}
-										style={{
-											color: option.ink,
-										}}
-									/>
-								</motion.span>
-							)}
-						</span>
-						<span
-							className={cn(
-								captionText[size],
-								selected ? "text-label font-semibold" : "text-label-tertiary",
-							)}
-						>
-							{option.label}
-						</span>
-					</label>
-				);
-			})}
-		</fieldset>
-	);
-}

package/src/components/tab-bar/tab-bar.tsx

@@ -1,182 +0,0 @@
-import { motion, useReducedMotion } from "motion/react";
-import { Fragment, type ReactNode, useId } from "react";
-import { useMinimizeOnScroll } from "../../hooks/use-minimize-on-scroll";
-import { SearchIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { spring } from "../../motion/transitions";
-
-export interface TabBarTab<Id extends string = string> {
-	id: Id;
-	label: string;
-	icon: ReactNode;
-}
-
-/** What a tab's link receives; spread it onto the router's own link. */
-export interface TabBarLinkProps {
-	className: string;
-	"aria-current": "page" | undefined;
-	onClick: () => void;
-	children: ReactNode;
-}
-
-export type TabBarMinimizeBehavior = "platform" | "scroll" | "never";
-export type TabBarSize = "sm" | "md" | "lg";
-
-const tabHeights: Record<TabBarSize, string> = {
-	sm: "h-9",
-	md: "h-11",
-	lg: "h-13",
-};
-const tabMinimizedWidths: Record<TabBarSize, string> = {
-	sm: "w-9",
-	md: "w-11",
-	lg: "w-13",
-};
-const tabText: Record<TabBarSize, string> = {
-	sm: "text-caption",
-	md: "text-caption2",
-	lg: "text-subheadline",
-};
-const searchButtonSizes: Record<TabBarSize, string> = {
-	sm: "size-10",
-	md: "size-12",
-	lg: "size-14",
-};
-const searchIconSizes: Record<TabBarSize, number> = {
-	sm: 17,
-	md: 19,
-	lg: 21,
-};
-
-export interface TabBarProps<Tab extends TabBarTab> {
-	/** `platform` follows the platform, `scroll` always minimizes, `never` stays expanded. @default "platform" */
-	minimizeBehavior?: TabBarMinimizeBehavior;
-	tabs: readonly Tab[];
-	/** Active tab ID, or null for a destination outside the bar. */
-	active: Tab["id"] | null;
-	/** Renders your router's link with the supplied appearance and accessibility props. */
-	renderLink: (tab: Tab, props: TabBarLinkProps) => ReactNode;
-	search?: { label: string; onPress: () => void };
-	/** Accessible name for the navigation. */
-	label: string;
-	/** Tab height, label text, minimized width and search button diameter. @default "md" */
-	size?: TabBarSize;
-	className?: string;
-}
-
-/**
- * The app's main places a thumb's reach away, drawn as iOS 26 draws them: a
- * floating glass capsule of tabs, with Search as its own round button at the
- * trailing end. Scrolling down through content shrinks the capsule to the
- * current tab; scrolling back up, or a tap, restores it. Android shares the
- * glass, but its bar stays full size, as Android's own bars do.
- *
- * Links stay the app's own (`renderLink`), so the bar works with any router.
- */
-export function TabBar<Tab extends TabBarTab>({
-	tabs,
-	active,
-	renderLink,
-	search,
-	label,
-	className,
-	size = "md",
-	minimizeBehavior = "platform",
-}: TabBarProps<Tab>) {
-	// Scopes the sliding selection to this bar, so two bars on one
-	// screen (a docs page, a split view) never trade their highlight.
-	const selectionId = `${useId()}-tab-selection`;
-	const reducedMotion = useReducedMotion();
-	const [scrolledAway, setScrolledAway] = useMinimizeOnScroll();
-	// Platform behavior keeps Android expanded; apps can opt into scroll minimization.
-	const minimized =
-		scrolledAway &&
-		active !== null &&
-		minimizeBehavior !== "never" &&
-		(minimizeBehavior === "scroll" || !onAndroid());
-	return (
-		<nav
-			aria-label={label}
-			className={cn(
-				"fixed inset-x-4 bottom-[max(14px,env(safe-area-inset-bottom))] z-30 flex items-center gap-3",
-				className,
-			)}
-		>
-			<motion.div
-				layout={!reducedMotion}
-				transition={reducedMotion ? { duration: 0 } : spring.smooth}
-				// A tap on the shrunken capsule brings every tab back.
-				onClickCapture={(event) => {
-					if (!minimized) return;
-					event.preventDefault();
-					event.stopPropagation();
-					setScrolledAway(false);
-				}}
-				className={cn(
-					"glass flex min-w-0 items-center rounded-full p-0.5",
-					minimized ? "grow-0" : "grow",
-				)}
-			>
-				{tabs.map((tab) => {
-					const current = tab.id === active;
-					if (minimized && !current) return null;
-					return (
-						<Fragment key={tab.id}>
-							{renderLink(tab, {
-								"aria-current": current ? "page" : undefined,
-								// Switching tabs is silent, as on Apple and Android: no haptic.
-								onClick: () => {},
-								className: cn(
-									"duration-fast relative isolate flex min-w-0 flex-col items-center justify-center gap-0.5 rounded-full font-semibold tracking-[0.01em] no-underline transition-[color,transform] active:scale-[0.94]",
-									tabHeights[size],
-									tabText[size],
-									minimized ? tabMinimizedWidths[size] : "flex-1 px-1",
-									current ? "text-accent-text" : "text-label-secondary",
-								),
-								children: (
-									<>
-										{current && (
-											<motion.span
-												layoutId={selectionId}
-												className="glass-lens absolute inset-0 -z-10 rounded-full"
-												transition={
-													reducedMotion ? { duration: 0 } : spring.snappy
-												}
-											/>
-										)}
-										{tab.icon}
-										<span
-											className={minimized ? "sr-only" : "max-w-full truncate"}
-										>
-											{tab.label}
-										</span>
-									</>
-								),
-							})}
-						</Fragment>
-					);
-				})}
-			</motion.div>
-			{search && (
-				<button
-					type="button"
-					aria-label={search.label}
-					onClick={search.onPress}
-					className={cn(
-						"glass text-label duration-fast ms-auto flex shrink-0 items-center justify-center rounded-full transition-transform active:scale-[0.92]",
-						searchButtonSizes[size],
-					)}
-				>
-					<SearchIcon size={searchIconSizes[size]} strokeWidth={2} />
-				</button>
-			)}
-		</nav>
-	);
-}
-
-function onAndroid() {
-	return (
-		typeof document !== "undefined" &&
-		document.documentElement.dataset.os === "android"
-	);
-}

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

@@ -1,155 +0,0 @@
-import { useId, useRef, useState, type ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export type TabViewAlign = "start" | "center";
-export type TabViewSize = "sm" | "md" | "lg";
-
-const containerGaps: Record<TabViewSize, string> = {
-	sm: "gap-4",
-	md: "gap-5",
-	lg: "gap-6",
-};
-const tablistClasses: Record<TabViewSize, string> = {
-	sm: "inline-flex h-7 w-fit max-w-full items-center gap-4 p-[2px]",
-	md: "inline-flex h-8 w-fit max-w-full items-center gap-5 p-[3px]",
-	lg: "inline-flex h-10 w-fit max-w-full items-center gap-6 p-[4px]",
-};
-const tabText: Record<TabViewSize, string> = {
-	sm: "text-footnote",
-	md: "text-subheadline",
-	lg: "text-body",
-};
-const underlineOffset: Record<TabViewSize, string> = {
-	sm: "after:bottom-[-4px] after:h-0.5",
-	md: "after:bottom-[-5px] after:h-0.5",
-	lg: "after:bottom-[-6px] after:h-1",
-};
-
-export interface TabViewProps<Value extends string> {
-	/** Available tabs, in keyboard navigation order. */
-	options: readonly { value: Value; label: string; disabled?: boolean }[];
-	/** Initial selection when value is not controlled. */
-	defaultValue: Value;
-	/** Controlled selection; omit to keep selection inside TabView. */
-	value?: Value;
-	onValueChange?: (value: Value) => void;
-	/** Tab alignment: `start` or `center`. @default "center" */
-	align?: TabViewAlign;
-	/** Accessible name for the tab list. */
-	label: string;
-	/** Renders the selected tab's panel. */
-	children: (value: Value) => ReactNode;
-	/** Tablist height, tab text scale and underline offset. @default "md" */
-	size?: TabViewSize;
-	className?: string;
-}
-
-/** Content tabs with native buttons, roving focus and automatic keyboard activation. */
-export function TabView<Value extends string>({
-	options,
-	defaultValue,
-	value: controlledValue,
-	onValueChange,
-	align = "center",
-	label,
-	children,
-	size = "md",
-	className,
-}: TabViewProps<Value>) {
-	const id = useId();
-	const buttons = useRef<(HTMLButtonElement | null)[]>([]);
-	const [selected, setSelected] = useState(defaultValue);
-	const current = controlledValue ?? selected;
-	function select(next: Value) {
-		if (controlledValue === undefined) setSelected(next);
-		onValueChange?.(next);
-	}
-	const enabled = options.filter((option) => !option.disabled);
-	const value = enabled.some((option) => option.value === current)
-		? current
-		: enabled[0]?.value;
-	if (value === undefined) return null;
-
-	return (
-		<div className={cn("flex w-full flex-col", containerGaps[size], className)}>
-			<div
-				role="tablist"
-				aria-label={label}
-				className={cn(
-					tablistClasses[size],
-					align === "start" ? "self-start" : "mx-auto justify-center",
-				)}
-			>
-				{options.map((option, index) => (
-					<button
-						key={option.value}
-						type="button"
-						role="tab"
-						id={`${id}-tab-${index}`}
-						aria-controls={`${id}-panel-${index}`}
-						aria-selected={option.value === value}
-						aria-disabled={option.disabled || undefined}
-						disabled={option.disabled}
-						tabIndex={option.value === value ? 0 : -1}
-						ref={(element) => {
-							buttons.current[index] = element;
-						}}
-						onClick={() => select(option.value)}
-						onKeyDown={(event) => {
-							const rtl =
-								getComputedStyle(event.currentTarget).direction === "rtl";
-							let next: number;
-							let step: number;
-							if (event.key === "Home") {
-								next = -1;
-								step = 1;
-							} else if (event.key === "End") {
-								next = options.length;
-								step = -1;
-							} else if (event.key === "ArrowRight") {
-								step = rtl ? -1 : 1;
-								next = index;
-							} else if (event.key === "ArrowLeft") {
-								step = rtl ? 1 : -1;
-								next = index;
-							} else return;
-							event.preventDefault();
-							for (let offset = 0; offset < options.length; offset++) {
-								next = (next + step + options.length) % options.length;
-								const option = options[next];
-								if (!option || option.disabled) continue;
-								select(option.value);
-								buttons.current[next]?.focus();
-								break;
-							}
-						}}
-						className={cn(
-							"relative inline-flex h-[calc(100%-1px)] shrink-0 items-center justify-center border border-transparent p-0 font-medium whitespace-nowrap",
-							tabText[size],
-							"focus-visible:outline-2 focus-visible:outline-offset-2",
-							"after:absolute after:inset-x-0 after:bg-current",
-							underlineOffset[size],
-							option.value === value
-								? "after:opacity-100"
-								: "opacity-60 after:opacity-0 hover:opacity-100",
-						)}
-					>
-						{option.label}
-					</button>
-				))}
-			</div>
-			{options.map((option, index) => (
-				<div
-					key={option.value}
-					role="tabpanel"
-					id={`${id}-panel-${index}`}
-					aria-labelledby={`${id}-tab-${index}`}
-					hidden={option.value !== value}
-					className="w-full outline-offset-4"
-				>
-					{option.value === value && children(option.value)}
-				</div>
-			))}
-		</div>
-	);
-}

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,
-			)}
-		/>
-	);
-}