@vvedantb/ui 0.3.0 → 0.3.2

package/README.md

@@ -59,8 +59,10 @@ import { Composer, ComposerIconButton } from "@vvedantb/ui"; // or "@vvedantb/ui
 | Prop | Default | Notes |
 | --- | --- | --- |
 | `value`, `defaultValue`, `onChange` | uncontrolled, `""` | Pass `value` to control it. When controlled, clear the value yourself after `onSubmit`. When uncontrolled, the composer clears after submit. |
-| `onSubmit(text)` | none | Called with the trimmed draft on Enter or the send button. Not called for an empty draft, or when `disabled` or `streaming`. If it returns a rejected promise, an uncontrolled composer restores the draft. |
-| `streaming`, `onStop` | `false` | The stop button replaces send and calls `onStop`. Typing stays on, Enter does not submit. |
+| `onSubmit(text)` | none | Called with the trimmed draft on Enter or the send button. By default it is not called for an empty draft, or when `disabled` or (with `stopMode="replace"`) `streaming`. A `canSend` override that allows an empty draft calls it with `""`. If it returns a rejected promise, an uncontrolled composer restores the draft. |
+| `streaming`, `onStop` | `false` | The stop button calls `onStop`. With `stopMode="replace"` it replaces send and Enter does not submit. Typing stays on. |
+| `stopMode` | `"replace"` | `"alongside"` shows stop and send together while streaming, in the order `trailingActions`, stop, send. Send stays usable to queue the next message: Enter and the send button submit while streaming when `canSend` allows. Not streaming, only send shows. Predictions stay off while streaming. |
+| `canSend` | trimmed draft is not empty | `boolean` or `(draft: string) => boolean`. Overrides whether send is enabled. The function gets the live draft (not trimmed). `disabled` and, in replace mode, `streaming` still block send. With attachments, use `canSend={(draft) => draft.trim() !== "" \|\| hasAttachments}`. `onSubmit` then gets `""` for an empty draft. |
 | `disabled` | `false` | Disables the textarea and send. |
 | `placeholder` | `"Message"` | Also the textarea `aria-label`. |
 | `layout` | `"stacked"` | `"stacked"`: input above, footer bar with `plusMenu` left and `trailingActions` plus send or stop right. `"inline"`: one row with `plusMenu`, the input and the actions. Attachments stay above the row. |
