@vvedantb/ui 0.3.0 → 0.3.1

package/README.md

@@ -142,7 +142,7 @@ import { SessionsHoverCard } from "@vvedantb/ui/shell";
 </SessionsHoverCard>
 ```
 
-`children` is the trigger. It is rendered with `asChild` by default, so it keeps its own handlers (such as a context menu). Extra props and the ref go to it. Use `asChild={false}` for a default trigger element. The content portals to `document.body` by default, so `overflow:hidden` ancestors do not clip it. Pass `portal={false}` to opt out. `surface` is `"overlay"` (default), `"surface"` (`rounded-surface`) or `"glass"` (`glass-panel-strong`, `rounded-surface`). `className` merges over the surface without `!`. Defaults: `openDelay` 400 ms, `closeDelay` 150 ms, `side="right"`, `align="start"`, `sideOffset` 8, width and padding `w-64 p-3` (override with `className`). `body` is a node or a function of `{ open }`. `loadContent` runs only while the card is open. Control the state with `open`, `defaultOpen` and `onOpenChange`. Fixture: `shell/examples/sessions-hover-card/`.
+`children` is the trigger. It is rendered with `asChild` by default, so it keeps its own handlers (such as a context menu). Extra props and the ref go to it. Use `asChild={false}` for a default trigger element. The content portals to `document.body` by default, so `overflow:hidden` ancestors do not clip it. Pass `portal={false}` to opt out. `surface` is `"overlay"` (default), `"surface"` (`rounded-surface`) or `"glass"` (`glass-panel-strong`, `rounded-surface`). `className` merges over the surface without `!`. Defaults: `openDelay` 400 ms, `closeDelay` 150 ms, `side="right"`, `align="start"`, `sideOffset` 8, width and padding `w-64 p-3` (override with `className`). `body` is a node or a function of `{ open }`. `loadContent` runs only while the card is open. Control the state with `open`, `defaultOpen` and `onOpenChange`. The card opens on pointer hover and on keyboard focus (`:focus-visible`) only. Focus that follows a click or a context menu close does not open it. If pointer-driven focus left it stuck open, pointer leave force-closes it; otherwise Radix handles close (including moving onto the content). Fixture: `shell/examples/sessions-hover-card/`.
 
 ## Toaster
 
@@ -176,6 +176,11 @@ Opt-in props (all default to the current look):
 | `closeButtonStyle` | `"default"`, `"hoverChip"` | Text-style close button or a round chip at the top-right, shown on hover and always on small screens. It turns on `closeButton` unless you set it. |
 | `sonnerVars` | `false` (default), `true` | Sets `--normal-bg`, `--normal-border`, `--normal-text`, `--normal-bg-hover` and `--normal-border-hover` from `--color-card`, `--color-border`, `--color-foreground` and `--color-muted`, and `font-family: inherit`. |
 | `descriptionMuted` | `false` (default), `true` | Description uses `text-muted-foreground!`, which beats sonner's dark-theme rule. |
+| `titleLeading` | `"snug"` (default), `"5"` | Title `leading-snug` (19.25px at `text-sm`) or `leading-5` (20px). |
+| `loadingIcon` | node (default none) | Custom loading icon, merged into `icons`. A caller `icons.loading` wins. `icons={{ loading }}` works with both `toastIcons` values. |
+| `hideStackedContent` | `false` (default), `true` | Adds `[&[data-expanded=false][data-front=false]>*]:opacity-0` to the toast, so content behind the front toast is hidden while the stack is collapsed. `sonner.css` applies the same rule when imported. |
+
+With `closeButtonStyle="hoverChip"`, hover changes the text colour, and sonner may still change the background. The border stays `border-border` (pinned with `hover:border-border!` over sonner's dark hover border), so the ring does not brighten in dark mode.
 
 Helpers: `createToasterClassNames`, `mergeToastClassNames`, `mergeToastOptions`, `mergeToasterStyle`, `filledToastIcons`. Fixture: `tokens/examples/toaster/`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: primitives, shell pieces, app helpers, design tokens, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/shell/src/SessionsHoverCard.tsx

@@ -70,6 +70,15 @@ export type SessionsHoverCardProps = Omit<
   className?: string;
 };
 
+/** `:focus-visible` is true for keyboard focus only. Treat unsupported engines as keyboard. */
+function isFocusVisible(el: Element): boolean {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+
 type LoadState = { status: "loading" } | { status: "ready"; node: ReactNode };
 
 /** Mounts only while the card is open, so `loadContent` never runs while closed. */
@@ -140,6 +149,8 @@ export const SessionsHoverCard = forwardRef<
   align = "start",
   sideOffset = 8,
   className,
+  onFocus,
+  onPointerLeave,
   ...triggerProps
 }, ref) {
   const [openState, setOpenState] = useState(defaultOpen);
@@ -150,6 +161,24 @@ export const SessionsHoverCard = forwardRef<
     onOpenChange?.(next);
   };
 
+  // Open on keyboard focus only. Focus that returns after a context menu or a
+  // click is pointer-driven, so it must not open the card.
+  const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
+    onFocus?.(event as never);
+    if (event.defaultPrevented) return;
+    if (!isFocusVisible(event.currentTarget)) event.preventDefault();
+  };
+
+  // Radix handles hover close, including closeDelay and moving onto the
+  // content. Force-close only when the card is stuck open by pointer-driven
+  // focus on the trigger (focused, but not `:focus-visible`).
+  const handlePointerLeave = (event: React.PointerEvent<HTMLElement>) => {
+    onPointerLeave?.(event as never);
+    if (event.pointerType === "touch" || !open) return;
+    const el = event.currentTarget;
+    if (el.ownerDocument.activeElement === el && !isFocusVisible(el)) handleOpenChange(false);
+  };
+
   const bodyNode = loadContent ? (
     <LoadedBody loadContent={loadContent} fallback={loadingFallback} />
   ) : typeof body === "function" ? (
@@ -190,7 +219,13 @@ export const SessionsHoverCard = forwardRef<
       openDelay={openDelay}
       closeDelay={closeDelay}
     >
-      <HoverCardTrigger ref={ref} asChild={asChild} {...triggerProps}>
+      <HoverCardTrigger
+        ref={ref}
+        asChild={asChild}
+        {...triggerProps}
+        onFocus={handleFocus}
+        onPointerLeave={handlePointerLeave}
+      >
         {children}
       </HoverCardTrigger>
       {portal ? <HoverCardPrimitive.Portal>{content}</HoverCardPrimitive.Portal> : content}

package/src/ui/sonner.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { Toaster, type ToasterProps } from "sonner";
 import { filledToastIcons } from "./sonner-icons";
 import "./sonner.css";
@@ -45,10 +45,22 @@ type SonnerToasterOptions = {
   sonnerVars?: boolean;
   /** When true, descriptions use `text-muted-foreground!` so sonner's dark rule cannot win. */
   descriptionMuted?: boolean;
+  /** `"snug"` (default) keeps `leading-snug`. `"5"` uses `leading-5` (20px at `text-sm`). */
+  titleLeading?: "snug" | "5";
+  /** Custom loading icon. Merged into `icons`. A caller `icons.loading` wins. */
+  loadingIcon?: ReactNode;
+  /**
+   * When true, adds a class that hides the content of toasts behind the front toast
+   * while the stack is collapsed. Default false. `sonner.css` has the same rule.
+   */
+  hideStackedContent?: boolean;
 };
 
+const hideStackedContentClassName =
+  "[&[data-expanded=false][data-front=false]>*]:opacity-0";
+
 const hoverChipCloseButtonClassName =
-  "pointer-events-none absolute -right-2 -top-2 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-border bg-card/95 text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring group-hover:pointer-events-auto group-hover:opacity-100 max-sm:pointer-events-auto max-sm:opacity-100 max-sm:hit-target";
+  "pointer-events-none absolute -right-2 -top-2 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-border bg-card/95 text-muted-foreground opacity-0 transition-opacity hover:border-border! hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring group-hover:pointer-events-auto group-hover:opacity-100 max-sm:pointer-events-auto max-sm:opacity-100 max-sm:hit-target";
 
 const defaultCloseButtonClassName =
   "rounded-lg bg-default px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-default/78";
@@ -65,16 +77,23 @@ function createToasterClassNames({
   density = "default",
   closeButtonStyle = "default",
   descriptionMuted = false,
+  titleLeading = "snug",
+  hideStackedContent = false,
 }: Pick<
   SonnerToasterOptions,
-  "toastRadius" | "density" | "closeButtonStyle" | "descriptionMuted"
+  | "toastRadius"
+  | "density"
+  | "closeButtonStyle"
+  | "descriptionMuted"
+  | "titleLeading"
+  | "hideStackedContent"
 > = {}): ToastClassNames {
   const radius = toastRadiusClasses[toastRadius];
   const compact = density === "compact";
   const descriptionSize = compact ? "text-xs" : "text-[13px]";
   return {
-    toast: `group toast glass-panel-strong flex w-full items-center ${compact ? "gap-2" : "gap-3"} ${radius} ${compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm"} text-foreground smooth-shadow-ring-md`,
-    title: "font-medium leading-snug",
+    toast: `group toast glass-panel-strong flex w-full items-center ${compact ? "gap-2" : "gap-3"} ${radius} ${compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm"} text-foreground smooth-shadow-ring-md${hideStackedContent ? ` ${hideStackedContentClassName}` : ""}`,
+    title: titleLeading === "5" ? "font-medium leading-5" : "font-medium leading-snug",
     description: descriptionMuted
       ? `${descriptionSize} leading-snug text-muted-foreground!`
       : `${descriptionSize} leading-snug text-muted-foreground`,
@@ -148,6 +167,9 @@ function SonnerToaster({
   closeButtonStyle = "default",
   sonnerVars = false,
   descriptionMuted,
+  titleLeading,
+  loadingIcon,
+  hideStackedContent,
   toastOptions,
   icons,
   style,
@@ -155,8 +177,14 @@ function SonnerToaster({
   closeButton,
   ...props
 }: ToasterProps & SonnerToasterOptions) {
+  const loadingOverride =
+    loadingIcon != null ? { loading: loadingIcon } : undefined;
   const mergedIcons =
-    toastIcons === "filled24" ? { ...filledToastIcons, ...icons } : icons;
+    toastIcons === "filled24"
+      ? { ...filledToastIcons, ...loadingOverride, ...icons }
+      : loadingOverride
+        ? { ...loadingOverride, ...icons }
+        : icons;
   return (
     <Toaster
       expand={false}
@@ -175,6 +203,8 @@ function SonnerToaster({
             density,
             closeButtonStyle,
             descriptionMuted,
+            titleLeading,
+            hideStackedContent,
           }),
         },
         toastOptions,