# Progress

Shows how far a task has advanced.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Progress.tsx)

## Overview

A progress bar reports how far a task has advanced.

Name the task with `Label`, which labels the bar for assistive technology. Use `Gauge` for a measurement that does not advance.

## Examples

### Basic

```tsx
import { Progress, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Progress.Root value={60} {...styles.progress()}>
      <Progress.Label>Uploading</Progress.Label>
      <Progress.Value />
      <Progress.Track>
        <Progress.Indicator />
      </Progress.Track>
    </Progress.Root>
  )
}

namespace styles {
  export const progress = style({ maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Progress/Basic.tsx)

### Intent

Set `intent` to `neutral` or `positive`. It defaults to `neutral`.

```tsx
import { Progress, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      {(['neutral', 'positive'] as const).map((intent, index) => (
        <Progress.Root intent={intent} key={intent} value={20 + index * 20}>
          <Progress.Label>{intent}</Progress.Label>
          <Progress.Value />
          <Progress.Track>
            <Progress.Indicator />
          </Progress.Track>
        </Progress.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const stack = style({
    display: 'flex',
    flexDirection: 'column',
    gap: '4',
    maxWidth: '24rem !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Progress/Intent.tsx)

### Value

Pass `value={null}` for an indeterminate bar when the remaining work is unknown.

```tsx
import { Progress, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Progress.Root value={null} {...styles.progress()}>
      <Progress.Label>Indeterminate</Progress.Label>
      <Progress.Track>
        <Progress.Indicator />
      </Progress.Track>
    </Progress.Root>
  )
}

namespace styles {
  export const progress = style({ maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Progress/Value.tsx)

## Guidelines

TODO: Write guidelines for Progress.