@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-datetime-picker/index.tsx

@@ -0,0 +1,793 @@
+"use client"
+
+import * as React from "react"
+import DatePicker, { registerLocale } from "react-datepicker"
+import { 
+  format, 
+  parse,
+  startOfDay, 
+  endOfDay, 
+  startOfWeek, 
+  endOfWeek, 
+  startOfMonth, 
+  endOfMonth,
+  startOfYear,
+  endOfYear,
+  subDays, 
+  subWeeks, 
+  subMonths,
+  addDays,
+  addWeeks,
+  addMonths,
+  isAfter,
+  isBefore,
+  isEqual,
+  isWithinInterval,
+  setHours,
+  setMinutes,
+  setSeconds,
+  getHours,
+  getMinutes,
+  getSeconds,
+} from "date-fns"
+import { fr, enUS, es, de, it, pt, ja, zhCN } from "date-fns/locale"
+import { 
+  Calendar as CalendarIcon, 
+  Clock, 
+  X, 
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Plus,
+  Minus,
+  AlertCircle,
+  Info,
+} from "lucide-react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import { Input } from "../input"
+import { Label } from "../label"
+import { Popover, PopoverContent, PopoverTrigger } from "../popover"
+import { Badge } from "../badge"
+import { Separator } from "../separator"
+import { ScrollArea } from "../scroll-area"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip"
+import { useTranslation } from "../../hooks/use-translation"
+
+// Enregistrer les locales
+registerLocale('fr', fr)
+registerLocale('en', enUS)
+registerLocale('es', es)
+registerLocale('de', de)
+registerLocale('it', it)
+registerLocale('pt', pt)
+registerLocale('ja', ja)
+registerLocale('zh', zhCN)
+
+/**
+ * Configuration des presets de dates rapides
+ */
+export interface DatePreset {
+  label: string
+  value?: Date | (() => Date)
+  range?: { from: Date; to: Date } | (() => { from: Date; to: Date })
+}
+
+/**
+ * Configuration de validation
+ */
+export interface DateValidation {
+  /** Validation personnalisée */
+  validate?: (date: Date) => boolean | string
+  /** Message d'erreur personnalisé */
+  message?: string
+  /** Dates désactivées (patterns) */
+  disabledDates?: Date[]
+  /** Fonction pour désactiver des dates */
+  disabledDatesFn?: (date: Date) => boolean
+  /** Jours de la semaine désactivés (0-6, 0 = Dimanche) */
+  disabledDaysOfWeek?: number[]
+  /** Dates highlightées */
+  highlightedDates?: Date[]
+  /** Fonction pour highlighter des dates */
+  highlightedDatesFn?: (date: Date) => boolean
+}
+
+/**
+ * Range de dates
+ */
+export interface DateRange {
+  from: Date | undefined
+  to: Date | undefined
+}
+
+/**
+ * Props du WakaDateTimePicker
+ */
+export interface WakaDateTimePickerProps {
+  /** Valeur actuelle (Date simple ou DateRange) */
+  value?: Date | DateRange | Date[] | null
+  /** Callback de changement */
+  onChange?: (date: Date | DateRange | Date[] | null) => void
+  /** Placeholder du champ */
+  placeholder?: string
+  /** Désactiver le picker */
+  disabled?: boolean
+  /** Classe CSS supplémentaire */
+  className?: string
+  /** Variant du picker */
+  variant?: "date" | "time" | "datetime" | "range" | "multiple"
+  /** Format d'affichage personnalisé */
+  format?: string
+  /** Date minimum */
+  minDate?: Date
+  /** Date maximum */
+  maxDate?: Date
+  /** Afficher les secondes */
+  showSeconds?: boolean
+  /** Afficher le bouton clear */
+  showClear?: boolean
+  /** Afficher les presets rapides */
+  showPresets?: boolean
+  /** Presets personnalisés */
+  presets?: DatePreset[]
+  /** Locale (fr, en, es, etc.) */
+  locale?: string
+  /** Format d'heure (12h ou 24h) */
+  timeFormat?: "12h" | "24h"
+  /** Taille du composant */
+  size?: "sm" | "md" | "lg"
+  /** Message d'erreur */
+  error?: string
+  /** Label du champ */
+  label?: string
+  /** Champ requis */
+  required?: boolean
+  /** Mode inline (sans popover) */
+  inline?: boolean
+  /** Nombre de mois à afficher */
+  monthsShown?: number
+  /** Intervalle de temps (en minutes) */
+  timeIntervals?: number
+  /** Validation */
+  validation?: DateValidation
+  /** Afficher les numéros de semaine */
+  showWeekNumbers?: boolean
+  /** Afficher le bouton "Aujourd'hui" */
+  showTodayButton?: boolean
+  /** Afficher les infos de sélection */
+  showSelectionInfo?: boolean
+  /** Autoriser la sélection de plage de temps */
+  allowTimeRange?: boolean
+  /** Timezone (pour affichage avancé) */
+  timezone?: string
+  /** Callback avant changement (peut annuler) */
+  onBeforeChange?: (date: Date | DateRange | Date[] | null) => boolean
+  /** Callback après changement */
+  onAfterChange?: (date: Date | DateRange | Date[] | null) => void
+  /** Render personnalisé pour une date */
+  renderDay?: (date: Date) => React.ReactNode
+  /** Classe pour le container du popover */
+  popoverClassName?: string
+  /** Désactiver les animations */
+  disableAnimations?: boolean
+  /** Mode lecture seule */
+  readOnly?: boolean
+  /** ID du champ (pour les tests) */
+  id?: string
+  /** Name du champ (pour les formulaires) */
+  name?: string
+  /** Auto-focus */
+  autoFocus?: boolean
+}
+
+/**
+ * WakaDateTimePicker
+ * 
+ * Composant datetime picker ultra-complet avec support de :
+ * - Date, time, datetime, range, multiple selection
+ * - Presets rapides
+ * - Validation avancée
+ * - I18n complet
+ * - Thème dynamique
+ * - Keyboard navigation
+ * - Accessibilité (ARIA)
+ * - Time zones
+ * - Custom renders
+ */
+export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimePickerProps>(
+  ({
+    value,
+    onChange,
+    placeholder,
+    disabled = false,
+    className,
+    variant = "date",
+    format: customFormat,
+    minDate,
+    maxDate,
+    showSeconds = false,
+    showClear = true,
+    showPresets = false,
+    presets: customPresets,
+    locale = "fr",
+    timeFormat = "24h",
+    size = "md",
+    error,
+    label,
+    required = false,
+    inline = false,
+    monthsShown = 1,
+    timeIntervals = 15,
+    validation,
+    showWeekNumbers = false,
+    showTodayButton = true,
+    showSelectionInfo = false,
+    allowTimeRange = false,
+    timezone,
+    onBeforeChange,
+    onAfterChange,
+    renderDay,
+    popoverClassName,
+    disableAnimations = false,
+    readOnly = false,
+    id,
+    name,
+    autoFocus = false,
+  }, ref) => {
+    const { t } = useTranslation()
+    const [open, setOpen] = React.useState(false)
+    const [internalValue, setInternalValue] = React.useState<Date | DateRange | Date[] | null>(
+      variant === "range" && value && !('from' in value) ? { from: value as Date, to: undefined } : value as any
+    )
+    const [validationError, setValidationError] = React.useState<string | null>(null)
+    const [hoveredDate, setHoveredDate] = React.useState<Date | null>(null)
+
+    // Locales supportées
+    const localeMap: Record<string, any> = {
+      fr,
+      en: enUS,
+      es,
+      de,
+      it,
+      pt,
+      ja,
+      zh: zhCN,
+    }
+
+    const currentLocale = localeMap[locale] || fr
+
+    // Presets par défaut
+    const defaultPresets: DatePreset[] = [
+      {
+        label: t?.("today") || "Aujourd'hui",
+        value: () => new Date(),
+      },
+      {
+        label: t?.("yesterday") || "Hier",
+        value: () => subDays(new Date(), 1),
+      },
+      {
+        label: t?.("thisWeek") || "Cette semaine",
+        range: () => ({
+          from: startOfWeek(new Date(), { locale: currentLocale }),
+          to: endOfWeek(new Date(), { locale: currentLocale }),
+        }),
+      },
+      {
+        label: t?.("lastWeek") || "Semaine dernière",
+        range: () => ({
+          from: startOfWeek(subWeeks(new Date(), 1), { locale: currentLocale }),
+          to: endOfWeek(subWeeks(new Date(), 1), { locale: currentLocale }),
+        }),
+      },
+      {
+        label: t?.("thisMonth") || "Ce mois",
+        range: () => ({
+          from: startOfMonth(new Date()),
+          to: endOfMonth(new Date()),
+        }),
+      },
+      {
+        label: t?.("lastMonth") || "Mois dernier",
+        range: () => ({
+          from: startOfMonth(subMonths(new Date(), 1)),
+          to: endOfMonth(subMonths(new Date(), 1)),
+        }),
+      },
+      {
+        label: t?.("last7Days") || "7 derniers jours",
+        range: () => ({
+          from: subDays(new Date(), 7),
+          to: new Date(),
+        }),
+      },
+      {
+        label: t?.("last30Days") || "30 derniers jours",
+        range: () => ({
+          from: subDays(new Date(), 30),
+          to: new Date(),
+        }),
+      },
+      {
+        label: t?.("thisYear") || "Cette année",
+        range: () => ({
+          from: startOfYear(new Date()),
+          to: endOfYear(new Date()),
+        }),
+      },
+    ]
+
+    const activePresets = customPresets || (showPresets ? defaultPresets : [])
+
+    // Gestion des tailles
+    const sizeClasses = {
+      sm: "h-8 px-3 text-xs",
+      md: "h-10 px-4 text-sm",
+      lg: "h-12 px-5 text-base"
+    }
+
+    // Format par défaut selon le variant
+    const getDefaultFormat = (): string => {
+      switch (variant) {
+        case "time":
+          return showSeconds 
+            ? (timeFormat === "12h" ? "h:mm:ss a" : "HH:mm:ss")
+            : (timeFormat === "12h" ? "h:mm a" : "HH:mm")
+        case "datetime":
+          return showSeconds
+            ? (timeFormat === "12h" ? "PPP h:mm:ss a" : "PPP HH:mm:ss")
+            : (timeFormat === "12h" ? "PPP h:mm a" : "PPP HH:mm")
+        case "range":
+          return "PPP"
+        case "multiple":
+          return "PPP"
+        default:
+          return "PPP"
+      }
+    }
+
+    const displayFormat = customFormat || getDefaultFormat()
+
+    // Validation d'une date
+    const validateDate = (date: Date): string | null => {
+      if (!validation) return null
+
+      // Validation min/max
+      if (minDate && isBefore(date, startOfDay(minDate))) {
+        return t?.("dateBeforeMin") || `Date antérieure au ${format(minDate, displayFormat, { locale: currentLocale })}`
+      }
+      if (maxDate && isAfter(date, endOfDay(maxDate))) {
+        return t?.("dateAfterMax") || `Date postérieure au ${format(maxDate, displayFormat, { locale: currentLocale })}`
+      }
+
+      // Dates désactivées
+      if (validation.disabledDates?.some(d => isEqual(startOfDay(d), startOfDay(date)))) {
+        return validation.message || t?.("dateDisabled") || "Date désactivée"
+      }
+
+      // Fonction de désactivation
+      if (validation.disabledDatesFn?.(date)) {
+        return validation.message || t?.("dateDisabled") || "Date désactivée"
+      }
+
+      // Jours de semaine désactivés
+      if (validation.disabledDaysOfWeek?.includes(date.getDay())) {
+        return validation.message || t?.("dayOfWeekDisabled") || "Jour de la semaine désactivé"
+      }
+
+      // Validation personnalisée
+      if (validation.validate) {
+        const result = validation.validate(date)
+        if (result === false) {
+          return validation.message || t?.("invalidDate") || "Date invalide"
+        }
+        if (typeof result === "string") {
+          return result
+        }
+      }
+
+      return null
+    }
+
+    // Gestion du changement de date
+    const handleDateChange = (date: Date | [Date, Date] | null) => {
+      if (readOnly) return
+
+      let newValue: Date | DateRange | Date[] | null = null
+
+      if (variant === "range") {
+        if (Array.isArray(date) && date[0] && date[1]) {
+          newValue = { from: date[0], to: date[1] }
+        } else if (date) {
+          // Si une seule date, commence une range
+          const currentRange = internalValue as DateRange
+          if (currentRange?.from && !currentRange.to) {
+            newValue = { from: currentRange.from, to: date as Date }
+          } else {
+            newValue = { from: date as Date, to: undefined }
+          }
+        }
+      } else if (variant === "multiple") {
+        if (Array.isArray(internalValue)) {
+          const dates = [...internalValue]
+          const exists = dates.findIndex(d => isEqual(startOfDay(d), startOfDay(date as Date)))
+          if (exists >= 0) {
+            dates.splice(exists, 1)
+          } else {
+            dates.push(date as Date)
+          }
+          newValue = dates
+        } else {
+          newValue = date ? [date as Date] : []
+        }
+      } else {
+        newValue = date as Date | null
+      }
+
+      // Validation avant changement
+      if (onBeforeChange && !onBeforeChange(newValue)) {
+        return
+      }
+
+      // Validation
+      if (newValue && !(newValue as any).from && !Array.isArray(newValue)) {
+        const error = validateDate(newValue as Date)
+        if (error) {
+          setValidationError(error)
+          return
+        }
+      }
+
+      setValidationError(null)
+      setInternalValue(newValue)
+      onChange?.(newValue)
+      onAfterChange?.(newValue)
+
+      // Fermer le popover pour les sélections simples
+      if (variant !== "range" && variant !== "multiple" && !inline) {
+        setOpen(false)
+      }
+    }
+
+    // Appliquer un preset
+    const applyPreset = (preset: DatePreset) => {
+      if (preset.range) {
+        const range = typeof preset.range === "function" ? preset.range() : preset.range
+        handleDateChange([range.from, range.to])
+      } else if (preset.value) {
+        const date = typeof preset.value === "function" ? preset.value() : preset.value
+        handleDateChange(date)
+      }
+      if (!inline) {
+        setOpen(false)
+      }
+    }
+
+    // Effacer la sélection
+    const handleClear = (e?: React.MouseEvent) => {
+      if (e) {
+        e.stopPropagation()
+      }
+      if (readOnly) return
+      
+      setInternalValue(null)
+      setValidationError(null)
+      onChange?.(null)
+      onAfterChange?.(null)
+    }
+
+    // Sélectionner aujourd'hui
+    const handleToday = () => {
+      const today = new Date()
+      handleDateChange(today)
+    }
+
+    // Obtenir le texte affiché
+    const getDisplayText = (): string => {
+      if (!internalValue) return placeholder || t?.("selectDate") || "Sélectionner une date"
+
+      try {
+        if (variant === "range") {
+          const range = internalValue as DateRange
+          if (range.from && range.to) {
+            return `${format(range.from, displayFormat, { locale: currentLocale })} - ${format(range.to, displayFormat, { locale: currentLocale })}`
+          }
+          if (range.from) {
+            return `${format(range.from, displayFormat, { locale: currentLocale })} - ...`
+          }
+          return placeholder || t?.("selectDateRange") || "Sélectionner une période"
+        }
+
+        if (variant === "multiple") {
+          const dates = internalValue as Date[]
+          if (dates.length === 0) {
+            return placeholder || t?.("selectDates") || "Sélectionner des dates"
+          }
+          if (dates.length === 1) {
+            return format(dates[0], displayFormat, { locale: currentLocale })
+          }
+          return `${dates.length} ${t?.("datesSelected") || "dates sélectionnées"}`
+        }
+
+        return format(internalValue as Date, displayFormat, { locale: currentLocale })
+      } catch (e) {
+        console.error("Error formatting date:", e)
+        return placeholder || t?.("selectDate") || "Sélectionner une date"
+      }
+    }
+
+    // Vérifier si une date est désactivée
+    const isDateDisabled = (date: Date): boolean => {
+      if (minDate && isBefore(date, startOfDay(minDate))) return true
+      if (maxDate && isAfter(date, endOfDay(maxDate))) return true
+      if (validation?.disabledDates?.some(d => isEqual(startOfDay(d), startOfDay(date)))) return true
+      if (validation?.disabledDatesFn?.(date)) return true
+      if (validation?.disabledDaysOfWeek?.includes(date.getDay())) return true
+      return false
+    }
+
+    // Vérifier si une date est highlightée
+    const isDateHighlighted = (date: Date): boolean => {
+      if (validation?.highlightedDates?.some(d => isEqual(startOfDay(d), startOfDay(date)))) return true
+      if (validation?.highlightedDatesFn?.(date)) return true
+      return false
+    }
+
+    // Render du composant principal
+    const renderDatePicker = () => {
+    const pickerProps: any = {
+      selected: variant === "range" 
+        ? (internalValue as DateRange)?.from 
+        : variant === "multiple"
+          ? undefined
+          : (internalValue as Date),
+      onChange: handleDateChange,
+      startDate: variant === "range" ? (internalValue as DateRange)?.from : undefined,
+      endDate: variant === "range" ? (internalValue as DateRange)?.to : undefined,
+      selectsRange: variant === "range",
+      selectsMultiple: variant === "multiple",
+      highlightDates: variant === "multiple" ? (internalValue as Date[]) : undefined,
+        showTimeSelect: variant === "time" || variant === "datetime",
+        showTimeSelectOnly: variant === "time",
+        timeFormat: showSeconds
+          ? (timeFormat === "12h" ? "h:mm:ss aa" : "HH:mm:ss")
+          : (timeFormat === "12h" ? "h:mm aa" : "HH:mm"),
+        timeIntervals,
+        timeCaption: t?.("time") || "Heure",
+        dateFormat: displayFormat,
+        locale: locale,
+        placeholderText: placeholder,
+        disabled,
+        minDate,
+        maxDate,
+        inline,
+        monthsShown: variant === "range" ? Math.max(2, monthsShown) : monthsShown,
+        showWeekNumbers,
+        filterDate: (date: Date) => !isDateDisabled(date),
+        dayClassName: (date: Date) => {
+          const classes = []
+          if (isDateHighlighted(date)) {
+            classes.push("highlighted-date")
+          }
+          if (hoveredDate && variant === "range") {
+            const range = internalValue as DateRange
+            if (range?.from && !range.to && isWithinInterval(date, { 
+              start: range.from < hoveredDate ? range.from : hoveredDate,
+              end: range.from > hoveredDate ? range.from : hoveredDate 
+            })) {
+              classes.push("in-selecting-range")
+            }
+          }
+          return classes.join(" ")
+        },
+        onDayMouseEnter: (date: Date) => setHoveredDate(date),
+        calendarClassName: cn(
+          "waka-datepicker",
+          disableAnimations && "no-animations"
+        ),
+        wrapperClassName: "w-full",
+        autoFocus,
+      }
+
+      return (
+        <div className="flex gap-3">
+          {showPresets && activePresets.length > 0 && (
+            <div className="flex flex-col gap-1 min-w-[150px] border-r border-border pr-3">
+              <Label className="text-xs font-semibold text-muted-foreground mb-1">
+                {t?.("quickSelection") || "Sélection rapide"}
+              </Label>
+              <ScrollArea className="h-[300px]">
+                <div className="space-y-1">
+                  {activePresets.map((preset, index) => (
+                    <Button
+                      key={index}
+                      variant="ghost"
+                      size="sm"
+                      className="w-full justify-start text-xs"
+                      onClick={() => applyPreset(preset)}
+                    >
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+          
+          <div className="flex-1">
+            <DatePicker {...pickerProps} />
+            
+            {showSelectionInfo && internalValue && (
+              <div className="mt-3 p-2 bg-muted rounded-md text-xs space-y-1">
+                <div className="flex items-center gap-2">
+                  <Info className="h-3 w-3 text-muted-foreground" />
+                  <span className="font-medium">{t?.("selection") || "Sélection"} :</span>
+                </div>
+                <div className="text-muted-foreground pl-5">
+                  {getDisplayText()}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )
+    }
+
+    // Render inline
+    if (inline) {
+      return (
+        <div ref={ref} className={cn("space-y-2", className)} id={id}>
+          {label && (
+            <Label className="text-sm font-medium text-foreground">
+              {label}
+              {required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+          )}
+          
+          <div className="border border-border rounded-lg p-4 bg-card">
+            {renderDatePicker()}
+          </div>
+
+          {(error || validationError) && (
+            <div className="flex items-center gap-1.5 text-sm text-destructive">
+              <AlertCircle className="h-3.5 w-3.5" />
+              <span>{error || validationError}</span>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    // Render avec Popover
+    return (
+      <div ref={ref} className={cn("space-y-2", className)} id={id}>
+        {label && (
+          <Label htmlFor={`${id}-input`} className="text-sm font-medium text-foreground">
+            {label}
+            {required && <span className="text-destructive ml-1">*</span>}
+          </Label>
+        )}
+        
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id={`${id}-input`}
+              name={name}
+              variant="outline"
+              disabled={disabled || readOnly}
+              className={cn(
+                "w-full justify-between text-left font-normal",
+                !internalValue && "text-muted-foreground",
+                sizeClasses[size],
+                (error || validationError) && "border-destructive focus-visible:ring-destructive",
+                readOnly && "cursor-default opacity-70"
+              )}
+              aria-label={label || placeholder}
+              aria-invalid={!!(error || validationError)}
+              aria-required={required}
+            >
+              <span className="flex items-center gap-2 flex-1 truncate">
+                {variant === "time" ? (
+                  <Clock className="h-4 w-4 flex-shrink-0" />
+                ) : (
+                  <CalendarIcon className="h-4 w-4 flex-shrink-0" />
+                )}
+                <span className="truncate">{getDisplayText()}</span>
+              </span>
+              
+              <div className="flex items-center gap-1 flex-shrink-0 ml-2">
+                {internalValue && showClear && !readOnly && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div
+                          className="h-5 w-5 rounded hover:bg-destructive/10 flex items-center justify-center cursor-pointer"
+                          onClick={handleClear}
+                          role="button"
+                          aria-label={t?.("clear") || "Effacer"}
+                        >
+                          <X className="h-3 w-3 text-muted-foreground hover:text-destructive" />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{t?.("clear") || "Effacer"}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+                
+                {validationError && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <AlertCircle className="h-4 w-4 text-destructive" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{validationError}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+              </div>
+            </Button>
+          </PopoverTrigger>
+          
+          <PopoverContent 
+            className={cn("w-auto p-0", popoverClassName)} 
+            align="start"
+            sideOffset={4}
+          >
+            <div className="p-4">
+              {renderDatePicker()}
+            </div>
+            
+            {(showTodayButton || showClear) && (
+              <>
+                <Separator />
+                <div className="flex items-center justify-between p-3 gap-2">
+                  {showTodayButton && (
+                    <Button 
+                      variant="outline" 
+                      size="sm" 
+                      onClick={handleToday}
+                      disabled={disabled || readOnly}
+                    >
+                      <CalendarIcon className="h-3.5 w-3.5 mr-1.5" />
+                      {t?.("today") || "Aujourd'hui"}
+                    </Button>
+                  )}
+                  
+                  {showClear && internalValue && (
+                    <Button 
+                      variant="outline" 
+                      size="sm" 
+                      onClick={handleClear}
+                      disabled={disabled || readOnly}
+                      className="ml-auto"
+                    >
+                      <X className="h-3.5 w-3.5 mr-1.5" />
+                      {t?.("clear") || "Effacer"}
+                    </Button>
+                  )}
+                </div>
+              </>
+            )}
+          </PopoverContent>
+        </Popover>
+
+        {(error || validationError) && (
+          <div className="flex items-center gap-1.5 text-sm text-destructive">
+            <AlertCircle className="h-3.5 w-3.5" />
+            <span>{error || validationError}</span>
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+WakaDateTimePicker.displayName = "WakaDateTimePicker"
+