@passui/react 0.1.34 → 0.1.36

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

@@ -1,9 +1,12 @@
 import type { ReactNode, ComponentProps } from "react";
+export type ContentUnavailableViewSize = "sm" | "md" | "lg";
 export interface ContentUnavailableViewProps extends Omit<ComponentProps<"div">, "title"> {
     title: string;
     description?: string;
     icon?: ReactNode;
     actions?: ReactNode;
+    /** Title, description and vertical rhythm. @default "md" */
+    size?: ContentUnavailableViewSize;
 }
 /** A focused empty or unavailable state with an optional next action. */
-export declare function ContentUnavailableView({ title, description, icon, actions, className, ...props }: ContentUnavailableViewProps): import("react").JSX.Element;
+export declare function ContentUnavailableView({ title, description, icon, actions, size, className, ...props }: ContentUnavailableViewProps): import("react").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { type FormEvent, type ReactNode } from "react";
 export type DialogPresentation = "drawer" | "center" | "inline";
 export type DialogTone = "default" | "destructive";
+export type DialogSize = "sm" | "md" | "lg";
 export type DialogProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -10,6 +11,8 @@ export type DialogProps = {
     footer?: ReactNode;
     /** `drawer` (responsive sheet), `center` (floating panel), or `inline`. @default "drawer" */
     presentation?: DialogPresentation;
+    /** Title, description, body and footer density. @default "md" */
+    size?: DialogSize;
     className?: string;
     onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
 };
@@ -21,7 +24,7 @@ type ActionsProps = {
     tone?: DialogTone;
     onConfirm?: () => void;
 };
-export declare function Dialog({ open, onOpenChange, title, description, children, footer, presentation, className, onSubmit, }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ open, onOpenChange, title, description, children, footer, presentation, size, className, onSubmit, }: DialogProps): import("react").JSX.Element;
 export declare namespace Dialog {
     export { Actions };
 }

