@passui/react 0.1.39 → 0.1.41

package/src/components/toast/toaster.tsx

@@ -7,12 +7,39 @@ import {
     getToasts,
     subscribeToasts,
     type Toast,
+    type ToastSize,
     type ToastTone,
     toast as toastApi,
     toastLimits,
 } from "./toast-store"
 
-const PILL = 40
+const PILL: Record<ToastSize, number> = { sm: 32, md: 40, lg: 48 }
+
+const contentClasses: Record<ToastSize, string> = {
+    sm: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2 py-2 pr-3 pl-2 text-on-inverse",
+    md: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2.5 py-[10px] pr-4 pl-[10px] text-on-inverse",
+    lg: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-3 py-3 pr-5 pl-3 text-on-inverse",
+}
+const titleClasses: Record<ToastSize, string> = {
+    sm: "text-footnote leading-4 font-semibold",
+    md: "text-subheadline leading-5 font-semibold",
+    lg: "text-body leading-6 font-semibold",
+}
+const descriptionClasses: Record<ToastSize, string> = {
+    sm: "text-caption2 leading-snug text-on-inverse/70",
+    md: "text-footnote leading-snug text-on-inverse/70",
+    lg: "text-subheadline leading-snug text-on-inverse/70",
+}
+const actionClasses: Record<ToastSize, string> = {
+    sm: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-2.5 py-0.5 text-caption2 font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
+    md: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3 py-1 text-footnote font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
+    lg: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3.5 py-1.5 text-subheadline font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
+}
+const toneIconClasses: Record<ToastSize, string> = {
+    sm: "flex size-4 shrink-0 items-center justify-center rounded-full",
+    md: "flex size-5 shrink-0 items-center justify-center rounded-full",
+    lg: "flex size-6 shrink-0 items-center justify-center rounded-full",
+}
 const EMPTY: Toast[] = []
 /** A little loose, so the body overshoots and settles like a drop of honey. */
 const BODY_SPRING = {
@@ -110,10 +137,11 @@ function ToastItem({
     filterId: string
     reducedMotion: boolean
 }) {
+    const pill = PILL[toast.size]
     const content = useRef<HTMLDivElement>(null)
     const [size, setSize] = useState({
-        width: PILL,
-        height: PILL,
+        width: pill,
+        height: pill,
     })
     const [open, setOpen] = useState(false)
 
@@ -143,8 +171,8 @@ function ToastItem({
         return () => clearTimeout(timer)
     }, [toast.id, toast.duration, paused])
 
-    const width = open ? size.width : PILL
-    const height = open ? size.height : PILL
+    const width = open ? size.width : pill
+    const height = open ? size.height : pill
     // Older toasts tuck in behind the newest, and fan out on hover.
     const stacked = !expanded && index > 0
 
@@ -156,7 +184,7 @@ function ToastItem({
             initial={reducedMotion ? false : { opacity: 0, y: -24, scale: 0.6 }}
             animate={{
                 opacity: stacked ? 1 - index * 0.25 : 1,
-                y: stacked ? index * 9 : index * (PILL + 14) + index * 6,
+                y: stacked ? index * 9 : index * (pill + 14) + index * 6,
                 scale: stacked ? 1 - index * 0.05 : 1,
             }}
             exit={
@@ -180,7 +208,7 @@ function ToastItem({
             <motion.div
                 role="status"
                 className="pointer-events-auto relative"
-                initial={{ width: PILL, height: PILL }}
+                initial={{ width: pill, height: pill }}
                 animate={{ width, height }}
                 transition={reducedMotion ? { duration: 0 } : BODY_SPRING}
             >
@@ -194,21 +222,21 @@ function ToastItem({
                 >
                     <motion.span
                         className="absolute top-3 left-3 rounded-full bg-inverse shadow-xl"
-                        style={{ width: PILL, height: PILL }}
+                        style={{ width: pill, height: pill }}
                         animate={{ scale: open ? 1 : 1.06 }}
                         transition={reducedMotion ? { duration: 0 } : spring.bouncy}
                     />
                     <motion.span
                         className="absolute top-3 left-3 bg-inverse"
                         initial={{
-                            width: PILL,
-                            height: PILL,
-                            borderRadius: PILL / 2,
+                            width: pill,
+                            height: pill,
+                            borderRadius: pill / 2,
                         }}
                         animate={{
                             width,
                             height,
-                            borderRadius: Math.min(PILL / 2, height / 2, 22),
+                            borderRadius: Math.min(pill / 2, height / 2, 22),
                         }}
                         transition={reducedMotion ? { duration: 0 } : BODY_SPRING}
                     />
@@ -217,8 +245,8 @@ function ToastItem({
                 {/* Content, crisp above the shapes. */}
                 <motion.div
                     ref={content}
-                    className="absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2.5 py-[10px] pr-4 pl-[10px] text-on-inverse"
-                    style={{ minHeight: PILL }}
+                    className={contentClasses[toast.size]}
+                    style={{ minHeight: pill }}
                     animate={{ opacity: open ? 1 : 0 }}
                     transition={
                         reducedMotion
@@ -229,12 +257,12 @@ function ToastItem({
                               }
                     }
                 >
-                    <ToneIcon tone={toast.tone} reducedMotion={reducedMotion} />
+                    <ToneIcon tone={toast.tone} size={toast.size} reducedMotion={reducedMotion} />
                     <div className="flex min-w-0 flex-col py-px">
                         <AnimatePresence mode="popLayout" initial={false}>
                             <motion.span
                                 key={toast.title}
-                                className="text-subheadline leading-5 font-semibold"
+                                className={titleClasses[toast.size]}
                                 initial={
                                     reducedMotion
                                         ? false
@@ -264,7 +292,7 @@ function ToastItem({
                             </motion.span>
                         </AnimatePresence>
                         {toast.description && (
-                            <span className="text-footnote leading-snug text-on-inverse/70">
+                            <span className={descriptionClasses[toast.size]}>
                                 {toast.description}
                             </span>
                         )}
@@ -276,7 +304,7 @@ function ToastItem({
                                 toast.action?.onClick()
                                 toastApi.dismiss(toast.id)
                             }}
-                            className="ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3 py-1 text-footnote font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20"
+                            className={actionClasses[toast.size]}
                         >
                             {toast.action.label}
                         </button>
@@ -294,15 +322,20 @@ const toneColors: Record<ToastTone, string> = {
     loading: "bg-on-inverse/15 text-on-inverse",
 }
 
-function ToneIcon({ tone, reducedMotion }: { tone: ToastTone; reducedMotion: boolean }) {
+function ToneIcon({
+    tone,
+    size,
+    reducedMotion,
+}: {
+    tone: ToastTone
+    size: ToastSize
+    reducedMotion: boolean
+}) {
     return (
         <AnimatePresence mode="popLayout" initial={false}>
             <motion.span
                 key={tone}
-                className={cn(
-                    "flex size-5 shrink-0 items-center justify-center rounded-full",
-                    toneColors[tone]
-                )}
+                className={cn(toneIconClasses[size], toneColors[tone])}
                 initial={
                     reducedMotion
                         ? false

package/src/components/tooltip/tooltip-host.tsx

@@ -1,6 +1,15 @@
 import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import { spring } from "../../motion/transitions"
 import { useEffect, useId, useState } from "react"
+import { cn } from "../../lib/class-names"
+
+export type TooltipSize = "sm" | "md" | "lg"
+
+const tooltipClasses: Record<TooltipSize, string> = {
+    sm: "pointer-events-none fixed z-[80] max-w-[200px] rounded-md bg-inverse px-2 py-1 text-center text-caption2 leading-tight font-medium text-on-inverse shadow-lg",
+    md: "pointer-events-none fixed z-[80] max-w-[240px] rounded-md bg-inverse px-2.5 py-1.5 text-center text-caption leading-tight font-medium text-on-inverse shadow-lg",
+    lg: "pointer-events-none fixed z-[80] max-w-[280px] rounded-md bg-inverse px-3 py-2 text-center text-footnote leading-tight font-medium text-on-inverse shadow-lg",
+}
 
 interface Tip {
     text: string
@@ -8,6 +17,7 @@ interface Tip {
     y: number
     /** Shown above the element when there's no room below. */
     above: boolean
+    size: TooltipSize
 }
 
 const DELAY = 450
@@ -45,11 +55,14 @@ export function TooltipHost() {
             if (!text) return
             const rect = element.getBoundingClientRect()
             const above = rect.bottom + 40 > window.innerHeight
+            const sizeAttr = element.getAttribute("data-tooltip-size")
+            const size: TooltipSize = sizeAttr === "sm" || sizeAttr === "lg" ? sizeAttr : "md"
             setTip({
                 text,
                 x: rect.left + rect.width / 2,
                 y: above ? rect.top - MARGIN : rect.bottom + MARGIN,
                 above,
+                size,
             })
             lastShown = Date.now()
         }
@@ -121,7 +134,7 @@ export function TooltipHost() {
                     id={tooltipId}
                     key={tip.text + tip.x}
                     role="tooltip"
-                    className="pointer-events-none fixed z-[80] max-w-[240px] rounded-md bg-inverse px-2.5 py-1.5 text-center text-caption leading-tight font-medium text-on-inverse shadow-lg"
+                    className={cn(tooltipClasses[tip.size])}
                     style={{
                         left: Math.min(Math.max(tip.x, 128), window.innerWidth - 128),
                         top: tip.y,

package/src/styles/code-block.css

@@ -24,6 +24,18 @@
         user-select: none;
     }
     .passui-code-block:not([data-line-numbers]) pre { padding-inline-start: 1rem; }
+    .passui-code-block[data-size="sm"] pre {
+        padding-block: 0.75rem;
+        font-size: var(--text-caption);
+        line-height: 1.6;
+    }
+    .passui-code-block[data-size="sm"][data-line-numbers] .line::before { width: 2.5rem; margin-inline-end: 1rem; }
+    .passui-code-block[data-size="lg"] pre {
+        padding-block: 1.25rem;
+        font-size: var(--text-subheadline);
+        line-height: 1.8;
+    }
+    .passui-code-block[data-size="lg"][data-line-numbers] .line::before { width: 3.5rem; margin-inline-end: 1.5rem; }
     .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-light); background: transparent !important; }
     @media (prefers-color-scheme: dark) {
         .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-dark); }

package/src/styles/motion-controls.css

@@ -80,6 +80,10 @@
     .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-capsule { opacity: 1; transform: translateX(-50%) scaleX(1); }
     .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-digits { opacity: 0; }
     .passui-otp-check { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--color-on-accent); opacity: 0; pointer-events: none; }
+    .passui-one-time-code[data-size="sm"] .passui-otp-row { height: 2.5rem; }
+    .passui-one-time-code[data-size="sm"] .passui-otp-digit { font-size: var(--text-title); }
+    .passui-one-time-code[data-size="lg"] .passui-otp-row { height: 3.5rem; }
+    .passui-one-time-code[data-size="lg"] .passui-otp-digit { font-size: var(--text-title2); }
     .passui-one-time-code[data-status="success"] .passui-otp-check { opacity: 1; transition: opacity 160ms 240ms; }
     /* A wrong code shivers, then drains right to left. Selecting the single
        input afterward lets the next keystroke replace it without a trap. */
@@ -129,6 +133,10 @@
             calc(100% - var(--slosh-lean, 0px)) 100%, 0 100%);
     }
     .passui-slosh-track:dir(rtl) .passui-slosh-fill { transform: scaleX(-1); }
+    .passui-slosh-slider[data-size="sm"] .passui-slosh-track { height: 2rem; }
+    .passui-slosh-slider[data-size="sm"] .passui-slosh-knob { top: 4px; bottom: 4px; }
+    .passui-slosh-slider[data-size="lg"] .passui-slosh-track { height: 3rem; }
+    .passui-slosh-slider[data-size="lg"] .passui-slosh-knob { top: 8px; bottom: 8px; width: 4px; margin-inline-start: -2px; }
     .passui-slosh-knob {
         position: absolute;
         top: 6px;