Intent Design System

COMPONENT

IntentTimeline

Timeline intent-first pour afficher une suite d’événements (dates, marqueurs, cartes, groupes, expansion, navigation clavier).

🧭 LayoutSince v0.2.6

PREVIEW

🗓️ Année
2021
Origines récentes
🧭 Repères
2022
Images, lieux, objets
🪐 Space
2025
Capsules & mémoire
🧭 Repères
2022
Images, lieux, objets

⌨️ Navigation: ↑/↓ (vertical) ou ←/→ (horizontal), Home/End, Enter, Space (expand).

RESOLVED

{
  "mode": "dark",
  "intent": "informed",
  "variant": "elevated",
  "intensity": "medium",
  "toneStep": 500,
  "toneEffective": "blue",
  "glowKey": null,
  "glowBackground": null,
  "style": {
    "--intent-bg": "var(--ids-color-blue-500)",
    "--intent-ring": "var(--ids-color-blue-700)",
    "--intent-text": "var(--ids-color-blue-200)",
    "--intent-bg-opacity": "0.16",
    "--intent-ring-opacity": "0.304",
    "--intent-border": "var(--ids-color-blue-700)",
    "--intent-glow-fill-opacity": "0",
    "--intent-glow-border-opacity": "0",
    "--intent-glow-filter": "none"
  },
  "classes": {
    "base": "intent-surface inline-flex items-center gap-2",
    "surface": "intent-bg",
    "border": "intent-ring",
    "text": "intent-text",
    "ring": "",
    "shadow": "intent-shadow-soft",
    "glow": "",
    "disabled": ""
  },
  "warnings": []
}

PROPS

Prop	Type	Default
PROPS SYSTÈME
intent Intent sémantique (informed/empowered/warned/threatened/themed/toned/glowed).	Intent	DEFAULT_INTENT
variant Variant visuel (flat/outlined/elevated/ghost).	Variant	DEFAULT_VARIANT
tone Override de tone (n’a d’effet que si intent='toned').	Tone	DEFAULT_TONE (si toned)
toneStep Step Tailwind (50..950) pour éclaircir/assombrir les teintes (autour du step canonique 500).	ToneStep	DEFAULT_TONE_STEP
glow Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed').	boolean \| Glow	false (ou glow par intent)
intensity Intensité (soft/medium/strong).	Intensity	DEFAULT_INTENSITY
mode Mode colorimétrique (dark/light).	Mode	DEFAULT_MODE
disabled Désactive l’état visuel (hooks + styles).	boolean	false
PROPS LOCALES
className Classes CSS additionnelles sur le root.	string	—
itemsrequis Événements affichés dans la timeline.	IntentTimelineItem[]	—
groups Groupes optionnels (utilisés si groupId est renseigné sur les items).	IntentTimelineGroup[]	—
showGroupHeaders Affiche les en-têtes de groupe.	boolean	true
orientation Orientation de la timeline.	"vertical" \| "horizontal"	vertical
layout Mise en page (vertical): stacked/split/alternate.	"stacked" \| "split" \| "alternate"	stacked
size Taille globale.	"xs" \| "sm" \| "md" \| "lg"	md
density Densité des espacements.	"tight" \| "normal" \| "airy"	normal
compact Réduit la description et les paddings.	boolean	false
reverse Inverse l’ordre de rendu.	boolean	false
markerVariant Style du marqueur.	"dot" \| "icon" \| "index" \| "pill" \| "avatar"	dot
showIndex Affiche l’index (markerVariant=index).	boolean	true
showConnector Affiche la ligne de connexion.	boolean	true
connectorStyle Style de ligne.	"solid" \| "dashed"	solid
connectorStartCap Cap au début de la ligne.	boolean	true
connectorEndCap Cap à la fin de la ligne.	boolean	true
showTime Affiche la date/heure.	boolean	true
timeLocale Locale du format de date.	string	fr-FR
formatTime Formatter de date custom.	(d: Date, item: IntentTimelineItem) => string	—
activeId Item actif (contrôlé).	string	—
defaultActiveId Item actif par défaut.	string	—
onActiveChange Callback quand l’actif change.	(id: string) => void	—
clickable Rend les items interactifs.	boolean	true
allowLinkNavigation Autorise la navigation via href.	boolean	true
ariaLabel Label ARIA du composant.	string	Timeline
collapsible Active l’extension des items (body).	boolean	false
expandedIds Items étendus (contrôlé).	string[]	—
defaultExpandedIds Items étendus par défaut.	string[]	—
allowMultiExpand Autorise plusieurs items ouverts.	boolean	true
onExpandedChange Callback quand l’extension change.	(ids: string[]) => void	—
render* Hooks de rendu optionnels.	renderHeader/renderTitle/renderSubtitle/renderDescription/renderMeta/renderMarker/renderBody	—
empty Rendu quand items est vide.	React.ReactNode	—
(native props) Props natives sur le root.	Omit<React.HTMLAttributes<HTMLElement>, 'className' \| 'children'>	—

TYPES & CONSTANTES

API	Valeur / Référence
TYPES
IntentNametype Type union des intents sémantiques.	"informed" \| "empowered" \| "warned" \| "threatened" \| "themed" \| "toned" \| "glowed"
VariantNametype Type union des variants visuels.	"flat" \| "outlined" \| "elevated" \| "ghost"
ToneNametype Type union des tones (familles Tailwind + theme + black).	("slate" \| "gray" \| ... \| "theme" \| "black")
GlowNametype Type union des aesthetic glows (utilisable quand intent='glowed').	"aurora" \| "ember" \| "cosmic" \| "mythic" \| "royal" \| "mono"
Intensitytype Intensité des effets (glow/contraste).	"soft" \| "medium" \| "strong"
ModeNametype Mode colorimétrique.	"dark" \| "light"
CONSTANTES
DEFAULT_INTENTconst Intent par défaut si aucun intent n’est fourni.	informed
DEFAULT_VARIANTconst Variant par défaut si aucun variant n’est fourni.	elevated
DEFAULT_GLOW_BY_INTENTconst Mapping intent → glow par défaut (quand glow est implicite).	DEFAULT_GLOW_BY_INTENT