@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/DatePicker.tsx

@@ -132,22 +132,14 @@ export namespace DatePicker {
    * `DatePicker.Root`.
    */
   export function Trigger(props: Trigger.Props) {
-    const {
-      children,
-      className,
-      placeholder = 'Select date',
-      size,
-      variant,
-      vars,
-      ...attributes
-    } = props
+    const { children, className, placeholder = 'Select date', variant, vars, ...attributes } = props
     const { calendar, locale } = useDatePicker()
     const label = format(calendar.value, locale)
 
     return (
       <BaseUi.Popover.Trigger
         {...attributes}
-        {...styles.trigger({ className, size, style: props.style, variant, vars })}
+        {...styles.trigger({ className, style: props.style, variant, vars })}
         data-placeholder={label === undefined || undefined}
       >
         <span {...styles.value()}>{children ?? label ?? placeholder}</span>
@@ -235,14 +227,10 @@ function format(value: Date | CalendarRoot.Range | null | undefined, locale: str
 namespace styles {
   export const icon = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       flexShrink: '0 !custom',
       height: '16',
       width: '16',
-      selectors: {
-        '[data-size="medium"] > &': { height: '14', width: '14' },
-        '[data-size="small"] > &': { height: '12', width: '12' },
-      },
     },
     { id: 'tds/web/date-picker/icon' },
   )
@@ -250,11 +238,11 @@ namespace styles {
   export const popup = variants(
     {
       base: {
-        backgroundColor: 'background.surface',
-        borderRadius: '16',
-        boxShadow: 'popover',
+        backgroundColor: 'background.elevated',
+        borderRadius: 'sm',
+        boxShadow: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         opacity: '1 !custom',
         padding: '8',
         transformOrigin: 'var(--transform-origin) !custom',
@@ -292,36 +280,43 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
+        // The 48px field of `TextInput.Group` and `Field.styles.field`.
+        borderRadius: 'xs',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        columnGap: '8',
         cursor: 'pointer',
         display: 'inline-flex',
+        height: '48',
         justifyContent: 'space-between',
-        minWidth: '224',
-        position: 'relative',
+        minWidth: '240',
+        // Forced colors paint transparent outlines, so this outline is the focus ring only there.
         outlineColor: 'transparent !custom',
         outlineOffset: '2',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
+        paddingInline: '16',
+        position: 'relative',
         textAlign: 'start',
         transitionDuration: '160',
         transitionProperty:
           'background-color, border-color, color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
+        typography: 'body.b2',
         selectors: {
           '&:active:not(:disabled)': {
             scale: 'press',
             transitionDuration: '100',
           },
-          '&:disabled': { cursor: 'default', opacity: 'disabled' },
-          '&:focus-visible': { outlineColor: 'blue.700' },
+          // The focus border is inset, so focus never moves the content.
           '&::before': {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2',
+            borderWidth: 'regular',
             boxSizing: 'border-box',
             content: '"" !custom',
+            cornerShape: 'inherit !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
@@ -329,10 +324,14 @@ namespace styles {
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
-          '&[aria-invalid="true"]::before': { borderColor: 'red.800' },
-          '&[aria-invalid="true"]:focus-visible': { outlineColor: 'red.800' },
-          '&:focus-visible::before': { borderColor: 'transparent !custom' },
-          '&[data-placeholder]': { color: 'gray.900' },
+          '&:focus-visible::before': { borderColor: 'border.focus' },
+          '&[data-placeholder]': { color: 'content.tertiary' },
+          '&[aria-invalid="true"]': { backgroundColor: 'container.negative' },
+          '&:disabled': {
+            backgroundColor: 'container.subtle',
+            color: 'content.subtle',
+            cursor: 'default',
+          },
         },
         '@media (forced-colors: active)': {
           outlineStyle: 'none !custom',
@@ -344,44 +343,26 @@ namespace styles {
           selectors: { '&:active:not(:disabled)': { scale: 'none !custom' } },
         },
       },
-      defaultVariants: { size: 'medium', variant: 'filled' },
+      defaultVariants: { variant: 'filled' },
       variants: {
-        // The `size` scale of `Input.Group` and `Field.styles.field`.
-        size: {
-          large: {
-            borderRadius: '16',
-            columnGap: '12',
-            height: '56',
-            paddingInline: '20',
-            typography: 'copy.16',
-          },
-          medium: {
-            borderRadius: '12',
-            columnGap: '8',
-            height: '40',
-            paddingInline: '16',
-            typography: 'copy.14',
-          },
-          small: {
-            borderRadius: '8',
-            columnGap: '6',
-            height: '32',
-            paddingInline: '12',
-            typography: 'copy.13',
-          },
-        },
         variant: {
+          // `:where` keeps the hover and focus fills below the invalid and disabled fills.
           filled: {
-            backgroundColor: 'grayAlpha.100',
+            backgroundColor: 'container.regular',
             border: 'none !custom',
-            selectors: { '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' } },
+            selectors: {
+              '&:where(:hover:not(:disabled))': { backgroundColor: 'container.strong' },
+              '&:where(:focus-visible)': { backgroundColor: 'background.elevated' },
+            },
           },
+          // A 1px line and no fill. Focus darkens the line, and an invalid value fills it red.
           outlined: {
-            backgroundColor: 'background.surface',
-            borderColor: 'grayAlpha.200',
-            borderStyle: 'solid !custom',
-            borderWidth: '1',
-            selectors: { '&:hover:not(:disabled)': { borderColor: 'grayAlpha.400' } },
+            backgroundColor: 'transparent !custom',
+            border: 'none !custom',
+            selectors: {
+              '&::before': { borderColor: 'line.primary' },
+              '&:where([aria-invalid="true"])::before': { borderColor: 'border.negative' },
+            },
           },
         },
       },

package/src/web/components/Dialog.tsx

@@ -1,26 +1,34 @@
 import * as BaseUi from '@base-ui/react/dialog'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
+import { ArrowLeft } from '../icons/ArrowLeft.js'
 import { Close as CloseIcon } from '../icons/Close.js'
-import { style } from '../zyzz.config.js'
+import { style, variants } from '../zyzz.config.js'
 import { Button } from './Button.js'
 
 /**
  * A `role="dialog"` popup over a dimmed backdrop. Base UI makes it modal by default: focus is
  * trapped, page scroll is locked, Escape and outside presses close it, and focus returns to the
- * trigger. Viewports up to 40rem wide present it as a bottom sheet.
+ * trigger. Viewports up to 37.5rem wide present it at the bottom, full width with a 16px gutter.
  *
  * - Always render a `Dialog.Title`. Base UI points `aria-labelledby` at it to name the dialog.
- * - Keep each dialog to one task, and avoid opening a dialog from another dialog.
+ * - Pick `size` from what the dialog holds, and keep one size for every step of a flow.
+ * - Stack `Dialog.Header`, `Dialog.Body` and a `ButtonGroup` of `large` buttons in the popup.
+ * - Keep each dialog to one task. Swap its content for the next step instead of opening another.
  * - Include a visible close control, such as `closeButton` or a `Dialog.Close` action.
- * - Use `AlertDialog` for destructive confirmations that need an explicit decision.
  *
  * @example
  * <Dialog.Root>
- *   <Dialog.Trigger render={<Button />}>Rename wallet</Dialog.Trigger>
- *   <Dialog.Popup closeButton>
- *     <Dialog.Title>Rename wallet</Dialog.Title>
- *     <Dialog.Description>The name is only visible to you.</Dialog.Description>
+ *   <Dialog.Trigger render={<Button />}>Revoke all</Dialog.Trigger>
+ *   <Dialog.Popup closeButton size="small">
+ *     <Dialog.Header>
+ *       <Dialog.Title>Revoke all connections?</Dialog.Title>
+ *       <Dialog.Description>Apps and agents lose access right away.</Dialog.Description>
+ *     </Dialog.Header>
+ *     <ButtonGroup>
+ *       <Dialog.Close render={<Button size="large" variant="secondary" />}>Cancel</Dialog.Close>
+ *       <Button size="large">Revoke all</Button>
+ *     </ButtonGroup>
  *   </Dialog.Popup>
  * </Dialog.Root>
  *
@@ -34,18 +42,44 @@ export namespace Dialog {
   /** Closes the dialog when pressed. Renders a `<button>` unless `render` supplies another. */
   export const Close = BaseUi.Dialog.Close
 
+  /** Opens the dialog when pressed. Renders a `<button>` unless `render` supplies another. */
+  export const Trigger = BaseUi.Dialog.Trigger
+
   /**
-   * Owns the open state and renders no element. Pass `open` and `onOpenChange` to control it.
-   * Set `modal` to `false` to keep the page interactive, or to `'trap-focus'` to trap focus
-   * without locking scroll.
+   * Renders a 40px circular `Button` labelled "Back" with a left arrow, for step 2 onward of a
+   * flow. Place it first in a `Dialog.Nav`, and handle `onClick` to show the previous step.
    */
-  export const Root = BaseUi.Dialog.Root
+  export function Back(props: Back.Props) {
+    return (
+      <Button
+        aria-label="Back"
+        {...props}
+        data-dialog-back=""
+        shape="icon"
+        size="medium"
+        variant="secondary"
+      >
+        <ArrowLeft />
+      </Button>
+    )
+  }
 
-  /** Opens the dialog when pressed. Renders a `<button>` unless `render` supplies another. */
-  export const Trigger = BaseUi.Dialog.Trigger
+  export namespace Back {
+    export type Props = Omit<Button.Props, 'children' | 'shape' | 'size' | 'variant'>
+  }
 
-  export namespace Root {
-    export type Props = BaseUi.Dialog.Root.Props
+  /**
+   * Renders the content `<div>` between the header and the footer, with sections 24px apart. Past
+   * 420px it scrolls, while the header and the footer stay in place.
+   */
+  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>
   }
 
   /** Renders a `<p>` that Base UI references from the popup's `aria-describedby`. */
@@ -65,12 +99,59 @@ export namespace Dialog {
   }
 
   /**
-   * Renders the portal, scrim, viewport and popup. Narrow viewports present a bottom sheet.
-   * `ref`, `className` and `style` reach the popup. `initialFocus` and `finalFocus` override
-   * where focus moves on open and on close.
+   * Renders the `<div>` that holds a `Dialog.Title`, an optional `Dialog.Description`, and above
+   * them an optional `Dialog.Nav` and one hero, such as an `IconTile` or a `Visual`. The title
+   * renders at 20px in a `small` popup and 32px otherwise.
+   *
+   * `layout` places the parts:
+   * - `inline` (default): keeps the text clear of `closeButton`, for single-step dialogs.
+   * - `stacked`: puts a `Dialog.Nav` above left-aligned text, for step 2 onward of a flow.
+   * - `centered`: centers the hero and the text below a `Dialog.Nav`, for acknowledgments,
+   *   onboarding, progress and success.
+   */
+  export function Header(props: Header.Props) {
+    const { className, layout, vars, ...attributes } = props
+
+    return (
+      <div {...attributes} {...styles.header({ className, layout, style: props.style, vars })} />
+    )
+  }
+
+  export namespace Header {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.header>
+  }
+
+  /**
+   * Renders the 40px `<div>` row at the top of a `stacked` or `centered` header. A `Dialog.Back`
+   * takes the first cell, any other child, such as a `Stepper`, centers in the middle, and the last
+   * cell stays clear for `closeButton`.
+   */
+  export function Nav(props: Nav.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <div
+        {...attributes}
+        data-dialog-nav=""
+        {...styles.nav({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Nav {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.nav>
+  }
+
+  /**
+   * Renders the portal, scrim, viewport and popup. `size` sets the width with the radius and
+   * padding: `small` is 400px with radius `md` and 24px padding, for one decision or outcome.
+   * `medium` (default) is 460px and `large` is 620px, both with radius `lg` and 32px padding. Viewports up to 37.5rem
+   * wide present every size at the bottom, full width with a 16px gutter. `ref`, `className` and
+   * `style` reach the popup. `initialFocus` and `finalFocus` override where focus moves on open and
+   * on close.
    */
   export function Popup(props: Popup.Props) {
-    const { children, className, closeButton = false, vars, ...attributes } = props
+    const { children, className, closeButton = false, size, vars, ...attributes } = props
 
     return (
       <BaseUi.Dialog.Portal>
@@ -79,7 +160,8 @@ export namespace Dialog {
           <BaseUi.Dialog.Popup
             {...attributes}
             data-close-button={closeButton || undefined}
-            {...styles.popup({ className, style: props.style, vars })}
+            data-dialog-size={size ?? 'medium'}
+            {...styles.popup({ className, size, style: props.style, vars })}
           >
             {children}
             {/* Follows the content in the DOM, so initial focus lands on the content first. */}
@@ -112,7 +194,22 @@ export namespace Dialog {
       }
   }
 
-  /** Renders an `<h2>` that Base UI references from the popup's `aria-labelledby`. */
+  /**
+   * Owns the open state and renders no element. Pass `open` and `onOpenChange` to control it. The
+   * dialog is always modal: it traps focus, locks page scroll and makes the page behind inert.
+   */
+  export function Root(props: Root.Props) {
+    return <BaseUi.Dialog.Root {...props} />
+  }
+
+  export namespace Root {
+    export type Props = Omit<BaseUi.Dialog.Root.Props, 'modal'>
+  }
+
+  /**
+   * Renders an `<h2>` that Base UI references from the popup's `aria-labelledby`, at 20px in a
+   * `small` popup and 32px otherwise.
+   */
   export function Title(props: Title.Props) {
     const { className, vars, ...attributes } = props
 
@@ -129,10 +226,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 {
   export const backdrop = style(
     {
-      backgroundColor: 'black',
+      backgroundColor: 'neutral.100',
       inset: '0',
       opacity: 'disabled',
       position: 'fixed',
@@ -147,74 +246,165 @@ export namespace styles {
     { id: 'tds/web/dialog/backdrop' },
   )
 
-  // The 36px close circle is inset 22px, so it centres on the first line of the 24px-padded title.
+  // Bleeds 4px into the popup padding with matching padding, so the scroll container keeps room
+  // for focus rings. The bottom margins are the section gaps less those 4px.
+  export const body = style(
+    {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: '20',
+      marginInline: '-4',
+      marginTop: '-4',
+      maxHeight: '26.25rem !custom',
+      overflowY: 'auto',
+      overscrollBehavior: 'contain',
+      padding: '4',
+      rowGap: '24',
+      selectors: {
+        '[data-dialog-size="small"] &': { marginBottom: '16' },
+        '[data-dialog-size] &:last-child, [data-close-button] > &:nth-last-child(2)': {
+          marginBottom: '-4',
+        },
+      },
+    },
+    { id: 'tds/web/dialog/body' },
+  )
+
+  // The 40px circle sits in the popup's padding corner, which the header keeps clear.
   export const close = style(
     {
-      height: '36',
-      insetBlockStart: '22',
-      insetInlineEnd: '22',
+      insetBlockStart: '24',
+      insetInlineEnd: '24',
       position: 'absolute',
+      selectors: {
+        '[data-dialog-size="large"] > &, [data-dialog-size="medium"] > &': {
+          insetBlockStart: '32',
+          insetInlineEnd: '32',
+        },
+      },
     },
     { id: 'tds/web/dialog/close' },
   )
 
   export const description = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       margin: '0',
-      typography: 'copy.15',
+      typography: 'body.b2',
+      selectors: { 'h2 + &': { marginTop: '8' } },
     },
     { id: 'tds/web/dialog/description' },
   )
 
-  export const popup = style(
+  export const header = variants(
     {
-      backgroundColor: 'background.raised',
-      borderRadius: '16',
-      boxShadow: 'modal',
-      boxSizing: 'border-box',
-      color: 'foreground',
-      maxWidth: '448',
-      outline: 'none !custom',
-      padding: '24',
-      position: 'relative',
-      transitionDuration: '280',
-      transitionProperty: 'opacity, scale, transform',
-      transitionTimingFunction: 'spring',
-      typography: 'copy.14',
-      width: '100% !custom',
-      selectors: {
-        '&[data-ending-style]': {
-          opacity: '0 !custom',
-          scale: 'enter',
-          transitionDuration: '180',
+      base: {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '24',
+        selectors: {
+          // A hero, such as an `IconTile` or a `Visual`, sits 24px above the text.
+          '& > :not(h2, p, [data-dialog-nav])': { marginBottom: '24' },
+          // The close button follows the content in the DOM, so it never counts as a next section.
+          '[data-dialog-size] &:last-child, [data-close-button] > &:nth-last-child(2)': {
+            marginBottom: '0',
+          },
+          '[data-dialog-size="small"] &': { marginBottom: '20' },
         },
-        '&[data-starting-style]': {
-          opacity: '0 !custom',
-          scale: 'enter',
+      },
+      defaultVariants: { layout: 'inline' },
+      variants: {
+        layout: {
+          // Block parts, such as `Dialog.Nav` and a `Visual`, keep the full width.
+          centered: {
+            alignItems: 'center',
+            textAlign: 'center',
+            selectors: { '& > :is(div, h2, p)': { alignSelf: 'stretch' } },
+          },
+          // The text keeps 16px clear of the 40px close button, and starts 8px lower to meet it.
+          inline: {
+            selectors: { '[data-close-button] &': { paddingInlineEnd: '56', paddingTop: '8' } },
+          },
+          stacked: {},
         },
       },
-      '@media (max-width: 40rem)': {
-        borderBottomLeftRadius: '0',
-        borderBottomRightRadius: '0',
-        maxWidth: 'none !custom',
-        paddingBottom: 'calc(24px + env(safe-area-inset-bottom, 0px)) !custom',
+    },
+    { id: 'tds/web/dialog/header' },
+  )
+
+  export const nav = style(
+    {
+      alignItems: 'center',
+      columnGap: '12',
+      display: 'grid',
+      gridTemplateColumns: '2.5rem 1fr 2.5rem !custom',
+      height: '40',
+      marginBottom: '16',
+      selectors: {
+        '& > *': { gridColumn: '2 !custom', justifySelf: 'center' },
+        '& > [data-dialog-back]': { gridColumn: '1 !custom' },
+      },
+    },
+    { id: 'tds/web/dialog/nav' },
+  )
+
+  // The Wallet Modal shadow has no Platform equivalent, so it stays a literal.
+  export const popup = variants(
+    {
+      base: {
+        backgroundColor: 'background.elevated',
+        boxShadow: '0 1px 2px #0000000a, 0 16px 48px -12px #00000024 !custom',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        outline: 'none !custom',
+        position: 'relative',
+        transitionDuration: '280',
+        transitionProperty: 'opacity, scale, transform',
+        transitionTimingFunction: 'spring',
+        typography: 'body.b2',
+        width: '100% !custom',
         selectors: {
-          '&[data-ending-style]': { scale: 'none !custom', transform: 'translateY(100%) !custom' },
+          '&[data-ending-style]': {
+            opacity: '0 !custom',
+            scale: 'enter',
+            transitionDuration: '180',
+          },
           '&[data-starting-style]': {
-            scale: 'none !custom',
-            transform: 'translateY(100%) !custom',
+            opacity: '0 !custom',
+            scale: 'enter',
           },
         },
-      },
-      '@media (prefers-reduced-motion: reduce)': {
-        transitionProperty: 'opacity',
-        selectors: {
-          '&[data-ending-style], &[data-starting-style]': {
-            scale: 'none !custom',
-            transform: 'none !custom',
+        '@media (max-width: 37.5rem)': {
+          selectors: {
+            // Outranks the max width of every size.
+            '&[data-dialog-size]': { maxWidth: 'none !custom' },
+            '&[data-ending-style]': {
+              scale: 'none !custom',
+              transform: 'translateY(calc(100% + 1rem)) !custom',
+            },
+            '&[data-starting-style]': {
+              scale: 'none !custom',
+              transform: 'translateY(calc(100% + 1rem)) !custom',
+            },
           },
         },
+        '@media (prefers-reduced-motion: reduce)': {
+          transitionProperty: 'opacity',
+          selectors: {
+            '&[data-ending-style], &[data-starting-style]': {
+              scale: 'none !custom',
+              transform: 'none !custom',
+            },
+          },
+        },
+      },
+      defaultVariants: { size: 'medium' },
+      variants: {
+        size: {
+          large: { borderRadius: 'lg', maxWidth: '38.75rem !custom', padding: '32' },
+          medium: { borderRadius: 'lg', maxWidth: '28.75rem !custom', padding: '32' },
+          small: { borderRadius: 'md', maxWidth: '25rem !custom', padding: '24' },
+        },
       },
     },
     { id: 'tds/web/dialog/popup' },
@@ -222,10 +412,13 @@ export namespace styles {
 
   export const title = style(
     {
-      typography: 'heading.24',
       margin: '0',
-      marginBottom: '8',
-      selectors: { '[data-close-button] &': { paddingInlineEnd: '44' } },
+      typography: 'heading.h3',
+      selectors: {
+        '[data-dialog-size="large"] &, [data-dialog-size="medium"] &': {
+          typography: 'heading.h1',
+        },
+      },
     },
     { id: 'tds/web/dialog/title' },
   )
@@ -240,7 +433,10 @@ export namespace styles {
       overflowY: 'auto',
       padding: '16',
       position: 'fixed',
-      '@media (max-width: 40rem)': { alignItems: 'end', padding: '0' },
+      '@media (max-width: 37.5rem)': {
+        alignItems: 'end',
+        paddingBottom: 'calc(1rem + env(safe-area-inset-bottom, 0px)) !custom',
+      },
     },
     { id: 'tds/web/dialog/viewport' },
   )