Intent Design System

COMPONENT

🧭

IntentControlNavList

Navigation verticale intent-first (style sidebar) avec items stylés via resolveIntent().

🕹️ ControlSince v0.2.8

PREVIEW

Navigation

Teste ↑/↓, Home/End, et le typeahead.

CONTENT

Active: overview

Ici tu peux render ta vraie page et utiliser le NavList comme sidebar.

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
itemsrequis Liste des entrées (label, icon, meta, href, disabled, onSelect…).	IntentControlNavListItem[]	—
value / defaultValue / onValueChange Contrôle de l’élément actif (controlled/uncontrolled).	string / string / (id:string)=>void	—
readOnly Lecture seule: focusable mais pas d’activation.	boolean	false
size / density / fullWidth Taille, densité et largeur du wrapper.	"xs"\|"sm"\|"md"\|"lg" / "compact"\|"comfortable" / boolean	md / comfortable / true
header / footer / divider Slots optionnels dans le wrapper + séparateurs.	React.ReactNode / React.ReactNode / boolean	—
activeItem / inactiveItem Overrides intent/tone/variant/glow pour items actifs/inactifs.	Partial<IntentInput>	—
itemGlow Autorise les glow layers sur les items (si glow résolu).	boolean	false
preventLinkNavigation Empêche la navigation automatique des items href (tu gères).	boolean	false
(native props) Props natives du div (id, style, aria-, data-…).	Omit<React.HTMLAttributes<HTMLDivElement>, 'className' \| 'children' \| 'onChange'>	—

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