# Timer

## Example

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

	let timer: TimerState | undefined = $state(undefined);

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

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

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

## Documentation

## Usage

```svelte
<Timer bind:timer />

<Button onclick={() => timer.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

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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| timer | `TimerState` | `-` | The timer state object. Constructor takes duration in ms (default 10 minutes). Provides methods: start(), pause(), resume(), reset(), and properties: isRunning, isPaused, remaining. (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) |