@tempoxyz/ds 0.3.0 → 0.3.2

package/src/web/components/Avatar.tsx

@@ -4,10 +4,11 @@ import type * as zyzz from 'zyzz'
 import { variants } from '../zyzz.config.js'
 
 /**
- * A circular `<span>` that represents a person, contact, or wallet with initials or an icon in its
- * `Fallback`. `Avatar` is the same component as `Avatar.Root`.
+ * A circular `<span>` that represents a person, contact, or wallet with an `Image`, or with
+ * initials or an icon in its `Fallback`. `Avatar` is the same component as `Avatar.Root`.
  *
- * - Use initials for people and contacts, and an icon for wallets and apps.
+ * - Use an image when one exists, initials for people and contacts, and an icon for wallets and
+ *   apps.
  * - Pair the avatar with a visible name. Do not rely on initials or an icon alone to identify
  *   someone.
  *
@@ -23,6 +24,12 @@ import { variants } from '../zyzz.config.js'
  *   </Avatar.Fallback>
  * </Avatar>
  *
+ * @example
+ * <Avatar size="64">
+ *   <Avatar.Image alt="" src={photo} />
+ *   <Avatar.Fallback>AL</Avatar.Fallback>
+ * </Avatar>
+ *
  * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role | MDN img role}
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
@@ -36,7 +43,9 @@ export namespace Avatar {
 
   /**
    * Renders the `<span>` that fills the avatar with initials or an icon, and uppercases its text.
-   * An icon renders at 16px in a `24` or `32` avatar, and at 20px in a `40` avatar.
+   * An icon renders at 12px in a `16` avatar, 16px in a `24` or `32` avatar, 20px in a `40`
+   * avatar, 24px in a `48` avatar, and 30px in a `64` avatar. Base UI hides it once an `Image`
+   * loads.
    */
   export function Fallback(props: Fallback.Props) {
     const { className, vars, ...attributes } = props
@@ -54,8 +63,30 @@ export namespace Avatar {
   }
 
   /**
-   * Renders the circular `<span>`, filled with `container.strong`. `size` sets its diameter in
-   * pixels.
+   * Renders the `<img>` that fills and crops to the avatar. Base UI mounts it once the image
+   * loads, or at once with `keepMounted`, and the `Fallback` shows while it loads or after it
+   * fails.
+   */
+  export function Image(props: Image.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <BaseUi.Avatar.Image
+        {...attributes}
+        {...styles.image({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Image {
+    export type Props = ComponentPropsWithRef<'img'> &
+      zyzz.Props.Variants<typeof styles.image> &
+      Pick<BaseUi.Avatar.Image.Props, 'keepMounted' | 'onLoadingStatusChange'>
+  }
+
+  /**
+   * Renders the circular `<span>`, filled with `container.strong` until an `Image` loads.
+   * `size` sets its diameter in pixels.
    */
   export function Root(props: Root.Props) {
     const { className, size, vars, ...attributes } = props
@@ -90,6 +121,18 @@ namespace styles {
     { id: 'tds/web/avatar/fallback' },
   )
 
+  export const image = variants(
+    {
+      base: {
+        display: 'block',
+        height: '100% !custom',
+        objectFit: 'cover !custom',
+        width: '100% !custom',
+      },
+    },
+    { id: 'tds/web/avatar/image' },
+  )
+
   export const root = variants(
     {
       base: {
@@ -104,12 +147,24 @@ namespace styles {
         position: 'relative',
         userSelect: 'none',
         verticalAlign: 'middle',
+        // A loaded image paints the whole circle, so the fill stays clear of its edge.
+        selectors: {
+          '&:has(> img:not([data-loading], [data-error]))': {
+            backgroundColor: 'transparent !custom',
+          },
+        },
       },
       defaultVariants: { size: '40' },
       variants: {
         // Icons size by font size, so an `Identicon`, which sets its own width, keeps filling the
         // circle.
         size: {
+          '16': {
+            height: '16',
+            typography: 'body.b3Strong',
+            width: '16',
+            selectors: { '& svg': { fontSize: '12' } },
+          },
           '24': {
             height: '24',
             typography: 'body.b3Strong',
@@ -128,6 +183,18 @@ namespace styles {
             width: '40',
             selectors: { '& svg': { fontSize: '20' } },
           },
+          '48': {
+            height: '48',
+            typography: 'body.b1Strong',
+            width: '48',
+            selectors: { '& svg': { fontSize: '24' } },
+          },
+          '64': {
+            height: '64',
+            typography: 'body.b1Strong',
+            width: '64',
+            selectors: { '& svg': { fontSize: '30' } },
+          },
         },
       },
     },

package/src/web/components/Badge.tsx

@@ -11,6 +11,8 @@ import { variants } from '../zyzz.config.js'
  * - Keep the text to a word or two that names a status or attribute, such as Testnet.
  * - Place it next to a title or row value. Use `inverse` for one recommended option.
  * - Render a static badge for display. Reach for `render` only when the badge performs an action.
+ * - Set `shape="icon"` for a badge that holds one icon: a 32px square, or a 24px circle at
+ *   `small`. Label it with `aria-label` and `role="img"` when the icon carries meaning.
  *
  * @example
  * <Badge size="small" variant="outlined">
@@ -22,13 +24,13 @@ import { variants } from '../zyzz.config.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html | WCAG 2.2 Contrast (Minimum)}
  */
 export function Badge(props: Badge.Props) {
-  const { className, ref, render, size, variant, vars, ...attributes } = props
+  const { className, ref, render, shape, size, variant, vars, ...attributes } = props
 
   return useRender({
     defaultTagName: 'span',
     props: {
       ...attributes,
-      ...styles.badge({ className, size, style: props.style, variant, vars }),
+      ...styles.badge({ className, shape, size, style: props.style, variant, vars }),
     },
     ref,
     render,
@@ -87,8 +89,42 @@ namespace styles {
           },
         },
       },
-      defaultVariants: { size: 'medium', variant: 'soft' },
+      // An icon badge squares its box to the height of the size, so the shape outranks the size
+      // padding and minimum width.
+      compoundVariants: [
+        {
+          when: { shape: 'icon' },
+          style: { minWidth: '0', paddingInline: '0', width: '32' },
+        },
+        {
+          when: { shape: 'icon', size: 'small' },
+          style: {
+            borderRadius: 'full',
+            cornerShape: 'round',
+            height: '24',
+            width: '24',
+            // The spacing scale has no 14px step, so the icon takes the literal.
+            selectors: {
+              '& > svg': { height: '0.875rem !custom', width: '0.875rem !custom' },
+            },
+          },
+        },
+        // The Platform Icon Badge fills its gray badge with the subtle container, a step lighter
+        // than the soft Badge in light mode.
+        {
+          when: { shape: 'icon', variant: 'soft' },
+          style: { backgroundColor: 'container.subtle' },
+        },
+      ],
+      defaultVariants: { shape: 'default', size: 'medium', variant: 'soft' },
       variants: {
+        /**
+         * The box of the badge: `default` fits a label, and `icon` holds one icon in a 32px
+         * square, or in a 24px circle at `small`.
+         *
+         * @default 'default'
+         */
+        shape: { default: {}, icon: {} },
         size: {
           medium: {},
           small: {
@@ -104,8 +140,10 @@ namespace styles {
           // The accent text follows the inverse content color, which turns black in dark mode.
           accent: { backgroundColor: 'accent.blue.background', color: 'inverse.content.primary' },
           elevated: { backgroundColor: 'background.elevated', color: 'content.primary' },
-          // The inverse fill stays dark in both schemes, so its text stays white.
-          inverse: { backgroundColor: 'inverse.background.secondary', color: 'neutral.000' },
+          inverse: {
+            backgroundColor: 'inverse.background.secondary',
+            color: 'inverse.content.primary',
+          },
           outlined: {
             backgroundColor: 'transparent !custom',
             borderColor: 'line.secondary',

package/src/web/components/Button.tsx

@@ -12,6 +12,9 @@ import { Spinner } from './Spinner.js'
  * - Use `Button` for actions and `Button.Link` for navigation.
  * - Label with a specific verb, such as Send payment. Give `shape="icon"` buttons, which render as circles, an `aria-label`.
  * - Keep one `primary` button per view or section, and give the others `secondary` or `tertiary`.
+ * - Use `danger` for the action that confirms a destructive outcome, such as Revoke key.
+ * - Use `text` for a low-emphasis action in running content, such as See more, with a trailing
+ *   `ChevronRight`. It has no fill or padding, and ignores `size`.
  * - Set `appearance="inverse"` on an inverse surface, such as a dark banner on a light page, and
  *   `appearance="overlay"` over an image or video.
  * - Use `large` for the actions in a dialog footer. Keep `xsmall` pills for actions inside a row
@@ -136,7 +139,8 @@ namespace styles {
             scale: 'press',
             transitionDuration: '100',
           },
-          '&:disabled': { cursor: 'default', opacity: 'disabled' },
+          // The Platform Button dims a disabled button to 40%, more than `opacity.disabled`.
+          '&:disabled': { cursor: 'default', opacity: '0.4 !custom' },
           '&:focus-visible': { outlineColor: 'action.focusRing' },
           '&[data-loading]': { opacity: '1 !custom' },
         },
@@ -162,18 +166,11 @@ namespace styles {
             selectors: { '& > span:first-child': { minWidth: '0 !custom' } },
           },
         },
-        // The Platform Icon Button keeps its primary fill dark in both schemes, so its icon stays
-        // white. Hover and press take the primary action fills, which turn light in dark mode, so
-        // the icon takes the inverse content color over them.
+        // The Platform Icon Button fills its primary circle a step lighter than the primary
+        // Button in light mode.
         {
           when: { appearance: 'base', shape: 'icon', variant: 'primary' },
-          style: {
-            backgroundColor: 'inverse.background.secondary',
-            color: 'neutral.000',
-            selectors: {
-              '&:is(:hover, :active):not(:disabled)': { color: 'inverse.content.primary' },
-            },
-          },
+          style: { backgroundColor: 'inverse.background.secondary' },
         },
         // The focus ring of the page blends into an inverse surface, so an inverse button draws
         // its ring in the inverse text color, 2px out, where the surface separates it from a fill
@@ -210,24 +207,56 @@ namespace styles {
             },
           },
         },
-        // Figma paints the overlay fills as gray literals that no variable holds. Hover lightens
-        // the fill.
+        // The overlay fills and text keep the same colors in both schemes. Hover lightens the fill.
         {
           when: { appearance: 'overlay', variant: 'secondary' },
           style: {
-            backgroundColor: '#70707052 !custom',
-            color: 'inverse.content.primary',
+            backgroundColor: 'overlay.container.regular',
+            color: 'overlay.content.primary',
             selectors: {
-              '&:is(:hover, :active):not(:disabled)': { backgroundColor: '#70707048 !custom' },
+              '&:is(:hover, :active):not(:disabled)': {
+                backgroundColor: 'overlay.action.secondary.fill.hover',
+              },
             },
           },
         },
         {
-          when: { appearance: ['inverse', 'overlay'], variant: 'tertiary' },
+          when: { appearance: 'inverse', variant: 'tertiary' },
           style: {
             color: 'inverse.content.primary',
             selectors: {
-              '&:is(:hover, :active):not(:disabled)': { backgroundColor: 'neutral.tint.012' },
+              '&:is(:hover, :active):not(:disabled)': {
+                backgroundColor: 'inverse.container.regular',
+              },
+            },
+          },
+        },
+        {
+          when: { appearance: 'overlay', variant: 'tertiary' },
+          style: {
+            color: 'overlay.content.primary',
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': {
+                backgroundColor: 'overlay.action.tertiary.fill.hover',
+              },
+            },
+          },
+        },
+        // On the page, the `xsmall` pill fills with the container colors instead of the button fills.
+        {
+          when: { appearance: 'base', size: 'xsmall', variant: 'secondary' },
+          style: {
+            backgroundColor: 'container.regular',
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': { backgroundColor: 'container.strong' },
+            },
+          },
+        },
+        {
+          when: { appearance: 'base', size: 'xsmall', variant: 'tertiary' },
+          style: {
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': { backgroundColor: 'container.regular' },
             },
           },
         },
@@ -247,16 +276,18 @@ namespace styles {
           default: {},
           icon: { aspectRatio: '1 !custom' },
         },
-        // `xsmall` is a pill for actions inside a row or field. The others keep radius `xs` and an 80px
-        // minimum width, set on the label net of the padding, so a flex row never shrinks a button
-        // below its label.
+        // `xsmall` is a pill for actions inside a row or field. `large` and `medium` round at `sm`,
+        // and `small` at `xs`. These keep an 80px minimum width, set on the label net of the
+        // padding, so a flex row never shrinks a button below its label.
         size: {
           large: {
+            borderRadius: 'sm',
             height: '48',
             paddingInline: '32',
             selectors: { '& > span:first-child': { minWidth: '1rem !custom' } },
           },
           medium: {
+            borderRadius: 'sm',
             height: '40',
             paddingInline: '24',
             selectors: { '& > span:first-child': { minWidth: '2rem !custom' } },
@@ -278,6 +309,16 @@ namespace styles {
         // Each pressed fill follows its hover fill, so it wins while the pointer stays over the
         // button.
         variant: {
+          // The Platform Button has no pressed design for `danger`, so a press keeps the hover fill.
+          danger: {
+            backgroundColor: 'action.danger.fill.rest',
+            color: 'action.danger.label.rest',
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': {
+                backgroundColor: 'action.danger.fill.hover',
+              },
+            },
+          },
           // The Platform Button paints its primary fill and label with the inverse colors.
           primary: {
             backgroundColor: 'inverse.background.primary',
@@ -303,6 +344,22 @@ namespace styles {
               '&:active:not(:disabled)': { backgroundColor: 'action.tertiary.fill.pressed' },
             },
           },
+          // The text button draws only its label and icon, so it drops the fill, padding, and height
+          // of every size, and darkens its label on hover.
+          text: {
+            backgroundColor: 'transparent !custom',
+            borderRadius: '3xs',
+            color: 'content.secondary',
+            height: 'auto !custom',
+            padding: '0',
+            typography: 'body.b2Strong',
+            selectors: {
+              '& > span:first-child': { minWidth: '0 !custom' },
+              '& > span > svg': { fontSize: '12' },
+              '&:focus-visible': { outlineOffset: '2' },
+              '&:hover:not(:disabled)': { color: 'content.primary' },
+            },
+          },
         },
       },
     },

package/src/web/components/Callout.tsx

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style } from '../zyzz.config.js'
+
+/**
+ * A subtle box that sets a passage of body text apart from the text around it, such as a summary
+ * or an aside in an article. It renders a `div` with no role and announces nothing.
+ *
+ * - Keep it to a short passage that the reader can skip without missing a step.
+ * - Use `Alert` for a message about a status or an outcome.
+ *
+ * @example
+ * <Callout>Settlement finishes in under a second on Tempo.</Callout>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div | MDN div element}
+ */
+export function Callout(props: Callout.Props) {
+  const { className, vars, ...attributes } = props
+
+  return <div {...attributes} {...styles.callout({ className, style: props.style, vars })} />
+}
+
+export namespace Callout {
+  export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.callout>
+}
+
+namespace styles {
+  export const callout = style(
+    {
+      backgroundColor: 'container.subtle',
+      borderRadius: 'sm',
+      boxSizing: 'border-box',
+      color: 'content.primary',
+      paddingBlock: '24',
+      paddingInline: '32',
+      typography: 'body.b2',
+      selectors: {
+        // The browser's block margins of paragraphs and lists give way to the padding.
+        '& > :where(p, ul, ol):first-child': { marginBlockStart: '0' },
+        '& > :where(p, ul, ol):last-child': { marginBlockEnd: '0' },
+      },
+    },
+    { id: 'tds/web/callout' },
+  )
+}

package/src/web/components/ChoiceGroup.tsx

@@ -15,8 +15,8 @@ import { style, variants, vars } from '../zyzz.config.js'
 /**
  * A single-select segmented control built on Base UI Radio Group. The root has
  * `role="radiogroup"` and each item `role="radio"`. Tab enters and leaves the group, and the arrow
- * keys move and select. The `default` variant matches `Tabs`, with a raised pill that slides under
- * the checked item.
+ * keys move and select. The `default` variant slides a pill under the checked item. A `medium`
+ * track fills its row with equal items, as the Platform segmented control does.
  *
  * - Use it for a few mutually exclusive options that fit on screen. Use `Select` for longer lists.
  * - Name the group with a `Field.Label`, `aria-label`, or `aria-labelledby` pointing at a visible question.
@@ -37,7 +37,7 @@ import { style, variants, vars } from '../zyzz.config.js'
 export namespace ChoiceGroup {
   /**
    * One option, rendered as a `span` with `role="radio"` and a hidden native input beside it. Its
-   * text content is its accessible name. A checked item sets its label in the strong weight, and
+   * text content is its accessible name. A checked small or large item sets its label in the strong weight, and
    * every item reserves the width of that weight for the text in its children, so a change of
    * selection never shifts the row. Text that an element child renders reserves no width.
    */
@@ -303,7 +303,7 @@ namespace styles {
   export const root = variants(
     {
       base: { boxSizing: 'border-box', display: 'inline-flex', position: 'relative' },
-      // The default track matches Tabs: items and the pill sit 4px in, so their radius is the
+      // In the default track, items and the pill sit 4px in, so their radius is the
       // track's minus 4px. The small track insets them by 2px instead. Chips fill the track
       // height and take the Choicebox tile radius.
       compoundVariants: [
@@ -311,9 +311,23 @@ namespace styles {
           when: { size: 'large', variant: 'default' },
           style: { borderRadius: 'sm', selectors: { '& > *': { borderRadius: 'xs' } } },
         },
+        // The medium track is the Platform segmented control: it fills its container and splits
+        // it into equal items, and its pill lies flat in the secondary background.
         {
           when: { size: 'medium', variant: 'default' },
-          style: { borderRadius: 'xs', selectors: { '& > *': { borderRadius: '2xs' } } },
+          style: {
+            borderRadius: 'xs',
+            display: 'flex',
+            justifySelf: 'stretch',
+            selectors: {
+              '& > *': { borderRadius: '2xs' },
+              '& > [role="radio"]': { color: 'content.primary', flex: '1 1 0 !custom' },
+              '& > span[aria-hidden="true"]': {
+                backgroundColor: 'background.secondary',
+                boxShadow: 'none !custom',
+              },
+            },
+          },
         },
         {
           when: { size: 'small', variant: 'default' },
@@ -344,8 +358,8 @@ namespace styles {
       ],
       defaultVariants: { size: 'medium', variant: 'default' },
       variants: {
-        // The shared control scale: 32, 40 and 56px tracks with 28, 32 and 48px items. Labels
-        // take the strong weight only while their item is checked.
+        // 32, 48 and 56px tracks with 28, 40 and 48px items. Small and large labels take the
+        // strong weight only while their item is checked.
         size: {
           large: {
             height: '56',
@@ -359,16 +373,16 @@ namespace styles {
               '& > [role="radio"] [data-reserve]': { typography: 'body.b1Strong' },
             },
           },
+          // A checked medium item keeps the regular weight, as the Platform segment item draws it.
           medium: {
-            height: '40',
+            height: '48',
             selectors: {
               '& > [role="radio"]': {
-                height: '32',
+                height: '40',
                 paddingInline: '16',
-                typography: 'body.b2',
+                typography: 'body.b3',
               },
-              '& > [role="radio"][data-checked]': { typography: 'body.b2Strong' },
-              '& > [role="radio"] [data-reserve]': { typography: 'body.b2Strong' },
+              '& > [role="radio"] [data-reserve]': { typography: 'body.b3' },
             },
           },
           small: {

package/src/web/components/Code.tsx

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style } from '../zyzz.config.js'
+
+/**
+ * Inline code in a native `code` element, set in the mono type on a regular container. It flows
+ * with the text around it and wraps with it, repeating its fill and padding on each line.
+ *
+ * - Use it for short identifiers, commands, and values inside a sentence, such as pnpm check.
+ * - Use `Snippet` for a command that people copy, and `Kbd` for keys.
+ *
+ * @example
+ * <p>
+ *   Run <Code>pnpm check</Code> before you push.
+ * </p>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code | MDN code element}
+ */
+export function Code(props: Code.Props) {
+  const { className, vars, ...attributes } = props
+
+  return <code {...attributes} {...styles.code({ className, style: props.style, vars })} />
+}
+
+export namespace Code {
+  export type Props = ComponentPropsWithRef<'code'> & zyzz.Props.Variants<typeof styles.code>
+}
+
+namespace styles {
+  export const code = style(
+    {
+      backgroundColor: 'container.regular',
+      borderRadius: '3xs',
+      boxDecorationBreak: 'clone !custom',
+      color: 'content.primary',
+      paddingBlock: '2',
+      paddingInline: '4',
+      typography: 'mono.m1',
+    },
+    { id: 'tds/web/code' },
+  )
+}

package/src/web/components/CopyButton.tsx

@@ -69,10 +69,7 @@ export namespace CopyButton {
     ComponentPropsWithRef<'button'>,
     'children' | 'onClick' | 'onCopy' | 'value'
   > &
-    Pick<
-      Button.Props,
-      'focusableWhenDisabled' | 'nativeButton' | 'render' | 'size' | 'variant' | 'vars'
-    > & {
+    Pick<Button.Props, 'focusableWhenDisabled' | 'nativeButton' | 'render' | 'size' | 'vars'> & {
       /**
        * Confirmation state from a parent that copies on its own click, such as a clickable row.
        * When set, the button leaves copying to that parent.
@@ -83,6 +80,13 @@ export namespace CopyButton {
       onCopy?: (() => void) | undefined
       /** Text written to the clipboard. */
       value: string
+      /**
+       * Style of the icon button. The `text` style has no fill or padding to hold an icon, so it is
+       * left out.
+       *
+       * @default 'tertiary'
+       */
+      variant?: Exclude<Button.Props['variant'], 'text'> | undefined
     }
 }
 

package/src/web/components/Dialog.tsx

@@ -75,7 +75,13 @@ export namespace Dialog {
   export function Body(props: Body.Props) {
     const { className, vars, ...attributes } = props
 
-    return <div {...attributes} {...styles.body({ className, style: props.style, vars })} />
+    return (
+      <div
+        {...attributes}
+        data-dialog-body=""
+        {...styles.body({ className, style: props.style, vars })}
+      />
+    )
   }
 
   export namespace Body {
@@ -229,11 +235,12 @@ export namespace Dialog {
 // Drawer shares `close`, `description` and `title`. Outside a sized popup, they take the values of
 // the `small` size.
 export namespace styles {
+  // The scrim dims the page with black at 40%, which no opacity token sets.
   export const backdrop = style(
     {
       backgroundColor: 'neutral.100',
       inset: '0',
-      opacity: 'disabled',
+      opacity: '0.4 !custom',
       position: 'fixed',
       transitionDuration: '240',
       transitionProperty: 'opacity',