@passui/react 0.1.45 → 0.1.46

package/src/components/accordion/accordion.tsx

@@ -1,61 +1,70 @@
-import type { ReactNode } from "react"
-import { DisclosureGroup, type DisclosureGroupSize } from "../disclosure-group/disclosure-group"
-import { cn } from "../../lib/class-names"
+import type { ReactNode } from "react";
+import {
+	DisclosureGroup,
+	type DisclosureGroupSize,
+} from "../disclosure-group/disclosure-group";
+import { cn } from "../../lib/class-names";
 
-export type AccordionSize = DisclosureGroupSize
+export type AccordionSize = DisclosureGroupSize;
 
 const containerRadius: Record<AccordionSize, string> = {
-    sm: "rounded-xl",
-    md: "rounded-2xl",
-    lg: "rounded-3xl",
-}
+	sm: "rounded-xl",
+	md: "rounded-2xl",
+	lg: "rounded-3xl",
+};
 
 export interface AccordionItem {
-    /** Stable value used to identify the expanded item. */
-    value: string
-    title: string
-    content: ReactNode
-    description?: string
-    disabled?: boolean
+	/** Stable value used to identify the expanded item. */
+	value: string;
+	title: string;
+	content: ReactNode;
+	description?: string;
+	disabled?: boolean;
 }
 
 export interface AccordionProps {
-    items: readonly AccordionItem[]
-    /** The expanded item, or `null` when all items are closed. */
-    value: string | null
-    /** Selecting the open item reports `null`, so every item can collapse. */
-    onValueChange: (value: string | null) => void
-    /** Density passed through to each DisclosureGroup. @default "md" */
-    size?: AccordionSize
-    className?: string
+	items: readonly AccordionItem[];
+	/** The expanded item, or `null` when all items are closed. */
+	value: string | null;
+	/** Selecting the open item reports `null`, so every item can collapse. */
+	onValueChange: (value: string | null) => void;
+	/** Density passed through to each DisclosureGroup. @default "md" */
+	size?: AccordionSize;
+	className?: string;
 }
 
 /** A single-open, collapsible accordion with labelled animated content regions. */
-export function Accordion({ items, value, onValueChange, size = "md", className }: AccordionProps) {
-    return (
-        <div
-            className={cn(
-                "flex w-full min-w-0 flex-col overflow-hidden",
-                containerRadius[size],
-                "border border-separator/60 bg-elevated",
-                className
-            )}
-        >
-            {items.map((item, index) => (
-                <DisclosureGroup
-                    key={item.value}
-                    label={item.title}
-                    description={item.description}
-                    open={value === item.value}
-                    disabled={item.disabled}
-                    size={size}
-                    triggerClassName="rounded-none"
-                    onOpenChange={(open) => onValueChange(open ? item.value : null)}
-                    className={cn(index > 0 && "border-t border-separator/60")}
-                >
-                    {item.content}
-                </DisclosureGroup>
-            ))}
-        </div>
-    )
+export function Accordion({
+	items,
+	value,
+	onValueChange,
+	size = "md",
+	className,
+}: AccordionProps) {
+	return (
+		<div
+			className={cn(
+				"flex w-full min-w-0 flex-col overflow-hidden",
+				containerRadius[size],
+				"border-separator/60 bg-elevated border",
+				className,
+			)}
+		>
+			{items.map((item, index) => (
+				<DisclosureGroup
+					key={item.value}
+					label={item.title}
+					description={item.description}
+					open={value === item.value}
+					disabled={item.disabled}
+					size={size}
+					triggerClassName="rounded-none"
+					onOpenChange={(open) => onValueChange(open ? item.value : null)}
+					className={cn(index > 0 && "border-separator/60 border-t")}
+				>
+					{item.content}
+				</DisclosureGroup>
+			))}
+		</div>
+	);
 }

package/src/components/ambient/ambient.tsx

@@ -1,10 +1,10 @@
-import type { ComponentPropsWithoutRef } from "react"
-import { cn } from "../../lib/class-names"
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../lib/class-names";
 
 type AmbientProps = ComponentPropsWithoutRef<"section"> & {
-    /** The image whose colors glow behind the content. */
-    src?: string | null
-}
+	/** The image whose colors glow behind the content. */
+	src?: string | null;
+};
 
 /**
  * Content with its image's colors glowing softly behind it, no card or
@@ -12,24 +12,24 @@ type AmbientProps = ComponentPropsWithoutRef<"section"> & {
  * fades into the page, the way Apple lets a photo light its surroundings.
  */
 export function Ambient({ src, className, children, ...props }: AmbientProps) {
-    return (
-        <section className={cn("relative isolate", className)} {...props}>
-            {src && (
-                <img
-                    aria-hidden
-                    src={src}
-                    alt=""
-                    className={cn(
-                        "pointer-events-none absolute top-[38%] left-1/2 -z-10 size-[min(32rem,100vw)] -translate-x-1/2 -translate-y-1/2",
-                        "rounded-full object-cover opacity-20 blur-3xl",
-                        // on a dark page the same light blooms far wider, so it shrinks and dims
-                        "dark:size-[min(20rem,80vw)] dark:opacity-15 dark:blur-2xl",
-                        "mask-[radial-gradient(closest-side,black_35%,transparent)]",
-                        "animate-in fade-in-0 zoom-in-90 duration-1000"
-                    )}
-                />
-            )}
-            {children}
-        </section>
-    )
+	return (
+		<section className={cn("relative isolate", className)} {...props}>
+			{src && (
+				<img
+					aria-hidden
+					src={src}
+					alt=""
+					className={cn(
+						"pointer-events-none absolute top-[38%] left-1/2 -z-10 size-[min(32rem,100vw)] -translate-x-1/2 -translate-y-1/2",
+						"rounded-full object-cover opacity-20 blur-3xl",
+						// on a dark page the same light blooms far wider, so it shrinks and dims
+						"dark:size-[min(20rem,80vw)] dark:opacity-15 dark:blur-2xl",
+						"mask-[radial-gradient(closest-side,black_35%,transparent)]",
+						"animate-in fade-in-0 zoom-in-90 duration-1000",
+					)}
+				/>
+			)}
+			{children}
+		</section>
+	);
 }

