@boyernick/standard-ui-react 0.1.1-canary.14 → 0.1.1-canary.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.1.1-canary.14",
+  "version": "0.1.1-canary.15",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/index.ts

@@ -606,6 +606,8 @@ export {
   ToastViewport,
   ToastRoot,
   ToastContent,
+  ToastIcon,
+  toastRootVariants,
   ToastTitle,
   ToastDescription,
   ToastAction,
@@ -619,6 +621,8 @@ export {
   type ToastViewportProps,
   type ToastRootProps,
   type ToastContentProps,
+  type ToastIconProps,
+  type ToastType,
   type ToastTitleProps,
   type ToastDescriptionProps,
   type ToastActionProps,

package/src/text-animate.tsx

@@ -8,6 +8,11 @@ import {
 } from "react"
 import { cn } from "./lib/cn"
 
+/** How many glyphs are scrambling at once. The window travels the line; behind
+ *  it the text is settled, ahead of it nothing is drawn yet. 8 is the reference
+ *  default from baffle.js, which this effect follows. */
+const DECODE_WINDOW = 8
+
 const DECODE_GLYPHS =
   "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789#@$%&*"
 
@@ -46,6 +51,7 @@ export const TextAnimate = ({
   useEffect(() => {
     let cancelled = false
     let timeoutId: ReturnType<typeof setTimeout> | undefined
+    let frameId: number | undefined
 
     const start = () => {
       if (
@@ -82,30 +88,59 @@ export const TextAnimate = ({
         return
       }
 
-      // decode
-      setOutput(
-        chars.map(() => DECODE_GLYPHS[Math.floor(Math.random() * DECODE_GLYPHS.length)]).join(""),
-      )
-      let revealed = 0
-      const tick = () => {
+      // Decode follows baffle.js's `reveal`, which is the reference for this
+      // effect: a fixed-width window of scrambled glyphs travels left to
+      // right, the real text sits behind it, and nothing at all is drawn ahead
+      // of it — so the line grows in with a churning leading edge rather than
+      // resolving out of a full-width block of noise.
+      //
+      // It runs on rAF with a time accumulator rather than `setTimeout(speed)`.
+      // A 28ms timer does not divide into a ~16.7ms frame, so steps land on
+      // uneven frames and the text visibly stutters; accumulating elapsed time
+      // keeps the reference's cadence while landing each step on a real frame.
+      const slots = chars.reduce<number[]>((acc, char, index) => {
+        if (char !== " ") acc.push(index)
+        return acc
+      }, [])
+
+      // The window starts off the front of the line so the first glyph is
+      // already scrambling as it arrives.
+      let position = -DECODE_WINDOW
+      let previousStep = -Infinity
+      const startedAt = performance.now()
+
+      const frame = (now: number) => {
         if (cancelled) return
-        revealed += 1
-        const next = chars
-          .map((char, index) => {
-            if (char === " ") return " "
-            if (index < revealed) return char
-            return DECODE_GLYPHS[Math.floor(Math.random() * DECODE_GLYPHS.length)]
-          })
-          .join("")
-        setOutput(next)
-        if (revealed < chars.length) {
-          timeoutId = setTimeout(tick, speed)
-        } else {
-          setOutput(text)
-          setDone(true)
+
+        const step = Math.floor((now - startedAt) / speed) - DECODE_WINDOW
+        if (step !== previousStep) {
+          previousStep = step
+          position = step
+
+          if (position > slots.length) {
+            setOutput(text)
+            setDone(true)
+            return
+          }
+
+          const next = [...chars]
+          for (let p = Math.max(position, 0); p < slots.length; p += 1) {
+            next[slots[p]] =
+              p < position + DECODE_WINDOW
+                ? DECODE_GLYPHS[
+                    Math.floor(Math.random() * DECODE_GLYPHS.length)
+                  ]
+                : ""
+          }
+          setOutput(next.join(""))
         }
+
+        frameId = requestAnimationFrame(frame)
       }
-      timeoutId = setTimeout(tick, speed)
+
+      setOutput("")
+      frameId = requestAnimationFrame(frame)
+      return
     }
 
     timeoutId = setTimeout(start, delay)
@@ -113,6 +148,7 @@ export const TextAnimate = ({
     return () => {
       cancelled = true
       if (timeoutId) clearTimeout(timeoutId)
+      if (frameId) cancelAnimationFrame(frameId)
     }
   }, [chars, delay, effect, replay, speed, text])
 

package/src/toast.tsx

@@ -1,15 +1,24 @@
 "use client"
 
 import { Toast as BaseToast } from "@base-ui/react/toast"
+import { cva, type VariantProps } from "class-variance-authority"
 import type { ComponentProps } from "react"
-import { IconCrossSmall } from "./icons"
+import {
+  IconCircleCheck,
+  IconCircleInfo,
+  IconCrossSmall,
+  IconExclamationCircle,
+  IconExclamationTriangle,
+} from "./icons"
+import { Spinner } from "./spinner"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
 
 export type ToastProviderProps = ComponentProps<typeof BaseToast.Provider>
 export type ToastPortalProps = ComponentProps<typeof BaseToast.Portal>
 export type ToastViewportProps = ComponentProps<typeof BaseToast.Viewport>
-export type ToastRootProps = ComponentProps<typeof BaseToast.Root>
+export type ToastRootProps = ComponentProps<typeof BaseToast.Root> &
+  VariantProps<typeof toastRootVariants>
 export type ToastContentProps = ComponentProps<typeof BaseToast.Content>
 export type ToastTitleProps = ComponentProps<typeof BaseToast.Title>
 export type ToastDescriptionProps = ComponentProps<typeof BaseToast.Description>
@@ -18,6 +27,10 @@ export type ToastCloseProps = ComponentProps<typeof BaseToast.Close>
 export type ToastPositionerProps = ComponentProps<typeof BaseToast.Positioner>
 export type ToastArrowProps = ComponentProps<typeof BaseToast.Arrow>
 
+/** The types that carry a glyph. Anything else renders no icon. */
+export type ToastType = "success" | "error" | "warning" | "info" | "loading"
+export type ToastIconProps = ComponentProps<"span"> & { type?: string }
+
 export const ToastProvider = (props: ToastProviderProps) => (
   <BaseToast.Provider {...props} />
 )
@@ -29,54 +42,149 @@ export const ToastPortal = (props: ToastPortalProps) => (
 export const ToastViewport = ({ className, ...props }: ToastViewportProps) => (
   <BaseToast.Viewport
     // No flex column: the toasts inside are absolutely positioned so they pile
-    // up as a stack. In flow they would march down past the bottom edge.
+    // up as a stack. In flow they would march down past the edge.
     className={cn(
-      "fixed right-4 bottom-4 z-[100] w-[min(100vw-2rem,24rem)] outline-none",
+      "fixed top-8 left-1/2 z-[100] w-[min(100vw-2rem,28rem)] -translate-x-1/2 outline-none",
       className,
     )}
     {...props}
   />
 )
 
-/** Each toast is pinned to the bottom of the viewport and lifted by its own
- *  index, so the stack reads as a pile of cards rather than a list: the one
- *  behind peeks out by `--peek` and sits a step smaller. Hovering the viewport
- *  sets `data-expanded`, which fans them out to their real heights. */
-export const ToastRoot = ({ className, ...props }: ToastRootProps) => (
+/** Each toast is pinned to the top of the viewport and pushed down by its own
+ *  index, so the stack reads as a pile of cards: the one behind peeks out below
+ *  by `--peek` and sits a step smaller. Hovering the viewport sets
+ *  `data-expanded`, which fans them out to their real heights.
+ *
+ *  `origin-top` is what keeps the arithmetic simple — scaling a card toward its
+ *  own top edge leaves that edge where it is, so the peek is the only offset
+ *  the collapsed stack needs. */
+const toastRootVariants = cva(
+  cn(
+    "absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] box-border w-full origin-top",
+    "[--gap:0.625rem] [--peek:0.875rem]",
+    "[--scale:calc(max(0,1-(var(--toast-index)*0.05)))]",
+    "[--height:var(--toast-frontmost-height,var(--toast-height))]",
+    "[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y,0px))]",
+    // A row, not an overlay: the action and the close sit inline at the right,
+    // so the close cannot be absolutely positioned over reserved padding.
+    "flex items-start gap-2 rounded-xl border py-2.5 pr-2 pl-4 shadow-lg outline-none select-none",
+    "h-[var(--height)] data-expanded:h-[var(--toast-height)]",
+    "[transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(calc(var(--toast-swipe-movement-y,0px)+(var(--toast-index)*var(--peek))))_scale(var(--scale))]",
+    "data-expanded:[transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(var(--offset-y))]",
+    // Bridges the gap between cards so crossing it does not collapse the fan.
+    "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+    "transition-[transform,opacity,height] duration-[var(--duration-md)] ease-enter motion-reduce:transition-none",
+    // Anchored to the top, so they arrive and leave upwards.
+    "data-starting-style:[transform:translateY(-150%)]",
+    "data-ending-style:opacity-0 data-limited:opacity-0",
+    "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]",
+  ),
+  {
+    variants: {
+      variant: {
+        // The page's own surface. The border stays transparent so the edge is
+        // `shadow-lg`'s hairline, the same one every dropdown carries.
+        default: "border-transparent bg-surface text-fg-primary",
+        // Flipped against the page. Here the hairline is invisible — a black
+        // line on a near-black card — so the edge is drawn with the inverted
+        // foreground, which flips with the theme alongside the surface.
+        inverted: "border-fg-inverted/10 bg-surface-inverted text-fg-inverted",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+)
+
+/** Each toast is pinned to the top of the viewport and pushed down by its own
+ *  index, so the stack reads as a pile of cards: the one behind peeks out below
+ *  by `--peek` and sits a step smaller. Hovering the viewport sets
+ *  `data-expanded`, which fans them out to their real heights.
+ *
+ *  `origin-top` is what keeps the arithmetic simple — scaling a card toward its
+ *  own top edge leaves that edge where it is, so the peek is the only offset
+ *  the collapsed stack needs.
+ *
+ *  The variant is published as `data-variant` rather than passed down: the
+ *  title, description, action, close and icon all have to follow the surface,
+ *  and a data attribute lets each one carry its own pair of rules instead of
+ *  every caller threading a prop through five components. */
+export const ToastRoot = ({
+  className,
+  variant = "default",
+  ...props
+}: ToastRootProps) => (
   <BaseToast.Root
-    className={cn(
-      "absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] box-border w-full origin-bottom",
-      "[--gap:0.625rem] [--peek:0.75rem]",
-      "[--scale:calc(max(0,1-(var(--toast-index)*0.05)))] [--shrink:calc(1-var(--scale))]",
-      "[--height:var(--toast-frontmost-height,var(--toast-height))]",
-      "[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y,0px))]",
-      // No border: `shadow-lg` composes `--elevation-hairline`, the same edge the
-      // dropdowns carry — theme-aware and 0.5px on hi-dpi. A border on top of it
-      // stacked a second, darker line. The error type tints that edge with a
-      // ring, which also sits outside the box model so the height never shifts.
-      "rounded-xl bg-surface px-3.5 py-3 shadow-lg outline-none select-none",
-      // Collapsed, every toast behind the front one is scaled down and shifted
-      // up; `--shrink` cancels the gap that scaling opens at the bottom edge.
-      "h-[var(--height)] data-expanded:h-[var(--toast-height)]",
-      "[transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(calc(var(--toast-swipe-movement-y,0px)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]",
-      "data-expanded:[transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(var(--offset-y))]",
-      // Bridges the gap between cards so crossing it does not collapse the fan.
-      "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
-      "transition-[transform,opacity,height] duration-[var(--duration-md)] ease-enter motion-reduce:transition-none",
-      "data-starting-style:[transform:translateY(150%)]",
-      "data-ending-style:opacity-0 data-limited:opacity-0",
-      "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
-      "data-[type=error]:ring-1 data-[type=error]:ring-destructive/40",
-      className,
-    )}
+    data-variant={variant}
+    className={cn("group/toast", toastRootVariants({ variant }), className)}
     {...props}
   />
 )
 
+export { toastRootVariants }
+
+const toastGlyphs = {
+  success: {
+    Icon: IconCircleCheck,
+    tone: `text-status-success group-data-[variant=inverted]/toast:text-status-success-inverted`,
+  },
+  error: {
+    Icon: IconExclamationCircle,
+    tone: `text-status-critical group-data-[variant=inverted]/toast:text-status-critical-inverted`,
+  },
+  warning: {
+    Icon: IconExclamationTriangle,
+    tone: `text-status-warning group-data-[variant=inverted]/toast:text-status-warning-inverted`,
+  },
+  info: {
+    Icon: IconCircleInfo,
+    tone: `text-status-info group-data-[variant=inverted]/toast:text-status-info-inverted`,
+  },
+} as const
+
+/** The glyph tracks the title, not the block. The row is `items-start` so the
+ *  glyph and the content column measure from the same top edge, and `mt-0.5`
+ *  is the half-leading above a 14px title in a 20px line — which centres the
+ *  16px glyph on the title whether or not a description follows it.
+ *
+ *  The margin is on both axes, not just the top. Every item beside the content
+ *  column is collapsed to a 20px outer box — the height of the title's line —
+ *  so it centres on that line while contributing nothing extra to the row. A
+ *  top-only offset lines the item up but leaves its full height in the box, and
+ *  the tallest control then stretches the toast downward and everything reads
+ *  high. Hit areas are untouched: the boxes overflow, they do not shrink. */
+const ICON_ALIGN = "my-0.5 flex shrink-0"
+
+/** The glyph for a toast's type. Each tone carries both surfaces: the plain
+ *  status tokens are tuned for the page, and the `-inverted` pair for a card
+ *  that flips against it. Pass `toast.type` from the render loop — Base UI
+ *  gives no way to read the toast from inside the root. */
+export const ToastIcon = ({ type, className, ...props }: ToastIconProps) => {
+  if (type === "loading") {
+    return (
+      <span className={cn(ICON_ALIGN, className)} {...props}>
+        <Spinner size="sm" />
+      </span>
+    )
+  }
+
+  const glyph = toastGlyphs[type as keyof typeof toastGlyphs]
+  if (!glyph) return null
+
+  return (
+    <span
+      className={cn(ICON_ALIGN, glyph.tone, className)}
+      {...props}
+    >
+      <glyph.Icon size={16} className="size-4" aria-hidden />
+    </span>
+  )
+}
+
 export const ToastContent = ({ className, ...props }: ToastContentProps) => (
   <BaseToast.Content
     className={cn(
-      "flex flex-col gap-0.5 overflow-hidden transition-opacity duration-[var(--duration-sm)]",
+      "flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden transition-opacity duration-[var(--duration-sm)]",
       "data-behind:pointer-events-none data-behind:opacity-0 data-expanded:data-behind:opacity-100",
       className,
     )}
@@ -86,7 +194,7 @@ export const ToastContent = ({ className, ...props }: ToastContentProps) => (
 
 export const ToastTitle = ({ className, ...props }: ToastTitleProps) => (
   <BaseToast.Title
-    className={cn("text-xs-strong pr-10 text-fg-primary", className)}
+    className={cn("text-sm-strong text-fg-primary group-data-[variant=inverted]/toast:text-fg-inverted", className)}
     {...props}
   />
 )
@@ -96,7 +204,10 @@ export const ToastDescription = ({
   ...props
 }: ToastDescriptionProps) => (
   <BaseToast.Description
-    className={cn("text-xs text-fg-secondary", className)}
+    className={cn(
+      "text-sm text-fg-secondary group-data-[variant=inverted]/toast:text-fg-inverted-secondary",
+      className,
+    )}
     {...props}
   />
 )
@@ -104,9 +215,10 @@ export const ToastDescription = ({
 export const ToastAction = ({ className, ...props }: ToastActionProps) => (
   <BaseToast.Action
     className={cn(
-      "mt-2 inline-flex h-8 cursor-pointer items-center justify-center rounded-md px-2.5 text-sm text-fg-primary outline-none",
+      "text-xs -my-1 inline-flex h-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-border-secondary px-2.5 text-fg-primary outline-none",
       motion.colors,
-      "hover:bg-background-tertiary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      "hover:bg-background-tertiary focus-visible:ring-2 focus-visible:ring-ring/40",
+      "group-data-[variant=inverted]/toast:border-fg-inverted/15 group-data-[variant=inverted]/toast:text-fg-inverted group-data-[variant=inverted]/toast:hover:bg-fg-inverted/10 group-data-[variant=inverted]/toast:focus-visible:ring-fg-inverted/50",
       className,
     )}
     {...props}
@@ -120,9 +232,10 @@ export const ToastClose = ({
 }: ToastCloseProps) => (
   <BaseToast.Close
     className={cn(
-      "absolute top-2.5 right-2.5 inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-fg-tertiary outline-none",
+      "-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-fg-tertiary outline-none",
       motion.colors,
-      "hover:bg-background-tertiary hover:text-fg-primary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      "hover:bg-background-tertiary hover:text-fg-primary focus-visible:ring-2 focus-visible:ring-ring/40",
+      "group-data-[variant=inverted]/toast:text-fg-inverted/50 group-data-[variant=inverted]/toast:hover:bg-fg-inverted/10 group-data-[variant=inverted]/toast:hover:text-fg-inverted group-data-[variant=inverted]/toast:focus-visible:ring-fg-inverted/50",
       className,
     )}
     {...props}