@tempoxyz/ds 0.3.11 → 0.3.13

package/dist/docs/marketing/introduction/getting-started.md

@@ -0,0 +1,241 @@
+# Getting Started
+
+Install the Marketing system and style your first section.
+
+## Overview
+
+Marketing pages present Tempo to the public. They explain what Tempo is, who it is for, and why it matters, and lead the reader to a next step. `@tempoxyz/ds/marketing` ships the variables and authoring helpers for these pages.
+
+* **Home Page (tempo.xyz):** Introduces Tempo and routes each reader onward.
+* **Campaigns (Landing pages):** Carry one message to one audience at a time.
+* **Launches (Announcements):** Present a new feature, partner, or upgrade.
+* **Events (Event pages):** Show the agenda, the speakers, and registration.
+
+## Agent Prompt
+
+Paste this prompt into your coding agent:
+
+Read ds.tehq.dev/marketing/introduction/getting-started and help me build a Tempo marketing page
+with Tempo Design System.
+
+## Setup
+
+### Install the Library
+
+Install `@tempoxyz/ds` and its Zyzz peer. Marketing ships from the same package.
+
+```sh
+npm install @tempoxyz/ds zyzz
+```
+
+### Choose Framework
+
+Choose a compilation target and a variable mode:
+
+* **TDS Variables (Quick):** Uses the Marketing variables as they ship.
+* **Custom Variables (Advanced):** Extends the Marketing variables with site tokens.
+
+### Vite
+
+### Configure Vite
+
+Add Zyzz beside the existing framework plugin.
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { zyzz } from 'zyzz/vite'
+
+export default defineConfig({
+  plugins: [zyzz()],
+  ssr: { noExternal: ['@tempoxyz/ds', 'zyzz'] },
+})
+```
+
+Run the existing dev or build command. The plugin emits the Marketing variables, the Inter, Pilat, and JetBrains Mono fonts, and keyframes once, and each module emits its own rules. You import no stylesheet.
+
+With `ssr.noExternal`, the plugin reads the library's contracts in a server build.
+
+#### TDS Variables (Quick)
+
+### Style a Section
+
+Import `style` from `@tempoxyz/ds/marketing`, and style your markup with Marketing tokens.
+
+```tsx title="Hero.tsx"
+import { style } from '@tempoxyz/ds/marketing'
+
+export function Hero() {
+  return (
+    <section {...styles.hero()}>
+      <h1 {...styles.title()}>Payments at internet speed</h1>
+      <p {...styles.lead()}>Move money anywhere in under a second.</p>
+    </section>
+  )
+}
+
+namespace styles {
+  export const hero = style({
+    backgroundColor: 'background.primary',
+    paddingBlock: '64',
+    paddingInline: '24',
+  })
+
+  export const lead = style({ color: 'content.secondary', typography: 'body.b1' })
+
+  export const title = style({ color: 'content.primary', typography: 'display.d1' })
+}
+```
+
+Tokens such as `content.primary`, `'64'`, and `display.d1` type-check against the Marketing variables. Light and dark values follow the inherited `color-scheme`.
+
+#### Custom Variables (Advanced)
+
+### Define Config
+
+Extend the Marketing variables with site tokens, and export the bound helpers.
+
+```ts title="zyzz.config.ts"
+import { variables } from '@tempoxyz/ds/marketing'
+import { Config, Vars } from 'zyzz'
+
+export const { style, vars } = Config.create({
+  id: 'site',
+  vars: Vars.extend(variables, { spacing: { section: '7.5rem' } }, { id: 'site/vars' }),
+})
+```
+
+Place `zyzz.config.ts` at the root of the site source, such as `src/zyzz.config.ts`. The Vite plugin scans its directory for global styles.
+
+### Style a Section
+
+Apply `vars()` to the site root. Style your markup with the bound `style` helper, which accepts Marketing and site tokens.
+
+```tsx title="Hero.tsx"
+import { style, vars } from './zyzz.config.js'
+
+export function Site() {
+  return (
+    <main {...vars()}>
+      <Hero />
+    </main>
+  )
+}
+
+function Hero() {
+  return (
+    <section {...styles.hero()}>
+      <h1 {...styles.title()}>Payments at internet speed</h1>
+    </section>
+  )
+}
+
+namespace styles {
+  export const hero = style({ paddingBlock: 'section', paddingInline: '24' })
+
+  export const title = style({ color: 'content.primary', typography: 'display.d1' })
+}
+```
+
+### Other Bundlers
+
+### Configure the Bundler
+
+Add the matching unplugin adapter to the bundler configuration. Keep the existing TypeScript and JSX transforms.
+
+```ts title="rollup.config.ts"
+import { zyzz } from 'zyzz/unplugin'
+
+const plugins = [zyzz.rollup()]
+// Use zyzz.webpack() or zyzz.esbuild() for those bundlers.
+```
+
+Load the emitted stylesheet and script in the document. Adjust the paths to the deployment base.
+
+```html title="index.html"
+<link rel="stylesheet" href="/zyzz.css" />
+<script src="/zyzz.js"></script>
+```
+
+Run the existing build command. [Bundler Setup](https://zyzz.style/docs/api/unplugin) lists the configuration for each bundler.
+
+#### TDS Variables (Quick)
+
+### Style a Section
+
+Import `style` from `@tempoxyz/ds/marketing`, and style your markup with Marketing tokens.
+
+```tsx title="Hero.tsx"
+import { style } from '@tempoxyz/ds/marketing'
+
+export function Hero() {
+  return (
+    <section {...styles.hero()}>
+      <h1 {...styles.title()}>Payments at internet speed</h1>
+      <p {...styles.lead()}>Move money anywhere in under a second.</p>
+    </section>
+  )
+}
+
+namespace styles {
+  export const hero = style({
+    backgroundColor: 'background.primary',
+    paddingBlock: '64',
+    paddingInline: '24',
+  })
+
+  export const lead = style({ color: 'content.secondary', typography: 'body.b1' })
+
+  export const title = style({ color: 'content.primary', typography: 'display.d1' })
+}
+```
+
+Tokens such as `content.primary`, `'64'`, and `display.d1` type-check against the Marketing variables. Light and dark values follow the inherited `color-scheme`.
+
+#### Custom Variables (Advanced)
+
+### Define Config
+
+Extend the Marketing variables with site tokens, and export the bound helpers.
+
+```ts title="zyzz.config.ts"
+import { variables } from '@tempoxyz/ds/marketing'
+import { Config, Vars } from 'zyzz'
+
+export const { style, vars } = Config.create({
+  id: 'site',
+  vars: Vars.extend(variables, { spacing: { section: '7.5rem' } }, { id: 'site/vars' }),
+})
+```
+
+### Style a Section
+
+Apply `vars()` to the site root. Style your markup with the bound `style` helper, which accepts Marketing and site tokens.
+
+```tsx title="Hero.tsx"
+import { style, vars } from './zyzz.config.js'
+
+export function Site() {
+  return (
+    <main {...vars()}>
+      <Hero />
+    </main>
+  )
+}
+
+function Hero() {
+  return (
+    <section {...styles.hero()}>
+      <h1 {...styles.title()}>Payments at internet speed</h1>
+    </section>
+  )
+}
+
+namespace styles {
+  export const hero = style({ paddingBlock: 'section', paddingInline: '24' })
+
+  export const title = style({ color: 'content.primary', typography: 'display.d1' })
+}
+```
+
+> [!NOTE]
+> The Marketing variables change as the Marketing designs define their own values. Marketing ships no components yet.

package/dist/docs/{components → product/components}/accordion.md

@@ -162,10 +162,10 @@ import { Accordion } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Tabs](/docs/components/tabs) to switch between views of equal weight, such as Balances and Activity.
-* Use [ListGroup](/docs/components/list-group) for facts people check at a glance, such as the amount and fee of a payment.
-* Use [Stepper](/docs/components/stepper) for steps people complete in order.
-* If most people need the content, keep it visible in a [Surface](/docs/components/surface), such as the amount and fee on a payment review.
+* Use [Tabs](tabs.md) to switch between views of equal weight, such as Balances and Activity.
+* Use [ListGroup](list-group.md) for facts people check at a glance, such as the amount and fee of a payment.
+* Use [Stepper](stepper.md) for steps people complete in order.
+* If most people need the content, keep it visible in a [Surface](surface.md), such as the amount and fee on a payment review.
 
 ### Summarize the Panel in the Trigger
 
@@ -472,18 +472,18 @@ The arrow keys do not move focus between triggers.
 
 ## Related
 
-[Tabs](/docs/components/tabs)
+[Tabs](tabs.md)
 
 Use for switching between views.
 
-[ListGroup](/docs/components/list-group)
+[ListGroup](list-group.md)
 
 Use for expanding a detail under one row.
 
-[Stepper](/docs/components/stepper)
+[Stepper](stepper.md)
 
 Use for sequential steps.
 
-[Surface](/docs/components/surface)
+[Surface](surface.md)
 
 Use for content that stays visible.

package/dist/docs/{components → product/components}/address-card.md

@@ -90,8 +90,8 @@ import { AddressCard } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Hex](/docs/components/hex) for an address inside a row or a sentence.
-* Use [Qr](/docs/components/qr) alone for a code that encodes something other than an address.
+* Use [Hex](hex.md) for an address inside a row or a sentence.
+* Use [Qr](qr.md) alone for a code that encodes something other than an address.
 
 ### List Only the Accepted Networks
 
@@ -134,14 +134,14 @@ The card renders a `<div>` with no role. Screen readers read the full address, t
 
 ## Related
 
-[Hex](/docs/components/hex)
+[Hex](hex.md)
 
 Use for an address inside a row or a sentence.
 
-[Qr](/docs/components/qr)
+[Qr](qr.md)
 
 Use for a QR code of another value.
 
-[AssetChip](/docs/components/asset-chip)
+[AssetChip](asset-chip.md)
 
 Use for the chips of supported assets.

package/dist/docs/{components → product/components}/agent-logo.md

@@ -117,8 +117,8 @@ import { AgentLogo } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Avatar](/docs/components/avatar) for a person or an account.
-* Use [TokenLogo](/docs/components/token-logo) for a token, and [NetworkLogo](/docs/components/network-logo) for a network.
+* 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
 
@@ -181,14 +181,14 @@ An agent logo renders a `<span>` that is hidden from screen readers by default.
 
 ## Related
 
-[Avatar](/docs/components/avatar)
+[Avatar](avatar.md)
 
 Use for people and accounts.
 
-[ListGroup](/docs/components/list-group)
+[ListGroup](list-group.md)
 
 Use for lists of agents.
 
-[BarChart](/docs/components/bar-chart)
+[BarChart](bar-chart.md)
 
 Use for the spend of each agent over time.

package/dist/docs/{components → product/components}/alert-dialog.md

@@ -6,7 +6,7 @@ Asks you to confirm a critical action before it happens.
 
 ## Overview
 
-A modal confirmation that blocks the page until the user decides. It never closes on an outside press. It takes the parts and the `small` size of a [Dialog](/docs/components/dialog). Reserve it for decisions that need an explicit answer.
+A modal confirmation that blocks the page until the user decides. It never closes on an outside press. It takes the parts and the `small` size of a [Dialog](dialog.md). Reserve it for decisions that need an explicit answer.
 
 ## Examples
 
@@ -73,10 +73,10 @@ import { AlertDialog, ButtonGroup } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use a [Dialog](/docs/components/dialog) for a task with fields, or to review a payment before sending it.
-* For reversible actions, such as archiving an address, act at once and offer Undo in a [Toast](/docs/components/toast). The toast dismisses itself, so keep another way to restore the item.
-* Use an [Alert](/docs/components/alert) or [Banner](/docs/components/banner) for a warning that needs no decision.
-* Use a [Toast](/docs/components/toast) to report that an action finished.
+* Use a [Dialog](dialog.md) for a task with fields, or to review a payment before sending it.
+* For reversible actions, such as archiving an address, act at once and offer Undo in a [Toast](toast.md). The toast dismisses itself, so keep another way to restore the item.
+* Use an [Alert](alert.md) or [Banner](banner.md) for a warning that needs no decision.
+* Use a [Toast](toast.md) to report that an action finished.
 
 ### Focus the Safe Action
 
@@ -606,26 +606,26 @@ Follows the [WAI-ARIA alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patt
 
 ## Related
 
-[Dialog](/docs/components/dialog)
+[Dialog](dialog.md)
 
 Use for focused tasks with fields.
 
-[Button](/docs/components/button)
+[Button](button.md)
 
 Use for each action in the footer.
 
-[ButtonGroup](/docs/components/button-group)
+[ButtonGroup](button-group.md)
 
 Use for the Cancel and confirm actions.
 
-[Menu](/docs/components/menu)
+[Menu](menu.md)
 
 Use for opening a confirmation from a destructive item.
 
-[Toast](/docs/components/toast)
+[Toast](toast.md)
 
 Use for Undo after reversible actions.
 
-[Destructive Actions](/docs/patterns/destructive-actions)
+[Destructive Actions](../patterns/destructive-actions.md)
 
 Covers deleting and revoking.

package/dist/docs/{components → product/components}/alert.md

@@ -169,11 +169,11 @@ import { Alert } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Banner](/docs/components/banner) for a message about the whole product or page, such as an outage.
-* Use [Toast](/docs/components/toast) to confirm that an action finished, such as Payment sent.
-* If an action needs a decision before it continues, use [AlertDialog](/docs/components/alert-dialog).
-* Use `Field.Error` from [Field](/docs/components/field) for a validation message on one input.
-* Use [Badge](/docs/components/badge) for a one-word status on a table row or card, such as Pending.
+* Use [Banner](banner.md) for a message about the whole product or page, such as an outage.
+* Use [Toast](toast.md) to confirm that an action finished, such as Payment sent.
+* If an action needs a decision before it continues, use [AlertDialog](alert-dialog.md).
+* Use `Field.Error` from [Field](field.md) for a validation message on one input.
+* Use [Badge](badge.md) for a one-word status on a table row or card, such as Pending.
 
 ### Choose an Intent by Severity
 
@@ -239,7 +239,7 @@ export function Demo() {
 
 ### Place It Beside What It Describes
 
-Remove the alert when its condition ends, such as when fees return to normal. In a [Dialog](/docs/components/dialog), show one alert at full width, below the input it describes.
+Remove the alert when its condition ends, such as when fees return to normal. In a [Dialog](dialog.md), show one alert at full width, below the input it describes.
 
 **Do:** Put the alert directly above the form it describes, or directly below its control.
 
@@ -427,22 +427,22 @@ An alert is a live region whose role depends on `intent`. It does not move focus
 
 ## Related
 
-[Banner](/docs/components/banner)
+[Banner](banner.md)
 
 Use for a message about the whole page.
 
-[Toast](/docs/components/toast)
+[Toast](toast.md)
 
 Use for confirming a finished action.
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for validation messages on an input.
 
-[Errors and Validation](/docs/patterns/errors-and-validation)
+[Errors and Validation](../patterns/errors-and-validation.md)
 
 Covers reporting failures.
 
-[Feedback and Status](/docs/patterns/feedback-and-status)
+[Feedback and Status](../patterns/feedback-and-status.md)
 
 Covers choosing a message component.

package/dist/docs/{components → product/components}/amount-input.md

@@ -14,7 +14,7 @@ An amount input is a filled card with the label, the amount in heading-size digi
 
 ### Basic
 
-Place the `Field.Label`, a [Token](/docs/components/token), and a `Field.Description` inside `AmountInput.Root`. They take their own rows above and below the amount.
+Place the `Field.Label`, a [Token](token.md), and a `Field.Description` inside `AmountInput.Root`. They take their own rows above and below the amount.
 
 ```tsx
 import { AmountInput, Field, style, Token } from '@tempoxyz/ds'
