Toolbar

TSX
"use client";

import * as React from "react";
import {
  CalendarClock,
  Copy,
  FolderInput,
  Tag,
  Trash2,
  UserPlus,
} from "lucide-react";

import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

const groups = [
  {
    label: "Plan",
    actions: [
      { label: "Assign", icon: UserPlus },
      { label: "Due date", icon: CalendarClock },
      { label: "Label", icon: Tag },
    ],
  },
  {
    label: "Organize",
    actions: [
      { label: "Move", icon: FolderInput },
      { label: "Duplicate", icon: Copy },
    ],
  },
];

export default function Toolbar01() {
  return (
    <Toolbar aria-label="Task actions" className="max-w-full">
      {groups.map((group, index) => (
        <React.Fragment key={group.label}>
          {index > 0 ? <ToolbarSeparator /> : null}
          <ToolbarGroup aria-label={group.label}>
            {group.actions.map((action) => (
              <ToolbarButton key={action.label} aria-label={action.label}>
                <action.icon aria-hidden="true" />
                <span className="hidden md:inline">{action.label}</span>
              </ToolbarButton>
            ))}
          </ToolbarGroup>
        </React.Fragment>
      ))}
      <ToolbarSeparator />
      <ToolbarButton
        aria-label="Delete task"
        className="text-destructive hover:bg-destructive/10 hover:text-destructive"
      >
        <Trash2 aria-hidden="true" />
        <span className="hidden md:inline">Delete</span>
      </ToolbarButton>
    </Toolbar>
  );
}

TSX
"use client";

import {
  ChevronLeft,
  ChevronRight,
  Download,
  ZoomIn,
  ZoomOut,
} from "lucide-react";

import { cn } from "cn";

import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

const densities = [
  {
    name: "Compact",
    height: "28px",
    root: "gap-0.5 p-0.5",
    button: "h-7 min-w-7 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3.5",
  },
  {
    name: "Default",
    height: "32px",
    root: "",
    button: "",
  },
  {
    name: "Comfortable",
    height: "40px",
    root: "gap-1.5 rounded-lg p-1.5",
    button: "h-10 min-w-10 rounded-md px-3 [&_svg:not([class*='size-'])]:size-5",
  },
];

export default function Toolbar02() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      {densities.map((density) => (
        <div key={density.name} className="flex flex-col gap-2">
          <div className="flex items-baseline justify-between text-xs">
            <span className="font-medium">{density.name}</span>
            <span className="text-muted-foreground tabular-nums">
              {density.height} targets
            </span>
          </div>
          <Toolbar
            aria-label={`Document viewer, ${density.name.toLowerCase()} density`}
            className={density.root}
          >
            <ToolbarGroup aria-label="Pages">
              <ToolbarButton
                aria-label="Previous page"
                className={density.button}
              >
                <ChevronLeft aria-hidden="true" />
              </ToolbarButton>
              <span
                className={cn(
                  "px-1 text-sm text-muted-foreground tabular-nums",
                  density.name === "Compact" && "text-xs",
                )}
              >
                3 / 12
              </span>
              <ToolbarButton aria-label="Next page" className={density.button}>
                <ChevronRight aria-hidden="true" />
              </ToolbarButton>
            </ToolbarGroup>
            {/* Zoom is the least essential group; it drops below sm so the
                comfortable density still fits a phone-width pane. */}
            <ToolbarSeparator className="hidden sm:block" />
            <ToolbarGroup aria-label="Zoom" className="hidden sm:flex">
              <ToolbarButton aria-label="Zoom out" className={density.button}>
                <ZoomOut aria-hidden="true" />
              </ToolbarButton>
              <ToolbarButton aria-label="Zoom in" className={density.button}>
                <ZoomIn aria-hidden="true" />
              </ToolbarButton>
            </ToolbarGroup>
            <ToolbarSeparator />
            <ToolbarButton aria-label="Download PDF" className={density.button}>
              <Download aria-hidden="true" />
            </ToolbarButton>
          </Toolbar>
        </div>
      ))}
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { Crop, FlipHorizontal2, RotateCw, SlidersHorizontal } from "lucide-react";

import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

const actions = [
  { label: "Crop", icon: Crop },
  { label: "Rotate", icon: RotateCw },
  { label: "Flip", icon: FlipHorizontal2 },
  { label: "Adjust", icon: SlidersHorizontal },
];

const surfaces = [
  {
    name: "Outline",
    note: "Border and hairline shadow",
    root: "",
    button: "",
    separator: "",
  },
  {
    name: "Ghost",
    note: "No chrome until hover",
    root: "border-transparent bg-transparent shadow-none",
    button: "",
    separator: "",
  },
  {
    name: "Filled",
    note: "Muted well, raised hover",
    root: "border-transparent bg-muted shadow-none",
    button:
      "text-muted-foreground hover:bg-background hover:text-foreground hover:shadow-xs",
    separator: "bg-foreground/10",
  },
  {
    name: "Floating",
    note: "Elevated pill over content",
    root: "rounded-full px-1.5 shadow-lg",
    button: "rounded-full",
    separator: "",
  },
  {
    name: "Inverted",
    note: "High-contrast primary surface",
    root: "border-transparent bg-primary text-primary-foreground shadow-md",
    button:
      "hover:bg-primary-foreground/15 hover:text-primary-foreground focus-visible:ring-primary-foreground/60",
    separator: "bg-primary-foreground/20",
  },
];

