Intent Design System

COMPONENT

IntentJourney

Stepper / timeline intent-first pour visualiser et naviguer une progression (étapes, états, navigation clavier).

🧭 LayoutSince v0.2.0

DESIGN SYSTEM

mode

Intent

Variant

Glow

Intensity

State

disabled

PLAYGROUND

Layout

Flags

compactclickableshowIndexshowRail

Content

withDescriptionswithIconswithRightMeta

Si withIcons=true, showIndex ne sert que pour les étapes sans icône.

Step statuses

step-1

step-2

step-3

step-4

Astuce: mets exactement 1 step en current pour que le focus/active se recale proprement.

Active (controlled)

PREVIEW

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

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	—
stepsrequis Étapes du parcours.	IntentJourneyStep[]	—
orientation Orientation du parcours.	"vertical" \| "horizontal"	vertical
size Taille des items.	"xs" \| "sm" \| "md" \| "lg"	md
compact Réduit les espacements.	boolean	false
activeId Étape active (contrôlé).	string	—
defaultActiveId Étape active par défaut (non-contrôlé).	string	—
onActiveChange Callback quand l’étape active change.	(id: string) => void	—
clickable Rend les étapes cliquables.	boolean	true
showIndex Affiche l’index si pas d’icône.	boolean	true
ariaLabel Label ARIA du composant.	string	Journey
showRail Affiche la ligne de parcours.	boolean	true
(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