Intent Design System

COMPONENT

IntentVisualizationBar

Graphique en barres intent-first (SVG). Supporte intent global + override par barre. Accessible, stable hooks.

📊 VisualizationSince v0.3.0

DESIGN SYSTEM

mode

Intent

Variant

Glow

Intensity

State

disabled

PLAYGROUND

Orientation

Display

showAxisshowValuesperBarIntent (demo)

Geometry

height

gap

barRadius

Astuce: active perBarIntent pour valider les vars par barre (et la cohérence intent).

PREVIEW

orientation=vertical, variant= elevated, intent= informed, perBarIntent= true

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
datarequis Données du graphe.	IntentVisualizationBarDatum[]	—
orientation Orientation des barres.	"vertical" \| "horizontal"	vertical
min Minimum de l’échelle.	number	0
max Maximum de l’échelle (auto si absent).	number	—
showValues Affiche la valeur.	boolean	true
showAxis Affiche l’axe de base.	boolean	true
height Hauteur SVG.	number	220
barRadius Arrondi des barres.	number	12
gap Espace entre barres.	number	10
padding Padding interne du canvas.	number	12
valueFormatter Formatage des valeurs.	(v, d) => string	—
onBarClick Click sur une barre.	(datum) => void	—
ariaLabel Label ARIA global.	string	Bar chart

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