<k-alert>
k-alert.js

Bannière d'alerte contextuelle (info, warning, success, error, tip)

Info
Une fois vérifié, vous pourrez accepter des courses.
<k-alert variant="info">Une fois vérifié, vous pourrez accepter des courses.</k-alert>
Warning with title
3 runners seulement dans votre zone.
<k-alert variant="warning" title="Bienvenue !">3 runners seulement dans votre zone.</k-alert>
Success
Vos données bancaires sont chiffrées et sécurisées.
<k-alert variant="success">Vos données bancaires sont chiffrées et sécurisées.</k-alert>
Error
Numéro de téléphone invalide. Vérifiez et réessayez.
<k-alert variant="error">Numéro de téléphone invalide. Vérifiez et réessayez.</k-alert>
Tip
Prenez la photo sur un fond clair.
<k-alert variant="tip" title="Conseil">Prenez la photo sur un fond clair.</k-alert>
<k-avatar>
k-avatar.js

Avatar avec initiales colorées et rating optionnel

Default 
<k-avatar initials="JM"></k-avatar>
With rating 
<k-avatar initials="LD" color="blue" rating="4.9"></k-avatar>
Large purple 
<k-avatar initials="AB" color="purple" size="lg"></k-avatar>
Extra large 
<k-avatar initials="JM" color="green" size="xl" rating="4.8"></k-avatar>
Gray (guest) 
<k-avatar initials="?" color="gray" size="md"></k-avatar>
Small orange 
<k-avatar initials="CD" color="orange" size="sm"></k-avatar>
<k-button>
k-button.js

Bouton d'action avec variantes (primary, secondary, outline, ghost, destructive, apple)

Primary 
<k-button label="Continuer" variant="primary"></k-button>
Primary full-width 
<k-button label="Confirmer l'envoi" variant="primary" full-width></k-button>
Secondary 
<k-button label="Plus tard" variant="secondary"></k-button>
Outline 
<k-button label="Annuler" variant="outline"></k-button>
Ghost 
<k-button label="Passer" variant="ghost"></k-button>
Destructive 
<k-button label="Se déconnecter" variant="destructive"></k-button>
Apple Login 
<k-button label="Continuer avec Apple" variant="apple"></k-button>
Disabled 
<k-button label="Confirmer" variant="primary" disabled full-width></k-button>
Small 
<k-button label="Modifier" variant="outline" size="sm"></k-button>
Large 
<k-button label="Accepter la course" variant="primary" size="lg" full-width></k-button>
<k-header>
k-header.js

Barre de navigation avec retour, titre centré et action optionnelle

Standard 
<k-header title="Votre objet"></k-header>
Close button 
<k-header title="Nouvel envoi" back="close"></k-header>
With right text 
<k-header title="Récapitulatif" right-text="Modifier"></k-header>
No back 
<k-header title="Bienvenue" no-back></k-header>
Transparent 
<k-header title="Suivi" transparent></k-header>
<k-input>
k-input.js

Champ de saisie avec label, icône et gestion d'erreur

Simple 
<k-input label="Nom" placeholder="Jean Dupont"></k-input>
Phone with prefix 
<k-input label="Téléphone" prefix="+33" placeholder="6 12 34 56 78"></k-input>
With icon 
<k-input placeholder="Adresse de collecte" icon="location"></k-input>
With right icon 
<k-input placeholder="12 rue des Lilas, Paris" icon="location" icon-right="chevron-right"></k-input>
Textarea 
<k-input label="Instructions" placeholder="Ex: Code porte 4521B" textarea rows="3"></k-input>
Error state 
<k-input label="IBAN" placeholder="FR76..." value="INVALID" error="Format IBAN invalide"></k-input>
Disabled 
<k-input label="Email" value="jean@mail.com" disabled></k-input>
Pre-filled 
<k-input label="Titulaire" value="Jean Martin"></k-input>
<k-tab-bar>
k-tab-bar.js

Barre d'onglets fixée en bas avec 3 tabs par défaut (Expédier, Runner, Profil)

Default (no active) 
<k-tab-bar style="width: 100%;"></k-tab-bar>
Expédier active 
<k-tab-bar style="width: 100%;" active="expedier"></k-tab-bar>
Runner active 
<k-tab-bar style="width: 100%;" active="runner"></k-tab-bar>
Profil active 
<k-tab-bar style="width: 100%;" active="profil"></k-tab-bar>
Custom tabs 
<k-tab-bar style="width: 100%;" tabs="Accueil:home,Recherche:search,Compte:user" active="accueil"></k-tab-bar>