@tempoxyz/ds 0.3.10 → 0.3.13

package/dist/docs/product/components/agent-logo.md

@@ -0,0 +1,194 @@
+# AgentLogo
+
+Shows the logo of an AI agent that works with a wallet.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/AgentLogo.tsx)
+
+## Overview
+
+An agent logo renders an agent's mark on a small rounded tile. A brand tile fills with the agent's color, and an outlined tile keeps the mark in its own colors on the surface.
+
+## Examples
+
+### Basic
+
+```tsx
+import { AgentLogo, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <div {...styles.row()}>
+      <AgentLogo agent="claude" />
+      Claude
+    </div>
+  )
+}
+
+namespace styles {
+  export const row = style({ alignItems: 'center', display: 'flex', gap: '8' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/AgentLogo/Basic.tsx)
+
+### Agent
+
+Set `agent` to `amp`, `claude`, `cli`, `codex`, `cursor`, `gemini`, `muse`, or `opencode`.
+
+```tsx
+import { AgentLogo, style } from '@tempoxyz/ds'
+
+const agents = [
+  ['amp', 'Amp'],
+  ['claude', 'Claude'],
+  ['cli', 'CLI'],
+  ['codex', 'Codex'],
+  ['cursor', 'Cursor'],
+  ['gemini', 'Gemini'],
+  ['muse', 'Muse'],
+  ['opencode', 'OpenCode'],
+] as const
+
+export function Demo() {
+  return (
+    <div {...styles.grid()}>
+      {agents.map(([agent, label]) => (
+        <div key={agent} {...styles.row()}>
+          <AgentLogo agent={agent} />
+          {label}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+namespace styles {
+  export const grid = style({
+    display: 'grid',
+    gap: '12',
+    gridTemplateColumns: 'repeat(4, max-content)',
+  })
+
+  export const row = style({ alignItems: 'center', display: 'flex', gap: '8' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/AgentLogo/Agent.tsx)
+
+### Size
+
+Set `size` to `24` (default) or `28`.
+
+```tsx
+import { AgentLogo, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <div {...styles.row()}>
+      <AgentLogo agent="codex" />
+      <AgentLogo agent="codex" size="28" />
+    </div>
+  )
+}
+
+namespace styles {
+  export const row = style({ alignItems: 'center', display: 'flex', gap: '12' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/AgentLogo/Size.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { AgentLogo } from '@tempoxyz/ds'
+
+<AgentLogo />
+```
+
+## Guidelines
+
+### When to Use
+
+* Show which agent spends from a wallet, such as in a list of authorized agents.
+* Mark the agent of a request that needs approval.
+
+### When Not to Use
+
+* Use [Avatar](avatar.md) for a person or an account.
+* Use [TokenLogo](token-logo.md) for a token, and [NetworkLogo](network-logo.md) for a network.
+
+### Name the Agent
+
+**Do:** Show the agent name beside each logo.
+
+```tsx
+import { AgentLogo, ListGroup } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <ListGroup variant="boxed">
+      <ListGroup.Row>
+        <AgentLogo agent="claude" />
+        <ListGroup.Info>
+          <ListGroup.Title>Claude</ListGroup.Title>
+          <ListGroup.Description>$10.00 a month</ListGroup.Description>
+        </ListGroup.Info>
+      </ListGroup.Row>
+    </ListGroup>
+  )
+}
+```
+
+**Don't:** Ask people to tell agents apart by logo alone.
+
+```tsx
+import { AgentLogo, ListGroup } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <ListGroup variant="boxed">
+      <ListGroup.Row>
+        <AgentLogo agent="claude" />
+        <ListGroup.Info>
+          <ListGroup.Title>$10.00 a month</ListGroup.Title>
+        </ListGroup.Info>
+      </ListGroup.Row>
+    </ListGroup>
+  )
+}
+```
+
+### Match Size to the Context
+
+* **24 (24px):** In rows, legends, and approval requests.
+* **28 (28px):** Where the agent leads a section or a page.
+
+## Accessibility
+
+An agent logo renders a `<span>` that is hidden from screen readers by default. It is not interactive and takes no focus.
+
+### Semantics
+
+* **Root (aria-hidden):** Hidden from screen readers, so the visible name beside it is read once.
+* **Named Logo (aria-label):** An `aria-label` gives the logo the `img` role, so screen readers announce it.
+
+### Your Responsibilities
+
+* **Name a Standalone Logo (aria-label):** If no visible text names the agent, pass the agent name as `aria-label`.
+
+## Related
+
+[Avatar](avatar.md)
+
+Use for people and accounts.
+
+[ListGroup](list-group.md)
+
+Use for lists of agents.
+
+[BarChart](bar-chart.md)
+
+Use for the spend of each agent over time.