@boyernick/standard-ui-react 0.1.1-canary.9 → 0.2.0

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>
 )

package/src/toggle.tsx

@@ -4,6 +4,7 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle"
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type ToggleProps = ComponentProps<typeof BaseToggle>
@@ -12,9 +13,10 @@ export type ToggleGroupProps = ComponentProps<typeof BaseToggleGroup>
 export const Toggle = ({ className, ...props }: ToggleProps) => (
   <BaseToggle
     className={cn(
-      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 text-sm text-fg-secondary outline-none",
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 text-sm text-fg-secondary",
       motion.colors,
-      "hover:bg-background-tertiary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
+      focusRing,
+      "hover:bg-background-tertiary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
       className,
     )}
     {...props}

package/src/toolbar.tsx

@@ -3,6 +3,7 @@
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type ToolbarProps = ComponentProps<typeof BaseToolbar.Root>
@@ -15,7 +16,7 @@ export type ToolbarSeparatorProps = ComponentProps<typeof BaseToolbar.Separator>
 export const Toolbar = ({ className, ...props }: ToolbarProps) => (
   <BaseToolbar.Root
     className={cn(
-      "inline-flex items-center gap-0.5 rounded-lg border border-border-primary bg-background-secondary p-0.5",
+      "inline-flex items-center gap-0.5 rounded-lg py-0.5 pr-1.5 pl-0.5 shadow-lg",
       className,
     )}
     {...props}
@@ -32,9 +33,11 @@ export const ToolbarGroup = ({ className, ...props }: ToolbarGroupProps) => (
 export const ToolbarButton = ({ className, ...props }: ToolbarButtonProps) => (
   <BaseToolbar.Button
     className={cn(
-      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary outline-none",
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary",
+      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 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
+      focusRing,
+      "hover:bg-background-tertiary hover:text-fg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
       className,
     )}
     {...props}
@@ -44,9 +47,11 @@ export const ToolbarButton = ({ className, ...props }: ToolbarButtonProps) => (
 export const ToolbarLink = ({ className, ...props }: ToolbarLinkProps) => (
   <BaseToolbar.Link
     className={cn(
-      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary outline-none",
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary",
+      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",
       className,
     )}
     {...props}
@@ -56,8 +61,8 @@ export const ToolbarLink = ({ className, ...props }: ToolbarLinkProps) => (
 export const ToolbarInput = ({ className, ...props }: ToolbarInputProps) => (
   <BaseToolbar.Input
     className={cn(
-      "h-8 min-w-28 cursor-text rounded-md border border-border-secondary bg-surface px-2.5 text-sm text-fg-primary outline-none placeholder:text-fg-quaternary",
-      "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",
+      "h-8 min-w-28 cursor-text rounded-md border border-border-secondary bg-surface px-2.5 text-sm text-fg-primary placeholder:text-fg-quaternary",
+      focusRing,
       className,
     )}
     {...props}

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 }