COMPONENT
IntentDivider
Divider intent-first (layout) : ligne horizontale/verticale avec label optionnel, stylé via resolveIntent().
layoutsince 0.2.0
DESIGN SYSTEM
mode
Intent
Variant
Glow
Intensity
State
PLAYGROUND
Orientation
Thickness
Layout
Label
Le label est rendu uniquement en horizontal.
Align
Gap
Astuce: en vertical, le label est ignoré (simple rule).
PREVIEW
Section
mode=dark, intent= informed, orientation= horizontal, thickness= hairline
RESOLVED
{
"mode": "dark",
"intent": "informed",
"variant": "flat",
"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": "",
"text": "intent-text",
"ring": "",
"shadow": "",
"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 appliquées au root. | string | — |
orientation Orientation du divider (horizontal/vertical). | "horizontal" | "vertical" | horizontal |
thickness Épaisseur de la ligne. | "hairline" | "thin" | "medium" | hairline |
fullWidth Étire le divider sur toute la largeur/hauteur disponible. | boolean | true (horizontal), false (vertical) |
label Label optionnel (uniquement en horizontal). | React.ReactNode | — |
align Alignement du label (horizontal). | "left" | "center" | "right" | center |
gap Espace autour du label (horizontal). | "xs" | "sm" | "md" | sm |
(native props) Toutes les props natives du div (id, style, onClick, aria-*, data-*…). | 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 |