Intent Design System

COMPONENT

IntentPickerTone

Sélecteur de tone riche: combobox + swatches (color picker), options themed/ink, intent-first.

controlsince 0.2.0

DESIGN SYSTEM

mode

Intent

Variant

Glow

Intensity

State (DS)

dsDisabled

PLAYGROUND

Value (Picker)

Options

includeThemedincludeInk

Field state

disabledinvalid

Layout

compactpadded

Slots

leadingtrailing

Astuce: active intent="toned" puis change tone pour voir le picker “vivre” 😄

PREVIEW

Tone

Optional

Pick a tone from the DS palette

value: emerald

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
valuerequis Tone sélectionné.	ToneName \| 'themed' \| 'ink'	—
onChangerequis Callback de changement.	(tone: ToneName \| 'themed' \| 'ink') => void	—
options Liste d’options tonales.	(ToneName \| 'themed' \| 'ink')[]	DEFAULT_TONE_OPTIONS
includeThemed Ajoute l’option themed.	boolean	false
includeInk Ajoute l’option ink.	boolean	false
label Label du picker.	React.ReactNode	Tone
hint Texte d’aide.	React.ReactNode	—
error Texte d’erreur.	React.ReactNode	—
disabled Désactive le picker.	boolean	false
invalid Force l’état invalide.	boolean	false
compact Réduit les espacements.	boolean	false
padded Padding interne du frame.	boolean	true
placeholder Placeholder du select.	string	Select…
size Taille du select.	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md
fullWidth Select pleine largeur.	boolean	true
clearable Option Clear (null).	boolean	false

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