@tangle-network/ui 11.16.11 → 11.19.0

package/dist/primitives.js

@@ -2,6 +2,11 @@ import { Button, buttonVariants } from "./primitives/button.js";
 import { Heading } from "./primitives/heading.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./primitives/card.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/collapsible.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./primitives/context-menu.js";
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
+import { Slider } from "./primitives/slider.js";
 import { Label } from "./primitives/label.js";
 import { Input, Textarea } from "./primitives/input.js";
 import { Badge, badgeVariants } from "./primitives/badge.js";
@@ -13,6 +18,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
 import { SegmentedControl } from "./primitives/segmented-control.js";
 import { Progress } from "./primitives/progress.js";
 import { Switch } from "./primitives/switch.js";
+import { Checkbox } from "./primitives/checkbox.js";
+import { Separator } from "./primitives/separator.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
 import { Skeleton, SkeletonCard, SkeletonTable } from "./primitives/skeleton.js";
 import { TextShimmer } from "./primitives/text-shimmer.js";
 import { ToastContainer, ToastProvider, useToast } from "./primitives/toast.js";
@@ -29,7 +38,11 @@ import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { PageHeader } from "./primitives/page-header.js";
 import { StatusPill } from "./primitives/status-pill.js";
+import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
+import { Tag } from "./primitives/tag.js";
+import { Chip } from "./primitives/chip.js";
+import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatusPill, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, UploadProgress, badgeVariants, buttonVariants, useTheme, useToast };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.11",
+  "version": "11.19.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -116,16 +116,23 @@
   "dependencies": {
     "@pierre/theme": "1.1.0",
     "@pierre/trees": "1.0.0-beta.6",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
     "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context-menu": "^2.3.7",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-progress": "^1.1.16",
     "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",
     "@radix-ui/react-switch": "^1.3.7",
     "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
@@ -142,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.10.2",
+    "@tangle-network/brand": "^1.13.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/alert-dialog.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+
+/**
+ * A dialog that interrupts for a decision. Unlike `Dialog` it has no close
+ * button and ignores outside clicks; Escape and `AlertDialogCancel` dismiss it.
+ * Radix focuses `AlertDialogCancel` on open, so a destructive action is never
+ * under the Enter key when the dialog appears.
+ */
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg",
+        "gap-4 rounded-lg border border-border bg-card p-6 text-foreground shadow-lg duration-200 outline-hidden",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "motion-reduce:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("font-semibold text-lg leading-snug [overflow-wrap:anywhere]", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm [overflow-wrap:anywhere]", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+/**
+ * The confirming action. `tone="destructive"` paints it with the danger fill;
+ * the default is the primary button.
+ */
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+    tone?: "default" | "destructive";
+  }
+>(({ className, tone = "default", ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({ variant: tone === "destructive" ? "destructive" : "default" }), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/primitives/badge.tsx

@@ -22,15 +22,21 @@ const badgeVariants = cva(
           "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
         sandbox:
           "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]",
-        /* Operational status variants */
+        /* Sandbox lifecycle variants: compatibility only, painted with the
+         * status triples. A lifecycle state is domain meaning, so its mapping
+         * lives in sandbox-ui's lifecycle adapter over `StatusPill`; these
+         * stay until consumers move. Running is up and healthy (success);
+         * creating is still in progress (info, as StatusPill's `running`);
+         * stopped and warm can be resumed (warning); cold is archived (info);
+         * deleted is gone (neutral). */
         running:
-          "border-[var(--surface-teal-border)] bg-[var(--surface-teal-bg)] text-[var(--surface-teal-text)]",
+          "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
         creating:
-          "border-[var(--surface-violet-border)] bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]",
+          "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
         stopped:
           "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
         warm:
-          "border-[var(--surface-orange-border)] bg-[var(--surface-orange-bg)] text-[var(--surface-orange-text)]",
+          "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
         cold:
           "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
         deleted:
@@ -43,6 +49,13 @@ const badgeVariants = cva(
   },
 );
 
+/**
+ * `success`, `warning`, `error` and `info` paint the same triples as
+ * `StatusPill`; for a status, prefer `StatusPill`, which adds the glyph that
+ * survives greyscale. The lifecycle variants (`running`, `creating`,
+ * `stopped`, `warm`, `cold`, `deleted`) are deprecated: use sandbox-ui's
+ * lifecycle adapter.
+ */
 export type BadgeVariant =
   | "default"
   | "secondary"

package/src/primitives/checkbox-separator-sheet-tooltip.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Info } from 'lucide-react'
+import { Button } from './button'
+import { Checkbox } from './checkbox'
+import { Label } from './label'
+import { Separator } from './separator'
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './sheet'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+
+const meta: Meta = {
+  title: 'Primitives/Checkbox, Separator, Sheet, Tooltip',
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Checkboxes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {[
+        { id: 'a', label: 'Record a video of every run', checked: true },
+        { id: 'b', label: 'Retry failed steps once', checked: false },
+        { id: 'c', label: 'Select every suite in this workspace', checked: 'indeterminate' as const },
+        { id: 'd', label: 'Disabled until billing is set up', checked: false, disabled: true },
+      ].map((row) => (
+        <div key={row.id} className="flex items-center gap-2">
+          <Checkbox id={row.id} defaultChecked={row.checked} disabled={row.disabled} />
+          <Label htmlFor={row.id}>{row.label}</Label>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const Separators: Story = {
+  render: () => (
+    <div className="w-72 text-sm">
+      <p>Account</p>
+      <Separator className="my-3" />
+      <div className="flex h-5 items-center gap-3">
+        <span>Runs</span>
+        <Separator orientation="vertical" />
+        <span>Suites</span>
+        <Separator orientation="vertical" />
+        <span>Settings</span>
+      </div>
+    </div>
+  ),
+}
+
+export const Sheets: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      {(['left', 'right', 'bottom'] as const).map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button variant="outline">Open {side}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>Run assistant</SheetTitle>
+              <SheetDescription>Ask why a step failed or what to test next.</SheetDescription>
+            </SheetHeader>
+            <SheetFooter>
+              <Button>Send</Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  ),
+}
+
+export const Tooltips: Story = {
+  render: () => (
+    <TooltipProvider>
+      <div className="flex gap-2">
+        {['Runs', 'Test suites', 'A much longer label that wraps at the maximum tooltip width'].map((label) => (
+          <Tooltip key={label}>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="ghost" aria-label={label}>
+                <Info className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{label}</TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+    </TooltipProvider>
+  ),
+}

package/src/primitives/checkbox-separator-sheet-tooltip.test.tsx

@@ -0,0 +1,107 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Checkbox } from "./checkbox";
+import { Label } from "./label";
+import { Separator } from "./separator";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "./sheet";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+describe("Checkbox", () => {
+  it("toggles from its label and exposes checkbox state", () => {
+    render(
+      <>
+        <Checkbox id="notify" />
+        <Label htmlFor="notify">Email me</Label>
+      </>,
+    );
+    const box = screen.getByRole("checkbox", { name: "Email me" });
+    expect(box).toHaveAttribute("aria-checked", "false");
+    fireEvent.click(screen.getByText("Email me"));
+    expect(box).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("reports the indeterminate state as mixed", () => {
+    render(<Checkbox aria-label="Select all" checked="indeterminate" />);
+    expect(screen.getByRole("checkbox", { name: "Select all" })).toHaveAttribute(
+      "aria-checked",
+      "mixed",
+    );
+  });
+
+  it("draws the dash for an uncontrolled indeterminate box too", () => {
+    const { container } = render(<Checkbox aria-label="Some" defaultChecked="indeterminate" />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-checked", "mixed");
+    const dash = container.querySelector("svg.lucide-minus");
+    const tick = container.querySelector("svg.lucide-check");
+    expect(dash?.getAttribute("class")).toContain("group-data-[state=indeterminate]/checkbox:block");
+    expect(tick?.getAttribute("class")).toContain("group-data-[state=indeterminate]/checkbox:hidden");
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "indeterminate");
+  });
+
+  it("paints with tokens, never palette utilities", () => {
+    render(<Checkbox aria-label="Agree" defaultChecked />);
+    const cls = screen.getByRole("checkbox").className;
+    expect(cls).toContain("data-[state=checked]:bg-primary");
+    expect(cls).not.toMatch(/\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald)-\d/);
+  });
+});
+
+describe("Separator", () => {
+  it("is hidden from assistive technology unless it is semantic", () => {
+    const { container, rerender } = render(<Separator />);
+    expect(container.firstElementChild).toHaveAttribute("role", "none");
+    rerender(<Separator decorative={false} orientation="vertical" />);
+    const rule = screen.getByRole("separator");
+    expect(rule).toHaveAttribute("aria-orientation", "vertical");
+    expect(rule.className).toContain("w-px");
+  });
+});
+
+describe("Sheet", () => {
+  it("opens as a labelled dialog and closes from its close button", async () => {
+    render(
+      <Sheet>
+        <SheetTrigger>Open chat</SheetTrigger>
+        <SheetContent side="left">
+          <SheetTitle>Assistant</SheetTitle>
+          <SheetDescription>Ask about this run.</SheetDescription>
+        </SheetContent>
+      </Sheet>,
+    );
+    fireEvent.click(screen.getByText("Open chat"));
+    const dialog = await screen.findByRole("dialog", { name: "Assistant" });
+    expect(dialog.className).toContain("slide-in-from-left");
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+  });
+
+  it("can hide its close button", async () => {
+    render(
+      <Sheet defaultOpen>
+        <SheetContent hideCloseButton>
+          <SheetTitle>Filters</SheetTitle>
+          <SheetDescription>Narrow the list.</SheetDescription>
+        </SheetContent>
+      </Sheet>,
+    );
+    await screen.findByRole("dialog", { name: "Filters" });
+    expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+  });
+});
+
+describe("Tooltip", () => {
+  it("shows its label when the trigger receives keyboard focus", async () => {
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger aria-label="Runs">R</TooltipTrigger>
+          <TooltipContent>Runs</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    await user.tab();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("Runs");
+  });
+});

package/src/primitives/checkbox.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/**
+ * A two- or three-state checkbox. An indeterminate state, controlled
+ * (`checked`) or uncontrolled (`defaultChecked`), draws a dash.
+ * Pair it with a `Label` through `id`/`htmlFor`; `aria-invalid` paints the
+ * danger hairline.
+ */
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer group/checkbox inline-grid size-4 shrink-0 cursor-pointer place-content-center rounded-[4px] border border-[var(--border-strong)] bg-transparent transition-[background-color,border-color,box-shadow] duration-150 ease-out",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "aria-invalid:border-[var(--surface-danger-border)]",
+      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      focusRing,
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="grid place-content-center text-current">
+      {/* Both glyphs render and the Root's Radix state picks one, so a
+          controlled or uncontrolled indeterminate box draws the same dash. */}
+      <Check aria-hidden="true" className="size-3.5 group-data-[state=indeterminate]/checkbox:hidden" strokeWidth={3} />
+      <Minus aria-hidden="true" className="hidden size-3.5 group-data-[state=indeterminate]/checkbox:block" strokeWidth={3} />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };