Intent Design System

COMPONENT

IntentProgressBar

Progress bar intent-first avec mode déterminé/indéterminé, labels, marker, stripes, pulse et glow optionnel.

🔔 FeedbackSince v0.3.0

PREVIEW

Synchronisation des archives

Space Memoria aligne les branches et prépare les constellations.

64%

SAMPLE 1

Import

Variant preview

18%

SAMPLE 2

Analyse

Variant preview

42%

SAMPLE 3

Indexation

Variant preview

76%

NOTES

value: 64

orientation: horizontal

indeterminate: false

marker: 80

RESOLVED

{
  "mode": "dark",
  "intent": "empowered",
  "variant": "elevated",
  "intensity": "medium",
  "toneStep": 500,
  "toneEffective": "emerald",
  "glowKey": null,
  "glowBackground": null,
  "style": {
    "--intent-bg": "var(--ids-color-emerald-500)",
    "--intent-ring": "var(--ids-color-emerald-700)",
    "--intent-text": "var(--ids-color-emerald-200)",
    "--intent-bg-opacity": "0.16",
    "--intent-ring-opacity": "0.304",
    "--intent-border": "var(--ids-color-emerald-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
as Élément HTML rendu (polymorphique).	T extends React.ElementType	div
value Valeur actuelle en mode déterminé.	number	0
min / max Bornes de la plage de progression.	number / number	0 / 100
indeterminate Affiche un état indéterminé animé.	boolean	false
animated Anime la barre même en mode déterminé.	boolean	true
striped Ajoute un motif rayé subtil sur le fill.	boolean	false
pulse Ajoute une respiration lumineuse légère sur le fill.	boolean	false
markerValue Position optionnelle d’un repère / jalon.	number \| null	—
label / caption / valueLabel Contenus textuels autour de la barre.	React.ReactNode / React.ReactNode / React.ReactNode	—
showValue Affiche automatiquement le pourcentage.	boolean	false
valueDecimals Nombre de décimales du pourcentage auto.	number	0
valuePosition Position du texte de valeur.	"inside" \| "outside" \| "none"	"outside"
size Taille générale de la progress bar.	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"
orientation Orientation horizontale ou verticale.	"horizontal" \| "vertical"	"horizontal"
radius Rayon des coins.	"sm" \| "md" \| "lg" \| "full"	"full"
fullWidth / inline Gestion de la largeur et du layout inline.	boolean / boolean	false / false
length Longueur fixe de la track (width ou height selon orientation).	number \| string	—
framed Ajoute un cadre / container visuel subtil.	boolean	false
icon Icône optionnelle dans le header de contenu.	React.ReactNode	—
role / ariaLabel Accessibilité ARIA du composant.	React.AriaRole / string	"progressbar" / undefined
(native props) Toutes les props natives du tag rendu.	Omit<React.ComponentPropsWithoutRef<T>, 'as' \| 'className' \| 'children' \| 'color'>	—

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