fa56dfa77e
- Replace all kodo-* color classes across ~100 TSX files: kodo-void → background, kodo-ink → card, kodo-graphite → muted, kodo-steel → muted-foreground, kodo-cyan → primary, kodo-magenta → destructive, kodo-lime → success, kodo-red → destructive, kodo-gold → warning - Replace cyan-500, magenta-500, lime-500 default Tailwind colors with semantic equivalents (primary, destructive, success) - Fix WaveformVisualizer hardcoded hex colors to SUMI values - Delete global-effects.css (conflicting, redundant with index.css) Co-authored-by: Cursor <cursoragent@cursor.com>
104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* TextareaProps - Propriétés du composant Textarea
|
|
*
|
|
* @interface TextareaProps
|
|
* @extends React.TextareaHTMLAttributes<HTMLTextAreaElement>
|
|
*/
|
|
export interface TextareaProps
|
|
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
/**
|
|
* Label à afficher au-dessus du champ de texte
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <Textarea label="Description" />
|
|
* ```
|
|
*/
|
|
label?: string;
|
|
|
|
/**
|
|
* Message d'erreur à afficher sous le champ
|
|
* Si fourni, la bordure devient rouge et le message s'affiche
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <Textarea
|
|
* error={errors.description}
|
|
* label="Description"
|
|
* />
|
|
* ```
|
|
*/
|
|
error?: string;
|
|
}
|
|
|
|
/**
|
|
* Textarea - Composant de zone de texte avec design system Kodo
|
|
*
|
|
* Composant de zone de texte multiligne avec support pour les labels et les messages d'erreur.
|
|
* Utilise le design system Kodo avec des styles cohérents et une hauteur minimale de 100px.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // Textarea simple
|
|
* <Textarea placeholder="Entrez votre message..." />
|
|
*
|
|
* // Textarea avec label
|
|
* <Textarea label="Description" placeholder="Décrivez..." />
|
|
*
|
|
* // Textarea avec validation d'erreur
|
|
* <Textarea
|
|
* label="Commentaire"
|
|
* error={errors.comment}
|
|
* value={comment}
|
|
* onChange={(e) => setComment(e.target.value)}
|
|
* />
|
|
*
|
|
* // Textarea contrôlée
|
|
* <Textarea
|
|
* value={value}
|
|
* onChange={(e) => setValue(e.target.value)}
|
|
* rows={5}
|
|
* />
|
|
* ```
|
|
*
|
|
* @component
|
|
* @param {TextareaProps} props - Propriétés du composant
|
|
* @returns {JSX.Element} Élément textarea stylisé avec label et erreur optionnels
|
|
*/
|
|
|
|
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
({ label, error, className, ...props }, ref) => {
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label className="block text-sm font-medium text-muted-foreground mb-2 font-body">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<textarea
|
|
ref={ref}
|
|
className={cn(
|
|
'w-full px-4 py-4',
|
|
'bg-muted border',
|
|
error ? 'border-destructive' : 'border-border',
|
|
'text-white placeholder-gray-500',
|
|
'font-body text-base',
|
|
'rounded-lg',
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
|
|
'transition-all duration-[var(--duration-fast)]',
|
|
'min-h-24 resize-y',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
{error && <p className="mt-1 text-xs text-destructive">{error}</p>}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
Textarea.displayName = 'Textarea';
|
|
|
|
export { Textarea };
|