@vvedantb/ui 0.5.1 → 0.5.3

package/README.md

@@ -208,11 +208,13 @@ import { ConfirmDialog, SlideOverPanel, ToolbarSearchInput } from "@vvedantb/ui"
 <ToolbarSearchInput value={query} onChange={setQuery} />
 
 <ConfirmDialog size="sm" open={open} onOpenChange={setOpen} title="Delete item?" variant="destructive" onConfirm={remove} />
+
+<ConfirmDialog size="md" open={open} onOpenChange={setOpen} title="Delete item?" description="This cannot be undone." confirmLabel="Delete" variant="destructive" onConfirm={remove} />
 ```
 
 - `SlideOverPanel`: a right-side panel, absolutely positioned inside its nearest positioned parent. It is not a portal or dialog. It slides in with a spring and is hidden below `md`. Only the close button closes it (no Escape, no outside click). `width` is `"w-96"` (default) or `"w-80"`. `closeLabel` defaults to `"Close panel"`. `className` merges last.
 - `ToolbarSearchInput`: a compact `h-8` search field for toolbars, with a search icon and a clear button. The clear button stays mounted and is hidden while the value is blank. Clearing calls `onChange("")` and does not move focus. Defaults: `placeholder="Search..."`, `label="Search"` (the `aria-label`), `clearLabel="Clear search"`. The ref goes to the `<input>`.
-- `ConfirmDialog` `size`: `"default"` keeps the alert dialog. `"sm"` renders a compact, dismissible dialog (outside click, Escape and the close button close it) with small Cancel and confirm buttons. Cancel calls `onCancel` and then `onOpenChange(false)`. Confirm calls `onConfirm` only, so the caller closes it.
+- `ConfirmDialog` `size`: `"default"` keeps the alert dialog. `"sm"` renders a compact, dismissible dialog (outside click, Escape and the close button close it) with small Cancel and confirm buttons. Cancel calls `onCancel` and then `onOpenChange(false)`. Confirm calls `onConfirm` only, so the caller closes it. `"md"` (0.5.2) is dismissible like `"sm"`, with the title in a header (`pb-4`), the description in its own section (`py-6`) and a footer (`pt-4`) with default-size buttons. It has the same Cancel and confirm behaviour as `"sm"`.
 
 ## Buttons, menus and fields (0.4.4)
 
@@ -248,7 +250,7 @@ import {
 - `SelectField`: a labelled single select built from `Select`. Children are `SelectItem`s. An empty `value` shows the placeholder. `id` goes to the trigger and the label points at it. `className` merges onto the trigger.
 - Motion: `springTransition`, `springFastTransition` and `fadeUpSpring` presets. `FadePresence` takes optional `variants` (`hidden`, `show`, `exit`); omitted, it keeps its opacity fade. `PanelTransition` wraps children in React `ViewTransition` with `default="none"` and `enter`/`exit` classes (`vt-panel-in`, `vt-panel-out` by default). It needs a React build that exports `ViewTransition`, and the app supplies the `::view-transition-*` CSS.
 
-## App shell (0.5.0, 0.5.1)
+## App shell (0.5.0 to 0.5.3)
 
 A sidebar and main page layout, extracted from existing app markup. It is router-free: pass your own links (with `asChild`), state and media query result. Tooltips need a `TooltipProvider` above the shell.
 
@@ -289,15 +291,42 @@ import {
 
 - Widths: `AppShell` sets `--app-shell-rail-width` (default `4rem`), `--app-shell-sidebar-width` (rail plus panel, default `20rem`) and `--app-shell-mobile-header-height` (default `calc(3.5rem + env(safe-area-inset-top, 0px))`) as inline style. Change them with `railWidth`, `sidebarWidth` and `mobileHeaderHeight`. The other pieces read these variables. Outside `AppShell`, set the variables yourself or pass a width class with `className`.
 - `AppShell`: `sidebar`, `children`, `panelHidden` (main offsets by the rail width instead of the sidebar width), `skipLinkLabel` (`"Skip to main content"`), `mainId` (`"main-content"`), `className`, `mainClassName`, `contentClassName`.
-- `AppSidebar`: `rail`, `panel` (not rendered while `panelHidden`), `collapsed`, `panelHidden`, `isDesktop`, `mobileOpen`, `onMobileOpenChange`, `id` (default from `useId`), `asideProps` (`data-*` attributes for the `<aside>`), `className`, `mobileTitle`, `mobileMenuIcon` (`(open) => node`, default a menu icon), `mobileMenuLabel` (`"Open navigation menu"`), `closeLabel` (`"Close navigation"`). Swipe left or Escape closes the drawer. The drawer is `inert` while closed on mobile, and closes when `isDesktop` becomes `true`. Close it on route change in the app.
+- `AppSidebar`: `rail`, `panel` (not rendered while `panelHidden`), `collapsed`, `panelHidden`, `isDesktop`, `mobileOpen`, `onMobileOpenChange`, `id` (default from `useId`), `asideProps` (`data-*` attributes for the `<aside>`), `className`, `mobileTitle`, `mobileHeaderActions` (0.5.2; trailing actions such as icon buttons, in place of the end spacer), `mobileMenuIcon` (`(open) => node`, default a menu icon), `mobileMenuLabel` (`"Open navigation menu"`), `closeLabel` (`"Close navigation"`). Swipe left or Escape closes the drawer. The drawer is `inert` while closed on mobile, and closes when `isDesktop` becomes `true`. Close it on route change in the app.
 - `SidebarRail`: `top`, `children` (scroll body), `footer`, `showDivider`, `bodyAsChild` (the single child, for example a tabs list, becomes the body), `className`, `topClassName`, `bodyClassName`, `footerClassName`. Other HTML attributes (`id`, `data-*`, `aria-*`) go to the root `<div>`. The top and footer wrappers render only when their slot is set.
-- `RailTile`: `label` (`aria-label` and tooltip), `active`, `tooltip`, `showTooltip` (default `true`), `badge` (inside the tile, after the children; style it with `railBadgeClass`), `asChild`, `className`. Without `asChild` it is a ghost `Button`; other props go to it. With `asChild` the child (for example a router link) gets the tile classes and `aria-current="page"` when active.
+- `RailTile`: `label` (`aria-label` and tooltip), `active`, `tooltip`, `showTooltip` (default `true`), `badge` (inside the tile, after the children; style it with `railBadgeClass`), `asChild`, `className`. Without `asChild` it is a native `<button type="button">` (0.5.3), so icons keep their authored size; other props go to it. With `asChild` the child (for example a router link) gets the tile classes and `aria-current="page"` when active.
 - `RailDivider`, `SidebarIconTooltip` (`label`, `enabled`, `side` `"right"`, `sideOffset` 8).
 - `SidebarPanel`: `title`, `headerTrailing`, `onClose` (adds the close button; pass it on the mobile drawer only), `closeLabel`, `closeButtonClassName`, `collapsed` (`md:hidden`), `className`, `children`.
-- `SidebarAccountMenu`: `name`, `email` (two-line label when set), `stackedLabel` (two-line layout even without `email`, default `false`), `imageUrl` (initials without it), `align` (`"center"`), `side` (`"right"`), `sideOffset` (8), `collisionPadding`, `contentClassName`, `children` (menu items). `SidebarAccountMenuPlaceholder` is the tile-sized loading box.
+- `SidebarAccountMenu`: `name`, `email` (two-line label when set), `stackedLabel` (two-line layout even without `email`, default `false`), `imageUrl` (initials without it), `align` (`"center"`), `side` (`"right"`), `sideOffset` (8), `collisionPadding`, `contentClassName`, `children` (menu items). 0.5.2 adds `badge` (unread dot beside the trigger, in a `relative` wrapper around the menu, so the trigger's dimming and press scale skip it: `true` shows it, `false` fades it out, omitted renders no wrapper and no dot), `triggerProps` (spread onto the trigger `Button` after the defaults; `className` merges last) and `contentProps` (spread onto `DropdownMenuContent`, for example `fitViewport` or `aria-label`; no `className`, use `contentClassName`). `SidebarAccountMenuPlaceholder` is the tile-sized loading box.
 - `SignOutDialog`: `open`, `onOpenChange` (not called with `false` while `pending`), `pending`, `onConfirm`, `description`, `contentClassName`, `title` (`"Sign out"`), `question` (`"Sign out of your account?"`).
 - Class helpers: `railTileClass`, `railTileStateClass(active)`, `railBadgeClass`, `sidebarNavRowClass(isIconOnly)`, `sidebarNavLinkTextClass(isActive)`, `sidebarSectionLabelClass`.
 
+### Header actions and account badge (0.5.2)
+
+All opt-in. Without these props the header keeps its end spacer and the account trigger has no dot.
+
+```tsx
+<AppSidebar
+  /* … */
+  mobileHeaderActions={
+    <>
+      <Button size="icon" variant="ghost" aria-label="Search"><IconSearch size={20} /></Button>
+      <Button size="icon" variant="ghost" aria-label="New item"><IconPlus size={20} /></Button>
+    </>
+  }
+/>
+
+<SidebarAccountMenu
+  name={name}
+  badge={hasUnread}
+  triggerProps={{ "aria-label": hasUnread ? `Account menu for ${name}, unread updates` : `Account menu for ${name}` }}
+  contentProps={{ fitViewport: true, "aria-label": "Account" }}
+>
+  <DropdownMenuItem>Settings</DropdownMenuItem>
+</SidebarAccountMenu>
+```
+
+The dot is `aria-hidden`, so say it in the trigger label when it matters, as above.
+
 ### Resizable panel (0.5.1)
 
 Pass `resizable` to `AppShell`. Widths are panel px, rail excluded. Without it nothing changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/shell/src/AppSidebar.tsx

@@ -29,6 +29,8 @@ export type AppSidebarProps = {
   className?: string;
   /** Centred in the mobile header when truthy. */
   mobileTitle?: ReactNode;
+  /** Trailing actions in the mobile header, for example icon buttons. Replaces the end spacer. */
+  mobileHeaderActions?: ReactNode;
   /** Menu button icon. Default a 20px menu icon. */
   mobileMenuIcon?: (open: boolean) => ReactNode;
   /** Default `"Open navigation menu"`. */
@@ -57,6 +59,7 @@ export function AppSidebar({
   asideProps,
   className,
   mobileTitle,
+  mobileHeaderActions,
   mobileMenuIcon = defaultMobileMenuIcon,
   mobileMenuLabel = "Open navigation menu",
   closeLabel = "Close navigation",
@@ -95,7 +98,7 @@ export function AppSidebar({
     <>
       <header
         onKeyDown={closeOnEscape}
-        className="fixed inset-x-0 top-0 z-30 flex h-[var(--app-shell-mobile-header-height)] items-center gap-2 bg-background/80 px-3 pt-[env(safe-area-inset-top,0px)] pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))] backdrop-blur-md md:hidden"
+        className="fixed inset-x-0 top-0 z-30 flex h-[var(--app-shell-mobile-header-height)] items-center gap-2 bg-surface px-3 pt-[env(safe-area-inset-top,0px)] pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))] md:hidden"
       >
         <Button
           type="button"
@@ -114,7 +117,13 @@ export function AppSidebar({
             {mobileTitle}
           </h1>
         ) : null}
-        <div className="ml-auto h-11 w-11 shrink-0" aria-hidden="true" />
+        {mobileHeaderActions ? (
+          <div data-app-sidebar-mobile-actions="" className="ml-auto flex shrink-0 items-center gap-2">
+            {mobileHeaderActions}
+          </div>
+        ) : (
+          <div className="ml-auto h-11 w-11 shrink-0" aria-hidden="true" />
+        )}
       </header>
 
       <AnimatePresence initial={false}>

package/shell/src/SidebarAccountMenu.tsx

@@ -30,6 +30,19 @@ export type SidebarAccountMenuProps = {
   collisionPadding?: ContentProps["collisionPadding"];
   /** Merged onto the menu content after `w-56`. */
   contentClassName?: string;
+  /**
+   * Unread dot over the trigger's top-right corner, a sibling of the trigger in
+   * a `relative` wrapper. `true` shows it, `false` keeps it mounted at zero
+   * opacity so it fades out. Omitted: no wrapper and no dot.
+   */
+  badge?: boolean;
+  /** Spread onto the trigger `Button` after the defaults (overrides `title`, `aria-label`, …). `className` merges last. */
+  triggerProps?: Omit<ComponentPropsWithoutRef<typeof Button>, "children" | "asChild">;
+  /** Spread onto `DropdownMenuContent`, for example `fitViewport` or `aria-label`. Use `contentClassName` for classes. */
+  contentProps?: Omit<
+    ContentProps,
+    "children" | "className" | "align" | "side" | "sideOffset" | "collisionPadding"
+  >;
   /** Menu items after the label and separator. */
   children?: ReactNode;
 };
@@ -73,9 +86,12 @@ export function SidebarAccountMenu({
   sideOffset = 8,
   collisionPadding,
   contentClassName,
+  badge,
+  triggerProps,
+  contentProps,
   children,
 }: SidebarAccountMenuProps) {
-  return (
+  const menu = (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
@@ -83,12 +99,19 @@ export function SidebarAccountMenu({
           variant="ghost"
           title={name}
           aria-label={`Account menu for ${name}`}
-          className={cn(railTileClass, "h-11 w-11 p-0", railTileStateClass(false))}
+          {...triggerProps}
+          className={cn(
+            railTileClass,
+            "h-11 w-11 p-0",
+            railTileStateClass(false),
+            triggerProps?.className,
+          )}
         >
           <AccountAvatar src={imageUrl} name={name} className="h-7 w-7" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
+        {...contentProps}
         align={align}
         side={side}
         sideOffset={sideOffset}
@@ -111,6 +134,21 @@ export function SidebarAccountMenu({
       </DropdownMenuContent>
     </DropdownMenu>
   );
+  if (badge === undefined) return menu;
+  // Sibling of the trigger, so its opacity and press scale do not reach the dot.
+  return (
+    <div className="relative">
+      {menu}
+      <span
+        aria-hidden="true"
+        data-account-badge=""
+        className={cn(
+          "pointer-events-none absolute right-0 top-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-danger transition-opacity duration-150 ease-out",
+          badge ? "opacity-100" : "opacity-0",
+        )}
+      />
+    </div>
+  );
 }
 
 export type SidebarAccountMenuPlaceholderProps = { className?: string };

package/shell/src/SidebarRail.tsx

@@ -1,7 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { Button } from "../../src/ui/button";
 import { cn } from "../../src/utils/cn";
 import { railTileClass, railTileStateClass } from "./app-shell-classes";
 import { SidebarIconTooltip } from "./SidebarIconTooltip";
@@ -99,7 +98,7 @@ export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children">
   children: ReactNode;
 };
 
-/** Rail tile with a right-side tooltip. Renders a ghost `Button`, its child with `asChild`, or a tabs trigger with `tabValue`. */
+/** Rail tile with a right-side tooltip. Renders a native `<button>`, its child with `asChild`, or a tabs trigger with `tabValue`. */
 export function RailTile({
   label,
   active = false,
@@ -135,16 +134,15 @@ export function RailTile({
           {badge}
         </Slot>
       ) : (
-        <Button
+        <button
           type="button"
-          variant="ghost"
           {...props}
           aria-label={label}
-          className={cn(railTileClass, "group h-11 w-11 p-0", railTileStateClass(active), className)}
+          className={cn(railTileClass, "group", railTileStateClass(active), className)}
         >
           {children}
           {badge}
-        </Button>
+        </button>
       )}
     </SidebarIconTooltip>
   );

package/src/ui/confirm-dialog.tsx

@@ -10,7 +10,14 @@ import {
   AlertDialogTitle,
 } from "./alert-dialog";
 import { Button } from "./button";
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
 
 export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
   title: React.ReactNode;
@@ -25,8 +32,10 @@ export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
    * `"default"`: blocking alert dialog that closes on either button.
    * `"sm"`: compact dismissible dialog (outside click, Escape and the close
    * button close it). Confirm does not close it; the caller controls `open`.
+   * `"md"`: dismissible dialog like `"sm"`, with a header, description and
+   * footer in separate sections and default-size buttons.
    */
-  size?: "default" | "sm";
+  size?: "default" | "sm" | "md";
 };
 
 function ConfirmDialog({
@@ -78,6 +87,36 @@ function ConfirmDialog({
     );
   }
 
+  if (size === "md") {
+    return (
+      <Dialog {...props}>
+        {children}
+        <DialogContent className="sm:max-w-96">
+          <DialogHeader className="pb-4">
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          {description != null ? (
+            <DialogDescription className="py-6 text-muted-foreground">{description}</DialogDescription>
+          ) : null}
+          <DialogFooter className="pt-4">
+            <Button
+              variant="ghost"
+              onClick={() => {
+                onCancel?.();
+                props.onOpenChange?.(false);
+              }}
+            >
+              {cancelLabel}
+            </Button>
+            <Button variant={variant} disabled={confirmDisabled} onClick={onConfirm}>
+              {confirmLabel}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   return (
     <AlertDialog {...props}>
       {children}