Intent Design System

COMPONENT

IntentControlField

Wrapper de champ: label + hint/error + slots. Root = layout + vars. Frame interne = look champ + focus-within.

controlsince 0.2.0

DESIGN SYSTEM

mode

Intent

Variant

Glow

Intensity

State

disabled

PLAYGROUND

Label

Description

Vide = pas de description.

Error

Vide = pas d’erreur.

Layout

requiredcompact

Direction

Horizontal sert à tester la version “label à gauche”.

Slots

leadingtrailing

leading/trailing sont des slots (icône, badge, bouton…).

Astuce: mets une erreur + required + compact pour valider la hiérarchie visuelle.

PREVIEW

Nom du personnage

Optional

mode=dark, variant= elevated, intent= informed, direction= vertical, compact= false

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 sur le root.	string	—
children Le contrôle rendu dans le field (input/select/etc).	React.ReactNode	—
label Label au-dessus / à gauche du contrôle.	React.ReactNode	—
labelFor Id de l’élément contrôlé (pour htmlFor).	string	—
required Marque le champ comme requis.	boolean	false
optionalLabel Texte affiché quand required=false.	string	Optional
showOptional Affiche le label Optional quand required=false.	boolean	true
hint Texte d’aide (sous le contrôle).	React.ReactNode	—
error Texte d’erreur (prioritaire sur hint).	React.ReactNode	—
invalid Force l’état invalide (hook + aria).	boolean	false
compact Réduit les espacements.	boolean	false
padded Active le padding interne du frame. Permet un field “dense/nu”.	boolean	true
direction Layout label/control: vertical ou horizontal.	"vertical" \| "horizontal"	vertical
leading Slot avant le contrôle (icône, badge).	React.ReactNode	—
trailing Slot après le contrôle (action, compteur).	React.ReactNode	—
(native props) Props natives du div root (data-*, onClick...).	Omit<React.HTMLAttributes<HTMLDivElement>, 'className' \| 'children'>	—

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