@passui/react 0.1.35 → 0.1.37

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/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/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

@@ -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/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>
             )}