COMPONENT
IntentControlInput
Input/textarea intent-first. Standalone: frame visuel. Dans IntentControlField: mode naked (insideField=true).
controlsince 0.2.2
DESIGN SYSTEM
mode
Intent
Variant
Glow
Intensity
State
PLAYGROUND
Type
Layout
wrapInField=true démontre l’intégration avec IntentControlField (input en mode insideField).
Size
Validation
Placeholder
Value
(Contrôlé) Utilise ce champ pour éditer la valeur du composant dans le preview.
Field wrapper
field.label
field.hint
field.error
field.direction
Astuce: teste tab/focus + placeholder + invalid + insideField pour valider les hooks.
PREVIEW
Un intitulé clair aide le MJ à suivre ton fil narratif.
as=input, wrapInField= true, variant= elevated, intent= informed, size= md, invalid= false
Astuce: mets wrapInField=true pour valider le contrat “Field owns the frame”.
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 | ||
as Type de contrôle: input (défaut) ou textarea. | "input" | "textarea" | input |
className Classes CSS additionnelles sur l’élément editable. | string | — |
size Taille (hauteur/typo/padding si standalone). | "xs" | "sm" | "md" | "lg" | "xl" | md |
fullWidth Étire le contrôle sur toute la largeur disponible. | boolean | false |
leading Slot à gauche (icône, badge). En mode insideField, préfère plutôt utiliser le leading du Field. | React.ReactNode | — |
trailing Slot à droite (action, compteur). En mode insideField, préfère plutôt utiliser le trailing du Field. | React.ReactNode | — |
insideField Active le mode “naked” pour être wrappé par IntentControlField (le frame visuel appartient au Field). | boolean | false |
invalid Force l’état invalide (aria-invalid + hook). | boolean | false |
autoSize Textarea uniquement: ajuste la hauteur automatiquement au contenu. | boolean | false |
minRows Textarea + autoSize: nombre de lignes minimum. | number | 2 |
maxRows Textarea + autoSize: nombre de lignes maximum. | number | 8 |
(native props) Props natives input/textarea (value, onChange, placeholder, name, autoComplete…). | InputHTMLAttributes | TextareaHTMLAttributes (w/ DS omissions) | — |
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 |