@passui/react 0.1.45 → 0.1.46

package/src/components/button/icon-button.tsx

@@ -1,31 +1,33 @@
-import { forwardRef } from "react"
-import { cn } from "../../lib/class-names"
-import { Button, type ButtonProps } from "./button"
-import type { ButtonVariant, IconButtonSize } from "./button-styles"
+import { forwardRef } from "react";
+import { cn } from "../../lib/class-names";
+import { Button, type ButtonProps } from "./button";
+import type { ButtonVariant, IconButtonSize } from "./button-styles";
 
-export type { ButtonVariant, IconButtonSize }
+export type { ButtonVariant, IconButtonSize };
 
 export interface IconButtonProps extends Omit<ButtonProps, "size"> {
-    /** Icon-only actions must have an accessible name. */
-    label: string
-    size?: IconButtonSize
+	/** Icon-only actions must have an accessible name. */
+	label: string;
+	size?: IconButtonSize;
 }
 
 /** An accessible icon-only presentation of Button, sharing its interaction behavior. */
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-    { label, size = "icon", className, children, ...props },
-    ref
-) {
-    return (
-        <Button
-            ref={ref}
-            size={size}
-            aria-label={label}
-            data-tooltip={label}
-            className={cn("active:scale-[0.92]", className)}
-            {...props}
-        >
-            {children}
-        </Button>
-    )
-})
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+	function IconButton(
+		{ label, size = "icon", className, children, ...props },
+		ref,
+	) {
+		return (
+			<Button
+				ref={ref}
+				size={size}
+				aria-label={label}
+				data-tooltip={label}
+				className={cn("active:scale-[0.92]", className)}
+				{...props}
+			>
+				{children}
+			</Button>
+		);
+	},
+);

package/src/components/button/pending-spinner.tsx

@@ -3,12 +3,12 @@
  * sized from the text so it suits every button size.
  */
 export function PendingSpinner() {
-    return (
-        <span
-            aria-hidden="true"
-            className="absolute inset-0 flex animate-in items-center justify-center fade-in zoom-in-75 duration-200 motion-reduce:animate-none"
-        >
-            <span className="size-[1.1em] animate-spin rounded-full border-2 border-current/25 border-t-current motion-reduce:animate-none" />
-        </span>
-    )
+	return (
+		<span
+			aria-hidden="true"
+			className="animate-in fade-in zoom-in-75 absolute inset-0 flex items-center justify-center duration-200 motion-reduce:animate-none"
+		>
+			<span className="size-[1.1em] animate-spin rounded-full border-2 border-current/25 border-t-current motion-reduce:animate-none" />
+		</span>
+	);
 }

package/src/components/button/use-pending-indicator.ts

@@ -1,22 +1,22 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
-const PENDING_INDICATOR_DELAY = 300
+const PENDING_INDICATOR_DELAY = 300;
 
 export function schedulePendingIndicator(onShow: () => void) {
-    const timeout = setTimeout(onShow, PENDING_INDICATOR_DELAY)
-    return () => clearTimeout(timeout)
+	const timeout = setTimeout(onShow, PENDING_INDICATOR_DELAY);
+	return () => clearTimeout(timeout);
 }
 
 export function usePendingIndicator(isPending: boolean) {
-    const [isVisible, setIsVisible] = useState(false)
+	const [isVisible, setIsVisible] = useState(false);
 
-    useEffect(() => {
-        setIsVisible(false)
+	useEffect(() => {
+		setIsVisible(false);
 
-        if (!isPending) return
+		if (!isPending) return;
 
-        return schedulePendingIndicator(() => setIsVisible(true))
-    }, [isPending])
+		return schedulePendingIndicator(() => setIsVisible(true));
+	}, [isPending]);
 
-    return isPending && isVisible
+	return isPending && isVisible;
 }

package/src/components/chip/chip.tsx

@@ -1,40 +1,45 @@
-import type { HTMLAttributes } from "react"
-import { cn } from "../../lib/class-names"
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/class-names";
 
