@tempoxyz/ds 0.3.9 → 0.3.11

package/dist/docs/components/success-hero.md

@@ -0,0 +1,157 @@
+# SuccessHero
+
+Confirms that a setup flow finished, on a dark card of animated streaks.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/SuccessHero.tsx)
+
+Figma: [Content/Success Hero](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-4354)
+
+## Overview
+
+A success hero renders a dark 520px card. Streaks slide in behind a bottom row that holds a title block and an action. `flow` selects the artwork of the agent or wallet flow.
+
+## Examples
+
+### Basic
+
+Compose `SuccessHero.Body` and an action. A default [Button](/docs/components/button) fills light on the dark card.
+
+```tsx
+/** Demonstrates SuccessHero in the documentation. @module */
+import { Button, style, SuccessHero } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <SuccessHero flow="agent">
+        <SuccessHero.Body>
+          <SuccessHero.Caption>CLAUDE · FUNDED</SuccessHero.Caption>
+          <SuccessHero.Title>You’re ready to go.</SuccessHero.Title>
+          <SuccessHero.Description>
+            $10.00 for Claude to spend · expires in 30 days.
+          </SuccessHero.Description>
+        </SuccessHero.Body>
+        <Button size="large">Done</Button>
+      </SuccessHero>
+    </div>
+  )
+}
+
+namespace styles {
+  export const frame = style({ width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SuccessHero/Basic.tsx)
+
+### Wallet
+
+Set `flow` to `wallet` for the wallet flow, which leaves out the orange trails of the agent.
+
+```tsx
+/** Demonstrates SuccessHero in the documentation. @module */
+import { Button, style, SuccessHero } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <SuccessHero flow="wallet">
+        <SuccessHero.Body>
+          <SuccessHero.Caption>WALLET · FUNDED</SuccessHero.Caption>
+          <SuccessHero.Title>You’re ready to go.</SuccessHero.Title>
+          <SuccessHero.Description>Every payment shows up in Activity.</SuccessHero.Description>
+        </SuccessHero.Body>
+        <Button size="large">Done</Button>
+      </SuccessHero>
+    </div>
+  )
+}
+
+namespace styles {
+  export const frame = style({ width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SuccessHero/Wallet.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { SuccessHero } from '@tempoxyz/ds'
+
+<SuccessHero>
+  <SuccessHero.Body>
+    <SuccessHero.Caption />
+    <SuccessHero.Title />
+    <SuccessHero.Description />
+  </SuccessHero.Body>
+</SuccessHero>
+```
+
+## Guidelines
+
+### When to Use
+
+* Confirm once that an agent or wallet setup flow finished, in place of its steps.
+
+### When Not to Use
+
+* Use [HeroVisual](/docs/components/hero-visual) beside the steps while the flow runs.
+* Use [Toast](/docs/components/toast) to confirm a small action.
+
+### Offer One Action
+
+**Do:** End the flow with one action.
+
+```tsx
+<SuccessHero style={{ minHeight: 200, width: 360 }}>
+  <SuccessHero.Body>
+    <SuccessHero.Title>Done.</SuccessHero.Title>
+  </SuccessHero.Body>
+  <Button>Done</Button>
+</SuccessHero>
+```
+
+**Don't:** Add a second action that returns to the flow.
+
+```tsx
+<SuccessHero style={{ minHeight: 200, width: 360 }}>
+  <SuccessHero.Body>
+    <SuccessHero.Title>Done.</SuccessHero.Title>
+  </SuccessHero.Body>
+  <Button variant="secondary">Back</Button>
+  <Button>Done</Button>
+</SuccessHero>
+```
+
+### State What Finished
+
+Name the funded agent or wallet in the caption, and the amount and its limits in the description.
+
+## Content
+
+* **Caption:** Name what finished in capitals, such as CLAUDE · FUNDED.
+* **Title:** Write a short sentence, such as You’re ready to go.
+* **Description:** State the amount, its expiry, and where payments appear.
+* **Action:** Label the action Done.
+
+## Accessibility
+
+The card renders a `<div>` with no role. Screen readers skip the artwork and read the text, then the action.
+
+* **Artwork (aria-hidden):** The streaks are decorative.
+* **SuccessHero.Title (h2):** Announced as a second-level heading.
+* **Action (Focus):** Move focus to the action when the card appears.
+* **Reduced Motion (prefers-reduced-motion):** The streaks fade in without movement.
+
+## Related
+
+[HeroVisual](/docs/components/hero-visual)
+
+Use for the hero card while the flow runs.
+
+[Button](/docs/components/button)
+
+Use for the action of the card.