export default function Toolbar03() {
  return (
    <div className="grid w-full max-w-md gap-3">
      {surfaces.map((surface) => (
        <div
          key={surface.name}
          className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 rounded-lg border border-dashed p-3"
        >
          <div className="flex min-w-0 flex-col">
            <span className="text-sm font-medium">{surface.name}</span>
            <span className="text-xs text-muted-foreground">
              {surface.note}
            </span>
          </div>
          <Toolbar
            aria-label={`Image actions, ${surface.name.toLowerCase()} style`}
            className={surface.root}
          >
            {actions.map((action, index) => (
              <React.Fragment key={action.label}>
                {index === 3 ? (
                  <ToolbarSeparator className={surface.separator} />
                ) : null}
                <ToolbarButton
                  aria-label={action.label}
                  className={surface.button}
                >
                  <action.icon aria-hidden="true" />
                </ToolbarButton>
              </React.Fragment>
            ))}
          </Toolbar>
        </div>
      ))}
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { Bookmark, Pause, Play, RotateCcw, RotateCw } from "lucide-react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Progress } from "@/components/ui/progress";
import { Toggle } from "@/components/ui/toggle";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
} from "@/components/ui/toolbar";

const DURATION = 2538;
const speeds = ["0.75", "1", "1.25", "1.5", "2"];

function formatTime(seconds: number) {
  const minutes = Math.floor(seconds / 60);
  const rest = Math.floor(seconds % 60);
  return `${minutes}:${rest.toString().padStart(2, "0")}`;
}

export default function Toolbar04() {
  const [position, setPosition] = React.useState(754);
  const [playing, setPlaying] = React.useState(false);
  const [speed, setSpeed] = React.useState("1");
  const [saved, setSaved] = React.useState(false);

  React.useEffect(() => {
    if (!playing) return;
    const timer = setInterval(() => {
      setPosition((value) => Math.min(DURATION, value + Number(speed)));
    }, 1000);
    return () => clearInterval(timer);
  }, [playing, speed]);

  React.useEffect(() => {
    if (position >= DURATION) setPlaying(false);
  }, [position]);

  function skip(seconds: number) {
    setPosition((value) => Math.min(DURATION, Math.max(0, value + seconds)));
  }

  return (
    <section
      aria-label="Now playing"
      className="flex w-full max-w-sm flex-col gap-4 rounded-xl border bg-card p-4 text-card-foreground shadow-xs"
    >
      <div className="flex items-center gap-3">
        <img
          src="/placeholder.svg"
          alt=""
          className="size-14 shrink-0 rounded-lg border bg-muted object-cover"
        />
        <div className="flex min-w-0 flex-col gap-0.5">
          <span className="truncate text-sm font-semibold">
            Pricing pages that convert
          </span>
          <span className="truncate text-xs text-muted-foreground">
            Shipping Notes · Episode 112
          </span>
        </div>
      </div>

      <div className="flex flex-col gap-1.5">
        <Progress
          value={position}
          max={DURATION}
          aria-label="Playback position"
          getAriaValueText={() =>
            `${formatTime(position)} of ${formatTime(DURATION)}`
          }
        />
        <div className="flex justify-between text-xs text-muted-foreground tabular-nums">
          <span>{formatTime(position)}</span>
          <span>-{formatTime(DURATION - position)}</span>
        </div>
      </div>

      <Toolbar
        aria-label="Playback controls"
        className="w-full justify-between border-0 bg-transparent p-0 shadow-none"
      >
        <DropdownMenu>
          <ToolbarButton
            render={<DropdownMenuTrigger />}
            aria-label={`Playback speed, ${speed}x`}
            className="w-12 text-xs tabular-nums"
          >
            {speed}x
          </ToolbarButton>
          <DropdownMenuContent align="start" className="w-36">
            <DropdownMenuGroup>
              <DropdownMenuLabel>Playback speed</DropdownMenuLabel>
              <DropdownMenuRadioGroup
                value={speed}
                onValueChange={(value) => setSpeed(value as string)}
              >
                {speeds.map((value) => (
                  <DropdownMenuRadioItem
                    key={value}
                    value={value}
                    closeOnClick
                  >
                    {value}x
                  </DropdownMenuRadioItem>
                ))}
              </DropdownMenuRadioGroup>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>

        <ToolbarGroup aria-label="Transport" className="gap-2">
          <ToolbarButton
            aria-label="Back 15 seconds"
            onClick={() => skip(-15)}
            className="size-10 rounded-full"
          >
            <RotateCcw aria-hidden="true" className="size-5" />
          </ToolbarButton>
          <ToolbarButton
            aria-label={playing ? "Pause" : "Play"}
            disabled={position >= DURATION}
            onClick={() => setPlaying((value) => !value)}
            className="size-12 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
          >
            {playing ? (
              <Pause aria-hidden="true" className="size-5 fill-current" />
            ) : (
              <Play aria-hidden="true" className="size-5 fill-current" />
            )}
          </ToolbarButton>
          <ToolbarButton
            aria-label="Forward 30 seconds"
            onClick={() => skip(30)}
            className="size-10 rounded-full"
          >
            <RotateCw aria-hidden="true" className="size-5" />
          </ToolbarButton>
        </ToolbarGroup>

        <ToolbarButton
          render={<Toggle pressed={saved} onPressedChange={setSaved} />}
          aria-label="Save episode"
          className="w-12"
        >
          <Bookmark
            aria-hidden="true"
            className={saved ? "fill-current" : undefined}
          />
        </ToolbarButton>
      </Toolbar>
    </section>
  );
}

TSX
"use client";

import * as React from "react";
import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Italic,
  RemoveFormatting,
  Strikethrough,
  Underline,
} from "lucide-react";

import { cn } from "cn";

