47f325182a
Eliminate all remaining text-kodo-content-dim from user-facing source files. This legacy token (hardcoded Gray-400) is now fully replaced by the theme-aware text-muted-foreground token across UI primitives, settings, social features, playlists, modals, inventory, and admin views. Only story files (.stories.tsx) retain the old token for reference. Total migration: ~345 instances across 87 files (this + previous commit). 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-kodo-graphite border',
|
|
error ? 'border-kodo-red' : 'border-kodo-steel',
|
|
'text-white placeholder-gray-500',
|
|
'font-body text-base',
|
|
'rounded-lg',
|
|
'focus:outline-none focus:border-kodo-steel focus:ring-1 focus:ring-kodo-steel',
|
|
'transition-all duration-[var(--duration-fast)]',
|
|
'min-h-[100px] resize-y',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
{error && <p className="mt-1 text-xs text-kodo-red">{error}</p>}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
Textarea.displayName = 'Textarea';
|
|
|
|
export { Textarea };
|