e95075d92c
Empty states enhanced: - EmptyState component gains variant prop (default/centered/card) - Soft entry animation (fade + scale) via new CSS keyframe - Icon wrapped in muted background circle - Library: "Your library is empty" + "Upload Track" action - Search: "No results found" + improved description - Wishlist: "Explore the marketplace" + Browse button - Queue: "Nothing in your queue" with autoplay context - Chat: improved no-conversation and no-messages states Focus ring consistency (6 files fixed): - input.tsx: ring-primary/30 → ring-ring + ring-offset - checkbox.tsx: peer-focus → peer-focus-visible + ring-ring - textarea.tsx: focus:ring-1 → focus-visible:ring-2 + ring-ring - List.tsx: added ring-offset-background - TrackListRow.tsx: full focus-visible on rows + action buttons - PlaylistCard.tsx: focus-visible on checkbox button 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-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-[100px] resize-y',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
{error && <p className="mt-1 text-xs text-destructive">{error}</p>}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
Textarea.displayName = 'Textarea';
|
|
|
|
export { Textarea };
|