Intent Design System

COMPONENT

🪜

IntentStepper

Stepper horizontal intent-first pour formulaires et workflows multi-étapes.

🧭 LayoutSince v0.3.0

PREVIEW

FORM CONTENT

Étape active : details

Ici tu peux afficher le contenu du wizard correspondant à l’étape sélectionnée.

Bloc A

Champs du formulaire

Bloc B

Aide / résumé / validation

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
stepsrequis Liste des étapes du stepper (label, description, meta, icon, status, disabled).	IntentStepperStep[]	—
currentSteprequis Identifiant contrôlé de l’étape courante.	string	—
onStepChange Callback appelé lors d’un changement d’étape par clic.	(stepId: string, step: IntentStepperStep, index: number) => void	—
clickable Autorise la navigation par clic sur les étapes.	boolean	false
readOnly Désactive les interactions tout en conservant l’affichage actif.	boolean	false
size Taille visuelle du composant.	"xs" \| "sm" \| "md" \| "lg"	md
fullWidth Étire le stepper sur toute la largeur disponible.	boolean	true
compact Réduit les espacements internes pour une version plus compacte.	boolean	false
showDescriptions Affiche les descriptions secondaires sous les labels.	boolean	true
showProgressBar Affiche la barre de progression horizontale derrière les étapes.	boolean	true
showStepNumbers Affiche les numéros d’étapes dans les marqueurs quand aucun icon custom n’est fourni.	boolean	false
currentStepIntent Overrides intent/tone/variant/glow/intensity pour l’étape courante.	Partial<Omit<IntentInput, 'disabled'>>	—
completeStepIntent Overrides visuels pour les étapes complétées.	Partial<Omit<IntentInput, 'disabled'>>	—
upcomingStepIntent Overrides visuels pour les étapes à venir.	Partial<Omit<IntentInput, 'disabled'>>	—
errorStepIntent Overrides visuels pour les étapes en erreur.	Partial<Omit<IntentInput, 'disabled'>>	—
lockedStepIntent Overrides visuels pour les étapes verrouillées.	Partial<Omit<IntentInput, 'disabled'>>	—
(native props) Toutes les props natives du div root (id, style, aria-, data-…).	Omit<React.HTMLAttributes<HTMLDivElement>, 'children' \| 'onChange'>	—

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