Input

<script lang="ts">
	import Input from '@tcpsystems/ui/foundation/Input';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let searchQuery = $state('');
	let filterTag = $state('');
	const uid = $props.id();
</script>

<Stack>
	<label for={uid + '-search'}>Search deployments</label>
	<Input id={uid + '-search'} placeholder="Type to search by name, region, or status" bind:value={searchQuery} />
	<label for={uid + '-tag'}>Filter by tag</label>
	<Input id={uid + '-tag'} placeholder="e.g. production, staging" bind:value={filterTag} />
</Stack>

<script lang="ts">
	import Input from '@tcpsystems/ui/foundation/Input';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let email = $state('admin@tcp.systems');
	const uid = $props.id();
</script>

<Stack>
	<label for={uid + '-email'}>Admin email</label>
	<Input id={uid + '-email'} value={email} disabled />
	<Input placeholder="Error state" invalid="true" />
</Stack>

<script lang="ts">
	import Field from '@tcpsystems/ui/foundation/Field';
	import Input from '@tcpsystems/ui/foundation/Input';
	let apiKey = $state('');
</script>

<Field label="API key" hint="Generate from Settings > Security">
	{#snippet control(props)}
		<Input {...props} bind:value={apiKey} />
	{/snippet}
</Field>