COMPONENT
IntentSurfaceSkeleton
Placeholder intent-first pour surfaces en chargement: widget, card, panel ou squelette libre.
🧱 SurfaceSince v0.2.8
DESIGN SYSTEM
Mode
Intent
Variant
Glow
Intensity
State
PLAYGROUND
Theme
Preset
Surface
Padding
Radius
Header align
Header
Leading shape
Badges
Actions
Body
Lines
Stats
Stats columns
Cards
Cards columns
Footer + Motion
Footer lines
Footer actions
Animation
PREVIEW
LORE
Chargement du bastion de Winterfell…
Preset widget, animation shimmer, maison Maison Stark.
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
PropTypeDefault
PROPS SYSTÈME
intent
Intent sémantique (informed/empowered/warned/threatened/themed/toned/glowed).
IntentDEFAULT_INTENT
variant
Variant visuel (flat/outlined/elevated/ghost).
VariantDEFAULT_VARIANT
tone
Override de tone (n’a d’effet que si intent='toned').
ToneDEFAULT_TONE (si toned)
toneStep
Step Tailwind (50..950) pour éclaircir/assombrir les teintes (autour du step canonique 500).
ToneStepDEFAULT_TONE_STEP
glow
Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed').
boolean | Glowfalse (ou glow par intent)
intensity
Intensité (soft/medium/strong).
IntensityDEFAULT_INTENSITY
mode
Mode colorimétrique (dark/light).
ModeDEFAULT_MODE
disabled
Désactive l’état visuel (hooks + styles).
booleanfalse
PROPS LOCALES
as
Élément HTML rendu.
T extends React.ElementTypediv
className
Classes CSS additionnelles.
string—
fullWidth / padded / bleed / radius / minHeight
Props de layout de la surface skeleton.
boolean | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | number | string—
preset
Preset d’anatomie: generic, widget, card ou panel.
"generic" | "widget" | "card" | "panel"generic
header / footer / divider / headerAlign
Structure principale de la surface.
boolean | "start" | "center"—
leading / leadingShape / eyebrow / title / subtitle / badges / actions / meta
Anatomie du header skeleton.
boolean | number | "circle" | "square" | "rounded"—
lines / lineWidths / paragraph / stats / statsColumns / cards / cardsColumns / chart / media / mediaHeight
Anatomie du body skeleton.
number | boolean | array | "1" | "2" | "3" | "4"—
footerLines / footerActions
Anatomie du footer skeleton.
number—
compact / dense
Réduit les dimensions et espacements internes.
booleanfalse
animated / animation
Animation du placeholder.
boolean | "shimmer" | "pulse" | "none"true / "shimmer"
label / aria-label
Label accessibilité pour le skeleton.
stringChargement…
headerSlot / bodySlot / footerSlot
Slots custom pour remplacer les zones skeleton.
React.ReactNode—
(native props)
Props natives du tag rendu.
React.ComponentPropsWithoutRef<T>—
TYPES & CONSTANTES
APIValeur / 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