@passui/react 0.1.40 → 0.1.42

package/dist/types/src/components/content-view/content-view.d.ts

@@ -1,8 +1,11 @@
-import type { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type PropsWithChildren, type ReactNode } from "react";
 export type ContentViewVariant = keyof typeof variants;
 export type ContentViewHeadingLevel = "h1" | "h2" | "h3";
+export type ContentViewSize = "sm" | "md" | "lg";
 type ContentViewProps = ComponentPropsWithoutRef<"section"> & {
     variant?: ContentViewVariant;
+    /** Container radius, section gap and text scale. @default "md" */
+    size?: ContentViewSize;
 };
 type RowProps = ComponentPropsWithoutRef<"div">;
 type SectionProps = ComponentPropsWithoutRef<"section">;
@@ -24,7 +27,7 @@ type SubProps = ComponentPropsWithoutRef<"sub">;
 declare const variants: {
     readonly elevated: string;
 };
-export declare function ContentView({ variant, className, children, ...props }: ContentViewProps): import("react").JSX.Element;
+export declare function ContentView({ variant, size, className, children, ...props }: ContentViewProps): import("react").JSX.Element;
 export declare namespace ContentView {
     export { Row };
     export { Section };

package/dist/types/src/components/context-menu/context-menu-store.d.ts

@@ -3,6 +3,7 @@ import type { MenuRect } from "./menu-reveal";
 export type ContextMenuAlignX = "start" | "end";
 export type ContextMenuAlignY = "top" | "bottom";
 export type ContextMenuEdge = "leading" | "trailing";
+export type ContextMenuSize = "sm" | "md" | "lg";
 /** One row of a context menu, or a divider between groups of rows. */
 export type ContextMenuItem = {
     label: string;
@@ -23,6 +24,8 @@ export interface OpenMenu {
     items: ContextMenuItem[];
     /** Opened by long-press: bigger rows for fingers. */
     touch: boolean;
+    /** Surface, item and heading density. @default "md" */
+    size: ContextMenuSize;
     /** Which edge of the menu sits at `x`: its left (`start`) or its right (`end`). */
     alignX: ContextMenuAlignX;
     /** Which edge of the menu sits at `y`: its top (`top`) or its bottom (`bottom`). */
@@ -33,7 +36,7 @@ export interface OpenMenu {
     restoreFocus?: boolean;
 }
 /** Opens a menu at a point, such as where a pointer was pressed. */
-export declare function openContextMenu(x: number, y: number, items: ContextMenuItem[], touch?: boolean, anchor?: Element | null): void;
+export declare function openContextMenu(x: number, y: number, items: ContextMenuItem[], touch?: boolean, anchor?: Element | null, size?: ContextMenuSize): void;
 /**
  * Opens a second menu where the last one stood, the way an iOS menu swaps
  * in a submenu: a long list (a note's fonts, its kinds) stays one row in the
@@ -46,11 +49,13 @@ export declare function openFollowUpMenu(items: ContextMenuItem[]): void;
  * trailing follow the text direction, so right-to-left languages mirror.
  * The menu's real size decides where it goes; nothing is guessed.
  */
-export declare function openMenu(anchor: Element, items: ContextMenuItem[], { edge, above, toolbar, }?: {
+export declare function openMenu(anchor: Element, items: ContextMenuItem[], { edge, above, toolbar, size, }?: {
     edge?: ContextMenuEdge;
     above?: boolean;
     /** Replace this action group with a horizontally expanding menu surface. */
     toolbar?: HTMLElement;
+    /** Surface, item and heading density. @default "md" */
+    size?: ContextMenuSize;
 }): void;
 export declare function closeContextMenu(restoreFocus?: boolean): void;
 export declare function subscribeContextMenu(listener: () => void): () => void;

package/dist/types/src/components/conversation/conversation.d.ts

@@ -9,15 +9,18 @@ export type ConversationMessage = {
     avatar?: ReactNode;
     createdAt: string;
 };
+export type ConversationSize = "sm" | "md" | "lg";
 /**
  * A thread of plain-text messages like Messages on iPhone: a day line when
  * the date changes, back-to-back messages from one side grouped under one
  * name, theirs on the left with an avatar, yours on the right.
  */
-declare function Messages({ messages, locale, }: {
+declare function Messages({ messages, locale, size, }: {
     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;
 }): import("react").JSX.Element;
 type ComposerProps = {
     onSend: (body: string) => Promise<unknown>;
@@ -33,9 +36,11 @@ 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. */
-declare function Composer({ onSend, pending, maxLength, placeholder, actions, sendLabel, remaining, }: ComposerProps): import("react").JSX.Element;
+declare function Composer({ onSend, pending, maxLength, placeholder, actions, sendLabel, remaining, size, }: ComposerProps): import("react").JSX.Element;
 export declare const Conversation: {
     Messages: typeof Messages;
     Composer: typeof Composer;

package/dist/types/src/components/locale-switcher/locale-switcher.d.ts

@@ -1,3 +1,4 @@
+export type LocaleSwitcherSize = "sm" | "md" | "lg";
 export type LocaleSwitcherProps<L extends string> = {
     locales: readonly L[];
     locale: L;
@@ -5,6 +6,8 @@ export type LocaleSwitcherProps<L extends string> = {
     /** localStorage key for where the person dragged it. */
     storageKey: string;
     label: string;
+    /** Trigger, header, list item and icon scale. @default "md" */
+    size?: LocaleSwitcherSize;
 };
 /** A draggable floating language picker that snaps to the nearest corner. */
-export declare function LocaleSwitcher<L extends string>({ locales, locale, onSelect, storageKey, label, }: LocaleSwitcherProps<L>): import("react").JSX.Element;
+export declare function LocaleSwitcher<L extends string>({ locales, locale, onSelect, storageKey, label, size, }: LocaleSwitcherProps<L>): import("react").JSX.Element;

package/dist/types/src/components/morph/morph.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLMotionProps } from "motion/react";
 import { type ReactNode, type RefObject } from "react";
+export type MorphSize = "sm" | "md" | "lg";
 export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
     /** Controls whether the overlay is presented. */
     open: boolean;
@@ -13,6 +14,8 @@ export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
     labelledBy?: string;
     /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
     dismissOnOutsidePress?: boolean;
+    /** Outer padding and panel max-width. @default "md" */
+    size?: MorphSize;
     className?: string;
     children?: ReactNode;
 }

package/dist/types/src/components/toast/toast-store.d.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;
     onClick: () => void;
@@ -16,11 +17,15 @@ 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;
 }
 /** Changes a toast in place; it morphs to its new state. */
 declare function update(id: number, tone: ToastTone, title: string, options?: ToastOptions): number;

package/dist/types/src/components/wake-slider/wake-slider.d.ts

@@ -1,3 +1,4 @@
+export type WakeSliderSize = "sm" | "md" | "lg";
 export interface WakeSliderProps {
     label: string;
     value?: number;
@@ -8,5 +9,7 @@ export interface WakeSliderProps {
     disabled?: boolean;
     className?: string;
     formatValue?: (value: number) => string;
+    /** Bar height at rest and value text scale. @default "md" */
+    size?: WakeSliderSize;
 }
-export declare function WakeSlider({ label, value: controlledValue, defaultValue, onChange, disabled, className, formatValue, bars, wake, }: WakeSliderProps): import("react").JSX.Element;
+export declare function WakeSlider({ label, value: controlledValue, defaultValue, onChange, disabled, className, formatValue, size, bars, wake, }: WakeSliderProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.40",
+    "version": "0.1.42",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {

package/src/components/content-view/content-view.tsx

@@ -1,11 +1,49 @@
-import type { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react"
+import {
+    createContext,
+    useContext,
+    type ComponentPropsWithoutRef,
+    type PropsWithChildren,
+    type ReactNode,
+} from "react"
 import { cn } from "../../lib/class-names"
 
 export type ContentViewVariant = keyof typeof variants
 export type ContentViewHeadingLevel = "h1" | "h2" | "h3"
+export type ContentViewSize = "sm" | "md" | "lg"
+
+const containerRadius: Record<ContentViewSize, string> = {
+    sm: "rounded-xl",
+    md: "rounded-2xl",
+    lg: "rounded-3xl",
+}
+const sectionGaps: Record<ContentViewSize, string> = {
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+}
+const spanText: Record<ContentViewSize, string> = {
+    sm: "text-footnote tracking-tighter font-light",
+    md: "text-callout tracking-tighter font-light",
+    lg: "text-subheadline tracking-tighter font-light",
+}
+const subText: Record<ContentViewSize, string> = {
+    sm: "text-footnote text-label",
+    md: "text-subheadline text-label",
+    lg: "text-body text-label",
+}
+const headerActionGaps: Record<ContentViewSize, string> = {
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+}
+
+const ContentViewSizeContext = createContext<ContentViewSize>("md")
+const useContentViewSize = () => useContext(ContentViewSizeContext)
 
 type ContentViewProps = ComponentPropsWithoutRef<"section"> & {
     variant?: ContentViewVariant
+    /** Container radius, section gap and text scale. @default "md" */
+    size?: ContentViewSize
 }
 
 type RowProps = ComponentPropsWithoutRef<"div">
@@ -38,14 +76,24 @@ const variants = {
 
 export function ContentView({
     variant = "elevated",
+    size = "md",
     className,
     children,
     ...props
 }: ContentViewProps) {
     return (
-        <section className={cn(variants[variant], className)} {...props}>
-            {children}
-        </section>
+        <ContentViewSizeContext value={size}>
+            <section
+                className={cn(
+                    variants[variant],
+                    variant === "elevated" && containerRadius[size],
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </section>
+        </ContentViewSizeContext>
     )
 }
 
@@ -58,8 +106,9 @@ function Row({ className, children, ...props }: RowProps) {
 }
 
 function Section({ className, children, ...props }: SectionProps) {
+    const size = useContentViewSize()
     return (
-        <section className={cn("flex flex-col gap-3", className)} {...props}>
+        <section className={cn("flex flex-col", sectionGaps[size], className)} {...props}>
             {children}
         </section>
     )
@@ -83,10 +132,11 @@ function Header({
         </Tag>
     )
 
+    const size = useContentViewSize()
     return (
         <div className={className}>
             {action ? (
-                <div className={cn("flex items-center gap-3", actionClassName)}>
+                <div className={cn("flex items-center", headerActionGaps[size], actionClassName)}>
                     {title}
                     {action}
                 </div>
@@ -128,16 +178,18 @@ function P({ className, children, ...props }: PProps) {
 }
 
 function Span({ className, children, ...props }: SpanProps) {
+    const size = useContentViewSize()
     return (
-        <span className={cn("text-callout tracking-tighter font-light", className)} {...props}>
+        <span className={cn(spanText[size], className)} {...props}>
             {children}
         </span>
     )
 }
 
 function Sub({ className, children, ...props }: SubProps) {
+    const size = useContentViewSize()
     return (
-        <sub className={cn("text-subheadline text-label", className)} {...props}>
+        <sub className={cn(subText[size], className)} {...props}>
             {children}
         </sub>
     )

package/src/components/context-menu/context-menu-host.tsx

@@ -13,9 +13,45 @@ import { menuSurfaceExit, menuSurfaceReveal } from "./menu-reveal"
 import {
     closeContextMenu,
     getContextMenu,
-    type OpenMenu,
+    type ContextMenuItem,
+    type ContextMenuSize,
+    openContextMenu,
+    openFollowUpMenu,
+    openMenu,
     subscribeContextMenu,
 } from "./context-menu-store"
+import type { OpenMenu } from "./context-menu-store"
+
+const surfaceSizes: Record<ContextMenuSize, string> = {
+    sm: "min-w-44 max-w-[min(240px,calc(100vw-24px))] rounded-2xl p-1",
+    md: "min-w-50 max-w-[min(280px,calc(100vw-24px))] rounded-3xl p-1.5",
+    lg: "min-w-56 max-w-[min(320px,calc(100vw-24px))] rounded-3xl p-2",
+}
+const itemSizes: Record<ContextMenuSize, string> = {
+    sm: "flex items-center gap-2 rounded-md px-2 py-1 text-start text-caption transition-colors disabled:opacity-40",
+    md: "flex items-center gap-2.5 rounded-lg px-2.5 text-start text-subheadline transition-colors disabled:opacity-40",
+    lg: "flex items-center gap-3 rounded-lg px-3 py-2 text-start text-body transition-colors disabled:opacity-40",
+}
+const headingSizes: Record<ContextMenuSize, string> = {
+    sm: "px-2 pt-1 pb-0.5 text-caption2 font-semibold text-label-tertiary",
+    md: "px-2.5 pt-1.5 pb-0.5 text-caption2 font-semibold text-label-tertiary",
+    lg: "px-3 pt-2 pb-1 text-caption font-semibold text-label-tertiary",
+}
+const dividerSizes: Record<ContextMenuSize, string> = {
+    sm: "mx-1.5 my-0.5 h-px bg-separator/80",
+    md: "mx-2 my-1 h-px bg-separator/80",
+    lg: "mx-2.5 my-1.5 h-px bg-separator/80",
+}
+const iconSlotSizes: Record<ContextMenuSize, string> = {
+    sm: "flex w-3.5 shrink-0 justify-center text-label-secondary",
+    md: "flex w-4 shrink-0 justify-center text-label-secondary",
+    lg: "flex w-5 shrink-0 justify-center text-label-secondary",
+}
+const checkIconSizes: Record<ContextMenuSize, number> = {
+    sm: 13,
+    md: 15,
+    lg: 17,
+}
 
 /** Renders the open context menu. Mount once, near the app root. */
 export function ContextMenuHost() {
@@ -251,7 +287,8 @@ function Menu({ menu }: { menu: OpenMenu }) {
             }}
             {...{ [FLOATING_LAYER]: "" }}
             className={cn(
-                "fixed z-75 isolate flex min-w-50 max-w-[min(280px,calc(100vw-24px))] flex-col rounded-3xl p-1.5 outline-none",
+                "fixed z-75 isolate flex flex-col outline-none",
+                surfaceSizes[menu.size],
                 menu.touch && "min-w-60",
                 !present && "pointer-events-none"
             )}
@@ -327,19 +364,11 @@ function Menu({ menu }: { menu: OpenMenu }) {
             >
                 {menu.items.map((item, index) => {
                     if (item === "divider") {
-                        return (
-                            <div
-                                key={`divider-${index}`}
-                                className="mx-2 my-1 h-px bg-separator/80"
-                            />
-                        )
+                        return <div key={`divider-${index}`} className={dividerSizes[menu.size]} />
                     }
                     if ("heading" in item) {
                         return (
-                            <span
-                                key={`heading-${index}`}
-                                className="px-2.5 pt-1.5 pb-0.5 text-caption2 font-semibold text-label-tertiary"
-                            >
+                            <span key={`heading-${index}`} className={headingSizes[menu.size]}>
                                 {item.heading}
                             </span>
                         )
@@ -360,7 +389,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
                                 item.onSelect()
                             }}
                             className={cn(
-                                "flex items-center gap-2.5 rounded-lg px-2.5 text-start text-subheadline transition-colors disabled:opacity-40",
+                                itemSizes[menu.size],
                                 menu.touch ? "py-2.5" : "py-1.5",
                                 item.destructive ? "text-danger" : "text-label",
                                 focused === current &&
@@ -368,10 +397,10 @@ function Menu({ menu }: { menu: OpenMenu }) {
                                     (item.destructive ? "bg-danger/10" : "bg-fill")
                             )}
                         >
-                            <span className="flex w-4 shrink-0 justify-center text-label-secondary">
+                            <span className={iconSlotSizes[menu.size]}>
                                 {item.checked ? (
                                     <CheckIcon
-                                        size={15}
+                                        size={checkIconSizes[menu.size]}
                                         strokeWidth={2.4}
                                         className="text-accent-text"
                                     />

package/src/components/context-menu/context-menu-store.ts

@@ -4,6 +4,7 @@ import type { MenuRect } from "./menu-reveal"
 export type ContextMenuAlignX = "start" | "end"
 export type ContextMenuAlignY = "top" | "bottom"
 export type ContextMenuEdge = "leading" | "trailing"
+export type ContextMenuSize = "sm" | "md" | "lg"
 
 /** One row of a context menu, or a divider between groups of rows. */
 export type ContextMenuItem =
@@ -27,6 +28,8 @@ export interface OpenMenu {
     items: ContextMenuItem[]
     /** Opened by long-press: bigger rows for fingers. */
     touch: boolean
+    /** Surface, item and heading density. @default "md" */
+    size: ContextMenuSize
     /** Which edge of the menu sits at `x`: its left (`start`) or its right (`end`). */
     alignX: ContextMenuAlignX
     /** Which edge of the menu sits at `y`: its top (`top`) or its bottom (`bottom`). */
@@ -52,7 +55,8 @@ export function openContextMenu(
     y: number,
     items: ContextMenuItem[],
     touch = false,
-    anchor: Element | null = typeof document === "undefined" ? null : document.activeElement
+    anchor: Element | null = typeof document === "undefined" ? null : document.activeElement,
+    size: ContextMenuSize = "md"
 ) {
     menu = {
         id: nextId++,
@@ -61,6 +65,7 @@ export function openContextMenu(
         y,
         items,
         touch,
+        size,
         alignX: "start",
         alignY: "top",
     }
@@ -93,11 +98,14 @@ export function openMenu(
         edge = "leading",
         above = false,
         toolbar,
+        size = "md",
     }: {
         edge?: ContextMenuEdge
         above?: boolean
         /** Replace this action group with a horizontally expanding menu surface. */
         toolbar?: HTMLElement
+        /** Surface, item and heading density. @default "md" */
+        size?: ContextMenuSize
     } = {}
 ) {
     const rect = anchor.getBoundingClientRect()
@@ -112,6 +120,7 @@ export function openMenu(
         y: toolbar ? rect.top : above ? rect.bottom : rect.top,
         items,
         touch: false,
+        size,
         alignX: right ? "end" : "start",
         alignY: above ? "bottom" : "top",
         toolbar,

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/locale-switcher/locale-switcher.tsx

@@ -6,6 +6,39 @@ import { useDismiss } from "../../hooks/use-dismiss"
 import { CheckIcon, GlobeIcon } from "../../icons/icons"
 import { Popover } from "../popover/popover"
 
+export type LocaleSwitcherSize = "sm" | "md" | "lg"
+
+const triggerSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "glass-menu flex h-9 min-w-16 touch-none cursor-grab items-center justify-center gap-1.5 rounded-full px-3 text-caption2 font-semibold text-label active:cursor-grabbing",
+    md: "glass-menu flex h-12 min-w-20 touch-none cursor-grab items-center justify-center gap-2 rounded-full px-4 text-caption font-semibold text-label active:cursor-grabbing",
+    lg: "glass-menu flex h-14 min-w-24 touch-none cursor-grab items-center justify-center gap-2.5 rounded-full px-5 text-subheadline font-semibold text-label active:cursor-grabbing",
+}
+const iconSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+}
+const popoverWidths: Record<LocaleSwitcherSize, string> = {
+    sm: "w-44",
+    md: "w-52",
+    lg: "w-60",
+}
+const headerSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "flex min-h-9 w-full items-center justify-center gap-1.5 rounded-4xl bg-fill/50 text-caption2 font-semibold text-label",
+    md: "flex min-h-12 w-full items-center justify-center gap-2 rounded-4xl bg-fill/50 text-caption font-semibold text-label",
+    lg: "flex min-h-14 w-full items-center justify-center gap-2.5 rounded-4xl bg-fill/50 text-subheadline font-semibold text-label",
+}
+const itemSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "flex min-h-9 items-center justify-between gap-2 rounded-4xl px-3 py-2 text-left text-caption text-label outline-none",
+    md: "flex min-h-11 items-center justify-between gap-3 rounded-4xl px-3.5 py-2.5 text-left text-footnote text-label outline-none",
+    lg: "flex min-h-13 items-center justify-between gap-3 rounded-4xl px-4 py-3 text-left text-subheadline text-label outline-none",
+}
+const checkIconSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "size-3.5 shrink-0",
+    md: "size-4 shrink-0",
+    lg: "size-5 shrink-0",
+}
+
 type Side = "left" | "right"
 type Edge = "top" | "bottom"
 
@@ -58,6 +91,8 @@ export type LocaleSwitcherProps<L extends string> = {
     /** localStorage key for where the person dragged it. */
     storageKey: string
     label: string
+    /** Trigger, header, list item and icon scale. @default "md" */
+    size?: LocaleSwitcherSize
 }
 
 /** A draggable floating language picker that snaps to the nearest corner. */
@@ -67,6 +102,7 @@ export function LocaleSwitcher<L extends string>({
     onSelect,
     storageKey,
     label,
+    size = "md",
 }: LocaleSwitcherProps<L>) {
     const containerRef = useRef<HTMLDivElement>(null)
     const triggerRef = useRef<HTMLButtonElement>(null)
@@ -177,9 +213,9 @@ export function LocaleSwitcher<L extends string>({
                         setOpen(true)
                     }
                 }}
-                className="glass-menu flex h-12 min-w-20 touch-none cursor-grab items-center justify-center gap-2 rounded-full px-4 text-caption font-semibold text-label active:cursor-grabbing"
+                className={triggerSizes[size]}
             >
-                <GlobeIcon aria-hidden="true" className="size-5" />
+                <GlobeIcon aria-hidden="true" className={iconSizes[size]} />
                 {locale.toUpperCase()}
             </button>
             <Popover
@@ -189,7 +225,8 @@ export function LocaleSwitcher<L extends string>({
                 role="menu"
                 aria-label={label}
                 className={cn(
-                    "top-0 flex w-52 max-w-[calc(100vw-2.5rem)] gap-2 p-2",
+                    "top-0 flex max-w-[calc(100vw-2.5rem)] gap-2 p-2",
+                    popoverWidths[size],
                     anchor.side === "right" ? "right-0" : "left-0",
                     growsUp ? "flex-col-reverse" : "flex-col"
                 )}
@@ -201,9 +238,9 @@ export function LocaleSwitcher<L extends string>({
                         setOpen(false)
                         triggerRef.current?.focus()
                     }}
-                    className="flex min-h-12 w-full items-center justify-center gap-2 rounded-4xl bg-fill/50 text-caption font-semibold text-label"
+                    className={headerSizes[size]}
                 >
-                    <GlobeIcon aria-hidden="true" className="size-5" />
+                    <GlobeIcon aria-hidden="true" className={iconSizes[size]} />
                     {locale.toUpperCase()}
                 </button>
                 <div className="flex flex-col gap-1">
@@ -224,14 +261,17 @@ export function LocaleSwitcher<L extends string>({
                                     }
                                 }}
                                 className={cn(
-                                    "flex min-h-11 items-center justify-between gap-3 rounded-4xl px-3.5 py-2.5 text-left text-footnote text-label outline-none",
+                                    itemSizes[size],
                                     "hover:bg-fill/65 focus-visible:bg-fill/65 transition-colors",
                                     active && "bg-accent/12 font-medium"
                                 )}
                             >
                                 {item.label}
                                 {active && (
-                                    <CheckIcon aria-hidden="true" className="size-4 shrink-0" />
+                                    <CheckIcon
+                                        aria-hidden="true"
+                                        className={checkIconSizes[size]}
+                                    />
                                 )}
                             </button>
                         )

package/src/components/morph/morph.tsx

@@ -7,6 +7,19 @@ import { SheetPortal } from "../sheet/sheet-portal"
 import { cn } from "../../lib/class-names"
 import { contentCrossfade, fluidCollapse, fluidOvershoot } from "../../motion/transitions"
 
+export type MorphSize = "sm" | "md" | "lg"
+
+const outerPaddings: Record<MorphSize, string> = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+}
+const panelMaxWidths: Record<MorphSize, string> = {
+    sm: "max-w-sm",
+    md: "max-w-[720px]",
+    lg: "max-w-3xl",
+}
+
 export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
     /** Controls whether the overlay is presented. */
     open: boolean
@@ -20,6 +33,8 @@ export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
     labelledBy?: string
     /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
     dismissOnOutsidePress?: boolean
+    /** Outer padding and panel max-width. @default "md" */
+    size?: MorphSize
     className?: string
     children?: ReactNode
 }
@@ -44,6 +59,7 @@ function OpenMorph({
     label,
     labelledBy,
     dismissOnOutsidePress = true,
+    size = "md",
     className,
     children,
     ...props
@@ -131,7 +147,12 @@ function OpenMorph({
 
     return (
         <SheetPortal>
-            <div className="fixed inset-0 z-[75] flex items-center justify-center p-6">
+            <div
+                className={cn(
+                    "fixed inset-0 z-[75] flex items-center justify-center",
+                    outerPaddings[size]
+                )}
+            >
                 <motion.div
                     aria-hidden="true"
                     className="absolute inset-0 bg-black/30 backdrop-blur-md"
@@ -150,7 +171,8 @@ function OpenMorph({
                     tabIndex={-1}
                     className={cn(
                         "relative isolate flex w-full flex-col rounded-5xl outline-none",
-                        "max-h-[92%] max-w-[720px]",
+                        "max-h-[92%]",
+                        panelMaxWidths[size],
                         settled && "overflow-hidden",
                         className
                     )}

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
     )

package/src/components/toast/toaster.tsx

@@ -7,12 +7,39 @@ import {
     getToasts,
     subscribeToasts,
     type Toast,
+    type ToastSize,
     type ToastTone,
     toast as toastApi,
     toastLimits,
 } from "./toast-store"
 
-const PILL = 40
+const PILL: Record<ToastSize, number> = { sm: 32, md: 40, lg: 48 }
+
+const contentClasses: Record<ToastSize, string> = {
+    sm: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2 py-2 pr-3 pl-2 text-on-inverse",
+    md: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2.5 py-[10px] pr-4 pl-[10px] text-on-inverse",
+    lg: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-3 py-3 pr-5 pl-3 text-on-inverse",
+}
+const titleClasses: Record<ToastSize, string> = {
+    sm: "text-footnote leading-4 font-semibold",
+    md: "text-subheadline leading-5 font-semibold",
+    lg: "text-body leading-6 font-semibold",
+}
+const descriptionClasses: Record<ToastSize, string> = {
+    sm: "text-caption2 leading-snug text-on-inverse/70",
+    md: "text-footnote leading-snug text-on-inverse/70",
+    lg: "text-subheadline leading-snug text-on-inverse/70",
+}
+const actionClasses: Record<ToastSize, string> = {
+    sm: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-2.5 py-0.5 text-caption2 font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
+    md: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3 py-1 text-footnote font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
+    lg: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3.5 py-1.5 text-subheadline font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
+}
+const toneIconClasses: Record<ToastSize, string> = {
+    sm: "flex size-4 shrink-0 items-center justify-center rounded-full",
+    md: "flex size-5 shrink-0 items-center justify-center rounded-full",
+    lg: "flex size-6 shrink-0 items-center justify-center rounded-full",
+}
 const EMPTY: Toast[] = []
 /** A little loose, so the body overshoots and settles like a drop of honey. */
 const BODY_SPRING = {
@@ -110,10 +137,11 @@ function ToastItem({
     filterId: string
     reducedMotion: boolean
 }) {
+    const pill = PILL[toast.size]
     const content = useRef<HTMLDivElement>(null)
     const [size, setSize] = useState({
-        width: PILL,
-        height: PILL,
+        width: pill,
+        height: pill,
     })
     const [open, setOpen] = useState(false)
 
@@ -143,8 +171,8 @@ function ToastItem({
         return () => clearTimeout(timer)
     }, [toast.id, toast.duration, paused])
 
-    const width = open ? size.width : PILL
-    const height = open ? size.height : PILL
+    const width = open ? size.width : pill
+    const height = open ? size.height : pill
     // Older toasts tuck in behind the newest, and fan out on hover.
     const stacked = !expanded && index > 0
 
@@ -156,7 +184,7 @@ function ToastItem({
             initial={reducedMotion ? false : { opacity: 0, y: -24, scale: 0.6 }}
             animate={{
                 opacity: stacked ? 1 - index * 0.25 : 1,
-                y: stacked ? index * 9 : index * (PILL + 14) + index * 6,
+                y: stacked ? index * 9 : index * (pill + 14) + index * 6,
                 scale: stacked ? 1 - index * 0.05 : 1,
             }}
             exit={
@@ -180,7 +208,7 @@ function ToastItem({
             <motion.div
                 role="status"
                 className="pointer-events-auto relative"
-                initial={{ width: PILL, height: PILL }}
+                initial={{ width: pill, height: pill }}
                 animate={{ width, height }}
                 transition={reducedMotion ? { duration: 0 } : BODY_SPRING}
             >
@@ -194,21 +222,21 @@ function ToastItem({
                 >
                     <motion.span
                         className="absolute top-3 left-3 rounded-full bg-inverse shadow-xl"
-                        style={{ width: PILL, height: PILL }}
+                        style={{ width: pill, height: pill }}
                         animate={{ scale: open ? 1 : 1.06 }}
                         transition={reducedMotion ? { duration: 0 } : spring.bouncy}
                     />
                     <motion.span
                         className="absolute top-3 left-3 bg-inverse"
                         initial={{
-                            width: PILL,
-                            height: PILL,
-                            borderRadius: PILL / 2,
+                            width: pill,
+                            height: pill,
+                            borderRadius: pill / 2,
                         }}
                         animate={{
                             width,
                             height,
-                            borderRadius: Math.min(PILL / 2, height / 2, 22),
+                            borderRadius: Math.min(pill / 2, height / 2, 22),
                         }}
                         transition={reducedMotion ? { duration: 0 } : BODY_SPRING}
                     />
@@ -217,8 +245,8 @@ function ToastItem({
                 {/* Content, crisp above the shapes. */}
                 <motion.div
                     ref={content}
-                    className="absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2.5 py-[10px] pr-4 pl-[10px] text-on-inverse"
-                    style={{ minHeight: PILL }}
+                    className={contentClasses[toast.size]}
+                    style={{ minHeight: pill }}
                     animate={{ opacity: open ? 1 : 0 }}
                     transition={
                         reducedMotion
@@ -229,12 +257,12 @@ function ToastItem({
                               }
                     }
                 >
-                    <ToneIcon tone={toast.tone} reducedMotion={reducedMotion} />
+                    <ToneIcon tone={toast.tone} size={toast.size} reducedMotion={reducedMotion} />
                     <div className="flex min-w-0 flex-col py-px">
                         <AnimatePresence mode="popLayout" initial={false}>
                             <motion.span
                                 key={toast.title}
-                                className="text-subheadline leading-5 font-semibold"
+                                className={titleClasses[toast.size]}
                                 initial={
                                     reducedMotion
                                         ? false
@@ -264,7 +292,7 @@ function ToastItem({
                             </motion.span>
                         </AnimatePresence>
                         {toast.description && (
-                            <span className="text-footnote leading-snug text-on-inverse/70">
+                            <span className={descriptionClasses[toast.size]}>
                                 {toast.description}
                             </span>
                         )}
@@ -276,7 +304,7 @@ function ToastItem({
                                 toast.action?.onClick()
                                 toastApi.dismiss(toast.id)
                             }}
-                            className="ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3 py-1 text-footnote font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20"
+                            className={actionClasses[toast.size]}
                         >
                             {toast.action.label}
                         </button>
@@ -294,15 +322,20 @@ const toneColors: Record<ToastTone, string> = {
     loading: "bg-on-inverse/15 text-on-inverse",
 }
 
-function ToneIcon({ tone, reducedMotion }: { tone: ToastTone; reducedMotion: boolean }) {
+function ToneIcon({
+    tone,
+    size,
+    reducedMotion,
+}: {
+    tone: ToastTone
+    size: ToastSize
+    reducedMotion: boolean
+}) {
     return (
         <AnimatePresence mode="popLayout" initial={false}>
             <motion.span
                 key={tone}
-                className={cn(
-                    "flex size-5 shrink-0 items-center justify-center rounded-full",
-                    toneColors[tone]
-                )}
+                className={cn(toneIconClasses[size], toneColors[tone])}
                 initial={
                     reducedMotion
                         ? false

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

@@ -24,7 +24,9 @@ import { cn } from "../../lib/class-names"
    changes, which is what the reading and the colours need, and
    the loop runs only while some bar still has energy. */
 
-const H = 20 // a bar at rest, px
+const H: Record<WakeSliderSize, number> = { sm: 16, md: 20, lg: 26 } // a bar at rest, px
+
+export type WakeSliderSize = "sm" | "md" | "lg"
 
 export interface WakeSliderProps {
     label: string
@@ -36,6 +38,8 @@ export interface WakeSliderProps {
     disabled?: boolean
     className?: string
     formatValue?: (value: number) => string
+    /** Bar height at rest and value text scale. @default "md" */
+    size?: WakeSliderSize
 }
 
 export function WakeSlider({
@@ -46,6 +50,7 @@ export function WakeSlider({
     disabled = false,
     className,
     formatValue,
+    size = "md",
     /* how many bars make the track */
     bars = 36,
     /* how high the wake rises, 0..100 */
@@ -144,7 +149,10 @@ export function WakeSlider({
     const lit = Math.round((value / 100) * (n - 1))
 
     return (
-        <div className={cn("passui-wake-slider not-typeset", disabled && "opacity-40", className)}>
+        <div
+            className={cn("passui-wake-slider not-typeset", disabled && "opacity-40", className)}
+            data-size={size}
+        >
             <div
                 ref={track}
                 className="passui-wake-track"
@@ -156,7 +164,7 @@ export function WakeSlider({
                 aria-valuemin={0}
                 aria-valuemax={100}
                 aria-valuenow={value}
-                style={{ height: H * 2.6, "--wake-bars": n } as CSSProperties}
+                style={{ height: H[size] * 2.6, "--wake-bars": n } as CSSProperties}
                 onPointerDown={(e) => {
                     if (disabled || e.button !== 0) return
                     e.currentTarget.focus()
@@ -225,7 +233,7 @@ export function WakeSlider({
                         aria-hidden="true"
                         className="passui-wake-bar"
                         data-on={(value > 0 && i <= lit) || undefined}
-                        style={{ height: H }}
+                        style={{ height: H[size] }}
                     />
                 ))}
             </div>

package/src/styles/motion-controls.css

@@ -189,6 +189,10 @@
         font-variant-numeric: tabular-nums;
         color: var(--color-label-secondary);
     }
+    .passui-wake-slider[data-size="sm"] { gap: 0.75rem; }
+    .passui-wake-slider[data-size="sm"] .passui-wake-value { font-size: var(--text-caption); }
+    .passui-wake-slider[data-size="lg"] { gap: 1.25rem; }
+    .passui-wake-slider[data-size="lg"] .passui-wake-value { font-size: var(--text-subheadline); }
     @media (prefers-reduced-motion: reduce) {
         .passui-wake-bar, .passui-search-pill { transition: none; }
         .passui-search-pill:active { scale: 1; }