50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* LabelProps - Propriétés du composant Label
|
|
*
|
|
* @interface LabelProps
|
|
* @extends React.LabelHTMLAttributes<HTMLLabelElement>
|
|
*/
|
|
export interface LabelProps
|
|
extends React.LabelHTMLAttributes<HTMLLabelElement> {}
|
|
|
|
/**
|
|
* Label - Composant de label avec design system Kodo
|
|
*
|
|
* Composant de label pour associer du texte à des champs de formulaire.
|
|
* Utilise le design system Kodo avec des styles cohérents et support pour les états disabled.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // Label simple
|
|
* <Label htmlFor="email">Email</Label>
|
|
* <Input id="email" />
|
|
*
|
|
* // Label avec classe personnalisée
|
|
* <Label className="text-lg" htmlFor="name">
|
|
* Nom complet
|
|
* </Label>
|
|
* ```
|
|
*
|
|
* @component
|
|
* @param {LabelProps} props - Propriétés du composant (toutes les props HTML standard de label)
|
|
* @returns {JSX.Element} Élément label stylisé
|
|
*/
|
|
|
|
const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
|
|
({ className, ...props }, ref) => (
|
|
<label
|
|
ref={ref}
|
|
className={cn(
|
|
'text-sm font-medium leading-none text-kodo-content-dim peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
),
|
|
);
|
|
Label.displayName = 'Label';
|
|
|
|
export { Label };
|