@actioneer/ads 1.0.6 → 1.0.8

package/examples/README.md

@@ -0,0 +1,30 @@
+# ADS sample screens
+
+Full screens built only from `@actioneer/ads` exports. Open them to see how the
+components are meant to be composed, or copy one into your app as a starting
+point and swap the sample data for your own.
+
+Before rendering any of them, finish the package setup in the main README:
+import `@actioneer/ads/styles.css` right after `tailwindcss`, and wrap your app
+root in `MotionConfig`, `ToastProvider` and `TooltipProvider`.
+
+| File | Export | What it shows |
+|---|---|---|
+| `agents-screen.tsx` | `AgentsScreen` | A full list page: `PageHeader` with a primary action, a summary strip, `Tabs` with counts leading a `SearchDisclosure`, a filter `Dropdown`, a sortable `Table` with clickable rows and a pinned action column, per-row actions with `Tooltip`s, and filtered `EmptyState`s. |
+| `settings-screen.tsx` | `SettingsScreen` | A settings card: `Card` header with a status `Badge`, an `InputField`, a `SettingList` of `SettingRow`s with `Switch` and `Button` controls, and one primary action. |
+| `workspace-header.tsx` | `WorkspaceHeaderScreen` | A page header with a status `Badge` and trailing actions, then `Tabs` with counts whose panels hold `Card`s. |
+
+```tsx
+// app/agents/page.tsx
+"use client";
+
+import { AgentsScreen } from "./agents-screen"; // copied from node_modules/@actioneer/ads/examples
+
+export default function Page() {
+  return <AgentsScreen />;
+}
+```
+
+These are the same compositions the ADS Storybook renders under
+**Recipes**, so what you see there is what these files produce. Icons come from
+`@actioneer/ads/lib/icons`; never install a second icon package.

package/examples/agents-screen.tsx

