@passui/react 0.1.17 → 0.1.20

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,11 +10,26 @@ 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
+    /** 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. */
@@ -39,14 +49,13 @@ 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",
         isPending = false,
+        contentClassName,
         disabled,
         children,
         className,
@@ -55,8 +64,7 @@ export const Button = forwardRef<
     },
     ref
 ) {
-    const showPendingIndicator =
-        usePendingIndicator(isPending)
+    const showPendingIndicator = usePendingIndicator(isPending)
 
     return (
         <button
@@ -80,7 +88,8 @@ export const Button = forwardRef<
             <span
                 className={cn(
                     "inline-flex items-center justify-center gap-2 transition-opacity duration-200",
-                    showPendingIndicator && "opacity-0"
+                    showPendingIndicator && "opacity-0",
+                    contentClassName
                 )}
             >
                 {children}

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(

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

@@ -0,0 +1,41 @@
+import { Fragment, type ComponentProps, type ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+    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 presentation without shipping a highlighter or formatter to consumers. */
+export function CodeBlock({
+    code,
+    children,
+    lineNumbers = true,
+    className,
+    ...props
+}: CodeBlockProps) {
+    const lines = code.split("\n")
+    return (
+        <div
+            {...props}
+            className={cn("passui-code-block", className)}
+            data-line-numbers={lineNumbers || undefined}
+        >
+            {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>
+    )
+}

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

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

package/src/components/command/command.tsx

@@ -0,0 +1,119 @@
+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"
+
+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
+            )}
+        />
+    )
+}
+
+/** 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 CommandInput({
+    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>
+    )
+}
+
+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 CommandShortcut({ className, ...props }: ComponentProps<typeof KeyboardShortcut>) {
+    return (
+        <KeyboardShortcut
+            {...props}
+            className={cn("ms-auto border-0 bg-transparent text-label-tertiary", 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
+            )}
+        />
+    )
+}

package/src/components/compact-date-picker/calendar-month.ts

@@ -9,11 +9,7 @@ export interface CalendarDay {
 export function parseDay(value: string): CalendarDay | null {
     const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
     if (!match) return null
-    const [year, month, day] = [
-        Number(match[1]),
-        Number(match[2]),
-        Number(match[3]),
-    ]
+    const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])]
     const date = new Date(Date.UTC(year, month - 1, day))
     const real =
         date.getUTCFullYear() === year &&
@@ -22,24 +18,14 @@ export function parseDay(value: string): CalendarDay | null {
     return real ? { year, month, day } : null
 }
 
-export function formatDay({
-    year,
-    month,
-    day,
-}: CalendarDay): string {
-    const pad = (value: number, width: number) =>
-        String(value).padStart(width, "0")
+export function formatDay({ year, month, day }: CalendarDay): string {
+    const pad = (value: number, width: number) => String(value).padStart(width, "0")
     return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`
 }
 
 /** Moves by whole days, across months and years. */
-export function addDays(
-    day: CalendarDay,
-    count: number
-): CalendarDay {
-    const date = new Date(
-        Date.UTC(day.year, day.month - 1, day.day + count)
-    )
+export function addDays(day: CalendarDay, count: number): CalendarDay {
+    const date = new Date(Date.UTC(day.year, day.month - 1, day.day + count))
     return {
         year: date.getUTCFullYear(),
         month: date.getUTCMonth() + 1,
@@ -48,18 +34,11 @@ export function addDays(
 }
 
 /** Moves by months, keeping the day where the month allows (31 Jan + 1 is 28 or 29 Feb). */
-export function addMonths(
-    day: CalendarDay,
-    count: number
-): CalendarDay {
-    const first = new Date(
-        Date.UTC(day.year, day.month - 1 + count, 1)
-    )
+export function addMonths(day: CalendarDay, count: number): CalendarDay {
+    const first = new Date(Date.UTC(day.year, day.month - 1 + count, 1))
     const year = first.getUTCFullYear()
     const month = first.getUTCMonth() + 1
-    const last = new Date(
-        Date.UTC(year, month, 0)
-    ).getUTCDate()
+    const last = new Date(Date.UTC(year, month, 0)).getUTCDate()
     return { year, month, day: Math.min(day.day, last) }
 }
 
@@ -70,31 +49,14 @@ export function addMonths(
  */
 export function firstWeekday(locale: string): number {
     try {
-        const info = new Intl.Locale(
-            locale
-        ) as Intl.Locale & {
+        const info = new Intl.Locale(locale) as Intl.Locale & {
             getWeekInfo?: () => { firstDay: number }
             weekInfo?: { firstDay: number }
         }
-        const first =
-            info.getWeekInfo?.().firstDay ??
-            info.weekInfo?.firstDay
+        const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
         if (first) return first
         const region = info.maximize().region ?? ""
-        return [
-            "US",
-            "CA",
-            "JP",
-            "KR",
-            "TW",
-            "BR",
-            "MX",
-            "IL",
-            "PH",
-            "IN",
-        ].includes(region)
-            ? 7
-            : 1
+        return ["US", "CA", "JP", "KR", "TW", "BR", "MX", "IL", "PH", "IN"].includes(region) ? 7 : 1
     } catch {
         return 1
     }
@@ -107,9 +69,7 @@ export function monthGrid(
     firstDay: number
 ): Array<CalendarDay & { inMonth: boolean }> {
     // getUTCDay counts Sunday as 0; weeks here count it as 7.
-    const weekday =
-        new Date(Date.UTC(year, month - 1, 1)).getUTCDay() ||
-        7
+    const weekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7
     const lead = (weekday - firstDay + 7) % 7
     const start = addDays({ year, month, day: 1 }, -lead)
     return Array.from({ length: 42 }, (_, index) => {
@@ -122,10 +82,6 @@ export function monthGrid(
 }
 
 /** Whether `value` (`YYYY-MM-DD`) lies within the optional bounds. */
-export function withinBounds(
-    value: string,
-    min?: string,
-    max?: string
-): boolean {
+export function withinBounds(value: string, min?: string, max?: string): boolean {
     return (!min || value >= min) && (!max || value <= max)
 }