Intent Design System

COMPONENT

IntentControlRange

Range slider intent-first avec mode standalone stylisé ou naked, glow optionnel et affichage de valeur.

🕹️ ControlSince v0.3.0

PREVIEW

North

🐺 Maison Stark

Winter is Coming

Current

65%

Loyauté du Nord

Mesure l’adhésion des bannerets à Winterfell.

MIN

STEP

MAX

100

Tip: en mode naked, le composant devient une lame nue, sans armure visuelle. Pratique pour l’insérer dans un field ou une composition plus dense 🗡️

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 la racine ou le slider nu selon le mode.	string	—
size Taille générale du contrôle.	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md
fullWidth Étire le contrôle sur toute la largeur disponible.	boolean	false
naked Retire le frame visuel standalone et ne garde que le slider nu.	boolean	false
label Label principal optionnel au-dessus du slider.	React.ReactNode	—
caption Texte secondaire optionnel.	React.ReactNode	—
valueLabel Valeur affichée manuellement à droite du header.	React.ReactNode	—
showValue Affiche automatiquement la valeur numérique courante.	boolean	false
formatValue Fonction de formatage de la valeur affichée.	(value: number) => React.ReactNode	—
leading / trailing Slots visuels optionnels à gauche et à droite de la piste.	React.ReactNode / React.ReactNode	—
invalid Force l’état invalide.	boolean	false
readOnly Lecture seule. Le slider reste visible mais non interactif.	boolean	false
min / max / step Bornes et pas natifs du range input.	number / number / number	0 / 100 / 1
value / defaultValue Valeur contrôlée ou initiale du slider.	number / number	—
(native props) Props natives de input[type=range] compatibles (name, onChange, aria-*, etc.).	InputHTMLAttributes<HTMLInputElement> (DS omissions)	—

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