Voice Form 01

1<script lang="ts">
2	import {
3		Card,
4		CardContent,
5		CardDescription,
6		CardHeader,
7		CardTitle,
8	} from "$UI$/card/index.js";
9	import { Input } from "$UI$/input/index.js";
10	import { Label } from "$UI$/label/index.js";
11	import { VoiceButton, type VoiceButtonState } from "$UI$/voice-button/index.js";
12	import { validateExampleForm, type ExampleFormValues } from "./schema.js";
13 
14	let values = $state<ExampleFormValues>({ firstName: "", lastName: "" });
15	const errors = $derived(validateExampleForm(values));
16 
17	let voiceState = $state<VoiceButtonState>("idle");
18	let cycleTimers: ReturnType<typeof setTimeout>[] = [];
19 
20	function clearTimers() {
21		cycleTimers.forEach(clearTimeout);
22		cycleTimers = [];
23	}
24 
25	function handleVoiceToggle() {
26		if (voiceState === "recording" || voiceState === "processing") {
27			clearTimers();
28			voiceState = "idle";
29			return;
30		}
31		clearTimers();
32		voiceState = "recording";
33		cycleTimers.push(
34			setTimeout(() => {
35				voiceState = "processing";
36			}, 2000)
37		);
38		cycleTimers.push(
39			setTimeout(() => {
40				values = { firstName: "John", lastName: "Doe" };
41				voiceState = "success";
42			}, 3000)
43		);
44		cycleTimers.push(
45			setTimeout(() => {
46				voiceState = "idle";
47			}, 5000)
48		);
49	}
50 
51	$effect(() => {
52		return () => clearTimers();
53	});
54 
55	function onSubmit(event: SubmitEvent) {
56		event.preventDefault();
57	}
58</script>
59 
60<div class="mx-auto w-full">
61	<Card class="relative overflow-hidden">
62		<div class="flex flex-col gap-2">
63			<CardHeader>
64				<div class="flex items-start justify-between">
65					<div class="space-y-1">
66						<CardTitle>Voice Fill</CardTitle>
67						<CardDescription>Fill fields by voice</CardDescription>
68					</div>
69					<VoiceButton
70						state={voiceState}
71						onPress={handleVoiceToggle}
72						disabled={voiceState === "processing"}
73						trailing="Voice Fill"
74					/>
75				</div>
76			</CardHeader>
77			<CardContent>
78				<form onsubmit={onSubmit} class="space-y-6">
79					<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
80						<div class="space-y-2">
81							<Label for="voice-form-01-first-name">First Name *</Label>
82							<Input
83								id="voice-form-01-first-name"
84								placeholder="John"
85								bind:value={values.firstName}
86								aria-invalid={errors.firstName ? "true" : undefined}
87								aria-describedby={errors.firstName ? "voice-form-01-first-name-error" : undefined}
88							/>
89							{#if errors.firstName}
90								<p
91									id="voice-form-01-first-name-error"
92									class="text-destructive text-sm"
93// … truncated