Intent Design System

COMPONENT

IntentControlSelect

Select intent-first (custom) : combobox + listbox, hooks CSS stables + variables via resolveIntent().

controlsince 0.2.0

DESIGN SYSTEM

mode

Intent

Variant

Glow

Intensity

State

disabled

PLAYGROUND

Size

Layout

fullWidth

Data

with disabled option

Ajoute une option disabled (ex: Layon) pour tester l’état.

Value

Ce select “Value” sert juste à changer rapidement la valeur depuis le playground.

Placeholder

Behavior

clearable

Astuce: teste le clavier (↑ ↓ Enter Escape) et le focus pour valider combobox/listbox.

PREVIEW

mode=dark, variant= elevated, intent= informed, size= md, value= null

Astuce: clearable=true permet de revenir à null.

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

Prop	Type	Default
PROPS SYSTÈME
intent Intent sémantique (informed/empowered/warned/threatened/themed/toned/glowed).	IntentName	DEFAULT_INTENT
variant Variant visuel (flat/outlined/elevated/ghost).	VariantName	DEFAULT_VARIANT
tone Override de tone (n’a d’effet que si intent='toned').	ToneName	DEFAULT_TONE (si toned)
glow Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed').	boolean \| GlowName	false (ou DEFAULT_GLOW_BY_INTENT)
intensity Intensité (soft/medium/strong).	Intensity	medium
mode Mode colorimétrique (dark/light).	ModeName	dark
disabled Désactive l’état visuel (hooks + styles).	boolean	false
PROPS LOCALES
className Classes CSS additionnelles appliquées au trigger.	string	—
optionsrequis Liste des options (value/label, description optionnelle, disabled).	IntentControlSelectOption[]	—
value Valeur contrôlée (null = aucune sélection).	string \| null	—
defaultValue Valeur initiale non contrôlée.	string \| null	—
onValueChange Callback quand l’utilisateur sélectionne une option (ou clear).	(value: string \| null, option?: IntentControlSelectOption) => void	—
placeholder Texte affiché quand aucune option n’est sélectionnée.	string	Select…
size Taille (hauteur, padding, typo).	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md
fullWidth Étire le select sur toute la largeur disponible.	boolean	false
clearable Affiche une ligne “Clear” (valeur null).	boolean	false
closeOnSelect Ferme le popover après sélection.	boolean	true
align Alignement horizontal du popover par rapport au trigger.	"start" \| "end"	start
(native props) Props natives du button trigger (aria-, data-, onKeyDown...).	Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' \| 'children' \| 'value' \| 'defaultValue' \| 'onChange'>	—

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