package/dist/types/src/components/disclosure-group/disclosure-group.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+export type DisclosureGroupSize = "sm" | "md" | "lg";
 export interface DisclosureGroupProps {
     label: string;
     open: boolean;
@@ -10,6 +11,8 @@ export interface DisclosureGroupProps {
     triggerClassName?: string;
     /** Supporting text beneath the title. */
     description?: string;
+    /** Trigger, description and content density. @default "md" */
+    size?: DisclosureGroupSize;
 }
 /** A controlled, accessible disclosure row with the shared inline reveal. */
-export declare function DisclosureGroup({ label, open, onOpenChange, children, disabled, className, triggerClassName, description, }: DisclosureGroupProps): import("react").JSX.Element;
+export declare function DisclosureGroup({ label, open, onOpenChange, children, disabled, className, triggerClassName, description, size, }: DisclosureGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from "./morph";
+export * from "./use-morph-disclosure";

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

@@ -0,0 +1,29 @@
+import { type HTMLMotionProps } from "motion/react";
+import { type ReactNode, type RefObject } from "react";
+export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
+    /** Controls whether the overlay is presented. */
+    open: boolean;
+    /** Called on Escape or outside press. */
+    onClose: () => void;
+    /** The element whose rect the overlay grows from and collapses back to. */
+    sourceRef: RefObject<HTMLElement | null>;
+    /** Accessible name (used when there is no labelledBy). */
+    label: string;
+    /** ID of a visible heading inside the overlay. */
+    labelledBy?: string;
+    /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
+    dismissOnOutsidePress?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * A modal overlay that morphs its glass material from a source element's
+ * rect to its own resting rect, then collapses back — Apple's
+ * matched-geometry effect. The source is concealed while the overlay is
+ * mounted so the material reads as the source itself springing open.
+ *
+ * Reuses `SheetPortal` (theme inheritance), `useSheetFocus` (focus trap,
+ * Escape, modal environment) and the same `menuSurfaceReveal` FLIP
+ * primitive that powers anchored `Popover` and `ContextMenu`.
+ */
+export declare function Morph({ open, ...props }: MorphProps): import("react").JSX.Element;

package/dist/types/src/components/morph/use-morph-disclosure.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Disclosure state that keeps the overlay mounted through its exit animation,
+ * mirroring `useAnchoredDisclosure`. Pair with a `useRef<HTMLElement>(null)`
+ * for the source.
+ */
+export declare function useMorphDisclosure(disabled?: boolean): {
+    open: boolean;
+    mounted: boolean;
+    show: () => void;
+    toggle: () => void;
+    close: () => void;
+    onExited: () => void;
+};

package/dist/types/src/components/profile-image/profile-image.d.ts

@@ -1,4 +1,9 @@
 import { type ComponentProps } from "react";
-export declare function ProfileImage({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export type ProfileImageSize = "sm" | "md" | "lg";
+export interface ProfileImageProps extends ComponentProps<"span"> {
+    /** Avatar diameter; fallback initials scale with it. @default "md" */
+    size?: ProfileImageSize;
+}
+export declare function ProfileImage({ size, className, ...props }: ProfileImageProps): import("react").JSX.Element;
 export declare function ProfileImageContent({ src, className, onLoad, onError, ...props }: ComponentProps<"img">): import("react").JSX.Element | null;
 export declare function ProfileImageFallback({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element | null;

package/dist/types/src/components/radio-group/radio-group.d.ts

@@ -1,3 +1,4 @@
+export type RadioGroupSize = "sm" | "md" | "lg";
 export interface RadioGroupOption<T extends string> {
     value: T;
     label: string;
@@ -12,6 +13,8 @@ export interface RadioGroupProps<T extends string> {
     disabled?: boolean;
     name?: string;
     className?: string;
+    /** Legend, row, radio glyph and description density. @default "md" */
+    size?: RadioGroupSize;
 }
 /** A labelled choice group using the browser's native radio keyboard behavior. */
-export declare function RadioGroup<T extends string>({ value, onChange, label, options, disabled, name, className, }: RadioGroupProps<T>): import("react").JSX.Element;
+export declare function RadioGroup<T extends string>({ value, onChange, label, options, disabled, name, className, size, }: RadioGroupProps<T>): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 export type SheetPlacement = "adaptive" | "center";
+export type SheetSize = "sm" | "md" | "lg";
 export interface SheetProps {
     /** Controls whether the sheet is presented. */
     open: boolean;
@@ -13,6 +14,8 @@ export interface SheetProps {
     labelledBy?: string;
     /** `adaptive` rises from the bottom on phones; `center` always floats. @default "adaptive" */
     placement?: SheetPlacement;
+    /** Outer padding and panel max-width. @default "md" */
+    size?: SheetSize;
     className?: string;
     children: ReactNode;
 }

package/dist/types/src/components/swatch-picker/swatch-picker.d.ts

@@ -6,6 +6,7 @@ export interface SwatchPickerOption<T extends string> {
     /** Color of the selected checkmark. */
     ink: string;
 }
+export type SwatchPickerSize = "sm" | "md" | "lg";
 export interface SwatchPickerProps<T extends string> {
     value: T;
     options: ReadonlyArray<SwatchPickerOption<T>>;
@@ -14,6 +15,8 @@ export interface SwatchPickerProps<T extends string> {
     label: string;
     /** Custom classes for the swatch container. */
     className?: string;
+    /** Swatch diameter, check icon and caption scale. @default "md" */
+    size?: SwatchPickerSize;
 }
 /** Colour swatches with a check on the chosen one. */
-export declare function SwatchPicker<T extends string>({ value, options, onChange, label, className, }: SwatchPickerProps<T>): import("react").JSX.Element;
+export declare function SwatchPicker<T extends string>({ value, options, onChange, label, className, size, }: SwatchPickerProps<T>): import("react").JSX.Element;

package/dist/types/src/index.d.ts

@@ -69,3 +69,4 @@ export * from "./components/slosh-slider/slosh-slider";
 export * from "./components/wake-slider/wake-slider";
 export * from "./components/one-time-code/one-time-code";
 export * from "./components/aspect-ratio/aspect-ratio";
+export * from "./components/morph";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.34",
+    "version": "0.1.36",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {
@@ -62,6 +62,10 @@
             "types": "./dist/types/src/components/popover/popover.d.ts",
             "default": "./src/components/popover/popover.tsx"
         },
+        "./morph": {
+            "types": "./dist/types/src/components/morph/index.d.ts",
+            "default": "./src/components/morph/index.ts"
+        },
         "./sheet": {
             "types": "./dist/types/src/components/sheet/sheet.d.ts",
             "default": "./src/components/sheet/sheet.tsx"

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

@@ -1,11 +1,33 @@
 import type { ReactNode, ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 
+export type ContentUnavailableViewSize = "sm" | "md" | "lg"
+
+const titleSizes: Record<ContentUnavailableViewSize, string> = {
+    sm: "text-subheadline",
+    md: "text-headline",
+    lg: "text-title3",
+}
+
+const descriptionSizes: Record<ContentUnavailableViewSize, string> = {
+    sm: "text-caption",
+    md: "text-footnote",
+    lg: "text-subheadline",
+}
+
+const spacings: Record<ContentUnavailableViewSize, string> = {
+    sm: "gap-2 px-6 py-6",
+    md: "gap-3 px-6 py-10",
+    lg: "gap-4 px-6 py-14",
+}
+
 export interface ContentUnavailableViewProps extends Omit<ComponentProps<"div">, "title"> {
     title: string
     description?: string
     icon?: ReactNode
     actions?: ReactNode
+    /** Title, description and vertical rhythm. @default "md" */
+    size?: ContentUnavailableViewSize
 }
 
 /** A focused empty or unavailable state with an optional next action. */
@@ -14,22 +36,25 @@ export function ContentUnavailableView({
     description,
     icon,
     actions,
+    size = "md",
     className,
     ...props
 }: ContentUnavailableViewProps) {
     return (
         <div
             {...props}
-            className={cn("flex flex-col items-center gap-3 px-6 py-10 text-center", className)}
+            className={cn("flex flex-col items-center text-center", spacings[size], className)}
         >
             {icon && (
                 <span aria-hidden="true" className="text-label-tertiary">
                     {icon}
                 </span>
             )}
-            <p className="text-headline font-semibold text-label">{title}</p>
+            <p className={cn(titleSizes[size], "font-semibold text-label")}>{title}</p>
             {description && (
-                <p className="max-w-sm text-footnote text-label-secondary">{description}</p>
+                <p className={cn(descriptionSizes[size], "max-w-sm text-label-secondary")}>
+                    {description}
+                </p>
             )}
             {actions && <div className="mt-1 flex flex-wrap justify-center gap-2">{actions}</div>}
         </div>

package/src/components/dialog/dialog.tsx

@@ -8,6 +8,28 @@ import { createContext, useContext, useId, type FormEvent, type ReactNode } from
 const CloseContext = createContext<() => void>(() => {})
 export type DialogPresentation = "drawer" | "center" | "inline"
 export type DialogTone = "default" | "destructive"
+export type DialogSize = "sm" | "md" | "lg"
+
+const titleText: Record<DialogSize, string> = {
+    sm: "text-subheadline",
+    md: "text-title3",
+    lg: "text-title2",
+}
+const descriptionText: Record<DialogSize, string> = {
+    sm: "text-caption",
+    md: "text-footnote",
+    lg: "text-subheadline",
+}
+const bodySpacing: Record<DialogSize, string> = {
+    sm: "gap-3 p-4",
+    md: "gap-4 p-5",
+    lg: "gap-5 p-6",
+}
+const footerSpacing: Record<DialogSize, string> = {
+    sm: "pt-2",
+    md: "pt-3",
+    lg: "pt-4",
+}
 
 export type DialogProps = {
     open: boolean
@@ -18,6 +40,8 @@ export type DialogProps = {
     footer?: ReactNode
     /** `drawer` (responsive sheet), `center` (floating panel), or `inline`. @default "drawer" */
     presentation?: DialogPresentation
+    /** Title, description, body and footer density. @default "md" */
+    size?: DialogSize
     className?: string
     onSubmit?: (event: FormEvent<HTMLFormElement>) => void
 }
@@ -38,6 +62,7 @@ export function Dialog({
     children,
     footer,
     presentation = "drawer",
+    size = "md",
     className,
     onSubmit,
 }: DialogProps) {
@@ -47,13 +72,21 @@ export function Dialog({
     const content = (
         <>
             {presentation !== "inline" && (
-                <h2 id={titleId} className="text-title3 font-semibold">
+                <h2 id={titleId} className={cn(titleText[size], "font-semibold")}>
                     {title}
                 </h2>
             )}
-            {description && <div className="text-footnote text-label-secondary">{description}</div>}
+            {description && (
+                <div className={cn(descriptionText[size], "text-label-secondary")}>
+                    {description}
+                </div>
+            )}
             {children && <div className="flex flex-col gap-4">{children}</div>}
-            {footer && <div className="flex flex-wrap justify-end gap-2 pt-3">{footer}</div>}
+            {footer && (
+                <div className={cn("flex flex-wrap justify-end gap-2", footerSpacing[size])}>
+                    {footer}
+                </div>
+            )}
         </>
     )
     const body = (
@@ -61,12 +94,22 @@ export function Dialog({
             {onSubmit ? (
                 <form
                     onSubmit={onSubmit}
-                    className={cn("flex min-h-0 flex-col gap-4 overflow-y-auto p-5", className)}
+                    className={cn(
+                        "flex min-h-0 flex-col overflow-y-auto",
+                        bodySpacing[size],
+                        className
+                    )}
                 >
                     {content}
                 </form>
             ) : (
-                <div className={cn("flex min-h-0 flex-col gap-4 overflow-y-auto p-5", className)}>
+                <div
+                    className={cn(
+                        "flex min-h-0 flex-col overflow-y-auto",
+                        bodySpacing[size],
+                        className
+                    )}
+                >
                     {content}
                 </div>
             )}

package/src/components/disclosure-group/disclosure-group.tsx

@@ -4,6 +4,29 @@ import { ChevronDownIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 import { InlineDisclosure } from "../inline-disclosure/inline-disclosure"
 
+export type DisclosureGroupSize = "sm" | "md" | "lg"
+
+const triggerSizes: Record<DisclosureGroupSize, string> = {
+    sm: "h-auto min-h-9 w-full rounded-lg px-3 py-2 text-start text-footnote active:scale-100",
+    md: "h-auto min-h-11 w-full rounded-xl px-4 py-3 text-start text-subheadline active:scale-100",
+    lg: "h-auto min-h-13 w-full rounded-2xl px-5 py-4 text-start text-body active:scale-100",
+}
+const descriptionSizes: Record<DisclosureGroupSize, string> = {
+    sm: "text-caption2 leading-caption2 font-normal break-words whitespace-normal text-label-secondary",
+    md: "text-footnote leading-footnote font-normal break-words whitespace-normal text-label-secondary",
+    lg: "text-subheadline leading-subheadline font-normal break-words whitespace-normal text-label-secondary",
+}
+const contentSizes: Record<DisclosureGroupSize, string> = {
+    sm: "min-w-0 px-3 pb-3 text-footnote leading-footnote text-label-secondary [overflow-wrap:anywhere]",
+    md: "min-w-0 px-4 pb-4 text-subheadline leading-subheadline text-label-secondary [overflow-wrap:anywhere]",
+    lg: "min-w-0 px-5 pb-5 text-body leading-body text-label-secondary [overflow-wrap:anywhere]",
+}
+const chevronSizes: Record<DisclosureGroupSize, number> = {
+    sm: 15,
+    md: 17,
+    lg: 19,
+}
+
 export interface DisclosureGroupProps {
     label: string
     open: boolean
@@ -15,6 +38,8 @@ export interface DisclosureGroupProps {
     triggerClassName?: string
     /** Supporting text beneath the title. */
     description?: string
+    /** Trigger, description and content density. @default "md" */
+    size?: DisclosureGroupSize
 }
 
 /** A controlled, accessible disclosure row with the shared inline reveal. */
@@ -27,6 +52,7 @@ export function DisclosureGroup({
     className,
     triggerClassName,
     description,
+    size = "md",
 }: DisclosureGroupProps) {
     const id = useId()
 
@@ -43,8 +69,8 @@ export function DisclosureGroup({
                     disabled={disabled}
                     onClick={() => onOpenChange(!open)}
                     className={cn(
-                        "h-auto min-h-11 w-full rounded-xl px-4 py-3 text-start active:scale-100",
-                        "text-subheadline font-normal text-label hover:bg-fill/60 focus-visible:ring-inset focus-visible:ring-offset-0",
+                        triggerSizes[size],
+                        "font-normal text-label hover:bg-fill/60 focus-visible:ring-inset focus-visible:ring-offset-0",
                         "focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-40",
                         triggerClassName
                     )}
@@ -52,13 +78,11 @@ export function DisclosureGroup({
                     <span className="flex min-w-0 flex-col gap-0.5">
                         <span className="font-medium break-words whitespace-normal">{label}</span>
                         {description && (
-                            <span className="text-footnote leading-footnote font-normal break-words whitespace-normal text-label-secondary">
-                                {description}
-                            </span>
+                            <span className={descriptionSizes[size]}>{description}</span>
                         )}
                     </span>
                     <ChevronDownIcon
-                        size={17}
+                        size={chevronSizes[size]}
                         aria-hidden="true"
                         className={cn(
                             "shrink-0 text-label-tertiary transition-transform duration-normal motion-reduce:transition-none",
@@ -69,9 +93,7 @@ export function DisclosureGroup({
             </h3>
             <section id={id} aria-labelledby={`${id}-trigger`} aria-hidden={!open} inert={!open}>
                 <InlineDisclosure open={open}>
-                    <div className="min-w-0 px-4 pb-4 text-subheadline leading-subheadline text-label-secondary [overflow-wrap:anywhere]">
-                        {children}
-                    </div>
+                    <div className={contentSizes[size]}>{children}</div>
                 </InlineDisclosure>
             </section>
         </div>

package/src/components/morph/index.ts

@@ -0,0 +1,2 @@
+export * from "./morph"
+export * from "./use-morph-disclosure"

package/src/components/morph/morph.tsx

@@ -0,0 +1,210 @@
+import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion } from "motion/react"
+import { type ReactNode, type RefObject, useLayoutEffect, useRef, useState } from "react"
+import { concealMenuSource } from "../context-menu/conceal-menu-source"
+import { menuSurfaceExit, menuSurfaceReveal, type MenuRect } from "../context-menu/menu-reveal"
+import { useSheetFocus } from "../sheet/use-sheet-focus"
+import { SheetPortal } from "../sheet/sheet-portal"
+import { cn } from "../../lib/class-names"
+import { contentCrossfade, fluidCollapse, fluidOvershoot } from "../../motion/transitions"
+
+export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
+    /** Controls whether the overlay is presented. */
+    open: boolean
+    /** Called on Escape or outside press. */
+    onClose: () => void
+    /** The element whose rect the overlay grows from and collapses back to. */
+    sourceRef: RefObject<HTMLElement | null>
+    /** Accessible name (used when there is no labelledBy). */
+    label: string
+    /** ID of a visible heading inside the overlay. */
+    labelledBy?: string
+    /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
+    dismissOnOutsidePress?: boolean
+    className?: string
+    children?: ReactNode
+}
+
+/**
+ * A modal overlay that morphs its glass material from a source element's
+ * rect to its own resting rect, then collapses back — Apple's
+ * matched-geometry effect. The source is concealed while the overlay is
+ * mounted so the material reads as the source itself springing open.
+ *
+ * Reuses `SheetPortal` (theme inheritance), `useSheetFocus` (focus trap,
+ * Escape, modal environment) and the same `menuSurfaceReveal` FLIP
+ * primitive that powers anchored `Popover` and `ContextMenu`.
+ */
+export function Morph({ open, ...props }: MorphProps) {
+    return <AnimatePresence>{open && <OpenMorph {...props} />}</AnimatePresence>
+}
+
+function OpenMorph({
+    onClose,
+    sourceRef,
+    label,
+    labelledBy,
+    dismissOnOutsidePress = true,
+    className,
+    children,
+    ...props
+}: Omit<MorphProps, "open">) {
+    const panel = useRef<HTMLDivElement>(null)
+    const reducedMotion = useReducedMotion()
+    const [settled, setSettled] = useState(false)
+    const [target, setTarget] = useState<{ width: number; height: number; radius: number } | null>(
+        null
+    )
+    const [reveal, setReveal] = useState<ReturnType<typeof menuSurfaceReveal> | null>(null)
+    useSheetFocus(panel, onClose)
+
+    // Measure the panel's resting rect and the source's rect, then compute
+    // the reveal (initial material state) from menuSurfaceReveal. Re-measures
+    // on resize/scroll so the morph stays aligned if either moves.
+    useLayoutEffect(() => {
+        const surface = panel.current
+        const source = sourceRef.current
+        if (!surface) return
+        const measure = () => {
+            const panelRect = surface.getBoundingClientRect()
+            const radius = Number.parseFloat(getComputedStyle(surface).borderTopLeftRadius) || 0
+            setTarget((current) =>
+                current &&
+                current.width === panelRect.width &&
+                current.height === panelRect.height &&
+                current.radius === radius
+                    ? current
+                    : { width: panelRect.width, height: panelRect.height, radius }
+            )
+            const sourceRect = source?.getBoundingClientRect()
+            const sourceArg: MenuRect | undefined =
+                sourceRect && sourceRect.width > 0 && sourceRect.height > 0
+                    ? {
+                          left: sourceRect.left,
+                          top: sourceRect.top,
+                          width: sourceRect.width,
+                          height: sourceRect.height,
+                      }
+                    : undefined
+            setReveal(
+                menuSurfaceReveal(sourceArg, {
+                    left: panelRect.left,
+                    top: panelRect.top,
+                    width: panelRect.width,
+                    height: panelRect.height,
+                    radius,
+                })
+            )
+        }
+        measure()
+        let frame = 0
+        const schedule = () => {
+            cancelAnimationFrame(frame)
+            frame = requestAnimationFrame(measure)
+        }
+        const observer = new ResizeObserver(schedule)
+        observer.observe(surface)
+        if (source) observer.observe(source)
+        const viewport = window.visualViewport
+        viewport?.addEventListener("resize", schedule)
+        viewport?.addEventListener("scroll", schedule)
+        window.addEventListener("resize", schedule)
+        window.addEventListener("scroll", schedule, true)
+        return () => {
+            observer.disconnect()
+            cancelAnimationFrame(frame)
+            viewport?.removeEventListener("resize", schedule)
+            viewport?.removeEventListener("scroll", schedule)
+            window.removeEventListener("resize", schedule)
+            window.removeEventListener("scroll", schedule, true)
+        }
+    }, [sourceRef])
+
+    // Conceal the source while the morph is mounted; restore on unmount.
+    useLayoutEffect(() => {
+        const source = sourceRef.current
+        if (!source) return
+        const restore = concealMenuSource(source, false)
+        return () => {
+            restore()
+        }
+    }, [sourceRef])
+
+    return (
+        <SheetPortal>
+            <div className="fixed inset-0 z-[75] flex items-center justify-center p-6">
+                <motion.div
+                    aria-hidden="true"
+                    className="absolute inset-0 bg-black/30 backdrop-blur-md"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={reducedMotion ? { duration: 0 } : { duration: 0.18 }}
+                    onClick={dismissOnOutsidePress ? onClose : undefined}
+                />
+                <motion.div
+                    ref={panel}
+                    role="dialog"
+                    aria-modal="true"
+                    aria-label={labelledBy ? undefined : label}
+                    aria-labelledby={labelledBy}
+                    tabIndex={-1}
+                    className={cn(
+                        "relative isolate flex w-full flex-col rounded-5xl outline-none",
+                        "max-h-[92%] max-w-[720px]",
+                        settled && "overflow-hidden",
+                        className
+                    )}
+                    {...props}
+                >
+                    {/* The morphing material — mirrors Popover's data-popover-surface
+                        pattern. Starts at the source's rect (offset relative to the
+                        panel) and grows to fill the panel, with the fluid overshoot
+                        bounce. Border radius interpolates from the source's
+                        "pillified" radius to the panel's authored radius. */}
+                    <motion.div
+                        key={reveal ? "surface" : "measure"}
+                        aria-hidden="true"
+                        data-morph-surface=""
+                        onAnimationComplete={() => {
+                            if (reveal) setSettled(true)
+                        }}
+                        className="glass-menu pointer-events-none absolute top-0 left-0 -z-10 rounded-5xl"
+                        style={{ width: "100%", height: "100%" }}
+                        initial={reducedMotion || !reveal ? false : reveal}
+                        animate={
+                            target
+                                ? {
+                                      x: 0,
+                                      y: 0,
+                                      width: target.width,
+                                      height: target.height,
+                                      opacity: 1,
+                                      borderRadius: target.radius,
+                                  }
+                                : undefined
+                        }
+                        exit={
+                            reducedMotion || !reveal
+                                ? { opacity: 0 }
+                                : { ...menuSurfaceExit(reveal), transition: fluidCollapse }
+                        }
+                        transition={
+                            reducedMotion
+                                ? { duration: 0 }
+                                : { ...fluidOvershoot, opacity: { duration: 0.18 } }
+                        }
+                    />
+                    <motion.div
+                        className="flex min-h-0 flex-1 flex-col overflow-y-auto"
+                        initial={reducedMotion ? false : contentCrossfade.initial}
+                        animate={reducedMotion ? undefined : contentCrossfade.animate}
+                        exit={reducedMotion ? undefined : contentCrossfade.exit}
+                        transition={reducedMotion ? { duration: 0 } : contentCrossfade.transition}
+                    >
+                        {children}
+                    </motion.div>
+                </motion.div>
+            </div>
+        </SheetPortal>
+    )
+}

package/src/components/morph/use-morph-disclosure.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useState } from "react"
+
+/**
+ * Disclosure state that keeps the overlay mounted through its exit animation,
+ * mirroring `useAnchoredDisclosure`. Pair with a `useRef<HTMLElement>(null)`
+ * for the source.
+ */
+export function useMorphDisclosure(disabled = false) {
+    const [open, setOpen] = useState(false)
+    const [mounted, setMounted] = useState(false)
+    useEffect(() => {
+        if (disabled) setOpen(false)
+    }, [disabled])
+    const show = useCallback(() => {
+        setMounted(true)
+        setOpen(true)
+    }, [])
+    const toggle = useCallback(() => {
+        setMounted(true)
+        setOpen((value) => !value)
+    }, [])
+    const close = useCallback(() => setOpen(false), [])
+    const onExited = useCallback(() => {
+        if (!open || disabled) setMounted(false)
+    }, [open, disabled])
+    return { open: open && !disabled, mounted, show, toggle, close, onExited }
+}

package/src/components/profile-image/profile-image.tsx

@@ -1,18 +1,40 @@
 import { createContext, useContext, useEffect, useState, type ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 
+export type ProfileImageSize = "sm" | "md" | "lg"
+
+const diameters: Record<ProfileImageSize, string> = {
+    sm: "size-7",
+    md: "size-9",
+    lg: "size-12",
+}
+
+const fallbackTextSizes: Record<ProfileImageSize, string> = {
+    sm: "text-caption",
+    md: "text-footnote",
+    lg: "text-subheadline",
+}
+
 const ImageContext = createContext<{
     loaded: boolean
     setLoaded: (loaded: boolean) => void
-}>({ loaded: false, setLoaded: () => {} })
-export function ProfileImage({ className, ...props }: ComponentProps<"span">) {
+    size: ProfileImageSize
+}>({ loaded: false, setLoaded: () => {}, size: "md" })
+
+export interface ProfileImageProps extends ComponentProps<"span"> {
+    /** Avatar diameter; fallback initials scale with it. @default "md" */
+    size?: ProfileImageSize
+}
+
+export function ProfileImage({ size = "md", className, ...props }: ProfileImageProps) {
     const [loaded, setLoaded] = useState(false)
     return (
-        <ImageContext value={{ loaded, setLoaded }}>
+        <ImageContext value={{ loaded, setLoaded, size }}>
             <span
                 {...props}
                 className={cn(
-                    "relative inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-fill text-label-secondary",
+                    "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-fill text-label-secondary",
+                    diameters[size],
                     className
                 )}
             />
@@ -51,8 +73,8 @@ export function ProfileImageContent({
     )
 }
 export function ProfileImageFallback({ className, ...props }: ComponentProps<"span">) {
-    const { loaded } = useContext(ImageContext)
+    const { loaded, size } = useContext(ImageContext)
     return loaded ? null : (
-        <span {...props} className={cn("text-footnote font-medium", className)} />
+        <span {...props} className={cn(fallbackTextSizes[size], "font-medium", className)} />
     )
 }

package/src/components/radio-group/radio-group.tsx

@@ -1,6 +1,29 @@
 import { useId } from "react"
 import { cn } from "../../lib/class-names"
 
+export type RadioGroupSize = "sm" | "md" | "lg"
+
+const legendSizes: Record<RadioGroupSize, string> = {
+    sm: "mb-1.5 text-caption2 font-medium text-label-secondary",
+    md: "mb-2 text-footnote font-medium text-label-secondary",
+    lg: "mb-2.5 text-subheadline font-medium text-label-secondary",
+}
+const rowSizes: Record<RadioGroupSize, string> = {
+    sm: "flex min-h-7 items-start gap-1.5 text-footnote text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-10",
+    md: "flex min-h-8 items-start gap-2 text-subheadline text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-11",
+    lg: "flex min-h-10 items-start gap-2.5 text-body text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-12",
+}
+const radioSizes: Record<RadioGroupSize, string> = {
+    sm: "mt-0.5 size-3.5 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+    md: "mt-1 size-4 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+    lg: "mt-1 size-5 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+}
+const descriptionSizes: Record<RadioGroupSize, string> = {
+    sm: "block text-caption2 text-label-secondary",
+    md: "block text-footnote text-label-secondary",
+    lg: "block text-subheadline text-label-secondary",
+}
+
 export interface RadioGroupOption<T extends string> {
     value: T
     label: string
@@ -15,6 +38,8 @@ export interface RadioGroupProps<T extends string> {
     disabled?: boolean
     name?: string
     className?: string
+    /** Legend, row, radio glyph and description density. @default "md" */
+    size?: RadioGroupSize
 }
 /** A labelled choice group using the browser's native radio keyboard behavior. */
 export function RadioGroup<T extends string>({
@@ -25,16 +50,14 @@ export function RadioGroup<T extends string>({
     disabled,
     name,
     className,
+    size = "md",
 }: RadioGroupProps<T>) {
     const id = useId()
     return (
         <fieldset disabled={disabled} className={cn("flex min-w-0 flex-col gap-2", className)}>
-            <legend className="mb-2 text-footnote font-medium text-label-secondary">{label}</legend>
+            <legend className={legendSizes[size]}>{label}</legend>
             {options.map((option, index) => (
-                <label
-                    key={option.value}
-                    className="flex min-h-8 items-start gap-2 text-subheadline text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-11"
-                >
+                <label key={option.value} className={rowSizes[size]}>
                     <input
                         type="radio"
                         name={name ?? id}
@@ -43,15 +66,12 @@ export function RadioGroup<T extends string>({
                         disabled={option.disabled}
                         onChange={() => onChange(option.value)}
                         aria-describedby={option.description ? `${id}-${index}` : undefined}
-                        className="mt-1 size-4 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text"
+                        className={radioSizes[size]}
                     />
                     <span>
                         {option.label}
                         {option.description && (
-                            <span
-                                id={`${id}-${index}`}
-                                className="block text-footnote text-label-secondary"
-                            >
+                            <span id={`${id}-${index}`} className={descriptionSizes[size]}>
                                 {option.description}
                             </span>
                         )}

package/src/components/sheet/sheet.tsx

@@ -7,6 +7,18 @@ import { SheetPortal } from "./sheet-portal"
 import { useSheetFocus } from "./use-sheet-focus"
 
 export type SheetPlacement = "adaptive" | "center"
+export type SheetSize = "sm" | "md" | "lg"
+
+const outerPaddings: Record<SheetSize, string> = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+}
+const panelMaxWidths: Record<SheetSize, string> = {
+    sm: "max-w-sm",
+    md: "max-w-[560px]",
+    lg: "max-w-2xl",
+}
 
 export interface SheetProps {
     /** Controls whether the sheet is presented. */
@@ -21,6 +33,8 @@ export interface SheetProps {
     labelledBy?: string
     /** `adaptive` rises from the bottom on phones; `center` always floats. @default "adaptive" */
     placement?: SheetPlacement
+    /** Outer padding and panel max-width. @default "md" */
+    size?: SheetSize
     className?: string
     children: ReactNode
 }
@@ -47,6 +61,7 @@ function OpenSheet({
     label,
     labelledBy,
     placement = "adaptive",
+    size = "md",
     className,
     children,
 }: Omit<SheetProps, "open">) {
@@ -59,7 +74,9 @@ function OpenSheet({
         <div
             className={cn(
                 "fixed inset-0 z-[65] flex justify-center",
-                placement === "center" ? "items-center p-6" : "items-end sm:items-center sm:p-6"
+                placement === "center"
+                    ? cn("items-center", outerPaddings[size])
+                    : cn("items-end sm:items-center", "sm:" + outerPaddings[size])
             )}
             style={
                 viewport
@@ -91,7 +108,8 @@ function OpenSheet({
                 tabIndex={-1}
                 className={cn(
                     "glass-menu relative flex w-full flex-col overflow-hidden",
-                    "max-h-[92%] max-w-[560px]",
+                    "max-h-[92%]",
+                    panelMaxWidths[size],
                     placement === "center" ? "rounded-sheet" : "rounded-t-sheet sm:rounded-sheet",
                     className
                 )}

package/src/components/swatch-picker/swatch-picker.tsx

@@ -14,6 +14,34 @@ export interface SwatchPickerOption<T extends string> {
     ink: string
 }
 
+export type SwatchPickerSize = "sm" | "md" | "lg"
+
+const swatchSizes: Record<SwatchPickerSize, string> = {
+    sm: "size-6",
+    md: "size-8",
+    lg: "size-10",
+}
+const checkSizes: Record<SwatchPickerSize, number> = {
+    sm: 13,
+    md: 16,
+    lg: 19,
+}
+const captionText: Record<SwatchPickerSize, string> = {
+    sm: "text-caption2",
+    md: "text-caption2",
+    lg: "text-caption",
+}
+const fieldsetGaps: Record<SwatchPickerSize, string> = {
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+}
+const labelGaps: Record<SwatchPickerSize, string> = {
+    sm: "gap-1",
+    md: "gap-1.5",
+    lg: "gap-2",
+}
+
 export interface SwatchPickerProps<T extends string> {
     value: T
     options: ReadonlyArray<SwatchPickerOption<T>>
@@ -22,6 +50,8 @@ export interface SwatchPickerProps<T extends string> {
     label: string
     /** Custom classes for the swatch container. */
     className?: string
+    /** Swatch diameter, check icon and caption scale. @default "md" */
+    size?: SwatchPickerSize
 }
 
 /** Colour swatches with a check on the chosen one. */
@@ -31,17 +61,21 @@ export function SwatchPicker<T extends string>({
     onChange,
     label,
     className,
+    size = "md",
 }: SwatchPickerProps<T>) {
     const name = useId()
     return (
-        <fieldset className={cn("flex flex-wrap gap-3", className)}>
+        <fieldset className={cn("flex flex-wrap", fieldsetGaps[size], className)}>
             <legend className="sr-only">{label}</legend>
             {options.map((option) => {
                 const selected = option.value === value
                 return (
                     <label
                         key={option.value}
-                        className="group flex cursor-pointer flex-col items-center gap-1.5"
+                        className={cn(
+                            "group flex cursor-pointer flex-col items-center",
+                            labelGaps[size]
+                        )}
                     >
                         <input
                             type="radio"
@@ -56,7 +90,8 @@ export function SwatchPicker<T extends string>({
                         />
                         <span
                             className={cn(
-                                "flex size-8 items-center justify-center rounded-full ring-offset-1 ring-offset-elevated transition-[box-shadow,transform] duration-fast group-active:scale-95 peer-focus-visible:ring-2 peer-focus-visible:ring-accent",
+                                "flex items-center justify-center rounded-full ring-offset-1 ring-offset-elevated transition-[box-shadow,transform] duration-fast group-active:scale-95 peer-focus-visible:ring-2 peer-focus-visible:ring-accent",
+                                swatchSizes[size],
                                 selected
                                     ? "ring-[1.5px] ring-label/70"
                                     : "ring-0 group-hover:ring-[1.5px] group-hover:ring-separator"
@@ -78,7 +113,7 @@ export function SwatchPicker<T extends string>({
                                     transition={spring.bouncy}
                                 >
                                     <CheckIcon
-                                        size={16}
+                                        size={checkSizes[size]}
                                         strokeWidth={2.6}
                                         style={{
                                             color: option.ink,
@@ -89,7 +124,7 @@ export function SwatchPicker<T extends string>({
                         </span>
                         <span
                             className={cn(
-                                "text-caption2",
+                                captionText[size],
                                 selected ? "font-semibold text-label" : "text-label-tertiary"
                             )}
                         >

package/src/index.ts

@@ -102,3 +102,5 @@ export * from "./components/wake-slider/wake-slider"
 export * from "./components/one-time-code/one-time-code"
 
 export * from "./components/aspect-ratio/aspect-ratio"
+
+export * from "./components/morph"