-export type ChipTone = "neutral" | "accent" | "public" | "family" | "friends"
-export type ChipSize = "xs" | "sm" | "md"
+export type ChipTone = "neutral" | "accent" | "public" | "family" | "friends";
+export type ChipSize = "xs" | "sm" | "md";
 
 const tones: Record<ChipTone, string> = {
-    neutral: "bg-fill text-label-secondary",
-    accent: "bg-elevated text-accent-text",
-    public: "bg-[#e8efff] text-[#2c55b8] dark:bg-[#1c2740] dark:text-[#a9c1ff]",
-    family: "bg-[#e3f3eb] text-[#24704f] dark:bg-[#15302a] dark:text-[#8fd6b6]",
-    friends: "bg-[#ede8ff] text-[#5a3fc0] dark:bg-[#26203f] dark:text-[#c3b5ff]",
-}
+	neutral: "bg-fill text-label-secondary",
+	accent: "bg-elevated text-accent-text",
+	public: "bg-[#e8efff] text-[#2c55b8] dark:bg-[#1c2740] dark:text-[#a9c1ff]",
+	family: "bg-[#e3f3eb] text-[#24704f] dark:bg-[#15302a] dark:text-[#8fd6b6]",
+	friends: "bg-[#ede8ff] text-[#5a3fc0] dark:bg-[#26203f] dark:text-[#c3b5ff]",
+};
 
 const sizes: Record<ChipSize, string> = {
-    xs: "px-1 py-0 text-caption2",
-    sm: "px-1.5 py-0.5 text-caption2",
-    md: "px-2 py-0.5 text-caption",
-}
+	xs: "px-1 py-0 text-caption2",
+	sm: "px-1.5 py-0.5 text-caption2",
+	md: "px-2 py-0.5 text-caption",
+};
 
 export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
-    /** `neutral`, `accent`, `public`, `family`, or `friends`. @default "neutral" */
-    tone?: ChipTone
-    /** `xs`, `sm`, or `md`. @default "sm" */
-    size?: ChipSize
+	/** `neutral`, `accent`, `public`, `family`, or `friends`. @default "neutral" */
+	tone?: ChipTone;
+	/** `xs`, `sm`, or `md`. @default "sm" */
+	size?: ChipSize;
 }
 
-export function Chip({ tone = "neutral", size = "sm", className, ...props }: ChipProps) {
-    return (
-        <span
-            className={cn(
-                "inline-flex items-center gap-1 rounded-full font-semibold",
-                tones[tone],
-                sizes[size],
-                className
-            )}
-            {...props}
-        />
-    )
+export function Chip({
+	tone = "neutral",
+	size = "sm",
+	className,
+	...props
+}: ChipProps) {
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1 rounded-full font-semibold",
+				tones[tone],
+				sizes[size],
+				className,
+			)}
+			{...props}
+		/>
+	);
 }

package/src/components/code-block/code-block.tsx

@@ -1,47 +1,48 @@
-import { Fragment, type ComponentProps, type ReactNode } from "react"
-import { cn } from "../../lib/class-names"
+import { Fragment, type ComponentProps, type ReactNode } from "react";
+import { cn } from "../../lib/class-names";
 
-export type CodeBlockSize = "sm" | "md" | "lg"
+export type CodeBlockSize = "sm" | "md" | "lg";
 
-export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children" | "size"> {
-    code: string
-    /** Supply a highlighter's rendered pre/code element; source remains the fallback. */
-    children?: ReactNode
-    /** Show a nonselectable line gutter. @default true */
-    lineNumbers?: boolean
-    /** Code font size, padding and line gutter scale. @default "md" */
-    size?: CodeBlockSize
+export interface CodeBlockProps
+	extends Omit<ComponentProps<"div">, "children" | "size"> {
+	code: string;
+	/** Supply a highlighter's rendered pre/code element; source remains the fallback. */
+	children?: ReactNode;
+	/** Show a nonselectable line gutter. @default true */
+	lineNumbers?: boolean;
+	/** Code font size, padding and line gutter scale. @default "md" */
+	size?: CodeBlockSize;
 }
 
 /** Code presentation without shipping a highlighter or formatter to consumers. */
 export function CodeBlock({
-    code,
-    children,
-    lineNumbers = true,
-    size = "md",
-    className,
-    ...props
+	code,
+	children,
+	lineNumbers = true,
+	size = "md",
+	className,
+	...props
 }: CodeBlockProps) {
-    const lines = code.split("\n")
-    return (
-        <div
-            {...props}
-            className={cn("passui-code-block", className)}
-            data-line-numbers={lineNumbers || undefined}
-            data-size={size}
-        >
-            {children ?? (
-                <pre>
-                    <code>
-                        {lines.map((line, index) => (
-                            <Fragment key={`${index}-${line}`}>
-                                <span className="line">{line || " "}</span>
-                                {index < lines.length - 1 ? "\n" : null}
-                            </Fragment>
-                        ))}
-                    </code>
-                </pre>
-            )}
-        </div>
-    )
+	const lines = code.split("\n");
+	return (
+		<div
+			{...props}
+			className={cn("passui-code-block", className)}
+			data-line-numbers={lineNumbers || undefined}
+			data-size={size}
+		>
+			{children ?? (
+				<pre>
+					<code>
+						{lines.map((line, index) => (
+							<Fragment key={line || index}>
+								<span className="line">{line || " "}</span>
+								{index < lines.length - 1 ? "\n" : null}
+							</Fragment>
+						))}
+					</code>
+				</pre>
+			)}
+		</div>
+	);
 }

