@tempoxyz/ds 0.3.0 → 0.3.2

package/src/web/components/Field.tsx

@@ -1,11 +1,12 @@
 import * as BaseUi from '@base-ui/react/field'
 import { type ComponentPropsWithRef, useRef, useState } from 'react'
 import type * as zyzz from 'zyzz'
-import { style } from '../zyzz.config.js'
+import { style, variants } from '../zyzz.config.js'
 
 /**
  * Labeled form field. The label sits 12px above the control and the message 12px below it, and a
- * shown error replaces the description.
+ * shown error replaces the description. `size="large"` sets the label in the regular weight with
+ * its secondary label beside it, sets the messages at 14px, and insets text controls 20px.
  *
  * - Give every control a visible `Field.Label`. Base UI links it to the control.
  * - Base UI adds `Field.Description` and a shown `Field.Error` to the control's `aria-describedby`.
@@ -44,6 +45,7 @@ export namespace Field {
       actionsRef = actions,
       className,
       onInvalidCapture,
+      size = 'medium',
       success = false,
       validationMode,
       vars,
@@ -54,9 +56,10 @@ export namespace Field {
     return (
       <BaseUi.Field.Root
         {...attributes}
-        {...styles.root({ className, style: props.style, vars })}
+        {...styles.root({ className, size, style: props.style, vars })}
         actionsRef={actionsRef}
         data-field=""
+        data-field-size={size}
         data-success={success || undefined}
         onInvalidCapture={(event) => {
           onInvalidCapture?.(event)
@@ -117,8 +120,8 @@ export namespace Field {
   }
 
   /**
-   * Regular-weight text at the end of the label row, such as "Optional". Place it inside
-   * `Field.Label`, so it joins the control's accessible name.
+   * Regular-weight text at the end of the label row, such as "Optional". In a large field it follows
+   * the label 4px after it. Place it inside `Field.Label`, so it joins the control's accessible name.
    */
   export function SecondaryLabel(props: SecondaryLabel.Props) {
     const { className, vars, ...attributes } = props
@@ -137,7 +140,10 @@ export namespace Field {
       zyzz.Props.Variants<typeof styles.secondaryLabel>
   }
 
-  /** Hint text rendered as a `p`. It fades out while a `Field.Error` is shown. */
+  /**
+   * Hint text rendered as a `p`. It fades out while a `Field.Error` is shown. In a large field it
+   * takes the tertiary color at 14px.
+   */
   export function Description(props: Description.Props) {
     const { className, vars, ...attributes } = props
 
@@ -221,6 +227,7 @@ namespace styles {
           transform: 'translateY(-4px) !custom',
           transitionDuration: '150',
         },
+        '[data-field-size="large"] > &': { color: 'content.tertiary', typography: 'body.b2' },
         // An accepted value reads its message in the positive color, as an error does in negative.
         '[data-success] > &': { color: 'content.positive' },
         '[data-disabled] &': { color: 'content.subtle' },
@@ -247,6 +254,7 @@ namespace styles {
       transitionTimingFunction: 'snappy',
       typography: 'body.b3',
       selectors: {
+        '[data-field-size="large"] > &': { typography: 'body.b2' },
         '&[data-ending-style]': {
           color: 'content.secondary',
           filter: 'blur(2px) !custom',
@@ -277,8 +285,15 @@ namespace styles {
     { id: 'tds/web/field/error' },
   )
 
+  // An option's label takes the regular weight, 12px from its control, as the Platform checkbox
+  // draws it.
   export const item = style(
-    { alignItems: 'center', columnGap: '8', display: 'flex' },
+    {
+      alignItems: 'center',
+      columnGap: '12',
+      display: 'flex',
+      selectors: { '& > label': { typography: 'body.b2' } },
+    },
     { id: 'tds/web/field/item' },
   )
 
@@ -291,25 +306,40 @@ namespace styles {
       typography: 'body.b2Strong',
       selectors: {
         '&:has(> [data-field-secondary])': { columnGap: '8', display: 'flex' },
+        '[data-field-size="large"] > &': { typography: 'body.b2' },
+        '[data-field-size="large"] > &:has(> [data-field-secondary])': { columnGap: '4' },
         '[data-disabled] &': { color: 'content.tertiary' },
       },
     },
     { id: 'tds/web/field/label' },
   )
 
-  export const root = style(
+  export const root = variants(
     {
-      // A field stretched by its row keeps label, control and messages together at the top.
-      alignContent: 'start',
-      display: 'grid',
-      gridTemplateColumns: 'minmax(0, 1fr) !custom',
-      position: 'relative',
-      rowGap: '12',
-      selectors: {
-        // A list of options reads as one block under its label, so it sits further away than one control.
-        '&:has(> [role="radiogroup"], > [role="group"] [role="checkbox"])': { rowGap: '16' },
-        // The message of a code sits 8px below its slots, as the Code Input design places it.
-        '&:has(> [data-otp-field])': { rowGap: '8' },
+      base: {
+        // A field stretched by its row keeps label, control and messages together at the top.
+        alignContent: 'start',
+        display: 'grid',
+        gridTemplateColumns: 'minmax(0, 1fr) !custom',
+        position: 'relative',
+        rowGap: '12',
+        selectors: {
+          // A list of options reads as one block under its label, so it sits further away than one control.
+          '&:has(> [role="radiogroup"], > [role="group"] [role="checkbox"])': { rowGap: '16' },
+          // The message of a code sits 8px below its slots, as the Code Input design places it.
+          '&:has(> [data-otp-field])': { rowGap: '8' },
+        },
+      },
+      defaultVariants: { size: 'medium' },
+      variants: {
+        /**
+         * The type of the label and messages, and the inset of text controls. `large` sets the
+         * label in the regular weight, the messages at 14px, and the 20px inset of the Platform
+         * text input.
+         *
+         * @default 'medium'
+         */
+        size: { large: {}, medium: {} },
       },
     },
     { id: 'tds/web/field' },
@@ -321,7 +351,10 @@ namespace styles {
       color: 'content.secondary',
       marginInlineStart: 'auto !custom',
       typography: 'body.b2',
-      selectors: { '[data-disabled] &': { color: 'content.tertiary' } },
+      selectors: {
+        '[data-field-size="large"] > label > &': { marginInlineStart: '0' },
+        '[data-disabled] &': { color: 'content.tertiary' },
+      },
     },
     { id: 'tds/web/field/secondary-label' },
   )

package/src/web/components/GetStartedVisual.tsx

@@ -0,0 +1,66 @@
+/**
+ * An illustration of one get started step, such as connecting an agent or adding funds.
+ * @module
+ */
+import type { ComponentPropsWithRef } from 'react'
+import { useId } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+import { artwork } from './internal/GetStartedArtwork.js'
+
+/**
+ * A 320 by 160px illustration of one get started step on a dark ground: `connect` links two
+ * nodes, `funds` rings a coin with dots, and `passkey` arcs over a key point. The artwork keeps
+ * its colors in both color schemes and is hidden from assistive technology.
+ *
+ * - Place one visual at the top of each get started card, above the title of its step.
+ * - Name the step in the text of the card, since the artwork has no text alternative.
+ * - Use `Visual` for the top of a modal.
+ *
+ * @example
+ * <GetStartedVisual step="funds" />
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/svg | MDN svg element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function GetStartedVisual(props: GetStartedVisual.Props) {
+  const { className, step, vars, ...attributes } = props
+  const id = useId()
+
+  return (
+    <div {...attributes} {...styles.visual({ className, step, style: props.style, vars })}>
+      <svg aria-hidden="true" fill="none" height="160" viewBox="0 0 320 160" width="320">
+        {artwork[step ?? 'connect'](id)}
+      </svg>
+    </div>
+  )
+}
+
+export namespace GetStartedVisual {
+  export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
+    zyzz.Props.Variants<typeof styles.visual>
+}
+
+namespace styles {
+  // Radius `xs` clips the artwork, which the Figma export draws to the square edge.
+  export const visual = variants(
+    {
+      base: {
+        borderRadius: 'xs',
+        display: 'flex',
+        height: '160',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        width: '320',
+        selectors: { '& > svg': { display: 'block', flexShrink: '0 !custom' } },
+      },
+      defaultVariants: { step: 'connect' },
+      /**
+       * Get started step that the artwork shows.
+       * @default 'connect'
+       */
+      variants: { step: { connect: {}, funds: {}, passkey: {} } },
+    },
+    { id: 'tds/web/get-started-visual' },
+  )
+}

package/src/web/components/HeroVisual.tsx

@@ -0,0 +1,304 @@
+/**
+ * A dark hero card of animated streaks that follows the steps of an agent or wallet setup flow.
+ * @module
+ */
+import type { ComponentPropsWithRef } from 'react'
+import { createContext, use } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+import type { Layer, Streak } from './internal/Streaks.js'
+import { Streaks } from './internal/Streaks.js'
+import { TempoLogo } from './TempoLogo.js'
+
+const HeroVisualContext = createContext<{ step: HeroVisual.Step }>({ step: 'connect' })
+
+/**
+ * A dark 520px card of animated streaks with the Tempo wordmark at the top and a title block at
+ * the bottom, beside an agent or wallet setup flow. `step` selects the artwork: each later step
+ * adds streaks, which slide in from the start, and fades its layers up. The title stays dim until
+ * the `funded`, `secure`, and `wallet-funded` steps, which complete a flow. The card keeps its
+ * dark colors in both color schemes and renders its content in the dark scheme.
+ *
+ * - Place one hero beside the steps of the flow, and advance `step` with them.
+ * - Compose `HeroVisual.Caption`, `HeroVisual.Title`, and `HeroVisual.Description` as children.
+ * - Use `SuccessHero` for the confirmation after the flow finishes.
+ *
+ * @example
+ * <HeroVisual step="fund">
+ *   <HeroVisual.Title>Your agent</HeroVisual.Title>
+ *   <HeroVisual.Description>One command, and it can pay its own way.</HeroVisual.Description>
+ * </HeroVisual>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/svg | MDN svg element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function HeroVisual(props: HeroVisual.Props) {
+  const { children, className, step = 'connect', vars, ...attributes } = props
+
+  return (
+    <HeroVisualContext value={{ step }}>
+      <div {...attributes} {...styles.hero({ className, style: props.style, vars })}>
+        <Streaks height={520} layers={steps[step]} trails={trails} width={500} />
+        <TempoLogo {...styles.logo()} />
+        <div {...styles.body()}>{children}</div>
+      </div>
+    </HeroVisualContext>
+  )
+}
+
+export namespace HeroVisual {
+  export type Props = ComponentPropsWithRef<'div'> &
+    zyzz.Props.Variants<typeof styles.hero> & {
+      /**
+       * Step of the setup flow that the artwork shows. The agent flow runs `connect`, `approve`,
+       * `fund`, `funding`, and `funded`, and the wallet flow runs `wallet`, `wallet-funding`,
+       * `wallet-funded`, and `secure`.
+       * @default 'connect'
+       */
+      step?: Step | undefined
+    }
+
+  /** Step of the setup flow that a `HeroVisual` shows. */
+  export type Step = keyof typeof steps
+
+  /** A short label above the title, such as the name of the agent. */
+  export function Caption(props: Caption.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <p {...attributes} {...styles.caption({ className, style: props.style, vars })} />
+  }
+
+  export namespace Caption {
+    export type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.caption>
+  }
+
+  /** One line of supporting text under the title. */
+  export function Description(props: Description.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <p {...attributes} {...styles.description({ className, style: props.style, vars })} />
+  }
+
+  export namespace Description {
+    export type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.description>
+  }
+
+  /**
+   * The display title of the card, rendered as an `h2`. It is dim until the step completes the
+   * flow.
+   */
+  export function Title(props: Title.Props) {
+    const { className, vars, ...attributes } = props
+    const { step } = use(HeroVisualContext)
+    const complete = step === 'funded' || step === 'secure' || step === 'wallet-funded'
+
+    return (
+      <h2 {...attributes} {...styles.title({ className, complete, style: props.style, vars })} />
+    )
+  }
+
+  export namespace Title {
+    export type Props = ComponentPropsWithRef<'h2'> &
+      Omit<zyzz.Props.Variants<typeof styles.title>, 'complete'>
+  }
+}
+
+// The streaks of the Figma Hero Visual, measured from its 500 by 520px frame. Names follow the
+// step that adds each trail.
+const trails = {
+  approve: [
+    [101.71, 252.26, 271.65, 2, 'orange', 0.48, 0],
+    [68.56, 229.65, 296.13, 3, 'orange', 0.43, 0],
+    [58.27, 211.83, 203.14, 3, 'orange', 0.57, 0],
+  ],
+  connect: [
+    [24.42, 281.45, 217.63, 3, 'white', 0.14, 1],
+    [16.26, 337.45, 279.81, 1, 'white', 0.09, 0],
+    [121.97, 349, 221.03, 1, 'white', 0.14, 1],
+    [152.07, 189, 228.84, 1, 'white', 0.12, 1],
+    [18.23, 356.11, 306.72, 2, 'white', 0.15, 2],
+    [286.58, 221.35, 290.61, 2, 'white', 0.12, 0],
+    [62.17, 322.1, 289.66, 1, 'white', 0.1, 1],
+    [130.71, 204.68, 181.84, 2, 'white', 0.16, 0],
+    [292.43, 162.92, 274.7, 1, 'white', 0.14, 1],
+    [271.35, 336.04, 307.81, 1, 'white', 0.08, 2],
+  ],
+  fund: [
+    [101.71, 252.26, 271.65, 2, 'orange', 0.65, 0],
+    [68.56, 229.65, 296.13, 3, 'orange', 0.57, 0],
+    [58.27, 211.83, 203.14, 3, 'orange', 0.79, 0],
+    [97.06, 275.55, 188.45, 1, 'orange', 0.45, 1],
+    [206, 237.42, 317.24, 3, 'orange', 0.83, 0],
+    [-18.47, 297.89, 251.8, 1, 'orange', 0.52, 1],
+    [96.47, 269.57, 221.18, 2, 'orange', 0.49, 0],
+    [-25.71, 243.1, 224.17, 1, 'orange', 0.79, 0],
+    [284.24, 222.7, 273.13, 1, 'orange', 0.55, 1],
+    [34.71, 296.42, 349.44, 3, 'orange', 0.79, 1],
+    [267.98, 290.92, 260.36, 1, 'orange', 0.63, 1],
+    [53.26, 290.95, 228.05, 2, 'orange', 0.75, 0],
+  ],
+  funded: [
+    [-32.49, 305.64, 302.93, 1, 'white', 0.35, 0],
+    [255.42, 350.15, 324, 1, 'white', 0.24, 2],
+    [245.07, 175.25, 211.2, 1, 'white', 0.41, 0],
+    [109.95, 272.23, 321.64, 3, 'white', 0.38, 0],
+    [-43.19, 352.64, 314.12, 3, 'sky', 0.44, 2],
+    [274.66, 299.14, 201.71, 2, 'sky', 0.2, 1],
+    [116.34, 235.13, 209.17, 2, 'sky', 0.49, 1],
+    [308.73, 349.18, 248.68, 1, 'sky', 0.23, 0],
+    [78.19, 184.86, 198.55, 1, 'sky', 0.21, 2],
+    [121.38, 205.67, 235.39, 1, 'white', 0.21, 0],
+    [93.15, 298, 301.36, 1, 'sky', 0.24, 2],
+    [-40.07, 172.37, 323.87, 1, 'white', 0.2, 1],
+    [261.5, 180.56, 258.35, 1, 'blue', 0.35, 0],
+    [166.62, 191.33, 338.35, 3, 'sky', 0.21, 0],
+    [113.41, 200.63, 341.42, 2, 'white', 0.47, 2],
+    [112.84, 287.12, 183.57, 1, 'white', 0.34, 1],
+  ],
+  ignite: [[60, 257.4, 350, 2, 'orange', 0.9, 1]],
+  path: [
+    [24.42, 281.45, 217.63, 3, 'white', 0.16, 1],
+    [16.26, 337.45, 279.81, 1, 'white', 0.1, 0],
+    [121.97, 349, 221.03, 1, 'white', 0.16, 1],
+    [152.07, 189, 228.84, 1, 'white', 0.13, 1],
+    [18.23, 356.11, 306.72, 2, 'white', 0.17, 2],
+    [286.58, 221.35, 290.61, 2, 'white', 0.13, 0],
+    [62.17, 322.1, 289.66, 1, 'white', 0.11, 1],
+    [130.71, 204.68, 181.84, 2, 'white', 0.18, 0],
+    [292.43, 162.92, 274.7, 1, 'white', 0.15, 1],
+    [271.35, 336.04, 307.81, 1, 'white', 0.09, 2],
+    [260.87, 299, 316.81, 3, 'white', 0.13, 0],
+    [253.1, 256.65, 333.02, 1, 'white', 0.14, 2],
+    [304.34, 269.72, 294.8, 1, 'white', 0.12, 0],
+    [178.8, 158.2, 310.22, 2, 'white', 0.14, 2],
+    [246.27, 340.55, 348.97, 2, 'white', 0.11, 2],
+    [136.54, 297.08, 344.9, 3, 'white', 0.09, 1],
+    [134.99, 299.18, 251.2, 1, 'white', 0.17, 1],
+    [73.73, 268.74, 261.9, 1, 'white', 0.08, 2],
+  ],
+  secure: [[60, 257.4, 350, 2, 'white', 0.9, 1]],
+  wallet: [
+    [-6.05, 294.04, 305.77, 3, 'white', 0.45, 1],
+    [79.23, 176.11, 278.8, 2, 'white', 0.29, 2],
+    [107.5, 294.55, 339.21, 2, 'blue', 0.46, 0],
+    [-4.79, 168.69, 190.57, 2, 'blue', 0.35, 2],
+    [11.43, 296.69, 250.2, 1, 'sky', 0.49, 2],
+    [146.76, 245.44, 181.24, 2, 'sky', 0.5, 2],
+    [118.14, 282.36, 223.98, 3, 'white', 0.38, 0],
+    [300.5, 172.86, 250.9, 2, 'white', 0.48, 1],
+    [-56.46, 235.19, 207.67, 2, 'white', 0.21, 1],
+    [-25.28, 313.9, 320.47, 1, 'sky', 0.27, 0],
+    [115.89, 279.38, 289.18, 1, 'white', 0.48, 0],
+    [105.99, 244.43, 189.39, 2, 'sky', 0.43, 1],
+    [5.07, 246.26, 309.63, 1, 'white', 0.31, 1],
+    [52.88, 235.77, 280.96, 1, 'blue', 0.33, 0],
+  ],
+} as const satisfies Record<string, readonly Streak[]>
+
+const steps = {
+  approve: [
+    ['path', 14],
+    ['approve', 3],
+    ['ignite', 1],
+  ],
+  connect: [['connect', 10]],
+  fund: [
+    ['path', 16],
+    ['fund', 8],
+  ],
+  funded: [
+    ['path', 18],
+    ['fund', 12],
+    ['funded', 16],
+  ],
+  funding: [
+    ['path', 18],
+    ['fund', 10],
+    ['funded', 8, 0.45],
+  ],
+  secure: [
+    ['path', 18],
+    ['wallet', 14, 0.9],
+    ['secure', 1],
+  ],
+  wallet: [
+    ['path', 14],
+    ['wallet', 4, 0.35],
+  ],
+  'wallet-funded': [
+    ['path', 16],
+    ['wallet', 12, 0.85],
+  ],
+  'wallet-funding': [
+    ['path', 16],
+    ['wallet', 8, 0.55],
+  ],
+} as const satisfies Record<string, readonly Layer<keyof typeof trails>[]>
+
+namespace styles {
+  export const body = style(
+    {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBlockStart: 'auto !custom',
+      position: 'relative',
+      rowGap: '8',
+    },
+    { id: 'tds/web/hero-visual/body' },
+  )
+
+  // Figma draws the caption at 50% white, which no variable holds.
+  export const caption = style(
+    { color: '#ffffff80 !custom', margin: '0', typography: 'body.b3Strong' },
+    { id: 'tds/web/hero-visual/caption' },
+  )
+
+  export const description = style(
+    { color: 'neutral.tint.056', margin: '0', typography: 'body.b2' },
+    { id: 'tds/web/hero-visual/description' },
+  )
+
+  // The card is dark in both schemes, so its content renders in the dark scheme.
+  export const hero = style(
+    {
+      borderRadius: 'sm',
+      boxSizing: 'border-box',
+      colorScheme: 'dark !custom',
+      display: 'flex',
+      flexDirection: 'column',
+      isolation: 'isolate !custom',
+      minHeight: '32.5rem !custom',
+      overflow: 'hidden',
+      padding: '40',
+      position: 'relative',
+    },
+    { id: 'tds/web/hero-visual' },
+  )
+
+  // The wordmark sits at 14px tall, where the default logo is 20px.
+  export const logo = style(
+    {
+      color: 'overlay.content.primary',
+      height: '0.875rem !custom',
+      position: 'relative',
+      width: '63.022px !custom',
+    },
+    { id: 'tds/web/hero-visual/logo' },
+  )
+
+  // Figma dims the title to 35% white until the flow completes, which no variable holds.
+  export const title = variants(
+    {
+      base: {
+        color: '#ffffff59 !custom',
+        margin: '0',
+        transitionDuration: '320',
+        transitionProperty: 'color !custom',
+        transitionTimingFunction: 'out',
+        typography: 'display.d1',
+      },
+      variants: { complete: { false: {}, true: { color: 'overlay.content.primary' } } },
+    },
+    { id: 'tds/web/hero-visual/title' },
+  )
+}

package/src/web/components/Kbd.tsx

@@ -134,27 +134,34 @@ namespace styles {
       base: {
         alignItems: 'center',
         backgroundColor: 'container.regular',
+        border: '1px solid !custom',
+        borderColor: 'line.secondary',
         borderRadius: '2xs',
-        boxShadow: 'small',
         boxSizing: 'border-box',
         color: 'content.secondary',
         columnGap: '4',
         display: 'inline-flex',
         justifyContent: 'center',
+        typography: 'body.b3',
         whiteSpace: 'nowrap',
       },
       defaultVariants: { size: 'medium' },
       variants: {
-        // Matches static Badge badges: 20, 24 and 32px.
+        // The 1px border sits inside the padding, so each size keeps the width of its Figma key.
         size: {
-          large: { height: '32', minWidth: '32', paddingInline: '8', typography: 'body.b2' },
-          medium: {
-            height: '24',
-            minWidth: '24',
-            paddingInline: '6',
-            typography: 'body.b3',
+          large: {
+            color: 'content.primary',
+            height: '32',
+            minWidth: '32',
+            paddingInline: 'calc(0.75rem - 1px) !custom',
+          },
+          medium: { height: '24', minWidth: '24', paddingInline: 'calc(0.5rem - 1px) !custom' },
+          small: {
+            borderRadius: '3xs',
+            height: '20',
+            minWidth: '20',
+            paddingInline: 'calc(0.25rem - 1px) !custom',
           },
-          small: { height: '20', minWidth: '20', paddingInline: '4', typography: 'body.b3' },
         },
       },
     },