@boyernick/standard-ui-react 0.1.1-canary.2 → 0.1.1-canary.22

package/src/timeline.tsx

@@ -0,0 +1,321 @@
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import {
+  createContext,
+  type ComponentProps,
+  type KeyboardEvent,
+  type WheelEvent,
+  useContext,
+} from "react"
+import { cn } from "./lib/cn"
+
+const timelineVariants = cva("group/timeline relative text-fg-primary", {
+  variants: {
+    orientation: {
+      vertical: "w-full",
+      horizontal:
+        "w-full snap-x snap-proximity overflow-x-auto overscroll-x-contain rounded-xl border border-border-primary bg-surface px-5 py-6 scroll-smooth focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 focus-visible:outline-none",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineTrackVariants = cva("relative m-0 list-none p-0", {
+  variants: {
+    orientation: {
+      vertical: "ml-1.5 border-l border-dashed border-border-primary",
+      horizontal:
+        "grid min-w-max auto-cols-64 grid-flow-col before:absolute before:inset-x-0 before:top-10 before:border-t before:border-dashed before:border-border-primary before:content-['']",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineItemVariants = cva("relative", {
+  variants: {
+    orientation: {
+      vertical: "pb-8 pl-7 last:pb-0",
+      horizontal: "w-64 snap-start pt-16 pr-8 last:pr-0",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineMarkerVariants = cva(
+  "absolute z-[1] size-2.5 rounded-full border-2 border-surface shadow-hairline",
+  {
+    variants: {
+      orientation: {
+        vertical: "top-1 left-0 -translate-x-1/2",
+        horizontal: "top-10 left-0 -translate-y-1/2",
+      },
+      tone: {
+        neutral: "bg-fg-tertiary",
+        accent: "bg-brand-primary",
+        info: "bg-status-info",
+        success: "bg-status-success",
+        warning: "bg-status-warning",
+        critical: "bg-status-critical",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+      tone: "neutral",
+    },
+  },
+)
+
+const timelineTimeVariants = cva(
+  "text-xs-strong block text-fg-tertiary tabular-nums",
+  {
+    variants: {
+      orientation: {
+        vertical: "mb-1",
+        horizontal: "absolute top-0 left-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)
+
+type TimelineOrientation = "horizontal" | "vertical"
+
+const TimelineContext = createContext<TimelineOrientation>("vertical")
+
+export type TimelineProps = ComponentProps<"div"> &
+  VariantProps<typeof timelineVariants> & {
+    /** Distance moved by the horizontal timeline's arrow keys. */
+    scrollStep?: number
+  }
+
+export type TimelineTrackProps = ComponentProps<"ol">
+export type TimelineItemProps = ComponentProps<"li">
+export type TimelineMarkerProps = ComponentProps<"span"> &
+  VariantProps<typeof timelineMarkerVariants>
+export type TimelineTimeProps = ComponentProps<"time">
+export type TimelineContentProps = ComponentProps<"div">
+export type TimelineTitleProps = ComponentProps<"h3">
+export type TimelineDescriptionProps = ComponentProps<"p">
+export type TimelineMediaProps = ComponentProps<"div">
+
+export const Timeline = ({
+  orientation = "vertical",
+  scrollStep = 256,
+  className,
+  children,
+  tabIndex,
+  onKeyDown,
+  onWheel,
+  "aria-label": ariaLabel = "Timeline",
+  ...props
+}: TimelineProps) => {
+  const resolvedOrientation = orientation ?? "vertical"
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event)
+    if (
+      event.defaultPrevented ||
+      resolvedOrientation !== "horizontal" ||
+      event.target !== event.currentTarget
+    ) {
+      return
+    }
+
+    const node = event.currentTarget
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches
+    const behavior = prefersReducedMotion ? "auto" : "smooth"
+
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault()
+      node.scrollBy({
+        left: event.key === "ArrowRight" ? scrollStep : -scrollStep,
+        behavior,
+      })
+    }
+
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault()
+      node.scrollTo({
+        left: event.key === "Home" ? 0 : node.scrollWidth,
+        behavior,
+      })
+    }
+  }
+
+  const handleWheel = (event: WheelEvent<HTMLDivElement>) => {
+    onWheel?.(event)
+    if (
+      event.defaultPrevented ||
+      resolvedOrientation !== "horizontal" ||
+      Math.abs(event.deltaX) >= Math.abs(event.deltaY)
+    ) {
+      return
+    }
+
+    const node = event.currentTarget
+    const maxScrollLeft = node.scrollWidth - node.clientWidth
+    const canScroll =
+      event.deltaY > 0 ? node.scrollLeft < maxScrollLeft : node.scrollLeft > 0
+
+    if (canScroll) {
+      event.preventDefault()
+      node.scrollLeft += event.deltaY
+    }
+  }
+
+  return (
+    <TimelineContext.Provider value={resolvedOrientation}>
+      <div
+        data-slot="timeline"
+        data-orientation={resolvedOrientation}
+        role="region"
+        aria-label={ariaLabel}
+        tabIndex={
+          tabIndex ?? (resolvedOrientation === "horizontal" ? 0 : undefined)
+        }
+        className={cn(
+          timelineVariants({ orientation: resolvedOrientation }),
+          className,
+        )}
+        onKeyDown={handleKeyDown}
+        onWheel={handleWheel}
+        {...props}
+      >
+        {children}
+      </div>
+    </TimelineContext.Provider>
+  )
+}
+
+export const TimelineTrack = ({
+  className,
+  ...props
+}: TimelineTrackProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <ol
+      data-slot="timeline-track"
+      data-orientation={orientation}
+      className={cn(timelineTrackVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+export const TimelineItem = ({
+  className,
+  ...props
+}: TimelineItemProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <li
+      data-slot="timeline-item"
+      data-orientation={orientation}
+      className={cn(timelineItemVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+export const TimelineMarker = ({
+  className,
+  tone,
+  ...props
+}: TimelineMarkerProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <span
+      data-slot="timeline-marker"
+      aria-hidden
+      className={cn(
+        timelineMarkerVariants({ orientation, tone }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const TimelineTime = ({
+  className,
+  ...props
+}: TimelineTimeProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <time
+      data-slot="timeline-time"
+      className={cn(timelineTimeVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+export const TimelineContent = ({
+  className,
+  ...props
+}: TimelineContentProps) => (
+  <div
+    data-slot="timeline-content"
+    className={cn("min-w-0", className)}
+    {...props}
+  />
+)
+
+export const TimelineTitle = ({
+  className,
+  ...props
+}: TimelineTitleProps) => (
+  <h3
+    data-slot="timeline-title"
+    className={cn("text-sm-strong text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const TimelineDescription = ({
+  className,
+  ...props
+}: TimelineDescriptionProps) => (
+  <p
+    data-slot="timeline-description"
+    className={cn("text-sm mt-1 leading-relaxed text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const TimelineMedia = ({
+  className,
+  ...props
+}: TimelineMediaProps) => (
+  <div
+    data-slot="timeline-media"
+    className={cn(
+      "mt-4 overflow-hidden rounded-xl border border-border-primary bg-background-secondary [&>img]:block [&>img]:aspect-4/3 [&>img]:w-full [&>img]:object-cover",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export {
+  timelineVariants,
+  timelineItemVariants,
+  timelineMarkerVariants,
+  timelineTimeVariants,
+  timelineTrackVariants,
+}

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} />
 )
@@ -28,35 +41,150 @@ 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 edge.
     className={cn(
-      "fixed right-4 bottom-4 z-[100] flex w-[min(100vw-2rem,24rem)] flex-col outline-none",
+      "fixed top-8 left-1/2 z-[100] w-[min(100vw-2rem,28rem)] -translate-x-1/2 outline-none",
       className,
     )}
     {...props}
   />
 )
 
-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(
-      "relative z-[calc(1000-var(--toast-index))] mb-2 box-border w-full rounded-xl border border-border-primary bg-surface p-4 shadow-lg outline-none",
-      "h-[var(--toast-frontmost-height,var(--toast-height))]",
-      "transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none",
-      "data-starting-style:opacity-0 data-starting-style:translate-y-2",
-      "data-ending-style:opacity-0 data-ending-style:translate-y-2",
-      "data-expanded:h-[var(--toast-height)] data-expanded:translate-y-[var(--toast-offset-y)]",
-      "data-[type=error]:border-destructive/40",
-      "data-[type=success]:border-border-primary",
-      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-1 overflow-hidden transition-opacity duration-150",
+      "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,
     )}
@@ -66,7 +194,7 @@ export const ToastContent = ({ className, ...props }: ToastContentProps) => (
 
 export const ToastTitle = ({ className, ...props }: ToastTitleProps) => (
   <BaseToast.Title
-    className={cn("text-sm-strong pr-8 text-fg-primary", className)}
+    className={cn("text-sm-strong text-fg-primary group-data-[variant=inverted]/toast:text-fg-inverted", className)}
     {...props}
   />
 )
@@ -76,7 +204,10 @@ export const ToastDescription = ({
   ...props
 }: ToastDescriptionProps) => (
   <BaseToast.Description
-    className={cn("text-sm leading-relaxed text-fg-secondary", className)}
+    className={cn(
+      "text-sm text-fg-secondary group-data-[variant=inverted]/toast:text-fg-inverted-secondary",
+      className,
+    )}
     {...props}
   />
 )
@@ -84,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}
@@ -100,15 +232,16 @@ export const ToastClose = ({
 }: ToastCloseProps) => (
   <BaseToast.Close
     className={cn(
-      "absolute top-3 right-3 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}
   >
     {children ?? (
-      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
+      <IconCrossSmall size={18} className="size-4.5" aria-hidden />
     )}
   </BaseToast.Close>
 )

package/src/tooltip.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip"
+import { cva, type VariantProps } from "class-variance-authority"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
@@ -12,7 +13,8 @@ export type TooltipPortalProps = ComponentProps<typeof BaseTooltip.Portal>
 export type TooltipPositionerProps = ComponentProps<
   typeof BaseTooltip.Positioner
 >
-export type TooltipPopupProps = ComponentProps<typeof BaseTooltip.Popup>
+export type TooltipPopupProps = ComponentProps<typeof BaseTooltip.Popup> &
+  VariantProps<typeof tooltipPopupVariants>
 
 export const TooltipProvider = (props: TooltipProviderProps) => (
   <BaseTooltip.Provider {...props} />
@@ -43,13 +45,51 @@ export const TooltipPositioner = ({
   />
 )
 
-export const TooltipPopup = ({ className, ...props }: TooltipPopupProps) => (
+// Neither variant carries a border — `shadow-md` already composes
+// `--elevation-hairline`, so one would stack a second edge. That hairline is
+// what gives the default popup its edge against a same-coloured page.
+const tooltipPopupVariants = cva(
+  cn(
+    "z-50 max-w-xs rounded-md px-2.5 py-1 text-xs shadow-md outline-none",
+    // A trailing keycap already carries its own inset, so the full 10px beside
+    // it reads as a gap rather than padding — but sitting flush on the vertical
+    // inset crowds the corner, so it gets a touch more than that.
+    //
+    // Laying the row out as flex is what centres it. On a text line the keycap
+    // is an inline-flex aligned `middle`, which sets its centre against the
+    // baseline plus half an x-height rather than the line's centre — at 16px it
+    // hung 1.18px low, leaving 6.36px above and 4px below. Scoped to `has-[kbd]`
+    // because making every popup a flex container would turn a multi-child
+    // tooltip from stacked blocks into a row.
+    "has-[kbd]:flex has-[kbd]:items-center has-[kbd]:pr-1.5",
+  ),
+  {
+    variants: {
+      variant: {
+        // Sits on the page's own surface: white in light mode, dark in dark.
+        default: "bg-surface text-fg-primary",
+        // Flipped against the page — dark in light mode, light in dark — for
+        // a hint that should read as separate from what it floats over.
+        inverted: "bg-surface-inverted text-fg-inverted",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+)
+
+export const TooltipPopup = ({
+  className,
+  variant,
+  ...props
+}: TooltipPopupProps) => (
   <BaseTooltip.Popup
     className={cn(
-      "z-50 max-w-xs rounded-md bg-surface-inverted px-2.5 py-1 text-xs text-fg-inverted shadow-md outline-none",
+      tooltipPopupVariants({ variant }),
       motion.popupAnchor,
       className,
     )}
     {...props}
   />
 )
+
+export { tooltipPopupVariants }