COMPONENT
IntentControlTime
Contrôle de temps intent-first: input unique (natif ou texte) ou 2 inputs séparés (heure/minute) avec validation et paste.
🕹️ ControlSince v0.3.3
DESIGN SYSTEM
mode
Intent
Variant
Glow
Intensity
ToneStep
Référence canonique: 500.
State
PLAYGROUND
Layout
wrapInField=true démontre IntentControlField (control en mode insideField).
Size
Time mode
En split: teste paste 09:30, 9h30 ou 0930.
Validation
Value (HH:MM)
(Contrôlé) Ce champ pilote value.
Constraints (min/max)
Active pour tester le comportement navigateur en type=time.
Split labels (a11y)
hourLabel
minuteLabel
Field wrapper
field.label
field.hint
field.error
field.direction
Astuce: en split, teste tab/backspace entre champs, et paste pour remplir d’un coup.
PREVIEW
Saisis une heure valide. En split: tab, backspace et paste sont gérés.
mode=dark, timeMode= split, splitPart= all, variant= elevated, intent= informed, size= md, value= 09:30
Tip: en split, colle 09:30, 9h30 ou 0930 pour valider le parse.
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
timeMode
Mode: input unique ou inputs séparés.
"single" | "split"single
singleVariant
En mode single: natif (type=time) ou texte (type=text).
"native" | "text"native
splitPart
En mode split: "all" affiche heure+minute. "hour" | "minute" permet le mode solo (un seul champ).
"all" | "hour" | "minute"all
separator
Séparateur visuel entre inputs (split).
string:
value
Valeur (HH:MM).
string | null—
defaultValue
Valeur initiale si uncontrolled.
string | null—
onValueChange
Callback valeur (ou null) + meta (validité, parts…).
(value: string | null, meta: TimeChangeMeta) => void—
parts
Parts contrôlées (split, avancé).
{ hour?: string; minute?: string }—
defaultParts
Parts initiales (split, uncontrolled).
{ hour?: string; minute?: string }—
onPartsChange
Callback parts (split).
(parts: TimeParts) => void—
min / max
Bornes (HH:MM).
string—
insideField
Mode naked pour être wrappé par IntentControlField (le frame appartient au Field).
booleanfalse
size
Taille (hauteur/typo/padding si standalone).
"xs" | "sm" | "md" | "lg" | "xl"md
leading / trailing
Slots gauche/droite (standalone).
React.ReactNode—
invalid / readOnly
États invalid/readonly (hooks + aria).
booleanfalse
(native props)
Props natives d’input (name, placeholder, autoComplete…).
Omit<InputHTMLAttributes, ...>—
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