@@ -0,0 +1,477 @@
+/**
+ * Agents screen — a full list page built only from ADS exports.
+ *
+ * What it shows: a PageHeader with a primary action, a summary strip, Tabs
+ * with counts leading a trailing SearchDisclosure, a filter Dropdown, a
+ * sortable Table whose rows open a record and keep a pinned action column,
+ * per-row Dropdown actions with Tooltips, and filtered EmptyStates.
+ *
+ * Copy it into your app and replace the sample AGENTS data with your own.
+ */
+import * as React from "react";
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger,
+  EmptyState,
+  PageHeader,
+  SearchDisclosure,
+  Tab,
+  TabList,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Tooltip,
+  type SortDescriptor,
+} from "@actioneer/ads";
+import {
+  Close,
+  Copy,
+  Eye,
+  Filter,
+  MoreHorizontal,
+  PhoneIncoming,
+  Search,
+  Trash,
+} from "@actioneer/ads/lib/icons";
+
+export type AgentStatus = "deployed" | "not-deployed";
+export type AgentUsage = "all" | "deployed" | "not-deployed" | "hotlines" | "campaigns";
+export type ManualFilter = "original" | "duplicated" | "has-calls" | "no-calls";
+
+export interface AgentRecord {
+  id: string;
+  name: string;
+  type: string;
+  updated: string;
+  updatedSort: number;
+  status: AgentStatus;
+  lineage?: string;
+  hotlines: number;
+  campaigns: number;
+  steps: number;
+  calls: number;
+}
+
+export const AGENTS: AgentRecord[] = [
+  { id: "simran", name: "Simran", type: "Voice Agent", updated: "Aug 25, 2026", updatedSort: 20260825, status: "deployed", hotlines: 0, campaigns: 1, steps: 0, calls: 0 },
+  { id: "vivaan", name: "Vivaan", type: "Voice Agent", updated: "Aug 26, 2026", updatedSort: 20260826, status: "not-deployed", lineage: "Simran", hotlines: 0, campaigns: 0, steps: 0, calls: 0 },
+  { id: "manish", name: "Manish", type: "Voice Agent", updated: "Aug 26, 2026", updatedSort: 20260826, status: "not-deployed", lineage: "Esha", hotlines: 0, campaigns: 0, steps: 0, calls: 0 },
+  { id: "esha", name: "Esha", type: "Voice Agent", updated: "Aug 26, 2026", updatedSort: 20260826, status: "not-deployed", lineage: "Simran", hotlines: 0, campaigns: 0, steps: 0, calls: 0 },
+  { id: "ananya", name: "Ananya", type: "KYC completion support", updated: "Aug 6, 2026", updatedSort: 20260806, status: "deployed", hotlines: 0, campaigns: 5, steps: 28, calls: 96 },
+  { id: "aarohi", name: "Aarohi", type: "EMI due-date reminder", updated: "Aug 6, 2026", updatedSort: 20260806, status: "deployed", hotlines: 0, campaigns: 4, steps: 28, calls: 96 },
+];
+
+export const USAGE_TABS = [
+  { value: "all", label: "All", count: 6 },
+  { value: "deployed", label: "Deployed", count: 3 },
+  { value: "not-deployed", label: "Not yet deployed", count: 3 },
+  { value: "hotlines", label: "On hotlines", count: 0 },
+  { value: "campaigns", label: "In campaigns", count: 3 },
+] as const;
+
+export const MANUAL_FILTERS = [
+  { value: "original", label: "Original agents" },
+  { value: "duplicated", label: "Duplicated agents" },
+  { value: "has-calls", label: "Has calls" },
+  { value: "no-calls", label: "No calls" },
+] as const;
+
+export function ScreenFrame({ children }: { children: React.ReactNode }) {
+  return <div className="min-h-screen bg-card p-5 text-foreground">{children}</div>;
+}
+
+export function AgentStatusAvatar({ name, status }: { name: string; status: AgentStatus }) {
+  const label = status === "deployed" ? "Deployed" : "Not yet deployed";
+  return (
+    <span className="relative inline-flex shrink-0">
+      <Avatar name={name} size="sm" />
+      <span
+        aria-hidden="true"
+        className={status === "deployed"
+          ? "absolute bottom-0 right-0 size-2 rounded-full bg-success ring-1 ring-card"
+          : "absolute bottom-0 right-0 size-2 rounded-full bg-wg6 ring-1 ring-card"}
+      />
+      <span className="sr-only">{label}</span>
+    </span>
+  );
+}
+
+export function AgentIdentity({ agent }: { agent: AgentRecord }) {
+  return (
+    <div className="flex min-w-0 items-center gap-3">
+      <AgentStatusAvatar name={agent.name} status={agent.status} />
+      <div className="min-w-0">
+        <div className="truncate text-m font-medium text-foreground">{agent.name}</div>
+        {agent.lineage && (
+          <div className="truncate text-s text-secondary">
+            Copy of {agent.lineage}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function AgentSummaryStripContent() {
+  const items = [
+    { label: "Deployed", value: "3", detail: "of 6 agents" },
+    { label: "In campaigns", value: "3", detail: "ready to engage" },
+    { label: "Call activity", value: "192", detail: "all-time calls" },
+  ];
+  return (
+    <section
+      aria-label="Agent summary"
+      className="grid min-h-20 grid-cols-1 gap-4 rounded-m border border-table-stroke px-4 py-5 sm:grid-cols-3 sm:gap-0"
+    >
+      {items.map((item, index) => (
+        <div
+          key={item.label}
+          className={index === 0 ? "min-w-0 sm:pr-6" : "min-w-0 border-table-stroke sm:border-l sm:px-6"}
+        >
+          <p className="text-s font-medium uppercase tracking-wide text-table-header-foreground">
+            {item.label}
+          </p>
+          <p className="mt-2 flex items-baseline gap-2">
+            <span className="text-xl font-medium leading-none tabular-nums text-foreground">{item.value}</span>
+            <span className="text-m text-muted-foreground">{item.detail}</span>
+          </p>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+export function AgentRowActions({
+  name,
+  defaultOpen = false,
+  focusTrigger = false,
+}: {
+  name: string;
+  defaultOpen?: boolean;
+  focusTrigger?: boolean;
+}) {
+  return (
+    <Dropdown defaultOpen={defaultOpen}>
+      <Tooltip content={`Actions for ${name}`}>
+        <span className="inline-flex">
+          <DropdownTrigger>
+            <Button
+              autoFocus={focusTrigger}
+              variant="ghost"
+              size="icon-sm"
+              aria-label={`Actions for ${name}`}
+              className="enabled:hover:bg-card enabled:hover:text-foreground enabled:active:bg-card enabled:active:text-foreground"
+            >
+              <MoreHorizontal aria-hidden="true" />
+            </Button>
+          </DropdownTrigger>
+        </span>
+      </Tooltip>
+      <DropdownContent align="end" autoFocusFirstItem={defaultOpen}>
+        <DropdownItem startContent={<Eye aria-hidden="true" />}>See details</DropdownItem>
+        <DropdownItem startContent={<Copy aria-hidden="true" />}>Duplicate</DropdownItem>
+        <DropdownItem danger startContent={<Trash aria-hidden="true" />}>Delete</DropdownItem>
+      </DropdownContent>
+    </Dropdown>
+  );
+}
+
+export function matchesUsage(agent: AgentRecord, usage: AgentUsage) {
+  if (usage === "deployed") return agent.status === "deployed";
+  if (usage === "not-deployed") return agent.status === "not-deployed";
+  if (usage === "hotlines") return agent.hotlines > 0;
+  if (usage === "campaigns") return agent.campaigns > 0;
+  return true;
+}
+
+export function matchesManualFilter(agent: AgentRecord, filter: ManualFilter) {
+  if (filter === "original") return !agent.lineage;
+  if (filter === "duplicated") return Boolean(agent.lineage);
+  if (filter === "has-calls") return agent.calls > 0;
+  return agent.calls === 0;
+}
+
+export function sortAgents(agents: AgentRecord[], descriptor?: SortDescriptor) {
+  if (!descriptor) return agents;
+  const direction = descriptor.direction === "ascending" ? 1 : -1;
+  const value = (agent: AgentRecord): string | number => {
+    if (descriptor.column === "type") return agent.type;
+    if (descriptor.column === "updated") return agent.updatedSort;
+    if (descriptor.column === "hotlines") return agent.hotlines;
+    if (descriptor.column === "campaigns") return agent.campaigns;
+    if (descriptor.column === "steps") return agent.steps;
+    if (descriptor.column === "calls") return agent.calls;
+    return agent.name;
+  };
+  return [...agents].sort((left, right) => {
+    const a = value(left);
+    const b = value(right);
+    const result = typeof a === "number" && typeof b === "number"
+      ? a - b
+      : String(a).localeCompare(String(b));
+    return result * direction;
+  });
+}
+
+export function AgentsFilterMenu({
+  filters,
+  onAdd,
+}: {
+  filters: ManualFilter[];
+  onAdd: (filter: ManualFilter) => void;
+}) {
+  return (
+    <Dropdown>
+      <Tooltip content="Add filter">
+        <span className="inline-flex">
+          <DropdownTrigger>
+            <Button
+              variant="outline"
+              size="icon-sm"
+              aria-label="Add filter"
+              data-active={filters.length > 0 || undefined}
+              className="aria-expanded:text-action-primary-text data-[active=true]:text-action-primary-text"
+            >
+              <Filter aria-hidden="true" />
+              {filters.length > 0 && (
+                <span aria-hidden="true" className="absolute -right-1 -top-1 size-2 rounded-full bg-danger" />
+              )}
+            </Button>
+          </DropdownTrigger>
+        </span>
+      </Tooltip>
+      <DropdownContent align="end" autoFocusFirstItem>
+        {MANUAL_FILTERS.map((filter) => (
+          <DropdownItem
+            key={filter.value}
+            disabled={filters.includes(filter.value)}
+            onSelect={() => onAdd(filter.value)}
+          >
+            {filter.label}
+          </DropdownItem>
+        ))}
+      </DropdownContent>
+    </Dropdown>
+  );
+}
+
+export function AgentsEmptyState({
+  title,
+  description,
+  hotline = false,
+  action,
+}: {
+  title: string;
+  description?: string;
+  hotline?: boolean;
+  action?: "view-all" | "clear";
+}) {
+  return (
+    <div className="rounded-m border border-table-stroke bg-card">
+      <EmptyState
+        icon={hotline ? <PhoneIncoming aria-hidden="true" /> : <Search aria-hidden="true" />}
+        title={title}
+        description={description}
+        action={action === "view-all"
+          ? <Button size="sm" variant="outline">View all agents</Button>
+          : action === "clear"
+            ? <Button size="sm" variant="outline">Clear filters</Button>
+            : undefined}
+      />
+    </div>
+  );
+}
+
+export function AgentsComposition() {
+  const toolbarRef = React.useRef<HTMLDivElement>(null);
+  const [usage, setUsage] = React.useState<AgentUsage>("all");
+  const [search, setSearch] = React.useState("");
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [manualFilters, setManualFilters] = React.useState<ManualFilter[]>([]);
+  const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>();
+  const [toolbarIsConstrained, setToolbarIsConstrained] = React.useState(false);
+
+  React.useEffect(() => {
+    const toolbar = toolbarRef.current;
+    if (!toolbar) return;
+
+    const update = () => setToolbarIsConstrained(toolbar.clientWidth < 820);
+    update();
+
+    const observer = new ResizeObserver(update);
+    observer.observe(toolbar);
+    return () => observer.disconnect();
+  }, []);
+
+  const filtered = AGENTS.filter((agent) => {
+    const query = search.trim().toLowerCase();
+    const matchesQuery = !query || `${agent.name} ${agent.type} ${agent.lineage ?? ""}`.toLowerCase().includes(query);
+    return matchesQuery && matchesUsage(agent, usage) && manualFilters.every((filter) => matchesManualFilter(agent, filter));
+  });
+  const rows = sortAgents(filtered, sortDescriptor);
+  const hasManualQuery = Boolean(search.trim() || manualFilters.length > 0);
+  const compactTabs = searchOpen || toolbarIsConstrained;
+
+  const clearQuery = () => {
+    setSearch("");
+    setManualFilters([]);
+  };
+
+  let emptyTitle = "No agents match";
+  let emptyDescription: string | undefined = hasManualQuery ? "No agents match the applied search or manual filters." : undefined;
+  let emptyHotline = false;
+  if (!hasManualQuery && usage === "hotlines") {
+    emptyTitle = "No agents on hotlines";
+    emptyDescription = undefined;
+    emptyHotline = true;
+  } else if (!hasManualQuery && usage === "deployed") {
+    emptyTitle = "No deployed agents";
+  } else if (!hasManualQuery && usage === "not-deployed") {
+    emptyTitle = "All agents are deployed";
+  } else if (!hasManualQuery && usage === "campaigns") {
+    emptyTitle = "No agents in campaigns";
+  }
+
+  return (
+    <ScreenFrame>
+      <PageHeader
+        title="Agents"
+        actions={<Button size="sm">New agent</Button>}
+      />
+
+      <div className="mt-10">
+        <AgentSummaryStripContent />
+      </div>
+
+      <div className="mt-10">
+        <div ref={toolbarRef} className="flex w-full items-center gap-2">
+          <Tabs
+            className="min-w-0 flex-1 gap-0"
+            value={usage}
+            onValueChange={(value) => setUsage(value as AgentUsage)}
+          >
+            <TabList aria-label="Filter agents by usage" className="min-w-max">
+              {USAGE_TABS.map((tab, index) =>
+                compactTabs && index > 2 ? null : (
+                  <Tab key={tab.value} value={tab.value} count={tab.count}>
+                    {tab.label}
+                  </Tab>
+                ),
+              )}
+              {compactTabs && (
+                <button
+                  type="button"
+                  aria-label="Show 2 more usage filters"
+                  onClick={() => setSearchOpen(false)}
+                  className="relative -mb-px inline-flex h-8 items-center justify-center whitespace-nowrap text-l font-normal text-secondary outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring"
+                >
+                  +2 more
+                </button>
+              )}
+            </TabList>
+          </Tabs>
+          <div className="flex shrink-0 items-center gap-2">
+            <SearchDisclosure
+              value={search}
+              onValueChange={setSearch}
+              open={searchOpen}
+              onOpenChange={setSearchOpen}
+              placeholder="Search agents"
+              inputLabel="Search agents by name or type"
+              triggerLabel="Search agents"
+            />
+            <AgentsFilterMenu
+              filters={manualFilters}
+              onAdd={(filter) => setManualFilters((current) => current.includes(filter) ? current : [...current, filter])}
+            />
+          </div>
+        </div>
+
+        {manualFilters.length > 0 && (
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            {manualFilters.map((filter) => {
+              const label = MANUAL_FILTERS.find((item) => item.value === filter)?.label ?? filter;
+              return (
+                <Button
+                  key={filter}
+                  variant="ghost"
+                  size="xs"
+                  aria-label={`Remove filter ${label}`}
+                  onClick={() => setManualFilters((current) => current.filter((item) => item !== filter))}
+                  endContent={<Close aria-hidden="true" />}
+                  className="bg-action-primary-soft text-s text-action-primary-text [&>span]:gap-2"
+                >
+                  {label}
+                </Button>
+              );
+            })}
+            <Button
+              variant="ghost"
+              size="xs"
+              onClick={() => setManualFilters([])}
+              className="text-s enabled:hover:bg-muted enabled:hover:text-foreground enabled:active:bg-muted enabled:active:text-foreground"
+            >
+              Clear
+            </Button>
+          </div>
+        )}
+
+        <section aria-label="Agents" className="mt-6">
+          {rows.length === 0 ? (
+            <EmptyState
+              icon={emptyHotline ? <PhoneIncoming aria-hidden="true" /> : <Search aria-hidden="true" />}
+              title={emptyTitle}
+              description={emptyDescription}
+              action={hasManualQuery
+                ? <Button size="sm" variant="outline" onClick={clearQuery}>Clear filters</Button>
+                : <Button size="sm" variant="outline" onClick={() => setUsage("all")}>View all agents</Button>}
+            />
+          ) : (
+            <Table
+              aria-label="Your agents"
+              sortDescriptor={sortDescriptor}
+              onSortChange={setSortDescriptor}
+            >
+              <TableHeader>
+                <TableRow>
+                  <TableColumn sortKey="agent">Agent</TableColumn>
+                  <TableColumn sortKey="type">Type</TableColumn>
+                  <TableColumn sortKey="updated" align="right">Updated</TableColumn>
+                  <TableColumn sortKey="hotlines" align="right">Hotlines</TableColumn>
+                  <TableColumn sortKey="campaigns" align="right">Campaigns</TableColumn>
+                  <TableColumn sortKey="steps" align="right">Steps</TableColumn>
+                  <TableColumn sortKey="calls" align="right">Calls</TableColumn>
+                  <TableColumn allowsSorting={false} align="right" aria-label="Actions" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.map((agent) => (
+                  <TableRow key={agent.id}>
+                    <TableCell><AgentIdentity agent={agent} /></TableCell>
+                    <TableCell className="text-secondary">{agent.type}</TableCell>
+                    <TableCell align="right" className="tabular-nums text-secondary" sortValue={agent.updatedSort}>{agent.updated}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{agent.hotlines}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{agent.campaigns}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{agent.steps}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{agent.calls}</TableCell>
+                    <TableCell align="right"><AgentRowActions name={agent.name} /></TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </section>
+      </div>
+    </ScreenFrame>
+  );
+}
+
+export { AgentsComposition as AgentsScreen };

package/examples/settings-screen.tsx

@@ -0,0 +1,90 @@
+/**
+ * Settings screen — a settings card built only from ADS exports.
+ *
+ * What it shows: Card header with a status Badge, an InputField, a SettingList
+ * of SettingRows whose trailing control is a Switch or Button, and a footer
+ * with one primary action.
+ */
+import * as React from "react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  InputField,
+  SettingList,
+  SettingRow,
+  Switch,
+} from "@actioneer/ads";
+import {
+  Database,
+  Settings,
+  User,
+} from "@actioneer/ads/lib/icons";
+
+export function SettingsScreen() {
+  const [digest, setDigest] = React.useState(false);
+  const [sharing, setSharing] = React.useState(true);
+
+  return (
+    <Card className="mx-auto w-full max-w-2xl">
+      <CardHeader>
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex min-w-0 flex-col gap-1">
+            <CardTitle>Workspace preferences</CardTitle>
+            <CardDescription>
+              A canonical settings composition: context first, grouped controls second, one clear save action.
+            </CardDescription>
+          </div>
+          <Badge variant="dot" color="success">Saved</Badge>
+        </div>
+      </CardHeader>
+
+      <CardBody className="flex flex-col gap-5">
+        <InputField
+          label="Workspace name"
+          defaultValue="Actioneer research"
+          description="Shown to everyone in this workspace."
+        />
+
+        <SettingList aria-label="Workspace settings">
+          <SettingRow
+            icon={<User />}
+            label="Weekly digest"
+            description="Receive a concise summary every Monday."
+            action={
+              <Switch checked={digest} onCheckedChange={setDigest}>
+                Weekly digest
+              </Switch>
+            }
+          />
+          <SettingRow
+            icon={<Database />}
+            label="Source sharing"
+            description="Allow teammates to reuse connected sources."
+            action={
+              <Switch checked={sharing} onCheckedChange={setSharing}>
+                Source sharing
+              </Switch>
+            }
+          />
+          <SettingRow
+            icon={<Settings />}
+            label="Advanced controls"
+            description="Manage retention and export permissions."
+            action={<Button variant="ghost" size="sm">Manage</Button>}
+          />
+        </SettingList>
+      </CardBody>
+
+      <CardFooter className="justify-end gap-2">
+        <Button variant="ghost">Cancel</Button>
+        <Button>Save changes</Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/examples/workspace-header.tsx

@@ -0,0 +1,71 @@
+/**
+ * Workspace header — a page header and tabbed body built only from ADS exports.
+ *
+ * What it shows: title with a status Badge, trailing page actions, and Tabs
+ * with counts whose panels hold Cards.
+ */
+import {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+} from "@actioneer/ads";
+import {
+  ArrowUpRight,
+  Plus,
+} from "@actioneer/ads/lib/icons";
+
+export function WorkspaceHeaderScreen() {
+  return (
+    <section className="mx-auto flex w-full max-w-4xl flex-col gap-6">
+      <header className="flex flex-col items-start gap-5 sm:flex-row sm:justify-between">
+        <div className="flex w-full min-w-0 flex-1 flex-col gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <h1 className="text-2xl font-medium text-foreground">Research workspace</h1>
+            <Badge variant="dot" color="success">Connected</Badge>
+          </div>
+          <p className="max-w-2xl text-base text-muted-foreground">
+            Keep status beside the title, supporting context below, and primary actions at the far edge.
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Button variant="outline" endContent={<ArrowUpRight aria-hidden />}>Share</Button>
+          <Button startContent={<Plus aria-hidden />}>New board</Button>
+        </div>
+      </header>
+
+      <Tabs defaultValue="boards">
+        <TabList aria-label="Workspace sections">
+          <Tab value="boards" count={12}>Boards</Tab>
+          <Tab value="sources" count={6}>Sources</Tab>
+          <Tab value="members" count={8}>Members</Tab>
+        </TabList>
+        <TabPanel value="boards">
+          <Card>
+            <CardBody>
+              <p className="text-base text-foreground">Boards keep ongoing analysis visible and reusable.</p>
+            </CardBody>
+          </Card>
+        </TabPanel>
+        <TabPanel value="sources">
+          <Card>
+            <CardBody>
+              <p className="text-base text-foreground">Six connected sources are available to this workspace.</p>
+            </CardBody>
+          </Card>
+        </TabPanel>
+        <TabPanel value="members">
+          <Card>
+            <CardBody>
+              <p className="text-base text-foreground">Eight members can collaborate here.</p>
+            </CardBody>
+          </Card>
+        </TabPanel>
+      </Tabs>
+    </section>
+  );
+}

package/lib/icons.d.ts

@@ -21,6 +21,14 @@ export type IconProps = Omit<React.ComponentProps<PhosphorIcon>, "ref"> & {
     /** Legacy Hugeicons prop — `>= 2` maps to weight="bold", else ignored. */
     strokeWidth?: number;
 };
+/**
+ * Icon-only controls (Button `size="icon*"`, TooltipIconButton) provide this
+ * context. The control turns its icon teal on hover and draws no background.
+ * Only the info icon also swaps to its `fill` weight (a hidden twin that
+ * `[data-icon-hover-fill]:hover` in theme.css reveals); every other icon keeps
+ * its regular outline on hover.
+ */
+export declare const IconHoverFillContext: React.Context<boolean>;
 export declare const ArrowDown: React.ForwardRefExoticComponent<Omit<import('@phosphor-icons/react').IconProps, "ref"> & {
     /** Legacy Hugeicons prop — `>= 2` maps to weight="bold", else ignored. */
     strokeWidth?: number;