@@ -61,16 +61,16 @@ import { AmountInput, Token } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [NumberField](/docs/components/number-field) for whole quantities adjusted in steps, such as webhook retries.
-* Use [TextInput](/docs/components/text-input) for identifiers with digits, such as a 0x address or a bank account number.
-* Use [OtpField](/docs/components/otp-field) for one-time verification codes.
-* Use [Amount](/docs/components/amount) to show a read-only value, such as a balance or a network fee.
+* Use [NumberField](number-field.md) for whole quantities adjusted in steps, such as webhook retries.
+* Use [TextInput](text-input.md) for identifiers with digits, such as a 0x address or a bank account number.
+* Use [OtpField](otp-field.md) for one-time verification codes.
+* Use [Amount](amount.md) to show a read-only value, such as a balance or a network fee.
 
 ### Name the Token Beside the Digits
 
-Put a [Token](/docs/components/token) after `AmountInput.Control`. Give it `readOnly` when the token is fixed, and pass it to a picker trigger's `render` when the token can change.
+Put a [Token](token.md) after `AmountInput.Control`. Give it `readOnly` when the token is fixed, and pass it to a picker trigger's `render` when the token can change.
 
-**Do:** Name the token beside the amount with a [Token](/docs/components/token).
+**Do:** Name the token beside the amount with a [Token](token.md).
 
 ```tsx
 /**
@@ -252,7 +252,7 @@ namespace styles {
 
 ### Stack Two Cards for a Conversion
 
-For a conversion, place a From card and a To card one above the other, with a small arrow [Button](/docs/components/button) between them that swaps the two.
+For a conversion, place a From card and a To card one above the other, with a small arrow [Button](button.md) between them that swaps the two.
 
 ## Content
 
@@ -284,22 +284,22 @@ The ignored keystrokes have no announcement. State the accepted format, such as
 
 ## Related
 
-[Amount](/docs/components/amount)
+[Amount](amount.md)
 
 Use for displaying amounts.
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for the label, balance, and error.
 
-[NumberField](/docs/components/number-field)
+[NumberField](number-field.md)
 
 Use for stepped quantities.
 
-[Token](/docs/components/token)
+[Token](token.md)
 
 Use for the token pill beside the amount.
 
-[Payments](/docs/patterns/payments)
+[Payments](../patterns/payments.md)
 
 Covers send, review, and confirmation flows.

package/dist/docs/{components → product/components}/amount.md

@@ -235,8 +235,8 @@ import { Amount } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [AmountInput](/docs/components/amount-input) when people enter an amount.
-* Use `Table.Cell` with `numeric` in a [Table](/docs/components/table) for counts and metrics without a unit, such as TPS or block height.
+* Use [AmountInput](amount-input.md) when people enter an amount.
+* Use `Table.Cell` with `numeric` in a [Table](table.md) for counts and metrics without a unit, such as TPS or block height.
 
 ### Always Show the Unit
 
@@ -769,26 +769,26 @@ Renders a `<span>` with no role. Screen readers read the formatted text as writt
 
 ## Related
 
-[AmountInput](/docs/components/amount-input)
+[AmountInput](amount-input.md)
 
 Use for entering amounts.
 
-[TokenLogo](/docs/components/token-logo)
+[TokenLogo](token-logo.md)
 
 Use for the token icon beside an amount.
 
-[Table](/docs/components/table)
+[Table](table.md)
 
 Use for laying out amounts.
 
-[ListGroup](/docs/components/list-group)
+[ListGroup](list-group.md)
 
 Use for laying out amounts.
 
-[Payments](/docs/patterns/payments)
+[Payments](../patterns/payments.md)
 
 Covers send and review screens.
 
-[Blockchain Values](/docs/patterns/blockchain-values)
+[Blockchain Values](../patterns/blockchain-values.md)
 
 Covers token amounts and fees.

package/dist/docs/{components → product/components}/app-shell.md

@@ -179,14 +179,14 @@ import { AppShell } from '@tempoxyz/ds'
 ### When to Use
 
 * Frame a product with persistent navigation, such as Tempo Console or the web wallet. Render it once, in the root layout.
-* Pair a [SidebarMenu](/docs/components/sidebar-menu) with a content column of tables, cards, or settings.
+* Pair a [SidebarMenu](sidebar-menu.md) with a content column of tables, cards, or settings.
 
 ### When Not to Use
 
-* Use [Container](/docs/components/container) for pages without persistent navigation, such as sign-in, onboarding, or a public receipt.
-* Use [Dialog](/docs/components/dialog), or a full-screen flow in a [Container](/docs/components/container), for focused tasks such as Send payment.
-* Use [Drawer](/docs/components/drawer) for a details or filter panel that opens on demand. The shell's drawer holds only primary navigation.
-* Use [Frame](/docs/components/frame) for a header, body, and footer inside a card or popup.
+* Use [Container](container.md) for pages without persistent navigation, such as sign-in, onboarding, or a public receipt.
+* Use [Dialog](dialog.md), or a full-screen flow in a [Container](container.md), for focused tasks such as Send payment.
+* Use [Drawer](drawer.md) for a details or filter panel that opens on demand. The shell's drawer holds only primary navigation.
+* Use [Frame](frame.md) for a header, body, and footer inside a card or popup.
 
 ### Plan for Each Layout
 
@@ -292,7 +292,7 @@ Keep the header and footer short so the menu keeps most of the height. Set `--si
 
 ### Choose the Bottom Bar Items
 