package/src/components/ambient/index.ts

@@ -1 +1 @@
-export * from "./ambient"
+export * from "./ambient";

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -1,22 +1,27 @@
-import type { HTMLAttributes } from "react"
-import { cn } from "../../lib/class-names"
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/class-names";
 
 export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
-    /** Width divided by height. @default 1.3333333333333333 */
-    ratio?: number
+	/** Width divided by height. @default 1.3333333333333333 */
+	ratio?: number;
 }
 
 /** A crop frame: size its geometry, while images cover without distortion. */
-export function AspectRatio({ ratio = 4 / 3, className, style, ...props }: AspectRatioProps) {
-    const aspect = Number.isFinite(ratio) && ratio > 0 ? ratio : 4 / 3
-    return (
-        <div
-            {...props}
-            className={cn(
-                "relative w-full overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover",
-                className
-            )}
-            style={{ aspectRatio: aspect, ...style }}
-        />
-    )
+export function AspectRatio({
+	ratio = 4 / 3,
+	className,
+	style,
+	...props
+}: AspectRatioProps) {
+	const aspect = Number.isFinite(ratio) && ratio > 0 ? ratio : 4 / 3;
+	return (
+		<div
+			{...props}
+			className={cn(
+				"relative w-full overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover",
+				className,
+			)}
+			style={{ aspectRatio: aspect, ...style }}
+		/>
+	);
 }

package/src/components/breadcrumb/breadcrumb.tsx

@@ -1,67 +1,73 @@
-import type { ReactNode } from "react"
-import { cn } from "../../lib/class-names"
+import type { ReactNode } from "react";
+import { cn } from "../../lib/class-names";
 
-export type BreadcrumbSize = "sm" | "md"
+export type BreadcrumbSize = "sm" | "md";
 
 const sizes: Record<BreadcrumbSize, string> = {
-    sm: "text-caption",
-    md: "text-footnote",
-}
+	sm: "text-caption",
+	md: "text-footnote",
+};
 
 export interface BreadcrumbItem {
-    label: string
-    href?: string
+	label: string;
+	href?: string;
 }
 export interface BreadcrumbProps {
-    label: string
-    items: readonly BreadcrumbItem[]
-    className?: string
-    /** Integrate a client router without nesting interactive elements. */
-    renderLink?: (item: BreadcrumbItem & { href: string }) => ReactNode
-    /** Text scale. @default "md" */
-    size?: BreadcrumbSize
+	label: string;
+	items: readonly BreadcrumbItem[];
+	className?: string;
+	/** Integrate a client router without nesting interactive elements. */
+	renderLink?: (item: BreadcrumbItem & { href: string }) => ReactNode;
+	/** Text scale. @default "md" */
+	size?: BreadcrumbSize;
 }
 /** Ancestors stay links; the final item identifies the current page. */
