@passui/react 0.1.39 → 0.1.41

package/src/components/conversation/conversation.tsx

@@ -16,12 +16,73 @@ export type ConversationMessage = {
     createdAt: string
 }
 
+export type ConversationSize = "sm" | "md" | "lg"
+
+const avatarSizes: Record<ConversationSize, string> = {
+    sm: "size-6",
+    md: "size-7",
+    lg: "size-8",
+}
+const bubbleClasses: Record<ConversationSize, string> = {
+    sm: "rounded-3xl px-3 py-1.5 text-footnote leading-snug",
+    md: "rounded-4xl px-3.5 py-2 text-subheadline leading-snug",
+    lg: "rounded-5xl px-4 py-2.5 text-body leading-snug",
+}
+const bubbleTails: Record<ConversationSize, string> = {
+    sm: "rounded-br-sm",
+    md: "rounded-br-md",
+    lg: "rounded-br-lg",
+}
+const bubbleTailsOther: Record<ConversationSize, string> = {
+    sm: "rounded-bl-sm",
+    md: "rounded-bl-md",
+    lg: "rounded-bl-lg",
+}
+const authorText: Record<ConversationSize, string> = {
+    sm: "px-3 text-caption2 text-label-secondary",
+    md: "px-3 text-caption2 text-label-secondary",
+    lg: "px-3.5 text-caption text-label-secondary",
+}
+const timeText: Record<ConversationSize, string> = {
+    sm: "px-3 text-caption2 text-label-secondary tabular-nums",
+    md: "px-3 text-caption2 text-label-secondary tabular-nums",
+    lg: "px-3.5 text-caption text-label-secondary tabular-nums",
+}
+const dayMargins: Record<ConversationSize, string> = {
+    sm: "my-3",
+    md: "my-4",
+    lg: "my-5",
+}
+
+// Composer size records
+const composerSurfaces: Record<ConversationSize, string> = {
+    sm: "flex items-end gap-2 rounded-4xl border border-separator bg-elevated py-1 pr-1 pl-3 transition-colors focus-within:border-accent-text/60",
+    md: "flex items-end gap-2 rounded-5xl border border-separator bg-elevated py-1.5 pr-1.5 pl-4 transition-colors focus-within:border-accent-text/60",
+    lg: "flex items-end gap-2 rounded-5xl border border-separator bg-elevated py-2 pr-2 pl-5 transition-colors focus-within:border-accent-text/60",
+}
+const textareaClasses: Record<ConversationSize, string> = {
+    sm: "field-sizing-content max-h-48 min-h-8 flex-1 resize-none bg-transparent py-1 text-footnote text-label outline-none placeholder:text-label-secondary",
+    md: "field-sizing-content max-h-48 min-h-9 flex-1 resize-none bg-transparent py-1.5 text-subheadline text-label outline-none placeholder:text-label-secondary",
+    lg: "field-sizing-content max-h-48 min-h-10 flex-1 resize-none bg-transparent py-2 text-body text-label outline-none placeholder:text-label-secondary",
+}
+const sendButtonClasses: Record<ConversationSize, string> = {
+    sm: "size-7 shrink-0 rounded-full",
+    md: "size-8 shrink-0 rounded-full",
+    lg: "size-9 shrink-0 rounded-full",
+}
+const sendIconSizes: Record<ConversationSize, number> = {
+    sm: 16,
+    md: 18,
+    lg: 20,
+}
+const counterText: Record<ConversationSize, string> = {
+    sm: "text-caption2 text-label-secondary tabular-nums",
+    md: "text-caption2 text-label-secondary tabular-nums",
+    lg: "text-caption text-label-secondary tabular-nums",
+}
+
 const GROUP_GAP_MS = 5 * 60 * 1000
 
