@passui/react 0.1.36 → 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/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/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/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/package.json

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

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

@@ -5,6 +5,29 @@ import { haptic } from "../../lib/haptics"
 import { spring } from "../../motion/transitions"
 import { Picker } from "../picker/picker"
 
+export type SegmentedControlSize = "sm" | "md" | "lg"
+
+const segmentPaddings: Record<SegmentedControlSize, string> = {
+    sm: "p-[2px]",
+    md: "p-[3px]",
+    lg: "p-[4px]",
+}
+const segmentLabelClasses: Record<SegmentedControlSize, string> = {
+    sm: "min-w-[52px] px-2 py-0.5 text-caption2 whitespace-nowrap",
+    md: "min-w-[64px] px-3 py-1 text-footnote whitespace-nowrap",
+    lg: "min-w-[80px] px-4 py-1.5 text-subheadline whitespace-nowrap",
+}
+const segmentRadius: Record<SegmentedControlSize, string> = {
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+}
+const fallbackPickerSizes: Record<SegmentedControlSize, string> = {
+    sm: "rounded-md py-1 text-caption2 font-semibold",
+    md: "rounded-lg py-1.5 text-footnote font-semibold",
+    lg: "rounded-lg py-2 text-subheadline font-semibold",
+}
+
 export interface SegmentedControlProps<T extends string> {
     /** Value of the selected segment. */
     value: T
@@ -16,6 +39,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
 }
 
 /**
@@ -30,6 +55,7 @@ export function SegmentedControl<T extends string>({
     onChange,
     label,
     className,
+    size = "md",
 }: SegmentedControlProps<T>) {
     const id = useId()
     const reducedMotion = useReducedMotion()
@@ -55,16 +81,25 @@ export function SegmentedControl<T extends string>({
             <div
                 ref={measure}
                 aria-hidden="true"
-                className="pointer-events-none invisible absolute top-0 flex w-max p-[3px] text-footnote font-semibold"
+                className={cn(
+                    "pointer-events-none invisible absolute top-0 flex w-max font-semibold",
+                    segmentPaddings[size],
+                    segmentLabelClasses[size].replace(/min-w-\[[^\]]+\]\s*/, "")
+                )}
             >
                 {options.map((option) => (
-                    <span key={option.value} className="min-w-[64px] px-3 py-1 whitespace-nowrap">
+                    <span key={option.value} className={segmentLabelClasses[size]}>
                         {option.label}
                     </span>
                 ))}
             </div>
             {fits ? (
-                <fieldset className="flex w-full rounded-lg bg-fill p-[3px] shadow-[inset_0_1px_2px_rgb(40_30_0/0.06)]">
+                <fieldset
+                    className={cn(
+                        "flex w-full rounded-lg bg-fill shadow-[inset_0_1px_2px_rgb(40_30_0/0.06)]",
+                        segmentPaddings[size]
+                    )}
+                >
                     <legend className="sr-only">{label}</legend>
                     {options.map((option) => {
                         const selected = option.value === value
@@ -72,7 +107,9 @@ export function SegmentedControl<T extends string>({
                             <label
                                 key={option.value}
                                 className={cn(
-                                    "relative isolate min-w-[64px] flex-1 cursor-pointer rounded-md px-3 py-1 text-center text-footnote whitespace-nowrap transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent/60",
+                                    "relative isolate flex-1 cursor-pointer text-center whitespace-nowrap transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent/60",
+                                    segmentLabelClasses[size].replace("whitespace-nowrap", ""),
+                                    segmentRadius[size],
                                     selected
                                         ? "font-semibold text-label"
                                         : "font-medium text-label-secondary hover:text-label"
@@ -92,7 +129,10 @@ export function SegmentedControl<T extends string>({
                                 {selected && (
                                     <motion.span
                                         layoutId={`segment-${id}`}
-                                        className="absolute inset-0 -z-10 rounded-md bg-elevated shadow-[0_0_0_0.5px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.08),0_3px_8px_-2px_rgb(0_0_0/0.10)]"
+                                        className={cn(
+                                            "absolute inset-0 -z-10 bg-elevated shadow-[0_0_0_0.5px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.08),0_3px_8px_-2px_rgb(0_0_0/0.10)]",
+                                            segmentRadius[size]
+                                        )}
                                         transition={reducedMotion ? { duration: 0 } : spring.snappy}
                                     />
                                 )}
@@ -108,7 +148,8 @@ export function SegmentedControl<T extends string>({
                     options={options}
                     onChange={onChange}
                     searchable={false}
-                    className="rounded-lg py-1.5 text-footnote font-semibold"
+                    className={fallbackPickerSizes[size]}
+                    size={size === "sm" ? "sm" : size === "lg" ? "lg" : "md"}
                 />
             )}
         </div>

package/src/components/sheet/sheet.tsx

@@ -76,7 +76,7 @@ function OpenSheet({
                 "fixed inset-0 z-[65] flex justify-center",
                 placement === "center"
                     ? cn("items-center", outerPaddings[size])
-                    : cn("items-end sm:items-center", "sm:" + outerPaddings[size])
+                    : cn("items-end sm:items-center", `sm:${outerPaddings[size]}`)
             )}
             style={
                 viewport

package/src/components/slider/slider.tsx

@@ -2,10 +2,55 @@ import { type ComponentProps, useId } from "react"
 import { cn } from "../../lib/class-names"
 import { clampRange } from "../../lib/range-value"
 
+export type SliderSize = "sm" | "md" | "lg"
+
+const labelSizes: Record<SliderSize, string> = {
+    sm: "text-footnote font-semibold text-label",
+    md: "text-subheadline font-semibold text-label",
+    lg: "text-body font-semibold text-label",
+}
+const inputHeights: Record<SliderSize, string> = {
+    sm: "h-9",
+    md: "h-11",
+    lg: "h-13",
+}
+const descriptionSizes: Record<SliderSize, string> = {
+    sm: "text-caption2 text-label-secondary",
+    md: "text-footnote text-label-secondary",
+    lg: "text-subheadline text-label-secondary",
+}
+// Track height, thumb size, and the webkit thumb's -mt offset (derived from
+// (thumb - track) / 2: md (20-6)/2=7, sm (16-4)/2=6, lg (24-8)/2=8).
+const webkitTrack: Record<SliderSize, string> = {
+    sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
+    md: "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
+    lg: "[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
+}
+const webkitThumb: Record<SliderSize, string> = {
+    sm: "[&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
+    md: "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
+    lg: "[&::-webkit-slider-thumb]:-mt-[8px] [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
+}
+const mozTrack: Record<SliderSize, string> = {
+    sm: "[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
+    md: "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
+    lg: "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
+}
+const mozProgress: Record<SliderSize, string> = {
+    sm: "[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
+    md: "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
+    lg: "[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
+}
+const mozThumb: Record<SliderSize, string> = {
+    sm: "[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
+    md: "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
+    lg: "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
+}
+
 export interface SliderProps
     extends Omit<
         ComponentProps<"input">,
-        "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"
+        "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "size"
     > {
     value: number
     onChange: (value: number) => void
@@ -16,6 +61,8 @@ export interface SliderProps
     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. */
@@ -28,6 +75,7 @@ export function Slider({
     step = 1,
     description,
     formatValue,
+    size = "md",
     id: suppliedId,
     className,
     disabled,
@@ -40,7 +88,7 @@ export function Slider({
 
     return (
         <div className={cn("flex min-w-0 flex-col gap-2", disabled && "opacity-45")}>
-            <label htmlFor={id} className="text-subheadline font-semibold text-label">
+            <label htmlFor={id} className={labelSizes[size]}>
                 {label}
             </label>
             <input
@@ -56,18 +104,19 @@ export function Slider({
                 aria-describedby={description ? `${id}-description` : undefined}
                 onChange={(event) => onChange(Number(event.currentTarget.value))}
                 className={cn(
-                    "h-11 w-full min-w-0 cursor-pointer appearance-none bg-transparent accent-accent",
+                    "w-full min-w-0 cursor-pointer appearance-none bg-transparent accent-accent",
+                    inputHeights[size],
                     "focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-                    "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-                    "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-                    "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-                    "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-                    "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
+                    webkitTrack[size],
+                    webkitThumb[size],
+                    mozTrack[size],
+                    mozProgress[size],
+                    mozThumb[size],
                     className
                 )}
             />
             {description && (
-                <p id={`${id}-description`} className="text-footnote text-label-secondary">
+                <p id={`${id}-description`} className={descriptionSizes[size]}>
                     {description}
                 </p>
             )}

package/src/components/stepper/stepper.tsx

@@ -1,9 +1,36 @@
 import { useId } from "react"
-import { Button } from "../button/button"
+import { Button, type ButtonSize } from "../button/button"
 import { cn } from "../../lib/class-names"
 import { clampRange, stepRange } from "../../lib/range-value"
 import { RollingDigit } from "./rolling-digit"
 
+export type StepperSize = "sm" | "md" | "lg"
+
+const labelText: Record<StepperSize, string> = {
+    sm: "min-w-0 text-footnote text-label",
+    md: "min-w-0 text-subheadline text-label",
+    lg: "min-w-0 text-body text-label",
+}
+const outputText: Record<StepperSize, string> = {
+    sm: "text-footnote tabular-nums text-label",
+    md: "text-subheadline tabular-nums text-label",
+    lg: "text-body tabular-nums text-label",
+}
+const buttonSizes: Record<StepperSize, { size: ButtonSize; cls: string }> = {
+    sm: {
+        size: "icon-sm",
+        cls: "size-7 rounded-none text-subheadline text-accent-text [@media(pointer:coarse)]:size-10",
+    },
+    md: {
+        size: "icon",
+        cls: "size-8 rounded-none text-title3 text-accent-text [@media(pointer:coarse)]:size-11",
+    },
+    lg: {
+        size: "icon-lg",
+        cls: "size-9 rounded-none text-title2 text-accent-text [@media(pointer:coarse)]:size-12",
+    },
+}
+
 export interface StepperProps {
     value: number
     onChange: (value: number) => void
@@ -17,6 +44,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. */
@@ -31,6 +60,7 @@ export function Stepper({
     disabled = false,
     className,
     formatValue,
+    size = "md",
 }: StepperProps) {
     const id = useId()
     const upper = Math.max(min, max)
@@ -43,15 +73,11 @@ export function Stepper({
 
     return (
         <div className={cn("flex min-w-0 items-center justify-between gap-3", className)}>
-            <span id={id} className="min-w-0 text-subheadline text-label">
+            <span id={id} className={labelText[size]}>
                 {label}
             </span>
             <div className="flex shrink-0 items-center gap-3">
-                <output
-                    aria-live="polite"
-                    aria-labelledby={id}
-                    className="text-subheadline tabular-nums text-label"
-                >
+                <output aria-live="polite" aria-labelledby={id} className={outputText[size]}>
                     <span aria-hidden="true" className="inline-flex items-center">
                         {Array.from(displayed).map((character, index) => {
                             if (!/[0-9]/.test(character))
@@ -73,24 +99,24 @@ export function Stepper({
                     <Button
                         type="button"
                         variant="ghost"
-                        size="icon"
+                        size={buttonSizes[size].size}
                         aria-label={labels.decrement}
                         aria-describedby={id}
                         disabled={disabled || decrement === current}
                         onClick={() => onChange(decrement)}
-                        className="size-8 rounded-none text-title3 text-accent-text [@media(pointer:coarse)]:size-11"
+                        className={buttonSizes[size].cls}
                     >
                         −
                     </Button>
                     <Button
                         type="button"
                         variant="ghost"
-                        size="icon"
+                        size={buttonSizes[size].size}
                         aria-label={labels.increment}
                         aria-describedby={id}
                         disabled={disabled || increment === current}
                         onClick={() => onChange(increment)}
-                        className="size-8 rounded-none text-title3 text-accent-text [@media(pointer:coarse)]:size-11"
+                        className={buttonSizes[size].cls}
                     >
                         +
                     </Button>

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

@@ -2,6 +2,28 @@ import { useId, useRef, useState, type ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
 export type TabViewAlign = "start" | "center"
+export type TabViewSize = "sm" | "md" | "lg"
+
+const containerGaps: Record<TabViewSize, string> = {
+    sm: "gap-4",
+    md: "gap-5",
+    lg: "gap-6",
+}
+const tablistClasses: Record<TabViewSize, string> = {
+    sm: "inline-flex h-7 w-fit max-w-full items-center gap-4 p-[2px]",
+    md: "inline-flex h-8 w-fit max-w-full items-center gap-5 p-[3px]",
+    lg: "inline-flex h-10 w-fit max-w-full items-center gap-6 p-[4px]",
+}
+const tabText: Record<TabViewSize, string> = {
+    sm: "text-footnote",
+    md: "text-subheadline",
+    lg: "text-body",
+}
+const underlineOffset: Record<TabViewSize, string> = {
+    sm: "after:bottom-[-4px] after:h-0.5",
+    md: "after:bottom-[-5px] after:h-0.5",
+    lg: "after:bottom-[-6px] after:h-1",
+}
 
 export interface TabViewProps<Value extends string> {
     /** Available tabs, in keyboard navigation order. */
@@ -17,6 +39,8 @@ 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
 }
 
@@ -29,6 +53,7 @@ export function TabView<Value extends string>({
     align = "center",
     label,
     children,
+    size = "md",
     className,
 }: TabViewProps<Value>) {
     const id = useId()
@@ -44,12 +69,12 @@ export function TabView<Value extends string>({
     if (value === undefined) return null
 
     return (
-        <div className={cn("flex w-full flex-col gap-5", className)}>
+        <div className={cn("flex w-full flex-col", containerGaps[size], className)}>
             <div
                 role="tablist"
                 aria-label={label}
                 className={cn(
-                    "inline-flex h-8 w-fit max-w-full items-center gap-5 p-[3px]",
+                    tablistClasses[size],
                     align === "start" ? "self-start" : "mx-auto justify-center"
                 )}
             >
@@ -96,9 +121,11 @@ export function TabView<Value extends string>({
                             }
                         }}
                         className={cn(
-                            "relative inline-flex h-[calc(100%-1px)] shrink-0 items-center justify-center border border-transparent p-0 text-subheadline font-medium whitespace-nowrap",
+                            "relative inline-flex h-[calc(100%-1px)] shrink-0 items-center justify-center border border-transparent p-0 font-medium whitespace-nowrap",
+                            tabText[size],
                             "focus-visible:outline-2 focus-visible:outline-offset-2",
-                            "after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-current",
+                            "after:absolute after:inset-x-0 after:bg-current",
+                            underlineOffset[size],
                             option.value === value
                                 ? "after:opacity-100"
                                 : "opacity-60 hover:opacity-100 after:opacity-0"

package/src/components/toggle/toggle.tsx

@@ -13,6 +13,74 @@ import { haptic } from "../../lib/haptics"
 import { spring } from "../../motion/transitions"
 
 export type ToggleStyle = "switch" | "checkbox"
+export type ToggleSize = "sm" | "md" | "lg"
+
+const labelText: Record<ToggleSize, string> = {
+    sm: "text-footnote",
+    md: "text-subheadline",
+    lg: "text-body",
+}
+const labelGap: Record<ToggleSize, string> = {
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-3.5",
+}
+const checkboxBox: Record<ToggleSize, string> = {
+    sm: "size-4 rounded-sm",
+    md: "size-5 rounded-sm",
+    lg: "size-6 rounded-md",
+}
+const checkIconSize: Record<ToggleSize, number> = {
+    sm: 12,
+    md: 14,
+    lg: 16,
+}
+const mixedBar: Record<ToggleSize, string> = {
+    sm: "h-0.5 w-2",
+    md: "h-0.5 w-2.5",
+    lg: "h-0.5 w-3",
+}
+
+// Switch physics: travel = track_width - thumb_width - 2*inset.
+// md: 50 - 26 - 2 = 22 ✓  sm: 44 - 22 - 2 = 20 ✓  lg: 56 - 30 - 2 = 24 ✓
+type SwitchGeo = {
+    travel: number
+    inset: number
+    dropOffset: number
+    track: string
+    thumb: string
+    drop: string
+    dropTop: string
+}
+const switchGeo: Record<ToggleSize, SwitchGeo> = {
+    sm: {
+        travel: 20,
+        inset: 2,
+        dropOffset: 4,
+        track: "h-[26px] w-[44px]",
+        thumb: "size-[22px]",
+        drop: "size-3.5",
+        dropTop: "top-[6px]",
+    },
+    md: {
+        travel: 22,
+        inset: 2,
+        dropOffset: 5,
+        track: "h-[30px] w-[50px]",
+        thumb: "size-[26px]",
+        drop: "size-4",
+        dropTop: "top-[7px]",
+    },
+    lg: {
+        travel: 24,
+        inset: 2,
+        dropOffset: 6,
+        track: "h-[34px] w-[56px]",
+        thumb: "size-[30px]",
+        drop: "size-5",
+        dropTop: "top-[8px]",
+    },
+}
 
 export interface ToggleProps {
     /** Current on or off state. */
@@ -28,6 +96,8 @@ 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
 }
@@ -40,6 +110,7 @@ export function Toggle({
     style = "switch",
     mixed = false,
     labelHidden = false,
+    size = "md",
     className,
 }: ToggleProps) {
     const input = useRef<HTMLInputElement>(null)
@@ -50,12 +121,14 @@ export function Toggle({
         return (
             <label
                 className={cn(
-                    "flex cursor-pointer items-center gap-3 text-subheadline",
+                    "flex cursor-pointer items-center",
+                    labelGap[size],
+                    labelText[size],
                     disabled && "cursor-not-allowed opacity-40",
                     className
                 )}
             >
-                <span className="relative inline-flex size-5 shrink-0">
+                <span className={cn("relative inline-flex shrink-0", checkboxBox[size])}>
                     <input
                         ref={input}
                         type="checkbox"
@@ -64,19 +137,23 @@ export function Toggle({
                         disabled={disabled}
                         onChange={(event) => onChange(event.target.checked)}
                         className={cn(
-                            "peer size-5 cursor-inherit appearance-none rounded-sm border border-separator/80 bg-elevated transition-colors checked:border-transparent checked:bg-accent indeterminate:border-transparent indeterminate:bg-accent motion-reduce:transition-none",
+                            "peer cursor-inherit appearance-none border border-separator/80 bg-elevated transition-colors checked:border-transparent checked:bg-accent indeterminate:border-transparent indeterminate:bg-accent motion-reduce:transition-none",
+                            checkboxBox[size],
                             "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text"
                         )}
                     />
                     {mixed ? (
                         <span
                             aria-hidden="true"
-                            className="pointer-events-none absolute inset-0 m-auto h-0.5 w-2.5 rounded-full bg-on-accent"
+                            className={cn(
+                                "pointer-events-none absolute inset-0 m-auto rounded-full bg-on-accent",
+                                mixedBar[size]
+                            )}
                         />
                     ) : (
                         <CheckIcon
                             aria-hidden="true"
-                            size={14}
+                            size={checkIconSize[size]}
                             strokeWidth={2.5}
                             className="pointer-events-none absolute inset-0 m-auto text-on-accent opacity-0 peer-checked:opacity-100"
                         />
@@ -92,6 +169,7 @@ export function Toggle({
             onChange={onChange}
             label={label}
             disabled={disabled}
+            size={size}
             className={className}
         />
     )
@@ -102,30 +180,32 @@ function SwitchToggle({
     onChange,
     label,
     disabled,
+    size = "md",
     className,
-}: Pick<ToggleProps, "checked" | "onChange" | "label" | "disabled" | "className">) {
+}: Pick<ToggleProps, "checked" | "onChange" | "label" | "disabled" | "size" | "className">) {
     const reducedMotion = useReducedMotion()
     const id = `toggle-goo-${useId().replace(/:/g, "")}`
-    const x = useMotionValue(checked ? 22 : 2)
-    // One position owns the thumb. The drop follows that position, not a delayed target.
+    const geo = switchGeo[size]
+    const on = geo.travel
+    const off = geo.inset
+    const x = useMotionValue(checked ? on : off)
     const chase = useSpring(x, spring.snappy)
-    const dropX = useTransform(chase, (value) => value + 5)
+    const dropX = useTransform(chase, (value) => value + geo.dropOffset)
     const gesture = useRef({ start: 0, x: 0, moved: false, skipClick: false, held: false })
     useEffect(() => {
         if (reducedMotion) {
-            x.set(checked ? 22 : 2)
+            x.set(checked ? on : off)
             return
         }
-        const animation = animate(x, checked ? 22 : 2, spring.snappy)
+        const animation = animate(x, checked ? on : off, spring.snappy)
         return () => animation.stop()
-    }, [checked, reducedMotion, x])
+    }, [checked, reducedMotion, x, on, off])
     const choose = (next: boolean) => {
         if (disabled) return
         haptic("selection")
         if (next !== checked) onChange(next)
-        // Releasing on the current side still needs a settling spring.
-        if (reducedMotion) x.set(next ? 22 : 2)
-        else animate(x, next ? 22 : 2, spring.snappy)
+        if (reducedMotion) x.set(next ? on : off)
+        else animate(x, next ? on : off, spring.snappy)
     }
     return (
         <button
@@ -158,7 +238,7 @@ function SwitchToggle({
                 const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
                 const delta = (event.clientX - drag.start) * direction
                 if (Math.abs(delta) > 3) drag.moved = true
-                if (drag.moved) x.set(Math.max(2, Math.min(22, drag.x + delta)))
+                if (drag.moved) x.set(Math.max(off, Math.min(on, drag.x + delta)))
             }}
             onPointerUp={() => {
                 const drag = gesture.current
@@ -166,7 +246,7 @@ function SwitchToggle({
                 drag.held = false
                 if (!drag.moved) return
                 drag.skipClick = true
-                choose(x.get() >= 12)
+                choose(x.get() >= (on + off) / 2)
             }}
             onPointerCancel={() => {
                 gesture.current.held = false
@@ -174,7 +254,8 @@ function SwitchToggle({
                 choose(checked)
             }}
             className={cn(
-                "relative h-[30px] w-[50px] shrink-0 touch-pan-y rounded-full transition-colors duration-normal motion-reduce:transition-none",
+                "relative shrink-0 touch-pan-y rounded-full transition-colors duration-normal motion-reduce:transition-none",
+                geo.track,
                 "shadow-[inset_0_1px_2px_rgb(0_0_0/0.10)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:opacity-45",
                 checked ? "bg-accent" : "bg-separator/80",
                 className
@@ -206,12 +287,16 @@ function SwitchToggle({
             >
                 {!reducedMotion && (
                     <motion.span
-                        className="absolute top-[7px] left-0 size-4 rounded-full bg-white"
+                        className={cn(
+                            "absolute left-0 rounded-full bg-white",
+                            geo.dropTop,
+                            geo.drop
+                        )}
                         style={{ x: dropX }}
                     />
                 )}
                 <motion.span
-                    className="absolute top-0.5 left-0 size-[26px] rounded-full bg-white"
+                    className={cn("absolute top-0.5 left-0 rounded-full bg-white", geo.thumb)}
                     style={{ x }}
                 />
             </span>