import { Controls, Canvas, Meta, Source } from '@storybook/addon-docs/blocks';
import * as HeaderToolbar from './HeaderToolbar.stories';

<Meta of={HeaderToolbar} />

<div className="header">
  <h1>HeaderToolbar</h1>
  <p>L’élément `HeaderToolbar` est utilisé pour afficher une barre d'outils en haut de la page. Il est composé de deux zones customisables.</p>
</div>

{/* func-version-start */}
<p className="func-version-badge">Dernière mise à jour fonctionnelle : V1.1.4 - 13/08/2026</p>
{/* func-version-end */}
{/* a11y-version-start */}
<p className="a11y-version-badge">Dernière mise à jour accessibilité : V1.1.3 - 22/07/2026</p>
{/* a11y-version-end */}


<Canvas
    of={HeaderToolbar.Default}
    story={{
        height: '550px',
    }}
/>

# API

<Controls of={HeaderToolbar.Default} />

# Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
	import { HeaderToolbar } from '@cnamts/synapse'
</script>

<template>
	<HeaderToolbar />
</template>
`} />