@tempoxyz/ds 0.3.1 → 0.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/components/AddressCard.tsx

@@ -0,0 +1,216 @@
+/**
+ * A receive card that pairs a wallet address with its QR code, a copy action, and the networks it
+ * accepts.
+ * @module
+ */
+import type { ComponentPropsWithRef, ReactNode } from 'react'
+import { useId } from 'react'
+import type * as zyzz from 'zyzz'
+import { style } from '../zyzz.config.js'
+import { AssetChip } from './AssetChip.js'
+import { CopyButton } from './CopyButton.js'
+import { formatHex } from './Hex.js'
+import { NetworkLogo } from './NetworkLogo.js'
+import { Qr } from './Qr.js'
+
+/**
+ * A bordered receive card with a 120px QR code of `address` beside the address, a copy button,
+ * and the networks that it accepts. The address shows its first and last four characters, and
+ * screen readers receive the full value. Pass `AddressCard.Networks` as children to list the
+ * networks.
+ *
+ * - Use it where a person receives funds, such as a deposit or top-up screen.
+ * - List only the networks that the address accepts, and mark the picked one `selected`.
+ * - Use `Hex` with `copy` for an address inside a row or a sentence.
+ *
+ * @example
+ * <AddressCard address={address}>
+ *   <AddressCard.Networks>
+ *     <AddressCard.Network network="tempo" selected>
+ *       Tempo
+ *     </AddressCard.Network>
+ *     <AddressCard.Network network="base">Base</AddressCard.Network>
+ *   </AddressCard.Networks>
+ * </AddressCard>
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
+ */
+export function AddressCard(props: AddressCard.Props) {
+  const { address, children, className, label = 'Your wallet address', vars, ...attributes } = props
+
+  return (
+    <div {...attributes} {...styles.card({ className, style: props.style, vars })}>
+      <div {...styles.qr()}>
+        <Qr value={address} />
+      </div>
+      <div {...styles.details()}>
+        <div {...styles.section()}>
+          <span {...styles.label()}>{label}</span>
+          <div {...styles.row()}>
+            <span {...styles.address()}>
+              <span aria-hidden="true">{formatHex(address)}</span>
+              <span {...styles.hidden()}>{address}</span>
+            </span>
+            <CopyButton aria-label="Copy address" value={address} variant="secondary" />
+          </div>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export namespace AddressCard {
+  export type Props = ComponentPropsWithRef<'div'> &
+    zyzz.Props.Variants<typeof styles.card> & {
+      /** Wallet address that the QR code encodes and the copy button writes. */
+      address: string
+      /**
+       * Label above the address.
+       * @default 'Your wallet address'
+       */
+      label?: ReactNode | undefined
+    }
+
+  /**
+   * One network that the address accepts, rendered as an `AssetChip` with the 12px logo of
+   * `network` before its text. Give it an `onClick` to pick a network, and set `selected` on the
+   * picked one.
+   */
+  export function Network(props: Network.Props) {
+    const { children, className, network, ...attributes } = props
+
+    return (
+      <AssetChip {...attributes} {...styles.network({ className, style: props.style })}>
+        <NetworkLogo network={network} />
+        {children}
+      </AssetChip>
+    )
+  }
+
+  export namespace Network {
+    export type Props = Omit<AssetChip.Props, 'vars'> & {
+      /** Network whose logo renders before the text. */
+      network: NetworkLogo.Props['network']
+    }
+  }
+
+  /**
+   * Lists the `AddressCard.Network` chips under a label, wrapping them onto more rows. Screen
+   * readers announce the chips as a group named by the label.
+   */
+  export function Networks(props: Networks.Props) {
+    const { children, className, label = 'Network', vars, ...attributes } = props
+    const id = useId()
+
+    return (
+      <div {...attributes} {...styles.networks({ className, style: props.style, vars })}>
+        <span id={id} {...styles.label()}>
+          {label}
+        </span>
+        <div aria-labelledby={id} role="group" {...styles.chips()}>
+          {children}
+        </div>
+      </div>
+    )
+  }
+
+  export namespace Networks {
+    export type Props = ComponentPropsWithRef<'div'> &
+      zyzz.Props.Variants<typeof styles.networks> & {
+        /**
+         * Label above the chips, which also names their group.
+         * @default 'Network'
+         */
+        label?: ReactNode | undefined
+      }
+  }
+}
+
+namespace styles {
+  export const address = style(
+    { color: 'content.primary', typography: 'mono.m1', whiteSpace: 'nowrap' },
+    { id: 'tds/web/address-card/address' },
+  )
+
+  // The card pads its 16px corner by 16px inside its 1px border.
+  export const card = style(
+    {
+      borderColor: 'line.secondary',
+      borderRadius: 'sm',
+      borderStyle: 'solid',
+      borderWidth: 'regular',
+      boxSizing: 'border-box',
+      columnGap: '20',
+      display: 'flex',
+      padding: '16',
+    },
+    { id: 'tds/web/address-card' },
+  )
+
+  export const chips = style(
+    { columnGap: '6', display: 'flex', flexWrap: 'wrap', rowGap: '6' },
+    { id: 'tds/web/address-card/chips' },
+  )
+
+  export const details = style(
+    { display: 'flex', flex: '1 !custom', flexDirection: 'column', minWidth: '0', rowGap: '16' },
+    { id: 'tds/web/address-card/details' },
+  )
+
+  export const hidden = style(
+    {
+      clipPath: 'inset(50%) !custom',
+      height: '1',
+      overflow: 'hidden',
+      position: 'absolute',
+      whiteSpace: 'nowrap',
+      width: '1',
+    },
+    { id: 'tds/web/address-card/hidden' },
+  )
+
+  export const label = style(
+    { color: 'content.secondary', typography: 'body.b3' },
+    { id: 'tds/web/address-card/label' },
+  )
+
+  // The chip sizes a token image to its 12px logo slot, and the network logo takes the same slot.
+  export const network = style(
+    { selectors: { '& > svg': { height: '12', width: '12' } } },
+    { id: 'tds/web/address-card/network' },
+  )
+
+  export const networks = style(
+    { display: 'flex', flexDirection: 'column', rowGap: '8' },
+    { id: 'tds/web/address-card/networks' },
+  )
+
+  // Figma pads the 12px corner of the QR frame by 8px, below its radius, and the 120px code fills
+  // the rest.
+  export const qr = style(
+    {
+      backgroundColor: 'background.elevated',
+      borderColor: 'line.secondary',
+      borderRadius: 'xs',
+      borderStyle: 'solid',
+      borderWidth: 'regular',
+      display: 'flex',
+      flexShrink: '0 !custom',
+      padding: '8',
+      selectors: { '& > svg': { height: '120', width: '120' } },
+    },
+    { id: 'tds/web/address-card/qr' },
+  )
+
+  export const row = style(
+    { alignItems: 'center', columnGap: '8', display: 'flex' },
+    { id: 'tds/web/address-card/row' },
+  )
+
+  export const section = style(
+    { display: 'flex', flexDirection: 'column', rowGap: '4' },
+    { id: 'tds/web/address-card/section' },
+  )
+}

package/src/web/components/AgentLogo.tsx

@@ -2,7 +2,7 @@ import { type ComponentPropsWithRef, type ReactNode, useId } from 'react'
 import type * as zyzz from 'zyzz'
 import { variants } from '../zyzz.config.js'
 
-// The Agent Logo marks from the TDPS page of Web-Wallet, with each clip and gradient ID suffixed
+// The Agent marks of the Logo component in TPDS 1.0 Platform, with each clip and gradient ID suffixed
 // per instance. A brand tile fills with the agent's color and draws its white mark in
 // `currentColor`. An outlined tile draws the mark in its own colors, or in `currentColor` for a
 // black mark.

package/src/web/components/AmountInput.tsx

@@ -74,7 +74,7 @@ export namespace AmountInput {
   export namespace Root {
     export type Props = Omit<
       TextInput.Group.Props,
-      'defaultValue' | 'onChange' | 'success' | 'variant'
+      'appearance' | 'defaultValue' | 'onChange' | 'size' | 'success' | 'variant'
     > & {
       /** @default '' */
       defaultValue?: string | undefined

package/src/web/components/AppShell.tsx

@@ -4,6 +4,8 @@ import {
   type ComponentPropsWithRef,
   createContext,
   use,
+  useId,
+  useLayoutEffect,
   useState,
   useSyncExternalStore,
 } from 'react'
@@ -23,22 +25,25 @@ type Context = {
 
 const context = createContext<Context | undefined>(undefined)
 
-// The sidebar opens as a drawer below 1024px, or below 768px when it collapses to its icons from
-// 768px to 1023px. The breakpoints are literals because media queries cannot read CSS variables.
-function useCompact(collapse: boolean) {
-  const compactQuery = collapse ? '(max-width: 767px)' : '(max-width: 1023px)'
-
+/** Reads a media query, and `false` on the server and during hydration. */
+function useQuery(query: string) {
   return useSyncExternalStore(
     (notify) => {
-      const query = window.matchMedia(compactQuery)
-      query.addEventListener('change', notify)
-      return () => query.removeEventListener('change', notify)
+      const list = window.matchMedia(query)
+      list.addEventListener('change', notify)
+      return () => list.removeEventListener('change', notify)
     },
-    () => window.matchMedia(compactQuery).matches,
+    () => window.matchMedia(query).matches,
     () => false,
   )
 }
 
+// The sidebar opens as a drawer below 1024px, or below 768px when it collapses to its icons from
+// 768px to 1023px. The breakpoints are literals because media queries cannot read CSS variables.
+function useCompact(collapse: boolean) {
+  return useQuery(collapse ? '(max-width: 767px)' : '(max-width: 1023px)')
+}
+
 function useShell() {
   const value = use(context)
   if (!value) throw new Error('AppShell parts must render inside AppShell.Root')
@@ -294,25 +299,49 @@ export namespace AppShell {
    * Toggles the sidebar drawer from a button fixed to the top-right corner, above the drawer, whose
    * two bars turn into a close mark while it is open. Hidden from 1024px, where the sidebar is
    * always visible. It is named `Open menu` or `Close menu` and exposes `aria-expanded`. Pass
-   * `aria-label` to replace the name, or `children` to replace the bars.
+   * `aria-label` to replace the name, or `children` to replace the bars. With `tabBar`, the bottom
+   * bar renders it as its floating action button below 768px instead of the top-right button.
+   *
+   * @example
+   * <AppShell.Trigger tabBar />
    */
   export function Trigger(props: Trigger.Props) {
-    const { children, className, vars, ...attributes } = props
+    const { children, className, ref, tabBar = false, vars, ...attributes } = props
     const shell = useShell()
+    const store = use(TabBar.Context)
+    const id = useId()
+    // The bottom bar shows below 768px, so the ref follows whichever of the two buttons shows.
+    const bar = useQuery('(max-width: 767px)') && tabBar
+
+    // Registers on every render, so the bottom bar repeats the current props of the trigger.
+    useLayoutEffect(() => {
+      if (!store) return
+      if (!tabBar) return store.delete(id)
+
+      const { style: _, ...rest } = attributes
+      store.set(id, {
+        active: false,
+        attributes: { ...rest, ref: bar ? ref : undefined },
+        children,
+        variant: 'menu',
+      })
+    })
+
+    useLayoutEffect(() => {
+      if (!store) return
+      return () => store.delete(id)
+    }, [id, store])
 
     return (
       <BaseUi.Drawer.Trigger
         aria-label={shell.open ? 'Close menu' : 'Open menu'}
         {...attributes}
         {...styles.trigger({ className, style: props.style, vars })}
+        data-app-shell-tab-bar={tabBar ? '' : undefined}
         handle={shell.handle}
+        ref={bar ? undefined : ref}
       >
-        {children ?? (
-          <span aria-hidden="true" {...styles.bars()}>
-            <span {...styles.bar()} />
-            <span {...styles.bar()} />
-          </span>
-        )}
+        {children ?? <Bars />}
       </BaseUi.Drawer.Trigger>
     )
   }
@@ -320,25 +349,47 @@ export namespace AppShell {
   export namespace Trigger {
     export type Props = ComponentPropsWithRef<'button'> &
       zyzz.Props.Variants<typeof styles.trigger> &
-      Pick<BaseUi.Drawer.Trigger.Props, 'nativeButton' | 'render'>
+      Pick<BaseUi.Drawer.Trigger.Props, 'nativeButton' | 'render'> & {
+        /**
+         * Renders the trigger as the floating action button of the bottom bar below 768px, after
+         * the `action` items, in place of the top-right button. While the drawer is open, the
+         * button stays above it as a close mark, and the other items of the bar fade out.
+         */
+        tabBar?: boolean | undefined
+      }
   }
 }
 
+/** The two bars of a trigger, which cross into a close mark while the drawer is open. */
+function Bars() {
+  return (
+    <span aria-hidden="true" {...styles.bars()}>
+      <span {...styles.bar()} />
+      <span {...styles.bar()} />
+    </span>
+  )
+}
+
 /**
  * Repeats the `SidebarMenu.Item`s that set `tabBar` in a bar fixed to the bottom edge below 768px:
- * `tab` items as icons in a pill `<nav>`, then each `action` item as a floating action button.
- * Renders nothing while no item sets `tabBar`.
+ * `tab` items as icons in a pill `<nav>`, then each `action` item as a floating action button, then
+ * the `AppShell.Trigger` that sets `tabBar`. Renders nothing while nothing registers.
  */
 function BottomBar() {
   const store = use(TabBar.Context)!
   const entries = useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot)
   const tabs = entries.filter(([, entry]) => entry.variant === 'tab')
   const actions = entries.filter(([, entry]) => entry.variant === 'action')
+  const menus = entries.filter(([, entry]) => entry.variant === 'menu')
 
   if (entries.length === 0) return null
 
   return (
-    <div {...styles.bottomBar()} data-app-shell-bottom-bar="">
+    <div
+      {...styles.bottomBar()}
+      data-app-shell-bottom-bar=""
+      data-app-shell-menu={menus.length > 0 ? '' : undefined}
+    >
       {tabs.length > 0 && (
         <nav aria-label="Main" {...styles.tabBar()}>
           {tabs.map(([id, entry]) => (
@@ -349,6 +400,9 @@ function BottomBar() {
       {actions.map(([id, entry]) => (
         <BottomBarItem entry={entry} key={id} />
       ))}
+      {menus.map(([id, entry]) => (
+        <BottomBarTrigger entry={entry} key={id} />
+      ))}
     </div>
   )
 }
@@ -372,6 +426,24 @@ function BottomBarItem(props: { entry: TabBar.Entry }) {
   })
 }
 
+/** Renders the `AppShell.Trigger` that sets `tabBar` as a floating action button. */
+function BottomBarTrigger(props: { entry: TabBar.Entry }) {
+  const { entry } = props
+  const shell = useShell()
+
+  return (
+    <BaseUi.Drawer.Trigger
+      aria-label={shell.open ? 'Close menu' : 'Open menu'}
+      {...(entry.attributes as BaseUi.Drawer.Trigger.Props)}
+      {...styles.action()}
+      data-app-shell-menu-trigger=""
+      handle={shell.handle}
+    >
+      {entry.children ?? <Bars />}
+    </BaseUi.Drawer.Trigger>
+  )
+}
+
 const fadeIn = keyframes(
   { from: { opacity: 0 }, to: { opacity: 1 } },
   { id: 'tds/web/app-shell/fade-in' },
@@ -383,11 +455,11 @@ const fadeOut = keyframes(
 )
 
 namespace styles {
-  // The 56px circle of the Platform Floating Action Button, filled like the primary button.
+  // The 56px circle of the Platform Floating Action Button.
   export const action = style(
     {
       alignItems: 'center',
-      backgroundColor: 'inverse.background.primary',
+      backgroundColor: 'inverse.background.secondary',
       borderRadius: 'full',
       boxShadow: 'large',
       boxSizing: 'border-box',
@@ -399,13 +471,13 @@ namespace styles {
       height: '56',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
-      outlineOffset: '2',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
       outlineWidth: '2',
       position: 'relative',
       textDecoration: 'none !custom',
       transitionDuration: '160',
-      transitionProperty: 'background-color, outline-color, scale !custom',
+      transitionProperty: 'opacity, outline-color, scale !custom',
       transitionTimingFunction: 'snappy',
       width: '56',
       selectors: {
@@ -420,10 +492,11 @@ namespace styles {
         },
         '&:active': { scale: 'press', transitionDuration: '100' },
         '&:focus-visible': { outlineColor: 'border.focus' },
-        '&:hover': { backgroundColor: 'action.primary.fill.hover' },
+        // The design dims the button to 88% under the pointer, which no opacity token sets.
+        '&:hover': { opacity: '0.88 !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {
-        transitionProperty: 'background-color, outline-color !custom',
+        transitionProperty: 'opacity, outline-color !custom',
         selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
@@ -488,6 +561,15 @@ namespace styles {
       insetInline: '24',
       position: 'fixed',
       zIndex: '39 !custom',
+      selectors: {
+        // A bar that holds the trigger rises above the open drawer, so the trigger closes it. The
+        // other items fade out and leave the drawer uncovered.
+        '[data-state="open"] > &[data-app-shell-menu]': { zIndex: 'modal' },
+        '[data-state="open"] > &[data-app-shell-menu] > :not([data-app-shell-menu-trigger])': {
+          opacity: '0 !custom',
+          pointerEvents: 'none',
+        },
+      },
       '@media (max-width: 767px)': { display: 'flex' },
     },
     { id: 'tds/web/app-shell/bottom-bar' },
@@ -518,6 +600,11 @@ namespace styles {
         },
         '&[data-starting-style]': { transform: 'translateX(100%) !custom' },
         '&[data-swiping]': { transitionDuration: '0', userSelect: 'none' },
+        // The trigger in the bottom bar stays above the open drawer, so the drawer ends 16px above
+        // it, and its footer stays uncovered.
+        '[data-state]:has(> [data-app-shell-bottom-bar][data-app-shell-menu]) &': {
+          paddingBlockEnd: 'calc(5.5rem + env(safe-area-inset-bottom)) !custom',
+        },
         // The closed drawer stays mounted with the `hidden` attribute, which the flex layout of
         // the sidebar would override.
         '&[hidden]': { display: 'none !custom' },
@@ -831,18 +918,19 @@ namespace styles {
       variants: {
         active: {
           false: {},
-          true: { backgroundColor: 'container.regular', color: 'content.primary' },
+          true: { backgroundColor: 'container.strong', color: 'content.primary' },
         },
       },
     },
     { id: 'tds/web/app-shell/tab' },
   )
 
-  // The 56px pill of the Platform Tab Bar, which takes the width beside the action button.
+  // The 56px pill of the Platform Tab Bar, which takes the width beside the action button. Its 48px
+  // items sit 4px inside the 1px border at either end and 3px inside it at the top and bottom.
   export const tabBar = style(
     {
       alignItems: 'center',
-      backgroundColor: 'background.secondary',
+      backgroundColor: 'background.elevated',
       borderColor: 'line.secondary',
       borderRadius: 'full',
       borderStyle: 'solid',
@@ -854,7 +942,11 @@ namespace styles {
       flex: '1 !custom',
       height: '56',
       minWidth: '0',
-      padding: '4',
+      paddingBlock: '3',
+      paddingInline: '4',
+      transitionDuration: '200',
+      transitionProperty: 'opacity !custom',
+      transitionTimingFunction: 'snappy',
     },
     { id: 'tds/web/app-shell/tab-bar' },
   )
@@ -918,6 +1010,10 @@ namespace styles {
         '@media (min-width: 768px) and (max-width: 1023px)': {
           selectors: { '[data-app-shell-collapse] &': { display: 'none !custom' } },
         },
+        // The bottom bar renders this trigger as its floating action button.
+        '@media (max-width: 767px)': {
+          selectors: { '&[data-app-shell-tab-bar]': { display: 'none !custom' } },
+        },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, outline-color, outline-offset !custom',
           selectors: { '&:active': { transform: 'none !custom' } },

package/src/web/components/AssetChip.tsx

@@ -96,7 +96,10 @@ namespace styles {
         '&:is(button):not([data-selected], :disabled):hover': {
           backgroundColor: 'container.strong',
         },
-        '&[data-selected]': { backgroundColor: 'content.primary', color: 'background.elevated' },
+        '&[data-selected]': {
+          backgroundColor: 'inverse.background.primary',
+          color: 'inverse.content.primary',
+        },
         // An inside ring would vanish into the selected fill, so a selected chip draws it outside.
         '&[data-selected]:focus-visible': { outlineOffset: '2' },
       },