-/**
- * The day line: today and yesterday in the reader's own words, from
- * Intl rather than built-in English, else the full date.
- */
 function dayLabel(iso: string, locale?: string) {
     const date = new Date(iso)
     const today = new Date()
@@ -59,10 +120,13 @@ const clock = (iso: string, locale?: string) =>
 function Messages({
     messages,
     locale,
+    size = "md",
 }: {
     messages: ConversationMessage[]
     /** For day names and times; the reader's own by default. */
     locale?: string
+    /** Bubble, avatar, author and time scale. @default "md" */
+    size?: ConversationSize
 }) {
     return (
         <ol data-not-typeset className="flex flex-col">
@@ -87,10 +151,12 @@ function Messages({
                 return (
                     <li key={message.id} className="flex flex-col">
                         {newDay && (
-                            // the reader's own day and clock, which a server can't know
                             <span
                                 suppressHydrationWarning
-                                className="my-4 text-center text-caption2 font-medium text-label-secondary"
+                                className={cn(
+                                    dayMargins[size],
+                                    "text-center text-caption2 font-medium text-label-secondary"
+                                )}
                             >
                                 {dayLabel(message.createdAt, locale)}
                             </span>
@@ -103,7 +169,12 @@ function Messages({
                             )}
                         >
                             {!message.mine && (
-                                <span className="flex size-7 shrink-0 items-center justify-center">
+                                <span
+                                    className={cn(
+                                        "flex shrink-0 items-center justify-center",
+                                        avatarSizes[size]
+                                    )}
+                                >
                                     {endsGroup && message.avatar}
                                 </span>
                             )}
@@ -114,21 +185,21 @@ function Messages({
                                 )}
                             >
                                 {startsGroup && message.author && (
-                                    <span className="px-3 text-caption2 text-label-secondary">
-                                        {message.author}
-                                    </span>
+                                    <span className={authorText[size]}>{message.author}</span>
                                 )}
-                                {/* text only: a message can never become markup */}
                                 <p
                                     suppressHydrationWarning
                                     title={formatTime(message.createdAt)}
                                     className={cn(
-                                        "rounded-4xl px-3.5 py-2 text-subheadline leading-snug whitespace-pre-wrap wrap-break-word",
+                                        bubbleClasses[size],
+                                        "whitespace-pre-wrap wrap-break-word",
                                         message.mine
                                             ? "bg-inverse text-on-inverse"
                                             : "bg-fill text-label",
                                         endsGroup &&
-                                            (message.mine ? "rounded-br-md" : "rounded-bl-md")
+                                            (message.mine
+                                                ? bubbleTails[size]
+                                                : bubbleTailsOther[size])
                                     )}
                                 >
                                     {message.body}
@@ -137,7 +208,7 @@ function Messages({
                                     <time
                                         suppressHydrationWarning
                                         dateTime={message.createdAt}
-                                        className="px-3 text-caption2 text-label-secondary tabular-nums"
+                                        className={timeText[size]}
                                     >
                                         {clock(message.createdAt, locale)}
                                     </time>
@@ -165,6 +236,8 @@ type ComposerProps = {
      * (count) => `${count} left`. Without it, just the number shows.
      */
     remaining?: (count: number) => string
+    /** Surface, textarea, send button and counter scale. @default "md" */
+    size?: ConversationSize
 }
 
 /** A reply field with a round send button; Ctrl/Cmd+Enter sends, and it clears only once the send worked. */
@@ -176,6 +249,7 @@ function Composer({
     actions,
     sendLabel,
     remaining,
+    size = "md",
 }: ComposerProps) {
     const [body, setBody] = useState("")
     const ready = body.trim().length > 0 && !pending
@@ -194,7 +268,7 @@ function Composer({
                 void send()
             }}
         >
-            <div className="flex items-end gap-2 rounded-5xl border border-separator bg-elevated py-1.5 pr-1.5 pl-4 transition-colors focus-within:border-accent-text/60">
+            <div className={composerSurfaces[size]}>
                 <textarea
                     value={body}
                     onChange={(event) => setBody(event.target.value)}
@@ -207,21 +281,21 @@ function Composer({
                     maxLength={maxLength}
                     placeholder={placeholder}
                     rows={1}
-                    className="field-sizing-content max-h-48 min-h-9 flex-1 resize-none bg-transparent py-1.5 text-subheadline text-label outline-none placeholder:text-label-secondary"
+                    className={textareaClasses[size]}
                 />
                 <IconButton
                     type="submit"
                     size="icon-xs"
                     disabled={!ready}
                     label={sendLabel}
-                    className="size-8 shrink-0 rounded-full"
+                    className={sendButtonClasses[size]}
                 >
-                    <SendIcon size={18} strokeWidth={2.5} />
+                    <SendIcon size={sendIconSizes[size]} strokeWidth={2.5} />
                 </IconButton>
             </div>
             <div className="flex min-h-6 items-center gap-2 px-1">
                 {actions}
-                <span className="ml-auto text-caption2 text-label-secondary tabular-nums">
+                <span className={cn("ml-auto", counterText[size])}>
                     {body.length > maxLength * 0.8 &&
                         (remaining?.(maxLength - body.length) ?? maxLength - body.length)}
                 </span>

package/src/components/one-time-code/one-time-code.tsx

@@ -11,6 +11,18 @@ import { cn } from "../../lib/class-names"
 
 export type OneTimeCodeStatus = "idle" | "verifying" | "success" | "error"
 export type OneTimeCodeFormat = "numeric" | "alphanumeric"
+export type OneTimeCodeSize = "sm" | "md" | "lg"
+
+const checkSizes: Record<OneTimeCodeSize, number> = {
+    sm: 20,
+    md: 24,
+    lg: 28,
+}
+const statusText: Record<OneTimeCodeSize, string> = {
+    sm: "mt-1.5 text-caption2",
+    md: "mt-2 text-footnote",
+    lg: "mt-2.5 text-subheadline",
+}
 export interface OneTimeCodeProps
     extends Omit<
         InputHTMLAttributes<HTMLInputElement>,
@@ -30,6 +42,8 @@ export interface OneTimeCodeProps
     status?: OneTimeCodeStatus
     /** Localized verification feedback announced without reading decorative cells. */
     statusLabel?: string
+    /** Cell height, digit text scale and check icon size. @default "md" */
+    size?: OneTimeCodeSize
 }
 
 /** Normalize common numeric keyboards and optional ASCII letters in one native field. */
@@ -60,6 +74,7 @@ export function OneTimeCode({
     ref,
     status = "idle",
     statusLabel,
+    size = "md",
     className,
     disabled,
     id: suppliedId,
@@ -85,6 +100,7 @@ export function OneTimeCode({
         <div
             className={cn("passui-one-time-code not-typeset", className)}
             data-status={status}
+            data-size={size}
             style={{ "--otp-length": count, "--otp-middle": (count - 1) / 2 } as CSSProperties}
         >
             <svg aria-hidden="true" width="0" height="0" className="absolute">
@@ -139,7 +155,11 @@ export function OneTimeCode({
                         </span>
                     ))}
                 </div>
-                <CheckIcon aria-hidden="true" className="passui-otp-check" size={24} />
+                <CheckIcon
+                    aria-hidden="true"
+                    className="passui-otp-check"
+                    size={checkSizes[size]}
+                />
                 <input
                     {...props}
                     ref={(node) => {
@@ -186,7 +206,7 @@ export function OneTimeCode({
                     id={`${id}-status`}
                     role="status"
                     className={cn(
-                        "mt-2 text-footnote",
+                        statusText[size],
                         status === "error" ? "text-danger" : "text-label-secondary"
                     )}
                 >

package/src/components/popover/popover.tsx

@@ -19,6 +19,12 @@ import {
 import { fitPopover, type PopoverFit } from "./popover-fit"
 
 export type PopoverOrigin = "top-left" | "top-right"
+export type PopoverSize = "sm" | "md"
+
+const surfaceRadius: Record<PopoverSize, string> = {
+    sm: "rounded-3xl",
+    md: "rounded-5xl",
+}
 
 export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     open: boolean
@@ -27,6 +33,8 @@ export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     origin?: PopoverOrigin
     /** Trigger whose shape the popover uses during its opening and closing motion. */
     anchorRef?: RefObject<HTMLElement | null>
+    /** Surface corner radius. @default "md" */
+    size?: PopoverSize
 }
 
 /**
@@ -42,6 +50,7 @@ export function Popover({ open, ...props }: PopoverProps) {
 function OpenPopover({
     origin = "top-left",
     anchorRef,
+    size = "md",
     className,
     style,
     children,
@@ -259,7 +268,8 @@ function OpenPopover({
                 anchorRef
                     ? "isolate [&>:not([data-popover-surface])]:opacity-[var(--popover-content-opacity)]"
                     : "glass-menu",
-                "absolute z-40 rounded-5xl outline-none",
+                "absolute z-40 outline-none",
+                surfaceRadius[size],
                 className
             )}
             {...props}
@@ -272,7 +282,10 @@ function OpenPopover({
                     onAnimationComplete={() => {
                         if (reveal) setSettled(true)
                     }}
-                    className="glass-menu pointer-events-none absolute top-0 left-0 -z-10 rounded-5xl"
+                    className={cn(
+                        "glass-menu pointer-events-none absolute top-0 left-0 -z-10",
+                        surfaceRadius[size]
+                    )}
                     style={{ width: "100%", height: "100%" }}
                     initial={reducedMotion || !reveal ? false : reveal}
                     animate={

package/src/components/search-list/search-list.tsx

@@ -10,6 +10,24 @@ import {
 } from "react"
 import { cn } from "../../lib/class-names"
 
+export type SearchListSize = "sm" | "md" | "lg"
+
+const fieldSizes: Record<SearchListSize, string> = {
+    sm: "min-h-8 w-full rounded-full border border-separator bg-fill/60 px-3 text-caption text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
+    md: "min-h-11 w-full rounded-full border border-separator bg-fill/60 px-4 text-subheadline text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
+    lg: "min-h-13 w-full rounded-full border border-separator bg-fill/60 px-5 text-body text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
+}
+const headingSizes: Record<SearchListSize, string> = {
+    sm: "px-1.5 py-1.5 text-caption2 font-medium text-label-tertiary",
+    md: "px-2 py-2 text-caption font-medium text-label-tertiary",
+    lg: "px-2.5 py-2.5 text-subheadline font-medium text-label-tertiary",
+}
+const itemSizes: Record<SearchListSize, string> = {
+    sm: "flex min-h-8 w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-footnote text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-10",
+    md: "flex min-h-9 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-subheadline text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-11",
+    lg: "flex min-h-11 w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-body text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-13",
+}
+
 type SearchState = {
     query: string
     setQuery: (query: string) => void
@@ -18,6 +36,7 @@ type SearchState = {
     open: boolean
     visible: number
     register: (id: string, visible: boolean | null) => void
+    size: SearchListSize
 }
 const SearchContext = createContext<SearchState | null>(null)
 function useSearch() {
@@ -29,12 +48,15 @@ function useSearch() {
 export function SearchList({
     loop = true,
     open = true,
+    size = "md",
     onKeyDown,
     className,
     ...props
 }: ComponentProps<"div"> & {
     loop?: boolean
     open?: boolean
+    /** Field, item and heading density. @default "md" */
+    size?: SearchListSize
 }) {
     const [query, setQuery] = useState("")
     const updateQuery = useCallback((next: string) => {
@@ -73,6 +95,7 @@ export function SearchList({
                 open,
                 visible: Object.values(results).filter(Boolean).length,
                 register,
+                size,
             }}
         >
             <div
@@ -148,10 +171,7 @@ export function SearchListField({
                 search.setQuery(event.target.value)
                 onValueChange?.(event.target.value)
             }}
-            className={cn(
-                "min-h-11 w-full rounded-full border border-separator bg-fill/60 px-4 text-subheadline text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
-                className
-            )}
+            className={cn(fieldSizes[search.size], className)}
         />
     )
 }
@@ -179,6 +199,7 @@ export function SearchListGroup({
 }: ComponentProps<"div"> & {
     heading?: React.ReactNode
 }) {
+    const search = useSearch()
     const id = useId()
     return (
         // biome-ignore lint/a11y/useSemanticElements: Listbox option groups are not form fieldsets.
@@ -189,7 +210,7 @@ export function SearchListGroup({
             aria-labelledby={heading ? id : undefined}
         >
             {heading && (
-                <div id={id} className="px-2 py-2 text-caption font-medium text-label-tertiary">
+                <div id={id} className={headingSizes[search.size]}>
                     {heading}
                 </div>
             )}
@@ -231,10 +252,7 @@ export function SearchListItem({
             data-search-result=""
             aria-selected={search.active === id}
             data-selected={search.active === id ? "true" : undefined}
-            className={cn(
-                "flex min-h-9 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-subheadline text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-11",
-                className
-            )}
+            className={cn(itemSizes[search.size], className)}
             onMouseDown={(event) => {
                 props.onMouseDown?.(event)
                 if (!event.defaultPrevented) event.preventDefault()

package/src/components/sidebar/sidebar.tsx

@@ -16,14 +16,15 @@ export interface SidebarItemContentProps {
     children: ReactNode
 }
 
-export function SidebarSection({ title, children }: SidebarSectionProps) {
+export function SidebarSection({
+    title,
+    children,
+    size = "md",
+}: SidebarSectionProps & { size?: SidebarSize }) {
     const headingId = useId()
     return (
         <section aria-labelledby={headingId} className="flex flex-col gap-0.5">
-            <h2
-                id={headingId}
-                className="px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary"
-            >
+            <h2 id={headingId} className={sidebarHeadingSizes[size]}>
                 {title}
             </h2>
             {children}
@@ -33,20 +34,46 @@ export function SidebarSection({ title, children }: SidebarSectionProps) {
 
 /** Classes for a sidebar row; apply to the app's router link. */
 export type SidebarDensity = "regular" | "compact"
+export type SidebarSize = "sm" | "md" | "lg"
 
-export function sidebarItemClass(active?: boolean, density: SidebarDensity = "regular"): string {
+const sidebarItemSizes: Record<SidebarSize, string> = {
+    sm: "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10",
+    md: "rounded-2xl px-2.5 py-[7px] text-subheadline",
+    lg: "rounded-2xl px-3 py-2.5 text-body [@media(pointer:coarse)]:min-h-13",
+}
+const sidebarHeadingSizes: Record<SidebarSize, string> = {
+    sm: "px-2 pb-1 text-caption2 font-semibold text-label-tertiary",
+    md: "px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary",
+    lg: "px-3 pb-2 text-subheadline font-semibold text-label-tertiary",
+}
+const sidebarCountSizes: Record<SidebarSize, string> = {
+    sm: "text-caption2 tabular-nums",
+    md: "text-footnote tabular-nums",
+    lg: "text-subheadline tabular-nums",
+}
+
+export function sidebarItemClass(
+    active?: boolean,
+    density: SidebarDensity = "regular",
+    size?: SidebarSize
+): string {
+    const resolved = size ?? (density === "compact" ? "sm" : "md")
     return cn(
         "group flex w-full items-center gap-2.5 text-label no-underline transition-colors duration-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-        density === "compact"
-            ? "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10"
-            : "rounded-2xl px-2.5 py-[7px] text-subheadline",
+        sidebarItemSizes[resolved],
         active
             ? "bg-fill font-medium"
             : "font-normal text-label-secondary hover:bg-fill/70 hover:text-label"
     )
 }
 
-export function SidebarItemContent({ icon, count, active, children }: SidebarItemContentProps) {
+export function SidebarItemContent({
+    icon,
+    count,
+    active,
+    size = "md",
+    children,
+}: SidebarItemContentProps & { size?: SidebarSize }) {
     return (
         <>
             {icon && (
@@ -63,7 +90,7 @@ export function SidebarItemContent({ icon, count, active, children }: SidebarIte
             {count !== undefined && (
                 <span
                     className={cn(
-                        "text-footnote tabular-nums",
+                        sidebarCountSizes[size],
                         active ? "text-accent-text" : "text-label-tertiary"
                     )}
                 >

package/src/components/slosh-slider/slosh-slider.tsx

@@ -5,6 +5,8 @@ import { cn } from "../../lib/class-names"
 import { clampRange as clamp } from "../../lib/range-value"
 import { stepLiquid } from "./liquid-step"
 
+export type SloshSliderSize = "sm" | "md" | "lg"
+
 export interface SloshSliderProps {
     label: string
     value?: number
@@ -18,6 +20,8 @@ export interface SloshSliderProps {
     tilt?: number
     /** Track corner, from square to a pill, 0–20. @default 20 */
     corner?: number
+    /** Track height and knob scale. @default "md" */
+    size?: SloshSliderSize
     disabled?: boolean
     className?: string
     formatValue?: (value: number) => string
@@ -44,6 +48,7 @@ export function SloshSlider({
     momentum = 55,
     tilt = 45,
     corner = 20,
+    size = "md",
     disabled = false,
     className,
     formatValue,
@@ -169,6 +174,7 @@ export function SloshSlider({
         <div
             className={cn("passui-slosh-slider not-typeset", disabled && "opacity-40", className)}
             style={{ "--slosh-radius": `${clamp(corner, 0, 20)}px` } as CSSProperties}
+            data-size={size}
         >
             {/* Nothing but the track: the liquid is the value's motion, not a
             second numeric readout that lags and overshoots beside it. */}

package/src/components/toast/toast-store.ts

@@ -3,6 +3,7 @@
  * a failure. Call `toast` from anywhere; render one `<Toaster />`.
  */
 export type ToastTone = "neutral" | "success" | "error" | "loading"
+export type ToastSize = "sm" | "md" | "lg"
 
 export interface ToastAction {
     label: string
@@ -18,12 +19,16 @@ export interface Toast {
     /** Milliseconds before it leaves on its own; `null` stays until dismissed. */
     duration: number | null
     createdAt: number
+    /** Pill size, content padding and title/description text scale. @default "md" */
+    size: ToastSize
 }
 
 export interface ToastOptions {
     description?: string
     action?: ToastAction
     duration?: number | null
+    /** Pill size, content padding and title/description text scale. @default "md" */
+    size?: ToastSize
 }
 
 const DEFAULT_DURATION = 4200
@@ -54,6 +59,7 @@ function show(tone: ToastTone, title: string, options: ToastOptions = {}): numbe
             action: options.action,
             duration,
             createdAt: Date.now(),
+            size: options.size ?? "md",
         },
         ...toasts,
     ].slice(0, MAX_VISIBLE + 2)
@@ -79,6 +85,7 @@ function update(id: number, tone: ToastTone, title: string, options: ToastOption
                             ? null
                             : DEFAULT_DURATION,
                   createdAt: Date.now(),
+                  size: options.size ?? t.size,
               }
             : t
     )