@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/AmountInput.tsx

@@ -1,13 +1,12 @@
-import { type ComponentPropsWithRef, useState } from 'react'
+import { useState } from 'react'
 import { TextMorph } from 'torph/react'
-import type * as zyzz from 'zyzz'
 import { style } from '../zyzz.config.js'
-import { Input } from './Input.js'
+import { TextInput } from './TextInput.js'
 import * as AmountContext from './internal/AmountContext.js'
 
 /**
- * Decimal amount entry. The value is a raw string with a dot separator and no grouping
- * separators, and input that is not a non-negative decimal is rejected.
+ * The amount card: a filled surface with heading-size digits. The value is a raw string with a dot
+ * separator and no grouping separators, and input that is not a non-negative decimal is rejected.
  *
  * The text around a comma decides whether it groups thousands or separates decimals:
  *
@@ -25,17 +24,20 @@ import * as AmountContext from './internal/AmountContext.js'
  * `Control` is a text input with `inputMode="decimal"`, so mobile keyboards show digits without
  * the scroll and spinner behavior of `type="number"`.
  *
- * - Give the field a visible label, such as `Field.Label`. Show the unit with `Prefix` or
- *   `Suffix`.
- * - Explain an invalid amount with text, such as `Field.Error`, not only the red ring.
- * - Wire `Max` to set the value yourself, and name what it fills when the label is ambiguous.
+ * - Inside a `Field.Root`, put the `Field.Label` and `Field.Description` in the root. They take
+ *   their own rows above and below the amount.
+ * - Name the token beside the digits with a `Token`, which opens a token picker.
+ * - Explain an invalid amount with text, such as `Field.Error`, not only the red fill.
  *
  * @example
- * <AmountInput.Root onValueChange={setValue} value={value}>
- *   <AmountInput.Prefix>$</AmountInput.Prefix>
- *   <AmountInput.Control aria-label="Amount" placeholder="0.00" />
- *   <AmountInput.Max onClick={() => setValue(balance)} />
- * </AmountInput.Root>
+ * <Field.Root>
+ *   <AmountInput.Root onValueChange={setValue} value={value}>
+ *     <Field.Label>You send</Field.Label>
+ *     <AmountInput.Control placeholder="0.00" />
+ *     <Token symbol="pathUSD" />
+ *     <Field.Description>Balance 2,480.32</Field.Description>
+ *   </AmountInput.Root>
+ * </Field.Root>
  *
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/text | MDN input type text}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode | MDN inputmode attribute}
@@ -45,12 +47,12 @@ import * as AmountContext from './internal/AmountContext.js'
  */
 export namespace AmountInput {
   /**
-   * Owns the amount and renders an `Input.Group`, so `size`, `variant` and `invalid` apply here.
-   * Pass `value` and `onValueChange` to control it. A rejected keystroke leaves the value
-   * unchanged and does not call `onValueChange`.
+   * Owns the amount and renders the card as a `TextInput.Group`, so `invalid` applies here. Pass
+   * `value` and `onValueChange` to control it. A rejected keystroke leaves the value unchanged and
+   * does not call `onValueChange`.
    */
   export function Root(props: Root.Props) {
-    const { defaultValue = '', onValueChange, value: controlled, ...attributes } = props
+    const { className, defaultValue = '', onValueChange, value: controlled, ...attributes } = props
     const [uncontrolled, setUncontrolled] = useState(defaultValue)
     const value = controlled ?? uncontrolled
 
@@ -64,13 +66,16 @@ export namespace AmountInput {
           },
         }}
       >
