@tempoxyz/ds 0.3.1 → 0.3.4

package/src/web/components/SuccessHero.tsx

@@ -0,0 +1,249 @@
+/**
+ * The dark confirmation card that closes an agent or wallet setup flow, with animated streaks
+ * behind a title block and an action.
+ * @module
+ */
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style } from '../zyzz.config.js'
+import type { Layer, Streak } from './internal/Streaks.js'
+import { Streaks } from './internal/Streaks.js'
+
+/**
+ * A dark 520px confirmation card for the end of a setup flow. Streaks slide in behind a bottom row
+ * of a `SuccessHero.Body` and an action, such as a `Button`. `flow` selects the artwork of the
+ * agent or wallet flow. The card keeps its dark colors in both color schemes and renders its
+ * content in the dark scheme, so a default `Button` fills light.
+ *
+ * - Show it once, after the flow funds the agent or wallet, in place of the steps.
+ * - Lead with a caption that names what finished, and keep the title to a short sentence.
+ * - Use `HeroVisual` beside the steps while the flow runs.
+ *
+ * @example
+ * <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.</SuccessHero.Description>
+ *   </SuccessHero.Body>
+ *   <Button size="large">Done</Button>
+ * </SuccessHero>
+ *
+ * @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 SuccessHero(props: SuccessHero.Props) {
+  const { children, className, flow = 'agent', vars, ...attributes } = props
+
+  return (
+    <div {...attributes} {...styles.hero({ className, style: props.style, vars })}>
+      <Streaks height={520} layers={flows[flow]} trails={trails} width={1056} />
+      <div {...styles.content()}>{children}</div>
+    </div>
+  )
+}
+
+export namespace SuccessHero {
+  export type Props = ComponentPropsWithRef<'div'> &
+    zyzz.Props.Variants<typeof styles.hero> & {
+      /**
+       * Setup flow that the card confirms. `agent` adds the orange trails of the agent.
+       * @default 'agent'
+       */
+      flow?: keyof typeof flows | undefined
+    }
+
+  /** Stacks the caption, title, and description at the start of the bottom row. */
+  export function Body(props: Body.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.body({ className, style: props.style, vars })} />
+  }
+
+  export namespace Body {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.body>
+  }
+
+  /** A short label above the title that names what finished, such as the funded 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 detail under the title, such as the amount and its expiry. */
+  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`. */
+  export function Title(props: Title.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <h2 {...attributes} {...styles.title({ className, style: props.style, vars })} />
+  }
+
+  export namespace Title {
+    export type Props = ComponentPropsWithRef<'h2'> & zyzz.Props.Variants<typeof styles.title>
+  }
+}
+
+// The streaks of the Figma Success Hero, measured from its 1056 by 520px frame.
+const trails = {
+  agent: [
+    [214.81, 252.26, 573.73, 2, 'orange', 0.65, 0],
+    [144.8, 229.65, 625.43, 3, 'orange', 0.57, 0],
+    [123.05, 211.83, 429.03, 3, 'orange', 0.79, 0],
+    [204.99, 275.55, 398, 1, 'orange', 0.45, 1],
+    [435.07, 237.42, 670.01, 3, 'orange', 0.83, 0],
+    [-39.01, 297.89, 531.81, 1, 'orange', 0.52, 1],
+    [203.75, 269.57, 467.14, 2, 'orange', 0.49, 0],
+    [-54.29, 243.1, 473.44, 1, 'orange', 0.79, 0],
+    [600.32, 222.7, 576.86, 1, 'orange', 0.55, 1],
+    [73.3, 296.42, 738.02, 3, 'orange', 0.79, 1],
+    [565.98, 290.92, 549.88, 1, 'orange', 0.63, 1],
+    [112.48, 290.95, 481.65, 2, 'orange', 0.75, 0],
+  ],
+  agentSpark: [
+    [-107.41, 288.32, 619.07, 2, 'orange', 0.95, 2],
+    [492.26, 250.81, 605.29, 2, 'orange', 0.7, 0],
+    [552.7, 272.69, 614.22, 1, 'orange', 0.88, 2],
+    [724.14, 261.81, 562.64, 2, 'orange', 0.9, 0],
+    [489.05, 252.08, 567.95, 1, 'orange', 0.88, 0],
+    [185.83, 244.76, 648.01, 2, 'orange', 0.94, 1],
+  ],
+  agentTrail: [
+    [-68.62, 305.64, 639.78, 1, 'white', 0.35, 0],
+    [539.45, 350.15, 684.28, 1, 'white', 0.24, 2],
+    [517.58, 175.25, 446.06, 1, 'white', 0.41, 0],
+    [232.22, 272.23, 679.31, 3, 'white', 0.38, 0],
+    [-91.22, 352.64, 663.42, 3, 'sky', 0.44, 2],
+    [580.08, 299.14, 426, 2, 'sky', 0.2, 1],
+    [245.71, 235.13, 441.76, 2, 'sky', 0.49, 1],
+    [652.04, 349.18, 525.21, 1, 'sky', 0.23, 0],
+    [165.13, 184.86, 419.33, 1, 'sky', 0.21, 2],
+    [256.36, 205.67, 497.14, 1, 'white', 0.21, 0],
+    [196.73, 298, 636.47, 1, 'sky', 0.24, 2],
+    [-84.62, 172.37, 684, 1, 'white', 0.2, 1],
+    [552.28, 180.56, 545.63, 1, 'blue', 0.35, 0],
+    [351.9, 191.33, 714.6, 3, 'sky', 0.21, 0],
+    [239.51, 200.63, 721.09, 2, 'white', 0.47, 2],
+    [238.33, 287.12, 387.71, 1, 'white', 0.34, 1],
+  ],
+  path: [
+    [51.57, 281.45, 459.64, 3, 'white', 0.16, 1],
+    [34.35, 337.45, 590.96, 1, 'white', 0.1, 0],
+    [257.61, 349, 466.81, 1, 'white', 0.16, 1],
+    [321.17, 189, 483.3, 1, 'white', 0.13, 1],
+    [38.51, 356.11, 647.79, 2, 'white', 0.17, 2],
+    [605.26, 221.35, 613.76, 2, 'white', 0.13, 0],
+    [131.29, 322.1, 611.77, 1, 'white', 0.11, 1],
+    [276.07, 204.68, 384.04, 2, 'white', 0.18, 0],
+    [617.62, 162.92, 580.16, 1, 'white', 0.15, 1],
+    [573.09, 336.04, 650.09, 1, 'white', 0.09, 2],
+    [550.96, 299, 669.11, 3, 'white', 0.13, 0],
+    [534.54, 256.65, 703.33, 1, 'white', 0.14, 2],
+    [642.76, 269.72, 622.62, 1, 'white', 0.12, 0],
+    [377.62, 158.2, 655.19, 2, 'white', 0.14, 2],
+    [520.13, 340.55, 737.02, 2, 'white', 0.11, 2],
+    [288.36, 297.08, 728.44, 3, 'white', 0.09, 1],
+    [285.11, 299.18, 530.54, 1, 'white', 0.17, 1],
+    [155.72, 268.74, 553.14, 1, 'white', 0.08, 2],
+  ],
+  wallet: [
+    [-12.78, 294.04, 645.79, 3, 'white', 0.45, 1],
+    [167.32, 176.11, 588.83, 2, 'white', 0.29, 2],
+    [227.04, 294.55, 716.4, 2, 'blue', 0.46, 0],
+    [-10.11, 168.69, 402.48, 2, 'blue', 0.35, 2],
+    [24.14, 296.69, 528.42, 1, 'sky', 0.49, 2],
+    [309.96, 245.44, 382.78, 2, 'sky', 0.5, 2],
+    [249.52, 282.36, 473.05, 3, 'white', 0.38, 0],
+    [634.65, 172.86, 529.91, 2, 'white', 0.48, 1],
+    [-119.23, 235.19, 438.61, 2, 'white', 0.21, 1],
+    [-53.39, 313.9, 676.84, 1, 'sky', 0.27, 0],
+    [244.77, 279.38, 610.74, 1, 'white', 0.48, 0],
+    [223.86, 244.43, 400, 2, 'sky', 0.43, 1],
+    [10.71, 246.26, 653.95, 1, 'white', 0.31, 1],
+    [111.68, 235.77, 593.39, 1, 'blue', 0.33, 0],
+    [80.56, 252.4, 560.4, 1, 'blue', 0.5, 1],
+    [685.46, 299.39, 585.79, 1, 'white', 0.41, 2],
+    [144.52, 251.39, 467.95, 2, 'sky', 0.24, 2],
+    [304.95, 182.11, 390.92, 1, 'sky', 0.4, 2],
+  ],
+} as const satisfies Record<string, readonly Streak[]>
+
+const flows = {
+  agent: [
+    ['path', 18],
+    ['agent', 12],
+    ['agentTrail', 16],
+    ['agentSpark', 6],
+  ],
+  wallet: [
+    ['path', 18],
+    ['wallet', 18],
+  ],
+} as const satisfies Record<string, readonly Layer<keyof typeof trails>[]>
+
+namespace styles {
+  export const body = style(
+    { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '12' },
+    { id: 'tds/web/success-hero/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/success-hero/caption' },
+  )
+
+  export const content = style(
+    {
+      alignItems: 'flex-end',
+      columnGap: '32',
+      display: 'flex',
+      justifyContent: 'space-between',
+      marginBlockStart: 'auto !custom',
+      position: 'relative',
+    },
+    { id: 'tds/web/success-hero/content' },
+  )
+
+  // Figma draws the description at 60% white, which no variable holds.
+  export const description = style(
+    { color: '#ffffff99 !custom', margin: '0', typography: 'body.b2' },
+    { id: 'tds/web/success-hero/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: '48',
+      position: 'relative',
+    },
+    { id: 'tds/web/success-hero' },
+  )
+
+  export const title = style(
+    { color: 'overlay.content.primary', margin: '0', typography: 'display.d1' },
+    { id: 'tds/web/success-hero/title' },
+  )
+}

package/src/web/components/Surface.tsx

@@ -256,9 +256,11 @@ namespace styles {
           '& > [data-list-group][data-variant="plain"] > [data-divider]:has([role="meter"])': {
             paddingBlock: '10',
           },
-          // The rows already reach the surface's edges, so their fills draw no bleed past them.
-          '& > [data-list-group][data-variant="plain"] > [data-divider]:is(:hover, :active)': {
-            boxShadow: 'none !custom',
+          // The rows already reach the surface's edges, so their highlight fills the row without a
+          // bleed and follows its corners.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]::after': {
+            borderRadius: 'inherit !custom',
+            insetInline: '0',
           },
           // After a header, the list rises by the 14px above the text of a one-line row, so the
           // text keeps the header's 20px gap. After other content, the list keeps its place, so its

package/src/web/components/Switch.tsx

@@ -76,40 +76,33 @@ export namespace Switch {
 }
 
 namespace styles {
+  // The thumb is a pill, 16px wider than tall at medium, as the Platform switch draws it.
   export const thumb = style(
     {
-      backgroundColor: 'neutral.000',
+      backgroundColor: 'inverse.content.primary',
       borderRadius: 'full',
-      boxShadow: 'small',
       cornerShape: 'round',
       flexShrink: '0 !custom',
-      height: '24px !custom',
+      height: '20',
       // The thumb stretches its width while pressed, which a transform would distort.
       transitionDuration: '240',
-      transitionProperty: 'background-color, box-shadow, translate, width',
+      transitionProperty: 'background-color, translate, width',
       transitionTimingFunction: 'overshoot',
-      width: '24px !custom',
+      width: '36',
       selectors: {
-        '&[data-checked]': {
-          backgroundColor: 'background.elevated',
-          boxShadow: 'none !custom',
-          translate: '22px 0 !custom',
-        },
-        '[data-size="large"] > &': { height: '32', width: '32' },
+        '&[data-checked]': { translate: '20' },
+        '[data-size="large"] > &': { height: '32', width: '56' },
         '[data-size="large"] > &[data-checked]': { translate: '32' },
-        '[data-size="large"]:active:not([data-disabled]) > &': { width: '36' },
+        '[data-size="large"]:active:not([data-disabled]) > &': { width: '60px !custom' },
         '[data-size="large"]:active:not([data-disabled]) > &[data-checked]': { translate: '28' },
-        '[data-size="medium"]:active:not([data-disabled]) > &': { width: '30px !custom' },
-        '[data-size="medium"]:active:not([data-disabled]) > &[data-checked]': {
-          translate: '16px 0 !custom',
-        },
-        '[data-size="small"] > &': { height: '20', width: '20' },
+        '[data-size="medium"]:active:not([data-disabled]) > &': { width: '40' },
+        '[data-size="medium"]:active:not([data-disabled]) > &[data-checked]': { translate: '16' },
         '[data-size="small"] > &[data-checked]': { translate: '16' },
-        '[data-size="small"]:active:not([data-disabled]) > &': { width: '24' },
+        '[data-size="small"]:active:not([data-disabled]) > &': { width: '40' },
         '[data-size="small"]:active:not([data-disabled]) > &[data-checked]': { translate: '12' },
       },
       '@media (prefers-reduced-motion: reduce)': {
-        transitionProperty: 'background-color, box-shadow',
+        transitionProperty: 'background-color',
       },
     },
     { id: 'tds/web/switch/thumb' },
@@ -138,7 +131,7 @@ namespace styles {
           '&::after': { content: '"" !custom', inset: '-8', position: 'absolute' },
           '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
           '&:hover:not([data-disabled]):not([data-checked])': { backgroundColor: 'line.primary' },
-          '&[data-checked]': { backgroundColor: 'content.primary' },
+          '&[data-checked]': { backgroundColor: 'content.accent' },
           '&[data-checked]:hover:not([data-disabled])': { opacity: 'hover' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {
@@ -153,12 +146,12 @@ namespace styles {
       },
       defaultVariants: { size: 'medium' },
       variants: {
+        // The padding, thumb width, checked translation and padding of each size add up to the
+        // track width. Medium is the 64 by 28px Platform switch.
         size: {
-          large: { height: '40', padding: '4', width: '72' },
-          // The track, thumb, and checked translation of each size add up exactly, so a size uses
-          // tokens or px throughout. Medium stays in px, since its 3px padding has no spacing step.
-          medium: { height: '30px !custom', padding: '3px !custom', width: '52px !custom' },
-          small: { height: '24', padding: '2', width: '40' },
+          large: { height: '40', padding: '4', width: '96px !custom' },
+          medium: { height: '28', padding: '4', width: '64' },
+          small: { height: '24', padding: '2', width: '56' },
         },
       },
     },

package/src/web/components/Table.tsx

@@ -19,6 +19,8 @@ import { style, variants, vars } from '../zyzz.config.js'
  * - For a sortable column, set `aria-sort` on its `Table.HeaderCell` and put a `Table.SortButton`
  *   in it.
  * - With `interactive`, make each clickable row reachable by keyboard through a link or button.
+ * - For copy rather than data, set `variant="dense"` for a row of labels over rows of details, or
+ *   `variant="simple"` for rows of a title beside a paragraph.
  *
  * @example
  * <Table>
@@ -166,9 +168,14 @@ export namespace Table {
    * dividers, and `interactive` to fill a hovered row and outline a focus-visible one. An
    * interactive table clips each body row to its 12px corners, so a popup in a cell renders in a
    * portal.
+   *
+   * `variant` sets the data table by default. `dense` sets equal columns of Pilat copy: header cells
+   * in the primary color over body rows that each draw a line above. `simple` sets rows that each
+   * draw a line above a row header in 40% of the width beside a paragraph. Both pad rows 16px above
+   * and below, keep 16px between columns, and take no `size` or `dividers`.
    */
   export function Root(props: Root.Props) {
-    const { className, dividers, interactive, size, vars, ...attributes } = props
+    const { className, dividers, interactive, size, variant, vars, ...attributes } = props
 
     // `Surface` reads the size to inset the last row's text by its own padding.
     return (
@@ -181,6 +188,7 @@ export namespace Table {
           interactive,
           size,
           style: props.style,
+          variant,
           vars,
         })}
       />
@@ -380,6 +388,7 @@ namespace styles {
         dividers: true,
         interactive: false,
         size: 'medium',
+        variant: 'data',
       },
       variants: {
         // A row draws its divider in the 1px that its cells leave below their padding, inset by
@@ -464,6 +473,65 @@ namespace styles {
             selectors: { '& :is(td, th)': { paddingBlock: '4' }, '& td': { height: '32' } },
           },
         },
+        // Dense and simple tables set copy rather than data. Their rows pad cells 16px above and
+        // below, and a cell draws the line above its row in its top padding. Columns sit 16px apart,
+        // without padding at the edges of a row. They override the heights, dividers and edge
+        // padding of the data table, and the Pilat family follows its typography set.
+        variant: {
+          data: {},
+          dense: {
+            tableLayout: 'fixed',
+            selectors: {
+              '& :is(td, th)': {
+                boxShadow: `inset 0 ${vars.borderWidth.regular} 0 ${vars.color.line.secondary} !custom`,
+                height: 'auto !custom',
+                paddingBlock: '16',
+                paddingInline: '8',
+                textAlign: 'start',
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              '& thead :is(td, th)': {
+                boxShadow: 'none !custom',
+                color: 'content.primary',
+                paddingBlockStart: '0',
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              '& tbody tr:last-child > :is(td, th)': { paddingBlockEnd: '0' },
+              '& tbody tr:not(:last-child) > :is(td, th)': { borderBlockEnd: 'none !custom' },
+              '& tbody tr:not(:last-child)::after': { display: 'none' },
+              '& tr > :first-child': { paddingInlineStart: '0' },
+              '& tr > :last-child': { paddingInlineEnd: '0' },
+              '& tr > :last-child:not([data-justify])': { textAlign: 'start' },
+            },
+          },
+          simple: {
+            tableLayout: 'fixed',
+            selectors: {
+              '& :is(td, th)': {
+                boxShadow: `inset 0 ${vars.borderWidth.regular} 0 ${vars.color.line.primary} !custom`,
+                height: 'auto !custom',
+                paddingBlock: '16',
+                paddingInline: '8',
+                textAlign: 'start',
+                typography: 'body.b2',
+                verticalAlign: 'top',
+              },
+              '& th': {
+                boxSizing: 'border-box',
+                color: 'content.primary',
+                typography: 'body.b2Strong',
+                width: '40% !custom',
+              },
+              '& tbody tr:not(:last-child) > :is(td, th)': { borderBlockEnd: 'none !custom' },
+              '& tbody tr:not(:last-child)::after': { display: 'none' },
+              '& tr > :first-child': { paddingInlineStart: '0' },
+              '& tr > :last-child': { paddingInlineEnd: '0' },
+              '& tr > :last-child:not([data-justify])': { textAlign: 'start' },
+            },
+          },
+        },
       },
     },
     { id: 'tds/web/table/root' },