-export function Breadcrumb({ label, items, className, renderLink, size = "md" }: BreadcrumbProps) {
-    return (
-        <nav aria-label={label} className={cn("not-typeset", className)}>
-            <ol
-                className={cn(
-                    "m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0 text-label-secondary",
-                    sizes[size]
-                )}
-            >
-                {items.map((item, index) => (
-                    <li
-                        key={`${index}-${item.label}`}
-                        className="m-0 flex min-w-0 items-center gap-2 p-0"
-                    >
-                        {index > 0 && (
-                            <span aria-hidden="true" className="text-label-tertiary">
-                                /
-                            </span>
-                        )}
-                        {index === items.length - 1 ? (
-                            <span aria-current="page" className="font-medium text-label">
-                                {item.label}
-                            </span>
-                        ) : item.href ? (
-                            (renderLink?.({ ...item, href: item.href }) ?? (
-                                <a
-                                    href={item.href}
-                                    className={cn(
-                                        "rounded-sm hover:text-label focus-visible:outline-2 focus-visible:outline-accent-text"
-                                    )}
-                                >
-                                    {item.label}
-                                </a>
-                            ))
-                        ) : (
-                            <span>{item.label}</span>
-                        )}
-                    </li>
-                ))}
-            </ol>
-        </nav>
-    )
+export function Breadcrumb({
+	label,
+	items,
+	className,
+	renderLink,
+	size = "md",
+}: BreadcrumbProps) {
+	return (
+		<nav aria-label={label} className={cn("not-typeset", className)}>
+			<ol
+				className={cn(
+					"text-label-secondary m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0",
+					sizes[size],
+				)}
+			>
+				{items.map((item, index) => (
+					<li
+						key={item.label}
+						className="m-0 flex min-w-0 items-center gap-2 p-0"
+					>
+						{index > 0 && (
+							<span aria-hidden="true" className="text-label-tertiary">
+								/
+							</span>
+						)}
+						{index === items.length - 1 ? (
+							<span aria-current="page" className="text-label font-medium">
+								{item.label}
+							</span>
+						) : item.href ? (
+							(renderLink?.({ ...item, href: item.href }) ?? (
+								<a
+									href={item.href}
+									className={cn(
+										"hover:text-label focus-visible:outline-accent-text rounded-sm focus-visible:outline-2",
+									)}
+								>
+									{item.label}
+								</a>
+							))
+						) : (
+							<span>{item.label}</span>
+						)}
+					</li>
+				))}
+			</ol>
+		</nav>
+	);
 }

package/src/components/button/button-styles.ts

@@ -1,42 +1,49 @@
 export type ButtonVariant =
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"
-    | "accent"
+	| "default"
+	| "destructive"
+	| "outline"
+	| "secondary"
+	| "ghost"
+	| "link"
+	| "accent";
 
 /** Icon-only buttons use the same sizing contract as Button. */
 export const iconButtonSizes = {
-    icon: "size-11 p-0 rounded-full",
-    "icon-xs": "size-8 p-0 rounded-full",
-    "icon-sm": "size-9 p-0 rounded-full",
-    "icon-lg": "size-12 p-0 rounded-full",
-} as const
+	icon: "size-11 p-0 rounded-full",
+	"icon-xs": "size-8 p-0 rounded-full",
+	"icon-sm": "size-9 p-0 rounded-full",
+	"icon-lg": "size-12 p-0 rounded-full",
+} as const;
 
-export type IconButtonSize = keyof typeof iconButtonSizes
+export type IconButtonSize = keyof typeof iconButtonSizes;
 