-        <Input.Group {...attributes} />
+        <TextInput.Group {...attributes} {...styles.root({ className, style: props.style })} />
       </AmountContext.Context.Provider>
     )
   }
 
   export namespace Root {
-    export type Props = Omit<Input.Group.Props, 'defaultValue' | 'onChange'> & {
+    export type Props = Omit<
+      TextInput.Group.Props,
+      'defaultValue' | 'onChange' | 'success' | 'variant'
+    > & {
       /** @default '' */
       defaultValue?: string | undefined
       onValueChange?: ((value: string) => void) | undefined
@@ -82,14 +87,14 @@ export namespace AmountInput {
   export function Control(props: Control.Props) {
     const amount = AmountContext.use()
     const [typed, setTyped] = useState<{ caret: number | null; text: string; value: string }>()
-    // Typed edits morph at the caret. Other changes, such as Max, roll digits by place value.
+    // Typed edits morph at the caret. Values the app sets roll digits by place value.
     const edit = typed?.value === amount.value ? typed : undefined
     const caret = edit?.caret ?? undefined
     const text = edit?.text ?? amount.value
 
     return (
       <span {...styles.control()}>
-        <Input.Control
+        <TextInput.Control
           autoComplete="off"
           inputMode="decimal"
           {...props}
@@ -116,39 +121,10 @@ export namespace AmountInput {
 
   export namespace Control {
     export type Props = Omit<
-      Input.Control.Props,
+      TextInput.Control.Props,
       'defaultValue' | 'onChange' | 'onValueChange' | 'type' | 'value'
     >
   }
-
-  /**
-   * Shortcut for the largest allowed amount. Hidden while the field is invalid. It renders a
-   * `type="button"` labelled "Max" by default and does not change the value itself, so set the
-   * amount from `onClick`.
-   */
-  export function Max(props: Max.Props) {
-    const { children, className, vars, ...attributes } = props
-
-    return (
-      <button
-        type="button"
-        {...attributes}
-        {...styles.max({ className, style: props.style, vars })}
-      >
-        {children ?? 'Max'}
-      </button>
-    )
-  }
-
-  export namespace Max {
-    export type Props = ComponentPropsWithRef<'button'> & zyzz.Props.Variants<typeof styles.max>
-  }
-
-  /** Leading adornment, such as a currency symbol. Same component as `Input.Prefix`. */
-  export const Prefix = Input.Prefix
-
-  /** Trailing adornment, such as a token code. Same component as `Input.Suffix`. */
-  export const Suffix = Input.Suffix
 }
 
 /** Returns the raw decimal for typed text, or `undefined` when it is not a non-negative decimal. */
@@ -181,108 +157,57 @@ namespace styles {
     { id: 'tds/web/amount-input/control' },
   )
 
+  // The placeholder takes the subtle color, lighter than the tertiary placeholder of a text field.
   export const input = style(
     {
       gridArea: '1 / 1 !custom',
       WebkitTextFillColor: 'transparent !custom',
       width: '100% !custom',
-      selectors: { '&::placeholder': { WebkitTextFillColor: 'currentColor !custom' } },
-    },
-    { id: 'tds/web/amount-input/input' },
-  )
-
-  export const max = style(
-    {
-      backgroundColor: 'grayAlpha.200',
-      border: 'none !custom',
-      color: 'foreground',
-      cursor: 'pointer',
-      flexShrink: '0 !custom',
-      outlineColor: 'transparent !custom',
-      outlineOffset: '0',
-      outlineStyle: 'solid !custom',
-      outlineWidth: '2',
-      position: 'relative',
-      transitionDuration: '160',
-      transitionProperty: 'background-color, outline-color, outline-offset, scale',
-      transitionTimingFunction: 'snappy',
       selectors: {
-        // Each field size insets Max equally from the end and the top, with a concentric radius.
-        '[data-size="large"] > &': {
-          borderRadius: '8',
-          height: '40',
-          marginInlineEnd: '-12',
-          paddingInline: '16',
-          typography: 'button.14',
-        },
-        '[data-size="medium"] > &': {
-          borderRadius: '6',
-          height: '28',
-          marginInlineEnd: '-10',
-          paddingInline: '12',
-          typography: 'button.12',
-        },
-        '[data-size="small"] > &': {
-          borderRadius: '4',
-          height: '24',
-          marginInlineEnd: '-8',
-          paddingInline: '8',
-          typography: 'button.12',
-        },
-        // A small stacked field takes the medium size, so Max takes the medium inset.
-        '[data-variant="stacked"] > [data-size="small"] > &': {
-          borderRadius: '6',
-          height: '28',
-          marginInlineEnd: '-10',
-          paddingInline: '12',
-          typography: 'button.12',
-        },
-        // A card group keeps its padding, so Max sits on the content edge.
-        '[data-variant="card"] > &': {
-          borderRadius: '8',
-          height: '32',
-          marginInlineEnd: '0',
-          paddingInline: '12',
-          typography: 'button.12',
-        },
-        '&::after': { content: '"" !custom', inset: '-4', position: 'absolute' },
-        '&:active': { scale: 'press' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-        '&:hover': { backgroundColor: 'grayAlpha.300' },
-        '[data-invalid] &': { display: 'none' },
-      },
-      '@media (prefers-reduced-motion: reduce)': {
-        transitionProperty: 'background-color, outline-color',
-        selectors: { '&:active': { scale: 'none !custom' } },
+        '&::placeholder': { color: 'content.subtle', WebkitTextFillColor: 'currentColor !custom' },
       },
     },
-    { id: 'tds/web/amount-input/max' },
+    { id: 'tds/web/amount-input/input' },
   )
 
-  // Mirrors the typography of `Input.Control` so the morphing text sits over the transparent input text.
+  // Inherits the root's type, as `TextInput.Control` does, so the morphing text covers the input text.
   export const morph = style(
     {
-      color: 'foreground',
+      color: 'content.primary',
       font: 'inherit !custom',
       gridArea: '1 / 1 !custom',
       overflow: 'hidden',
       pointerEvents: 'none !custom',
       whiteSpace: 'pre',
+      selectors: { ':has(> input:disabled) > &': { color: 'content.subtle' } },
+    },
+    { id: 'tds/web/amount-input/morph' },
+  )
+
+  /**
+   * Overrides the 48px field of `TextInput.Group`, whose rules load first. It wraps onto rows, so a
+   * `Field.Label` and `Field.Description` inside take their own lines.
+   */
+  export const root = style(
+    {
+      borderRadius: 'sm',
+      flexWrap: 'wrap',
+      height: 'auto !custom',
+      paddingBlock: '16',
+      paddingInline: '20',
+      rowGap: '8',
+      typography: 'heading.h1',
       selectors: {
-        '[data-variant="card"] > &': {
-          typography: 'heading.24',
-        },
-        '[data-variant="card"][data-size="small"] &': {
-          typography: 'heading.20',
+        '& > label': {
+          color: 'content.secondary',
+          flexBasis: '100% !custom',
+          typography: 'body.b3',
         },
-        '[data-variant="card"][data-size="large"] &': {
-          typography: 'heading.32',
-        },
-        // The value sits below the floating label, which needs more room in a large field.
-        '[data-variant="stacked"] &': { paddingTop: '12' },
-        '[data-variant="stacked"] [data-size="large"] &': { paddingTop: '16' },
+        '& > :is(p, [data-field-error])': { flexBasis: '100% !custom' },
+        // A `Field.Description`, such as the balance, takes the tertiary color.
+        '& > p': { color: 'content.tertiary' },
       },
     },
-    { id: 'tds/web/amount-input/morph' },
+    { id: 'tds/web/amount-input' },
   )
 }

package/src/web/components/AppShell.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react'
 import type * as zyzz from 'zyzz'
 import { keyframes } from 'zyzz/web'
-import { style, variants } from '../zyzz.config.js'
+import { style, variants, vars } from '../zyzz.config.js'
 
 type Context = {
   container: HTMLDivElement | null
@@ -42,7 +42,8 @@ function useShell() {
 
 /**
  * Application frame with a sticky sidebar beside a content column. `align="center"` centers both
- * on wide viewports, and `align="start"` pins the sidebar left with content filling the rest.
+ * on wide viewports, with the sidebar fill to the start edge and the header bar to the end edge.
+ * `align="start"` pins the sidebar left with content filling the rest.
  * Below 1024px the sidebar moves into a drawer that `AppShell.Trigger` opens from the right edge.
  *
  * - Name the `Sidebar` with `aria-label`. It labels the `aside` on wide viewports and the drawer
@@ -69,11 +70,23 @@ function useShell() {
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html | WCAG 2.2 Focus Order}
  */
 export namespace AppShell {
-  /** Page header row holding the title, actions and the compact-viewport `Trigger`. */
+  /**
+   * Renders the 56px page header bar at the top of `Main`, in the fill of the sidebar with a bottom
+   * border, holding the title, actions and the compact-viewport `Trigger`. It spans the full width
+   * of `Main`. With `align="center"` on wide viewports, its fill and border continue to the end
+   * edge. A `Main` that scrolls itself clips them at its own edge, so scroll the root instead when
+   * the shell fills a fixed-height region.
+   */
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
 
-    return <header {...attributes} {...styles.header({ className, style: props.style, vars })} />
+    return (
+      <header
+        {...attributes}
+        {...styles.header({ className, style: props.style, vars })}
+        data-app-shell-header=""
+      />
+    )
   }
 
   export namespace Header {
@@ -156,7 +169,7 @@ export namespace AppShell {
   }
 
   /**
-   * Renders a sticky `aside` from 1024px, `var(--sidebar-width, 16.25rem)` wide. Below that it
+   * Renders a sticky `aside` from 1024px, `var(--sidebar-width, 16rem)` wide. Below that it
    * renders a modal Base UI drawer popup as an `aside` with the dialog role, which takes focus on
    * open, returns it to the trigger on close, and dismisses with Escape, the backdrop or a swipe
    * right. Server rendering always emits the wide layout.
@@ -206,6 +219,7 @@ export namespace AppShell {
       zyzz.Props.Variants<typeof styles.sidebarBody>
   }
 
+  /** The bottom of the sidebar, such as the account menu. It stays at the bottom edge. */
   export function SidebarFooter(props: SidebarFooter.Props) {
     const { className, vars, ...attributes } = props
 
@@ -219,6 +233,7 @@ export namespace AppShell {
       zyzz.Props.Variants<typeof styles.sidebarFooter>
   }
 
+  /** The top of the sidebar, such as the product or project switcher. */
   export function SidebarHeader(props: SidebarHeader.Props) {
     const { className, vars, ...attributes } = props
 
@@ -290,7 +305,7 @@ const fadeOut = keyframes(
 namespace styles {
   export const backdrop = style(
     {
-      backgroundColor: 'black',
+      backgroundColor: 'neutral.100',
       inset: '0',
       opacity: '0.6 !custom',
       position: 'fixed',
@@ -310,6 +325,7 @@ namespace styles {
     {
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
+      cornerShape: 'round',
       height: '2',
       insetInlineStart: '0',
       position: 'absolute',
@@ -341,7 +357,7 @@ namespace styles {
 
   export const drawer = style(
     {
-      borderInlineStartColor: 'grayAlpha.200',
+      borderInlineStartColor: 'line.secondary',
       borderInlineStartStyle: 'solid',
       borderInlineStartWidth: '1px !custom',
       height: '100% !custom',
@@ -373,19 +389,30 @@ namespace styles {
     { id: 'tds/web/app-shell/drawer' },
   )
 
+  // The bar bleeds into the padding of `Main`, so it spans the column and starts at its top edge.
+  // The header takes the fill of the sidebar, so the two frame the page.
   export const header = variants(
     {
       base: {
         alignItems: 'center',
+        backgroundColor: 'background.sidebar',
+        borderBottomColor: 'line.secondary',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px !custom',
+        boxSizing: 'border-box',
         columnGap: '8',
         display: 'flex',
         justifyContent: 'space-between',
         marginBottom: '24',
+        marginInline: '-16',
+        marginTop: '-20',
+        minHeight: '56',
         minWidth: '0',
-        // Below 1024px the fixed trigger covers the top-right corner, so header actions end 8px
-        // before it: its 40px plus 16px inset, less the main column's own side padding.
-        '@media (max-width: 1023px)': { paddingInlineEnd: '48' },
-        '@media (min-width: 640px) and (max-width: 1023px)': { paddingInlineEnd: '32' },
+        paddingInline: '16',
+        '@media (min-width: 640px)': { marginInline: '-2rem !custom', paddingInline: '24' },
+        // Below 1024px the fixed trigger covers the end of the bar, so header actions end 8px
+        // before it: its 40px plus its 16px inset.
+        '@media (max-width: 1023px)': { paddingInlineEnd: '64' },
       },
     },
     { id: 'tds/web/app-shell/header' },
@@ -413,14 +440,16 @@ namespace styles {
     {
       base: {
         backgroundColor: 'background.primary',
-        color: 'foreground',
+        color: 'content.primary',
         display: 'flex',
         minHeight: '100dvh !custom',
         position: 'relative',
-        typography: 'copy.14',
+        typography: 'body.b2',
         selectors: {
-          // Equal gutters center the sidebar and content column on wide viewports.
+          // Equal gutters center the sidebar and content column on wide viewports. The start
+          // gutter takes the fill of the sidebar, so the sidebar reaches the start edge.
           '&::after, &::before': { content: '"" !custom', flex: '1 !custom' },
+          '&::before': { backgroundColor: 'background.sidebar' },
         },
         '@media (max-width: 1023px)': {
           selectors: { '&::after, &::before': { display: 'none !custom' } },
@@ -429,7 +458,23 @@ namespace styles {
       defaultVariants: { align: 'center' },
       variants: {
         align: {
-          center: {},
+          // The header bar continues across the end gutter as the outset of a border image, which
+          // is ink overflow. It adds no scroll and changes no layout, and a scrolling `Main` clips
+          // it at its own edge. The image draws the fill and the 1px bottom border of the header.
+          // The outset takes the gutter from the viewport width, since the root of an application
+          // frame spans the viewport.
+          center: {
+            '@media (min-width: 1024px)': {
+              selectors: {
+                '& > main > [data-app-shell-header]': {
+                  borderImageOutset: `0 max(0px, calc((100vw - var(--sidebar-width, 16rem) - ${vars.container['1024']}) / 2)) 0 0 !custom`,
+                  borderImageSlice: '0 fill !custom',
+                  borderImageSource: `linear-gradient(${vars.color.background.sidebar} calc(100% - 1px), ${vars.color.line.secondary} 0) !custom`,
+                  borderImageWidth: '0 !custom',
+                },
+              },
+            },
+          },
           start: {
             selectors: {
               '&::after, &::before': { display: 'none !custom' },
@@ -445,15 +490,15 @@ namespace styles {
   export const sidebar = variants(
     {
       base: {
-        backgroundColor: 'background.primary',
+        backgroundColor: 'background.sidebar',
         boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
         flexShrink: '0 !custom',
         minHeight: '0',
-        paddingBottom: '20',
-        paddingInline: '10',
-        rowGap: '24',
+        paddingBottom: '16',
+        paddingInline: '12',
+        rowGap: '16',
       },
     },
     { id: 'tds/web/app-shell/sidebar' },
@@ -463,14 +508,14 @@ namespace styles {
   // server-rendered markup, which always emits the wide layout.
   export const inline = style(
     {
-      borderInlineEndColor: 'grayAlpha.200',
+      borderInlineEndColor: 'line.secondary',
       borderInlineEndStyle: 'solid',
       borderInlineEndWidth: '1px !custom',
       height: '100dvh !custom',
       insetBlockStart: '0',
       overflowY: 'auto',
       position: 'sticky',
-      width: 'var(--sidebar-width, 16.25rem) !custom',
+      width: 'var(--sidebar-width, 16rem) !custom',
       '@media (max-width: 1023px)': { display: 'none !custom' },
     },
     { id: 'tds/web/app-shell/inline' },
@@ -479,20 +524,24 @@ namespace styles {
   export const sidebarBody = variants(
     {
       base: {
+        // Custom string values only take literal CSS, so the thumb color reaches `scrollbarColor` through a property.
+        '--tds-sidebar-scrollbar-thumb': `${vars.color.line.primary}`,
         flex: '1 !custom',
         // Bleeding into the sidebar's inline padding puts the scrollbar at the sidebar edge.
-        marginInline: '-10',
+        marginInline: '-12',
         minHeight: '0',
         overflowY: 'auto',
         overscrollBehavior: 'contain',
-        paddingInline: '10',
+        paddingInline: '12',
+        // A transparent track leaves only the thin thumb over the sidebar fill.
+        scrollbarColor: 'var(--tds-sidebar-scrollbar-thumb) transparent !custom',
         // Classic scrollbars keep their own lane instead of covering content at the edge.
         scrollbarGutter: 'stable',
         scrollbarWidth: 'thin',
         selectors: {
           // Curtains fade content into the sidebar at whichever end has more to scroll.
           '&::after, &::before': {
-            backgroundColor: 'background.primary',
+            backgroundColor: 'background.sidebar',
             content: '"" !custom',
             display: 'block',
             height: '24',
@@ -530,23 +579,32 @@ namespace styles {
     { id: 'tds/web/app-shell/sidebar-body' },
   )
 
+  // The automatic top margin keeps the footer at the bottom edge when no `SidebarBody` grows.
   export const sidebarFooter = variants(
-    { base: { display: 'flex', flexDirection: 'column', flexShrink: '0 !custom', rowGap: '12' } },
+    {
+      base: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexShrink: '0 !custom',
+        marginTop: 'auto !custom',
+        rowGap: '8',
+      },
+    },
     { id: 'tds/web/app-shell/sidebar-footer' },
   )
 
   export const sidebarHeader = variants(
-    { base: { flexShrink: '0 !custom', paddingTop: '20' } },
+    { base: { flexShrink: '0 !custom', paddingTop: '16' } },
     { id: 'tds/web/app-shell/sidebar-header' },
   )
 
   export const title = variants(
     {
       base: {
-        color: 'foreground',
+        color: 'content.primary',
         margin: '0',
         minWidth: '0',
-        typography: 'heading.24',
+        typography: 'heading.h2',
       },
     },
     { id: 'tds/web/app-shell/title' },
@@ -556,18 +614,19 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'background.surface',
-        borderColor: 'grayAlpha.200',
+        backgroundColor: 'background.elevated',
+        borderColor: 'line.secondary',
         borderRadius: 'full',
         borderStyle: 'solid',
-        borderWidth: '1',
-        boxShadow: 'raised',
+        borderWidth: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        cornerShape: 'round',
         cursor: 'pointer',
         display: 'inline-flex',
         height: '40',
-        insetBlockStart: '16',
+        // Centers the button on the 56px header bar.
+        insetBlockStart: '8',
         insetInlineEnd: '16',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
@@ -584,8 +643,8 @@ namespace styles {
         zIndex: 'modal',
         selectors: {
           '&:active': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-          '&:hover': { backgroundColor: 'gray.100' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+          '&:hover': { backgroundColor: 'container.regular' },
           // While open, the button rides out with the drawer and rests 8px outside its left edge,
           // so the close mark never covers the sidebar. The width matches the drawer's.
           '&[data-popup-open]': {