@passui/react 0.1.16 → 0.1.19

package/src/appearance/theme.tsx

@@ -1,19 +1,6 @@
 import * as React from "react"
-import {
-    createContext,
-    memo,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useState,
-} from "react"
-import type {
-    Dispatch,
-    PropsWithChildren,
-    ReactNode,
-    SetStateAction,
-} from "react"
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react"
+import type { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from "react"
 
 type ValueObject = {
     [themeName: string]: string
@@ -40,8 +27,7 @@ export type SystemTheme = "dark" | "light"
 
 export type Attribute = `data-${string}` | "class"
 
-export interface ThemeProviderProps
-    extends PropsWithChildren {
+export interface ThemeProviderProps extends PropsWithChildren {
     /** List of all available theme names */
     themes?: Array<string> | undefined
     /** Forced theme name for the current page */
@@ -67,9 +53,7 @@ export interface ThemeProviderProps
 const colorSchemes = ["light", "dark"]
 const MEDIA = "(prefers-color-scheme: dark)"
 const isServer = typeof window === "undefined"
-const ThemeContext = createContext<UseThemeProps | undefined>(
-    undefined
-)
+const ThemeContext = createContext<UseThemeProps | undefined>(undefined)
 const defaultContext: UseThemeProps = {
     setTheme: () => {
         /* no-op */
@@ -83,8 +67,7 @@ const defaultContext: UseThemeProps = {
  * @example
  * const { theme, setTheme } = useTheme()
  */
-export const useTheme = (): UseThemeProps =>
-    useContext(ThemeContext) ?? defaultContext
+export const useTheme = (): UseThemeProps => useContext(ThemeContext) ?? defaultContext
 
 /**
  * Theme provider component is used to wrap your app &
@@ -103,9 +86,7 @@ export const useTheme = (): UseThemeProps =>
  *     <App />
  * </ThemeProvider>
  */
-export const ThemeProvider = (
-    props: ThemeProviderProps
-): ReactNode => {
+export const ThemeProvider = (props: ThemeProviderProps): ReactNode => {
     const context = useContext(ThemeContext)
     // Ignore nested context providers, just passthrough children
     if (context) {
@@ -128,15 +109,10 @@ const Theme = ({
     children,
     nonce,
 }: ThemeProviderProps) => {
-    const [theme, setThemeState] = useState(() =>
-        getTheme(storageKey, defaultTheme)
-    )
+    const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))
 
     const applyClassAttribute = useCallback(
-        (
-            name: string | undefined,
-            attrValues: Array<string>
-        ) => {
+        (name: string | undefined, attrValues: Array<string>) => {
             const d = document.documentElement
             d.classList.remove(...attrValues)
             if (name) {
@@ -146,26 +122,19 @@ const Theme = ({
         []
     )
 
-    const applyDataAttribute = useCallback(
-        (attr: string, name: string | undefined) => {
-            const d = document.documentElement
-            if (name) {
-                d.setAttribute(attr, name)
-            } else {
-                d.removeAttribute(attr)
-            }
-        },
-        []
-    )
+    const applyDataAttribute = useCallback((attr: string, name: string | undefined) => {
+        const d = document.documentElement
+        if (name) {
+            d.setAttribute(attr, name)
+        } else {
+            d.removeAttribute(attr)
+        }
+    }, [])
 
     const applyAttributesToDOM = useCallback(
         (resolved: string) => {
-            const attributeList = Array.isArray(attribute)
-                ? attribute
-                : [attribute]
-            const attrValues = value
-                ? Object.values(value)
-                : themes
+            const attributeList = Array.isArray(attribute) ? attribute : [attribute]
+            const attrValues = value ? Object.values(value) : themes
             const name = value ? value[resolved] : resolved
 
             for (const attr of attributeList) {
@@ -176,13 +145,7 @@ const Theme = ({
                 }
             }
         },
-        [
-            attribute,
-            themes,
-            value,
-            applyClassAttribute,
-            applyDataAttribute,
-        ]
+        [attribute, themes, value, applyClassAttribute, applyDataAttribute]
     )
 
     const applyColorScheme = useCallback(
@@ -190,18 +153,9 @@ const Theme = ({
             if (!enableColorScheme) {
                 return
             }
-            const fallback = colorSchemes.includes(
-                defaultTheme
-            )
-                ? defaultTheme
-                : null
-            const colorScheme = colorSchemes.includes(
-                resolved
-            )
-                ? resolved
-                : fallback
-            document.documentElement.style.colorScheme =
-                colorScheme || ""
+            const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null
+            const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback
+            document.documentElement.style.colorScheme = colorScheme || ""
         },
         [enableColorScheme, defaultTheme]
     )
@@ -212,32 +166,19 @@ const Theme = ({
             if (!nextTheme) {
                 return
             }
-            const resolved =
-                nextTheme === "system" && enableSystem
-                    ? getSystemTheme()
-                    : nextTheme
-            const enable = disableTransitionOnChange
-                ? disableAnimation()
-                : null
+            const resolved = nextTheme === "system" && enableSystem ? getSystemTheme() : nextTheme
+            const enable = disableTransitionOnChange ? disableAnimation() : null
             applyAttributesToDOM(resolved)
             applyColorScheme(resolved)
             enable?.()
         },
-        [
-            enableSystem,
-            disableTransitionOnChange,
-            applyAttributesToDOM,
-            applyColorScheme,
-        ]
+        [enableSystem, disableTransitionOnChange, applyAttributesToDOM, applyColorScheme]
     )
 
     // Set theme state and save to local storage
     const setTheme = useCallback(
         (newValue: SetStateAction<string>) => {
-            const newTheme =
-                typeof newValue === "function"
-                    ? newValue(theme ?? "")
-                    : newValue
+            const newTheme = typeof newValue === "function" ? newValue(theme ?? "") : newValue
             setThemeState(newTheme)
 
             // Save to storage
@@ -245,9 +186,7 @@ const Theme = ({
                 localStorage.setItem(storageKey, newTheme)
             } catch {
                 // localStorage might not be available
-                console.error(
-                    "Failed to save theme to localStorage"
-                )
+                console.error("Failed to save theme to localStorage")
             }
         },
         [theme, storageKey]
@@ -255,11 +194,7 @@ const Theme = ({
 
     const handleMediaQuery = useCallback(
         (_event: MediaQueryListEvent | MediaQueryList) => {
-            if (
-                theme === "system" &&
-                enableSystem &&
-                !forcedTheme
-            ) {
+            if (theme === "system" && enableSystem && !forcedTheme) {
                 applyTheme("system")
             }
         },
@@ -276,11 +211,7 @@ const Theme = ({
         // Intentionally use deprecated listener methods to support iOS 13 and older browsers
         media.addEventListener("change", handleMediaQuery)
         handleMediaQuery(media)
-        return () =>
-            media.removeEventListener(
-                "change",
-                handleMediaQuery
-            )
+        return () => media.removeEventListener("change", handleMediaQuery)
     }, [handleMediaQuery])
 
     // localStorage event handling, allow to sync theme changes between tabs
@@ -299,11 +230,7 @@ const Theme = ({
         }
 
         window.addEventListener("storage", handleStorage)
-        return () =>
-            window.removeEventListener(
-                "storage",
-                handleStorage
-            )
+        return () => window.removeEventListener("storage", handleStorage)
     }, [defaultTheme, setTheme, storageKey])
 
     // Whenever theme or forcedTheme changes, apply it
@@ -316,14 +243,9 @@ const Theme = ({
             theme,
             setTheme,
             forcedTheme,
-            themes: enableSystem
-                ? [...themes, "system"]
-                : themes,
+            themes: enableSystem ? [...themes, "system"] : themes,
             systemTheme: enableSystem
-                ? (getSystemTheme() as
-                      | "dark"
-                      | "light"
-                      | undefined)
+                ? (getSystemTheme() as "dark" | "light" | undefined)
                 : undefined,
         }),
         [theme, forcedTheme, enableSystem, themes, setTheme]
@@ -422,9 +344,7 @@ const disableAnimation = () => {
     }
 }
 
-const getSystemTheme = (
-    e?: MediaQueryList | MediaQueryListEvent
-) => {
+const getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {
     if (isServer) {
         return "light"
     }
@@ -451,9 +371,7 @@ export const script = (
 ) => {
     const el = document.documentElement
     const systemThemes = ["light", "dark"]
-    const attributes = Array.isArray(attribute)
-        ? attribute
-        : [attribute]
+    const attributes = Array.isArray(attribute) ? attribute : [attribute]
     const attrValues = value ? Object.values(value) : themes
 
     function applyClassAttr(name: string | undefined) {
@@ -463,10 +381,7 @@ export const script = (
         }
     }
 
-    function applyDataAttr(
-        attr: string,
-        name: string | undefined
-    ) {
+    function applyDataAttr(attr: string, name: string | undefined) {
         if (name) {
             el.setAttribute(attr, name)
         } else {
@@ -493,39 +408,24 @@ export const script = (
             return
         }
 
-        const fallback = systemThemes.includes(defaultTheme)
-            ? defaultTheme
-            : null
-        const colorScheme = systemThemes.includes(theme)
-            ? theme
-            : fallback
+        const fallback = systemThemes.includes(defaultTheme) ? defaultTheme : null
+        const colorScheme = systemThemes.includes(theme) ? theme : fallback
         el.style.colorScheme = colorScheme || ""
     }
 
     function resolveSystemTheme() {
-        return window.matchMedia(
-            "(prefers-color-scheme: dark)"
-        ).matches
-            ? "dark"
-            : "light"
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
     }
 
     if (forcedTheme) {
         const resolvedForcedTheme =
-            forcedTheme === "system" && enableSystem
-                ? resolveSystemTheme()
-                : forcedTheme
+            forcedTheme === "system" && enableSystem ? resolveSystemTheme() : forcedTheme
         updateDOM(resolvedForcedTheme)
     } else {
         try {
-            const themeName =
-                localStorage.getItem(storageKey) ||
-                defaultTheme
-            const isSystem =
-                enableSystem && themeName === "system"
-            const theme = isSystem
-                ? resolveSystemTheme()
-                : themeName
+            const themeName = localStorage.getItem(storageKey) || defaultTheme
+            const isSystem = enableSystem && themeName === "system"
+            const theme = isSystem ? resolveSystemTheme() : themeName
             updateDOM(theme)
         } catch {
             // localStorage might not be available

package/src/components/ambient/ambient.tsx

@@ -11,17 +11,9 @@ type AmbientProps = ComponentPropsWithoutRef<"section"> & {
  * edge: a blown-up, blurred copy of the image masked into a circle that
  * fades into the page, the way Apple lets a photo light its surroundings.
  */
-export function Ambient({
-    src,
-    className,
-    children,
-    ...props
-}: AmbientProps) {
+export function Ambient({ src, className, children, ...props }: AmbientProps) {
     return (
-        <section
-            className={cn("relative isolate", className)}
-            {...props}
-        >
+        <section className={cn("relative isolate", className)} {...props}>
             {src && (
                 <img
                     aria-hidden

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

@@ -7,30 +7,24 @@ export type ButtonVariant =
     | "link"
     | "accent"
 
-export type ButtonSize =
-    | "default"
-    | "xs"
-    | "sm"
-    | "lg"
-    | "icon"
-    | "icon-xs"
-    | "icon-sm"
-    | "icon-lg"
-    | "icon-full"
+/** 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
+
+export type IconButtonSize = keyof typeof iconButtonSizes
 
-export type IconButtonSize =
-    | "icon"
-    | "icon-xs"
-    | "icon-sm"
-    | "icon-lg"
+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",
+    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",
@@ -43,18 +37,6 @@ export const buttonSizes: Record<ButtonSize, string> = {
     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",
-    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",
-    "icon-full":
-        "h-11 w-full px-5 text-subheadline rounded-full",
+    ...iconButtonSizes,
+    "icon-full": "h-11 w-full px-5 text-subheadline rounded-full",
 }
-
-export const iconButtonSizes: Record<IconButtonSize, string> =
-    {
-        icon: "size-11",
-        "icon-xs": "size-8",
-        "icon-sm": "size-9",
-        "icon-lg": "size-12",
-    }

package/src/components/button/button.tsx

@@ -2,12 +2,7 @@ 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 { buttonSizes, buttonVariants, type ButtonSize, type ButtonVariant } from "./button-styles"
 
 export type { ButtonSize, ButtonVariant }
 
@@ -15,10 +10,23 @@ 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> {
+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
 }
 
@@ -39,10 +47,8 @@ export function buttonStyle({
     )
 }
 
-export const Button = forwardRef<
-    HTMLButtonElement,
-    ButtonProps
->(function Button(
+/** A native button with Passui styling, pending feedback, and an HTMLButtonElement ref. */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     {
         variant = "default",
         size = "default",
@@ -55,8 +61,7 @@ export const Button = forwardRef<
     },
     ref
 ) {
-    const showPendingIndicator =
-        usePendingIndicator(isPending)
+    const showPendingIndicator = usePendingIndicator(isPending)
 
     return (
         <button

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

@@ -1,73 +1,31 @@
-import { type ButtonHTMLAttributes, forwardRef } from "react"
+import { forwardRef } from "react"
 import { cn } from "../../lib/class-names"
-import { PendingSpinner } from "./pending-spinner"
-import { usePendingIndicator } from "./use-pending-indicator"
-import {
-    buttonVariants,
-    iconButtonSizes,
-    type ButtonVariant,
-    type IconButtonSize,
-} from "./button-styles"
+import { Button, type ButtonProps } from "./button"
+import type { ButtonVariant, IconButtonSize } from "./button-styles"
 
-export type { IconButtonSize }
+export type { ButtonVariant, IconButtonSize }
 
-export interface IconButtonProps
-    extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Required: icon-only buttons need an accessible name. */
+export interface IconButtonProps extends Omit<ButtonProps, "size"> {
+    /** Icon-only actions must have an accessible name. */
     label: string
-    variant?: ButtonVariant
     size?: IconButtonSize
-    isPending?: boolean
 }
 
-export const IconButton = forwardRef<
-    HTMLButtonElement,
-    IconButtonProps
->(function IconButton(
-    {
-        label,
-        variant = "default",
-        size = "icon",
-        isPending = false,
-        disabled,
-        children,
-        className,
-        type = "button",
-        ...props
-    },
+/** 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
 ) {
-    const showPendingIndicator =
-        usePendingIndicator(isPending)
-
     return (
-        <button
+        <Button
             ref={ref}
-            type={type}
+            size={size}
             aria-label={label}
             data-tooltip={label}
-            className={cn(
-                "relative",
-                "group inline-flex shrink-0 items-center justify-center rounded-full transition-[background-color,filter,transform,box-shadow] duration-fast ease-standard active:scale-[0.92] disabled:pointer-events-none disabled:opacity-40 data-pending:cursor-progress data-pending:disabled:opacity-100",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-                iconButtonSizes[size],
-                buttonVariants[variant],
-                className
-            )}
+            className={cn("active:scale-[0.92]", className)}
             {...props}
-            data-pending={isPending || undefined}
-            disabled={disabled || isPending}
-            aria-busy={isPending || props["aria-busy"]}
         >
-            <span
-                className={cn(
-                    "inline-flex items-center justify-center transition-opacity duration-200",
-                    showPendingIndicator && "opacity-0"
-                )}
-            >
-                {children}
-            </span>
-            {showPendingIndicator && <PendingSpinner />}
-        </button>
+            {children}
+        </Button>
     )
 })

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

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

package/src/components/chip/chip.tsx

@@ -1,27 +1,22 @@
 import type { HTMLAttributes } from "react"
 import { cn } from "../../lib/class-names"
 
-export type ChipTone =
-    | "neutral"
-    | "accent"
-    | "public"
-    | "family"
-    | "friends"
+export type ChipTone = "neutral" | "accent" | "public" | "family" | "friends"
 
 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]",
+    friends: "bg-[#ede8ff] text-[#5a3fc0] dark:bg-[#26203f] dark:text-[#c3b5ff]",
 }
 
-export function Chip({
-    tone = "neutral",
-    className,
-    ...props
-}: HTMLAttributes<HTMLSpanElement> & { tone?: ChipTone }) {
+export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    /** `neutral`, `accent`, `public`, `family`, or `friends`. @default "neutral" */
+    tone?: ChipTone
+}
+
+export function Chip({ tone = "neutral", className, ...props }: ChipProps) {
     return (
         <span
             className={cn(