COMPONENT
IntentControlTags
Multi-value input intent-first (tags/tokens). Standalone: frame visuel. Dans IntentControlField: mode naked.
controlsince 0.2.2
DESIGN SYSTEM
mode
Intent
Variant
Glow
Intensity
State
PLAYGROUND
Size
Layout
insideField=true suppose que IntentControlField possède le frame visuel.
Validation
Placeholder
Behavior
addOn
Astuce: colle "a, b; c\n d" pour tester le multi-paste.
Value (quick set)
Ce select sert juste à changer rapidement la liste depuis le playground.
Field wrapper
field.label
field.hint
field.error
field.direction
Astuce: tape Entrée, ,, colle plusieurs valeurs, puis Backspace sur draft vide.
PREVIEW
Optional
LoireBikepackingNarration
Ajoute des mots-clés: Entrée, virgule, collage multi-lignes…
insideField=true, size= md, tags= 3, addOn= ["enter","comma"]
Test rapide: colle "alpha, beta; gamma\n delta" puis supprime avec Backspace (draft vide).
RESOLVED
{
  "mode": "dark",
  "intent": "informed",
  "variant": "elevated",
  "intensity": "medium",
  "toneEffective": "informed",
  "glowKey": null,
  "glowBackground": null,
  "style": {
    "--intent-bg": "rgb(var(--ids-informed))",
    "--intent-ring": "rgb(var(--ids-informed))",
    "--intent-text": "var(--ids-color-blue-200)",
    "--intent-bg-opacity": "0.16",
    "--intent-ring-opacity": "0.3045",
    "--intent-border": "rgb(var(--ids-informed))",
    "--intent-glow-bg": "",
    "--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).
IntentNameDEFAULT_INTENT
variant
Variant visuel (flat/outlined/elevated/ghost).
VariantNameDEFAULT_VARIANT
tone
Override de tone (n’a d’effet que si intent='toned').
ToneNameDEFAULT_TONE (si toned)
glow
Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed').
boolean | GlowNamefalse (ou DEFAULT_GLOW_BY_INTENT)
intensity
Intensité (soft/medium/strong).
Intensitymedium
mode
Mode colorimétrique (dark/light).
ModeNamedark
disabled
Désactive l’état visuel (hooks + styles).
booleanfalse
PROPS LOCALES
value
Liste contrôlée de tags.
string[]—
defaultValue
Liste initiale non contrôlée.
string[]—
onValueChange
Callback appelé quand la liste change (ajout/suppression).
(value: string[], meta?: { added?: string; removed?: string }) => void—
placeholder
Placeholder de l’input d’ajout.
stringAdd…
size
Taille (hauteur/padding/typo).
"xs" | "sm" | "md" | "lg" | "xl"md
fullWidth
Étire le contrôle sur toute la largeur.
booleanfalse
insideField
Mode “naked” pour être wrappé par IntentControlField (le frame appartient au Field).
booleanfalse
invalid
Force l’état invalide (aria-invalid + hook).
booleanfalse
allowDuplicates
Autorise les doublons dans la liste.
booleanfalse
addOn
Déclencheurs d’ajout (enter/comma/space/blur).
("enter" | "comma" | "space" | "blur")[]["enter","comma"]
removeOnBackspace
Si input vide: Backspace supprime le dernier tag.
booleantrue
maxItems
Limite le nombre de tags (bloque les ajouts au-delà).
number—
normalize
Normalise la saisie avant ajout (trim, etc.).
(raw: string) => string—
validate
Valide le tag avant ajout (unique, longueur, regex…).
(next: string, current: string[]) => boolean—
renderTag
Rendu custom d’un tag (label).
(tag: string) => React.ReactNode—
(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