COMPONENT
IntentLoader
Loader intent-first à variantes cosmiques: spinner, orbites, comètes, radar, warp, galaxies et plus encore.
🔔 FeedbackSince v0.3.0
DESIGN SYSTEM
PLAYGROUND
Variant
Visual
Size
Speed
Layout
State
Content
Progress
Accessibility
PREVIEW
Mise en orbite
Space Memoria prépare les astres, les branches et les souvenirs...
SPINNER
RING
ORBIT
PLANET
RADAR
CONSTELLATION
GALAXY
NOTES
Variante active : orbit
État : loading
Layout : stacked
Progress : none
RESOLVED
{
"mode": "dark",
"intent": "glowed",
"variant": "elevated",
"intensity": "medium",
"toneStep": 500,
"toneEffective": "aurora",
"glowKey": "aurora",
"glowBackground": "radial-gradient(190% 150% at 15% 20%, rgba(34,211,238,0.28) 0%, rgba(34,211,238,0.1) 74%),radial-gradient(165% 150% at 85% 30%, rgba(217,70,239,0.26) 0%, rgba(217,70,239,0.1) 72%)",
"style": {
"--intent-bg": "rgb(var(--ids-paper))",
"--intent-bg-opacity": "0",
"--intent-text": "var(--ids-color-sky-200)",
"--intent-ring": "var(--ids-color-sky-600)",
"--intent-ring-opacity": "0.326",
"--intent-border": "var(--ids-color-sky-600)",
"--intent-glow-bg": "radial-gradient(190% 150% at 15% 20%, rgba(34,211,238,0.28) 0%, rgba(34,211,238,0.1) 74%),radial-gradient(165% 150% at 85% 30%, rgba(217,70,239,0.26) 0%, rgba(217,70,239,0.1) 72%)",
"--intent-glow-fill-opacity": "0.82",
"--intent-glow-border-opacity": "0.9",
"--intent-glow-filter": "saturate(1.20) brightness(1.12)"
},
"classes": {
"base": "intent-surface inline-flex items-center gap-2",
"surface": "",
"border": "",
"text": "intent-text",
"ring": "",
"shadow": "",
"glow": "has-intent-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 Élément HTML rendu (polymorphique). | T extends React.ElementType | div |
loading Active ou met en pause l’animation. | boolean | true |
hideWhenIdle Cache complètement le loader quand loading=false. | boolean | false |
loaderVariant Variante visuelle du loader. | "spinner" | "ring" | "orbit" | "planet" | "comet" | "stars" | "pulse" | "radar" | "warp" | "eclipse" | "constellation" | "galaxy" | "neural" | "analyzing" | "matrix" | "thinking" | "runes" | "sigil" | "alchemy" | "portal" | orbit |
size Taille générale du loader. | "xs" | "sm" | "md" | "lg" | "xl" | md |
speed Vitesse d’animation. | "verySlow" | "slow" | "normal" | "fast" | "veryFast" | normal |
layout Disposition inline ou empilée. | "inline" | "stacked" | stacked |
label Label principal affiché avec le loader. | React.ReactNode | — |
caption Texte secondaire sous le label. | React.ReactNode | — |
progress Progression optionnelle de 0 à 100. | number | null | — |
showProgress Affiche la valeur de progression. | boolean | false |
centered Centre visuellement le loader et son texte. | boolean | false |
fullWidth Étire le composant sur toute la largeur disponible. | boolean | false |
framed Ajoute un cadre subtil autour du loader. | boolean | false |
centerIcon Icône ou emoji affiché au centre de certaines variantes. | React.ReactNode | — |
role Rôle ARIA du composant. | React.AriaRole | status |
ariaLabel Libellé ARIA explicite pour l’état de chargement. | string | — |
(native props) Toutes les props natives du tag rendu (id, style, aria-*, data-*…). | Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'className' | 'children' | 'color'> | — |
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 |