@passui/react 0.1.35 → 0.1.37

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

@@ -1,4 +1,6 @@
 import type { ReactNode } from "react";
+import { type DisclosureGroupSize } from "../disclosure-group/disclosure-group";
+export type AccordionSize = DisclosureGroupSize;
 export interface AccordionItem {
     /** Stable value used to identify the expanded item. */
     value: string;
@@ -13,7 +15,9 @@ export interface AccordionProps {
     value: string | null;
     /** Selecting the open item reports `null`, so every item can collapse. */
     onValueChange: (value: string | null) => void;
+    /** Density passed through to each DisclosureGroup. @default "md" */
+    size?: AccordionSize;
     className?: string;
 }
 /** A single-open, collapsible accordion with labelled animated content regions. */
-export declare function Accordion({ items, value, onValueChange, className }: AccordionProps): import("react").JSX.Element;
+export declare function Accordion({ items, value, onValueChange, size, className }: AccordionProps): import("react").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { type TextFieldSize } from "../text-field/text-field";
 type DatePickerProps = {
     value: string;
     onChange: (value: string) => void;
@@ -10,7 +11,9 @@ type DatePickerProps = {
     };
     locale: string;
     max?: string;
+    /** Field scale passed to each TextField; matches TextField's xs|sm|md|lg. @default "md" */
+    size?: TextFieldSize;
 };
 /** Segmented date entry suited to birthdays, without a native calendar dialog. */
-export declare function DatePicker({ value, onChange, label, labels, locale, max }: DatePickerProps): import("react").JSX.Element;
+export declare function DatePicker({ value, onChange, label, labels, locale, max, size, }: DatePickerProps): import("react").JSX.Element;
 export {};

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/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/segmented-control/segmented-control.d.ts

@@ -1,3 +1,4 @@
+export type SegmentedControlSize = "sm" | "md" | "lg";
 export interface SegmentedControlProps<T extends string> {
     /** Value of the selected segment. */
     value: T;
@@ -12,6 +13,8 @@ export interface SegmentedControlProps<T extends string> {
     label: string;
     /** Custom classes for the control container. */
     className?: string;
+    /** Segment padding, label text scale and min-width. @default "md" */
+    size?: SegmentedControlSize;
 }
 /**
  * Mutually exclusive choices with a sliding selection, as on Apple
@@ -19,4 +22,4 @@ export interface SegmentedControlProps<T extends string> {
  * translation, a narrow pane) it becomes a pop-up button instead of
  * squeezing or spilling its text.
  */
-export declare function SegmentedControl<T extends string>({ value, options, onChange, label, className, }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string>({ value, options, onChange, label, className, size, }: SegmentedControlProps<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/slider/slider.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentProps } from "react";
-export interface SliderProps extends Omit<ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> {
+export type SliderSize = "sm" | "md" | "lg";
+export interface SliderProps extends Omit<ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "size"> {
     value: number;
     onChange: (value: number) => void;
     label: string;
@@ -9,6 +10,8 @@ export interface SliderProps extends Omit<ComponentProps<"input">, "type" | "val
     description?: string;
     /** Provides a localized, spoken description of the current value. */
     formatValue?: (value: number) => string;
+    /** Track height, thumb size and label/description text scale. @default "md" */
+    size?: SliderSize;
 }
 /** Native keyboard, touch and pointer behavior with Passui's control treatment. */
-export declare function Slider({ value, onChange, label, min, max, step, description, formatValue, id: suppliedId, className, disabled, ...props }: SliderProps): import("react").JSX.Element;
+export declare function Slider({ value, onChange, label, min, max, step, description, formatValue, size, id: suppliedId, className, disabled, ...props }: SliderProps): import("react").JSX.Element;

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

@@ -1,3 +1,4 @@
+export type StepperSize = "sm" | "md" | "lg";
 export interface StepperProps {
     value: number;
     onChange: (value: number) => void;
@@ -14,6 +15,8 @@ export interface StepperProps {
     className?: string;
     /** Formats the displayed value. */
     formatValue?: (value: number) => string;
+    /** Label, output and +/- button scale. @default "md" */
+    size?: StepperSize;
 }
 /** Discrete increments with disabled boundary actions and a spoken value. */
-export declare function Stepper({ value, onChange, label, labels, min, max, step, disabled, className, formatValue, }: StepperProps): import("react").JSX.Element;
+export declare function Stepper({ value, onChange, label, labels, min, max, step, disabled, className, formatValue, size, }: StepperProps): import("react").JSX.Element;

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/components/tab-view/tab-view.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 export type TabViewAlign = "start" | "center";
+export type TabViewSize = "sm" | "md" | "lg";
 export interface TabViewProps<Value extends string> {
     /** Available tabs, in keyboard navigation order. */
     options: readonly {
@@ -18,7 +19,9 @@ export interface TabViewProps<Value extends string> {
     label: string;
     /** Renders the selected tab's panel. */
     children: (value: Value) => ReactNode;
+    /** Tablist height, tab text scale and underline offset. @default "md" */
+    size?: TabViewSize;
     className?: string;
 }
 /** Content tabs with native buttons, roving focus and automatic keyboard activation. */
-export declare function TabView<Value extends string>({ options, defaultValue, value: controlledValue, onValueChange, align, label, children, className, }: TabViewProps<Value>): import("react").JSX.Element | null;
+export declare function TabView<Value extends string>({ options, defaultValue, value: controlledValue, onValueChange, align, label, children, size, className, }: TabViewProps<Value>): import("react").JSX.Element | null;

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

@@ -1,4 +1,5 @@
 export type ToggleStyle = "switch" | "checkbox";
+export type ToggleSize = "sm" | "md" | "lg";
 export interface ToggleProps {
     /** Current on or off state. */
     checked: boolean;
@@ -13,7 +14,9 @@ export interface ToggleProps {
     mixed?: boolean;
     /** Keeps the accessible name while hiding the visible label. @default false */
     labelHidden?: boolean;
+    /** Switch track size, thumb travel, checkbox box and label text scale. @default "md" */
+    size?: ToggleSize;
     /** Custom classes for the toggle container. */
     className?: string;
 }
-export declare function Toggle({ checked, onChange, label, disabled, style, mixed, labelHidden, className, }: ToggleProps): import("react").JSX.Element;
+export declare function Toggle({ checked, onChange, label, disabled, style, mixed, labelHidden, size, className, }: ToggleProps): 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.35",
+    "version": "0.1.37",
     "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/accordion/accordion.tsx

@@ -1,7 +1,15 @@
 import type { ReactNode } from "react"
-import { DisclosureGroup } from "../disclosure-group/disclosure-group"
+import { DisclosureGroup, type DisclosureGroupSize } from "../disclosure-group/disclosure-group"
 import { cn } from "../../lib/class-names"
 
+export type AccordionSize = DisclosureGroupSize
+
+const containerRadius: Record<AccordionSize, string> = {
+    sm: "rounded-xl",
+    md: "rounded-2xl",
+    lg: "rounded-3xl",
+}
+
 export interface AccordionItem {
     /** Stable value used to identify the expanded item. */
     value: string
@@ -17,15 +25,19 @@ export interface AccordionProps {
     value: string | null
     /** Selecting the open item reports `null`, so every item can collapse. */
     onValueChange: (value: string | null) => void
+    /** Density passed through to each DisclosureGroup. @default "md" */
+    size?: AccordionSize
     className?: string
 }
 
 /** A single-open, collapsible accordion with labelled animated content regions. */
-export function Accordion({ items, value, onValueChange, className }: AccordionProps) {
+export function Accordion({ items, value, onValueChange, size = "md", className }: AccordionProps) {
     return (
         <div
             className={cn(
-                "flex w-full min-w-0 flex-col overflow-hidden rounded-2xl border border-separator/60 bg-elevated",
+                "flex w-full min-w-0 flex-col overflow-hidden",
+                containerRadius[size],
+                "border border-separator/60 bg-elevated",
                 className
             )}
         >
@@ -36,6 +48,7 @@ export function Accordion({ items, value, onValueChange, className }: AccordionP
                     description={item.description}
                     open={value === item.value}
                     disabled={item.disabled}
+                    size={size}
                     triggerClassName="rounded-none"
                     onOpenChange={(open) => onValueChange(open ? item.value : null)}
                     className={cn(index > 0 && "border-t border-separator/60")}

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

@@ -1,7 +1,27 @@
 import { useState } from "react"
-import { TextField } from "../text-field/text-field"
+import { TextField, type TextFieldSize } from "../text-field/text-field"
+import { cn } from "../../lib/class-names"
 import { dateValue } from "./date-value"
 
+const legendText: Record<TextFieldSize, string> = {
+    xs: "mb-2 text-caption font-medium",
+    sm: "mb-2 text-footnote font-medium",
+    md: "mb-3 text-subheadline font-medium",
+    lg: "mb-3 text-body font-medium",
+}
+const fieldsetGap: Record<TextFieldSize, string> = {
+    xs: "gap-2",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+}
+const errorText: Record<TextFieldSize, string> = {
+    xs: "text-caption2 text-danger",
+    sm: "text-caption text-danger",
+    md: "text-footnote text-danger",
+    lg: "text-subheadline text-danger",
+}
+
 type DatePickerProps = {
     value: string
     onChange: (value: string) => void
@@ -14,10 +34,20 @@ type DatePickerProps = {
     }
     locale: string
     max?: string
+    /** Field scale passed to each TextField; matches TextField's xs|sm|md|lg. @default "md" */
+    size?: TextFieldSize
 }
 
 /** Segmented date entry suited to birthdays, without a native calendar dialog. */
-export function DatePicker({ value, onChange, label, labels, locale, max }: DatePickerProps) {
+export function DatePicker({
+    value,
+    onChange,
+    label,
+    labels,
+    locale,
+    max,
+    size = "md",
+}: DatePickerProps) {
     const [year, month, day] = value.split("-")
     const [parts, setParts] = useState({
         year: year ?? "",
@@ -41,9 +71,9 @@ export function DatePicker({ value, onChange, label, labels, locale, max }: Date
             } => part.type === "year" || part.type === "month" || part.type === "day"
         )
     return (
-        <fieldset className="flex min-w-0 flex-col gap-3">
-            <legend className="mb-3 text-subheadline font-medium">{label}</legend>
-            <div className="grid grid-cols-3 gap-3">
+        <fieldset className={cn("flex min-w-0 flex-col", fieldsetGap[size])}>
+            <legend className={legendText[size]}>{label}</legend>
+            <div className={cn("grid grid-cols-3", fieldsetGap[size])}>
                 {order.map(({ type }) => (
                     <TextField
                         key={type}
@@ -52,6 +82,7 @@ export function DatePicker({ value, onChange, label, labels, locale, max }: Date
                         autoComplete={`bday-${type}`}
                         maxLength={type === "year" ? 4 : 2}
                         value={parts[type]}
+                        size={size}
                         aria-invalid={invalid || undefined}
                         onChange={(event) => {
                             const next = {
@@ -65,7 +96,7 @@ export function DatePicker({ value, onChange, label, labels, locale, max }: Date
                 ))}
             </div>
             {invalid && (
-                <p role="status" className="text-footnote text-danger">
+                <p role="status" className={errorText[size]}>
                     {labels.invalid}
                 </p>
             )}

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"