@dsfrkit/react 0.1.0

package/src/components/ui/button.tsx

@@ -0,0 +1,160 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+/**
+ * Variants du bouton DSFR
+ * Conforme au design system : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton
+ */
+const buttonVariants = cva(
+  // Classes de base - DSFR n'utilise pas de border-radius
+  'inline-flex items-center justify-center gap-2 font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:bg-background-contrast disabled:text-foreground-disabled disabled:shadow-none',
+  {
+    variants: {
+      variant: {
+        // Bouton primaire - fond bleu france
+        primary:
+          'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',
+        // Bouton secondaire DSFR - bordure bleu france, fond transparent, survol fond bleu très clair
+        secondary:
+          'bg-transparent text-primary shadow-[inset_0_0_0_1px_currentColor] hover:bg-background-open-blue-france active:bg-background-open-blue-france/80',
+        // Bouton tertiaire DSFR - bordure grise, fond transparent
+        tertiary:
+          'bg-transparent text-primary shadow-sm ring-1 ring-inset ring-border hover:bg-background-contrast active:bg-background-contrast/80',
+        // Bouton tertiaire sans contour (ghost) - sans bordure
+        ghost: 'bg-transparent text-primary hover:bg-muted active:bg-background-contrast',
+        // Variantes sémantiques
+        destructive: 'bg-destructive text-foreground-inverted hover:opacity-90 active:opacity-80',
+        danger: 'bg-destructive text-foreground-inverted hover:opacity-90 active:opacity-80',
+        success: 'bg-success text-foreground-inverted hover:opacity-90 active:opacity-80',
+        warning: 'bg-warning text-foreground-inverted hover:opacity-90 active:opacity-80',
+        // Bouton lien
+        link: 'bg-transparent text-primary underline underline-offset-4 hover:text-primary-hover',
+      },
+      size: {
+        // Tailles DSFR officielles
+        sm: 'min-h-8 py-1 px-3 text-sm leading-6',
+        md: 'min-h-10 py-2 px-4 text-base leading-6',
+        lg: 'min-h-12 py-3 px-6 text-lg leading-6',
+      },
+      fullWidth: {
+        true: 'w-full flex',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+      fullWidth: false,
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /**
+   * Si true, rend le composant enfant au lieu d'un bouton
+   * Utile pour l'intégration avec les routeurs (Next.js, React Router, etc.)
+   */
+  asChild?: boolean
+  /**
+   * L'icône à afficher dans le bouton (ex: `<RemixIcon />`)
+   */
+  icon?: React.ReactNode
+  /**
+   * La position de l'icône ('start' ou 'end'). Par défaut: 'start'
+   */
+  iconPosition?: 'start' | 'end'
+  /**
+   * Si true, affiche un spinner de chargement et désactive le bouton
+   */
+  loading?: boolean
+}
+
+/**
+ * Composant Button DSFR
+ */
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      fullWidth,
+      asChild = false,
+      icon,
+      iconPosition = 'start',
+      loading = false,
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isActuallyDisabled = disabled || loading
+
+    const actualIcon = loading ? (
+      <svg
+        className="animate-spin h-5 w-5 text-current"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    ) : (
+      icon
+    )
+
+    if (asChild) {
+      return (
+        <Slot
+          className={cn(buttonVariants({ variant, size, fullWidth, className }))}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </Slot>
+      )
+    }
+
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, fullWidth, className }))}
+        ref={ref}
+        disabled={isActuallyDisabled}
+        {...props}
+      >
+        {actualIcon && iconPosition === 'start' && (
+          <span className="flex-shrink-0 flex items-center justify-center" aria-hidden="true">
+            {actualIcon}
+          </span>
+        )}
+        {children}
+        {actualIcon && iconPosition === 'end' && (
+          <span className="flex-shrink-0 flex items-center justify-center" aria-hidden="true">
+            {actualIcon}
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

package/src/components/ui/calendar.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import type * as React from 'react'
+import { DayPicker } from 'react-day-picker'
+import { cn } from '../../lib/utils'
+import { buttonVariants } from './button'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+/**
+ * Composant de calendrier interactif basé sur react-day-picker v9.
+ * Conçu pour s'intégrer harmonieusement avec le DSFR et les DatePickers complexes.
+ */
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('relative p-3 w-fit', className)}
+      classNames={{
+        root: '',
+        months: 'flex flex-col sm:flex-row space-y-2 sm:space-y-0',
+        month: 'space-y-2',
+        month_caption: 'flex justify-center items-center h-8 mb-2',
+        caption_label:
+          'flex items-center gap-1 text-sm font-bold text-foreground-title rdp-caption_label',
+        nav: 'flex items-center justify-between absolute inset-x-0 top-3 z-10 h-8 px-1',
+        button_previous: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 flex items-center justify-center'
+        ),
+        button_next: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 flex items-center justify-center'
+        ),
+        month_grid: 'w-full border-collapse',
+        weekdays: 'flex',
+        weekday: 'text-foreground-muted w-9 font-normal text-[0.8rem] text-center',
+        week: 'flex w-full mt-1',
+        day: cn(
+          'h-9 w-9 p-0 text-center text-sm relative group',
+          'focus-within:relative focus-within:z-20'
+        ),
+        day_button: cn(
+          'inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:bg-background-contrast disabled:opacity-50',
+          'bg-transparent hover:bg-background-open-blue-france active:bg-background-open-blue-france/80',
+          'h-9 w-9 p-0 font-normal rounded-md',
+          'aria-selected:bg-primary aria-selected:text-primary-foreground aria-selected:hover:bg-primary-hover aria-selected:active:bg-primary-active aria-selected:font-bold'
+        ),
+        selected: 'bg-background-contrast font-bold text-primary',
+        today: 'bg-background-contrast font-bold text-primary',
+        outside:
+          'text-foreground-muted opacity-50 aria-selected:bg-background-open-blue-france/50 aria-selected:text-foreground-muted aria-selected:opacity-30',
+        disabled: 'text-foreground-muted opacity-50',
+        hidden: 'invisible',
+        range_middle:
+          '!bg-background-open-blue-france !text-primary rounded-none hover:!bg-background-open-blue-france/80 aria-selected:!bg-background-open-blue-france aria-selected:!text-primary',
+        range_end: 'rounded-r-md rounded-l-none',
+        range_start: 'rounded-l-md rounded-r-none',
+        dropdowns: 'flex items-center justify-center gap-2 rdp-dropdowns z-20',
+        dropdown_root:
+          'relative inline-flex items-center gap-1 font-bold text-sm text-foreground-title hover:text-primary [&_select]:absolute [&_select]:inset-0 [&_select]:w-full [&_select]:h-full [&_select]:opacity-0 [&_select]:cursor-pointer [&_select]:z-10',
+        dropdown: 'flex items-center',
+        months_dropdown: '',
+        years_dropdown: '',
+        dropdown_icon: 'h-4 w-4 opacity-50 shrink-0',
+        ...classNames,
+      }}
+      components={{
+        Chevron: (chevronProps) => {
+          if (chevronProps.orientation === 'left') {
+            return (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4"
+              >
+                <path d="m15 18-6-6 6-6" />
+              </svg>
+            )
+          }
+          if (chevronProps.orientation === 'down') {
+            return (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            )
+          }
+          if (chevronProps.orientation === 'up') {
+            return (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4"
+              >
+                <path d="m18 15-6-6-6 6" />
+              </svg>
+            )
+          }
+          return (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-4 w-4"
+            >
+              <path d="m9 18 6-6-6-6" />
+            </svg>
+          )
+        },
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'
+
+export { Calendar }
+
+/**
+ * @example
+ * ```tsx
+ * <Calendar mode="single" selected={date} onSelect={setDate} />
+ * ```
+ */

package/src/components/ui/callout.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { Callout } from './callout'
+
+describe('Component: Callout (DSFR)', () => {
+  it('should render a callout with a properly structured h3 title by default', () => {
+    render(<Callout title="A noter">Les inscriptions se terminent ce soir.</Callout>)
+
+    const titleObj = screen.getByRole('heading', { level: 3, name: 'A noter' })
+    expect(titleObj).toBeInTheDocument()
+    expect(screen.getByText('Les inscriptions se terminent ce soir.')).toBeInTheDocument()
+  })
+
+  it('should respect semantic DOM modifications through titleMarkup', () => {
+    render(
+      <Callout title="Attention" titleMarkup="h2">
+        Alerte enlèvement
+      </Callout>
+    )
+
+    // Check if the title is actually rendered as an H2
+    const h2Title = screen.getByRole('heading', { level: 2, name: 'Attention' })
+    expect(h2Title).toBeInTheDocument()
+  })
+
+  it('should inject actionable content at the bottom', () => {
+    render(<Callout action={<button type="button">S'inscrire</button>}>Rejoignez-nous!</Callout>)
+    expect(screen.getByRole('button', { name: "S'inscrire" })).toBeInTheDocument()
+  })
+
+  it('should map the specific DSFR styling for info variant', () => {
+    const { container } = render(<Callout accent="info">Information</Callout>)
+    // Inspect the outer div
+    expect(container.firstChild).toHaveClass('border-l-info', 'bg-info-background')
+  })
+})

package/src/components/ui/callout.tsx

@@ -0,0 +1,131 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+/**
+ * Composant Callout DSFR ("Mise en avant")
+ * Conforme au design system : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant
+ *
+ * Bloc de mise en avant avec bordure gauche épaisse colorée et fond adaptatif.
+ * Utilisé pour mettre en valeur une information clé.
+ */
+
+const calloutVariants = cva(
+  // Base DSFR : bordure gauche épaisse (4px), pas de border-radius, fond adaptatif
+  'relative w-full border-l-[4px] transition-colors',
+  {
+    variants: {
+      accent: {
+        // Default : bordure bleue france, fond alt
+        default: 'bg-muted border-l-primary text-foreground',
+        // Statuts
+        info: 'bg-info-background border-l-info text-info',
+        success: 'bg-success-background border-l-success text-success',
+        warning: 'bg-warning-background border-l-warning text-warning',
+        error: 'bg-destructive-background border-l-destructive text-destructive',
+        // Accentuations DSFR
+        'green-tilleul-verveine':
+          'bg-[var(--background-contrast-green-tilleul-verveine)] border-l-[var(--border-default-green-tilleul-verveine)] text-[var(--text-label-green-tilleul-verveine)]',
+        'green-bourgeon':
+          'bg-[var(--background-contrast-green-bourgeon)] border-l-[var(--border-default-green-bourgeon)] text-[var(--text-label-green-bourgeon)]',
+        'green-emeraude':
+          'bg-[var(--background-contrast-green-emeraude)] border-l-[var(--border-default-green-emeraude)] text-[var(--text-label-green-emeraude)]',
+        'green-menthe':
+          'bg-[var(--background-contrast-green-menthe)] border-l-[var(--border-default-green-menthe)] text-[var(--text-label-green-menthe)]',
+        'green-archipel':
+          'bg-[var(--background-contrast-green-archipel)] border-l-[var(--border-default-green-archipel)] text-[var(--text-label-green-archipel)]',
+        'blue-ecume':
+          'bg-[var(--background-contrast-blue-ecume)] border-l-[var(--border-default-blue-ecume)] text-[var(--text-label-blue-ecume)]',
+        'blue-cumulus':
+          'bg-[var(--background-contrast-blue-cumulus)] border-l-[var(--border-default-blue-cumulus)] text-[var(--text-label-blue-cumulus)]',
+        'purple-glycine':
+          'bg-[var(--background-contrast-purple-glycine)] border-l-[var(--border-default-purple-glycine)] text-[var(--text-label-purple-glycine)]',
+        'pink-macaron':
+          'bg-[var(--background-contrast-pink-macaron)] border-l-[var(--border-default-pink-macaron)] text-[var(--text-label-pink-macaron)]',
+        'pink-tuile':
+          'bg-[var(--background-contrast-pink-tuile)] border-l-[var(--border-default-pink-tuile)] text-[var(--text-label-pink-tuile)]',
+        'yellow-tournesol':
+          'bg-[var(--background-contrast-yellow-tournesol)] border-l-[var(--border-default-yellow-tournesol)] text-[var(--text-label-yellow-tournesol)]',
+        'yellow-moutarde':
+          'bg-[var(--background-contrast-yellow-moutarde)] border-l-[var(--border-default-yellow-moutarde)] text-[var(--text-label-yellow-moutarde)]',
+        'orange-terre-battue':
+          'bg-[var(--background-contrast-orange-terre-battue)] border-l-[var(--border-default-orange-terre-battue)] text-[var(--text-label-orange-terre-battue)]',
+        'brown-cafe-creme':
+          'bg-[var(--background-contrast-brown-cafe-creme)] border-l-[var(--border-default-brown-cafe-creme)] text-[var(--text-label-brown-cafe-creme)]',
+        'brown-caramel':
+          'bg-[var(--background-contrast-brown-caramel)] border-l-[var(--border-default-brown-caramel)] text-[var(--text-label-brown-caramel)]',
+        'brown-opera':
+          'bg-[var(--background-contrast-brown-opera)] border-l-[var(--border-default-brown-opera)] text-[var(--text-label-brown-opera)]',
+        'beige-gris-galet':
+          'bg-[var(--background-contrast-beige-gris-galet)] border-l-[var(--border-default-beige-gris-galet)] text-[var(--text-label-beige-gris-galet)]',
+      },
+      size: {
+        sm: 'px-3 py-3 text-sm',
+        md: 'px-4 py-4 text-base',
+        lg: 'px-5 py-5 text-lg',
+      },
+    },
+    defaultVariants: {
+      accent: 'default',
+      size: 'md',
+    },
+  }
+)
+
+export interface CalloutProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof calloutVariants> {
+  /** Titre optionnel affiché en gras au-dessus du contenu */
+  title?: React.ReactNode
+  /**
+   * Niveau sémantique du titre.
+   * Modifie la balise générée (h2-h6, p, div, span) tout en gardant l'apparence visuelle.
+   * @default "h3"
+   */
+  titleMarkup?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'
+  /** Icône optionnelle à afficher avant le titre */
+  icon?: React.ReactNode
+  /** Composant optionnel de bouton d'action affiché en bas de la mise en avant */
+  action?: React.ReactNode
+}
+
+const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
+  (
+    { className, accent, size, title, titleMarkup = 'h3', icon, action, children, ...props },
+    ref
+  ) => {
+    const TitleTag = titleMarkup
+
+    return (
+      <div ref={ref} className={cn(calloutVariants({ accent, size }), className)} {...props}>
+        {(icon || title) && (
+          <div className="flex items-start gap-2 mb-2">
+            {icon && (
+              <span className="mt-0.5 shrink-0 text-current" aria-hidden="true">
+                {icon}
+              </span>
+            )}
+            {title && (
+              <TitleTag className="font-bold text-[1.125em] leading-snug m-0">{title}</TitleTag>
+            )}
+          </div>
+        )}
+        {children && <div className="mt-1">{children}</div>}
+        {action && <div className="mt-4">{action}</div>}
+      </div>
+    )
+  }
+)
+
+Callout.displayName = 'Callout'
+
+export { Callout, calloutVariants }
+
+/**
+ * @example
+ * ```tsx
+ * <Callout title="Attention">
+ *   Ceci est une information importante.
+ * </Callout>
+ * ```
+ */

package/src/components/ui/card.tsx

@@ -0,0 +1,151 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+/**
+ * Variants de la carte DSFR
+ * Conforme au design system : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte
+ *
+ * Les cartes DSFR n'ont pas de border-radius et utilisent des bordures fines
+ */
+const cardVariants = cva(
+  // Base DSFR : pas de border-radius, fond adaptatif au thème, flex column
+  'flex flex-col relative bg-background transition-colors',
+  {
+    variants: {
+      variant: {
+        // Default : bordure grise fine sur tous les côtés
+        default: 'border border-border',
+        // Bordered : bordure bleue
+        bordered: 'border-2 border-primary',
+        // Shadow : avec ombre portée
+        shadow: 'shadow-md hover:shadow-lg border border-border',
+        // Ghost : sans bordure
+        ghost: 'border-transparent',
+        // Outlined : bordure simple sans hover
+        outlined: 'border border-border',
+      },
+      size: {
+        sm: '',
+        md: '',
+        lg: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+)
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+/**
+ * Composant Card DSFR
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Titre de la carte</CardTitle>
+ *     <CardDescription>Description de la carte</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     Contenu de la carte
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return <div ref={ref} className={cn(cardVariants({ variant, size, className }))} {...props} />
+  }
+)
+
+Card.displayName = 'Card'
+
+/**
+ * En-tête de carte DSFR (pour l'image ou les badges, et très souvent les titres/descriptions)
+ */
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('relative flex-shrink-0 flex flex-col gap-1 px-6 pt-6', className)}
+      {...props}
+    />
+  )
+)
+CardHeader.displayName = 'CardHeader'
+
+/**
+ * Corps de carte DSFR
+ * Conforme DSFR : padding latéral 16px, vertical 16px haut / 32px bas
+ */
+const CardBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col flex-1 px-6 pt-2 pb-8', className)} {...props} />
+  )
+)
+CardBody.displayName = 'CardBody'
+
+/**
+ * Titre de carte DSFR
+ */
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-lg font-bold leading-6 text-foreground-title', className)}
+      {...props}
+    />
+  )
+)
+CardTitle.displayName = 'CardTitle'
+
+/**
+ * Description de carte DSFR
+ */
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm leading-6 text-foreground', className)} {...props} />
+))
+CardDescription.displayName = 'CardDescription'
+
+/**
+ * Contenu de carte DSFR (alias de CardBody pour compatibilité)
+ */
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col flex-1 px-4 pt-4 pb-8', className)} {...props} />
+  )
+)
+CardContent.displayName = 'CardContent'
+
+/**
+ * Pied de carte DSFR — aligné sur le bas du body avec le bon padding
+ */
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center gap-4 px-4 pb-4', className)} {...props} />
+  )
+)
+CardFooter.displayName = 'CardFooter'
+
+export {
+  Card,
+  CardBody,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  cardVariants,
+}

package/src/components/ui/checkbox.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { Checkbox } from './checkbox'
+
+describe('Component: Checkbox (DSFR/Radix)', () => {
+  it('should guarantee base accessibility (id, labels linking)', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Checkbox label="Je déclare avoir lu les conditions" hint="Obligatoire pour poursuivre" />
+    )
+
+    // Radix Checkbox defines its role
+    const checkbox = screen.getByRole('checkbox', { name: 'Je déclare avoir lu les conditions' })
+    expect(checkbox).toBeInTheDocument()
+    expect(checkbox).not.toBeChecked()
+
+    // Test clicking the label triggers the checkbox
+    const label = screen.getByText('Je déclare avoir lu les conditions')
+    await user.click(label)
+
+    expect(checkbox).toBeChecked()
+
+    // Test hint presence
+    expect(screen.getByText('Obligatoire pour poursuivre')).toBeInTheDocument()
+  })
+
+  it('should strictly tie aria-invalid when an error is flagged', () => {
+    render(<Checkbox label="Acceptation GCG" error="Vous devez accepter pour continuer" />)
+
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true')
+
+    const errorMessage = screen.getByText('Vous devez accepter pour continuer')
+    expect(errorMessage).toHaveClass('text-error')
+  })
+})