-export type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon-full" | IconButtonSize
+export type ButtonSize =
+	| "default"
+	| "xs"
+	| "sm"
+	| "lg"
+	| "icon-full"
+	| IconButtonSize;
 
 export const buttonVariants: Record<ButtonVariant, string> = {
-    default:
-        "bg-inverse text-on-inverse shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.18),0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:brightness-[1.12]",
-    destructive:
-        "bg-danger text-background shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.18),0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:brightness-[1.08]",
-    outline: "border border-separator bg-transparent text-label hover:bg-fill/60",
-    secondary:
-        "bg-elevated text-label shadow-[inset_0_0_0_0.5px_color-mix(in_srgb,var(--color-separator)_55%,transparent),0_1px_2px_rgb(40_30_0/0.06)] hover:bg-fill/60",
-    ghost: "bg-transparent text-label hover:bg-fill/80",
-    link: "bg-transparent text-accent-text underline-offset-4 hover:underline",
-    accent: "bg-accent text-on-accent ring-1 ring-accent-text/25 shadow-[inset_0_1px_0_rgb(255_255_255/0.35),0_1px_2px_rgb(60_40_0/0.16),0_6px_16px_-6px_color-mix(in_srgb,var(--color-accent)_70%,transparent)] hover:brightness-[1.04]",
-}
+	default:
+		"bg-inverse text-on-inverse shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.18),0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:brightness-[1.12]",
+	destructive:
+		"bg-danger text-background shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.18),0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:brightness-[1.08]",
+	outline: "border border-separator bg-transparent text-label hover:bg-fill/60",
+	secondary:
+		"bg-elevated text-label shadow-[inset_0_0_0_0.5px_color-mix(in_srgb,var(--color-separator)_55%,transparent),0_1px_2px_rgb(40_30_0/0.06)] hover:bg-fill/60",
+	ghost: "bg-transparent text-label hover:bg-fill/80",
+	link: "bg-transparent text-accent-text underline-offset-4 hover:underline",
+	accent:
+		"bg-accent text-on-accent ring-1 ring-accent-text/25 shadow-[inset_0_1px_0_rgb(255_255_255/0.35),0_1px_2px_rgb(60_40_0/0.16),0_6px_16px_-6px_color-mix(in_srgb,var(--color-accent)_70%,transparent)] hover:brightness-[1.04]",
+};
 
 export const buttonSizes: Record<ButtonSize, string> = {
-    default: "h-11 px-5 text-subheadline rounded-full",
-    xs: "h-8 px-3 text-caption rounded-full",
-    sm: "h-9 px-4 text-subheadline rounded-full",
-    lg: "h-12 px-6 text-body rounded-full",
-    ...iconButtonSizes,
-    "icon-full": "h-11 w-full px-5 text-subheadline rounded-full",
-}
+	default: "h-11 px-5 text-subheadline rounded-full",
+	xs: "h-8 px-3 text-caption rounded-full",
+	sm: "h-9 px-4 text-subheadline rounded-full",
+	lg: "h-12 px-6 text-body rounded-full",
+	...iconButtonSizes,
+	"icon-full": "h-11 w-full px-5 text-subheadline rounded-full",
+};

package/src/components/button/button.tsx

@@ -1,100 +1,107 @@
-import { type ButtonHTMLAttributes, forwardRef } from "react"
-import { cn } from "../../lib/class-names"
-import { PendingSpinner } from "./pending-spinner"
-import { usePendingIndicator } from "./use-pending-indicator"
-import { buttonSizes, buttonVariants, type ButtonSize, type ButtonVariant } from "./button-styles"
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { cn } from "../../lib/class-names";
+import { PendingSpinner } from "./pending-spinner";
+import { usePendingIndicator } from "./use-pending-indicator";
+import {
+	buttonSizes,
+	buttonVariants,
+	type ButtonSize,
+	type ButtonVariant,
+} from "./button-styles";
 
