@dsfrkit/react 0.1.0

package/src/components/ui/input-otp.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { OTPInput, OTPInputContext } from 'input-otp'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      containerClassName
+    )}
+    className={cn('disabled:cursor-not-allowed', className)}
+    {...props}
+  />
+))
+InputOTP.displayName = 'InputOTP'
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+))
+InputOTPGroup.displayName = 'InputOTPGroup'
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-border text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-2 ring-primary ring-offset-background border-primary',
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-primary duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+  // biome-ignore lint/a11y/useFocusableInteractive: le séparateur est décoratif, géré par la bibliothèque input-otp
+  // biome-ignore lint/a11y/useSemanticElements: role="separator" requis par l'API de la bibliothèque input-otp
+  // biome-ignore lint/a11y/useAriaPropsForRole: composant totalement décoratif
+  <div ref={ref} role="separator" {...props}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+    >
+      <path d="M5 12h14" />
+    </svg>
+  </div>
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }

package/src/components/ui/input.tsx

@@ -0,0 +1,508 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+/**
+ * Variants de l'input DSFR
+ * Conforme au design system : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie
+ *
+ * L'input DSFR a un border-radius en haut seulement et une bordure inférieure épaisse
+ */
+const inputVariants = cva(
+  // Base DSFR : border-radius en haut, fond adaptatif, bordure inférieure
+  'flex w-full rounded-t border-0 text-base leading-6 transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground placeholder:italic focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        // Default : fond adaptatif, bordure inférieure grise
+        default:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.border-contrast)] focus:shadow-[inset_0_-2px_0_0_theme(colors.ring)]',
+        // Error : bordure inférieure rouge
+        error:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.destructive.DEFAULT)] focus:shadow-[inset_0_-2px_0_0_theme(colors.destructive.DEFAULT)]',
+        // Success : bordure inférieure verte
+        success:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.success.DEFAULT)] focus:shadow-[inset_0_-2px_0_0_theme(colors.success.DEFAULT)]',
+        // Info : bordure inférieure bleue
+        info:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.info.DEFAULT)] focus:shadow-[inset_0_-2px_0_0_theme(colors.info.DEFAULT)]',
+        // Warning : bordure inférieure orange
+        warning:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.warning.DEFAULT)] focus:shadow-[inset_0_-2px_0_0_theme(colors.warning.DEFAULT)]',
+      },
+      inputSize: {
+        // SM : hauteur 32px
+        sm: 'h-8 px-4 py-1 text-sm',
+        // MD : hauteur 40px (défaut DSFR)
+        md: 'h-10 px-4 py-2',
+        // LG : hauteur 48px
+        lg: 'h-12 px-4 py-3 text-lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      inputSize: 'md',
+    },
+  }
+)
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  label?: string
+  error?: string
+  success?: string
+  info?: string
+  warning?: string
+  hint?: string
+  /** Icône à afficher dans le champ */
+  icon?: React.ReactNode
+  /** Élément d'action (ex: bouton) à afficher dans le champ */
+  addon?: React.ReactNode
+  /** Bouton d'action à accoler au champ de saisie (supprime l'arrondi de jonction) */
+  action?: React.ReactNode
+  /** Position de l'icône ou de l'addon ('start' par défaut, 'end' inversera) */
+  position?: 'start' | 'end'
+}
+
+import { ErrorIcon, EyeIcon, EyeOffIcon, InfoIcon, SuccessIcon, WarningIcon } from '@dsfrkit/icons'
+
+/**
+ * Composant Input DSFR
+ *
+ * @example
+ * ```tsx
+ * // Avec icône
+ * <Input
+ *   label="Rechercher un utilisateur"
+ *   icon={<SearchIcon />}
+ *   position="start"
+ * />
+ *
+ * // Avec bouton d'action
+ * <Input
+ *   label="Nom de domaine"
+ *   addon={<Button variant="ghost">Vérifier</Button>}
+ *   position="end"
+ * />
+ * ```
+ */
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      variant,
+      inputSize,
+      label,
+      error,
+      success,
+      info,
+      warning,
+      hint,
+      icon,
+      addon,
+      action,
+      position = 'end',
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId()
+    const inputId = id || generatedId
+    const inputOrGeneratedId = inputId
+    const errorId = `${inputOrGeneratedId}-error`
+    const successId = `${inputOrGeneratedId}-success`
+    const infoId = `${inputOrGeneratedId}-info`
+    const warningId = `${inputOrGeneratedId}-warning`
+    const hintId = `${inputOrGeneratedId}-hint`
+
+    // Calcul du padding nécessaire pour éviter le chevauchement du texte
+    // Padding par défaut (cva) : px-4
+    const hasElementAtStart = position === 'start' && (icon || addon)
+    const hasElementAtEnd = position === 'end' && (icon || addon)
+
+    const isError = !!error
+    const isSuccess = !!success && !isError
+    const isWarning = !!warning && !isError && !isSuccess
+    const isInfo = !!info && !isError && !isSuccess && !isWarning
+
+    const inputStateVariant = isError ? 'error' : isSuccess ? 'success' : isWarning ? 'warning' : isInfo ? 'info' : variant
+
+    return (
+      <div
+        className={cn(
+          'w-full space-y-2 relative transition-colors',
+          (isError || isSuccess || isWarning || isInfo) && 'pl-4 -ml-[18px] border-l-2',
+          isError ? 'border-l-destructive' : isSuccess ? 'border-l-success' : isWarning ? 'border-l-warning' : isInfo ? 'border-l-info' : ''
+        )}
+      >
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium text-foreground">
+            {label}
+            {props.required && <span className="text-error ml-1">*</span>}
+          </label>
+        )}
+
+        {hint && !isError && !isSuccess && !isWarning && !isInfo && (
+          <p id={hintId} className="text-sm text-muted-foreground">
+            {hint}
+          </p>
+        )}
+
+        <div className={cn('flex items-stretch', action ? 'flex-row' : 'flex-col')}>
+          {action && position === 'start' && (
+            <div className="flex-none [&>button]:h-full [&>button]:rounded-r-none [&>button]:border-r-0">
+              {action}
+            </div>
+          )}
+
+          <div className="relative flex items-center flex-1">
+            {hasElementAtStart && (
+              <div
+                className={cn(
+                  'absolute left-3 flex h-full items-center justify-center',
+                  icon ? 'pointer-events-none text-muted-foreground' : 'pointer-events-auto'
+                )}
+              >
+                {icon || addon}
+              </div>
+            )}
+
+            <input
+              id={inputId}
+              className={cn(
+                inputVariants({ variant: inputStateVariant, inputSize, className }),
+                hasElementAtStart && 'pl-10',
+                hasElementAtEnd && 'pr-10',
+                action && position === 'start' && 'rounded-tl-none',
+                action && (!position || position === 'end') && 'rounded-tr-none'
+              )}
+              ref={ref}
+              aria-invalid={isError ? 'true' : 'false'}
+              aria-describedby={
+                isError ? errorId : isSuccess ? successId : isWarning ? warningId : isInfo ? infoId : hint ? hintId : undefined
+              }
+              {...props}
+            />
+
+            {hasElementAtEnd && (
+              <div
+                className={cn(
+                  'absolute right-3 flex h-full items-center justify-center',
+                  icon ? 'pointer-events-none text-muted-foreground' : 'pointer-events-auto'
+                )}
+              >
+                {icon || addon}
+              </div>
+            )}
+          </div>
+
+          {action && (!position || position === 'end') && (
+            <div className="flex-none [&>button]:h-full [&>button]:rounded-l-none [&>button]:border-l-0">
+              {action}
+            </div>
+          )}
+        </div>
+
+        {isError && (
+          <p id={errorId} className="text-sm text-error font-medium flex items-center space-x-1">
+            <ErrorIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{error}</span>
+          </p>
+        )}
+
+        {isSuccess && (
+          <p
+            id={successId}
+            className="text-sm text-success font-medium flex items-center space-x-1"
+          >
+            <SuccessIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{success}</span>
+          </p>
+        )}
+
+        {isWarning && (
+          <p
+            id={warningId}
+            className="text-sm text-warning font-medium flex items-center space-x-1"
+          >
+            <WarningIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{warning}</span>
+          </p>
+        )}
+
+        {isInfo && (
+          <p
+            id={infoId}
+            className="text-sm text-info font-medium flex items-center space-x-1"
+          >
+            <InfoIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{info}</span>
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Input.displayName = 'Input'
+
+/**
+ * Composant Textarea DSFR
+ * Même style que l'input avec border-radius en haut et bordure inférieure
+ */
+const textareaVariants = cva(
+  // Base DSFR : border-radius en haut, fond adaptatif, bordure inférieure
+  'flex min-h-[120px] w-full rounded-t border-0 text-base leading-6 transition-colors placeholder:text-muted-foreground placeholder:italic focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 resize-y',
+  {
+    variants: {
+      variant: {
+        // Default : fond adaptatif, bordure inférieure grise
+        default:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.border-contrast)] focus:shadow-[inset_0_-2px_0_0_theme(colors.ring)]',
+        // Error : bordure inférieure rouge
+        error:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.destructive.DEFAULT)] focus:shadow-[inset_0_-2px_0_0_theme(colors.destructive.DEFAULT)]',
+        // Success : bordure inférieure verte
+        success:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.success.DEFAULT)] focus:shadow-[inset_0_-2px_0_0_theme(colors.success.DEFAULT)]',
+        // Info : bordure inférieure bleue
+        info:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.info.DEFAULT)] focus:shadow-[inset_0_-2px_0_0_theme(colors.info.DEFAULT)]',
+        // Warning : bordure inférieure orange
+        warning:
+          'bg-muted text-foreground shadow-[inset_0_-2px_0_0_theme(colors.warning.DEFAULT)] focus:shadow-[inset_0_-2px_0_0_theme(colors.warning.DEFAULT)]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    VariantProps<typeof textareaVariants> {
+  label?: string
+  error?: string
+  success?: string
+  info?: string
+  warning?: string
+  hint?: string
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, variant, label, error, success, info, warning, hint, id, ...props }, ref) => {
+    const generatedId = React.useId()
+    const textareaId = id || generatedId
+    const inputOrGeneratedId = textareaId
+    const errorId = `${inputOrGeneratedId}-error`
+    const successId = `${inputOrGeneratedId}-success`
+    const infoId = `${inputOrGeneratedId}-info`
+    const warningId = `${inputOrGeneratedId}-warning`
+    const hintId = `${inputOrGeneratedId}-hint`
+
+    const isError = !!error
+    const isSuccess = !!success && !isError
+    const isWarning = !!warning && !isError && !isSuccess
+    const isInfo = !!info && !isError && !isSuccess && !isWarning
+
+    const inputStateVariant = isError ? 'error' : isSuccess ? 'success' : isWarning ? 'warning' : isInfo ? 'info' : variant
+
+    return (
+      <div
+        className={cn(
+          'w-full space-y-2 relative transition-colors',
+          (isError || isSuccess || isWarning || isInfo) && 'pl-4 -ml-[18px] border-l-2',
+          isError ? 'border-l-destructive' : isSuccess ? 'border-l-success' : isWarning ? 'border-l-warning' : isInfo ? 'border-l-info' : ''
+        )}
+      >
+        {label && (
+          <label htmlFor={textareaId} className="block text-sm font-medium text-foreground">
+            {label}
+            {props.required && <span className="text-error ml-1">*</span>}
+          </label>
+        )}
+
+        {hint && !isError && !isSuccess && !isWarning && !isInfo && (
+          <p id={hintId} className="text-sm text-muted-foreground">
+            {hint}
+          </p>
+        )}
+
+        <textarea
+          id={textareaId}
+          className={cn(textareaVariants({ variant: inputStateVariant, className }), 'px-4 py-2')}
+          ref={ref}
+          aria-invalid={isError ? 'true' : 'false'}
+          aria-describedby={isError ? errorId : isSuccess ? successId : isWarning ? warningId : isInfo ? infoId : hint ? hintId : undefined}
+          {...props}
+        />
+
+        {isError && (
+          <p id={errorId} className="text-sm text-error font-medium flex items-center space-x-1">
+            <ErrorIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{error}</span>
+          </p>
+        )}
+
+        {isSuccess && (
+          <p
+            id={successId}
+            className="text-sm text-success font-medium flex items-center space-x-1"
+          >
+            <SuccessIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{success}</span>
+          </p>
+        )}
+
+        {isWarning && (
+          <p
+            id={warningId}
+            className="text-sm text-warning font-medium flex items-center space-x-1"
+          >
+            <WarningIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{warning}</span>
+          </p>
+        )}
+
+        {isInfo && (
+          <p
+            id={infoId}
+            className="text-sm text-info font-medium flex items-center space-x-1"
+          >
+            <InfoIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{info}</span>
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Textarea.displayName = 'Textarea'
+
+/**
+ * Composant PasswordInput DSFR
+ * Champ mot de passe avec bouton "Afficher/Masquer" intégré
+ */
+const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, inputSize, label, error, success, info, warning, hint, id, ...props }, ref) => {
+    const generatedId = React.useId()
+    const inputId = id || generatedId
+    const inputOrGeneratedId = inputId
+    const errorId = `${inputOrGeneratedId}-error`
+    const successId = `${inputOrGeneratedId}-success`
+    const infoId = `${inputOrGeneratedId}-info`
+    const warningId = `${inputOrGeneratedId}-warning`
+    const hintId = `${inputOrGeneratedId}-hint`
+    const [showPassword, setShowPassword] = React.useState(false)
+
+    const isError = !!error
+    const isSuccess = !!success && !isError
+    const isWarning = !!warning && !isError && !isSuccess
+    const isInfo = !!info && !isError && !isSuccess && !isWarning
+
+    const inputStateVariant = isError ? 'error' : isSuccess ? 'success' : isWarning ? 'warning' : isInfo ? 'info' : variant
+
+    return (
+      <div
+        className={cn(
+          'w-full space-y-2 relative transition-colors',
+          (isError || isSuccess || isWarning || isInfo) && 'pl-4 -ml-[18px] border-l-2',
+          isError ? 'border-l-destructive' : isSuccess ? 'border-l-success' : isWarning ? 'border-l-warning' : isInfo ? 'border-l-info' : ''
+        )}
+      >
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium text-foreground">
+            {label}
+            {props.required && <span className="text-error ml-1">*</span>}
+          </label>
+        )}
+
+        {hint && !isError && !isSuccess && !isWarning && !isInfo && (
+          <p id={hintId} className="text-sm text-muted-foreground">
+            {hint}
+          </p>
+        )}
+
+        <div className="relative">
+          <input
+            id={inputId}
+            type={showPassword ? 'text' : 'password'}
+            className={cn(
+              inputVariants({ variant: inputStateVariant, inputSize }),
+              'pr-24', // Padding for the button
+              className
+            )}
+            ref={ref}
+            aria-invalid={isError ? 'true' : 'false'}
+            aria-describedby={isError ? errorId : isSuccess ? successId : isWarning ? warningId : isInfo ? infoId : hint ? hintId : undefined}
+            {...props}
+          />
+          <button
+            type="button"
+            className="absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded-md text-primary hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => setShowPassword((prev) => !prev)}
+            aria-controls={inputId}
+            title={showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
+          >
+            <span className="sr-only">{showPassword ? 'Masquer' : 'Afficher'}</span>
+            {showPassword ? <EyeOffIcon className="w-5 h-5" /> : <EyeIcon className="w-5 h-5" />}
+          </button>
+        </div>
+
+        {isError && (
+          <p id={errorId} className="text-sm text-error font-medium flex items-center space-x-1">
+            <ErrorIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{error}</span>
+          </p>
+        )}
+
+        {isSuccess && (
+          <p
+            id={successId}
+            className="text-sm text-success font-medium flex items-center space-x-1"
+          >
+            <SuccessIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{success}</span>
+          </p>
+        )}
+
+        {isWarning && (
+          <p
+            id={warningId}
+            className="text-sm text-warning font-medium flex items-center space-x-1"
+          >
+            <WarningIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{warning}</span>
+          </p>
+        )}
+
+        {isInfo && (
+          <p
+            id={infoId}
+            className="text-sm text-info font-medium flex items-center space-x-1"
+          >
+            <InfoIcon className="w-4 h-4 shrink-0" aria-hidden="true" />
+            <span>{info}</span>
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+PasswordInput.displayName = 'PasswordInput'
+
+export { Input, inputVariants, PasswordInput, Textarea, textareaVariants }
+
+/**
+ * @example
+ * ```tsx
+ * <Input label="Nom" placeholder="Saisissez votre nom" />
+ * <Textarea label="Message" rows={4} />
+ * <PasswordInput label="Mot de passe" />
+ * ```
+ */

package/src/components/ui/kbd.tsx

@@ -0,0 +1,26 @@
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean
+}
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'kbd'
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          'pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100',
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Kbd.displayName = 'Kbd'
+
+export { Kbd }