Intent Design System

COMPONENT

IntentControlInput

Input/textarea intent-first. Standalone: frame visuel. Dans IntentControlField: mode naked (insideField=true).

🕹️ ControlSince v0.2.2

DESIGN SYSTEM

mode

Intent

Variant

Glow

Intensity

State

disabled

PLAYGROUND

Type

Layout

fullWidthwrapInField

wrapInField=true démontre l’intégration avec IntentControlField (input en mode insideField).

Size

Validation

invalid

Placeholder

Value

(Contrôlé) Utilise ce champ pour éditer la valeur du composant dans le preview.

Astuce: teste tab/focus + placeholder + invalid + insideField pour valider les hooks.

PREVIEW

Titre

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",
  "toneStep": 500,
  "toneEffective": "blue",
  "glowKey": null,
  "glowBackground": null,
  "style": {
    "--intent-bg": "var(--ids-color-blue-500)",
    "--intent-ring": "var(--ids-color-blue-700)",
    "--intent-text": "var(--ids-color-blue-200)",
    "--intent-bg-opacity": "0.16",
    "--intent-ring-opacity": "0.304",
    "--intent-border": "var(--ids-color-blue-700)",
    "--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).	Intent	DEFAULT_INTENT
variant Variant visuel (flat/outlined/elevated/ghost).	Variant	DEFAULT_VARIANT
tone Override de tone (n’a d’effet que si intent='toned').	Tone	DEFAULT_TONE (si toned)
toneStep Step Tailwind (50..950) pour éclaircir/assombrir les teintes (autour du step canonique 500).	ToneStep	DEFAULT_TONE_STEP
glow Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed').	boolean \| Glow	false (ou glow par intent)
intensity Intensité (soft/medium/strong).	Intensity	DEFAULT_INTENSITY
mode Mode colorimétrique (dark/light).	Mode	DEFAULT_MODE
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
readOnly Lecture seule: focusable mais non éditable (readOnly + aria-readonly + 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