Design system — Sunrise
Les composants.
Pièces élémentaires de freelaunch. Utilisées pour construire tous les sites tenants et l'interface admin.
Button
CTA primaire ou secondaire avec 4 variants et 2 tailles.
Variants
Sizes
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "ghost" | "dark" | "link" | "primary" | Style visuel |
| size | "md" | "sm" | "md" | Taille |
Card
Conteneur avec 4 variants de background.
Variants
Neutral
Soft
Warm
Ink
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "neutral" | "soft" | "warm" | "ink" | "neutral" | Fond |
Pill
Badge ou statut avec 3 variants.
Variants
DefaultOnDarkAvec dot
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "on" | "dark" | "default" | Style |
| dot | boolean | false | Affiche un point coloré avant |
Input
Input text avec état d'erreur.
States
| Prop | Type | Default | Description |
|---|---|---|---|
| error | boolean | false | Style d'erreur |
Textarea
Champ multi-ligne.
Default
| Prop | Type | Default | Description |
|---|---|---|---|
| error | boolean | false | Style d'erreur |
Select
Liste déroulante.
Default
| Prop | Type | Default | Description |
|---|---|---|---|
| options * | { value: string; label: string }[] | — | Options |
| placeholder | string | — | Ligne vide au début |
Checkbox
Case à cocher avec label.
Default
| Prop | Type | Default | Description |
|---|---|---|---|
| label * | string | — | Texte à droite |
Dialog
Modal. Client component; le parent gère open/close. Preview interactive en prod uniquement.
Preview
Voir en action sur
/reserver (Vague 1c)Toast
Notification avec 3 variants.
Variants
Réservation confirmée
Erreur
Slot déjà réservé
Info
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "success" | "error" | "info" | "info" | Type |
EmptyState
Placeholder pour liste vide.
Default
📭
Aucune réservation
Les prochaines apparaîtront ici.
| Prop | Type | Default | Description |
|---|---|---|---|
| title * | string | — | Titre principal |
| description | string | — | Sous-titre |
| icon | ReactNode | — | Icône / emoji en haut |
| action | ReactNode | — | CTA (souvent Button) |
Spinner
Indicateur de chargement.
Sizes
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Taille |