@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/Rows.tsx

@@ -1,588 +0,0 @@
-import { useRender } from '@base-ui/react/use-render'
-import type { ComponentPropsWithRef, ReactNode } from 'react'
-import { use } from 'react'
-import type * as zyzz from 'zyzz'
-import { keyframes } from 'zyzz/web'
-import { ChevronRight } from '../icons/ChevronRight.js'
-import { style, variants } from '../zyzz.config.js'
-import * as RowsSize from './internal/RowsSize.js'
-
-/**
- * A stack of divided rows for settings, details and navigation lists. `Rows` renders `Rows.Root`.
- * A row is a `button` when it has an `action` or `onClick`, any element passed to `render` (such as
- * a link), and a plain `div` otherwise.
- *
- * - Write row text that names the destination or action, since chevrons are hidden from assistive
- *   technology.
- * - Set `aria-expanded` on expandable rows and mount a `Rows.Panel` right after the row while open.
- * - Avoid nesting buttons or links inside a pressable row.
- *
- * @example
- * <Rows>
- *   <Rows.Row action="navigation" render={<a href="/activity" />}>
- *     Activity
- *   </Rows.Row>
- * </Rows>
- *
- * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role | MDN list role}
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ | WAI-ARIA APG Disclosure pattern}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html | WCAG 2.2 Target Size (Minimum)}
- */
-export function Rows(props: Rows.Props) {
-  return <Rows.Root {...props} />
-}
-
-export namespace Rows {
-  export type Props = Root.Props
-
-  /** Secondary text under a `Rows.Title`, usually inside `Rows.Info`. */
-  export function Description(props: Description.Props) {
-    const { className, vars, ...attributes } = props
-
-    return <span {...attributes} {...styles.description({ className, style: props.style, vars })} />
-  }
-
-  export namespace Description {
-    export type Props = ComponentPropsWithRef<'span'> &
-      zyzz.Props.Variants<typeof styles.description>
-  }
-
-  /**
-   * A block wrapper for a run of rows. `RowGroupLoader` renders the same wrapper while loading.
-   * Directly after an expanded row, or after a group that follows one, its dividers start at the
-   * row text.
-   */
-  export function Group(props: Group.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <div
-        {...attributes}
-        data-group=""
-        {...styles.group({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Group {
-    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.group>
-  }
-
-  /**
-   * Groups a `Rows.Title` and `Rows.Description` beside a control, or stacks a `Rows.Label` over a
-   * short paragraph that does not fit on one line beside it.
-   */
-  export function Info(props: Info.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <span
-        {...attributes}
-        data-info=""
-        {...styles.info({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Info {
-    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.info>
-  }
-
-  /**
-   * The key of a key-value row. It keeps its width, holds at least half the row, and pushes the
-   * content after it to the end. The value then takes at most the other half, so a `Hex` truncates
-   * and long text wraps.
-   */
-  export function Label(props: Label.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <span
-        {...attributes}
-        data-label=""
-        {...styles.label({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Label {
-    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.label>
-  }
-
-  /**
-   * Content revealed by an expandable row. Mount it directly after the row while open. It eases in
-   * on mount, and the divider above it starts at the row text.
-   */
-  export function Panel(props: Panel.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <div
-        {...attributes}
-        data-divider=""
-        data-panel=""
-        {...styles.panel({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Panel {
-    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.panel>
-  }
-
-  /**
-   * Stands in for a `Rows.Panel` while its content loads. It renders `role="status"` labelled
-   * `Loading` (override with `aria-label`) and three pulsing bars that hold still under reduced
-   * motion.
-   */
-  export function PanelLoader(props: PanelLoader.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <div
-        aria-label="Loading"
-        role="status"
-        {...attributes}
-        data-divider=""
-        data-panel=""
-        {...styles.panelLoader({ className, style: props.style, vars })}
-      >
-        <span {...styles.bar({ style: { width: '60%' } })} />
-        <span {...styles.bar({ style: { width: '90%' } })} />
-        <span {...styles.bar({ style: { width: '40%' } })} />
-      </div>
-    )
-  }
-
-  export namespace PanelLoader {
-    export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
-      zyzz.Props.Variants<typeof styles.panelLoader>
-  }
-
-  /**
-   * `size` sets one row height for every row. A 32px control fits `small` and `medium` rows, and a
-   * 40px control fits `large` rows, without changing that height. `inset` dividers start where the
-   * row text does. Dividers in a `Rows.Panel` or `Rows.Group` directly after an expanded row start
-   * there with `full` dividers too.
-   * Inside a `Surface`, rows reach its edges. Variants default to `dividers="inset"`,
-   * `size="medium"`.
-   */
-  export function Root(props: Root.Props) {
-    const { className, dividers, size, vars, ...attributes } = props
-
-    return (
-      <RowsSize.Context value={size ?? 'medium'}>
-        <div
-          {...attributes}
-          data-rows=""
-          {...styles.root({ className, dividers, size, style: props.style, vars })}
-        />
-      </RowsSize.Context>
-    )
-  }
-
-  export namespace Root {
-    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.root>
-  }
-
-  /**
-   * Renders a button when pressable, or a link or other element through `render`. `ref` and
-   * attributes reach that element. `spacing` picks which sides keep padding and defaults to `both`.
-   *
-   * @example
-   * <Rows>
-   *   <Rows.Row action="expand" aria-expanded={open} onClick={() => setOpen(!open)}>
-   *     Details
-   *   </Rows.Row>
-   *   {open && <Rows.Panel>Chain ID 4217</Rows.Panel>}
-   * </Rows>
-   */
-  export function Row(props: Row.Props) {
-    const {
-      action = 'none',
-      children,
-      className,
-      disabled,
-      ref,
-      render,
-      spacing,
-      vars,
-      ...attributes
-    } = props
-    const size = use(RowsSize.Context) ?? 'medium'
-    const button = (action !== 'none' || attributes.onClick !== undefined) && render === undefined
-
-    return useRender({
-      defaultTagName: button ? 'button' : 'div',
-      props: {
-        ...attributes,
-        ...(button && { type: 'button' }),
-        ...(disabled && (button ? { disabled: true } : { 'aria-disabled': true })),
-        ...styles.row({ className, size, spacing, style: props.style, vars }),
-        'data-action': action === 'none' ? undefined : action,
-        'data-divider': '',
-        children: (
-          <>
-            <span {...styles.content()}>{children}</span>
-            {action === 'expand' && <ChevronRight data-indicator="" {...styles.indicator()} />}
-            {action === 'navigation' && <ChevronRight {...styles.indicator()} />}
-          </>
-        ),
-      },
-      ref,
-      render,
-    })
-  }
-
-  export namespace Row {
-    export type Props = Omit<useRender.ComponentProps<'div'>, 'children'> &
-      Omit<zyzz.Props.Variants<typeof styles.row>, 'size'> & {
-        /**
-         * `expand` shows a trailing chevron that turns from right to down while `aria-expanded` is
-         * true. `navigation` shows a trailing chevron. Either makes the row a button unless `render`
-         * is set.
-         * @default 'none'
-         */
-        action?: 'expand' | 'navigation' | 'none' | undefined
-        children?: ReactNode | undefined
-
-        /**
-         * Sets native `disabled` on a button row and `aria-disabled` otherwise. With `render`, only
-         * `aria-disabled` is set, so block activation of the rendered element yourself.
-         */
-        disabled?: boolean | undefined
-      }
-  }
-
-  /** Primary text of a row, usually inside `Rows.Info` above a `Rows.Description`. */
-  export function Title(props: Title.Props) {
-    const { className, vars, ...attributes } = props
-
-    return <span {...attributes} {...styles.title({ className, style: props.style, vars })} />
-  }
-
-  export namespace Title {
-    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.title>
-  }
-
-  /**
-   * Stands in for a `Rows.Group` while its rows load. It renders `role="status"` labelled `Loading`
-   * (override with `aria-label`) and two placeholder rows at the `Rows.Root` size.
-   */
-  export function RowGroupLoader(props: RowGroupLoader.Props) {
-    const { className, vars, ...attributes } = props
-    const size = use(RowsSize.Context) ?? 'medium'
-
-    return (
-      <div
-        aria-label="Loading"
-        role="status"
-        {...attributes}
-        data-group=""
-        {...styles.group({ className, style: props.style, vars })}
-      >
-        {['30%', '45%'].map((width) => (
-          <div key={width} data-divider="" {...styles.row({ size })}>
-            <span {...styles.content()}>
-              <span {...styles.bar({ style: { width } })} />
-            </span>
-          </div>
-        ))}
-      </div>
-    )
-  }
-
-  export namespace RowGroupLoader {
-    export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
-      zyzz.Props.Variants<typeof styles.group>
-  }
-}
-
-const pulse = keyframes(
-  { '0%, 100%': { opacity: 1 }, '50%': { opacity: 0.4 } },
-  { id: 'tds/web/rows/pulse' },
-)
-
-namespace styles {
-  export const bar = style(
-    {
-      animation: `${pulse} 1.4s ease-in-out infinite !custom`,
-      backgroundColor: 'grayAlpha.200',
-      borderRadius: 'full',
-      display: 'block',
-      height: '12',
-      '@media (prefers-reduced-motion: reduce)': { animation: 'none !custom' },
-    },
-    { id: 'tds/web/rows/bar' },
-  )
-
-  export const content = style(
-    {
-      alignItems: 'center',
-      columnGap: '12',
-      display: 'flex',
-      flexGrow: '1 !custom',
-      minWidth: '0',
-      textAlign: 'start',
-    },
-    { id: 'tds/web/rows/content' },
-  )
-
-  export const description = variants(
-    { base: { color: 'gray.900', display: 'block', typography: 'copy.13' } },
-    { id: 'tds/web/rows/description' },
-  )
-
-  export const info = variants(
-    {
-      base: {
-        display: 'flex',
-        flexDirection: 'column',
-        flexGrow: '1 !custom',
-        minWidth: '0',
-        rowGap: '4',
-      },
-    },
-    { id: 'tds/web/rows/info' },
-  )
-
-  export const group = variants({ base: { display: 'block' } }, { id: 'tds/web/rows/group' })
-
-  export const indicator = style(
-    {
-      color: 'gray.700',
-      flexShrink: '0 !custom',
-      transitionDuration: '240',
-      transitionProperty: 'transform',
-      transitionTimingFunction: 'spring',
-      '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },
-    },
-    { id: 'tds/web/rows/indicator' },
-  )
-
-  export const title = variants(
-    { base: { color: 'foreground', display: 'block', typography: 'copy.14.strong' } },
-    { id: 'tds/web/rows/title' },
-  )
-
-  export const label = variants(
-    {
-      base: {
-        color: 'gray.900',
-        flexShrink: '0 !custom',
-        marginInlineEnd: 'auto !custom',
-        // Holding half the row leaves the value at most the other half, however long it is.
-        minWidth: '50% !custom',
-        selectors: {
-          // A `Hex` value yields the width of its leading identicon and gap back from this half.
-          '&:has(~ [data-hex] > [data-identicon="16"]:first-child)': {
-            minWidth: 'calc(50% - 24px) !custom',
-          },
-          '&:has(~ [data-hex] > [data-identicon="24"]:first-child)': {
-            minWidth: 'calc(50% - 32px) !custom',
-          },
-          '&:has(~ [data-hex] > [data-identicon="32"]:first-child)': {
-            minWidth: 'calc(50% - 40px) !custom',
-          },
-          '&:has(~ [data-hex] > [data-identicon="40"]:first-child)': {
-            minWidth: 'calc(50% - 48px) !custom',
-          },
-          '&:has(~ [data-hex] > [data-identicon="48"]:first-child)': {
-            minWidth: 'calc(50% - 56px) !custom',
-          },
-          '&:has(~ [data-hex] > [data-identicon="64"]:first-child)': {
-            minWidth: 'calc(50% - 72px) !custom',
-          },
-        },
-      },
-    },
-    { id: 'tds/web/rows/label' },
-  )
-
-  export const panel = variants(
-    {
-      base: {
-        boxSizing: 'border-box',
-        color: 'gray.900',
-        padding: '16',
-        transitionDuration: '200',
-        transitionProperty: 'opacity, transform',
-        transitionTimingFunction: 'snappy',
-        typography: 'copy.14',
-        // Consumers mount the panel when a row expands, so it eases in from its starting style.
-        '@starting-style': { opacity: '0 !custom', transform: 'translateY(-4px) !custom' },
-        '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity' },
-      },
-    },
-    { id: 'tds/web/rows/panel' },
-  )
-
-  export const panelLoader = variants(
-    {
-      base: {
-        boxSizing: 'border-box',
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '16',
-        rowGap: '12',
-      },
-    },
-    { id: 'tds/web/rows/panel-loader' },
-  )
-
-  export const root = variants(
-    {
-      base: {
-        boxSizing: 'border-box',
-        color: 'foreground',
-        display: 'block',
-        typography: 'label.14.strong',
-        selectors: {
-          '& [data-divider]': { position: 'relative' },
-          // The faintest gray keeps dividers quiet on filled surfaces as well as on the page.
-          '& [data-divider]::before': {
-            backgroundColor: 'grayAlpha.100',
-            content: '"" !custom',
-            height: '1',
-            insetBlockStart: '0',
-            pointerEvents: 'none',
-            position: 'absolute',
-          },
-          '& > [data-divider]:first-child::before': { display: 'none' },
-          // A hovered row's fill would otherwise sit between two visible separators.
-          '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"])::before':
-            { display: 'none' },
-          '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"]) + [data-divider]::before':
-            { display: 'none' },
-          '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"]) + [data-group] > [data-divider]:first-child::before':
-            { display: 'none' },
-        },
-      },
-      // Inset dividers start where the row text does: 16, 20 or 24px in.
-      compoundVariants: [
-        {
-          when: { dividers: 'inset', size: 'large' },
-          style: { selectors: { '& [data-divider]::before': { insetInline: '24' } } },
-        },
-        {
-          when: { dividers: 'inset', size: 'medium' },
-          style: { selectors: { '& [data-divider]::before': { insetInline: '20' } } },
-        },
-      ],
-      defaultVariants: { dividers: 'inset', size: 'medium' },
-      variants: {
-        dividers: {
-          full: { selectors: { '& [data-divider]::before': { insetInline: '0' } } },
-          inset: { selectors: { '& [data-divider]::before': { insetInline: '16' } } },
-          none: { selectors: { '& [data-divider]::before': { display: 'none' } } },
-        },
-        // Panels share the rows' side padding so their text lines up. Info takes back the block
-        // padding that small and medium rows trim for controls, so two-line text keeps its room.
-        // Dividers in content revealed by an expanded row start at the row text, even with `full`
-        // dividers, so the content reads as nested under the row.
-        size: {
-          large: {
-            selectors: {
-              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
-                { insetInlineStart: '24' },
-              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '24' },
-              '& [data-panel]': { paddingInline: '24' },
-            },
-          },
-          medium: {
-            selectors: {
-              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
-                { insetInlineStart: '20' },
-              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '20' },
-              '& [data-info]': { paddingBlock: '4' },
-              '& [data-panel]': { paddingInline: '20' },
-            },
-          },
-          small: {
-            typography: 'label.13.strong',
-            selectors: {
-              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
-                { insetInlineStart: '16' },
-              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '16' },
-              '& [data-info]': { paddingBlock: '2' },
-            },
-          },
-        },
-      },
-    },
-    { id: 'tds/web/rows/root' },
-  )
-
-  export const row = variants(
-    {
-      base: {
-        alignItems: 'center',
-        backgroundColor: 'transparent !custom',
-        border: 'none !custom',
-        boxSizing: 'border-box',
-        color: 'inherit !custom',
-        columnGap: '12',
-        display: 'flex',
-        font: 'inherit !custom',
-        outlineColor: 'transparent !custom',
-        outlineOffset: '0',
-        outlineStyle: 'solid !custom',
-        outlineWidth: '2',
-        paddingBlock: '8',
-        textAlign: 'start',
-        textDecoration: 'none !custom',
-        transitionDuration: '160',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset',
-        transitionTimingFunction: 'snappy',
-        width: '100% !custom',
-        selectors: {
-          '&:is(button, a[href], [role="button"])': { cursor: 'pointer' },
-          '&:is(button, a[href], [role="button"]):hover:not(:disabled, [aria-disabled="true"])': {
-            backgroundColor: 'grayAlpha.100',
-          },
-          '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])': {
-            backgroundColor: 'grayAlpha.200',
-          },
-          '&:is(button, a[href], [role="button"]):focus-visible': {
-            outlineColor: 'blue.700',
-            outlineOffset: '-2',
-          },
-          '&:disabled, &[aria-disabled="true"]': { cursor: 'default', opacity: 'disabled' },
-          '&[aria-expanded="true"] [data-indicator]': { transform: 'rotate(90deg) !custom' },
-        },
-        '@media (prefers-reduced-motion: reduce)': {
-          transitionProperty: 'background-color, opacity, outline-color',
-        },
-      },
-      // Side padding grows with the row: 16, 20 and 24px.
-      compoundVariants: [
-        { when: { size: 'large', spacing: 'both' }, style: { paddingInline: '24' } },
-        { when: { size: 'large', spacing: 'end' }, style: { paddingInlineEnd: '24' } },
-        { when: { size: 'large', spacing: 'start' }, style: { paddingInlineStart: '24' } },
-        { when: { size: 'medium', spacing: 'both' }, style: { paddingInline: '20' } },
-        { when: { size: 'medium', spacing: 'end' }, style: { paddingInlineEnd: '20' } },
-        { when: { size: 'medium', spacing: 'start' }, style: { paddingInlineStart: '20' } },
-      ],
-      defaultVariants: { size: 'medium', spacing: 'both' },
-      variants: {
-        // 36, 40 and 56px. Block padding leaves room for a 32px control in small and medium rows and a
-        // 40px control in large rows, so a row with a control matches the text rows beside it.
-        size: {
-          large: { minHeight: '56' },
-          medium: { minHeight: '40', paddingBlock: '4' },
-          small: { minHeight: '36', paddingBlock: '2' },
-        },
-        spacing: {
-          both: { paddingInline: '16' },
-          end: { paddingInlineEnd: '16' },
-          none: {},
-          start: { paddingInlineStart: '16' },
-        },
-      },
-    },
-    { id: 'tds/web/rows/row' },
-  )
-}