COMPONENT
IntentControlSegmented
Segmented control intent-first : groupe de boutons toggle (single/multi) pour choisir un état, sans navigation.
🕹️ ControlSince v0.2.0
DESIGN SYSTEM
mode
Intent
Variant (DS)
Glow
Intensity
State (DS)
PLAYGROUND
Behavior
Size
Layout
Variants (segments)
inactiveVariant
activeVariant
Options
State (local)
Astuce: en multiple=true, chaque segment devient un toggle (aria-pressed). En single, allowEmpty autorise un “unselect”.
PREVIEW
value: dragons
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
PropTypeDefault
PROPS SYSTÈME
intent
Intent sémantique (informed/empowered/warned/threatened/themed/toned/glowed).
IntentDEFAULT_INTENT
variant
Variant visuel (flat/outlined/elevated/ghost).
VariantDEFAULT_VARIANT
tone
Override de tone (n’a d’effet que si intent='toned').
ToneDEFAULT_TONE (si toned)
toneStep
Step Tailwind (50..950) pour éclaircir/assombrir les teintes (autour du step canonique 500).
ToneStepDEFAULT_TONE_STEP
glow
Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed').
boolean | Glowfalse (ou glow par intent)
intensity
Intensité (soft/medium/strong).
IntensityDEFAULT_INTENSITY
mode
Mode colorimétrique (dark/light).
ModeDEFAULT_MODE
disabled
Désactive l’état visuel (hooks + styles).
booleanfalse
PROPS LOCALES
optionsrequis
Segments rendus (value/label, disabled optionnel).
IntentControlSegmentedOption[]—
value
Valeur contrôlée: string|null (single) ou string[] (multiple).
string | null | string[]—
defaultValue
Valeur initiale non contrôlée.
string | null | string[]—
onValueChange
Callback appelé quand la sélection change.
(value: string | null | string[]) => void—
multiple
Active le multi-select (toggle group).
booleanfalse
allowEmpty
En single: autorise aucune sélection (value=null).
booleantrue
size
Taille du segmented control (padding/hauteur/typo).
"xs" | "sm" | "md" | "lg" | "xl"md
fullWidth
Étire le groupe sur toute la largeur.
booleanfalse
equal
Force tous les segments à avoir la même largeur.
booleanfalse
inactiveVariant
Variant des segments inactifs.
"ghost" | "outlined" | "flat" | "elevated"ghost
activeVariant
Variant des segments actifs.
"ghost" | "outlined" | "flat" | "elevated"elevated
inactiveIntent
Intent des segments inactifs. Fallback sur l’intent du groupe.
IntentName—
activeIntent
Intent des segments actifs. Fallback sur l’intent du groupe.
IntentName—
inactiveTone
Tone des segments inactifs. Fallback sur le tone du groupe.
ToneName—
activeTone
Tone des segments actifs. Fallback sur le tone du groupe.
ToneName—
inactiveGlow
Glow des segments inactifs. Fallback sur le glow du groupe.
GlowName | boolean—
activeGlow
Glow des segments actifs. Fallback sur le glow du groupe.
GlowName | boolean—
inactiveIntensity
Intensity des segments inactifs. Fallback sur l’intensity du groupe.
Intensity—
activeIntensity
Intensity des segments actifs. Fallback sur l’intensity du groupe.
Intensity—
ariaLabel
Label ARIA du groupe.
stringSegmented control
(native props)
Props natives du div root (id, data-*, style...).
Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'onChange'>—
TYPES & CONSTANTES
APIValeur / 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