-Wherever the drawer replaces the sidebar, a bottom bar repeats the [SidebarMenu](/docs/components/sidebar-menu) items that set `tabBar`, in sidebar order, and ends with the menu button. Keep the rest in the drawer.
+Wherever the drawer replaces the sidebar, a bottom bar repeats the [SidebarMenu](sidebar-menu.md) items that set `tabBar`, in sidebar order, and ends with the menu button. Keep the rest in the drawer.
 
 * **Tab (tabBar="tab"):** Shows the icon in the tab bar pill. Choose up to three top destinations.
 * **Action (tabBar="action"):** Shows the icon in a floating button beside the pill. Choose one main action.
@@ -308,7 +308,7 @@ Wherever the drawer replaces the sidebar, a bottom bar repeats the [SidebarMenu]
 
 `AppShell.Title` renders the page's `h1` in the header bar across the top of the content column. Keep one primary action in the header.
 
-**Do:** Put the title first, then page actions, such as a `small` [Button](/docs/components/button).
+**Do:** Put the title first, then page actions, such as a `small` [Button](button.md).
 
 ```tsx
 /**
@@ -497,7 +497,7 @@ namespace styles {
 
 ## Content
 
-* Match `AppShell.Title` to the label of the active [SidebarMenu](/docs/components/sidebar-menu) item, such as API keys.
+* Match `AppShell.Title` to the label of the active [SidebarMenu](sidebar-menu.md) item, such as API keys.
 * Keep titles short enough to share the header row with its actions at 360px.
 
 ## Accessibility
@@ -538,22 +538,22 @@ Provides the page landmarks and the `h1`. Below 1024px, the sidebar drawer follo
 
 ## Related
 
-[SidebarMenu](/docs/components/sidebar-menu)
+[SidebarMenu](sidebar-menu.md)
 
 Use for the navigation inside the sidebar.
 
-[Container](/docs/components/container)
+[Container](container.md)
 
 Use for pages without a sidebar.
 
-[Drawer](/docs/components/drawer)
+[Drawer](drawer.md)
 
 Use for panels that open on demand.
 
-[Responsive Layout](/docs/patterns/responsive-layout)
+[Responsive Layout](../patterns/responsive-layout.md)
 
 Covers adapting pages across breakpoints.
 
-[Navigation](/docs/patterns/navigation)
+[Navigation](../patterns/navigation.md)
 
 Covers choosing between navigation components.