@tempoxyz/ds 0.2.6 → 0.3.0

package/src/web/components/Snippet.tsx

@@ -1,17 +1,20 @@
-import type { ComponentPropsWithRef } from 'react'
+import { type ComponentPropsWithRef, type ReactNode, useRef } from 'react'
 import type * as zyzz from 'zyzz'
 import { style, variants } from '../zyzz.config.js'
 import { CopyButton } from './CopyButton.js'
 import { useCopy } from './internal/useCopy.js'
 
 /**
- * A one-line command or value in a `code` element, with a copy button at the end. A click anywhere
- * on the block copies `children` unless an `onClick` handler calls `preventDefault()`. The button
+ * A command or value in a `code` element, with a copy button at the top end. A click anywhere on
+ * the command copies `children` unless an `onClick` handler calls `preventDefault()`. The button
  * is the keyboard path and announces `Copied` through a polite status region.
  *
  * - Pass only the command text. The `prompt` glyph is decorative, hidden from assistive technology
  *   and never copied.
- * - Keep it to one line. Long values scroll horizontally inside the focusable `code` element.
+ * - The first word, the program, renders in the primary color, and the arguments after it in the
+ *   secondary color. Long commands wrap, and wrapped lines align with the arguments.
+ * - Pass a `Tabs.List` as `tabs` to switch between commands, such as one per agent. Wrap the
+ *   snippet in `Tabs.Root`, and pass the command of the active tab as `children`.
  * - Name the copy button with `labels.copy`, such as `Copy install command`, when a page shows
  *   several snippets. It defaults to `Copy`.
  *
@@ -24,28 +27,80 @@ import { useCopy } from './internal/useCopy.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
  */
 export function Snippet(props: Snippet.Props) {
-  const { children, className, labels, onClick, prompt = '$', size, vars, ...attributes } = props
+  const {
+    children,
+    className,
+    labels,
+    onClick,
+    prompt = '$',
+    // The deprecated size has no style, and stays off the element.
+    size: _size,
+    tabs,
+    vars,
+    ...attributes
+  } = props
+  const header = useRef<HTMLDivElement>(null)
   const state = useCopy(children)
 
+  // The program ends at the first whitespace. The arguments keep that whitespace, so the text
+  // reads, selects and copies as one command.
+  const [, program = '', rest = ''] = /^(\S*)([\s\S]*)$/.exec(children) ?? []
+
+  // Each part of the command takes a whole number of pixels, rounded up as the design sizes its
+  // texts, and the next part starts 8px after it. Every glyph of the mono face advances by `1ch`,
+  // so the margin after a part adds the rest.
+  const width = (text: string) => `round(up, ${text.length}ch, 1px)`
+  const gap = (text: string) => `calc(${width(text)} + 8px - ${text.length}ch)`
+  // Wrapped lines start under the arguments.
+  const indent = rest
+    ? `calc(${prompt ? `${width(prompt)} + 8px + ` : ''}${width(program)} + 8px)`
+    : undefined
+
   return (
     <div
       data-copied={state.copied || undefined}
       {...attributes}
       onClick={(event) => {
         onClick?.(event)
-        if (!event.defaultPrevented) void state.copy()
+        // The tabs switch the command, so a click on them does not copy.
+        if (event.defaultPrevented || header.current?.contains(event.target as Node)) return
+        void state.copy()
       }}
-      {...styles.root({ className, size, style: props.style, vars })}
+      {...styles.root({ className, style: props.style, vars })}
     >
-      {prompt && (
-        <span aria-hidden="true" {...styles.prompt()}>
-          {prompt}
-        </span>
+      {tabs && (
+        <div ref={header} {...styles.tabs()}>
+          {tabs}
+        </div>
       )}
-      <code {...styles.text()} tabIndex={0}>
-        {children}
-      </code>
-      <CopyButton aria-label={labels?.copy ?? 'Copy'} copied={state.copied} value={children} />
+      <div {...styles.command()}>
+        <code
+          {...styles.text({
+            style: indent
+              ? { paddingInlineStart: indent, textIndent: `calc(-1 * ${indent})` }
+              : undefined,
+          })}
+        >
+          {prompt && (
+            <span
+              aria-hidden="true"
+              {...styles.prompt({ style: { marginInlineEnd: gap(prompt) } })}
+            >
+              {prompt}
+            </span>
+          )}
+          <span
+            {...styles.program({
+              // The space before the arguments advances by another `1ch`.
+              style: rest ? { marginInlineEnd: `calc(${gap(program)} - 1ch)` } : undefined,
+            })}
+          >
+            {program}
+          </span>
+          {rest}
+        </code>
+        <CopyButton aria-label={labels?.copy ?? 'Copy'} copied={state.copied} value={children} />
+      </div>
     </div>
   )
 }
@@ -65,89 +120,93 @@ export namespace Snippet {
        * @default '$'
        */
       prompt?: string | false | undefined
+      /**
+       * Has no effect. The snippet has one size, and its height follows the lines of the command.
+       * @deprecated Remove the prop.
+       */
+      size?: 'large' | 'medium' | 'small' | undefined
+      /**
+       * A `Tabs.List` shown above the command, inside the border and over a rule. A click on it
+       * does not copy. Absent by default.
+       */
+      tabs?: ReactNode | undefined
     }
 }
 
 namespace styles {
+  // The copy button sits in the corner, and fills on hover anywhere on the command, since a click
+  // there copies. The fill selectors outrank the hover and press fills of the button, and the
+  // copied fill stays last, so it wins over the hover fill.
+  export const command = style(
+    {
+      alignItems: 'flex-start',
+      backgroundColor: 'container.subtle',
+      columnGap: '12',
+      cursor: 'pointer',
+      display: 'flex',
+      padding: '16',
+      selectors: {
+        '& > button': { color: 'content.secondary' },
+        '&:active > button:not(:disabled)': { scale: 'press' },
+        '&:hover > button:not(:disabled)': { backgroundColor: 'container.strong' },
+        '& > button[data-copied]:not(:disabled)': {
+          backgroundColor: 'container.positive',
+          color: 'content.positive',
+        },
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        selectors: { '&:active > button:not(:disabled)': { scale: 'none !custom' } },
+      },
+    },
+    { id: 'tds/web/snippet/command' },
+  )
+
+  export const program = style({ color: 'content.primary' }, { id: 'tds/web/snippet/program' })
+
   export const prompt = style(
-    { color: 'gray.900', flexShrink: '0 !custom', userSelect: 'none' },
+    { color: 'content.tertiary', userSelect: 'none' },
     { id: 'tds/web/snippet/prompt' },
   )
 
+  // The snippet clips the command to its corners.
   export const root = variants(
     {
       base: {
-        alignItems: 'center',
-        backgroundColor: 'grayAlpha.100',
+        backgroundColor: 'background.elevated',
+        borderColor: 'line.secondary',
+        borderRadius: 'sm',
+        borderStyle: 'solid',
+        borderWidth: 'regular',
         boxSizing: 'border-box',
-        color: 'gray.900',
-        columnGap: '8',
-        cursor: 'pointer',
-        display: 'flex',
+        color: 'content.secondary',
         minWidth: '0',
+        overflow: 'hidden',
         position: 'relative',
-        transitionDuration: '200ms, 160ms !custom',
-        transitionProperty: 'background-color, scale',
-        transitionTimingFunction: 'snappy',
-        typography: 'label.14.mono',
-        selectors: {
-          // Inner buttons keep their own hover, so the block only reacts beside them.
-          '&:hover:not(:has(button:hover))': { backgroundColor: 'grayAlpha.200' },
-          '&:active:not(:has(button:active))': { scale: 'press' },
-          '&[data-copied]': { backgroundColor: 'green.200' },
-        },
-        '@media (prefers-reduced-motion: reduce)': {
-          transitionProperty: 'background-color',
-          selectors: { '&:active:not(:has(button:active))': { scale: 'none !custom' } },
-        },
-      },
-      defaultVariants: { size: 'medium' },
-      variants: {
-        // Heights and radii match Input: 32, 40 and 56px.
-        size: {
-          large: {
-            borderRadius: '16',
-            height: '56',
-            paddingInlineEnd: '8',
-            paddingInlineStart: '20',
-          },
-          medium: {
-            borderRadius: '12',
-            height: '40',
-            paddingInlineEnd: '4',
-            paddingInlineStart: '16',
-          },
-          small: {
-            borderRadius: '8',
-            height: '32',
-            paddingInlineEnd: '4',
-            paddingInlineStart: '12',
-            selectors: { '& > button': { height: '24', minWidth: '24', width: '24' } },
-          },
-        },
       },
     },
     { id: 'tds/web/snippet' },
   )
 
+  // The tabs touch the top edge, where the snippet clips, so their focus rings draw inside them.
+  export const tabs = style(
+    {
+      borderBlockEndColor: 'line.secondary',
+      borderBlockEndStyle: 'solid',
+      borderBlockEndWidth: 'regular',
+      paddingInline: '8',
+      selectors: { '& [role="tab"]': { outlineOffset: '-2' } },
+    },
+    { id: 'tds/web/snippet/tabs' },
+  )
+
+  // A one-line command centers on the copy button, and a longer one starts level with it.
   export const text = style(
     {
+      alignSelf: 'center',
       flexGrow: '1 !custom',
-      fontFamily: 'mono',
       minWidth: '0',
-      outlineColor: 'transparent !custom',
-      outlineOffset: '0',
-      outlineStyle: 'solid !custom',
-      outlineWidth: '2',
-      overflowX: 'auto',
-      transitionDuration: '160',
-      transitionProperty: 'outline-color, outline-offset',
-      transitionTimingFunction: 'snappy',
-      whiteSpace: 'nowrap',
-      selectors: {
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-      },
-      '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'outline-color' },
+      overflowWrap: 'anywhere',
+      typography: 'mono.m1',
     },
     { id: 'tds/web/snippet/text' },
   )

package/src/web/components/Spinner.tsx

@@ -6,15 +6,17 @@ import { style, variants } from '../zyzz.config.js'
 
 /**
  * An indeterminate loading indicator. Renders a Base UI `Progress.Root` with
- * `role="progressbar"`, no `aria-valuenow`, and the name `Loading`. The ring draws in
- * `currentColor` and stops rotating under `prefers-reduced-motion: reduce`.
+ * `role="progressbar"`, no `aria-valuenow`, and the name `Loading`. The arc draws in
+ * `currentColor` on a faint track, black in light mode and the text color in dark mode, and stops
+ * rotating under `prefers-reduced-motion: reduce`. `elevated` places it on a 44px elevated tile
+ * with a shadow.
  *
  * - Pass `aria-label` to say what is loading, such as `Loading transactions`.
  * - Show it only after a short delay, so fast responses do not flash an indicator.
  * - Prefer `Skeleton` when the shape of the loading content is known.
  *
  * @example
- * <Spinner aria-label="Loading transactions" size="small" />
+ * <Spinner aria-label="Loading transactions" elevated />
  *
  * @see {@link https://base-ui.com/react/components/progress | Base UI Progress}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role | MDN progressbar role}
@@ -22,18 +24,22 @@ import { style, variants } from '../zyzz.config.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html | WCAG 2.2 Pause, Stop, Hide}
  */
 export function Spinner(props: Spinner.Props) {
-  const { className, size, vars, ...attributes } = props
+  const { className, elevated, vars, ...attributes } = props
 
   return (
     <BaseUi.Progress.Root
       aria-label="Loading"
       {...attributes}
-      {...styles.spinner({ className, size, style: props.style, vars })}
+      {...styles.spinner({ className, elevated, style: props.style, vars })}
       value={null}
     >
       <svg aria-hidden="true" {...styles.glyph()} fill="none" viewBox="0 0 16 16">
-        <circle cx="8" cy="8" r="6" stroke="currentColor" strokeOpacity="0.16" strokeWidth="2" />
-        <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+        <circle cx="8" cy="8" r="6" strokeOpacity="0.08" {...styles.track()} />
+        <path
+          d="M14 7.97422C14 9.3007 13.5642 10.5901 12.7601 11.6425C11.9561 12.6948 10.8287 13.4514 9.55292 13.7947C8.27712 14.138 6.92417 14.0489 5.70391 13.5413C4.48364 13.0337 3.46426 12.1359 2.80386 10.9871C2.14345 9.83835 1.87894 8.50283 2.05134 7.1877C2.22374 5.87257 2.82342 4.65132 3.75737 3.71336C4.69132 2.77539 5.90734 2.17314 7.21685 2"
+          stroke="currentColor"
+          strokeLinecap="round"
+        />
       </svg>
     </BaseUi.Progress.Root>
   )
@@ -63,19 +69,39 @@ namespace styles {
   export const spinner = variants(
     {
       base: {
+        alignItems: 'center',
         color: 'inherit !custom',
         display: 'inline-flex',
         flexShrink: '0 !custom',
+        height: '16',
+        justifyContent: 'center',
+        width: '16',
       },
-      defaultVariants: { size: 'medium' },
+      defaultVariants: { elevated: false },
       variants: {
-        size: {
-          large: { height: '20', width: '20' },
-          medium: { height: '16', width: '16' },
-          small: { height: '12', width: '12' },
+        // The tile is a 44px square around the 16px ring.
+        elevated: {
+          false: {},
+          true: {
+            backgroundColor: 'background.elevated',
+            borderRadius: 'xs',
+            // Web has no elevated shadow step, so this repeats the Mobile `shadow.elevated` layers, in
+            // the order of the Figma Spinner.
+            boxShadow: '0 12px 36px #0000000a, 0 8px 32px #0000000a, 0 4px 12px #0000000a !custom',
+            height: '44',
+            width: '44',
+            selectors: { '& > svg': { height: '16', width: '16' } },
+          },
         },
       },
     },
     { id: 'tds/web/spinner' },
   )
+
+  // Figma draws the track in black at 8% in every scheme. Its black has no dark value, so the dark
+  // track keeps the text color, which stays visible on a dark surface.
+  export const track = style(
+    { stroke: 'light-dark(#000, currentColor) !custom' },
+    { id: 'tds/web/spinner/track' },
+  )
 }

package/src/web/components/SplitBar.tsx

@@ -0,0 +1,158 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * A bar that splits one total between two parts, such as the funds available to a wallet and the
+ * funds set aside for its agents, with a legend under it. It renders a `div`. The bar is hidden
+ * from assistive technology, so the legend carries each label and value.
+ *
+ * - Pass the two parts in reading order. The first fills in `content.primary`, and the second in
+ *   `content.subtle`.
+ * - Give each part a `text` with its formatted value, such as `$75.62`.
+ * - Use `BarChart` for values over time, and `Progress` for one task.
+ *
+ * @example
+ * <SplitBar
+ *   items={[
+ *     { label: 'Available', text: '$75.62', value: 75.62 },
+ *     { label: 'Agents', text: '$8.58', value: 8.58 },
+ *   ]}
+ * />
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
+ */
+export function SplitBar(props: SplitBar.Props) {
+  const { className, items, vars, ...attributes } = props
+  const total = items.reduce((sum, item) => sum + Math.max(item.value, 0), 0)
+
+  return (
+    <div {...attributes} {...styles.root({ className, style: props.style, vars })}>
+      <div aria-hidden="true" {...styles.track()}>
+        {items.map((item, index) =>
+          item.value > 0 ? (
+            <span
+              key={index}
+              // Each segment grows by its share of the total. Grow factors that sum to less than 1
+              // would leave part of the track unfilled.
+              {...styles.segment({
+                part: index === 0 ? 'first' : 'second',
+                style: { flexGrow: item.value / total },
+              })}
+            />
+          ) : null,
+        )}
+      </div>
+      <div {...styles.legend()}>
+        {items.map((item, index) => (
+          <span key={index} {...styles.entry()}>
+            <span
+              aria-hidden="true"
+              {...styles.swatch({ part: index === 0 ? 'first' : 'second' })}
+            />
+            <span {...styles.label()}>{item.label}</span>
+            <span {...styles.text()}>{item.text}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export namespace SplitBar {
+  /** One part of the total. */
+  export type Item = {
+    /** Name of the part in the legend, such as Available. */
+    label: ReactNode
+    /** Formatted value of the part in the legend, such as `$75.62`. */
+    text: ReactNode
+    /**
+     * Share of the bar, in a unit that both parts share. A part of 0 draws no segment, and the
+     * other part fills the track.
+     */
+    value: number
+  }
+
+  export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
+    zyzz.Props.Variants<typeof styles.root> & {
+      /** The two parts, in reading order. */
+      items: readonly [Item, Item]
+    }
+}
+
+namespace styles {
+  export const entry = style(
+    { alignItems: 'center', columnGap: '6', display: 'inline-flex', whiteSpace: 'nowrap' },
+    { id: 'tds/web/split-bar/entry' },
+  )
+
+  export const label = style(
+    { color: 'content.primary', typography: 'body.b3' },
+    { id: 'tds/web/split-bar/label' },
+  )
+
+  // The legend pins its first entry to the start and its last to the end.
+  export const legend = style(
+    { columnGap: '16', display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' },
+    { id: 'tds/web/split-bar/legend' },
+  )
+
+  export const root = variants(
+    { base: { display: 'flex', flexDirection: 'column', rowGap: '10' } },
+    { id: 'tds/web/split-bar' },
+  )
+
+  export const segment = variants(
+    {
+      base: { flexBasis: '0', height: '100% !custom', minWidth: '0' },
+      defaultVariants: { part: 'first' },
+      variants: {
+        part: {
+          first: { backgroundColor: 'content.primary' },
+          second: { backgroundColor: 'content.subtle' },
+        },
+      },
+    },
+    { id: 'tds/web/split-bar/segment' },
+  )
+
+  // A swatch keeps a 2px corner, which no radius token sets.
+  export const swatch = variants(
+    {
+      base: {
+        borderRadius: 'calc(0.125rem * var(--tds-corner-scale, 1)) !custom',
+        flexShrink: '0 !custom',
+        height: '8',
+        width: '8',
+      },
+      defaultVariants: { part: 'first' },
+      variants: {
+        part: {
+          first: { backgroundColor: 'content.primary' },
+          second: { backgroundColor: 'content.subtle' },
+        },
+      },
+    },
+    { id: 'tds/web/split-bar/swatch' },
+  )
+
+  export const text = style(
+    { color: 'content.secondary', typography: 'body.b3' },
+    { id: 'tds/web/split-bar/text' },
+  )
+
+  // The track clips the segments to its pill, and leaves 2px of the track between them.
+  export const track = style(
+    {
+      backgroundColor: 'container.strong',
+      borderRadius: 'full',
+      columnGap: '2',
+      cornerShape: 'round',
+      display: 'flex',
+      height: '8',
+      overflow: 'hidden',
+    },
+    { id: 'tds/web/split-bar/track' },
+  )
+}

package/src/web/components/SplitButton.tsx

@@ -52,6 +52,7 @@ export namespace SplitButton {
     return (
       <splitContext.Provider value={{ size, variant }}>
         <div
+          data-variant={variant ?? 'primary'}
           role="group"
           {...attributes}
           {...styles.root({ className, style: props.style, vars })}
@@ -63,7 +64,10 @@ export namespace SplitButton {
   export namespace Root {
     export type Props = ComponentPropsWithRef<'div'> &
       zyzz.Props.Variants<typeof styles.root> &
-      Pick<Button.Props, 'size' | 'variant'>
+      Pick<Button.Props, 'variant'> & {
+        /** Size of both buttons. The 24px `xsmall` pill can't join a trigger, so it is left out. */
+        size?: Exclude<Button.Props['size'], 'xsmall'> | undefined
+      }
   }
 
   /** Opens the menu. Pass an `aria-label`, since the default chevron has no text. */
@@ -96,24 +100,17 @@ namespace styles {
       display: 'inline-flex',
       selectors: {
         '& > :first-child': {
-          borderBottomRightRadius: '0',
-          borderTopRightRadius: '0',
+          borderBottomRightRadius: 'none',
+          borderTopRightRadius: 'none',
         },
-        // The trigger is a segment of the group, so its outer corners follow the action's size
-        // radius rather than the circle of an icon button.
+        // The trigger is a segment of the group, so its outer corners follow the action's radius
+        // and squircle rather than the circle of an icon button.
         '& > [aria-haspopup]': {
-          borderBottomLeftRadius: '0',
-          borderBottomRightRadius: '12',
-          borderTopLeftRadius: '0',
-          borderTopRightRadius: '12',
-        },
-        '& > [aria-haspopup][data-size="large"]': {
-          borderBottomRightRadius: '16',
-          borderTopRightRadius: '16',
-        },
-        '& > [aria-haspopup][data-size="small"]': {
-          borderBottomRightRadius: '8',
-          borderTopRightRadius: '8',
+          borderBottomLeftRadius: 'none',
+          borderBottomRightRadius: 'xs',
+          borderTopLeftRadius: 'none',
+          borderTopRightRadius: 'xs',
+          cornerShape: 'squircle',
         },
         '& > [aria-haspopup] > svg': {
           transitionDuration: '240',
@@ -121,6 +118,18 @@ namespace styles {
           transitionTimingFunction: 'spring',
         },
         '& > [data-popup-open] > svg': { transform: 'rotate(180deg) !custom' },
+        // A primary trigger takes the fills of the primary action, not the fixed fill of a primary
+        // icon button. Each pressed fill follows its hover fill, so it wins while pressed.
+        '&[data-variant="primary"] > [aria-haspopup]': {
+          backgroundColor: 'inverse.background.primary',
+          color: 'inverse.content.primary',
+        },
+        '&[data-variant="primary"] > [aria-haspopup]:hover:not(:disabled)': {
+          backgroundColor: 'action.primary.fill.hover',
+        },
+        '&[data-variant="primary"] > [aria-haspopup]:active:not(:disabled)': {
+          backgroundColor: 'action.primary.fill.pressed',
+        },
       },
       '@media (prefers-reduced-motion: reduce)': {
         selectors: { '& > [aria-haspopup] > svg': { transitionProperty: 'none' } },