Intent Design System

COMPONENT

IntentCommandPalette

Palette de commandes intent-first (overlay + recherche + liste). Navigation clavier et sélection rapide.

🧱 SurfaceSince v0.2.0

DESIGN SYSTEM

mode

Intent

Variant

Glow

Intensity

State

disabled

PLAYGROUND

Open

open

Astuce: utilise ⌘/Ctrl K si hotkey activé.

Hotkey

enableGlobalHotkey

Behavior

closeOnSelect

Copy

Data

showFooteruseIconsaddDisabledItems

Selection log

Aucune sélection pour l’instant.

PREVIEW

Raccourci: ⌘/Ctrl K

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
className Classes CSS additionnelles sur le root.	string	—
open Contrôle l’ouverture (mode contrôlé).	boolean	—
defaultOpen Ouverture par défaut (mode non-contrôlé).	boolean	false
onOpenChange Callback d’ouverture/fermeture.	(open: boolean) => void	—
groupsrequis Groupes d’actions (items).	IntentCommandPaletteGroup[]	—
query Recherche contrôlée.	string	—
defaultQuery Recherche par défaut (non-contrôlé).	string	—
onQueryChange Callback de recherche.	(query: string) => void	—
placeholder Placeholder du champ recherche.	string	Search…
closeOnSelect Ferme à la sélection.	boolean	true
emptyLabel Affichage quand aucun résultat.	React.ReactNode	No results
footer Zone footer (hints, shortcuts...).	React.ReactNode	—
enableGlobalHotkey Active le raccourci global.	boolean	true
hotkey Raccourci global.	"mod+k" \| "mod+p"	mod+k
(native props) Props natives sur le root.	Omit<React.HTMLAttributes<HTMLDivElement>, 'className' \| 'children'>	—

TYPES

IntentCommandPaletteItem

type

Une action affichée dans la palette (sélectionnable, filtrable, optionnellement désactivée).

Champ	Type	Req	Description
id	string	yes	Identifiant stable.
label	string	yes	Texte principal.
description	string		Texte secondaire.
keywords	string[]		Mots-clés additionnels pour la recherche.
leftIcon	React.ReactNode		Icône à gauche.
rightHint	string		Hint à droite (ex: "⌘↵").
disabled	boolean		Désactive la sélection.
onSelect	(item: IntentCommandPaletteItem) => void		Callback lors de la sélection.

Item simple

{
  id: "open-quest",
  label: "Ouvrir une quête",
  description: "Aller à la quête active",
  keywords: ["quest", "open"],
  rightHint: "Enter",
}

IntentCommandPaletteGroup

type

Un groupe d’items (optionnellement titré) rendu comme une section dans la liste.

Champ	Type	Req	Description
id	string	yes	Identifiant stable du groupe.
label	string		Titre du groupe (optionnel).
items	IntentCommandPaletteItem[]	yes	Liste d’items.

Groupe

{
  id: "navigation",
  label: "Navigation",
  items: [
    { id: "home", label: "Accueil" },
    { id: "adventure", label: "Aventure", rightHint: "⌘1" },
  ],
}

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