@passui/react 0.1.45 → 0.1.46

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

@@ -1,67 +1,67 @@
-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"
+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
+	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
+	className: string;
+	"aria-current": "page" | undefined;
+	onClick: () => void;
+	children: ReactNode;
 }
 
-export type TabBarMinimizeBehavior = "platform" | "scroll" | "never"
-export type TabBarSize = "sm" | "md" | "lg"
+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",
-}
+	sm: "h-9",
+	md: "h-11",
+	lg: "h-13",
+};
 const tabMinimizedWidths: Record<TabBarSize, string> = {
-    sm: "w-9",
-    md: "w-11",
-    lg: "w-13",
-}
+	sm: "w-9",
+	md: "w-11",
+	lg: "w-13",
+};
 const tabText: Record<TabBarSize, string> = {
-    sm: "text-caption",
-    md: "text-caption2",
-    lg: "text-subheadline",
-}
+	sm: "text-caption",
+	md: "text-caption2",
+	lg: "text-subheadline",
+};
 const searchButtonSizes: Record<TabBarSize, string> = {
-    sm: "size-10",
-    md: "size-12",
-    lg: "size-14",
-}
+	sm: "size-10",
+	md: "size-12",
+	lg: "size-14",
+};
 const searchIconSizes: Record<TabBarSize, number> = {
-    sm: 17,
-    md: 19,
-    lg: 21,
-}
+	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
+	/** `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;
 }
 
 /**
@@ -74,108 +74,109 @@ export interface TabBarProps<Tab extends TabBarTab> {
  * 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",
+	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(
-                                    "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] duration-fast 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 ms-auto flex shrink-0 items-center justify-center rounded-full text-label transition-transform duration-fast active:scale-[0.92]",
-                        searchButtonSizes[size]
-                    )}
-                >
-                    <SearchIcon size={searchIconSizes[size]} strokeWidth={2} />
-                </button>
-            )}
-        </nav>
-    )
+	// 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"
+	return (
+		typeof document !== "undefined" &&
+		document.documentElement.dataset.os === "android"
+	);
 }

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

@@ -1,152 +1,155 @@
-import { useId, useRef, useState, type ReactNode } from "react"
-import { cn } from "../../lib/class-names"
+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"
+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",
-}
+	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]",
-}
+	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",
-}
+	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",
-}
+	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
+	/** 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,
+	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
+	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 hover:opacity-100 after:opacity-0"
-                        )}
-                    >
-                        {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>
-    )
+	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>
+	);
 }