-export type { ButtonSize, ButtonVariant }
+export type { ButtonSize, ButtonVariant };
 
 /**
  * Each variant has a little depth: a fine highlight along the top edge and
  * a soft, layered shadow, like a well-made physical key.
  */
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Visual emphasis: `default` (solid), `accent` (main action),
-     * `secondary` (quiet fill), `outline`, `ghost`, `link`, or `destructive`.
-     * @default "default"
-     */
-    variant?: ButtonVariant
-    /**
-     * Label sizes: `xs`, `sm`, `default`, `lg`.
-     * Icon sizes: `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-full`.
-     * Prefer IconButton for an icon with a built-in accessible label.
-     * @default "default"
-     */
-    size?: ButtonSize
-    /** Shows a delayed spinner, keeps the button's width, and prevents repeat presses.
-     * @default false
-     */
-    isPending?: boolean
-    /** Layout classes for the content wrapper, such as a full-width disclosure row. */
-    contentClassName?: string
+	/**
+	 * Visual emphasis: `default` (solid), `accent` (main action),
+	 * `secondary` (quiet fill), `outline`, `ghost`, `link`, or `destructive`.
+	 * @default "default"
+	 */
+	variant?: ButtonVariant;
+	/**
+	 * Label sizes: `xs`, `sm`, `default`, `lg`.
+	 * Icon sizes: `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-full`.
+	 * Prefer IconButton for an icon with a built-in accessible label.
+	 * @default "default"
+	 */
+	size?: ButtonSize;
+	/** Shows a delayed spinner, keeps the button's width, and prevents repeat presses.
+	 * @default false
+	 */
+	isPending?: boolean;
+	/** Layout classes for the content wrapper, such as a full-width disclosure row. */
+	contentClassName?: string;
 }
 
 /** Shares native button appearance with semantic links without nesting a button. */
 export function buttonStyle({
-    variant = "default",
-    size = "default",
-    className,
+	variant = "default",
+	size = "default",
+	className,
 }: Pick<ButtonProps, "variant" | "size" | "className"> = {}) {
-    return cn(
-        "group relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap overflow-hidden font-semibold tracking-[-0.005em]",
-        "transition-[background-color,filter,transform,box-shadow] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] active:scale-[0.98]",
-        "motion-reduce:transform-none motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-40",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-        buttonSizes[size],
-        buttonVariants[variant],
-        className
-    )
+	return cn(
+		"group relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden font-semibold tracking-[-0.005em] whitespace-nowrap select-none",
+		"transition-[background-color,filter,transform,box-shadow] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] active:scale-[0.98]",
+		"disabled:pointer-events-none disabled:opacity-40 motion-reduce:transform-none motion-reduce:transition-none",
+		"focus-visible:ring-accent/70 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none",
+		buttonSizes[size],
+		buttonVariants[variant],
+		className,
+	);
 }
 
 /** A native button with Passui styling, pending feedback, and an HTMLButtonElement ref. */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-    {
-        variant = "default",
-        size = "default",
-        isPending = false,
-        contentClassName,
-        disabled,
-        children,
-        className,
-        type = "button",
-        ...props
-    },
-    ref
-) {
-    const showPendingIndicator = usePendingIndicator(isPending)
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+	function Button(
+		{
+			variant = "default",
+			size = "default",
+			isPending = false,
+			contentClassName,
+			disabled,
+			children,
+			className,
+			type = "button",
+			...props
+		},
+		ref,
+	) {
+		const showPendingIndicator = usePendingIndicator(isPending);
 
-    return (
-        <button
-            ref={ref}
-            type={type}
-            className={buttonStyle({
-                variant,
-                size,
-                // pending is busy, not unavailable: keep full colour
-                className: cn(
-                    "data-pending:cursor-progress data-pending:disabled:opacity-100",
-                    className
-                ),
-            })}
-            {...props}
-            data-pending={isPending || undefined}
-            disabled={disabled || isPending}
-            aria-busy={isPending || props["aria-busy"]}
-        >
-            {/* the label keeps its space, so the width never jumps */}
-            <span
-                className={cn(
-                    "inline-flex min-w-0 items-center justify-center gap-2 truncate transition-opacity duration-200",
-                    showPendingIndicator && "opacity-0",
-                    contentClassName
-                )}
-            >
-                {children}
-            </span>
-            {showPendingIndicator && <PendingSpinner />}
-        </button>
-    )
-})
+		return (
+			<button
+				ref={ref}
+				type={type}
+				className={buttonStyle({
+					variant,
+					size,
+					// pending is busy, not unavailable: keep full colour
+					className: cn(
+						"data-pending:cursor-progress data-pending:disabled:opacity-100",
+						className,
+					),
+				})}
+				{...props}
+				data-pending={isPending || undefined}
+				disabled={disabled || isPending}
+				aria-busy={isPending || props["aria-busy"]}
+			>
+				{/* the label keeps its space, so the width never jumps */}
+				<span
+					className={cn(
+						"inline-flex min-w-0 items-center justify-center gap-2 truncate transition-opacity duration-200",
+						showPendingIndicator && "opacity-0",
+						contentClassName,
+					)}
+				>
+					{children}
+				</span>
+				{showPendingIndicator && <PendingSpinner />}
+			</button>
+		);
+	},
+);