import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup } from "@/components/ui/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

const marks = [
  { value: "bold", label: "Bold", icon: Bold, className: "font-semibold" },
  { value: "italic", label: "Italic", icon: Italic, className: "italic" },
  {
    value: "underline",
    label: "Underline",
    icon: Underline,
    className: "underline underline-offset-4",
  },
  {
    value: "strike",
    label: "Strikethrough",
    icon: Strikethrough,
    className: "line-through",
  },
];

const alignments = [
  { value: "left", label: "Align left", icon: AlignLeft, className: "text-left" },
  {
    value: "center",
    label: "Align center",
    icon: AlignCenter,
    className: "text-center",
  },
  {
    value: "right",
    label: "Align right",
    icon: AlignRight,
    className: "text-right",
  },
];

export default function Toolbar05() {
  const [active, setActive] = React.useState<string[]>(["bold"]);
  const [align, setAlign] = React.useState("left");

  const isDefault = active.length === 0 && align === "left";
  const alignment =
    alignments.find((item) => item.value === align) ?? alignments[0];
  const summary = [
    ...marks.filter((mark) => active.includes(mark.value)).map((m) => m.label),
    alignment.label.replace("Align ", "Aligned "),
  ].join(" · ");

  return (
    <div className="w-full max-w-md overflow-hidden rounded-lg border bg-card">
      <Toolbar
        aria-label="Text formatting"
        className="w-full flex-wrap rounded-none border-0 border-b bg-muted/40 shadow-none max-sm:gap-0.5"
      >
        <ToggleGroup
          multiple
          spacing={0.5}
          value={active}
          onValueChange={setActive}
          aria-label="Text style"
        >
          {marks.map((mark) => (
            <ToolbarButton
              key={mark.value}
              render={<Toggle />}
              value={mark.value}
              aria-label={mark.label}
              className="max-sm:h-7 max-sm:min-w-7 max-sm:px-1.5"
            >
              <mark.icon aria-hidden="true" />
            </ToolbarButton>
          ))}
        </ToggleGroup>
        <ToolbarSeparator />
        <ToggleGroup
          spacing={0.5}
          value={[align]}
          onValueChange={(next) => {
            if (next.length > 0) setAlign(next[next.length - 1]);
          }}
          aria-label="Alignment"
        >
          {alignments.map((item) => (
            <ToolbarButton
              key={item.value}
              render={<Toggle />}
              value={item.value}
              aria-label={item.label}
              className="max-sm:h-7 max-sm:min-w-7 max-sm:px-1.5"
            >
              <item.icon aria-hidden="true" />
            </ToolbarButton>
          ))}
        </ToggleGroup>
        <ToolbarSeparator />
        <ToolbarButton
          aria-label="Clear formatting"
          className="max-sm:h-7 max-sm:min-w-7 max-sm:px-1.5"
          disabled={isDefault}
          onClick={() => {
            setActive([]);
            setAlign("left");
          }}
        >
          <RemoveFormatting aria-hidden="true" />
        </ToolbarButton>
      </Toolbar>
      <div className="flex flex-col gap-3 p-4">
        <p
          className={cn(
            "text-sm leading-relaxed",
            marks
              .filter((mark) => active.includes(mark.value))
              .map((mark) => mark.className),
            alignment.className,
          )}
        >
          Quarterly revenue grew 18% on the back of the new annual plans.
        </p>
        <p className="text-xs text-muted-foreground" aria-live="polite">
          {summary}
        </p>
      </div>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import {
  ClipboardPaste,
  Copy,
  Lock,
  Merge,
  Scissors,
  WrapText,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarLink,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

const clipboardActions = [
  { label: "Cut", icon: Scissors },
  { label: "Copy", icon: Copy },
];

const cellActions = [
  { label: "Merge cells", icon: Merge },
  { label: "Wrap text", icon: WrapText },
];

export default function Toolbar06() {
  const [locked, setLocked] = React.useState(true);

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <div className="flex items-center justify-between gap-4">
        <div className="flex flex-col gap-0.5">
          <Label htmlFor="toolbar-06-lock">Lock sheet</Label>
          <span className="text-xs text-muted-foreground">
            Viewers can read Q3 Forecast but not change it.
          </span>
        </div>
        <Switch
          id="toolbar-06-lock"
          checked={locked}
          onCheckedChange={setLocked}
        />
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Toolbar
          aria-label="Sheet editing"
          disabled={locked}
          className="transition-opacity data-[disabled]:bg-muted/50 data-[disabled]:shadow-none"
        >
          <ToolbarGroup aria-label="Clipboard">
            {clipboardActions.map((action) => (
              <ToolbarButton key={action.label} aria-label={action.label}>
                <action.icon aria-hidden="true" />
              </ToolbarButton>
            ))}
            {/* Disabled on its own: nothing has been copied yet. */}
            <ToolbarButton
              aria-label="Paste (clipboard is empty)"
              disabled
            >
              <ClipboardPaste aria-hidden="true" />
            </ToolbarButton>
          </ToolbarGroup>
          <ToolbarSeparator />
          <ToolbarGroup aria-label="Cells">
            {cellActions.map((action) => (
              <ToolbarButton key={action.label} aria-label={action.label}>
                <action.icon aria-hidden="true" />
              </ToolbarButton>
            ))}
          </ToolbarGroup>
          {locked ? (
            <>
              <ToolbarSeparator />
              <ToolbarLink
                href="#request-access"
                aria-label="Request access"
                className="whitespace-nowrap text-foreground underline-offset-4 hover:underline"
              >
                Request<span className="max-sm:hidden"> access</span>
              </ToolbarLink>
            </>
          ) : null}
        </Toolbar>
        {locked ? (
          <Badge variant="outline">
            <Lock aria-hidden="true" />
            Read-only
          </Badge>
        ) : (
          <Badge variant="secondary">Editing</Badge>
        )}
      </div>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import {
  CircleAlert,
  CircleCheck,
  RefreshCw,
  Rocket,
  Save,
} from "lucide-react";

import { cn } from "cn";

import { Spinner } from "@/components/ui/spinner";
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

type Status = "idle" | "loading" | "success" | "error";
type ActionId = "save" | "sync" | "publish";

const actions: {
  id: ActionId;
  label: string;
  shortLabel?: string;
  icon: typeof Save;
  busy: string;
  done: string;
  failed?: string;
}[] = [
  {
    id: "save",
    label: "Save draft",
    shortLabel: "Save",
    icon: Save,
    busy: "Saving",
    done: "Saved",
  },
  { id: "sync", label: "Sync", icon: RefreshCw, busy: "Syncing", done: "Synced" },
  {
    id: "publish",
    label: "Publish",
    icon: Rocket,
    busy: "Publishing",
    done: "Published",
    failed: "Retry",
  },
];

const idle: Record<ActionId, Status> = {
  save: "idle",
  sync: "idle",
  publish: "idle",
};

export default function Toolbar07() {
  const [status, setStatus] = React.useState(idle);
  const [message, setMessage] = React.useState({
    text: "All changes saved locally.",
    error: false,
  });
  const publishAttempts = React.useRef(0);
  const timers = React.useRef<ReturnType<typeof setTimeout>[]>([]);

  React.useEffect(() => {
    const pending = timers.current;
    return () => {
      for (const timer of pending) clearTimeout(timer);
    };
  }, []);

  function schedule(fn: () => void, ms: number) {
    timers.current.push(setTimeout(fn, ms));
  }

  function run(action: (typeof actions)[number]) {
    setStatus((prev) => ({ ...prev, [action.id]: "loading" }));
    setMessage({ text: `${action.busy}…`, error: false });

    // The first publish fails on purpose to show the error state.
    const fails = action.id === "publish" && publishAttempts.current++ === 0;

    schedule(() => {
      setStatus((prev) => ({
        ...prev,
        [action.id]: fails ? "error" : "success",
      }));
      setMessage(
        fails
          ? {
              text: "Publish failed: the cover image is missing alt text. Add it and retry.",
              error: true,
            }
          : { text: `${action.done} just now.`, error: false },
      );
      if (!fails) {
        schedule(() => {
          setStatus((prev) => ({ ...prev, [action.id]: "idle" }));
        }, 1800);
      }
    }, 1200);
  }

  return (
    <div className="flex w-full max-w-md flex-col items-start gap-2">
      <Toolbar aria-label="Post actions" className="max-w-full flex-wrap">
        {actions.map((action, index) => {
          const state = status[action.id];
          const Icon =
            state === "success"
              ? CircleCheck
              : state === "error"
                ? CircleAlert
                : action.icon;
          const label =
            state === "loading"
              ? action.busy
              : state === "success"
                ? action.done
                : state === "error"
                  ? (action.failed ?? action.label)
                  : null;

          return (
            <React.Fragment key={action.id}>
              {index === 2 ? <ToolbarSeparator /> : null}
              <ToolbarButton
                disabled={state === "loading"}
                aria-busy={state === "loading" || undefined}
                onClick={() => run(action)}
                className={cn(
                  "transition-colors max-sm:gap-1.5 max-sm:px-1.5",
                  state === "success" && "text-success",
                  state === "error" &&
                    "text-destructive hover:bg-destructive/10 hover:text-destructive",
                  action.id === "publish" &&
                    state !== "error" &&
                    state !== "success" &&
                    "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
                )}
              >
                {state === "loading" ? (
                  <Spinner aria-hidden="true" role="presentation" />
                ) : (
                  <Icon aria-hidden="true" />
                )}
                {label ?? (
                  <>
                    <span className="sm:hidden">
                      {action.shortLabel ?? action.label}
                    </span>
                    <span className="max-sm:hidden">{action.label}</span>
                  </>
                )}
              </ToolbarButton>
            </React.Fragment>
          );
        })}
      </Toolbar>
      <p
        role="status"
        className={cn(
          "text-xs text-muted-foreground",
          message.error && "text-destructive",
        )}
      >
        {message.text}
      </p>
    </div>
  );
}

TSX
"use client";

import { ArchiveIcon, MailOpenIcon, Trash2Icon, Undo2Icon } from "lucide-react";
import { useState } from "react";

import { Checkbox } from "@/components/ui/checkbox";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

type Message = {
  id: string;
  from: string;
  subject: string;
  time: string;
  unread: boolean;
};

const initialMessages: Message[] = [
  {
    id: "msg-2041",
    from: "Stripe",
    subject: "Your payout of $4,812.40 is on its way",
    time: "9:42 AM",
    unread: true,
  },
  {
    id: "msg-2040",
    from: "Priya Raman",
    subject: "Re: Onboarding checklist for the Lisbon team",
    time: "8:15 AM",
    unread: true,
  },
  {
    id: "msg-2039",
    from: "Vercel",
    subject: "Deployment failed on main (build step)",
    time: "Yesterday",
    unread: false,
  },
  {
    id: "msg-2038",
    from: "Marcus Holt",
    subject: "Contract redlines, second pass",
    time: "Mon",
    unread: false,
  },
];

export default function Toolbar08() {
  const [messages, setMessages] = useState(initialMessages);
  const [selected, setSelected] = useState<string[]>([]);
  const [history, setHistory] = useState<{
    snapshot: Message[];
    label: string;
  } | null>(null);

  const count = selected.length;
  const allSelected = messages.length > 0 && count === messages.length;

  function toggle(id: string, checked: boolean) {
    setSelected((current) =>
      checked ? [...current, id] : current.filter((value) => value !== id),
    );
  }

  function apply(label: string, next: Message[]) {
    setHistory({ snapshot: messages, label });
    setMessages(next);
    setSelected([]);
  }

  const noun = count === 1 ? "conversation" : "conversations";

  return (
    <div className="w-full max-w-md overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs">
      <div className="flex min-h-12 items-center gap-3 border-b px-3 py-2">
        <Checkbox
          aria-label="Select all conversations"
          checked={allSelected}
          indeterminate={count > 0 && !allSelected}
          disabled={messages.length === 0}
          onCheckedChange={(checked) =>
            setSelected(checked ? messages.map((message) => message.id) : [])
          }
        />
        <span className="min-w-0 flex-1 truncate text-sm font-medium tabular-nums">
          {count > 0 ? `${count} selected` : "Inbox"}
        </span>
        <Toolbar
          aria-label="Bulk actions"
          className="border-none p-0 shadow-none"
        >
          <ToolbarGroup aria-label="Change conversations">
            <ToolbarButton
              aria-label={`Archive ${count} ${noun}`}
              disabled={count === 0}
              onClick={() =>
                apply(
                  `${count} ${noun} archived`,
                  messages.filter((message) => !selected.includes(message.id)),
                )
              }
            >
              <ArchiveIcon aria-hidden="true" />
            </ToolbarButton>
            <ToolbarButton
              aria-label={`Mark ${count} ${noun} as read`}
              disabled={count === 0}
              onClick={() =>
                apply(
                  `${count} ${noun} marked as read`,
                  messages.map((message) =>
                    selected.includes(message.id)
                      ? { ...message, unread: false }
                      : message,
                  ),
                )
              }
            >
              <MailOpenIcon aria-hidden="true" />
            </ToolbarButton>
          </ToolbarGroup>
          <ToolbarSeparator />
          <ToolbarButton
            aria-label={`Delete ${count} ${noun}`}
            disabled={count === 0}
            className="hover:bg-destructive/10 hover:text-destructive"
            onClick={() =>
              apply(
                `${count} ${noun} moved to trash`,
                messages.filter((message) => !selected.includes(message.id)),
              )
            }
          >
            <Trash2Icon aria-hidden="true" />
          </ToolbarButton>
        </Toolbar>
      </div>

      {messages.length === 0 ? (
        <p className="px-4 py-10 text-center text-sm text-muted-foreground">
          Inbox zero. Nothing else needs you today.
        </p>
      ) : (
        <ul className="divide-y">
          {messages.map((message) => {
            const checked = selected.includes(message.id);
            return (
              <li
                key={message.id}
                data-selected={checked || undefined}
                className="flex items-start gap-3 px-3 py-2.5 data-selected:bg-accent/60"
              >
                <Checkbox
                  aria-label={`Select "${message.subject}" from ${message.from}`}
                  checked={checked}
                  onCheckedChange={(value) => toggle(message.id, value)}
                  className="mt-0.5"
                />
                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                  <div className="flex items-baseline justify-between gap-2">
                    <span
                      className={
                        message.unread
                          ? "truncate text-sm font-semibold"
                          : "truncate text-sm text-muted-foreground"
                      }
                    >
                      {message.from}
                    </span>
                    <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
                      {message.time}
                    </span>
                  </div>
                  <span
                    className={
                      message.unread
                        ? "truncate text-sm"
                        : "truncate text-sm text-muted-foreground"
                    }
                  >
                    {message.unread ? (
                      <span className="sr-only">Unread: </span>
                    ) : null}
                    {message.subject}
                  </span>
                </div>
              </li>
            );
          })}
        </ul>
      )}

      <div
        aria-live="polite"
        className="flex min-h-10 items-center justify-between gap-2 border-t bg-muted/40 px-3 text-xs text-muted-foreground"
      >
        {history ? (
          <>
            <span className="truncate">{history.label}</span>
            <button
              type="button"
              className="inline-flex h-7 shrink-0 items-center gap-1 rounded-md px-2 font-medium text-foreground outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50"
              onClick={() => {
                setMessages(history.snapshot);
                setHistory(null);
              }}
            >
              <Undo2Icon aria-hidden="true" className="size-3.5" />
              Undo
            </button>
          </>
        ) : (
          <span>
            {messages.filter((message) => message.unread).length} unread
          </span>
        )}
      </div>
    </div>
  );
}

TSX
"use client";

import { SearchIcon, UserPlusIcon } from "lucide-react";
import { useState } from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup } from "@/components/ui/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarInput,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

type Role = "owner" | "admin" | "member";

const members: {
  name: string;
  email: string;
  initials: string;
  role: Role;
  pending?: boolean;
}[] = [
  {
    name: "Amara Okafor",
    email: "amara@northwind.io",
    initials: "AO",
    role: "owner",
  },
  {
    name: "Daniel Brooks",
    email: "daniel@northwind.io",
    initials: "DB",
    role: "admin",
  },
  {
    name: "Lena Fischer",
    email: "lena@northwind.io",
    initials: "LF",
    role: "member",
  },
  {
    name: "Kenji Watanabe",
    email: "kenji@northwind.io",
    initials: "KW",
    role: "member",
    pending: true,
  },
  {
    name: "Sofia Marino",
    email: "sofia@northwind.io",
    initials: "SM",
    role: "admin",
  },
];

const filters = [
  { value: "all", label: "All" },
  { value: "admin", label: "Admins" },
  { value: "member", label: "Members" },
];

const roleLabel: Record<Role, string> = {
  owner: "Owner",
  admin: "Admin",
  member: "Member",
};

export default function Toolbar09() {
  const [filter, setFilter] = useState("all");
  const [query, setQuery] = useState("");

  const needle = query.trim().toLowerCase();
  const visible = members.filter((member) => {
    const matchesRole =
      filter === "all" ||
      member.role === filter ||
      (filter === "admin" && member.role === "owner");
    const matchesQuery =
      needle === "" ||
      member.name.toLowerCase().includes(needle) ||
      member.email.includes(needle);
    return matchesRole && matchesQuery;
  });

  return (
    <section
      aria-labelledby="toolbar-09-title"
      className="w-full max-w-lg rounded-xl border bg-card text-card-foreground shadow-xs"
    >
      <div className="flex items-start justify-between gap-4 p-4 pb-3">
        <div className="flex flex-col gap-0.5">
          <h3 id="toolbar-09-title" className="text-sm font-semibold">
            Team members
          </h3>
          <p className="text-xs text-muted-foreground">
            5 of 8 seats used on the Team plan.
          </p>
        </div>
      </div>

      <div className="px-4">
        <Toolbar
          aria-label="Filter team members"
          className="w-full flex-wrap bg-muted/40"
        >
          <ToggleGroup
            aria-label="Role"
            value={[filter]}
            onValueChange={(value) => {
              if (value.length > 0) setFilter(value[0] as string);
            }}
          >
            {filters.map((item) => (
              <ToolbarButton
                key={item.value}
                render={<Toggle size="sm" />}
                value={item.value}
              >
                {item.label}
              </ToolbarButton>
            ))}
          </ToggleGroup>
          <ToolbarSeparator className="hidden sm:block" />
          <ToolbarButton aria-label="Invite member">
            <UserPlusIcon aria-hidden="true" />
            <span className="hidden sm:inline">Invite</span>
          </ToolbarButton>
          <div className="relative min-w-0 flex-1 basis-40">
            <SearchIcon
              aria-hidden="true"
              className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground"
            />
            <ToolbarInput
              type="search"
              aria-label="Search by name or email"
              placeholder="Search members"
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              className="w-full bg-background pl-7"
            />
          </div>
        </Toolbar>
      </div>

      <ul aria-live="polite" className="flex flex-col p-2">
        {visible.length === 0 ? (
          <li className="px-2 py-8 text-center text-sm text-muted-foreground">
            No one matches “{query}”. Check the spelling or invite them.
          </li>
        ) : (
          visible.map((member) => (
            <li
              key={member.email}
              className="flex items-center gap-3 rounded-lg px-2 py-2"
            >
              <Avatar className="size-8">
                <AvatarImage src="/placeholder.svg" alt="" />
                <AvatarFallback className="text-xs">
                  {member.initials}
                </AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 flex-col">
                <span className="truncate text-sm font-medium">
                  {member.name}
                </span>
                <span className="truncate text-xs text-muted-foreground">
                  {member.email}
                </span>
              </div>
              {member.pending ? (
                <Badge variant="outline">Invited</Badge>
              ) : (
                <Badge variant="secondary">{roleLabel[member.role]}</Badge>
              )}
            </li>
          ))
        )}
      </ul>
    </section>
  );
}

TSX
"use client";

import {
  ArrowDownUpIcon,
  ChevronRightIcon,
  FileSpreadsheetIcon,
  FileTextIcon,
  FolderIcon,
  FolderPlusIcon,
  ImageIcon,
  LayoutGridIcon,
  ListIcon,
} from "lucide-react";
import { useState } from "react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup } from "@/components/ui/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarLink,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

type Entry = {
  name: string;
  kind: "folder" | "doc" | "sheet" | "image";
  size: number;
  modified: string;
  modifiedAt: number;
};

const path = ["Workspace", "Marketing", "Q4 launch"];

const initialEntries: Entry[] = [
  {
    name: "Press kit",
    kind: "folder",
    size: 0,
    modified: "Sep 22",
    modifiedAt: 22,
  },
  {
    name: "Launch brief.docx",
    kind: "doc",
    size: 48,
    modified: "Sep 24",
    modifiedAt: 24,
  },
  {
    name: "Budget forecast.xlsx",
    kind: "sheet",
    size: 212,
    modified: "Sep 19",
    modifiedAt: 19,
  },
  {
    name: "Hero banner.png",
    kind: "image",
    size: 1840,
    modified: "Sep 23",
    modifiedAt: 23,
  },
  {
    name: "Email sequence.docx",
    kind: "doc",
    size: 31,
    modified: "Sep 17",
    modifiedAt: 17,
  },
];

const icons = {
  folder: FolderIcon,
  doc: FileTextIcon,
  sheet: FileSpreadsheetIcon,
  image: ImageIcon,
};

const sortLabels: Record<string, string> = {
  name: "Name",
  modified: "Last modified",
  size: "File size",
};

function formatSize(entry: Entry) {
  if (entry.kind === "folder") return "Folder";
  return entry.size >= 1000
    ? `${(entry.size / 1000).toFixed(1)} MB`
    : `${entry.size} KB`;
}

export default function Toolbar10() {
  const [view, setView] = useState("grid");
  const [sort, setSort] = useState("name");
  const [entries, setEntries] = useState(initialEntries);

  const sorted = [...entries].sort((a, b) => {
    if (a.kind === "folder" && b.kind !== "folder") return -1;
    if (b.kind === "folder" && a.kind !== "folder") return 1;
    if (sort === "size") return b.size - a.size;
    if (sort === "modified") return b.modifiedAt - a.modifiedAt;
    return a.name.localeCompare(b.name);
  });

  function createFolder() {
    const taken = entries.filter((entry) =>
      entry.name.startsWith("Untitled folder"),
    ).length;
    setEntries((current) => [
      ...current,
      {
        name: taken === 0 ? "Untitled folder" : `Untitled folder ${taken + 1}`,
        kind: "folder",
        size: 0,
        modified: "Just now",
        modifiedAt: 99,
      },
    ]);
  }

  return (
    <div className="w-full max-w-xl overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs">
      <Toolbar
        aria-label="File browser"
        className="w-full flex-wrap rounded-none border-0 border-b bg-transparent px-2 shadow-none"
      >
        <nav
          aria-label="Folder path"
          className="flex min-w-0 basis-full sm:flex-1 sm:basis-auto"
        >
          <ol className="flex min-w-0 items-center">
            {path.map((segment, index) => {
              const current = index === path.length - 1;
              return (
                <li
                  key={segment}
                  className={
                    current
                      ? "flex min-w-0 items-center"
                      : "flex min-w-0 shrink items-center"
                  }
                >
                  {current ? (
                    <ToolbarLink
                      href="#"
                      onClick={(event) => event.preventDefault()}
                      aria-current="page"
                      className="truncate font-medium text-foreground"
                    >
                      {segment}
                    </ToolbarLink>
                  ) : (
                    <>
                      <ToolbarLink
                        href="#"
                        // Demo path: stay put instead of jumping to the page top.
                        onClick={(event) => event.preventDefault()}
                        className="min-w-0 truncate"
                      >
                        {segment}
                      </ToolbarLink>
                      <ChevronRightIcon
                        aria-hidden="true"
                        className="size-3.5 shrink-0 text-muted-foreground"
                      />
                    </>
                  )}
                </li>
              );
            })}
          </ol>
        </nav>

        <DropdownMenu>
          <ToolbarButton
            render={<DropdownMenuTrigger />}
            aria-label={`Sort by ${sortLabels[sort]}`}
          >
            <ArrowDownUpIcon aria-hidden="true" />
            <span className="hidden sm:inline">{sortLabels[sort]}</span>
          </ToolbarButton>
          <DropdownMenuContent align="end" className="w-44">
            <DropdownMenuGroup>
              <DropdownMenuLabel>Sort by</DropdownMenuLabel>
              <DropdownMenuRadioGroup
                value={sort}
                onValueChange={(value) => setSort(value as string)}
              >
                {Object.entries(sortLabels).map(([value, label]) => (
                  <DropdownMenuRadioItem
                    key={value}
                    value={value}
                    closeOnClick
                  >
                    {label}
                  </DropdownMenuRadioItem>
                ))}
              </DropdownMenuRadioGroup>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>

        <ToolbarSeparator />

        <ToggleGroup
          aria-label="Layout"
          value={[view]}
          onValueChange={(value) => {
            if (value.length > 0) setView(value[0] as string);
          }}
        >
          <ToolbarButton
            render={<Toggle />}
            value="grid"
            aria-label="Grid view"
          >
            <LayoutGridIcon aria-hidden="true" />
          </ToolbarButton>
          <ToolbarButton
            render={<Toggle />}
            value="list"
            aria-label="List view"
          >
            <ListIcon aria-hidden="true" />
          </ToolbarButton>
        </ToggleGroup>

        <ToolbarSeparator />

        <ToolbarGroup aria-label="Create">
          <ToolbarButton aria-label="New folder" onClick={createFolder}>
            <FolderPlusIcon aria-hidden="true" />
          </ToolbarButton>
        </ToolbarGroup>
      </Toolbar>

      {view === "grid" ? (
        <ul className="grid grid-cols-2 gap-2 p-3 sm:grid-cols-3">
          {sorted.map((entry) => {
            const Icon = icons[entry.kind];
            return (
              <li
                key={entry.name}
                className="flex flex-col gap-2 rounded-lg border bg-background p-3"
              >
                <Icon
                  aria-hidden="true"
                  className={
                    entry.kind === "folder"
                      ? "size-6 fill-muted text-muted-foreground"
                      : "size-6 text-muted-foreground"
                  }
                />
                <div className="flex min-w-0 flex-col">
                  <span className="truncate text-sm font-medium">
                    {entry.name}
                  </span>
                  <span className="text-xs text-muted-foreground tabular-nums">
                    {formatSize(entry)}
                  </span>
                </div>
              </li>
            );
          })}
        </ul>
      ) : (
        <ul className="flex flex-col divide-y">
          {sorted.map((entry) => {
            const Icon = icons[entry.kind];
            return (
              <li
                key={entry.name}
                className="flex items-center gap-3 px-4 py-2 text-sm"
              >
                <Icon
                  aria-hidden="true"
                  className="size-4 shrink-0 text-muted-foreground"
                />
                <span className="min-w-0 flex-1 truncate">{entry.name}</span>
                <span className="hidden w-16 text-right text-xs text-muted-foreground sm:block">
                  {entry.modified}
                </span>
                <span className="w-16 text-right text-xs text-muted-foreground tabular-nums">
                  {formatSize(entry)}
                </span>
              </li>
            );
          })}
        </ul>
      )}

      <p className="border-t px-4 py-2 text-xs text-muted-foreground">
        {entries.length} items · 2.1 MB of 15 GB used
      </p>
    </div>
  );
}

TSX
"use client";

import { ChevronLeftIcon, ChevronRightIcon, PlusIcon } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup } from "@/components/ui/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

type Meeting = {
  mine: boolean;
  day: string;
  date: string;
  time: string;
  title: string;
  tone: "chart-1" | "chart-2" | "chart-3";
};

const weeks: { label: string; short: string; events: Meeting[] }[] = [
  {
    label: "September 15 – 21, 2026",
    short: "Sep 15 – 21",
    events: [
      {
        day: "Tue",
        date: "16",
        time: "10:00",
        title: "Sprint planning",
        mine: true,
        tone: "chart-1",
      },
      {
        day: "Thu",
        date: "18",
        time: "14:30",
        title: "Design critique: checkout",
        mine: true,
        tone: "chart-2",
      },
    ],
  },
  {
    label: "September 22 – 28, 2026",
    short: "Sep 22 – 28",
    events: [
      {
        day: "Mon",
        date: "22",
        time: "09:30",
        title: "Weekly sync with Northwind",
        mine: true,
        tone: "chart-1",
      },
      {
        day: "Wed",
        date: "24",
        time: "13:00",
        title: "Interview: Senior iOS engineer",
        mine: false,
        tone: "chart-3",
      },
      {
        day: "Fri",
        date: "26",
        time: "16:00",
        title: "Release 4.2 go/no-go",
        mine: true,
        tone: "chart-2",
      },
    ],
  },
  {
    label: "Sep 29 – Oct 5, 2026",
    short: "Sep 29 – Oct 5",
    events: [
      {
        day: "Tue",
        date: "30",
        time: "11:00",
        title: "Quarterly business review",
        tone: "chart-1",
        mine: false,
      },
    ],
  },
];

const CURRENT_WEEK = 1;

const toneClass = {
  "chart-1": "bg-chart-1",
  "chart-2": "bg-chart-2",
  "chart-3": "bg-chart-3",
};

export default function Toolbar11() {
  const [week, setWeek] = useState(CURRENT_WEEK);
  const [scope, setScope] = useState("mine");

  const current = weeks[week];
  const events =
    scope === "mine"
      ? current.events.filter((event) => event.mine)
      : current.events;

  return (
    <section
      aria-label="Schedule"
      className="w-full max-w-md rounded-xl border bg-card text-card-foreground shadow-xs"
    >
      <Toolbar
        aria-label="Calendar navigation"
        className="w-full flex-wrap rounded-t-xl rounded-b-none border-0 border-b bg-transparent px-2 py-2 shadow-none"
      >
        <ToolbarButton
          disabled={week === CURRENT_WEEK}
          onClick={() => setWeek(CURRENT_WEEK)}
          className="border border-input"
        >
          Today
        </ToolbarButton>
        <ToolbarGroup aria-label="Change week">
          <ToolbarButton
            aria-label="Previous week"
            disabled={week === 0}
            onClick={() => setWeek((value) => value - 1)}
          >
            <ChevronLeftIcon aria-hidden="true" />
          </ToolbarButton>
          <ToolbarButton
            aria-label="Next week"
            disabled={week === weeks.length - 1}
            onClick={() => setWeek((value) => value + 1)}
          >
            <ChevronRightIcon aria-hidden="true" />
          </ToolbarButton>
        </ToolbarGroup>
        <h3
          aria-live="polite"
          className="min-w-0 flex-1 basis-24 truncate px-1 text-sm font-semibold"
        >
          <span className="sm:hidden">{current.short}</span>
          <span className="hidden sm:inline">{current.label}</span>
        </h3>
        <ToolbarSeparator className="hidden sm:block" />
        <ToggleGroup
          aria-label="Whose events"
          value={[scope]}
          onValueChange={(value) => {
            if (value.length > 0) setScope(value[0] as string);
          }}
        >
          <ToolbarButton render={<Toggle size="sm" />} value="mine">
            Mine
          </ToolbarButton>
          <ToolbarButton render={<Toggle size="sm" />} value="team">
            Team
          </ToolbarButton>
        </ToggleGroup>
      </Toolbar>

      {events.length === 0 ? (
        <p className="px-4 py-10 text-center text-sm text-muted-foreground">
          Nothing on your calendar this week. Switch to Team to see everyone’s meetings.
        </p>
      ) : (
        <ol className="flex flex-col gap-1 p-2">
          {events.map((event) => (
            <li
              key={event.title}
              className="flex items-center gap-3 rounded-lg px-2 py-2 hover:bg-muted/50"
            >
              <div className="flex w-9 shrink-0 flex-col items-center leading-none">
                <span className="text-[0.7rem] text-muted-foreground uppercase">
                  {event.day}
                </span>
                <span className="text-lg font-semibold tabular-nums">
                  {event.date}
                </span>
              </div>
              <span
                aria-hidden="true"
                className={`h-8 w-1 shrink-0 rounded-full ${toneClass[event.tone]}`}
              />
              <div className="flex min-w-0 flex-col">
                <span className="truncate text-sm font-medium">
                  {event.title}
                </span>
                <span className="text-xs text-muted-foreground tabular-nums">
                  {event.time} · 45 min
                </span>
              </div>
            </li>
          ))}
        </ol>
      )}

      <div className="border-t p-2">
        <Button
          variant="ghost"
          size="sm"
          className="w-full text-muted-foreground"
        >
          <PlusIcon aria-hidden="true" />
          Schedule a meeting
        </Button>
      </div>
    </section>
  );
}