package/src/components/combo-box/combo-box.tsx

@@ -1,13 +1,13 @@
-import { Picker, type PickerOption, type PickerProps } from "../picker/picker"
+import { Picker, type PickerOption, type PickerProps } from "../picker/picker";
 
 export interface ComboBoxOption<T extends string> extends PickerOption<T> {}
 export interface ComboBoxProps<T extends string>
-    extends Omit<PickerProps<T>, "searchable" | "options"> {
-    options: readonly ComboBoxOption<T>[]
-    emptyLabel: string
+	extends Omit<PickerProps<T>, "searchable" | "options"> {
+	options: readonly ComboBoxOption<T>[];
+	emptyLabel: string;
 }
 
 /** A searchable Picker, with optional creation from the person's typed query. */
 export function ComboBox<T extends string>(props: ComboBoxProps<T>) {
-    return <Picker {...props} searchable />
+	return <Picker {...props} searchable />;
 }

package/src/components/command/command.tsx

@@ -1,119 +1,149 @@
-import { type ComponentProps, useEffect, useRef } from "react"
-import { SearchIcon } from "../../icons/icons"
-import { cn } from "../../lib/class-names"
-import { KeyboardShortcut } from "../keyboard-shortcut/keyboard-shortcut"
+import { type ComponentProps, useEffect, useRef } from "react";
+import { SearchIcon } from "../../icons/icons";
+import { cn } from "../../lib/class-names";
+import { KeyboardShortcut } from "../keyboard-shortcut/keyboard-shortcut";
 import {
-    SearchList,
-    SearchListField,
-    SearchListResults,
-    SearchListEmpty,
-    SearchListGroup,
-    SearchListItem,
-} from "../search-list/search-list"
-import { Sheet, type SheetProps } from "../sheet/sheet"
+	SearchList,
+	SearchListField,
+	SearchListResults,
+	SearchListEmpty,
+	SearchListGroup,
+	SearchListItem,
+} from "../search-list/search-list";
+import { Sheet, type SheetProps } from "../sheet/sheet";
 
 export interface CommandProps extends ComponentProps<typeof SearchList> {}
 export interface CommandDialogProps extends Omit<SheetProps, "placement"> {}
 
 /** An inline command palette. SearchList owns filtering and keyboard selection. */
 export function Command({ className, ...props }: CommandProps) {
-    return (
-        <SearchList
-            {...props}
-            className={cn(
-                "not-typeset glass-menu flex min-h-0 w-full flex-col overflow-hidden rounded-3xl",
-                className
-            )}
-        />
-    )
+	return (
+		<SearchList
+			{...props}
+			className={cn(
+				"not-typeset glass-menu flex min-h-0 w-full flex-col overflow-hidden rounded-3xl",
+				className,
+			)}
+		/>
+	);
 }
 
 /** A modal command palette with Sheet's focus isolation and restoration. */