@@ -124,7 +126,7 @@ function MentionComposer({ draft, setDraft, send }: Props) {
 }
 ```
 
-`ComposerShell` props: `layout`, `disabled`, `streaming`, `canSend`, `onSend`, `onStop`, `plusMenu`, `trailingActions`, `attachments`, `className` and `children` (the input region). In the shell the Enter, Tab and Esc keys are yours to wire when you do not use `Composer`.
+`ComposerShell` props: `layout`, `disabled`, `streaming`, `canSend` (always a boolean: `Composer` resolves the function form), `stopMode` (`"replace"` or `"alongside"`, where the buttons render), `onSend`, `onStop`, `plusMenu`, `trailingActions`, `attachments`, `className` and `children` (the input region). In the shell the Enter, Tab and Esc keys are yours to wire when you do not use `Composer`.
 
 Fixture: `composer/examples/` (see its README). It has a `tokens.css` page and a `compat-shadcn-rgb.css` page, each with light and dark.
 
@@ -142,7 +144,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 +178,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.2",
   "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/composer/Composer.tsx

@@ -15,6 +15,12 @@ import { useComposerPrediction } from "./useComposerPrediction";
 export type ComposerSlotContext = { disabled: boolean };
 export type ComposerTrailingContext = { disabled: boolean; streaming: boolean };
 export type ComposerLayout = "stacked" | "inline";
+/**
+ * How stop behaves while `streaming`. `"replace"` (default): stop takes the
+ * place of send. `"alongside"`: stop and send show together, in the order
+ * trailing actions, stop, send.
+ */
+export type ComposerStopMode = "replace" | "alongside";
 
 export type ComposerInputRenderContext = {
   value: string;
@@ -44,13 +50,30 @@ export type ComposerProps = {
   defaultValue?: string;
   onChange?: (value: string) => void;
 
-  /** Called with the trimmed draft on Enter or the send button. Never called for an empty draft. */
+  /**
+   * Called with the trimmed draft on Enter or the send button. By default it
+   * is not called for an empty draft. A `canSend` override that allows an
+   * empty draft calls it with `""`.
+   */
   onSubmit?: (value: string) => void | Promise<void>;
   onStop?: () => void;
-  /** Shows the stop button in place of send. Typing stays enabled. Enter does not submit. */
+  /**
+   * Shows the stop button. With `stopMode="replace"` (default) it takes the
+   * place of send and Enter does not submit. Typing stays enabled.
+   */
   streaming?: boolean;
-  /** Disables the textarea and the send button. */
+  /** Disables the textarea and the send button. `canSend` cannot override it. */
   disabled?: boolean;
+  /**
+   * Overrides whether send is enabled. Default: the trimmed draft is not
+   * empty. `disabled` and, with `stopMode="replace"`, `streaming` still block
+   * send. A function receives the live draft (not trimmed), so check
+   * `draft.trim()` yourself. Use it to allow an empty draft when attachments
+   * exist: `canSend={(draft) => draft.trim() !== "" || hasAttachments}`.
+   */
+  canSend?: boolean | ((draft: string) => boolean);
+  /** `"replace"` (default) or `"alongside"`. See `ComposerStopMode`. */
+  stopMode?: ComposerStopMode;
 
   placeholder?: string;
   /** Maximum textarea height in px. The textarea scrolls after it. Default 200. */
@@ -124,8 +147,10 @@ export type ComposerShellProps = {
   layout?: ComposerLayout;
   disabled?: boolean;
   streaming?: boolean;
-  /** Enables the send button. */
+  /** Enables the send button. Always a boolean: `Composer` resolves its function form. */
   canSend?: boolean;
+  /** `"replace"` (default) or `"alongside"`. Alongside while streaming: trailing actions, stop, send. */
+  stopMode?: ComposerStopMode;
   onSend?: () => void;
   onStop?: () => void;
   plusMenu?: SlotNode<ComposerSlotContext>;
@@ -147,6 +172,7 @@ function ComposerShell({
   disabled = false,
   streaming = false,
   canSend = false,
+  stopMode = "replace",
   onSend,
   onStop,
   plusMenu,
@@ -162,7 +188,7 @@ function ComposerShell({
       : trailingActions;
   const inline = layout === "inline";
 
-  const action = streaming ? (
+  const stopButton = (
     <ComposerIconButton
       variant="default"
       aria-label="Stop generating"
@@ -171,7 +197,8 @@ function ComposerShell({
     >
       <IconPlayerStop className="size-4" aria-hidden="true" />
     </ComposerIconButton>
-  ) : (
+  );
+  const sendButton = (
     <ComposerIconButton
       variant="default"
       aria-label="Send message"
@@ -182,6 +209,16 @@ function ComposerShell({
       <IconArrowUp className="size-4" aria-hidden="true" />
     </ComposerIconButton>
   );
+  const action = !streaming ? (
+    sendButton
+  ) : stopMode === "alongside" ? (
+    <>
+      {stopButton}
+      {sendButton}
+    </>
+  ) : (
+    stopButton
+  );
 
   return (
     <div
@@ -189,6 +226,7 @@ function ComposerShell({
       data-layout={layout}
       data-disabled={disabled || undefined}
       data-streaming={streaming || undefined}
+      data-stop-mode={stopMode}
       className={cn(
         "group/composer relative flex w-full min-w-0 flex-col rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth",
         "has-[[data-composer-input]:focus-visible]:border-focus-border has-[[data-composer-input]:focus-visible]:ring-2 has-[[data-composer-input]:focus-visible]:ring-focus-ring",
@@ -274,6 +312,8 @@ const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function C
     onStop,
     streaming = false,
     disabled = false,
+    canSend: canSendProp,
+    stopMode = "replace",
     placeholder = "Message",
     maxHeight = DEFAULT_MAX_HEIGHT,
     autoFocus,
@@ -343,7 +383,11 @@ const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function C
   };
   React.useLayoutEffect(syncScroll, [value, ghost]);
 
-  const canSend = !disabled && !streaming && value.trim() !== "";
+  const override = typeof canSendProp === "function" ? canSendProp(value) : canSendProp;
+  const canSend =
+    !disabled &&
+    (stopMode === "alongside" || !streaming) &&
+    (override ?? value.trim() !== "");
 
   const submit = () => {
     if (!canSend) return;
@@ -454,6 +498,7 @@ const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function C
       disabled={disabled}
       streaming={streaming}
       canSend={canSend}
+      stopMode={stopMode}
       onSend={submit}
       onStop={onStop}
       plusMenu={plusMenu}

package/src/composer/index.ts

@@ -6,6 +6,7 @@ export type {
   ComposerProps,
   ComposerShellProps,
   ComposerSlotContext,
+  ComposerStopMode,
   ComposerTrailingContext,
 } from "./Composer";
 export { useComposerPrediction } from "./useComposerPrediction";

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,