COMPONENT
IntentContentText
Texte intent-first avec couleur résolue, gradient glow, halo et helpers typographiques.
✍️ ContentSince v0.3.0
DESIGN SYSTEM
PLAYGROUND
PREVIEW
IntentContentText
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 Balise HTML rendue par le composant. | keyof JSX.IntrinsicElements | "span" |
inline Force le comportement inline ou block. | boolean | — |
size Taille typographique du texte. | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" |
weight Graisse typographique. | "regular" | "medium" | "semibold" | "bold" | "medium" |
gradient Active un gradient de texte. auto l’active surtout en mode glowed si disponible. | boolean | "auto" | "text" | "auto" |
glowText Ajoute un halo subtil autour du texte. | boolean | false |
muted Adoucit visuellement le texte. | boolean | false |
truncate Tronque le texte sur une ligne. | boolean | false |
balance Utilise text-wrap balance pour les titres et accroches. | boolean | false |
mono Utilise une police monospace. | boolean | false |
italic Affiche le texte en italique. | boolean | false |
leadingIcon Icône affichée avant le contenu. | React.ReactNode | — |
trailingIcon Icône affichée après le contenu. | React.ReactNode | — |
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 |