@elabs-ai/components-ui 4.0.0

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,170 @@
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+} from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { useReducedMotion } from "@elabs-ai/components-tokens";
+import { cn } from "../../lib/cn";
+import { mergeRefs } from "../../lib/merge-refs";
+
+export const Tabs = TabsPrimitive.Root;
+
+/**
+ * Bring `trigger` inside the visible bounds of ITS OWN tab strip.
+ *
+ * Deliberately NOT `Element.scrollIntoView()`: that walks every scrollable
+ * ancestor up to the document, so a Tabs sitting below the fold yanks the
+ * whole PAGE (measured: `window.scrollY` 0 → 900 on a non-overflowing strip
+ * under a 3000px spacer). Scrolling the strip itself is the only movement
+ * this feature is entitled to make. It is also why nothing here throws under
+ * jsdom, where `scrollIntoView` does not exist: the overflow gate below
+ * returns first (`scrollWidth === clientWidth === 0`) and the scroll call is
+ * feature-detected.
+ */
+function scrollTriggerIntoStrip(trigger: HTMLElement, behavior: ScrollBehavior) {
+  const strip = trigger.closest<HTMLElement>('[role="tablist"]');
+  if (!strip) return;
+  // A strip that fits has nothing to scroll — keep it byte-for-byte inert.
+  if (strip.scrollWidth <= strip.clientWidth) return;
+
+  // Keep the strip's own padding as a gutter, so the tab lands inset (with its
+  // focus ring / active shadow visible) rather than flush against the edge.
+  const { paddingLeft, paddingRight } = getComputedStyle(strip);
+  const triggerRect = trigger.getBoundingClientRect();
+  const stripRect = strip.getBoundingClientRect();
+  const visibleLeft = stripRect.left + (parseFloat(paddingLeft) || 0);
+  const visibleRight = stripRect.right - (parseFloat(paddingRight) || 0);
+  const delta =
+    triggerRect.left < visibleLeft
+      ? triggerRect.left - visibleLeft
+      : triggerRect.right > visibleRight
+        ? triggerRect.right - visibleRight
+        : 0;
+  // Nothing to do: the tab is already fully visible — typically because the
+  // browser's own focus-scroll got there first on a keyboard/pointer
+  // activation. That check is what keeps this from fighting the browser.
+  if (delta === 0) return;
+
+  // An ABSOLUTE target, not `scrollBy(delta)`: a relative scroll issued while
+  // an earlier smooth scroll is still in flight accumulates against a moving
+  // offset and lands short. `scrollLeft + delta` is read in the same instant
+  // as the rects, so it is exact whatever the animation is doing.
+  const left = strip.scrollLeft + delta;
+  if (typeof strip.scrollTo === "function") strip.scrollTo({ left, behavior });
+  else strip.scrollLeft = left;
+}
+
+/**
+ * `overflow-x-auto` + `max-w-full` turn an overflowing tab strip into a
+ * scroll container instead of silently clipping it — a bare `inline-flex`
+ * has no bound on this element's own width, so without `max-w-full` it would
+ * just grow past its parent instead of scrolling. `justify-center-safe`
+ * (not `justify-center`) is required too: plain `justify-center` strands the
+ * first tab off the left edge once the set overflows; `safe` falls back to
+ * start-alignment on overflow while staying visually identical when the
+ * strip fits (see #344).
+ */
+export const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(function TabsList({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        "inline-flex h-9 max-w-full items-center justify-center-safe overflow-x-auto rounded-lg bg-muted p-1 text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(function TabsTrigger({ className, ...props }, ref) {
+  const innerRef = useRef<HTMLButtonElement>(null);
+  const mergedRef = useMemo(() => mergeRefs(ref, innerRef), [ref]);
+  // Honours the in-app tri-state motion preference on `ThemeProvider` as well
+  // as the OS setting, and degrades to OS-only outside a provider.
+  const reducedMotion = useReducedMotion();
+
+  // Keep the tab that BECOMES active inside the strip's visible bounds.
+  //
+  // Watching the attribute rather than reacting to a render is load-bearing on
+  // both counts:
+  //  - Radix flips `data-state` on the trigger it renders INSIDE this wrapper,
+  //    and only its own context consumer re-renders — this component does not.
+  //    A render-driven effect therefore never observes an activation at all
+  //    (measured: 8 effect runs for 8 triggers at mount, zero on any later
+  //    activation), so the scroll only ever ran when the CONSUMER's own state
+  //    changed.
+  //  - A MutationObserver fires on a genuine inactive → active TRANSITION and
+  //    never at mount, which is what stops a freshly-mounted Tabs from
+  //    scrolling anything (#344 shipped a version that scrolled the page 900px
+  //    on every mount).
+  useEffect(() => {
+    const node = innerRef.current;
+    if (!node) return;
+
+    const scrollIfActive = () => {
+      if (node.getAttribute("data-state") !== "active") return;
+      scrollTriggerIntoStrip(node, reducedMotion ? "auto" : "smooth");
+    };
+
+    const observer = new MutationObserver(scrollIfActive);
+    observer.observe(node, { attributes: true, attributeFilter: ["data-state"] });
+
+    // A relayout AFTER the scroll invalidates the target it was computed from:
+    // a webfont swapping in on a cold load (measured — a mono-everything theme's
+    // wider mono face left the last tab 45px outside the strip), or the strip
+    // being resized. Re-measure whenever the tab or the strip changes size;
+    // the delta check makes every unaffected pass a no-op.
+    const resizeObserver =
+      typeof ResizeObserver === "function" ? new ResizeObserver(scrollIfActive) : undefined;
+    resizeObserver?.observe(node);
+    const strip = node.closest<HTMLElement>('[role="tablist"]');
+    if (strip) resizeObserver?.observe(strip);
+
+    return () => {
+      observer.disconnect();
+      resizeObserver?.disconnect();
+    };
+  }, [reducedMotion]);
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={mergedRef}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-colors duration-fast",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "data-[state=active]:bg-surface-elevated data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(function TabsContent({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn(
+        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=active]:[--tw-ease:var(--ease-entrance)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/components/tag-input/index.ts

@@ -0,0 +1 @@
+export { TagInput, type TagInputProps } from "./tag-input";

package/src/components/tag-input/tag-input.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { useState } from "react";
+import { TagInput } from "./tag-input";
+
+const meta = {
+  title: "Forms/TagInput",
+  component: TagInput,
+  tags: ["autodocs"],
+  args: {
+    placeholder: "Add tag…",
+  },
+  argTypes: {
+    value: {
+      description: "Controlled tag list.",
+      control: false,
+      table: { category: "State" },
+    },
+    defaultValue: {
+      description: "Uncontrolled initial tag list.",
+      control: false,
+      table: { category: "State" },
+    },
+    max: {
+      description: "Maximum number of tags allowed.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    allowDuplicates: {
+      description: "Allow adding the same tag more than once.",
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    placeholder: {
+      description: "Placeholder text for the entry field.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    disabled: {
+      description: "Disables the input.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    delimiter: {
+      description: "Characters that trigger tag creation in addition to Enter (default `[',']`).",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    validate: {
+      description: "Function to validate a candidate tag before adding.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    onValueChange: {
+      description: "Called when the tag list changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof TagInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { defaultValue: ["react", "typescript"] },
+  // Types a new tag and presses Enter; confirms the badge appears.
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByRole("textbox");
+    await userEvent.click(input);
+    await userEvent.type(input, "storybook");
+    await userEvent.keyboard("{Enter}");
+    const badge = await canvas.findByText("storybook");
+    await expect(badge).toBeInTheDocument();
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [tags, setTags] = useState(["design", "system"]);
+    return (
+      <div className="flex flex-col gap-2 max-w-sm">
+        <TagInput value={tags} onValueChange={setTags} placeholder="Add tag…" />
+        <p className="text-body text-muted-foreground">Tags: {tags.join(", ") || "none"}</p>
+      </div>
+    );
+  },
+};
+
+export const WithMax: Story = {
+  args: { defaultValue: ["one", "two"], max: 3, placeholder: "Max 3 tags…" },
+};
+
+export const WithValidation: Story = {
+  args: {
+    defaultValue: [],
+    placeholder: "Only lowercase letters…",
+    validate: (tag) => {
+      if (!/^[a-z]+$/.test(tag)) return "Only lowercase letters allowed.";
+      return true;
+    },
+  },
+};
+
+export const AllowDuplicates: Story = {
+  args: { defaultValue: ["foo"], allowDuplicates: true, placeholder: "Duplicates OK…" },
+};
+
+export const Disabled: Story = {
+  args: { defaultValue: ["locked"], disabled: true },
+};
+
+export const Empty: Story = {
+  args: { placeholder: "Type and press Enter or comma…" },
+};

package/src/components/tag-input/tag-input.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TagInput } from "./tag-input";
+
+describe("TagInput", () => {
+  it("renders existing tags", () => {
+    render(<TagInput defaultValue={["react", "typescript"]} aria-label="Tags" />);
+    expect(screen.getByText("react")).toBeInTheDocument();
+    expect(screen.getByText("typescript")).toBeInTheDocument();
+  });
+
+  it("adds a tag on Enter", async () => {
+    const onValueChange = vi.fn();
+    render(<TagInput aria-label="Tags" onValueChange={onValueChange} />);
+    const input = screen.getByRole("textbox", { name: "Tags" });
+    await userEvent.type(input, "newtag{Enter}");
+    expect(onValueChange).toHaveBeenCalledWith(["newtag"]);
+  });
+
+  it("adds a tag on comma delimiter", async () => {
+    const onValueChange = vi.fn();
+    render(<TagInput aria-label="Tags" onValueChange={onValueChange} />);
+    const input = screen.getByRole("textbox", { name: "Tags" });
+    await userEvent.type(input, "alpha,");
+    expect(onValueChange).toHaveBeenCalledWith(["alpha"]);
+  });
+
+  it("removes a tag via remove button", async () => {
+    const onValueChange = vi.fn();
+    render(<TagInput defaultValue={["foo", "bar"]} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: "Remove foo" }));
+    expect(onValueChange).toHaveBeenCalledWith(["bar"]);
+  });
+
+  it("removes last tag on Backspace when input is empty", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <TagInput defaultValue={["one", "two"]} aria-label="Tags" onValueChange={onValueChange} />,
+    );
+    const input = screen.getByRole("textbox", { name: "Tags" });
+    await userEvent.click(input);
+    await userEvent.keyboard("{Backspace}");
+    expect(onValueChange).toHaveBeenCalledWith(["one"]);
+  });
+
+  it("does not add duplicate tags by default", async () => {
+    const onValueChange = vi.fn();
+    render(<TagInput defaultValue={["dup"]} aria-label="Tags" onValueChange={onValueChange} />);
+    const input = screen.getByRole("textbox", { name: "Tags" });
+    await userEvent.type(input, "dup{Enter}");
+    // error should appear
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("allows duplicates when allowDuplicates=true", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <TagInput
+        defaultValue={["dup"]}
+        aria-label="Tags"
+        allowDuplicates
+        onValueChange={onValueChange}
+      />,
+    );
+    const input = screen.getByRole("textbox", { name: "Tags" });
+    await userEvent.type(input, "dup{Enter}");
+    expect(onValueChange).toHaveBeenCalledWith(["dup", "dup"]);
+  });
+
+  it("shows validation error message when validate returns a string", async () => {
+    render(<TagInput aria-label="Tags" validate={(t) => (t.length < 3 ? "Too short." : true)} />);
+    const input = screen.getByRole("textbox", { name: "Tags" });
+    await userEvent.type(input, "ab{Enter}");
+    expect(screen.getByRole("alert")).toHaveTextContent("Too short.");
+  });
+
+  it("enforces max tag count", async () => {
+    render(<TagInput defaultValue={["a", "b"]} max={2} aria-label="Tags" />);
+    // input should be disabled when at max
+    expect(screen.getByRole("textbox", { name: "Tags" })).toBeDisabled();
+  });
+
+  it("prevents Enter from submitting a wrapping form", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <form onSubmit={onSubmit}>
+        <TagInput aria-label="Tags" />
+        <button type="submit">Submit</button>
+      </form>,
+    );
+    const input = screen.getByRole("textbox", { name: "Tags" });
+    await userEvent.type(input, "hello{Enter}");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});

package/src/components/tag-input/tag-input.tsx

@@ -0,0 +1,253 @@
+// a2ui.exposed: yes
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent,
+} from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Badge } from "../badge";
+import { InputGroup } from "../input-group";
+
+export interface TagInputProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "defaultValue" | "onChange"
+> {
+  /** Controlled tag list. */
+  value?: string[];
+  /** Uncontrolled initial tag list. */
+  defaultValue?: string[];
+  /** Called when the tag list changes. */
+  onValueChange?: (value: string[]) => void;
+  /** Maximum number of tags allowed. */
+  max?: number;
+  /**
+   * Validate a candidate tag before it is added.
+   * Return `true` to accept, `false` to silently reject, or a string
+   * to reject and show as an inline error message.
+   */
+  validate?: (tag: string) => boolean | string;
+  /**
+   * Characters (or strings) that trigger tag creation in addition to Enter.
+   * Defaults to `[","]`.
+   */
+  delimiter?: string[];
+  /** Allow duplicate tags (default false). */
+  allowDuplicates?: boolean;
+  /** Placeholder text for the entry field. */
+  placeholder?: string;
+  /** Whether the input is disabled. */
+  disabled?: boolean;
+  /** id for the underlying text input (useful for external <label>). */
+  id?: string;
+  /** Name forwarded to the underlying input. */
+  name?: string;
+  /** aria-label for the underlying text input. */
+  "aria-label"?: string;
+  /** aria-labelledby for the underlying text input. */
+  "aria-labelledby"?: string;
+}
+
+/**
+ * TagInput — chip-style multi-value text entry.
+ *
+ * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.
+ * Enter + configurable delimiters (default `[","]`) add a tag.
+ * Backspace on an empty field removes the last tag.
+ * Inline validation errors render with `role="alert"`.
+ */
+export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(function TagInput(
+  {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    max,
+    validate,
+    delimiter = [","],
+    allowDuplicates = false,
+    placeholder,
+    disabled,
+    id,
+    name,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const isControlled = valueProp !== undefined;
+  const [internalTags, setInternalTags] = useState<string[]>(defaultValue ?? []);
+  const [inputValue, setInputValue] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const tags = useMemo(
+    () => (isControlled ? (valueProp ?? []) : internalTags),
+    [isControlled, valueProp, internalTags],
+  );
+
+  const commit = useCallback(
+    (next: string[]) => {
+      if (!isControlled) setInternalTags(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const addTag = useCallback(
+    (raw: string) => {
+      const tag = raw.trim();
+      if (!tag) return;
+
+      if (max !== undefined && tags.length >= max) {
+        setError(`Maximum of ${max} tags reached.`);
+        return;
+      }
+
+      if (!allowDuplicates && tags.includes(tag)) {
+        setError("Duplicate tag.");
+        return;
+      }
+
+      if (validate) {
+        const result = validate(tag);
+        if (result === false) return;
+        if (typeof result === "string") {
+          setError(result);
+          return;
+        }
+      }
+
+      setError(null);
+      commit([...tags, tag]);
+      setInputValue("");
+    },
+    [tags, max, allowDuplicates, validate, commit],
+  );
+
+  const removeTag = useCallback(
+    (index: number) => {
+      const next = tags.filter((_, i) => i !== index);
+      setError(null);
+      commit(next);
+    },
+    [tags, commit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        // Always prevent form submission when used inside a <form>
+        e.preventDefault();
+        addTag(inputValue);
+        return;
+      }
+
+      if (e.key === "Backspace" && inputValue === "" && tags.length > 0) {
+        e.preventDefault();
+        removeTag(tags.length - 1);
+        return;
+      }
+
+      // Check delimiter characters (e.g. comma)
+      for (const delim of delimiter) {
+        if (delim.length === 1 && e.key === delim) {
+          e.preventDefault();
+          addTag(inputValue);
+          return;
+        }
+      }
+    },
+    [inputValue, tags, delimiter, addTag, removeTag],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value;
+      // Handle paste or typed multi-char delimiters
+      const hasDelimiter = delimiter.some((d) => val.includes(d));
+      if (hasDelimiter) {
+        const parts = val.split(new RegExp(`[${delimiter.map((d) => escapeRegex(d)).join("")}]`));
+        const toAdd = parts.slice(0, -1);
+        const remaining = parts[parts.length - 1] ?? "";
+        for (const part of toAdd) {
+          addTag(part);
+        }
+        setInputValue(remaining);
+      } else {
+        setInputValue(val);
+        setError(null);
+      }
+    },
+    [delimiter, addTag],
+  );
+
+  const atMax = max !== undefined && tags.length >= max;
+
+  return (
+    <div ref={ref} className={cn("flex flex-col gap-1", className)} {...props}>
+      <InputGroup
+        className="h-auto min-h-9 flex-wrap gap-1 px-2 py-1 cursor-text"
+        onClick={() => inputRef.current?.focus()}
+      >
+        {tags.map((tag, i) => (
+          <Badge key={`${tag}-${i}`} variant="secondary" className="gap-1 pe-1 shrink-0">
+            <span className="max-w-[12rem] truncate">{tag}</span>
+            <button
+              type="button"
+              aria-label={`Remove ${tag}`}
+              disabled={disabled}
+              onClick={(e) => {
+                e.stopPropagation();
+                removeTag(i);
+              }}
+              className={cn(
+                "rounded-full p-0.5 transition-colors",
+                "hover:bg-secondary-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "disabled:pointer-events-none disabled:opacity-50",
+              )}
+            >
+              <X className="size-3" aria-hidden="true" />
+            </button>
+          </Badge>
+        ))}
+        <input
+          ref={inputRef}
+          id={id}
+          name={name}
+          type="text"
+          value={inputValue}
+          placeholder={atMax ? undefined : placeholder}
+          disabled={disabled || atMax}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          aria-invalid={error ? "true" : undefined}
+          data-slot="input-group-control"
+          className={cn(
+            "min-w-[6rem] flex-1 bg-transparent text-sm outline-none",
+            "placeholder:text-muted-foreground",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+          )}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </InputGroup>
+      {error && (
+        <p role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+});
+
+function escapeRegex(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/src/components/team-switcher/index.ts

@@ -0,0 +1 @@
+export { TeamSwitcher, type TeamSwitcherProps, type TeamSwitcherTeam } from "./team-switcher";

package/src/components/team-switcher/team-switcher.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SidebarProvider } from "../sidebar";
+import { TeamSwitcher } from "./team-switcher";
+
+const IconStub = ({ className }: { className?: string }) => (
+  <svg className={className} aria-hidden="true" />
+);
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <SidebarProvider>{children}</SidebarProvider>;
+}
+
+describe("TeamSwitcher", () => {
+  it("renders the active team name and plan", () => {
+    render(
+      <Wrapper>
+        <TeamSwitcher
+          teams={[
+            { name: "Acme Inc.", logo: IconStub, plan: "Enterprise" },
+            { name: "Beta Corp.", logo: IconStub, plan: "Free" },
+          ]}
+        />
+      </Wrapper>,
+    );
+    expect(screen.getByText("Acme Inc.")).toBeInTheDocument();
+    expect(screen.getByText("Enterprise")).toBeInTheDocument();
+  });
+
+  it("renders nothing when teams array is empty", () => {
+    const { container } = render(
+      <Wrapper>
+        <TeamSwitcher teams={[]} />
+      </Wrapper>,
+    );
+    // No active team → inner returns null, so no trigger button
+    expect(container.querySelector("[data-radix-dropdown-menu-trigger]")).toBeNull();
+  });
+});