-export function CommandDialog({ children, className, ...props }: CommandDialogProps) {
-    return (
-        <Sheet
-            {...props}
-            placement="center"
-            className={cn("max-w-lg rounded-3xl outline-none", className)}
-        >
-            <SearchList className="not-typeset flex min-h-0 flex-col">{children}</SearchList>
-        </Sheet>
-    )
+export function CommandDialog({
+	children,
+	className,
+	...props
+}: CommandDialogProps) {
+	return (
+		<Sheet
+			{...props}
+			placement="center"
+			className={cn("max-w-lg rounded-3xl outline-none", className)}
+		>
+			<SearchList className="not-typeset flex min-h-0 flex-col">
+				{children}
+			</SearchList>
+		</Sheet>
+	);
 }
 
 export function CommandInput({
-    className,
-    autoFocus,
-    ref: forwardedRef,
-    ...props
+	className,
+	autoFocus,
+	ref: forwardedRef,
+	...props
 }: ComponentProps<typeof SearchListField>) {
-    const input = useRef<HTMLInputElement>(null)
-    useEffect(() => {
-        if (autoFocus) input.current?.focus({ preventScroll: true })
-    }, [autoFocus])
-    return (
-        <div className="flex shrink-0 items-center gap-2 border-b border-separator/50 px-4">
-            <SearchIcon size={17} className="shrink-0 text-label-tertiary" />
-            <SearchListField
-                {...props}
-                ref={(node) => {
-                    input.current = node
-                    if (typeof forwardedRef === "function") forwardedRef(node)
-                    else if (forwardedRef) forwardedRef.current = node
-                }}
-                className={cn(
-                    "min-h-12 rounded-none border-0 bg-transparent px-0 focus-visible:ring-0",
-                    className
-                )}
-            />
-        </div>
-    )
+	const input = useRef<HTMLInputElement>(null);
+	useEffect(() => {
+		if (autoFocus) input.current?.focus({ preventScroll: true });
+	}, [autoFocus]);
+	return (
+		<div className="border-separator/50 flex shrink-0 items-center gap-2 border-b px-4">
+			<SearchIcon size={17} className="text-label-tertiary shrink-0" />
+			<SearchListField
+				{...props}
+				ref={(node) => {
+					input.current = node;
+					if (typeof forwardedRef === "function") forwardedRef(node);
+					else if (forwardedRef) forwardedRef.current = node;
+				}}
+				className={cn(
+					"min-h-12 rounded-none border-0 bg-transparent px-0 focus-visible:ring-0",
+					className,
+				)}
+			/>
+		</div>
+	);
 }
 
-export function CommandList({ className, ...props }: ComponentProps<typeof SearchListResults>) {
-    return (
-        <SearchListResults {...props} className={cn("max-h-[min(60svh,24rem)] p-1.5", className)} />
-    )
+export function CommandList({
+	className,
+	...props
+}: ComponentProps<typeof SearchListResults>) {
+	return (
+		<SearchListResults
+			{...props}
+			className={cn("max-h-[min(60svh,24rem)] p-1.5", className)}
+		/>
+	);
 }
 
-export function CommandEmpty({ className, ...props }: ComponentProps<typeof SearchListEmpty>) {
-    return (
-        <SearchListEmpty
-            {...props}
-            className={cn("px-3 py-8 text-center text-footnote text-label-secondary", className)}
-        />
-    )
+export function CommandEmpty({
+	className,
+	...props
+}: ComponentProps<typeof SearchListEmpty>) {
+	return (
+		<SearchListEmpty
+			{...props}
+			className={cn(
+				"text-footnote text-label-secondary px-3 py-8 text-center",
+				className,
+			)}
+		/>
+	);
 }
 
-export function CommandShortcut({ className, ...props }: ComponentProps<typeof KeyboardShortcut>) {
-    return (
-        <KeyboardShortcut
-            {...props}
-            className={cn("ms-auto border-0 bg-transparent text-label-tertiary", className)}
-        />
-    )
+export function CommandShortcut({
+	className,
+	...props
+}: ComponentProps<typeof KeyboardShortcut>) {
+	return (
+		<KeyboardShortcut
+			{...props}
+			className={cn(
+				"text-label-tertiary ms-auto border-0 bg-transparent",
+				className,
+			)}
+		/>
+	);
 }
 
-export function CommandGroup({ className, ...props }: ComponentProps<typeof SearchListGroup>) {
-    return (
-        <SearchListGroup
-            {...props}
-            className={cn(
-                "border-separator/50 not-first:mt-1 not-first:border-t not-first:pt-1",
-                className
-            )}
-        />
-    )
+export function CommandGroup({
+	className,
+	...props
+}: ComponentProps<typeof SearchListGroup>) {
+	return (
+		<SearchListGroup
+			{...props}
+			className={cn(
+				"border-separator/50 not-first:mt-1 not-first:border-t not-first:pt-1",
+				className,
+			)}
+		/>
+	);
 }
 
-export function CommandItem({ className, ...props }: ComponentProps<typeof SearchListItem>) {
-    return (
-        <SearchListItem
-            {...props}
-            className={cn(
-                "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-label-secondary",
-                className
-            )}
-        />
-    )
+export function CommandItem({
+	className,
+	...props
+}: ComponentProps<typeof SearchListItem>) {
+	return (
+		<SearchListItem
+			{...props}
+			className={cn(
+				"[&>svg]:text-label-secondary [&>svg]:size-4 [&>svg]:shrink-0",
+				className,
+			)}
+		/>
+	);
 }