# Stopwatch

## Example

```svelte
<script lang="ts">
	import { Box, Button } from '@foxui/all';
	import { Stopwatch, StopwatchState } from '@foxui/all';
	import { onMount } from 'svelte';

	let stopwatch: StopwatchState | undefined = $state(undefined);

	onMount(() => {
		stopwatch?.start();
	});
</script>

<Box class="min-h-0">
	<Stopwatch bind:stopwatch class="sm:text-7xl" />
</Box>

<div class="mt-2 flex w-full justify-center gap-2">
	<Button
		onclick={() => {
			if (stopwatch?.isRunning) {
				stopwatch?.pause();
			} else {
				stopwatch?.resume();
			}
		}}>{stopwatch?.isRunning ? 'Pause' : 'Start'}</Button
	>
	<Button onclick={() => stopwatch?.reset()}>Reset</Button>
</div>
```

## Documentation

## Usage

```svelte
<Stopwatch bind:stopwatch />

<Button onclick={() => stopwatch?.start()}>Start</Button>
```

## Sources

Based on "svelte-reactive-timer" (https://github.com/joshnuss/svelte-reactive-timer)
Based on "number-flow" (https://number-flow.barvian.me/)

## API Reference

### Stopwatch
A stopwatch display with animated digits. Bind to the stopwatch prop to control it programmatically (start, pause, resume, reset).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| stopwatch | `StopwatchState` | `-` | The stopwatch state object. Provides methods: start(), pause(), resume(), reset(), and properties: isRunning, isPaused, elapsed. (bindable) |
| showHours | `boolean` | `false` | Whether to display the hours digits. |
| showMinutes | `boolean` | `true` | Whether to display the minutes digits. |
| showSeconds | `boolean` | `true` | Whether to display the seconds digits. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element. (bindable) |