@passui/react 0.1.35 → 0.1.37

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/swatch-picker/swatch-picker.tsx

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

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

package/src/index.ts

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