@passui/react 0.1.17 → 0.1.20

package/src/appearance/platform.tsx

@@ -1,18 +1,6 @@
-import {
-    createContext,
-    useContext,
-    useEffect,
-    useState,
-    type PropsWithChildren,
-} from "react"
+import { createContext, useContext, useEffect, useState, type PropsWithChildren } from "react"
 
-export type PlatformOS =
-    | "ios"
-    | "android"
-    | "macos"
-    | "windows"
-    | "linux"
-    | "unknown"
+export type PlatformOS = "ios" | "android" | "macos" | "windows" | "linux" | "unknown"
 
 const PlatformContext = createContext<PlatformOS>("unknown")
 
@@ -21,12 +9,7 @@ export function detectPlatform(
     platform: string,
     maxTouchPoints: number
 ): PlatformOS {
-    return resolvePlatform(
-        null,
-        userAgent,
-        platform,
-        maxTouchPoints
-    )
+    return resolvePlatform(null, userAgent, platform, maxTouchPoints)
 }
 
 export function resolvePlatform(
@@ -48,8 +31,7 @@ export function resolvePlatform(
 
     if (/android/i.test(userAgent)) return "android"
     if (/iPhone|iPad|iPod/i.test(userAgent)) return "ios"
-    if (platform === "MacIntel" && maxTouchPoints > 1)
-        return "ios"
+    if (platform === "MacIntel" && maxTouchPoints > 1) return "ios"
     if (/Mac/i.test(platform)) return "macos"
     if (/Win/i.test(platform)) return "windows"
     if (/Linux/i.test(platform)) return "linux"
@@ -65,20 +47,11 @@ function initializePlatform(
 ) {
     root.setAttribute(
         "data-os",
-        resolve(
-            root.getAttribute("data-os"),
-            userAgent,
-            platform,
-            maxTouchPoints
-        )
+        resolve(root.getAttribute("data-os"), userAgent, platform, maxTouchPoints)
     )
 }
 
-export function PlatformScript({
-    nonce,
-}: {
-    nonce?: string
-}) {
+export function PlatformScript({ nonce }: { nonce?: string }) {
     return (
         <script
             // Run the library's platform bootstrap before first paint.
@@ -91,11 +64,8 @@ export function PlatformScript({
     )
 }
 
-export function PlatformProvider({
-    children,
-}: PropsWithChildren) {
-    const [platform, setPlatform] =
-        useState<PlatformOS>("unknown")
+export function PlatformProvider({ children }: PropsWithChildren) {
+    const [platform, setPlatform] = useState<PlatformOS>("unknown")
 
     useEffect(() => {
         const resolved = resolvePlatform(
@@ -104,18 +74,11 @@ export function PlatformProvider({
             navigator.platform,
             navigator.maxTouchPoints
         )
-        document.documentElement.setAttribute(
-            "data-os",
-            resolved
-        )
+        document.documentElement.setAttribute("data-os", resolved)
         setPlatform(resolved)
     }, [])
 
-    return (
-        <PlatformContext.Provider value={platform}>
-            {children}
-        </PlatformContext.Provider>
-    )
+    return <PlatformContext.Provider value={platform}>{children}</PlatformContext.Provider>
 }
 
 export function usePlatform() {

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/accordion/accordion.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react"
+import { DisclosureGroup } from "../disclosure-group/disclosure-group"
+import { cn } from "../../lib/class-names"
+
+export interface AccordionItem {
+    /** 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
+    className?: string
+}
+
+/** A single-open, collapsible accordion with labelled animated content regions. */
+export function Accordion({ items, value, onValueChange, className }: AccordionProps) {
+    return (
+        <div
+            className={cn(
+                "flex w-full min-w-0 flex-col overflow-hidden rounded-2xl 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}
+                    triggerClassName="rounded-none"
+                    onOpenChange={(open) => onValueChange(open ? item.value : null)}
+                    className={cn(index > 0 && "border-t border-separator/60")}
+                >
+                    {item.content}
+                </DisclosureGroup>
+            ))}
+        </div>
+    )
+}

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/aspect-ratio/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+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
+}
+
+/** 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 }}
+        />
+    )
+}

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface BreadcrumbItem {
+    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
+}
+/** Ancestors stay links; the final item identifies the current page. */
+export function Breadcrumb({ label, items, className, renderLink }: BreadcrumbProps) {
+    return (
+        <nav aria-label={label} className={cn("not-typeset", className)}>
+            <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0 text-footnote text-label-secondary">
+                {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>
+    )
+}

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",
-    }