@wakastellar/ui 2.0.0 → 2.1.1

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

@@ -0,0 +1,277 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+export interface InputOTPProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
+  /** Nombre de champs OTP */
+  length?: number
+  /** Valeur contrôlée */
+  value?: string
+  /** Callback lors du changement */
+  onChange?: (value: string) => void
+  /** Callback quand l'OTP est complet */
+  onComplete?: (value: string) => void
+  /** Type de caractères acceptés */
+  pattern?: 'numeric' | 'alphanumeric' | 'alpha'
+  /** Afficher le contenu en clair ou masqué */
+  secure?: boolean
+  /** Désactiver le composant */
+  disabled?: boolean
+  /** Classe CSS personnalisée */
+  className?: string
+  /** Message d'erreur */
+  error?: string
+  /** Taille du composant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Séparer les groupes de champs */
+  separator?: number
+  /** Élément de séparation personnalisé */
+  separatorElement?: React.ReactNode
+}
+
+/**
+ * InputOTP - Composant de saisie de code à usage unique (OTP)
+ * 
+ * Composant accessible pour la saisie de codes de vérification, mots de passe temporaires, etc.
+ * Gère automatiquement le focus, la navigation au clavier et la validation des entrées.
+ * 
+ * @example
+ * ```tsx
+ * // OTP numérique simple
+ * <InputOTP length={6} onChange={(value) => console.log(value)} />
+ * 
+ * // OTP avec séparateur
+ * <InputOTP 
+ *   length={6} 
+ *   separator={3}
+ *   separatorElement={<span>-</span>}
+ *   onComplete={(code) => verifyCode(code)}
+ * />
+ * 
+ * // OTP sécurisé
+ * <InputOTP length={4} secure pattern="numeric" />
+ * ```
+ */
+export const InputOTP = React.forwardRef<HTMLDivElement, InputOTPProps>(
+  ({
+    length = 6,
+    value = "",
+    onChange,
+    onComplete,
+    pattern = 'numeric',
+    secure = false,
+    disabled = false,
+    className,
+    error,
+    size = 'md',
+    separator,
+    separatorElement = <span className="text-muted-foreground">-</span>,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState<string[]>(
+      value.split('').slice(0, length)
+    )
+    const inputsRef = React.useRef<(HTMLInputElement | null)[]>([])
+
+    // Synchroniser avec la valeur externe
+    React.useEffect(() => {
+      const newValue = value.split('').slice(0, length)
+      setInternalValue(newValue)
+    }, [value, length])
+
+    // Obtenir le pattern de regex selon le type
+    const getPattern = () => {
+      switch (pattern) {
+        case 'numeric':
+          return /^[0-9]$/
+        case 'alpha':
+          return /^[a-zA-Z]$/
+        case 'alphanumeric':
+          return /^[a-zA-Z0-9]$/
+        default:
+          return /^.$/
+      }
+    }
+
+    const regex = getPattern()
+
+    // Gérer le changement de valeur
+    const handleChange = (index: number, inputValue: string) => {
+      if (disabled) return
+
+      // Ne garder que le dernier caractère saisi
+      const char = inputValue.slice(-1)
+
+      // Vérifier si le caractère correspond au pattern
+      if (char && !regex.test(char)) return
+
+      const newValue = [...internalValue]
+      newValue[index] = char
+
+      setInternalValue(newValue)
+
+      // Appeler le callback onChange
+      const stringValue = newValue.join('')
+      onChange?.(stringValue)
+
+      // Si un caractère a été saisi et que ce n'est pas le dernier champ, passer au suivant
+      if (char && index < length - 1) {
+        inputsRef.current[index + 1]?.focus()
+      }
+
+      // Si l'OTP est complet, appeler onComplete
+      if (newValue.every(v => v !== '') && newValue.length === length) {
+        onComplete?.(stringValue)
+      }
+    }
+
+    // Gérer la suppression
+    const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (disabled) return
+
+      // Backspace
+      if (e.key === 'Backspace') {
+        e.preventDefault()
+        const newValue = [...internalValue]
+
+        if (newValue[index]) {
+          // Supprimer le caractère actuel
+          newValue[index] = ''
+          setInternalValue(newValue)
+          onChange?.(newValue.join(''))
+        } else if (index > 0) {
+          // Si le champ est vide, aller au précédent et supprimer
+          newValue[index - 1] = ''
+          setInternalValue(newValue)
+          onChange?.(newValue.join(''))
+          inputsRef.current[index - 1]?.focus()
+        }
+      }
+
+      // Delete
+      if (e.key === 'Delete') {
+        e.preventDefault()
+        const newValue = [...internalValue]
+        newValue[index] = ''
+        setInternalValue(newValue)
+        onChange?.(newValue.join(''))
+      }
+
+      // Flèches gauche/droite
+      if (e.key === 'ArrowLeft' && index > 0) {
+        e.preventDefault()
+        inputsRef.current[index - 1]?.focus()
+      }
+
+      if (e.key === 'ArrowRight' && index < length - 1) {
+        e.preventDefault()
+        inputsRef.current[index + 1]?.focus()
+      }
+
+      // Home / End
+      if (e.key === 'Home') {
+        e.preventDefault()
+        inputsRef.current[0]?.focus()
+      }
+
+      if (e.key === 'End') {
+        e.preventDefault()
+        inputsRef.current[length - 1]?.focus()
+      }
+    }
+
+    // Gérer le collage
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault()
+      if (disabled) return
+
+      const pastedData = e.clipboardData.getData('text/plain')
+      const chars = pastedData.split('').filter(char => regex.test(char)).slice(0, length)
+
+      const newValue = [...internalValue]
+      chars.forEach((char, i) => {
+        newValue[i] = char
+      })
+
+      setInternalValue(newValue)
+      onChange?.(newValue.join(''))
+
+      // Déplacer le focus sur le prochain champ vide ou le dernier
+      const nextEmptyIndex = newValue.findIndex(v => !v)
+      if (nextEmptyIndex !== -1) {
+        inputsRef.current[nextEmptyIndex]?.focus()
+      } else {
+        inputsRef.current[length - 1]?.focus()
+      }
+
+      // Si l'OTP est complet, appeler onComplete
+      if (newValue.every(v => v !== '') && newValue.length === length) {
+        onComplete?.(newValue.join(''))
+      }
+    }
+
+    // Gérer le focus - sélectionner tout le contenu
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      e.target.select()
+    }
+
+    // Tailles
+    const sizeClasses = {
+      sm: "h-8 w-8 text-sm",
+      md: "h-12 w-12 text-base",
+      lg: "h-16 w-16 text-lg",
+    }[size]
+
+    return (
+      <div ref={ref} className={cn("flex flex-col gap-2", className)}>
+        <div className="flex items-center gap-2">
+          {Array.from({ length }).map((_, index) => (
+            <React.Fragment key={index}>
+              <input
+                ref={(el) => (inputsRef.current[index] = el)}
+                type={secure ? 'password' : 'text'}
+                inputMode={pattern === 'numeric' ? 'numeric' : 'text'}
+                maxLength={1}
+                value={internalValue[index] || ''}
+                onChange={(e) => handleChange(index, e.target.value)}
+                onKeyDown={(e) => handleKeyDown(index, e)}
+                onPaste={handlePaste}
+                onFocus={handleFocus}
+                disabled={disabled}
+                className={cn(
+                  // Classes de base du thème
+                  "flex items-center justify-center rounded-md border border-input bg-background text-center font-medium transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  // Taille
+                  sizeClasses,
+                  // Erreur
+                  error && "border-destructive focus-visible:ring-destructive",
+                  // Valeur présente
+                  internalValue[index] && "border-primary"
+                )}
+                aria-label={`Caractère ${index + 1} sur ${length}`}
+                {...props}
+              />
+              {/* Séparateur */}
+              {separator && (index + 1) % separator === 0 && index < length - 1 && (
+                <div className="flex items-center justify-center">
+                  {separatorElement}
+                </div>
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+        {error && (
+          <p className="text-sm text-destructive" role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+InputOTP.displayName = "InputOTP"
+

package/src/components/label/index.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../utils/cn"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
+
+
+
+
+
+
+

package/src/components/language-selector/index.tsx

@@ -0,0 +1,341 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select"
+import { Check, ChevronDown, Globe } from "lucide-react"
+import { createPortal } from "react-dom"
+
+export interface Language {
+  code: string
+  label: string
+  flag?: string // Emoji ou URL d'image
+  flagEmoji?: string // Emoji du drapeau
+}
+
+export interface LanguageSelectorProps {
+  /** Liste des langues disponibles */
+  languages: Language[]
+  
+  /** Langue sélectionnée (code) */
+  value?: string
+  
+  /** Callback quand la langue change */
+  onChange?: (code: string) => void
+  
+  /** Afficher les drapeaux */
+  showFlags?: boolean
+  
+  /** Afficher les labels */
+  showLabels?: boolean
+  
+  /** Variant du composant */
+  variant?: "default" | "compact" | "minimal"
+  
+  /** État de chargement */
+  isLoading?: boolean
+  
+  /** Classe CSS personnalisée */
+  className?: string
+  
+  /** Texte du placeholder */
+  placeholder?: string
+  
+  /** Texte pour le screen reader */
+  ariaLabel?: string
+}
+
+/**
+ * LanguageSelector
+ * 
+ * Sélecteur de langue avec drapeaux et support du chargement dynamique.
+ * 
+ * Features:
+ * - Drapeaux emoji ou images
+ * - 3 variantes : default (select), compact (bouton), minimal (icon only)
+ * - Support du chargement asynchrone
+ * - Intégration avec LanguageProvider pour S3
+ */
+export function LanguageSelector({
+  languages,
+  value,
+  onChange,
+  showFlags = true,
+  showLabels = true,
+  variant = "default",
+  isLoading = false,
+  className,
+  placeholder = "Select language",
+  ariaLabel = "Select language",
+}: LanguageSelectorProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [mounted, setMounted] = React.useState(false)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const dropdownRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const selectedLanguage = languages.find(lang => lang.code === value)
+
+  const handleLanguageChange = (code: string) => {
+    onChange?.(code)
+    setIsOpen(false)
+  }
+
+  // Position du dropdown
+  const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0, left: 0 })
+
+  React.useEffect(() => {
+    if (isOpen && buttonRef.current && mounted) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      setDropdownPosition({
+        top: rect.bottom + 8,
+        left: rect.left
+      })
+    }
+  }, [isOpen, mounted])
+
+  // Variant default - Select standard
+  if (variant === "default") {
+    return (
+      <Select value={value} onValueChange={onChange} disabled={isLoading}>
+        <SelectTrigger className={cn("w-[180px]", className)}>
+          <SelectValue placeholder={placeholder}>
+            {selectedLanguage && (
+              <div className="flex items-center gap-2">
+                {showFlags && selectedLanguage.flagEmoji && (
+                  <span className="text-lg">{selectedLanguage.flagEmoji}</span>
+                )}
+                {showFlags && selectedLanguage.flag && !selectedLanguage.flagEmoji && (
+                  <img 
+                    src={selectedLanguage.flag} 
+                    alt={selectedLanguage.label}
+                    className="h-4 w-6 object-cover rounded"
+                  />
+                )}
+                {!showFlags && <Globe className="h-4 w-4 text-muted-foreground" />}
+                {showLabels && <span>{selectedLanguage.label}</span>}
+              </div>
+            )}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {languages.map((language) => (
+            <SelectItem key={language.code} value={language.code}>
+              <div className="flex items-center gap-2">
+                {showFlags && language.flagEmoji && (
+                  <span className="text-lg">{language.flagEmoji}</span>
+                )}
+                {showFlags && language.flag && !language.flagEmoji && (
+                  <img 
+                    src={language.flag} 
+                    alt={language.label}
+                    className="h-4 w-6 object-cover rounded"
+                  />
+                )}
+                {showLabels && language.label}
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    )
+  }
+
+  // Variant minimal - Icon only avec dropdown
+  if (variant === "minimal") {
+    const dropdownContent = isOpen && mounted ? (
+      <div 
+        ref={dropdownRef}
+        className="fixed z-[9999] min-w-[160px] rounded-md border border-border bg-popover text-popover-foreground p-2 shadow-lg"
+        style={{
+          top: `${dropdownPosition.top}px`,
+          left: `${dropdownPosition.left}px`,
+        }}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="grid gap-1">
+          {languages.map((language) => (
+            <button
+              key={language.code}
+              onMouseDown={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                handleLanguageChange(language.code)
+              }}
+              type="button"
+              className={cn(
+                "flex items-center gap-2 rounded-sm px-2 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer",
+                value === language.code && "bg-accent"
+              )}
+            >
+              {language.flagEmoji && (
+                <span className="text-lg">{language.flagEmoji}</span>
+              )}
+              {language.flag && !language.flagEmoji && (
+                <img 
+                  src={language.flag} 
+                  alt={language.label}
+                  className="h-4 w-6 object-cover rounded"
+                />
+              )}
+              <span className="flex-1 text-left">{language.label}</span>
+              {value === language.code && (
+                <Check className="h-4 w-4 shrink-0" />
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+    ) : null
+
+    return (
+      <>
+        <button
+          ref={buttonRef}
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            setIsOpen(!isOpen)
+          }}
+          className={cn(
+            "flex h-9 w-9 items-center justify-center rounded-md border border-input bg-transparent hover:bg-accent hover:text-accent-foreground transition-colors",
+            className
+          )}
+          title="Changer de langue"
+          type="button"
+          disabled={isLoading}
+        >
+          {selectedLanguage?.flagEmoji ? (
+            <span className="text-lg">{selectedLanguage.flagEmoji}</span>
+          ) : (
+            <Globe className="h-4 w-4" />
+          )}
+          <span className="sr-only">{ariaLabel}</span>
+        </button>
+        
+        {mounted && typeof document !== "undefined" && dropdownContent && createPortal(
+          <>
+            <div 
+              className="fixed inset-0 z-[9998]" 
+              onMouseDown={(e) => {
+                e.preventDefault()
+                setIsOpen(false)
+              }}
+            />
+            {dropdownContent}
+          </>,
+          document.body
+        )}
+      </>
+    )
+  }
+
+  // Variant compact - Bouton avec drapeau et chevron avec dropdown
+  const dropdownContent = isOpen && mounted ? (
+    <div 
+      ref={dropdownRef}
+      className="fixed z-[9999] min-w-[180px] rounded-md border border-border bg-popover text-popover-foreground p-2 shadow-lg"
+      style={{
+        top: `${dropdownPosition.top}px`,
+        left: `${dropdownPosition.left}px`,
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <div className="grid gap-1">
+        {languages.map((language) => (
+          <button
+            key={language.code}
+            onMouseDown={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              handleLanguageChange(language.code)
+            }}
+            type="button"
+            className={cn(
+              "flex items-center gap-2 rounded-sm px-2 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer",
+              value === language.code && "bg-accent"
+            )}
+          >
+            {showFlags && language.flagEmoji && (
+              <span className="text-lg">{language.flagEmoji}</span>
+            )}
+            {showFlags && language.flag && !language.flagEmoji && (
+              <img 
+                src={language.flag} 
+                alt={language.label}
+                className="h-4 w-6 object-cover rounded"
+              />
+            )}
+            <span className="flex-1 text-left">{language.label}</span>
+            {value === language.code && (
+              <Check className="h-4 w-4 shrink-0" />
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  ) : null
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          if (!isLoading) {
+            setIsOpen(!isOpen)
+          }
+        }}
+        className={cn(
+          "inline-flex items-center gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors",
+          isLoading && "opacity-50 cursor-not-allowed",
+          className
+        )}
+        disabled={isLoading}
+        type="button"
+        aria-label={ariaLabel}
+      >
+        {showFlags && selectedLanguage?.flagEmoji && (
+          <span className="text-lg">{selectedLanguage.flagEmoji}</span>
+        )}
+        {showFlags && selectedLanguage?.flag && !selectedLanguage?.flagEmoji && (
+          <img 
+            src={selectedLanguage.flag} 
+            alt={selectedLanguage.label}
+            className="h-4 w-6 object-cover rounded"
+          />
+        )}
+        {!showFlags && <Globe className="h-4 w-4" />}
+        {showLabels && (
+          <span>{selectedLanguage?.label || "Langue"}</span>
+        )}
+        <ChevronDown className="h-4 w-4" />
+      </button>
+      
+      {mounted && typeof document !== "undefined" && dropdownContent && createPortal(
+        <>
+          <div 
+            className="fixed inset-0 z-[9998]" 
+            onMouseDown={(e) => {
+              e.preventDefault()
+              setIsOpen(false)
+            }}
+          />
+          {dropdownContent}
+        </>,
+        document.body
+      )}
+    </>
+  )
+}
+