@boyernick/standard-ui-react 0.1.1-canary.3 → 0.1.1-canary.34

package/src/timeline.tsx

@@ -0,0 +1,378 @@
+"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"
+import { focusRing, focusRingBorder } from "./lib/focus"
+import { motion } from "./lib/motion"
+
+const timelineVariants = cva("group/timeline relative text-fg-primary", {
+  variants: {
+    orientation: {
+      vertical: "w-full",
+      horizontal: cn(
+        "w-full min-h-0 overflow-x-auto overscroll-x-contain scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus-visible:rounded-md",
+        focusRingBorder,
+        focusRing,
+      ),
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineTrackVariants = cva("relative m-0 list-none p-0", {
+  variants: {
+    orientation: {
+      vertical:
+        "before:pointer-events-none before:absolute before:top-0 before:bottom-0 before:left-[calc(4.5rem+0.75rem+0.5rem)] before:w-px before:-translate-x-1/2 before:border-l before:border-dashed before:border-border-primary before:content-['']",
+      horizontal:
+        "flex w-max items-start before:pointer-events-none before:absolute before:inset-x-0 before:top-[var(--timeline-rail)] before:border-t before:border-dashed before:border-border-primary before:content-['']",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineItemVariants = cva("group/timeline-item relative", {
+  variants: {
+    orientation: {
+      vertical: "grid grid-cols-[4.5rem_1rem_minmax(0,1fr)] gap-x-3 pb-8 last:pb-0",
+      horizontal:
+        "w-[min(18rem,70vw)] shrink-0 pr-10 last:pr-0 [--timeline-rail:2.75rem]",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineMarkerVariants = cva("z-[1] shrink-0", {
+  variants: {
+    orientation: {
+      vertical: "col-start-2 row-start-1 mt-2 justify-self-center",
+      horizontal:
+        "absolute top-[var(--timeline-rail)] left-0 -translate-y-1/2",
+    },
+    shape: {
+      tick: "bg-fg-quaternary group-hover/timeline-item:bg-fg-tertiary",
+      dot: "size-2.5 rounded-full border-2 border-background-primary shadow-hairline",
+    },
+    tone: {
+      neutral: "",
+      accent: "",
+      info: "",
+      success: "",
+      warning: "",
+      critical: "",
+    },
+  },
+  compoundVariants: [
+    {
+      shape: "tick",
+      orientation: "vertical",
+      class: "h-px w-2.5",
+    },
+    {
+      shape: "tick",
+      orientation: "horizontal",
+      class: "h-2.5 w-px",
+    },
+    { shape: "tick", tone: "neutral", class: "bg-fg-quaternary" },
+    { shape: "tick", tone: "accent", class: "bg-brand-primary" },
+    { shape: "tick", tone: "info", class: "bg-status-info" },
+    { shape: "tick", tone: "success", class: "bg-status-success" },
+    { shape: "tick", tone: "warning", class: "bg-status-warning" },
+    { shape: "tick", tone: "critical", class: "bg-status-critical" },
+    { shape: "dot", tone: "neutral", class: "bg-fg-tertiary" },
+    { shape: "dot", tone: "accent", class: "bg-brand-primary" },
+    { shape: "dot", tone: "info", class: "bg-status-info" },
+    { shape: "dot", tone: "success", class: "bg-status-success" },
+    { shape: "dot", tone: "warning", class: "bg-status-warning" },
+    { shape: "dot", tone: "critical", class: "bg-status-critical" },
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    shape: "tick",
+    tone: "neutral",
+  },
+})
+
+const timelineTimeVariants = cva(
+  cn(
+    "text-sm-strong block tabular-nums text-fg-secondary",
+    motion.colors,
+    "group-hover/timeline-item:text-fg-primary",
+  ),
+  {
+    variants: {
+      orientation: {
+        vertical: "col-start-1 row-start-1 pt-0.5 text-right leading-5",
+        horizontal: "mb-6 h-5 leading-5",
+      },
+    },
+    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 }),
+        orientation === "horizontal" && "[--timeline-rail:2.75rem]",
+        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,
+  shape,
+  ...props
+}: TimelineMarkerProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <span
+      data-slot="timeline-marker"
+      aria-hidden
+      className={cn(
+        timelineMarkerVariants({ orientation, shape, tone }),
+        motion.colors,
+        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) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <div
+      data-slot="timeline-content"
+      className={cn(
+        "min-w-0",
+        orientation === "vertical" && "col-start-3 row-start-1",
+        orientation === "horizontal" && "pt-6",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const TimelineTitle = ({
+  className,
+  ...props
+}: TimelineTitleProps) => (
+  <h3
+    data-slot="timeline-title"
+    className={cn(
+      "text-sm-strong text-fg-primary",
+      motion.colors,
+      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 ring-1 ring-border-primary [&>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,34 @@
 "use client"
 
 import { Toast as BaseToast } from "@base-ui/react/toast"
-import type { ComponentProps } from "react"
-import { IconCrossSmall } from "./icons"
+import { cva, type VariantProps } from "class-variance-authority"
+import {
+  createContext,
+  useContext,
+  type ComponentProps,
+} from "react"
+import {
+  IconCircleCheck,
+  IconCircleInfo,
+  IconCrossSmall,
+  IconExclamationCircle,
+  IconExclamationTriangle,
+} from "./icons"
+import { Spinner } from "./spinner"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 import { motion } from "./lib/motion"
 
+export type ToastPlacement = "top-center" | "bottom-right"
+
+const ToastPlacementContext = createContext<ToastPlacement>("top-center")
+
 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 ToastViewportProps = ComponentProps<typeof BaseToast.Viewport> &
+  VariantProps<typeof toastViewportVariants>
+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 +37,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} />
 )
@@ -26,37 +49,182 @@ export const ToastPortal = (props: ToastPortalProps) => (
   <BaseToast.Portal {...props} />
 )
 
-export const ToastViewport = ({ className, ...props }: ToastViewportProps) => (
-  <BaseToast.Viewport
-    className={cn(
-      "fixed right-4 bottom-4 z-[100] flex w-[min(100vw-2rem,24rem)] flex-col outline-none",
-      className,
-    )}
-    {...props}
-  />
+export const toastViewportVariants = cva(
+  // 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.
+  "fixed z-[100] w-[min(100vw-2rem,28rem)] outline-none",
+  {
+    variants: {
+      placement: {
+        "top-center": "top-8 left-1/2 -translate-x-1/2",
+        "bottom-right": "right-4 bottom-4 sm:right-8 sm:bottom-8",
+      },
+    },
+    defaultVariants: { placement: "top-center" },
+  },
 )
 
-export const ToastRoot = ({ className, ...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-[var(--duration-md)] ease-enter 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,
-    )}
-    {...props}
-  />
+export const ToastViewport = ({
+  className,
+  placement = "top-center",
+  children,
+  ...props
+}: ToastViewportProps) => (
+  <ToastPlacementContext.Provider value={placement ?? "top-center"}>
+    <BaseToast.Viewport
+      data-placement={placement}
+      className={cn(toastViewportVariants({ placement }), className)}
+      {...props}
+    >
+      {children}
+    </BaseToast.Viewport>
+  </ToastPlacementContext.Provider>
+)
+
+/** Shared chrome. Placement owns where the stack anchors and how cards move. */
+const toastRootVariants = cva(
+  cn(
+    "absolute right-0 left-0 z-[calc(1000-var(--toast-index))] box-border w-full",
+    "[--gap:0.625rem] [--peek:0.875rem]",
+    "[--scale:calc(max(0,1-(var(--toast-index)*0.05)))]",
+    "[--height:var(--toast-frontmost-height,var(--toast-height))]",
+    // 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)]",
+    // 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-ending-style:opacity-0 data-limited:opacity-0",
+  ),
+  {
+    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",
+      },
+      placement: {
+        /** Pinned to the top of the viewport; behind cards peek below. */
+        "top-center": cn(
+          "top-0 origin-top",
+          "[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y,0px))]",
+          "[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))]",
+          "data-starting-style:[transform:translateY(-150%)]",
+          "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]",
+        ),
+        /** Pinned to the bottom-right; behind cards peek above. */
+        "bottom-right": cn(
+          "bottom-0 origin-bottom",
+          "[--shrink:calc(1-var(--scale))]",
+          "[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y,0px))]",
+          "[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))]",
+          "data-starting-style:[transform:translateY(150%)]",
+          "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        ),
+      },
+    },
+    defaultVariants: { variant: "default", placement: "top-center" },
+  },
 )
 
+/** 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.
+ *
+ *  Placement defaults from the nearest `ToastViewport` so the stack and the
+ *  corner stay in sync without repeating the prop on every root. */
+export const ToastRoot = ({
+  className,
+  variant = "default",
+  placement: placementProp,
+  ...props
+}: ToastRootProps) => {
+  const placementFromViewport = useContext(ToastPlacementContext)
+  const placement = placementProp ?? placementFromViewport
+
+  return (
+    <BaseToast.Root
+      data-variant={variant}
+      data-placement={placement}
+      className={cn(
+        "group/toast",
+        toastRootVariants({ variant, placement }),
+        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-[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,
     )}
@@ -66,7 +234,10 @@ 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 +247,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 +258,11 @@ 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",
       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",
+      focusRing,
+      "hover:bg-background-tertiary",
+      "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:border-fg-inverted/50 group-data-[variant=inverted]/toast:focus-visible:ring-fg-inverted/50",
       className,
     )}
     {...props}
@@ -100,15 +276,18 @@ 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",
+      focusRingBorder,
       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",
+      focusRing,
+      "hover:bg-background-tertiary hover:text-fg-primary",
+      "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:border-fg-inverted/50 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>
 )